@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body { font-family: "Open Sans",sans-serif; color:#31261D; margin: 0 1.75rem; } 
h2 { font-family: Arnhem, serif; font-size:30px; line-height:36px; }
h3 { font-family: Arnhem, serif; font-size:26px; line-height:32px; color:#DA7B07; }
h4 { font-family: Arnhem, serif; font-size:21px; line-height:27px; color:#31261d; }

    html { -webkit-text-size-adjust:100%; } /* responsive.css */
    .clear { clear : both; height : 0; font-size : 0; } /* content.css */

.float_img { float: right; width: 300px; padding: 10px; }
#page #page-content img { max-width: 100%;  height: auto !important; }

.Footnote, .caption { font-size:80%; }
.title { font-weight:600; }


/* Header styles */
    #header-bar { background-color:#418fde; height: 10px; padding-top:0; }   
    #header-content { margin:30px auto 0 auto; max-width:1250px; }  
    #logo { float:left; max-width:280px; margin-bottom:30px; }
    #logo img { max-width:100%; height: auto !important; border:0; }
        

    @media (max-width:319px) {

    }


    @media (min-width:320px) and (max-width:414px) {

     }


    @media (max-width:772px) {
        #logo { max-width:280px; }
     }

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* CSS menu styles  */

    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul li a,
    #cssmenu #menu-button {
        margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
        z-index:200; }

    #cssmenu:after,
    #cssmenu > ul:after {
        content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

    #cssmenu #menu-button { 
        display: none; }

    #cssmenu {
        font-family: 'Open Sans', sans-serif; line-height: 1; background: #ffffff; width: auto;
        float:right; }

    #menu-line {
        position: absolute; top: 0; left: 0; height: .1875rem; /*background: #0072ce;;*/ /* --------- Removed Top Line --------- */
        -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; }

    #cssmenu > ul > li { 
        float: left; }

    #cssmenu.align-center > ul {
        font-size: 0; text-align: center; }

    #cssmenu.align-center > ul > li {
        display: inline-block; float: none; }

    #cssmenu.align-center ul ul { 
        text-align: left; }

    #cssmenu.align-right > ul > li { 
        float: right; }

    #cssmenu.align-right ul ul { 
        text-align: right; }

    #cssmenu > ul > li > a {
        padding: 20px; font-size: 14px; text-decoration: none; text-transform: uppercase; color: #31261d;
        -webkit-transition: color .2s ease; -moz-transition: color .2s ease; -ms-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; }

    #cssmenu > ul > li:hover > a, #cssmenu > ul > li.active > a { 
        color: #002d72; }

    #cssmenu > ul > li.has-; > a { 
        padding-right: 25px; }

    #cssmenu > ul > li.has-sub > a::after {
        position: absolute; top: 21px; right: 10px; width: 4px; height: 4px; border-bottom: 1px solid #31261d; border-right: 1px solid #31261d; content: "";
        -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
        -webkit-transition: border-color 0.2s ease; -moz-transition: border-color 0.2s ease; -ms-transition: border-color 0.2s ease; -o-transition: border-color 0.2s ease; transition: border-color 0.2s ease;
        border-color: #FF9e1b; }

    #cssmenu > ul > li.has-sub:hover > a::after { 
        border-color: #FF9e1b; }

    #cssmenu ul ul {
          position: absolute; left: -9999px; border-bottom:.5rem solid #418fde; padding-bottom: .3rem; box-shadow: 0rem 0rem 0.5rem 0rem rgba(0, 0, 0, 0.1); }

    #cssmenu li:hover > ul { 
        left: auto; }

    #cssmenu.align-right li:hover > ul { 
        right: 0; }

    #cssmenu ul ul ul { 
        margin-left: 100%; top: 0; }

    #cssmenu.align-right ul ul ul { 
        margin-left: 0; margin-right: 100%; }

    #cssmenu ul ul li {
        height: 0;
        -webkit-transition: height .2s ease; -moz-transition: height .2s ease; -ms-transition: height .2s ease; -o-transition: height .2s ease; transition: height .2s ease; }

    #cssmenu ul li:hover > ul > li { 
        height: 32px; }

    #cssmenu ul ul li a {
        padding: 12px 16px; width: 185px; font-size: 14px; background: #ffffff; text-decoration: none; color: #31261D;
        -webkit-transition: color .2s ease; -moz-transition: color .2s ease; -ms-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; }

    #cssmenu ul ul li:hover > a,
    #cssmenu ul ul li a:hover {
        color: #002d72; background-color:#ecf3fa;  /* remove if no background-color on nav ul li a:hover is desired */ }

    #cssmenu ul ul li.has-sub > a::after {
        position: absolute; top: 13px; right: 10px; width: 4px; height: 4px; border-bottom: 1px solid #31261D; border-right: 1px solid #31261D; content: "";
        -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
        -webkit-transition: border-color 0.2s ease; -moz-transition: border-color 0.2s ease; -ms-transition: border-color 0.2s ease; -o-transition: border-color 0.2s ease; transition: border-color 0.2s ease; }

    #cssmenu.align-right ul ul li.has-sub > a::after {
        right: auto; left: 10px; border-bottom: 0; border-right: 0; border-top: 1px solid #31261D; border-left: 1px solid #31261D; }

    #cssmenu ul ul li.has-sub:hover > a::after { 
        border-color: #002d72; }

    #cssmenu.small-screen {
        width: 100%; /*background-color:#fcfcfc;*/ /* max-width:300px;*/ border: 1px solid #F89D2A; margin:0 0 20px 0; }

    #cssmenu.small-screen ul {
        width: 100%; display: none; }

    #cssmenu.small-screen ul ul {
         box-shadow:none; }

    #cssmenu.small-screen.align-center > ul,
    #cssmenu.small-screen.align-right ul ul {
        text-align: left; }

    #cssmenu.small-screen ul li,
    #cssmenu.small-screen ul ul li,
    #cssmenu.small-screen ul li:hover > ul > li {
        width: 100%; height: auto; border-top: 1px solid rgba(120, 120, 120, 0.15); }

    #cssmenu.small-screen ul li a,
    #cssmenu.small-screen ul ul li a {
        width: 100%; }

    #cssmenu.small-screen > ul > li,
    #cssmenu.small-screen.align-center > ul > li,
    #cssmenu.small-screen.align-right > ul > li {
        float: none; display: block; }

    #cssmenu.small-screen ul ul li a {
        padding: 20px 20px 20px 30px; font-size: 14px; color: #31261D; background: none; }

    #cssmenu.small-screen ul ul li:hover > a,
    #cssmenu.small-screen ul ul li a:hover {
        color: #002d72; }

    #cssmenu.small-screen ul ul ul li a {
        padding-left: 40px; }

    #cssmenu.small-screen ul ul,
    #cssmenu.small-screen ul ul ul {
        position: relative; left: 0; right: auto; width: 100%; margin: 0; /*border-bottom:.2rem solid #0072ce;*/ border-bottom:.035rem solid rgba(120, 120, 120, 0.15); background-color: #f8f8f8 /*#fcfcfc*/ /*#f4f3f2*/; }

    #cssmenu.small-screen > ul > li.has-sub > a::after,
    #cssmenu.small-screen ul ul li.has-sub > a::after {
        display: none; }

    #cssmenu.small-screen #menu-line {
        display: none; }

    #cssmenu.small-screen #menu-button {
        display: block; padding: 20px; color: #31261d; cursor: pointer; font-size: 12px; text-transform: uppercase; /*background-color: #f4f3f2;*/ }

    #cssmenu.small-screen #menu-button::after {
        content: ''; position: absolute; top: 20px; right: 20px; display: block; width: 15px; height: 2px; background: #31261d; }

    #cssmenu.small-screen #menu-button::before {
        content: ''; position: absolute; top: 25px; right: 20px; display: block; width: 15px; height: 3px; border-top: 2px solid #31261d; border-bottom: 2px solid #31261d; }

    #cssmenu.small-screen .submenu-button {
        position: absolute; z-index: /*10*/ 300; /* JC changed on 03/11/19 for mobile */ right: 0; top: 0; display: block; border-left: 1px solid rgba(120, 120, 120, 0.15); height: 52px; width: 52px; cursor: pointer; }

    #cssmenu.small-screen .submenu-button::after {
        content: ''; position: absolute; top: 21px; left: 26px; display: block; width: 1px; height: 11px; background: #31261d; z-index: 99; }

    #cssmenu.small-screen .submenu-button::before {
        content: ''; position: absolute; left: 21px; top: 26px; display: block; width: 11px; height: 1px; background: #31261d; z-index: 99; }

    #cssmenu.small-screen .submenu-button.submenu-opened:after {
        display: none; }

    #cssmenu.small-screen.select-list {
        padding: 5px; }

    .fa-fw {
        color: #ff9e1b; }

    @media (min-width:710px) { /* JC added style for responsive view */ 
         #cssmenu.small-screen { width: 35%; float:right; }
    }
        
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* Dropdown toggle search styles */

    .searchbtn {
        font-family: "Open Sans",sans-serif; color:#31261D;
        font-size: 14px; position:absolute; display:inline-block; width:150px; height:40px; padding-top:10px; right:20px; text-align:center; text-decoration:none; border-radius:0 0 2px 2px;
        -webkit-transition: background-color 250ms ease-out, ; -moz-transition: background-color 250ms ease-out;  -o-transition: background-color 250ms ease-out; transition: background-color 250ms ease-out; }

        .searchbtn:hover { /*background-color:deepskyblue;*/ color: #002d72; }   

    .searchform { margin:0; display:none; background:#418fde; padding:10px 22px; text-align:center; position:relative; transition:background-color 500ms linear; clear:both; }

    .searchfield { border:none; /*padding:10px 0;*/ background:none; color:white; outline:none; border-bottom:1px solid white; width:80%; font-size:21px; }

    input::-webkit-input-placeholder {
         color: rgba(255,255,255,0.6); }

    .submitbtn { background:none; border:none; font-size:30px; color:white; }

    .submitbtn, .submitbtn fa fa-search {  color:#fff !important; }

   .fa {  color:#F89D2A; }


    @media (max-width:1245px) {   /* needs to match breakpoint from script.js file */
        .searchbtn { right:0; text-align: left; margin-bottom:8px; height:55px;  }
        .searchfield { font-size:18px; }
        .searchform { padding:10px; }
    }


    @media (min-width:710px) {
        .submitbtn { font-size: 21px;}
    }
       

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* Hero Styles  - Homepage */

    #hero { clear:both; }
        #hero img { width:100%; background-size: contain; position: relative; }

    #hero-text { margin: 0 auto 0 auto; max-width: 1200px; padding:3% 0 0 10%; position: absolute; z-index:100; text-shadow: 1px 1px 2px #31261d; }
        .hero-title { color:#fff; font-family:Arnhem, serif; font-size:42px; width:30%; }
        .hero-para { color:#fff; font-family:Arnhem, serif; font-size:24px; width:30%; }
    #hero-smallscreen { display:none;}

    @media (max-width:640px) {
        
        .hero-title, .hero-para { display: none;}
        #hero-smallscreen { display:block;  color:#31261D; border-bottom:1px solid #e3d8d0; }
            .hero-smallscreen-title { font-size:18px; }
            .hero-smallscreen-para { font-size:14px;}
    }
        
    @media (min-width:568px) and (max-width:667px) {
        
        #hero-text { padding:2% 0 0 3%;}
            .hero-title { font-size:24px; margin-top:-5px; }
            .hero-para { font-size:18px; width:50%; margin-top:-8px; /*text-shadow: 1px 1px #002d72; */}   
    } 

    @media (min-width:668px) and (max-width:1024px) {
        
        #hero-text { padding:2% 0 0 3%;}
            .hero-title { font-size:24px; margin-top:-5px; }
            .hero-para { font-size:18px; width:40%; margin-top:-8px; /*text-shadow: 1px 1px #002d72;*/ }     
    }

    @media (min-width:1025px) and (max-width:1536px) {
        
        #hero-text { padding:0 0 0 2%; }
    }


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* Button Styles - Homeapge Style - white button with orange border */
    .button { background-color:#fff; border:1px solid #ff9e1b; padding:10px; text-align: center; width:30%; margin:0 auto; }
        .button a:link, .button a:visited, .button a { text-decoration: none; color:#418fde; }
        .button a:hover { color:#002d72;  }

     @media (max-width:735px) {  
        .button { width:80%; }
    }

    
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* Footer Styles */

     footer { background-color:#002050; color:#fff; font-size:14px; /*padding:10px 0; margin-bottom:1.75rem;*/ clear:both; }

    #footer { background-color:#002050; color:#fff; font-size:14px; padding:10px 0; /*margin-bottom:1.75rem*/; clear:both; }
            
    #footer-content { max-width:1200px; margin:0 auto;  justify-content: center; /*display: flex; flex-flow: row wrap;*/ padding-bottom:30px; }
    
    .box { display: flex; flex-wrap: wrap; text-align:center; padding:0 1.75rem; }
    .box > div { margin:30px; }
    .box>* { flex: 1 1 160px;}

        .box a:link, .box a:visited { text-decoration:none; color:#fff; }
        .box a:hover, .box a:active { text-decoration:underline; }

        .box .heading {text-transform: uppercase; color:#9ac4ef; margin-bottom:-8px; margin-top: 8px; font-weight: bold; }
        
    .footer-button { background-color:#002c65; border:1px solid #ff9e1b; padding:10px; text-align: center; /*width:80%;*/ }
        .footer-button:hover { transition: background-color 0.5s ease; background-color:#003b87; }
        .footer-button a:hover { text-decoration: none; }

        .social { font-size:12px; height:60px; }
            .social:first-child { margin-top:10px; }

        .social-icon { /*float:left;*/ width:40%; margin:0 auto;  }
            .social-icon img { clear:both; padding:10px; border:0; }

        /*.social-link { float:left; width:60%; }
        .social p { float:left; margin-bottom:30px; width: 80%; }*/

        .address { line-height:24px; }

        .copyright { font-size:12px; text-align: center; margin:0 auto; padding:10px; }
            .copyright a:link, .copyright a:visited { text-decoration:underline; color:#fff; }
            .copyright a:hover, .copyright a:active { text-decoration:none; color:#002050; }    

        .footer-nav-links { background-color: #418fde; padding: 10px; margin: 0 auto -10px auto; text-align: center; color: #fff;  }
        .footer-nav-links p { margin: 0;}

.footer-nav-links a:link, .footer-nav-links a:visited { color:#fff; }
.footer-nav-links a:hover, .footer-nav-links a:active{ color:#002050; }

 @media (max-width:350px) {
     .box > div img { width:75%; }
}

    @media (max-width:553px) {
        .box > div { text-align:center; }
        .footer-button { width:auto; }
        
        .box div img { max-width:200px; }
    }
        
        
    @media (max-width:551px) { 
              
        .box > div { margin: 30px 0; }
              
        .social { clear: left; width:80%; margin:0 auto; }
              .social p { width:100%;  }
        
              .social-icon { width:100%; /*float:none;*/ }
              .social-icon img { /*float:none;*/ padding:0; }
        
              /*.social-link { width:100%; }*/
    }
             
        
    @media (min-width:552px) and (max-width:624px) {
        .social { clear:left; }
        .social-icon { width:25%; }
        
        /*.social-link { width:65%; text-align:left; padding-left:5%;  }
        .social-link p { width:100%; margin-left:20%;  }*/
    }     
        
        
    @media (min-width:625px) and (max-width:771px) {
        .social { clear:left; }
        .social-icon { width:25%; }
        .social:first-child { margin-top:0px; }
        
        /*.social-link { width:65%; text-align:left; padding-left:5%;  }
        .social-link p { width:100%; margin-left:10%;  }*/
    }
        
        
    @media (min-width:772px) and (max-width:991px) {
        .social { clear:left; width:320px; }
        .social-icon { width:20%; }
        
        /*.social-link { width:75%; text-align:left; }
        .social-link p {padding-left:5%; }*/
    }


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*    S U B P A G E   S T Y L E S   S T A R T   H E R E    */
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* Subpage Hero Styles */
    #subpage-hero { clear:both; padding-bottom:10px; }
        #subpage-hero img { width:100%; background-size: contain;  margin-bottom:-5px; }


    .subpage-hero-wrapper { width:750px; margin:0 auto; position: relative; }
    

    @media (min-width:320px) and (max-width:480px) {
        
        .subpage-hero-wrapper
        { 
            width:100%; }
    }

      @media (max-width:481px) {
        /*#subpage-hero img {display:none; }*/
    }

    @media (min-width:481px) and (max-width:768px) {
        
        .subpage-hero-wrapper
    {
            width:100%; }
    }

    @media (min-width:769px) and (max-width:1300px) {
     
    }



/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* Site info / breadcrumb trail */

    #site-info { min-height:40px; width:100%; background-color:#002d72;  }

    #site-info-content { max-width: 750px; margin: 0 auto; /* background-color:#002d72;*/ color:#418fde; padding:12px 10px 10px 10px; }

    #site-info p, #site-info span
        #site-info-subpage p, #site-info-subpage span { color:#F89D2A; font-size:12px; margin:0; /*padding:10px;*/ padding:10px 10px 10px 0; }

    #site-info a:link, #site-info a:visited,
    #site-info-subpage a:link, #site-info-subpage a:visited {
        color:#418fde; text-decoration: underline; }

    #site-info a:hover, #site-info a:active,
    #site-info-subpage a:hover, #site-info-subpage a:active {
        color:#002d72; text-decoration: none; }

    #site-info-subpage { min-height:40px; width:100%; /*background-color:#002d72;*/ clear:both; }


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* Page content Styles */
    #page { width:980px; margin:0 auto; } 
        #page h1 { font-family: Arnhem, serif; font-size:42px; color:#31261D; line-height:120%; }
        #page h2 { color:#002d72; }

    #page-content { width:750px; margin: 0 auto; padding:0 0 60px 0; }
           
        a:link, a:visited { text-decoration: underline; color:#418fde; }
      #page-content  a:visited { text-decoration: underline; color:#a15a95; }
        a:hover, a:active { text-decoration: none; color:#002d72; }

    .banner { width:100%; background-size: contain; max-width:1250px; }

    #page-content hr { border-bottom: 1px solid #e3d8d0; clear: both; padding-top: 30px; height: 1px; border-top: none; border-right: none; border-left: none; }
#page-content p { line-height:180%;}
#page-content ul { line-height: 180%; }

    @media (max-width:479px) {
        #page { width:100%; }
        #page-content { width:100%; float:left; padding: 10px 0 40px 0; }
        #page h1 { font-size:1.75rem; }
    }


    @media (min-width:480px) and (max-width:567px) {
        #page { width:100%; }
        #page-content { width:100%; float:none; padding:30px 0 0 0; max-width: 750px;  }
        #page h1 { font-size:1.75rem; }
    }


    @media (min-width:568px) and (max-width:1024px) {
        #page { width:100%; }
        #page-content { width:100%; float:none; padding:30px 0 0 0; max-width: 750px; }
        #page h1 { font-size:1.75rem; }
    }



/* Page Toolkit content Styles - page width of 1250 pixels */
    #page-toolkit { width:1250px; margin:0 auto; } 
        #page-toolkit h1 { font-family: Arnhem, serif; font-size:42px; color:#31261D; line-height:120%; }
        #page-toolkit h2 { color:#002d72; }

    #page-toolkit-content { width:1250px; margin: 0 auto; padding:0 0 60px 0; }



    #page-toolkit-content hr { border-bottom: 1px solid #e3d8d0; clear: both; padding-top: 30px; height: 1px; border-top: none; border-right: none; border-left: none; }
#page-toolkit-content p { line-height:180%;}
#page-toolkit-content ul { line-height: 180%; }

    @media (max-width:479px) {
        #page-toolkit { width:100%; }
        #page-toolkit-content { width:100%; float:left; padding: 10px 0 40px 0; }
        #page-toolkit h1 { font-size:1.75rem; }
        

        #dashboard { width:100% !important; }
    }


    @media (min-width:480px) and (max-width:567px) {
        #page-toolkit { width:100%; }
        #page-toolkit-content { width:100%; float:none; padding:30px 0 0 0; max-width: 750px;  }
        #page-toolkit h1 { font-size:1.75rem; }
        

        #dashboard { width:100% !important; }
    }


    @media (min-width:568px) and (max-width:1024px) {
        #page-toolkit { width:100%; }
        #page-toolkit-content { width:100%; float:none; padding:30px 0 0 0; max-width: 750px; }
        #page-toolkit h1 { font-size:1.75rem; }
        

        #dashboard { width:100% !important; }
    }

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* Sidebar Styles */

    .sidebar { background-color: #eff5fc/*#f0eae5*/; float:right; width:225px;  margin: 80px 0 30px 30px; padding-bottom:10px; }
    .sidebar .title { font-size:16px; font-weight:bold; }
    .sidebar p { padding:0 10px; font-size:14px; }
        .sidebar a:link, .sidebar a:visited { text-decoration: underline; color: #002d72; }
        .sidebar a:hover, .sidebar a:active { text-decoration: none; color: #418fde; }

        .social-badges-wrapper { width: 100%; margin: 0 auto; float: left; }
            .social-badges { text-align: center; float:left; margin:0 auto; width:33.33%; }
                .social-badges img { border:0; }
            .sidebar hr { border: 1px solid #e3d8d0; width:92%; margin:10px; }


    @media (max-width:374px) {
        .sidebar { width:100%; float:left; padding-bottom:15px; margin:30px 0 15px 0; }
    }

    @media (min-width:375px) and (max-width:508px) {
        .sidebar { width:100%; float:left; /*padding-bottom:15px;*/ margin:30px 0; }
        .social-badges-wrapper { width:80%; float:none; }
    }

    @media (min-width:509px) and (max-width:1024px) {
        .sidebar { margin-top:80px;}
    }


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* Callout Styles */

    .callout { background-color: #eff5fc/*#f0eae5*/; float:right; width:40%;  margin: 10px -115px 30px 30px; padding:10px; }
    .callout .title { font-size:16px; font-weight:bold; }
    .callout p { padding:0 10px; font-size:14px;  }
    .callout ul { list-style: none; }
        .callout a:link, .callout a:visited { text-decoration: underline; color: #002d72; font-size:14px; }
        .callout a:hover, .callout a:active { text-decoration: none; color: #418fde; }

            .callout hr { border: 1px solid #e3d8d0; width:92%; margin:10px; }

        #archiveList ul { /* For newsroom page */
            list-style: none; margin-left:-30px; }

    @media (max-width:374px) {
        .callout { width:75%; float:none; margin: 30px auto 30px auto; }
    }

    @media (min-width:375px) and (max-width:508px) {
        .callout { width:75%; float:none; margin-top:30px; }
        
    }

   @media (min-width:509px) and (max-width:1024px) {
        .callout { margin:10px 0 30px 30px;}
    }


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* SiteExecutive navigation styles */

    .divnav1 ul { list-style: none; padding-left: 25px; }
    .divnav1 ul li  { padding-bottom:10px; font-size:14px; }

    .navitemLast.activenavpath .navitemFirst { padding-top: 12px; }
    .navitem2.activenavpath .navitemFirst { padding-top: 12px; }

    .activenavpage { font-weight:bold ; }


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* works best for one row due to margin-bottom padding on col container */
    .page-content-cols { /*margin-bottom:60px;*/ display: flex; flex-wrap: nowrap; }

    /* Two columns */
    .left-col {  width: 50%; max-width:610px; margin-right: 15px; }
    .right-col {  width: 50%; margin-left: 15px; }
       .page-content-cols h3 { margin-top: 0; }

    /* Three columns */
    .first-col,
    .second-col,
    .third-col {
        width:33%; /*margin:10px; */ }


    @media (max-width:568px) {
        .page-content-cols { display:block; margin:0 auto; }
        
        .left-col { width:100%; margin:0; padding:10px 0 0 0;  }
        .right-col { width:100%; margin:0; padding:30px 0 0 0; }
        
        .first-col,
        .second-col,
        .third-col { width:100%; text-align:center;}
    }


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* Button, Button Page Content - subpage styles, white button with orange border */

    .button-page-content { background-color:#fff; border:1px solid #ff9e1b; padding:10px; text-align: center; width:90%; margin:0 auto; }
        .button-page-content a:link, .button-page-content a { text-decoration: none; color:#418fde; }
        .button-page-content a:visited { text-decoration: none; color:#418fde !important; }
        .button-page-content a:hover { color:#002d72; }

    @media (max-width:667px) {
        .button-page-content/*, .page-content-cols-blue*/ { font-size: 90%; width: 80%; margin: 0 auto; }
    }

    @media (min-width:668px) and (max-width:895px) {
        .button-page-content { margin:0 auto; }
    }


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* Button - blue button styles on sbpages */

     .button-blue { background-color:#418fde; padding:15px 10px; text-align: center; width:40%; margin:0 auto; }
        .button-blue a:link, .button a { text-decoration: none; color:#31261d; font-size:110%; font-weight:600; }
            .button-blue a { color:#31261d !important; }
        .button-blue:hover { transition: background-color 0.5s ease; background-color:#6ca9e6;  }

    @media (max-width:735px) {  
        .button-blue { width:80%;  }
    }


     .button-orange { background-color:#f89d2a; padding:15px 10px; text-align: center; width:60%; /*margin:0 auto;*/ }
        .button-orange a:link, .button a { text-decoration: none; color:#31261d; font-size:110%; font-weight:600; }
            .button-orange a { color:#31261d !important; }
        .button-orange:hover { transition: background-color 0.5s ease; background-color:#fab45b;  }

    @media (max-width:735px) {  
        .button-orange { width:80%;  }
    }




/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* Funder logos / images */

        .flex-container {
          padding: 0;
          margin: 0;
          list-style: none;
          display: -webkit-box;
          display: -moz-box;
            -ms-flex-wrap: wrap;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-flex-flow: row wrap;
          justify-content: space-around;
          
        }

        .flex-item {
          padding: 5px;
          width: 200px;
          /*height: 150px;*/
          margin-top: 10px;
          /*line-height: 150px;
          color: white;
          font-weight: bold;
          font-size: 3em;*/
          text-align: center;
             
        }

    .flex-item img { border:0; }

    
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* Flex wrap - Our Team Styles */

    .row-container { 
        display: flex; flex-wrap: wrap; margin:0 auto; justify-content: center; 
        display: -webkit-flex; /* Safari */ -webkit-flex-wrap: wrap; /* Safari 6.1+ */ }

    .row-container > div { 
        margin: 10px; text-align: center; /*line-height:75px;*/}

.row-container > div:last-child { margin-bottom:60px;  }

    .row-container img { 
        width:100%; max-width:350px; background-size: contain; }

    /*h3.name { line-height:14px; margin:0; }*/
    .row-container > div h3 { /*line-height:24px;*/ margin:0; padding-top:10px;  }
    .row-container > div p { /*line-height:24px;*/ padding-bottom:12px;  }

    @media (max-width:480px) {
        .row-container > div {/* line-height:45px;*/}
        .row-container > div p { line-height: 24px; margin: 0; padding-top: 10px; }
    }


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* Three column Styles - Our Team Styles, used on Our Team page for Support staff listings */

    .three-cols { display: flex; flex-wrap: wrap; margin:0 auto; justify-content: center; max-width:1200px; }
        .three-cols > div { margin:10px; }
        .col-one, .col-two, .col-three { width:30%; }

    @media (max-width:768px) {
        .three-cols { max-width:none;}
        .col-one, .col-two, .col-three { width:100%; }
    }



/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


.label {
	font-weight : 600;
}


/* image float and table float */
@media all and (min-width:300px) and (max-width:479px) {
	.image_float {
        float:none !important; margin: auto; display:block; padding-bottom:5px;
    }
    
    	.table_float { float:none; margin: auto; padding-top:5px; }
        .table_float td { text-align: center; }
		.table_float img { width: 200px !important; }
    
    .caption {
        font-size: .80rem; }
    
}

@media all and (min-width:480px) {
	.image_float {
        float:right;
    }
    
    	.table_float { float:right; padding:10px; width:240px; }
        .table_float td { text-align: center; }
		.table_float img { width: 200px!important; }
    
    .caption {
        font-size: .80rem; }
}


@media all and (min-width:768px) {
    .floating_images {
		overflow:hidden;
	}
	
	.floating_images > div {
		float:left;
		width:48%;
		margin-left:4%;
	}
	
	.floating_images > div:first-child {
		margin-left:0;
	}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* TEACHING TOOLKIT STYLES */

.mySlides {
    display: none; }
.mySlides img {
    vertical-align: middle; width:100%; }

/* Slideshow container */
.slideshow-container {
  max-width: 610px;
  position: relative;
  margin: auto;
    padding-top:5px;
}


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.3s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
/*.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}*/


/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
    margin-top:15px;
}

.active, .dot:hover {
  background-color: #418fde;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 0.5s /*1.5s*/;
  animation-name: fade;
  animation-duration: 0.5s /*1.5s*/;
    animation-timing-function: ease-in;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

    @media (max-width: 479px) {
    .slideshow-container,  .mySlides {
        max-width: 100%; }
    }
    
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

.resources { background-color:#eff5fc; margin-top:8px; padding:15px; min-height:312px;}
.resources h2 { margin-top:5px; }


    @media (max-width:1024px) {
        #page-toolkit h2,
        .resources h2 { font-size:1.35rem; }
        .resources { min-height:auto; }
    }