@keyframes iconAnim
{
    0%
    {
        transform: scale(0);
        transform: translateX(-41.2px);
        opacity: 0;
    }
    100%
    {
        transform: scale(1);
        transform: translateX(9px);
        opacity: 100;
    }
}
@keyframes iconAnim2
{
    0%
    {
        transform: scale(1);
        transform: translateX(9px);
        opacity: 100;
      
    }
    100%
    {
        transform: scale(0);
        transform: translateX(-31px);
        opacity: 0;
    }
}

@keyframes iconAnimI
{
    0%
    {
        transform: scale(0);
        transform: translateX(0%);
        opacity: 0;
    }
    100%
    {
        transform: scale(1);
        transform: translateX(-25%);
        opacity: 100;
    }
}
@keyframes iconAnim2I
{
    0%
    {
        transform: scale(1);
        transform: translateX(-31px);
        opacity: 100;
      
    }
    100%
    {
        transform: scale(0);
        transform: translateX(9px);
        opacity: 0;
    }
}
@keyframes iconAnimAb
{
     0%
    {
        transform: scale(1);
        transform: translateY(-92.12px);
        opacity: 0;
      
    }
    100%
    {
        transform: scale(0);
        transform: translateY(-30px);
        opacity: 100;
    }
}
@keyframes iconAnimAb2
{
    0%
    {
        transform: scale(0);
        transform: translateY(-41.2px);
        opacity: 100;
    }
    100%
    {
        transform: scale(1);
        transform: translateY(-92.12px);
        opacity: 0;
    }
   
}
/* ICNOS POSITION */
.icontxt img
{
    width: 10%;

    animation-duration: 1.5s;
    animation-direction:normal;
    animation-iteration-count:1;
    /* The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) */
    animation-fill-mode:forwards;


    position: absolute;
}
.iconO1 img /*cordera*/
{
    width: 7%;
    position: absolute;
    top: 55%;
    left: 23.4%;

    z-index: 9;
}
.iconO1txt img{
   
    
    top: 55%;
    left: 16%;


    z-index: 8;
   
}

.icon02 img /*alfonso*/
{
    width: 6%;
    position: absolute;
    top: 72%;
    left: 37%;

    z-index: 6;

}

.icon02txt img
{
   
    top: 72%;
    left: 32.5%;

    z-index: 5;
   
}

.icon03 img /*clarin*/
{
    width: 10%;
    position: absolute;
    top: 56%;
    left: 43.8%;
    
    z-index: 9;

}
.icon03txt img
{
    top: 56%;
    left: 50.4%;

    z-index: 8;

}

.icon04 img /*mafalda*/
{
    width: 6%;
    position: absolute;
    top: 34%;
    left: 33%;

    z-index: 9;
}
.icon04txt img
{
    top: 34%;
    left: 27.5%;
   
    width: 10%;

    z-index: 8;
}

.icon05 img /*armando*/
{
    width: 5%;
    position: absolute;
    top: 33%;
    left: 41%;

    z-index: 11;
}
.icon05txt img
{
    top: 39.9%;
    left: 45.3%;


    z-index: 10;
}

.icon06 img /*esperanza*/
{
    width: 3.5%;
    position: absolute;
    top: 19%;
    left: 54%;

    z-index: 8;
}

.icon06txt img
{
    top: 26%;
    left: 48%;   


    z-index: 7;
}

.icon07 img /*regenta*/
{
    width: 6%;
    position: absolute;
    top: 32%;
    left: 65%;

    z-index: 5;
}

.icon07txt img
{
    top: 33%;
    left: 60%;

    z-index: 3;
}

.iconActive img
{
    width: 8%;
    position: absolute;
}

.decoracion
{

    width: 8%;
    z-index: 1;

}

.botP
{
 z-index: 3;
}

.botP:hover{
    transform: scale(1.3);
}

#colorlogo{
    background:rgb(0, 124, 249);
}
#mapa{
    border:rgb(2, 64, 123) 10px solid ;
    border-radius: 15px;
}