/******************************************************************/
/************** ESTILOS GENERICOS INFOGRAFIAS *********************/
/******************************************************************/ 

/*para solucionar problemas con el 'container'. Quitar cuando 'clear-fix' este generico para todo el portal*/
/*.container {margin:0 auto;width:50%;clear:both;float:none;overflow:visible;}*/
/*.container:after {visibility:hidden;display:block;clear:both;content:" ";height:0;font-size:0;}*/
/** html .container             { zoom: 1; } *//* IE6 */
/**:first-child+html .container { zoom: 1; } *//* IE7 */

div[id^="vid"] {width: 100%;float: left;margin-right: 2em;margin-bottom: 1.5em;}
.infoVideo h2{font-family: RTVEfontB;font-size: 1.8em;line-height: 1.2em;padding-top: 1.5em;padding-right: 1.5em;}
.infoVideo h3{font-family: RTVEfontR;font-size: 1.2em;background-color: pink;}
.infoVideo p{font-family: RTVEfontSansR;font-size: 1.5em;padding-top: 1em;line-height: 1.4em;margin-right: 1em;}

/** Elementos del listado
********************************************************/
.panelBox ul {margin: 0 auto;width: 100%;height: 100%;clear: both;float: none;}
.panelBox ul li .mark a {display:block;background: #eee;position: relative;height: 0;overflow: hidden;}

/** Proporcionalidades de los elementos 
********************************************************/

.panelBox ul li .mark .f1x1 {padding-top:100%;}
.panelBox ul li .mark .f1x2 {padding-top:200%;}
.panelBox ul li .mark .f2x1 {padding-top:50%;}
.panelBox ul li .mark .f2x3 {padding-top:150%;}
.panelBox ul li .mark .f3x2 {padding-top:66.667%;}
.panelBox ul li .mark .f3x4 {padding-top:133.33%;}
.panelBox ul li .mark .f4x3 {padding-top:75%;}
.panelBox ul li .mark .f9x16 {padding-top:177.77%;}
.panelBox ul li .mark .f16x9 {padding-top:56.25%;}

.panelBox .f1x1 .imgT,.panelBox .imgT .f1x1 {margin-top:-100%;} 
.panelBox .f1x2 .imgT,.panelBox .imgT .f1x2 {margin-top:-200%;} 
.panelBox .f2x1 .imgT,.panelBox .imgT .f2x1 {margin-top:-50%;} 
.panelBox .f2x3 .imgT,.panelBox .imgT .f2x3 {margin-top:-150%;} 
.panelBox .f3x2 .imgT,.panelBox .imgT .f3x2 {margin-top:-66.667%;} 
.panelBox .f3x4 .imgT,.panelBox .imgT .f3x4 {margin-top:-133.33%;} 
.panelBox .f4x3 .imgT,.panelBox .imgT .f4x3 {margin-top:-75%;} 
.panelBox .f9x16 .imgT,.panelBox .imgT .f9x16 {margin-top:-177.77%;} 
.panelBox .f16x9 .imgT,.panelBox .imgT .f16x9 {margin-top:-56.25%;}

.panelBox .imgT {background:gray;position:relative;}
.panelBox .imgT img {position:absolute;left:0;top:0;width: auto;height: 100%;}
.panelBox .imgT .f1x1 img {width: auto;height: 100%;}

.contentBox {
position: absolute;
width: 100%;
padding-top: 75%;
height: 100%;
background: red;
z-index: 10;

}
.contentBox .imgT {
position: relative;
width: 65%;
padding-top: 10%;
padding-left: 5%;
margin-top: -75%;
}
.contentBox h2{float:left;padding-left: 5%;padding-top: 2%;position: relative;margin-top: -75%;}
.contentBox h3{position: relative;
float: left;
padding-left: 32%;
padding-top: 38%;
margin-top: -75%;}
.contentBox p{margin-top: -75%;position: relative;padding-left: 5%;float: left;font-family: RTVEfontS;font-size: 1.3em;line-height: 1.3em;padding-top: 2%}
.infoBox{position:relative;}


@media screen and (min-width:100px) {.txt {font-size:0.1em;}}
@media screen and (min-width:200px) {.txt {font-size:0.2em;}}
@media screen and (min-width:300px) {.txt {font-size:0.3em;}}
@media screen and (min-width:400px) {.txt {font-size:0.4em;}}
@media screen and (min-width:500px) {.txt {font-size:0.5em;}}
@media screen and (min-width:600px) {.txt {font-size:0.6em;}}
@media screen and (min-width:700px) {.txt {font-size:0.7em;}}
@media screen and (min-width:800px) {.txt { font-size:0.8em;}}
@media screen and (min-width:900px) {.txt { font-size:0.9em;}}
@media screen and (min-width:1000px) {.txt { font-size:1em;}}
@media screen and (min-width:1100px) {.txt { font-size:1.1em;}}
@media screen and (min-width:1200px) {.txt { font-size:1.2em;}}
@media screen and (min-width:1300px) {.txt { font-size:1.3em;}}
@media screen and (min-width:1400px) {.txt { font-size:1.4em;}}