@media all {
    ul {
        box-sizing: border-box;
    }

    .screen-reader-text {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        word-wrap: normal !important;
    }

    .screen-reader-text:focus {
        background-color: #ddd;
        clip: auto !important;
        clip-path: none;
        color: #444;
        display: block;
        font-size: 1em;
        height: auto;
        left: 5px;
        line-height: normal;
        padding: 15px 23px 14px;
        text-decoration: none;
        top: 5px;
        width: auto;
        z-index: 100000;
    }
}

@media all {
    img {
        vertical-align: middle;
        border: 0;
        max-width: 100%;
        height: auto;
    }

    .the-main-container {
        width: 1170px;
        margin-right: auto;
        margin-left: auto;
    }

    .the-main-container:before, .the-main-container:after {
        content: " ";
        display: table;
    }

    .the-main-container:after {
        clear: both;
    }


}

@media all {
    .screen-reader-text {
        clip: rect(1px, 1px, 1px, 1px);
        height: 0;
        overflow: hidden;
        position: absolute !important;
        width: 0;
    }

    .hidden-header {
        position: relative;
        z-index: 5;
    }

    .header {
        line-height: 85px;
        height: 85px;
        overflow: visible;
        position: absolute;
        top: 0;
        left: 0;
    }

    .logo {
        padding-right: 30px;
        width: 201px;
    }

    .logo img {
        max-width: 170px;
    }

    nav.nav {
        width: 430px;
        padding-left: 20px;
        height: 85px;
    }

    nav.nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    nav.nav ul li {
        float: left;
        margin-right: 10px;
        position: relative;
    }

    nav.nav ul li:last-child {
        margin-right: 0;
    }

    nav.nav ul li a {
        font-weight: 700;
        font-size: 14px;
        line-height: 18px;
        padding: 6px 8px 7px;
        margin-top: 27px;
        display: inline-block;
    }

    nav.nav ul li i {
        margin-right: 8px;
    }

    .hidden-header, .logo {
        height: 85px;
    }

    .header-2, .header-2 .header, .header-2 .logo, .header-2 nav.nav {
        height: 65px;
    }

    .header-2 .header {
        line-height: 65px;
    }

    .header-2 nav.nav ul li a {
        margin-top: 17px;
    }


    .header-light .logo {
        border-right-color: #e3e4e5;
    }

    .header-simple .logo {
        border-right: none;
    }

    .header-simple nav.nav {
        padding-left: 0;
        padding-right: 20px;
        /*float: right;*/
        width: auto;
    }
}

@media all {

    .header, .mobile-bar, .mobile-bar-search form, .header-no-search nav.nav {
        width: 100%;
    }


    input[type="search"], nav.nav ul li a {
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
    }

    input[type="search"], .mobile-bar-content {
        border: 1px solid #e1e3e3;
    }

    .header-light .header {
        border-bottom: 1px solid #e1e3e3;
    }


    input[type="search"], .header-light .header {
        background-color: #FFF;
    }

    .header {
        background-color: #272930;
    }

    .header-light nav.nav ul li a {
        color: #272930;
    }

    nav.nav ul li a, nav.nav ul li a:hover, nav.nav ul li:hover > a {
        color: #FFF;
    }

    nav.nav ul li a {
        -moz-transition: border .20s linear, color .20s linear, background-color .20s linear;
        -webkit-transition: border .20s linear, color .20s linear, background-color .20s linear;
        -o-transition: border .20s linear, color .20s linear, background-color .20s linear;
        transition: border .20s linear, color .20s linear, background-color .20s linear;
    }
}

@media all {
    @media (min-width: 1200px) {
        .the-main-container, .discy-boxed .mobile-bar-content > .the-main-container {
            width: 1570px;
        }
    }

    @media (max-width: 1110px) and (min-width: 992px) {
        .logo {
            padding-right: 10px;
        }

        nav.nav {
            padding-left: 10px;
            width: 45%;
        }
    }
    @media (max-width: 1095px) and (min-width: 992px) {
        .header-simple nav.nav {
            width: 55%;
        }
    }
    @media (max-width: 1025px) and (min-width: 992px) {
        .logo {
            width: 191px;
        }
    }
    @media (max-width: 1002px) and (min-width: 992px) {
        .logo {
            width: 182px;
        }
    }
    @media (max-width: 991px) {
        .header {
            text-align: center;
        }

        .logo {
            width: auto;
            float: none;
            display: inline-block;
        }

        .logo {
            padding-right: 20px;
            border-right: none;
        }

        nav.nav {
            display: none;
        }

    }


    @media only screen and (max-width: 767px) and (min-width: 452px) {
        .the-main-container {
            width: 100%;
            margin-right: auto;
            margin-left: auto;
            padding-left: 15px;
            padding-right: 15px;
        }
    }
    @media only screen and (max-width: 600px) {
        h2 {
            line-height: 30px;
        }

        h3 {
            line-height: 26px;
        }

        .logo {
            padding-right: 10px;
        }

        h2, h3, input[type="search"] {
            margin-bottom: 15px;
        }
    }
    @media only screen and (max-width: 479px) {
        h2 {
            font-size: 23px;
            line-height: 30px;
        }

        h3 {
            font-size: 20px;
            line-height: 26px;
        }

        .the-main-container {
            width: 100%;
            margin-right: auto;
            margin-left: auto;
            padding-left: 10px;
            padding-right: 10px;
        }

        .logo {
            float: left;
        }
    }
    @media only screen and (max-width: 410px) {
        .logo img {
            max-width: 150px;
        }

        .wrap-not-login .logo {
            border-right: none;
        }
    }
    @media only screen and (max-width: 343px) {
        .logo img {
            max-width: 130px;
        }
    }
    @media only screen and (max-width: 310px) {
        .logo {
            border-right: none;
            padding-right: 10px;
        }
    }
}


