/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
user-select:none;
-webkit-tap-highlight-color:transparent;
overflow:hidden;
font-family:sans-serif;
}

/* FUENTES */

@font-face{
font-family:"Great Vibes";
src:url(../fonts/GreatVibes-Regular.ttf);
}

@font-face{
font-family:"Trajan";
src:url(../fonts/trajan-bold.otf);
}

/* SLIDES */

.mySlides{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
}

/* IMAGEN FONDO */

.mySlides img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
}

/* CONTENEDOR TEXTO */

.texto-1,
.texto-2{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
text-align:center;
color:#fff;
}

/* NUESTRA BODA */

.texto-1 h4{
position:absolute;
top:12%;
left:50%;
transform:translateX(-50%);
font-family:"Trajan";
font-size:clamp(16px,3vw,28px);
color:#434343;
letter-spacing:2px;

animation:fadeUp 2s ease;
}

/* NATALIE & BRUNO */

.texto-1 h2{
position:absolute;
top:20%;
left:50%;
transform:translate(-50%);
font-family:"Great Vibes";
font-size:clamp(36px,6vw,70px);
color:#d1ae65;
font-weight:500;
line-height:1.2;

animation:fadeUp 2.5s ease forwards;
}

/* CEREMONIA / RECEPCION */

.texto-2 h1{
position:absolute;
top:15%;
left:50%;
transform:translateX(-50%);
font-family:"Trajan";
font-size:clamp(22px,4vw,40px);
color:#434343;
letter-spacing:2px;

animation:fadeUp 1.5s ease;
}

.texto-2 h3{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-family:"Great Vibes";
font-size:clamp(24px,4vw,40px);
color:#d1ae65;
line-height:1.3;

animation:fadeUp 2s ease;
}

.texto-2 h5{
position:absolute;
bottom:12%;
left:50%;
transform:translateX(-50%);
font-family:"Trajan";
font-size:clamp(12px,2vw,18px);
color:#434343;
text-decoration:underline;
cursor:pointer;

animation:fadeUp 3s ease;
}

/* DOTS LATERALES */

.dots{
position:fixed;
right:20px;
top:60%;
transform:translateY(-50%);
z-index:5;
display:flex;
flex-direction:column;
gap:15px;
}

.dot1,.dot2,.dot3,.dot4{
width:46px;
height:46px;
border-radius:50%;
background-size:cover;
background-position:center;
border:2px solid #d1ae65;
cursor:pointer;
transition:transform .2s ease;
}

.dot1:hover,
.dot2:hover,
.dot3:hover,
.dot4:hover{
transform:scale(1.15);
}

/* ICONOS */

.dot1{background-image:url(../img/iconos/pareja-de-boda.png);}
.dot2{background-image:url(../img/iconos/iglesia.png);}
.dot3{background-image:url(../img/iconos/copas-de-vino.png);}
.dot4{background-image:url(../img/iconos/mesa.png);}

/* ANIMACION SLIDES */

.fade{
animation:fadeSlide 1s ease;
}

@keyframes fadeSlide{
from{opacity:0}
to{opacity:1}
}

/* ANIMACION TEXTO */

@keyframes fadeUp{

from{
opacity:0;
transform:translate(-50%,40px);
}

to{
opacity:1;
transform:translate(-50%,0);
}

}

/* RESPONSIVE */

@media(max-width:768px){

.texto-1 h4{
top:10%;
}

.texto-1 h2{
top:55%;
}

.texto-2 h1{
top:12%;
}

}