@font-face {
    font-family: "Futura-Bold";
    src: url("../fonts/FuturaBold.ttf");
}

@font-face {
    font-family: "FuturaSdt-Light";
    src: url("../fonts/FuturaStd-Light.otf");
}

@font-face {
    font-family: "FuturaSdt-Heavy";
    src: url("../fonts/FuturaStd-Heavy.otf");
}


/*Estilos generales barras verticales*/

.vertical-line{
    border-bottom: 2px solid black;
    height: 130px;
}
.vertical-stats {
    width: 225px;
    height: 225px;
} 
.vertical-stats p {
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.vertical-stats p small {
    font-family: "FuturaSdt-Heavy";
    font-size: 13px;
    padding-left: 20px;
}
.vertical-stats img{
    border-right: 2px solid #ffffff;
}

.barra-vertical-style {
    width: 50px;
    height: 100px;
    background-color: white;
    background-image: url(../img/texture-waves.png);
    display: inline-block;
    border: 1px solid #ffcd00;
    position: relative;
 
}

.vertical-stats span{
    font-family: "FuturaSdt-Bold";
    font-size: 13px;
}

.vertical-stats div p{
    font-family: "FuturaSdt-Light";
}






.graphic-horizontal p {
    padding-right: 20px;
}

#barra-1 {
    width: 225px;
    height: 35px;
    background-color: white;
    /*animation-name: example;
    animation-duration: 6s;*/
    background-image: url("../img/texture-waves.png");
    display:inline-block;
    border: 1px solid #ffcd00;
    margin-bottom: 30px;
    position: relative;
}
#barra-1::before {
    content: "2019";
    font-size: 13px;
    position: absolute;
    left: -35px;
    top: 10px;

}
#barra-2 {
    width: 167px;
    height: 35px;
    background-color: white;
 /*   animation-name: example2;
    animation-duration: 6s;*/
    background-image: url("../img/texture-waves.png");
    display:inline-block;
    border: 1px solid #ffcd00;
    position: relative;
}
#barra-2::before {
    content: "2020";
    font-size: 13px;
    position: absolute;
    left: -35px;
    top: 10px;

}

.barra-style {
    width: 225px;
    height: 35px;
    background-color: white;
    /*animation-name: example;
    animation-duration: 6s;*/
    background-image: url("../img/texture-waves.png");
    display:inline-block;
    border: 1px solid #ffcd00;
    margin-bottom: 30px;
    position: relative;
}
.grafica-barras .d-flex:first-child::before {
    content: "2019";
    font-size: 13px;
    position: absolute;
    left: -16px;
    top: 28px;
    font-family: "FuturaSdt-Light";
}
.grafica-barras .d-flex:nth-child(2)::before {
    content: "2020";
    font-size: 13px;
    position: absolute;
    left: -18px;
    top: 94px;
    font-family: "FuturaSdt-Light";
}

.grafica-barras span.ml-2.pt-1 {
    font-size: 13px;
    font-family: "FuturaSdt-Bold";
}

@keyframes example {
    from {width: 50px;}
    to {width: 225px;}
}
@keyframes example2 {
    from {width: 50px;}
    to {width: 167px;}
}   
.grafica-barras{
    margin:10px;
    border-left: 1.5px solid black;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: "FuturaSdt-Bold";
}
.grafica-barras div:last-child div{
    margin-bottom: 5px;
    background-image: url("../img/texture-points.png");
}
.gr-bar-ver-2.barra-vertical-style.barra {
    background-image: url("../img/texture-points.png");
}


/* SET BARRAS  */



.nc-bar-1 {
    height: 65px;
}

@keyframes nc-bar-1 {
    from {height: 10px;}
    to {height: 65px;}
}   


.gr-bar-2{
    width:175px;
}

@keyframes gr-bar-2 {
    from {width: 50px;}
    to {width: 175px;}
}   


.gr-bar-4{
    width:115px;
}

@keyframes gr-bar-4 {
    from {width: 50px;}
    to {width: 115px;}
}   


.gr-bar-6{
    width:215px;
}

@keyframes gr-bar-6 {
    from {width: 50px;}
    to {width: 215px;}
}   

