@media only screen and (max-width: 1600px){
   .video-holder video { top: 0; }
}

@media only screen and (max-width: 1450px){
   header { top: 0; width: calc(100% - 40px); padding: 20px; }
   header .wrap { width: 100%; }
   header.sticky { padding: 20px; }
   nav#main ul li a {  padding: 1em 1.25em; }
   #hero .text {text-align: left;position: absolute;width: 40%;top: 50%;left: 5%;margin-right: 0;transform: translate(0, -50%);}
   #hero .text h1 {font-size: 400%;}
   #top_promos { height: auto; }
   article.promo_box { display: inline-block; margin: 1em; width: 360px; height: 240px;}
   article.promo_box .background { margin-left: 20px; width: 340px; height: 240px; }
   article.promo_box .background-image { width: 340px; height: 240px; background-position: center center;}
   article.promo_box .background h2 { font-size: 150%;  }
   #id { width: 100%; margin: 12em auto 0; }
   #hero, .slide { height: 975px; }
   .slide { background-size: contain; }
   #news .wrap { margin: 2em; width: calc(100% - 8em); padding: 2em; }
}

@media only screen and (max-width: 1300px){
   .wrap { width: 100%; }
   #body { margin: 0 auto; }
   #body .wrap { margin: 2em; width: calc(100% - 8em); padding: 2em; }
   #hero, .slide { height: 850px; }
   #hero:after { height: 100px; }
   .slide { background-size: contain; }
   #hero .text {text-align: left;position: absolute;width: 40%;top: 50%;left: 4%;margin-right: 0;transform: translate(0, -50%);}
   #hero .text h1 {font-size: 250%;}
   #hero .button { font-size: 115%; padding: .5em 1em;  }
   #top_promos { top: -80px; margin-bottom: -80px; }
   #news { font-size: 90%; padding: 0; margin: 2em 0 0 0; }
   #intro .intro-text span { font-size: 115%; }
   #newsletter { padding: 2em 0; width: calc(100% - 4em); font-size: 90%; }
   #newsletter h1 { display: block; margin: 0 0 .5em 0; }
   #stay_connected { font-size: 90%; }
   .promo { width: calc(30% - 40px); padding: 20px; margin: 0 20xp 0 0; vertical-align: top; }
   .promo figure { width: 80px; }
   .promo .text { width: calc(100% - 95px); margin-left: 10px; }
   #social-feed.feed article { width: 35%; margin: 2% !important; }
   footer { width: 100%; }
   footer nav a { font-size: 80%; padding: .5em .5em; }
   footer nav a.icons { font-size: 110%; }
}


@media only screen and (max-width: 1200px) { 
   nav#main ul li { margin: 0 .25em 0 0; }
   nav#main ul li a { padding: 1em 1.25em; font-size: 90%; letter-spacing: .5px; } 
   #top_promos .wrap {
       width: 100%;
       flex: 0 0 auto;
       padding: 0;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: flex-start;
       align-content: flex-start;
       text-align: center;}
   article.promo_box { width: 33.33%; margin: 0;}
   article.promo_box:hover { -webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,.1); box-shadow: 0 0 20px 0 rgba(0,0,0,.1); z-index: 1001; }
   article.promo_box .title {color: #999;position: relative;top: 0;left: 0px;}
   article.promo_box .background {     width: 100%; margin-left: 0; }
   article.promo_box .background-image { width: 100%; }
}

