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 ====================== */

.tytle-home {                                 /* mobile */
        background: none;
        font-family: "Ruslan Display", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgb(150, 150, 150);
    }


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

.side-left {                                /* mobile */
        background: gray;
        border: 0px solid white;
        position: absolute;
        left: 0.0%;      top:0%;
        width: 100.0%;   height: 100.0%;
        padding-left: 0%;
    }
.image-logo {                                /* mobile */
        background: gray;
        position: absolute;
        left: 0.0%;      top:0.0%;
        width: 100.0%;    height: 30.0%;
    }
.image-fon-left {                             /* mobile */
        display: block
        background: gray;
        position: absolute;
        left: 0.0%;      top:50.0%;
        width: 45.0%;    height: 16.0%;
    }
.image-fon-content {                           /* mobile */
        display: block
        background: gray;
        position: absolute;
        left: 0.0%;      top:50.0%;
        width: 45.0%;    height: 16.0%;
    }
.image-fon-right {                           /* mobile */
        display: block
        background: gray;
        position: absolute;
        left: 0.0%;      top:50.0%;
        width: 45.0%;    height: 16.0%;
    }
.menu-button {                               /* mobile */
    position: relative;
    left:0.0%;       top:0%;
    width:100%;    height:20px;
    background: black;
    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 */
        display: none;
        background: gray;
        border: 0px solid yellow;
        position: absolute;
        left:60.0%;      top:2.0%;
        width: 35%;      height: 98%;

    }

.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: gray;
        border: 0px solid red;
        position: absolute;
        left: 89.0%;    top:2%;
        width: 9%;      height: 98.0%;
     }

.content {                             /* mobile */
        display: none;
        background: gray;
        position: absolute;
        left:0%;         top:25.2%;
        width: 100.0%;   height: 49.6%;
        border: 0px solid green;
        padding-left: 10px;
        color: white;
        text-align: ;
    }

.side-right {                              /* mobile */
        display: none;
        background: black;
        position: absolute;
        left:0%;       top:75.0%;
        width: 100%;   height: 16.0%;
        border: 0px solid red;
        padding-left: 0px;
        color: black;
     }

.image-fon-left {                           /* mobila */
        display: none;

    }
.image-fon-content {                           /* mobila */
        display: none;

    }
.image-fon-right {                     /* mobila */
        display: none;

    }

.uvaga {                               /* mobile */
    display: block;
    font-size: 20px;
    top: 50%;
    text-align: center;
    padding-left: 5px;
    color: white;

}

.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: gray;
    border: 0px solid rgb(50, 50, 50);
    left: 0px;    top:0.5%;
    height: auto;
    width: 100%; max-width: 1500px;
    padding-top: 50%;
    margin: 0;
}
.uvaga {                                  /* computer */
    display: none;

}
.side-left {                               /* computer */
    display: block;
    background:  white /*rgb(235, 235, 235) */;
    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: 1%;
    width: 95%;    height: 15.0%;
}
.image-fon-left {                           /* computer */
        display: block;
        border: 0px solid red;
        background: grey;
        position: absolute;
        left: 1.0%;      top:39.0%;
        width: 97.7%;    height: 49.0%;
    }
.image-fon-content {                           /* computer */
        display: block;
        border: 0px solid black;
        background: grey;
        position: absolute;
        left: 0.3%;      top:31.8%;
        width: 99.4%;    height: 49.0%;

    }
.image-fon-right {                           /* computer */
        display: block;
        background: grey;
        border: opx solid black;
        position: absolute;
        left: 1.7%;      top:39.0%;
        width: 97.0%;    height: 49.0%;
    }
.menu {                                    /* computer */
    display: block;
    background: none;
    border: 0px solid black;
    position: absolute;
    left:0.0%;        top:17.0%;
    width: 100%;      height: 50%;
}
.menu-button {                              /* computer */
    display: block;
    position: relative;
    background: rgb(185, 215, 240);
    border: 3px solid white; border-radius: 10px;
    left:2.0%;       top:0%;
    width:96%;    height:8%;
    font-size: 4.0vw;
    vertical-align: bottom;
    padding-left: 5px;
}

.menu-session {                              /* computer */
    border: 1px solid blue; 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;
}
.social {                                  /* computer */
    background: gray;
    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: 82.0%;
    width: 100%;     height:17.0%;
    padding-left: 2%;
}
.content {                                 /* computer */
    display: block;
    background:  white /*rgb(235, 235, 235) */;
    position: absolute;
    left:15.2%;     top:0px;
    width: 69.5%;   height: 100.0%;
    border: 0px solid green;
    padding-left: 0px;
    color: white;
    text-align: ;
    overflow-y: hidden;
}

.side-right {                                /* computer */
    display: block;
    background:   white /*rgb(235, 235, 235) */;
    position: absolute;
    left:84.9%;       top:0px;
    width: 15.0%;   height: 100.0%;
    border: 0px solid red;
    padding-left: 0px;
    color: white;
}
.link {                                /* computer */
    link:  black;
    vlink: black;
    alink: black;
    color: black;
    text-decoration: none;
    font-size: 1.1vw;
    vertical-align: middle;
}
.link:hover {
    color: blue;
    text-decoration: none;
}

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

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


/* -------------------------------------- */
.scale-size {
    transform: scale(1.0)
}
.scale-size:hover {
    transition: 0.5s;         /* Время эффекта */
    transform: scale(1.1);    /* Увеличиваем масштаб */
}
/* -------------------------------------- */
.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----------------------- */
.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; /* Помещаем рамку */
}