@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Raleway);

body{
    padding: 0;
    margin: 0;
    font-family: Raleway, sans-serif;
    font-size: 1.1em;
    background: url("../_imagens/bg_body.jpg") no-repeat fixed;
    background-size: 100% 100%;
}
/* Links */
a {
    color: #ffffff;
    text-decoration: none;
    transition: .5s;
}
a:hover{
    color: red;
    transition: .5s;
}
/* Divisao topo do site onde se encontra o menu */
#top-site{
    width: 100%;
    height: 50px;
    background-color: #000000;
}
/* Menu de navegacao*/
#menu{
    width: 100%;
    max-width: 1280px;
    height: 50px;
    margin: auto;
    background-color: rgba(0,0,0,.5);
    position: relative;
}
#menu ul{
    list-style: none;
    text-decoration: none;
    position: absolute;
    margin-top: 15px;
}
#menu li{
    display: inline;
}
#menu a{
    padding: 10px;
    float: left;
    margin-top: -10px;
    transition: .5s;
}
#menu a:hover{
    color: red;
    transition: .5s;
}
/* Ouca aqui */
.ouca-aqui{
    float: right;
    margin-right: 0;
    margin-top: 8px;
}
.ouca-aqui figcaption{
    color: #ffffff;
    float: left;
    margin-right: 10px;
    margin-top: -13px;
}
.ouca-aqui img:hover{
    transform: rotate(180deg);
    transition: .5s;
}
/* Cabecalho do site*/
#cabecalho{
    width: 100%;
    height: 250px;
    background: url("../_imagens/bg_header.jpg") ;
    background-size: 100% 100%;
}
#in-cabecalho{
    width: 100%;
    height: 250px;
    max-width: 1280px;
    margin: auto;
   /* background-color: rgba(0,0,0,.5);*/
}

/* Logotipo */
.logo{
    background-color: rgba(255,225,255,.1);
    margin-left: 0;
    float: left;
    padding-right: 36px;
    padding-left: 35px;
}
.logo img{
    padding: 5px;
    margin-top: 2px;
}
/* Corpo do site*/
#corpo{
    width: 100%;
    height: auto;
}
#in-corpo{
    width: 100%;
    height: auto;
    max-width: 1280px;
    margin: auto auto .6em;
    background-color: rgba(223, 223, 223, 0.5);
}
/* Lateral esquerda do site - 311px / 1280px */
aside{
    width: 24.296875%;
    float: left;
    clear: both;
    background-color: #1d1d1d;
    margin: 0;
}
/* Top-10 corpo  311px*/
#top-10 h1{
    font-size: 2em;
    text-align: center;
    margin-top: .5em;
    color: #ffffff;
}
#top-10 h2{
    font-size: 1em;
    text-align: center;
    padding-bottom: 5px;
    margin-top: 0;
    color: #ff8610;
}
/* Tabela Top-10*/
#top-10 table{
    background-color: rgba(0,0,0,.2);
    width: 100%;
    margin: 0 auto;
    color: #ffffff;
}
#top-10 td{
    border: solid 2px #1d1d1d;
    font-weight: bold;
}
#top-10 td.numero{
    padding: 10px;
    text-align: center;
}
#top-10 td.musica{
    padding-left: 5px;
}
#top-10 span{
    display: block;
    font-size: .8em;
    color: #ff8610;
}
/* Anuncio Publicitario 2*/
.ads2{
    width: 90%;
    height: auto;
    margin: 50px auto;
    display: none;
}
/* Video */
aside video{
    width: 100%;
    margin-top: .6em;
}
aside p{
    width: 100%;
    margin: 0 auto;
    color: #ff8610;
    font-size: .8em;
    padding: .5em;

}
/* Conteudo Principal do site lateral diteita - 958px / 1280px*/
#conteudo{
    width: 74.84375%;
    float: left;
    margin-left: 00.859375%; /* 11px/1280px */
    height: auto;
    background-color: transparent;
}
/* Pedido de musica 220px / 958px */
form#pedido{
    float: right;
    background-color: rgba(0,0,0,.9);
    padding: 1.85%; /* 17,5px / 220px */
    margin-top: .6em;
    width: 22.96450939457203%;
}
/* Largura input e textarea 215px / 220px */
#pedido input, textarea{
    width: 97.72727272727273%;
    background-color: rgba(255,255,255,.9);
}
#pedido input{
    text-transform: capitalize;
}
#pedido #cMail{
    text-transform: lowercase;
}
#pedido fieldset{
    color: #fff;
    text-align: center;
}
#pedido input#bEnviar{
    width: 100%;
}
#pedido input:focus {
    outline: none;
}

/*Novidades 340px / 958px*/
.novidades{
    width: 35.49060542797495%;
    height: auto;
    background-color: rgba(0,0,0,.9);
    float: left;
    margin-top: .6em;
    margin-right: 01.1482254697286%; /* 11px / 958px */
}
.noticias, .noticias{
    width: 35.49060542797495%;
    height: auto;
    background-color: rgba(0,0,0,.9);
    float: left;
    margin-top: .6em;
}
.novidades h1, .noticias h1{
    text-align: center;
    font-size: 1.2em;
    border-bottom: solid 1px #ffffff;
    color: #dfdfdf;
    padding-bottom: .5em;
}
.noticias h2, .novidades h2{
    font-size: 1em;
    color: #dfdfdf;
    padding: .5em;
    text-align: center;
}
.noticias h3, .novidades h3{
    font-size: .8em;
    color: #ffffff;
    text-align: right;
    padding: .5em;
}
.noticias p, .novidades p{
    font-size: medium;
    padding: .5em;
    text-align: justify;
    color: #aeaeae;
}
.novidades img{
    width: 100%;
    margin: auto;
}
.noticias img{
    width: 100%;
    margin-bottom: 2px;
}
/* Anuncio Publicitario */
.ads{
    width: 100%;
    float: left;
    margin-top: .6em;
    height: 90px;
    background-color: rgba(0,0,0,.9);
}

