body{margin: 0; padding: 0; background: url(imagens/fd01.jpg) no-repeat fixed; background-size: cover; font-family: 'PT Sans Narrow', sans-serif; font-weight: normal;}
*{box-sizing: border-box; resize: none; outline: none;}
h1, h2, h3, h4{font-family: 'Cinzel', serif; font-weight: normal;}
a{text-decoration: none; color: inherit; -webkit-transition: all ease-out 500ms; transition: all ease-out 500ms;}

.container{width: 98%; max-width: 1024px; margin: 0 auto; display: flex; flex-wrap: wrap;}
.between{justify-content: space-between;}
.around{justify-content: space-around;}

.topo{width: 100%; background: rgba(255, 255, 255, .6); margin-top: 20px; box-shadow: 0 0 5px rgb(144, 174, 88);}
.logo{max-width: 250px; margin-right: 20px;}
.slogan{max-width: 250px; background: rgba(92, 142, 34, .9); text-align: center; display: flex; flex-wrap: wrap; padding: 0 20px;}
.slogan h2{width: 100%; color: rgb(255, 255, 255); text-shadow: 0 0 10px rgb(255, 255, 255); align-self: center; margin: 0;}

.menu{width: 40%; align-self: center;}
.menu select{width: 90%; color: rgb(100, 100, 100); display: none; border: 0; border-radius: 3px; padding: 15px 5px;  margin: 10px auto;}
.mainmenu{width: 100%; display: flex; padding: 0; margin: 0;}
.mainmenu li{flex: 1; list-style: none; text-align: center;}
.mainmenu li a{font-size: 18px; color: rgb(113, 113, 113); display: block; line-height: 100px; text-transform: uppercase;}
.mainmenu li a:hover{background: rgba(92, 142, 34, .7); color: rgb(255, 255, 255); text-shadow: 0 0 10px rgb(255, 255, 255);}

.central{background: rgba(255, 255, 255, .6); box-shadow: 0 0 5px rgb(144, 174, 88); padding: 50px 30px; position: relative; margin: 100px auto; align-items: flex-start;}
.tarja{width: 100%; height: 70px; background: rgba(92, 142, 34, .7); position: absolute; left: 0; z-index: 0;}
.foto{width: 25%;}
.foto img{width: 100%; height: auto; max-width: 250px; position: relative; z-index: 10; top: -30px; margin-bottom: -30px; border: 2px solid rgb(255, 255, 255); box-shadow: 0 0 5px rgb(144, 174, 88);}
.textos{width: 73%; display: flex; flex-wrap: wrap; justify-content: flex-end;}
.textos h2{width: 100%; color: rgb(255, 255, 255); position: relative; z-index: 20; text-shadow: 0 0 10px rgb(255, 255, 255);}
.textos>p{width: 100%; color: rgb(100, 100, 100); margin: 0;}
.textos a{color: rgb(28, 104, 27); padding: 5px 10px; text-align: center; margin: 10px 0;}
.textos a:hover{background: rgba(92, 142, 34, .7); color: rgb(255, 255, 255); text-shadow: 0 0 10px rgb(255, 255, 255);}

.produtos{width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; margin-top: 20px;}
.produtos h3{width: 100%; color: rgb(255, 255, 255); background: rgba(92, 142, 34, .7); padding: 5px; margin: 0; margin-bottom: 5px;}
.produtos p{margin: 0; color: rgb(100, 100, 100);}
.produtos img{width: 100%; max-width: 150px;}

.fotos{background: rgba(255, 255, 255, .6); box-shadow: 0 0 5px rgb(144, 174, 88); padding: 50px 30px; position: relative;}
.fotos .container h2{color: rgb(255, 255, 255); position: relative; z-index: 20; text-shadow: 0 0 10px rgb(255, 255, 255);}
.fotos .container img{width: 100%; max-width: 150px; position: relative; z-index: 20; top: -20px;}
.galeria img{border:3px solid rgb(255, 255, 255); max-width: 165px !important; box-shadow: 0 0 5px rgb(144, 174, 88); margin-top: 20px;}


.rodape{width: 100%; background: rgb(235, 240, 180); padding: 20px 0; border-top: 10px solid rgb(220, 225, 150); text-align: center;}
.rodape p{color: rgb(113, 113, 113); margin: 0;}
.rodape p span{color: rgb(92, 142, 34);}
.rodape p a{color: rgb(92, 142, 34);}

@media screen and (max-width: 768px){
    .topo{padding: 10px;}
    .topo>.container.between{justify-content: center !important;}
    .menu{width: 50%;}
    .logo{margin-right: 0;}
}
@media screen and (max-width: 500px){
    .menu{width: 100%;}
    .menu select{display: block;}
    .mainmenu{display: none;}
    .central{padding: 50px 10px;}
    .foto{display: none;}
    .textos{width: 100%;}
    .central{margin: 50px auto;}
}
@media screen and (max-width: 475px){
    .slogan{width: 100% !important;}
}