/**margens e efeitos**/

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
    font-size: 16px;
}

/**Fontes Padrões**/
@font-face {
	font-family:gothic-bold;
	src:url(../fontes/gothic-bold.otf) format(opentype);
	src:local(../fontes/gothic-bold.otf);
}

@font-face {
	font-family:gothic-bold;
	src:url(../fontes/gothic-bold.ttf);
	src:local(../fontes/gothic-bold.ttf);
}

@font-face {
	font-family:gothic-bold;
	src:url(../fontes/gothic-bold.eot);
	src:local(../fontes/gothic-bold.eot);
}

@font-face {
	font-family:gothic-bold;
	src:url(../fontes/gothic-bold.svg);
	src:local(../fontes/gothic-bold.svg);
}

@font-face {
	font-family:gothic-regular;
	src:url(../fontes/gothic-regular.otf) format(opentype);
	src:local(../fontes/gothic-regular.otf);
}

@font-face {
	font-family:gothic-regular;
	src:url(../fontes/gothic-regular.ttf);
	src:local(../fontes/gothic-regular.ttf);
}

@font-face {
	font-family:gothic-regular;
	src:url(../fontes/gothic-regular.eot);
	src:local(../fontes/gothic-regular.eot);
}

@font-face {
	font-family:gothic-regular;
	src:url(../fontes/gothic-regular.svg);
	src:local(../fontes/gothic-regular.svg);
}

/**Fontes**/

/** Cabeçalho, faixa preta e logo **/
.faixa {
    display: block;
    width: 100%;
    height: 100px;
    background-color: #000;
}

.logo {
    display: block;
    width: 175px;
    margin: 0 auto;
    height: 50px;
}

.logo-tag {
    display: block;
    margin: 0 auto;
    position: absolute;
    z-index: 1;
}

.logo-mob {
    display: none;
}

/**Menu**/
#menu-mob .menu-botao {
    display: none;
}

#menu-mob {display: none}
#menu .vazio1 {display: none;}

#boxMenu {
    width: 100%;
    position: fixed;
    top: 0;
}

#menu {
    margin: 0 auto;
    width: 80%;
    margin-top: -100px;
    height: 100px;
    display: block;
}

#menu ul {
    display: inline-block;
    width: 100%;
    height: 100px;
}

#menu li {
    height: 100px;
    display: inline-block;
    width: 13.89%;
    text-align: center;
    line-height: 100px;
}

#menu a {
    color:#fff;
    font-family: gothic-bold;
    font-size: 1em;
    display: block;
    height: 100%;
    -webkit-transition:0.2s ease-in;
	-moz-transition:0.2s ease-in;
	-o-transition:0.2s ease-in;
}

#menu a:hover {
    color:#000;
    background-color: #fc0;
    -webkit-transition:0.2s ease-out;
	-moz-transition:0.2s ease-out;
	-o-transition:0.2s ease-out;
}

.capa {
    width: 100%;
    display: block;
    
}

.capa-mob {display: none;}


.vazio2 img {
    display: inline-block;
    width: 40px;
    position: relative;
    top: 20px;
}

#tudo {
    position: absolute;
    z-index: -1;
    top: 0px;
    width: 100%;
}

/**Telas até 1100px de largura**/
@media (max-width:1100px) {
    #menu .vazio2 {display: none;}
    
    .logo-tag{
        left: 2%;
    }
    
    #menu {
        width: 100%;
        float: right;
    }
    
    #menu li {
        width: 12%;
        height: auto;
    }
    
    #menu .vazio1 {
        width: 20%;
        display: inline-block;
    }
    
    .vazio1 img {
        display: inline-block;
        width: 40px;
        position: relative;
        top: 20px;
    }
    
    #menu .vazio1 a {
        margin: 0 20px;
        height: 100px;
    }
  
}

/**Telas até 900px de largura**/
@media (max-width:900px){
    .logo-tag {display: none;}
    .logo {display: none;}
    #menu ul {display: none; width: 100%}
    .faixa {display: none;}
    .capa {display: none;}
    #menu {display: none;}
    #boxMenu {display: none;}
    
    #menu-mob ul {display: none; width: 100%;}/**Esconde o menu**/
    
    #menu-mob {
        display: block;
        position: relative;
        width: 100%;
        background-color: #000;
    }
    
    #tudo {
        display: block;
        width: 100%;
        position: inherit;
    }
    
    #menu-mob .menu-botao {
        display: block;
        width: 90%;
        text-align: right;
        color: #fff;
        font-family: gothic-bold;
        font-size: 1.1em;
        padding: 1% 0;
        height: 40px;
    }/**botao menu**/
    
    #menu-mob li {
        display: block;
        height: 50px;
        border-bottom: 1px solid #222;
    }
    
    #menu-mob a {
        text-align: center;
        width: 100%;
        display: block;
        font-family: gothic-bold;
        color: #fff;
        font-size: 1.1em;
        line-height: 50px;
    }
    
    .logo-img-mob {
        display: block;
        width: 20%;
        max-width: 220px;
        min-width: 200px;
        margin: 0 auto;
    }
    
    .logo-mob {
        display: block;
        height: auto;
        padding: 1% 0;
        width: 100%;
    }
    
    #cabecalho {
        display: block;
        height: auto;
        width: 100%;
        background-color: #000;
    }
    
    .capa-mob{
        display: block;
        width: 100;
    }
    
    .capa-mob img {
        display: block;
        width: 100%;
    }
    
}

