/* document css */
@import "estilos.min.css";
@import url('https://fonts.googleapis.com/css?family=Kreon:700|Arvo');

/* ELEMENTS
============================================================================= */
body{ background-color: #76BA6F; color: brown; font-family: serif; font-family: 'Arvo', serif;}
h1, h2{ text-shadow: 2px 2px 2px #777; font-family: 'Kreon', serif; }
ul{ width: 100%; }
a { color: #2C400E; }

/* COMPONENT _ front
============================================================================= */
.front{ background-color: #4F954E; position: relative; }
.front h1{ font-size: 1.5em; margin: 5px 0; padding: 0; position: absolute; top: 0; left: 1%; font-weight: bold; z-index: 10; line-height: 1; }
.front figure{ position: relative; }
.front figcaption{ font-size: 1em; margin: 0; padding: 0; position: absolute; bottom: 15px; right: 2%; text-shadow: 1px 1px 1px #777; font-weight: bold; }
.front img{ box-shadow: 0 2px 2px #333; }

/* STRUCTURE
============================================================================= */
.main { padding: 0 3%; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; }
.main h1{ font-size: 1.4em; width: 100%; }
.main p{ margin: 15px 5%; width: 90%; }
/* footer */
.footer{ padding-bottom: 10px; }
.footer h2{ position: relative; width: 94%; text-align: right; margin: 5px 3%; font-size: 1em; text-shadow: 1px 1px 1px #777; }

/* SHARED
============================================================================= */
.content-destaque{ background-color: rgba(79,149,78,0.5); padding: 10px; border-radius: 5px; box-shadow: 1px 1px 1px #783; border: #76BA6F 1px solid; }
.nowrap{ white-space: nowrap; }

/* COMPONENT _ index-figurebox
============================================================================= */
.index-figurebox { position: relative; overflow: hidden; margin-bottom: 20px; border-radius: 8px; width: 80%; }
.index-figurebox h1 { position: absolute; top: 20px; left: 2%; margin: 0; width: 96%; text-align: center; font-size: 2.6em; color: yellow; line-height: 1; }
.index-figurebox h1 a { color: #0AEC08; }

/* COMPONENT _ navmenu
============================================================================= */
.navmenu { font-family: 'Kreon', serif; }
.navmenu ul{ margin: 3px 2%; width: 96%; list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-around; }
.navmenu li{ display: inline; padding: 3px 5px; }
.navmenu li a{ text-decoration: none; }
.navmenu li a:link{ color: yellow; }
.navmenu li a:visited{ color: yellowgreen; }
.navmenu li a:active{ color: yellowgreen; }

/* SHARED _ container
============================================================================= */
.container-figure{ margin: 8px 0; border-radius: 8px; overflow: hidden; border: 1px yellowgreen solid; }
.container-figure--vertical{ width: 60%; }
.container-paragraph{ width: 100%; text-align: center; background-color: rgba(154,205,50,0.4); padding: 5px; border: 1px yellowgreen solid; border-radius: 5px; }

/* COMPONENT _ address
============================================================================= */
.address{ padding: 5px 25px 25px; font-size: 0.85em; background-color: #76BA6F; }
.address .address-fones{ margin: 0; }

/* MEDIA QUERIES
============================================================================= */
@media (min-width: 480px){
    .front h1{ font-size: 2.4em; }
    .index-figurebox{ width: 55%; }
    .address{ font-size: 1em; padding: 25px 8%; }
}

@media (min-width: 520px){
    .index-figurebox{ width: 46%; margin-top: 20px; }
}
@media (min-width: 640px){
    ul { width: 70%; }
    .front h1 { font-size: 3.2em; }
    .front img { width: 100%; }
    .index-figurebox { width: 22%; margin-top: 20px; }
    .index-figurebox h1 { font-size: 1.4em; }
    .container-figure--vertical { width: 26%; margin: 4px 11%; }
    .flex25 { width: 23%;  margin: 8px 0; }
    .flex30 { width: 28%;  margin: 8px 0; }
    .flex50 { width: 48%; }
    .flex70 { width: 67%; }
    .address { padding: 30px 10% 50px; font-size: 1.2em; }
}
@media (min-width: 1024px){
    body { background-color: #388033; }
    .wrapper { background-color: #76BA6F; }
}