/** Refer�ncia: http://css-tricks.com/snippets/css/media-queries-for-standards/ **/
/** Visto em: 19.01.2015 **/

@media (min-width: 768px) {
    .form-horizontal .control-label {
        text-align: inherit;
    }
}

/*Contexto / 16px= Resultado*/
/*Exemplo de contexto: 480px / 16px= 30em*/

/*iPads (portrait and landscape) -----------*/
@media only screen and (max-width: 1024px) {
    /*Styles*/
    body {
        width: 100%;
    }

    #Div_Navigator .dropdown-backdrop {
        height: 0;
    }

    header {
        display: block;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .div-header-top, #Container {
        width: 100%;
    }

    #Div_ConsultaProcessual, #Div_Lateral, .div-trf5-noticias, #Div_NoticiasFull {
        width: 100%;
    }

    #Div_Lateral {
        padding-left: 0em;
    }

    #Div_Lateral.ultimas-noticias {
        margin-top: 5%;
    }

    #Div_Lateral.itens-relacionados, #Div_Lateral.ultimas-noticias {
        width: 24%;
    }

    #Div_Lateral aside {
        width: 50%;
    }

    #Div_Lateral.ultimas-noticias aside {
        width: 100%;
    }

    #Div_Lateral.itens-relacionados aside {
        width: 100%;
        margin-top: 55px;
    }

    #Div_ServicosPublicos {
        padding-right: 1.25%;
    }

    #Div_TodasNoticias {
        padding-left: 1.25%;
    }

    #Div_ServicosPublicos, #Div_TodasNoticias, #Div_Banners {
        margin-top: 0px;
    }

    aside > ul {
        padding-right: 1em;
    }

    .main h3.small {
        display: none;
    }

    .menu-active .main, .menu-active footer {
        border-left: 2px solid #D1BC5E;
    }

    .blocoNoticia {
        width: 33%;
    }

    .opcoes-active #Div_Nav_Topo {
        display: block;
        background-color: #262626;
        display: block;
        z-index: 1;
        -webkit-animation: fadeIn 1s;
        -moz-animation: fadeIn 1s;
        -ms-animation: fadeIn 1s;
        -o-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }

    /*#Div_Nav_Topo > p:before {
        content: "";
        display: block;
        height: 1px;
        margin: 10px;
        background: #ccc;
    }*/
    #Div_Secoes {
        padding: 0;
        margin-bottom: 10px;
    }

    #Div_Secoes li {
        margin: 0.1em 0 0.1em 0;
        width: 100%;
        height: 1.4375em;
    }

    #Div_Secoes li:hover, .div-acessibilidade li:hover {
        background-color: #2B3856;
    }

    #Div_Secoes li a {
        border-right: none;
        padding-top: 0em;
    }

    /*Botao circular*/
    .round-button {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 75%;
        border: 2px solid transparent;
        /*border: 2px solid #777;*/
        border-radius: 50%;
        color: whiteSmoke;
        text-align: center;
        text-decoration: none;
        /*background: #464646;*/
        /*box-shadow: 0 0 3px gray;*/
        font-size: 80%;
    }

    .round-button:before {
        content: "+";
        position: relative;
        z-index: 2;
    }

    .round-button:hover, .opcoes-active .round-button {
        background: #262626;
        text-decoration: none;
        color: #F5F5F5;
    }

    @-webkit-keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /*Fim Botao circular*/
    #Div_Nav_Topo {
        display: none;
        position: absolute;
        top: 40px;
        right: 0;
        width: 120px;
        height: auto;
        font-size: 1.3em;
        padding-top: 10px;
        background: #0C090A;
    }

    #Div_Nav_Topo p {
        display: block;
        float: left;
        width: 100%;
        margin: 0;
        padding: 3px 20px;
        font-size: 12px;
        line-height: 1.42857143;
        color: #777;
        white-space: nowrap;
    }

    .div-acessibilidade li a p {
        float: right;
        line-height: 100%
    }

    .div-header-top .div-acessibilidade #accessibilityBtn a p,
    .div-header-top .div-acessibilidade #highContrastBtn a p,
    .div-header-top .div-acessibilidade #translateBtn a p,
    .div-header-top .div-acessibilidade #login_logoffBtn a p,
    .div-header-top .div-acessibilidade #senhaBtn a p {
        float: none;
        color: hsl(0, 0%, 70%);
        margin: 5px 0;
    }

    .div-acessibilidade {
        margin-bottom: 0.5em;
    }

    .div-acessibilidade, .div-acessibilidade li {
        width: 100%;
    }

    .div-header-top .div-acessibilidade li {
        display: none;
        margin-left: 10px;
    }

    .div-header-top .div-acessibilidade #accessibilityBtn,
    .div-header-top .div-acessibilidade #highContrastBtn,
    .div-header-top .div-acessibilidade #translateBtn,
    .div-header-top .div-acessibilidade #login_logoffBtn,
    .div-header-top .div-acessibilidade #senhaBtn {
        display: inline;
    }

    body {
        display: table;
        overflow-x: hidden;
    }

    header {
        background-color: #0C090A;
    }

    #Container {
        width: 100%;
        clear: both;
        margin: 0;
        z-index: 0;
    }

    .main, footer {
        background-color: #fff;
    }

    footer {
        display: block;
    }

    /*Botao que abre e fecha o menu*/
    .menu-anchor {
        display: block;
        float: left;
        width: 40px;
        height: 40px;
        cursor: pointer;
        color: #fff;
        font-size: 2.5em;
        text-align: center;
        line-height: 1.2; /* TODO: ajustar */
    }

    .menu-anchor:before {
        content: "\2261";
        display: block;
    }

    .menu-active .menu-anchor {
        background: #0C090A
    }

    .menu-active .menu-anchor:before {
        content: "\00d7";
    }

    .opcoes-anchor {
        margin-top: 7.5px;
        display: block;
        float: right;
        width: 25px;
        height: 25px;
        cursor: pointer;
        color: white;
        font-size: 2.5em;
        text-align: center;
        line-height: normal;
    }

    .opcoes-active .opcoes-anchor:after {
        content: "";
        position: absolute;
        width: 25px;
        height: 25px;
        background: #262626;
        top: 20px;
        right: 0;
        z-index: 1;
        -webkit-animation: fadeIn 1s;
        -moz-animation: fadeIn 1s;
        -ms-animation: fadeIn 1s;
        -o-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }

    .opcoes-active.translate-active .opcoes-anchor:after {
        top: 104px;
    }

    /*Ajuste da barra de busca e do logo superior*/
    #Div_HeaderMedium #Div_Imagens, .div-buscar, #Div_HeaderMedium .div-buscar .form-inline {
        width: 100%;
        clear: both;
    }

    .div-buscar .form-inline button, .div-buscar .form-inline .form-group label {
        display: none;
    }

    /*Corpo do menu de navegacao*/
    #Div_HeaderBottom {
        display: table-row;
        position: absolute;
        /*top: 2.2%; Nao funciona em telas que precisam da correcao body width: 100% */
        top: 50px;
        font-size: 1.3em;
        left: 0;
        width: 242px;
        height: 97.8%;
        background: #0C090A;
        box-shadow: inset -5px -10px 10px 0 rgba(0, 0, 0, .3);
        overflow-x: hidden;
    }

    #Div_HeaderBottom nav {
        height: auto;
    }

    #Div_HeaderBottom li a {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, .3);
        margin: 0 10px;
        padding: 10px;
        color: #FFF;
        text-decoration: none;
    }

    #Div_HeaderBottom li a {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, .3);
        margin: 0 10px;
        padding: 10px;
        color: #FFF;
        text-decoration: none;
    }

    #Div_HeaderBottom li a:hover, .div-glossario a button:hover {
        background: #2B3856;
    }

    #Div_HeaderBottom li a:focus, .div-glossario a button:focus {
        background: #2B3856;
    }

    /*Correcoes nas opcoes do menu de navegacao*/
    .open .caret {
        border-bottom: 4px solid;
        border-top: none;
    }

    /* Setinhas que abrem e fecham os itens do menu */
    .caret {
        float: right;
        margin-top: 10px;
        /*margin-right: 10px;*/
    }

    #Div_Navigator {
        width: 100%;
    }

    #Div_Navigator ul li {
        float: none;
    }

    #Div_Navigator ul li a {
        color: #FFF;
        white-space: normal;
    }

    #Div_Navigator ul li ul.dropdown-menu {
        position: static;
        float: none;
        background-color: transparent;
        font-size: inherit;
        padding: 0px;
    }

    #Div_Navigator ul li ul.dropdown-menu h2 {
        display: none;
    }

    #Div_Navigator > ul > li.dropdown.open > a {
        background-color: #221;
    }

    #Div_Navigator ul li ul.dropdown-menu li a {
        padding-left: 25px;
        padding-right: 10px;
    }

    /*Largura da div de consulta processual*/
    #Div_ConsultaProcessual {
        width: 100%;
    }

    /*Ajuste da largura do carrossel*/
    .div-trf5-noticias {
        width: 100%;
        margin-top: 2.5em;
    }

    /*Ajuste da fonte do texto do carrossel*/
    #carousel-example-generic .carousel-inner .item .carousel-caption {
        padding-top: 0px;
    }

    #carousel-example-generic .carousel-inner .item .carousel-caption h3 {
        font-size: 1.35em;
    }

    /*Ajuste da fonte do texto do carrossel*/
    #carousel-example-generic .carousel-inner .item .carousel-caption p {
        display: none;
    }

    /*Ajuste do bot�o do dicion�rio*/
    .div-glossario {
        float: none;
        width: 100%
    }

    .div-glossario a {
        background: none;
        border: none;
        border-bottom: 1px solid #444;
        cursor: pointer;
        color: #fff;
        width: 94%;
        margin: 0 10px;
        text-align: left;
        padding: 0.325em;
        border-bottom-color: rgba(255, 255, 255, 0.298039);
    }

    .div-glossario a:hover, .div-glossario a:focus {
        background: #2B3856;
    }

    .div-glossario a span {
        display: none;
    }

    /* Ajuste na disposicao dos banners */
    #Div_Banners img {
        width: 100%;
        height: auto;
    }

    .item-especial-banner-1, .item-especial-banner-2, .item-especial-banner-3 {
        width: 33.33%;
    }

    .item-especial-banner-4, .item-especial-banner-5 {
        width: 50%;
    }

    .banners {
        height: auto;
    }

    .banners, .rotating-banners {
        min-width: 50%;
        float: left;
        width: 50%;
    }

    /*Ajuste da largura da secao de noticias*/
    #Div_NoticiasFull {
        width: 100%;
    }

    #Div_NoticiasFull .row {
        margin-right: 0px;
        margin-left: 0px;
        /* width: 100%; */
    }

    #Div_HeaderMedium {
        top: 0px;
        padding: 0px;
        position: absolute;
        left: 0;
        width: 242px;
        /*height: 2.2%; Nao funciona em telas que precisam de body width: 100% */
        height: 50px;
        background: #0C090A;
    }

    #Div_Imagens {
        display: none;
    }

    .div-buscar {
        margin-top: 0px;
        width: 80%;
        margin-left: 10%;
    }

    /*Esticando a lista de botoes do rodape*/
    #Div_ServicosFooter ul {
        padding-left: 0px;
    }

    /* Tirando as imagens */
    #Div_ServicosFooter img {
        display: none;
    }

    #Div_FooterUpFirst {
        display: none;
    }

    #Div_ServicosFooter, #Div_ServicosFooter ul li, #Div_ServicosFooter ul li button {
        width: 100%;
    }

    .cd-top {
        height: 60px;
        width: 60px;
        right: 30px;
        bottom: 30px;
    }

    #Div_Lateral #Div_Banners {
        height: 100%;
        width: 100%;
    }

    /*
        Aqui voce esconde o menu para fora da tela
        O valor e exatamente a largura da sidebar
   */
    #Div_HeaderBottom, #Div_HeaderMedium, #Container, header:after {
        -webkit-transition: all .25s linear;
        -ms-transition: all .25s linear;
        -moz-transition: all .25s linear;
        -o-transition: all .25s linear;
        transition: all .25s linear;
    }

    #Div_HeaderBottom, #Div_HeaderMedium {
        -webkit-transform: translateX(-462px);
        -moz-transform: translateX(-462px);
        -ms-transform: translateX(-462px);
        -o-transform: translateX(-462px);
        transform: translateX(-462px);
    }

    /* Essa e a posisao original do HEADER e do MAIN  */
    #Container, header:after {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
    }

    /* Com a classe menu-active na tag HTML */
    .menu-active #Div_HeaderBottom, .menu-active #Div_HeaderMedium {
        -webkit-transform: translateX(-242px);
        -moz-transform: translateX(-242px);
        -ms-transform: translateX(-242px);
        -o-transform: translateX(-242px);
        transform: translateX(-242px);
    }

    .menu-active #Container, .menu-active header:after {
        -webkit-transform: translateX(242px);
        -moz-transform: translateX(242px);
        -ms-transform: translateX(242px);
        -o-transform: translateX(242px);
        transform: translateX(242px);
    }

    .translate-active #Div_Nav_Topo {
        -webkit-transform: translateY(84px);
        -moz-transform: translateY(84px);
        -ms-transform: translateY(84px);
        -o-transform: translateY(84px);
        transform: translateY(84px);
    }

    /* Fim do que veio da tela pequena */

}

