@import url(http://fonts.googleapis.com/css?family=Roboto);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700);

.todo{
    width: 100%;
}

body {
    /*background-image: url(imagenes/fondo2.gif);*/
    background-color: #e8e8e8;
}
    
#contenedor { 
    background-color: #f5f5f5;
    width: 60rem;
    height: auto;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
}



/*-------------------------------HEADER------------------------------------*/

#banner1{
    width: 100%;
}

header {
    width: 100%;
    margin: auto;
}


#redes_sociales ul li {
    list-style: none;
    margin-left: 3px;
    float: left;
}

#redes_sociales ul{
    margin: 0;
    padding: 0;
    height: 1.875rem;
}

 #redes_sociales {
    margin-top: -40px;
    margin-right: 10px;
    width: auto;
    height: 1.875rem;
    float: right;
    position: relative;
    z-index: 1;
    overflow: visible;   
}

#logos ul li a img{
    width: 1.875rem;
}

#botonera {
    margin-top: -20px;
    background-color: #4dadcb;
    width: 100%;
    z-index: 1;
    height: auto;
}
 
#botonera nav ul {
    overflow: hidden;
    width: 100%;
    margin-left: 0px;
    height: auto;
    padding: 0;

}

#botonera nav > ul > li:hover div {
    display:table;
}

#botonera nav ul li div {
	width:12rem;
	position: absolute;
    left:50;
	background:#4dadcb;
	box-sizing:border-box;
	display:none; 
    z-index: 1;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    }

#botonera nav ul li div ul {
	width:12rem;
	display:table-cell;
	border-right:1px solid rgba(255,255,255,.5);
	box-sizing:border-box;
    padding: 0;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

#botonera nav ul li div ul li {
    width: 100%;
    margin-left: 0px;
    text-align:left;
}

#botonera nav ul li div ul li:last-child {
border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

#botonera nav ul li {
    text-align: center;
    padding-top: 20px;
    height: 2.1875rem;
    list-style: none;
    float: left;
}


#botonera nav ul li a {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    margin-right: 50px;
    margin-left: 30px;
    color: white;
        
}

#botonera nav> ul> li:hover{
            border-top: 5px solid rgba(255, 255, 255, 0.67);
}

#botonera nav ul li a:hover {
    color: #60d5fa;
}


/* #envivo {
    width: 111px;
    height: 55px;
    float: right;
} */ 



.clear {
    clear: both;
    
}

#botonera form{
    height: 2.5rem;
    width:13.4375rem;
   float: right;
    margin-top: -63px;
}

#botonera input{
    width: 8.75rem;
    height: 0.5rem;
    background-color: white;
    color: black;
    float: left;
}

#lupa{
    margin-top: 7px;
    width: 1.875rem;
    height: 1.875rem;
    margin-left: 180px;
}

/*-------------------------------PÁGINA------------------------------------*/


#pagina section {
    /*background-color: #60d5fa;*/
    float: left;
    width: auto;
    margin: auto;
    margin-top: 5px;
    
}

#estas_viendo{
    border-right: solid 3px #DA1F1B;
    width: auto;
    margin-top: 0px;
    height: 29.6875rem;
    float: right;
}

#estas_viendo ul{
    width: auto;
    margin-left: 0px;
    margin-top: 50px;
}

#estas_viendo ul li{
    width: 12.5rem;
    list-style: none;
    margin-left: 0px;
}

#termino {
    margin-left: 60px;
    border-bottom: 50px solid #60d5fa; 
    border-left:40px solid transparent; 
    height: 0; 
    width: 6.25rem;
}

#termino h1{
    color: #d60f1e;
    font-family: 'Roboto', sans-serif, ;
    margin-right: 20px;
    padding-top: 10px;
    font-size: 12pt;
}

#termino p{
    font-family: 'Roboto', sans-serif, ;
    margin-right: 20px;
    margin-top: -10px;
    font-size: 8pt;
}

#despues h1{
    color: #d60f1e;
    font-family: 'Roboto', sans-serif, ;
   margin-right: 20px;
    padding-top: 10px;
    font-size: 12pt;
}

#despues p{
    font-family: 'Roboto', sans-serif, ;
  margin-right: 20px;
    margin-top: -10px;
    font-size: 8pt;
}

