@import url('https://fonts.googleapis.com/css?family=Heebo|Roboto+Slab');


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

img, video, canvas {
    max-width: 100%;
    }





.olho {
    background-image: url(file:///D:/ESAD.CR/FD/vertigo/3/img/vertigo.png);
    height: 100vh;
    width:100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    
}

.titulo {
    text-align: center;
    font-size: 7em;
    font-family: 'Roboto Slab', serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    word-break: break-all;
}        


.caixa{
    width: 100%;
    height: 100vh;
    background: black;
    position: relative;
    transition: transform 2s ease-in-out;
   
}


.olho:hover .caixa{
    transform: translate(0, -100vh);
}


.info{
    width: 100%;
    height: 100vh;
}

.texto {
        font-size: 1.5em;
        padding: 2em;
        padding-right: 50%;
        font-family:'Heebo', sans-serif;
        
}




.espiral {
    width: 25%;
    margin-left: 15vw;
    animation: spin 5s  linear infinite;
    
}


@keyframes spin{
    

    0% {

      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg) ;
    }
}

.caixa1 {
    background:rgb(158, 2, 2);
    width: 50%;
    height: 25em;
    position: relative;
    transition: transform 1s ease-in-out;
    transform: translate(0, -50vh);
}

.info:hover .caixa1 {
    transform: translate(100%, -50vh);
    

}

.texto1 {
    font-size: 1.5em;
        padding: 2em;
        
        top: 135vh;
        left: 50vw;
        font-family:'Heebo', sans-serif;
        position: absolute;
        color: white;
        text-align: justify;
}