@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 /*maternidad campo sanfran*/
{
    width: 4%;
    position: absolute;
    top: 30%;
    left: 31%;

    z-index: 9;
}


/* Extra small devices (phones, 400px and up) */
@media only screen and (min-width: 400px) {
    /*maternidad san fran*/
    .iconO1txt img{
    top: 33%;
    left: 31%;

    z-index: 8;
    }

    /*mafalda
    .icon02txt img{

    top: 43%;
    left: 33%;

    z-index: 5;
    
    }*/

    /*torera*/
    .icon03txt img
    {
    width: 5%;
    top: 62%;
    left: 34%;

    z-index: 8;

    }  
    
    /*la maternidad*/
    .icon05txt img
    {
    top: 43%;
    left: 50%;


    z-index: 10;
    }

    /*la bailarina*/
    .icon06txt img
    {
    top: 31%;
    left: 49%;  


    z-index: 7;
    }

    /*la guisandera*/
    .icon08txt img
    {
    top: 11%;
    left: 61%;

    z-index: 7;
    }


    /*la pescadera*/
    .icon12txt img
    {
    top: 54%;
    left: 68%;
   
    z-index: 8;

    }


}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    /*maternidad san fran*/
    .iconO1txt img{
    top: 33%;
    left: 28%;

    z-index: 8;
    }

    /*mafalda
    .icon02txt img{
   
    top: 43%;
    left: 30%;

    z-index: 5;
   
    }*/

    /*torera*/
    .icon03txt img
    {
    width: 5%;
    top: 58%;
    left: 34%;

    z-index: 8;

    }   

    /*la maternidad*/
    .icon05txt img
    {
    top: 43%;
    left: 46%;


    z-index: 10;
    }

    /*la bailarina*/
    .icon06txt img
    {
    top: 31%;
    left: 46%;  


    z-index: 7;
    }

    /*la guisandera*/
    .icon08txt img
    {
    top: 11%;
    left: 57.5%;

    z-index: 7;
    }

    /*la pescadera*/
    .icon12txt img
    {
    top: 54%;
    left: 65%;

    z-index: 8;

    }


}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
     /*maternidad san fran*/
    .iconO1txt img{
    top: 33%;
    left: 30%;

    z-index: 8;
    }

    /*mafalda
    .icon02txt img{
   
    top: 43%;
    left: 26%;

    z-index: 5;
    
    }*/

    /*torera*/
    .icon03txt img
    {
    width: 5%;
    top: 56%;
    left: 34%;

    z-index: 8;

    }   

    /*la maternidad*/
    .icon05txt img
    {
    top: 43%;
    left: 43%;


    z-index: 10;
    }

     /*la bailarina*/
     .icon06txt img
    {
    top: 31%;
    left: 43%;  
 
 
    z-index: 7;
    }

    /*la guisandera*/
    .icon08txt img
    {
    top: 11%;
    left: 55%;

    z-index: 7;
    }

    /*la pescadera*/
    .icon12txt img
    {
    top: 54%;
    left: 62%;

    z-index: 8;

    }

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
     /*maternidad san fran*/
    .iconO1txt img{
    top: 33%;
    left: 27%;

    z-index: 8;
    }

    /*mafalda
    .icon02txt img{
   
    top: 43%;
    left: 24%;

    z-index: 5;
       
    }*/

    /*torera*/
    .icon03txt img
    {
    width: 5%;
    top: 54%;
    left: 34%;

    z-index: 8;

    } 

    /*la maternidad*/
    .icon05txt img
    {
    top: 43%;
    left: 40.5%;


    z-index: 10;
    }

    /*la bailarina*/
    .icon06txt img
    {
    top: 31%;
    left: 40%;  


    z-index: 7;
    }

    /*la guisandera*/
    .icon08txt img
    {
    top: 11%;
    left: 52.5%;

    z-index: 7;
    }

    /*la pescadera*/
    .icon12txt img
    {
    top: 54%;
    left: 59.5%;

    z-index: 8;
    }


}

  /*maternidad san fran*/
  .iconO1txt img{
    top: 33%;
    left: 24%;

    z-index: 8;
    }


/*mafalda*/
    .icon02txt img{
   
    top: 43%;
    left: 21%;

    z-index: 5;
    
    }
/*torera*/
.icon03txt img
{
width: 5%;
top: 57%;
left: 36%;

z-index: 8;

} 

/*la maternidad*/
.icon05txt img
{
top: 43%;
left: 40.5%;


z-index: 10;
}

/*la bailarina*/
.icon06txt img
{
top: 35%;
left: 39%;  


z-index: 7;
}

/*la guisandera*/
.icon08txt img
{
top: 8%;
left: 51%;

z-index: 7;
}

/*la pescadera*/
.icon12txt img
{
top: 70%;
left: 53%;

z-index: 8;

}



/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
   

    

    
} 



.icon02 img /*mafalda*/
{
    width: 5%;
    position: absolute;
    top: 42%;
    left: 27%;

    z-index: 6;

}



.icon03 img /*Torera*/
{
    width: 5%;
    position: absolute;
    top: 47%;
    left: 36%;
    
    z-index: 9;

}


.icon04 img /*encarna con chiquilin*/
{
    width: 3.5%;
    position: absolute;
    top: 51%;
    left: 41%;

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

    z-index: 8;
}

.icon05 img /*maternidad*/
{
    width: 5%;
    position: absolute;
    top: 38%;
    left: 47%;

    z-index: 11;
}


.icon06 img /*bailarina*/
{
    width: 5%;
    position: absolute;
    top: 30%;
    left: 44%;

    z-index: 8;
}



.icon07 img /*esperanza caminando*/
{
    width: 2.4%;
    position: absolute;
    top: 22%;
    left: 42%;

    z-index: 5;
}

.icon07txt img
{
    top: 21%;
    left: 43.5%;

    z-index: 3;
}

.icon08 img /*guisandera*/
{
    width: 6%;
    position: absolute;
    top: 9%;
    left: 55%;
   
    z-index: 8;
}


.icon09 img /*gitana*/
{
    width: 4%;
    position: absolute;
    top: 16%;
    left: 64%;

    z-index: 8;
}

.icon09txt img
{
    top: 19%;
    left: 67%;
   
    z-index: 7;

}

.icon10 img /*regenta*/
{
    width: 5%;
    position: absolute;
    top: 37%;
    left:62%;

    z-index: 7;
}

.icon10txt img
{
    top: 41%;
    left: 64%;
   
    z-index: 6;

}

.icon11 img /*lechera*/
{
    width: 6%;
    position: absolute;
    top: 52%;
    left: 60%;

    z-index: 8;
}

.icon11txt img
{
    top: 53%;
    left: 65%;
   
    z-index: 7;

}

.icon12 img /*pescadera*/
{
    width: 4%;
    position: absolute;
    top: 68%;
    left: 60%;

    z-index: 9;
}



.icon13 img /*bella lola*/
{
    width: 8%;
    position: absolute;
    top: 80%;
    left: 49%;

    z-index: 9;
}

.icon13txt img
{
    top: 84%;
    left: 54%;
   
    z-index: 8;

}

.icon14 img /*mujer sentada*/
{
    width: 3%;
    position: absolute;
    top: 51%;
    left: 50%;

    z-index: 7;
}

.icon14txt img
{
    top: 52%;
    left: 52%;
   
    z-index: 6;

}

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

.decoracion
{

    width: 8%;
    z-index: 1;

}


.canarias {

    position: absolute;
    left: 58.7%;
    top: 59%;
    width: 40%;
    border: solid 2px rgb(22, 180, 212);

}




.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;
}