#viendo h1{
    color: #60d5fa;
    font-family: 'Roboto', sans-serif, ;
    margin-right: 20px;
    font-size: 1.25rem;
    text-align: right;
}

#viendo p{
    font-family: 'Roboto', sans-serif, ;
    margin-right: 20px;
    margin-top: -10px;
    font-size: 10pt;
    text-align: right;
}

#viendo{
    margin-top: 10px;
    border-bottom: 70px solid #d60f1e; 
    border-left: 50px solid transparent; 
    height: 0; 
    width: 9.375rem;
}

#despues{
    margin-left: 60px;
    margin-top: 10px;
     border-bottom: 50px solid #60d5fa; 
    border-left:40px solid transparent; 
    height: 0; 
    width: 6.25rem;
}

#ver_programacion{
    float: right;
    width: 14.375rem;
    height: 1.875rem;
    background-color: #DA1F1B;
    padding-top: 10px;
    margin-left: 0px;
    margin-top: 30px;
    border-top-left-radius: 90px;
    border-bottom-left-radius: 90px;
}

#ver_programacion a{
    color: white;
    margin-left: 15px;
    text-decoration: none;
}

#slider{
    display: block;
    width: 100%; 
}

.flexslider {
    width: 700px;
}

#pagina #uno {
    width: 23.75rem;
    height: 18.75rem;
    /*background-color: #13414f;*/
    border-top: solid 20px #13414f;
    float: left;
    margin-top: 0px;
    position: relative;
}


#uno {
  color: #13414f;
  text-align: justify;
}

#uno h3 {
    padding: 10px;
    font-family: 'Roboto', sans-serif, ;
    margin-top: 0px;
    color: #13414f;
}

#uno p {
    width: 90%;
    margin: auto;
    font-family: 'Roboto', sans-serif;
    padding: 10px;
}

#uno p span a {
    font-style: italic;
    text-decoration:none;
}

#pagina #dos {
    width: 35rem;
    height: 18.75rem;
    /*background-color: #da1f1b;*/
    border-top: solid 20px #da1f1b;
    margin-top: 0px;
    float: right;
}

#video1 {
    width: 32.8125rem;
    margin-top: 10px;
    margin-left: 15px;
}

#pagina #tres {
    width: 36.25rem;
    height: 18.75rem;
    /*background-color: #60d5fa;*/
    border-top: solid 20px #60d5fa;
    float: left;
    margin-top: 0px;
}

#tres h3 {
    box-sizing: padding-box;
    padding: 10px;
    color: #60d5fa;
    margin-top: 0px;
}

#video2 {
    height: 15.9375rem;
    width: 31.25rem;
    margin-top: 20px;
    margin-left: 50px;
}

#pagina #cuatro {
    width: 22.5rem;
    height: 18.75rem;
    /*background-color: #d60f1e;*/
    border-top: solid 20px #d60f1e;
    margin-top: 0px;
    float: right;
}

#cuatro h3{
    color:#d60f1e;
    margin-top: 0px;
    padding: 10px;
}

#cuatro p{
    margin: auto;
    width: 90%;
    color: #d60f1e;
    margin-top: 30px;
    text-align: justify;
    padding: 10px;
}

#cuatro p span a{
    font-style: italic;
    color: #d60f1e;
}

#cinco{
    /*background-color: #4dadcb;*/
    border-top: solid 20px #4dadcb;
    height: 11.25rem;
    width: 100%;
    margin-top: 10px;
}

#cinco h3{
    margin-top: 10px;
    padding: 10px;
}

#cinco p{
    font-size: 17px;
    margin: 15px;
    text-align: justify;
}
#seis{
    /*background-color: #60d5fa;*/
    border-top: solid 20px #60d5fa;
    height: 15.625rem;
    width: 12.5rem;
    float: left;
}

#seis h3{
    font-size: 16px;
}

#seis p{
    font-size: 13px;
    line-height: 13px;
    text-align: justify;
}

#siete{
    /*background-color: #13414f;*/
    border-top: solid 20px #13414f;
    height: 15.625rem;
    width: 46.25rem;
    float: right;
}

#siete p{
    width: 500px;
    float: left;
}

#siete img{
     float: right;
}

#seis h3{
    font-size: 16px;
}

#siete h3{
    font-size: 16px;
}

.clear {
    clear: both;
}

/*---------------------CONTACTANOS--------------------------*/

