/**
*  Folhas de estilos da pagina sobre
*/

.fixed {
   background-position: 50% 120px;
   background-size: 100% auto;
   background-image: url(/imagens/banner_portfolio.jpg);
}


#secao01 #banner {
   position: relative;
   width: 100%;
}


#secao02 {
   padding: 130px 0;
}
#secao02 div.small:first-child {
   display: table;
}
#secao02 #texto {
   margin-bottom: 60px;
   font-size: 2em;
   font-family: roboto_slablight;
}
#secao02 #texto span {
   display: block;
   width: 40px;
   height: 40px;
   margin: 40px 60px 0 0;
   float: left;
   background-color: var(--vermelho);
}
#secao02 #texto > div {
   display: table-cell;
   padding: 0;
}
#secao02 #texto > div p:first-child {
   margin-top: 0;
}
#secao02 #btn_qualasua {
   float: right;
}


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

#secao03 .box {
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: cover;
}
#secao03 .box a:link,
#secao03 .box a:visited {
   color: #fff;
}
#secao03 .box a:hover,
#secao03 .box a:active {
   color: #fff;
   text-decoration: none;
}
#secao03 .box a {
   display: block;
   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: 1.5em;
   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;
}

#secao05 {
   padding: 100px 0;
}



@media only screen and (min-width: 1500px) and (orientation: landscape) {

   .fixed {
      /*background-size: auto;*/
   }

}



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

   #secao05 .small:first-child div {
      width: 100%;
   }

}


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

   #secao03.grid {
      grid-template-areas: '. .';
      grid-template-columns: 50%;
   }

}


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

   #secao01 > div {
      bottom: 10px;
   }

   #secao02 {
      padding: 80px 0;
   }
   #secao02 #texto {
      width: 90%;
      margin: 0 auto 40px auto;
      font-size: 1.8em;
      font-weight: bold;
   }
   #secao02 #texto span {
      margin: 15px 35px 0 0;
   }
   #secao02 #btn_qualasua {
      float: none;
      margin: 0 auto;
   }

}



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

   #secao03.grid {
      grid-gap: 30px 0;
      grid-template-areas: '.';
      grid-template-columns: 100%;
   }

   #secao03 .box a > div.over > div {
      font-size: 2.5em;
      left: 10px;
   }
}