body::-webkit-scrollbar {
    display: none;
    scroll-behavior: smooth;
}

.main-container {
    /*overflow-y: hidden;*/
    overflow-x: auto;
    scroll-behavior: smooth;
    background: #fff;
}

.main-container::-webkit-scrollbar-thumb {
    border: 5px solid transparent;
    border-radius: 100px;
    background-color: #8070d4;
    background-clip: content-box;
    scroll-behavior: smooth;
}

.main-container {
    height: 965px;
    margin-top: 4%;
    overflow-x: scroll;
    scroll-behavior: smooth;
    size: landscape;
    width: 98%;
}

#holder {
    background: #fff;
    padding: 32px 0 16px 0;
    height: 1680px;
    width: 90%;
    transform: rotate(-90deg);
    scroll-behavior: smooth;
}

canvas {
    margin: 0 auto;
    display: block;
    width: 1605px;
    scroll-behavior: smooth;
}

.link > a {
    visibility: hidden;
}

.mobile-link {
    visibility: hidden;
}

.link {
    margin-top: -10%;
}

::-webkit-scrollbar {
    width: 12px;
    /*overflow-y: hidden;*/
}

::-webkit-scrollbar-track {
    background-color: transparent;
    /*background-color: rgba(117, 113, 113, 0.02);*/
    border-radius: 10px;
}

.back-galery {
    width: 21em;
    text-underline-position: under;
    position: fixed;
    left: 110em;
    top: 64em;
}

/*.display-category {*/
/*    display: none;*/
/*}*/

.canvas-wrapper {
    transform: rotate(90deg);
    width: inherit;
    height: inherit;
    margin-bottom: -100px;
}

