diff --git a/.drone.yml b/.drone.yml
index 66974f61..f1c00c66 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -4,8 +4,6 @@ pipeline:
     commands:
       - docker build -t tmshv/hudozka:latest -t tmshv/hudozka:build-${DRONE_BUILD_NUMBER} .
       - docker save -o hudozka-docker_container${DRONE_BUILD_NUMBER}.tar tmshv/hudozka:build-${DRONE_BUILD_NUMBER}
-    when:
-      branches: [master]
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock
 
@@ -16,3 +14,5 @@ pipeline:
     target: ~/Hudozka
     source: hudozka-docker_container${DRONE_BUILD_NUMBER}.tar
     secrets: [scp_key]
+    when:
+      branch: master
diff --git a/package-lock.json b/package-lock.json
index 08361a3d..01e6761a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10880,11 +10880,6 @@
         "koa-compose": "^3.0.0"
       }
     },
-    "koa-query": {
-      "version": "0.0.2",
-      "resolved": "http://storage.mds.yandex.net/get-npm/66641/koa-query-0.0.2.tgz",
-      "integrity": "sha1-YjMfgPchJgduorD964WKQJojeLM="
-    },
     "koa-route": {
       "version": "3.2.0",
       "resolved": "http://storage.mds.yandex.net/get-npm/45674/koa-route-3.2.0.tgz",
diff --git a/package.json b/package.json
index 97f738ac..154584db 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,6 @@
     "koa-helmet": "^1.0.0",
     "koa-logger": "^2.0.0",
     "koa-mount": "^2.0.0",
-    "koa-query": "0.0.2",
     "koa-route": "^3.1.0",
     "koa-session": "^4.0.0",
     "koa-static": "^3.0.0",
diff --git a/src/routes/index.js b/src/routes/index.js
index 7ff7b352..131a5420 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -10,15 +10,14 @@ export function queryObject() {
 	const processors = [toTrue, toFalse]
 
 	return async(ctx, next) => {
-		let query = ctx.query
 		ctx.query = Object
-			.keys(query)
+			.keys(ctx.query)
 			.reduce((query, key) => assign(
 				query,
 				key,
 				processors
 					.reduce((value, fn) => fn(value), query[key])
-			), query)
+			), ctx.query)
 
 		await next()
 	}
