@media only screen and (max-width: 1400px){
   #hero { height: 800px; }
   .slide { height: 790px; opacity: 0.6;}
   nav#main { font-size: 90%; }
   .wrap, header .wrap { width: 90%; }
   footer { width: 100%; }
   #hero, #below { font-size: 90%; }
   #hompepage-promo-boxes { top: -2.5em; margin-bottom: -1em; } 
   h1 { font-size: 220%; }
   h2 { font-size: 180%; }
   h3 { font-size: 140%;} 
   h4 { font-size: 120%;}
}

@media only screen and (max-width: 1240px) {
   .logo, .logo img, .logo svg { max-width: 170px; max-height: 66px; }
   .interior header { border-bottom: 5px var(--main-highlight) solid; }
   nav .share { margin: 0 80px 0 0;  top: 17px; }
   .interior nav#main, nav#main { position: absolute; top: 5px; right: 0; }
   nav ul#menu li { display: none; }
   nav ul#menu li#top-menu { display: block !important; }
   nav ul#menu li#top-menu #top-dropdown li { display: block !important; }
   nav ul#menu li#top-menu  > a { color: white !important;  }
   nav ul#menu li#top-menu  > a:hover { color: white !important;  }
   nav#foot ul#menu li { display: inline-block; font-size: 90%; }

   #hero { }
   #intro .text { width: 90%; font-size: 90%; }
   
   #content { width: auto; padding: 2em; }
   #id .title h1  { font-size: 220%; }
   h1 { font-size: 160%; }
   h2 { font-size: 140%; }
   h3 { font-size: 120%;} 
   h4 { font-size: 110%;}
   #options { width: auto; padding-left: 3%;  margin-left: 3%; }
   .interior.form-page #content { width: 80%; margin: 0 auto; }
}

@media only screen and (max-width: 1000px) {
   footer .logo img { width: auto; }
   .flex-block { display: grid; grid-template-columns: repeat(2, 1fr); }
   .col, .col:first-child { display: block; width: 100%; margin: 0 0 2em 0; }
   .interior.form-page #content { width: 90%; margin: 0 auto; }
}

@media only screen and (max-width: 920px) {
   header { position: fixed; top: 0; border-bottom: 10px var(--main-highlight) solid; background: var(--main-bg-color); -webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,.2); box-shadow: 0 0 3px 0 rgba(0,0,0,.2);}
   #hero { margin-top: 80px; }
   .slide { height: 600px; opacity: 0.8; }
   nav#main { font-size: 90%; }
   nav#main ul li { margin-right: 0em; }
   nav#foot ul#menu li { display: inline-block; font-size: 70%; }
   #overview { display: block; }
   .partner-logo img { height: 90px; }
   #hero { height: auto; }
   #intro { position: relative; width: 100%; top: initial; height: auto; right: initial; bottom: initial; padding: 2em 0; }
   #intro .text h1 { font-size: 200%; }
   #intro .text span { font-size: 120%; }
   .action { max-width: 90%; padding: 5%; margin-top: 1em; }
   #contact .left { margin: 0 0 2em 0; width: 100%; display: block; }
   #contact .right { background: #eee; padding: 5.0%; width: 90%; display: block; } 
   .flex_block { grid-template-columns: repeat(2, 1fr);}
}

@media only screen and (max-width: 720px) { 
   .slide { height: 400px;  }
   #content, #options { width: 100%; display: block; margin: 0 0 2em 0; }
   #options { border-top: 1px #eee solid; padding: 2em 0 0 0; }
   .rightrail { display: block; width: auto; margin: 0 auto; padding: 1em; }
   #below .wrap { display: block !important; }
   form div.fields { width: 100%; }
   form li { display: block; width: 100% !important; margin: .2em 0 !important; }
   form div.submission { margin: 0; width: 100%; float: none; display: block; }
   #signup h2 { font-size: 80%; }
   .home-section { padding: 3em 0; font-size: 110%; }
   .title, .title h1 { width: 90%; }
   .title h1, #id .title h1  { font-size: 180%; margin-bottom: 25px; }
   .title h1::after, #id .title h1::after {  height: 5px; bottom: -10px;}  
   h1 { font-size: 140%; }
   h2 { font-size: 120%; }
   h3 { font-size: 110%;} 
   h4 { font-size: 105%;}
   .interior.form-page #content { width: 100%; margin: 0 auto; }
   footer div { display: block !important; font-size: 90%; }
   footer .share { position: relative; top: 0; }
   footer .leftcol, footer .paidfor, footer .rightcol { display: block; width: 90%; text-align: center; margin: 0 auto 1em; }
}

