@font-face {
   font-family: "Roboto";
   src: local(Roboto Thin), url("../fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../fonts/roboto/Roboto-Thin.woff") format("woff");
   font-weight: 100;
 }

 @font-face {
   font-family: "Roboto";
   src: local(Roboto Light), url("../fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../fonts/roboto/Roboto-Light.woff") format("woff");
   font-weight: 300;
 }

 @font-face {
   font-family: "Roboto";
   src: local(Roboto Regular), url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../fonts/roboto/Roboto-Regular.woff") format("woff");
   font-weight: 400;
 }

 @font-face {
   font-family: "Roboto";
   src: local(Roboto Medium), url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../fonts/roboto/Roboto-Medium.woff") format("woff");
   font-weight: 500;
 }

 @font-face {
   font-family: "Roboto";
   src: local(Roboto Bold), url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../fonts/roboto/Roboto-Bold.woff") format("woff");
   font-weight: 700;
 }

* {
   margin: 0;
   padding: 0;
   background-repeat: no-repeat;
}
body{
   font-family: Roboto;
   background-color: #f2f2f2;
}

header{
   margin: auto;
   max-width: 950px;
}

.fundo-1{
   background-image: linear-gradient(180deg, #f2f2f2, #f2f2f2, #f2f2f2, #ffe5e5);
   margin-top: 15px;
}
.fundo-2{
   background-image: linear-gradient(180deg, #ffffff, #f2f2f2)
}
.container{
   max-width: 950px;
   margin: auto;
}
.topo-menu{
   padding-top: 10px;
}
.topo-logo{
   margin: auto;
   width: 300px;
   float: left;
}
.topo-contato{
   max-width: 510px;
   margin: auto;
   padding-top: 15px;
   float: right;
}
.area-topo-logo{
  padding-top: 15px;
  height: 100px;
}

.topo-contato div{
   padding: 5px;
   display: inline-block;
   padding-left: 40px;
}
.topo-contato .fone{
   width: 150px;
   background-image: url(../imagens/icone-fone.jpg);
   background-position: left;
   background-size: 30px;
}
.topo-contato .endereco{
   width: 220px;
   background-image: url(../imagens/icone-local.jpg);
   background-position: left;
   background-size: 30px;
}

.area-menu{
   border-top: 1px solid #e0e0e0;
   max-width: 950px;
   margin: auto;
}
.area-menu svg{
   width: 20px;
   fill: #f2420c;
   vertical-align: middle;
   margin-right: 5px;
}
.btn-menu{
   font-weight: bold;
   padding: 16px;
   cursor: pointer;
   display: inline-block;
   color: black;
}
.btn-menu a{
   text-decoration: none;
   vertical-align: middle;
}
.btn-menu:hover{
   background-color: #ff511b;
   color: white;
}
.btn-menu-ativo{
   background-color: #ff511b;
   color: white;
}
.btn-menu-ativo svg{
   fill: white;
}
.btn-menu:hover svg{
   fill: white;
}
.topo-menu{
   -webkit-box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.51);
   -moz-box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.51);
   box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.51);
   background-color: white;
}

.topico{
   margin: 20px;
}
.topico .linha{
   display: block;
}
.topico h2{
   margin-bottom: 10px;
   color: #0277bd;
   font-weight: normal;
}

.topico p{
   margin-bottom: 10px;
   color: #616161;
   font-size: large;
   line-height: 25px;
}
.topico ul{
   list-style-type: none;
   line-height: 30px;
   margin-left: 30px;
   color: #616161;
   font-size: large;
}
.topico li span{
   margin-right: 10px;
}
.topico .campo{
   display: block;
   margin-bottom: 10px;
}
.topico label{
   display: block;
}
.topico input{
   height: 25px;
   width: 95%;
   max-width: 400px;
   padding: 5px 10px;
   font-size: medium;
}
.topico textarea{
   width: 95%;
   max-width: 400px;
   padding: 5px 10px;
   font-size: medium;
}
.topico button{
   padding: 7px 14px;
   background-color: #ff511b;
   color: white;
   border: none;
   font-size: medium;
}
.topico button:hover{
   background-color: #f44336;
}

.container-rodape{
   margin: auto;
   max-width: 950px;
   border-top: 1px solid #e0e0e0;
   color: #9e9e9e;
   padding-bottom: 1px;
}
.texto-rodape{
   text-align: center;
   margin: 20px 0px;
}

