body {
    background: black; /* Цвет фона веб-страницы */
}

.maxwidth {
    position: absolute;
    background: rgb(100, 100, 100);
    border: 0px solid rgb(100, 100, 100);
    left: 0%;    top: 0px;
    width: 100%; height: 100%;
    padding-top: 0%;
    margin: 0%;
}

/* =============== HOME ====================== */

.novita-mobile {                                     /* mobile */
            display: flex;
            display: block;
            background: black;
            border: 0px solid white;
            position: absolute;
            left:0.0%;       top:21%;
            width: 100.0%;   height: 79.0%;
            padding-left: 2%;
            overflow: scroll;
            /* Chrom  Safari  */          /* FireFox  */
        -webkit-column-width: 50.0%; -moz-column-width: 50.0%; column-width: 50.0%;
        -webkit-column-count: 2;     -moz-column-count: 2;     column-count: 2;
        -webkit-column-gap: 0%;      -moz-column-gap: 0%;      column-gap: 0%;
        -webkit-column-rule: 0px solid #ccc;   -moz-column-rule: 0px solid #ccc;  column-rule: 0px solid #ccc;
    }
.novita {                                           /* mobile */
            display: none;
    }

.novita-tytle {                                     /* mobile */
            display: block;
            background: black;
            position: absolute;
            left:0.0%;       top:1%;
            width: 100.0%;   height: 18.0%;
            padding-left: 2%;

    }

.tytle-home {                                /* mobile */
        background: none;
        font-family: Anton;
        font-size: 15px;
        color: rgb(150, 150, 150);
    }


/* =============== SIDE-LEFT ====================== */

.side-left {                            /* mobile */
        background: black;
        border: 0px solid white;
        position: absolute;
        left: 0.0%;      top:0%;
        width: 100.0%;   height: 16.0%;
        padding-left: 0%;
    }
.image-logo {                           /* mobile */
        background: black;
        position: absolute;
        left: 0.0%;      top:0.0%;
        width: 45.0%;    height: 16.0%;
    }
.menu-button {                         /* mobile */
    position: relative;
    left:0.0%;       top:0%;
    width:100%;    height:20px;
    background: rgb(50, 50, 50);
    vertical-align: middle;
    border: 2px solid black; border-radius: 10px;
    padding-left: 5px;
    color: white;
    font-size: 11px;
}
.menu-button-c {                              /* mobile */
    display: none;
}

.menu {                                /* mobile */
        background: black;
        border: 0px solid yellow;
        position: absolute;
        left:50.0%;      top:2.0%;
        width: 35%;      height: 98%;

    }
.count-jago {                           /* mobile */
        display: none;
        background: none;
        position: absolute;
        left:-24.0%;      top:-50%;
        width: 97.0%;   height: 30.0%;
        padding-left: 3%;
        color: white;
        font-size: 10px;
    }

.menu-session {
        display: none;
}

.copy-right {                           /* mobile */
        display: none;
        border: 0px solid white;
        position: absolute;
        left:0.0%;       top:.-20.0%;
        width: 0%;     height:0%;
    }
.social {                              /* mobile */
        background: black;
        border: 0px solid red;
        position: absolute;
        left: 89.0%;    top:2%;
        width: 9%;      height: 98.0%;
     }

/* =============== CONTENT ====================== */
.content {                             /* mobile */
        background: black;
        position: absolute;
        left:0%;         top:16.2%;
        width: 100.0%;   height: 67.6%;
        border: 0px solid green;
        padding-left: 10px;
        color: white;
        text-align: ;
    }
.tytle-page {                           /* mobile */
        background: none;
        position: absolute;
        left: 3%;        top: 1%;
        width: 93.0%;   height: 8.0%;
        padding-left: 0;
        font-family: Anton;
        font-size: 20px;
        color: white;
    }
