@media screen and (min-width: 320px) and (max-width: 1200px) {

    body, html {
        height: auto;
        min-height: 100%
    }

    #wrapper {
        width: 92%;
        margin: 0 auto
    }

    /* ----- Menu mobile ---- */

    .menu_mobile_botao {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
    }

    .menu_mobile_botao button {
        display: block;
        color: #fff;
        position: absolute;
        top: 15px;
        right: 30px;
        font-size: 35px;
    }

    #menu_mobile {
        visibility: visible;
        position: fixed;
        width: 220px;
        max-width: 96%;
        height: 100%;
        right: 0;
        top: 0;
        z-index: 9999;
        overflow: scroll;
        background: #1e1e1e;
        -webkit-transform: translateX(220px);
        -moz-transform: translateX(220px);
        -ms-transform: translateX(220px);
        transform: translateX(220px);
        -webkit-transition: all .25s linear;
        -moz-transition: all .25s linear;
        -ms-transition: all .25s linear;
        transition: all .25s linear;
        box-shadow: inset 5px 0 10px 0 rgba(0,0,0,.3)
    }

    #menu_mobile .menu_mobile_content {
        width: 100%;
        height: auto;
        margin: 0;
    }

    #menu_mobile .menu_mobile_content ul {
        text-align: right;  
    }

    #menu_mobile .menu_mobile_content ul li {
        display: block;
        border-top: 1px dashed #444
    }

    #menu_mobile .menu_mobile_content ul li:first-child {
        border-top: 0
    }

    #menu_mobile .menu_mobile_content ul li a {
        color: #f4a009;
        display: block;
        padding: 14px 12px;
        font-size: 15px;
        text-transform: uppercase;
        font-weight: bold;
    }

    #menu_mobile .menu_mobile_content ul li ul {
        display: none;
    }

    #header,
    #linkbar,
    #wrapper,
    #footer {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        -webkit-transition: all .25s linear;
        -moz-transition: all .25s linear;
        -ms-transition: all .25s linear;
        transition: all .25s linear;
    }

    html.menu_mobile_ativo #menu_mobile {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    html.menu_mobile_ativo #header,
    html.menu_mobile_ativo #linkbar,
    html.menu_mobile_ativo #wrapper,
    html.menu_mobile_ativo #footer {
        -webkit-transform: translateX(-220px);
        -moz-transform: translateX(-220px);
        -ms-transform: translateX(-220px);
        transform: translateX(-220px);
    }

    /* ----- Header ----- */

    #header {
        background: #fa9a00;
        background: -moz-linear-gradient(top, #fa9a00 0%, #e55c00 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, #fa9a00), color-stop(100%, #e55c00));
        background: -webkit-linear-gradient(top, #fa9a00 0%, #e55c00 100%);
        background: -o-linear-gradient(top, #fa9a00 0%, #e55c00 100%);
        background: -ms-linear-gradient(top, #fa9a00 0%, #e55c00 100%);
        background: linear-gradient(to bottom, #fa9a00 0%, #e55c00 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9a00', endColorstr='#e55c00', GradientType=0 );	
    }

    .header_content {
        width: 100%;
        height: 60px
    }

    .header_logo {
        width: 143px;
        height: 45px;
        position: relative;
        top: 7px;
        left: 15px;
        background: url('../img/logo-mobile.png') center center/143px no-repeat	
    }

    .header_logo h1 a {
        width: 143px;
        height: 45px;
    }

    .header_navegacao,
    #linkbar {
        display: none
    }

    .header_botao_menu_mobile {
        display: block;
        color: #fff;
        position: absolute;
        top: 5px;
        right: 20px;
        font-size: 35px;
    }

    .publicidade_header {
        display: none
    }

    /* ----- Links ----- */

    .links {
        text-align: center
    }

    .link {
        float: none;
        display: inline-block;
        width: 285px;
        height: auto;
        margin: 0 auto 20px;
    }

    /* ----- Main ----- */

    #wrapper #main {
        width: 100%;
        margin: 50px auto 100px
    }

    /* ----- Páginas ----- */

    .pagina {
        width: 100%
    }

    .formulario_erros {
        max-width: 480px;
        min-width: 100%;
    }

    /* ----- Permalink ----- */

    .permalink {
        width: 90%;
        padding: 10px;
        margin: 0 auto 20px;
    }

    .permalink_coluna_central, .permalink_coluna_direita, .permalink_coluna_esquerda {
        min-height: auto;
    }

    .permalink_coluna_central {
        padding: 0 10px
    }

    .permalink_coluna_esquerda,
    .permalink_coluna_direita {
        width: 100%;
        float: none;
        margin: 0 auto 20px
    }

    .permalink_redes ul.redes_sociais {
        position: relative;
        margin: 20px 0 0 0
    }

    .permalink_relacionados_titulo {
        width: 94%;
        margin: 10px auto
    }

    /* ----- Footer ----- */

    #footer {
        width: 100%
    }

    .footer_content {
        width: 94%;
        padding: 35px 0 0 0;
    }

    .footer_box {
        width: 100%;
        margin-top: 35px
    }

    ul.footer_lista_links li {
        padding: 8px 10px;
        border-bottom: 1px dashed #545454
    }

    ul.footer_lista_links li:first-last {
        border-bottom: 0
    }

    ul.footer_lista_links li a {
        font-size: 16px
    }

    .footer_copyright {
        text-align: center
    }

    @media screen and (max-width: 424px) {

        #footer {
            margin-top: 35px
        }

        .footer_content {
            padding: 0;
        }   

        .footer_logo {
            width: 143px;
            height: 45px;
            top: -28px;
            background: url('../img/logo-mobile.png') center center/143px no-repeat	
        }

    }

    @media screen and (min-width: 724px) {

        #footer {
            text-align: center
        }

        .footer_box {
            display: inline-block;
            float: none;
            width: 45%;
            padding: 0 20px;
            vertical-align: top;
            text-align: left
        }
        
        .footer_box .footer_box {
            padding: 0
        }

    }

}