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

img{
    display: block;
    width: 100%;
    height: auto;
}




/* ------------------------------------------------------ cores e fonts---------------------------------------------------------- */

@font-face {
    font-family: Tomorrow;
    src: url(Tomorrow/Tomorrow/Tomorrow-Regular.ttf);
}

@font-face {
    font-family: Tomorrowbold;
    src: url(Tomorrow/Tomorrow/Tomorrow-Bold.ttf);
}

@font-face {
    font-family: Tomorrowmedium;
    src: url(Tomorrow/Tomorrow/Tomorrow-Medium.ttf);
}

@font-face {
    font-family: Tomorrowlight;
    src: url(Tomorrow/Tomorrow/Tomorrow-Light.ttf);
}

@font-face {

     font-family: sweetsans; 
    src: url(SweetSansPro/44862.otf);
    font-weight: normal;
}

@font-face {

     font-family: sweetsans;
    src: url(SweetSansPro/44874.otf);
    font-weight: 800;
}

@font-face {

     font-family: sweetsans;
    src: url(SweetSansPro/44868.otf);
    font-weight: 400;
}






:root{
    --branco:hsl(0, 0%, 100%);
    --sitebackground:hsl(0, 100%, 2%);
    --navcolor: hsl(40, 100%, 50%);
    --texto:hsl(0, 0%, 100%);
   --layerblur:hsl ( 235, 45%, 17%);
   --bkcolorinfo: hsl( 239, 33%, 28%);
    --bkinst: hsl( 240, 100%, 99%,15%);
    --azul: hsl( 196, 100%, 50%);
    --vermelho: hsl( 0, 100%, 50%);
   
   
    
}




@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}


@keyframes popup{
   100% {opacity: 1;  transform: translateY(0) scale(1);}
    
}



@keyframes animatetop {
    from {
        bottom: -300px;
        opacity: 0;
    }

    to {
        bottom: 0;
        opacity: 1;
    }
}













/* ------------------------------------------------------ cores e fonts---------------------------------------------------------- */

/* ------------------------------------------------------ h´s e p´s---------------------------------------------------------- */

h1{
    font-family: tomorrow;
    font-size: 120px;
    font-weight: 700;
    line-height: 112px;
    letter-spacing: 10%;
    color: var(--texto);
}

h2{
     font-family: tomorrow;
    font-size: 80px;
    font-weight: 500;
    line-height: 90px;
    letter-spacing: 10%;
    color: var(--texto);
}

h3{
     font-family: sweetsans;
    font-size: 40px;
    font-weight: normal;
    line-height: 70px;
    letter-spacing: 30%;
    color: var(--texto);
}

p{
    font-family: sweetsans;
    font-size: 32px;
    font-weight: 400;
    line-height: 42px;
    letter-spacing: 2%;
    color: var(--texto); 
}

.caption{
    font-size: 16px;
    line-height: 32px;
   
}


/* ------------------------------------------------------ h´s e p´s---------------------------------------------------------- */
 
/* ------------------------------------------------------ grid e outros em comum---------------------------------------------------------- */

body{
    background-color: var(--sitebackground);
}

.banda{
    width: 100%;
}


.orange{
    background-color: var(--navcolor);
}


.max{
    width: 100%;
    max-width: 1200px;
     margin: 0 auto;
}


.grid{
    display: grid;
  
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;
}

/* ------------------------------------------------------ grid e outros em comum---------------------------------------------------------- */


/* ------------------------------------------------------ nav ---------------------------------------------------------- */


nav{
    background-image: url(img/nav_fundo.jpg);
    background-position: center;
    grid-column: 1/13;
    grid-row: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 130px;
    padding-left: 39px;
    padding-right: 39px;
   

    
}

nav a{

     text-decoration: none;
    color: var(--branco);
    font-size: 20px; 
}


nav a:hover{
    color: var(--sitebackground);
}

#btheader{
    display: flex;
    gap: 24px;
    font-family: Tomorrowmedium;
   

}

#bgmenu{
    display: none;
}

 #bgmiolo {
        display: block;
        transition: height .5s;
        background-color: var(--navcolor);
        position: fixed;
        z-index: 100;
        width: 100%;
        height: 0;
        overflow: hidden;
        top: 120px;
        left: 0;
    }


 #btsaida{
      display: none;
    }
     
 #btx{
      display: none;
    }


 #miolo{
        display: flex;
        text-align: center;
        margin-top: 100px;
        gap: 50px;
        flex-direction: column;
        
    }


    #miolo a{
        text-decoration: none;
        color: var(--branco);
        font-family: tomorrow;
        font-size: 30px;
        font-weight: bold;
       
    }


    .open{
        height: 100vh !important;

    }

    .noscroll{
        overflow: hidden;
    }





/* ------------------------------------------------------ nav ---------------------------------------------------------- */



/* ------------------------------------------------------ footer ---------------------------------------------------------- */


footer a:hover{
    transform: scale(1.3);
}




footer{

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;
    grid-template-rows: 730px repeat(7,150px);
    position: relative;
    top:470px;
     background-image: url(img/galaxia.jpg);
     background-repeat: no-repeat;
     background-position: top;
     background-size: cover;
    z-index: 0;

}





#ftbk2{
    grid-column: 1/13;
    grid-row: 3/10; 
    z-index: -5;
    position: relative;
    align-self: flex-end;
    justify-self: center;
  
}

#ftbk3{
    grid-column: 1/13;
    grid-row: 1/10;
    z-index: -10;
    justify-self: center;
    align-self: center;
  

}


