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

img, svg {
    width: 100%;
    height: auto;
 }
 :root{
    --bk-color1: #0C324D;
    --bk-color2: #0C1D4C;
    --bk-color3: #0E0E0E;
 }
 
@font-face {
   font-family: montserrant ;
   src: url(fonts/Montserrat/Montserrat-VariableFont_wght.ttf);
   color: #fff;
}
@font-face {
   font-family: rubik;
   src: url(fonts/Rubik/Rubik-VariableFont_wght.ttf);
   color: #fff;
}
#menumobile{
    width: 100%;
    height: 100vh;
    background-color: var(--bk-color2);
    position: fixed;
    top: 0%;
    left: 120%;
    z-index: 1000;
    transition: left .5s;

}


#menumobilelg{
    grid-column: 1/6;

}
#close{
    grid-column: 11/13;
    margin-right : 10px;
}
#menumobile a{
    grid-column: 1/13;
    text-align: center;
    color: #FFF;
    font-family: Rubik;
    font-weight: 700;
    font-size: 25px;
    text-decoration: none;
}



.banda{
    width: 100%;
}

.grelha{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    column-gap:20px;
}
#logobranco{
    grid-column: 1/3;
}
nav{
    grid-column: 7/13;
    text-align: end;
    align-self: center;
    display: flex;
    justify-content: space-between;
    font-family: montserrat;
    font-family: 18px;
    
}
nav a{
    text-decoration: none;
    color: #FFF;
}
#burger{
    display: none;
}


#logomobile{
    display: none;
}

.max{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.azulheader{
    background-color:var(--bk-color1);
    max-width: 100%;
}
.bandaazulfundo1{
    background-color:var(--bk-color2);
    max-width: 100%;
}

#fotoheader{
   grid-column: 1/13;
   grid-row: 1;
}
#play{
   grid-column: 6/8;
   grid-row:1 ;
   z-index: 12;
   margin-top: 250px;
}

.intro h1{
   margin-top: 140px;
   grid-column: 5/9;
   color: #FFF;
   text-align: center;
   font-family: Rubik;
   font-size: 60px;
   font-weight: 700;
}

.intro h2{
   grid-column: 3/11;
   color: #FFF;
   text-align: center;
   font-family: Montserrat;
   font-size: 18px;
   font-weight: 600;
   line-height: 30px;
   margin-top: 88px;
   
}
.intro p{
   grid-column: 3/11;
   color: #FFF;
   text-align: center;
   font-family: Montserrat;
   font-size: 18px;
   font-weight: 600;
   line-height: 30px;
   margin-top: 30px;
   margin-bottom: 230px;

}

.textocorrido h1{
   color: #FFF;
   font-family: Montserrat;
   font-size: 18px;
   font-weight: 600;
   line-height: 30px;
   grid-column: 1/7; 
   grid-row: 1; 
   margin-top: 185px;
}

.textocorrido h2{
   color: #FFF;
   font-family: Montserrat;
   font-size: 18px;
   font-weight: 600;
   line-height: 30px; 
   grid-column: 1/7; 
   grid-row: 2; 
}
.textocorrido h3{
   color: #FFF;
   font-family: Montserrat;
   font-size: 18px;
   font-weight: 600;
   line-height: 30px; 
   grid-column: 1/7; 
   grid-row: 3;
   margin-bottom: 200px; 
}
.textocorrido h4{
   color: #FFF;
   font-family: Montserrat;
   font-size: 18px;
   font-weight: 600;
   line-height: 30px; 
   grid-column: 7/13; 
   grid-row: 1; 
   margin-top: 185px;
}
.textocorrido h5{
   color: #FFF;
   font-family: Montserrat;
   font-size: 18px;
   font-weight: 600;
   line-height: 30px; 
   grid-column: 7/13;
   grid-row: 2; 
   margin-top: 25px;
}
.tafsi h1{
   color: #FFF;
   font-family: Montserrat;
   font-size: 18px;
   font-weight: 600;
   grid-column: 1/7;
   grid-row: 1;
   margin-top: 200px;
}
.tafsi p{
   color: #FFF;
   font-family: Montserrat;
   font-size: 18px;
   font-weight: 600;
   grid-column: 1/7;
   grid-row: 1;
   margin-top: 320px;
   margin-bottom: 200px;
}
.tafsi img{
   grid-column: 7/13;
   grid-row: 1;
   margin-top: 150px ;
}