label {
    font-family: 'Roboto', sans-serif;
    display:block;
    margin-top:20px;
    letter-spacing:1px;
  }

#formulario {
   display: block;
    width:50%;
    font-family: 'Roboto', sans-serif;
  }

#formulario form {
margin-left: 10px;
   width:400px;
    float: left;
    }
 
form input, textarea {
    width:380px;
    height:27px;
    background:#4dadcb;
    border:2px solid #f6f6f6;
    padding:10px;
    margin-top:5px;
    font-size:10px;
    color:#ffffff;
}
 
textarea {
    height:150px;
   }
 



#submit {
    width:85px;
    height:35px;
    border:none;
    margin-top:20px;
    cursor:pointer;
}

#contactanos {
    margin-top: 20px;
    width: 45%;
    float: right;
    font-family: 'Roboto', sans-serif;
    border-bottom: 70px solid #f7df00; 
    border-left: 50px solid transparent; 
    height: 0;
                
}

#contactanos h1{
    text-align: center;
    width: 100%;
    color: #DA1F1B;
    font-size: 1.3rem;
    padding-top: 12px;
}

#descripcion {
    padding: 0;
    font-size: 0.75rem;
    width: 46%;
    margin-top:330px;
    float: right;
    font-family: 'Roboto', sans-serif;
                
}

#contactanos .repetidora{
    font-size: 1.3rem;
    text-align: center;
}

#contactanos #auspicia{
    display: block;
    margin-top: 40px;
    font-size: 1rem;
}

#contactanos p span{
    padding: 10px;
    display: block;
    margin-top: 40px;
    font-weight: bold;
    font-size: 0.9375rem;
}


/*---------------------PROGRAMACION--------------------------*/
#contenido_programacion{
    width: 960px;
    height: 1250px;
    margin: auto;
    background-color: #f5f5f5; 
}

#titulo{
    margin-top: 20px;
    float: left;
    width: 100%;
}

#titulo h1{
    color: #eef53d;
    font-family: 'Roboto Slab', serif;
    /*text-shadow: 3px 3px 4px black;*/
    font-weight: lighter;
    font-size: 60pt;
    margin: 0;
    margin-left: 10px;
}

#titulo p{
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
    margin: 0;
    margin-left: 65px;
}

#dias{
    float: left;
    width: 560px;
    height: 60px;
    background-color: #4dadcb;
    margin-left: 0px;
    margin-top: 100px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

#dias nav ul{
    height: 60px;
    margin-top: 0;
    padding: 0;
}

#dias nav ul li{
    box-sizing: border-box;
    float: left;
    margin-left: 0px;
    list-style: none;
    width: 80px;
    height: 60px;
    text-align: center;
    padding-top: 20px;
}

#dias nav ul li:last-child{
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
}


#dias nav ul li:hover{
    background-color: white;
}

#dias nav ul li a {
    text-decoration: none;
    color: black;
    font-family: 'Roboto', sans-serif;
}

#dias nav ul li a:hover{
    text-decoration: underline;
}

#grilla{
    float: left;
    width: 700px;
    margin-top: 10px;

}

.programa{
    border-bottom: 200px solid #e2e2e2; 
    border-right: 80px solid transparent; 
    height: 0; 
    width: 100%;
    margin-top: 20px;
}


.programa img{
    margin-left: 20px;
    margin-top: 20px;
    float: left;
}

.info_programa{
    width: 490px;
    height: 150px;
    float: right;
    margin-top: 17px;
    margin-right: 20px;
}

.info_programa h4{
    color: #DA1F1B;
    margin-top: 0px;
    font-family: 'Roboto', sans-serif;
}

.info_programa h4 span{
    color: black;
    font-size: 15pt;
}

.info_programa p{
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
}

.ver_mas{
    text-align: center;
    float: left;
    width: 65px;
    height: 20px;
    border-radius: 30px;
    border: solid #13414f 1pt;
    padding:0px;
    
}

.ver_mas:hover{
    background-color: #4dadcb
}

.ver_mas a{
    width: auto;
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
    text-decoration: none;
    color: black;
}

.ver_mas a:hover{
    text-decoration: underline;
}

/*---------------------NOSOTROS--------------------------*/

#contenido{
    width: 60rem;
    height: 1150px;
    margin: auto;
    display: block;
    background-color: #f5f5f5;
}

