* {
    margin: 0;
    padding: 0;
    // font-family: 'PT Sans', sans-serif;
    font-family: 'Nunito', sans-serif;
    color: #7d7d7d;
    font-size: 14px;

}

h1 {
    font-size: 25px;
    color: #7786a5;
}
h2 {
    font-size: 20px;
}

a {
    outline: none;
}

i.fa {
    margin-right: 5px;
    color: inherit;
}

#zoom {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: none;
    background-color: rgba(0,0,0,0.8);
}

#media-zoomer {
    width: 70%;
    height: 80%;
    margin: auto;
    margin-top: 5%;
    float: left;
    display: flex;
}

#media-zoomer iframe {
    width: 100%;
    height: 100%;
    margin: auto;

}

#zoom #close {
    position: absolute;
    width: 10%;
    line-height: 40px;
    background-color: rgba(119, 136, 164, 1);
    right: 0;
    text-align: center;
    color: white;
    cursor: pointer;
}

#zoom .lr {
    float: left;
    width: 15%;
    height: 100%;
    cursor: pointer;
}

#zoom .lr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

#zoom .lr img {
    position: relative;
    margin: auto;
    top: 50%;
    margin-top: -25px;
    cursor: pointer;
}

#media-zoomer img {
    position: relative;
    height: auto;
    width: auto;
    max-height: 100%;
    max-width: 100%;
    margin: auto;
    -o-object-fit: cover;
    object-fit: cover;
}

#info input {
    border: 1px solid #d7d0bf;
    outline: none;
}

#add-topic {
    float: left;
}

// #advice input {
//     border: 1px solid #d7d0bf;
//     outline: none;
// }



#loadimage {
    margin-bottom: 20px;
    border: 1px solid rgba(119, 136, 164, 0.5);
    padding: 10px;
    width: 100%;
    display: none;
}

#loadimage table {
    width: 100%;
}

#loadimage table td {
    padding: 3px;
}

#loadimage #tiser {
    width: 400px;
}

#loadimage input {
    padding: 3px;
}

#top-right-block, #bottom-right-block {
    // float: left;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    // width: 100%;

    @media screen and (max-width: 460px) {
        display: none;
    }
}

.lang-selector {
    a {
        margin-right: 5px;
        font-weight: bold;
        color: #D7D0BF;
        text-transform: uppercase;

        &:last-child {
            margin: 0;
        }
    }

    a.active {
        color: #7786a5;
        position: relative;

        &:before {
            content: '';
            display: block;
            position: absolute;
            height: 3px;
            width: 3px;
            border-radius: 50%;
            background-color: #7786a5;
            left: 50%;
            transform: translateX(-50%);
            bottom: -5px;
        }
    }
}

#top-right-block {

    hr {
        border: none;
        height: 100%;
        height: 20px;
        width: 1px;
        background-color: #D7D0BF;
        margin: 0 15px;
    }



    .search-block {
        display: flex;

        input {
            outline: none;
            border-radius: 5px 0 0 5px;
            height: 28px;
            border: none;
            padding: 0 15px;
            border-left: 1px solid #d7d0bf;
            border-top: 1px solid #d7d0bf;
            border-bottom: 1px solid #d7d0bf;
        }

        button {
            height: 30px;
            width: 30px;
            background-color: white;
            border: none;
            border-radius: 0 5px 5px 0;
            border-right: 1px solid #d7d0bf;
            border-top: 1px solid #d7d0bf;
            border-bottom: 1px solid #d7d0bf;

            i {
                color: #d7d0bf;
            }
        }
    }
}

.to-room {
    background-color: #D7D0BF;
    height: 30px;
    border-radius: 5px;
    color: #948772;
    font-weight: bold;
    padding: 0 15px;
    border: none;
}

.desctop-menu {
    display: flex;
    margin-top: 15px;

    > li {
        margin-left: 30px;
        position: relative;

        ul {
            background-color: #fdfcf8;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            position: absolute;
            display: none;
            padding: 15px;
            border-radius: 5px;
            left: -15px;
            border: 1px solid #d7d0bf;

            li {
                margin-bottom: 5px;

                &:last-child {
                    margin: 0;
                }
            }
        }

        a, span {
            color: #a8a18a;
            font-weight: bold;
            text-transform: uppercase;
            white-space: nowrap;
            cursor: pointer;
        }
    }

    .submenu {
        &:hover {
            ul {
                display: block;
            }
        }
    }
}

#media {
    margin: 0px 0px 20px 25px;
    padding: 5px;
    border: 1px solid rgba(128, 128, 128, 0.42);
    width: 1158px;
    overflow: hidden;
}

#search-page h4 {
    font-size: 14px;
    color: #a8a18a;
    font-weight: normal;
    margin-top: 50px;
    text-align: center;
}

#media img {
    width: 200px;
}

#admin-project {
    margin-left: 23px;
}

#admin-project td {
    padding: 5px;
}

#admin-project td input {
    padding: 2px;
}

#banners table {
    margin-bottom: 20px;
    margin-top: 20px;
}

#info {
    margin: 0px auto 20px;
    padding: 20px;
    border: 1px dotted rgba(119, 136, 164, 0.5);
    width: 1170px;
}

#info td {
    padding: 5px;
}

#info td input {
    padding: 3px;
}

.new-article {
    height: 70px;
    position: absolute;
    top: 0;
    right: 0;
}

#save-panel {
    clear: both;
    overflow: hidden;
    border: 1px solid rgba(128, 128, 128, 0.42);
    width: 1160px;
    margin: auto;
}

#save-panel label {
    line-height: 35px;
    margin-left: 5px;
}

// .blocks table {
//     font-size: 15px;
//     border: 1px solid rgba(128, 128, 128, 0.42);
//     width: 500px;
//     margin: 0px 0px 10px 124px;
// }
//
// .blocks table td {
//     padding: 5px;
// }
//
// .blocks table input {
//     padding: 3px;
// }

#save-panel button {
    float: right;
    margin: 5px;
    padding: 3px;
}



#new-cat {
    font-size: 15px;
    width: 1148px;
    margin: auto;
    text-align: left;
    padding: 10px;
    border: 1px dotted rgba(119, 136, 164, 1);
    margin-bottom: 20px;
}

#new-cat h3 {
    padding-left: 5px;
    color: rgba(119, 136, 164, 1);
}

#new-cat table td {
    padding: 5px;
}

#new-cat input {
    padding: 3px;
}

.cat {
    width: 920px;
    margin: auto;
}

.cat input {
    padding: 3px;
    margin: 5px;
}

#banners table td {
    border-collapse: collapse;
}

#user {
    padding: 20px;
}

#user #infotable {
    width: 100%;
    border-collapse: collapse;
}

#user .del-user, #user .message {
    cursor: pointer;
    padding: 0;
}

#user .message:hover {
    opacity: 0.8;
}

#user .del-user:hover {
    opacity: 0.8;
}

#user #infotable tr:first-child {
    background-color: rgba(119, 136, 164, 1);
    color: white;
}

#user #infotable td {
    font-size: 14px;
    padding: 5px;
    text-align: center;
    border: 1px solid rgba(168, 161, 138, 0.5);
}

#user #infotable td:first-child {
    width: 200px;
}

#user #infotable td:nth-child(2) {
    width: 300px;
}

#user #infotable td:nth-child(4) {
    width: 150px;
}

#user #infotable .h:hover {
    background-color: rgba(119, 136, 164, 0.1);
}

#user #infotable .h:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.7);
}

#user #infotable .h:nth-child(odd):hover {
    background-color: rgba(119, 136, 164, 0.1);
}

#del-user-ok {
    background-color: #fffcf4;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    width: 300px;
    height: auto;
    padding: 30px;
    text-align: center;
    font-size: 15px;
    display: none;
    opacity: 0;
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -180px;
    margin-top: -100px;
}

#del-user-ok p {
    margin-bottom: 20px;
    color: #a8a18a;
}

#del-user-ok button {
    padding: 10px;
    width: 80px;
    margin: 10px;
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

#del-user-ok button:hover {
    opacity: 0.8;
    transition: 0.3s;
}

#admin-menu {
    background-color: white;
    color: rgba(0, 0, 0, 0.57);
}

