* {
   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%;
    grid-row: 1;
}
.videohp{
  grid-column: 1/13;
  grid-row: 2;
  justify-self: center; 
}
.videohp{
    grid-column: 1/13;
}

.bandaazulfundo1{
    background-color:var(--bk-color2);
    max-width: 100%;
    grid-row: 2;
}

.titulohp{
   
    grid-row: 2;
    z-index: 10;  
    grid-column: 6/8;
    background-color: var(--bk-color2) ;
}

#bordado{
    margin-top: 10px;
    grid-column: 6/8;
    grid-row: 3;
    margin-top: -150px;
}

.titulohp h1{
    margin-top: 230px;
    text-align: center;
    font-family: rubik;
    grid-column: 4/10;
    grid-row: 3;
    color: #FFF;
    font-weight: 700;
}
#logocompleto{
    grid-column: 2/12;
    grid-row: 3;
    margin-top: 300px;
}
.titulohp p{
    grid-column: 2/12;
    grid-row: 3;
    color: #FFF;
    text-align: center;
    font-family: montserrat;
    font-size: 18px;
    font-weight: 600;
    margin-top: 680px;
    margin-bottom: 230px;
}
.bandafundo2{
    background-color:var(--bk-color1);
    max-width: 100%;
}
.noticias h1{
    grid-row: 4;
    grid-column: 1/7;
    margin-top: 85px;
    color: #FFF;
    font-family: rubik;
    font-size: 60px;
    font-weight: 700;
}

#i1{
    grid-column: 1/5;
    grid-row: 4;
    z-index: 11;
    margin-top: 250px;
   
}
#q1{
    grid-column: 1/5;
    grid-row: 4;
    z-index: 9;
    margin-top: 250px;
      margin-bottom: 280px;
}

#i2{
    grid-column: 5/9;
    grid-row: 4;
    z-index: 11;
    margin-top: 250px;
}
#q2{
    grid-column: 5/9;
    grid-row: 4;
    z-index: 9;
    margin-top: 250px;
    margin-bottom: 280px;
}

#i3{
    grid-column: 9/13;
    grid-row: 4;
    z-index: 11;
    margin-top: 250px;
   
}
#q3{
    grid-column: 9/13;
    grid-row: 4;
    z-index: 9;
    margin-top: 250px;
    margin-bottom: 280px;
}

.noticias h2{
    grid-row: 4;
    color: #000;
    font-family: Montserrat;
    font-size: 23px;
    font-weight: 500;
    z-index: 13;
    margin-top: 710px;
}
.noticias p{
    grid-row: 4;
    color: #000;
    font-family: Montserrat;
    font-size: 23px;
    font-weight: 600;
    z-index: 13;
    margin-top: 820px;
}
#h1{
    grid-column: 1/5;
}
#p1{
    grid-column: 1/5;
}
#h2{
    grid-column: 5/9;
}
#p2{
    grid-column: 5/9;
}
#h3{
    grid-column: 9/13;
}
#p3{
    grid-column: 9/13;
}


.vencedores h1{
   grid-row: 5;
   grid-column: 1/9;
   margin-top: 210px;
   color: #FFF;
   font-family: Rubik;
   font-size: 60px;
   font-weight: 700;
}

#v1{
    grid-column: 1/7;
    grid-row: 5;
    margin-top: 330px;
}
#v2{
    grid-column: 7/13;
    grid-row: 5;
    margin-top: 330px;
}
#v3{
    grid-column: 1/7;
    grid-row: 5;
    margin-top: 770px;
        margin-bottom: 280px;
}
#v4{
    grid-column: 7/13;
    grid-row: 5;
    margin-top: 770px;
    margin-bottom: 280px;
}

.suica h1{
    color: #FFF;
font-family: rubik;
font-size: 60px;
font-weight: 700;
grid-row: 6;
grid-column: 1/9;
margin-top: 120px;

}
#basel{
    grid-column: 1/13;
    grid-row: 6;
    margin-top: 385px;
    margin-bottom: 125px;
}
#mapas{
    grid-column: 1/5;
    grid-row: 7;
    margin-top: 150px;
}
#s1{
    grid-column: 1/5;
    grid-row: 7;
    margin-top: 150px;
}
.suica h2{
    color: #FFF;
    font-family: Rubik;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    grid-column: 5/9;
    grid-row: 7;

}
.suica p{
    color: #FFF;
    font-family: Montserrat;
    font-size: 18px;
    font-weight: 600;
    grid-column: 5/8;
    grid-row: 7;

}