#titulo_nosotros{
    margin-top: 20px;
    width: auto;
}

#titulo_nosotros h1{
    color: #eef53d;
    font-family: 'Roboto Slab', serif;
    /*text-shadow: 3px 3px 4px black;*/
    font-weight: lighter;
    font-size: 60pt;
    margin-top: 20px;
    margin-left: 0px;
}
    
#info_nosotros{
    float: left;
    margin: auto;
    width: auto;
}

#logo_nosotros{
    float: left;
    margin-left: 90px;
}

#parrafo1 {
    overflow: auto;
    display: block;
    margin-top: 0px;
    margin-left: 360px;
    width: 450px; 

}

#parrafo1 h3{
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    text-align: center;
    font-size: 16pt;
    margin: 0;
}

#parrafo1 p {
    margin-top: 20px;
    font-size: 10pt;
    font-family: 'Roboto', sans-serif;
}

#parrafo1 p span{
    font-style: italic;
}

#foto1_nosotros{
    float: right;
    margin-top: 70px;
}

#parrafo2{
    float: left;
    padding: 0px;
    display: block;
    width: 456px; 
    margin-left: 90px;
    margin-top:20px;
}

#parrafo2 h1{
    font-family: 'Roboto', sans-serif;
    font-size: 14pt;
    margin: 0;
}

#parrafo2 h2{
    font-family: 'Roboto', sans-serif;
    font-size: 12pt;
    margin-top: 50px;
}

#parrafo2 p {
    margin-top: 20px;
    font-size: 10pt;
    font-family: 'Roboto', sans-serif;
}

/*---------------------NOTICIA--------------------------*/

#noticia{
    padding: 20px;
    margin: auto;
    width: 70%;
    background-color: #f5f5f5;  
    font-family: 'Roboto', sans-serif;
}

#noticia h2{
    margin: 20px; 
    color:#DA1F1B;
    font-family: 'Roboto', sans-serif;
    font-size: 2.5rem;
}

.texto{
    margin: 20px;
    font-family: 'Roboto', sans-serif;
    width: 65%;
}

#noticia img{
    width: 65%;
    margin-left: 20px;
}

#noticia span{
    font-style: italic;
}

.nombre{
    font-weight: bold;
}

#fecha{
    font-size: 0.9rem;
}

#firma{
    width: 65%;
    text-align: right;
    font-weight: bold;
}

#bajada{
    margin-left: 20px;
    font-size: 1rem;
    font-weight: bold;
}

/*---------------------VENTANA MODAL--------------------------*/

/* botón */
.btn{
    text-decoration: none;
    background-color: #4dadcb;
    width: 130px;
    height: 130px;
    float: left;
    /*background-image: url(imagenes/tele.gif);*/
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
position:fixed !important;  
z-index:10 !important
}

.btn h1{
    color: white;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    margin-top:30px;
    font-size: 15pt;
    text-align: center;
}

/* ventana central */
#modalContent{
   position:absolute;
   top:30%;
   left:35%;
   z-index:6;
   margin:-2% 0px 0px -150px;
   float:left;
   width:50%;
   color:#fff;
   line-height:22px;
   padding:15px;
   border-radius:5px;
   background:#13414f;
   border:1px solid #fff;
   box-shadow:0px 2px 1px #999;
}

#modalContent iframe{
    width: 100%;
}
/* bloque toda la pantalla */
#modal{
   position:fixed;
   top:0px;
   left:0px;
   z-index:5;
   float:left;
   width:100%;
   height:100%;
   background:rgba(0,0,0,0.2);
   display:none;
   opacity:0;
}
/* ‹a› transparente*/
#modal > a{
   position:fixed;
   top:0px;
   left:0px;
   z-index:1;
   float:left;
   width:100%;
   height:100%;
}

:target{
   display:block!important;
   opacity:1!important;
}

/* botón de cerrar */
#modalContent > a{
   position:absolute;
   top:-4px;
   right:-4px;
   color:#00A6B6;
   border-radius:2px;
   background:#fff;
   padding:4px;
}

/*---------------------FOOTER PROGRAMAS--------------------------*/

#programas {
    clear: both;
    width: 100%;
    margin: auto;
    height: 110px;
    background-color: #c1c2c6;
    margin-top: 10px;
}

