@charset "UTF-8";
/* colors: yellow #fdc021, red #cc3433, blue #0e2e71 */

/* ************************* CSS reset ************************* */ 

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding: 0; margin: 0; } fieldset, img { border: 0; } table { border-collapse: collapse; border-spacing: 0; } ol, ul { list-style: none; } address, caption, cite, code, dfn, em, strong, th, var { font-weight: normal; font-style: normal; } caption, th { text-align: left;	} h1, h2, h3, h4, h5, h6 { font-weight: bold; font-size: 100%; } q:before, q:after { content: ''; } abbr, acronym { border: 0; } * { box-sizing: border-box; } figure { margin: 0; }


/* ************************************************************* */

body {
	height: 100%;
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	color: #5d5d5d;
	}
 
/* ************************* containers ************************ */

nav {
	margin: 2rem;
	}
@media screen and (max-width:568px) {
		#home-nav {
		margin: 2rem 1.25rem 2rem 0;
    	float: right;
		}
	}
main {
	display: block;
	margin: 0 auto 10rem auto;
	max-width: 65%;
	min-height: 100vh; /* vh stands for viewport height */ 
	}	
@media screen and (min-width:1939px) {
	main {
		max-width: 50%;
		}
	}	
@media screen and (max-width:540px) {
	main {
		max-width: 80%;
		margin: 0 auto 3rem auto;
		}
	}
.features-wrapper { /* used for setting up columns in the features page */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	margin-bottom: 1rem;
	}
@media screen and (max-width:558px) {
	.features-wrapper {
		flex-direction: column;
		}
	}
.flex-item-features { /* used for setting up columns in the teams page */
	display: inline-block;
	padding: .5rem;
	}
.teams-wrapper { /* used for setting up columns in the teams page */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	}
.flex-item-team { /* used for setting up columns in the teams page */
	flex: 1;
	display: inline-block;
	padding: 1rem;
	}
.flex-item-nav {
	flex: 1;
	}
@media screen and (min-width:541px) {	
	.wrapper { /* used for logo and navigation placement on child pages */
		display: flex;
		flex-direction: row;
		margin: 2rem 2rem 7rem 2rem;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	}
@media screen and (max-width:540px) {
	.wrapper { /* used for logo and navigation placement on child pages */
		display: flex;
		flex-direction: column;
		margin: 2rem;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	.flex-item-nav { /* used for logo and navigation placement on child pages */
		display: block;
		margin: auto;
		}
	#nav-links {
		margin-top: 1.5rem;
		padding-right: 1.25em;
		}
	}
footer {
	background-color: #0e2e71; /* blue */
	color: #fff;
	text-align: center;
	height: auto;
	letter-spacing: 1.5rem;
	clear: both;
    overflow:hidden;
    bottom: 0px;
	width: 100%;
	}


/* ************************* type ************************* */

h1 {
	font-family: "Krona One", sans-serif;
	font-size: 1.35rem;
	margin-bottom: 1.75rem;
	text-transform: uppercase;
	letter-spacing: .15rem;
	line-height: 155%;
	}
@media screen and (max-width:540px) {
	h1#home-page-h1 {
		font-size: 1.15rem;
		text-align: left;
		margin-bottom: 1rem;
		}	
	h1#child-page-h1 {
		font-size: 1.25rem;
		text-align: center;
		margin-bottom: .5rem;
		}	
	h1 {
		font-size: 1rem;
		text-align: center;
		margin-bottom: 1rem;
		}
	}
h2 {
	font-family: "Open Sans", sans-serif;
	font-size: 1.185rem;
	margin-bottom: 1rem;
	font-weight: 400;
	line-height: 155%;
	}
h2.feature, h2.feature a {
	font-family: "Open Sans", sans-serif;
	font-size: 1.185rem;
	font-weight: bold;
	line-height: 135%;
	color: #cc3433;
	}
@media screen and (max-width:558px) {
	h2.feature, h2.feature a  {
		text-align: center;
		}
	}
h2.krona {
	font-family: "Krona One", sans-serif;
	font-size: 1.15rem;
	margin-bottom: 1rem;
	text-transform: uppercase;
	letter-spacing: .15rem;
	}
.title {
	font-style: italic;
	font-size: 1.1rem;
	}
a {
	text-decoration: none;
	color: #5d5d5d;
	}
a:hover {
	color: #cc3433;
	}
p {
	font-size: 1.05em;
	color: #5d5d5d;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: .01rem;
	margin-bottom: 1.15rem;
	line-height: 185%;
	}
p.intro {
	line-height: 205%;
	}
nav p {
    font-size: .9rem;
    letter-spacing: .15rem;
    text-align: right;
	line-height: 80%;
	}