@media only screen and (max-width: 1100px) { 
   #hero, .slide { height: 700px; }
   #hero:after { height: 75px; }
   #hero .text { width: 50%; bottom: 120px; top: initial; transform: none; }
   header .social { display: none; }
   #logo { max-width: 300px; }
   nav#main { position: absolute; top: 0px; right: 0; margin: 0; }
   nav ul#menu li { display: none; }
   nav ul#menu li#top-menu { display: block !important; background: rgba(255,255,255,.6); }
   nav ul#menu li#top-menu svg.icon { background: #00bca8; width: 44px; height: 44px; padding: 0.25rem; border-radius: 0.25rem; }
   nav ul#menu li#top-menu #top-dropdown { width: 50%; }
   nav ul#menu li#top-menu #top-dropdown li { display: block !important; }
   nav ul#menu li#top-menu  > a { color: white !important; width: 50px; }
   nav ul#menu li#top-menu  > a:hover { color: white !important;  }
   #top_promos { top: -50px; margin-bottom: -50px; }
   #id {  margin: 7em auto 0; }
   #snav.horizontal li { font-size: 80%; }
   .video-holder video { height: 100%; width: initial; }
   #bottom_promos { padding: 2em; width: calc(100% - 4em); display: block;}
}

@media only screen and (max-width: 1050px) {
   .logo img { max-height: 60px; }
   #hero, #hero .slide { height: 650px; }
   #hero:after { height: 50px; }
   #hero .text { width: 40%; bottom: 100px; top: initial; transform: none; }
   #top_promos { top: 0px; margin-bottom: 0px; }
   #content { width: 45%; }
   .share-on figure { width: 150px; }
   .share-on .overview { margin-left: 175px; }
   #intro .intro-text span { font-size: 90%; height: auto; }
   #options { width: auto; padding-left: 3%;  margin-left: 3%; }
   #top { margin: 1em 0; border-bottom: 2px #ddd solid;}
   #bottom { margin: 1em 0; }
   h1 { font-size: 250%; }
   h2 { font-size: 180%; }
   h3 { font-size: 150%; }
   h4 { font-size: 120%; }
   #snav.horizontal li { font-size: 60%; }
   .promo { width: calc(30% - 30px); padding: 15px; margin: 0 20px 0 0; vertical-align: top; }
   .promo figure { display: block; }
   .promo .text { width: 100%; margin: 1em 0 0 0; }   
   footer h1 { font-size: 190%; }
   footer nav a { font-size: 70%; padding: .5em .5em; }
   footer nav a.icons { font-size: 100%; }
}

