/* ================ General WCCLS Styles ============== */
/* used on:
all pages
*/

/* color hex codes ======
Dark Blue:  #0A3F58
Teal:   	#97DDD8
Lime: 		#E5DE55
Orange: 	#F6683C
Cloud: 		#F3F0EF
========================= */

@import url('https://fonts.googleapis.com/css2?family=Hind&display=swap');

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


/* Fonts ========================= */
body, a {
    font-family: Hind, sans-serif;
    font-weight: 400;
    color: #0A3F58;
}
h1,h2,h3,h4 {
    font-family: 'Work Sans', sans-serif;
    font-kerning: normal;
    letter-spacing: -0.05em;
    font-weight: normal;
}
h1, h2 {
    font-weight: 500;
}
h3, h4 {
    font-weight: bold;
}
h1 { 
	font-size: 2em; 
	letter-spacing: -0.01em;
}
h2 { 
	font-size: 1.6em; 
}
h3 { 
	font-size: 1.3em; 
}
h4, h5, h6 { 
	font-size: 1.1em; 
	text-transform: uppercase;
}
a {
    font-weight: bold;
}
/* General site-wide styles ==============================================*/
/* == sets default font size across site == */
/* star rule sets other elements like form elements to inherit the global styles */
* {
    line-height: inherit;
}
body {
    font-size: 110%;
    line-height: 1.6em;
}
/* override defaults for page widths */
.container, 
.navbar-static-top .container, 
.navbar-fixed-top .container, 
.navbar-fixed-bottom .container, 
.content-head {
    width: 100%;
}
.main {
    width: 85%;
    margin: auto;
}
.mc-content.span12 {
    width: 98%;
}
/* removes extra whitespace */
div#content-head {
    margin: 0;
}
/* updates font rules for elements that don't follow the body selector */
label, 
input, 
button, 
select, 
textarea {
    font-size: 100%;
}
li {
    font-size: inherit;
    line-height: inherit;
}
.content li {
    margin-left: 1em;
}
/* styling to align ordered and unordered lists properly when next to left-floated images */
li.align {
	transform: translateX(1em);
}
/* sets header image for site and related styles - DEV site only */
/*body { 
	background: rgba(0, 0, 0, 0) url("/sites/default/files/devSiteHeaderBackground.png") no-repeat scroll center top !important; 
} */

/* spacing for headers */
h2, h3, h4 {
	margin-top: 1em; 
}
/* set captions to smaller, less visually important */
.caption {
	font-size: 75%;
	font-style: normal;
	letter-spacing: normal;
}
/* floats */
.clear {
	clear:both;
}
.right {
    float: right;
    padding-left: 1em;
}
.left {
    float: left;
    padding-right: 1em;
}
/* sets default views styles */
.views-row {
    border-bottom: 5px solid #97DDD8;
    margin-bottom: 3em;
    padding-bottom: 1em;
}
.views-field-title a {
    font-size: 110%;
    font-weight: bold;
}

/* breadcrumb styles ================================ */
.breadcrumb {
    background-color: white;
    font-size: 80%;
}
.breadcrumb a:link, 
.breadcrumb a:visited,
.breadcrumb a:hover,
.breadcrumb a:active {
    text-decoration: none;
}
/* link styles ====================================== */
a {
    /* separates underline slightly from text */
    text-underline-offset: 0.25em;    
}
a:link, 
a:visited, 
a:hover, 
a:active {
    /* also makes underline slightly thinner */
    text-decoration: underline 0.07em;
}
a:link, 
a:visited {
    color: #0A3F58;    
}
a:hover, 
a:active {
    color: #F6683C;
}

/* site slogan ====================================== */
/* slogan is available for search engines, but does not display anywhere on the site */
#site-slogan {
    display: none;
}