.ultima h1{
   color: #FFF ;
   font-family: Montserrat;
   font-size: 18px;
   font-weight: 600;
   line-height: 30px;
   grid-column: 1/7;
   grid-row: 1; 
   margin-top: 100px;
}
.ultima h2{
   color: #FFF ;
   font-family: Montserrat;
   font-size: 18px;
   font-weight: 600;
   line-height: 30px; 
   grid-column: 1/7;
   grid-row: 2;
   margin-top: 20px;
}
.ultima h3{
   color: #FFF ;
   font-family: Montserrat;
   font-size: 18px;
   font-weight: 600;
   line-height: 30px; 
   grid-column: 1/7;
   grid-row: 3;
   margin-top: 20px;
}
.ultima h4{
   color: #FFF ;
   font-family: Montserrat;
   font-size: 18px;
   font-weight: 600;
   line-height: 30px; 
   grid-column: 1/7;
   grid-row: 4;
   margin-top: 20px;
   margin-bottom: 100px;
}
.ultima img{
    grid-column: 7/13;
    z-index: 12;
    grid-row: 5;
    margin-top: -600px;
}


#titulo3{
    grid-column: 1/6;
    grid-row: 7;
    margin-top: 50px;
    font-family: rubik;
    font-size: 60px;
    color: #fff;
}
#coluna1{
grid-row: 7;
grid-column: 1/3;
margin-top: 300px;
z-index: 10;
}
#coluna1 h1{
    font-family: rubik;
    font-size: 20px;
    color: #FFF;
    font-weight: 700;
}
#coluna1 p{
    font-family: rubik;
    font-size: 25px;
    color: #FFF;
    font-weight: 200;
}
#coluna2{
grid-row: 7;
grid-column: 4/6;
margin-top: 490px;
z-index: 10;
}
#coluna2 h1{
    font-family: rubik;
    font-size: 20px;
    color: #FFF;
    font-weight: 700;
}
#coluna2 p{
    font-family: rubik;
    font-size: 25px;
    color: #FFF;
    font-weight: 200;
}
#p11{
margin-top: 5px;
}
#p12{
    margin-top: 160px;
}
#p14{
    margin-top: 40px;
}

#p10{
    margin-top: 40px;
}
#quadradof1{
    grid-column: 1/7;
    grid-row: 7;
    margin-top: 300px;
}
#quadradof2{
    grid-column: 1/7;
    grid-row: 7;
    margin-top: 400px; 
}

#coluna3{
    grid-row: 7;
    grid-column: 8/13;
    margin-top: 330px;
    z-index: 10;
}
#coluna3 h1{
    font-family: rubik;
    font-size: 20px;
    color: #FFF;
    font-weight: 700;
}
#coluna3 p{
    font-family: rubik;
    font-size: 25px;
    color: #FFF;
    font-weight: 200;
}
#coluna4{
    grid-row: 7;
    grid-column: 10/13;
    margin-top: 500px;
    z-index: 10;
}
#coluna4 h1{
    font-family: rubik;
    font-size: 20px;
    color: #FFF;
    font-weight: 700;
}
#coluna4 p{
    font-family: rubik;
    font-size: 25px;
    color: #FFF;
    font-weight: 200; 
}

#p22{
    margin-top: 170px;
}
#p24{
    margin-top: 40px;
}
#p20{
    margin-top: 40px;
}
#quadradof3{
    grid-column: 7/13;
    grid-row: 7;
    margin-top: 400px; 
    margin-bottom: 200px;
}
#cf{
    grid-row: 8;
    grid-column: 4/10;
    margin-bottom: 100px;
}