@media only screen and (max-width: 920px) {
   #hero, #hero .slide { height: 600px; }
   #hero .text { width: 35%; bottom: 90px; top: initial; transform: none; }
   #hero .text h1 {font-size: 250%;}
   #hero .button { font-size: 120%; padding: .5em 1em;  }
   .subscribe input { -webkit-box-shadow: inset 0 0 0 1px #ccc;  box-shadow: inset 0 0 0 1px #ccc; }
   nav#main { font-size: 90%; }
   nav#main ul li { margin-right: 2em; }
   #hero, #hero .slide { height: 500px; }
   #intro .intro-text span { font-size: 80%; }
   #intro figure img { height: 225px !important; }
   #content { width: 45%; }
   .share-on figure { width: 75px; }
   .share-on .overview { margin-left: 100px; }
   #content figure.box { float: none; display: block; padding: 0px; }
   .promo figure img {  }
   #content figure.box .button { margin: 20px; }
   .promo.large .overview, .promo.large .overview-inset { position: relative; margin: 1em 0 0 0; }
}

@media only screen and (max-width: 800px) {
   #logo { max-width: 250px; }
   #body .wrap { margin: 1em; width: calc(100% - 4em); padding: 1em; }
   #hero, #hero .slide { height: 550px; }
   #hero:after { height: 40px; }
   #hero .text { width: 40%; bottom: 70px; top: initial; transform: none; }
   #hero .text h1 {font-size: 200%;}
   #hero .text .description { font-size: 100%; }
   #hero .button { font-size: 100%; padding: .35em 1em;  }
   #intro { margin: -1em 0 1em -1em; width: calc(100% + 2em); }
   #intro .intro-text { padding: 1em; }
   article.promo_box .title { font-size: 100%; padding: .5em 0; letter-spacing: 0;}
   article.promo_box, article.promo_box .background, article.promo_box .background-image { height: 160px; }
   article.promo_box .background h2 { font-size: 130%; }  
   h2.heading { text-align: center; }
   
   #social-feed.feed article { width: 44%; margin: 2% !important; }
   
   #news { margin: 2em 0 0 0;padding: 1em 0; font-size: 70%; }     
   #news .wrap { margin: 1em; width: calc(100% - 4em); padding: 1em; }
   #news .left, #news .right {display: block;width: 100%;padding: 0 0 2em 0;}
   #news .right { padding: 2em 0 0 0; border-top: 2px #ccc solid; margin-top: 1em; }
   #news h1 { text-align: center; }
   .news-item { font-size: 120%; }
   .news-item a { margin: 0 0 0 1em; }
   #interest h2 { font-size: 300%; text-align: center; }
   #interest span.text { width: 100%;font-size: 120%; display: block; margin: 0 0 .5em 0; }
   #interest .button {display: block; font-size: 110%; width: 50%; }
   
   #newsletter { padding: 2em 0; width: calc(100% - 4em); font-size: 70%; }
   #newsletter form { width: 100%; }
   input#emailsubmit { width: 100%;  margin: .25em 0 0 0; }
   input#Email { display: block; width: calc(100% - 1.5em); }
   #stay_connected { font-size: 70%; }
   .promo { width: calc(100% - 40px); padding: 20px;  margin: 0 0 2em 0; }
   .promo figure { width: 120px; display: inline-block; }
   .promo .text { width: calc(100% - 145px); margin-left: 20px; }
   footer nav { display: none; }
}

@media only screen and (max-width: 720px) { 
   #hero, #hero .slide { height: 360px; }
   #hero:after { height: 25px; }
   #hero .text { width: 40%; bottom: 50px; top: initial; transform: none; }
   #hero .text h1 {font-size: 200%; margin-bottom: .25em; }
   #hero .text .description { display: none; }
   nav ul#menu li#top-menu #top-dropdown { width: 100%; }
   #snav.horizontal li { width: 25%;  }
   #snav.horizontal li a { font-size: 100%; }
   .feed ul { }
   .feed li { }
   .feed li a { }
   #body { display: block; }
   #content, #options { width: 100%; display: block; margin: 0 0 2em 0; padding: 0; border: none; }
   #options { border-top: 1px #eee solid; padding: 2em 0 0 0; }
   .share-on figure { width: 150px; }
   .share-on .overview { margin-left: 175px; }
   .rightrail { display: block; width: auto; margin: 0 auto; padding: 1em; }
   #intro { display: grid; background: none; }
   #intro .intro-text { padding: 1em; width: auto; display: block; -webkit-order: 2; order: 2; }
   #intro figure {  display: block !important; margin: 0 !important; width: 100% !important; -webkit-order: 1; order: 1; }
   #intro figure img { width: 100% !important; height: auto !important;}
   footer div { display: block !important; }
   footer h1 { font-size: 150%; }
   footer .leftcol, footer .paidfor, footer .rightcol { display: block; width: 100%; text-align: center; margin: 0 0 1em 0; }
}

@media only screen and (max-width: 620px) { 
   #hero, #hero .slide { height: 320px; }
   #hero .text h1 {font-size: 180%;}
   #hero .button { font-size: 100%; padding: .5em 1em;  }
   #logo { max-width: 240px; }
   #id { width: auto; text-align: center; }
   #id h1 { width: auto; padding: .75em 2em 0; font-size: 120%; text-align: center; }
   #content { font-size: 90%; line-height: 1.4; }
   #video, #text-block { text-align: center; font-size: 125%; }
   #interest { font-size: 125%; }
   #interest h2.heading { font-size: 200%; }
   #content figure.box { width: auto; padding: 20px; }

   footer h1 { font-size: 120%; }
}

@media only screen and (max-width: 500px) { 
   #hero, #hero .slide { height: 300px; }
   #social-feed.feed article { width: 70%; margin: 2% !important; }
}

@media only screen and (max-width: 460px) {
      article.promo_box { width: 33%; }
}