#gridheader{
     display: grid;
    margin: 0 auto 0 auto;
    max-width: 1200px;
    width: 100%;
    height: 100%;

    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;
    margin-top: 225px;
}




#bicho1{
 position: relative;
 top: -80px;
 left: 100px;
 grid-row: 1;
 grid-column: 4;
 width: 165px !important;
 z-index: 10;
}

#bicho2{
 position: relative;
 grid-row: 1;
 grid-column: 12/13;
 width: 100px !important;
 top: 700px;
 left: -35px;
 z-index: 10;
}


#bicho3{
    position: relative;
 grid-row: 1;
 grid-column: 1/2;
 width: 100px !important;
 top: 900px;
 left: 50px;
 z-index: 10;
}

#imgheader{
    grid-row: 1/3;
    grid-column: 3/11;
    justify-self: center;
    z-index: 0;
}

#gridheader div {
    grid-row: 2 / 4;
    grid-column: 2 / 12;
    position: relative;
   
    align-content: flex-end;
   
    z-index: 10;
    text-align: center;
    margin-top: 290px;
}

#gridheader div h1{
    color: var(--branco);
    font-family: tomorrowbold;
    font-size: 120px;
    line-height: 120px;
    opacity: 80%;
}

#gridheader div h2{
   
    justify-self: center;
    text-align: center;
    color: var(--branco);
    font-family: tomorrowlight;
    font-size: 40px;
    letter-spacing: 30%;
    line-height: 70px;
    margin-top: 50px;
    
}

.textosimples{
    color: var(--texto);
    font-family:sweetsans;
    font-size: 32px;
}

.palavrachave{
    color: var(--palavrachave);
    font-family: tomorrowmedium;
    font-size: 80px;
    letter-spacing: 10%;
}

.espacoentreb{
    margin-bottom: 55px;
}

.espacoentret{
    margin-top: 55px;
}



.part1{
    grid-row: 1;
    grid-column: 1/13;
    justify-self:center ;
    margin-top: 575px;
    margin-bottom: 55px;
    text-align: center;
     z-index: 10;

}

.part2{
    grid-row:2;
     grid-column: 1/13;
   justify-self:center ;
   text-align: center;
   margin-bottom: 55px;
    z-index: 10;
}

.part3{
    grid-row:3;
     grid-column: 1/13;
   justify-self:center ;
   text-align: center;
    z-index: 10;

}


/* ------------------------------------------------------ universo ---------------------------------------------------------- */




@keyframes upanddown{
    0% {top:0px;}
    25% {top:-20px;}
    50% {top:0px;}
    75%{top:20px;}
    100% {top:0px;}
}



#textoparallax{
    position: relative;
    bottom: 150px;
}



#fundoestrelado{
   grid-column: 1/13;
   z-index: -10;
    background-image: url(img/estrelas.jpg);
     background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


#gradiante{
    background-color: var(--sitebackground);
   background: linear-gradient(180deg,rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 100%);
   grid-row: 1/3;
    grid-column: 1/13;

}




#planeta_a{
    position: relative;
    left: 20px;
    animation-name: upanddown;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    grid-row: 1;
    grid-column: 1/3;

    justify-self: center;
     z-index: 10;
    
}

#planeta_v{
       position: relative;
       right: 20px;
    animation-name: upanddown;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    grid-row: 2;
    grid-column: 10/13;
    
     z-index: 10;
      

}

#planeta_r{
   
    position: relative;
    animation-name: upanddown;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    grid-row: 4;

     grid-column: 3/5;
    
    justify-self: center;
     z-index: 10;
}


#planeta_l{
    
     position: relative;
    animation-name: upanddown;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    grid-row: 3/5;
    grid-column: 3/10;
    justify-self:center;
    z-index: 20;
}

#planeta_amr{
    
     position: relative;
    animation-name: upanddown;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    grid-row: 5;
    grid-column: 10/11;
    margin-top: 85px;
     z-index: 10;

}


/* ------------------------------------------------------ universo ---------------------------------------------------------- */




/* ------------------------------------------------------ rachado ---------------------------------------------------------- */

#fundoestrelado{
    grid-row: 3/7;
    grid-column: 1/13;
    justify-self: center;
}





#partidoaomeio{
     
    grid-row: 6/7;
     grid-column: 1/13;
     align-self: flex-end;
     justify-self: center;
}


#textorachado{
    background-image: url(img/Ellipse\ 17.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 470px;
    grid-row: 6;
    grid-column: 1/13;
    text-align: center;
   
    margin-top: 400px;
    z-index: 30;

}

/* ------------------------------------------------------ rachado ---------------------------------------------------------- */



/* ------------------------------------------------------ ceu ---------------------------------------------------------- */


#poremcima{
    position: relative;
    top: -200px;
}

#ceu{
    grid-row: 1/3;
    grid-column: 1/13;
    width: 100%;
}

#ceu_mb{
    display: none;
}

#textoceu{
    grid-row: 1;
    grid-column: 2/9;
    z-index: 10;
    margin-top: 240px;
    
}

#andar{
    grid-row: 2;
    grid-column: 1/13;
    z-index: 20;
    align-self: flex-end;
}


/* ------------------------------------------------------ ceu ---------------------------------------------------------- */



/* ------------------------------------------------------ concert ---------------------------------------------------------- */








#violino{
    grid-row: 1/3;
    z-index: 30;
    grid-column: 1/13;
    align-self: flex-end;
  
    position: relative;
    top: 350px;
   
}

#concert{
    position: relative;
    top: -550px;
     opacity: 0;
     margin-top: 120px;
     animation: popup linear forwards;
    animation-timeline: view();
    animation-range: entry 25% entry 100%;

}

