/* -------------------------------------------------------------------
O SENTIDO DA VIDA
------------------------------------------------------------------- */

/* -------------------------------------------------------------------
GERAL
------------------------------------------------------------------- */

html, body {
    scroll-behavior: smooth;
    overflow-x: hidden;
    font-family: "Roboto Condensed", sans-serif;


  

}
    /* roboto-condensed-regular - latin */
    @font-face {
        font-family: 'Roboto Condensed';
        font-style: normal;
        font-weight: 400;
        src: url('../fonts/roboto-condensed-v19-latin-regular.eot'); /* IE9 Compat Modes */
        src: local(''),
             url('../fonts/roboto-condensed-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('../fonts/roboto-condensed-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
             url('../fonts/roboto-condensed-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
             url('../fonts/roboto-condensed-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
             url('../fonts/roboto-condensed-v19-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
      }

/* -------------------------------------------------------------------
NAVBAR
------------------------------------------------------------------- */
#inner {
    display: table;
    margin: 0 auto;
    /* border: 1px solid black; */
  }
  
  #outer {
    /* border: 1px solid red; */
    width:100%
  }


  .nav>li{
    padding: 12px;
}
  .nav>li>a{
      padding: 0px;
  }
  .navbar {
      
    min-height: 45px;
  }

.linkOn{
    margin-bottom:50px; /* space from border to next element */
    padding-bottom:5px; /* space from element to border */
    border-bottom:1px solid #FFF;
    color: white;
}
/* .navbar-transparent {
    background: transparent;
    padding-bottom: 0px;
    padding-top: 0px;
}

 */




/* -------------------------------------------------------------------
VIDEOS SPECS
------------------------------------------------------------------- */
.video01{
    position:fixed;
    top:50%;
    left: 50%;
    z-index: -100;
    width: auto;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.video02{
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
    width: 100%;
    height: auto;
    margin-top: 6px;
}




.videoAgradecimentos{
    min-width: 74%;
    min-height: 100%;
    z-index: -100;
    width: 74%;
    height: auto;
    margin-top: 6px;
    text-align: center;
    margin: 0 auto;
}





/* -------------------------------------------------------------------
TYPOGRAPHY
------------------------------------------------------------------- */
.text-base {
    font-size: 1.8em;
    text-align: left;
    margin: 50px 5em 0 5em;
    width: 60%; margin:3em auto;
}

.white{
    color: white;
}

.grey{
    color:#555;
    font-size: 0.9em;
}

.whiteTitle{
    color: white;
    font-size: 1.3em;
}

.blackTitle{
    color: black;
    font-size: 1.3em;
}

.text-personagens{
    font-size: 1.8em;
    text-align: left;
    width: 60%; 
    margin:3em auto
}

.text-apoios{
    font-size: 1.8em;
    text-align: left;
    width: 60%; 
    margin:0 auto
}

.text-galeria{
    font-size: 1.3em; 
    line-height: 1.3em; 
    text-align: left;
    margin-top: -23px;
}

.text-galeria2{
    font-size: 1.3em; 
    line-height: 1.3em; 
    text-align: left;

}

.fas {
    font-weight: 900;
    font-size: 9px;
}

.legendaVideo{
    text-align: center;
    font-weight: 400;
    font-size: 1em;
}







/* -------------------------------------------------------------------
OTHER ELEMENTS SPECS
------------------------------------------------------------------- */
.seta {
    position: absolute; 
    width: 3%; 
    bottom: 3em; 
    margin: 0 auto; 
    text-align: center; 
    left: 50%; 
    transform: translate(-50%,0); 
    z-index: 44; 
    opacity: .8;
}

.menusao{
    float: center; 
    min-width: 3em; 
    border: 1px dotted #FFF; 
    padding: 7px; 
    margin: 5px;
}








/* -------------------------------------------------------------------
GALLERY PERSONAGENS PEOPLE
------------------------------------------------------------------- */
#gallery {
    /* line-height:0; */
    -webkit-column-count:5; /* split it into 5 columns */
    -webkit-column-gap:5px; /* give it a 5px gap between columns */
    -moz-column-count:5;
    -moz-column-gap:5px;
    column-count:5;
    column-gap:5px;
    margin: 0 auto;
    overflow: hidden;
    
 }

.gal {
    width: 100% !important;
    height: auto !important;
    margin-bottom:4em; /* to match column gap */
    float: left;
    text-align: center;
    
 }

 .textGal{
    height: auto;
 }

 @media (max-width: 1200px) {
    #gallery {
     -moz-column-count:    5;
     -webkit-column-count: 5;
     column-count:         5;
    }
    #textDesaperta {
        padding: 0 3em;
    }
 }

 @media (max-width: 1000px) {
    #gallery {
     -moz-column-count:    3;
     -webkit-column-count: 3;
     column-count:         3;
    }
 }

 @media (max-width: 800px) {
    #gallery {
     -moz-column-count:    2;
     -webkit-column-count: 2;
     column-count:         2;
     margin-bottom: -24em;
    }
    
 }

 @media (max-width: 570px) {
    #gallery {

     margin-bottom: -18em;
    }
    #textDesaperta {
        padding: 0 2em;
    }
 }

 @media (max-width: 400px) {
    #gallery {
     -moz-column-count:    1;
     -webkit-column-count: 1;
     column-count:         1;
     margin-bottom: 0;
    }

    #textDesaperta {
        padding: 0 1em;
    }

   




 }

 /* GALERIA PERSONAGENS */

