/*css document*/
* { margin: 0; padding: 0;}

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);

/*reglas generales y para celulares*/
body {
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 80%; background-color: burlywood
}

a { text-decoration: none;}
    
.contenedor {
    width:100%; 
    background-color: burlywood;
}

header { position: relative;
    color: white; 
    width: 100%;
    height: 118px;
background: url(header.jpg)}

.logo {float: left;
    height: 118px;
}
    

h1 {color: white;
    font-size: 1.5em;
    font-weight: 400;
  }

h2 { font-weight: 700;
    font-size: 0.9em;
}

header nav { background-color: black; width: 100%;   float: left;
}

nav ul li { list-style: none; }

header nav ul li a {
    display: block;
    color: #e0942d;
    padding: 0.15em 0 0.2em 0;
    font-size: 1.1em;
    text-align: center;
    }

header nav ul li a:hover {
    background-color: #AB4F25;
    color: white;
    font-size: 1.1em;}

#pc { float: left;
    font-size: 2.5em;
    padding-left: 0.2em;
    color: white;
    background-color: black;
    width: 100%;}

#canal {
float: right;
background-color: black;
width:100%;
text-align: center}

#navsup { padding: 0.5em ;
   position: absolute;
    right: 0;
    color: black;
    text-align: right;
    width: 150px;
    list-style: none
}

#navsup a { 
      color: black;
}

#navsup a:hover { color: white;}


/*INDEX*/

#momento{ float: right;
    position: absolute;
    top: 3.8em;
    right: 0.4em;
    font-size: 1.4em;
    color:black   
}

#momento span {color:white;
position: absolute;
width: 6.5em;
top: 1.3em;
right: -0.4em}
    
#envivo img { float: left;
    padding: 0;
    width: 100%;
}

#contenidouno, #contenidodos, #contenidotres, #cuatro {  margin-top: 0.8em;
    }

#contenidouno {float: left;
    background-color: burlywood;
    width: 100%;
    padding: em;
    height: 350px;
    overflow: hidden
}

#contenidouno a, #contenidodos a, #contenidotres a {color: white}

#contenidouno h2 {
    padding: 0.1em 0 0 0.5em; 
    font-size:1.7em ;
    color: white;
    background-color: #AB4F25;
}

#contenidouno h3 { padding: 0.1em 0 0.1em 0.5em;
    font-size: 1.5em;
    background-color: #AB4F25;
}

#contenidodos, #contenidotres {
    float: left;
    width:100%;
    background-color: burlywood;
    color: black;
    font-size: 1em;}


#contenidodos p, #contenidotres p {
padding: 0 0.5em
}

#nena {float: left;
    margin-top:-10px;
padding:0; height: 163px;
width: 100%; overflow: hidden}

#director { float: left; 
    width: 100%; 
    height:115px;
    background-color: #AB4F25;
}

#entrevista { float: right;
    margin-top: 2.3em;
    margin-right: 2em;
    font-size: 1em;
    color: white
  }

#entrevista a { font-size: 1.57em;
    color: white;
    font-weight: 700
    }

#entrevista a:hover { color:black
}

#contenidodos h2, #contenidotres h2 {    background-color:#AB4F25; 
    font-size: 2em;
    color: white; 
    padding: 0.1em 0.3em 0; 
    width: 97.5%}


 #contenidodos h3, #contenidotres h3 { color: #AB4F25; 
     padding:0 0.3em;
    font-size: 1.5em}

#enterate { margin-top: 0.2em;
    width: 100%;
    background-color:#AB4F25;}


#cuatro {float: left; 
    width: 100%%;
    height: auto; 
    background-color:#e0942d;
    }


footer  { clear: both;
    background-color:black ;
    font-size: 1em;
    color: white;
    padding:15px 8px;
    text-align: center
}

footer nav { width: 100%; text-align: center}

footer nav ul { list-style: none}

footer nav ul li { float: left;
padding: 0 0 0 0.7em;}

footer nav ul li a {
    color:#e0942d ;
    font-size: 1em;
    }

footer p {font-size: 1em;
    padding-top: 2em}


/*tablets verticales*/

