@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Heebo:400,700&display=swap');

body { margin: 0 auto; background-color: #FEFEFE; font-family: 'Heebo', sans-serif; font-size: 15px;}
body a:link {text-decoration: none; color: #000000;}
body a:visited {color: #000000;}
body a:hover {color: #000000;}
body a:active {color: #000000;}
body h1, h2, h3, h4, h5 { font-weight: normal; margin: 0; line-height: 1.5;}
body img { border: 0;}

body .center { margin: 0 auto; width: 96%;}
body .border4 { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
body .border100 { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
body .sombra1 { -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);}
body .t4 {-webkit-transition: 0.4s ease-in; -moz-transition: 0.4s ease-in; -o-transition: 0.4s ease-in; transition: 0.4s ease-in;}
body .fa { color: #FFFFFF;}
body .n { display: none;}
body .callto { display: none;}

header { position: fixed; width: 100%; top: 0; left: 0; z-index: 10;}
header .mobile { float: left; width: 100%; display: none;}
header .descktop { float: left; width: 100%;}

header .topo { float: left; width: 100%; padding: 14px 0 12px; background-color: #FFFFFF;}
header .menu { float: left; width: 96%; padding: 0 2%; background-color: #2C2F52;}

header .mmobile { position: absolute; width: 40px; height: 40px; top: 22px; left: 2%; z-index: 2; display: none;}
header .mmobile .ico { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: 40px; background-repeat: no-repeat; background-position: 50%;}
header .mmobile .ico.abre { background-image: url('../imagens/chave-abrir.png');}
header .mmobile .ico.fecha { background-image: url('../imagens/chave-fechar.png');}

header .logo { float: left; margin: 0 0 0 2%; font-size: 0;}

header .sociais { float: right; padding: 4px 2% 0 0;}
header .sociais .whatsapp { float: left; margin: 10px 20px 0 0;}
header .sociais .whatsapp .ico { float: left; width: 25px; height: 25px; background-image: url("../imagens/whatsapp.png?a=1"); background-repeat: no-repeat; background-position: 50%;}
header .sociais .whatsapp .nome { float: left; margin: 2px 0 0 4px; font-size: 1em;}
header .sociais .whatsapp:hover .ico { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; -moz-transform: scale(1.2) rotate(-720deg); -webkit-transform: scale(1.2) rotate(-720deg); -o-transform: scale(1.2) rotate(-720deg); -ms-transform: scale(1.2) rotate(-720deg); transform: scale(1.2) rotate(-720deg);}
header .sociais .whatsapp:hover .nome { text-decoration: underline;}
header .sociais .telefone { float: left; margin: 12px 200px 0 0; font-size: 1em;}
header .sociais .telefone:hover { text-decoration: underline;}

header .sociais .icones { float: right; margin: 2px 0 0;}
header .sociais .icones .ico { float: left; width: 40px; height: 40px; margin: 0 0 0 2px; background-repeat: no-repeat; background-position: 50%;}
header .sociais .icones .ico.instagran { background-image: url("../imagens/instagran.png");}
header .sociais .icones .ico.youtube { background-image: url("../imagens/youtube.png");}
header .sociais .icones .ico.facebook { background-image: url("../imagens/facebook.png");}
header .sociais .icones .ico.twitter { background-image: url("../imagens/twitter.png");}
header .sociais .icones .ico:hover { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; -moz-transform: scale(1.2) rotate(-720deg); -webkit-transform: scale(1.2) rotate(-720deg); -o-transform: scale(1.2) rotate(-720deg); -ms-transform: scale(1.2) rotate(-720deg); transform: scale(1.2) rotate(-720deg);}

header .menu .mlogo { float: left; width: 0; height: 50px; background-image: url("../imagens/mlogo.png"); background-repeat: no-repeat; background-position: 50%;}
header .menu a { float: left; padding: 15px 15px 13px; font-size: 1em; color: #FFFFFF;}
header .menu b { float: left; width: 1px; height: 50px; background-color: #181923;}
header .menu a:hover { background-color: #FFD22E; color: #2E2E33;}
header .menu a.ativo { background-color: #FFD22E; color: #2E2E33;}
header .menu a.right { float: right; background-color: #4F5377; color: #FFFFFF;}
header .menu a.right:hover { background-color: #FFD22E; color: #2E2E33;}

header .menu .submenu { float: left; position: relative; z-index: 10;}
header .menu .submenu a.primario { position: relative; z-index: 2;}
header .menu .submenu a.primario.ativo { background-color: #FFD22E; color: #2E2E33;}
header .menu .submenu:hover a.primario { background-color: #FFD22E; color: #2E2E33;}
header .menu .submenu .sub { position: absolute; width: 210px; padding: 51px 0 0; margin: 0 0 0 -1px; top: 0; left: 0; display: none; z-index: 1;}
header .menu .submenu .sub strong { float: left; width: 100%; height: 1px; background-color: #191919;}
header .menu .submenu .sub a.secundario { float: left; width: 90%; padding: 13px 5% 10px; background-color: #2E2E33; font-size: 1em;  color: #FFFFFF;}
header .menu .submenu .sub a.secundario:hover { background-color: #1B1C25 !important;}
header .menu .submenu .sub a.secundario.ativo { background-color: #1B1C25 !important;}
header .menu .submenu:hover .sub { display: block;}

header.fixed { top: -82px;}
header.fixed .menu .mlogo { width: 50px;}

footer { float: left; width: 100%; position: relative; z-index: 130;}
footer .copyright { float: left; width: 100%; padding: 15px 0 13px; background-color: #FFD22E;}
footer .copyright h4 { float: left; width: 100%; text-align: center; font-weight: bold; font-size: 1em; color: #2E2E33;}
footer .desenvolvido { float: left; width: 100%; padding: 14px 0 10px; background-color: #2E2E33; }
footer .desenvolvido h4 { float: left; width: 100%; text-align: center; font-size: 1em; color: #9C9C9C;}
footer .desenvolvido h4 a { color: #9C9C9C;}
footer .desenvolvido h4 a:hover { text-decoration: underline;}

@media only screen and (max-width: 1000px) {
     header { float: left; position: relative;}

     header .mobile { display: block;}
     header .mobile.desativa { display: none;}
     header .descktop { display: none;}
     header .descktop.ativa { display: block;}

     header .topo { padding: 0;}
     header .menu { width: 100%; padding: 0;}

     header .mmobile { display: block;}

     header .logo { width: 96%; padding: 14px 0 12px; text-align: center;}

     header .sociais { width: 96%; padding: 10px 2% 8px; background-color: #F0F0F0; border-top: 1px solid #DDDDDD;}
     header .sociais .whatsapp { margin: 6px 5px 0 0;}
     header .sociais .telefone { margin: 8px 0 0;}

     header .menu a { width: 96%; padding: 16px 2% 16px; background-color: #2C2F52; border-bottom: 1px solid #181A31; }
     header .menu b { display: none;}
     header .menu .submenu { width: 100%;}
     header .menu .submenu .sub { float: left; width: 100%; position: relative; padding: 0; margin: 0; display: block;}
     header .menu .submenu .sub a.secundario { border-bottom: 0;}

     header.fixed { top: 0;}
     header.fixed .menu .mlogo { width: 0;}
}
@media only screen and (max-width: 400px) {
     header .logo img { height: 45px;}
     header .mmobile { top: 17px;}
     header .sociais .whatsapp .nome { font-size: 0.9em;}
     header .sociais .telefone { font-size: 0.9em;}
     header .sociais .icones .ico { width: 30px; height: 30px; margin: 3px 0 0 2px; background-size: 30px;}
}