@import url(sondeos.css);

/*** VERSION ELECCIONES ***********/
#infografiaAlemania.elecciones {min-height: 690px;}
#infografiaAlemania.elecciones > div {opacity: 1}
#infografiaAlemania.elecciones .sombras {width: 768px; height: 210px; display: block; position: absolute;top: 492px; left: 80px; background: url(i/sombra.png) no-repeat center top;}
#infografiaAlemania.elecciones #chart {}
#infografiaAlemania.elecciones #chart ul {position: relative;width: 540px;height: 270px;margin: 0 auto;margin-top: 120px;}
#infografiaAlemania.elecciones #chart ul li {
    width: 540px;
    
    position: absolute;
    height: 270px;
}
#infografiaAlemania.elecciones #chart ul li .arco {
    width: 540px;
    overflow: hidden;
    height: 270px;}
#infografiaAlemania.elecciones #chart ul li .arco img {
    
}
#infografiaAlemania.elecciones #chart ul li .porcentaje{
    position: absolute;
    top: 0px;
    left: 0px;
    color:#fff;
    font-size: 20px;
    line-height: 20px;
    text-shadow: 1px 1px 1px #000;
    text-align: center;
}


#infografiaAlemania.elecciones #chart ul li.partido1 .arco img {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Safari and Chrome */
}
#infografiaAlemania.elecciones #chart ul li.partido2 .arco img {
    animation: chart2 1s ease-in-out;
    -moz-animation: chart2 1s ease-in-out;
    -webkit-animation: chart2 1s ease-in-out;
    transform: rotate(75deg);
    -webkit-transform: rotate(75deg); 
    -moz-transform: rotate(75deg);

}
@keyframes chart2{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(75deg);
    }
}
@-webkit-keyframes chart2{
    0%{
        -webkit-transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(75deg); 
    }
}
@-moz-keyframes chart2{
    0%{
        -moz-transform: rotate(0deg);
    }
    100%{
        -moz-transform: rotate(75deg);
    }
}
#infografiaAlemania.elecciones #chart ul li.partido3 .arco img {
    animation: chart3 1s ease-in-out;
    -moz-animation: chart3 1s ease-in-out;
    -webkit-animation: chart3 1s ease-in-out;
    transform: rotate(120deg);
    -ms-transform: rotate(120deg); /* IE 9 */
    -webkit-transform: rotate(120deg); /* Safari and Chrome */
}
@keyframes chart3{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(120deg);
    }
}
@-webkit-keyframes chart3{
    0%{
        -webkit-transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(120deg); 
    }
}
@-moz-keyframes chart3{
    0%{
        -moz-transform: rotate(0deg);
    }
    100%{
        -moz-transform: rotate(120deg);
    }
}

#infografiaAlemania.elecciones #chart ul li.partido4 .arco img {
    animation: chart4 1s ease-in-out;
    -moz-animation: chart4 1s ease-in-out;
    -webkit-animation: chart4 1s ease-in-out;
    transform: rotate(135deg);
    -ms-transform: rotate(135deg); /* IE 9 */
    -webkit-transform: rotate(135deg); /* Safari and Chrome */
}
@keyframes chart4{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(135deg);
    }
}
@-webkit-keyframes chart4{
    0%{
        -webkit-transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(135deg); 
    }
}
@-moz-keyframes chart4{
    0%{
        -moz-transform: rotate(0deg);
    }
    100%{
        -moz-transform: rotate(135deg);
    }
}
#infografiaAlemania.elecciones #chart ul li.partido5 .arco img {
    animation: chart5 1s ease-in-out;
    -moz-animation: chart5 1s ease-in-out;
    -webkit-animation: chart5 1s ease-in-out;
    transform: rotate(150deg);
    -ms-transform: rotate(150deg); /* IE 9 */
    -webkit-transform: rotate(150deg); /* Safari and Chrome */
}
@keyframes chart5{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(150deg);
    }
}
@-webkit-keyframes chart5{
    0%{
        -webkit-transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(150deg); 
    }
}
@-moz-keyframes chart5{
    0%{
        -moz-transform: rotate(0deg);
    }
    100%{
        -moz-transform: rotate(150deg);
    }
}
#infografiaAlemania.elecciones #partidos ul{
    position: relative;
    margin: 0 auto;
    height: 120px;
    width: 785px;
    margin-top: 0px;
}
#infografiaAlemania.elecciones #partidos ul li{
    float: left;
    margin: 5px;
}
#infografiaAlemania.elecciones #chart ul li .logo-partido {display: block;position: absolute;}
#infografiaAlemania.elecciones #chart ul li.partido1 .logo-partido {background: url(i/logos/cdu.png) no-repeat center center;width: 71px;height: 44px;top: 140px;left: 50px;}
#infografiaAlemania.elecciones #chart ul li.partido2 .logo-partido {background: url(i/logos/spd.png) no-repeat center center;width: 61px;height: 61px;top: 10px;left: 260px;}
#infografiaAlemania.elecciones #chart ul li.partido3 .logo-partido {background: url(i/logos/die.png) no-repeat center center;width: 88px;height: 25px;top: 15px;left: 420px;}
#infografiaAlemania.elecciones #chart ul li.partido4 .logo-partido {background: url(i/logos/verdes.png) no-repeat center center;width: 54px;height: 49px;top: 60px;left: 470px;}
#infografiaAlemania.elecciones #chart ul li.partido5 .logo-partido {background: url(i/logos/mixto.png) no-repeat center center;width: 88px;height: 25px;top: 0;left: 0;}

#infografiaAlemania.elecciones #partidos ul li span {display: block;width: 147px; height: 118px;}
#infografiaAlemania.elecciones #partidos ul li.partido1 span {background: url(i/partidos/verdes.png) no-repeat center center;}
#infografiaAlemania.elecciones #partidos ul li.partido2 span {background: url(i/partidos/izquierda.png) no-repeat center center;}
#infografiaAlemania.elecciones #partidos ul li.partido3 span {background: url(i/partidos/cdu.png) no-repeat center center;}
#infografiaAlemania.elecciones #partidos ul li.partido4 span {background: url(i/partidos/spd.png) no-repeat center center;}
#infografiaAlemania.elecciones #partidos ul li.partido5 span {background: url(i/partidos/mixto.png) no-repeat center center;}

#infografiaAlemania.elecciones #chart ul li.partido1 .porcentaje {
    top: 190px;
    left: 60px;
}

#infografiaAlemania.elecciones #chart ul li.partido2 .porcentaje {
    top: 80px;
    left: 274px;
}

#infografiaAlemania.elecciones #chart ul li.partido3 .porcentaje {
    top: 50px;
    left: 420px;
}

#infografiaAlemania.elecciones #chart ul li.partido4 .porcentaje {
    top: 110px;
    left: 472px;
}

#infografiaAlemania.elecciones #chart ul li.partido5 .otros {
    position: absolute;
    top: 188px;
    left: 460px;
}
#infografiaAlemania.elecciones #chart ul li.partido5 .otros > span {display: inline-block;width: 250px; line-height: 15px;color: #000;text-shadow: 1px 1px 1px #fff;}