/* RESET */

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}


/* FUENTES */ 

@font-face{font-family:Roboto_condensed;font-style:normal;font-weight:400;src:url("https://e00-elmundo.uecdn.es/fonts/roboto/RobotoCondensed-Regular.woff2") format("woff2"),url("https://e00-elmundo.uecdn.es/fonts/roboto/RobotoCondensed-Regular.woff") format("woff")}

@font-face{font-family:Roboto_condensed;font-style:normal;font-weight:700;src:url("https://e00-elmundo.uecdn.es/fonts/roboto/RobotoCondensed-Bold.woff2") format("woff2"),url("https://e00-elmundo.uecdn.es/fonts/roboto/RobotoCondensed-Bold.woff") format("woff")}

@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:url("https://e00-elmundo.uecdn.es/fonts/roboto/Roboto-Regular.woff2") format("woff2"),url("https://e00-elmundo.uecdn.es/fonts/roboto/Roboto-Regular.woff") format("woff")}

@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:url("https://e00-elmundo.uecdn.es/fonts/roboto/Roboto-Bold.woff2") format("woff2"),url("https://e00-elmundo.uecdn.es/fonts/roboto/Roboto-Bold.woff") format("woff")}

/*@font-face {
    font-family: "Clear Sans Bold";
    src: url("https://e00-elmundo.uecdn.es/fonts/clearWeb/ClearSans-Bold-webfont.eot");
    src: url("https://e00-elmundo.uecdn.es/fonts/clearWeb/ClearSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),url("https://e00-elmundo.uecdn.es/fonts/clearWeb/ClearSans-Bold-webfont.woff2") format("woff2"),url("https://e00-elmundo.uecdn.es/fonts/clearWeb/ClearSans-Bold-webfont.woff") format("woff"),url("https://e00-elmundo.uecdn.es/fonts/clearWeb/ClearSans-Bold-webfont.ttf") format("ttf")
}*/


/* * * BÁSICO * * */


#container{
    width:320px; height:590px; color:#262626; box-sizing: border-box; padding:10px 0px; font-family:"Roboto", arial, sans-serif; margin:auto; overflow:hidden; position:relative;
}

h1{
    font-family: "Roboto", "Arial", sans-serif; font-size:22px; font-weight:bold; text-align:center; text-transform: uppercase; margin: 10px 0px 30px 0px;
}

.footer{
    font-family:"Roboto",arial, sans-serif; width:310px; color:#000; font-size:12px; line-height:15px;  position:absolute; bottom:10px;
}

.source-box{
    float:left; text-align: left;
}

.author-box{
    float:right; text-align: right;
}



/* === INTRO === */

#intro{
    width:250px; height:40px; position:absolute; left:50%; margin-left:-125px; top:55px;
}

#dedo{
    width:40px; height:40px; background-image:url(https://e00-elmundo.uecdn.es/elmundo/2019/graficos/nov/s5/suplencias-ministros/img/dedo.jpg); background-size:contain; position:absolute; top:0; left:0;
}

#intro p{
    width:200px; position:absolute; right:0; top:5px; font-size:14px; font-style: italic; color:#808080; line-height:17px;
}



/* === BODY GRAFICO === */

#body-grafico{
    width:320px; height:400px; position:absolute; top:115px;
}

#body-grafico *{
    position:absolute;
}

#body-grafico h2{
    font-size:15px; font-weight: bold;
}

.legislatura{
    font-size:13px !important;
}

.linea{
    width:40px; border-top:1px solid #000;
}

#body-grafico p{
    font-size:14px;
}



/* === CASILLAS QUE GIRAN (I) === */

.box{
    width:65px; height:65px; 
    
}

