@media screen and (max-width:1310px) {
    .sticky #siteHeader #menuMobileIcon {
        display: block
    }
}

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

    /* Hide topBar (social icons, buttons) on mobile */
    #topBar {
        display: none !important;
    }

    .icon-bar {
        left: initial;
        display: flex;
        bottom: 0;
        width: 100%;
        transform: initial;
        top: initial
    }

    #menuPrincipal .icon-bar a {
        height: 50px;
        padding: 6px 10px;
        width: 25%
    }

    .sticky {
        padding-top: 85px
    }

    #siteHeader {
        background: #eee;
        border-bottom: 1px solid #ddd;
        height: 85px;
        align-items: center
    }

    #siteHeader>div {
        justify-content: space-between;
        display: flex;
        height: 85px;
        margin: 0 auto;
        padding: 0 15px
    }

    .sticky #siteHeader>div {
        padding: 0 15px
    }

    #siteHeader>div>div:nth-child(1) {
        align-items: center;
        background: 0 0;
        display: flex;
        order: 1
    }

    #siteHeader>div>div:nth-child(2) {
        background: 0 0;
        border-bottom: 0;
        order: 0
    }

    #siteHeader #logo {
        padding: 10px 0
    }

    .sticky #siteHeader nav ul li:last-child {
        display: block
    }

    #siteHeader #telefone {
        display: none
    }

    #siteHeader #buscaMembrosAssociese {
        width: auto
    }

    #siteHeader>div>div:nth-child(2),
    .sticky #siteHeader>div>div:nth-child(2) {
        align-items: center;
        background: 0 0;
        border-bottom: 0;
        display: flex;
        order: 0;
        flex-grow: initial
    }

    #siteHeader>div>div>div {
        justify-content: space-between;
        padding: 0
    }

    #siteHeader #membrosCtn {
        border-left: none;
        margin: 0 10px 0 5px;
        padding: 0 20px;
        order: 0
    }

    #siteHeader #busca {
        order: 1;
        width: auto
    }

    #siteHeader #busca div:first-child {
        align-items: center;
        border-right: 1px solid #c9c9c9;
        height: 24px;
        display: flex;
        margin-right: 15px;
        padding: 0 10px 0 0
    }

    #siteHeader #busca #buscaTextSubmit {
        display: none;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 10;
        background: rgba(0, 0, 0, .7)
    }

    #siteHeader #busca #buscaTextSubmit input[type=image] {
        width: 70px
    }

    #siteHeader #busca>#buscaTextSubmit>div {
        background: 0 0;
        border-radius: 0;
        border-right: none;
        height: auto;
        justify-content: center;
        margin-right: 0;
        padding: 0
    }

    #siteHeader #busca input[type=text] {
        background: 0 0;
        border: 0;
        border-bottom: 2px solid #fff;
        border-radius: 0;
        color: #fff;
        line-height: 70px;
        height: 70px;
        font-size: 50px;
        outline: 0;
        padding: 0 10px;
        width: auto
    }

    /* =============================================
       HAMBURGER ICON — animated to X
       ============================================= */
    #siteHeader #menuMobileIcon {
        background: 0 0;
        border: 0;
        font-size: 26px;
        display: block;
        outline: 0;
        padding: 0;
        color: #333;
        transition: transform .3s ease;
        z-index: 12;
    }

    body.mob #siteHeader #menuMobileIcon {
        position: fixed;
        right: 25px;
        top: 28px;
    }

    /* =============================================
       BACKDROP OVERLAY
       ============================================= */
    body.mob::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 10, 30, .55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 9;
        animation: fadeIn .3s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    /* =============================================
       MENU PANEL — slide from right
       ============================================= */
    #menuPrincipal {
        display: none !important;
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 380px;
        height: 100vh;
        height: 100dvh;
        background: #fff;
        box-shadow: -8px 0 30px rgba(0, 0, 0, .2);
        z-index: 10;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        transform: translateX(0);
        animation: slideIn .35s cubic-bezier(.22, .61, .36, 1);
    }

    @keyframes slideIn {
        from {
            transform: translateX(100%)
        }

        to {
            transform: translateX(0)
        }
    }

    body.mob #menuPrincipal {
        display: block !important;
    }

    /* =============================================
       MENU HEADER — gradient accent
       ============================================= */
    #menuPrincipal::before {
        content: 'Menu';
        display: block;
        padding: 28px 24px 18px;
        font-size: 22px;
        font-weight: 700;
        color: #fff;
        background: linear-gradient(135deg, #004379 0%, #18a7b5 100%);
        letter-spacing: .5px;
    }

    /* =============================================
       MENU ITEMS — modern clean style
       ============================================= */
    #menuPrincipal .subMenuTitle,
    #menuPrincipal .subSubMenuTitle,
    #menuPrincipal>ul>li>a {
        align-items: center;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        font-weight: 500;
        font-size: 15px;
        color: #333;
        justify-content: space-between;
        padding: 16px 24px;
        transition: background .2s, color .2s, padding-left .2s;
    }

    #menuPrincipal .subMenuTitle:hover,
    #menuPrincipal>ul>li>a:hover {
        background: #f7fafc;
        color: #004379;
        padding-left: 28px;
    }

    /* Chevron icon instead of old arrow */
    #menuPrincipal .subMenuTitle:after,
    #menuPrincipal .subSubMenuTitle:after {
        content: '›';
        font-size: 22px;
        font-weight: 300;
        color: #999;
        margin-left: 10px;
        transition: transform .3s, color .3s;
    }

    #menuPrincipal li.ativo>.subMenuTitle:after {
        transform: rotate(90deg);
        color: #004379;
    }

    /* =============================================
       SUB-MENUS — slide overlay panels
       ============================================= */
    #menuPrincipal .subMenu,
    #menuPrincipal .subSubMenu {
        background: #fff;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 380px;
        z-index: 11;
        transform: translateX(100%);
        transition: transform .3s cubic-bezier(.22, .61, .36, 1);
    }

    #menuPrincipal .ativo>.subMenu,
    #menuPrincipal .subMenu ul li.ativo>div.subSubMenu {
        display: block;
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }

    #menuPrincipal .subMenu ul li>div.subSubMenu {
        display: none;
    }

    /* Sub-menu items */
    #menuPrincipal .subMenu a,
    #menuPrincipal .subSubMenu a {
        font-size: 14px;
        font-weight: 400;
        color: #444;
        padding: 14px 24px;
        border-bottom: 1px solid #f0f0f0;
    }

    #menuPrincipal .subMenu a:hover {
        background: linear-gradient(90deg, #f0f7ff 0%, #fff 100%);
        color: #004379;
    }

    /* Hide ads */
    #menuPrincipal .adsense {
        display: none;
    }

    /* =============================================
       VOLTAR (Back) BUTTON — modern
       ============================================= */
    .voltar {
        align-items: center;
        background: linear-gradient(135deg, #004379 0%, #18a7b5 100%);
        color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 16px 24px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .5px;
        cursor: pointer;
    }

    .voltar::before {
        content: '‹';
        font-size: 24px;
        font-weight: 300;
        margin-right: 10px;
    }

    /* =============================================
       SOCIAL ICON BAR — bottom fixed
       ============================================= */
    .icon-bar {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: space-around;
        background: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
        z-index: 20;
        padding: 0;
        transform: none;
        top: auto;
    }

    #menuPrincipal .icon-bar a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 52px;
        width: 25%;
        font-size: 20px;
        color: #555;
        border: none;
        padding: 0;
        transition: color .2s, background .2s;
    }

    #menuPrincipal .icon-bar a:hover {
        background: #f7fafc;
    }

    #menuPrincipal .icon-bar a.facebook {
        color: #1877f2
    }

    #menuPrincipal .icon-bar a.instagram {
        color: #e4405f
    }

    #menuPrincipal .icon-bar a.youtube {
        color: #ff0000
    }

    #menuPrincipal .icon-bar a.linkedin {
        color: #0a66c2
    }
}