.galeriaGeral{
   
    display: flex;
        width: 84%;
        text-align: center;
        margin: auto; 
}
.galeriaInside{
  
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 10px auto;
    position: relative;

    

}

.galeriaCelula{
    display: inline-block;
    width: 18%;
    min-width: 237px;

    margin: 12px; 
    margin-bottom: 40px;
}



.verTrailler{
    position: relative;
    bottom: 2em;
    left: -7em;
    z-index: 999;
}

.traillerLink{
    border: 0px solid #FFF; 
    padding: .8em 1.1em .8em 1.1em;
    background-color: black;
}


/* -------------------------------------------------------------------
GALLERY VHILS
------------------------------------------------------------------- */

.galeriaVhils{
   
    display: flex;
        width: 90%;
        text-align: center;
        margin: auto; 
}
.galeriaVhilsInside{
  
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 10px auto;
    position: relative;

}

.galeriaVhilsCelula{
    display: inline-block;
    width: 45%;
    min-width: 237px;

    margin: 22px; 
    margin-bottom: 40px;
}

.verVhilsTrailler{
    position: relative;
    bottom: 2em;
    left: -6.51em;
    z-index: 999;
}

.traillerVhilsLink{
    border: 0px solid #FFF; 
    padding: .8em 1.1em .8em 1.1em;
    background-color: black;
}

/* -------------------------------------------------------------------
GALLERY MEDIA
------------------------------------------------------------------- */

.galeriaMedia{
   
    display: flex;
        width: 90%;
        text-align: center;
        margin: auto; 
}
.galeriaMediaInside{
  
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 10px auto;
    position: relative;

}

.galeriaMediaCelula{
    display: inline-block;
    width: 28%;
    min-width: 237px;

    margin: 27px; 
    margin-bottom: 40px;
}





/* -------------------------------------------------------------------
GALLERY LOJA
------------------------------------------------------------------- */

.galeriaLoja{
   
    display: flex;
        width: 80%;
        text-align: center;
        margin: auto; 
}
.galeriaLojaInside{
  
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 15px auto;
    position: relative;

}

.galeriaLojaCelula{
    display: inline-block;
    width: 25%;
    min-width: 230px;

    margin: 48px 27px 27px 27px; 
    margin-bottom: 40px;
}





.espacito{
    margin-top: 22em;
}

.menuMusica{
    width: 59%;
}

.logosInicio {
    width: 50%; position: relative; bottom: -5em; left: 3em; opacity: .6;
    animation-name: logos;
    animation-duration: 2s;
}
  
  @keyframes logos {
    0%   {opacity: 0; top:-2em;}
    100% {opacity: 0.6; top:5em;}
  }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------
MEDIA QUERIES SPECS      ------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (max-width: 768px) {

    .menuMusica{
        width: 69%;
    }

    .logosInicio {
        width: 100%;
    }

    .video01{
        height: 119%;
        min-height: 119%;

        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-58%) translateY(-50%);

        position: fixed;
        top: 50%;
        left: 37%;
        width: 288%;
    } 


    .video02{
        width: 140%;
            height: auto;
        -webkit-transform: translateX(-15%);
        transform: translateX(-15%);
    }

    .videoAgradecimentos{
         width: 100%;
        height: auto;
        margin: 0 auto;
        text-align: center;
    }

    .seta {
        width: 6%;
    }

    .text-base {
       margin: 50px 1em 0 1em;
    }

    .text-personagens{
        font-size: 1.8em;
        text-align: left;
        width: 90%; 
        margin:3em auto;
    }

    .galeriaGeral{
            width: 100%;
    }
    .galeriaInside{
        width: 100%;
    }
    
    .galeriaCelula{
        width: 66%;
    }

    .verTrailler{

        left: -9.51em;

    }

    .text-apoios{
        font-size: 1.8em;
      text-align: left;
      width: 60%; 
       margin:0 auto
    }
    
    
  
/* GALERIA VHILS and MEDIA MAX 768px MOBILE */

    .galeriaVhilsCelula{
        display: inline-block;
        width: 100%;
        min-width: 237px;
    
        margin: 22px; 
        margin-bottom: 40px;
    }
    
    .verVhilsTrailler{
        position: relative;
        bottom: 2em;
        left: -6.51em;
        z-index: 999;
    }
    
    .traillerVhilsLink{
        border: 0px solid #FFF; 
        padding: .8em 1.1em .8em 1.1em;
        background-color: black;
    }

    .galeriaMediaCelula{
        display: inline-block;
        width: 100%;
        min-width: 237px;
    
        margin: 22px; 
        margin-bottom: 40px;
    }





    .espacito{
        margin-top: 26em;
    }



}











.scroll-wrapper {text-align:center;}
.scroll {   
    font-size: 30px;
    color: #ECECEC;
    
    
   -webkit-animation: scrolling 3s ease infinite;
   -moz-animation: scrolling 3s ease infinite;
   -o-animation: scrolling 3s  ease infinite;
   animation: scrolling 3s ease infinite;
}

@keyframes scrolling {
  0% {
    transform: translate(0);
  }
 
  50% {
    transform: translate(0,40px);}

 
  100% {
     transform: translate(0);
  }
}




/*PRELOADING------------ */
#overlayer {
  width:100%;
  height:100%;  
  position:absolute;
  z-index:19999;
  background:#000;
}

   
        
    .menusao {
        float: center; 
        min-width: 3em; 
        border: 1px dotted #FFF; 
        padding: 7px; 
        margin: 5px;
    }