.footercolor{
    background-color: var(--bk-color3);
    max-width: 100%;
}
#f1{
    grid-column: 1/7;
    margin-top: 130px;
    grid-row: 8;
    font-family: montserrat;
    font-size: 18px;
    font-weight: 600;
    color: #FFF;
}
#redes{
    grid-row: 9;
    grid-column: 1/6;
    margin-top: 150px;
    display: flex;
    justify-content: space-between;

}
#redes img{
    width: 52px;
    height: 52px;
}
#midia{
    grid-column: 1/4;
    grid-row: 10;
    margin-top: 100px;
    font-family: montserrat;
    font-size: 18px;
    font-weight: 600;
    color: #FFF;
}
#cm{
    margin-bottom: 10px;
}
#coordenado{
    margin-top: 100px ;
    grid-column: 1/5;
    grid-row: 11;
    color: #FFF;
    font-family: montserrat;
    font-size: 25px;
}
#coordenado img{
    margin-top: 10px    ;
}
#termos{
    grid-column: 1/6;
    grid-row: 12;
    margin-top: 105px;
    color: #FFF;
    font-family: montserrat;
    font-size: 18px;
    font-weight: 600;
}

#f2{
    grid-column: 9/11;
    margin-top: 130px;
    grid-row: 8;
    font-family: rubik;
    font-size: 30px;
    font-weight: 700;
    color: #FFF;
    text-align: center;
}

#presenting{
    grid-row: 9;
    grid-column: 7/13;
}
#presenting h1{
    color: #FFF;
    text-align: center;
    font-family: montserrat;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 35px;
    
}
#par2{
    margin-top: 95px;
    grid-row: 10;
 grid-column: 7/10;  
 font-size: 18px;
 text-align: center;
 font-weight: 600;
 color: #FFF;
 font-family: montserrat;
   
}
#par2 h1{
    font-size: 18px;
    text-align: center;
    font-weight: 600;
    color: #FFF;
    font-family: montserrat;
}
#par2 img{
    margin-top: 30px;
}
#par3{
    margin-top: 95px;
    grid-row: 10;
    grid-column: 10/13;  
    font-size: 18px;
    text-align: center;
    font-weight: 600;
    color: #FFF;
    font-family: montserrat;
}

#par3 h1{
    font-size: 18px;
    text-align: center;
    font-weight: 600;
    color: #FFF;
    font-family: montserrat;
}
#par3 img{
    margin-top: 30px;
}

#par4{
    margin-top: 95px;
    grid-row: 11;
    grid-column: 7/10;  
}
#par4 h1{
    font-size: 18px;
    text-align: center;
    font-weight: 600;
    color: #FFF;
    font-family: montserrat;
}
#par4 img{
    margin-top: 30px;
}
#par5{
    margin-top: 95px;
    grid-row: 11;
    grid-column: 10/13;  
}
#par5 h1{
    font-size: 18px;
    text-align: center;
    font-weight: 600;
    color: #FFF;
    font-family: montserrat;
}
#par5 img{
    margin-top: 30px;
}
#par6{
    margin-top: 95px;
    grid-row: 12;
    grid-column: 7/10;  
}
#par6 h1{
    font-size: 18px;
    text-align: center;
    font-weight: 600;
    color: #FFF;
    font-family: montserrat;
}
#par6 img{
    margin-top: 30px;
}
#par7{
    margin-top: 95px;
    grid-row: 12;
    grid-column: 10/13;  
}
#par7 h1{
    font-size: 18px;
    text-align: center;
    font-weight: 600;
    color: #FFF;
    font-family: montserrat;
}
#par7 img{
    margin-top: 30px;
}

#copyrigth{
    grid-row: 13;
    color: #FFF;
    font-family: montserrat;
    font-size: 18px;
    grid-column: 4/10;
    text-align: center;
    margin-top: 200px;
}




