@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;700&display=swap');

/*
=======================
FONTS
=======================
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto Slab', serif;

font-weight:400;
font-weight:700;

=======================
COLORS
=======================

Black
#22211D;
#181E22
#19191C -extra not used in the design
#221007 -extra not used in the design

Yellow
#FFCA00
#B48F03 - darker shade used for hover

Neutrals
#EAEFF2 - Light White/Blue
#696A6D - shade of gray
#BABFCC - shade of blue

Brown
#503D2E

=======================
*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* 
========================
END OF RESET ========
========================
*/

.menu-toggle { display:none!important; }

.screen-reader-text {
    clip:rect(1px,1px,1px,1px);
    height:1px;
    overflow:hidden;
    position:absolute!important;
    width:1px;
    word-wrap:normal!important;
}



html { font-size:62.5%; line-height:1.25em; } /* sets defualt font size to 10px */
body {
    font-family: 'Roboto', sans-serif;
    color:#333;
}


h1, h2, h3, h4, h5, h6 {
    font-family:'Roboto Condensed', sans-serif;
    letter-spacing:1px;
    font-weight:700;
    line-height:1.25em;
    color:#333;
    margin:0;
    padding:0.4em 0;
    word-break:normal;
}

h1 { font-size:6rem; }
h2 { font-size:5rem; }
h3 { font-size:4rem; }
h4 { font-size:3rem; }
h5 { font-size:2rem; }

p { font-family:'Roboto Slab', serif; font-size:1.6rem; line-height:1.5em;  margin:0; padding:1em 0; }
a { font-weight:700; cursor:pointer; outline:none; text-decoration:underline; }
a:hover { text-decoration:none; }

ul, ul li { font-family:'Roboto Slab', serif; font-size:1.6rem; }

sub, sup {
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align: baseline;
}

section { padding:0; }
#primary { padding:0; }

.inner { max-width:1280px; width:100%; margin:0 auto; }


#whatsnew, #resources, #faq { padding:4em 0; }


.flex { display:flex; }

.top { flex-direction:row; gap:4em; justify-content:center; flex-wrap:nowrap; margin-top:15em; }
.top .panel-content { }
.top .login-block {}

.welcome { flex-direction:row; flex-wrap:nowrap; gap:4em; }
.welcome .img { order:2; width:20%; }
.welcome .content { order:1; width:80%; flex-grow:1; flex-shrink:1; }

.videos { flex-direction:row; gap:4em; justify-content:center; flex-wrap:wrap; margin:0 0 6em; }
.videos .video-block { flex-basis:45%; /*flex-grow:1; flex-shrink:1;*/ }

.whats-new { flex-direction:row; gap:4em; justify-content:center; flex-wrap:nowrap; }
.whats-new div { 
	flex-basis:30%;
	flex-grow:1;
	flex-shrink:1;
	background-color:#fff;
    border:1px solid #BABFCC;
    /*min-height: 500px;*/
    padding:0.4em;
    border-radius:4px;
}
.whats-new div h4 { padding:0.5em; }
.whats-new div p { padding:0.5em 1em; }



/* LAZY LOAD YOUTUBE VIDEO FALLBACK STYLES */
.lite-youtube-fallback {
	aspect-ratio:16 / 9; /* matches YouTube player */
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	gap:1em;
	padding:1em;
	background-color:#000;
	color:#fff;
	text-decoration:none;
}

/* right-facing triangle "Play" icon */
.lite-youtube-fallback::before {
	display:block;
	content: '';
	border:solid transparent;
	border-width:2em 0 2em 3em;
	border-left-color:red;
}

.lite-youtube-fallback:hover::before { border-left-color:#fff; }

.lite-youtube-fallback:focus { outline:2px solid red; }



/*
===========================
HEADER
===========================
*/
#header { background:#22211d; padding:0; width:100%; }
/*#header #head .entry-content { display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; width:100%; max-width:95%; margin:0 auto; padding:1em 0; }*/

#header .inner { display:flex; flex-direction:row; justify-content:center; align-items:center;}

#header #branding { order:1; width:20%; margin:0; padding:0; }
#header #menu { order:2; width:70%; margin:0; padding:0; }


#header #branding h2 a {
	background-repeat: no-repeat;
	background-position:0 0;
	height:0;
    margin:0 auto;
	overflow:hidden;
	display:block;
}