.collezione-list{
        display: flex;    display: block;
        flex-wrap: wrap;
        background: none;
        position: absolute;
        left:0px;       top:10%;
        width: 100%;   height: 89%;
        color: white;     text-align: center;
        font-size: 10px;
        border: 0px solid red;
        padding-left: 0px;
        overflow-y: scroll;
    }
.collezione-list::-webkit-scrollbar {        /* mobile */
        width: 5px;    height: 5px;
}
.collezione-list::-webkit-scrollbar-thumb {
        background: linear-gradient(to bottom, rgb(50, 50, 50), rgb(200, 200, 200));
        border-radius: 5px;
}
/* =============== RIGHTSIDE ====================== */
.side-right {                              /* mobile */
        display: block;
        background: black;
        position: absolute;
        left:0%;       top:84.0%;
        width: 100%;   height: 16.0%;
        border: 0px solid red;
        padding-left: 0px;
        color: black;
     }
 .right-image-top {                          /* mobile */
        display: none;
        border: 0px solid white;
        background: black;
        position: absolute;
        left:0.0%;      top:0.0%;
        width: 90.0%;   height: 0.0%;
        padding-left: 0px;
    }
 h3 {
        position: absolute;
        top: -15px;    left: 0.0%;
        width: 100%;
        font-family: Anton;
        font-size: 17px;
        color: white;
        text-align: center;
        -webkit-text-stroke: 0.5px black;
    }
 .right-nome-top {                           /* mobile */
        display: block;
        background: black;
        position: absolute;
        left: 0%;       top: 0%;
        width: 100.0%;  height: 19.0%;
        padding-top: 2px; padding-left: 7px;
        font-family: Anton;
        font-size: 12px;
        color: white;
        border: 0px solid red;
    }
 .right-list {                             /* mobile */
        display: none;
        background: black;
        position: absolute;
        left: 0%;      top: 0.0%;
        width: 100%;   height: 71%;
        font-family: Arial;
        font-size: 12px;
        line-height: 1.0;
        margin-top: 5.0px; margin-bottom: 0.0;
        color: white;
        text-align: center;
        overflow-y: scroll;
    }
 .right-list::-webkit-scrollbar {        /* mobile */
        display: none;
    }

 .text-elenco {                            /* computer */
    display: block;
    position: absolute;
    border: 0px solid green;
    left: 60.0%;    top:2.5%;
    width: 38.0%;   height: 5.0%;
    text-align: right;
    font-size: 10px;  color: white;
    overflow: none;
}

.link {                                /* mobile */
    link:  white;
    vlink: white;
    alink: white;
    color: white;
    text-decoration: none;
}

<!--   =================  End MEDIA Mobile ======================  -->

<!--   =================== MEDIA COMPUTER ======================  -->

body {  }