#admin-menu li {
    display: inline-block;
}

#admin-menu li a {
    padding: 5px;
    display: block;
    color: #767575;
}

#error {
    height: 100px;
    display: none;
}

#check-email {
    position: absolute;
    display: none;
    opacity: 0;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -200px;
    width: 400px;
    height: 150px;
    background-color: rgba(255, 252, 244, 0.95);
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    text-align: center;
}

#check-email p {
    display: table-cell;
    vertical-align: middle;
    color: #a8a18a;
}



#share-block {
    /*background-color: rgba(255, 255, 255, 0.6);
    position: absolute;
    width: 100px;
    height: 80px;
    top: 815px;
    left: 550px;
    opacity: 1;
    z-index: 6;*/
    background-color: rgba(255, 255, 255, 0.6);
    position: absolute;
    width: 372px;
    top: 204px;
    right: 205px;
    padding: 10px 8px 5px 10px;
    opacity: 1;
    display: none;
}

#share-block a {
}


#logout {
    width: 150px;
    text-align: center;
    background-color: #a8a18a;
    border-radius: 5px;
    padding: 5px 10px 5px 10px;
    position: absolute;
    top: 30px;
    right: 0px;
    display: none;
    z-index: 5;
}

#logout button {
    margin: 0;
    padding: 5px;
    background-color: rgba(168, 161, 138, 0);
    color: #d7d0bf;
    border: none;
    cursor: pointer;
    outline: none;
}



#share:hover #share-block {
    background-color: aquamarine;
}

::-webkit-input-placeholder {
    color:rgba(128, 128, 128, 0.6);
}

html, body {
    height: 100%;
}

img {
    display: block;
    pointer-events: all
}

body {
    background-image: url('/public/img/fon1.png');
    background-color: #fffcf4;
    background-color: white;
}

.modal-back {
    background: rgba(0,0,0,0.8);
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 99;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .modal {
        position: relative;
        max-width: 350px;
        padding: 80px 30px 30px 30px;
        background-color: #fdfcf8;
        display: flex;
        flex-direction: column;
        border-radius: 5px;
        transform: translateY(100%);
        opacity: 0;

        @media screen and (max-width: 700px) {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            min-width: auto;
            max-width: 100%;
            justify-content: center;
        }

        button[close] {
            position: absolute;
            top: 30px;
            right: 30px;
            background: none;
            font-size: 20px;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;

            i {
                color: #D7D0BF;
                margin: 0;
            }
        }

        h1, h2, p, span {
            text-align: center;
            margin-bottom: 15px;
            color: inherit;
        }

        h2 {
            font-weight: normal;
        }

        span {
            display: block;
            margin-top: 30px;
            font-size: 14px;


            a {
                display: inline-block;
                position: relative;
                &:before {
                    display: block;
                    content: '';
                    position: absolute;
                    width: 100%;
                    bottom: -2px;
                    border-top: 1px dashed #d7d0bf;
                }
            }
        }

        h1 {
            // margin-bottom: 30px;
            color: #7786a5;
        }

        button[close-button] {
            position: absolute;
            top: 30px;
            right: 30px;
            border: none;
            background: none;
            font-size: 20px;
        }

        form {
            margin-top: 15px;
            display: flex;
            flex-direction: column;
            hr {
                height: 1px;
                background-color: #d7d0bf;
                margin-bottom: 15px;
                border: none;
            }

            .form-group {
                display: flex;
                flex-direction: column;
                margin-bottom: 15px;

                &:last-child {
                    margin: 0;
                }

                span[data-error] {
                    display: none;
                    margin: 5px 0 0 0;
                    text-align: left;
                    color: indianred;
                    font-size: 12px;
                }

                span[data-error].active {
                    display: block;
                }

                input {
                    outline: none;
                    height: 50px;
                    border-radius: 5px;
                    border: 1px solid #d7d0bf;
                    padding: 0 15px;
                }

                textarea {
                    outline: none;
                    border-radius: 5px;
                    border: 1px solid #d7d0bf;
                    padding: 15px;
                }



                button {
                    height: 50px;
                    border-radius: 5px;
                    background-color: #7786a5;
                    color:  white;
                    border: none;
                    font-size: 16px;
                    font-weight: bold;
                }
            }
        }
    }

    .modal.show {
        @keyframes showModal {
            0% {
                transform: translateY(100%);
                opacity: 0;
            }
            25% {
                transform: translateY(-5%);
            }
            50% {
                transform: translateY(5%);
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        animation: 0.5s 0.3s showModal ease forwards;
    }

    .modal.hide {
        @keyframes hideModal {
            0% {
                transform: translateY(0);
                opacity: 1;
            }
            100% {
                transform: translateY(100%);
                opacity: 0;
            }
        }

        animation: 0.3s hideModal ease;
    }
}

.modal-back.show {
    @keyframes showBack {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    animation: 0.3s showBack ease;
}

.modal-back.hide {
    @keyframes hideBack {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    animation: 0.3s hideBack ease forwards;
}






.slider-background {
    display: flex;
    height: 100vh;
    flex-direction: column;

    > div {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    button[close] {
        position: absolute;
        z-index: 1;
        top: 30px;
        right: 50px;
        border: none;
        background: none;
        i {
            font-size: 30px;
        }
    }

    .full-main {
        flex: 1;
        display: flex;




        .main-wrap {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            img {
                position: absolute;
                // max-height: 70vh;
                max-width: 90%;
                max-height: 90%;
                display: block;
                object-fit: contain;
                border-radius: 5px;
            }
        }
    }

    .buttons {
        display: flex;
        justify-content: center;
        align-items: center;

        > div {
            background-color: rgba(255,255,255,0.1);
            width: 100px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            border-radius: 20px;

            button {
                background: none;
                border: none;
                i {
                    color:  rgba(255,255,255,0.2);
                    font-size: 20px;
                }
            }
        }
    }

    .full-previews {
        .previews {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30px;

            // > div {
            //     display: flex;
            //
            //     .preview {
            //         height: 70px;
            //         width: 100px;
            //         margin: 0 5px;
            //         overflow: hidden;
            //         border-radius: 5px;
            //         opacity: 0.5;
            //         transition: opacity 0.3s, transform 0.3s;
            //
            //         &:hover {
            //             opacity: 1;
            //             transform: scale(1.05);
            //         }
            //
            //         img {
            //             height: 100%;
            //             width: 100%;
            //             object-fit: cover;
            //             display: block;
            //         }
            //     }
            // }
        }
    }
}

header {
    position: sticky;
    top: 0;
    border-bottom: 1px solid #d7d0bf;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background-color: #fdfcf8;
    z-index: 10;

    .logo {
        height: 50px;

        @media screen and (max-width: 460px) {
            height: 35px;
        }
    }

    .mobile-menu {
        display: none;

        @media screen and (max-width: 460px) {
            display: block;
        }

        [menu-open], [menu-close] {
            border: none;
            background: none;
            font-size: 25px;
            display: flex;
            justify-content: center;
            align-items: center;

            i {
                color: #7786a5;
                margin: 0;
            }
        }

        .menu {
            overflow-y: auto;
            padding: 0 30px;
            position: fixed;
            display: none;
            top: 0;
            left: 80px;
            right: 0;
            height: 100vh;
            background-color: #fdfcf8;
            z-index: 1;
            flex-direction: column;
            justify-content: center;
            box-shadow: 0 0 30px rgba(0,0,0,0.2);
            transform: translateX(110%);

            button.to-room-v1 {
                padding: 15px;
                border-radius: 5px;
                background-color: #D7D0BF;
                color: #948772;
                font-weight: bold;
                border: none;
            }

            > div {
                text-align: center;
            }

            hr {
                margin: 15px 0;
                border: none;
                height: 1px;
                background-color: #d7d0bf;
            }

            ul {
                li {
                    text-align: center;
                    margin-bottom: 15px;
                    font-size: 18px;
                    // font-weight: bold;

                    &:last-child {
                        margin: 0;
                    }

                    a {
                        font-size: 18px;
                        // font-weight: bold;
                    }
                }
            }

            button[menu-close] {
                position: absolute;
                top: 15px;
                right: 15px;
            }

            .lang-selector {
                margin-bottom: 30px;
                a {
                    font-size: 20px;
                    margin-right: 15px;
                    font-weight: bold;

                    &:last-child {
                        margin: 0;
                    }
                }
            }
        }

        .menu.show {
            display: flex;
            animation: 0.3s showMobileMenu ease-in-out forwards;

            @keyframes showMobileMenu {
                0% {
                    transform: translateX(110%);
                }
                100% {
                    transform: translateX(0);
                }
            }
        }

        .menu.hide {
            display: flex;
            animation: 0.3s hideMobileMenu ease-in-out;

            @keyframes hideMobileMenu {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(110%);
                }
            }
        }
    }

    #right-header-block {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    @media screen and (max-width: 460px) {
        padding: 15px;
        #right-header-block {
            display: none;
        }
    }
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

#wrapper {
    min-height: 100%;
    margin: auto;
    max-width: 1220px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.03);
    background-color: rgba(255, 252, 244, 0.4);
}


#line1 {
    position: absolute;
    right: 0;
    top: 60px;
}

