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

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

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


 body{
    background-color:var(--branco);
    width: 100%;
 }


:root{
    --rosa: #FC7675;
    --roxo:#726BB9;
    --verde:#17949B;
    --amarelo:#FFE88D;
    --cinza_claro:#C7B1B1;
    --cinza_escuro:#786A69;
    --preto:#262626;
    --branco:#FFFAFA;
    --amarelo_claro:#FFF9E0;
    --roxo_claro:#CECEE9;
    --roxo_escuro:#454496;
}

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

.grid12_especial_inicio{
    display: grid;
    grid-template-columns: repeat(12, 1fr);

}

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

.banda{
    width: 100%;
}

.preto{
    background-color:var(--preto);
}

.roxo{
    background-color:var(--roxo);
}

.cantos8{
   border-radius: 8px; 
}

.espaco160{
    margin-bottom: 160px;
}

.espaco100{
    margin-bottom: 100px;
}

.espaco80{
    margin-bottom: 80px;
}

.espaco60{
    margin-bottom: 60px;
}

.espaco40{
    margin-bottom: 40px;
}

.espaco24{
    margin-bottom: 24px;
}

/* paragrafo */
.espaco20{
    margin-bottom: 20px;
}


.espaco16{
    margin-bottom: 16px;
}

.espaco8{
    margin-bottom: 8px;
}

.colunas12{
    grid-column: 1/13;
}

.overflow_mobile{
    overflow:visible;
}

/* Fontes */

@font-face {
    font-family: "Aleo";
    src: url("fontes/Aleo/Aleo-VariableFont_wght.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: normal;
 }
 
 @font-face {
    font-family: "Comissioner";
    src: url("fontes/Commissioner/Commissioner-VariableFont_FLAR\,VOLM\,slnt\,wght.ttf") format("truetype-variations");
    font-weight: 400 500;
    font-stretch: 75% 125%;
    font-style: normal;
 }

h1{
    font-family: "Aleo";
    color: var(--preto);
    font-weight: 300;
    font-style: normal;
    font-size: 64px;
    text-decoration: none;
    line-height: 74px;
}

.h1_900{
    font-weight: 900; 
}

.h1_2_9{
    grid-column: 2/9;
}



h2{
    font-family: "Aleo";
    color: var(--preto);
    font-weight: 800;
    font-style: normal;
    font-size: 38px;
    text-decoration: none;
    line-height: 54px; 
    text-transform: uppercase;
}

h2 span{
    color: var(--rosa);
}

.h2_900_18{
    font-weight: 900; 
    font-size: 18px;
}

h3{
    font-family: "Aleo";
    color: var(--preto);
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    text-decoration: none; 
    line-height: 36px;
}

h4{
    font-family: "Comissioner";
    color: var(--preto);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    text-decoration: none; 
    line-height: 26px;
}

p{
    font-family: "Comissioner";
    color: var(--preto);
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    text-decoration: none; 
    line-height: 28px;
    
}



nav a{
    font-family: "Aleo";
    color: var(--branco);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    text-decoration: none;
    line-height: 0px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

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

.cta{
    font-family: "Aleo";
    color: var(--branco);
    font-weight: 600;
    font-style: normal;
    font-size: 20px;
    text-decoration: none;
    background-color: var(--rosa); 
    line-height: 0px;
    height:60px ;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 300px;
    
}

.cta:hover{
    background-color: var(--roxo); 
    
}



.branco{
    color: var(--branco);
}

p.branco{
    font-weight: 500;
    line-height: 30px;
}

.link{
    font-family: "Aleo";
    color: var(--roxo);
    font-weight: 600;
    font-style: normal;
    font-size: 16px;
    text-decoration: none;
    line-height: 24px;

}

.link:hover{
    color: #e73842;

}

 /* Header */

#header{
    width: 100%;
    background-color: var(--rosa);
    }
    
header{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;
    row-gap: 0px;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

nav{
    grid-column:-1/-7;
    display: flex;
    justify-content:space-between;
    width: 100%;
    align-items: center;
    max-width: 500px;
    justify-self: flex-end;

 }

 
 #logo{
    width: 215px;
    align-self: center;
    margin: 20px 0px 20px 0px;
    grid-column:1/4 ;
 }


 /* Hamburger e menu_mobile */

#hamburguer{
    display: none;
    grid-column:-1/-5;
    align-self: center;
    max-width: 45px;
    justify-self: flex-end;

 }


