/***
These styles are specific to the NAACCR website.
Contains modifications to page template to accomodate the Explorer Application.
***/

/**************************************
Header
**************************************/
#skip, #skip:hover, #skip:visited { position: absolute; top: -20em; right: 44%; padding: .5rem 1rem; font-weight: bold; border: 1px solid #ccc; border-top: none; border-radius: 0 0 3px 3px; transition: all .2s ease-in-out; font-size: 1rem; color: #196fb2; }
#skip:active, #skip:focus { position: absolute; top: 0; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.7); }

.bannerWrap { display: flex; padding: 0 1.5rem; }

.naaccrLogo { display: inline-block; line-height: 0; max-width: 450px; padding: 10px 0; max-height: 53px; width: 100%; }
.naaccrLogo > img { width: 100%; }

/**************************************
Nav Bar
**************************************/
nav { background: #121a2e; }
.navWrap { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; position: relative; }
.logo { color: #fff; text-decoration: none; font-size: 1.4rem; padding: .75rem 0; }
.logo:hover, .logo:focus { opacity: .8; }

.navWrap button { display: none; }

.mobileState { display: flex; }
.navWrap ul { display: flex; padding: 0; margin: 0; list-style: none; }
.navWrap ul a { display: block; color: #fff; text-decoration: none; padding: .2rem 1rem; margin: 0 .25rem; font-size: .9rem; border-radius: 3px; transition: all .2s linear; }
.navWrap ul li:last-child a { margin-right: 0; }
.navWrap ul a:hover, .navWrap ul a:focus { background: rgba(255,255,255,.2); transition: all .2s linear; }
.navWrap ul li.active a { background: #196fb2; }

/* link back to NAACCR */
.navWrap ul li:last-child { border-left: 1px solid rgba(255, 255, 255, .2); }
.navWrap ul li:last-child a { color: #838383; transition: none; }
.navWrap ul li:last-child a:hover, .navWrap ul li:last-child a:focus { color: #fff; background: none; text-decoration: underline; transition: none; }
.navWrap ul li:last-child svg { margin-bottom: -2px; margin-left: 4px; }

@media only screen and (max-width: 1023px) {
	.mobileState { display: none!important; }
	.navWrap button { display: block; background: #890b4c; border: none; color: #fff; cursor: pointer; padding: 0 2rem; font-size: 1rem; align-self: stretch; margin-right: -1.5rem; margin-left: auto; }
	.navWrap button:hover, .navWrap button:focus { background: #660939; }
	.navWrap button svg { margin-bottom: -7px; }
	
	.line { fill: none; stroke: #fff; stroke-width: 6; transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); }
	.line1 { stroke-dasharray: 60 207; stroke-width: 6; }
	.line2 { stroke-dasharray: 60 60; stroke-width: 6; }
	.line3 { stroke-dasharray: 60 207; stroke-width: 6; }
	.navWrap button[aria-expanded="true"] .line1 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6; }
	.navWrap button[aria-expanded="true"] .line2 { stroke-dasharray: 1 60; stroke-dashoffset: -30; stroke-width: 6; }
	.navWrap button[aria-expanded="true"] .line3 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6; }
	
	.navWrap ul { display: block; width: calc(100% - 1.5rem); position: absolute; top: 100%; left: 0; background: #081b48; padding: 1.5rem .75rem; z-index: 10; justify-content: space-around; box-shadow: 0 3px 12px rgba(0,0,0,.5); }
	.navWrap ul a { font-size: 1.4rem; padding: 1rem; }
	
	/* link back to NAACCR */
	.navWrap ul li:last-child { border-top: 1px solid rgba(255, 255, 255, .2); border-left: none; }
}


/**************************************
Footer
**************************************/
/* return to top */
.returntop { position: fixed; bottom: 1rem; right: 1rem; display: none; z-index: 99; width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 8px rgba(0,0,0,.2); text-align: center; background: #196fb2; }
.returntop span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.returntop svg { border: 1px solid #fff; border-radius: 50%; margin-top: 5px; padding: 5px; height: 28px; width: 28px; }
.returntop svg path { fill: #fff; }
.returntop:hover, .returntop:focus { background: #fff; }
.returntop:hover svg, .returntop:focus svg { border-color: #196fb2; }
.returntop:hover svg path, .returntop:focus svg path { fill: #196fb2; }
@media (max-width: 768px) {
	.returntop { bottom: .5rem; right: .5rem; width: 35px; height: 35px; }
	.returntop svg { height: 13px; width: 13px; }
}

.footer { padding-bottom: 2rem; }
footer .container { max-width: 1200px; padding: 0 2rem; }
	
.footer-contact { background: #282e3e; text-align: center; }
.footer-contact h2 { display: inline-block; color: #fff; font-variant: all-small-caps; border-bottom: 1px dotted #fff; padding-bottom: .25rem; font-size: 1.3rem; }
.footer-contact ul { display: inline-flex; list-style: none; margin: 0; padding: 0; color: #a3a3a3; font-size: 1rem; }
.footer-contact li { margin-left: 1.5rem; }
.footer-contact li img { margin-bottom: -3px; }
.footer-contact a { color: #a3a3a3; text-decoration: none; }
.footer-contact a:hover, .footer-contact a:focus { text-decoration: underline; }

.footer-copy { font-size: .9rem; }
.footer-copy > p:first-child { border-top: 1px solid #d4d5d8; border-bottom: 1px solid #d4d5d8; padding: 1.5rem 0 1rem; line-height: 1.3; }

.footer-links { display: flex; align-items: center; }
.footer-links p { margin: 0 0 .5rem; }
.footer-links a { font-weight: bold; color: #000; text-decoration: none; }
.footer-links a:hover, .footer-links:focus { text-decoration: underline; }
.footer-links svg { margin-left: auto; }

@media (max-width: 900px) {
	.footer-contact { padding: .5rem 0; }
	.footer-contact h2 { margin: 0; border-bottom: 0; }
	.footer-contact ul { display: flex; flex-wrap: wrap; justify-content: center; }
	.footer-contact li { margin: .25rem 1rem; }

	.footer-links { align-items: flex-start; }
	.footer-links p { display: flex; flex-direction: column; }
	.link-divide { display: none; }
}

@media (max-width: 530px) {
	.footer-contact ul { flex-direction: column; }
	.footer-contact { text-align: left; }
}


/**************************************
Helpers
**************************************/
.sr-only { clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }

.d-flex { display: flex; }
.m-0 { margin: 0; }

strong { font-weight: 800; }

/* hide the BS modal until we replace it */
#imgModal, #printModal { display: none!important; }

/* borrow the SEER CTA button */
.greenBtn { background: #008000; border-bottom: 3px solid #004600; border-radius: 3px; color: #fff!important; text-decoration: none; margin: 0; padding: .5rem 1rem; transition: background .1s linear; }
.greenBtn:hover, .greenBtn:focus { background-color: #036603; color: #fff; transition: background .05s linear; }

.fadein { animation: fadein 1s; -moz-animation: fadein 1s; -webkit-animation: fadein 1s; }
@keyframes fadein {
	from { opacity:0; transform: translateY(20px); }
	to { opacity:1; transform: translateY(0); }
}
@-moz-keyframes fadein { /* Firefox */
	from { opacity:0; transform: translateY(20px); }
	to { opacity:1; transform: translateY(0); }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
	from { opacity:0; transform: translateY(20px); }
	to { opacity:1; transform: translateY(0); }
}	


/**************************************
Covid Notice
**************************************/
.notice { font-size: 1rem; padding-top: 2rem; }
.notice-app { padding: 0 1.5rem 1.5rem; background: #282e3e; font-size: .9375rem; line-height: 1.2; }
.notice_title { color: #f4f803; }
.notice_body { border-left: 1px solid #f4f803; color: #fff; padding-left: 1rem; margin-top: .5rem; max-width: 1200px; }
.notice_body :last-child { margin: 0; }