#slider {
    height: 375px;
    margin-bottom: 50px;
    position: relative;

    .slide-changer {
        display: flex;
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;

        li {
            margin: 0 5px;
            height: 5px;
            width: 15px;
            background-color: #D7D0BF;
            cursor: pointer;
        }

        li.active {
            background-color: #7786A5;
        }
    }

    .slides-container {
        display: flex;
        overflow: hidden;
        position: relative;
        height: 100%;

        @keyframes hide {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }


        .slide {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            height: 100%;
            width: 100%;
            animation: hide 2s forwards;

            img {
                height: 100%;
                width: 100%;
                display: block;
                object-fit: cover;
            }

            a {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            .title-block {
                position: absolute;
                top: 50%;
                left: 0;
                padding: 30px;
                max-width: 50%;
                background: linear-gradient(to right, rgba( 119, 136, 164, 0.85), rgba(255,255,255,0));
                transform: translate(-100%, -50%);
                transition: transform 1s;

                h3,p {
                    color: white;
                }

                p {
                    font-size: 18px;
                    font-weight: bold;
                    max-width: 65%;
                }

                h3 {
                    margin-bottom: 10px;
                    font-size: 20px;
                    font-weight: bold;
                    text-transform: uppercase;
                }

                @media screen and (max-width: 460px) {
                    max-width: 100%;
                }
            }
        }

        .slide.main {
            animation: none;
            opacity: 1;
            z-index: 1;

            .title-block {
                transform: translate(0, -50%);
            }
        }

        @keyframes show {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        .slide.active {
            z-index: 1;

            .title-block {
                transform: translate(0, -50%);
            }
        }

        .slide.anim {
            animation: show 2s forwards;
        }
    }
}

#reg-room-search {
    position: absolute;
    right: 0;
    top: 18px;
}

#select-slide {
    position: absolute;
    overflow: hidden;
    width: 100%;
    bottom: 5px;
    text-align: center;
}

#select-slide .check-slide {
    background: url(/public/img/ssn.png) no-repeat;
    display: inline-block;
    padding: 12px;
}

#reg-room-search > table {
    float: left;
}

#reg-room-search > table img {
    position: relative;
}

#search-field {
    border: 1px solid #d7d0bf;
    border-collapse: collapse;
}

#search-field input, #reg-name, #reg-email,  #reg-password, #reg-password-2, #login-email, #login-password {
    border: none;
    width: 200px;
    height: 34.5px;
    font-size: 15px;
    padding: 0px 10px 0px 10px;
    outline: none;
}

#search-field input:focus {
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3);
}

#reg-room {
    // height: 23px;
    // margin-right: 8px;
    // float: right;
    // padding: 9px;
    // position: relative;
}

#reg-room a {
    font-size: 15px;
    margin-left: 4px;
    margin-right: 8px;
    color: #6e81a0;
}

#reg-room a:hover {
    color: rgba(119, 136, 164, 0.8);
    transition: 0.3s;
}

footer {
    width: 100%;
    background-color: #7786a5;
    font-size: 14px;
    // height: 280px;
    padding: 30px 0;
    display: flex;
    flex-direction: column;

    ul {
        margin-bottom: 15px;

        &:last-child {
            margin: 0;
        }

        li {
            margin-bottom: 15px;

            &:last-child {
                margin: 0;
            }

            a {
                color: white;
            }
        }
    }

    div {
        display: flex;
        justify-content: space-between;
        padding: 0 30px;

        @media screen and (max-width: 460px) {
            flex-direction: column;
        }
    }

    .copyright {
        display: block;
        text-align: center;
        opacity: 0.5;
        color: white;
        padding: 30px 15px 0 15px;
    }
}


#container {
    width: 100%;
    margin: auto;
    padding-bottom: 320px;
}


// #home-page, #advices {
//     max-width: 950px;
//     margin: auto;
// }



.blocks > h2, .my-forum > h2 {
    color: #7786a5;
    font-size: 24px;
    font-weight: normal;
    font-weight: bold;
}

.my-forum p {
    margin: auto 5px;
    font-size: 14px;
}

.blocks > p {
    color: #a8a18a;
    margin: 5px 0 15px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #D7D0BF;
    position: relative;

    &:after {
        content: '';
        display: block;
        height: 2px;
        background-color: #7786A5;
        position: absolute;
        bottom: 0;
        width: 300px;
        left: 50%;
        transform: translate(-50%, 10px);

        @media screen and (max-width: 460px) {
            width: 50%;
        }
    }
}

.blocks > .line {
    margin: 5px auto 0px;
}

.blocks {
    text-align: center;

    .section-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 30px;
        margin: 30px 0 50px 0;

        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        grid-auto-columns: calc((100% / 1));
        grid-auto-flow: column;

        &::-webkit-scrollbar {
            display: none;
        }

        .section {
            scroll-snap-align: center;
            // transition: scroll 1s;
        }

        @media screen and (max-width: 460px) {
            overflow: auto;
            grid-template-columns: none;
            grid-auto-columns: calc((100% / 1));
        }
    }
}

button[type="submit"] {
    i {
        display: none;
    }
}

button[type="submit"].active {
    pointer-events: none;
    i {
        display: inline-block;
    }
}

.section {
    .title {
        h2, span {
            font-size: 18px;
            white-space: normal;
        }
    }
}

// #advice #b-1, #advice #b-2 {
//     height: 79px;
//     width: 102px;
//     background-color: #d7d0bf;
//     margin: 0;
//     float: left;
// }
//
// #advice #b-2 {
//     background-color: #bdb5b3;
//     margin-left: 1px;
// }
//
// #advice-title {
//     overflow: hidden;
//     margin-bottom: 20px;
// }
//
// #advice-title h1 {
//     float: left;
//     /* width: 395px; */
//     /* padding-left: 30px; */
//     margin-top: 15px;
//     white-space: normal;
//     color: rgba(119, 136, 164, 1);
//     font-size: 25px;
//     font-weight: bold;
// }

/*СЛАЙДЕР. СТРАНИЦА С СОВЕТАМИ И КОМНАТА*/

.left-arrow, .right-arrow {
    position: absolute;
    opacity: 0.5;
    cursor: pointer;
    display: none;
}

.left-arrow:hover, .right-arrow:hover {
    opacity: 1;
}

.left-arrow {
    left: 70px;
    top: 190px;
}

.right-arrow {
    right: 70px;
    top: 190px;
}

.wrap-slider-v2 {
    position: relative;
    white-space: normal;
    width: 960px;
    margin: auto;
    text-align: left;
    overflow: hidden;
    padding: 0px 0px 0px 0px;
}


.wrap-slider-v1 {
    position: relative;
    white-space: nowrap;
    width: 920px;
    margin: auto;
    overflow: hidden;
    padding: 20px 10px 10px 10px;
}



.wrap-slider-v1 a {
    position: relative;
}

#wrap-slider-v2 {
    position: relative;
}

.left-arrow {}

// #project, #advice {
//     /* overflow: hidden;
//     width: 100%;
//     margin-top: 30px; */
//     padding: 30px 0;
//     display: flex;
//     flex-direction: column;
// }