@media (min-width: 400px) {

.maxwidth {                                  /* computer */
    position: absolute;
    background: rgb(50, 50, 50);
    border: 2px solid rgb(50, 50, 50);
    left:0px;    top:0.5%;
    height: auto;
    width: 100%; max-width: 1500px;
    padding-top: 50%;
    margin: 0;
}
.side-left {                                /* computer */
    display: block;
    background: black;
    border: 0px solid red;
    position: absolute;
    left: 0.0%;     top:0%;
    width: 15.0%;   height: 100.0%;
    padding-left: 0;
    font-size: 12px;
}
.image-logo {                               /* computer */
    background: none;
    position: absolute;
    left: 2%;        top: 0%;
    width: 100.0%;   height: 15.0%;
}
.menu-button {                              /* computer */
    display: block;
    position: relative;
    left:2.0%;       top:0%;
    width:96%;    height:23px;
    font-size: 10px;
    vertical-align: middle;
    border: 3px solid black; border-radius: 10px;
    padding-left: 5px;
}
.menu-button-c {                              /* computer */
    display: block;
    position: relative;
    left:2.0%;       top:0%;
    width:96%;    height:23px;
    font-size: 10px;
    background: rgb(50, 50, 50);
    vertical-align: middle;
    border: 3px solid black; border-radius: 10px;
    padding-left: 5px;
    color: white;
}
.menu {                                    /* computer */
    background: none;
    border: 1px solid black;
    position: absolute;
    left:0.0%;       top:17.0%;
    width: 100%;     height: 50%;

}
.count-jago {                              /* computer */
    display: block;
    background: none;
    position: absolute;
    left: -5%;     top:40%;
    width: 110.0%;   height: 30.0%;
    padding-left: 0%;
    color: white;    font-size: 9px;
}
.menu-session {                              /* computer */
    border: 1px solid gray; border-radius: 5px;
    display: block;
    background: none;
    position: absolute;
    left:5%;       top:59%;
    width: 90.0%;    height: 12.0%;
    padding-left: 0px; padding-top: 3px;
    color: white; font-size: 10px;
}
.social {                                  /* computer */
    background: black;
    border: 0px solid red;
    position: absolute;
    left: 5.0%;      top:73.0%;
    width: 94.0%;    height: 6.5%;
    -webkit-column-width: 33.0%; -moz-column-width: 33.0%; column-width: 33.0%;
    -webkit-column-count: 3;     -moz-column-count: 3;     column-count: 3;
    -webkit-column-gap: 0%;      -moz-column-gap: 0%;      column-gap: 0%;
    -webkit-column-rule: 0px solid #ccc;   -moz-column-rule: 0px solid #ccc;  column-rule: 0px solid #ccc;
}
.copy-right {                              /* computer */
    display: block;
    border: 0px solid white;
    position: absolute;
    left: 0.0%;      top: 78.0%;
    width: 100%;     height:18%;
    padding-left: 4%;
}
.content {                                 /* computer */
    background: black;
    position: absolute;
    left:15.2%;     top:0px;
    width: 69.6%;   height: 100.0%;
    border: 0px solid green;
    padding-left: 0px;
    color: white;
    text-align: ;
    overflow-y: hidden;
}
.tytle-page {                                /* computer */
    background: none;
    position: absolute;
    left: 3%;       top: 1%;
    width: 93.0%;   height: 10.0%;
    border: 0px solid white;
    padding-left: 0;
    font-family: Anton;
    font-size: 30px;
    color: white;
}

.collezione-list{
        display: flex;    display: block;
        flex-wrap: wrap;
        background: none;
        position: absolute;
        left:0px;      top:10%;
        width: 100%;   height: 89%;
        color: white;  text-align: center;
        font-size: 12px;
        border: 0px solid red;
        padding-left: 0px;
        overflow-y: scroll;
    }
.collezione-list::-webkit-scrollbar {        /* mobile */
        width: 5px;    height: 5px;
}
.collezione-list::-webkit-scrollbar-thumb {
        background: linear-gradient(to bottom, rgb(50, 50, 50), rgb(200, 200, 200));
        border-radius: 5px;
}

.side-right {                                /* computer */
    display: block;
    background: black;
    position: absolute;
    left:85%;       top:0px;
    width: 15.0%;   height: 100.0%;
    border: 0px solid red;
    padding-left: 0px;
    color: white;
}
.right-image-top {                          /* computer */
    display: block;
    border: 1px solid white;
    background: none;
    position: absolute;
    left:3.0%;     top:1.0%;
    width: 94.0%;  height: 25.0%;
    padding-left: 0px;
}
.right-nome-top {                           /* computer */
    display: block;
    background: none;
    position: absolute;
    left: 0%;       top: 2%;
    width: 97.0%;   height: 10.0%;
    font-family: Anton;
    font-size: 16px;
    color: white;
    text-align: center;
    border: 0px solid white;
    -webkit-text-stroke: 0.5px black;
}
.right-list {                          /* computer */
    display: block;
    background: black;
    position: absolute;
    border: 0px solid white;
    left: 3%;     top: 28.0%;
    width: 94%;   height: 71%;
    font-family: Arial;
    font-size: 11px;   line-height: 1.5;
    margin-top: 5.0px; margin-bottom: 0.0;
    color: white;
    text-align: center;
    overflow-y: scroll;
}
.right-list::-webkit-scrollbar {        /* computer */
    width: 5px;    height: 5px;
}
.right-list::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgb(50, 50, 50), rgb(200, 200, 200));
    border-radius: 5px;
}
.tytle-home {                                /* computer */
    font-family: Anton;
    font-size: 30px;
    color: rgb(150, 150, 150);
}
.novita-mobile {                             /* computer */
    display: none;
}
.novita {                                     /* computer */
    display: block;
    background: black;
    position: absolute;
    left:0.0%;       top:15%;
    width: 96.0%;    height: 84.0%;
    padding-left: 0px;
    text-align: center;
    overflow-y: scroll;
}
.novita::-webkit-scrollbar {                /* computer */
    display: none;
}
.text-elenco {                            /* computer */
    display: block;
    position: absolute;
    border: 0px solid green;
    left: 60.0%;    top:2.5%;
    width: 38.0%;   height: 5.0%;
    text-align: right;
    font-size: 10px;  color: white;
    overflow: none;
}
.link {                                /* computer */
    link:  rgb(200, 200, 200);
    vlink: rgb(200, 200, 200);
    alink: rgb(220, 220, 220);
    color: rgb(200, 200, 200);
    text-decoration: none;
    font-size: 11px;
}
.link:hover {
    color: white;
    text-decoration: none;
}

}
 <!--   =================== END of MEDIA COMPUTER ======================  -->

