/*==========FONTES==========*/

@font-face {
  font-family: pixelmix;
  src: local('pixelmix.ttf'), url(fontes/pixelmix.ttf);
}

@font-face {
  font-family: lato black;
  src: local('Lato-Black.ttf'), url(fontes/Lato-Black.ttf);
}

@font-face {
  font-family: lato light;
  src: local('Lato-Light.ttf'), url(fontes/Lato-Light.ttf);
}

@font-face {
  font-family: Lato medium;
  src: local('Lato-Medium.ttf'), url(fontes/Lato-Medium.ttf);
}

/*==========CONFIGURACOES E CLASSES GLOBAIS==========*/

body, html {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

* {
  transition: all 100ms cubic-bezier(.42,0,.58,1);
}

.centro {text-align: center;}

/*
  Evite usar valores fixos para os elementos, tente trabalhar ao máximo com valores dinamicos e limitado com o min/max;
*/
.secaoConteudo {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/*==========HOME==========*/

#home {
  background-image: url("imagens/home_fundo.jpg");
  height: 100%;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: -moz-scrollbars-none;
}

.homeConteudo {
  height: 600px;
  width: 507px;
  margin: 0 auto;
  padding: 6% 0;
}

.homeLogo {
  height: 600px;
  width: 507px;
  margin: 0 auto;
}

.homeSeta {
  position: absolute;
  top: 88%;
  left: 50%;
  margin-left: -34px;
}

/*==========EVENTO==========*/

/* o letter-spacing é necessário pois a sombra gruda.
Com isso gerou um problema na centralização que foi corrigido
com hr e as configuracoes abaixo */

section h1 {
  font-family: pixelmix, sans-serif;
  font-size: 35px;
  color: #6b4dd3;
  text-shadow: -4px -4px 0px #85f0ee;
  letter-spacing: 3px;
  padding: 100px 0 30px 12px;
  margin: 0;
}

.centro hr {
  width: 50px;
  height: 5px;
  border: none;
  background-color: #bdbdbd;
  padding: 0 3px 0 3px;
}

/* 
  Criei uma div eventos-container para facilitar o uso do grid.
  O Flex é muito bom nesses casos, principalmente para o alinhamento
*/

.eventos-container {
  display:flex;
  flex-direction: row;
  align-items: flex-start;
  padding:70px 0;
}

.eventos-container .eventoItem {
  width: calc(33.333333333% - 32px);
  text-align: center;
  padding:16px;
}

.eventos-container .eventoItem > img {
  width: 100%;
  max-width: 170px;
}

.eventos-container .eventoItem > span {
  font-family: 'lato black', sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  color: #585858;
  clear: both;
  display: block;
}

.eventoItem > p {
  font-family: 'lato light', sans-serif;
  font-size: 20px;
  padding: 5px 0 0 0;
  color: #585858;
  clear: both;
}

/*==========ACAO SOCIAL==========*/

#acaoSocial {
  background-image: url("imagens/acao_social.jpg");
  background-repeat: no-repeat;
  height: 578px;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  background-position:center;
}

#tituloAcaoSocial {
  background-image: url("imagens/titulo_acao.png");
  background-repeat: no-repeat;
  width: 314px;
  height: 50px;
  margin: 100px 0 30px 0px;
  
}

#acaoSocial hr {
  width: 50px;
  height: 5px;
  border: none;
  background-color: #bdbdbd;
  padding: 0 3px 0 3px;
  float: left;
}

.ConteudoEsquerdo{
  width: 360px;
  float: left;
  margin: 0 70px 0 0;
}

.ConteudoEsquerdo > p {
  font-family: 'lato light', sans-serif;
  color: #585858;
  font-size: 20px;
  padding: 40px 0 0 0;
  clear: both;
}

/*==========CONTATO==========*/

.centro > form {
  margin: 70px 0 70px 0;
}

input[type=text], textarea {
  width: 100%;
  padding: 12px 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  font-family: 'lato medium', sans-serif;
  font-size: 20px;
  width: 210px;
  background-color: #85f0ee;
  color: white;
  padding: 14px 20px;
  margin: 40px 0;
  border: none;
  border-radius: 40px;
  cursor: pointer;
}

input::-moz-placeholder, textarea::-moz-placeholder { /* Firefox 19+ */
  color: #989696;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #989696;
}

/*==========APOIO==========*/

#apoio {
  background-color: #f6f6f6;
}

#apoio .apoio-container {
  display:flex;
  width:100%;
  flex-direction: row;
  padding:16px 0 32px;
}

#apoio .apoio-container .apoio-item {
  flex: 1;
  padding: 8px;
}

#apoio .apoio-container .apoio-item img {
  height:86px;
  display: block;
  margin:0 auto;
}

/*==========RODAPE==========*/

#rodape {
  height: 200px;
  background-color: #85f0ee;
}

#rodape img {
  margin: 50px 0 0 0;
  width: 78px;
}

/* Responsividade */

@media only screen and (max-width: 768px) {
  .homeConteudo {
    width: 100%;
  }

  .homeConteudo .homeLogo {
    width:100%;
    height:auto;
    margin:0;
  }

  .eventos-container {
    flex-direction: column;
  }

  .eventos-container .eventoItem {
    width:auto;
    height:auto;
  }

  #acaoSocial {
    background-color: #f6f6f6;
    background-image: unset;
    text-align: center;
  }

  #acaoSocial #tituloAcaoSocial {
    margin:0 auto;
    padding:32px 0;
    background-position: center;
  }

  #acaoSocial hr {
    margin:0 auto;
    float: inherit;
  }
  
  #acaoSocial .ConteudoEsquerdo {
    float: initial;
    width: 100%;    
  }

  #apoio .apoio-container {
    flex-wrap: wrap;
  }

  #apoio .apoio-container .apoio-item {
    width: 33.33333333333%;
  }
}