// #project #bottom, #advice #bottom {
//     /* float: left; */
//     /* width: 1220px; */
//     /* margin-top: 50px; */
//     margin-top: 30px;
//     text-align: center;
// }

// #crumbs a {
//     display: block;
//     color: #3e3e3e;
//     padding: 10px 20px 10px 20px;
//     transition: 0.5s;
// }

// #crumbs a:hover {
//     padding: 10px 25px 10px 25px;
//
// }

// #crumbs {
//     margin-bottom: 37px;
//     width: 1220px;
// }

// #crumbs #cr-1 {
//     display: block;
//     color: white;
// }
//
// #crumbs table {
//     border-collapse: collapse;
// }
//
// #crumbs img {
//     height: 45px;
// }



// #photo-block, #info-block {
//     display: flex;
//     flex-direction: column;
//     /* float: left; */
//     position: relative;
//     /* flex: 1; */
// }

.info-wrap {
    display: flex;
}

.rating {
    text-align: center;
    position: relative;
}

.rating .rating-back {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    top: 0;
    left: 0;
    z-index: 2;
    display: none;
}

.rating .rating-back .rating-block {
    padding: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: white;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.rating .rating-back .rating-block form {
    display: flex;
    flex-direction: column;
}

.rating .rating-back .rating-block span i {
    font-size: 30px;
    margin: 5px;
    cursor: pointer;
}

.rating .rating-back .rating-block .rating-access {
    display: none;
}

.rating .rating-back .rating-block form > i {
    font-size: 20px;
    position: absolute;
    top: 15px;
    right: 15px;
}

.rating .rating-back .rating-block span {
    margin-bottom: 20px;
}

.rating .rating-back .rating-block button {
    background: none;
    border: none;
    font-size: 20px;
}

.rating .rating-back .rating-block p {
    margin-bottom: 15px;
}

.wrap {
    display: flex;
}

.page.article {
    max-width: none;
    margin: 0;

    .wrap {
        display: flex;
        margin-bottom: 30px;

        > div {
            flex: 3;
        }

        .descr {
            margin-left: 15px;

            @media screen and (max-width: 460px) {
                margin: 0;
            }
        }
    }

    .bottom {
        margin-top: 15px;
        width: 100%;
        float: right;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.full-slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    background-color: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: 0.3s showFullBack ease;

    @keyframes showFullBack {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    button {
        position: absolute;
        top: 30px;
        right: 30px;
        font-size: 30px;
        background: none;
        border: none;

        i {
            margin: 0;
        }
    }

    .prev, .next {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 10vw;
        cursor: pointer;

        i {
            font-size: 30px;
            margin: 0;
        }

        @media screen and (max-width: 460px) {
            display: none;
        }
    }

    .wrapper {
        scroll-behavior: smooth;
        overflow: auto;
        scroll-snap-type: x mandatory;
        display: grid;
        grid-auto-flow: column;
        position: relative;
        width: 80vw;

        @media screen and (max-width: 460px) {
            width: 100vw;
        }

        &::-webkit-scrollbar {
            display: none;
        }

        .preview {
            scroll-snap-align: center;
            margin: 0 10vw;
            width: 80vw;

            @media screen and (max-width: 460px) {
                width: 100vw;
            }

            img {
                border-radius: 5px;
                width: 80vw;
                height: 80vh;
                object-fit: contain;
                display: block;
            }

            @media screen and (max-width: 460px) {
                margin: 0;

                img {
                    width: 100vw;
                    height: 70vh;
                }
            }
        }
    }
}

.full-slider.hide {
    animation: 0.3s hideFullBack ease;

    @keyframes hideFullBack {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
}

[slider="product"] {
    display: flex;
    flex-direction: column;
    flex: 3;
    margin-right: 15px;

    @media screen and (max-width: 460px) {
        margin: 0 0 15px 0;
    }

    .main {
        position: relative;
        height: 300px;

        @media screen and (max-width: 460px) {
            height: 185px;
            overflow: hidden;
        }

        .slides {
            height: 300px;
            @media screen and (max-width: 460px) {
                height: 185px;
                display: grid;
                overflow: auto;
                scroll-behavior: smooth;
                scroll-snap-type: x mandatory;
                grid-auto-columns: calc((100% / 1));
                grid-auto-flow: column;
                grid-gap: 15px;

                &::-webkit-scrollbar {
                    display: none;
                }

                .preview {
                    scroll-snap-align: center;
                    transition: scroll 1s;
                    position: relative;
                    opacity: 1;
                    z-index: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .preview.noactive {
                    opacity: 1;
                }
            }
        }

        .preview.noactive {
            opacity: 0;
            transition: opacity 1s;
        }

        .preview.active {
            opacity: 1;
            transition: opacity 1s;
            z-index: 1;
        }

        .main-wrap, .preview {
            border-radius: 5px;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            img {
                // position: absolute;
                // top: 0;
                // left: 0;
                height: auto;
                width: 100%;
            }
        }

        .buttons {
            position: absolute;
            top: 15px;
            right: 15px;
            display: flex;
            opacity: 0.7;
            z-index: 1;
            transition: opacity 0.3s;

            &:hover {
                opacity: 1;
            }

            button {
                border: none;
                background: none;
                background-color: rgba(0,0,0,0.7);
                height: 30px;
                width: 30px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 5px;

                i {
                    // font-size: 20px;
                    color: white;
                    margin: 0;
                }

                @media screen and (max-width: 460px) {
                    &:last-child,
                    &:first-child {
                        display: none;
                    }
                }
            }
        }


    }

    .previews {
        margin-top: 5px;

        // display: flex;

        // flex-flow: row nowrap;

        width: 100%;
        display: grid;
        overflow: auto;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        grid-auto-columns: calc((100% / 5) - 4px);
        grid-auto-flow: column;
        grid-gap: 5px;

        @media screen and (max-width: 460px) {
            display: none;
        }

        &::-webkit-scrollbar {
            display: none;
        }

        .preview {
            border-radius: 5px;
            overflow: hidden;
            height: 80px;
            scroll-snap-align: center;
            transition: scroll 1s;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                pointer-events: none;
                user-select: none;
            }
        }
    }
}



@media screen and (max-width: 480px) {
    .wrap {
        flex-direction: column;
    }
}

#photo-block {
    /* width: 517px;
    margin-right: 37px;
    margin-left: 25px; */
    margin-right: 30px;
    display: flex;
    flex-direction: column;
    z-index: 1;
    flex: 1;
}

#advice #photo-block {
    /* width: 517px;
    margin-right: 20px; */
}

#room-button {
    height: 30px;
    padding: 0 15px;
    color: #918a79;
    font-weight: bold;
    background-color: #d7d0bf;
    border: none;
    border-radius: 5px;
    transition: background 0.3s;

    &:hover {
        background-color: #d7d0bf - 20;
    }
}


#photo-block a, #room-buttons a {
    display: inline-block;
    width: 258px;
    font-size: 17px;
    padding: 10px 0px 10px 0px;
    text-align: center;
    margin-top: 20px;
    color: white;
}

#advice #share-block {
    /*background-color: rgba(255, 255, 255, 0.6);
    position: absolute;
    width: 100px;
    height: 80px;
    top: 815px;
    left: 550px;
    opacity: 1;
    z-index: 6;*/
    background-color: rgba(255, 255, 255, 0.6);
    position: absolute;
    width: 372px;
    top: 0;
    right: 580px;
    padding: 10px 8px 5px 10px;
    opacity: 1;
    display: none;
}

#room-buttons {
    padding-right: 20px;
}

#photo-block a:hover {
    opacity: 0.8;
}

#photo-block a:active, #advice #info-block a:active {
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3);
}

#photo-block #main-photo {
    height: 274px;
    /*width: 517px;*/
    /* width: 100%; */

    cursor: pointer;
    z-index: 1;
    position: relative;
}

#main-photo img {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
}

// #advice #info-block, #advice #photo-block  {
//     flex: 1;
// }

// #advice #photo-block #main-photo {
//     height: 274px;
//     /* width: 517px; */
// }


