.sec1{
    min-height: 1200px;
}
.sec2{
    min-height: 100vh;
    background:#F8F9FA;

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    
    transition: .5s;
    z-index: 0;


}

.targetas{
    position: relative;

    width: 550px;
    min-height: 550px;
    cursor: pointer;


/* overflow: hidden; */

}
.targetas .targeta{
    position: absolute;
    top: calc(50% - 200px);
    left: 50%;
    width: 300px;
    height: 400px;
    background-color:#262626;
    border-radius: 10px;
    transform: translateX(-50%) translateY(calc(20px * var(--i))) rotate(40deg) skew(-20deg,-10deg) scale(0.4);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    z-index: calc(-1* var(--i));
    transition: .5s;
}
.targetas .targeta:nth-child(2){
    opacity: .8;
}
.targetas .targeta:nth-child(3){
    opacity: .6;
}
.targetas:hover .targeta{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    opacity: 1;
    transform: translateX(calc(-50% + calc(350px * var(--i)))) translateY(-50%) rotate(0deg) skew(0deg,0deg) scale(1);
}
.sec3{
    height: 130vh;
    background: url(../Imagenes/sec4.png) #F8F9FA;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;

    display: flex;
    justify-content: center;
    align-items: center;

}
.sec3 > h1{
    font-size: 80px;
    letter-spacing: 10px;
    font-family: 'Anton', sans-serif;
    color: #F8F9FA;
}

.bola {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(-50%,-50%);
    font-family: 'Montserrat', sans-serif;
}

.bola1{
    top: 450px;
    left: calc(50% - 300px);
}
.bola2{
    top: 650px;
    left: calc(50% + 300px);
}
.bola3{
    top: 50%;
    left: 50%;
}
.contenido1{
    padding: 60px;
    box-sizing: content-box;
    z-index: 10;
    text-align: center;
}
.contenido2{
    padding: 60px;
    box-sizing: content-box;
    z-index: 10;
    text-align: center;
}
.cuadrado{
    position: relative;
    width: 400px;
    height: 400px;
    display: flex;
    justify-content:center;
    align-items: center;
}
.cuadrado span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 110%;
    height: 110%;
    border: 1px solid #262626;
}
/* .cuadrado span{
    border-radius: 38% 62% 67% 37% / 41% 44% 56% 59%; 
} */
.cuadrado span:nth-child(1){
    border-radius: 38% 62% 67% 37% / 41% 44% 56% 59%; 

}
.cuadrado span:nth-child(2){
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; 
}
.cuadrado span:nth-child(3){
    border-radius: 38% 60% 63% 37% / 41% 44% 56% 59%; 
}
.bola3 >.cuadrado span{

    width: 120%;
    height: 120%;
}
.contenido > button{
    z-index: 10;
}
.cuadrado span:nth-child(1){
    animation: giro 10s linear infinite;
}
.cuadrado span:nth-child(2){

    animation: giro2 5s linear infinite;
}
.cuadrado span:nth-child(3){
    animation: giro 7s linear infinite;

}
.contenido-tar{
    color: #F8F9FA;
    position: relative;
    height: 100%;
    opacity: 0;
    transition: .5s;

    /* transition-delay: 1s; */
    transform: translateY(50px);
    z-index: 10;
}
.targetas:hover .targeta .contenido-tar{
    opacity: 1;
    transition-delay: calc(0.2s * var(--j));
    transform: translateY(0);
    /* background: red; */
}
@keyframes giro {
    0%{
        transform:translate(-50%,-50%) rotate(0deg);
    }
    100%{
        transform:translate(-50%,-50%) rotate(360deg);
    }
}
@keyframes giro2 {
    0%{
        transform:translate(-50%,-50%) rotate(360deg);
    }
    100%{
        transform:translate(-50%,-50%) rotate(0deg);
    }
}
@media only screen and (max-width: 1100px) {
    .bola1{
        top: 350px;
        left:50%;
    }
    .bola2{
        top: 850px;
        left:50%;
    }
    .sec1{
        min-height: 1200px;
    }
}
@media only screen and (max-width: 600px) {
    .cuadrado{

        width: 100vw;
        height: 100vw;

        overflow: hidden;
    }
    .cuadrado span{
        width: 90%;
        height: 80%;
    }
    .container-fluid{
        overflow: hidden;
    }
    .sec3{
        height: 100vh;

    }
}
@media (max-width: 990px) {

    .bola3{
        display: none;
    }
    .targetas .targeta, .targetas:hover .targeta, .targetas{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        z-index: 1;
        opacity: 1 !important;
        transform: initial;
        top: 0;
        left:  0;
    }
    .targetas .targeta, .targetas:hover .targeta{
        margin: 20px;
    }
    .targetas{
        width: 100%;
        height: 100%;
    }
    .targeta{
        top: initial;
        left: initial;
        position: initial;
        display: block;

    }
    .contenido-tar{
        opacity: 1;
        transform: translateY(0);
    }
    .targetas:hover .targeta .contenido-tar{
        opacity: 1;
        transition-delay:initial;
        transform: translateY(0);
        /* background: red; */
    }
    

    }