/* button styles ==================================== */
a.button {
    border: 5px solid #F6683C;
    margin: 0.5em 0;
    font-weight: bold;
    display: inline-block;
    padding: 1em;
}
p a.button:hover, 
p a.button:active {
    background-color: #F6683C;
    color: white;
}
/* header styles =================================== */
.header {
    margin-bottom: 0;
    margin: auto;
}
.site-login {
    text-align: left;
    width: 100%;
}
#header .row {
    margin-left: 0;
}

/* login box */
.login-block {
    float: right;
    margin-right: 5em;
    padding-top: 1em;
}
.login-block p a {
    font-size: 80%;
}
/* styling for logo */
.header-section,
.header .site-logo,
#name-and-slogan {
	display: block;
	width: 85%;
}
.span8 {
	width: 85%;
}
.header .site-logo img {
	padding: 0;
	margin-top: 2em;
}
.header .site-logo {
	width: 85%;
	margin: auto;
}

/* alert boxes ===================================== */
/* alertPrimary, alertSecondary, alertTertiary */
.not-front .alertPrimary, 
.not-front .alertSecondary, 
.not-front .alertTertiary {
    
}
.alertSecondary .content,
.alertPrimary .content,
.alertTertiary .content {
    padding: 2em 6.3em 1em;
}
.alertPrimary {
    background-color: #0A3F58;
    color: white;
}
.alertPrimary a:link,
.alertPrimary a:visited {
    color: white;
}
.alertPrimary a:hover,
.alertPrimary a:active {
    color: #F6683C;
}
.alertSecondary {
    background-color: #E5DE55;
}
.alertTertiary {
    background-color: #97DDD8;
}

/* breadcrumb styles */
.breadcrumb {
    margin: 3em 4px 1em;
    padding: 0;
}

/* Main navigation menu styles =========================== */
.navbar-inner {
    background-image: none;
    background-color: white;
    border: none;
    border-radius: none;
    box-shadow: none;
    margin: auto;
    font-size: 90%;
    padding: 0;
}
/* Main menu link styles */
.navbar {
    border-top: 5px solid #0A3F58;
    width: 85%;
    margin: auto;
    margin-bottom: 2em;
}
.navbar .nav > li > a {
    color: #0A3F58;
    font-weight: bold;
}
.navbar .nav > li > a:focus, 
.navbar .nav > li > a:hover {
    color: #F6683C;
}
/* dropdown menu link styles */
.dropdown-menu > li > a {
    color: #0A3F58;
    text-decoration: none;
}
.dropdown-menu > li > a:hover, 
.dropdown-menu > li > a:focus, 
.dropdown-submenu:hover > a, 
.dropdown-submenu:focus > a {
    background-color: #F6683C;
    background-image: none;
}
/* remove default styling from home button */
.navbar .nav > .active > a, 
.navbar .nav > .active > a:hover, 
.navbar .nav > .active > a:focus {
    color: #0A3F58;
    background-color: white;
    box-shadow: none;
}
.navbar .nav > .active > a:hover, 
.navbar .nav > .active > a:focus {
    color: #F6683C;
}

/* Wells ======================================== */
.well {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    padding: 2em;
}
.well.primary,
.well.secondary,
.well.tertiary,
.well.quaternary {
   /* padding: 3em; */
}
.well.primary a {
    color: white;
}
.primary a:hover, 
.primary a:active {
    color: #F6683C;
}
.well img { 
    vertical-align: initial;
}
.well h2 {
    margin-top: 0;
}
.well.quaternary {
    background-color: #F3F0EF;
}
.highlight {
    background-color: #E5DE55;
}
.well.primary {
    color: white;
}

/* Image Styles ================================= */
.primary {
    background-color: #0A3F58;
}
.secondary {
    background-color: #E5DE55;
}
.tertiary {
    background-color: #97DDD8;
}

p.reducefocus {
    font-size: 80%;
    font-weight: 300;
    padding: 1em;
}

/* Horizontal Rules */
hr {
    border: solid 2px #97DDD8;
    height: 0;
    background-color: #97DDD8;
}