.preview-photo div {
    height: 68px;
    width: 129px;
    position: absolute;
    font-size: 10px;
}

.preview-photo span {
    padding: 3px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.7);
    float: right;
}

.preview-photo span:hover:nth-child(1) {
    background-color: rgba(255, 0, 0, 0.7);
    color: white;
}

.preview-photo span:hover:nth-child(2) {
    background-color: #13bf13;
    color: white;
}

#main-photo iframe {
    width: 100%;
    height: 100%;
}

#photo-block .preview-photo {
    width: 124.25px;
    height: 68px;
    margin-right: 5px;
    margin-bottom: 5px;
    float: left;
    cursor: pointer;
    z-index: 20;
    /*height: 98px;
    width: 125.2px;
    margin-right: 4px;
    margin-top: 5px;
    -o-object-fit: cover;
    object-fit: cover;
    display: inline-block;
    cursor: pointer;*/
}

.sections-v2 {
    border: 1px solid #d7d0bf;
    overflow: hidden;
    margin-bottom: 20px;
    font-size: 15px;
    text-align: left;
}

.sections-v2 .like {
    float: right;
    padding: 20px;
    background-color: #bdb5b3;
    border-radius: 50%;
    margin: 10px;
}

.sections-v2 .like:hover {
    background-color: #a8a18a;
}

.sections-v2:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    transform: scale(1.02);
    /*transition: 0.3s ease;*/
}

.sections-v2 h2 {
    float: left;
    line-height: 33px;
    width: 670px;
    color: rgba(119, 136, 164, 1);
    font-size: 18px;
    border-bottom: 1px solid #d7d0bf;
}

.sections-v2 p {
    line-height: 33px;
    float: left;
    color: #a8a18a;
}

.sections-v2 > img {
    width: 150px;
    height: 79.47px;
    -o-object-fit: cover;
    object-fit: cover;
    float: left;
}

.sections-v2 .image-box {
    float: left;
    border-right: 1px solid #d7d0bf;
    margin-right: 10px;
    width: 150px;
    height: 79.47px;
}

.sections-v2 .image-box img {
    width: 150px;
    height: 79.47px;
    -o-object-fit: cover;
    object-fit: cover;
}



.preview-photo:hover {
    z-index: 20;
    box-shadow:0 0 10px rgba(119, 136, 164, 1);
}

#view-more {
    text-align: center;
    /* display: none; */
    margin-top: 30px;
}

#photo-block #view-more-photo {
    float: left;
    display: none;
    margin-top: 5px;
    width: 124.25px;
    height: 68px;
    cursor: pointer;
    color: #99b6d0;
    margin-top: -2px;
}

#photo-block #view-more-photo:hover {
    text-decoration: underline;
}

#photo-block #view-more-photo span {
    display: block;
    text-align: center;
    margin: auto;
    width: 100px;
    margin-top: 17px;
    font-size: 15px;
}

#info-block {
    /*background-color: #fffcf4;*/

    /* width: 616px; */
    z-index: 2;
    position: relative;
}

// #advice #info-block {
//     /* width: 100%; */
//     position: relative;
//     display: flex;
//     flex-direction: column;
// }

// #advice #info-block #links {
//     position: absolute;
//     bottom: 0;
// }

// #advice #info-block #descr {
//     padding: 30px;
//     display: flex;
//     flex-direction: column;
// }

// .descr {
//     font-size: 14px;
// }

.email {
    position: absolute;
    bottom: -40px;
    left: 0;
    font-size: 14px;
    -webkit-user-select: text;
    -webkit-user-select: text;
    -webkit-user-select: text;
}

#info-block #descr {
    margin-top: 30px;
    float: left;
    font-size: 14px;
    padding-top: 32px;
    text-align: justify;
}

#photo-block #b-1, #photo-block #b-2 {
    height: 79px;
    width: 102px;
    position: absolute;
    right: 200px;
    bottom: 0px;
    background-color: #d7d0bf;
}

#photo-block #b-2 {
    right: 0;
    background-color: #bdb5b3;
}

#b-1, #b-2, #b-3 {
    text-align: center;
    font-size: 14px;
    color: white;
    cursor: pointer;
}

#b-2:active, #b-3:active, #b-1:active {
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3);
}

#b-3 {
    display: table;
    font-size: 18px;
}

#b-3 span {
    display: table-cell;
    vertical-align: middle;
}

#b-1 img, #b-2 img {
    margin: 20px auto 5px;
}

#info-block h2, #info-block h3, #info-block .rating p {
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    color: #b1a893;
}

#info-block .rating p {

}

#info-block .rating span i {
    color: gold;
}

#info-block .info-2 {
    float: left;
    margin-left: 15px;
}

#info-block .info-2 div {
    height: 86px;
    display: table;
    width: 100%;
}

// #info-block .info-2 div h1 {
//     display: table-cell;
//     vertical-align: middle;
//     text-align: center;
//     font-size: 25px;
//     font-weight: bold;
// }

#info-block table {
    /* border-bottom: 1px solid #d7d0bf; */
    border-collapse: collapse;
    font-size: 14px;
    color: #aba08e;
}

#info-block .info-2 td {
    border-top: 1px solid #d7d0bf;
    padding-left: 14px;
    height: 27px;
}

#info-block .info-2 .td-1 {
    width: 184px;
    text-align: right;
}

#info-block .info-2 .td-2 {
    width: 184px;
    text-align: left;
    color: #575757;
}

#info-block h2 {
    color: #b1a893;
}

#info-block h3 {
    color: #4e4e4e;
    font-size: 17px;
}

#info-block hr {
    margin: 7.5px 0;
    background: none;
    height: 1px;
    border: none;
    background-color: #efeadd;
}

.sections:hover h2, #advices .sections:hover h2 {
    font-size: 17px;
    color:  white;
    background-color: #627ba5;
    transition: 0.2s ease;
}

.addthis_inline_share_toolbox {
    width: 187px;
    text-align: center;
    margin: auto;
    background-color: white;
}

.sections:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transform: scale(1.02);
}

.sections-v2:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    transform: scale(1.02);
    /*transition: 0.3s ease;*/
}

.sections > p, #sections-more > p {
    padding: 13px;
    height: 54px;
    display: flex;
    text-align: left;
    font-size: 14px;
    color: #948772;
    white-space: normal;
    border-top: 1px solid #d7d0bf;
    background-color: white;
}






/* рег */

#registration-block {
    border: 1px solid #d7d0bf;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 304px;
    text-align: center;
    padding: 20px;
    background-color: #fffcf4;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    z-index: 4;
    /* opacity: 0; */
    display: none;
}

#registration-block img {
    margin-bottom: 10px;
}

#registration-block p {
    font-size: 16px;
    color: #a8a18a;
}

#registration-block input {
    width: 256px;
    height: 25px;
    padding: 7px 20px 7px 20px;
    font-size: 16px;
    margin-bottom: 10px;
    border: 1px solid #d7d0bf;
    border: 1px solid #d7d0bf;
    outline: none;
    color: gray;
}

#registration-block input:valid {
    background: rgba(0, 128, 0, 0.1);
}


#registration-block button {
    outline: none;
    font-size: 16px;
}

#registration-block button:active {
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
}

#registration-block input:focus {
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
}

#registration-block table {
    margin-top: 10px;
    margin-bottom: 10px;
}

#registration-block #add-user {
    width: 299px;
    margin-top: 10px;
    height: 40px;
    border: none;
    color: white;
    background-color: rgba(119, 136, 164, 1);
}

/* LOGIN */

#login-block, #email-block, #window-pass-edit-block {
    border: 1px solid #d7d0bf;
    position: fixed;
    top: 50%;
    left: 50%;
    /* margin-top: -197.5px;
    margin-left: -173px; */
    transform: translate(-50%,-50%);
    width: 304px;
    text-align: center;
    padding: 20px;
    background-color: #fffcf4;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    z-index: 4;
    opacity: 1;
    display: none;
}

#login-block img, #email-block img {
    margin-bottom: 10px;
}

#login-block p, #email-block p {
    font-size: 16px;
    color: #a8a18a;
}

