/** 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_HeaderTop, #Container {
        width: 100%;
    }

    #Div_ConsultaProcessual, #Div_Lateral, #Div_TRF5Noticias, #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;
    }

    /*Botão 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 Botão 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_HeaderTop #Div_Acessibilidade #accessibilityBtn a p,
    #Div_HeaderTop #Div_Acessibilidade #highContrastBtn a p,
    #Div_HeaderTop #Div_Acessibilidade #translateBtn a p,
    #Div_HeaderTop #Div_Acessibilidade #login_logoffBtn 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_HeaderTop #Div_Acessibilidade li {
        display: none;
        margin-left: 10px;
    }


    #Div_HeaderTop #Div_Acessibilidade #accessibilityBtn,
    #Div_HeaderTop #Div_Acessibilidade #highContrastBtn,
    #Div_HeaderTop #Div_Acessibilidade #translateBtn,
    #Div_HeaderTop #Div_Acessibilidade #login_logoffBtn {
        display: inline;
    }

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

    header {
        background-color: #0C090A;       
    	/*background-color: #b80c56;*/
    }

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

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

    footer {
        display: block;
    }

    /*Botão 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 navegação*/
    #Div_HeaderBottom {
        display: table-row;
        position: absolute;
        /*top: 2.2%; Não funciona em telas que precisam da correção 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;
    }

    /*Correções nas opçoes do menu de navegação*/
    .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;
    }

    #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_TRF5Noticias {
        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 disposição 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 seção de notícias*/
    #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%; Não 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 botões do rodapé*/
    #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 você esconde o menu para fora da tela 
        O valor é 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 é a posição 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 seção de notícias*/
    #Div_NoticiasFull {
        width: 100%;
    }

    .blocoNoticia {
        width: 100%;
    }

    /*Ajuste da largura da seção 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: 10%;
    }

    /*Desabilitando a imagem do rodapé*/
    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*/
}