@media screen and (max-width:980px) and (min-width:361px) {
    #associeseRow>div>div {
        padding: 22px 15px
    }

    #homeDestaques .destaque {
        font-size: 16px
    }

    #homeDestaques p {
        font-size: 15px
    }
}

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

    #facaParteSPR {
        display: block !important;
    }

    .parteSPR {
        align-items: center;
        background: #004379;
        color: #fff;
        display: flex;
        justify-content: space-between;
        font-weight: 600;
    }

    .slick-dots {
        align-items: center;
        display: flex;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        width: 100%
    }

    .slick-dots button {
        background: #ccc;
        border: 0;
        border-radius: 8px;
        font-size: 0;
        height: 16px;
        margin: 0 3px;
        outline: 0;
        width: 16px
    }

    .slick-dots .slick-active button {
        background: #004379
    }

    #siteHeader #logo img {
        max-width: 90px
    }

    #siteHeader #membrosCtn,
    .sticky #siteHeader #membrosCtn {
        border: 0;
        font-size: 0;
        height: auto;
        line-height: initial;
        margin: 0;
        padding: 0;
        position: initial
    }

    #siteHeader #membrosCtn>div:first-child>div {
        background-size: 272px 299px;
        background-position: -24px 0;
        height: 23px;
        margin-right: 0;
        width: 23px
    }

    #siteHeader #membrosCtn>#membrosDropdown {
        box-shadow: 0 3px 3px rgba(0, 0, 0, .1);
        padding: 0;
        top: 85px;
        z-index: 8;
        width: 100%
    }

    #siteHeader #membrosCtn>#membrosDropdown>div {
        background: #fff;
        border: 0;
        border-bottom: 15px solid #eee;
        border-radius: 0;
        display: block;
        padding: 15px
    }

    #siteHeader #membrosCtn>#membrosDropdown>div>div:first-child {
        display: none
    }

    #siteHeader #membrosCtn>#membrosDropdown input[type=text] {
        border: 1px solid #c9c9c9;
        border-radius: 20px;
        height: 40px
    }

    #siteHeader #membrosCtn>#membrosDropdown input[type=submit] {
        border-radius: 20px;
        height: 40px
    }

    #siteHeader #busca,
    .sticky #siteHeader #busca {
        order: initial;
        margin-right: 15px
    }

    #siteHeader #busca input[type=image] {
        height: 25px;
        padding: 0;
        width: 25px
    }

    #siteHeader #busca div:first-child,
    .sticky #siteHeader #busca div:first-child {
        border-right: 0;
        margin-right: 0;
        padding-right: 0
    }

    #associeseRow>div:nth-child(2)>div {
        border-bottom: 0;
        border-radius: 0;
        border-top: 0
    }

    #associeseRow>div:nth-child(1)>div {
        border-radius: 15px 15px 0 0
    }

    #associeseRow>div:nth-child(3)>div {
        border-radius: 0 0 15px 15px
    }

    #homeEventos a img {
        display: block;
        width: 100%
    }

    #siteHeader #busca #buscaTextSubmit {
        padding: 15px
    }

    #siteHeader #busca>#buscaTextSubmit>div {
        display: block
    }

    #siteHeader #busca input[type=text],
    .sticky #siteHeader #busca input[type=text] {
        font-size: 30px;
        width: 100%;
        text-align: center
    }

    #siteHeader #busca #buscaTextSubmit input[type=image],
    .sticky #siteHeader #busca #buscaTextSubmit input[type=image] {
        display: block;
        height: 60px;
        margin: 10px auto;
        width: 60px
    }


    .nav-tabs {
        margin: 0;
    }

    .nav-tabs .nav-item {
        margin-bottom: 5px;
        width: 100%;
    }

    .nav-tabs .nav-link {
        border-radius: 15px;
        border: 1px solid #dee2e6 !important;
        margin: 0;
        border-color: #dee2e6;
    }

    table,
    tbody,
    td,
    th,
    thead,
    tr {
        /*display: block*/
    }

    .tbl thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px
    }

    .tbl td {
        border: none;
        border-top: 1px solid #ddd;
        position: relative;
        /*padding-left: 40%;*/
        white-space: normal;
        text-align: left
    }

    .tbl td:first-child {
        /*border-top: none*/
    }

    .tbl td:before {
        position: absolute;
        left: 10px;
        width: 35%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: 700
    }

    .tbl td:before {
        content: attr(data-title)
    }

    .pagination>span>a,
    .pagination>span>span.paginas {
        display: none
    }

    .pagination>span>a.anterior,
    .pagination>span>a.proximo {
        display: block
    }

    .pagination>span {
        border-radius: .25rem;
        justify-content: center;
        width: 100%
    }
}

