/* 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,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;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: "Rubik Black"; font-style: normal; font-weight: 900; src: url("https://e00-elmundo.uecdn.es/fonts/Rubik/Rubik-Black.woff2") format("woff2"), url("https://e00-elmundo.uecdn.es/fonts/Rubik/Rubik-Black.woff") format("woff");
  }
  
  @font-face {
    font-family: "Roboto Light"; font-style: normal; font-weight: 100; src: url("https://e00-elmundo.uecdn.es/fonts/roboto/Roboto-Light.woff2") format("woff2"), url("https://e00-elmundo.uecdn.es/fonts/roboto/Roboto-Light.woff") format("woff");
  }

  @font-face {
    font-family: "PT_serif Regular", serif;
    font-style: normal;
    src: url("https://e00.uecdn.es/fonts/PTSerifWeb/pt_serif-web-regular-webfont.eot");
    src: url("https://e00.uecdn.es/fonts/PTSerifWeb/pt_serif-web-regular-webfont.eot?#iefix") format("embedded-opentype"), url("https://e00.uecdn.es/fonts/PTSerifWeb/pt_serif-web-regular-webfont.woff2") format("woff2"), url("https://e00.uecdn.es/fonts/PTSerifWeb/pt_serif-web-regular-webfont.woff") format("woff"), url("https://e00.uecdn.es/fonts/PTSerifWeb/pt_serif-web-regular-webfont.ttf") format("ttf"), url("https://e00.uecdn.es/fonts/PTSerifWeb/pt_serif-web-regular-webfont.svg#svgpt_serif") format("svg");
  }
  
  @font-face {
    font-family: "PT_serif Bold", serif;
    font-style: normal;
    font-weight: 600;
    src: url("https://e00.uecdn.es/fonts/PTSerifWeb/pt_serif-web-bold-webfontt.eot");
    src: url("https://e00.uecdn.es/fonts/PTSerifWeb/pt_serif-web-bold-webfont.eot?#iefix") format("embedded-opentype"), url("https://e00.uecdn.es/fonts/PTSerifWeb/pt_serif-web-bold-webfont.woff2") format("woff2"), url("https://e00.uecdn.es/fonts/PTSerifWeb/pt_serif-web-bold-webfont.woff") format("woff"), url("https://e00.uecdn.es/fonts/PTSerifWeb/pt_serif-web-bold-webfont.ttf") format("ttf"), url("https://e00.uecdn.es/fonts/PTSerifWeb/pt_serif-web-bold-webfont.svg#svgpt_serif") format("svg");
  }
  

/* === BÁSICO === */

strong{
    font-weight: bold;
}

#container{
    width:989px; color:#262626; box-sizing: border-box; font-family:"Roboto", arial, sans-serif; margin:auto; overflow:hidden;
}

#loader{
    width: 100%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    z-index:1000;    
    background-color: #edf3f9;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

#spinner{
    width: 50px;
    height: 50px;
    border: 5px solid #c5daeb;
    border-top-color:#5f9bc5;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;

    animation: spinning 2s linear infinite;
    -webkit-animation: spinning 2s linear infinite;
    -o-animation: spinning 2s linear infinite;
}

@keyframes spinning {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }    
}

#loader p{
    position:absolute;
    top: 0; left:50%; right: 0; bottom: 0;
    margin: auto;
}


.heading1{
    font-family: "Rubik Black", "Roboto", "Arial", sans-serif; font-size:29px; line-height:27px; text-align:center; text-transform: uppercase; margin: 10px 0px 30px 165px; width:470px;
}

.heading2{
    font-family: 'PT serif Regular', 'Times New Roman', Times, serif; font-size: 21px; line-height: 26px; text-align: center; width:470px; margin-left: 165px; margin-bottom: 30px; letter-spacing: 0.3px; word-spacing: 0px;
}

.heading3{
    font-family: "Rubik Black", "Roboto", "Arial", sans-serif; font-size:18px; line-height:19px; text-align:center; text-transform: uppercase; margin: 50px 0px 20px 165px; width:470px;
}

.graph-desktop{
    display:block; width:100%; margin-left: auto; margin-right:auto; margin-bottom: 50px;
}

.graph-mobile{
    display:block; width:100%;display:none; margin-bottom: 50px;
}

#map{
    width:100%; height: 575px;  background-size: contain; position:relative;
    background-image: url("https://e00-elmundo.uecdn.es/elmundo/2022/graficos/jun/elecciones-andalucia/img/fondo-c4.jpg"); background-repeat: no-repeat; margin-bottom: 50px;
}

#grid{
    width: 91.07%; height: 521px; position: absolute; left:3.85%; top:5.91%;
}

.svg-button{
    cursor:pointer; stroke-width: 0px; -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.svg-button-selected{
    stroke: #000; stroke-width: 1px;
}

#tooltip{
    width:180px; background-color:rgb(255, 255, 255); font-size:13px; font-family: "Roboto", "Arial", sans-serif; position: absolute; z-index:10; border:1px solid #ccc; display:none; box-sizing: border-box; padding: 7px; line-height:15px;
}

#tooltip span{
    font-weight: bold;
}

#key{
    width: 320px; height: 110px;   position:relative; margin-left:240px; margin-bottom: 30px; margin-right: 430px;
}

#key > p, #key > img{
    position: absolute;
}

.key1, .key2{
     top: 5px; text-transform: uppercase; font-size:12px;
}

.key1{
    left:40px;
}

.key2{
    right:45px;
}

.key3{
    top:25px;
}

.key4{
    top:65px; text-align: center; font-size: 13px; line-height:15px;
}

#menu{
    width: 200px; border:1px solid #ccc; box-sizing: border-box; -webkit-border-radius: 25px;
    border-radius: 25px; margin-left: 300px; margin-bottom:20px;
}

#menu li{
    font-family: "Roboto", arial, sans-serif;  width: 50%; cursor:pointer;  display: inline-block;
}

#menu li a{
    text-decoration: none; color: #000; display:block; padding:10px; box-sizing: border-box; text-align: center; font-weight: bold; font-size: 14px; 
}

#menu li a:hover{
    text-decoration: underline;
}

.year1{
    -webkit-border-radius: 25px 0 0 25px;
border-radius: 25px 0 0 25px;
}

.year2{
    -webkit-border-radius: 0 25px 25px 0;
border-radius: 0 25px 25px 0;
}

.buttonselected{
    background-color: #ccc !important;
}




@media (max-width: 988px){

    #container{
        width: 360px;
    }

    .heading1, .heading2, .heading3{
        box-sizing: border-box; padding: 0 5px; width:100%; margin-left: auto;
    }

    .heading1{
        font-size:26px; line-height: 28px; 
    }

   .heading2{
        font-size:19px; line-height: 22px; box-sizing: border-box; padding: 0 10px;
    }

    .heading3{
        font-size:18px; line-height: 19px; 
    }

    #key{
        margin-left: auto; margin-right: auto;
    }

    #menu{
        margin:0 auto 30px auto;
    }

    #map{
        height: 209px; background-image: url("https://e00-elmundo.uecdn.es/elmundo/2022/graficos/jun/elecciones-andalucia/img/fondo-360.jpg");
    }

    #grid{
        height:190px;
    }

    .graph-desktop{
        display:none;
    }

    .graph-mobile{
        display:block;
    }
}