/*====================================================== RESPONSIVE ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

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

    .menu {
        margin-top: -5%;
    }

    .fullwidth-image > img {
        margin-top: 0;
        height: 815px;
    }

    .main-container {
        height: 550px;
        overflow-x: hidden;
        width: 100%;
    }

    .mobile-link {
        visibility: visible;
    }

    .mobile-link > a {
        visibility: hidden;
    }

    .link {
        display: none;
    }

    .back-galery {
        width: 22em;
        text-underline-position: under;
        transform: rotate(0) translateY(0);
        margin-left: 0;
        align-items: flex-end;
        position: fixed;
        left: 2%;
        top: 96.5%;
    }

    canvas {
        width: 600px;
        position: relative;
        right: 10%;
    }

    .canvas-wrapper {
        transform: none;
        width: 520px;
        height: inherit;
        margin-bottom: inherit;
    }
}

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

    .menu {
        margin-top: -5%;
    }

    .fullwidth-image > img {
        margin-top: 0;
        height: 815px;
    }

    .main-container {
        height: 435px;
        overflow-x: hidden;
        width: 100%;
    }

    .mobile-link {
        visibility: visible;
    }

    .mobile-link > a {
        visibility: hidden;
    }

    .link {
        display: none;
    }

    .back-galery {
        width: 22em;
        text-underline-position: under;
        transform: rotate(0) translateY(0);
        margin-left: 0;
        align-items: flex-end;
        position: fixed;
        left: 2%;
        top: 96.5%;
    }

    canvas {
        width: 600px;
        position: relative;
        right: 2%;
    }

    .canvas-wrapper {
        transform: none;
        width: 560px;
        height: inherit;
        margin-bottom: inherit;
    }
}

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

    .menu {
        margin-top: -5%;
    }

    .fullwidth-image > img {
        margin-top: 0;
        height: 815px;
    }

    .main-container {
        height: 635px;
        overflow-x: hidden;
        width: 100%;
    }

    .mobile-link {
        visibility: visible;
    }

    .mobile-link > a {
        visibility: hidden;
    }

    .link {
        display: none;
    }

    .back-galery {
        width: 22em;
        text-underline-position: under;
        transform: rotate(0) translateY(0);
        margin-left: 0;
        align-items: flex-end;
        position: fixed;
        left: 2%;
        top: 96.5%;
    }

    canvas {
        width: 680px;
        position: relative;
        right: 10%;
    }

    .canvas-wrapper {
        transform: none;
        width: 650px;
        height: inherit;
        margin-bottom: inherit;
    }
}

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

    .menu {
        margin-top: -5%;
    }

    .fullwidth-image > img {
        margin-top: 0;
        height: 815px;
    }

    .main-container {
        height: 700px;
        overflow-x: hidden;
        width: 100%;
    }

    .mobile-link {
        visibility: visible;
    }

    .mobile-link > a {
        visibility: hidden;
    }

    .link {
        display: none;
    }

    .back-galery {
        width: 22em;
        text-underline-position: under;
        transform: rotate(0) translateY(0);
        margin-left: 0;
        align-items: flex-end;
        position: fixed;
        left: 2%;
        top: 96.5%;
    }

    canvas {
        width: inherit;
        position: relative;
        right: 10%;
    }

    .canvas-wrapper {
        transform: none;
        width: 700px;
        height: inherit;
        margin-bottom: inherit;
    }
}

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

    .menu {
        margin-top: -5%;
    }

    .fullwidth-image > img {
        margin-top: 0;
        height: 815px;
    }

    .main-container {
        height: 735px;
        overflow-x: hidden;
        width: 100%;
    }

    .mobile-link {
        visibility: visible;
    }

    .mobile-link > a {
        visibility: hidden;
    }

    .link {
        display: none;
    }

    .back-galery {
        width: 22em;
        text-underline-position: under;
        transform: rotate(0) translateY(0);
        margin-left: 0;
        align-items: flex-end;
        position: fixed;
        left: 2%;
        top: 96.5%;
    }

    canvas {
        width: inherit;
        position: relative;
        right: 10%;
    }

    .canvas-wrapper {
        transform: none;
        width: 730px;
        height: inherit;
        margin-bottom: inherit;
    }
}

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

    .menu {
        margin-top: -5%;
    }

    .fullwidth-image > img {
        margin-top: 0;
        height: 815px;
    }

    .main-container {
        height: 740px;
        overflow-x: hidden;
        width: 100%;
    }

    .mobile-link {
        visibility: visible;
    }

    .mobile-link > a {
        visibility: hidden;
    }

    .link {
        display: none;
    }

    .back-galery {
        width: 22em;
        text-underline-position: under;
        transform: rotate(0) translateY(0);
        margin-left: 0;
        align-items: flex-end;
        position: fixed;
        left: 2%;
        top: 96.5%;
    }

    canvas {
        width: inherit;
        position: relative;
        right: 10%;
    }

    .canvas-wrapper {
        transform: none;
        width: 730px;
        height: inherit;
        margin-bottom: inherit;
    }
}

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

    .menu {
        margin-top: -5%;
    }

    .fullwidth-image > img {
        margin-top: 0;
        height: 815px;
    }

    .main-container {
        height: 800px;
        overflow-x: hidden;
        width: 100%;
    }

    .mobile-link {
        visibility: visible;
    }

    .mobile-link > a {
        visibility: hidden;
    }

    .link {
        display: none;
    }

    .back-galery {
        width: 22em;
        text-underline-position: under;
        transform: rotate(0) translateY(0);
        margin-left: 0;
        align-items: flex-end;
        position: fixed;
        left: 2%;
        top: 96.5%;
    }

    canvas {
        width: 785px;
        position: relative;
        right: 10%;
    }

    .canvas-wrapper {
        transform: none;
        width: 750px;
        height: inherit;
        margin-bottom: inherit;
    }
}

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

    .menu {
        margin-top: -5%;
    }

    .fullwidth-image > img {
        margin-top: 0;
        height: 815px;
    }

    .main-container {
        height: 785px;
        overflow-x: hidden;
        width: 100%;
    }

    .mobile-link {
        visibility: visible;
    }

    .mobile-link > a {
        visibility: hidden;
    }

    .link {
        display: none;
    }

    .back-galery {
        width: 22em;
        text-underline-position: under;
        transform: rotate(0) translateY(0);
        margin-left: 0;
        align-items: flex-end;
        position: fixed;
        left: 2%;
        top: 96.5%;
    }

    canvas {
        width: 790px;
        position: relative;
        right: 8.5%;
    }

    .canvas-wrapper {
        transform: none;
        width: 730px;
        height: inherit;
        margin-bottom: inherit;
    }
}

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

    .menu {
        margin-top: -5%;
    }

    .fullwidth-image > img {
        margin-top: 0;
        height: 815px;
    }

    .main-container {
        height: 700px;
        overflow-x: hidden;
        width: 100%;
    }

    .mobile-link {
        visibility: visible;
    }

    .mobile-link > a {
        visibility: hidden;
    }

    .link {
        display: none;
    }

    .back-galery {
        width: 22em;
        text-underline-position: under;
        transform: rotate(0) translateY(0);
        margin-left: 0;
        align-items: flex-end;
        position: fixed;
        left: 2%;
        top: 96.5%;
    }

    canvas {
        width: inherit;
        position: relative;
        right: 10%;
    }

    .canvas-wrapper {
        transform: none;
        width: 700px;
        height: inherit;
        margin-bottom: inherit;
    }
}

@media screen  and (min-width: 1200px) and (max-width: 1295px) {

    .back-galery {
        width: 22em;
        text-underline-position: under;
        position: fixed;
        left: 69em;
        top: 48em;
    }

    .main-container {
        height: 685px;
    }

    .canvas-wrapper {
        width: 1181px;
        height: inherit;
        margin-bottom: -160px;
    }
}

@media screen  and (min-width: 1400px) and (max-width: 1495px) {

    .back-galery {
        width: 22em;
        text-underline-position: under;
        position: fixed;
        left: 81em;
        top: 54em;
    }

    .main-container {
        height: 825px;
    }

    .canvas-wrapper {
        width: inherit;
        height: inherit;
        margin-bottom: -100px;
    }
}

@media screen  and (min-width: 1500px) and (max-width: 1595px) {

    .back-galery {
        width: 22em;
        text-underline-position: under;
        align-items: flex-end;
        position: fixed;
        left: 88em;
        top: 54em;
    }

    .main-container {
        height: 820px;
    }

    .canvas-wrapper {
        width: inherit;
        height: inherit;
        margin-bottom: -100px;
    }
}

@media screen  and (min-width: 1600px) and (max-width: 1695px) {

    .back-galery {
        width: 22em;
        text-underline-position: under;
        align-items: flex-end;
        position: fixed;
        left: 94em;
        top: 54em;
    }

    .main-container {
        height: 815px;
    }

    .canvas-wrapper {
        width: 1400px;
        height: inherit;
        margin-bottom: -100px;
    }
}

@media screen  and (min-width: 1700px) and (max-width: 1795px) {

    .back-galery {
        width: 22em;
        text-underline-position: under;
        align-items: flex-end;
        position: fixed;
        left: 100em;
        top: 54em;
    }

    .canvas-wrapper {
        width: 1400px;
        height: inherit;
        margin-bottom: -100px;
    }

    .main-container {
        height: 810px;
    }
}

@media screen  and (min-width: 1800px) and (max-width: 1895px) {

    .back-galery {
        width: 22em;
        text-underline-position: under;
        align-items: flex-end;
        position: fixed;
        left: 107em;
        top: 54em;
    }

    .main-container {
        height: 805px;
    }

    .canvas-wrapper {
        width: 1500px;
        height: inherit;
        margin-bottom: -100px;
    }
}

@media screen and (min-width: 1900px) and (max-width: 1995px) {

    .back-galery {
        width: 22em;
        text-underline-position: under;
        align-items: flex-end;
        position: fixed;
        left: 110em;
        top: 54em;
    }

    .main-container {
        height: 805px;
    }

    .canvas-wrapper {
        width: inherit;
        height: inherit;
        margin-bottom: -50px;
    }
}

/*@media screen and (min-width: 2000px) {*/

/*    .main-container {*/
/*        height: 965px;*/
/*    }*/

/*    .back-galery {*/
/*        left: 110em;*/
/*        top: 64em;*/
/*    }*/

/*    .canvas-wrapper {*/
/*        height: inherit;*/
/*        width: inherit;*/
/*        margin-bottom: -100px;*/

/*    }*/
/*}*/