/* Extra small devices (phones, <576px and down) */
@media only screen and (max-width: 575px) {

	body {
		font-size: 18px;
	}

}

/* Small devices (portrait tablets and large phones, 576px and up) */
@media only screen and (min-width: 576px) and (max-width: 768px) {

	body {
		font-size: 20px;
	}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 769px) and (max-width: 992px) {

	body {
		font-size: 22px;
	}

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 993px) and (max-width: 1200px) {

	body {
		font-size: 24px;
	}

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1201px) {

	body {
		font-size: 26px;
	}

}

/* Styling for all elements which do not change in styling across 5 screen widths */

hr.section {
	border-width: 1px;
	border-color: var(--prim-dark);
}

hr.page {
	border-width: 2px;
	border-color: var(--prim-dark);
}

.logo_container {
	margin: auto;
	padding: 0.2em;

	width: 100%;

	background-color: var(--prim-light);
	background-image: url("/images/ESLogo.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 2.5em;
	height: 3em;
}

.logo_container:hover {
	background-image: url("/images/ESLogoHover.svg");	
}

h1 {
	margin: auto;
	padding: 0.2em;
	
	font-family: 'Oswald', sans-serif;
	font-size: 1.4em;
	font-weight: 500;

	color: var(--prim-shade-faded);
}

h2 {
	margin: auto;
	padding:  0.2em;

	font-family: 'Oswald', sans-serif;
	font-size: 1.1em;
	font-weight: 400;

	color: var(--prim-shade-dim);
}

h3 {
	margin: auto;
	padding:  0.2em;
	
	font-family: 'Raleway', sans-serif;
	font-size: 1em;
	font-weight: 200;	

	color: var(--prim-shade-dark);
}

label {
	margin: 0.2em;
	padding: 0.3em;

	font-family: 'Oswald', sans-serif;
	font-size: 0.9em;
	font-weight: 300;

	color: var(--prim-shade-dark);
}

.data_section_head {
	display: block;

	margin-left: auto;
	margin-right: auto;

	width: 100%;

	font-family: 'Oswald', sans-serif;
	font-size: 0.9em;
	font-weight: 400;

	color: var(--prim-shade-dark);
	background-color: var(--prim-shade-faded);
}

.data_section_subhead {
	display: block;

	margin-left: auto;
	margin-right: auto;

	width: 100%;

	font-family: 'Oswald', sans-serif;
	font-size: 0.8em;
	font-weight: 300;

	color: var(--sec-shade-dark);
	background-color: var(--sec-shade-faded);
}

.data_pair_point {
	display: inline;
	float: left;
	
	margin-left: auto;
	margin-right: auto;

	width: 50%;

	font-size: 0.7em;
	font-weight: 300;
	
	background-color: var(--prim-shade-light);
}
.data_pair_head {
	display: inline;
	float: left;

	margin-left: auto;
	margin-right: auto;

	width: 50%;
	
	font-size: 0.7em;
	font-weight: 200;
	
	background-color: var(--prim-shade-white);
}
.data_pair_subpoint {
	display: inline;
	float: left;
	
	margin-left: auto;
	margin-right: auto;

	width: 50%;

	font-size: 0.6em;
	font-weight: 300;
	
	background-color: var(--sec-shade-light);
}
.data_pair_subhead {
	display: inline;
	float: left;

	margin-left: auto;
	margin-right: auto;

	width: 50%;
	
	font-size: 0.6em;
	font-weight: 200;
	
	background-color: var(--sec-shade-white);
}


input {
	margin: 0.2em;
	padding: 0.3em;

	font-family: 'Nanum Gothic Coding', monospace;
	font-size: 0.9em;
	font-weight: 400;

	color: var(--prim-shade-dark);
}

input[type=textbox] {
	box-sizing: border-box;
	width: 80%;
	max-width: 400px;

	border-radius: 5px;

	color: var(--prim-shade-dark);
	border-color: var(--prim-shade-light);

}

input[type=textbox]:focus {
	outline: none;
}

.radio_set {
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	margin-left: auto;
	margin-right: auto;

	font-family: 'Oswald', sans-serif;

	color: var(--prim-shade-dark);
}

input[type=radio] {
	transform: scale(1.7);
	accent-color: var(--prim-shade-dim);
}

.radio_set label {
	margin: none;
	padding: none;
	
	font-family: 'Oswald', sans-serif;
	font-size: 0.9em;
	font-weight: 300;

	color: var(--prim-shade-dark);
}

.radio_set input[type=radio] {
	margin: none;
	padding: none;

	font-family: 'Oswald', sans-serif;
	font-size: 2em;
	font-weight: 300;
}

button, input[type=button] {
	margin: 0.2em;
	padding: 0.3em;

	border-radius: 5px;

	color: var(--prim-shade-dark);
	background-color: var(--prim-shade-white);
}

button.small, input[type=button].small {

	min-width: 80px;

	border: none;
	box-shadow: none;

	font-family: 'Oswald', sans-serif;
	font-size: 1em;
	font-weight: 400;
}

button.regular, input[type=button].regular {

	min-width: 120px;

	border: none;
	box-shadow: none;

	font-family: 'Oswald', sans-serif;
	font-size: 1em;
	font-weight: 400;
}

button.large, input[type=button].large {

	min-width: 240px;

	border: none;
	box-shadow: none;

	font-family: 'Oswald', sans-serif;
	font-size: 1em;
	font-weight: 400;	
}

button:disabled, input[type=button]:disabled {
	color: var(--prim-shade-faded);
	background-color: var(--prim-shade-white);
}

button:hover:not([disabled]), input[type=button]:hover:not([disabled]) {
	/* color: var(--accent-dim) */;
	background-color: var(--prim-shade-light);}

blockquote {
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	margin-left: auto;
	margin-right: auto;
	padding:  0.5em;

	border-width: 1px;
	border-style: solid;
	border-radius: 5px;
	
	font-family: 'Tangerine', cursive;
	font-size: 1.8em;
	font-weight: 400;

	width: 60%;
	min-width: 300px;
	max-width: 700px;
}
blockquote:before, blockquote:after {
	font-size: 4em;
	line-height: 0.5em;
}
blockquote:before {
	content: open-quote;
	vertical-align: text-bottom;
	text-indent: -2em;
}
blockquote:after {
	content: close-quote;
	vertical-align: text-top;
	text-indent: 2em;
}

blockquote.primary {
	color: var(--prim-shade-dark);
	border-color: var(--prim-shade-light);
	box-shadow: 1px 1px 1px 1px var(--prim-shade-white);
}
blockquote.primary:before, blockquote.primary:after { 
	color: var(--prim-shade-faded); 
}


blockquote.secondary {
	color: var(--sec-shade-dark);
	border-color: var(--sec-shade-light);
	box-shadow: 1px 1px 1px 1px var(--sec-shade-white);
}
blockquote.secondary:before, blockquote.secondary:after { 
	color: var(--sec-shade-faded); 
}

p {
	display:  block;

	margin: auto;
	padding:  0.2em;
	
	font-family: 'Cormorant Garamond', serif;;
	font-size: 1em;
	font-weight: 400;

	color: var(--prim-shade-black);
}

p a {
	color: var(--prim-shade-dim);
	text-decoration: none;
}

p a:hover {
	color: var(--sec-muted);
	text-decoration: none;
}

.caption {
	margin: auto;
	padding: 0.2em;
	
	font-family: 'Raleway', sans-serif;
	font-style:  italic;
	font-size: 0.8em;
	font-weight: 200;

	color: var(--sec-shade-dark);
}

img {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.5em;
	margin-bottom: 0.5em;

	border-radius: 3px;
	border-color: var(--sec-shade-light);
}

img.thumbnail {
	max-width: 3em;
	max-height: 3em;

	min-width: 1.5em;
	min-height: 1.5em;

	object-fit: cover;
	object-position: center;

	box-shadow: 1px 1px 1px 1px var(--sec-shade-white);
}
img.thumbnail:hover {box-shadow: 3px 3px 2px 2px var(--prim-shade-light);}

img.icon {
	height: 1.8em;
	width: 1.8em;

	object-fit: contain;
	object-position: center;
}

img.inset{
	max-width: 3em;
	max-height: 3em;

	object-fit: cover;
	object-position: center;
}

img.wrapleft {
	display: inline;
	float: left;

	margin-left: none;
	margin-right: 1em;
}

img.wrapright {
	display: inline;
	float: right;

	margin-left: 1em;
	margin-right: none;
}

img.photo {
	display:  block;

	max-width: 600px;
	width: 80%;
	height: auto;

	object-fit: contain;
	object-position: center;

	box-shadow: 1px 1px 1px 1px var(--sec-shade-white);
}

img.display {
	display:  block;

	max-width: 30em;
	width: 80%;
	height: auto;

	object-fit: contain;
	object-position: center;
}

img.wide {
	display:  block;

	width: 80%;
	height: auto;

	object-fit: contain;
	object-position: center;
}

img.logo {
	display: block;
	width: auto;
	height: 2.5em;

	object-fit: contain;
	object-position: center;
}

code {
	display: block;

	margin: 0.2em;
	padding: 0.3em;

	font-family: 'Nanum Gothic Coding', monospace;
	font-size: 1em;
	font-weight: 400;
	
	border-radius: 3px;
	border-width: 1px;
	border-style: solid;

	color: var(--sec-dark);
	border-color: var(--sec-shade-white);
	/*background-color: var(--prim-shade-white);*/
}

/* how links look and behave */
a {color: inherit;	text-decoration: none;}
a:hover {color: var(--accent-fluor); text-decoration: none;}

/* Use these to aligns sub-elements or text contained within */
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}

