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

/**************************************
Fonts
**************************************/
/* inter-regular and inter-700 */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: local(''), url('../f/inter-v12-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: local(''), url('../f/inter-v12-latin-700.woff2') format('woff2'); }
/* noto-sans-regular and noto-sans-700 - latin */
@font-face { font-display: swap; font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: url('../f/noto-sans-v39-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Noto Sans'; font-style: normal; font-weight: 700; src: url('../f/noto-sans-v39-latin-700.woff2') format('woff2'); }


/**************************************
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: #006db5; }
#skip:active, #skip:focus { position: absolute; top: 0; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.7); }

/* US government banner */
.usa-banner { display: flex; padding: .875rem 1.5rem; font-size: 12px; align-items: center; background: #f0f0f0; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif }
.usa-banner p { margin: 0 0 0 12px; }

.bannerWrap { display: flex; padding: 0 1.5rem; font-family: "Inter","Helvetica Neue",Helvetica,Arial,"sans-serif"; }

.seerLogo { display: inline-block; line-height: 0; max-width: 641px; padding: 23px 0; max-height: 100px; width: 100%; }
.seerLogo > img { width: 100%; }
	
/* Search Box */
.search { margin-left: auto; position: relative; }
.search > form { position: relative; width: 100%; margin-top: 40px; }
.search label { display: block; position: absolute; text-indent: -5000px; top: -5000px; }
#searchsite { padding: 0 .2rem; width: 100%; }
.search .greenBtn { padding: 8px; border-radius: 0; }
/* adjust positioning of box as screen gets smaller (add this buttons move) */
@media only screen and (max-width: 1024px) {
	.bannerWrap { display: block; }
	.search > form { margin-top: 0; margin-bottom: 10px; }
}
@media only screen and (max-width: 550px) {
	.bannerWrap, .usa-banner { padding-left: .5rem; padding-right: .5rem; }
	.seerLogo { padding: 10px 0; }
}


/**************************************
Social Media Buttons
**************************************/
.share { position: absolute; top: -2.5rem; right: 0; display: flex; align-items: center; }
.facebook-share-button { border-radius: 10px; padding: .065rem .75rem; margin-top: .325rem; font-size: .75rem; color: #fff; text-decoration: none; background: #1877f2; display: inline-flex; align-items: center; }
.facebook-share-button:hover, .facebook-share-button:focus { background: #0e61ce; }
.facebook-share-button svg { margin-right: .25rem; }
.twitter-share-button { margin: .35rem .25rem 0 .25rem; }
.print { border-radius: 10px; padding: .01rem .75rem; margin-top: .35rem; font-size: .75rem; color: #fff; text-decoration: none; background: #738a8d; display: inline-flex; align-items: center; }
.print:hover, .print:focus { background: #5c7275; }
.print svg { height: 20px; width: 20px; }
@media only screen and (max-width: 1024px) {
	.share { display: none; }
}


/**************************************
Nav Bar
**************************************/
nav { background: #2d2b2b; font-family: "Inter","Helvetica Neue",Helvetica,Arial,"sans-serif"; }
.navWrap { display: flex; padding: 0 1.5rem; position: relative; align-items: center; min-height: 54px; }
.logo { text-decoration: none; font-weight: bold; font-size: 1rem; color: #90caf0; padding: .75rem 0; }
.logo:hover, .logo:focus { opacity: .8; }

.explorerTitle { display: flex; flex-wrap: wrap; align-items: center; color: #fff; padding: .95rem 2rem; margin-left: .25rem; background: linear-gradient(105deg, rgba(45,43,43,1) 7%, rgba(255,255,255,.2) 7.2%, rgba(255,255,255,.2) 7.4%, rgba(45,43,43,1) 7.6%); }
.explorerTitle  span { display: inline-block; margin-right: .75rem; }
.explorerTitle a { display: inline-block; font-size: .75rem; color: #90caf0; border: 1px solid #90caf0; text-decoration: none; padding: .15rem .5rem; border-radius: 3px; }
.explorerTitle a:hover, .explorerTitle a:focus { background: rgba(255,255,255,.1); color: #bde0f7; }

.navWrap button { display: none; }

.navWrap > ul { display: flex; flex-shrink: 0; padding: 0; margin: 0 0 0 auto; list-style: none; }
.navWrap ul a { display: block; color: #fff; text-decoration: none; padding: .35rem 1rem; margin: 0 .25rem; font-size: .9rem; font-weight: bold; }
.navWrap ul li:last-child a { margin-right: 0; }
.navWrap ul a:hover, .navWrap ul a:focus { background: #4d4646; }
.navWrap ul li.active > a { background: #0079ca; }

/* return to SEER Stats link */
.navWrap > ul > li:last-child { border-left: 1px solid rgba(255, 255, 255, .2); }
.navWrap > ul > li:last-child a { color: #AEAEAE; transition: none; font-weight: normal; }
.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; }

/* about sub menu */
.sub-menu { position: relative; }
.sub-menu ul { display: none; z-index: 1; position: absolute; top: 120%; right: 0; list-style: none; padding: 0 .5rem; margin: 0; background: #4d4646; }
.sub-menu ul li { margin: 0; padding: .5rem 0; border-bottom: 1px solid #6b6767; }
.sub-menu ul li:last-of-type { border-bottom: none; }
.sub-menu ul li a { padding: .5rem 2rem .5rem .5rem; margin: 0; white-space: nowrap; }
.sub-menu ul li a:hover, .sub-menu ul li a:focus { background: #383434; }

@media only screen and (max-width: 1099px) {
	.navWrap button { flex-shrink: 0; align-self: stretch; margin-left: auto; display: block; background: #d40b4f; border: none; color: #fff; cursor: pointer; padding: .25rem 1rem; font-size: 1rem; }
	.navWrap button:hover, .navWrap button:focus, .navWrap button[aria-expanded="true"] { background: #aa083f; }
	.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[aria-hidden="false"] { display: block; width: calc(100% - 1.5rem); position: absolute; top: 100%; left: 0; background: #2d2b2b; padding: .75rem; z-index: 10; justify-content: space-around; box-shadow: 0 3px 12px rgba(0,0,0,.5); }
	.navWrap > ul { display: none; }
	.navWrap ul a { font-size: 1.3rem; padding: .5rem 1.5rem; }
	.navWrap > ul > li:last-child { border-left: none; }
	
	.sub-menu ul { position: relative; top: 0; right: 0; padding: 0 1rem 0 2rem; background: none; }
	.sub-menu ul li { padding: 0; border-bottom: none; }
	.sub-menu ul li a { padding: .5rem 2rem .5rem 1rem; margin: 0; white-space: nowrap; }
}

@media only screen and (max-width: 809px) {
	.navWrap { flex-wrap: wrap; padding: .5rem 1.5rem 1rem; }
	.logo { font-weight: normal; padding: 0; margin-top: .5rem; margin-right: .5rem; }
	.explorerTitle { background: none; margin: .5rem 0 0; padding: 0 2rem 0 .75rem; font-size: 1rem; position: relative; }
	.explorerTitle:after { position: absolute; left: 0; top: 50%; margin-top: -4px; content: ""; border: 4px solid transparent; border-left-color: #fff; }
	
	.navWrap button { width: 100%; padding: .5rem 1rem; border-radius: 3px; margin: 1rem 0 0 0; }
}


/**************************************
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: #fff; }
.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 #006db5; border-radius: 50%; margin-top: 5px; padding: 5px; height: 28px; width: 28px; }
.returntop svg path { fill: #006db5; }
.returntop:hover, .returntop:focus { background: #006db5; }
.returntop:hover svg, .returntop:focus svg { border-color: #fff; }
.returntop:hover svg path, .returntop:focus svg path { fill: #fff; }
@media (max-width: 768px) {
	.returntop { bottom: .5rem; right: .5rem; width: 35px; height: 35px; }
	.returntop svg { height: 15px; width: 15px; }
}

.footer { padding: 2em 0 0; background-color: #f1f1f1; font-size: 1rem; font-family: "Inter","Helvetica Neue",Helvetica,Arial,"sans-serif"; }
footer .container { max-width: 1200px; padding: 0 1.5rem; }
footer h2 { font-size: 1em; color: #fff; margin-bottom: 10px; padding-left: 0 !important;}
footer ul { list-style: none; padding: 0; margin: 0; }
.footer-links { background: #142c68; padding: 20px 0; color: #fff; margin-top: 20px; }
.footer-links a { text-decoration: none; }
.footer-links a, .footer-links a:visited, .footer-links a:hover { color: #fff; }
.footer-links a:hover { text-decoration: underline; }

.footerWrap { display: flex; justify-content: space-around; }
@media only screen and (max-width: 768px) {
	.footerWrap { display: block; }
	footer h2 { margin-bottom: 0; }
}

.social li { display: inline-block; padding: 0 20px 0 0; }
.social li a:hover { opacity: .9; }
.social .icon-exit-notification { display: none; }

.linkList { white-space: inherit; text-align: center; margin: 0 0 1em 0; list-style: none; padding-top: 2em; clear: both; }
.linkList li { display: inline-block; margin: 0 .2em; }
.linkList li::after { content: "|"; padding-left: 0.5em; }
.linkList li.last:after { display: none; }

.tagline { text-align: center; }

footer .seer-logo { display: block; background: transparent url("../../../i/seer_logo.png") left center no-repeat; padding-left: 100px; margin: 0 auto 35px auto; width: 65%; }
@media screen and (max-width: 550px) {
	footer .seer-logo { background-position: top center; padding: 80px 0 0 0; text-align: center; width: 96%; }
}


/**************************************
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; }