#login-block input, #email-block input {
    width: 256px;
    height: 25px;
    padding: 7px 20px 7px 20px;
    font-size: 16px;
    margin-bottom: 10px;
    border: 1px solid #d7d0bf;
    border: 1px solid #d7d0bf;
    outline: none;
    color: gray;
}

#login-block button, #email-block button {
    outline: none;
    font-size: 16px;
}

#login-block button:active {
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
}

#login-block input:focus {
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
}

#login-block table, #email-block table {
    margin-top: 10px;
    margin-bottom: 10px;
}

#login-block #login-user, #login-block #registration-button, #save-new-pass {
    width: 299px;
    margin-top: 10px;
    height: 40px;
    border: none;
    color: white;
    background-color: rgba(119, 136, 164, 1);
}

#email-block #send-email, #email-block #registration-button {
    width: 299px;
    margin-top: 10px;
    height: 40px;
    border: none;
    color: white;
    background-color: rgba(119, 136, 164, 1);
}

#login-block .close, .info-to-email {
    float: left;
    cursor: pointer;
    text-decoration: underline;
}

#login-block .close, #email-block .close {
    margin-left: 130px;
    text-align: right;
}
.ololo {
    background-color: red;
    height: 200px;
}

/* MESSAGE WINDOW */

#message-window, #message-window-v2 {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -292px;
    margin-left: -274px;
    border: 1px solid #d7d0bf;
    background-color: #fffcf4;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    text-align: center;
    padding: 20px;
    opacity: 0;
    display: none;
    z-index: 4;
}

#message-window img, #message-window-v2 img {
    margin-left: 107px;margin-bottom: 10px;
}

#message-window input, #message-window-v2 input {
    width: 460px;
    height: 25px;
    padding: 7px 20px 7px 20px;
    font-size: 16px;
    margin-bottom: 10px;
    border: 1px solid #d7d0bf;
    outline: none;
    color: gray;
}

#message-window textarea, #message-window-v2 textarea {
    width: 460px;
    height: 200px;
    border: 1px solid #d7d0bf;
    padding: 7px 20px 7px 20px;
    font-size: 16px;
    outline: none;
    color: gray;
    resize: none;
}

#message-window button, #message-window-v2 button {
    width: 501px;
    margin-top: 10px;
    height: 40px;
    border: none;
    color: white;
    background-color: rgba(119, 136, 164, 1);
    font-size: 16px;
    outline: none;
    cursor: pointer;
}

#message-window p, #message-window-v2 p {
    font-size: 16px;
    color: #a8a18a;
}

#message-window button:active {
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
}

#error-page {
    min-height: 300px;
    color: rgba(119, 136, 164, 1);
    text-align: center;
    padding-top: 100px;
}

// #error-page h1 {
//     font-size: 20px;
// }

#message-window input:focus {
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
}

#message-window table, #message-window-v2 table {
    margin-top: 10px;
    margin-bottom: 10px;
}

#reg-name, #reg-email,  #reg-password, #reg-password-2, #login-email, #login-password {
    border: 1px solid #d7d0bf;
}

#shadow {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    z-index: 3;
    display: none;
}

#make-room-block {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 50px 15px;
    align-items: center;

    .blocks {
        margin: 15px 0;
        max-width: 600px;
    }

    h1 {
        color: #627ba5;
        font-weight: bold;
    }

    p {
        text-align: center;
        font-weight: normal;
        color: #a8a18a;
    }
}

#add-room {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #627ba5;
    color: white;
    font-size: 24px;
    padding: 15px;
    box-shadow: 2px 2px 5px rgba(119, 136, 164, 1);
}

#add-room:active {
    box-shadow: none;
}

/* BANNERS */

.reclam {
    margin-left: 25px;
    font-size: 15px;
    border: 1px solid rgba(168, 161, 138, 0.5);
}

.reclam td {
    padding: 5px;
}

.reclam td select, .reclam td input {
    padding: 2px;
}

#banners img {
    width: 600px;
    height: 200px;
    -o-object-fit: cover;
    object-fit: cover;
}

.banner-blocks {
    position: relative;
    width: 920px;
    height: 286px;
    margin: 0px auto 30px;
    overflow: hidden;
}

.banner-blocks img {
    position: relative;
    width: 920px;
    height: 286px;
    -o-object-fit: cover;
    object-fit: cover;
}

#project .banner-blocks {
    margin: auto;
}

.banner-blocks > div {
    position: absolute;
    height: 118px;
    width: 570px;
    background-color: rgba(255, 255, 255, 0.78);
    top: 85px;
    display: table;
    color: #363636;
}

.banner-blocks > div > h1 {
    display: table-cell;
    width: 340px;
    vertical-align: middle;
}

.banner-blocks > div > p {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}

/* TABS */

// #projects {
//     max-width: 950px;
//     margin: auto;
//     min-height: 600px;
// }

#room #projects {
    min-height: 200px;
    margin-bottom: 50px;
}

#room #projects ul {
    font-size: 15px;
    margin: 20px 0px 0px 8px;
    display: inline-block;
    width: 920px;
    position: relative;
    left: -920px;
}

#room #projects ul li {
    width: 300px;
    margin: 0px auto 5px;
    border-bottom: 1px solid #d7d0bf;
}

#slide-ul {
    white-space: nowrap;
    overflow: hidden;
}


#projects .sections, #sections-more {
    margin: 32.5px 16.25px 0px 16.25px;
}

#projects .sections h2, #room .sections h2, #advices .sections h2 {
    width: 228px;
}

/*#projects*/ .sections .like {
    background-color: #bdb5b3;
    display: table-cell;
    width: 55px;
    text-align: center;
    vertical-align: middle;
}

.sections .like:hover {
    background-color: #a8a18a;
}

/*#projects*/ .sections .like img {
    display: inline-block;
}

// #projects #link-wrap {
//     position: relative;
//     text-align: center;
//     font-size: 22px;
//     overflow: hidden;
//     width: 100%;
//     margin: auto;
// }


#link-wrap {
    border-bottom: 1px solid white - 30;
    overflow: auto;

    ul {
        display: flex;
        justify-content: space-around;
        flex-wrap: nowrap;

        li {
            padding: 15px 0;
            a {
                font-weight: bold;
                text-transform: uppercase;
                color: #a8a18a;
                // white-space: nowrap;
            }
        }
        li.active {
            border-bottom: 3px solid #7788A4;
            a {
                color: #7788A4;
            }
        }
    }
}

#filter {
    background-color: rgba(255,255,255,0.8);
    padding: 15px;
    border-radius: 5px;
    margin: 30px 0;
    border: 1px solid #d7d0bf;

    form {
        display: flex;
        justify-content: center;

        .form-group {
            margin: 0 15px;

            select {
                height: 30px;
                border-radius: 5px;
                padding: 0 15px;
                border: 1px solid #d7d0bf;
                outline: none;
            }
        }

        @media screen and (max-width: 460px) {
            flex-direction: column;

            .form-group {
                display: flex;
                flex-direction: column;
                margin: 0;
                margin-bottom: 15px;

                &:last-child {
                    margin: 0;
                }
            }
        }
    }
}

#page-preloader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fffcf4;
    z-index: 100500;
}

#page-preloader .spinner {

    position: absolute;
    left: 50%;
    top: 50%;
    background: url('/public/img/spinner.gif') no-repeat 50% 50%;
    margin: -16px 0 0 -16px;
}

/* FORUM CSS */

#forum-page #forum-topic-table, #all-topics #forum-topic-table {
    width: 800px;
    margin: 0px 0px 20px 20px;
    font-size: 14px;
    border-collapse: collapse;
    color: #808080;
}

#all-topics {
    margin-top: 20px;
}

#forum-page .empty-theme {
    text-align: center;
    color: #808080;
}

#forum-topic-table td {
    border: 1px solid rgba(215, 208, 191, 0.5);
    padding: 7px;
}

#forum-topic-table td:nth-child(1) {
    width: 500px;
}

#forum-topic-table td:nth-child(2) {
    width: 80px;
    text-align: center;
}

#forum-topic-table td:nth-child(3) {
    width: 100px;
    text-align: center;
}

#forum-page a, #all-topics {
    color: #808080;
}

#forum-page a:visited, #all-topics a:visited {
    color: rgba(119, 136, 164, 1);
}


