/* TODO */

@media screen and (max-width: 1250px)
{
    #accessibility_bar 
    {
        padding: 1.4rem 0rem;
    }
    #accessibility_bar .accessibility_items li
    {
        margin-left: 2rem;
    }
    #accessibility_bar .accessibility_items li.font_size_down
    {
        margin-left: 1rem;
    }
    #accessibility_bar .accessibility_items li a
    {
        font-size: 1.4rem;
        line-height: 2rem;
    }
    #accessibility_bar .accessibility_items li a i
    {
        font-size: 2rem;
        margin-right: 0.5rem;
    }
    #accessibility_bar .accessibility_shortcuts li
    {
        margin-right: 1rem;
    }
    #accessibility_bar .accessibility_shortcuts li a
    {
        font-size: 1.4rem;
    }
    #site_menu > li > a 
    {
        padding: 5.8rem 0.7rem;
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 1200px)
{
    #responsive_button 
    {
        display: block;
    }
    #header_bottom .responsive_block.menu_active
    {
        width: 100%;
    }
    #header_bottom .responsive_block
    {
        position: fixed;
        overflow: auto;
        width: 0;
        max-width: 50rem;
        height: 100%;
        top: 0;
        right: 0;
        padding-top: 18rem;
        background-color: #013B6B;
        transition: cubic-bezier(0.82, 0.03, 0.27, 1.01) 1s;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        margin-left: 0;
        z-index: 55;
    } 
    #menu 
    {
        width: 100%;
        position: relative;
        z-index: 90;
        overflow-y: auto;
        max-height: auto;
    }
    #menu::-webkit-scrollbar 
    {
        width: 1rem;
    }
    #menu::-webkit-scrollbar-track 
    {
        background-color: #F5F5F5;
    } 
    #menu::-webkit-scrollbar-thumb 
    {
        background-color: #8F8F8F;
    }
    #site_menu 
    {
        flex-direction: column;
    }
    #site_menu > li
    {
        border-bottom: 2px solid #F5F5F5;
        width: 100%;
        position: relative;
    }
    #site_menu > li::after
    {
        content: '';
        display: block;
        position: absolute;

        width: 0;
        height: 0;

        border-top: 9px solid #FFF;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;

        top: 50%;
        left: 1rem;
        transform: translateY(-50%);
        transition: 0.5s ease-in-out;
    }
    #site_menu > li.responsive_active::after
    {
        transform: translateY(-50%) rotateZ(180deg);
    }
    #site_menu > li > a 
    {
        padding: 2rem 3rem;
    }
    #site_menu > li > a .active_detail 
    {
        display: none !important;
    }
    #site_menu .dropdown_menu 
    {
        background-color: #FFF;
    }
    #site_menu .dropdown_menu .dropdown 
    {
        padding: 2rem 0rem;
    }
    #site_menu .dropdown_menu .dropdown li 
    {
        width: 100%;
        margin-left: 0;
        margin-bottom: 2rem;
    }
    #site_menu li:hover .dropdown_menu,
    #site_menu li:focus-within .dropdown_menu
    {
        height: 0;
    }
    #site_menu li.responsive_active .dropdown_menu
    {
        height: auto;
    }
    #site_menu .dropdown_menu .dropdown li a
    {
        font-size: 1.4rem;
        line-height: 2rem;
    }

    .dropdown_search 
    {
        top: unset;
        bottom: 0;
        padding: 0rem 3rem;
    }
    .header_search.active .active_detail,
    .header_search:focus-within .active_detail 
    {
        display: none;
    }

    .port_map_caption
    {
        max-width: 250px;
    } 
    .port_map_caption li
    {
        padding: 0 20px;
    } 
    .port_map_caption li button
    {
        font-size: 1.6rem;
    } 
}
@media screen and (max-width: 1150px)
{
    #accessibility_bar .central
    {
        justify-content: flex-end;
    }
}
@media screen and (max-width: 1000px)
{
    .footer_top .central 
    {
        flex-direction: column;
        align-items: center;
    }
    .footer_left 
    {
        margin-right: unset;
    }
    .footer_right 
    {
        width: 100%;
        margin-left: unset;
        margin-top: 2rem;
        padding-left: 0;
        align-items: center;
    }
    .footer_address_cnpj
    {
        width: 100%;
    }
    .footer_address 
    {
        margin-right: 0rem;
    }
    .footer_cnpj
    {
        margin-top: 1rem;
    }
    .footer_contact
    {
        margin-top: 1rem;
    }
    .footer_right .footer_info 
    {
        padding-left: 0rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer_menu 
    {
        display: flex;
        flex-wrap: wrap;
    }
    .footer_menu .footer_menu_block 
    {
        float: none;
        padding: 0rem;
        text-align: center;
        width: 16.6%;
        flex-direction: row;
    }
    .footer_menu .footer_menu_block.footer_menu_double
    {
        width: 33.2%;
    }
    .footer_menu .footer_menu_item
    {
        padding: 1rem;
    }
    .footer_menu .footer_menu_item > a
    {
        font-size: 1.4rem;
    }
    .footer_menu .footer_menu_block .submenus
    {
        display: none;
    }
}

@media screen and (max-width: 900px)
{
    #accessibility_bar .accessibility_shortcuts 
    {
        display: none;
    }
    .port_map .map_point.point_selected .point_info
    {
        width: 30rem;
    }
    .port_map .map_point:focus-within .point_info
    {
        width: 30rem;
    }
    .port_map .map_point .point_info .container
    {
        width: 30rem;
    }
}

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

@media screen and (max-width: 800px)
{
    .footer_menu 
    {
        flex-direction: column;
    }
    .footer_menu .footer_menu_block.footer_menu_double
    {
        width: 100%;
    }
}
@media screen and (max-width: 700px)
{
    .search
    {
        height: 4rem;
        max-width: 40rem;
    }

    .search input
    {
        padding-left: 1.5rem;
    }

    .search input::placeholder
    {
        font-size: 1.2rem;
    }

    .search button
    {
        font-size: 1.2rem;
        padding: 1rem 2.2rem;
    }
    .footer_cnpj .footer_title 
    {
        margin-bottom: 0.2rem;
    }
    .news_list li .news_info .news_title 
    {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    .news_list li .news_info .news_caption 
    {
        font-size: 1.4rem;
    }

    .port_map_caption
    {
        width: 100%;
        height: 3rem;
        overflow: hidden;
        max-width: unset;
        transition: none;
        padding: 0;
    }
    .port_map_caption.menu_active
    {
        height: auto;
    }
    .port_map_caption .responsive_block
    {
        display: block;
        text-align: center;
        height: 3rem;
    } 
    .port_map .map_point .point_info
    {
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        
        max-height: 0;
        width: unset;
    }
    .port_map .map_point .point_info .container
    {
        margin-left: 0rem;
        margin-top: 1rem;
        padding: 0.5rem;
    }
    .port_map .map_point .point_info .container::before
    {
        left: 50%;
        top: unset;
        top: 0;
        transform: translateX(-50%);
        
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        border-top: none;
        border-bottom: 10px solid #F5F5F5EE;
    }
    .port_map .map_point.point_selected .point_info
    {
        max-height: unset;
    }
    .port_map .map_point:focus-within .point_info
    {
        max-height: unset;
    }
    .port_map .map_point .point_info .container
    {
        max-height: unset;
    }
}

@media screen and (max-width: 600px)
{
    .footer_menu .footer_menu_block  
    {
        width: 100%;
        flex-direction: column;
    }
    .footer_menu .footer_menu_block.footer_menu_double
    {
        width: 100%;
    }
}

@media screen and (max-width: 500px)
{
    #accessibility_bar 
    {
        padding: 1rem 0rem;
    }
    #header_bottom 
    {
        padding: 0rem;
    }
    #header_bottom .logo 
    {
        padding: 2rem 0rem;
        max-width: 15rem;
    }
    #header_bottom .responsive_block
    {
        padding-top: 14rem;
    } 
    .footer_bottom .central 
    {
        flex-direction: column;
        align-items: center;
        padding: 2rem 1rem;
        text-align: center;
    }
    .footer_bottom .developer 
    {
        margin-top: 1rem;
    }
}
@media screen and (max-width: 400px)
{
    
}