.top {vertical-align: top;}
.middle {vertical-align: middle;}
.bottom {vertical-align: bottom;}

ul {padding-inline-start: 0px;}

.header {
	width: 100%;
	overflow:  auto;
	background-color: var(--prim-light);
}

.header ul {}

.header ul li {
	list-style-type: none;

	padding: 0.5em;
	float: left;

	font-family: 'Oswald', sans-serif;
	font-size: 0.8em;
	font-weight: 400;

	color: var(--prim-dark);
}

.header ul li a {
	color: var(--prim-dark);
	text-decoration: none;
}

.header ul li a:hover {color: var(--accent-fluor);}

.footer {
	width: 100%;
	margin-top: 0.5em;
	overflow: auto;

	background-color: var(--prim-light);
}

.footer ul {
	overflow:  auto;
	padding-top: 0.25em;
	padding-bottom: 0em;
	padding-left: 1em;
	padding-top: 0em;
}

.footer ul li {
	list-style-type: none;

	padding: 0em;
	
	width: 25%;
	float: left;

	font-family: 'Oswald', sans-serif;
	font-size: 0.8em;
	font-weight: 400;

	color: var(--prim-dark);
}

.footer ul li a {
	color: var(--prim-dark);
	text-decoration: none;
}

.footer ul li a:hover {color: var(--accent-fluor);}

.footer ul li ul {padding: 0px;}

.footer ul li ul li {
	list-style-type: none;
	
	padding: 0.5em;
	width: 100%;
	
	font-family: 'Oswald', sans-serif;
	font-size: 0.8em;
	font-weight: 200;

	color: var(--prim-dark);
}

.footer ul li ul li a {
	color: var(--prim-dark);
	text-decoration: none;
}

.footer ul li ul li a:hover {
	color: var(--accent-fluor);
}

form {
	display: block;

	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	margin-bottom: 1em;
	padding: 1em;

	width: 100%;
	min-width: 300px;
	max-width: 800px;
	
	border-width: 1px;
	border-style: solid;
	border-radius: 5px;

	border-color: var(--prim-shade-light);
	box-shadow: 1px 1px 1px 1px var(--prim-shade-white);
}

canvas {
	width: 100%;
	height: 100%;
}

.loader {
	margin: auto;
	border: 0.5em solid var(--prim-light);
	border-top: 0.5em solid var(--prim-dark); /* Blue */
	border-radius: 50%;
	width: 3em;
	height: 3em;
	animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}