#hamburguer rect,
 #menumobile svg rect{
     fill: var(--branco);
 
 }
 
 #hamburguer:hover rect,
 #menumobile svg:hover rect{
     cursor: pointer;
    fill: var(--roxo);
 } 


#menumobile {
	position: fixed;
	top: -130%;
	left: 0%;
	width: 100%;
	height: 100vh;
	background-color: var(--rosa);
    background-image: url(img/menumobile_confetis.svg);
    background-repeat: repeat-y;
    background-size: contain;
	transition: top .5s;
	z-index: 1000;
	overflow: hidden;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr repeat(5,80px) 1fr ;
    align-items: center;
}

#menumobile a{
  font-family: "Aleo";
    color: var(--branco);
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center; 
    letter-spacing: 0.05em;
}


#menumobile svg{
    grid-column: 10/13;
    width: 45px;
    justify-self: flex-end;
    align-self: flex-start;
    margin: 20px 20px 0px 0px;
    grid-row: 1/2;
}
    
    
#menumobile a:hover{
    color: var(--roxo);
} 


#logo_mobile{
    grid-column: 1/10; 
    width: 215px;
    margin: 20px 0px 0px 20px;
    grid-row: 1/2;
    align-self: flex-start;

}

 /* Introdução do tema da página */
.tema_titulo{ 
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 160px;
  margin-top: 160px;
}

.titulo_ilustration1{
    width: 85px;
}

.titulo_ilustration2{
    width: 85px;
}

  /* Footer */

  footer h2{
    margin-bottom:14px ;
  }
  
  #contactos{
    grid-column: 1/6;
  }

  #social{
    grid-column: 9/13 ;
  }

    #social img{
    max-width: 25px;
  }

  #social_logos{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

 .rede_social path{
    fill: var(--branco);
  }


.rede_social:hover path{
   fill: var(--roxo);
  }

  
  .bold_up{
    font-weight: 700;
    text-transform: uppercase;
  }

  .cinza{
    color: var(--cinza_escuro);
  }

  #copywrite{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

 /* Elevador */

#elevador {
    width: 50px;
    height: auto;
    position: fixed;
    bottom: -40px;
    right: 40px;
    z-index: 100;
    transition: .2s;

    /* opacity: 0; */
    /* display: none; */
}

#elevador:hover{
    scale: 1.1;
    cursor: pointer;
}

.mostrar_elevador{
    bottom: 40px !important;
    /* opacity: 1 !important; */
    /* display: block ; */
}


    /* Mobile */

@media (max-width: 1330px) {

.grid12{
    padding: 0px 20px 0px 20px;
}

}


@media (max-width: 900px) {


#logo{
    grid-column:1/8 ;
 }

#hamburguer{
    display: block;
 }

 nav{
    display: none;
 }

.h1_2_9 {
    grid-column: 1 / 13;
    text-align: center;
}

#social {
    grid-column: 8 / 13;
}


}


@media (max-width: 800px) {
.overflow_mobile{
    overflow:hidden;
}

}


@media (max-width: 750px) {

#contactos {
    grid-column: 1 / 13;
    margin-top: 80px;
}

#social {
    grid-column: 1 / 13;
    margin-bottom: 80px;
}

#social_logos {
    max-width: 350px;
}


#copywrite {
    flex-direction: column;
    text-align: center;
}


}




@media (max-width: 600px) {

h1{
    font-size: 42px;
    line-height: 52px;
}

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


h3{
    font-size: 24px;
    line-height: 30px;
}

.cta{
    max-width: 600px;
}


.titulo_ilustration1{
    width: 15%;
}

.titulo_ilustration2{
    width: 15%;
}

.grid12{
    padding: 0px 20px 0px 20px;
    column-gap: 10px;
}

#elevador {
    width: 40px;
    right: 25px;
}



.mostrar_elevador{
    bottom: 25px !important;
}

}