#ftpt1 h1{
     color: var(--branco);
    font-family: tomorrowbold;
    font-size: 48px;
    line-height: 70px;
    letter-spacing: 10%;
    text-align: center;
    
}


#ftpt1 h2{
     color: var(--branco);
    font-family: sweetsans;
    font-size: 24px;
    letter-spacing: 30%;
    line-height: 50px;
    text-align: center;
    
}


#ftpt1{

    grid-row: 2;
   
    justify-self: center;
    grid-column: 1/13;
    position: relative;
    bottom: 75px;
    
    
}





#ftpt2{
    display: flex;
    width: 258px;
    justify-content: space-around;
   align-self: center;
    flex-wrap: nowrap;
    grid-row: 3;
     justify-self: center;
    grid-column: 1/13;
    
    
  
}

#ftpt3{
    grid-row: 4;
     justify-self: center;
    grid-column: 1/13;
     align-self: center;
    
    
     
}

#ftpt4{
    grid-row: 5;
     justify-self: center;
    grid-column: 1/13;
     align-self: center;
    
  
}


#ftpt5{
   display: flex;
    grid-row: 6;
     justify-self: center;
    grid-column: 1/13;
     flex-direction: column;
     text-align: center;
     align-self: center;
  

}

#ftpt5 a{
    text-decoration: none;
    color: #ffff;
    font-family: sweetsans;
    
    
}

#ftpt6{
    grid-row: 9;
     justify-self: center;
     text-align: center;
    grid-column: 1/13;
     align-self: center;
}

#ftpt6 h1{

    font-family: sweetsans;
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 2%;
    color: #ffff;
    text-align: center;
    margin-bottom: 10px;
    text-align: center;

}


#ftpt6 h2{
     font-family: sweetsans;
    font-size: 14px;
    line-height: 32px;
    letter-spacing: 2%;
    color: #ffff;
    text-align: center;
}

#paddingbt{
    padding-bottom: 20px;
}

/* ------------------------------------------------------ footer ---------------------------------------------------------- */


/* ------------------------------------------------------ CTA ---------------------------------------------------------- */


.cta{
   display: flex;
    background-image: url(img/cta.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    grid-column: 1/13;
     text-align: center;  
     width: 100%;                                                                                                                                  
    max-width: 372px;
     height: 72px;
     justify-content: center;
     align-items: center;
     font-family: tomorrowbold;
     color: #ffff;
     font-size: 24px;
     cursor: pointer;
     margin: 0 auto;
     padding-top: 8px;
}

.cta:hover {
    filter: saturate(5%);
}

/* ------------------------------------------------------ CTA ---------------------------------------------------------- */


/* ------------------------------------------------------ 890 ---------------------------------------------------------- */


@media only screen and (max-width: 900px){
    .hide{
        display: none;
    }

    #bgmenu{
        display: block;
    }

   


  

}



/* ------------------------------------------------------ 1000 ---------------------------------------------------------- */

@media only screen and (max-width: 1000px){
     h1{
        font-size: 90px !important;
        line-height: 90px !important;
    }


}

/* ------------------------------------------------------ 750 ---------------------------------------------------------- */

@media only screen and (max-width: 745px){
     h1{
        font-size: 70px !important;
        line-height: 90px !important;
    }



   h2{
        font-size: 40px !important;
        line-height: 40px !important;
    }

    h3{
        font-size: 26px !important;
        line-height: 40px !important;
    }


    p{
          font-size: 30px !important;
        line-height: 30px !important;
    }

    #gridheader div {
   
    margin-top: 230px;
  }
}

/* ------------------------------------------------------ 590 ---------------------------------------------------------- */

@media only screen and (max-width: 590px){
  
  
  
      #violino {
        top: 100px;
    }

  
  
  
    h1{
        font-size: 55px !important;
        line-height: 80px !important;
    }

    h3{
        font-size: 20px !important;
        line-height: 35px !important;
   
 
    }

    h2{
        font-size: 25px !important;
        line-height: 40px !important;
    }

      p{
          font-size: 25px !important;
        line-height: 25px !important;
    }


    #textorachado {
    
    margin-top: 100px;
   
  }



}

/* ------------------------------------------------------ 730 ---------------------------------------------------------- */

@media only screen and (max-width: 740px){
 .caption{
        font-size: 12px !important;
        line-height: 20px !important;
   }

}                                                                                                                                                                                                                                                                                 



/* ------------------------------------------------------ 440 ---------------------------------------------------------- */

@media only screen and (max-width: 440px){

    
    h1{
        font-size: 40px !important;
        line-height: 40px !important;
    }

    h3{
        font-size: 10px !important;
        line-height: 20px !important;
    }

    h2{
        font-size: 26px !important;
        line-height: 20px !important;
    }


    p{
          font-size: 18px !important;
        line-height: 26px !important;
    }

    .espacoentret{
        margin-top: 26px;
    }

    .espacoentreb {
    margin-bottom: 26px;
  }

   .part1{
        margin-bottom: 26px;
   }

   .part2{
    margin-top: 26px;
   }

   #textorachado{
    margin-top: 50px !important;
    height: 202px !important;
   }

  


   .cta{
    grid-column: 2/12;

      font-size: 16px !important;
        line-height: 20px !important;
     
   }
    
   footer{
        grid-template-rows: 330px repeat(7, 150px) !important;
        top: 200px;
    }
    
    
    
  
   

   #ftpt1 h2{
    font-size: 10px !important;
        line-height: 20px !important;
   }


   #ftpt1{
    bottom: 0px;
    align-self: center;
   }


   #ftbk3 {
   
    grid-row: 1 / 8;
  
  }












}
















/* ------------------------------------------------------ 500 ---------------------------------------------------------- */