* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none; /*Remove os sublinhados dos link*/
}

body {
  font-family: Roboto, serif; /*Fonte Roboto é do GoogleApis*/
  color: black;
/*  background-image: url(Espuma.jpg), url(Cerveja_Hurrah.jpg);*/
/*  background-repeat: no-repeat, repeat;*/
  background-color: #3A5A40;
  background-image: linear-gradient(#3A5A40, green , #CCFF33);
  background-size: 100%;
  margin: 1%;
  padding: 1%;
}

header {
/*  background-image: url(Espuma.jpg);*/
/*  background-repeat: no-repeat;*/
  background-color: #3A5A40;
  background-size: 100%;
  z-index: 1;
  width: 100vw;
  max-height: 50px;
  justify-content: left;
  display: flex; /*alinhamento horiontal dos elementos*/
  align-items: center; /*alinhamento vertical dos elementos*/
  background-color: #3A5A40 /*rgb(252, 176, 64)*/;
  position: fixed;
  top: 0;
  left: 0;
}

header div {
  /*z-index: 2;
  justify-content: flex-end;*/ /*alinhamento horizontal dos elementos*/
  display: flex; /*alinhamento horiontal dos elementos*/
  background-color: none;
  position: fixed;
  top: 8px;
  left: 90px;
}

header img {
  width: 40px;
  height: auto;
}

.logo {
  width: 80px;
  position: fixed;
  top: 5px;
  left: 5px;
}

header span {
  justify-content: flex-start;
  display: flex;
  flex: 1;
  padding: 16px 0px;
  margin-left: 90px;
}

header span a {
  font-size: 20px;
  font-weight: normal;
  color: #FF6400;
}

header span p {
  font-size: 20px;
  font-weight: normal;
  color: #FF6400;
}

content, .main, .main2, .main3, .main5 {
  width: 75vw;
  display: flex; /*alinhamento horiontal dos elementos*/
  flex-direction: column;
  align-items: normal; /*alinhamento vertical dos elementos*/
  padding: 1%;
}

.main, .main2 {
  background-color: #fcf7d790;
}

.main2, .main3 {
  flex-direction: row;
}

.main3 {
  align-items: flex-end; /*alinhamento vertical dos elementos*/
}

.main5 {
    background-repeat: no-repeat;
    background-size: 100%;
    max-width: 1000px;
    min-height: 500px;
}

content {
  padding-top: 100px;
  padding-bottom: 80px; /*para aparecer o texto que fica coberto pelo footer*/
}

.main p, .main2 p {
  width: 92%;
  margin: 5px 30px 5px 30px;
  font-size: 24px;
}

.main2 img {
  height: fit-content;
  max-width: 294px; /* 320*0,92 */
}

.main4 img {
  height: unset;
  width: 400px; /* larg 400px para boa vizualização em tela grande */
  opacity: 1;
}

.main5 img {
  max-width: 800px;
}

footer div {
  display: flex; /*alinhamento horiontal dos elementos*/
  align-items: center; /*alinhamento vertical dos elementos*/
  justify-content: flex-end; /*alinhamento horizontal dos elementos*/
  background-color: none;
  position: fixed;
  bottom: 15px;
  right: 50px;
}

footer button {
  transition: 400ms; /*delay par botão mudar de cor (ou forma) quando mirado(hover)*/
}

footer button + button:hover {  
  background-color: #5f0401;
    padding: 0 8px;
}

.show_on_large_screen {
  display: block;
}

.show_on_small_screen {
  display: none;
}

.ocultar {
  display: none;
}
    
.DetalhesOcultos:hover + .ocultar {
  display: block;
  background-color: #fcf7d790;
  max-width: 380px; /* 400-2*10(padding) */
  padding: 10px;
  color: #000000
}

.efeitoTexto_1, .efeitoTexto_1_spam {
  color: #F5F0E6; /*-- rgb(58, 90, 64)*/
  text-shadow: 1px 1px black;
  padding: 10px 0 0 10px;
}

.efeitoTexto_1_spam {
  font-size:25px;
}

.efeitoTexto_2 {
  font-size: 12px;
  color: #F5F0E6 /*#FF6400;*/
/*  text-shadow: 1px 1px pink;*/
}

.efeitoTexto_3 {
  color:white;
  text-shadow: 2px 2px black;
}



@media only screen and (max-width: 1024px) {
  /*CSS EXCLUSIVO PARA TELAS PEQUENAS (LARGURAS MENORES DE 1024PX)*/
  
  .main4 img {
    height: unset;
    max-width: 294px; /* 320*0,92 - pois largura de 400px mais bordas e espaços ultapassa 75% de 1024px */
}

.main5 img {
  max-width: 600px;
}

.DetalhesOcultos:hover + .ocultar {
  max-width: 274px; /* 320*0,92-2*10(padding) */
}

.main0 {
  max-width: 640px;
}
}



@media only screen and (max-width: 768px) {
  /*CSS EXCLUSIVO PARA TELAS PEQUENAS (LARGURAS MENORES DE 768PX)*/
  
content, .main, .main2, .main3, .main5 {
  width: 92vw;
}

.main2, .main3 {
flex-direction: column;
}

.main5 img {
  max-width: 90vw;
}

.main h1, .main2 h1, .main3 h1 {
  font-size: 24px;
}

.main h2, .main2 h2, .main3 h2 {
  font-size: 18px;
}

.main p, .main2 p {
  margin: 5px 15px 5px 15px;
  font-size: 18px;
}

.main3 {
  align-items: center; /*alinhamento vertical dos elementos*/
}

.main5 {
    min-height: 350px;
}

.show_on_small_screen {
    display: block;
}
  
.show_on_large_screen {
    display: none;
}

.main0 {
    max-width: 400px;  
}
}


@media only screen and (max-width: 425px) {
  /*CSS EXCLUSIVO PARA TELAS PEQUENAS (LARGURAS MENORES DE 425PX)*/
  .main0 {
    max-width: 300px;  
  }

.main5 {
    min-height: 250px;
}

header span a {
  font-size: 16px;
}

header span p {
  font-size: 16px;
}

.efeitoTexto_1 {
  font-size:22px;
}

.efeitoTexto_1_spam {
  font-size:16px;
}

}