/* base styles */

html
{
	font-size: 16px;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*, *:before, *:after
{
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

body
{
	overflow: hidden; /* to lock scrolling while preloader does its thing */
	background-color: #ffffff;
	color: #000000; /* global text color */
}

b, strong
{
	font-family: 'gt-america-mono-medium';
	font-weight: inherit;
}

p, li, label
{
	font-family: 'gt-america-mono-light';
	letter-spacing: -0.02rem;
}

a
{
	text-decoration-thickness: 1px;
	cursor: pointer;
	color: #000000;
}

button:hover
{
	cursor: pointer;
}

img
{
	display: block;
}

hr
{
	border: none;
	border-top: 1px solid #000000;
}

h1
{
	font-family: 'gt-america-mono-light';
	font-size: 0.875rem;
	font-weight: inherit;
	line-height: 100%;
	text-transform: uppercase;
	text-align: center;
}

h2
{
	font-family: 'gt-america-mono-medium';
	font-size: 0.875rem;
	letter-spacing: -0.02rem;
	font-weight: inherit;
	margin-bottom: 1.25rem;
}


/* global content styles */

#page
{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: auto; /* to force margin bottom to appear on content pages */
}

.compact
{
	padding: 0 20rem;
}

.offset
{
	margin-top: 7.5rem;
	margin-bottom: 7.5rem;
}

.standard p
{
	font-size: 0.875rem;
}

.standard p:not(:last-child)
{
	margin-bottom: 1.25rem;
}

.standard h2
{
	margin-top: 2.5rem;
}

.standard p, .standard li
{
	line-height: 150%;
}

.standard ul
{
	margin-bottom: 1.25rem;
}

#pic-container
{
	position: absolute;
	display: flex;
	width: 100%;
	height: 100%;
	padding: 5rem;
	align-items: center;
}

#pic
{
	margin: 0 auto;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#caption
{
	position: absolute;
	width: 100%;
	padding: 1.25rem;
	bottom: 0;
}

#caption p
{
	font-size: 0.875rem;
	line-height: 150%;
	text-align: center;
}

#navigation
{
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	display: flex;
	align-items: center;
}

#navigation div
{
	width: 50%;
}

#navigation div:first-child
{
	padding-left: 1.25rem;
}

#navigation div:last-child
{
	padding-right: 1.25rem;
}

#navigation a
{
	pointer-events: auto;
	font-family: 'gt-america-mono-light';
	font-size: 0.875rem;
	letter-spacing: 0;
	text-transform: uppercase;
}

#navigation img
{
	height: 0.75rem;
	width: auto;
}

#navigation div:last-child img
{
	margin-right: 0;
	margin-left: auto;
}


/* header and footer styles */

brand
{
	position: fixed;
	display: flex;
	width: 100%;
	height: 1.25rem;
	top: 1.25rem;
	align-items: center;
	z-index: 2;
}

brand img
{
	position: absolute;
	height: 1rem;
	width: auto;
	left: 50%;
	transform: translateX(-50%);
}

open
{
	position: fixed;
	display: flex;
	height: 1.25rem;
	top: 1.25rem;
	right: 1.25rem;
	align-items: center;
	z-index: 3;
}

open p
{
	text-align: right;
	text-transform: uppercase;
	font-size: 0.875rem;
	letter-spacing: 0;
	pointer-events: auto;
	margin-right: 0.3125rem;
}

open img
{
	height: 1rem;
	width: auto;
	right: 0;
}



/* nav menu styles */
#menu
{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.92);
	z-index: 4;
	text-align: center;
}

#menu primary
{
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'gt-america-mono-thin';
	padding: 0 20rem;
}

#menu primary a
{
	font-size: 2rem;
	text-decoration: none;
}

#menu secondary
{
	position: absolute;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
	bottom: 1.25rem;
	font-family: 'gt-america-mono-light';
}

#menu secondary p, #menu secondary a
{
	font-size: 0.875rem;
}

#menu hr
{
	margin: 0.625rem 0;
}

close
{
	position: fixed;
	display: flex;
	height: 1.25rem;
	top: 1.25rem;
	right: 1.25rem;
	align-items: center;
	z-index: 3;
}

close img
{
	height: 1rem;
	width: auto;
	right: 0;
}



/* form styles */

#upload
{
	width: 100%;
	margin-top: 2.5rem;
}

#upload p
{
	font-size: 0.875rem;
	margin: 1.25rem 0 0.3125rem 0;
}

#upload p.alert
{
	font-family: 'gt-america-mono-light-italic';
	color: #ff5544;
	margin: 0.3125rem 0 0 0;
}

#upload p.label
{
	font-family: 'gt-america-mono-light';
	font-size: 0.75rem;
	letter-spacing: 0.04rem;
	text-transform: uppercase;
}

#upload select
{
	color: rgba(0,0,0, 1);
	background-color: rgba(0,0,0, 0.06);
	font-family: 'gt-america-mono-light';
	font-size: 1rem;
	letter-spacing: -0.04rem;
	padding: 0.625rem;
	border-radius: 0;
	border: 1px solid rgba(0,0,0, 0.4);
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-align: left;
	text-align: -moz-left;
	text-align: -webkit-left;

	/* arrow */
	appearance: none;
	background-image: url('../img/ui/<?php echo $strViewMode ?>/dropdown.svg');
	background-repeat: no-repeat;
	background-position: right 0.625rem top 50%;
	background-size: 0.4375rem auto;
}

input, input[type=number], textarea, .custom-file-upload, #upload label
{
	color: rgba(0,0,0, 1);
	font-family: 'gt-america-mono-light';
	font-size: 0.875rem;
	letter-spacing: -0.04rem;
}

input, input[type=number], textarea
{
	background-color: rgba(0,0,0,0.02);
	padding: 0.625rem;
	border-radius: 0.3125rem;
	border: 1px solid rgba(0,0,0,0.16);
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-align: left;
	text-align: -moz-left;
	text-align: -webkit-left;
}

textarea
{
	height: 10rem;
	resize: none;
	line-height: 140%;
}

input[type="file"]
{
	display: none;
}

.custom-file-upload
{
	display: inline-block;
	padding: 0.625rem 1.25rem;
	border-radius: 0.625rem;
	border: 1px dotted rgba(0,0,0, 1.0);
	cursor: pointer;
	text-align: center;
}

.submit
{
	display: block;
	font-family: 'gt-america-mono-medium';
	font-size: 0.875rem;
	letter-spacing: 0.04rem;
	text-transform: uppercase;
	color: #000000;
	background-color: #ffffff;
	border-radius: 0;
	border: 1px solid #000000;
	box-shadow: 2px 2px #000000;
	padding: 0.625rem;
	text-align: center;
	max-width: 8rem;
	height: 2.5rem;
	text-decoration: none;
	pointer-events: auto;
	margin-top: 1.25rem;
}

input[type="submit"]:disabled
{
		opacity: 0.4;
}

.checkity
{
	margin-top: 1.25rem;
	display: block;
	position: relative;
	padding-left: 1.875rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* hide the default checkbox */
.checkity input
{
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* render the new checkbox */
.checkmark
{
	position: absolute;
	top: 0;
	left: 0;
	height: 1.25rem;
	width: 1.25rem;
	background-color: rgba(17,17,17, 0.16);
}

.checkity:hover input ~ .checkmark
{
	background-color: rgba(17,17,17, 0.32);
}

.checkity input:checked ~ .checkmark
{
	background-color: rgba(17,17,17, 0.64);
}

.checkmark:after
{
	content: "";
	position: absolute;
	display: none;
}

.checkity input:checked ~ .checkmark:after
{
	display: block;
}

.checkity .checkmark:after
{
	left: 0.475rem;
	top: 0.25rem;
	width: 0.3125rem;
	height: 0.625rem;
	border: solid white;
	border-width: 0 1px 1px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}




/* preloader and warning styles */

#preloader, *[id^='warning']
{
	position: fixed;
	width: 100%;
	height: 100%;
}

#preloader
{
	z-index: 5;
	background-color: #ffffff;
}

#preloader img
{
	position: absolute;
	height: 100%;
	width: 100%;
}

*[id^='warning']
{
	display: none;
	background-color: #ffffff;
}

#warning-wait
{
	z-index: 6;
}

*[id^='warning'] items
{
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#preloader p
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	letter-spacing: 0.02rem;
	text-transform: uppercase;
}

#preloader p, *[id^='warning'] p
{
	font-family: 'gt-america-mono-light';
	text-align: center;
	color: #000000;
}

#preloader p:first-child, *[id^='warning'] p
{
	font-size: 0.875rem;
}

#preloader p:last-child, *[id^='warning'] p
{
	-webkit-animation: blink 0.8s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation: blink 0.8s;
	-moz-animation-iteration-count: infinite;
	-o-animation: blink 0.8s;
	-o-animation-iteration-count: infinite;
}

#preloader p:last-child
{
	font-size: 6rem;
}

@-webkit-keyframes blink {
	0% {
			opacity: 1;
	}
	50% {
			opacity: 0;
	}
	100% {
			opacity: 1;
	}
}

@-moz-keyframes blink {
	0% {
			opacity: 1;
	}
	50% {
			opacity: 0;
	}
	100% {
			opacity: 1;
	}
}

@-o-keyframes blink {
	0% {
			opacity: 1;
	}
	50% {
			opacity: 0;
	}
	100% {
			opacity: 1;
	}
}