@media screen and (max-width:540px) {
	nav p {
		text-align: center;
		line-height: 55%;
		letter-spacing: .2rem;
		}
	nav#home-nav {
		margin-bottom: 2.75rem;
		}	
	nav#home-nav p {
		text-align: right;
		line-height: 55%;
		letter-spacing: .2rem;
		}
	}
#story-intro {
	font-size: 1.1rem;
	letter-spacing: .05rem;
	text-transform: uppercase;
	}
.qanda {
	font-family: "Open Sans", sans-serif;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: .5rem;
	}
p.feature-desc {
	font-size: 1.05em;
	color: #5d5d5d;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: .01rem;
	line-height: 170%;
	margin: 0;
	}
footer p a {
	color: #fff;
	font-size: .9rem;
	}
.links {
	color: #cc3433; /* red */
	font-weight: 700 !important;
	}
.red {
	color: #cc3433; /* red */
	padding: 0.725rem;
	}
.kerned {
	padding: 0.725rem;
	}
.vision-mission-values {
	font-weight: bold !important;
	letter-spacing: .5rem;
	}
.bold {
	font-weight: bold;
	}
.bold-1 {
	font-weight: bold !important;
	color: #cc3433;
	}
.italic {
	font-style: italic;
	}
.center { /* used for names and titles in teams page */
	text-align: center;
	}
.close-in { /* used for titles in team page */
	margin-top: -.5rem;
	}
.footnote {
	font-size: 1rem;
	margin-top: 4rem;
	}
#copyright {
	padding-top: 3rem;
	color: #fff;
	font-size: .9rem;
	letter-spacing: 2rem;
	text-align: center;
	}
.copyright-notice, .footer-dots {
	color: #fff;
	font-size: .7rem;
	line-height: 200%;
	text-align: center;
	}
.copyright-notice {
	letter-spacing: .08rem;
	margin: 2.5rem 12rem;
	}
.footer-dots {
	letter-spacing: 1.25rem;
	}
#copyright {
	letter-spacing: 2rem;
	}
@media screen and (max-width:750px) {
	#copyright {
		letter-spacing: 1.5rem;
		}	
	.copyright-notice {
		margin: 3.5rem 4rem;
		}
	}
@media screen and (max-width:450px) {
	#copyright {
		letter-spacing: .75rem;
		}
	}


/* *************************** figure ************************* */

figure { /* see examples - photos on the about page with captions */
	display: table;
	width: 100%;
	height: auto;
	}
figcaption {
	display: table-caption;
    caption-side: bottom;
	font-style: italic;
	font-size: 1rem;
	margin: .75rem auto;
	font-family: "Open Sans", sans-serif;
	line-height: 150%;
	}


/* ************************* images ************************* */

#logo { /* for the large logo on the homepage */
	display: block;
	margin: 0 auto 4.5rem auto;
	height: auto;
	width: 100%;
	}
@media screen and (max-width:500px) {
	#logo {
		padding-right: .5rem;
		margin: 0 auto 2.35rem auto;
		}
	}
#logo-sm img { /* for the small logo on each page, upper left */
	float: left;
	display: inline-block;
	}
@media screen and (max-width:600px) {
	#logo-sm img { 
		display: block !important;
		margin: 2rem auto;
		}
	}
#sun-outline { /* this is the large rotating sunOutline-2.png had stroke of .5, was changed to .83 1.6.24 */
	z-index: -10;
	top: -21rem; /* was -20rem changed 1.6.24 */
	right: -7.75rem; /* was -23rem changed 1.6.24 */
	position: fixed;
	}
.rotate-image {
	animation: rotation 800s linear infinite; /* rotation was 250s, changed 1.6.24 */
	}
@keyframes rotation {
 	from {
   		transform: rotate(0deg);
  		}
  	to {
    	transform: rotate(359deg);
  		}
	}
@media screen and (max-width:460px) {
	#sun-outline {
		display: none;
		}
	}
#top-image { /* for the main top image of each story */
	margin-bottom: 2rem;
	width: 100%;
	height: auto;
	border-radius: .75rem;
	}
@media screen and (max-width:540px) {
	#top-image {
		width: 100%;
		}
	}
.round { /* for slideshow images with a round, yellow border on *** HOMEPAGE***  */
	width: 100%;
	border: .45rem solid #fdc021;
	-webkit-border-radius: 50%;
	-moz-border-radius: .50%;
	border-radius: 50%;
	}
.round-small { /* for images with a round, yellow border on *** TEAMS*** page */
	border-radius: 50%;
	border: .45rem solid #fdc021;
	display: block;
	margin: 1rem auto;
	}
.photo-right {
	float: right;
	margin: 0 0 .5rem 1.25rem;
	}
.photo-left {
	float: left;
	margin: .5rem 1.95rem .5rem 0;
	}
