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

body{
font-family:'Playfair Display',serif;
}

.hero{
position:relative;
height:100vh;
background-image:url("images/Backround.jpg");
background-size:cover;
background-position:center;
display:flex;
justify-content:center;
align-items:center;
}

.overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
}

.content{
position:relative;
text-align:center;
color:white;
}

h1{
font-size:1rem;
letter-spacing:4px;
text-transform:uppercase;
cursor:pointer;
transition:all .4s ease;
}

h1:hover{
animation:float 2s ease-in-out infinite;
}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-12px)}
100%{transform:translateY(0)}
}

/* contenedores */

#iconContainer{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:3;
}

#gifContainer{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:2;
}

/* iconos */

.icon{
position:absolute;
width:20px;
cursor:pointer;
pointer-events:auto;
transition:transform 10s ease;
}

.icon img{
width:100%;
}

/* gifs */

.gif{
position:absolute;
width:150px;
height:230px;
pointer-events:none;
}
/* texto flotante */

.textoFlotante{
position:fixed;
font-size:12px;
color:white;
opacity:0.8;
pointer-events:none;
white-space:nowrap;

animation-duration:20s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}

/* movimiento horizontal */

.moverX{
animation-name:moverX;
}

@keyframes moverX{

0%{transform:translateX(-200px)}
100%{transform:translateX(120vw)}

}

/* movimiento vertical */

.moverY{
animation-name:moverY;
}

@keyframes moverY{

0%{transform:translateY(-200px)}
100%{transform:translateY(120vh)}

}

/* Icono activo */
.icon.activo img {
filter:brightness(2);
transform:scale(1.1,1.1);
transition:all 1s ease;
}

/* animacion aparecer gif*/