.section-name {
    background-color: rgba(119, 136, 164, 1);
    color: white;
    font-size: 16px;
    width: 780px;
    margin: 20px 0px 0px 20px;
    padding: 0px 10px 0px 10px;
    font-weight: bold;
}

.section-name span {
    line-height: 30px;
}

#forum-page .section-name a {
    color: white;
    font-weight: normal;
    font-size: 12px;
    float: right;
    line-height: 30px;
}

#forum-page .forum-admin-panel {margin: 20px 20px 0px 20px; }

#forum-topic-table td:nth-child(4) {
    width: 60px;
    text-align: center;
}

#forum-topic-table td:nth-child(5) {
    width: 60px;
    text-align: center;
}

/*#forum-page table tr:nth-child(2n + 1) {
    background-color: rgba(119, 136, 164, 0.1);
}*/

/*#forum-page table tr:first-child {
    background-color: #a8a18a;
    color: white;
    font-size: 12px;
}*/

#forum-topic-table .str:hover {
    background-color: rgba(215, 208, 191, 0.2);
}




/* TOPIC CSS */

#topic {
    padding: 20px;
}

#topic .forum-admin-panel {
    margin: 0;
    margin-bottom: 20px;
}

#topic #topic-info {
    margin-bottom: 20px;
    overflow: hidden;
    padding: 5px;
    color: white;
    background-color: rgba(119, 136, 164, 1);
}

#topic #topic-info table {
    width: 100%;
    font-size: 14px;
}

#topic #topic-info table td {
    padding: 5px;
}

#topic #topic-info table td:nth-child(1) {
    width: 40px;
}

#topic #topic-info table td:nth-child(3) {
    width: 160px;
}

#topic #topic-info table td:nth-child(4) {
    width: 120px;
}

#topic #topic-info table h1 {
    font-size: 20px;
}

#topic .message-block {
    margin-bottom: 20px;
}

#topic .message-block .autor-message {
    font-weight: bold;
}

#topic .message-block-header {
    background-color: rgba(119, 136, 164, 1);
    font-size: 12px;
    color: white;
    padding: 5px 10px 5px 10px;
}

#topic .message-block-header span:last-child {
    float: right;
}

#topic .message-block-footer {
    background-color: rgba(119, 136, 164, 1);
    font-size: 12px;
    color: white;
    padding: 5px 10px 5px 10px;
    clear: both;
    overflow: hidden;
}

#topic .message-block-footer span:first-child {
    float: right;
}

#topic .message-block table {
    width: 100%;
    border-collapse: collapse;
}

#topic .message-block table td {
    vertical-align: top;
    font-size: 12px;
}

#topic .message-block table td:first-child {
    width: 150px;
    background-color: rgba(119, 136, 164, 0.2);
    padding: 10px;
    text-align: center;
}

#topic .message-block table td:first-child hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

#topic .message-block .user-photo {
    width: 150px;
    margin: auto;
}

#topic .message-block .to-dialog {
    display: block;
    margin-top: 10px;
    background-color: rgba(119, 136, 164, 1);
    color: white;
    padding: 5px;
}

#topic .message-block table td:last-child {
    background-color: white;
    padding: 10px;
}


/* SCROLLBAR */

::-webkit-scrollbar-button {
background-image:url('');
background-repeat:no-repeat;
width:5px;
height:0px
}

::-webkit-scrollbar-track {
background-color: #a8a18a;
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color: #7786a5;
}

/*::-webkit-scrollbar-thumb:hover{
background-color: #a8a18a;
}*/

::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:4px;
height:0px
}

::-webkit-scrollbar{
width: 8px;
}

.add-new-section, .add-new-topic, .send-message-topic {
    background-color: limegreen;
    margin: 0;
}

.add-new-topic {
    float: right;
}

.send-message-topic {
    float: right;
    margin-right: 0px;
}

.redaction-section {
    background-color: darkorange;
}

.delete-topic, .delete-section {
    background-color: red;
}

.add-to-archive {
    background-color: coral;
}

#all-topics .forum-admin-panel {
    margin: 0px 20px 0px 20px;
}

.forum-admin-panel {
    margin: 10px 0px 10px 0px;
}

.forum-admin-panel button {
    padding: 10px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    outline: none;
    color: white;
}

.forum-admin-panel button:hover {
    opacity: 0.8;
    cursor: pointer;
}

.new-descr {
    width: 100%;
}

#descr ul {
    list-style-type: inherit;
    margin-left: 20px;
}


#projects-container {
    max-width: 1170px;
    font-size: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;

    @media screen and (max-width: 460px) {
        grid-template-columns: 1fr;
    }
}


/* NEW */

button {
    cursor: pointer;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    margin: 15px 0 15px 0;
    overflow-x: auto;

    &::-webkit-scrollbar {
        display: none;
    }

    li {
        background-color: #D7D0BF;
        padding: 5px 15px;
        position: relative;
        margin-right: 10px;

        &:after {
            content: '';
            background-color: #D7D0BF;
            position: absolute;
            display: block;
            height: 100%;
            width: 15px;
            top: 0;
            right: -7.5px;
            -webkit-clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%);
            clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%);
        }

        &:before {
            content: '';
            background-color: #D7D0BF;
            position: absolute;
            display: block;
            height: 100%;
            width: 15px;
            top: 0;
            left: -7.5px;
            -webkit-clip-path: polygon(0 0, 50% 50%, 0 100%, 100% 100%, 100% 0);
            clip-path: polygon(0 0, 50% 50%, 0 100%, 100% 100%, 100% 0);
        }

        a,span {
            font-size: 12px;
            color: #948772;
            font-weight: bold;
            white-space: nowrap;
            // display: block;
            // padding: 5px 15px;
        }

        &:nth-child(1)
        {
            background-color: #7786A5;
            i {
                color: white;
            }

            &:after {
                background-color: #7786A5;
            }

            &:before {
                display: none;
            }
        }

        &:last-child {
            background-color: #EFEADD;

            &:after, &:before {
                background-color: #EFEADD;
            }
        }
    }

    @media screen and (max-width: 460px) {
        padding: 0 15px;

        li {
            border-radius: 5px 0 0 5px;
        }
    }

    .maincrumb {
        background-color: #7786a5;
        position: relative;

        a {
            color: white;
        }
    }

    .maincrumb:after {
        content: '';
        display: block;
        background-color: #7786a5;
        height: 19px;
        width: 19px;
        position: absolute;
        top: 3px;
        transform: rotate(45deg);
        right: -10px;
        z-index: 1;
        border-right: 2px solid white;
        border-top: 2px solid white;
    }

    .crumb {
        background-color: #d7d0bf;
        position: relative;
        margin-left: 15px;

        a {
            color: #d7d0bf - 100;
        }
    }

    .crumb:after {
        content: '';
        display: block;
        background-color: #d7d0bf;
        height: 19px;
        width: 19px;
        position: absolute;
        top: 3px;
        transform: rotate(45deg);
        right: -10px;
        z-index: 1;
        border-right: 2px solid white;
        border-top: 2px solid white;
    }

    .crumb:before {
        content: '';
        display: block;
        background-color: #d7d0bf;
        height: 27px;
        width: 27px;
        position: absolute;
        top: 0;
        left: -15px;
    }

    .activecrumb {
        background-color: #efeadd;
        position: relative;
        margin-left: 15px;

        span {
            color: #d7d0bf - 100;
        }
    }

    .activecrumb:after {
        content: '';
        display: block;
        background-color: #efeadd;
        height: 19px;
        width: 19px;
        position: absolute;
        top: 3px;
        transform: rotate(45deg);
        right: -10px;
        z-index: 1;
        border-right: 2px solid white;
        border-top: 2px solid white;
    }

    .activecrumb:before {
        content: '';
        display: block;
        background-color: #efeadd;
        height: 27px;
        width: 27px;
        position: absolute;
        top: 0;
        left: -15px;
    }
}