@media all {
    .hidden-header {
        height: 88px !important;
    }

    .header {
        margin: 16px;
        width: calc(100% - 32px) !important;
        border-radius: 16px;
        box-shadow: none !important;
        line-height: 88px !important;
        height: 88px !important;
        position: relative !important;
    }

    nav.nav ul li a {
        color: #6a829c !important;
        font-weight: 500 !important;
    }

    .menu {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 6px 24px;
        gap: 45px;
    }

    .fb-icon {
        font-size: 0;
        line-height: 0px;
        overflow: hidden;
    }

    .fb-icon.fb-icon-forum::before {
        background: url("../images/forum.svg");
        background-size: contain;
    }

    .fb-icon.fb-icon-blog::before {
        background: url("../images/blog.svg");
        background-size: contain;
    }

    .fb-icon.fb-icon-cruising::before {
        background: url("../images/cruising.svg");
        background-size: contain;
        height: 24px;
        width: 24px;
    }

    .fb-icon.fb-icon-cruising-active::before {
        background: url("../images/cruising-active.svg");
        background-size: contain;
    }

    .fb-icon.fb-icon-matches::before {
        background: url("../images/matches.svg");
        background-size: contain;
        height: 24px;
        width: 24px;
    }

    .fb-icon.fb-icon-messages::before {
        background: url("../images/messages.svg");
        background-size: contain;
        height: 24px;
        width: 24px;
    }

    .fb-icon.fb-icon-discover::before {
        background: url("../images/discover.svg");
        background-size: contain;
        height: 24px;
        width: 24px;
    }

    .fb-icon.fb-icon-notification::before {
        background: url("../images/notification.svg");
        background-size: contain;
        height: 24px;
        width: 24px;
        vertical-align: middle;
    }

    .fb-icon.fb-icon-no-notification::before {
        background: url("../images/notification2.svg");
        background-size: contain;
        height: 24px;
        width: 24px;
        vertical-align: middle;
    }

    .nav .fb-icon.fb-icon-discover::before,
    .nav .fb-icon.fb-icon-messages::before,
    .nav .fb-icon.fb-icon-matches::before,
    .nav .fb-icon.fb-icon-forum::before,
    .nav .fb-icon.fb-icon-blog::before,
    .nav .fb-icon.fb-icon-cruising::before,
    .nav .fb-icon.fb-icon-cruising-active::before,
    .nav .fb-icon.fb-icon-notification::before {
    height: 18px;
    width: 18px;
    }

    .header-avatar {
        line-height: 1;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .header-avatar img {
        vertical-align: initial;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
    }

    .header {
        display: flex;
        align-items: stretch;
    }

    .header .the-main-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header .the-main-container::before, .header .the-main-container::after {
        display: initial;
        content: initial;
    }

    .header nav.nav ul li {
        line-height: 1 !important;
    }

    .logo.logo-img {
        display: flex;
        width: auto;
    }

    .header-left-part {
        display: flex;
        align-items: center;
    }

    #menu-header-login .menu-item a {
        display: flex;
        align-items: center;
    }

    .menu-item:hover .fb-icon.fb-icon-discover::before {
        background: url("../images/discover-active.svg");
        background-size: contain;

    }

    .menu-item:hover .fb-icon.fb-icon-matches::before {
        background: url("../images/matches-active.svg");
        background-size: contain;

    }

    .menu-item:hover .fb-icon.fb-icon-cruising::before {
        background: url("../images/cruising-active.svg");
        background-size: contain;

    }

    .menu-item:hover .fb-icon.fb-icon-messages::before {
        background: url("../images/messages-active.svg");
        background-size: contain;

    }

    .menu-item:hover .fb-icon.fb-icon-forum::before {
        background: url("../images/forum-active.svg");
        background-size: contain;

    }

    .menu-item:hover .fb-icon.fb-icon-blog::before {
        background: url("../images/blog-active.svg");
        background-size: contain;
    }

    .vertical-line-separator {
        display: inline-block;
        width: 2px;
        height: 24px;
        background: #f3f2ec;
        border-radius: 16px;
        margin: 0 24px;
    }

    .flex {
        display: flex;
    }

    .header-avatar span {
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
        color: #0e253e;
    }

    .only-mobile {
        display: none;
    }

    @media screen and (max-width: 991px) {
        .header .vertical-line-separator {
            display: none;
        }

        .header .notifications {
            display: none;
        }

        .only-mobile {
            display: initial;
        }

        .only-mobile .notifications {
            display: initial;
        }

        .header-avatar span {
            display: none;
        }

        .header {
            margin: 0;
            border-radius: 0;
            width: 100% !important;
        }

        .header .the-main-container {
            padding: 0 24px !important;
        }

        input[name="search"] {
            min-width: 0;
            max-width: 200px;
        }
    }
}