.container-foto-topo{
   max-width: 900px;
   margin: auto;
   height: 430px;
}
.coluna{
   display: inline-block;
}
.linha-menu{
   margin: 0px;
}
.linha{
   display: flex;
}
.quadro{
   width: 150px;
   height: 150px;
   background-image: linear-gradient(316deg, #ff5722, #ff7043);
   color: white;
   background-size: cover;
   -webkit-box-shadow: 8px 8px 3px -4px rgb(0 0 0 / 9%);
   -moz-box-shadow: 8px 8px 3px -4px rgba(0,0,0,0.09);
   box-shadow: 8px 8px 3px -4px rgb(0 0 0 / 9%);
}
.quadro-a{
   width: 600px;
   height: 110px;
   display: inline-flex;
   text-align: center;
   background-image: none;
   color: black;
   font-size: 30px;
   padding-top: 40px;
}
.icone-img-fone{
   background-image: url(../imagens/icone-fone.jpg);
}
.icone-img-local{
   background-image: url(../imagens/icone-local.jpg);
}
.offset-col-1{
   margin-left: 150px;
}
.quadro p{
   padding: 10px;
   width: 130px;
   float: left;
}
.quadro-a p{
   width: 100%;
   color: #0277bd;
}
.text-center{
   text-align: center;
}
.text-right{
   text-align: right;
}
.servico-1 { background-image: url(../imagens/servicos/12.jpg) }
.servico-2 { background-image: url(../imagens/servicos/19.jpg) }
.servico-3 { background-image: url(../imagens/servicos/23.jpg) }
.servico-4 { background-image: url(../imagens/servicos/06.jpg) }
.servico-5 { background-image: url(../imagens/servicos/10.jpg) }
.servico-6 { background-image: url(../imagens/servicos/14.jpg) }


.container-missao{
   margin: auto;
   margin-bottom: 50px;
   max-width: 764px;
}
.linha-missao{
   padding: 20px;
   margin-bottom: 10px;
}
.coluna-img-miss{
   padding-right: 10px;
   margin-right: 25px;
}
.fonte-missao{
   font-size: 25px;
   color: #0277bd;
}

.rota-separador{
   border-top: 1px solid rgb(188 184 184);
   height: 10px;
   width: 100%;
   margin: auto;
}
.separador{
   background-color: red;
   height: 3px;
   width: 50%;
   margin: auto;
   top: -1px;
   position: relative;
}

.container-p2{
   height: 800px;
}
.grupo{
   height: 162px;
   border: 1px solid;
}
.grupo div{
   display: table-cell;
}
.t-linha{
   float: left;
}
.t-coluna{
   float: left;
   display: flex;
}
.container-servico{
   height: 800px;
   max-width: 810px;
   margin: auto;
}

.container-missao {
   font-size: large;
   line-height: 26px;
}

.container-rotas{
   width: 90%;
   margin: auto;
   margin-top: 40px;
   height: 100%;
   padding-bottom: 50px;
}
.titulo-rotas{
   font-size: 25px;
   text-align: center;
   margin: auto;
   padding-bottom: 15px;
   max-width: 600px;
}
.quadro-rotas{
   background-image: url('../imagens/rotas.png');
   background-repeat: no-repeat;
   background-position: left;
   background-position-x: 100px;
   height: 600px;
}
.rota-texto{
   font-size: 18px;
   position: relative;
   height: 50px;
}
.rota-texto-an { left: 83px; top: 103px; }
.rota-texto-cb { left: -25px; top: 285px; }
.rota-texto-rt { left: -149px; top: 489px; }
.rota-texto-rb { left: 9px; top: 560px; }
.rota-texto-du { left: 211px; top: 484px; }
.rota-texto-fd { left: 143px; top: 287px; }
.rota-texto-ba { left: 40px; top: 103px; }

.lista{
   list-style-type: none;
   line-height: 37px;
   padding-left: 40px;
   font-size: large;
}
.lista-texto span{
   padding-right: 7px;
}
.lista-rotas{
   display: none;
}
.container-servicos{
   width: 90%;
   margin: auto;
   padding-bottom: 50px;
}

.whats{
   cursor: pointer;
   position: fixed;
   bottom: 15px;
   right: 15px;
   height: 70px;
}

/* HEX CONTENT */
:root {
   --scale: 0px;
   --scale-art: 0px;

   --h-col: calc(47px + var(--scale));
   --h-col-v: calc(141px + var(--scale));

   --h-lin: calc(36px + var(--scale));
   --h-lin-v: calc(77px + var(--scale));

   --h-base-li: 0px;
   --h-base-col: 0px;
}

section{
   position: absolute;
}
article {
   position: absolute;
   width: calc(245px + var(--scale-art));
   height: calc(222px + var(--scale-art));
   clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
   background-color: #f4511e;
}
figure {
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 82%;
   color: #fff;
   text-align: center;
}
figure h2 {
   margin: 46px 0px 10px 0px;
}
.h-text-1 { padding: 0px 32px; }
.h-text-2 { padding: 0px 17px; }
.h-text-3 { padding: 0px 32px; }
.h-text-4 { padding: 0px 28px; }

.img-15-anos {
   position: absolute;
   top: -128px;
   left: 9px;
   z-index: 1;
}

.h-col-1 { left: calc(var(--h-base-col) + (0 * var(--h-col)) + (0 * var(--h-col-v))) }
.h-col-2 { left: calc(var(--h-base-col) + (1 * var(--h-col)) + (1 * var(--h-col-v))) }
.h-col-3 { left: calc(var(--h-base-col) + (2 * var(--h-col)) + (2 * var(--h-col-v))) }
.h-col-4 { left: calc(var(--h-base-col) + (3 * var(--h-col)) + (3 * var(--h-col-v))) }

.h-li-1 { top: calc(var(--h-base-li) + (0 * var(--h-lin)) + (0 * var(--h-lin-v))) }
.h-li-2 { top: calc(var(--h-base-li) + (1 * var(--h-lin)) + (1 * var(--h-lin-v))) }
.h-li-3 { top: calc(var(--h-base-li) + (2 * var(--h-lin)) + (2 * var(--h-lin-v))) }
.h-li-4 { top: calc(var(--h-base-li) + (3 * var(--h-lin)) + (3 * var(--h-lin-v))) }
.h-li-5 { top: calc(var(--h-base-li) + (4 * var(--h-lin)) + (4 * var(--h-lin-v))) }
.h-li-6 { top: calc(var(--h-base-li) + (5 * var(--h-lin)) + (5 * var(--h-lin-v))) }

.h-cel-cor-a { background-color: #f2e4d4 }
.h-cel-cor-b { background-color: #e9e5e1 }

.h-img-1 { background-image: url(../imagens/hex_1.jpg?v5); background-size: cover }
.h-img-2 { background-image: url(../imagens/hex_2.jpg?v5); background-size: cover }
.h-img-3 { background-image: url(../imagens/hex_3.jpg?v5); background-size: cover }
.h-img-4 { background-image: url(../imagens/hex_4.jpg?v5); background-size: cover }
.h-img-15-anos { background-image: url(../imagens/15_anos.png); background-size: cover }



/* Ondas */
.waves {
   position:relative;
   width: 100%;
   height:15vh;
   margin-bottom:-7px; /*Fix for safari gap*/
   min-height:100px;
   max-height:150px;
}

.parallax > use {
animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
   transform: translate3d(-90px,0,0);
}
100% {
   transform: translate3d(85px,0,0);
}
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
.waves {
   height:100px;
   min-height:40px;
}
}


@media screen and (max-width: 915px) {
   .quadro-a {
      height: 77px;
      padding-top: 0px;
  }
   .t-linha {
      float: none;
      width: 620px;
      margin: auto;
  }
  .offset-col-1 {
      margin-left: 0px;
   }
   .t-coluna {
      margin: 5px;
  }
  .container-foto-topo{
      height: 550px;
  }
}
@media screen and (max-width: 850px) {
   .quadro-rotas{
      display: none;
   }

   .lista-rotas{
      display: block;
   }
}
@media screen and (min-width: 806px) {
   .area-topo-logo{
      margin-left: 20px;
   }
}
@media screen and (max-width: 805px) {
   .topo-logo{
      display: block;
      float: none;
   }
   .topo-contato{
      display: block;
      float: none;
      width: 465px;
   }
   .area-topo-logo {
      height: 160px;
      width: 457px;
      margin: auto;
  }
  .container-missao {
      max-width: 660px;
   }
  .coluna-img-miss{
      width: 70px;
   }
   .coluna-img-miss img{
      width: 70px;
   }
   .container-servico{
      max-width: 630px;
   }
   #art-3 { display: none; }
   #art-6 { display: none; }

   :root {
      --h-base-li: 14px;
      --h-base-col: -7px;
   }
}

@media screen and (max-width: 655px) {
   .text-right {
      text-align: right;
      width: 279px;
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: flex-end;
  }
  .quadro p {
      padding: 10px;
      float: right;
      width: auto;
   }
   .container-foto-topo {
      max-width: 450px;
      margin: auto;
      height: 1000px;
  }
  .quadro-a {
      width: auto;
      margin-bottom: 25px
  }
  .t-linha {
      width: auto;
      float: none;
  }
  .t-coluna {
      width: auto;
      float: none;
  }
   .container-missao {
      max-width: 454px;
      margin-bottom: 0px;
  }
   .container-missao .coluna-img-miss {
      display: none;
   }
   .container-servico{
      max-width: 360px;
      height: 900px;
      overflow: hidden;
   }

   :root {
      --h-base-li: 124px;
      --h-base-col: -231px;
   }

   #art-4 { display: none; }
   #art-7 { display: none; }

   figure h2 {
      font-size: larger;
   }
   figure p {
      font-size: smaller;
   }
   .img-15-anos {
      top: -65px;
      left: 29px;
      width: 321px;
  }
  .lista {
      padding-left: 0px;
   }
}

@media screen and (max-width: 485px) {
   .area-topo-logo {
      height: 210px;
      width: 260px;
  }
  .topo-logo {
      width: 260px;
   }
   .topo-logo img{
      width: 260px;
   }
  .topo-contato{
      width: 270px;
      margin-left: 0px;
   }
   .linha-missao {
      padding: 20px;
      margin-bottom: 10px;
  }
  :root {
      --scale: -19px;
      --scale-art: -52px;
      --h-base-li: 122px;
      --h-base-col: -147px;
      --h-col: calc(52px + var(--scale));
      --h-col-v: calc(135px + var(--scale));
      --h-lin: calc(48px + var(--scale));
   }
   .container-servico {
      height: 746px;
  }
}