/*
	Autor: Diego Santos
	Última atualização: 03/01/2017
*/

* {
   margin: 0 auto;
   padding: 0;
}

.logotipo {
   margin-top: 2px;
   display: inline-block;
}

.bloco-logo {
   float:right;
   margin-top: 15px;
   display: inline-block;
   color: white;
}

.bcolor {
   color: rgba(49, 168, 224, 1);
}

.ccolor {
   color: orange;
}

.imagens-servico {
   float: left;
   margin-left: 20px;
   margin-right: 20px;
   margin-bottom: 20px;
}

.imagens-servico2 {
   float: left;
   margin-right: 20px;
   margin-bottom: 20px;
}

.h3-negrito {
   color: orange;
   font-weight: bold;
   text-transform: uppercase;
   text-shadow: 2px 2px rgba(0, 0, 123, .8);

}

.h3-black {
   color: grey;
   font-weight: bold;
   text-transform: uppercase;
   text-shadow: 1px 1px rgba(0, 0, 0, .8);
   font-size: 20px;
}


.p-margin-right {
   margin-right: 20px;
}

.text-hover:hover {
   border-bottom: 2px solid orange;
   cursor: pointer;
}

.carousel-margin {
   margin-top: 20px;
}

.nav-escuro {
   background: rgba(0, 27, 48, 1);
}

.linha-azul {
   border: 1px solid rgba(51, 175, 227, 1);
   width: 100%;
}


/* Footer */
footer#rodape ul a li {
   color: #ffffff;
   font-size: 18px;
   padding: 2px;
}


/* Página de Serviços */

.titulo-fazemos {
   color: #ffffff;
   background: rgba(0, 0, 0, .3);
   font-weight: 400;
   text-transform: uppercase;
   padding: 10px;
}

.titulo-como-fazemos {
   text-transform: uppercase;
   margin-bottom: 20px;
}

.titulo-diferenciais {
   color: #ffffff;
   text-transform: uppercase;
}

/* Footer */
footer#rodape {
   background: rgba(0, 27, 48, 1);
}

.titulo-footer {
   color: orange;
   border-bottom: 2px solid orange;
   line-height: 40px;
}

.linha-azul-footer {
   border: 1px solid rgba(51, 175, 227, 1);
   margin-top: -6px;
   margin-left: 0px;
   width: 60%;
}

.lista-color-link {
   color: #ffffff;
}

.lista-color-link:hover {
   color: rgba(51, 175, 227, 1);
}

.lista-color {
   color: #ffffff;
}

footer#rodape .text-rodape {
   color: #ffffff;
   margin-top: 30px;
}

section#section-empresa span.b2c-formato {
   font-weight: bold;
}