/* landing pages ================================================= */
/* provides whitespace around icons for easier readability of text */
#landingpage img {
	float: left;
	padding-right: 1em;
}
/* whitespace around paragraphs for better visual spacing between content chunks */
#landingpage p {
    padding-bottom: 1em;
}
/* tightens spacing between headings and paragraphs for visual indication of connection */
#landingpage h3 {
    margin-bottom: 0;
}

/* Footer Styles ================================ */
#footer {
    background-color: #0A3F58;
    color: white;
}
#footer a {
    color: white;
    text-decoration: none;
    margin: 2em;
}
#footer a:hover, 
#footer a:active {
    color: #F6683C;
}
#footer img {
    margin-bottom: 2em;
}
#footer .block, 
#footer #block-search-form, 
#footer #block-gtranslate-gtranslate
/* #footer #block-lang-dropdown-language */ {
    text-align: center;
}
/* adjust text in copyright statement */
#footer #block-block-62 {
    font-size: 80%;
}
/* adjust spacing in footer links */
#footer #block-block-46 a,
#footer #block-block-7 a { 
    display: inline-block;
    margin: 1em 1em 0;
}
#footer #block-block-46,
#footer #block-block-7 {
    padding-bottom: 2em;
}
#footer input[type="text"] {
    border-radius: 0;
    border: none;
    background-color: #0A3F58;
    color: #ffffff;
    border: 3px solid #E5DE55;
    margin-left: 1em;
}
::placeholder {
    color: white;
}
/* placement of search box and language changer */
/* div#block-lang-dropdown-language, */
div#block-gtranslate-gtranslate,
div#block-search-form {
    display: inline-block;
}
div#block-search-form {
    width: 20%;
}
/* #block-lang-dropdown-language form */
#block-gtranslate-gtranslate {
    width: 25%;
    margin-left: 25%;
    margin-bottom: 3em;
}
#block-search-form form,
#block-gtranslate-gtranslate form
/* #block-lang-dropdown-language form */ {
    width: 250px;
}
#footer.form-actions::before {
    display:normal;
}
#block-search-form .btn-search {
    left: 250px;
}
/* sidebar menu styles */
.sidebar ul.menu.nav li .leaf {
    margin: 0 1em;
}

