.botP
{
 z-index: 3;
}

.botP:hover{
    transform: scale(1.3);
    filter:drop-shadow(20px 20px 4px black)
        drop-shadow(-5px -5px 4px black) ;
    
}
/*ANIMACION RUTA PERSONALIDADES*/
@keyframes iconAnim
{
    0%
    {
        transform: scale(0);
        transform: translateX(-41.2px);
        opacity: 0;
    }
    100%
    {
        transform: scale(1);
        transform: translateX(10px);
        opacity: 100;
    }
}
@keyframes iconAnim2
{
    0%
    {
        transform: scale(1);
        transform: translateX(9px);
        opacity: 100;
      
    }
    100%
    {
        transform: scale(0);
        transform: translateX(-31px);
        opacity: 0;
    }
}

/*ANIMACION RUTA OFICIOS*/
@keyframes iconAnimI
{
    0%
    {
        transform: scale(0);
        transform: translateX(-41.2px);
        opacity: 0;
    }
    100%
    {
        transform: scale(1);
        transform: translateX(-105.18px);
        opacity: 100;
    }
}
@keyframes iconAnim2I
{
    0%
    {
        transform: scale(1);
        transform: translateX(-92.12px);
        opacity: 100;
      
    }
    100%
    {
        transform: scale(0);
        transform: translateX(-30px);
        opacity: 0;
    }
}

/*ANIMACION RUTA DE LAS MUJERES*/
@keyframes iconAnimII
{
    0%
    {
        transform: scale(0);
        transform: translateX(-41.2px);
        opacity: 0;
    }
    100%
    {
        transform: scale(1);
        transform: translateX(10px);
        opacity: 100;
    }
}
@keyframes iconAnim3
{
    0%
    {
        transform: scale(1);
        transform: translateX(9px);
        opacity: 100;
      
    }
    100%
    {
        transform: scale(0);
        transform: translateX(-31px);
        opacity: 0;
    }
}
/*ANIMACION RUTA DE LA LITERATURA*/
@keyframes iconAnimLit
{
    0%
    {
        transform: scale(0);
        transform: translateX(-41.2px);
        opacity: 0;
    }
    100%
    {
        transform: scale(1);
        transform: translateX(-95.18px);
        opacity: 100;
    }
}
@keyframes iconAnim4
{
    0%
    {
        transform: scale(1);
        transform: translateX(-92.12px);
        opacity: 100;
      
    }
    100%
    {
        transform: scale(0);
        transform: translateX(-30px);
        opacity: 0;
    }
}


/* ICNOS POSITION */
.icontxt img
{
    width: 20%;

    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
{
    width: 47.4%;
    position: absolute;
    top: 14.2%;
    left: 28%;

}

.iconO1 img:hover{
    z-index: 5;
}
.iconO1txt img{
   
    
    top: 40%;
    left: 14%;
   
}


@media screen and (max-width:1600px){
    .iconO1txt img{
        top: 42%;
        left: 17%;
    }
}

@media screen and (max-width:900px){
    .iconO1txt img,.iconO4txt img{
        top: 42%;
        left: 20%;
    }
}

@media screen and (max-width:600px){
    .iconO1txt img{
        top: 42%;
        left: 26%;
    }
}

.icon02 img
{
    width: 33.5%;
    position: absolute;
    top: 29.5%;
    left: 45.5%;

}
.icon02 img:hover{
    z-index: 4;
}
.icon02txt img
{
   
    top: 40%;
    left: 79%;

}


.icon03 img
{
    width: 23.4%;
    position: absolute;
    top: 20.4%;
    left: 52.8%;
    transform: rotate(0.2deg);

    z-index: 3;
}

.icon03 img:hover{
    z-index: 4;
}

.icon03txt img
{
   
    top: 25%;
    left: 76.5%;

    
   
}

.icon04 img
{
    width: 54.6%;
    position: absolute;
    top: 24.4%;
    left: 29.6%;
    transform: rotate(-1deg);

    z-index: 3;

}

.icon04 img:hover{
    z-index: 4;
}

.icon04txt img
{
   
    top: 40%;
    left: 17%;

    
   
}