.videoplayer {
    height: 576px;
    width: 1024px;
    position: absolute;
    display: block;
    overflow: hidden;
}
.videoplayer-show {
    height: 576px;
    position: inherit;
}
                
                

/*----media queries----*/



/* DESKTOP RESPONSE */  

    /* large */     
    @media all and (min-width: 728px) {
        .innerWrapper { width: 1024px; }
        .mem, .lights {height: 576px; width: 100%;} 
        #videoPlayer, .videoplayer {width: 1024px;}
        #videoPlayer, .videoplayer-show { height: 576px;  }     
        }
        
    /* medium */
    @media all and (max-width: 727px) and (min-width: 481px) {
        .innerWrapper { width: 100%; }
        .content .innerWrapper { width: 535px;}
        .tonight .innerWrapper { width: 100%; }
        .tonight h5.header, .tonight h5.thirdAir{ display: none; }
        .tonight h5 { margin-right: 7px; }      
        #videoPlayer, .videoplayer {width: 688px;}
        #videoPlayer, .videoplayer-show { height: 387px; width: 688px; }
        .mem, .lights {height: 387px;  width: 688px;}
        .mem { background-size: 100% auto; }
        .headline p, .headline h4 { display: none; }
        .headline h1 { font: 33px/35px 'JosefinSansStdLight', Arial, sans-serif; }
        .headline { bottom: 40px;}
        .lights2 {top: 418px; width: 688px;}
        .brand {left: -30px; }
        .nav {left: 130px;  } 
        .nav .wrap { width: 394px; overflow:hidden; height:97px; }
        .banner { display: none; }
        .left, .middle, .right { margin-left: 20px; }
        .left.series, .middle.series, .right { width: 502px; }
        .left.series .about { border-bottom: none;  height: 100%;}
        .right .converse .social { border-top: none; }
        .right .ad { margin-left: 20%; }        
        .tile, .modHead.open { margin-left: 20px;  margin-right: 0px; }
        .left .tile { margin-left: 0px;  margin-right: 20px;}
        .left .tile.last { margin-right: 0px; }
        .middle.home { width: 500px; height: 270px;}
        .middle.film { width: 500px; }
        .director, .credits { background: #000; }
        .director .header { text-align: center; }
        .footer { height: 530px; width: 100%;}
        .footer .innerWrapper { width:535px; }  
        .footer .logo span { left: 180px;  top: 20px;}
        .footer .returnUp  span  {right: 10px;}
        .footer .moreContent {width: 480px; height: 310px;  padding-left: 50px;}
        .footer .contentBlock.first { padding: 0 10px 0 10px; height: 150px;}
        .footer .contentBlock.second { padding: 0 0 0 10px; height: 150px; }
        .footer .contentBlock.third { border-left: none;  padding: 0 10px 0 10px; height: 150px; }
        .footer .contentBlock.fourth { padding: 0 0 0 10px; height: 150px; }        
        .footer .fLine { width: 90%;  }
        }   
        
    /* small */ 
    @media all and (max-width: 480px) {
        .gradient {height: 220px;}
        .content .innerWrapper, .innerWrapper { width: 100%; }
        .tonight .innerWrapper { width: 100%; }
        .tonight h5.header, .tonight h5.secondAir, .tonight h5.thirdAir{ display: none; }
        .tonight h5 { margin-right: 7px; }
        #videoPlayer, .videoplayer {width: 100%;  }
        #videoPlayer, .videoplayer-show { height: 220px; width: 100%; }
        .mem, .lights {height: 220px; width: 100%;}
        .mem { background-size: 100% auto; }        
        .headline p, .headline h4 { display: none; }
        .headline h1 { font: 25px/27px 'JosefinSansStdLight', Arial, sans-serif; }
        .headline { right: 0px; width: 40%; padding: 10px 3px 20px 5px; bottom: 40px;}
        .lights2 {top: 251px; width: 100%;}     
        .brand { left: -3px; height: 160px; width: 107px; padding: 8px 0 0 0px; background: url('http://a.espncdn.com/30for30/prod/assets/brand_small.png') top center no-repeat;}                        
        .brand .espnFilms span { margin: 2px 0 0 18px; width: 68px; height: 16px; background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -3px;}
        .brand .espnFilms span:hover { background-position: -70px -3px; }                                      
        .brand .thirty4thirty span { margin: 6px 0px 3px 18px; width: 68px; height: 25px; background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -20px;}
        .brand .thirty4thirty span:hover, .brand .thirty4thirty.active span { background-position: -70px -20px;}                 
        .brand .buick span { margin: 0 0px 7px 19px; width: 68px; height: 18px; background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -47px;}
        .brand .buick span:hover { background-position: -70px -47px; }                                            
        .brand .volume1 span { margin: 0 0 5px 19px; width: 68px; height: 12px; background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -67px; }
        .brand .volume1 span:hover, .brand .volume1.active span { background-position: -70px -67px; }                              
        .brand .volume2 span { margin: 0 0 4px 19px; width: 68px; height: 12px;  background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -80px; }
        .brand .volume2 span:hover, .brand .volume2.active span { background-position: -70px -80px; }                                              
        .brand .shorts span { margin: 0 0 7px 19px; width: 68px; height: 12px;  background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -92px;}
        .brand .shorts span:hover, .brand .shorts.active span { background-position: -70px -92px; }      
        
        .nav {left: 130px; display: none;} 
        .nav .wrap { width: 262px; overflow:hidden; height:97px; }
        .banner { display: none; }      
        .filmStream  { display: none; }
        .left, .left.series, .middle.series, .right { width: 348px;}
        .left.series .about { border-bottom: none; height: 100%;}
        .right .converse .social { border-top: none; }
        .rightFloat { display:none; }
        .middle.home { width: 348px; height: 470px;}
        .shorts {width: 368px;}
        .middle.film { width: 348px; }      
        .director, .credits { background: #000; }
        .director .header { text-align: center; }       
        .left .about { width: 348px; height: 100%;}
        .left .caption {padding-bottom: 10px;}
        .tile, .modHead.open { margin-left: 20px;  margin-right: 0px; }
        .left .tile.last { display: none; }
        .left.home .about, .left.film, .left.series { margin-left: 20px; }
        .middle { margin-left: 20px;}
        .right { margin-left: 20px;}
        .right .ad { margin-left: 7%; }     
        .footer { height: 770px; width: 100%;}
        .footer .innerWrapper {width:360px;}
        .footer .logo span { left: 80px;  top: 20px;}
        .footer .returnUp  span  {right: 5px;}
        .footer .moreContent {width: 300px; height: 550px; }
        .footer .contentBlock.first { padding: 0 20px 0 30px; }
        .footer .contentBlock.second { padding: 0 20px 0 30px; }
        .footer .contentBlock.third { border-left: none;  padding: 0 20px 0 30px; }
        .footer .contentBlock.fourth { padding: 0 20px 0 30px; }
        .footer .fLine { width: 90%; text-align: left; }
        }
        
/* MOBILE RESPONSE */

    /* iPad */  
    @media screen and (max-device-width: 1024px) and (min-device-width: 728px) {
        .content .innerWrapper, .innerWrapper { width: 1024px; }
        .left { padding-left: 10px; margin-right: 10px; }
        .middle { margin-right: 10px; }
        .right {padding-right: 10px; }
        .tonight { width: 1024px; }
        #videoPlayer, .videoplayer {width: 1024px; }
        .mem, .lights {  padding: 0px;}
        .lights2 { width: 1024px;}      
        .banner { width: 502px; overflow:hidden;}
        .brand {left: -30px; }  
        .nav {left: 130px; }        
        .modHead.open { margin-left: 10px; } 
        .tile { margin: 0 5px 20px 10px; }      
        .left .modHead.open { margin-left: 0px; } 
        .left .tile { margin: 0 20px 20px 0px; }
        .left .tile.last { margin-right: 0px; }     
        .footer, .footer .innerWrapper {width:1024px; } 
        .footer .moreContent { padding: 20px 0px; }     
        }       
        
    /* iPhone */    
    @media screen and (max-device-width: 480px) {
        .gradient {height: 270px;}
        .outerWrapper { width: 480px; }
        .tonight .innerWrapper { width: 100%; }
        .tonight h5.header, .tonight h5.secondAir, .tonight h5.thirdAir{ display: none; }
        .tonight h5 { margin-right: 7px; }
        .filmStream  { display: none; }
        #videoPlayer, .videoplayer {width: 480px;  height: 270px; }
        #videoPlayer, .videoplayer-show { height: 270px; width: 480px; }
        .mem, .lights {height: 270px; width: 480px;}
        .mem { background-size: 100% auto; }
        .headline p, .headline h4 { display: none; }
        .headline h1 { font: 25px/27px 'JosefinSansStdLight', Arial, sans-serif; }
        .headline { right: 10px; width: 40%; padding: 10px 3px 20px 5px; bottom: 10px;}
        .lights2 {top: 251px; width: 480px;}
        .lights, .lights2 { display: none; } 
        .brand { left: -3px; height: 160px; width: 107px; padding: 8px 0 0 0px; background: url('http://a.espncdn.com/30for30/prod/assets/brand_small.png') top center no-repeat;}                        
        .brand .espnFilms span { margin: 2px 0 0 18px; width: 68px; height: 16px; background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -3px;}
        .brand .espnFilms span:hover { background-position: -70px -3px; }                                      
        .brand .thirty4thirty span { margin: 6px 0px 3px 18px; width: 68px; height: 25px; background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -20px;}
        .brand .thirty4thirty span:hover, .brand .thirty4thirty.active span { background-position: -70px -20px;}                 
        .brand .buick span { margin: 0 0px 7px 19px; width: 68px; height: 18px; background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -47px;}
        .brand .buick span:hover { background-position: -70px -47px; }                                            
        .brand .volume1 span { margin: 0 0 5px 19px; width: 68px; height: 12px; background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -67px; }
        .brand .volume1 span:hover, .brand .volume1.active span { background-position: -70px -67px; }                              
        .brand .volume2 span { margin: 0 0 4px 19px; width: 68px; height: 12px;  background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -80px; }
        .brand .volume2 span:hover, .brand .volume2.active span { background-position: -70px -80px; }                                              
        .brand .shorts span { margin: 0 0 7px 19px; width: 68px; height: 12px;  background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -92px;}
        .brand .shorts span:hover, .brand .shorts.active span { background-position: -70px -92px; }      
        .nav {left: 130px; display: none;} 
        .nav .wrap { width: 262px; overflow:hidden; height:97px; }
        .banner { display: none; }
        .left, .left.series, .middle.series, .right, .left .about { width: 440px;}
        .left.series .about { border-bottom: none;  height: 100%;}
        .right .converse .social { border-top: none; }
        .rightFloat { display:none; }
        .middle.home { width: 440px; height: 470px;}
        .shorts {width: 440px;}
        .shorts .tile.small { margin-left: 35px; }
        .middle.film { width: 440px; }      
        .director, .credits { background: #000; }
        .director .header { text-align: center; }   
        .tile, .modHead.open { margin-left: 20px;  margin-right: 0px; }
        .left .tile.last { display: none; }
        .left.home .about, .left.film, .left.series { margin-left: 20px; }
        .middle { margin-left: 20px;}
        .right { margin-left: 20px;}
        .right .ad { margin-left: 0px; }
        .footer { height: 770px; width: 480px;}
        .footer .innerWrapper {width:440px;}
        .footer .logo span { left: 120px;  top: 20px;}
        .footer .returnUp  span  {right: 0px;}
        .footer .moreContent {width: 440px; height: 550px; }
        .footer .contentBlock.first { padding: 0 20px 0 80px; }
        .footer .contentBlock.second { padding: 0 20px 0 80px; }
        .footer .contentBlock.third { border-left: none;  padding: 0 20px 0 80px; }
        .footer .contentBlock.fourth { padding: 0 20px 0 80px; }
        .footer .fLine { width: 90%; text-align: left; }
        }