.textoconcert{
   
    z-index: 40;
   grid-column: 2 / 12;
    grid-row: 3;
    

    text-align: center;
}

#dupla{
    
    grid-row: 1;
    grid-column: 1/13;
    opacity: 0;
    animation: popup linear forwards;
    animation-timeline: view();
    animation-range: entry 25% entry 100%;

   

}

.espcimgent{
   padding-bottom: 165px;
}


#espaçoconcert{
    margin-top: 120px;
}

#animacao{
    
  
  
    justify-self: center;
}

#concert1{
  
    
    grid-row: 1;
    grid-column: 1/7;
    margin-bottom: 120px;
    opacity: 0;
    animation: popup linear forwards;
    animation-timeline: view();
    animation-range: entry 25% entry 100%;


    
}


#concert1pt2{
    grid-row: 1;
    grid-column: 7/13;
    margin-bottom: 120px;
     opacity: 0;
    animation: popup linear forwards;
    animation-timeline: view();
    animation-range: entry 25% entry 100%;

}



#concert2{
    grid-row: 2;
    grid-column: 1/13;
     opacity: 0;
    justify-self: center;
     animation: popup linear forwards;
    animation-timeline: view();
    animation-range: entry 25% entry 100%;
}

#concert3{

   
   
    grid-row: 3;
   
    grid-column: 1/7;
    margin-top: 120px;
    opacity: 0;
     animation: popup linear forwards;
    animation-timeline: view();
    animation-range: entry 25% entry 100%;
}


#concert3pt2{
    grid-row: 3;
     grid-column: 7/13;
     opacity: 0;
     margin-top: 120px;
     animation: popup linear forwards;
    animation-timeline: view();
    animation-range: entry 25% entry 100%;

}




#partanim {
   display: grid;
    grid-row: 4;
    grid-column: 1/13;
    margin-bottom: 500px;
}


#anim{
    z-index: 10;
    grid-column: 1/10;
    grid-row: 4;
    align-self: flex-end;
   
}

#fundo_anim{
    z-index: 1;
    margin-top: 300px;
    grid-column: 1/13;
    grid-row: 4;
}

 .slider-window{
    display: none;
 }

 .slider-bullet{
    display: none;
 }






/* ------------------------------------------------------ concert ---------------------------------------------------------- */


/* ------------------------------------------------------ connect ---------------------------------------------------------- */






#fundocta{
     grid-column: 1/13;
     grid-row: 1/6;

     z-index: -100;
     
}

#partconnect{
    margin-top: 500px;
   
    
}

.textoconcert2{
     z-index: 40;
    grid-column: 1/13;
    grid-row: 1;
    justify-self: center;
    text-align: center;
}



#mao1{
  
   
    grid-row: 2;
    grid-column: 7/13;
}

#mao2{
   
    grid-row: 4;
     grid-column: 1/6;
    animation-name: slideInLeft;
    animation-duration: 2s ease-out ;
    position: relative;

}


#connectcta{
    grid-row: 3;
    
}

#kojima_g{
     grid-row: 4;
     grid-column: 8/13;
        align-self: center;
}

#kojima_m{
    position: relative;
    top: -50px;
    left: 20px;
     grid-row: 5;
     grid-column: 1/4;
     align-self: center;
}


#kojima_p{
    position: relative;
    top: -120px;
     grid-row: 5;
     grid-column: 6/8;
        align-self: center;
}


/* ------------------------------------------------------ connect ---------------------------------------------------------- */




/* ------------------------------------------------------ harmonica ---------------------------------------------------------- */



#harmonica{
   
  
    grid-row: 2;
     grid-column: 1/13;
     justify-self: center;
    position: relative;
    
    animation-name: upanddown;
    animation-duration: 12s;
    animation-iteration-count: infinite;
     
}

#partharmo{

   margin-top: 380px;
   
    
}

#textharmo{
    grid-column: 3/11;
    text-align: center;
    justify-self: center;
}

#textharmo b{
    font-weight: 800;
}


#espacotextharm{
    margin-bottom: 30px;
}




#harmonicacta{
 grid-row: 3;
 margin-top: -150px;
 z-index: 10;
 text-decoration: none ;
}

/* ------------------------------------------------------ harmonica ---------------------------------------------------------- */

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

@media only screen and (max-width: 750px){
    #textorachado {
       
        margin-top: 200px;
       
    }

    #violino{
   top: 200px;
 }
}









/* ------------------------------------------------------ 890 ---------------------------------------------------------- */
@media only screen and (max-width: 890px){
    #bicho1{
        display: none;

    }
    
    #bicho2{
        display: none;

    }

    #bicho3{
        display: none;

    }

    #ceu_mb{
    display: block;

  grid-row: 1/3;
    grid-column: 1/13;
}





}


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

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


#imgheader {
    
    grid-column: 2 / 12;
    
}

#bicho1{
    display:none
}

#bicho2{
    display: none;
}

#bicho3{
    display: none;
}

#gridheader div{
    top: -70px;
}

#fundoestrelado{
    background-attachment: unset;
}

#kojima_p {
    display: none;
}

#kojima_m {
    top: 0 !important;
}

.part1{
    margin-top: 318px;
}


#harmonicacta {
   
    margin-top: -30px !important;
    
}


#poremcima {
    top: -100px;
}

#ceu{
    display: none;
}





#textoceu {
    
    margin-top: 150px;
}




#andar {


    margin-top: -80px;


}

.hideimgs{
    display: none;
}

.slider-window{
    display: block;
}

.slider-bullet{
    display: block;

}

#fundo_anim{
        margin-top: 150px;
}

#partanim{
    margin-bottom: 150px;
}

#partconnect {
    margin-top: 200px;
}

#partharmo {
    margin-top: 165px;
   
}


}