#h4{
    margin-top: 120px;
}
#p4{
    margin-top: 163px;
}
#h5{
    margin-top: 248px;
}
#p5{
    margin-top: 290px;
}
#h6{
    margin-top: 375px;
}
#p6{
    margin-top: 417px;
}
#h7{
    margin-top: 502px;
}
#p7{
    margin-top: 545px;
}
#h8{
    margin-top: 629px;
}
#p8{
    margin-top: 671px;
    margin-bottom: 144px;
}
.ultimoano h1{
    margin-top: 124px;
    color: #FFF;
    font-family: Rubik;
    font-size: 60px;
    font-weight: 700;
    grid-column: 1/9;
    grid-row: 1;
}
#c2{
    grid-row: 2;
    grid-column: 7/13;
    margin-top: -155px;
    z-index: 12;
}
#nemo{
    grid-column: 2/12;
    grid-row: 2;
    margin-top: 141px;
}
#play{
    grid-column: 6/8;
    grid-row: 2;
    margin-top: 350px;
}
#grandalhao{
    display: flex;
    justify-content: space-between;
    grid-row: 4;
    grid-column: 2/12;
}
.minorcas h2{
    color: #FFF;
    font-family: Rubik;
    font-size: 30px;
    font-weight: 700;
    grid-row: 3;
    margin-bottom: 9px;

}
.ultimoano p{
    color: #FFF;
    font-family: Montserrat;
    font-size: 18px;
    font-weight: 600;
    grid-row: 3;
}
.minorcas{
    margin-top: 110px;
    margin-bottom: 620px;
}

.bilhetes h1{
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 60px;
    font-weight: 700;
    grid-row: 1;
    grid-column: 5/9;
    margin-top: 155px;
}
.bilhetes p{
    color: #FFF;
    text-align: center;
    font-family: Montserrat;
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
    grid-row: 2;
    grid-column: 2/12;
    margin-top: 85px;
}
.bilhetes h2{
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 30px;
    font-weight: 700;
    grid-row: 3;
    z-index: 12;
    grid-column: 5/9;
    margin-top: 147px;
}
#butaoc{
    grid-column: 5/9;
    grid-row: 3;
    z-index: 10;
    margin-top: 120px;
    margin-bottom: 200px;
}

#cf{
    grid-row: 4;
    grid-column: 1/13;
    margin-bottom: -10px;
}


.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;
}
.videohp {
    width: 390px;
    height: 219px;
    margin-top: 100px;
}
.titulohp h1{
    font-size: 25px;
}
.titulohp p{
    margin-top: 450px;
    font-family: 18px;
}
#bordado{
    margin-top: 20px;
    grid-column: 5/9;
}
.noticias h1{
   font-size: 30px;
   grid-column: 3/11;
}
#i2{
    display: none;
}
#q2{
    display: none;
}
#i3{
    display: none;
}
#q3{
    display: none;
}
#h2{
    display: none;
}
#h3{
    display: none;
}
#p2{
    display: none;
}
#p3{
    display: none;
}
#i1{
    grid-column: 3/11;
}
#q1{
    grid-column: 3/11;
}
#h1{
    margin-top: 630px;
    grid-column: 3/11;
    font-size: 18px ;
}
#p1{
    grid-column: 3/11;
    margin-top: 730px;
    font-size: 18px;
}

.vencedores h1{
    font-size: 30px;
}
#v3{
    margin-top: 500px;  
}
#v4{
    margin-top: 500px;
}
.suica h1{
    font-size: 30px;
    grid-column: 1/11;
    grid-row: 1;
}
#basel{
    margin-top: 70px;
    grid-row: 2;
}

.suica h2{
    font-size: 25px;
    grid-row: 3;
    grid-column: 4/11;
}
.suica p{
    font-size: 20px;
    grid-row: 3;
    grid-column: 4/10;
 
}
#mapas{
    grid-row: 4;
    grid-column: 3/11;
}
#s1{
    
    grid-row: 4;
    grid-column: 3/11;
    margin-bottom: 50px;
}
.ultimoano h1{
    font-size: 30px;
    grid-column: 2/9;
}
#c2{
    margin-top: 25px;
}
#play{
    margin-top: 220px;
}
.minorcas h2{
    font-size: 20px;
}
.minorcas p{
    font-size: 18px;
}
.minorcas{
    margin-bottom: 150px;
}
.bilhetes h1{
    font-size: 30px;
    margin-bottom: -10px;
}
.bilhetes p{
    font-size: 18px;
}
#butaoc{
    grid-column: 3/11;
}
.bilhetes h2{
    grid-column: 3/11;
    font-size: 25px;
}


#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;
}
}