/* BODY */
body {background: #eee;}
/* BODY */

/* NAVBAR */
#top {background: #d9d9d9;}
#top .navbar {padding: 10px 0;}
#top .navbar li a {font-family: 'Raleway'; font-size: 20px; position: relative; z-index: 1;}
#top .navbar li a::before {content: ''; width: 0%; height: 1px; background: #000; position: absolute; bottom: 5px; left: 8px; z-index: -1; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out;}
#top .navbar li a:hover::before {width: calc(100% - 16px);}
#top .navbar .form-inline .search {position: absolute; right: 25px; color: #666; background: transparent; border: none; padding: 0 10px; margin: 0 10px;}
#top .navbar .form-inline .search:hover {color: black; transform: scale(1.5); transition: 0.3s; height: auto;}
#top .navbar .form-inline .procura {position: absolute; right: 70px; height: 35px; border: none; border-radius: 8px; box-shadow: 1px 1px 3px;}
.dropdown-item.active, .dropdown-item:active {color: #000; text-decoration: none; background-color: transparent;}
/* NAVBAR */

/* BANNER */
#logo {background: #d9d9d9; background-repeat: no-repeat; background-size: cover; height: 184px; background-position: center; background-attachment: fixed;}
#logo .banner {display: flex;flex-flow: wrap;flex-direction: row;justify-content: center;align-items: center;height: 164px;max-width: 95%;}
#logo img {width: 100%;height: auto;object-fit: contain;max-height: 140px;}
/* BANNER */

/* FONTS */
@font-face {
	font-family: 'Raleway';
	src: url(../fonts/Raleway-Light.ttf);
} 
/* FONTS */

/* KEYFRAMES */
@keyframes fadeIn{
	from {opacity: 0;} 
	to {opacity: 1;}
}
/* KEYFRAMES */

/* CATEGORIAS */
#boxcategoria .categorias {background: #fff; padding: 4px; border-bottom: solid 1px rgba(128, 128, 128, 0.52); position: relative; margin-top: 40px;}
#boxcategoria .categorias .overlay {display: flex; position: absolute; top: 4px; right: 0px; bottom: 0; left: 4px; flex-flow: wrap; justify-content: center; align-items: center; height: calc(100% - 8px); width: calc(100% - 8px);}
#boxcategoria .categorias .overlay:hover {box-shadow: 0 0 0 1000px rgb(0, 0, 0, 0.3) inset;}
#boxcategoria .categorias .overlay h3 {font-family: 'Raleway'; font-size: 18px; margin: 0; background: #fff; color: black; padding: 7px 20px; font-weight: bolder; position: relative;}
#boxcategoria .categorias .overlay h3:after{content: ''; border: solid 1px #fff; position: absolute; display: inline-block; top: -6px;  right: -6px; bottom: -6px; left: -6px; display: flex; flex-flow: wrap; flex-direction: row; justify-content: center; align-items: center; display: none;}
#boxcategoria .categorias .overlay h3:hover:after{display: block; animation-name: fadeIn; animation-duration: 0.4s;}
#boxcategoria .categorias img {width: 100%; height: 243px; object-fit: cover;}
/* CATEGORIAS */

/* LATERAL */
#lateral {margin: 40px 0px;}
#lateral #conteudo #sobre {text-align: center; background: #fff; border-bottom: solid 1px rgba(128, 128, 128, 0.52); padding: 20px 5px; margin-bottom: 40px; display: flex; flex-flow: wrap; flex-direction: row; justify-content: center; align-items: center;}
#lateral #conteudo #sobre .titulo {text-align: center; position: relative;}
#lateral #conteudo #sobre .titulo h1 {font-size: 22px; color: #b7b7b7; margin: 0; padding: 0; border: solid 1px #b7b7b7; padding: 5px 12px; position: relative; font-family: 'Raleway'}
#lateral #conteudo #sobre .descricao {margin: 20px 0; padding: 0 20px;}
#lateral #conteudo #sobre .descricao img {width: 227px;height: 227px;object-fit: cover;border-radius: 100%;text-align: center;margin: 10px 0;margin-left: -40px;}
#lateral #conteudo #sobre .descricao p {text-align: justify; font-size: 20px; line-height: 1.5; font-family: 'Raleway';}
#lateral #conteudo #sobre .descricao ul {display: inline-flex; flex-flow: wrap; justify-content: center; align-items: center; margin: 0; padding: 0;}
#lateral #conteudo #sobre .descricao ul li {list-style: none;}
#lateral #conteudo #sobre .descricao .icons img {width: 40px; height: 40px; object-fit: cover; border-radius: 100%; margin: 0 2px;}
#lateral #conteudo #sobre .descricao .icons img:hover {transform:scale(1.1111); ;transition: 0.4s;}

#lateral #conteudo #pesquise {text-align: center; background: #fff; border-bottom: solid 1px rgba(128, 128, 128, 0.52); padding: 20px 5px; margin-bottom: 40px; display: flex; flex-flow: wrap; flex-direction: column; justify-content: center; align-items: center;}
#lateral #conteudo #pesquise .titulo {text-align: center; position: relative;}
#lateral #conteudo #pesquise .titulo h1 {font-size: 22px; color: #b7b7b7; margin: 0; padding: 0; border: solid 1px #b7b7b7; padding: 5px 12px; position: relative; font-family: 'Raleway'}
#lateral #conteudo #pesquise .pagina {padding: 10px 0;}
#lateral #conteudo #pesquise .search {margin: 20px 0;}
#lateral #conteudo #pesquise .search input {margin: 0; padding: 2px 10px; border: solid 1px #b7b7b7; text-align: left;}
#lateral #conteudo #pesquise .search button {color: white; background: black; border: solid 1px black; padding: 2px 5px;}

#lateral #conteudo #facebook {text-align: center; background: #fff; border-bottom: solid 1px rgba(128, 128, 128, 0.52); padding: 20px 5px; margin-bottom: 40px; display: flex; display: -webkit-flex; display: -moz-flex; flex-flow: wrap; -webkit-flex-flow: wrap; -moz-flex-flow: wrap; flex-direction: column; -webkit-flex-direction: column; -moz-flex-direction: column; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; align-items: center; -webkit-align-items: center; -moz-align-items: center;}
#lateral #conteudo #facebook .titulo {text-align: center; position: relative;}
#lateral #conteudo #facebook .titulo h1 {font-size: 22px; color: #b7b7b7; margin: 0; padding: 0; border: solid 1px #b7b7b7; padding: 5px 12px; position: relative; font-family: 'Raleway'}
#lateral #conteudo #facebook .pagina {padding: 10px 0;}

#lateral #conteudo #instagram {text-align: center; background: #fff; border-bottom: solid 1px rgba(128, 128, 128, 0.52); padding: 20px 5px; margin-bottom: 40px; display: flex; display: -webkit-flex; display: -moz-flex; flex-flow: wrap; -webkit-flex-flow: wrap; -moz-flex-flow: wrap; flex-direction: column; -webkit-flex-direction: column; -moz-flex-direction: column; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; align-items: center; -webkit-align-items: center; -moz-align-items: center;}
#lateral #conteudo #instagram .titulo {text-align: center; position: relative;}
#lateral #conteudo #instagram .titulo h1 {font-size: 22px; color: #b7b7b7; margin: 0; padding: 0; border: solid 1px #b7b7b7; padding: 5px 12px; position: relative; font-family: 'Raleway'}
#lateral #conteudo #instagram .pagina {padding: 10px 0;}

#lateral #conteudo #twitter {text-align: center; background: #fff; border-bottom: solid 1px rgba(128, 128, 128, 0.52); padding: 20px 5px; margin-bottom: 40px; display: flex; display: -webkit-flex; display: -moz-flex; flex-flow: wrap; -webkit-flex-flow: wrap; -moz-flex-flow: wrap; flex-direction: column; -webkit-flex-direction: column; -moz-flex-direction: column; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; align-items: center; -webkit-align-items: center; -moz-align-items: center;}
#lateral #conteudo #twitter .titulo {text-align: center; position: relative; margin: 0 0 20px 0;}
#lateral #conteudo #twitter .titulo h1 {font-size: 22px; color: #b7b7b7; margin: 0; padding: 0; border: solid 1px #b7b7b7; padding: 5px 12px; position: relative; font-family: 'Raleway'}
#lateral #conteudo #twitter a {font-family: 'Raleway'}

#lateral #conteudo #direitos {text-align: center; background: #fff; border-bottom: solid 1px rgba(128, 128, 128, 0.52); padding: 20px 5px; margin-bottom: 40px; display: flex; display: -webkit-flex; display: -moz-flex; flex-flow: wrap; -webkit-flex-flow: wrap; -moz-flex-flow: wrap; flex-direction: column; -webkit-flex-direction: column; -moz-flex-direction: column; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; align-items: center; -webkit-align-items: center; -moz-align-items: center;}
#lateral #conteudo #direitos .titulo {text-align: center; position: relative;}
#lateral #conteudo #direitos .titulo h1 {font-size: 22px; color: #b7b7b7; margin: 0; padding: 0; border: solid 1px #b7b7b7; padding: 5px 12px; position: relative; font-family: 'Raleway'}
#lateral #conteudo #direitos .descricao {margin: 20px 0; padding: 0 20px;}
#lateral #conteudo #direitos .descricao p {text-align: justify; font-size: 20px; line-height: 1.5; font-family: 'Raleway';}

/* LATERAL */

/* CLASSES GERAIS */
b {color: #666;}
.flex {display: flex; display: -webkit-flex; display: -moz-flex; flex-flow: wrap; -webkit-flex-flow: wrap; -moz-flex-flow: wrap; flex-direction: row; -webkit-flex-direction: row; -moz-flex-direction: row; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; align-items: center; -webkit-align-items: center; -moz-align-items: center; width: 100%;}
.flexcolumn {display: flex; display: -webkit-flex; display: -moz-flex; flex-flow: wrap; -webkit-flex-flow: wrap; -moz-flex-flow: wrap; flex-direction: column; -webkit-flex-direction: column; -moz-flex-direction: column; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; align-items: center; -webkit-align-items: center; -moz-align-items: center; width: 100%; max-width: 98%;}
.relative {position: relative;}
/* CLASSES GERAIS */ 

/* COPYRIGHT */
footer {padding: 40px 0; background: #dadada;}
footer p {display: flex; display: -webkit-flex; display: -moz-flex; flex-flow: wrap; -webkit-flex-flow: wrap; -moz-flex-flow: wrap; flex-direction: row; -webkit-flex-direction: row; -moz-flex-direction: row; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; align-items: center; -webkit-align-items: center; -moz-align-items: center; margin: 0; padding: 0;}
footer img {width: 100%; height: auto; object-fit: cover;}
/* COPYRIGHT */


.navbar-expand-md .navbar-nav .dropdown-menu { position: absolute; overflow-x: overlay; height: 500px; }