@media screen and (max-width:767px) {
   .btn-menu {
      position: relative;
      display:block;
      top: 85px;
      left: 40px;
      font-size: 10px;
      width: 45px;
      padding: 2px 2px 2px 2px;
   }

   .navbar-brand {
     display: none;
   }
  
  .navbar-header {
     display: none;
  }

   .bloco-logo {
      display: none;
   }

   .logotipo {
      display: none;
   }

   .list-unstyled {
      display: inline-block;
      margin-left: 20%;
   }


   .lista-color-link {
      color: #ffffff;
      font-size: 18px;
      border: 1px #4e667d solid;
      height: 30px;
      text-decoration: none;
      white-space: nowrap;
      width: 160px;
      text-align: left;
      display: inline-block;
      margin-top: 2px;
      margin-bottom: 2px;
      padding-left: 5px;
      padding-top: 2px;
      clip: rect(2px, auto, 2px, auto);
   }

   a.navbar-text {
      display: none;
   }

   div#principal {
      width: 100%;
      height: 350px;
      background-image: url("../imagens/trigo-inicial.jpg");
      background-repeat: no-repeat;
      background-position: bottom;
      border-top: 50px solid rgba(0, 27, 48, 1);
   }

   div#principal p#text-principal {
      background: rgba(0, 0, 0, .4);
      width: 100%;
      margin-top: 20px;
      padding: 5px 5px;
      text-align: center;
      color: #ffffff;
      opacity: 1;
      transition: opacity 2s;
      -webkit-transition: opacity 2s;
      -moz-transition: opacity 2s;
      font-size: 13px;
   }

   .text-hover {
      border-right: 2px solid #ffffff;
      border-bottom: 2px solid #ffffff;
      opacity: 1;
   }

   .text-hover:hover {
      border-bottom: 2px solid orange;
      cursor: pointer;
      opacity: 1;
   }

   .imagens-servico {
      width: 70px;
      float: left;
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 20px;
   }

   .imagens-servico2 {
      width: 70px;
      float: left;
      margin-right: 20px;
      margin-bottom: 20px;
   }

   .h3-negrito {
      font-size: 14px !important;
   }

   .p-margin-right {
      margin-right: 20px;
   }



   /* Footer */
   footer#rodape ul a li {
      color: #ffffff;
      font-size: 18px;
      padding: 2px;
   }

   /* Página de Fotos */

   div#img-principal-pag-fotos {
      width: 100%;
      height: 500px;
      background-image: url("../imagens/Batismo_2017/35.jpg");
      background-repeat: no-repeat;
      background-position: bottom;
   }

   section#section-fotos div#img-principal-pag-fotos h1#text-fotos {
      background: rgba(0, 0, 0, .4);
      width: 100%;
      height: 100%;
      padding: 5px 5px;
      text-align: center;
      margin-top: 20px;
      color: #ffffff;
      font-size: 12px;
      transition: opacity 2s;
      -webkit-transition: opacity 2s;
      -moz-transition: opacity 2s;
      -o-transition: opacity 2s;
   }



   /* Página de Radio */

   div#img-principal-pag-radio {
      width: 100%;
      height: 300px;
      background-image: url("../imagens/trigo-inicial.jpg");
      background-repeat: no-repeat;
      background-position: bottom;
      border-top: 50px solid rgba(0, 27, 48, 1);
   }

   section#section-radio div#img-principal-pag-radio h1#text-radio {
      background: rgba(0, 0, 0, .4);
      width: 100%;
      padding: 5px 5px;
      text-align: center;
      margin-top: 20px;
      color: #ffffff;
      font-size: 12px;
      transition: opacity 2s;
      -webkit-transition: opacity 2s;
      -moz-transition: opacity 2s;
      -o-transition: opacity 2s;
   }



   /* Página de Servicos */
   div#img-principal-pag {
      width: 100%;
      height: 180px;
      background-image: url("../img/servicos.jpg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
      border-top: 50px solid rgba(0, 27, 48, 1);
   }

   div#o-que-fazemos {
      margin-top: -10px;
      margin-bottom: -30px;
      background: rgba(0, 27, 48, 1);
      background-image: url("../img/bg-fazemos.jpg");
      background-position: bottom;
      padding: 20px 20px;
   }

   .titulo-fazemos {
      color: #ffffff;
      text-transform: uppercase;
      font-size: 16px;
   }

   .titulo-como-fazemos {
      text-transform: uppercase;
      margin-bottom: 20px;
      font-size: 25px;
   }

   .titulo-diferenciais {
      color: #ffffff;
      text-transform: uppercase;
      font-size: 25px;
   }

   div.conteudo-fazemos {
      display: block;
      opacity: 1 !important;
      width: 100%;
      padding: 20px 20px 10px 0px;
      box-shadow: 4px 4px rgba(0, 0, 0, .2);
      background: rgba(209, 219, 227, 1);
   }

   div.conteudo-fazemos h3 {
      color: rgba(16, 76, 123, 1);
      font-weight: bold;
      font-size: 15px;
      text-indent: 0px;
      text-transform: uppercase;
   }


   div.conteudo-fazemos .icone {
      width: 25px;
      display: inline-block;
      margin-right: 10px;
   }

   div.conteudo-fazemos h4 {
      color: rgba(23, 111, 180, 1);
      text-align: left;
      font-size: 12px;
      display: inline-block;
      white-space: normal;
   }



   hr.orange {
      width: 80%;
      margin-left: 0px;
      border: 1.5px solid orange;
   }

   hr {
      width: 50%;
      margin-left: 0px;
      margin-top: -10px;
      border: 1.5px solid rgba(51, 175, 227, 1);
   }

   div.conteudo-agendamento {
      display: block;
      margin-bottom: 10px;
   }

   div.conteudo-callcenter {
      position: relative;
      margin-bottom: 40px;
   }

   div.conteudo-monitoramento {
      position: relative;
      margin-bottom: 40px;
   }

   div.conteudo-reversa {
      position: relative;
      margin-bottom: 40px;
   }

   div.conteudo-fup {
      position: relative;
      margin-bottom: 30px;
   }



   /* Como fazemos - Tela GRANDE */
   #img-metodo-servico {
      margin-bottom: 30px;
      display: none;
   }

   div#como-fazemos {
      width: 700px;
      margin-top: 0px;
      text-align: center;
      display: none;
   }

   #frame-servicos {
      width: 600px;
      height: 450px;
      margin-bottom: 30px;
      display: none;
   }

   /* Como fazemos - Tela MÉDIA */
   #img-metodo-servico-md {
      width: 100%;
      margin-bottom: 20px;
   }

   div#como-fazemos-md {
      width: 100%;
      margin-top: 0px;
      text-align: center;
   }

   #frame-servicos-md {
      width: 470px;
      height: 400px;
      margin-top: 30px;
      margin-bottom: 30px;
      display: none;
   }

   div#diferenciais {
      clear: both;
      background: orange;
      padding: 20px 20px;
   }

   div#diferenciais #conteudo-diferenciais {
      width: 100%;
   }

   ul#lista-diferenciais {
      list-style: none;
      padding: 20px 20px;
   }

   div#accordion {
      width: 100%;
   }

   div#accordion h3 {
      font-weight: bold;
      border: 1px solid black;
      background: #002748;
      color: #ffffff;
      border-radius: 12px;
      padding: 5px;
      text-transform: uppercase;
      text-align: center;
      font-family: Calibri, sans-serif;
      font-size: 12px;
   }

   div#accordion h3:hover {
      cursor: pointer;
   }

   div#accordion h3:active {
      background: rgba(49, 168, 224, 1);
      color: white;
   }

   div#accordion div {
      background: rgba(255, 202, 102, 1);
      padding: 5px;
      border-radius: 10px;
   }

   div#accordion div p {
      color: 002748;
      font-family: Calibri;
      font-weight: bold;
      font-size: 13px;
      text-align: justify;
   }

   /* Página de contato */
   section#contato {
      margin-top: 80px;
   }

   div#area-esquerda {
      width: 100%;
      height: 600px;
      margin-bottom: 30px;
      margin-top: 20px;
      border: 3px solid orange;
      box-shadow: 2px 2px rgba(51, 175, 227, 1);
      padding: 5px;
   }

   section#contato hgroup h1 {
      margin-bottom: 0px;
      color: orange;
      text-shadow: 2px 2px rgba(42, 42, 42, .7);
      font-size: 30px;
   }

   section#contato hgroup h3 {
      margin-top: 5px;
      color: rgba(51, 175, 227, 1);
      text-shadow: 1px 1px rgba(42, 42, 42, .7);
      text-indent: 5%;
   }

   section#contato hgroup h5 {
      text-align: center;
      color: rgba(51, 175, 227, 1);
      font-weight: bold;
      margin-top: 30px;
   }

   table#table-contato {
      margin-left: 0px;
      position: relative;
   }

   table#table-contato, td, th {
      padding: 1px;
   }

   .largura-formulario {
      height: 90px !important;
   }

   .alinha-botoes {
      text-align: right;
   }

   .botao-formulario {
      padding: 3px;
      width: 70px;
      background: orange;
      color: #ffffff;
      font-weight: bold;
   }

   .botao-formulario:hover {
      background: rgba(51, 175, 227, 1);
   }

   section#contato div#area-direita {
      width: 100%;
      border: 3px solid orange;
      box-shadow: 2px 2px rgba(51, 175, 227, 1);
      padding: 5px;
   }

   section#contato div#area-direita table {
      margin-left: 0px;
      margin-top: 30px;
   }

   .contato-h1-mobile {
      font-size: 19px !important;
      color: orange;
      text-shadow: 1px 2px rgba(42, 42, 42, .7) !important;
      display: inline-block;
      white-space: nowrap;
   }

   .img-contato {
      width: 70px;
   }

   /* Formulário para mobile */
   .campo-nome {
      width: 90%;
   }

   .label-email {
      position: absolute;
      left: 0px;
      top: 40px;
   }

   .campo-email {
      position: absolute;
      left: 0px;
      top: 60px;
      width: 100%;
   }

   .label-telefone {
      position: absolute;
      left: 0px;
      top: 100px;
   }

   .campo-telefone {
      position: absolute;
      left: 0px;
      top: 120px;
      width: 100%;
   }

   .label-empresa {
      position: absolute;
      left: 0px;
      top: 160px;
   }

   .campo-empresa {
      position: absolute;
      left: 0px;
      top: 180px;
      width: 100%;
   }

   .label-assunto {
      position: absolute;
      left: 0px;
      top: 220px;
   }

   .campo-assunto {
      position: absolute;
      left: 0px;
      top: 240px;
      width: 100%;
   }

   .label-mensagem {
      position: absolute;
      left: 0px;
      top: 280px;
   }

   .campo-mensagem {
      position: absolute;
      left: 0px;
      top: 300px;
      width: 100%;
   }

   .enviar {
      position: absolute;
      top: 400px;
      left: 116px;
   }

   .reset {
      position: absolute;
      top: 400px;
      left: 194px;
   }



   /* Página de Recursos */



   section#section-recursos div#img-principal-pag-contatos h1#text-recursos {
      background: rgba(0, 27, 48, .4);
      width: 100%;
      padding: 15px 15px 15px 15px;
      text-align: justify;
      color: #ffffff;
      font-size: 13px;
      transition: opacity 2s;
      -webkit-transition: opacity 2s;
      -moz-transition: opacity 2s;
      -o-transition: opacity 2s;
   }


   div#img-principal-pag-contatos {
      width: 100%;
      height: 300px;
      background-image: url("../imagens/doacao.jpg");
      background-repeat: no-repeat;
      border-top: 50px solid rgba(0, 27, 48, 1);
   }


   div#img-principal-pag-recursos {
      width: 100%;
      height: 300px;
      background-image: url("../imagens/trigo.jpg");
      background-repeat: no-repeat;
      background-position: top;
      border-top: 50px solid rgba(0, 27, 48, 1);
   }

   section#section-recursos h1#text-recursos {
      background: rgba(0, 27, 48, .4);
      width: 100%;
      padding: 15px 15px 15px 15px;
      text-align: justify;
      color: #ffffff;
      font-size: 14px;
      transition: opacity 2s;
      -webkit-transition: opacity 2s;
      -moz-transition: opacity 2s;
      -o-transition: opacity 2s;
   }

   .content-app {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
   }


   figure#foto1 {
      margin-top: 20px;
   }

   figure#foto1 img#foto-recursos1 {
      border: 5px solid orange;
      border-radius: 10px;
      width: 80%;
      margin: 0 auto;
      display: block;
      margin-left: 30px;
   }

   figure#foto2 {
      margin-top: 20px;
   }

   figure#foto2 img#foto-recursos2 {
      border: 5px solid orange;
      border-radius: 10px;
      width: 80%;
      margin: 0 auto;
      display: block;
      margin-left: 30px;
   }

   figure#foto3 {
      margin-top: 20px;
   }

   figure#foto3 img#foto-recursos3 {
      border: 5px solid orange;
      border-radius: 10px;
      width: 80%;
      margin: 0 auto;
      display: block;
      margin-left: 30px;
   }


   section h1#h1-recursos {
      color: orange;
      text-shadow: 2px 2px rgba(42, 42, 42, .7);
      margin-left: 20px;
      margin-right: 20px;
   }


   section h2#h2-recursos {
      color: orange;
      text-shadow: 2px 2px rgba(42, 42, 42, .7);
      margin-left: 10%;
   }


   section#section-recursos p#texto-recursos {
      text-align: justify;
      margin: 20px 40px 20px 20px;
   }

   section#section-recursos hr.orange-recursos-hr {
      width: 99%;
      margin-top: 10px;
      border: 1px solid orange;
   }

   section#section-recursos hr.orange-recursos {
      border: 1px solid orange;
      width: 85%;
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 20px;
   }

   section#section-recursos hr.blue-recursos {
      margin-left: 20px;
      margin-right: 20px;
      margin-top: -11px;
      width: 65%;
   }

   /* Página de Empresa */
   div#img-principal-pag-empresa {
      width: 100%;
      height: 195px;
      background-image: url("../img/bg-empresa.png");
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 100%;
      border-top: 50px solid rgba(0, 27, 48, 1);
   }

   section#section-empresa div#img-principal-pag-empresa h1#text-empresa {
      background: rgba(0, 27, 48, .7);
      width: 100%;
      padding: 5px 5px;
      margin-top: 0px;
      text-align: justify;
      color: #ffffff;
      font-size: 14px;
      transition: opacity 2s;
      -webkit-transition: opacity 2s;
      -moz-transition: opacity 2s;
      -o-transition: opacity 2s;
   }

   div#video-empresa-area {
      margin-top: 20px;
   }

   video#video-empresa {
      border: 5px solid orange;
      border-radius: 5px;
      width: 100%;
   }

   video#video-empresa:hover {
      cursor: pointer;
   }

   section h1#h1-empresa {
      color: orange;
      text-shadow: 2px 2px rgba(42, 42, 42, .7);
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 20px;
      text-align: left;
   }

   section#section-empresa p#texto-empresa {
      text-align: justify;
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 60px;
   }

   section#section-empresa hr.orange-empresa {
      border: 1px solid orange;
      width: 91%;
      margin-left: 20px;
      margin-right: 20px;
      float: left;
   }

   section#section-empresa hr.blue-empresa {
      width: 70%;
      margin-left: 20px;
      margin-right: 20px;
      float: left;
   }

   /* Página de Suporte */
   .pag-suporte {
      margin-top: 100px;
   }

   section#section-suporte h1 {
      margin-left: 20px;
   }



   .titulo-app {
      padding: 0 0;
      margin: 5px 0 0 0;
      font-size: 150%;
      color: rgba(0, 27, 48, 1);
   }

   .link-app:hover {
      text-decoration: none;
   }

   .link-app img {
      margin-bottom: 5px;
   }

   .iradio {
      display: block;
      float: left;
      width: 315px;
      height: 40px;
      overflow: hidden;
      margin-top: 70px;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
   }

   .radio-center {
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
      width: 315px;
      text-align: center;
   }

   .titulo-fazemos {
      color: #ffffff;
      background: rgba(0, 0, 0, .3);
      font-weight: 400;
      text-transform: uppercase;
      padding: 10px;
      font-size: 14px;
   }
}