/*Smartphones (portrait)*/
/*321px / 16px = 20.0625em*/
/*Smartphones (portrait and landscape) -----------*/
@media only screen and (max-width: 480px) {
    /*Styles*/
    #component-content {
        width: 100%;
    }

    .cd-top {
        right: 20px;
        bottom: 20px;
    }

    /*Ajuste dos menus laterais e dos banners*/
    aside > ul {
        padding-right: 0;
    }

    aside#Div_TodasNoticias {
        margin-top: 10px;
    }

    #Div_Lateral.itens-relacionados, #Div_Lateral.ultimas-noticias {
        width: 100%;
    }

    #Div_Lateral aside {
        clear: both;
        width: 100%;
        margin: 10px auto;
    }

    #Div_TodasNoticias ul, #Div_ServicosPublicos ul {
        padding-left: 0;
    }

    /*Ajuste da largura da secapo de noticias*/
    #Div_NoticiasFull {
        width: 100%;
    }

    .blocoNoticia {
        width: 100%;
    }

    /*Ajuste da largura da secaoo de banners*/
    #Div_Banners {
        width: 100%;
    }

    #Div_HeaderMedium {
        top: 0px;
        padding: 0px;
        position: absolute;
        left: 0;
        width: 242px;
        background: #0C090A;
    }

    #Div_Imagens {
        display: none;
    }

    .div-buscar {
        margin-top: 0px;
        width: 80%;
        margin-left: 2%;

    }

    .search-field {
        float: none;
    }

    /*Desabilitando a imagem do rodape*/
    hr {
        display: none;
    }

    /*Ajuste da fonte do texto do carrosel*/
    #carousel-example-generic .carousel-indicators {
        /*bottom: -10%;*/
    }

    #carousel-example-generic .carousel-inner .item .carousel-caption {
        padding-top: 0px;
    }

    #carousel-example-generic .carousel-inner .item .carousel-caption h3 {
        font-size: 12px;
        margin-top: 0px;
    }

    #Div_NoticiasFull .row .blocoNoticia {
        padding: 0;
    }

    .div-selos img {
        width: 22%;
    }

    .banners, .rotating-banners {
        width: 100%;
    }
}

/*Smartphones (portrait and landscape) -----------*/
/*@media only screen and (min-width : 320px) and (max-width : 480px) {*/
/*Styles*/
/*}*/

/*Smartphones (landscape) -----------*/
@media only screen and (min-width: 321px) {
    /*Styles*/
}

/*Smartphones (portrait) -----------*/
@media only screen and (max-width: 320px) {
    /*Styles*/
}

/*Tablet (portrait)*/
/*Eu fiz / 16px = 50.0625em*/
@media only screen and (min-width: 20.0625em) {
    /*Styles*/
}

/*iPads (portrait and landscape) -----------*/
/*@media only screen and (min-width : 768px) and (max-width : 1024px) {*/
/*Styles*/
/*}*/

/*iPads (landscape) -----------*/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /*Styles*/
}

/*iPads (portrait) -----------*/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /*Styles*/
}

/*Desktops and laptops -----------*/
@media only screen and (min-width: 1224px) {
    /*Styles*/
}

/*Large screens -----------*/
@media only screen and (min-width: 1824px) {
    /*Styles*/
}

/*iPhone 4 -----------*/
@media only screen and (-webkit-min-pixel-ratio: 1.5), only screen and (min-pixel-ratio: 1.5) {
    /*Styles*/
}