@media screen and (max-width:540px) {
	.photo-right, .photo-left {
		width: 100%;
		}	
	.photo-right, .photo-left, .centered-img {
		display: block;
		margin: .5rem auto 1rem auto;
		}
	}
.drop-shadow {
	box-shadow: 9px 10px 16px -2px rgba(143, 143, 143, 0.5);
	}
@media screen and (max-width:1023px) {
	.hide img, .hide p {
		display: none !important;
		}
	}
.rounded-corner {
	border-radius: .55rem;
	}
@media screen and (max-width:558px) {
	.rounded-corner {
		display: block;
		margin: auto;
		}
	}


/* ************************* slideshow ************************* */

.my-slides {
	display: none;
	border-radius: 50%;
	border: .45rem solid #fdc021;
	width: 100%;
	height: auto;
	}

/* ************************* up-arrow ************************* */

@media screen and (min-width:1025px) {
	#up-arrow {
		display: none;
		}
	}
@media screen and (max-width:1024px) {
	#up-arrow {
		background-color: #fdc021; /* yellow bkgrnd */
		position: fixed;
		right: 0;
		bottom: 2rem;
		border-radius: .5rem 0 0 .5rem;
		font-size: 1.5rem;
		padding: 0 .5rem .45rem .5rem;
		}
	#up-arrow:hover {
		color: #0e2e71;
		border-radius: .9rem 0 0 .8rem;
		font-weight: 700;
		}
	#up-arrow a {
		color: #fff;
		}	
	#up-arrow a:hover {
		font-weight: 700;
		}
	}
.read-more-arrow {
	font-size: 1.5rem;
	color: #cc3433;
	}

/* ************************* social media ************************* */

.soc-med-icons {
	color: #8e8d8d;
	}
.soc-med-icons:hover {
	color: #cc3433;
	}

@media screen and (min-width:1024px) {
	aside#soc-media {
		position: fixed;
		top: 12.75rem;
		left: 2rem;
		}
	#soc-media-bottom { /* this div can be found in the footer.html file, so social media links need to be updated her in additon to the top of each page */
		display: none;
		}
	.soc-med-icons {
		margin: 2.5rem auto; 				
		display: block;
		font-size: 1.15rem;
		}
	}
@media screen and (max-width:1023px) {
	#soc-media-bottom { /* this div can be found in the footer.html file, so social media links need to be updated her in additon to the top of each page */
		text-align: center;
		}
	aside#soc-media {
		display: none;
		}
	.soc-med-icons {
		margin: 2rem .9rem; 	
		font-size: 1.3rem;
		}
	}


/* ************************* line ************************* */

hr { 
	border-top: .075rem dotted #0e2e71; /* grey line */
	margin: 3rem auto 1.5rem auto;
	}
.hr-red { 
	border-top: .085rem dotted #cc3433;  
	margin: 0 auto 1rem auto;
	}
.hr-yellow { 
	border-top: .09rem dotted #fdc021;  
	margin: 2.15rem auto 2.15rem auto;
	}
@media screen and (min-width:541px) {
	hr#child-nav-hr {
		display: none;
		}
	}
@media screen and (max-width:540px) {
	hr#child-nav-hr {
		border-top: .085rem dotted #cc3433;  
		margin: .85rem auto .15rem auto;
		width: 100%;
		}
	}

/* ************************* modal ************************* */

/* modal background */
#modal-button {
	color: #0e2e71;
  	font-size: 1.2rem;
  	text-decoration: none;
	letter-spacing: .04rem;
	background-color: transparent !important;
	border: none;
	margin: 1rem auto;
	cursor: pointer;
	font-weight: bold;
	}
#modal-button:hover {
	color: #cc3433;
	}
.modal {
 	display: none; /* Hidden by default */
  	position: fixed; /* Stay in place */
  	z-index: 1;
  	left: 0;
  	top: 0;
  	width: 100%; /* Full width */
  	height: 100%; /* Full height */
  	overflow: auto !important; /* Enable scroll if needed */
  	background-color: rgb(0,0,0); /* Fallback color */
  	background-color: rgba(0,0,0,0.75); /* Black w/ opacity */
	}
/* modal content box */
.modal-content {
 	background-color: #fff;
  	margin: 10% auto; /* 10% from the top and centered */
  	padding: 1.5rem;
  	width: 75%; 
	text-align: center;
	border-top: .35rem solid #fdc021;
	background-image: url("links/sun.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	border-radius: .35rem;
	}
/* close button */
.close {
 	color: #cc3433;
  	float: right;
  	font-size: 2.15rem;
  	font-weight: bold;
	}
.close:hover,
.close:focus {
 	color: #fdc021;
  	text-decoration: none;
  	cursor: pointer;
	}