diff --git a/common/modules/product/models/Product.php b/common/modules/product/models/Product.php
index 0f21f7f..da6beac 100755
--- a/common/modules/product/models/Product.php
+++ b/common/modules/product/models/Product.php
@@ -154,7 +154,7 @@ class Product extends \yii\db\ActiveRecord
      */
     public function getVariants()
     {
-        return $this->hasMany(ProductVariant::className(), ['product_id' => 'product_id']);
+        return $this->hasMany(ProductVariant::className(), ['product_id' => 'product_id'])->orderBy('product_variant_id');
     }
 
     public function setVariants($variants) {
diff --git a/composer.json b/composer.json
index 2ad5a4f..76c970d 100755
--- a/composer.json
+++ b/composer.json
@@ -41,7 +41,8 @@
         "kartik-v/yii2-widget-fileinput": "@dev",
         "maxmirazh33/yii2-uploadable-cropable-image": "*",
         "iutbay/yii2-imagecache": "*",
-        "yurkinx/yii2-image": "dev-master"
+        "yurkinx/yii2-image": "dev-master",
+        "cics/yii2-video-embed-widget": "dev-master"
     },
     "require-dev": {
         "yiisoft/yii2-codeception": "*",
diff --git a/frontend/views/catalog/product.php b/frontend/views/catalog/product.php
index d6a582e..2140597 100755
--- a/frontend/views/catalog/product.php
+++ b/frontend/views/catalog/product.php
@@ -18,7 +18,10 @@ $this->registerJs ('
 
         var checkData = function($index)
         {
-            var $source = $(".productLeftBar .product_mod > li").eq($index).find("a");
+            var sourceNew = $(".productLeftBar .product_mod > li").eq($index);
+            $(".productLeftBar .product_mod > li").removeClass("active")
+            sourceNew.addClass("active");
+            var $source = sourceNew.find("a");
             var $target = $(".productLeftBar .cost_box");
 
             $("#cost").text($source.data("cost"));
@@ -102,7 +105,7 @@ $this->registerJs ("
                        data-cost="<?= $variant->price ?>"
                        data-old_cost="<?= $variant->price_old ?>" data-id="<?= $variant->product_variant_id ?>" data-art="<?= $variant->sku ?>"
                        data-color="<?= $variant->name ?>"
-                       data-image="<?= \common\components\artboximage\ArtboxImageHelper::getImageSrc($variant->imageUrl, 'list') ?>"
+                       data-image="<?= \common\components\artboximage\ArtboxImageHelper::getImageSrc($variant->imageUrl, 'product_view') ?>"
                        data-imageoriginal="<?= $variant->imageUrl ?>"
                        title="<?= $product->fullname ?>">
                         <?= \common\components\artboximage\ArtboxImageHelper::getImage($variant->imageUrl, 'product_variant')?>
@@ -113,15 +116,17 @@ $this->registerJs ("
         </ul>
         <div class="both"></div>
 
-        <div class="cost_box">
+        <div class="cost_box product_read_ _qqq_">
             <div class='params'>код: <span id='art'></span><br/> цвет: <span id='color'></span></div>
-            <div class="w">
-                <strike><span id='old_cost'>0</span> грн.</strike><br/>
-                <span class="cost"><span id='cost'>0</span> <span class="valute">грн.</span></span>
+            <div class="product_read_price">
+                <div class="w">
+                    <strike><span id='old_cost'>0</span> грн.</strike>
+                    <span class="cost"><span id='cost'>0</span> <span class="valute">грн.</span></span>
+                </div>
+                <input type='hidden' id='product_id'/>
+                <a href="#" rel='product' class="link_buy fl">В Корзину</a>
+                <div class="both"></div>
             </div>
-            <input type='hidden' id='product_id'/>
-            <a href="#" rel='product' class="link_buy fl">В Корзину</a>
-            <div class="both"></div>
         </div>
         <?php /*
         <div class="product_service">
@@ -151,7 +156,13 @@ $this->registerJs ("
                     <?= $product->description ?>
                 </div>
             </li>
-
+            <?php if(!empty($product->video)) :?>
+                <li><a href="#">Видео</a>
+                    <div class="info product-thumb-video">
+                        <?= \cics\widgets\VideoEmbed::widget(['responsive' => false, 'url' => $product->video]); ?>
+                    </div>
+                </li>
+            <?php endif?>
         </ul>
     </div>
 
@@ -164,7 +175,7 @@ $this->registerJs ("
         <ul class="product_colors">
             <?php foreach ($product->images as $image): ?>
                 <li><a href="<?= $image->imageUrl ?>" rel="shadowbox[gal]">
-                        <?= \common\components\artboximage\ArtboxImageHelper::getImage($image->imageUrl, 'product_view')?>
+                        <?= \common\components\artboximage\ArtboxImageHelper::getImage($image->imageUrl, 'product_trumb2')?>
                     </a></li>
             <?php endforeach; ?>
         </ul>
diff --git a/frontend/web/css/style.css b/frontend/web/css/style.css
index a7d7039..544efe3 100755
--- a/frontend/web/css/style.css
+++ b/frontend/web/css/style.css
@@ -4,9 +4,9 @@ body { padding:0;margin:0;
 }
 h1,h2,h3{margin:0px;padding:0px 0px 10px 0px;}
 .fl{float:left;}
-.fotter .wrap .fr{float:right; width: 180px; height: 50px;  position: relative;}
+.fotter .wrap .fr{float:right; width: 180px; height: 50px;  position: relative;font-size: 12px;}
 .fotter .wrap .fr img{position: absolute; top: 50%; margin-top: -10px; right: 0;}
-.fotter .wrap .fl {line-height: 50px;}
+.fotter .wrap .fl {line-height: 50px;font-size: 12px;}
 .both{clear:both;}
 h1{margin:10px 0;font-size:24px;}
 h3{margin-bottom:30px;}
@@ -109,22 +109,36 @@ a.myorders{color:#f75d50}
 }
 .products ul{list-style:none;margin:0;padding:0;}
 .products ul li.item{float:left;width:192px;margin:0 0 50px 0;text-align:center;position:relative;}
-.products ul li a.name{display:block;color:#333;font-size: 15px;text-decoration:none;margin:15px 0 0 0;height:35px;overflow: hidden; box-sizing: border-box;padding: 0 10px;}
+.products ul li a.name{display:block;color:#799920;font-size: 15px;text-decoration:none;margin:15px 0 0 0;height:35px;overflow: hidden; box-sizing: border-box;padding: 0 10px;}
+.products ul li a.name:hover {text-decoration: underline}
 .products ul li .info{text-align: left;}
 .pn{border:none;}
 
-.cost{color:#f75d50;font-size:18px;margin:0;padding:0;}
-.cost span, .cost span.valute {font-size: 14px;}
+.cost, .product_read_price #cost {color:#f75d50;font-size:18px;margin:0;padding:0;}
+.cost span, .cost span.valute, .product_read_price .valute {font-size: 14px;}
 strike, strike span#old_cost{font-size:14px; color: #333}
-a.link_buy{font-size: 12px; display:block;margin:0 auto 10px auto;width:122px;height:29px;line-height:32px;text-transform: uppercase;color:#ffffff;text-decoration:none;font-weight:600;text-align:center;
+
+
+.submit4m, a.link_buy {
     background: #95ba2f;
-    border-radius: 4px;
+    border-radius:4px;
+    height: 29px;
+}
+a.link_buy {
+    font-size: 12px;
+    display:block;
+    margin:0 auto 10px auto;
+    width:122px;
+    line-height:32px;
+    text-transform: uppercase;color:#ffffff;
+    text-decoration:none;font-weight:600;
+    text-align:center;
     border-bottom: 3px solid #799920;
 }
-a.link_buy:hover {
+a.link_buy:hover, .submit4m:hover {
     border-bottom: 3px solid #95ba2f;;
 }
-a.link_buy:active {
+a.link_buy:active, .submit4m:active {
     background: #799920;
     border-bottom: 3px solid #799920;
 }
@@ -157,19 +171,19 @@ ul.why_list li.item6{background:url('../img/why_item6.png') left no-repeat;}
 .bottom{background:#4d5458;padding:40px 0px;color:#ffffff;}
 .bottom .leftbar{float:left;width:210px; }
 .bottom ul{list-style:none;margin:0px;padding:0px;line-height: 23px;}
-.bottom ul a{color:#ffffff;font-size:16px;text-decoration:none;}
+.bottom ul a{color:#ffffff;font-size:15px;text-decoration:none;}
 .bottom ul a:hover{color:#799920;}
 
-.phones{padding-left:25px;background:url('../img/phone.png') left top no-repeat;margin-top:50px;line-height: 23px;}
+.phones{padding-left:25px;background:url('../img/phone.png') left top no-repeat;margin-top:50px;line-height: 23px;font-size: 18px;}
 .map{padding:5px 0px 5px 25px;background:url('../img/map.png') left no-repeat; margin-bottom: 7px;}
 a.more_map{color:#99a5ad;border-bottom:1px dotted #99a5ad;text-decoration:none;font-size:11px;text-align:center;}
 
 .bread-crumbs{padding:0 0 0 20px;border-bottom:1px solid #d2d2d2; height: 29px;}
 .bread-crumbs ul{list-style:none;margin:0 0 0 0;padding:0; height: 29px;}
-.bread-crumbs ul li{float:left;padding-left:20px;height: 100%; line-height: 29px; color: #7d7d7d; position: relative}
+.bread-crumbs ul li{float:left;padding-left:20px;height: 100%; line-height: 29px; color: #7d7d7d; position: relative; font-size: 12px;}
 .bread-crumbs ul li:first-child {padding-left: 0}
 .bread-crumbs ul li a {font-size: 12px;  display: block; color: #7d7d7d}
-.bread-crumbs ul li a:visited,.bread-crumbs ul li a:link{font-size:14px;color:#7d7d7d;text-decoration:underline;}
+.bread-crumbs ul li a:visited,.bread-crumbs ul li a:link{color:#7d7d7d;text-decoration:underline;}
 .bread-crumbs ul li a:hover{color:#464646;text-decoration: none;}
 .breadcrumb > li + li:before {
     color: #ccc;
@@ -206,12 +220,12 @@ a.more_map{color:#99a5ad;border-bottom:1px dotted #99a5ad;text-decoration:none;f
     margin: -6px 0 0 ;
     top: 50%;
 }
-.filters ul li a{color:#8fa951;text-decoration:none; font-size: 13px; line-height: 16px;}
+.filters ul li a{color:#464646;text-decoration:none; font-size: 13px; line-height: 16px;}
 .filters ul li a:hover{text-decoration:underline;}
 
-.productLeftBar{float:left;width:230px;padding-left:20px;margin-right:20px;}
-.productRightBar{float:right;width:280px;margin-left:20px;}
-.productLeftBar h1{font-size:27px;border-bottom:1px solid #d2d2d2;margin-bottom:10px;}
+.productLeftBar{float:left;width:228px;margin-left:20px;margin-right:20px;}
+.productRightBar{float:right;width:260px;margin:0 20px;}
+.productLeftBar h1{font-size:24px;border-bottom:1px solid #d2d2d2;margin-bottom:10px;}
 
 ul.product_mod{list-style:none;margin:10px 0 0 0;padding:0; float: left;}
 ul.product_mod li{
@@ -220,8 +234,20 @@ ul.product_mod li{
     height: 46px;
     background: #fff;
     border: 1px solid #d2d2d2;
-    margin: 7px 7px 0 0;
+    margin: 5px 5px 0 0;
     text-align: center;
+    position: relative;
+}
+ul.product_mod li.active:before {
+    width: 48px;
+    height: 48px;
+    position: absolute;
+    content: '';
+    background: none;
+    border: 2px solid #95ba2f;
+    top: -1px;
+    left: -1px;
+    box-sizing: border-box;
 }
 ul.product_mod li a{
     width: 46px;
@@ -229,6 +255,9 @@ ul.product_mod li a{
     display: table-cell;
     vertical-align: middle;
 }
+ul.product_mod li a:focus {
+    outline: none;
+}
 ul.product_mod li img{
     vertical-align: middle;
     max-width: 46px;
@@ -255,7 +284,7 @@ ul.product_colors li img{
     max-height: 98px;
     vertical-align: middle;
 }
-.productLeftBar .begin{text-transform: uppercase;font-weight:bold;}
+.productLeftBar .begin{text-transform: uppercase;font-weight:bold; font-size: 12px;}
 
 .cost_box{border-top:1px solid #d2d2d2;border-bottom:1px solid #d2d2d2;margin:10px 0px;padding:10px 0px;}
 .cost_box .w{float:left;margin-right:20px;padding-top:5px;}
@@ -267,11 +296,11 @@ ul.product_colors li img{
 .product_service ul li.item3{background:url('../img/li3.png') left no-repeat;padding:3px 23px;}
 
 #nav_product{list-style:none;margin:0px;padding:0px;line-height:23px;}
-#nav_product li a{background:url('../img/li_plus.png') left no-repeat;padding:3px 15px;color:#000000;text-transform: uppercase;text-decoration:none;font-weight:bold;}
+#nav_product li a{background:url('../img/li_plus.png') left no-repeat;padding:3px 15px;color:#000000;text-transform: uppercase;text-decoration:none;font-weight:bold; font-size: 12px;}
 #nav_product li a.active{background:url('../img/li_minus.png') left no-repeat;}
 #nav_product li .info{display:none;border-bottom:1px solid #d2d2d2;padding:10px 0px;margin-bottom:10px;}
 
-
+#nav_product li .info, #nav_product li .info p {font-size: 12px; line-height: 16px;}
 .modal_box{
     position: fixed;
     left: 0;
@@ -324,11 +353,11 @@ a.del:hover{color:#a52828;text-decoration: underline;}
 
 .total{text-align:right;color:#87476a;font-size:20px;margin:10px 0px;}
 
-.submit4{margin-top:5px;border:none;padding:8px 13px;background:#95ba2f;border-radius:5px;color:#ffffff;text-transform: uppercase;text-decoration:none;font-size:14px;font-weight:bold;cursor:pointer;}
+.submit4{margin-top:5px;border:none;padding:8px 13px;background:#95ba2f;border-radius:5px;color:#ffffff;text-transform: uppercase;text-decoration:none;font-size:14px;cursor:pointer;}
 .submit4:hover{background:#f75d50;}
 
-.submit4m{border:none;padding:8px 13px;background:#95ba2f;border-radius:5px;color:#ffffff;text-transform: uppercase;text-decoration:none;font-size:12px;font-weight:bold;cursor:pointer;}
-.submit4m:hover{background:#f75d50;}
+.submit4m {font-family: Roboto;border:none;background:#95ba2f;border-radius:4px;color:#ffffff;text-transform: uppercase;font-size:10px;cursor:pointer; width:102px; height: 29px; border-bottom: 3px solid #799920; line-height: 29px;}
+.submit4m:active,.submit4m:focus {outline: none}
 
 .btn-primary{margin-top:5px;border:none;padding:8px 13px;background:#95ba2f;border-radius:5px;color:#ffffff;text-transform: uppercase;text-decoration:none;font-size:14px;font-weight:bold;cursor:pointer;}
 .btn-primary:hover{background:#f75d50;}
@@ -383,11 +412,49 @@ ul.brends_list li{float:left;text-align:center;margin:0px 15px 20px 15px;}
 .news_item img{margin-right:20px;}
 .news_item a{font-size:16px;}
 
-.pic{margin-right:20px;}
+.pic{
+    width: 392px;
+    height: 365px;
+}
+.pic a {
+    width: 392px;
+    height: 365px;
+    display: table-cell;
+    vertical-align: middle;
+}
+.pic a img {
+    max-width: 392px;
+    max-height: 365px;
+    vertical-align: middle;
+}
+input#subscribe-email::-webkit-input-placeholder {
+    color: #596065
+}
 
-#subscribe-sale{width:100px;float:left;margin-right:20px;}
-.saletxt{width:150px;float:left;color:#ffffff;}
-#subscribe-email{width:390px;}
+input#subscribe-email::-moz-placeholder {
+    color: #596065
+}
+
+
+input#subscribe-email:-ms-input-placeholder {
+    color: #596065
+}
+input#subscribe-sale::-webkit-input-placeholder {
+    color: #596065
+}
+
+input#subscribe-sale::-moz-placeholder {
+    color: #596065
+}
+
+
+input#subscribe-sale:-ms-input-placeholder {
+    color: #596065
+}
+#subscribe-email, #subscribe-sale {color: #596065}
+#subscribe-sale{width:100px;float:left;margin-right:20px;height: 28px;}
+.saletxt{width:150px;float:left;color:#ffffff; font-size: 12px;}
+#subscribe-email{width:370px;}
 
 .txts{color:#9da9b1;font-size:18px;margin-bottom:20px;}
 
@@ -442,9 +509,9 @@ ul.social {margin-top: 20px;}
 .hide{display:none;}
 
 
-
+.footer .fl{font-size: 12px;}
 .fotter{background: #484f55;height: 50px;color:#98a3ab;}
-.fotter a{color:#98a3ab; line-height: 50px; float: left;}
+.fotter a{color:#98a3ab; line-height: 50px; float: left; font-size: 12px;}
 
 
 .view_products2{list-style: none;overflow:auto;height:400px;}
@@ -935,7 +1002,7 @@ a.active{font-weight:bold;text-decoration: underline;}
 
 #HOME_SLIDER .jssorb03 div.av:hover, #HOME_SLIDER .jssorb03 div.av:active, #HOME_SLIDER .jssorb03 .av  {
     cursor: default;
-    background: #333;
+    background: #95BA2F;
 }
 .special-products {
     padding-top: 30px;
@@ -1166,4 +1233,53 @@ ul.product-special li.promo:after {
 }
 .irs-min, .irs-max {display: none;}
 .irs {height: 49px;}
-.price_filter.first_price_li {margin-top: 8px;}
\ No newline at end of file
+.price_filter.first_price_li {margin-top: 8px;}
+.product_read_ .w{
+   width: 110px;overflow: hidden;
+    float: left;
+    margin: 0;
+    padding-top: 0;
+    white-space: nowrap;
+    min-height: 32px;
+}
+.product_read_ .w strike, .product_read_ .w .cost {
+    width: 100%;
+    float: left;
+    line-height: 15px;
+}
+
+.product_read_price .link_buy {
+    width: 118px;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    margin: -16px 0 0 0;
+}
+.product_read_price { position: relative; min-height: 32px;margin-top: 10px;}
+.special-products.products h3 {margin-bottom: 0;}
+.special-products.products li.item {
+    margin-top: 30px;
+}
+.productLeftBar .cost_box {
+    border-top: 0;
+    padding: 10px 0 15px 0;
+}
+.productLeftBar .product_mod {
+    width: 100%;
+    float: left;
+    border-bottom: 1px solid #d2d2d2;
+    padding-bottom: 15px;
+}
+#login-form .btn-primary {
+    padding: 0 13px;
+    height: 28px;
+}
+.field-orders-delivery .control-label, .field-orders-payment .control-label, .field-orders-body .control-label {
+    width: 100%;
+    float: left;
+}
+
+.product-thumb-video iframe {
+    width: 260px;
+    height: auto;
+}
\ No newline at end of file
--
libgit2 0.21.4