@media only screen and (max-width: 640px) { 
   nav#foot ul#menu li { display: block; font-size: 90%; margin: .25em 0; }
   #hero h2 { font-size: 160%; }
   .slide { height: 350px; }
   #body { font-size: 90%; line-height: 1.2; }
   article li { margin-bottom: 0.5em; }
   .partner-logo img { height: 60px; }
   #hompepage-promo-boxes { display: block; margin: 1em 0; }
   #hompepage-promo-boxes article { width: 100% !important; height: 300px; }
   #hompepage-promo-boxes article:hover { 
      -webkit-box-shadow: none;
      box-shadow: none;
      -moz-transform: none;
      -webkit-transform: none;
      -o-transform: none;
      -ms-transform: none;
      transform: none;  }
   #mc_embed_signup .mc-field-group2, #mc_embed_signup .mc-field-group3 { width: 100% !important; margin: 0 0 .3em 0;}
}

@media only screen and (max-width: 500px) { 
   .slide { height: 300px; }
   #body { font-size: 90%; line-height: 1.2; }
}

@media only screen and (max-width: 460px) { 
}

@media only screen and (max-width: 385px) { 
   nav .share { display: none; }
}


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

   html {
      font-family: 'Open Sans', sans-serif;
      color: #373737; }
      
   a {
      color: #D23732; }
     
   a:focus, 
   a:hover {
      color: #999; }
   
   a:active {
      color: #444; }
      
   .button {
      font-family:  'Montserrat', sans-serif;
      background: #D23732;}
      
   .button:hover, .button:focus { background: #999; }
   .button:active { background: #373737; }
      
   h1, h2, h3, h4 { 
     color: #D23732;}
     
   h1 {font-family: 'Montserrat', sans-serif;}

   .icons.circle {
      color: #fff !important;
      background-color: #D23732; }

   .icons.circle:hover {
      background-color: #373737; }
      
   header.sticky { 
      background: #fff; }
   
   .interior header {
      border-bottom: 10px #D23732 solid;
      background: #fff; }
      
   footer {
      background: #082963;
      border-top: 10px #D23732 solid; }
   
   nav#foot ul li a.donate { -webkit-box-shadow:inset 0 0 0 2px #D23732; box-shadow:inset 0 0 0 2px #D23732; }
   nav#foot ul li a.donate:hover {  -webkit-box-shadow:inset 0 0 0 2px #999; box-shadow:inset 0 0 0 2px #999;}
   nav#foot ul li a.active:hover { -webkit-box-shadow:inset 0 0 0 2px #373737; box-shadow:inset 0 0 0 2px #373737; }
   
   nav#foot ul li a:hover { background: #D23732; color: white; }
   nav#foot ul li a:active { background: #999; color: white;  }
   
   nav#main ul li a.donate { -webkit-box-shadow:inset 0 0 0 2px #D23732; box-shadow:inset 0 0 0 2px #D23732; }
   nav#main ul li a.donate:hover {  -webkit-box-shadow:inset 0 0 0 2px #999; box-shadow:inset 0 0 0 2px #999;}
   nav#main ul li a.active:hover { -webkit-box-shadow:inset 0 0 0 2px #373737; box-shadow:inset 0 0 0 2px #373737; }
   nav#main ul li a:hover { background: #D23732; color: white; }
   nav#main ul li a:active { background: #999; color: white;  }
   
   nav .share .icons:hover { color: #D23732; }
   
   nav ul#menu li#top-menu  > a {background:#D23732;  }
   nav ul#menu li#top-menu  > a:hover { color: #D23732 !important;}
   nav ul#menu li#top-menu > a:hover span.icon:before { color: #D23732 !important; }
   nav ul#menu li#top-menu.active a:hover span.icon:before { color: #D23732 !important; }
   nav ul#menu li#top-menu #top-dropdown { background-color: #D23732; }
         
         
   
   #hero {
      background: #aaa;
      border-bottom: 10px #D23732 solid; }
      
   .home-section.get-involved { background: #373737; }
      
   .title h1 { 
      font-family: 'Domine', sans-serif;
   	color: #D23732;}
   .title h1::after { 
   	background: #e9eaed;  }
   .title.alt::after { background: #999; }
   
   .flex_block a span.title2 {font-family: 'Domine', sans-serif; }
   .flex_block a:hover span.title2 {color: #999; }
   
   #id .title h1 { 
      font-family: 'Domine', sans-serif;
   	color: #373737; }
      
   #id .title h1::after {  
   	background: #D23732; }
      
   #body { 
      background:  #E9EAED; padding: 12.5em 0 4em; }

}