.listas {
    width: auto;
    display: table;
    float: left;
    margin-right: 15px;

}

.listas ul {
    float: left;
    display: table;

    }
.listas ul li a {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    list-style: none;
    color: black;
}
.listas ul li {
    list-style: none;
    line-height: 12pt;
}

.listas .titulo a{
    font-style: oblique;
    }


/*-------------------FOOTER PIE DE PAGINA------------------------*/

#piedepagina {
    clear: both;
    background-color: black;
    width: 100%;
    margin: auto;
    height: 125px;
    margin-top: -17px;
    }

#piedepagina #botones ul li {
    list-style: none;
    float: left;
    margin-top: 15px;
    }

#piedepagina #botones ul li a {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    margin-right:  50px;
    color: #c1c2c6;
}

#piedepagina #extras ul {
    list-style: none;
    float: right;
    text-align: right;
    margin-right: 10px;
    font-size: 10pt;
    margin-top: 20px;
    
}

#piedepagina #extras ul li a {
    font-family: 'Roboto', sans-serif;
    color: #c1c2c6;
    text-decoration: none;
}

#piedepagina p {
    color: #e5e9f8;
    float: left;
    width: 50%;
    font-size: 10pt;
    margin-top: 10px;
    margin-left: 0px;
}


/*-------------------RESPONSIVE------------------------*/

@media screen and (max-width:800px){
    
    #contenedor{
        width: 100%;
    }
    
    #banner1{
        display: none;
    }
    
    #estas_viendo{
        display: none;
    }
        
    #pagina #cinco, #seis, #siete{
        width: 100%;
        float: none;
        height: auto;
    }
    
    #pagina #uno{
        width: 100%;
        height: auto;
        margin: auto;
    }
    
    #pagina #dos{
        width: 100%;
        margin: auto;
    }
    
    #video1{
        width: 100%;
        margin: auto;
    }
    
    #video1 iframe{
        width: 100%;
    }
    
    #video2{
        width: 100%;
        margin: auto;
    }
    
      #video2 iframe{
        width: 100%;
    }
    

    #pagina #tres{
        width: 100%;
        margin: auto;
    }
    
    #pagina #cuatro{
        width: 100%;
        margin: auto;
        height: auto;
    }
    
    
    #programas{
        display: none;
    }
    
    .btn{
        display: none;
    }
    
    #slider{
        width: 90%;
        margin: auto;
        float: none;
    }
    
    .flexslider{
        width: 100%;
        float: none;
    }
    
    #botonera form{
        display: none;
    }
    
    #botonera{
        display: inline-block;
    }
    
    #botonera nav ul li{
        display: block;
        text-align: left;
    }
    
    #contenido{
        width: 100%;
    }
    
    #contenido #parrafo1, #parrafo2{
        width: 80%;
        float:none;
        margin: auto;
    }
    
    #info_nosotros{
        width: 100%;
    }
    
    #logo_nosotros{
        display: none;
    }
    
    #foto1_nosotros{
        display:none;
    }
    
    #titulo_nosotros h1{
        width: 100%;
        font-size: 3.125rem;
        text-align: center; 
    }
    
    #piedepagina ul{
        height: auto;
        float: none;
        margin: 0;

    }
    
    #piedepagina #botones {
        width: 100%;
        float: none;
        display: inline-block;
        margin: auto;
    }
    
    #piedepagina #extras ul{
        padding: 0; 
        float: none;
    }
        
    
    #piedepagina #extras ul li{
        float: left;
        margin-left: 10px;
        
    }
    
    #piedepagina p{
        float: none;
        margin: 0;
        color: black;
        width: 100%;
        margin: auto;
    }
    
    #contenido_programacion{
        width: 100%;
    }
    
    #grilla{
        width: 100%;
    }
    
    .programa{
        width: 80%;
    }
    
    .programa img{
        margin: 0;
        float: left;
    }
    
    .info_programa {
        padding: 10;
        width: 100%;
        margin: 0;
        float: none;
    }
    
    #dias{
        clear: both;
        float: none;
        width: 100%;
    }
    
    #dias li{
        display: inline-block;
    }
    
    #titulo h1{
        text-align: center;
        margin: auto;
        width: 100%;
        font-size: 3.125rem;
    }
    
    #titulo p{
        display: none;
    }

}