/* =============================================
   TABLET BREAKPOINT (768px)
   ============================================= */
@media screen and (max-width:768px) {

    .nav-tabs .nav-item {
        margin-bottom: 5px;
        width: 100%;
    }

    .nav-tabs .nav-link {
        border-radius: 15px;
        border: 1px solid #dee2e6 !important;
        margin: 0;
    }

    #associeseRow>div>div {
        padding: 15px 15px 15px 80px;
        background-size: 60px;
    }
}

/* =============================================
   SIDENAV MOBILE (≤980px) — colapso toggleable
   ============================================= */
@media screen and (max-width:980px) {

    #sideNav {
        margin-bottom: 20px;
        border: 1px solid #ddd;
        border-radius: 10px;
        overflow: hidden;
    }

    #sideNav h2 {
        cursor: pointer;
        margin: 0;
        padding: 12px 15px;
        font-size: 18px;
        background: #eee;
        position: relative;
    }

    #sideNav h2:after {
        content: '▼';
        font-size: 12px;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform .3s;
    }

    #sideNav.open h2:after {
        transform: translateY(-50%) rotate(180deg);
    }

    #sideNav ul {
        display: none;
        padding: 10px 0;
    }

    #sideNav.open ul {
        display: block;
    }
}

/* =============================================
   TABLE OVERFLOW PROTECTION
   ============================================= */
.table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table:not(.tbl) {
    max-width: 100%;
}