* {
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/44870.otf);
    font-weight: 800;
}

: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%);
    
}

/* ------------------------------------------------------ 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: 700;
    line-height: 70px;
    letter-spacing: 30%;
    color: var(--texto);
}

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




/* ------------------------------------------------------ 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-color: var(--navcolor);
    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; 
}


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

}

#bgmenu{
    display: none;
}





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

    #miolo{
        display: none;
    }       



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



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


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); 
    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;
     
    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;

}


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

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


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


.cta{
   display: flex;
    background-image: url(img/cta.svg);
    background-repeat: no-repeat;
    grid-column: 1/13;
     justify-self: center;
     text-align: center;                                                                                                                                    
     width: 372px;
     height: 72px;
     justify-content: center;
     align-items: center;
     font-family: tomorrowbold;
     color: #ffff;
     font-size: 24px;
     position: relative;
     cursor: pointer;
}

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

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

@media only screen and (max-width: 890px) {
  #bgmenu{
    display: block;

    }
    
    .hide{
        display: none;
    }

    #gridheader div h1{
        font-size: 90px;
        line-height: 90px;
        margin-bottom: 15px;
    }


     #gridheader div h3{
        font-size: 40px;
        line-height: 60px;
    }


    #imgheader{
   
    grid-column: 2/12;

    
    }

    


    #bgmiolo{

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

    .open{
        height: 100vh !important ; 
    }

    #btsaida{
        display: flex;
        justify-self: right;
        margin-right: 20px;
        margin-top: 20px;
        width: 100%;
    }
     
    #btx{
       display: block;
        margin-left: auto;
        margin-top: 30px;
        width: 32px;
        height: 32px;
    
    }


    #miolo a{
        text-decoration: none;
        color: var(--branco);
    }

    #miolo{
                display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;
        gap: 60px;
        font-family: tomorrow;
        
        font-size: 30px;
        margin-top: 60px;
    }       




    

}

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

    #gridheader div h1{
        font-size: 70px;
        line-height: 70px;
        margin-bottom: 15px;
    }


     #gridheader div h3{
        font-size: 30px;
        line-height: 60px;

        
    }












}















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