@media (min-width:768px) {

   .largura-modal-md {
      width: 90%;
   }


   .alinha-img-modal {
      text-align: center;
   }

   .largura-img-modal {
      width: 82%;
   }


   .link-app {
      display: none;
   }

   body nav div a.navbar-text {
      display: block;
      font-size: 17px;
      padding-right: 16px;
   }

   .nav-menu {
      width: 90%;
   }

   .btn-menu {
      display: none;
   }


   div#principal {
      width: 100%;
      height: 500px;
      background-image: url("../imagens/trigo.jpg");
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 100%;
      border-top: 50px solid rgba(0, 27, 48, 1);
   }


   div#principal p#text-principal {
      background: rgba(0, 0, 0, .4);
      width: 500px;
      margin-top: 20px;
      padding: 5px 5px;
      text-align: center;
      color: #ffffff;
      font-size: 20px;
      opacity: 0,5;
      transition: opacity 3s;
      -webkit-transition: opacity 5s;
      -moz-transition: opacity 5s;
      -o-transition: opacity 5s;
   }

      .h3-negrito {
      font-size: 20px !important;
   }


   div#principal:hover p#text-principal {
      opacity: 1;
   }

   .text-hover {
      border-right: 2px solid #ffffff;
      border-bottom: 2px solid #ffffff;
      opacity: 1;
   }

   /* Página de Fotos */

   div#img-principal-pag-fotos {
      width: 1024px;
      height: 550px;
      background-image: url("../imagens/Batismo_2017/35.jpg");
      background-repeat: no-repeat;
      background-position: bottom;
   }

   section#section-fotos div#img-principal-pag-fotos h1#text-fotos {
      background: rgba(0, 27, 48, .4);
      width: 100%;
      height: 600px;
      display: inline-block;
      padding: 15px 15px 15px 15px;
      text-align: center;
      color: #ffffff;
      font-size: 24px;
      margin-top: 50px;
      transition: opacity 2s;
      -webkit-transition: opacity 2s;
      -moz-transition: opacity 2s;
      -o-transition: opacity 2s;
   }

   /* Página de Radio */
   div#img-principal-pag-radio {
      width: 100%;
      height: 500px;
      background-image: url("../imagens/trigo.jpg");
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 100%;
      border-top: 50px solid rgba(0, 27, 48, 1);
   }

   section#section-radio div#img-principal-pag-radio h1#text-radio {
      background: rgba(0, 27, 48, .4);
      width: 800px;
      display: inline-block;
      padding: 15px 15px 15px 15px;
      text-align: center;
      color: #ffffff;
      font-size: 24px;
      margin-top: 50px;
      transition: opacity 2s;
      -webkit-transition: opacity 2s;
      -moz-transition: opacity 2s;
      -o-transition: opacity 2s;
   }

   div#img-principal-pag-radio:hover p#text-radio {
      opacity: 1;
   }

   div#img-principal-pag-radio:hover p#text-radio {
      opacity: 1;
   }


   footer {
      clear: both;
   }

   div#o-que-fazemos {
      margin-top: 0px;
      background: rgba(0, 27, 48, 1);
      background-image: url("../img/bg-fazemos.jpg");
      background-position: bottom;
      padding: 20px 20px;
   }

   div.conteudo-fazemos {
      display: table;
      opacity: 1 !important;
      width: 90%;
      padding: 20px;
      box-shadow: 4px 4px rgba(0, 0, 0, .2);
      background: rgba(209, 219, 227, 1);
      margin-top: 30px;
      margin-bottom: 10px;
   }

   
  
   figure#foto1 img#foto-recursos1 {
      float: left;
      margin-top: 10px;
      margin-left: 10px;
      margin-right: 30px;
      margin-bottom: 10px;
      border: 10px solid orange;
      border-radius: 10px;
      width: 35%;
   }

   figure#foto2 img#foto-recursos2 {
      float: left;
      margin-top: 10px;
      margin-left: 10px;
      margin-right: 30px;
      margin-bottom: 10px;
      border: 10px solid orange;
      border-radius: 10px;
      width: 35%;
   }

   figure#foto3 img#foto-recursos3 {
      float: left;
      margin-top: 10px;
      margin-left: 10px;
      margin-right: 30px;
      margin-bottom: 10px;
      border: 10px solid orange;
      border-radius: 10px;
      width: 35%;
   }


   div.conteudo-fazemos h3 {
      color: rgba(16, 76, 123, 1);
      text-shadow: 1px 1px #dddddd;
      font-weight: 600;
      text-indent: 30px;
      text-transform: uppercase;
   }

   div.conteudo-fazemos h4 {
      color: rgba(23, 111, 180, 1);
      text-align: justify;
      margin-bottom: 30px;
      margin-left: 50px;
   }

   hr.orange {
      width: 80%;
      margin-left: 0px;
      border: 1.5px solid orange;
   }

   hr.azul {
      width: 50%;
      margin-left: 0px;
      margin-top: -10px;
      border: 1.5px solid rgba(51, 175, 227, 1);
   }

   div.conteudo-agendamento {
      display: block;
      position: relative;
      margin-bottom: 10px;
      margin-left: 50px;
    
   }

   div.conteudo-callcenter {
      position: relative;
      margin-bottom: 40px;
   }

   div.conteudo-monitoramento {
      position: relative;
      margin-bottom: 40px;
   }

   div.conteudo-reversa {
      position: relative;
      margin-bottom: 40px;
   }

   div.conteudo-fup {
      position: relative;
      margin-bottom: 30px;
   }

   div.conteudo-fazemos .icone {
      width: 30px;
      position: relative;
      left: -6px;
   }

   /* Tela GRANDE */

   #img-metodo-servico {
      float: left;
   }

   div#como-fazemos {
      width: 1180px;
      margin-top: 0px;
      padding: 20px 20px;
   }

   #frame-servicos {
      width: 500px;
      height: 450px;
      margin-bottom: 30px;
      float: right;
   }

   /* Tela MÉDIA */
   #img-metodo-servico-md {
      float: left;
      margin-left: -30px;
      width: 470px;
      height: 400px;
      display: none;
   }

   div#como-fazemos-md {
      width: 900px;
      margin-top: 0px;
      display: none;
   }

   #frame-servicos-md {
      width: 470px;
      height: 400px;
      margin-bottom: 30px;
      margin-right: -30px;
      float: right;
      display: none;
   }

   div#diferenciais {
      clear: both;
      background: orange;
      padding: 20px 20px;
   }

   div#diferenciais #conteudo-diferenciais {
      width: 1000px;
   }

   ul#lista-diferenciais {
      list-style: none;
      padding: 20px 20px;
   }

   div#accordion {
      width: 1000px;
   }

   div#accordion h3 {
      font-weight: bold;
      border: 1px solid black;
      background: #002748;
      color: #ffffff;
      border-radius: 12px;
      padding: 5px;
      text-transform: uppercase;
      text-align: center;
      font-family: Calibri, sans-serif;
      font-size: 25px;
   }

   div#accordion h3:hover {
      cursor: pointer;
   }

   div#accordion h3:active {
      background: rgba(49, 168, 224, 1);
      color: white;
   }

   div#accordion div {
      background: rgba(255, 202, 102, 1);
      padding: 5px;
      border-radius: 10px;
   }

   div#accordion div p {
      color: 002748;
      font-family: Calibri;
      font-weight: bold;
      font-size: 16px;
      text-align: justify;
   }

   /* Página de contato */
   section#contato {
      margin-top: 80px;
      padding: 20px;
   }

   div#area-esquerda {
      width: 55%;
      margin-left: 0px;
      margin-bottom: 30px;
      float: left;
   }

   section#contato hgroup h1 {
      margin-bottom: 0px;
      color: orange;
      text-shadow: 2px 2px rgba(42, 42, 42, .7);
   }

   section#contato hgroup h3 {
      margin-top: 5px;
      color: rgba(51, 175, 227, 1);
      text-shadow: 1px 1px rgba(42, 42, 42, .7);
      text-indent: 5%;
   }

   section#contato hgroup h5 {
      text-align: center;
      color: rgba(51, 175, 227, 1);
      font-weight: bold;
      margin-top: 30px;
   }

   table#table-contato {
      margin-left: 0px;
   }

   table#table-contato, td, th {
      padding: 5px 15px;
   }

   .largura-formulario {
      height: 90px !important;
   }

   .alinha-botoes {
      text-align: right;
   }

   .botao-formulario {
      padding: 3px;
      width: 70px;
      background: orange;
      color: #ffffff;
      font-weight: bold;
   }

   .botao-formulario:hover {
      background: rgba(51, 175, 227, 1);
   }

   .botao-formulario:active {
      color: #ffffff !important;
      font-size: 20px;
      border: 1px #4e667d solid;
      height: 22px;
      text-decoration: none;
      white-space: nowrap;
      min-width: 100px;
      text-align: left;
      display: table-cell;
      margin-top: 2px;
      margin-bottom: 2px;
   }

   section#contato div#area-direita {
      float: right;
      width: 43%;
   }

   section#contato div#area-direita table {
      margin-left: 0px;
      margin-top: 30px;
   }

   .img-contato {
      width: 70px;
   }



   /* Página de Recursos */

   div#img-principal-pag-contatos {
      width: 100%;
      height: 460px;
      background-image: url("../imagens/doacao.jpg");
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 100%;
      border-top: 50px solid rgba(0, 27, 48, 1);
   }

   section#section-recursos div#img-principal-pag-contatos h1#text-recursos {
      background: rgba(0, 27, 48, .4);
      width: 600px;
      display: inline-block;
      margin-top: 50px;
      padding: 15px 15px 15px 15px;
      text-align: justify;
      color: #ffffff;
      font-size: 16px;
      transition: opacity 2s;
      -webkit-transition: opacity 2s;
      -moz-transition: opacity 2s;
      -o-transition: opacity 2s;
   }



   div#img-principal-pag-recursos {
      width: 100%;
      height: 560px;
      background-image: url("../imagens/trigo.jpg");
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 100%;
      border-top: 50px solid rgba(0, 27, 48, 1);
   }

   section#section-recursos div#img-principal-pag-recursos h1#text-recursos {
      background: rgba(0, 27, 48, .7);
      width: 450px;
      margin-left: 63%;
      margin-top: 100px;
      padding: 15px 15px 15px 15px;
      text-align: justify;
      color: #ffffff;
      font-size: 14px;
      transition: opacity 2s;
      -webkit-transition: opacity 2s;
      -moz-transition: opacity 2s;
      -o-transition: opacity 2s;
   }


   section h1#h1-recursos {
      color: orange;
      text-shadow: 2px 2px rgba(42, 42, 42, .7);
      margin-left: 20px;
      margin-right: 20px;
   }

   section h2#h2-recursos {
      color: orange;
      text-shadow: 2px 2px rgba(42, 42, 42, .7);
      text-align: left;
      width: 100%;
      display: block;
   }


   .contato-h1-mobile {
      font-size: 25px !important;
      color: orange;
      text-shadow: 1px 2px rgba(42, 42, 42, .7) !important;
      display: inline-block;
      white-space: nowrap;
   }

   section#section-recursos p#texto-recursos {
      text-align: justify;
      margin-left: 20px;
      margin-right: 40px;
   }

   section#section-recursos hr.orange-recursos-hr {
      width: 99%;
      margin-top: 20px;
      border: 1px solid orange;
   }

   section#section-recursos hr.orange-recursos {
      border: 1px solid orange;
      width: 40%;
      margin-left: 20px;
      margin-right: 20px;
      float: right;
   }


   section#section-recursos hr.blue-recursos {
      border: 1px solid rgba(51, 175, 227, 1);
      margin-right: 20px;
      width: 40%;
      margin-top: -13px;
   }



   div#video-empresa-area {
      margin-top: 20px;
   }

   video#video-empresa {
      float: right;
      margin-left: 20px;
      margin-right: 12px;
      border: 5px solid orange;
      border-radius: 5px;
      width: 437px;
      height: 249px;
   }

   video#video-empresa:hover {
      cursor: pointer;
   }

   section h1#h1-empresa {
      margin-bottom: 20px;
      margin-left: 20px;
      margin-top: -10px;
      color: orange;
      text-shadow: 2px 2px rgba(42, 42, 42, .7);
      text-align: left;
   }

   section#section-empresa p#texto-empresa {
      text-align: justify;
      margin-left: 20px;
      width: 59%;
   }

   section#section-empresa hr.orange-empresa {
      border: 1px solid orange;
      margin-left: 20px;
   }

   section#section-empresa hr.blue-empresa {
      border: 1px solid rgba(51, 175, 227, 1);
      margin-left: 20px;
      width: 48%;
      margin-top: -13px;
   }

   /* Página de Suporte */
   section#section-suporte {
      margin-top: 140px;
      width: 485px;
      text-align: center;
   }


   .content-app {
      text-align: center;
      width: 100%;
      display: block;
      float: left;
      margin-left: auto;
      margin-right: auto;
   }

   .titulo-app {
      padding: 0 0;
      margin: 5px 0 0 0;
      font-size: 150%;
      color: rgba(0, 27, 48, 1);
   }

   .link-app:hover {
      text-decoration: none;
   }

   .link-app img {
      margin-bottom: 5px;
   }

   .iradio {
      display: block;
      float: left;
      width: 530px;
      height: 50px;
      overflow: hidden;
      margin-top: 80px;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
   }

   .radio-center {
      margin-left: auto;
      margin-right: auto;
      margin-top: 30px;
      width: 530px;
      text-align: center;
   }

   .titulo-fazemos {
      color: #ffffff;
      background: rgba(0, 0, 0, .3);
      font-weight: 400;
      text-transform: uppercase;
      padding: 10px;
      font-size: 20px;
   }
}

@media (min-width:1200px) {

   figure#foto1 img#foto-recursos1 {
      float: left;
      margin-top: 10px;
      margin-left: 10px;
      margin-right: 30px;
      margin-bottom: 10px;
      border: 10px solid orange;
      border-radius: 10px;
      width: 30%;
   }


   figure#foto2 img#foto-recursos2 {
      float: left;
      margin-top: 10px;
      margin-left: 10px;
      margin-right: 30px;
      margin-bottom: 10px;
      border: 10px solid orange;
      border-radius: 10px;
      width: 30%;
   }

   figure#foto3 img#foto-recursos3 {
      float: left;
      margin-top: 10px;
      margin-left: 10px;
      margin-right: 30px;
      margin-bottom: 10px;
      border: 10px solid orange;
      border-radius: 10px;
      width: 30%;
   }

   .xxxx {
      color: #A7A7A7;
   }

}