/* LOGOS */
#header #branding.montana h2 a { background-image:url(/wp-content/uploads/sites/5/2020/04/mt-logo-white-top.png); width:199px; padding:80px 0 0; }
#header #branding.nd h2 a { background-image:url(/wp-content/uploads/sites/2/2022/05/nd811-logo-alt.png); width:240px; padding:140px 0 0; }
#header #branding.nebraska h2 a { background-image:url(/wp-content/uploads/sites/3/2019/10/neoc-logo.png); width:186px; padding:65px 0 0; }
#header #branding.missu h2 a { background-image:url(/wp-content/uploads/sites/4/2019/11/missu-logo.png); width:105px; padding:80px 0 0; }
#header #branding.ny h2 a { background-image:url(/wp-content/uploads/sites/6/2020/04/ny-logo-top.png); width:190px; padding:100px 0 0; }
#header #branding.or h2 a { background-image:url(/wp-content/uploads/sites/7/2022/05/oregon811-logo.png); width:240px; padding:90px 0 0; }
#header #branding.de h2 a { background-image:url(/wp-content/uploads/sites/8/2024/06/delmarva811-logo-white.png); width:165px; padding:150px 0 0; }
#header #branding.mo h2 a { background-image:url(/wp-content/uploads/sites/9/2025/06/mo-logo-new.png); width:230px; padding:85px 0 0; }
#header #branding.wa h2 a { background-image:url(/wp-content/uploads/sites/10/2021/05/wa-logo-top.png); width:153px; padding:85px 0 0; }
#header #branding.hi h2 a { background-image:url(/wp-content/uploads/sites/11/2022/05/hawaii811-logo-sm.png); width:140px; padding:65px 0 0; }
#header #branding.ks h2 a { background-image:url(/wp-content/uploads/sites/14/2023/04/ksoc-logo.png); width:240px; padding:140px 0 0; }
#header #branding.la h2 a { background-image:url(/wp-content/uploads/sites/16/2024/08/la811-logo.png); width:240px; padding:136px 0 0; }
#header #branding.id h2 a { background-image:url(/wp-content/uploads/sites/17/2025/05/kcuc-full-color-inverse.png); width:200px; padding:135px 0 0; }


#header #branding a { text-decoration:none; border:none; outline:none; }
#header #branding a img { text-decoration:none; border:none; outline:none; }



/*
===========================
NAVIGATION
===========================
*/

#header .navigation-top #site-navigation #top-menu { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; margin:2em 0 0; }

#header .navigation-top #site-navigation #top-menu li { border:none; }

#header nav ul { display:flex; flex-direction:row; justify-content:flex-end; flex-wrap:nowrap; gap:4em; }
#header nav ul li {  }
#header nav a {
    font-family:'Roboto', sans-serif;
    font-size:2rem;
    line-height:1.25em;
    letter-spacing:1px;
    color:#ffca00;
    text-decoration:none;
}

#header nav a:hover { color:#fff; border-bottom:2px solid #fff; }
#header nav a:active { color:#fff; border-bottom:2px solid #fff; }
#header nav a.menu-scroll-down { display:none; }



/*
===========================
CONTENT
===========================
*/

#whatsnew { background-color:#eaeff2; border-bottom:10px solid #babfcc; position:relative; }

#whatsnew h2 a,
#resources h2 a { color:#333; text-decoration:none; outline:none; }

#whatsnew h2 a:hover,
#resources h2 a:hover{ color:#aaa; text-decoration: underline; }

/*
===========================
PRIMARY/TOP/HERO SECTION
===========================
*/

#top-content  {
	background-size:cover;
	background-repeat:no-repeat;
    border-bottom:10px solid #fff;
    position:relative;
	padding:10em;
}


/* HERO IMAGE BG POSITIONING */
#top-content.montana { background-position:0 70%; }
#top-content.hi,
#top-content.ny { background-position:0 50%; }


