_mobile.scss 8.11 KB
@media(max-width:768px) {
    #page-content {
        .inner-content-wrapper {
            flex-direction: column;
        }
        .col-sm-smallMenu {
            flex-direction: column;
            display: none;
            top:8.25rem;
            a {
                width: 100%;
                text-decoration: none !important;
            }
            .logout-btn {
                width: auto;
            }
            .selected-arrow {
                display: none;
            }
            &.show {
                background:#f2f2f2;
                display: block; 
            }
            a.tab_menu img {
                float: none;
            }
            .menu-graphic-wrap {
                padding: 0 1rem;
                img {
                    width: auto;
                    height: auto;
                }
            }
            a.tab_menu {
                display: flex;
                align-items: center;
                height: 3.125rem;
            }
            a.tab_menu .tab_label {
                float: none;  
                text-decoration: none;
                font-size: 1rem;
                margin:0 !important;
                br {
                    display: none;
                }
            }
            #sault {
                padding: 1.5rem 0;
                align-items: end;
                padding-right:1.5rem;
            }
        }
    }
    .broker-event {
        flex-direction: column;
        text-align: center;
    }
    #brokercontent {
        padding-top:0 !important;
        margin-top:87px !important;

    }
    .header-title {
        display: none;
    }
    #sault {
        flex-direction: column;
    }
    #page-header-landing #page-logo:after {
        display: none;
    }
    #page-header-landing #page-logo {
        padding-right: 0 !important;
    }
    #content-wrap {
        height: 6.25rem !important;
        -webkit-box-shadow: 0px 2px 4px -2px #000000; 
        box-shadow: 0px 2px 4px -2px #000000;
        padding-bottom: 0;
        .mobile-btn {
            width: 37px;
            height: 35px;
            background:url('data:image/svg+xml,<svg id="Hamburger" xmlns="http://www.w3.org/2000/svg" width="37" height="35" viewBox="0 0 37 35"><rect id="Rectangle_416" data-name="Rectangle 416" width="37" height="35" fill="%23fff"/><rect id="Rectangle_3" data-name="Rectangle 3" width="28" height="4" rx="1" transform="translate(4 5)" fill="%23009ade"/><rect id="Rectangle_4" data-name="Rectangle 4" width="28" height="4" rx="1" transform="translate(4 15)" fill="%23009ade"/><rect id="Rectangle_5" data-name="Rectangle 5" width="28" height="4" rx="1" transform="translate(4 25)" fill="%23009ade"/></svg>');
            background-repeat: no-repeat;
            background-size: contain;
            border: 0;
            position: absolute;
            bottom: 1rem;
            right:1rem;
        }
        #page-header-landing {
            justify-content: center;
            align-items: center;
            padding-bottom: 0;
            height: 100%;
        }
        &.retract {
            top:0 !important;
            & + #brokercontent {
                .col-sm-smallMenu {
                    top:6.25rem !important;
                }
            }
        }
    }
    
    #otherpage-logo {
        min-height: auto;
    }
    
    #content-wrap #otherpage-logo {
        width: 146px !important;
    }

    .sidebar-pullout {
        position: fixed;
        top: 8.25rem;
        right: 0;
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        background:#F2F2F2;
        z-index: 99;
        .pullout-btn {
            border: 0;
            width: 40px;
            height: 40px;
            background:url('data:image/svg+xml,<svg id="Button_-_Open_Team" data-name="Button - Open Team" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><rect id="Rectangle_414" data-name="Rectangle 414" width="40" height="40" fill="%23009ade"/><g id="Group_1503" data-name="Group 1503" transform="translate(-180.822 -281.293)"><path id="Path_733" data-name="Path 733" d="M5.835,4.308c.248-.255.488-.507.734-.753Q8.241,1.886,9.916.22A.643.643,0,0,1,10.857.2c.218.2.427.419.628.639a.624.624,0,0,1-.034.868L9.416,3.742q-1.549,1.549-3.1,3.1a.685.685,0,0,1-.577.224.662.662,0,0,1-.4-.21Q3.584,5.1,1.831,3.349C1.295,2.812.762,2.272.221,1.739A.648.648,0,0,1,.18.8C.386.588.593.371.816.173a.628.628,0,0,1,.91.047Q2.566,1.057,3.4,1.9q1.185,1.18,2.373,2.357Z" transform="translate(207.891 295.293) rotate(90)"/><path id="Path_1463" data-name="Path 1463" d="M5.835,4.308c.248-.255.488-.507.734-.753Q8.241,1.886,9.916.22A.643.643,0,0,1,10.857.2c.218.2.427.419.628.639a.624.624,0,0,1-.034.868L9.416,3.742q-1.549,1.549-3.1,3.1a.685.685,0,0,1-.577.224.662.662,0,0,1-.4-.21Q3.584,5.1,1.831,3.349C1.295,2.812.762,2.272.221,1.739A.648.648,0,0,1,.18.8C.386.588.593.371.816.173a.628.628,0,0,1,.91.047Q2.566,1.057,3.4,1.9q1.185,1.18,2.373,2.357Z" transform="translate(201.891 295.293) rotate(90)"/></g></svg>');
            background-repeat: no-repeat;
            background-size: contain;
            position: absolute;
            right: 0;
            &.show {
                transform: rotate(180deg);
            }
        }
        .sidebar-title {
            position: absolute;
            right: 3.5rem;
            font-size: 1rem;
        }
    }

    .wp-block-buttons {
        justify-content: center;
    }

    body.retract {
        .sidebar-pullout {
            top:6.25rem;
        }
    }

    .mobile-btn {
        display: block;
    }

    .inner-content-wrapper {
        margin-top:24px;
    }

    .header-image {
        height: 8.75rem;
    }

    .inner-content-wrapper {
        margin-top:0;
    }

    #page-content {
        padding: 0 0;
        outline: 0;
    }

    .inner-content-wrapper {
        gap:0 !important;
    }

    #resources_wrapper td {
        padding-top:0.5625rem;
    }

    .article-wrapper {
        margin-top:4rem;
        padding: 0 1.5625rem;
        &.has-sidebar {
            h1:first-of-type {
                margin-top:0;
            }
        }

    }

    .sidebar {
        &.show +  {
            .article-wrapper {
                margin-top:1.5rem;
            }
        }   
    }

    #footer-sidebar2 {
        margin-left:25px;
        margin-right:25px !important;
        display: flex;
        flex-direction: column;
    }

    .article-wrapper.has-sidebar {
        & > .btn_style {
            list-style: none;
            display: flex;
            justify-content: center;
            margin-bottom:24px;
        }
    }

    .breadcrumbs {
        justify-content: center;
        padding-bottom:1.5rem;
    }

    #new-footer #footer-sidebar #footer-sidebar2 .widget_custom_html .custom-html-widget .menu {
        display: block;
        margin-left: 0;
        padding-top:1.5625rem;
        li {
            margin-left:0;
        }
    }

    .stk-block-carousel__buttons {
        display: none;
    }

    .wp-block-file {
        a {
            word-wrap: break-word;
        }
    }

    .col-sm-smallMenu a.tab_menu:focus, .col-sm-smallMenu a.tab_menu:hover {
        transform:none !important;
    }

    .broker-event {
        border-top:1px solid #949598;
        padding-top: 1.3125rem;
        margin-top:0;
        &:last-child {
            border-bottom:1px solid #949598;
        }
    }

    .broker-event .be-info {
        padding-right:1rem;
        margin-top:0.875rem;
    }

    .sidebar {
        display: none;
        background:#F2F2F2;
        width: 100% !important;
        padding-top:2.5rem;
        position: fixed;
        z-index: 9;
        &.show {
            display: block;
        }
        .accordian {
            background:none;
            border-top:1px solid white;
            &:last-child {
                border-bottom:1px solid white;
            }
        }
        .accordian_head {
            padding-bottom:0.25rem;
        }
        .accordian_body address:last-child {
            padding-bottom:0.5rem !important;
        }
        & > * {
            padding:0 25px;
            &:last-child {
                padding-bottom:4rem;
            }
        }
    }
}