.divA1{
    position: relative;
    animation-name: movDiv;
    animation-duration: 1s;  
    animation-fill-mode: forwards;
    color:transparent;
}
  
@keyframes movDiv {
    from {
        left: 1300px;
    }
    to {
        left: 0px;
    }
}

.divA1Text{
    position: relative;
    animation-name: movTextDiv;
    animation-duration: 1s;
    animation-delay: 1s;  
    animation-fill-mode: forwards;
}
  
@keyframes movTextDiv {
    from {
        left: 600px;
    }
    to {
        left: 0px;
        color:black;        
    }
}

.divA2{
    position: relative;
    animation-name: movDiv2;
    animation-duration: 1s;  
    animation-fill-mode: forwards;
    color:transparent;
}
  
@keyframes movDiv2 {
    from {
        right: 1300px;
    }
    to {
        right: 0px; 
    }
}

.divA2Text{
    position: relative;
    animation-name: movTextDiv2;
    animation-duration: 1s;
    animation-delay: 1s;  
    animation-fill-mode: forwards;
}
  
@keyframes movTextDiv2 {
    from {
        right: 600px;
    }
    to {
        right: 0px;
        color:black;
    }
}


.divA3{
    position: relative;
    animation-name: movDiv3;
    animation-duration: 1s;  
    animation-fill-mode: forwards;
    color:transparent;
}  
@keyframes movDiv3 {
    from {
        right: 1300px;
    }
    to {
        right: 0px; 
    }
}
.divA3Text{
    position: relative;
    animation-name: movTextDiv3;
    animation-duration: 1s;
    animation-delay: 1s;  
    animation-fill-mode: forwards;
}  
@keyframes movTextDiv3 {
    from {
        right: 600px;
    }
    to {
        right: 0px;        
        color: black;
    }
}

.precio{
    z-index: 30;
}
.precio:hover{
    z-index: 50;
    transform: scale(1.2);
}

.carta-animate{
    z-index:30;
    background-color: white;
}

.carta-animate:hover{
    z-index:50;
    transform: scale(1.15);
    box-shadow: 2px 2px 20px #161313;
}


.caja1{
    position: relative;
    animation-name: movcaja1;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}  
@keyframes movcaja1 {
    from {
        right: 800px;
    }
    to {
        right: 0px;
        color:black;   
    }
}

.caja2{
    position: relative;
    animation-name: movcaja2;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}  
@keyframes movcaja2 {
    from {
        left: 800px;
    }
    to {
        left: 0px;
        visibility: visible;        
    }
}


.carta-blog1{
    position: relative;
    animation-name: movcarta;
    animation-duration: 1.5s;
    
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

.carta-blog2{
    position: relative;
    animation-name: movcarta;
    animation-duration: 1.5s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

.carta-blog3{
    position: relative;
    animation-name: movcarta;
    animation-duration: 1.5s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
} 

@keyframes movcarta {
    from {
        right: 900px;
    }
    to {
        right: 0px;
        visibility: visible;        
    }
}

.carta-entrenamiento1{
    position: relative;
    animation-name: moventrenamiento;
    animation-duration: 1.5s;
    
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

.carta-entrenamiento2{
    position: relative;
    animation-name: moventrenamiento;
    animation-duration: 1.5s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

.carta-entrenamiento3{
    position: relative;
    animation-name: moventrenamiento;
    animation-duration: 1.5s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
.carta-entrenamiento4{
    position: relative;
    animation-name: moventrenamiento;
    animation-duration: 1.5s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
.carta-entrenamiento5{
    position: relative;
    animation-name: moventrenamiento;
    animation-duration: 1.5s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
.carta-entrenamiento6{
    position: relative;
    animation-name: moventrenamiento;
    animation-duration: 1.5s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
.boton-mostrar{
    position: relative;
    animation-name: movcarta;
    animation-duration: 1s;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
@keyframes moventrenamiento {
    from {
        top: 300px;
    }
    to {
        top: 0px;
        visibility: visible;        
    }
}

.titulo-animated{
    position: relative;
    animation-name: movcarta;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

#imagen-nosotros{
    position: absolute;
    animation-name: imagen;
    animation-delay: 0.5s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

@keyframes imagen {
    0% {
        opacity: 0;
    }
    70%{
        opacity: 0.4;        
    }
    100% {
        opacity: 1;
        visibility: visible;        
    }
}

#nosotros{
    position: relative;
    animation-delay: 0.5s;
    animation-name: moverse;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
#vision{
    position: relative;
    animation-name: moverse;
    animation-delay: 1.5s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
#mision{
    position: relative;
    animation-name: moverse;
    animation-delay: 2.5s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

@keyframes moverse {
    from {
        left: 500px;
    }
    to {
        left: 0;
        visibility: visible;        
    }
}

.texto-2{
    position: relative;
    animation-name: imagen;
    animation-delay: 1s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    visibility: hidden;
}

.pruebaimg{
    position: relative;
    animation-name: imagen;
    animation-delay: 2s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    visibility: hidden;
}