.front{
    width:100%; height:65px; backface-visibility: hidden; background-image:url(https://e00-elmundo.uecdn.es/elmundo/2019/graficos/nov/s5/suplencias-ministros/img/ausentes-ministros-bicolor.jpg); 
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
    
}

.front a{
    width:100%; height:65px;
}

#cascos{background-position:0 0;}
#rato{background-position:0 -65px;}
#chacon{background-position:0 -130px;}
#gallardon{background-position:0 -195px;}
#mato{background-position:0 -260px;}
#soria{background-position:0 -325px;}
#pastor{background-position:0 -390px;}
#alonso{background-position:0 -455px;}
#batet{background-position:0 -520px;}
#borrell{background-position:0 -585px;}

.back{
    width:100%; height:65px;  transform:rotateY(180deg); backface-visibility: hidden; 
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
}

.back a{
    width:100%; height:65px; text-align:right; box-sizing: border-box; color:#fff;font-weight: normal; text-decoration: none; font-size:13px; padding:5px; text-align:center;line-height: 15px;
}

.back-pp{
    background-color:#2F87C3;
}

.back-psoe{
    background-color:#C33A47;
}




/* === FICHA === */


#bg-ficha{
    width:100%; height:590px; background-color:rgba(255,255,255,.7); position:absolute; top:0; left:0; z-index:10; display:none;
}

#ficha{
    width:290px; height:450px; position:absolute; background-color:#f5f5f5; top:75px; left:15px; -webkit-box-shadow: 0 0 10px 0 #808080; box-shadow: 0 0 10px 0 #808080; z-index:100; font-family: "Roboto", arial, sans-serif; display:none;
}

#ficha *{
    position:absolute;
}

#ficha .cerrar{
    width:25px; height:25px; position:absolute; right:15px; top:15px; background-image: url(https://e00-elmundo.uecdn.es/elmundo/2019/graficos/nov/s5/suplencias-ministros/img/cerrar.png); background-size:contain; cursor:pointer;
}

#ficha .cerrar-box{
    width:100%; height:55px; position:absolute; top:0; left:0; cursor:pointer;
}

#flecha{
    width:35px; height:38px; background-image:url(https://e00-elmundo.uecdn.es/elmundo/2019/graficos/nov/s5/suplencias-ministros/img/flecha.png); background-size:contain; top:135px; left:30px;
}

#nota{
    width:260px; left:15px; bottom:15px; font-size:13px; color:#666666; line-height: 15px;
}





/* === IDENTIDAD MINISTROS ===*/

.foto{
    width:65px; height:65px;  
}

#foto-ausente{
    top:60px; left:15px; background-position: /*t*/0px /*l*/0px; background-image:url(https://e00-elmundo.uecdn.es/elmundo/2019/graficos/nov/s5/suplencias-ministros/img/todos-ministros.1.jpg);
}

#foto-suplente{
    top:185px; left:15px; background-position: /*t*/0px /*l*/-65px; background-image:url(https://e00-elmundo.uecdn.es/elmundo/2019/graficos/nov/s5/suplencias-ministros/img/todos-ministros.1.jpg);
}
 
.categoria-ministro{
    font-size:12px; font-weight: bold; color:#216087;
}

#categoria-ausente{
    top:60px; left:90px;
}

#categoria-suplente{
    top:185px; left:90px;
}

.nombre-ministro{
    font-size:14px; font-weight: bold;
}

#nombre-ausente{
    top:78px; left:90px;
}

#nombre-suplente{
    top:203px; left:90px;
}

.cargo-ministro{
    font-size:14px; width:185px; line-height:16px;
}

#cargo-ausente{
    top:96px; left:90px;
}

#cargo-suplente{
    top:221px; left:90px;
}


/* === TABLA === */

#tabla{
    width:260px; left:15px; top:280px; border-top:1px solid #216087; border-bottom:1px solid #216087;
}

#tabla *{
    position: relative; font-size: 14px;
}

#tabla li{
    box-sizing: border-box; padding-top:7px;
}

.item{
    width:80px; height:25px; font-weight: bold; float:left;
}

.info{
    width:180px; float:right; height:25px;
}



@media (min-width:470px){
    
    /* CASILLAS QUE GIRAN (II) */
    
    .box:hover > .front{
    transform:rotateY(180deg);
    
    -webkit-box-shadow: 0 0 5px 0 #2E2E2E;
    box-shadow: 0 0 5px 0 #2E2E2E;
}

    .box:hover > .back{
    transform:rotateY(0deg);
    
    -webkit-box-shadow: 0 0 5px 0 #2E2E2E;
    box-shadow: 0 0 5px 0 #2E2E2E;
}
    
}