/*
* @Project ASSESP
* @author  FABIANO KUERTEN <fabiano@3fk.com.br>
*/

* { margin: 0; padding: 0; list-style-type: none; font-family: Arial; font-size: 100%; border: 0; box-sizing: border-box; }
body { min-width: 320px; background-color: #ffffff; }
header { position: relative; height: 140px; background-color: #354b62; box-shadow: inset 0px 25px 0 #222222, inset 0px 26px 0 #ffffff, inset 0px -10px 0 #ffffff, 0px 1px 1px #aaaaaa; }
header h1 { position: absolute; top: 40px; left: 80px; right: auto; font: normal normal bold 11px Arial; text-align: left; color: #ffffff; }
main { min-height: 650px; padding-bottom: 50px; }
footer { background-color: #354b62; box-shadow: inset 0 10px 0 #ffffff, 0px 1px 11px #aaaaaa; text-align: center; color: #ffffff; padding: 50px 0px; }
footer h2 { margin-bottom: 3px; font: normal normal bold 16px Arial; }
footer p { font: normal normal normal 13px Arial; color: #dddddd; line-height: 1.2; }
footer a { font-weight: bolder; text-decoration: none; color: #ffffff; }
footer a:hover { text-decoration: underline; }
footer .detalhe { margin-bottom: 3px; font-style: italic;  font-weight: bolder; color: #ffffff; }
.container { position: relative; margin: 0 auto; }
.sprite { background: url("/img/sprite.png") no-repeat; padding: 0px 1px; }
.btn-facebook { display: inline-block; width: 35px; height: 34px; background-position: -10px -10px; }
.btn-twitter { display: inline-block; width: 35px; height: 34px; background-position: -55px -10px; }
.btn-youtube { display: inline-block; width: 35px; height: 34px; background-position: -100px -10px; }
.footer { display: grid; grid-template-columns: 100%; justify-content: center; justify-items: center; grid-auto-rows: auto; grid-gap: 25px; text-align: center; }
#logotipo {position: absolute; top: 25px; left: 0px; }
#menu-apoio { position: absolute; top: 0; font: normal normal bold 10px Arial; letter-spacing: 1px; z-index: 10; }
#menu-apoio li { display: inline; }
#menu-apoio li a { float: left; padding: 0px 8px 0px 8px; height: 25px; line-height: 25px; text-decoration: none; color: #ffffff; background: #222222 url(/img/menu_superior_div01.png) no-repeat center right; }
#menu-apoio li a:hover { background-color: #333333; }
#btn-redesocial { display: block; position: absolute; top: 83px; right: 0px; width: auto; z-index: 10; }
#menu-principal-container { }
#menu-principal { z-index: 10; display: none; position: absolute; top: 130px; left: 0; width: 100%; height: calc(100% - 130px); border-top: 10px solid #ffffff; overflow-y: scroll; }
#menu-principal ul { background-color: #354b62; }
#menu-principal ul li a { display: block; padding: 12px 10px; border-bottom: 1px solid #333333; font-size: 12px; font-weight: 900; text-decoration: none; line-height: 12px; color: #ffffff; }
#menu-principal ul li a:hover { background-color: #cc0000; }
#menu-principal ul li ul li a { padding-left: 25px; font-weight: 400; font-style: italic; }
#menu-principal-btn { display: block; position: absolute; top: 87px; left: 80px; width: 100px; height: 30px; font-size: 12px; font-weight: 700; text-align: center; line-height: 30px; color: #000000; transition: all 0.3s ease; background-color: #ffffff; cursor: pointer; z-index: 10; }
#menu-principal-btn:hover { color: #cc0000; }

@media only screen and (min-width: 320px) {
.container { width: 320px; }
}

@media only screen and (min-width: 481px) {
.container { width: 481px; }
}
@media only screen and (min-width: 768px) {
header h1 { top: 5px; left: auto; right: 310px; font-size: 12px; text-align: right; }
.container { width: 768px; }
.footer { grid-template-columns: 1fr 1fr; } 
#menu-apoio { left: auto; right: 0px; }
#menu-apoio li a { padding: 0px 10px 0px 10px; }
#menu-apoio li a { height: 70px; border-radius: 0px 0px 8px 8px; line-height: 100px; }
#menu-principal-container { position: relative; margin: 0 auto; width: 768px; height: auto; }
#menu-principal { display: block; top: 30px; left: 80px; width: auto; height: auto; border-top: none; overflow-y: visible; } 
#menu-principal ul li { float: left; }
#menu-principal ul li a { padding: 0px 5px; height: 87px; border: 0px; font-weight: 500; text-align: left; line-height: 150px; }
#menu-principal ul li a:hover { background-color: #ffffff; color: #354b62; }
#menu-principal ul li:hover ul { display: block; border: solid 3px #ffffff; border-top: solid 10px #ffffff; }
#menu-principal ul li ul { display: none; position: absolute; min-width: 200px; height: auto; }
#menu-principal ul li ul li { float: none; }
#menu-principal ul li ul li a { padding: 10px; height: auto; font-size: 10px; line-height: 20px; }
#menu-principal-btn { display: none;  }
}

@media only screen and (min-width: 1025px) {
.container { width: 1025px; }
.footer { grid-template-columns: 1fr 1fr 1fr 1fr; }
#menu-principal-container { width: 1025px; }
#menu-principal ul li a { padding: 0px 10px; font-size: 16px; }
#menu-principal ul li ul li a { font-size: 12px; }
}

@media only screen and (min-width: 1300px) {
.container { width: 1300px; }
#menu-principal-container { width: 1300px; }
}