/* =============== EFFECTS ====================== */


/* -------------------------------------- */
.scale-size {
    transform: scale(1.0)
}
.scale-size:hover {
    transition: 0.5s;         /* Время эффекта */
    transform: scale(1.1);    /* Увеличиваем масштаб */
}
/* ----------------image small-------------------- */
.scale-size-small {
    transform: scale(1.0)
    border: 0px solid white;
}
.scale-size-small:hover {
    transition: 0.5s;         /* Время эффекта */
    transform: scale(1.03);    /* Увеличиваем масштаб */
    border: 0px solid gray;
}
/* ---------------image big----------------------- */
.scale-size-big {
    transform: scale(1.0)
    -webkit-transform-origin: top;
}
.scale-size-big:hover {
    border: 2px solid white;
    transition: 1.8s;         /* Время эффекта */
    transform: scale(1.7);    /* Увеличиваем масштаб */
    -webkit-transform-origin: top;

}

/* ---------------schede----------------------- */
.scale-size-big1 {
    transform: scale(1.0)
    -webkit-transform-origin: top;
}
.scale-size-big1:hover {
    border: 2px solid white;
    transition: 1.8s;         /* Время эффекта */
    transform: scale(1.7);    /* Увеличиваем масштаб */
    -webkit-transform-origin: top;

}
/* -------------------------------------- */
.scale-border {
       border: 0px solid white;
}
.scale-border:hover {
       transition: 0.2s;        /* Время эффекта */
       border: 2px solid white; /* Помещаем рамку */
}

<!--   =================== SLIDE SHOW ======================  -->
* {box-sizing:border-box}
body {font-family: Verdana, sans-serif;}
img {vertical-align: middle;}

.slideshow-container {
  width: 100%; height: auto;
  position: absolut;
  margin: auto;
  padding-top: 0%;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Slide text */
.text {
  color: #f2f2f2;
  font-size: 11px;
  padding: 8px 12px;
  position: relative;
  bottom: 24%;
  width: 100%;
  text-align: center;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 8px;  width:  8px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: rgb(80, 80, 80);
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 3s;
}

@keyframes fade {
  from {opacity: 0.3}
  to   {opacity: 1.0}
}
<!--   =================== SLIDE SHOW END ======================  -->