.tac-bar-7 {
    height: 116px;
}
@keyframes tac-bar-7 {
    from {height: 10px;}
    to {height: 116px;}
}  
.tac-bar-6 {
    height: 58px;
}
@keyframes tac-bar-6 {
    from {height: 10px;}
    to {height: 58px;}
}  
/*SET BARRAS VERTICALES*/
.tac-bar-5 {
    height: 25px;
}
@keyframes tac-bar-5 {
    from {height: 10px;}
    to {height: 25px;}
}   
.tac-bar-4 {
    height: 253px;
}
@keyframes tac-bar-4 {
    from {height: 10px;}
    to {height: 253px;}
}   
.gr-bar-ver-1{
    height:90px;
}

@keyframes gr-bar-ver-1 {
    from {height: 10px;}
    to {height: 90px;}
}   


.gr-bar-ver-2{
    height:100px;
}

@keyframes gr-bar-ver-2 {
    from {height: 10px;}
    to {height: 100px;}
} 
.tac-bar-3 {
    height: 132px;
}
@keyframes tac-bar-3 {
    from {height: 10px;}
    to {height: 132px;}
}   
.gr-bar-ver-3{
    height:100px;
}

@keyframes gr-bar-ver-3 {
    from {height: 10px;}
    to {height: 100px;}
}   
.acc-bar-2 {
    height: 37px;
}
@keyframes acc-bar-2 {
    from {height: 10px;}
    to {height: 37px;}
}  
.acc-bar-3 {
    height: 10px;
}
@keyframes acc-bar-3 {
    from {height: 0px;}
    to {height: 10px;}
} 
.acc-bar-4 {
    height: 180px;
}
@keyframes acc-bar-4 {
    from {height: 0px;}
    to {height: 180px;}
} 
.acc-bar-1 {
    height: 141px;
}
@keyframes acc-bar-1 {
    from {height: 10px;}
    to {height: 141px;}
}  
.gr-bar-ver-4{
    height:20px;
}
.gr-bar-ver-55-ss {
    height: 30px;
}
@keyframes gr-bar-ver-55-ss {
    from {height: 10px;}
    to {height: 30px;}
}   
@keyframes gr-bar-ver-4 {
    from {height: 10px;}
    to {height: 20px;}
}   
.gr-bar-ver-11-ss {
    height: 10px;
}
@keyframes gr-bar-ver-11-ss {
    from {height: 0px;}
    to {height: 10px;}
} 
.gr-bar-ver-66-ss {
    height: 50px;
}
@keyframes gr-bar-ver-66-ss {
    from {height: 10px;}
    to {height: 50px;}
} 
.gr-bar-ver-5-ss {
    height: 150px;
}
@keyframes gr-bar-ver-5-ss {
    from {height: 10px;}
    to {height: 150px;}
}   

.gr-bar-ver-5{
    height:80px;
}

@keyframes gr-bar-ver-5 {
    from {height: 10px;}
    to {height: 80px;}
}   


.gr-bar-ver-6{
    height:100px;
}

@keyframes gr-bar-ver-6 {
    from {height: 10px;}
    to {height: 100px;}
}   


.gr-bar-ver-7{
    height:100px;
}

@keyframes gr-bar-ver-7 {
    from {height: 10px;}
    to {height: 100px;}
}   


.gr-bar-ver-8{
    height:40px;
}

@keyframes gr-bar-ver-8 {
    from {height: 10px;}
    to {height: 40px;}
}   

.cap-bar-1 {
    height: 224px;
}
@keyframes cap-bar-1 {
    from {height: 10px;}
    to {height: 224px;}
}   

.cap-bar-2 {
    height: 190px;
}

@keyframes cap-bar-2 {
    from {height: 10px;}
    to {height: 190px;}
} 
.cap-bar-3 {
    height: 122px;
}
@keyframes cap-bar-3 {
    from {height: 10px;}
    to {height: 122px;}
} 

.cap-bar-4 {
    height: 132px;
}

@keyframes cap-bar-4 {
    from {height: 10px;}
    to {height: 132px;}
} 

.edad-barra3 {
    width: 230px;
}
@keyframes edad-barra3 {
    from {
        width: 0;
    }
    to {
        width: 230px;
    }
}
.ac-hombre {
    height: 100px;
}
@keyframes ac-hombre {
    from {
        height: 10px;
    }
    to {
        height: 100px;
    }
}
.ac-mujeres {
    height: 180px;
}
@keyframes ac-mujeres {
    from {
        height: 10px;
    }
    to {
        height: 180px;
    }
}