/* 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"),
        url("https://e00-elmundo.uecdn.es/fonts/roboto/Roboto-Regular.eot") format("eot");
}

@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"),
        url("https://e00-elmundo.uecdn.es/fonts/roboto/Roboto-Bold.eot") format("eot");
}

/*@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{
    max-width:470px; min-width:320px; width:100%; color:#262626; box-sizing: border-box; padding:10px; font-family:"Roboto", arial, sans-serif; margin:auto; overflow:hidden; box-sizing: border-box; height:960px; position:relative;
    
}

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

.footer{
    font-family:"Roboto",arial, sans-serif; width:100%; color:#000; font-size:12px; line-height:15px; box-sizing: border-box; position:absolute; bottom:20px; left:10px;
}

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

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

a{
    text-decoration:none; color:#000;
}


/* = = CLAVES = = */


.key{
    width:100%; height:45px; margin: 0px auto 620px auto;  box-sizing: border-box; border-bottom:1px solid #000; border-top:1px solid #000; position:relative;
}

.key li{
    font-size:15px; 
}

#key-1 .line-shape{
    width:30px; border-top:3px solid #dd9f4b; position:absolute; top:20px; left:5px;  
}

#key-1 p{
    position:absolute; top: 13px; left: 50px;
}

#key-2 .line-number{
    width:30px; height:30px; background-color:#af6865; position:absolute; left:190px; top: 5px; color:#fff; font-weight: bold; font-size:15px; text-align: center; padding-top:8px; box-sizing: border-box;
}

#key-2 p{
    position:absolute; top:13px; left:230px;
}



/* = = MAPAS = = */

#maps{
    width:320px; height:384px; position:absolute; top:125px; left:50%; margin-left:-160px;
}

.map{
    position:absolute; top:0; left:0; width:320px; height:384px; background-size:contain; background-repeat:no-repeat; display:none;
}

#map-1{background-image:url(https://e00-elmundo.uecdn.es/elmundo/2019/graficos/oct/s3/metro/ampliaciones/img/red-1.png);display:block;}
#map-2{background-image:url(https://e00-elmundo.uecdn.es/elmundo/2019/graficos/oct/s3/metro/ampliaciones/img/red-2.png);}
#map-3{background-image:url(https://e00-elmundo.uecdn.es/elmundo/2019/graficos/oct/s3/metro/ampliaciones/img/red-3.png);}
#map-4{background-image:url(https://e00-elmundo.uecdn.es/elmundo/2019/graficos/oct/s3/metro/ampliaciones/img/red-4.png);}
#map-5{background-image:url(https://e00-elmundo.uecdn.es/elmundo/2019/graficos/oct/s3/metro/ampliaciones/img/red-5.png);}
#map-6{background-image:url(https://e00-elmundo.uecdn.es/elmundo/2019/graficos/oct/s3/metro/ampliaciones/img/red-6.png);}
#map-7{background-image:url(https://e00-elmundo.uecdn.es/elmundo/2019/graficos/oct/s3/metro/ampliaciones/img/red-7.png);}
#map-8{background-image:url(https://e00-elmundo.uecdn.es/elmundo/2019/graficos/oct/s3/metro/ampliaciones/img/red-8.png); }



/* = = BOTONES = = */

.btn{
    width:60px; height:60px; position:absolute; background-color:#000; top:510px; box-sizing: border-box; margin:10px; -webkit-box-shadow: 0 0 5px 0 #7D7D7D; box-shadow: 0 0 5px 0 #7D7D7D; background-color:#f2f2f2; background-image:url(https://e00-elmundo.uecdn.es/elmundo/2019/graficos/oct/s3/metro/ampliaciones/img/arrow.png); background-size:cover;
}

#btn-left{
    transform:rotate(90deg); left:60px; display:none;
}

#btn-right{
    transform:rotate(-90deg); right:60px;
}



/* = = KILOMETROS = = */

#key-km{
    width:470px; position:absolute; top:625px; left:0px; border-top:1px solid #000; border-bottom:1px solid #000; box-sizing:border-box; padding: 10px 0px; text-align:center; font-size:15px;
}

#length{
    width:320px; position:absolute; top:665px; left:50%; margin-left:-160px;
}

#length img{
    width:100%;
}



@media (min-width:470px){
    .btn:hover{
        background-color:#e0e0e0; cursor:pointer;
    }
}