@charset "ISO-8859-1";

/***
*  Folhas de estilo da homepage.
*/

#secao01 {
   display: block;
   width: 100%;
   height: auto;
}

#secao02 {
   display: block;
   overflow: hidden;
   width: 100%;
   height: auto;
   background-color: #000;
}
#secao02 img {
   width: 100%;
   opacity:0.85;
   -moz-opacity: 0.85;
   filter: alpha(opacity=85);
}


#secao03.grid {  /* Aqui eh a section com id secao03 e classe grid, por isso não pode separar.*/
   grid-gap: 0;
   grid-template-areas: '. .' '. .';
}
#secao03 .box a {
   display: block;
   width: 100.2%;
   height: 100%;
   color: #eee;
}
#secao03 .box img {
   width: 100%;
   height: 100%;
}
#secao03 .port_qrd {
   position: relative;
}
#secao03 .box a > div.over {
   position: absolute;
   display: none;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, .5);
}
#secao03 .box a > div.over > div {
   position: absolute;
   display: none;
   bottom: 30px;
   left: 30px;
   font-family: roboto_slabbold;
   font-size: 2em;
   text-shadow: 2px 2px 2px #000000;
}
#secao03 .box a > div.over > div > span {
   color: var(--vermelho);
   font-size: 1.2em;
   text-shadow: 1px 1px 1px #000000;
}



@keyframes loaderUp {
   20% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
   }

   40%,
   45% {
      -webkit-transform: translate3d(0, 20px, 0);
      transform: translate3d(0, 20px, 0);
   }

   to {
      -webkit-transform: translate3d(0, -1500px, 0);
      transform: translate3d(0, -1800px, 0);
   }
}
.loaderUp {
   -webkit-animation-name: loaderUp;
   animation-name: loaderUp;
   -webkit-animation-duration: 3s;
   animation-duration: 5.1s;
}



@media only screen and (max-width: 1200px) { }
@media only screen and (max-width: 1024px) { }
@media only screen and (max-width: 800px) and (orientation: portrait) {  }


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

   /*#secao03.grid {  /* Aqui eh a section com id secao03 e classe grid, por isso não pode separar.* /
      grid-gap: 0;
      grid-template-areas: '.';
   }*/

   .zooing, .zooing:hover {
      animation-name: none;
   }

}


@media only screen and (max-width: 480px) and (orientation: landscape) {  }
@media only screen and (max-width: 320px) and (orientation: portrait) {  }