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

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



/* Extra large devices (large laptops and desktops, 1200px and up) */
.iconO1txt img{
    top: 25%;
    left: 45%;
}
.icon02txt img{
    top: 15.5%;
    left: 22%;
}
.icon03txt img{
    top:10%;
    left: 44.5%;
}
.icon04txt img{
    top: 57.5%;
    left: 32%;
    z-index:9;
}   
.icon05txt img{
    top: 30%;
    left: 52.5%;
    z-index: 12;
}
.icon06txt img{
    top: 35%;
    left: 72.5%;
}
.icon07txt img{
    top: 70%;
    left: 78%;
}
.icon08txt img{
    top:64%;
    left: 69%;
    z-index: 11;
}
.icon09txt img{
    top: 74%;
    left: 50.5%;
}
.icon10txt img{
    top: 43%;
    left: 26%;
}
.icon11txt img{
    top: 49%;
    left: 51.5%;
}
.icon12txt img{
    top: 36%;
    left: 32.5%;
}   
.icon13txt img{
    top: 27.5%;
    left: 27%;
}


/* ICNOS POSITION */
.botP{
    width: 7.5%;
}
.iconO1 img
{
    position: absolute;
    top: 23%;
    left: 42%;

    z-index: 9;
}
.icon02 img
{
    position: absolute;
    top: 11.5%;
    left: 29%;

    z-index: 6;
}

.icon03 img
{
    position: absolute;
    top: 9%;
    left: 41%;
    
    z-index: 8;
}

.icon04 img
{
    position: absolute;
    top: 51%;
    left: 38%;

    z-index: 12;
}

.icon05 img
{
    position: absolute;
    top: 25%;
    left: 59%;

    z-index: 13;
}

.icon06 img
{
    position: absolute;
    top: 30%;
    left: 68%;

    z-index: 7;
}

.icon07 img
{
    position: absolute;
    top: 66%;
    left: 73%;

    z-index: 4;
}

.icon08 img
{
    position: absolute;
    top: 59%;
    left: 65%;

    z-index: 12;
}

.icon09 img
{
    position: absolute;
    top: 70%;
    left: 57%;

    z-index: 8;
}

.icon10 img
{
    position: absolute;
    top: 40%;
    left: 32%;

    z-index: 7;
}

.icon11 img
{
    position: absolute;
    top: 43%;
    left: 46%;

    z-index: 8;
}

.icon12 img
{
    position: absolute;
    top: 33.5%;
    left: 38%;

    z-index: 8;
}

.icon13 img
{
    position: absolute;
    top: 24%;
    left: 32%;

    z-index: 9;
}

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