.notification { background-color:rgba(255,0,0,0.9); padding:1em; margin:0 0 2em; color:#fff; }
.or .notification { margin:0 0 1em; }
.extra { background-color:rgba(0, 0, 0, 0.9); padding:1em; margin:0 0 1em; color:#fff; }
.extra a { color:#fff; }


#top-content p { color:#fff; font-size:1.8rem; word-wrap:normal; padding:1em 0 0; margin:0; }
#top-content .panel-content p.yellow { padding:2em; margin:1em 0 0; background-color:#ffca00; color:#333; }
#top-content .panel-content p.yellow a { color:#000; transition:0.4s; }



#top-content .panel-content { width:60%; background-color:rgba(0,0,0,0.8); padding:3em; border-radius:4px; order:1; }
#top-content .panel-content .notification, #top-content .panel-content .extra { font-size:1.4rem; line-height:1.5em; }
#top-content .panel-content h1 { color:#fff; text-transform:none; margin:0; }
#top-content .panel-content h1 sup { font-family:'Roboto', sans-serif; font-weight:400; font-size:50%; top:-1em; right:-0.2em; }
#top-content .panel-content p { color:#fff; font-size:1.8rem; word-wrap:normal; padding:0; margin:0; }


#top-content .login-block { background:rgba(234,239,242,0.9); border-radius:4px; width:35%; padding:4em; order:2; display:flex; flex-direction:column; justify-content:center; }
#top-content .login-block h3 { font-size:2.4rem; letter-spacing:1px; margin:0; }
#top-content .login-block p { padding:1em 0; color:#333; }
#top-content .login-block p a { color:#333; } 


.demo {
    font-family:'Roboto', sans-serif;
    background-color:#FFCA00;
    border-radius:8px;
    box-shadow:1px 2px 4px rgba(0, 0, 0, 0.2);
    margin:0 auto;
    padding:1em;
    text-align:center;
    display:block;
    font-size:2rem;
    line-height:1.25em;
    color:#333;
    text-decoration:none;
	transition:0.4s;
}
.demo:hover { background-color:#DDAF00; }

/*

#primary .panel-content .wrap .entry-content .wp-block-image { float:right; width:25%; padding:3em 0 0; }

#primary .panel-content .wrap .entry-content p.yellow { width:90%; padding:2em; margin:1em 0 0; background-color:#FFCA00; color:#333; }
#primary .panel-content .wrap .entry-content p.yellow a { color:#000; transition:0.4s; }


#primary .panel-content .wrap .login-block div { margin:2em 0; }

#primary .panel-content .wrap .login-block a {
    font-family:'Roboto', sans-serif;
    background-color:#FFCA00;
    border-radius:8px;
    box-shadow:1px 2px 4px rgba(0, 0, 0, 0.2);
    margin:0 auto;
    padding:1em;
    text-align:center;
    display:block;
    font-size:2rem;
    line-height:1.25em;
    color:#333;
    text-decoration:none;
	transition:0.4s;
}
#primary .panel-content .wrap .login-block a:hover { background-color:#DDAF00; }
.entry .entry-content .login-block button a { color:#222; font-size:24px; line-height:28px; text-decoration:none; display:block; }

*/



#contact { background-color:#22211d; border-top:10px solid #171E22; color:#fff; padding:2em 0; width:100%; position:relative; overflow:auto; text-align:center; }


/*
===========================
RESOURCES SECTION VIDEOS/PDF
===========================
*/
#resources .video-block p { padding:1em 0 0; color:#666; }

#resources  h4 {
    border-bottom:2px solid #FFCA00;
    margin:0 0 1em;
}




/*
===========================
FAQ SECTION
===========================
*/
#faq { background-image:url(/wp-content/uploads/sites/4/2019/11/dirt-texture-bg.png); background-color:#503D2E; width:100%; position:relative; }

#faq details { display:block; width:100%; max-width:95%; padding:3em 0; margin:0; list-style-type:none; order:4; }

#faq details summary {
    font-family:'Roboto', sans-serif;
    font-size:2.4rem;
    line-height:1.5em; 
    letter-spacing:1px;
    font-weight:700;
    outline:none;
    cursor:pointer;
    transition: all 0.2s ease 0s;
}
#faq details summary:hover { color:#B48F03; }

#faq details p { font-size:1.8rem; color:#fff; padding:1em 0 1em 2em; width:100%; }
#faq details summary p { color:#ffca00; padding:0 0 0 2em;  }

summary::-webkit-details-marker { display:none }
summary::marker { display:none; content:none; }
summary:before {
  background: url(/wp-content/uploads/sites/4/2019/11/chevron-yellow.png);
  float:left; 
  height:15px;
  width:15px;
  content:" ";
  margin:8px 10px 40px 0;
  color:#B48F03;
}

#faq details[open] summary:before  { background:url(/wp-content/uploads/sites/4/2019/11/chevron-yellow-active.png); transition: all 0.2s ease 0s; }




#faq h2,
#contact h3 { color:#fff; }

#faq h2 a,
#contact h3 a { color:#fff; text-decoration:none; outline:none; }
#faq h2 a:hover,
#contact h3 a:hover { color:#ccc; text-decoration:underline; }


#contact .img { margin:0; }

#contact p { color:#fff; }
#contact a { color:#FFCA00; }

#contact small { color:#aaa; }




footer { text-align:center; font-size:1.4rem; background-color:#22211d; color:#ddd; padding:0 0 1em; }