.header-logout{
    display: flex;
    align-items: center;
}
.header-left-part.header-logout-nav{
    justify-content:center;
}

/*
Footer Css
 */
.mobile-nav.user-logged-out{
    display: none
}
.footer-wrapper {
    background: #fff;
}

.footer-container {
    border-top: 1.5px solid #F3F2EC;
    border-bottom: 1.5px solid #F3F2EC;
    width: 327px;
    margin: 0 auto;

}

ul {
    list-style: none;
}

.footer-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
    margin-block: 16px;
}

ul.footer-mobile {
    gap: 30px;
    /*margin: 24px 35px 32px;*/
    border-top: 1.5px solid #F3F2EC;
    justify-content: center;
    align-items: center;

    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    position: fixed;
    background: #fff;
    z-index: 999;

}
.fb-icon.fb-icon-close::before {
    background: url("../images/close.svg");
    background-size: contain;
    height: 24px;
    width: 24px;
    vertical-align: middle;
}


.mobile-nav {
    margin-top: 64px;

}

.footer-menu-item.desktop {
    display: none;
}

.footer-menu .footer-menu-item a {
    color: #0E253E;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
}

.footer-social-bar {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
}

.fb-icon.fb-icon-instagram::before {
    background: url("../images/instagram.svg");
    background-size: contain;
    height: 24px;
    width: 24px;
}
.fb-icon.fb-icon-sign-in::before {
    background: url("../images/sign-in.svg");
    background-size: contain;
    height: 31px;
    width: 31px;
}


.fb-icon.fb-icon-facebook::before {
    background: url("../images/facebook.svg");
    background-size: contain;
    height: 24px;
    width: 24px;
}

.fb-icon.fb-icon-twitter::before {
    background: url("../images/twitter.svg");
    background-size: contain;
    height: 24px;
    width: 24px;
}

.secondary-footer-nav {
    display: none;
}

.copyright-content {
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    color: #6A829C;
    text-align: center;
    margin-top: 16px;
}


@media (min-width: 767px) {


    .footer-container {
        display: flex;
        width: unset;
        /*align-items: flex-end;*/
        justify-content: space-between;
    }

    .secondary-footer-container {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    .footer-menu {
        display: flex;
        gap: 16px;
        margin-block: 32px;

    }

    .footer-social-bar {
        margin: 32px 0;
    }
}

@media (min-width: 1024px) {
    .footer-menu-item.desktop {
        display: block;
    }

    .mobile-nav {
        display: none;

    }

}

@media (max-width: 1024px) {
    .menu{
        gap: unset;
    }

}

.fb-icon.fb-icon-menu::before {
    background: url("../images/menu.svg");
    background-size: contain;
    height: 24px;
    width: 24px;
    vertical-align: middle;
}

.fb-header-logged-out {
    display: flex;
    align-items: center;
    gap: 40px;
}

.fb-header-logged-out a {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #6a829c;
}

.fb-header-logged-out .vertical-line-separator {
    margin: 0;
}

.header-left-part .header-avatar {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #0e253e;
}

.fb-mobile-menu-overlay {
    display: none !important;
}

@media screen and (max-width: 991px) {
    .fb-header-logged-out {
        display: none;
    }

    .fb-mobile-left-header-logged-out {
        display: flex;
        align-items: center;
    }

    .fb-mobile-left-header-logged-out .vertical-line-separator {
        display: initial;
        margin: 0 16px;
    }

    .fb-icon.fb-icon-signin::before {
        background: url("../images/signin-mobile.svg");
        background-size: contain;
        height: 20px;
        width: 20px;
        vertical-align: middle;
    }

    .fb-mobile-menu-overlay {
        display: none !important;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(180deg, #f3f2ec 0%, #ffffff 100%);
        display: flex;
        flex-direction: column;
        padding: 24px;
    }

    .fb-mobile-menu-overlay:target {
        display: flex !important;
        justify-content: space-between;
    }

    .fb-mobile-menu-overlay > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .fb-menu-mobile-links {
        flex-direction: column;
    }

    .fb-menu-mobile-links a {
        font-weight: 500;
        font-size: 18px;
        line-height: 32px;
        color: #0e253e;
        border-bottom: 1.5px solid #ffffff;
        padding: 24px 0;
        width: 100%;
    }

    .fb-menu-mobile-links a:last-child {
        border-bottom: 0;
    }

    .mobile-signin-button {
        background: #2970fa;
        border-radius: 28px;
        width: 100%;
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
        color: #ffffff;
        padding: 12px 0;
    }

}