body {
    background-image: url('background.jpg');
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
    width: 100%;
    overflow: hidden;
  }

.logo {
    position: absolute;
    top: 426px;
    left: 237px;
    width: 643px;
    height: 124px;
}


.email{
    position:absolute;
    top: 550px;
    left: 237px;
    width: 333px;
    height: 64px; 
}

.email-mobile{
    display: none;
}

.hoverable-text:hover {
    fill:#9DECFD;
    cursor:default;
}

.social{
    position: absolute;
    top: 617px;
    left: 237px;
    width: 37px;
    height: 37px;
    display: flex;
}

.social a:hover #Caminho_215 {fill:#9DECFD}

.social a:hover #Caminho_211 {fill: #9DECFD}

.social a:hover #Caminho_212 {fill: #9DECFD}

.social a:hover #Caminho_213 {fill: #9DECFD}

.social a:hover #Caminho_214 {fill: #9DECFD}



.instagram{
    margin-left: 35px;
    margin-right: 35px;
}

.overlay-container{
    position:absolute;
    top: -411.58935546875px;
    left: 455px;
    width: 2123px;
    height: 1945px;
    overflow: hidden;
}


.overlay1, .overlay2, .overlay3 {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.4s ease-in-out;
  }
  

  .overlay1 {
    padding-top: 125px;
    padding-left: 235px;
  }
  
  .overlay2 {
    padding-top: 250px;
    padding-left: 450px;
  }
  
  .overlay3 {
    padding-top: 210px;
    padding-left: 650px;
  }

  .overlay-container:hover .overlay1 {
    
    transform: rotate(30deg);
    top: 100px;
    left: 15px;
    transform-origin:  center;
   
    
  }

  .overlay-container:hover .overlay2 {
    
    transform: rotate(-60deg) scale(1.05);

    transform-origin: center;
    

    top: 300px;
    left: -20px !important;
    

  }

  .overlay-container:hover .overlay3  {
  
    transform: rotate(-90deg);

    transform-origin: center;
    

    top: 650px;
    left: 200px;
  

  }

  .overlay-mobile{
    display: none;
  }

.site-status{
    color: #9DECFD;
    position: absolute;
    top: 820px;
    left: 237px;
    width: 384px;
    height: 91px;
}

.status-mobile{
    display: none;
}

