From c12eeaa1fc739ded09064d5f5cf5af6981f13636 Mon Sep 17 00:00:00 2001
From: Ivlev Denis <di-erz@yandex.ru>
Date: Thu, 12 Apr 2018 13:25:05 +0300
Subject: [PATCH] Merge styles from lilcity/templates

---
 web/build/img/sprite.svg                |  48 +-
 web/src/sass/_common.sass               | 783 ++++++++++++++++++++----
 web/src/sass/generated/_sprite-svg.scss |  35 ++
 3 files changed, 707 insertions(+), 159 deletions(-)

diff --git a/web/build/img/sprite.svg b/web/build/img/sprite.svg
index 01c98f63..270f167d 100644
--- a/web/build/img/sprite.svg
+++ b/web/build/img/sprite.svg
@@ -1,9 +1,7 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs>
-        <path id="a" d="M0 0h15v-2H0v2z"/>
-    
-        <path id="a" fill-rule="evenodd" d="M12.5 0C3.846 0 0 7 0 7s3.846 7 12.5 7S25 7 25 7s-3.846-7-12.5-7zm0 1C4.808 1 1.154 7 1.154 7s3.654 6 11.346 6 11.346-6 11.346-6S20.192 1 12.5 1zm0 10c2.124 0 3.846-1.79 3.846-4S14.624 3 12.5 3 8.654 4.79 8.654 7s1.722 4 3.846 4zm0-1c1.593 0 2.885-1.343 2.885-3S14.093 4 12.5 4c-1.593 0-2.885 1.343-2.885 3s1.292 3 2.885 3zm0-2c.531 0 .961-.448.961-1s-.43-1-.961-1c-.531 0-.961.448-.961 1s.43 1 .961 1z"/>
-    
-        <path id="a" fill-rule="evenodd" d="M4.912 13.12C1.555 11.173 0 8.5 0 8.5s3.846-6.611 12.5-6.611c1.254 0 2.408.139 3.463.376l-.817.803a14.781 14.781 0 0 0-2.646-.235C4.808 2.833 1.154 8.5 1.154 8.5s1.456 2.259 4.466 3.924l-.708.696zm4.125 1.615c1.055.237 2.209.376 3.463.376C21.154 15.111 25 8.5 25 8.5s-1.555-2.673-4.912-4.62l-.708.696C22.39 6.24 23.846 8.5 23.846 8.5s-3.654 5.667-11.346 5.667c-.942 0-1.824-.085-2.646-.235l-.817.803zM16.25 7.65c.064.273.097.557.097.849 0 2.086-1.722 3.778-3.846 3.778-.297 0-.586-.033-.864-.096l.864-.849c.738 0 1.476-.276 2.04-.83a2.799 2.799 0 0 0 .845-2.003l.864-.849zm-2.885-2.833a3.925 3.925 0 0 0-.864-.096c-2.124 0-3.846 1.692-3.846 3.778 0 .292.034.576.097.849l.864-.849c0-.725.282-1.45.845-2.003a2.902 2.902 0 0 1 2.04-.83l.864-.85zM20.192 0L3.846 16.056l.962.944L21.154.944 20.192 0z"/>
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><defs>
+        <style>
+            .cls-1{fill:#ff9393;fill-rule:evenodd}
+        </style>
     </defs><symbol id="icon-add-plus" viewBox="0 0 20 20">
     <path d="M10.5 9.5h8.571v1H10.5v8.571h-1V10.5H.929v-1H9.5V.929h1V9.5z"/>
 </symbol><symbol id="icon-arrow-down" viewBox="0 0 12 7">
@@ -20,17 +18,14 @@
     <path fill-rule="evenodd" d="M7 16h2V8H7v8zm4 0h2V8h-2v8zm-6 2h10V6H5v12zM7 4h6V2H7v2zm8 0V0H5v4H0v2h3v14h14V6h3V4h-5z"/>
 </symbol><symbol id="icon-edit" viewBox="0 0 20 20">
     <path fill-rule="evenodd" d="M0 20h19.635v-1.958H0V20zm6.872-6.853v-2.633l5.599-5.17 1.955 2.15-4.994 5.653h-2.56zm8.6-10.502l1.727 1.718-1.346 1.425-1.8-1.795 1.418-1.348zm4.528 2L15.364 0 4.91 9.688v5.417h5.364L20 4.645z"/>
+</symbol><symbol id="icon-everyday" viewBox="0 0 34 34">
+    <path fill-rule="evenodd" d="M17 0C7.611 0 0 7.611 0 17s7.611 17 17 17 17-7.611 17-17A16.994 16.994 0 0 0 17 0zm0 31.351c-7.923 0-14.346-6.423-14.347-14.346 0-7.923 6.421-14.347 14.344-14.348C24.92 2.656 31.345 9.077 31.347 17A14.339 14.339 0 0 1 17 31.347v.004zm7.326-11.5l-6-3.6V6.376a1.328 1.328 0 0 0-2.656 0V17c0 .467.245.9.645 1.139l6.642 3.986a1.33 1.33 0 1 0 1.369-2.279v.005z"/>
 </symbol><symbol id="icon-eye" viewBox="0 0 22 13">
     <path d="M11 12.721c-2.549 0-5.04-1.13-7.383-3.004A20.666 20.666 0 0 1 .82 7.003C.76 6.931.707 6.867.662 6.811L.62 6.759l-.252-.327.236-.306a17.852 17.852 0 0 1 .816-.94 20.666 20.666 0 0 1 2.197-2.039C5.959 1.274 8.45.143 11 .143c2.549 0 5.04 1.13 7.383 3.004a20.666 20.666 0 0 1 2.796 2.715c.105.124.177.214.217.264l.236.306-.236.306a17.852 17.852 0 0 1-.816.94 20.666 20.666 0 0 1-2.197 2.04C16.041 11.59 13.55 12.72 11 12.72zM1.648 6.432A19.675 19.675 0 0 0 4.24 8.936c2.182 1.745 4.475 2.785 6.759 2.785 2.284 0 4.577-1.04 6.759-2.785a19.675 19.675 0 0 0 2.593-2.504 19.675 19.675 0 0 0-2.593-2.504C15.577 2.184 13.284 1.143 11 1.143c-2.284 0-4.577 1.04-6.759 2.785a19.675 19.675 0 0 0-2.593 2.504zM11 10.792c-2.35 0-4.25-1.955-4.25-4.36 0-2.404 1.9-4.36 4.25-4.36s4.25 1.956 4.25 4.36c0 2.405-1.9 4.36-4.25 4.36zm0-1c1.792 0 3.25-1.501 3.25-3.36 0-1.858-1.458-3.36-3.25-3.36s-3.25 1.502-3.25 3.36c0 1.859 1.458 3.36 3.25 3.36z"/>
 </symbol><symbol id="icon-facebook" viewBox="0 0 10 20">
     <path fill-rule="evenodd" d="M6.821 20v-9h2.733L10 7H6.821V5.052C6.821 4.022 6.848 3 8.287 3h1.458V.14c0-.043-1.253-.14-2.52-.14C4.58 0 2.924 1.657 2.924 4.7V7H0v4h2.923v9h3.898z"/>
 </symbol><symbol id="icon-fb" viewBox="0 0 8 18">
     <path d="M2 7.5H0v-1h2v-.505A5.493 5.493 0 0 1 7.495.5v1A4.493 4.493 0 0 0 3 5.995V6.5h3v1H3v10H2v-10z"/>
-</symbol><symbol id="icon-hamburger" viewBox="0 0 15 12">
-    <use xlink:href="#a" transform="translate(0 12)"/>
-    <use xlink:href="#a" transform="translate(0 7)"/>
-    <use xlink:href="#a" transform="translate(0 2)"/>
-    
 </symbol><symbol id="icon-image-text" viewBox="0 0 31 15">
     <path fill-rule="evenodd" d="M14 13.295V1H1v8.294l4.505-4.501L14 13.295zm-.709.705L5.505 6.207 1 10.707V14h12.291zm13.229 0h-1.66V2.14h-4.22V.66h10.12v1.48h-4.24V14zM0 0h15v15H0V0zm10.5 6.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0-1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
 </symbol><symbol id="icon-image" viewBox="0 0 22 22">
@@ -57,30 +52,21 @@
     <path fill-rule="evenodd" d="M0 10h20V8H0v2zm0-8h20V0H0v2zm0 4h20V4H0v2z"/>
 </symbol><symbol id="icon-money" viewBox="0 0 23 15">
     <path fill-rule="evenodd" d="M21 11v2h-2v2H0V4h2V2h2V0h19v11h-2zM4 3H3v9h17v-1H4V3zM2 5H1v9h17v-1H2V5zm3-4v9h17V1H5zm6.3 3.927h.578V2.333h1.488c.276 0 .528.031.756.094.228.062.423.157.585.284.163.128.29.289.382.484.093.195.139.428.139.7a1.6 1.6 0 0 1-.147.707c-.097.2-.23.367-.398.5a1.697 1.697 0 0 1-.594.296 2.684 2.684 0 0 1-.74.098h-.82v.821h1.308v.537h-1.309V8h-.65V6.854h-.577v-.537h.577v-.821h-.577v-.57zm2.066 0c.374 0 .668-.086.882-.256.214-.171.321-.43.321-.777 0-.347-.107-.599-.321-.756-.214-.157-.508-.236-.882-.236h-.838v2.025h.838z"/>
-</symbol><symbol id="icon-password-eye" viewBox="0 0 25 14">
-    <title>
-        password-eye
-    </title>
-    <desc>
-        Created using Figma
-    </desc>
-    <use xlink:href="#a"/>
-    
-</symbol><symbol id="icon-password-hidden-eye" viewBox="0 0 25 17">
-    <title>
-        password-eye-hidden
-    </title>
-    <desc>
-        Created using Figma
-    </desc>
-    <use xlink:href="#a"/>
-    
+</symbol><symbol id="icon-next" viewBox="0 0 16 31">
+    <path d="M14.77 15.5L0 30.27l.73.73L16 15.73l-.23-.23.23-.23L.73 0 0 .731 14.77 15.5z"/>
+</symbol><symbol id="icon-online" viewBox="0 0 48 34">
+    <path fill-rule="evenodd" d="M33.9 33.988H13.1C2.14 33.988 0 29.2 0 20.928v-7.865c0-4.329 0-7.457 1.792-9.754C3.624.96 6.902.003 13.105.003H33.9c6.058 0 9.278.9 11.116 3.1 1.85 2.22 1.988 5.384 1.988 9.958v7.87c0 5.288-.871 8.386-2.913 10.36-1.991 1.915-4.942 2.697-10.191 2.697zM13.1 2.017c-5.515 0-8.339.736-9.744 2.538-1.365 1.749-1.365 4.584-1.365 8.508v7.868c0 7.638 1.605 11.045 11.109 11.045h20.8c4.683 0 7.236-.621 8.811-2.142 1.61-1.555 2.3-4.218 2.3-8.9v-7.865c0-4.129-.106-6.964-1.521-8.66-1.411-1.694-4.19-2.386-9.587-2.386H13.1v-.006zm6.673 22.22c-.448 0-.887-.124-1.27-.357a2.494 2.494 0 0 1-1.18-2.117v-9.932a2.49 2.49 0 0 1 1.18-2.114 2.445 2.445 0 0 1 2.4-.081l9.442 4.949a2.484 2.484 0 0 1 .007 4.386l-9.443 4.981c-.35.186-.738.284-1.134.285h-.002zm0-12.861a.446.446 0 0 0-.234.066.462.462 0 0 0-.22.392v9.929c0 .16.083.309.219.393.136.08.303.086.444.014l9.445-4.981a.462.462 0 0 0 0-.813l-9.443-4.949a.448.448 0 0 0-.209-.051h-.002z"/>
 </symbol><symbol id="icon-photo" viewBox="0 0 40 30">
     <path d="M2 2v26.002C2 28 14 28 38 28V1.998C38 2 26 2 2 2zm36-.008v.006-.006zm-38 0C0 .892.892 0 1.997 0h36.006C39.106 0 40 .898 40 1.992v26.016c0 1.1-.892 1.992-1.997 1.992H1.997A1.998 1.998 0 0 1 0 28.008V1.992zM20 23a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-2a6 6 0 1 1 0-12 6 6 0 0 1 0 12z"/>
 </symbol><symbol id="icon-play" viewBox="0 0 39 49">
     <path fill-rule="evenodd" d="M38.291 24.11L.258 48.126V.094z"/>
 </symbol><symbol id="icon-plus" viewBox="0 0 12 12">
     <path d="M7 5h5v2H7v5H5V7H0V5h5V0h2v5z"/>
+</symbol><symbol id="icon-prev" viewBox="0 0 16 31">
+    <path d="M1.23 15.5L16 30.27l-.73.73L0 15.73l.23-.23-.23-.23L15.27 0l.73.731L1.23 15.5z"/>
+</symbol><symbol id="icon-print" viewBox="0 0 17.062 15.94">
+    
+    <path id="Forma_1" data-name="Forma 1" class="cls-1" d="M659.316 3339.83h-3.907v-2.95a.713.713 0 0 0-.2-.49l-2.094-2.15a.708.708 0 0 0-.511-.22h-4.478a.711.711 0 0 0-.71.71v5.1h-3.729a.711.711 0 0 0-.71.71v6.68a.7.7 0 0 0 .71.7h1.6v1.35a.71.71 0 0 0 .71.71H657.3a.711.711 0 0 0 .71-.71v-1.35h1.3a.7.7 0 0 0 .71-.7v-6.68a.705.705 0 0 0-.704-.71zm-10.479-4.4h3.463l1.684 1.74v2.66h-5.149v-4.4zm7.755 13.14h-9.884v-2.44h9.884v2.44zm2.014-2.06h-.591v-1.09a.711.711 0 0 0-.71-.71H646a.711.711 0 0 0-.71.71v1.09h-.89v-5.26h14.2v5.26zm-2.1-4.45a.74.74 0 1 1-.745.74.741.741 0 0 1 .744-.74z" transform="translate(-642.969 -3334.03)"/>
 </symbol><symbol id="icon-search" viewBox="0 0 17 17">
     <path fill-rule="evenodd" d="M11.742 10.302l5.216 5.09-1.397 1.431-5.28-5.152a6.61 6.61 0 0 1-3.738 1.147C2.935 12.818 0 9.954 0 6.41S2.935 0 6.543 0c3.609 0 6.544 2.864 6.544 6.41a6.295 6.295 0 0 1-1.345 3.892zm-5.199.516c2.515 0 4.544-1.98 4.544-4.409C11.087 3.98 9.058 2 6.543 2 4.03 2 2 3.98 2 6.41c0 2.429 2.029 4.408 4.543 4.408z"/>
 </symbol><symbol id="icon-searching" viewBox="0 0 38 39">
@@ -97,6 +83,8 @@
     <path fill-rule="evenodd" d="M27.953 15.985c.008.173.012.347.012.521C27.965 21.845 23.837 28 16.29 28c-2.317 0-4.474-.668-6.29-1.815.322.04.649.055.979.055a8.303 8.303 0 0 0 5.095-1.727 4.095 4.095 0 0 1-3.832-2.805c.25.048.507.071.772.071.375 0 .737-.048 1.08-.141-1.875-.37-3.29-2.005-3.29-3.961v-.05a4.105 4.105 0 0 0 1.858.504 4.017 4.017 0 0 1-1.825-3.362c0-.741.203-1.433.556-2.03a11.704 11.704 0 0 0 8.457 4.219 3.984 3.984 0 0 1-.106-.92c0-2.23 1.837-4.038 4.104-4.038 1.178 0 2.246.49 2.995 1.274a8.31 8.31 0 0 0 2.606-.979 4.062 4.062 0 0 1-1.805 2.234A8.202 8.202 0 0 0 30 13.894a8.24 8.24 0 0 1-2.047 2.09zM20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"/>
 </symbol><symbol id="icon-showcase" viewBox="0 0 18 18">
     <path fill-rule="evenodd" d="M3.6 8.1h10.8V6.3H3.6v1.8zm12.6 2.7H1.8V3.6h14.4v7.2zm0-9H9.9V0H8.1v1.8H0v10.8h6.114L3.597 18h1.98L8.1 12.6V18h1.8v-5.4l2.523 5.4h1.98l-2.517-5.4H18V1.8h-1.8z"/>
+</symbol><symbol id="icon-subjects" viewBox="0 0 43 39">
+    <path fill-rule="evenodd" d="M43.005 19.987c.002-.9-.51-1.723-1.318-2.12l-3.2-1.591 3.2-1.592a2.364 2.364 0 0 0 0-4.24L23.608 1.461a4.768 4.768 0 0 0-4.216 0L1.313 10.444a2.364 2.364 0 0 0 0 4.24l3.2 1.592-3.2 1.591a2.364 2.364 0 0 0 0 4.24l3.2 1.591-3.2 1.591a2.364 2.364 0 0 0 0 4.24l18.079 8.984a4.766 4.766 0 0 0 4.216 0l18.079-8.983a2.364 2.364 0 0 0 0-4.24l-3.2-1.591 3.2-1.591a2.358 2.358 0 0 0 1.318-2.121zm-40.807-7.06a.4.4 0 0 1 0-.725l18.078-8.983a2.771 2.771 0 0 1 2.448 0L40.8 12.2a.4.4 0 0 1 0 .725l-18.078 8.982a2.764 2.764 0 0 1-2.448 0l-18.076-8.98zm38.605 14.12a.4.4 0 0 1 0 .725l-18.078 8.983c-.772.38-1.676.38-2.448 0L2.2 27.772a.4.4 0 0 1 0-.725l4.529-2.251 12.665 6.294a4.771 4.771 0 0 0 4.216 0l12.665-6.294 4.528 2.251zm0-6.7L22.725 29.33c-.772.38-1.676.38-2.448 0L2.2 20.35a.4.4 0 0 1 0-.726l4.529-2.25 12.665 6.293a4.762 4.762 0 0 0 4.216 0l12.665-6.293 4.529 2.25a.4.4 0 0 1-.004.725l.003-.002z"/>
 </symbol><symbol id="icon-text" viewBox="0 0 14 17">
     <path fill-rule="evenodd" d="M7.775 17h-1.45V1.625H.875v-1.3h12.35v1.3h-5.45z"/>
 </symbol><symbol id="icon-thumb" viewBox="0 0 43 45">
@@ -111,6 +99,8 @@
     <path d="M17 11L1 1v20l16-10zm.53.848l-16 10A1 1 0 0 1 0 21V1A1 1 0 0 1 1.53.152l16 10a1 1 0 0 1 0 1.696z"/>
 </symbol><symbol id="icon-video" viewBox="0 0 20 14">
     <path fill-rule="evenodd" d="M18 8.674l-2.226-1.391L18 5.891v2.783zM11 12H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm3-5.889V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.454l4.462 2.847A1 1 0 0 0 20 10.458V4.107a1 1 0 0 0-1.538-.843L14 6.111z"/>
+</symbol><symbol id="icon-view" viewBox="0 0 42 36">
+    <path fill-rule="evenodd" d="M39.668 30.622h-8.7a4 4 0 0 0-7.563 0H1.332a1.347 1.347 0 0 0 0 2.694h22.073a4 4 0 0 0 7.563 0h8.7a1.347 1.347 0 0 0 0-2.694zm-12.482 2.694a1.347 1.347 0 1 1-.018-2.694 1.347 1.347 0 0 1 .018 2.694zm-.6-21.325l-8.024-5.387a1.338 1.338 0 0 0-2.079 1.121V18.5a1.339 1.339 0 0 0 2.079 1.121l8.024-5.388a1.354 1.354 0 0 0 .005-2.242h-.005zm-7.428 3.993v-5.743l4.275 2.871-4.275 2.872zM36.988.99H4.007A4.031 4.031 0 0 0 0 5.031v16.163a4.031 4.031 0 0 0 4.012 4.041h32.986a4.031 4.031 0 0 0 4.012-4.041V5.031A4.031 4.031 0 0 0 36.993.99h-.005zm1.337 20.2a1.344 1.344 0 0 1-1.337 1.347H4.007A1.344 1.344 0 0 1 2.67 21.19V5.031a1.343 1.343 0 0 1 1.337-1.347h32.986c.74.003 1.34.606 1.337 1.347v16.163l-.005-.004z"/>
 </symbol><symbol id="icon-wallet" viewBox="0 0 45 39">
     <path fill-rule="evenodd" d="M15.174 9.525h-9.06a3.306 3.306 0 0 0-3.307 3.306v20.633a3.307 3.307 0 0 0 3.307 3.307h30.322a3.307 3.307 0 0 0 3.306-3.307v-5.21h-9.734a1 1 0 0 1-1-1v-8.19a1 1 0 0 1 1-1h9.734v-4.589h-.445v.001l-1.556-.001H7.016a1 1 0 0 1 0-2h4.143l4.015-1.95zm22.413.206l.797 1.744h1.068a3.317 3.317 0 0 0-1.865-1.744zM36.58 7.527a5.306 5.306 0 0 1 5.162 5.304v5.233h1.315a1 1 0 0 1 1 1v8.19a1 1 0 0 1-1 1h-1.315v5.21a5.307 5.307 0 0 1-5.306 5.307H6.114a5.307 5.307 0 0 1-5.307-5.307V12.831a5.306 5.306 0 0 1 5.307-5.306h13.177L33.441.653l3.14 6.874zm-5.572 18.727h11.049v-6.19H31.008v6.19zm1.464-22.907l-16.696 8.109 20.408.018-3.712-8.127z"/>
 </symbol><symbol id="icon-youtube" viewBox="0 0 18 15">
diff --git a/web/src/sass/_common.sass b/web/src/sass/_common.sass
index f924962a..9ce1eb14 100755
--- a/web/src/sass/_common.sass
+++ b/web/src/sass/_common.sass
@@ -1,14 +1,14 @@
 =d
-  @media only screen and (max-width: 1120px)
+  @media only screen and (max-width: "1120px")
     @content
 =t
-  @media only screen and (max-width: 1023px)
+  @media only screen and (max-width: "1023px")
     @content
 =m
-  @media only screen and (max-width: 599px)
+  @media only screen and (max-width: "599px")
     @content
 =s
-  @media only screen and (max-width: 474px)
+  @media only screen and (max-width: "474px")
     @content
 
 +font(ProximaNova-Regular, ProximaNova-Regular)
@@ -24,7 +24,7 @@
 =fl
   font-family: 'ProximaNova-Light', serif
 
-$pink: #FF9393linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%)
+$pink: #FF9393
 $pink-light: #FDF8F9
 $purple: #B995D9
 $green: #8ECFC0
@@ -32,7 +32,7 @@ $green-light: #5BD700
 $gray: #A7A7A7
 $blue: #4A90E2
 $viol: #B995D9
-$bg: #F8F8F8
+$bg: #f8f8f8
 $border: #E6E6E6
 $cl: #191919
 
@@ -75,6 +75,9 @@ b
     color: white
   // box-shadow: 0 0 0 1px red
 
+.bold
+  +fb
+
 button
   &:disabled
     cursor: not-allowed
@@ -117,6 +120,9 @@ button
   z-index: 2
   +t
     line-height: 1.33
+  +m
+    padding: 13px 20px 12px
+    letter-spacing: 1px
   &:hover
     box-shadow: 0 5px 20px 0 rgba(0,0,0,0.11)
   &:disabled
@@ -164,8 +170,24 @@ button
       border-radius: 2px
       transition: opacity .2s
       z-index: -2
+  &_fb
+    background: #3957A7
+    color: white
+    &:active
+      color: rgba(white,.2)
+      .icon
+        fill: rgba(white,.2)
+    .icon
+      margin: -9px 15px -6px -25px
+      font-size: 20px
+      fill: white
   &_gray
     background: $bg
+  &_white
+    background: white
+  &_pink
+    background: #ff9393
+    color: white
   &_md
     padding: 18px 24px 17px
     +m
@@ -420,6 +442,21 @@ a.btn
       +m
         &:after
           opacity: 0
+  &__dot
+    position: absolute
+    top: 50%
+    right: 3px
+    width: 7px
+    height: 7px
+    margin-top: -5px
+    background: #EE4630
+    border-radius: 50%
+    +t
+      width: 6px
+      height: 6px
+      margin-top: -4px
+    +m
+      display: none
   &__list,
   &__drop
     position: absolute
@@ -606,6 +643,8 @@ a.btn
       line-height: 1.33
     +m
       margin-bottom: 50px
+  &__bold
+    +fb
   &__content
     margin-bottom: 30px
   &__time
@@ -614,6 +653,57 @@ a.btn
     font-size: 20px
     text-transform: uppercase
     letter-spacing: 3px
+  &__btn
+    margin: 0 10px
+    +m
+      margin: 0 0 10px
+  &__foot
+    margin-top: 30px
+  &__foot,
+  &__list
+    display: flex
+    justify-content: center
+    align-items: center
+  &__go
+    font-size: 0
+    .icon
+      font-size: 32px
+      fill: black
+      +m
+        font-size: 24px
+  &__nav
+    padding: 0 15px
+    +m
+      padding: 0 10px
+  &__link
+    margin: 0 15px
+    font-size: 12px
+    color: #888
+    text-transform: uppercase
+    +m
+      margin: 0 10px
+    &.active
+      +fb
+      color: black
+  &__socials
+    position: absolute
+    top: 50%
+    right: 15px
+    transform: translateY(-50%)
+    +t
+      right: 5px
+    +m
+      display: none
+  &__social
+    display: block
+    padding: 10px
+    font-size: 0
+    +nl
+      margin-bottom: 10px
+    .icon
+      font-size: 16px
+      &-facebook
+        font-size: 18px
   &_green
     &:before
       background-image: linear-gradient(-225deg, #E2E2E2 0%, #E2FFDF 100%)
@@ -626,6 +716,22 @@ a.btn
       min-height: 0
   &_sm &__title
     margin-bottom: 0
+  &_default
+    padding-top: 165px
+    padding-bottom: 30px
+  &_default &__center
+    margin-bottom: 0
+  &_default &__title
+    margin-bottom: 55px
+    +f
+    font-size: 40px
+    +t
+      max-width: 480px
+      margin-bottom: 40px
+      font-size: 24px
+    +m
+      margin-bottom: 30px
+      font-size: 20px
 
 a[name]
   .title
@@ -639,7 +745,8 @@ a[name]
   line-height: (35/32)
   z-index: 4
   +t
-    margin-bottom: 20px
+    max-width: 420px
+    margin: 0 auto 20px
     font-size: 24px
     line-height: 1.33
   &_center
@@ -733,6 +840,30 @@ a[name]
       margin-bottom: 0
     +m
       margin-bottom: 0
+  &_only_curve
+    margin: 0 auto 10px
+  &_only_curve &__curve_one
+    left: -75px
+    bottom: -25px
+    +t
+      left: -180px
+      bottom: -40px
+    +m
+      top: auto
+      left: -55px
+      bottom: -15px
+  &_arts
+    max-width: 500px
+    margin-bottom: 65px
+    +f
+    font-size: 20px
+  &_arts &__curve_two
+    bottom: 35px
+  &_courses
+    max-width: 670px
+    margin-bottom: 75px
+    +f
+    font-size: 20px
 
 .section
   padding: 60px 0
@@ -761,7 +892,7 @@ a[name]
       +t
         max-width: calc(100% - 30px)
   &_gradient
-    background-image: linear-gradient(-225deg, #F8F8F8 0%, #FFF2F2 100%)
+    background-image: linear-gradient(-225deg, $bg 0%, #FFF2F2 100%)
   &_tabs
     padding-top: 20px
     +m
@@ -770,6 +901,30 @@ a[name]
     padding: 20px 0
   &_confirm
     padding: 30px 0 50px
+  &_school
+    padding: 85px 0 95px
+    +t
+      padding: 65px 0 55px
+    +m
+      padding: 45px 0
+  &_benefits
+    padding: 95px 0 100px
+    background: $bg
+    +t
+      padding: 65px 0 55px
+    +m
+      padding: 45px 0
+  &_arts
+    padding: 95px 0 70px
+    +t
+      padding: 80px 0 70px
+    +m
+      padding: 45px 0
+  &_courses
+    padding: 95px 0 85px
+    background: $bg
+    +t
+      padding: 80px 0 40px
 
 .ava
   display: block
@@ -862,7 +1017,10 @@ a[name]
     margin: -5px 0 -5px auto
     +f
     font-size: 15px
-
+    .icon
+      fill: $gray
+      &-fill
+        fill: $pink
   &_white &__date
     color: white
 
@@ -904,7 +1062,7 @@ a[name]
 
 .about
   display: flex
-  padding-right: 160px
+  padding-right: 60px
   +t
     padding: 0
   &__ava
@@ -921,8 +1079,12 @@ a[name]
       flex: 0 0 60px
   &__content
     margin-bottom: 20px
+    font-size: 18px
+    p
+      margin-bottom: 18px
   &__ceo
     margin-bottom: 20px
+    font-size: 16px
     a
       +fb
   &__video
@@ -961,7 +1123,7 @@ a[name]
     z-index: -2
   &__type
     margin-bottom: 85px
-    +fb
+    // +fb
     font-size: 20px
     letter-spacing: 4px
     +t
@@ -972,7 +1134,7 @@ a[name]
       margin-bottom: 40px
   &__title
     margin-bottom: 2px
-    +fb
+    // +fb
     font-size: 50px
     line-height: (6/5)
     +t
@@ -1052,6 +1214,33 @@ a[name]
       font-size: 12px
     +m
       font-size: 14px
+  &_colors
+    max-width: 100%
+    margin: 0
+    +t
+      margin-bottom: -40px
+    +m
+      display: flex
+      margin-bottom: -30px
+  &_colors &__item
+    +t
+      flex: 0 0 50%
+    +m
+      margin-bottom: 30px
+  &_colors &__preview
+    margin-bottom: 25px
+    +m
+      margin-bottom: 10px
+      height: 45px
+    .icon
+      fill: #ff3837
+  &_colors &__title
+    min-height: 0
+    margin-bottom: 10px
+    letter-spacing: .5px
+  &_colors &__content
+    +m
+      line-height: 1.2
 
 .reviews
   padding-right: 80px
@@ -1390,7 +1579,9 @@ a.grey-link
     display: block
     position: relative
     margin-bottom: 15px
+    border-radius: 2px
     color: $cl
+    overflow: hidden
     +t
       margin-bottom: 10px
   &__preview:hover &__view
@@ -1415,20 +1606,21 @@ a.grey-link
   &__pic
     display: block
     width: 100%
-    border-radius: 2px
+    // border-radius: 2px
   &__view
     display: flex
     position: absolute
-    top: 0
-    left: 0
-    width: 100%
-    height: 100%
+    top: -1%
+    left: -1%
+    width: 102%
+    height: 102%
     background-image: linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%)
-    border-radius: 2px
+    // border-radius: 2px
     opacity: 0
     font-size: 18px
     align-items: center
     justify-content: center
+    transform: translate3d(0,0,0)
     transition: opacity .2s
     z-index: 4
   &__soon
@@ -1444,6 +1636,7 @@ a.grey-link
     flex-direction: column
     justify-content: center
     text-align: center
+    transform: translate3d(0,0,0)
   &__left
     margin-bottom: 5px
     font-size: 15px
@@ -1926,6 +2119,7 @@ a.grey-link
   &__input
     height: 36px
     &[type='password']
+      font-size: 30px
       &::placeholder
         font-size: 18px
     &_bg
@@ -1933,12 +2127,11 @@ a.grey-link
       padding: 0 20px
   &__textarea
     display: block
-    height: auto
+    height: 36px
     padding: 7px 0
     resize: vertical
     &_lg
-      min-height: 44px
-      height: auto
+      height: 80px
       font-size: 25px
   &__preview
     position: absolute
@@ -1960,7 +2153,7 @@ a.grey-link
     height: 40px
     font-size: 15px
   &_info &__label
-    color: rgba(255, 255, 255, 0.8)
+    color: $gray
   &_info &__input,
   &_info &__textarea
     border-color: rgba($border,.2)
@@ -1982,6 +2175,7 @@ a.grey-link
         border: none
         background: none
         margin-top: 11px
+
 .field__wrap
   &--title
     margin-right: 60px
@@ -2125,6 +2319,7 @@ a.grey-link
     flex: 0 0 calc(100% - 220px)
     z-index: 4
     +t
+      max-width: 100%
       margin: 0 0 15px
       padding: 0
       flex: 0 0 100%
@@ -2134,6 +2329,19 @@ a.grey-link
     left: calc(50% - 60px)
     transform: translateY(-50%)
     z-index: -2
+  &__field
+    margin: 0
+  &__text
+    padding-right: 30px
+    font-size: 18px
+    align-self: center
+    flex: 0 0 calc(100% - 220px)
+    +t
+      max-width: 260px
+      font-size: 14px
+      line-height: 1.2
+    +m
+      display: none
 
 .layout
   display: flex
@@ -2538,7 +2746,7 @@ a.grey-link
   &__textarea
     display: block
     width: 100%
-    height: 70px
+    height: 44px
     padding: 11px 15px
     border-radius: 2px
     font-size: 16px
@@ -2722,7 +2930,17 @@ a.grey-link
   text-align: center
   +m
     padding: 0
+    text-align: center
+  &__head
+    display: flex
+    margin-bottom: 30px
+    align-items: flex-start
+    +m
+      display: none
+  &__title
+    margin: 0 20px 0 0
   &__btn
+    margin-left: auto
     padding: 10px 15px
     background: transparent
     border: 1px solid $gray
@@ -2743,12 +2961,16 @@ a.grey-link
   &__ava
     width: 120px
     height: 120px
-    margin: 0 auto 20px
+    margin-right: 25px
+    flex: 0 0 120px
     +m
       width: 140px
       height: 140px
+      margin: 0 auto 20px
+  &__wrap
+    flex: 0 0 calc(100% - 145px)
   &__name
-    margin-bottom: 15px
+    margin-bottom: 25px
     font-size: 20px
     letter-spacing: 3px
     text-transform: uppercase
@@ -3059,6 +3281,8 @@ a.grey-link
   &__fieldset
     &:first-child
       margin-bottom: 50px
+    &:last-child
+      margin-top: auto
 
 .add
   display: flex
@@ -3311,6 +3535,404 @@ a.grey-link
   +m
     display: none
 
+.school
+  display: flex
+  position: relative
+  margin: 0 -15px
+  flex-wrap: wrap
+  z-index: 2
+  +t
+    margin-bottom: -40px
+  +m
+    margin: 0 -10px -30px
+  &__col
+    padding: 0 15px
+    text-align: center
+    flex: 0 0 25%
+    +t
+      margin-bottom: 40px
+      flex: 0 0 50%
+    +m
+      margin-bottom: 30px
+      padding: 0 10px
+  &__preview
+    margin-bottom: 25px
+    font-size: 0
+    +m
+      margin-bottom: 15px
+    .icon
+      font-size: 34px
+      fill: #93d2c2
+  &__title
+    margin-bottom: 5px
+    font-size: 24px
+    +t
+      font-size: 18px
+  &__text
+    max-width: 200px
+    margin: 0 auto
+    font-size: 11px
+    line-height: 1.3
+    text-transform: uppercase
+    +t
+      font-size: 10px
+  &_main
+    margin: 55px 0 35px
+    +m
+      margin-top: 35px
+  &_main &__col
+    +t
+      flex: 0 0 25%
+    +m
+      flex: 0 0 50%
+  &_main &__preview
+    margin-bottom: 15px
+    .icon
+      fill: white
+  &_main &__title
+    +t
+      font-size: 16px
+
+.arts
+  display: flex
+  margin: 0 -12px
+  justify-content: center
+  flex-wrap: wrap
+  +m
+    margin-bottom: -24px
+  &__col
+    padding: 0 12px
+    flex: 0 0 20%
+    +t
+      flex: 0 0 33.33%
+    +m
+      margin-bottom: 24px
+      flex: 0 0 50%
+  &__item
+    position: relative
+    border-radius: 50%
+    background-position: 50% 50%
+    background-size: cover
+    &:before
+      content: ''
+      display: block
+      padding-bottom: 100%
+  &__title
+    position: absolute
+    top: 50%
+    left: 50%
+    width: 100%
+    padding: 0 20px
+    +fs
+    font-size: 14px
+    text-align: center
+    text-transform: uppercase
+    transform: translate(-50%,-50%)
+
+.letsgo
+  margin-top: 80px
+  text-align: center
+  +t
+    margin-top: 45px
+
+.timing
+  +t
+    padding-left: 10px
+  &__week
+    margin-bottom: 35px
+  &__item
+    display: flex
+    position: relative
+    padding: 20px 0
+    +nf
+      border-top: 1px solid $border
+    &_bg
+      margin-top: 10px
+      background: $bg
+      box-shadow: -40px 0 0 0 $bg, 40px 0 0 0 $bg
+      +nf
+        border-color: transparent
+  &__item.open
+    padding-bottom: 40px
+  &__item.open &__toggle
+    .icon
+      transform: rotate(180deg)
+  &__item.open &__buy,
+  &__item.open &__more
+    display: block
+  &__item.open &__buy
+    +m
+      display: flex
+  &__item.open &__cell
+    &:nth-child(3)
+      +m
+        padding-bottom: 70px
+  &__item.disable &__preview,
+  &__item.disable &__title,
+  &__item.disable &__content
+    opacity: .4
+  &__item.disable &__cell
+    &:nth-child(1)
+      justify-content: center
+    &:nth-child(3)
+      +m
+        padding: 0 0 50px
+  &__cell
+    &:nth-child(1)
+      display: flex
+      padding-right: 20px
+      flex-direction: column
+      align-items: flex-start
+      flex: 0 0 140px
+      +m
+        padding: 0
+        flex: 0 0 0
+    &:nth-child(2)
+      padding-right: 20px
+      flex: 0 0 90px
+    &:nth-child(3)
+      flex: 0 0 calc(100% - 254px)
+      +m
+        padding-top: 20px
+        flex: 0 0 calc(100% - 114px)
+    &:nth-child(4)
+      flex: 0 0 34px
+  &__unlock
+    +m
+      position: absolute
+      left: 90px
+      bottom: 20px
+  &__info
+    margin-bottom: auto
+    +m
+      display: flex
+      position: absolute
+      top: 20px
+      left: 90px
+      right: 0
+      padding: 0
+      flex-direction: row
+  &__day
+    position: relative
+    margin: 10px 0 5px
+    +fb
+    font-size: 12px
+    text-transform: uppercase
+    +m
+      margin: 0
+    &.active
+      &:before
+        content: ''
+        position: absolute
+        top: 3px
+        left: -13px
+        width: 8px
+        height: 8px
+        background: #EE4630
+        border-radius: 50%
+  &__date
+    opacity: .5
+    +m
+      margin: -3px 0 0 auto
+  &__buy
+    +m
+      position: absolute
+      left: 0
+      bottom: 40px
+      align-items: center
+  &__time
+    margin: 15px 0
+    opacity: .5
+    +m
+      width: 90px
+      margin: 0
+  &__btn
+    margin-right: -60px
+    padding-left: 20px
+    padding-right: 20px
+    white-space: nowrap
+    letter-spacing: 1px
+  &__pic
+    display: block
+    width: 100%
+    border-radius: 50%
+  &__title
+    margin-bottom: 5px
+    font-size: 24px
+    line-height: 1.3
+    +t
+      font-size: 18px
+  &__content
+    padding-bottom: 5px
+  &__toggle
+    width: 34px
+    height: 34px
+    margin-top: 30px
+    font-size: 0
+    .icon
+      font-size: 8px
+      fill: $pink
+  &__buy,
+  &__more
+    display: none
+  &__more
+    padding-top: 15px
+  &__head
+    margin-bottom: 10px
+    +fb
+  &__row
+    display: flex
+    margin: 0 -15px 20px
+    +t
+      display: block
+  &__col
+    padding: 0 15px
+    flex: 0 0 40%
+    &:first-child
+      flex: 0 0 60%
+      +m
+        margin-bottom: 10px
+  &__text
+    ul
+      li
+        position: relative
+        padding-left: 17px
+        &:before
+          content: '—'
+          position: absolute
+          top: 0
+          left: 0
+  &__works
+    display: flex
+    margin: 0 -30px -10px 0
+    flex-wrap: wrap
+  &__work
+    margin: 0 10px 10px 0
+    flex: 0 0 48px
+  &__foot
+    display: flex
+    align-items: center
+  &__foot &__btn
+    margin-right: 40px
+  &__print
+    position: relative
+    margin-left: auto
+    padding-left: 30px
+    color: #878787
+    line-height: 1.3
+    .bold
+      color: $cl
+    .icon
+      position: absolute
+      top: 1px
+      left: 0
+      fill: $pink
+
+.switcher
+  display: inline-block
+  position: relative
+  &__input
+    position: absolute
+    top: 0
+    left: 0
+    opacity: 0
+  &__input:checked + &__wrap &__item
+    &:first-child
+      background: #f8f8f8
+    &:last-child
+      background: transparent
+  &__wrap
+    display: flex
+    background: linear-gradient(to right, #cdff82, #5efff4)
+    border-radius: 23px
+    align-items: center
+  &__item
+    padding: 11px 20px
+    border-radius: 23px
+    +fb
+    font-size: 12px
+    text-transform: uppercase
+    user-select: none
+    cursor: pointer
+    &:last-child
+      background: #f8f8f8
+
+.casing
+  display: flex
+  position: relative
+  +t
+    padding-top: 105px
+  +m
+    padding-top: 155px
+  &__col
+    &:first-child
+      padding-right: 20px
+      flex: 0 0 160px
+      +t
+        padding: 0
+        flex: 0 0 0
+    &:last-child
+      flex: 0 0 calc(100% - 160px)
+      +t
+        flex: 0 0 100%
+  &__subscribe
+    +t
+      display: flex
+      position: absolute
+      top: 0
+      left: 0
+      width: 250px
+      flex-wrap: wrap
+      align-items: center
+    +m
+      width: 100%
+      justify-content: center
+  &__msg
+    margin-bottom: 15px
+    padding-top: 5px
+    font-size: 14px
+    line-height: 1.3
+    +t
+      margin: 0 15px 0 0
+      padding: 0
+    .bold
+      display: block
+  &__btn
+    padding-left: 15px
+    padding-right: 15px
+    letter-spacing: 1px
+  &__note
+    padding-top: 15px
+    font-size: 14px
+    line-height: 1.2
+    opacity: 0.6
+    +t
+      padding-top: 10px
+      flex: 0 0 140px
+    +m
+      display: none
+  &__head
+    display: flex
+    margin-bottom: 30px
+    align-items: center
+    +t
+      justify-content: center
+  &__title
+    margin: 0 auto 0 0
+    +t
+      margin: 0
+  &__switcher
+    +t
+      position: absolute
+      top: 0
+      right: 0
+    +m
+      top: 60px
+      right: 50%
+      transform: translateX(50%)
+      white-space: nowrap
+
+
 .searching
   display: flex
   margin-bottom: 40px
@@ -3329,12 +3951,12 @@ a.grey-link
     flex: 0 0 100px
 
 a
-  &.link--black
-    color: #000
-  &.disabled
-    pointer-events: none
-    cursor: default
-    opacity: 0.6
+ &.link--black
+   color: #000
+ &.disabled
+   pointer-events: none
+   cursor: default
+   opacity: 0.6
 
 .content-block
   &.title
@@ -3347,102 +3969,3 @@ a
   &.pic
     position: relative
     width: 100%
-
-
-.school
-  &__page
-    display: flex
-    margin: 0 0 0 10px
-    flex-wrap: wrap
-  &__block
-    flex: 0 0 calc(50% - 20px)
-    +m
-      flex: 0 0 calc(100% - 20px)
-  &__list
-    margin: 0 -10px
-    flex-wrap: wrap
-    +m
-      margin-top: 20px
-  &__item
-    display: block
-    margin: 0 10px 40px 10px
-    flex: 0 0 calc(100% - 20px)
-  &__title
-    display: block
-    margin: 0 0 10px 0
-    font-weight: bold
-    letter-spacing: 2px
-    color: #ff9393
-  &__subtitle
-    display: block
-    margin: 0
-    color: #333333
-    font-family: 'ProximaNova-Bold', serif
-  &__content
-    font-size: 16px
-    line-height: 1.25
-    color: #333333
-  &__btn
-    margin-top: 20px
-    a
-      width: 70%
-      +m
-        width: 100%;
-  &__btn__prev
-    margin-top: 12px
-    a
-      width: 70%
-      +m
-        width: 100%;
-  &__month
-    margin-bottom: 20px
-    flex: 0 0 320px
-    border-radius: 8px
-    background-image: linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%)
-    width: 70%
-    padding: 2px
-    +m
-      width: 100%;
-    &__wrap
-      padding: 5px 0 10px
-      background: white
-      border-radius: 6px
-    &__title
-      margin: 20px 0 0 20px
-      font-size: 36px
-      line-height: 0.97
-      color: #333333
-    &__subtitle
-      margin: 10px 0 0 20px
-      font-size: 16px
-      line-height: 0.88
-      color: #888888
-    &__image
-      margin: 40px 0 40px 0
-      &__pic
-        display: block
-        width: 100%
-  &__prev__btn
-    position: relative
-    padding: 19px 24px 18px
-    border-radius: 8px
-    z-index: 4
-    font-size: 12px
-    font-weight: bold
-    line-height: 1.67
-    letter-spacing: 1px
-    text-align: center
-    color: #333333
-    &:hover:before
-      opacity: 0
-    &:before
-      content: ''
-      position: absolute
-      top: 2px
-      left: 2px
-      right: 2px
-      bottom: 2px
-      background: #FDF8F9
-      border-radius: 8px
-      transition: opacity .2s
-      z-index: -2
diff --git a/web/src/sass/generated/_sprite-svg.scss b/web/src/sass/generated/_sprite-svg.scss
index 729565d4..a95397c3 100755
--- a/web/src/sass/generated/_sprite-svg.scss
+++ b/web/src/sass/generated/_sprite-svg.scss
@@ -38,6 +38,11 @@
   height: 1em;
   fill: #C8C8C8;
 }
+.icon-everyday {
+  width: 1em;
+  height: 1em;
+  fill: #93D2C2;
+}
 .icon-eye {
   width: 1.69em;
   height: 1em;
@@ -123,6 +128,16 @@
   height: 1em;
   fill: #979797;
 }
+.icon-next {
+  width: 0.52em;
+  height: 1em;
+  fill: initial;
+}
+.icon-online {
+  width: 1.41em;
+  height: 1em;
+  fill: #93D2C2;
+}
 .icon-password-eye {
   width: 1.79em;
   height: 1em;
@@ -148,6 +163,16 @@
   height: 1em;
   fill: #BEBEBE;
 }
+.icon-prev {
+  width: 0.52em;
+  height: 1em;
+  fill: initial;
+}
+.icon-print {
+  width: 1.07em;
+  height: 1em;
+  fill: initial;
+}
 .icon-search {
   width: 1em;
   height: 1em;
@@ -188,6 +213,11 @@
   height: 1em;
   fill: #C8C8C8;
 }
+.icon-subjects {
+  width: 1.1em;
+  height: 1em;
+  fill: #93D2C2;
+}
 .icon-text {
   width: 0.82em;
   height: 1em;
@@ -223,6 +253,11 @@
   height: 1em;
   fill: #C8C8C8;
 }
+.icon-view {
+  width: 1.17em;
+  height: 1em;
+  fill: #93D2C2;
+}
 .icon-wallet {
   width: 1.15em;
   height: 1em;