/* ====================== Responsive styles ====================== */
@media only screen and (min-width: 2300px) {
    .alertSecondary .content,
    .alertPrimary .content,
    .alertTertiary .content {
        padding: 2em 10em 1em;
    }
}
@media only screen and (min-width: 2000px) {
    .alertSecondary .content,
    .alertPrimary .content,
    .alertTertiary .content {
        padding: 2em 9em 1em;
    }
}
@media (min-width: 1200px) {
    .span9 {
        width: 70%;
    }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .main,
    #header,
    #main-menu {
        width: 95%;
    }
    .header-section, 
    .header .site-logo, 
    #name-and-slogan {
        width: 100%;
    }
    .header-section .span8 {
        margin-left: 0;
    }
    .navbar {
        width: 100%;
        margin-left: 1em;
    }
    /* fixes content breaking below left-hand menu */
    .span9 {
        width: 70%;
        float: right;
    } 
}
@media only screen and (max-width: 978px) {
    .span8 {
        width: 70%;
    }
}
@media only screen and (max-width: 980px){
    #footer a {
        margin: 1em;
    }
    .header .site-logo img {
        max-height:70px;
    }
    .alertSecondary .content,
    .alertPrimary .content,
    .alertTertiary .content {
        padding: 2em 5em 1em;
    }
    
}
@media only screen and (max-width: 900px) {
    .header {
        width: 100%;
    }
    .alertSecondary .content,
    .alertPrimary .content,
    .alertTertiary .content {
        padding: 2em 4em 1em;
    }
}
@media only screen and (max-width: 848px) {
    .span8 {
        width: 65%;
    }
}
@media only screen and (max-width: 768px) {
    /* expand all content to full width */
    .main,
    .navbar,
    .mc-content.span12,
    .header .site-logo,
    .header-section.span8 {
        width: 100%;
    }
    body {
        padding: 0;
        width: 101%;
    }
    /* span styles */
    .main-top .block[class*="span"], 
    .main-upper .block[class*="span"], 
    .main-lower .block[class*="span"], 
    .main-bottom .block[class*="span"], 
    .content-top .block[class*="span"], 
    .content-upper .block[class*="span"], 
    .content-body .block[class*="span"], 
    .content-lower .block[class*="span"], 
    .content-bottom .block[class*="span"], 
    .content-row2 .span6, 
    .content-col2.row-fluid .span6, 
    .content-row3 .span4, 
    .content-col3.row-fluid .span4, 
    .content-row4 .span3, 
    .content-col4.row-fluid .span3, 
    .site-sidebar-first .block, 
    .site-sidebar-second .block {
        width: 100%;
    }
    .span8 {
        width: 90%;
        margin: auto;
    }
    /* footer fixes */
    #footer a {
        display: block;
        margin: 0;
    }
    .footer-content .block {
        float: none;
        margin: 0;
        width: 100%;
    }
    div#block-search-form {
        display: block;
    }
    div#block-search-form {
        width: 75%;
    }
    .element-invisible {
        display: none;
    }
    #block-gtranslate-gtranslate {
        width: 50%;
        margin: 0 15% 3em 25%;
    }
    #block-search-form {
        margin-left: 30%;
        margin-bottom: 3em;
    }
    /* mobile menu styles */
    .nav-collapse .nav > li > a, 
    .nav-collapse .dropdown-menu a {
        color: #0A3F58;
    }
    .dropdown-menu .active > a, 
    .dropdown-menu .active > a:hover {
        background-color: #F6683C;
    }
    .nav-collapse .nav > li > a, 
    .nav-collapse .dropdown-menu a {
        border-radius: 0;
    }
    .nav-collapse .nav > li > a:hover, 
    .nav-collapse .nav > li > a:focus, 
    .nav-collapse .dropdown-menu a:hover, 
    .nav-collapse .dropdown-menu a:focus {
        background-color: #F6683C;
    }
    .navbar .nav > li > a {
        text-shadow: none;
    }
    .navbar .nav > li > a:focus, 
    .navbar .nav > li > a:hover {
        color: white;
    }
    /* alert boxes */
    .alertSecondary .content,
    .alertPrimary .content,
    .alertTertiary .content {
        padding: 2em 3em 1em;
    }
    .navbar .btn-navbar .icon-bar {
	/*defines the width, height and color of the three bars */
    	width: 2em;
	    height: 0.2em; 
	    background-color: #0A3F58;
	    box-shadow: none;
	    margin: 0.3em 0.4em 0.4em;
    }
}
@media only screen and (max-width: 600px) {
    /* alert boxes */
    .alertSecondary .content,
    .alertPrimary .content,
    .alertTertiary .content {
        padding: 2em 2em 1em;
    }
    .navbar,
    .main {
        width: 95%;
    }
}
@media only screen and (max-width: 480px) {
    body {
        padding-right: 0;
    }
    .header #logo {
        text-align: left;
    }
    #footer .block, 
    #footer #block-search-form {
        text-align: left;
        margin: 0;
        padding-left: 1em;
    }
    #footer #block-search-form {
        margin: 2em 0 3em -1em;
    }
    div#block-search-form {
        width: 100%;
        float: none;
        margin-left: -1em;
    }
    #block-search-form .btn-search {
        left: 220px;
    }
    #footer .content {
        /* padding-right: 3em; */
    }
    #footer #block-block-46 a, 
    #footer #block-block-7 a {
        margin: 1em 1em 0 0;
    }
    #footer #block-gtranslate-gtranslate {
        width: 70%;
        text-align: left;
    }
    div#block-block-68 {
        width: 90%;
    }
}