@media (max-width: 480px) {

    body {
        background-image: url('backgroundMobile.png');
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }

    .logo {
        top:10%; 
        left: 5vw;
        width: 248px; 
        height: 48px;
    }

    .logo img {
        height: 100%;
        width: 100%;
    }
    
    .email {
        display: none; 
    }


    .email-mobile {
        position: relative;
        display: block;
        top: 15%;  
        left: 3vw;
        width: 166px; 
        height: 24px;
    }

    .email-mobile img {
        width: 100%;
        height: 100%;
    }

    .social {
        position: relative;
        top: 15%; 
        left: 5vw;
    }
    
    .social a svg {
        width: 6vw;  
        height: 6vh;  
        margin: 0 -2vw;
    }
      
    .instagram {
        margin-left: 7vw;
        margin-right: 7vw;
    }

    .social a #Caminho_215 {fill:#9DECFD}

    .social a #Caminho_211 {fill: #9DECFD}
      
    .social a  #Caminho_212 {fill: #9DECFD}
      
    .social a  #Caminho_213 {fill: #9DECFD}
      
    .social a #Caminho_214 {fill: #9DECFD}
    
    .site-status {
       display: none;
    }

    .status-mobile {
        display: block;
        position: relative;
        top:70%;  
        width:50vw;
        height: 10vh;
        left: 5vw;
    }

    .status-mobile img {
        width: 100%;
        height: 100%;
    }
    
    .overlay-container {
        display: none;
    }

    .overlay-mobile {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 1024px)   {

    body {
        background-image: url('background.jpg');
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }

    .logo {
        top: 10%; 
        left: 10vw;
        width: 50vw; 
        height: 7vh;
    }

    .logo img {
        height: 100%;
        width: 100%;
    }
    
    .email {
        display: block; 
        position: relative;
        top: 20%;  
        left: 10vw;
        width: 40vw; 
        height: 5vh;
    }

    .email-mobile {
        display: none; 
    }

    .social {
        position: relative;
        top: 22%; 
        left: 10vw;
    }
    
    .social a svg {
        width: 5vw;  
        height: 5vh;  
        margin: 0 1vw;
    }
      
    .instagram {
        margin-left: 5vw;
        margin-right: 5vw;
    }

    .social a #Caminho_215 {fill:#9DECFD}

    .social a #Caminho_211 {fill: #9DECFD}
      
    .social a  #Caminho_212 {fill: #9DECFD}
      
    .social a  #Caminho_213 {fill: #9DECFD}
      
    .social a #Caminho_214 {fill: #9DECFD}
    
    .site-status {
       display: block;
       position: relative;
       top: 60%;  
       width: 60vw;
       height: 15vh;
       left: 10vw;
    }

    .status-mobile {
        display: none;
    }

    .overlay-container {
        display: block;
        position: absolute;
        left: 0%;
       
    }

    .overlay-mobile {
        display: none;
    }
}


/*@media (max-width: 480px) {*/

/*    body{*/
/*        background-image: url('backgroundMobile.png');*/
/*        height: 100vh;*/
/*        width: 100%;*/
/*        overflow: hidden;*/
/*    }*/

/*    .logo {*/
/*        top:100px;*/
/*        left: 40px;*/
/*        width: 100%; */
/*        height: 50px;*/
/*        max-width: 300px; */
/*        overflow: hidden;*/
/*    }*/

/*    .logo img {*/
/*        height: 47px;*/
/*        width: 255px;*/
/*    }*/
    
/*    .email {*/
/*        display: none; */
/*    }*/


/*    .email-mobile{*/
/*        position: relative;*/
/*        display: block;*/
/*        top: 150px;*/
/*        left: 30px;*/
/*        width: 100%; */
/*        height: 50px;*/
/*        max-width: 200px; */
/*        overflow: hidden;*/
/*        margin: 0;*/
/*    }*/

/*    .email-mobile img{*/
        
/*        width: 170px;*/
      
/*    }*/

/*    .social {*/
/*        position: relative;*/
/*        top: 160px;*/
/*        left: 55px;*/
/*    }*/
    
/*    .social a svg {*/
/*        width: 25px;  */
/*        height: 25px;  */
/*        margin: 0 -25px;*/
/*    }*/
      
/*    .instagram{*/
/*        margin-left: 40px;*/
/*        margin-right: 40px;*/
/*    }*/

/*    .social a #Caminho_215 {fill:#9DECFD}*/

/*    .social a #Caminho_211 {fill: #9DECFD}*/
      
/*    .social a  #Caminho_212 {fill: #9DECFD}*/
      
/*    .social a  #Caminho_213 {fill: #9DECFD}*/
      
/*    .social a #Caminho_214 {fill: #9DECFD}*/
      
/*    .site-status {*/
/*       display: none;*/
/*    }*/

/*    .status-mobile{*/
/*        display: block;*/
/*        position: relative;*/
/*        top:580px;*/
/*        width:200px;*/
/*        height: 85px;*/
/*        left: 40px;*/
/*        bottom: 0;*/
/*        overflow: hidden;*/
/*    }*/

/*    .status-mobile img{*/
/*        width: 100%;*/
/*        height: 80px;*/
/*    }*/
    
/*    .overlay-container{*/
/*        display: none;*/
/*    }*/

/*    .overlay-mobile{*/
/*        position: absolute;*/
/*        top: 50%;*/
/*        left: 50%;*/
/*        transform: translate(-50%, -50%);*/
/*        display: block;*/
/*    }*/
    
/*        .overlay-mobile img{*/
/*        position: absolute;*/
/*        width: 545px;*/
/*        height: 488px;*/
/*        top: 50%;*/
/*        left: 50%;*/
/*        transform: translate(-50%, -50%);*/
/*        display: block;*/
/*    }*/


}