@media screen and (min-width: 40em) {
    
header nav ul {float: right}
    
header nav ul li {float: left;}
    
header nav ul li a {padding:0.6em 0.45em}
header nav ul li a hover{padding:0.6em 0.45em}
    
#pc { clear: both;
    background: none;
    position: absolute;
    width: auto;
    top: 115px;}
    
#canal {background:none;
width: auto;
float: left;
margin-top:79px;
margin-left:10px;
font-size: 2em;}
    
    #momento {top:65px}
/*INDEX*/
    
#contenidouno {height:34.3em; }
    
#contenidouno, #contenidodos, #contenidotres { width: 47.8%; padding:0 0.5em;
    }    
    
#contenidodos h2, #contenidotres h2 {width: 96%}
    
#contenidouno p, #contenidodos p, #contenidotres p { font-size: 1.2em }
        
#cuatro {width: 48%; float: right; margin-right: 0.8em;padding-top: 2.5em; height: 426px}

#facebook {margin-top: 5.5em}


footer {width:98.5%;}

footer nav {float: left;
width: auto; margin-left: 13em}    
    
footer nav ul li {
padding: 0 0 0 1em; }

footer nav ul li a {
    font-size: 1.3em;
}


/*ESCRITORIO*/

@media screen and (min-width: 50em) {

body { background-color: burlywood;
}

.contenedor { position: relative;
    width: 1024px;
    margin: auto}  
    
    header nav {margin-top: -9px}

header nav ul li a {font-size: 1.3em; padding:0.3em 1em 0.45em}
header nav ul li a:hover{ font-size: 1.3em; padding:0.3em 1em 0.45em}

#canal {font-size: 3em; margin-top: 1.75em; margin-left:0}
    
#pc {font-size: 2.5em;
    position: absolute;
    width: auto;
    top:2.1em;
}

#momento {color: white; font-size: 1.8em; top: 88px; right: 160px}

#momento span {top:0px; left: 120px}


h1 { float: left;
    margin: 1.47em 0 0 0.1em;  
    font-size: 3.3em;
 }

h2 {font-size: 2em;
}

/*INDEX*/
#contenidodos, #contenidotres {  margin-top: 1em;  }

#contenidouno {width: 33.5%;
padding: 0; height:635px; margin-top: 0.5em; overflow: hidden
}

#contenidouno img{ width: 100%}

#contenidodos, #contenidotres {
    width: 32%;
    padding: 0 0 0 1em;
    height: 515px;
    margin: 0.5em 0
} 
    
#contenidodos p, #contenidotres p, #contenidodos h3, #contenidotres h3 {padding: 0}

 #director {margin-top: 1em}


#entrevista { margin-top: 2.2em}

#contenidodos h2, #contenidotres h2 {  width: 315px}

#contenidotres img {padding: 0.4em 0 } 

#cuatro { 
    float:right;
    width: 65.1%;
    padding: 0;
    margin-right: 1px;
    height: 163px;
    margin-top:-50px;
    background-color: #e0942d }
#facebook {margin-top:1.3em}
    
/*SERIES - BROCHERO EL HOMBRE - PELICULAS - PROGRAMACION - PROGRAMACION EXTERNA*/
    #aire {float: right;
    margin-top: 6.4em;    
    margin-right: 0.5em}
    #aire a {color: white; font-size:2em}
    
#contenedorser {
    float: left;
    width: 61%; }

#seriespeliculasexter, #programacion{
    padding:1em 1.2em;
    height: 385px;
    width: 173px;
    float: left;}
    
    #programacion img {width: 107%}

    
#h3serie {
float: right;
margin-right:8em;
font-size: 1.3em;
padding: 0.2em;
color:#AB4F25;}
    
#textoseries { color: black;}
    
#listaseries {
height: 296px;
width: 100%;
margin-top: 2.em;}

#brocherocapitulo { width: 100%;}

#prog { float: left; width: 100%}

#tituloser {background-color: #AB4F25; 
    float: left;
    margin: 0;
    font-size: 1.9em;
    color: white; 
    padding: 0.2em 0.3em 0.1em; 
    font-weight: 400;
    width: 98.6%}

#ser { font-size: 1.2em; width: 187px;}