@@ -26,9 +25,9 @@ export function queryObject() {
 
 export function accepts(routes) {
 	return async function (ctx) {
-		let request = ctx.request
-		let types = Object.keys(routes)
-			.filter(type => request.accepts(type))
+		const types = Object
+			.keys(routes)
+			.filter(type => ctx.request.accepts(type))
 
 		if (types.length) {
 			let fn = routes[types[0]]
diff --git a/src/style/body-wrapper.scss b/src/style/body-wrapper.scss
index b8eb513e..c26ced47 100644
--- a/src/style/body-wrapper.scss
+++ b/src/style/body-wrapper.scss
@@ -1,12 +1,10 @@
-@import "variables";
-
 .body-wrapper {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   background-color: white;
 
-  font-family: $text-font;
+  font-family: var(--text-font);
   font-size: var(--font-size-default);
 }
 
diff --git a/src/style/components/Article.scss b/src/style/components/Article.scss
index 997d60c9..f93e34a2 100644
--- a/src/style/components/Article.scss
+++ b/src/style/components/Article.scss
@@ -1,5 +1,3 @@
-@import "../variables";
-
 .Article {
   --article-line-height: 1.75em;
   --article-quote-padding: var(--half-margin);
@@ -8,7 +6,7 @@
 
   hyphens: auto;
 
-  margin-bottom: $post-margin;
+  margin-bottom: var(--post-margin);
 
   &-Head {
     margin-bottom: 1.25em;
@@ -29,8 +27,8 @@
     --text-margin: 10px;
 
     ul, ol {
-      margin-left: $half-margin;
-      margin-bottom: $single-margin;
+      margin-left: var(--half-margin);
+      margin-bottom: var(--single-margin);
 
       li {
         margin-bottom: var(--half-margin);
@@ -54,8 +52,8 @@
     blockquote {
       background-color: hsl(215, 10%, 96%);
       padding: var(--article-quote-padding);
-      margin: $single-margin 0;
-      font-family: $title-font;
+      margin: var(--single-margin) 0;
+      font-family: var(--title-font);
       font-style: italic;
       font-weight: normal;
       font-size: var(--article-quote-font-size);
@@ -63,13 +61,13 @@
       border-radius: var(--block-border-radius);
 
       cite {
-        margin-top: $single-margin;
+        margin-top: var(--single-margin);
         display: block;
         color: #aaa;
         font-size: initial;
-        font-family: $text-font;
+        font-family: var(--text-font);
         text-align: right;
-        margin-right: $single-margin;
+        margin-right: var(--single-margin);
       }
 
       p {
@@ -93,7 +91,7 @@
   }
 }
 
-@media (max-width: $mobile-width) {
+@media (max-width: var(--mobile-width)) {
   .Article {
     --article-line-height: 1.5em;
     --article-quote-padding: .5em;
diff --git a/src/style/components/ArticleCard.scss b/src/style/components/ArticleCard.scss
index 46744518..7063b341 100644
--- a/src/style/components/ArticleCard.scss
+++ b/src/style/components/ArticleCard.scss
@@ -1,5 +1,3 @@
-@import "../variables";
-
 .ArticleCard {
   --article-card-width: 30%;
   --article-card-image-height: 15em;
@@ -78,7 +76,7 @@
 
 // Tablet
 
-@media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) {
+@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
   .ArticleCard {
     --article-card-image-height: 12em;
   }
@@ -90,7 +88,7 @@
 
 // Mobile
 
-@media (max-width: $mobile-width) {
+@media (max-width: var(--mobile-width)) {
   .ArticleCard {
     --article-card-width: 100%;
     --article-card-margin: var(--single-margin) 0;
diff --git a/src/style/components/HudozkaTitle.scss b/src/style/components/HudozkaTitle.scss
index 993b82cc..d5820304 100644
--- a/src/style/components/HudozkaTitle.scss
+++ b/src/style/components/HudozkaTitle.scss
@@ -1,5 +1,3 @@
-@import "../variables";
-
 .HudozkaTitle {
   --padding: var(--double-margin) 0;
 
@@ -17,7 +15,7 @@
   }
 }
 
-@media (max-width: $mobile-width) {
+@media (max-width: var(--mobile-width)) {
   .HudozkaTitle {
     --padding: 0 0 var(--double-margin);
   }
diff --git a/src/style/components/PersonCard.scss b/src/style/components/PersonCard.scss
index e8e8ddb7..1eb2ac23 100644
--- a/src/style/components/PersonCard.scss
+++ b/src/style/components/PersonCard.scss
@@ -1,5 +1,3 @@
-@import "../variables";
-
 .PersonCard {
   --person-card-width: 30%;
   --person-card-height: 24em;
@@ -78,7 +76,7 @@
 
 // Tablet
 
-@media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) {
+@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
   .PersonCard {
     --person-card-height: 20em;
   }
@@ -90,7 +88,7 @@
 
 // Mobile
 
-@media (max-width: $mobile-width) {
+@media (max-width: var(--mobile-width)) {
   .PersonCard {
     --person-card-width: 100%;
   }
diff --git a/src/style/components/accessibility-control.scss b/src/style/components/accessibility-control.scss
index d78e3e51..47e01a0d 100644
--- a/src/style/components/accessibility-control.scss
+++ b/src/style/components/accessibility-control.scss
@@ -1,12 +1,10 @@
-@import "../variables";
-
 .accessibility-control {
   width: 100%;
 
-  padding: $single-margin;
+  padding: var(--single-margin);
 
   span {
-    margin-right: $single-margin;
+    margin-right: var(--single-margin);
   }
 
   span.active {
@@ -14,12 +12,12 @@
   }
 
   &__block {
-    margin-bottom: $half-margin;
+    margin-bottom: var(--half-margin);
   }
 
   ul li {
     display: inline;
-    margin-right: $single-margin;
+    margin-right: var(--single-margin);
   }
 
   ul {
diff --git a/src/style/components/album-collection.scss b/src/style/components/album-collection.scss
index f28972fc..054078ef 100644
--- a/src/style/components/album-collection.scss
+++ b/src/style/components/album-collection.scss
@@ -1,5 +1,3 @@
-@import "../variables";
-
 .album-collection{
   &__body{
     display: flex;
@@ -8,11 +6,11 @@
     justify-content: flex-start;
     align-items:center;
 
-    margin: 0 0 $double-margin;
+    margin: 0 0 var(--double-margin);
   }
 
   &__title{
     text-align: center;
-    margin: $single-margin 0;
+    margin: var(--single-margin )0;
   }
 }
diff --git a/src/style/components/album.scss b/src/style/components/album.scss
index 6a1458c0..c3b9ba8b 100644
--- a/src/style/components/album.scss
+++ b/src/style/components/album.scss
@@ -1,13 +1,11 @@
-@import "../variables";
-
 .album {
-  margin-bottom: $double-margin;
+  margin-bottom: var(--double-margin);
 
   &__head {
     margin-bottom: 1.25em;
 
     h3 {
-      font-size: $biggest-font-size;
+      font-size: var(--biggest-font-size);
       text-align: center;
     }
 
@@ -17,7 +15,7 @@
     }
 
     a {
-      color: $dark-color;
+      color: var(--dark-color);
       border-bottom: none;
     }
   }
@@ -28,7 +26,7 @@
       max-height: 40em;
 
       display: block;
-      margin:  1.25em auto $small-margin;
+      margin: 1.25em auto var(--small-margin);
     }
 
     p{
@@ -37,7 +35,7 @@
   }
 }
 
-@media (max-width: $mobile-width) {
+@media (max-width: var(--mobile-width)) {
   .album {
     &__body {
       img {
diff --git a/src/style/components/breadcrumbs.scss b/src/style/components/breadcrumbs.scss
index 79ca74b9..79e2c412 100644
--- a/src/style/components/breadcrumbs.scss
+++ b/src/style/components/breadcrumbs.scss
@@ -1,17 +1,15 @@
-@import "../variables";
-
-$font-size: 0.75em;
-$item-active-color: $link-color;
-$item-inactive-color: $inactive-link-color;
-$separator: '⟶';
-$mobile-separator: '>';
-
 breadcrumbs{
+  --font-size: 0.75em;
+  --item-active-color: var(--link-color);
+  --item-inactive-color: var(--inactive-link-color);
+  --separator: '⟶';
+  --mobile-separator: '>';
+
   padding: .35em 0 0;
-  color: $item-inactive-color;
+  color: var(--item-inactive-color);
 
   a {
-    color: $item-active-color;
+    color: var(--item-active-color);
   }
 
   ul{
@@ -21,22 +19,22 @@ breadcrumbs{
       display: inline-block;
 
       &:not(:first-child):before{
-        content: $separator;
+        content: var(--separator);
         margin-left: .4em;
       }
     }
   }
 }
 
-@media screen and (max-width: $mobile-width) {
+@media screen and (max-width: var(--mobile-width)) {
   breadcrumbs{
     margin: 0;
-    font-size: $font-size;
+    font-size: var(--font-size);
 
     ul{
       li {
         &:not(:first-child):before{
-          content: $mobile-separator;
+          content: var(--mobile-separator);
           margin-left: .2em;
         }
       }
diff --git a/src/style/components/document-row.scss b/src/style/components/document-row.scss
index 88859db8..514479dc 100644
--- a/src/style/components/document-row.scss
+++ b/src/style/components/document-row.scss
@@ -1,5 +1,3 @@
-@import "../variables";
-
 .document-row {
   display: flex;
   flex-direction: row;
@@ -20,7 +18,7 @@
   img {
     max-width: 100%;
     max-height: 100%;
-    box-shadow: $white-shadow;
+    box-shadow: var(--white-shadow);
   }
 }
 
@@ -39,11 +37,11 @@
 .document-row__file-info {
   width: 25%;
   flex-grow: 1;
-  font-size: $smaller-font-size;
+  font-size: var(--smaller-font-size);
   text-align: right;
 }
 
-@media (max-width: $mobile-width) {
+@media (max-width: var(--mobile-width)) {
   .document-row__file {
     margin-left: var(--half-margin);
   }
diff --git a/src/style/components/document.scss b/src/style/components/document.scss
index b862e218..e7af27fd 100644
--- a/src/style/components/document.scss
+++ b/src/style/components/document.scss
@@ -1,11 +1,9 @@
-@import "../variables";
-
 .document {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0;
-  margin-bottom: $double-margin;
+  margin-bottom: var(--double-margin);
 }
 
 .document__image{
@@ -13,7 +11,7 @@
   //width: 20em;
   //height: 20em;
 
-  margin-bottom: $single-margin;
+  margin-bottom: var(--single-margin);
 
   //display: flex;
   //justify-content: center;
@@ -23,7 +21,7 @@
   img {
     max-width: 100%;
     max-height: 100%;
-    box-shadow: $white-shadow;
+    box-shadow: var(--white-shadow);
   }
 }
 
@@ -39,11 +37,11 @@
 }
 
 .document__file-info {
-  font-size: $smaller-font-size;
+  font-size: var(--smaller-font-size);
 }
 
-@media (max-width: $mobile-width) {
+@media (max-width: var(--mobile-width)) {
   .document {
-    margin: 0 $single-margin/2 $single-margin;
+    margin: 0 var(--single-margin) var(--single-margin);
   }
 }
diff --git a/src/style/components/documents-container.scss b/src/style/components/documents-container.scss
index a6004a12..67ca609d 100644
--- a/src/style/components/documents-container.scss
+++ b/src/style/components/documents-container.scss
@@ -1,10 +1,8 @@
-@import "../variables";
-
 .documents-container {
-  margin-bottom: $post-margin;
+  margin-bottom: var(--post-margin);
 
   &__head {
-    margin-bottom: $double-margin;
+    margin-bottom: var(--double-margin);
   }
 
   &__body {
@@ -14,7 +12,7 @@
   }
 }
 
-@media (max-width: $mobile-width) {
+@media (max-width: var(--mobile-width)) {
   .documents-container {
   }
 }
diff --git a/src/style/components/footer-links.scss b/src/style/components/footer-links.scss
index f3ccceb5..e038036b 100644
--- a/src/style/components/footer-links.scss
+++ b/src/style/components/footer-links.scss
@@ -1,12 +1,10 @@
-@import "../variables";
-
 .footer-links {
   &__header {
-    margin-bottom: $single-margin;
+    margin-bottom: var(--single-margin);
   }
 
   &__link {
-    margin-bottom: $half-margin;
+    margin-bottom: var(--half-margin);
   }
 
   ul {
diff --git a/src/style/components/gallery-item.scss b/src/style/components/gallery-item.scss
index 90f51113..4955cf4d 100644
--- a/src/style/components/gallery-item.scss
+++ b/src/style/components/gallery-item.scss
@@ -1,14 +1,8 @@
-@import "../variables";
-
-$img-max-width: 500px;
-$double-margin-half: $double-margin / 2;
-$percentage: 25%;
-
 .gallery-item {
   box-sizing: padding-box;
   padding: 0;
 
-  margin: 0 $single-margin $double-margin;
+  margin: 0 var(--single-margin) var(--double-margin);
 
   a.invisible {
     border-bottom: none;
@@ -16,8 +10,8 @@ $percentage: 25%;
   }
 }
 
-@media screen and (max-width: $mobile-width) {
+@media screen and (max-width: var(--mobile-width)) {
   .gallery-item {
-    margin: 0 0 $double-margin;
+    margin: 0 0 var(--double-margin);
   }
 }
diff --git a/src/style/components/main-menu.scss b/src/style/components/main-menu.scss
index a81e1c53..7e1d8385 100644
--- a/src/style/components/main-menu.scss
+++ b/src/style/components/main-menu.scss
@@ -1,7 +1,5 @@
-@import "../variables";
-
 .main-menu {
-  font-size: $normal-font-size;
+  font-size: var(--normal-font-size);
 
   list-style: none;
 
@@ -35,45 +33,45 @@
   }
 
   a {
-    color: $dark-color;
-    border-color: lighten($dark-color, 60%);
+    color: var(--dark-color);
+    border-color: var(--dark-color);
 
     &:hover {
-      border-color: lighten($dark-color, 30%);
+      border-color: var(--dark-color);
     }
   }
 
   .selected {
     font-weight: bold;
-    border-top: $menu-colored-mark-thickness solid $light-color;
+    border-top: var(--menu-colored-mark-thickness) solid var(--light-color);
 
     &.blue {
-      border-top: $menu-colored-mark-thickness solid $blue-color;
+      border-top: var(--menu-colored-mark-thickness) solid var(--blue-color);
     }
 
     &.orange {
-      border-top: $menu-colored-mark-thickness solid $orange-color;
+      border-top: var(--menu-colored-mark-thickness) solid var(--orange-color);
     }
 
     &.green {
-      border-top: $menu-colored-mark-thickness solid $green-color;
+      border-top: var(--menu-colored-mark-thickness) solid var(--green-color);
     }
 
     &.yellow {
-      border-top: $menu-colored-mark-thickness solid $yellow-color;
+      border-top: var(--menu-colored-mark-thickness) solid var(--yellow-color);
     }
 
     &.pink {
-      border-top: $menu-colored-mark-thickness solid $pink-color;
+      border-top: var(--menu-colored-mark-thickness) solid var(--pink-color);
     }
 
     &.red {
-      border-top: $menu-colored-mark-thickness solid $red-color;
+      border-top: var(--menu-colored-mark-thickness) solid var(--red-color);
     }
   }
 }
 
-@media (max-width: $mobile-width) {
+@media (max-width: var(--mobile-width)) {
   .main-menu{
     font-size: 1em;
   }
diff --git a/src/style/components/navigation.scss b/src/style/components/navigation.scss
index 3b68e1bf..d5d4bf6e 100644
--- a/src/style/components/navigation.scss
+++ b/src/style/components/navigation.scss
@@ -1,5 +1,3 @@
-@import "../variables";
-
 .navigation {
   width: 100%;
   background-color: white;
@@ -12,14 +10,14 @@
 }
 
 .navigation__right {
-  color: $dark-color;
-  font-size: $normal-font-size;
+  color: var(--dark-color);
+  font-size: var(--normal-font-size);
   margin-right: 1em;
 
   z-index: 1000;
 }
 
-@media (max-width: $mobile-width) {
+@media (max-width: var(--mobile-width)) {
   .navigation {
     background-color: white;
   }
@@ -29,7 +27,7 @@
   }
 }
 
-@media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) {
+@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
   @media screen and (orientation: portrait) {
     .navigation__right {
       display: none;
diff --git a/src/style/components/page-collective.scss b/src/style/components/page-collective.scss
index f7007e75..dc9228fe 100644
--- a/src/style/components/page-collective.scss
+++ b/src/style/components/page-collective.scss
@@ -1,12 +1,10 @@
-@import "../variables";
-
 .page-collective {
   &.ng-leave {
-    animation: slideOutLeft $short-duration both ease-in;
+    animation: slideOutLeft var(--short-duration) both ease-in;
   }
 
   &.ng-enter {
-    animation: slideInRight $short-duration both ease-in;
+    animation: slideInRight var(--short-duration) both ease-in;
   }
 }
 
@@ -16,7 +14,7 @@
   }
 }
 
-@media (max-width: $mobile-width) {
+@media (max-width: var(--mobile-width)) {
   .page-collective {
     &__collective-image {
       display: none;
diff --git a/src/style/components/page-schedule.scss b/src/style/components/page-schedule.scss
index edc51fbe..bbde4944 100644
--- a/src/style/components/page-schedule.scss
+++ b/src/style/components/page-schedule.scss
@@ -1,12 +1,10 @@
-@import "../variables";
-
 .page-schedule {
   &.ng-leave {
     transform-origin: 0% 0%;
-    animation: rotateFall $short-duration both ease-in;
+    animation: rotateFall var(--short-duration) both ease-in;
   }
 
   &.ng-enter {
-    animation: scaleUp $short-duration both ease-in;
+    animation: scaleUp var(--short-duration) both ease-in;
   }
 }
\ No newline at end of file
diff --git a/src/style/components/schedule-table.scss b/src/style/components/schedule-table.scss
index c153e41f..31daaaca 100644
--- a/src/style/components/schedule-table.scss
+++ b/src/style/components/schedule-table.scss
@@ -1,29 +1,26 @@
-@import "../variables";
-
-$current-week-day-color: $blue-color;
-
-$cell-width: 9em;
-$cell-tablet-width: 7.5em;
-
-$group-cell-width: 4em;
-$group-cell-tablet-width: 3em;
-
-$current-week-day-color: $blue-color;
-$row-padding: $single-margin 0;
-$current-day-column-border-thickness: 3px;
-
 .schedule-table {
-  margin-bottom: $double-margin;
+  --current-week-day-color: var(--blue-color);
+
+  --cell-width: 9em;
+  --cell-tablet-width: 7.5em;
+
+  --group-cell-width: 4em;
+  --group-cell-tablet-width: 3em;
+
+  --row-padding: var(--single-margin) 0;
+  --current-day-column-border-thickness: 3px;
+
+  margin-bottom: var(--double-margin);
 
   max-width: 70em;
   overflow-x: auto;
 
   a{
-    color: $dark-color;
+    color: var(--dark-color);
   }
 
   .lesson {
-    margin-bottom: $half-margin;
+    margin-bottom: var(--half-margin);
   }
 
   .teacher {
@@ -31,8 +28,8 @@ $current-day-column-border-thickness: 3px;
   }
 
   .current {
-    border-left: $current-day-column-border-thickness solid;
-    border-right: $current-day-column-border-thickness solid;
+    border-left: var(--current-day-column-border-thickness) solid;
+    border-right: var(--current-day-column-border-thickness) solid;
   }
 
   &__body {
@@ -46,8 +43,8 @@ $current-day-column-border-thickness: 3px;
   }
 
   &__body-group{
-    min-width: $group-cell-width;
-    padding: $row-padding;
+    min-width: var(--group-cell-width);
+    padding: var(--row-padding);
 
     text-align: center;
 
@@ -58,14 +55,14 @@ $current-day-column-border-thickness: 3px;
   }
 
   &__head-record {
-    min-width: $cell-width;
-    max-width: $cell-width;
-    padding: $row-padding;
+    min-width: var(--cell-width);
+    max-width: var(--cell-width);
+    padding: var(--row-padding);
 
     text-align: center;
 
     & > .group {
-      min-width: $group-cell-width;
+      min-width: var(--group-cell-width);
     }
 
     .date {
@@ -75,19 +72,19 @@ $current-day-column-border-thickness: 3px;
   }
 
   &__record{
-    min-width: $cell-width;
-    max-width: $cell-width;
-    padding: $row-padding;
+    min-width: var(--cell-width);
+    max-width: var(--cell-width);
+    padding: var(--row-padding);
 
     text-align: center;
   }
 
   &__course{
-    margin-bottom: $half-margin;
+    margin-bottom: var(--half-margin);
   }
 }
 
-@media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) {
+@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
   .schedule-table {
     min-width: 900px;
 
@@ -103,16 +100,16 @@ $current-day-column-border-thickness: 3px;
 
     &__head{
       & > div{
-        min-width: $cell-tablet-width;
+        min-width: var(--cell-tablet-width);
       }
 
       & > .group{
-        min-width: $group-cell-tablet-width;
+        min-width: var(--group-cell-tablet-width);
       }
     }
 
     &__body-group{
-      min-width: $group-cell-tablet-width;
+      min-width: var(--group-cell-tablet-width);
 
       p.name {
         font-size: 1em;
@@ -120,7 +117,7 @@ $current-day-column-border-thickness: 3px;
     }
 
     &__record{
-      min-width: $cell-tablet-width;
+      min-width: var(--cell-tablet-width);
     }
   }
 }
diff --git a/src/style/components/timeline-record.scss b/src/style/components/timeline-record.scss
index 6d64a020..55f9402a 100644
--- a/src/style/components/timeline-record.scss
+++ b/src/style/components/timeline-record.scss
@@ -1,9 +1,7 @@
-@import "../variables";
-
 .timeline__record {
-  margin: 0 0 $post-margin;
+  margin: 0 0 var(--post-margin);
 
   .date {
-    color: $light-color;
+    color: var(--light-color);
   }
 }
diff --git a/src/style/components/timeline.scss b/src/style/components/timeline.scss
index 9bf636c9..327e6fda 100644
--- a/src/style/components/timeline.scss
+++ b/src/style/components/timeline.scss
@@ -1,9 +1,7 @@
-@import "../variables";
-
 .timeline{
   display: flex;
   flex-direction: column;
-  margin: $double-margin auto;
+  margin: var(--double-margin) auto;
 }
 
 .timeline__footer{
@@ -18,12 +16,12 @@
 
     width: 100px;
     height: 40px;
-    border: 2px solid $dark-color;
+    border: 2px solid var(--dark-color);
     padding: 0 10px;
-    color: $dark-color;
-    background: $lighter-color;
+    color: var(--dark-color);
+    background: var(--lighter-color);
 
-    font-size: $normal-font-size;
+    font-size: var(--normal-font-size);
 
     &:hover {
       background: gainsboro;
diff --git a/src/style/content.scss b/src/style/content.scss
index 8dbd1298..eafb4ab8 100644
--- a/src/style/content.scss
+++ b/src/style/content.scss
@@ -1,26 +1,24 @@
-@import "variables";
-
 .content {
   margin: 0 auto 1em;
 
   &.content_full{
-    width: $content-full;
+    width: var(--content-full);
   }
 
   &.content_wide{
-    width: $content-wide;
+    width: var(--content-wide);
   }
 
   &.content_semi-wide{
-    width: $content-semi-wide;
+    width: var(--content-semi-wide);
   }
 
   &.content_thin{
-    width: $content-thin;
+    width: var(--content-thin);
   }
 
   &.content--padding-top--menu{
-    padding-top: $menu-thickness;
+    padding-top: var(--menu-thickness);
   }
 }
 
@@ -42,21 +40,20 @@
   animation: smallSlideInFromTop 350ms ease-out;
 }
 
-
-@media screen and (max-width: $mobile-width) {
-  $content-mobile: 95%;
+@media screen and (max-width: var(--mobile-width)) {
+  --content-mobile: 95%;
 
   .content {
      &.content_wide{
-      width: $content-mobile;
+       width: var(--content-mobile);
     }
 
     &.content_semi-wide{
-      width: $content-mobile;
+      width: var(--content-mobile);
     }
 
     &.content_thin{
-      width: $content-mobile;
+      width: var(--content-mobile);
     }
 
     &.content--padding-top--menu{
@@ -65,7 +62,7 @@
   }
 }
 
-@media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) {
+@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
   $thin-value: 70%;
   $wide-value: 95%;
   $semi-wide-value: 80%;
diff --git a/src/style/footer.scss b/src/style/footer.scss
index 31e964fa..a7567a24 100644
--- a/src/style/footer.scss
+++ b/src/style/footer.scss
@@ -1,7 +1,7 @@
 @import "variables";
 
 footer {
-  padding: 0 $half-margin $half-margin;
+  padding: 0 var(--half-margin) var(--half-margin);
   position: relative;
 
   .footer-info {
@@ -9,19 +9,19 @@ footer {
     flex-wrap: wrap;
     justify-content: space-between;
 
-    padding: $double-margin $single-margin 0;
-    margin-bottom: $double-margin;
+    padding: var(--double-margin) var(--single-margin) 0;
+    margin-bottom: var(--double-margin);
   }
 
   .contacts {
-    margin: $double-margin 0 $half-margin;
+    margin: var(--double-margin) 0 var(--half-margin);
 
     & > div {
-      padding: 0 $single-margin;
+      padding: 0 var(--single-margin);
     }
 
     p {
-      margin: $half-margin $single-margin;
+      margin: var(--half-margin) var(--single-margin);
     }
   }
 
diff --git a/src/style/hmenu.scss b/src/style/hmenu.scss
index 9d57ca94..789742c4 100644
--- a/src/style/hmenu.scss
+++ b/src/style/hmenu.scss
@@ -1,14 +1,12 @@
-@import "variables";
-
-$hmenu-margin: 6px;
-$hmenu-icon-width: 32px;
-$hmenu-icon-height: 32px;
-
 .no-scroll {
   overflow: hidden;
 }
 
 .HMenu {
+  --hmenu-margin: 6px;
+  --hmenu-icon-width: 32px;
+  --hmenu-icon-height: 32px;
+
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -39,7 +37,7 @@ $hmenu-icon-height: 32px;
 
 .HMenu--folded.HMenu--open {
   li {
-    margin: 0 0 $single-margin;
+    margin: 0 0 var(--single-margin);
   }
 }
 
@@ -63,9 +61,9 @@ $hmenu-icon-height: 32px;
 .HMenu__toggle {
   position: absolute;
   left: 0;
-  height: $hmenu-icon-height;
+  height: var(--hmenu-icon-height);
 
-  margin: $hmenu-margin;
+  margin: var(--hmenu-margin);
 
   display: flex;
 
@@ -73,8 +71,8 @@ $hmenu-icon-height: 32px;
     text-decoration: none;
     border: none;
 
-    width: $hmenu-icon-width;
-    height: $hmenu-icon-height;
+    width: var(--hmenu-icon-width);
+    height: var(--hmenu-icon-height);
     background-size: 100%;
   }
 
@@ -157,7 +155,7 @@ $hmenu-icon-height: 32px;
   margin-bottom: 2em;
 }
 
-@media (max-width: $mobile-width) {
+@media (max-width: var(--mobile-width)) {
   .HMenu--folded .HMenu__item {
     max-width: 10em;
   }
diff --git a/src/style/kazimir/image.scss b/src/style/kazimir/image.scss
index 672569d7..1c0a3ea8 100644
--- a/src/style/kazimir/image.scss
+++ b/src/style/kazimir/image.scss
@@ -1,5 +1,3 @@
-@import "../variables";
-
 .kazimir__image {
   --kazimir-caption-margin: 20px;
 
@@ -17,7 +15,7 @@
   }
 
   figure {
-    margin: 0 0 $single-margin;
+    margin: 0 0 var(--single-margin);
   }
 
   figcaption {
@@ -31,7 +29,7 @@
   }
 }
 
-@media screen and (max-width: $mobile-width) {
+@media screen and (max-width: var(--mobile-width)) {
   .kazimir__image {
     --kazimir-caption-margin: 10px;
   }
diff --git a/src/style/kazimir/video.scss b/src/style/kazimir/video.scss
index e336128e..b15f5710 100644
--- a/src/style/kazimir/video.scss
+++ b/src/style/kazimir/video.scss
@@ -1,12 +1,10 @@
-@import "../variables";
-
 .kazimir__video {
   width: 100%;
   height: 0;
   position: relative;
-  padding-bottom: $embed-video-ratio;
+  padding-bottom: var(--embed-video-ratio);
 
-  margin-bottom: $single-margin;
+  margin-bottom: var(--single-margin);
 
   iframe {
     width: 100%;
diff --git a/src/style/main-image.scss b/src/style/main-image.scss
index 6b7bf1c7..8825a6dd 100644
--- a/src/style/main-image.scss
+++ b/src/style/main-image.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 .main-image{
   display: none;
 
@@ -20,7 +18,7 @@
   //}
 }
 
-@media (max-width: $mobile-width) {
+@media (max-width: var(--mobile-width)) {
   .main-image {
     display: none;
   }
diff --git a/src/style/schedule-selector.scss b/src/style/schedule-selector.scss
index 777d4987..d8ffe12a 100644
--- a/src/style/schedule-selector.scss
+++ b/src/style/schedule-selector.scss
@@ -1,8 +1,6 @@
-@import "variables";
-
 .schedule-selector {
   text-align: center;
-  margin-bottom: $single-margin;
+  margin-bottom: var(--single-margin);
 
   label{
     margin: 0 .5em;
diff --git a/src/style/style.scss b/src/style/style.scss
index 4a9f1a14..497b9898 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -8,7 +8,7 @@
 @import "components/breadcrumbs";
 @import "components/timeline";
 @import "components/timeline-record";
-@import "components/timeline-record-instagram";
+//@import "components/timeline-record-instagram";
 @import "components/schedule-table";
 @import "components/footer-links";
 @import "components/Article";
@@ -46,14 +46,14 @@
 // THEMES
 
 @import "themes/theme-default";
-@import "themes/theme-accessibility-black-white";
-@import "themes/theme-accessibility-white-black";
-@import "themes/theme-accessibility-font-big";
-@import "themes/theme-accessibility-font-biggest";
-@import "themes/theme-accessibility-font-sans";
-@import "themes/theme-accessibility-font-serif";
-@import "themes/theme-accessibility-no-image";
-@import "themes/theme-accessibility-kerning-big";
+//@import "themes/theme-accessibility-black-white";
+//@import "themes/theme-accessibility-white-black";
+//@import "themes/theme-accessibility-font-big";
+//@import "themes/theme-accessibility-font-biggest";
+//@import "themes/theme-accessibility-font-sans";
+//@import "themes/theme-accessibility-font-serif";
+//@import "themes/theme-accessibility-no-image";
+//@import "themes/theme-accessibility-kerning-big";
 
 @import "marker/MarkerTable";
 
diff --git a/src/style/themes/theme-default.scss b/src/style/themes/theme-default.scss
index 3064aaa0..82b9f7a3 100644
--- a/src/style/themes/theme-default.scss
+++ b/src/style/themes/theme-default.scss
@@ -1,18 +1,16 @@
-@import "../variables";
-
 .theme-default {
   h1, h2{
-    font-family: $title-font;
+    font-family: var(--title-font);
   }
 
   a {
-    color: $dark-color;
+    color: var(--dark-color);
 
     text-decoration: none;
-    border-bottom: 1px solid lighten($dark-color, 60%);
+    border-bottom: 1px solid var(--link-color);
 
     &:hover {
-      border-bottom: 2px solid $dark-color;
+      border-bottom: 2px solid var(--dark-color);
     }
 
     &:active {
@@ -34,7 +32,7 @@
 
   .schedule-table {
     a{
-      color: $dark-color;
+      color: var(--dark-color);
     }
 
     .lesson {
@@ -42,7 +40,7 @@
     }
 
     .current {
-      border-color: $current-week-day-color;
+      border-color: var(--current-week-day-color);
     }
 
     &__head{
@@ -53,23 +51,23 @@
 
     &__body-row{
       &:nth-child(even) {
-        background-color: $schedule-row-color;
+        background-color: var(--schedule-row-color);
       }
     }
   }
 
   footer {
-    color: $light-color;
-    background-color: $darker-color;
+    color: var(--light-color);
+    background-color: var(--darker-color);
 
-    font-size: $smaller-font-size;
+    font-size: var(--smaller-font-size);
 
     a {
-      color: $light-color;
-      border-bottom-color: darken($light-color, 50%);
+      color: var(--light-color);
+      border-bottom-color: var(--light-color);
 
       &:hover {
-        border-bottom-color: $light-color;
+        border-bottom-color: var(--light-color);
       }
     }
   }
diff --git a/src/style/variables.scss b/src/style/variables.scss
index 72583650..7069466b 100644
--- a/src/style/variables.scss
+++ b/src/style/variables.scss
@@ -1,76 +1,39 @@
-//SIZE
-$mobile-width: 31.25em;
-$desktop-width: 59.99999em;
-
-$tablet-min-width: 31.25em;
-$tablet-max-width: 64em;
-
-$content-full: 100%;
-$content-wide: 90%;
-$content-semi-wide: 70%;
-$content-thin: 60%;
-
-$embed-video-ratio: 56.25%;
-
-//MARGINS
-$small-margin: .2em;
-$half-margin: .5em;
-$single-margin: 1.0em;
-$double-margin: 2.0em;
-$post-margin: 5.0em;
-
-//COLOR
-$dark-color: hsl(0, 0%, 20%);
-$darker-color: hsl(0, 0%, 10%);
-$light-color: hsl(0, 0%, 80%);
-$lighter-color: hsl(0, 0%, 100%);
-
-$blue-color: rgb(63, 156, 234);
-$orange-color: rgb(240, 160, 65);
-$green-color: rgb(92, 190, 64);
-$yellow-color: rgb(255, 238, 0);
-$pink-color: rgb(246, 85, 160);
-$magenta-color: rgb(214, 39, 246);
-$red-color: rgb(246, 27, 20);
-$gray-color: rgb(153, 154, 160);
-
-$link-color: $blue-color;
-$inactive-link-color: $light-color;
-
-$schedule-row-color: hsl(210, 55%, 90%);
-
-//SHADOW
-$white-shadow: 0 .1em 0.3em rgba(0, 0, 0, 0.2);
-
-//FONTS
-$title-font: "PT Serif", Georgia, serif;
-$text-font: "PT Sans", Arial, sans-serif;
-
-$smaller-font-size: 0.9rem;
-$normal-font-size: 1.0rem;
-$bigger-font-size: 1.2rem;
-$big-font-size: 1.5rem;
-$biggest-font-size: 2.25rem;
-
-//MENU
-$menu-thickness: 2.5em;
-$menu-colored-mark-thickness: 4px;
-$menu-inactive-item-color: hsl(0, 0%, 50%);
-
-//ANIMATION
-$short-duration: 0.3s;
-
-
-@media (max-width: $mobile-width) {
-  //FONTS
-  $smaller-font-size: 0.9rem;
-  $normal-font-size: 1.0rem;
-  $bigger-font-size: 1.1rem;
-  $big-font-size: 1.3rem;
-  $biggest-font-size: 2.0rem;
-}
-
 :root {
+  //SHADOW
+  --white-shadow: 0 .1em 0.3em rgba(0, 0, 0, 0.2);
+
+  //FONTS
+  --title-font: "PT Serif", Georgia, serif;
+  --text-font: "PT Sans", Arial, sans-serif;
+
+  --smaller-font-size: 0.9rem;
+  --normal-font-size: 1.0rem;
+  --bigger-font-size: 1.2rem;
+  --big-font-size: 1.5rem;
+  --biggest-font-size: 2.25rem;
+
+  //MENU
+  --menu-thickness: 2.5em;
+  --menu-colored-mark-thickness: 4px;
+  --menu-inactive-item-color: hsl(0, 0%, 50%);
+
+  //ANIMATION
+  $short-duration: 0.3s;
+
+  //SIZE
+  --mobile-width: 31.25em;
+  --desktop-width: 59.99999em;
+
+  --tablet-min-width: 31.25em;
+  --tablet-max-width: 64em;
+
+  --content-full: 100%;
+  --content-wide: 90%;
+  --content-semi-wide: 70%;
+  --content-thin: 60%;
+
+  --embed-video-ratio: 56.25%;
+
   --text-color: #303030;
   --text-color-second: #ccc;
 
@@ -83,24 +46,47 @@ $short-duration: 0.3s;
   --font-size-h3: 1.5rem;
 
   //COLOR
-  --dark-color: $dark-color;
-  --darker-color: $darker-color;
-  --light-color: $light-color;
-  --lighter-color: $lighter-color;
+  --dark-color: hsl(0, 0%, 20%);
+  --darker-color: hsl(0, 0%, 10%);
+  --light-color: hsl(0, 0%, 80%);
+  --lighter-color: hsl(0, 0%, 100%);
+  --link-color: lighten(hsl(0, 0%, 20%), 60%);
+
+  --blue-color: rgb(63, 156, 234);
+  --orange-color: rgb(240, 160, 65);
+  --green-color: rgb(92, 190, 64);
+  --yellow-color: rgb(255, 238, 0);
+  --pink-color: rgb(246, 85, 160);
+  --magenta-color: rgb(214, 39, 246);
+  --red-color: rgb(246, 27, 20);
+  --gray-color: rgb(153, 154, 160);
+
+  --inactive-link-color: var(--light-color);
+
+  --schedule-row-color: hsl(210, 55%, 90%);
+
+
 
   //MARGINS
-  --small-margin: $small-margin;
-  --half-margin: $half-margin;
-  --single-margin: $single-margin;
-  --double-margin: $double-margin;
-  --post-margin: $post-margin;
+  --small-margin: .2em;
+  --half-margin: .5em;
+  --single-margin: 1.0em;
+  --double-margin: 2.0em;
+  --post-margin: 5.0em;
 
   //OTHER
   --block-border-radius: 3px;
 }
 
-@media (max-width: $mobile-width) {
+@media (max-width: var(--mobile-width)) {
   :root {
+    //FONTS
+    --smaller-font-size: 0.9rem;
+    --normal-font-size: 1.0rem;
+    --bigger-font-size: 1.1rem;
+    --big-font-size: 1.3rem;
+    --biggest-font-size: 2.0rem;
+
     --font-size-h1: 1.75rem;
     --font-size-h2: 1.50rem;
     --font-size-h3: 1.25rem;