

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');



html {
   scroll-behavior: smooth;
}


/* Configuração padrão da página
-------------------------------*/
body {
   overflow-x: hidden; 
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*-------------------------------*/

body, html {
   margin: 0;
   font: 16px "Lato", sans-serif;
   color: #777;
   height: 100%;
}

/*-------------------------------*/

header {
   width: 100%;
   height: 100vh;
   background: url(../img/imagem1.jpg);
   background-size: cover;
}

/*-------------------------------*/
nav {
   position: fixed;
   width: 100%;
   line-height: 60px;
   z-index: 99;
   opacity: 0.9;
}

nav ul {
   line-height: 30px;
   list-style: none;
   background: rgba(0, 0, 0, 0);
   overflow: hidden;
   color: #fff;
   padding: 0;
   text-align: right;
   margin: 0;
   padding-right: 40px;
   transition: 1s;
   /*
   right: -65%; */
}

nav.black ul {
   background: #00A551;
}

nav ul li {
   display: inline-block;
   padding: 16px ;
}

nav ul li a {
   text-decoration: none;
   color: #fff;
   font-size: 16px;
}

nav a:link {
   color: #Fff;
   text-decoration: none;
}

nav a:visited {
   color: #Fff;
   text-decoration: none;
}

.menu-icon {
   line-height: 60px;
   width: 100%;
   background: #00A551;
   text-align: right;
   box-sizing: border-box;
   padding: 15px 24px;
   cursor: pointer;
   color: #fff;
   display: none;
}





/*-------------------------------*/

.fade-in-image { animation: fadeIn 5s; }

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/*-------------------------------*/

.titulo {
   display: flex;
   flex-direction: row;
   justify-content: center;
   
}

.titulo h1 {
   color: #fff;
}
/*-------------------------------*/

.logo {
   width: 100vw;
   height: 50vh;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   z
} 

.mostravideo{
 margin: 0 auto;
  width: 50%;
}

video {
  width: 100%;
  height: auto;
}


/*-------------------------------*/

.conteudo {
   background-color: white;
   text-align: justify;
   padding: 50px 80px;
}

.conteudo h3 {
   /* Vermelho ---
   color: #E52027; */
   /* Azul --- */
   color: #0B566D;
}

.conteudo1 {
   background-color: #F8F8FF;
   text-align: justify;
   padding: 50px 80px;
}

.conteudo1 h3 {
   color: #0B566D;
}

.conteudo3 {
   background-color: #0B566D;
   text-align: justify;
   padding: 50px 80px;
}

/*-------------------------------*/

h3 {
   text-transform: uppercase;
   text-align: center;
}

/*-------------------------------*/

.center > * {
   padding-top: 50px;
   margin: auto;
   text-align: center;
}

/*-------------------------------*/

#img_circular {
   border-width: 5px;
   border-style: solid;
   border-color: #00A551 ;
   border-radius: 200px;
   animation: go-back 1s;
}

.sombra { box-shadow: 10px 10px 10px }

.sombraTexto{
   text-shadow: black 0.1em 0.1em 0.2em
}

.destaques {
   padding-top: 50px;
   text-align: center;
}

#img_destaque {
   border-width: 5px;
   border-style: solid;
   border-color: #00A551 ;
   border-radius: 30px  10px;
}


@keyframes go-back {
  from {
    transform: translateX(100px);
  }
  to {
    transform: translateX(0);
  }
} 


/*-------------------------------*/
    
p{
   margin-bottom: 20px;
}

/*-------------------------------*/

.conteudo-titulo {
   position: absolute;
   left: 0;
   top: 45%;
   width: 100%;
   text-align: center;
}

/*-------------------------------*/

.conteudo-titulo span.titulo {
   color: #fff;
   background-color: #111;
   padding: 18px;
   font-size: 25px;
   letter-spacing: 5px;
   text-transform: uppercase;
}


/*---------------------------------------
   Gallery section              
-----------------------------------------*/

#gallery span {
  display: block;
  padding-bottom: 32px;
}

#gallery .col-md-6 {
  padding-left: 0px;
  padding-right: 0px;
}

#gallery .gallery-thumb {
  background-color: #ffffff;
  box-shadow: 0px 1px 2px 0px rgba(90, 91, 95, 0.15);
  cursor: pointer;
  display: block;
  position: center;
  top: 0px;
  transition: all 0.4s ease-in-out;
  
}

#gallery .gallery-thumb:hover {
  box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
  top: -5px;
}

#gallery .gallery-thumb img {
  width: 100%;
  
}

#gallery .col-md-12 p {
  padding-top: 22px;
  text-align: center;
}

.centralizar{
  width:80%;

  margin:0 auto;
  padding:20px
}

/* ------------------------------ */

/* Rodapé
-----------------------------*/

footer {
   margin-top:60px;
   background: #0B566D;
   padding: 50px 0px 20px 0px;
   position: relative;
}

.rodape {
   display: inline-flex;
}

.social{
   text-align: center;
   color: #fff;
   margin-bottom: 50px;
}

.social a{
   color:#FFf;

}

.espaco-lateral{
   padding-right: 20px;
}

.copyright{
   color:#fff;
   text-align: center;
}



/*-------------------------------*/
@keyframes fadeInAnimation {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
     }
}

/*-------------------------------*/


/*-------------------------------*/

@media(max-width: 786px) {

   body {
   overflow-x: hidden; 
   width: 100%;
   }

   body, html {
   margin: 0;
   padding: 0;


   }

   .titulo h1 {
      font-size: xx-large;
   }
   
   .logo{
      margin-top: 30px;
   }

   nav ul {
      max-height: 0px;
      background: rgba(0, 165, 81, 0.95) ;
      padding-top: 0;
      padding-bottom: 0;
      margin-top: 0;
      margin-bottom: 0;
      left: 65%;
   }

   nav.black ul {
      background: rgba(0, 165, 81, 0.95) ;
   }

   .showing {
      max-height: 24em;
   }

   nav ul li {
      box-sizing: border-box;
      display: list-item ;
      padding: 5px;
      margin-top: 0;
   }
   
   .menu-icon {
      display: block;
   }
       
   .mostravideo{
   width: 100%;
   padding: 0;
   }

   .rodape {
   display: inline-block;
   }

   .conteudo {
   background-color: white;
   text-align: justify;
   padding: 10px 50px;
   }

   .conteudo1 {
   background-color: #F8F8FF;
   text-align: justify;
   padding: 10px 50px;
   }
      
}


