/*----------------------------------------------------------------------------------laptop media resolucion------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:1440px){

/*-------------------------------------------------------------------------------------------------slider------------------------------------------------------------------------------------------------*/
  @font-face{
      font-family: avenir;
      src:"../fonts/Avenir-Book-01.ttf";
    }

    #container-video{
      height:auto;
      width:80%;
      margin:10% 10% 1% 10%;
      background:rgb(65,64,66);
      color:white;
      font-family: 'avenir';
    }
      
    #staging-area{
      width:70%;
      padding:5%;
    }
    #staging-area img{
      display: none;
    }
    #list-video{
      width:30%;
      background: rgb(209,211,212);
      color:rgb(65,64,66);
    } 
    #list-video h2{
      padding:15px;
      font-size:20px;
    }
    #list-video li{
      padding: 10px 20px;
      font-size: 15px;
      border-top: 1px solid rgb(65,64,66);
      list-style: none;
      cursor: pointer;
    }
    #list-video li:hover{
      padding:10px 20px;
      font-size:20px;
      border-top: 1px solid white;
      background:white;
      color: rgb(65,64,66);
    }
    .active{
         
      border-top: 1px solid white;
      background:white;
      color: rgb(65,64,66);
    }
    #clearfix{
      display:none;
    }
}
/*----------------------------------------------------------------------------------laptop baja resolucion------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:1280px){

/*-------------------------------------------------------------------------------------------------slider------------------------------------------------------------------------------------------------*/
  @font-face{
      font-family: avenir;
      src:"../fonts/Avenir-Book-01.ttf";
    }

    #container-video{
      height:auto;
      width:80%;
      margin:10% 10% 1% 10%;
      background:rgb(65,64,66);
      color:white;
      font-family: 'avenir';
    }
      
    #staging-area{
      width:70%;
      padding:5%;
    }
    #staging-area img{
      display: none;
    }
    #list-video{
      width:30%;
      background: rgb(209,211,212);
      color:rgb(65,64,66);
    } 
    #list-video h2{
      padding:15px;
      font-size:20px;
    }
    #list-video li{
      padding: 10px 20px;
      font-size: 15px;
      border-top: 1px solid rgb(65,64,66);
      list-style: none;
      cursor: pointer;
    }
    #list-video li:hover{
      padding:10px 20px;
      font-size:20px;
      border-top: 1px solid white;
      background:white;
      color: rgb(65,64,66);
    }
    .active{
      
      
      border-top: 1px solid white;
      background:white;
      color: rgb(65,64,66);
    }
    #clearfix{
      display:none;
    }
}
/*----------------------------------------------------------------------------------tablet/ipad horizontal------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:1024px){

/*-------------------------------------------------------------------------------------------------slider------------------------------------------------------------------------------------------------*/
  @font-face{
      font-family: avenir;
      src:"../fonts/Avenir-Book-01.ttf";
    }

    #container-video{
      height:auto;
      width:80%;
      margin:7% 10% 1% 10%;
      background:rgb(65,64,66);
      color:white;
      font-family: 'avenir';
    }
      
    #staging-area{
      width:70%;
      padding:5%;
    }
    #staging-area img{
      display: none;
    }
    #list-video{
      width:30%;
      background: rgb(209,211,212);
      color:rgb(65,64,66);
    } 
    #list-video h2{
      padding:15px;
      font-size:20px;
    }
    #list-video li{
      padding: 10px 20px;
      font-size: 15px;
      border-top: 1px solid rgb(65,64,66);
      list-style: none;
      cursor: pointer;
    }
    #list-video li:hover{
      padding:10px 20px;
      font-size:20px;
      border-top: 1px solid white;
      background:white;
      color: rgb(65,64,66);
    }
    .active{
     
      
      border-top: 1px solid white;
      background:white;
      color: rgb(65,64,66);
    }
    #clearfix{
      display:none;
    }
}
/*----------------------------------------------------------tablet/ipad---------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
    

@font-face{
          font-family: avenir;
          src:"../fonts/Avenir-Book-01.ttf";
    }

    #container-video{
      height:auto;
      width:100%;
      margin:0;
      background:rgb(65,64,66);
      color:white;
      font-family: 'avenir';
    }
      
    #staging-area{
      width: 100%;
      padding: 0;
      position: relative;
      top: -580px;
      margin-bottom: -580px;
    }
    #staging-area img{
     display:none;
    }
    #staging-area iframe{
      height:400px!important;
      border:0;
    }
     #staging-area h2{
        font-size: 30px;
        margin: 0 5%;

    }
    #list-video{
      width:100%;
      background: rgb(65,64,66);
      color:white;
      position: relative;
      top: 550px;

    } 
    #list-video h2{
      padding:10px 5%;
      font-size:25px;
    }
    #list-video li{
      padding:10px 5%;
      font-size:20px;
      border-top: 1px solid white;
      list-style: none;
      cursor: pointer;

    }
    #list-video li:hover{
/*
      padding:5px 10px;
      font-size:15px;
*/
      border-top: 1px solid white;
      background:white;
      color: rgb(65,64,66);
    }
    .active{
      border-top: 1px solid white;
      background:white;
      color: rgb(65,64,66);
    }
    #clearfix{
        display: block;
        height: 550px;
        width: 100%;
    }
 
      

      
}
/*----------------------------------------------------------MÓVIL---------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 550px) {
    

@font-face{
          font-family: avenir;
          src:"../fonts/Avenir-Book-01.ttf";
    }

    #container-video{
      height:auto;
      width:100%;
      margin:0;
      background:rgb(65,64,66);
      color:white;
      font-family: 'avenir';
    }
      
    #staging-area{
      width:100%;
      padding:0;
      position: relative;
      top: -400px;
      margin-bottom: -400px;

    }
    #staging-area img{
     display:none;
    }
    #staging-area iframe{
      height:270px!important;
      border:0;
    }
     #staging-area h2{
      font-size: 25px;
      margin:0 12%;

    }
    #list-video{
      width:100%;
      background: rgb(65,64,66);
      color:white;
      position: relative;
      top: 370px;
    } 
    #list-video h2{
      padding:10px;
      font-size:20px;
    }
    #list-video li{
      padding:5px 10px;
      font-size:15px;
      border-top: 1px solid white;
      list-style: none;
      cursor: pointer;
    }
    #list-video li:hover{
      padding:5px 10px;
      font-size:15px;
      border-top: 1px solid white;
      background:white;
      color: rgb(65,64,66);
    }
    .active{
      border-top: 1px solid white;
      background:white;
      color: rgb(65,64,66);
    }
    #clearfix{
      display: block;
      height: 370px;
      width: 100%;
    }
 
      

      
}
/*----------------------------------------------------------MÓVIL---------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 375px) {
    

@font-face{
          font-family: avenir;
          src:"../fonts/Avenir-Book-01.ttf";
    }

    #container-video{
      height:auto;
      width:100%;
      margin:0;
      background:rgb(65,64,66);
      color:white;
      font-family: 'avenir';
    }
      
    #staging-area{
      width:100%;
      padding:0;
      position: relative;
      top: -370px;
      margin-bottom: -370px;
    }
    #staging-area img{
     display:none;
    }
    #staging-area iframe{
      height:270px!important;
      border:0;
    }
     #staging-area h2{
      font-size: 25px;
      margin:0 5%;

    }
    #list-video{
      width:100%;
      background: rgb(65,64,66);
      color:white;
      position: relative;
      top: 400px;
    } 
    #list-video h2{
      padding:10px;
      font-size:20px;
    }
    #list-video li{
      padding:5px 10px;
      font-size:15px;
      border-top: 1px solid white;
      list-style: none;
      cursor: pointer;
    }
    #list-video li:hover{
      padding:5px 10px;
      font-size:15px;
      border-top: 1px solid white;
      background:white;
      color: rgb(65,64,66);
    }
    .active{
      border-top: 1px solid white;
      background:white;
      color: rgb(65,64,66);
    }
    #clearfix{
    display: block;
    height: 400px;
    width: 100%;
    }
 
      

      
}
/*----------------------------------------------------------MÓVIL---------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 360px) {
    


    @font-face{
          font-family: avenir;
          src:"../fonts/Avenir-Book-01.ttf";
    }

    #container-video{
      height:auto;
      width:100%;
      margin:0;
      background:rgb(65,64,66);
      color:white;
      font-family: 'avenir';
    }
      
    #staging-area{
      width:100%;
      padding:0;
      position: relative;
      top: -370px;
      margin-bottom: -370px;
    }
    #staging-area img{
     display:none;
    }
    #staging-area iframe{
      height:270px!important;
      border:0;
    }
     #staging-area h2{
      font-size: 23px;
      margin:0 5%;

    }
    #list-video{
      width:100%;
      background: rgb(65,64,66);
      color:white;
      position: relative;
      top: 400px;
    } 
    #list-video h2{
      padding:10px;
      font-size:20px;
    }
    #list-video li{
      padding:5px 10px;
      font-size:15px;
      border-top: 1px solid white;
      list-style: none;
      cursor: pointer;
    }
    #list-video li:hover{
      padding:5px 10px;
      font-size:15px;
      border-top: 1px solid white;
      background:white;
      color: rgb(65,64,66);
    }
    .active{
      border-top: 1px solid white;
      background:white;
      color: rgb(65,64,66);
    }
    #clearfix{
    display: block;
    height: 400px;
    width: 100%;
    }
 
      

      
}
/*----------------------------------------------------------MÓVIL---------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 320px) {
   
   @font-face{
          font-family: avenir;
          src:"../fonts/Avenir-Book-01.ttf";
    }

    #container-video{
      height:auto;
      width:100%;
      margin:0;
      background:rgb(65,64,66);
      color:white;
      font-family: 'avenir';
    }
      
    #staging-area{
      width:100%;
      padding:0;
      position: relative;
      top: -370px;
      margin-bottom: -370px;
    }
    #staging-area img{
     display:none;
    }
    #staging-area iframe{
      height:270px!important;
      border:0;
    }
     #staging-area h2{
      font-size: 20px;
      margin:0 12%;

    }
    #list-video{
      width:100%;
      background: rgb(65,64,66);
      color:white;
      position: relative;
      top: 400px;
    } 
    #list-video h2{
      padding:10px;
      font-size:20px;
    }
    #list-video li{
      padding:5px 10px;
      font-size:15px;
      border-top: 1px solid white;
      list-style: none;
      cursor: pointer;
    }
    #list-video li:hover{
      padding:5px 10px;
      font-size:15px;
      border-top: 1px solid white;
      background:white;
      color: rgb(65,64,66);
    }
    .active{
      border-top: 1px solid white;
      background:white;
      color: rgb(65,64,66);
    }
    #clearfix{
    display: block;
    height: 400px;
    width: 100%;
    }
 
      
}