.nav {
    display: -ms-grid;
    display: grid;
    gap: 15px;
    margin: 0 !important;
    -ms-grid-columns: 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr;
    grid-template-columns: repeat(6, 1fr);
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.nav.nav--loader .nav__link {
    -webkit-animation: navBubbleLoader 5s infinite;
    animation: navBubbleLoader 5s infinite;
    background: #eeeeee !important;
}

@keyframes navBubbleLoader {
    0% {
        background-color: #eeeeee !important;
    }
    50% {
        background-color: #d9d9d9 !important;
    }
    100% {
        background-color: #eeeeee !important;
    }
}


@-webkit-keyframes navBubbleLoader {
    0% {
        background-color: #eeeeee !important;
    }
    50% {
        background-color: #d9d9d9 !important;
    }
    100% {
        background-color: #eeeeee !important;
    }
}

.nav.nav--loader .nav__link > * {
    visibility: hidden;
}

.nav + .bth__ttl-h2 {
    margin: 30px 0 20px 0 !important;
}

.nav .nav__link:not(.grey):hover .nav__icon .nav__svg {
    filter: brightness(0) invert(1);
}

.nav .nav__link:not(.grey):hover .nav__icon {
    color: #ffffff;
    background-color: #e05c00;
}

.nav .nav__link:not(.grey):hover {
    background-color: #fef1e7;
}

.nav .nav__link .nav__icon video source, .nav .nav__link .nav__icon video {
    object-fit: cover;
    border-radius: 12px;
    width: 100%;
    height: 100%;
}

.nav .nav__link:hover .nav__icon.orange-lbc {
    background-color: #e05c00 !important;
    color: #ffffff !important;
}

.nav .nav__link:hover .nav__icon.green {
    background: #00a551 !important;
    color: #ffffff !important;
}

.nav .nav__link:hover .nav__icon.red {
    background: #e03a3a !important;
    color: #ffffff !important;
}

.nav .nav__link .nav__icon i.fas {
    font-size: 18px;
}

.nav .nav__squares::before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background-color: #e05c00;
    -webkit-mask: url(https://tophotels.ru/csstx/i/squares.svg) no-repeat center/15px;
    mask: url(https://tophotels.ru/csstx/i/squares.svg) no-repeat center/15px;
}

.nav .nav__squares {
    position: absolute;
    right: 5px;
    top: 5px;
    display: block;
    width: 30px;
    height: 30px;
}

.nav .nav__right-icon:hover {
    color: #2973a1;
}

.nav .nav__right-icon.left {
    right: auto;
    font-size: 10px;
    left: 10px;
}

.nav .nav__right-icon {
    color: #999999;
    position: absolute;
    right: 10px;
    z-index: 2;
    top: 10px;
    font-size: 14px;
}

.nav .nav__link .fa-beard.green::before {
    background-color: #00a551;
}

.nav .nav__link .fa-beard.red::before {
    background-color: #e03a3a;
}

.nav .nav__link .fa-beard.orange-lbc::before {
    background-color: #ff8e41;
}

.nav .nav__link .nav__icon.mask::before,
.nav .nav__link .nav__icon.nav__icon--radar::before,
.nav .nav__link .nav__icon.fa-log::before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background-color: #e05c00;
}

.nav .nav__link .nav__icon.nav__icon--radar::before {
    -webkit-mask: url(https://tophotels.ru/csstx/i/radar.svg) no-repeat center/35px;
    mask: url(https://tophotels.ru/csstx/i/radar.svg) no-repeat center/35px;
}

.nav .nav__link .nav__icon.nav__icon--stream::before {
    -webkit-mask: url(https://tophotels.ru/csstx/i/search-price.svg) no-repeat center/35px;
    mask: url(https://tophotels.ru/csstx/i/search-price.svg) no-repeat center/35px;
}

.nav .nav__link .nav__icon.fa-log::before {
    -webkit-mask: url(https://tophotels.ru/csstx/i/log.svg) no-repeat center/30px;
    mask: url(https://tophotels.ru/csstx/i/log.svg) no-repeat center/30px;
}

.nav .nav__link .nav__icon.fa-region::before {
    -webkit-mask: url(https://tophotels.ru/csstx/i/region.svg) no-repeat center/30px;
    mask: url(https://tophotels.ru/csstx/i/region.svg) no-repeat center/30px;
}

.nav .nav__link .nav__icon.fa-flag-info::before {
    -webkit-mask: url(https://tophotels.ru/csstx/i/flag-info.svg) no-repeat center/35px;
    mask: url(https://tophotels.ru/csstx/i/flag-info.svg) no-repeat center/35px;
}

.nav .nav__link .fa-beard::before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background-color: #999999;
    -webkit-mask: url(https://tophotels.ru/csstx/i/beard.svg) no-repeat center/14px;
    mask: url(https://tophotels.ru/csstx/i/beard.svg) no-repeat center/14px;
}

.nav .nav__link:hover .nav__icon.mask::before,
.nav .nav__link:hover .nav__icon.nav__icon--radar::before,
.nav .nav__link:hover .nav__icon.fa-log::before {
    background: #ffffff !important;
}

.nav .nav__link .fa-beard {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    z-index: 10;
}

.nav .nav__abs-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 1;
}

.nav .nav__push.nav__push--orange, .nav .nav__soon.nav__soon--orange {
    background-color: #ff8e41;
}

.nav .nav__push.nav__push--green, .nav .nav__soon.nav__soon--green {
    background-color: #00a551;
}

.nav .nav__push.nav__push--blue, .nav .nav__soon.nav__soon--blue {
    background-color: #318cc6;
}

.nav .nav__push.nav__push--grey, .nav .nav__soon.nav__soon--grey {
    background-color: #999999;
}

.nav .nav__soon {
    position: absolute;
    right: 5px;
    min-width: 25px;
    top: 5px;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    padding: 0 5px;
    color: #ffffff;
    border-radius: 3px;
    z-index: 3;
    background: #e03a3a;
}

.nav .nav__push {
    display: block;
    color: #ffffff !important;
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 19px;
    font-size: 12px;
    font-weight: normal;
    background: #e03a3a;
    border-radius: 100%;
    position: absolute;
    right: calc(50% - 35px);
    top: 10px;
    z-index: 1;
}

.nav .nav__link:hover .nav__icon svg {
    fill: #ffffff !important;
}

.nav .nav__link .nav__icon svg {
    width: 35px;
    height: 35px;
    fill: #e05c00;
}

.nav .nav__link {
    background-color: #f8e4d5;
    position: relative;
    color: #475669;
    border: none;
    font-weight: normal;
    padding: 15px 5px;
    text-align: center;
    font-size: 14px;
    border-radius: 5px;
    font-family: 'apercu_pro', sans-serif;
    text-transform: uppercase;
}

.nav .nav__icon img {
    border-radius: inherit;
}

.nav .nav__icon.nav__icon--4 .fas {
    font-size: 12px !important;
}


.nav .nav__icon.nav__icon--4 {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 6px;
    -ms-grid-columns: 1fr 0 1fr;
}

.nav .nav__icon {
    font-size: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    line-height: 50px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    width: 50px;
    height: 50px;
    margin: 0 auto 15px auto;
    color: #e05c00;
    background: #ffffff center/25px no-repeat;
    border-radius: 12px;
}

.nav .nav__link:hover .nav__icon.fa-log::before {
    background: #ffffff !important;
}

.nav.nav--blue .nav__link:not(.grey):hover .nav__icon {
    color: #ffffff;
    background-color: #215f86;
}

.nav.nav--blue .nav__link:not(.grey) {
    background-color: #d4e4f2;
}

.nav.nav--blue .nav__link:not(.grey):hover {
    background-color: #bdd6ec;
}

.nav.nav--blue .nav__link svg {
    fill: #215f86;
}

.nav.nav--blue .nav__icon {
    color: #215f86;;
}

.nav.nav--blue .nav__link .nav__icon.mask::before,
.nav.nav--blue .nav__link .nav__icon.nav__icon--radar::before,
.nav.nav--blue .nav__link .nav__icon.fa-log::before,
.nav.nav--blue .nav__squares::before {
    background-color: #215f86;
}

html body .page .nav .nav__link.bg-hov-orange:hover {
    background-color: rgba(255, 142, 65, 0.26) !important;
}

.nav .nav__link.bg-hov-orange:not(:hover) {
    background-color: #eeeeee;
    color: #999999;
}

.nav .nav__link.bg-hov-orange:not(:hover) .nav__icon {
    color: #cccccc;
}

.nav .nav__link.bg-hov-orange:not(:hover) .nav__icon svg {
    fill: #cccccc;
}

.nav .nav__link.grey {
    background-color: #eeeeee;
}

.nav .nav__link.grey:hover {
    background-color: #dcdbdb;
}

.nav .nav__link.grey .nav__icon {
    color: #cccccc !important;
}

.nav .nav__link.grey .nav__icon svg {
    fill: #cccccc !important;
}

.nav .nav__link.grey .nav__icon.mask::before,
.nav .nav__link.grey .nav__icon.nav__icon--radar::before,
.nav .nav__link.grey .nav__icon.fa-ls::before,
.nav .nav__link.grey .nav__icon.fa-log::before {
    background: #cccccc !important;
}

.nav.nav--big .nav__icon {
    width: 60px;
    height: 60px;
    font-size: 30px;;
    line-height: 60px;
}

.nav.nav--big .nav__link {
    font-size: 16px;
}

.nav.nav--big {
    -ms-grid-columns: 1fr 25px 1fr 25px 1fr 25px 1fr 25px 1fr;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
}

.nav.nav--triple {
    grid-template-columns: repeat(3, 1fr);
}

.nav.nav--blue.nav--large .nav__icon img {
    border-radius: inherit;
}

.nav.nav--blue.nav--large .nav__link:not(.grey):not(:hover) .nav__icon {
    color: #215f86 !important;
}

.nav.nav--border .nav__icon:not(.fas) {
    border: 5px solid #ffffff;
    background-color: #ffffff !important;
}

.nav .nav__icon.nav__icon--80 {
    border: 5px solid #ffffff;
    width: 80px;
    background: #ffffff !important;
    height: 80px;
}

.nav.nav--large .nav__icon {
    width: 90px;
    height: 90px;
    font-size: 45px;
    line-height: 80px;
    margin-bottom: 20px;
    border: 5px solid #ffffff;
}

.nav.nav--large .nav__link {
    font-weight: bold;
    padding: 24px 0;
    font-size: 17px;
}

.nav .nav__icon.nav__flag .lsfw-form-flag {
    position: static;
    margin-top: -2px;
}

.nav .nav__icon.nav__flag {
    background: #ffffff !important;
}

.nav.nav--large {
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.nav.nav--4 {
    grid-template-columns: repeat(4, 1fr);
}

.nav.nav--10 {
    grid-template-columns: repeat(10, 1fr);
    gap: 15px;
}

.nav.nav--3 {
    grid-template-columns: repeat(3, 1fr);
}

.nav .nav__icon img.no-radius {
    border-radius: 0 !important;
}

.nav .nav__icon img:not(.bth__img):not(.bth__img--contain) {
    display: block;
    width: 35px;
    height: 35px;
    margin: 7px auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.nav.nav--extra .nav__icon {
    width: 160px;
    height: 160px;
    border: 5px solid #ffffff;
    margin-bottom: 30px;
}

.nav .nav__link.bg-light-grey img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: .4;
}

.nav.nav--extra .nav__link {
    font-size: 20px;
    padding: 24px 0;
    display: block;
}

.nav-infos .nav.nav--big {
    width: calc(100% - 35% - 25px);
}


.nav-infos .nav.nav--extra .nav__link {
    height: 100%;
}

.nav-infos .nav.nav--extra {
    width: 35%;
    display: block;
    align-self: stretch;
}

.nav-infos {
    justify-content: space-between;
    display: flex;
    align-items: flex-start;
}

@media screen and (max-width: 1500px) {
    .nav {
        gap: 10px !important;
    }
}

@media screen and (max-width: 1199px) {
    .nav.nav--large .nav__link, .nav.nav--big .nav__link {
        font-size: 15px;
    }
}

@media screen and (max-width: 1023px) {
    .nav, .nav.nav--big {
        grid-template-columns: repeat(4, 1fr);
    }

    .nav-infos .nav.nav--big {

        width: calc(100% - 35% - 15px);
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .nav {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .nav.nav--big .nav__icon {
        width: 50px;
        height: 50px;
        font-size: 25px;
        line-height: 50px;
    }

    .nav.nav--large .nav__link, .nav.nav--big .nav__link {
        font-size: 14px;
    }

    .nav.nav--large .nav__link {
        padding: 15px 10px;
    }
}

@media screen and (max-width: 535px) {
    .nav .nav__link {
        display: flex;
        gap: 15px;
        padding: 10px;
        align-items: center;
        text-align: left;
    }

    .nav .nav__icon + span {
        width: calc(100% - 40px);
    }

    .nav .nav__icon::before {
        mask-size: 16px !important;
    }

    .nav.nav--big .nav__icon, .nav.nav--large .nav__icon, .nav .nav__icon {
        margin: 0;
        width: 35px;
        height: 35px;
        border-radius: 7px;
        line-height: 35px;
        border: none;
        font-size: 16px;
    }

    .nav {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}