@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');

body { margin: 0 auto; background-color: #FEFEFE; font-family: 'Roboto Condensed', sans-serif; font-size: 16px; color: #1A1B21;}
body a:link { text-decoration: none; color: #1A1B21;}
body a:visited { color: #1A1B21;}
body a:hover { color: #1A1B21;}
body a:active { color: #1A1B21;}
body h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; line-height: 1.5;}
body img { border: 0;}
body input { font-family: 'Roboto Condensed', sans-serif; font-size: 1em; color: #1A1B21; border: 0; outline: 0;}
body select { font-family: 'Roboto Condensed', sans-serif; font-size: 1em; color: #1A1B21; border: 0; outline: 0;}
body textarea { font-family: 'Roboto Condensed', sans-serif; font-size: 1em; color: #1A1B21; border: 0; outline: 0;}

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 8px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);}
body .sombra2 { -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 4px 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 .n { display: none;}

header { float: left; width: 100%; position: relative; z-index: 15; background-image: url("../imagens/bg.jpg"); font-family: 'Comic Neue', cursive; font-weight: bold;}

header .mobile { float: left; width: 100%; display: none;}
header .descktop { float: left; width: 100%;}

header .topo { float: left; width: 100%; position: relative; z-index: 5; }
header .menu { float: left; width: 90%; padding: 0 5%; z-index: 5; position: relative;}

header .mmobile { position: absolute; width: 50px; height: 50px; top: 30px; left: 2%; z-index: 5; display: none;}
header .mmobile .ico { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-position: 50%; background-repeat: no-repeat;}
header .mmobile .ico.abre { background-image: url(../imagens/icoAbrir.png);}
header .mmobile .ico.fecha { background-image: url(../imagens/icoFechar.png);}

header .logo { float: left; width: 100%; margin: 5px 0; position: relative; z-index: 2; text-align: center;}
header .logo img { font-size: 0;}

header .barra { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: 110px; background-color: #B71838;}

header .dicas { position: absolute; z-index: 3; top: 55px; left: 5%;}
header .dicas .ico { float: left; width: 30px; height: 30px; padding: 5px 0; background-color: #F5ECB4; background-image: url("../imagens/dicas.png"); background-position: 50%; background-repeat: no-repeat;}
header .dicas .nome { float: left; padding: 12px 10px 10px; margin: 0 0 0 5px; background-color: #F5ECB4; color: #947550;}
header .dicas:hover .nome { background-color: #947550; color: #F5ECB4;}
header .dicas.ativo .nome { background-color: #947550; color: #F5ECB4;}

header .tv { position: absolute; z-index: 3; top: 55px; right: 5%;}
header .tv .ico { float: right; width: 30px; height: 30px; padding: 5px 0; background-color: #F5ECB4; background-image: url("../imagens/tv.png"); background-position: 50%; background-repeat: no-repeat;}
header .tv .nome { float: left; padding: 12px 10px 10px; margin: 0 5px 0 0; background-color: #F5ECB4; color: #947550;}
header .tv:hover .nome { background-color: #947550; color: #F5ECB4;}
header .tv.ativo .nome { background-color: #947550; color: #F5ECB4;}

header .sociais { position: absolute; z-index: 3; bottom: 58px; right: 5%;}
header .sociais .ico { float: left; width: 50px; height: 65px; margin: 0 0 0 5px; background-position: 50%; background-repeat: no-repeat;}
header .sociais .ico.youtube { background-image: url("../imagens/youtube.png");}
header .sociais .ico.facebook { background-image: url("../imagens/facebook.png");}
header .sociais .ico.instagram { background-image: url("../imagens/instagram.png");}

header .links { float: left; width: 100%; padding: 22px 0 18px; text-align: center;}
header .links a { padding: 22px 25px 18px; border-left: 1px solid #CCB08E; font-size: 1.2em; color: #947550;}
header .links a:hover { background-color: #F5ECB4; color: #523E25;}
header .links a.ativo { background-color: #F5ECB4; color: #523E25;}
header .links a.ultimo { border-right: 1px solid #CCB08E;}


footer { float: left; width: 100%; position: relative; z-index: 1;}
footer .logo { position: absolute; bottom: 0; left: 5%; z-index: 2;}
footer .copyright { float: left; width: 100%; padding: 15px 0 13px; background-color: #B71838; position: relative; z-index: 1;}
footer .copyright h4 { float: left; width: 100%; text-align: center; font-size: 0.9em; color: #F5ECB4;}
footer .criacao { position: absolute; top: 7px; right: 5%; z-index: 1;}
footer .criacao .nome { float: left; margin: 9px 0 0; font-size: 0.9em; color: #F5ECB4;}
footer .criacao .d10 { float: left; width: 35px; height: 35px; background-image: url("../imagens/d10web.png"); background-position: 50% 100%; background-repeat: no-repeat; }
footer .criacao:hover .d10 { background-position: 50% 0;}


@media only screen and (max-width: 1000px) {
     header .mobile { display: block;}
     header .mobile.desativa { display: none;}
     header .descktop { display: none;}
     header .descktop.ativa { display: block;}

     header .menu { width: 100%; padding: 0;}
     header .barra { height: 74px;}
     header .barra.m { height: 124px;}
     header .sociais.m { bottom: 90px;}

     header .mmobile { display: block;}

     header .logo img { height: 160px;}

     header .dicas { float: left; position: relative; top: 0; left: 0; margin: 0 0 10px 2%;}
     header .tv { float: left; position: relative; top: 0; right: 0; margin: 0 0 10px 2%;}

     header .sociais { bottom: 40px; right: 2%;}
     header .sociais .ico { width: 35px; height: 40px; margin: 0; background-size: 100%;}
     header .sociais .ico.youtube { display: none;}

     header .links { padding: 0;}
     header .links a { float: left; width: 96%; padding: 14px 2% 12px; border-bottom: 1px solid #E2BE92; border-left: 0;}
     header .links a.ultimo { border-right: 0; border-bottom: 0;}

     footer .logo { left: 2%;}
     footer .copyright h4 { width: 40%; margin: 0 30%;}
}
@media only screen and (max-width: 700px) {
     footer .criacao { float: left; width: 100%; position: relative; top: 0; right: 0; margin: 12px 0 0; border-top: 1px solid #000000;}
     footer .criacao .nome { width: 100%; text-align: center;}
     footer .criacao .d10 { width: 100%;}
}
@media only screen and (max-width: 600px) {
     footer .logo { width: 100%; left: 0; bottom: auto; top: -55px; text-align: center;}
     footer .copyright { padding: 60px 0 5px;}
     footer .copyright h4 { width: 96%; margin: 0 2%;}
}
@media only screen and (max-width: 500px) {
     header .barra.m { height: 169px;}
     header .sociais.m { bottom: 135px;}

     header .dicas { width: 96%; margin: 0 0 5px 2%;}
     header .dicas .ico { width: 10%;}
     header .dicas .nome { float: right; width: 85%; padding: 12px 2% 10px; margin: 0;}

     header .tv { width: 96%;}
     header .tv .ico { float: left; width: 10%;}
     header .tv .nome { float: right; width: 85%; padding: 12px 2% 10px; margin: 0;}
     
     header .sociais { bottom: 40px;}
}