#ser a { color: black}
    
#exclusivo {
     float: right;
     width: 36.85%;
     padding: 0.2em 0.5em 0;
     color: white;
     margin-top: 0px;
     background-color:#AB4F25;
     font-size: 1.7em;
     font-weight: 400}
 
#h3s {
    color:white;
    background-color:black;
    font-family: 'PT Sans Narrow', sans-serif;
    width: 179px;
    padding: 0.5em 0 0.2em 0.5em;}

#h3ss {
    color:white;
    background-color:#e0942d ;
    font-family: 'PT Sans Narrow', sans-serif;
    width: 179px;
    padding: 0.2em 0 0.1em 0.5em;}
    
#h3ss a {color: white}
    
    #titulosvideo {
    font-size: 1.3em;
    padding: 0.2em;
    background-color: #AB4F25;
    color: white}

#momentos {
    float: left;
    color: white;
    background-color: #AB4F25;
    font-size: 1.7em;
    padding: 0.3em 0.3em 0em; 
    font-weight: 400;
    width:98.8% }
    
.videoser {
float:left;
padding-right: 0.5em;
width: 32% }

#textorevivi { font-size: 1.1em;}
    
#textoficha{
float:left;
font-size: 1.1em;
margin-right: 16%;
color:white;
background-color:#e0942d ;
padding: 0.5em 0.5em 0.8em 0.2em;
width: 67%;
margin-right: 0.4%}

#textoexclusivas {
    font-size: 0.5em;
    color: black;
    padding: 0.3em;
    padding-bottom: 1em}

.videocapitulos {
    float: left;
    width: 22.2%;
    padding-right: 0.3em;
    padding-left: 0.3em;
    margin-top: 0.4em;
    background-color: #e0942d;
    color: white;
    height: 217px;}
    
  #brocheroopciones {
    float: left;
    display:inline;
    color: #e0942d;
    padding: 0.3em;
    padding-right: 3em;
    background-color: black;
    font-size: 1.1em;
    text-align: center;}
    
    #brocheroopciones:hover { color: white}
      
  #brocheros {
       float: right;
       width: 31%;
       background-color: black;
       color: white;
       text-align: center;
       height: 245px;
       padding-top: 2em;}
    
    #prox { color:#e0942d ;font-size: 7em; line-height: 90%; text-align: center; padding-left: 0.2em; padding-top: 0.1em}
    
    #personajes {
    float: left;
    background-color: #AB4F25;
    color: white;
    font-size: 1.5em;
    text-align: center;
    width: 24.3%;
    padding-right: 0.37em}
    
    #sinopsis {
    font-size: 1.2em}
    

/*entrevista*/
#noticias  {float:left;
    width: 82%}
    
#noticias1 {float: left; width: 61%}    

#noticias h1, #noticias1 h1 { margin:0 ;
    padding: 0.3em 0 0.1em 0.4em;
    font-size: 2.3em;
    background-color:#AB4F25;
    width: 98.6%;
    font-weight: 700}

#noticias h2, #noticias1 h2 {
    width: 97,2%;
    font-size: 2em;
    color: #AB4F25; 
    padding: 0.1em 0.3em; 
    font-weight: 400;
}
    
#noticias h3, #noticias1 h3 {
    padding: 0.2em 0 0.3em 0.3em;
    font-size: 1.6em;
    width: 97,2%}

#bloque, #noticias1 p, .preguntas { padding-left: 0.5em  }
    
.preguntas { float: left; 
    width: 100%;
    font-weight: 700;}

#foto {width: 45%;
    float: right}

#foto2 {float: left; margin: 0 0 1em 0}

    
aside {width: 39%;
    float: right;
    height: 1200px;
    color: white;
    font-size: 2em;
   }

#final {float:right;    
    font-weight: 700;
    padding-top: 2em}

.videosrelacionados {position: relative;
    margin: 0 auto;
    height: 0; padding-bottom: 56.25%}

.videosrelacionados iframe { position: absolute;
    height: 100%;
    width: 100%;
    top:0px;
    left: 0px;}

.videos {float: right;
    background-color:#e0942d;
    color: white;
    width: 100%}