/*mobile*/




@media(max-width:666px){

nav {
    display: none;
}

#burger{
    display: block;
    grid-column: 10/13;
    grid-row: 1;
    width: 60px;
    margin-top: 20px;
    margin-bottom: 20px;
    justify-self: flex-end;

}
#logobranco{
    display: none;
}
#logomobile{
    display: block;
    grid-column: 1/3;
    grid-row: 1;
    width: 60px;
    margin-top: 20px;
    margin-bottom: 20px;
    justify-self: flex-start;
}

#play{
   margin-top: 100px; 
}
.intro h1{
    font-size: 30px;
    grid-column: 3/11;
}
.into h2{
    font-size: 20;
}
.into p{
    font-size: 20px;
}
.textocorrido h1{
    font-size: 18px;
    grid-row: 1;
    grid-column: 2/12;
}
.textocorrido h2{
    font-size: 18px;
    grid-row: 2;
    grid-column: 2/12;
}
.textocorrido h3{
    font-size: 18px;
    grid-row: 3;
    grid-column: 2/12;
}
.textocorrido h4{
    font-size: 18px;
    grid-row: 4;
    grid-column: 2/12;
    margin-top: -150px;
}
.textocorrido h5{
    font-size: 18px;
    grid-row: 5;
    grid-column: 2/12;
    margin-bottom: 100px;
}
.tafsi img{
    grid-column: 1/13;
    grid-row: 1;
}
.tafsi h1{
    grid-row: 2;
    grid-column: 2/12;
    margin-top: 40px;
}
.tafsi p{
    grid-row: 3;
    grid-column: 2/12;
    margin-top: 10px;
}
.ultima h1{
    grid-row: 1;
    grid-column: 2/12;
}
.ultima h2{
    grid-row: 2;
    grid-column: 2/12;
}
.ultima img{
    grid-row: 3;
    grid-column: 2/12;
    margin-top: 20px;
}
.ultima h3{
    grid-row: 4;
    grid-column: 2/12;
}
.ultima h4{
    grid-row: 5;
    grid-column: 2/12;
}












#titulo3{
    font-size: 30px; 
    grid-column: 2/6; 
} 
#coluna1{
  
    grid-column: 2/12;
}
#coluna2{
    grid-column: 8/12;
}
#coluna4{
    display: none;
}
#coluna3{
    display: none;
}
#quadradof3{
    display: none;
}
#quadradof1{
     grid-column: 2/12;
}
#quadradof2{
    grid-column: 2/12;
    margin-bottom: 100px;   
}





#redes{
    grid-row: 1;
    grid-column: 2/12;
    justify-content: space-between;
}

#f1{
    grid-row: 2;
    font-size: 15px;
    grid-column: 2/12;
}
#f2{
    grid-row: 3;
    font-size: 20px;
    grid-column: 3/11;
    text-align: center;
}

#presenting {
    grid-row: 4;
    grid-column: 3/11;
    text-align: center;
}
#par2{
    grid-row: 5;
    grid-column: 1/7;
    text-align: center;
}
#par3{
    grid-row: 5;
    grid-column: 7/13;
    text-align: center;
}
#par4{
    grid-row: 6;
    grid-column: 1/7;
    text-align: center;
}
#par5{
    grid-row: 6;
    grid-column: 7/13;
    text-align: center;
}
#par6{
    grid-row: 7;
    grid-column: 1/7;
    text-align: center;
}
#par7{
    grid-row: 7;
    grid-column: 7/13;
    text-align: center;
}
#midia {
    grid-row: 8;
    grid-column: 2/12;
    text-align: center;
    font-size: 15px;
}
#coordenado{
    grid-row: 9;
    grid-column: 1/7;
    font-size: 20px;
}
#termos{
    grid-row: 9;
    grid-column: 7/13;
    font-size: 20px;
    text-align: end;
}
#copyrigth{
    font-size: 15px;
}

}