.capa img {
    display: block;
    width: 100%;
}
/**Fim Menu**/

/**Rodapé**/
.rodape {
    display: block;
    width: 100%;
    background-color: #fc0;
    border-top: solid 3px #633;
}

.conteudo-rodape {
    display: table;
    width: 80%;
    margin: 0 auto;
    padding: 2% 0;
}

/**redes sociais**/
.redes {
    display: inline-block;
    width: 30%;
    float: left;
}

.redes ul {
    display: block;
    width: 100%;
    text-align: center;
}

.redes li {
    display: inline-block;
    width: 25%;
}

.facebook, .gplus, .youtube {
	display:block;
	overflow:hidden;
	height:50px;
	text-indent:-2000px;
}

.facebook {
	background:url(../imagens/facebook.svg) top left no-repeat;
    background-size: contain;
    background-position: center;
}

.facebook:hover {
	background:url(../imagens/facebook-h.svg) top left no-repeat;
    background-size: contain;
    background-position: center;
}

.gplus {
	background:url(../imagens/gplus.svg) top left no-repeat;
    background-size: contain;
    background-position: center;
}

.gplus:hover {
	background:url(../imagens/gplus-h.svg) top left no-repeat;
    background-size: contain;
    background-position: center;
}

.youtube {
	background:url(../imagens/youtube.svg) top left no-repeat;
    background-size: contain;
    background-position: center;
}

.youtube:hover {
	background:url(../imagens/youtube-h.svg) top left no-repeat;
    background-size: contain;
    background-position: center;
}

.hashtag p {
    text-align: center;
    font-family: gothic-regular;
    font-size: 1.4em;
    margin-top: 20px;
}/**fim redes**/

.logo-centro {
    display: inline-block;
    float: left;
    width: 40%;
}

.logo-centro img {
    display: block;
    margin: 0 auto;
}

.direitos {
    display: inline-block;
    float: right;
    width: 30%;
}

.direitos img {
    display: block;
    float: right;
}

.direitos p {
    display: block;
    float: right;
    font-family: gothic-regular;
    font-size: 1em;
    padding-top: 10px;
    text-align: center;
}

/**Rodapé em Telas até 1100px**/
@media (max-width:1100px) {
    .conteudo-rodape {
        width: 90%;
    }
    
    .redes, .direitos {
        width:40%;
    }
    
    .redes ul {
        width: 70%;
        float: left;
    }
    
    .redes li {
        width: 30%;
    }
    
    .facebook, .gplus, .youtube {
        height: 45px;
    }
    
    .hashtag p {
        font-size: 1.2em;
    }
    
    .logo-centro {
        width: 20%;
    }
    
    .logo-centro img {
        height: 100px;
    }
    
    .direitos img {
        height: 40px;
    }
    
}

/**Rodapé em Telas até 900px**/
@media (max-width:900px) {
    .conteudo-rodape {
        width: 94%;
        padding: 4% 0;
    }
    
    .redes, .direitos {
        display: inline-block;
        width: 30%;
    }
    
    .redes ul {
        width: 100%;
    }
    
    .logo-centro {
        display: inline-block;
        width: 40%;
    }
    
    .logo-centro img {
        height: 90px;
    }
    
    .direitos {
        min-width: 180px;
    }
    
    .direitos p {
        width:260px;
    }
    
    .direitos img {
        width: 84%;
        max-width: 150px;
    }
}

/*Rodape em telas até 640px*/
@media (max-width:640px) {
    .redes {
        width: 60%;
        display: table;
        margin: 0 auto;
        float: none;
    }
    
    .logo-centro {
        display: none;
    }
    
    .direitos {
        width: 100%;
        margin: 14px auto 0 auto;
        float: none;
        display: table;
    }
    
    .direitos img {
        margin-top: 6px;
        width:150px;
    }
    
    .direitos p {
        float: left;
        display: block;
        width: auto;
    }
}

/**Rodapé em telas até 480px**/
@media (max-width:480px) {
    .facebook, .gplus, .youtube {
        height: 40px;
    }
    
    .direitos {
        margin: 20px auto 0 auto;
    }
    
    .direitos img {
        width: 100%;
        display: block;
        float: none;
        margin: 0pc auto;
        height: auto;
    }
    
    .direitos p {
        font-size: 1em;
        float: none;
        width: 100%;
        display: inline-block;
    }
    
    .conteudo-rodape {
        width: 100%;
    }
}

/*Rodape telas até 320px*/
@media (max-width:320px) {
    .redes {
        width: 100%;
    }
    
    .hashtag p {
        margin: 10px 0;
    }
}

.fixar  { 
    z-index: 9999; 
	position: fixed; 
	top: 0; width:100%; 
}