#titulo {
    font-size: 0.8em;
    padding: 0.3em;
    width: 100%}

/*QUIENESSOMOS*/
.entre iframe {height: 600px; width: 100%;}
#columnados {float: right;}
#columnauno {clear: both; float: left;}
#ps {width: 100%;}
#ilsayjorge img {width: 100%; margin-bottom: 10px;}
#columnauno img, #columnados img {margin: 5px 0px 10px 0px; width: 100%; height: 260px;}
#columnauno, #columnados {width: 49%; margin: 0.5em 0} 
#columnauno p, #columnados p {font-size: 1.2em;}
#columnauno p b, #columnados p b {color: #AB4F25;}
#columnauno h1, #columnados h1 {width:100%; padding: 0; padding-left: 2px;}
#columna h1 {margin: 0; width: 98.99%;}
.titulodos {
 font-size: 2.2em;
width: 98.9%;
background-color: #AB4F25;
margin-top: 10px;
padding: 0.2em; margin-bottom: 10px;}

.quienes { font-size: 2em;
    color: #AB4F25;  
    font-weight: 400; margin-bottom: 10px;}
.nuestro {font-size: 1.5em;
margin-bottom: 10px;}
    
#p1, #p2 {width: 48%; font-size: 1.2em;}
#p1 {float: left;}
#p2 {float: right;}
#p1 b {font-size: 1.2em;}
#p3 {clear: both; float: left;width: 49%; margin-top: 10px; font-size: 1.3em;}
#p1 p, #p2 p, #p3 p {font-size: 1em; margin-left: 8px; margin-bottom: 10px;}

/*NAV NOTICIAS*/
#caja {display: table; height: 100%;}
#navdos {display: table-cell; float: left; width: 18%; background-color: black; height: 100%; }
#navdos ul li a {padding: 0.68em 1em 0.52em 1em; color: #e0942d ; font-size: 19px; display: block;text-align: center;}
#navdos ul li a:hover {
    background-color: #AB4F25;
    color: white;
   font-size: 19px;}
#navdos ul li .subnav {display: none; background:black; width: 100%;position: relative;}
#navdos ul li .subnav a {font-size: 0.6em;}
#navdos ul li:hover .subnav {display:block;}

#titulonot {background-color: #AB4F25; 
    float: left;
    margin: 0;
    font-size: 1.9em;
    color: white; 
    padding: 0.2em 0em 0.1em 2em; 
    font-weight: 400;
    width: 95.3%}
    
#noticias {width: 82%; float: right; display: table-cell}
#noticias h1 {margin-bottom: 10px; font-size: 2.7em; width: 98.4%;}
#noticias h2 {font-size: 2.3em;}
#noticias h3 {font-size: 1.6em; margin-bottom: 10px;}
#noticias img {margin-bottom: 0.7em; margin-left: 0.5em; width: 99.3%; height: 400px;}
#entre{color: white; background: #AB4F25; padding: 0.1em; font-weight: 700}
    
/*NOTICIAS PRINCIPAL*/
#notgral {width: 61%; float: left;}
#notaside {float: right; width: 39%;}
#notgral h4 {margin-top: 5px; font-size: 1.5em; color: #AB4F25}
#notgral p {margin-bottom: 8px; font-size: 1.3em;}
#notgral h3 {width: 98%;}
#momentos a {color: white;}    
#momentos a:hover {
    color: black;}
#videosh2 {background-color: #AB4F25; 
    margin: 0;
    font-size: 0.98em;
    color: white; 
    padding: 0.1em 0em 0.1em 0.4em; 
    font-weight: 400;
    width: 97.7%; height: 30px;}
    
#cajanot {width: 98%; float: left;}
#cajanot img {width: 100%; height: 300px;}
#cajanot h4 {font-size: 1.3em; margin: 0}
#subtit {font-size: 1.2em;}
#last p {font-size: 1.4em;}
#last a {color: white;}
#last a:hover {color: black;}
    
    
#linkentrevista a { color: black; font-size: 20px;}
#linkentrevista a:hover { color: white;}
#linkentrevista li {list-style: none; padding-bottom: 10px; margin-left: 10px;}

    
footer nav {margin-left: 300px; }