.box {
    transform: translateY(100px);
}

.slide-top {
    -webkit-animation: slide-top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-top {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes slide-top {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}

/* nav-comite */
@-webkit-keyframes fade-in-fwd {
    0% {
        -webkit-transform: translateZ(-80px);
        transform: translateZ(-80px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes fade-in-fwd {
    0% {
        -webkit-transform: translateZ(-80px);
        transform: translateZ(-80px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

.fade-in-fwd {
    -webkit-animation: fade-in-fwd 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
            animation: fade-in-fwd 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.fade-in-fwd-index {
    -webkit-animation: fade-in-fwd 1.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
            animation: fade-in-fwd 1.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

/* SLIDE DESDE LA DERECHA */
.slide-in-right {
    -webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        /* opacity: 0; */
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        /* opacity: 1; */
    }
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        /* opacity: 0; */
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        /* opacity: 1; */
    }
}


/* ----------------------- */


/* SLIDE DESDE ARRIBA CON ALTURA (para desplazar elementos al desaparecer) */

.slide-in-top-h {
    -webkit-animation: slide-in-top-h 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-top-h 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-in-top-h {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        /* opacity: 0; */
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /* opacity: 1; */
    }
}

@keyframes slide-in-top-h {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        /* opacity: 0; */
        height: 0px;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /* opacity: 1; */
        /* valor height temporal */
        height: 550px;
    }
}


/* ------------------- *
/* SLIDE DESDE ARRIBA */

.slide-in-top {
    -webkit-animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        /* opacity: 0; */
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /* opacity: 1; */
    }
}

@keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        /* opacity: 0; */
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /* opacity: 1; */
        /* valor height temporal */
    }
}


/* ------------------- */


/* SLIDE IZQUIERDO */

.slide-in-left {
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        /* opacity: 0; */
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        /* opacity: 1; */
    }
}

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        /* opacity: 0; */
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        /* opacity: 1; */
    }
}


/* ---------------- */

/* SLIDER TITULAR */

    .slider-titular{
        animation: abrir-desde-dentro 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards ;
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        border-radius: 5px 15px 15px 5px;
    }
    .slider-entradilla{
        animation: abrir-desde-dentro 1.2s .6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); 
        background: #422f177a;
        border-radius: 5px 5px 15px 15px;
        border-top: #2E86C1 3px solid;
    }
    .portadaEntradilla {
        color:#0000;
        background:
            linear-gradient(-90deg, white 2px,#0000 0) 10px 0,
            linear-gradient(white 0 0) 0 0;
        background-size: calc(var(--n)*1.8ch) 200%;
        -webkit-background-clip: padding-box,text;
        /*background-clip:padding-box,text;*/
        background-repeat: no-repeat;
        animation: t calc(var(--n)*.1s) steps(var(--n)) forwards;
        animation-timing-function: steps(var(--n));
    }

    @keyframes t{
        from {background-size:0 200%}
    }
    .slider-imagen{
        animation: fade-in 2s .5s cubic-bezier(0.19, 1, 0.22, 1) forwards, img-zoom 10s forwards;
        opacity: 0;
        transform: scale(1.1);
              
    }
    @keyframes img-zoom {
        to{
            transform: scale(1);
        }
    }
    @keyframes fade-in{
        from{
            opacity: 0;
        }
        to{
            opacity: 1;
        }

    }
    @keyframes abrir-desde-dentro {

        from{
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        }
        to{
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
        
    } 
     

/* - */

.animacion {
    animation: animacion 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes animacion {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.animacion.reverse {
    animation-direction: reverse;
}


/* MENU SECUNDARIO SOY GOLFISTA */

.scale-in-ver-top {
    -webkit-animation: scale-in-ver-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: scale-in-ver-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes scale-in-ver-top {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
}

@keyframes scale-in-ver-top {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
}


/* CIERRE */

.slide-in-bottom {
    -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        /* opacity: 0; */
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /* opacity: 1; */
    }
}

@keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        /* opacity: 0; */
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /* opacity: 1; */
    }
}


/*  */


/*  */

.scale-up-ver-top {
    -webkit-animation: scale-up-ver-top 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-ver-top 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


/* ----------------------------------------------
 * Generated by Animista on 2021-5-26 9:1:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */


/**
 * ----------------------------------------
 * animation scale-up-ver-top
 * ----------------------------------------
 */

@-webkit-keyframes scale-up-ver-top {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }
}

@keyframes scale-up-ver-top {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }
}


/*  */


/*  */


/* REVERSES */

.scale-in-ver-top.reverse {
    animation-direction: reverse;
}

.slide-in-top.reverse {
    animation-direction: reverse;
}

.slide-in-top-c.reverse {
    animation-direction: reverse;
}

.slide-in-top-h.reverse {
    animation-direction: reverse;
}

.slide-in-left.reverse {
    animation-direction: reverse;
}

.slide-in-right.reverse {
    animation-direction: reverse;
}

.modal.reverse {
    animation-direction: reverse;
}

.modalImg.reverse {
    animation-direction: reverse;
}

.slide-in-bottom.reverse {
    animation-direction: reverse;
}

.fade-in-fwd.reverse {
    animation-direction: reverse;
}

.slide-in-bottom.reverse {
    animation-direction: reverse;
}

.scale-up-ver-top.reverse {
    animation-direction: reverse;
}


/* DESPLAZAMIENTO EN Y */

.slide-in-top {
    -webkit-animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        /* opacity: 0; */
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /* opacity: 1; */
    }
}

@keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        /* opacity: 0; */
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /* opacity: 1; */
    }
}


/* ------------------- */


/* DESPLAZAMIENTO EN Y corto */

.slide-in-top-c {
    -webkit-animation: slide-in-top-c 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-top-c 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-in-top-c {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-top-c {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}


/* ------------------- */


/* ------- */


/* ------- CLIP PATHS------------ */


/* BG-CALENDARIO */
/*

.corte-inicio {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

.corte-inf-triangulo {
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
}

.corte-inf-10 {
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
}
*/

/* ------------- */


/* --------------------- */


/* MODALES */

.modal {
    animation: modal 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes modal {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.8;
    }
}

.modal-40 {
    animation: modal 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes modal {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.4;
    }
}

.modalImg {
    animation: modalImg 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes modalImg {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}