body{

background:#fff5fa;

margin:0;

font-family:Poppins,sans-serif;

overflow-x:hidden;

}

/* HERO */

.hero{

padding:100px 20px;

text-align:center;

}

.hero h1{

font-size:60px;

color:#ff4d88;

}

.hero p{

font-size:22px;

color:#555;

}

/* TIMELINE */

.timeline{

width:90%;

max-width:1200px;

margin:auto;

position:relative;

}

.timeline::before{

content:"";

position:absolute;

left:50%;

width:5px;

height:100%;

background:#ff82ae;

transform:translateX(-50%);

}

.card{

width:45%;

background:white;

border-radius:25px;

padding:20px;

margin:60px 0;

box-shadow:0 15px 35px rgba(0,0,0,.1);

display:flex;

flex-direction:column;

opacity:0;

transform:translateY(80px);

transition:1s;

}

.card.left{

margin-right:auto;

}

.card.right{

margin-left:auto;

}

.card img{

width:100%;

border-radius:20px;

cursor:pointer;

transition:.4s;

}

.card img:hover{

transform:scale(1.05);

}

.fecha{

display:inline-block;

margin-top:20px;

color:#ff4d88;

font-weight:bold;

}

.card h2{

margin:15px 0;

color:#ff4d88;

}

.card p{

line-height:1.8;

}

/* REVEAL */

.reveal.active{

opacity:1;

transform:translateY(0);

}

/* MODAL */

/*=========================================
                MODAL
=========================================*/

.modal{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.92);

display:none;

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

z-index:9999;

overflow:hidden;

}

#modalImg{

max-width:80%;
max-height:80%;

border-radius:20px;

transition:.3s;

cursor:zoom-in;

box-shadow:0 15px 40px rgba(0,0,0,.5);

}

/*=========================================
            BOTÓN CERRAR
=========================================*/

.cerrar{

position:absolute;

top:25px;
right:35px;

font-size:45px;

color:white;

cursor:pointer;

z-index:10001;

}

/*=========================================
            BOTONES
=========================================*/

.prev,
.next{

position:absolute;

top:50%;

transform:translateY(-50%);

width:60px;
height:60px;

border:none;

border-radius:50%;

background:white;

font-size:28px;

cursor:pointer;

transition:.3s;

z-index:10000;

}

.prev{

left:30px;

}

.next{

right:30px;

}

.prev:hover,
.next:hover{

transform:translateY(-50%) scale(1.15);

background:#ff4d88;

color:white;

}

/*=========================================
            CONTADOR
=========================================*/

.contadorImagen{

position:absolute;

bottom:25px;

left:50%;

transform:translateX(-50%);

color:white;

font-size:20px;

background:rgba(0,0,0,.6);

padding:10px 20px;

border-radius:30px;

z-index:10000;

}

/* RESPONSIVE */

@media(max-width:900px){

.timeline::before{

display:none;

}

.card{

width:100%;

margin:40px 0;

}

.hero h1{

font-size:40px;

}

}