/* Apoio Cultural*/
#apoio-cultural{
    clear: both;
    float: left;
    margin-top: .6em;
    width: 100%;
    height: auto;
    background-color: rgba(0,0,0,.9);
}
#apoio-cultural h1{
    text-align: center;
    font-size: .9em;
    border-bottom: solid 1px #ffffff;
    color: #ffffff;
    padding-bottom: .4em;
}
/* Imagens apoio cultural*/
.banners{
    box-sizing: border-box;
    width: 24%;
    height: auto;
    background-color: transparent;
    float: left;
    margin-left: 0.8%;
}
#apoio-cultural img{
    width: 100%;
    height: 100%;
}
/* Rodape */
#rodape{
    width: 100%;
    clear: both;
    background-color: #0c0c0c;
    height: 150px;
}
#in-rodape{
    width: 100%;
    max-width: 1280px;
    margin: auto;
    height: auto;
}
/* Creditos */
#creditos{
    width: 100%; /* 600px/1280px*/
    margin: auto;
}
#c-esquerda{
    width: 49.5%;
    text-align: center;
    float: left;
    color: #aeaeae;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
#c-esquerda h1{
    font-size: 1.5em;
    border-bottom: solid 2px #aeaeae;
    padding-bottom: .2em;
}
#c-esquerda h2{
    font-size: 2em;
}
#c-direita{
    width: 49.5%;
    float: right;
    text-align: center;
    color: #aeaeae;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
#c-direita h1{
    font-size: 1.2em;
}

.d-none{
    display: none;
}

/*DEFAULT LOAD*/
.ajax_load {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 4;
}

.ajax_load_box {
    margin: auto;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.ajax_load_box_circle {
    border: 16px solid #e3e3e3;
    border-top: 16px solid red;
    border-bottom: 16px solid red;
    border-radius: 50%;
    margin: auto;
    width: 80px;
    height: 80px;

    -webkit-animation: spin 1.2s linear infinite;
    -o-animation: spin 1.2s linear infinite;
    animation: spin 1.2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.msg_success{
    border-radius: 10px;
    padding: 10px;
    background-color: lightgreen;
    border: 3px solid mediumseagreen;
}

.msg_error, .msg_recaptcha{
    border-radius: 10px;
    padding: 10px;
    background-color: rgba(255,0,0,0.5);
    border: 3px solid orangered;
}

.ajax_response {
    margin-top: 15px;
    background-color: white;
    border-radius: 10px;
    border: 0 solid white;
    text-align: center;
}

.ajax_response p, h4{
    padding: 0 !important;
    margin: 0 !important;
}

.ajax_response h4 {
    margin-bottom: 5px !important;
}


form{
    /*background-color: yellow !important;*/
    min-height: 380px !important;
}

.message{
    background-color: #dfdfdf;
    padding: 0 5px;
}


/* resolucao menor que 1024px */
@media screen and (max-width: 1023px){
    aside{
        margin-top: .6em;
    }
    .novidades{
        width: 72%;
    }
    .noticias{
        width: 72%;
    }
    #apoio-cultural{
        float: right;
        margin-top: -10%;
        width: 26.5%;
        clear: none;
    }
    .banners{
        width:100%;
        margin: auto;
    }
    .ads{
        display: none;
    }
}
@media screen and (max-width: 884px){
    #apoio-cultural{
        margin-top: -8%;
    }
}

@media screen and (max-width: 808px){
    .novidades{
        width: 59%;
    }
    form#pedido{
        width: 36%;
    }
    #apoio-cultural{
        margin-top: .6em;
        clear:none;
    }
}
@media screen and (max-width: 747px){
    form#pedido{
        width: 96.1%;
        float: right;
        margin-top: .5em;
    }
    .novidades{
        float: right;
        width: 100%;
        margin-right: 0;
    }
    .noticias{
        float: right;
        width: 100%;

    }
    #apoio-cultural{
        float: left;
        width: 100%;
    }
    .banners{
        width:50%;
        margin: auto;
    }
    #conteudo{
        width: 48%;
    }
    aside{
        width: 49.5%;
        height:auto;
        margin-left: 0;
        margin-top: .5em;
    }
    .ads2{
        display: table;
    }
}
@media screen and (max-width: 539px){
    aside, #conteudo{
        width: 100%;
    }
    #corpo{
        background-size: auto;
    }
    #c-direita{
        float: left;
        clear: both;
        margin-top: .6em;
        width: 100%;
        background-color: #0c0c0c;
    }
    #c-esquerda{
        width: 100%;
        background-color: #0c0c0c;
    }
}
@media screen and (max-width: 465px){
    #menu{
        width: 100%;

    }
    #menu ul{
        background-color: rgba(0,0,0,.9);
        margin-top:261px;
        margin-left: 10px;
        position: absolute;
    }
    #menu li{
        display: inline-flex;
        margin-top: 8px;
    }
    #menu a{

    }
    .logo{
        margin-top: .5em;
        margin-left: 25px;
        background-color: transparent;
    }
    .logo img{
        width: 80%;
        padding:0;
    }
}
/* Clearfix*/
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}