/* these are the ideal media queries
only screen and (min-width:480px)
only screen and (min-width:768px)
only screen and (min-width:960px)
*/
/*airRescue*/

/*body.dNonMobile*/ /*this means it's desktop or tablet. can use this to target desktop when the screen is small like a mobile if needed. are doing this to view the 
mobile hero image on desktop. only use if media queries can't do what you need  */
/*body.dMobile */ /*can use this to target mobile only. only use if can't use media queries*/
/*body.airRescue*/ /*use this to target this page*/
/*body.noMediaQuery*/ /*use this to target devices that don't support media queries such ie8 and below*/


/*air rescue*/
.dNonMobile .airRescue #hero .innerContainer {
    color: #fff;
}
.airRescue #hero .innerContainer .copy {
    max-width: 550px;
    display:block;
    margin:0 auto;
    padding-top: 102px;
    color:#fff;
}

.airRescue #hero 
{
    background:url('../img/mobile/airRescue.jpg') no-repeat center 0 ;
    background-size:contain;  
    height:147px;
    padding-bottom:96px;
}
.dNonMobile .airRescue #hero 
{
    background:url('../img/airRescue.jpg') no-repeat center 0 ;
    background-size:auto;  
    padding-bottom:0;
}

.webEpisode #hero 
{
    background:url('../img/mobile/webEpisode.jpg') no-repeat center 0;
}

.dMobile .webEpisode #hero 
{
background-size:contain;
}

.dNonMobile .webEpisode #hero 
{
    background:url('../img/webEpisode.jpg') no-repeat center 0;
}

.airRescue #hero .container {
    width: 100%;
    overflow: hidden;
}

.dNonMobile .airRescue #hero
{
    height:343px;
}

.airRescue #hero .innerContainer {
    text-align:center;
}

.airRescue #main 
{
    padding-top:0.5em;
}
.dNonMobile .airRescue #main {
    padding-top: 3.5em;
}

.dNonMobile .airRescue #hero .innerContainer .copy {
    padding-top: 220px;
}

.airRescue .herobox { display:block;max-width:100%;margin:0px auto 20px auto;clear:both;position:relative;width:280px;}
.airRescue .herobox .img { width:100%;float:left;}
.airRescue .herobox .img img { width:100%;}
.airRescue .herobox .content { clear:both;background-color:#FFFFFF;margin:0 auto;padding:20px;  }

.airRescue .herobox .content h1 .date { font-size: 12px; float: right; line-height: 35px; font-family: arial; font-weight: bold;text-decoration:none; }
.date { text-decoration: none; }

.airRescue .box {margin:20px;position:relative;background-color:#fff;}
.airRescue .box h2 { font-size:22px;}
body .airRescue .box .playhover {width:52px;height:52px;top:90px;left:50%;margin:-44px 0 0 -24px;position:absolute;z-index:1000; background:transparent url('../img/tv/playhover.png') no-repeat left top;}
body .airRescue .herobox  .playhover {width:52px;height:52px;top:30%;margin:-25px 0 0 -25px;left:50%;position:absolute;z-index:1001; background:transparent url('../img/tv/playhover.png') no-repeat left top;}

.airRescue .box .imgandtitle { 
    height:175px;
   
}
.airRescue .box .imgandtitle .title { 
    padding:5px 17px 21px 17px;
    vertical-align:top;

}
.airRescue .box .overview { 
    padding:3px 17px;
    position:absolute;
    top:172px;
    left:0;
    z-index:10;
    background-color:#fff;
    width:266px;
    border-bottom: 1px solid #dedede;
}
@media only screen and (max-width: 320px) 
{
    .airRescue .herobox {
        height: auto;
        max-width:620px;
        width:auto;
        margin:20px;
        background-color:#fff;
    }
        .airRescue .herobox .content h1 {
            font-size:22px;
        }

    .airRescue .box .overview { width: auto; position: static; top: 0; padding-bottom: 10px; }

}

@media only screen and (min-width: 321px) 
{
    .airRescue .herobox {
        height: auto;
        max-width:620px;
        width:100%;
    }

    .airRescue .herobox .img {
        max-width: 620px;
        width:100%;
    }
    .airRescue .herobox .content {
        clear: both;
        float:none;
    }

    .chronicleDisplayBlack {
       /* margin-bottom: 10px;*/
    }

    body .airRescue .herobox .playhover { top: 18%; }
    .airRescue .box .overview { width: auto; padding-bottom: 10px; }

}

@media only screen and (min-width: 721px) 
{
    body .airRescue .box, .herobox .img { position:relative;}
    body .airRescue .box .playhover {width:52px;height:52px;top:50%;left:50%;margin:-44px 0 0 -24px;position:absolute;z-index:1000; background:transparent url('../img/tv/playhover.png') no-repeat left top;}
    body .airRescue .herobox  .playhover {width:52px;height:52px;top:50%;margin:-25px 0 0 -25px;left:34%;position:absolute;z-index:1001; background:transparent url('../img/tv/playhover.png') no-repeat left top;}







    .airRescue #hero .innerContainer .copy {
        font-size: 1.3em;
    }

.airRescue .boxes { 
    max-width:960px;margin:0 auto;
    display:block;

}
.airRescue .box 
{
    margin:0 10px 20px 10px;
    background-color:#FFFFFF;
    float:left; 
    position:relative;
}



/*.airRescue .box.first { margin-left:0px;}
.airRescue .box.last { margin-right:0;}*/



     
   /*.airRescue .herobox { width:940px;height:273px;margin:0 auto 20px auto;clear:both;display:block;max-width:945px;}
    .airRescue .herobox .img { width:620px;height:273px;background-color:#000;float:left;}
    .airRescue .herobox .content {clear:none; width:260px;height:213px;padding:30px;background-color:#FFFFFF;float:right;}
    .airRescue .herobox .content h1 { margin:0 0 0px 0; font-size:22px;}
    .airRescue .herobox .content p { padding:10px 0 20px 0;font-size:1.2em;}*/

    .airRescue #hero .container
    {
        max-width:1800px;
    }

    .dNonMobile .airRescue #hero .scaleImg 
    {
        display:block;    
    }     
    .airRescue #hero
    {
        max-width:1800px;   
    }     

    .dNonMobile .airRescue #hero .container 
    {
        padding-top:0;
    }

    .airRescue .box 
    {
        width:300px;
    }

}

.cl { clear:both;}
    



@media only screen and (min-width: 950px) {

   .airRescue .herobox { width:940px;height:273px;margin:0 auto 20px auto;clear:both;display:block;max-width:945px;}
    .airRescue .herobox .img { width:620px;height:273px;background-color:#000;float:left;}
    .airRescue .herobox .content {clear:none; height: 243px; width:280px; padding:15px 20px; font-size:12px; background-color:#FFFFFF;float:right;}
    .airRescue .herobox .content h1 { margin:0 0 0px 0; font-size:22px;}
    .airRescue .herobox .content p { padding:10px 0 20px 0;font-size:1.2em;}

}