.page {
    flex: 1;
    padding: 15px 30px 30px 30px;
    max-width: 950px;
    margin: auto;

    h1 {
        // margin-bottom: 30px;
        text-align: center;
    }

    @media screen and (max-width: 460px) {
        padding: 15px 15px 30px 15px;
        margin: 0;
    }

    .page-title {
        margin-bottom: 30px;
        // padding: 0 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
            display: flex;

            span {
                padding: 5px 10px;
                background-color: red;
                border-radius: 5px;
                color: white;
                display: block;
                margin-left: 10px;
                align-self: flex-start;
                transform: rotate(-7deg);
                font-size: 12px;
            }
        }





        h1 {
            color: #7786a5;
        }
    }
}

.buy {
    background-color: #7786a5;
    color: white;
    font-size: 16px;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: bold;
    border: none;
    transition: background 0.3s;
    width: 100%;

    &:hover {
        background-color: #7786a5 - 20;
    }

    @media screen and (max-width: 460px) {
        padding: 20px 15px;
    }
}

.buy.v1 {
    background-color: rgb(215, 208, 191);
    color: #948772;

    &:hover {
        background-color: rgb(215, 208, 191) - 20;
    }
}

.page.advices {


    h1 {
        // margin-bottom: 30px;
        text-align: center;
    }
    .sections-container {

    }
}

.page.project, .page.advice {
    max-width: none;
    .bottom {
        display: flex;
        justify-content: space-between;
        // padding: 0 30px;
        align-items: center;
        margin-bottom: 30px;

        .somebuttons {
            button {
                height: 30px;
                padding: 0 15px;
            }
        }
    }

    [modal="question"].question-mobile {
        display: none;
        margin-top: 15px;
    }

    @media screen and (max-width: 460px) {
        [modal="question"].question-mobile {
            display: block;
        }

        [modal="question"].question-desctop {
            display: none;
        }
    }

    .wrap {
        display: flex;
        // padding: 0 30px;

        .photo-block {
            margin-right: 15px;
            flex: 3;

            .main-photo {
                position: relative;
                img {
                    width: 100%;
                    border-radius: 5px;
                }

                .zoom {
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 60px;
                    height: 60px;
                    background-color: black;
                    border-radius: 50%;
                    border: none;
                    opacity: 0.4;
                    top: 15px;
                    right: 15px;
                    transition: opacity 0.3s;
                    cursor: pointer;

                    i {
                        color: #7786a5;
                        font-size: 20px;
                    }

                    &:hover {
                        opacity: 0.8;
                    }
                }
            }

            .preview-image {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
                grid-gap: 5px;
                height: 70px;
                margin-top: 5px;

                .preview-photo {
                    overflow: hidden;
                    border-radius: 5px;

                    .iframe-mask {
                        position: absolute;
                        height: 100px;
                        width: 100%;
                        top: 0;
                        left: 0;
                        z-index: 1;
                    }

                    img {
                        filter: grayscale(1);
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: filter 0.3s;

                        &:hover {
                            filter: grayscale(0);
                        }
                    }
                }

                iframe {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .info-1, .info-2 {
            border-radius: 5px;
        }

        .info-1 {
            flex: 1;
            margin-right: 15px;
            background-color: rgba(255,255,255,0.7);
            padding: 0 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            @media screen and (max-width: 460px) {
                margin: 0 0 15px 0;
            }

            > div {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                border-bottom: 1px dotted #d7d0bf - 30;
                padding: 15px 0;

                &:last-child {
                    border: none;
                }

                span {
                    display: block;
                    // font-weight: bold;
                    color: #948772;

                    &:last-child {
                        font-size: 25px;
                        color: #948772;
                        font-weight: bold;
                    }
                }
            }

            .rating {
                span {
                    margin: 5px 0;
                    color: #948772;

                    i {
                        color: gold - 20;
                        margin: 5px 2px;
                        font-size: 20px;
                    }
                }

                button {
                    padding: 10px 15px;
                    background: none;
                    border: none;
                    background-color: #d7d0bf;
                    border-radius: 5px;
                    font-size: 15px;
                    font-weight: bold;
                    color: #d7d0bf - 70;
                    transition: background 0.3s;



                    &:hover {
                        background-color: #d7d0bf - 20;
                    }
                }
            }
        }

        .info-2 {
            flex: 2;
            background-color: rgba(255,255,255,0.7);
            padding: 15px;

            table {
                border-collapse: collapse;
                tr {
                    border-bottom: 1px dotted #d7d0bf - 30;

                    &:last-child {
                        border: none;
                    }

                    td, b {
                        padding: 2px 0;
                        padding-right: 15px;
                        width: 50%;
                        vertical-align: top;
                        font-size: 14px;
                        // color: #d7d0bf - 80;

                        color: #948772;
                    }
                }
            }
        }
    }

    .bottom {
        margin-top: 30px;
    }

    .descr {
        // padding: 0 30px;

        p {
            line-height: 25px;
            font-size: 15px;
        }

        span {
            display: block;
            margin-bottom: 30px;
            font-size: 20px;
            color: #7786a5;
            font-weight: bold;
            text-align: center;
        }
    }
}

button {
    outline: none;
}

#view-more button {
    background: none;
    border: 1px solid #5472a5;
    padding: 10px 15px;
    color: #7786a5;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;

    &:hover {
        background-color: #7786a5;
        color: white;
    }
}

.section {
    background-color: white;
    border: 1px solid #d7d0bf;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    border-radius: 5px;
    overflow: hidden;

    a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 30px 50px rgba(0,0,0,0.1);
    }

    .preview {
        height: 160px;
        position: relative;

        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

        .new-article {
            height: 60px;
            width: 60px;
        }
    }

    .title {
        padding: 15px;
        border-bottom: 1px solid #d7d0bf;
        border-top: 1px solid #d7d0bf;
        display: flex;
        align-items: center;
        display: flex;
        justify-content: space-between;
        align-items: center;

        h2, span {
            color: #7786A5;
            // font-size: 20px;
            font-weight: bold;
        }

        span {
            color: #948772;
        }
    }

    .rating-views-block {
        padding: 5px 15px;
        display: flex;
        border-bottom: 1px solid #d7d0bf;
        // justify-content: space-around;
        align-items: center;

        span {
            font-weight: bold;
            color: #948772;
            margin-right: 15px;
        }

        .rating {
            i {
                color: gold - 20;
                margin-right: 2px;
            }
        }

        .views {
            color: gray;
            i {
                color: gray;
            }
        }

        button {
            color: gray;
            padding: 5px 10px;
            border-radius: 15px;
            background: none;
            border: 1px solid #d7d0bf;
        }
    }

    .tiser {
        padding: 15px;
        // height: 60px;
        // max-height: 60px;
        white-space: normal;
        text-align: left;
        p {
            color: #948772;
        }
    }
}

.category-block {
    display: flex;
    margin-bottom: 30px;
    border: 1px solid white - 50;

    .category-preview {
        margin-right: 15px;
        img {
            max-width: 200px;
        }
    }
    > div:last-child {
        padding: 15px;
    }
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;

    ul {
        display: flex;

        li {
            margin-right: 5px;

            a {
                color: inherit;
                font-weight: bold;
                padding: 5px 10px;
                background-color: #D7D0BF;
                border-radius: 5px;

                i {
                    margin: 0;
                }
            }

            a.active {
                background-color: #7786a5;
                color: white;
            }

            &:last-child {
                margin: 0;
            }
        }
    }
}

.room-btn {
    height: 50px;
    padding: 0 30px;
    background-color: #7786a5;
    color: white;
    transition: background 0.3s;
    font-weight: bold;
    border: none;
    border-radius: 5px;

    &:hover {
        background-color: #7786a5 - 10;
    }

    i {
        color: inherit;
    }
}

.page.search {
    h1, p {
        text-align: center;
        margin-bottom: 30px;
    }
}

.page.about,
.page.contract,
.page.contacts,
.page.reviews,
.page.cabinet,
.page.articles {
    display: flex;
    // justify-content: center;
    align-items: center;
    flex-direction: column;

    h1 {
        margin-bottom: 30px;
    }

    a {
        font-weight: bold;
        margin-top: 30px;
        text-decoration: underline;
    }

    > div {
        max-width: 960px;

        p {
            margin-bottom: 15px;

            &:last-child {
                margin: 0;
            }
        }
    }
}