diff --git a/css/_menu.sass b/css/_menu.sass
deleted file mode 100644
index 18acd6a..0000000
--- a/css/_menu.sass
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "_variables.sass"
-
diff --git a/css/style.css b/css/style.css
index e2d3833..b65e7f4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,15 +1,15 @@
 @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap");
-.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover {
+.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover, .mega__menu-sale a:hover img {
   -webkit-box-shadow: 0 5px 5px #d6d6d6;
           box-shadow: 0 5px 5px #d6d6d6;
 }
 
-.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover {
+.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover, .cart__menu-checkout:hover {
   background-color: #f16d7f;
   color: #ffffff;
 }
 
-.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active {
+.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active, .cart__menu-checkout:active, .cart__menu-go:active {
   background-color: #eeeeee;
   color: #f7f7f8;
 }
@@ -47,21 +47,21 @@ li {
 }
 
 .container {
-  width: 1140px;
+  max-width: 1140px;
   margin: 0 auto;
 }
 
-.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover {
+.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover, .mega__menu-sale a:hover img {
   -webkit-box-shadow: 0 5px 5px #d6d6d6;
           box-shadow: 0 5px 5px #d6d6d6;
 }
 
-.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover {
+.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover, .cart__menu-checkout:hover {
   background-color: #f16d7f;
   color: #ffffff;
 }
 
-.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active {
+.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active, .cart__menu-checkout:active, .cart__menu-go:active {
   background-color: #eeeeee;
   color: #f7f7f8;
 }
@@ -88,6 +88,10 @@ li {
   height: inherit;
 }
 
+.header .header__right {
+  position: relative;
+}
+
 .header__logo {
   font-size: 27px;
   font-weight: 300;
@@ -171,22 +175,31 @@ li {
 
 .search__browse {
   height: inherit;
-  width: inherit;
+  position: relative;
+  z-index: 5;
+  width: 87px;
   font-size: 14px;
   font-weight: 400;
   line-height: 36px;
-  padding-left: 15px;
-  padding-right: 9px;
   background-color: #f8f8f8;
+  background-image: url(../img/caret-down.svg);
+  background-size: 14px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
 }
 
-.search__browse i {
-  margin-left: 8px;
+.search__browse span {
+  display: block;
+  height: inherit;
+  cursor: pointer;
+  padding-left: 15px;
+  padding-right: 9px;
 }
 
 .header__cart {
   margin-right: 26px;
   margin-top: 15px;
+  cursor: pointer;
 }
 
 .header__cart img {
@@ -225,6 +238,9 @@ li {
 }
 
 .navbar {
+  position: relative;
+  z-index: 3;
+  background-color: #ffffff7a;
   min-height: 51px;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -234,6 +250,26 @@ li {
           justify-content: center;
 }
 
+.navbar .mobile__menu-open {
+  position: absolute;
+  font-size: 40px;
+  color: #f16d7f;
+  display: none;
+}
+
+.navbar .mobile__menu-close {
+  position: absolute;
+  font-size: 40px;
+  color: #f16d7f;
+  display: none;
+}
+
+#mobile__menu-switch {
+  display: none;
+  left: -999px;
+  visibility: hidden;
+}
+
 .navbar__menu-list {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -268,17 +304,17 @@ li {
   color: #f16d7f;
 }
 
-.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover {
+.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover, .mega__menu-sale a:hover img {
   -webkit-box-shadow: 0 5px 5px #d6d6d6;
           box-shadow: 0 5px 5px #d6d6d6;
 }
 
-.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover {
+.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover, .cart__menu-checkout:hover {
   background-color: #f16d7f;
   color: #ffffff;
 }
 
-.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active {
+.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active, .cart__menu-checkout:active, .cart__menu-go:active {
   background-color: #eeeeee;
   color: #f7f7f8;
 }
@@ -292,6 +328,7 @@ li {
 }
 
 .brand__picture {
+  width: inherit;
   height: 614px;
   background: url(../img/Layer_24_.jpg) no-repeat;
   background-position: right bottom;
@@ -322,18 +359,6 @@ li {
   color: #f16d7f;
 }
 
-.hot-square {
-  width: 560px;
-  height: 542px;
-  position: relative;
-}
-
-.hot-rectangle {
-  width: 560px;
-  height: 261px;
-  position: relative;
-}
-
 .formen {
   background: url(../img/Layer_30.jpg);
 }
@@ -370,6 +395,12 @@ li {
   margin-top: 98px;
 }
 
+.hot-square {
+  width: 560px;
+  height: 542px;
+  position: relative;
+}
+
 .hot__label {
   position: absolute;
   top: 26px;
@@ -405,6 +436,12 @@ li {
   letter-spacing: 0.75px;
 }
 
+.hot-rectangle {
+  width: 560px;
+  height: 261px;
+  position: relative;
+}
+
 .fetured {
   margin-top: 100px;
 }
@@ -498,7 +535,7 @@ li {
 
 .fetured__button-browse {
   background-color: #f16d7f;
-  height: 38px;
+  min-height: 38px;
   color: #ffffff;
   font-size: 15px;
   font-weight: 400;
@@ -515,17 +552,13 @@ li {
   margin-left: 9px;
 }
 
-.offer {
-  height: 529px;
-  margin-bottom: 97px;
-}
-
 .offer__doby {
-  height: inherit;
+  min-height: 529px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   background-color: #222224;
+  margin-bottom: 97px;
 }
 
 .offer__pic {
@@ -557,7 +590,8 @@ li {
 
 .offer__detales {
   height: inherit;
-  width: 373px;
+  max-width: 373px;
+  padding-right: 10px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -574,44 +608,44 @@ li {
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
+  padding-top: 40px;
 }
 
 .offer__detales-icon {
-  margin-top: 46px;
-  margin-left: 30px;
+  padding-right: 10px;
+  padding-left: 20px;
 }
 
 .offer__detales-text {
-  width: 252px;
+  min-width: 252px;
   color: #fbfbfb;
   font-size: 14px;
   font-weight: 300;
   line-height: 24px;
   letter-spacing: 0.35px;
+  padding-left: 10px;
 }
 
 .offer__detales-text h3 {
-  margin-left: 2px;
-  margin-top: 55px;
-  margin-bottom: 0;
+  margin: 0;
 }
 
-.offer__detales-text p {
+.offer__detales-text h3 p {
   width: 219px;
   margin-top: 0;
 }
 
-.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover {
+.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover, .mega__menu-sale a:hover img {
   -webkit-box-shadow: 0 5px 5px #d6d6d6;
           box-shadow: 0 5px 5px #d6d6d6;
 }
 
-.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover {
+.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover, .cart__menu-checkout:hover {
   background-color: #f16d7f;
   color: #ffffff;
 }
 
-.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active {
+.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active, .cart__menu-checkout:active, .cart__menu-go:active {
   background-color: #eeeeee;
   color: #f7f7f8;
 }
@@ -719,6 +753,10 @@ li {
   padding-left: 14px;
 }
 
+.sidebar__menu-item li:hover a {
+  color: #f16d7f;
+}
+
 .choose__bar {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -897,12 +935,6 @@ li {
   margin-right: 10px;
 }
 
-.sort__box i {
-  position: absolute;
-  color: #6f6e6e;
-  right: 5px;
-}
-
 .sort__box-title {
   padding-left: 13px;
   padding-right: 8px;
@@ -926,6 +958,10 @@ li {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  background-image: url(../img/caret-down.svg);
+  background-repeat: no-repeat;
+  background-size: 11px;
+  background-position: right 6px center;
 }
 
 .show__box {
@@ -1095,17 +1131,17 @@ li {
   color: #fbfbfb;
 }
 
-.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover {
+.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover, .mega__menu-sale a:hover img {
   -webkit-box-shadow: 0 5px 5px #d6d6d6;
           box-shadow: 0 5px 5px #d6d6d6;
 }
 
-.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover {
+.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover, .cart__menu-checkout:hover {
   background-color: #f16d7f;
   color: #ffffff;
 }
 
-.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active {
+.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active, .cart__menu-checkout:active, .cart__menu-go:active {
   background-color: #eeeeee;
   color: #f7f7f8;
 }
@@ -1121,28 +1157,39 @@ li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
   height: inherit;
+  padding-top: 123px;
 }
 
 .subscribe__comment {
-  min-height: 438px;
-  width: 570px;
+  max-height: 438px;
+  max-width: 570px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  border-right: 1px solid #ffffff;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: start;
 }
 
 .subscribe__comment img {
-  margin-top: -110px;
-  margin-right: 28px;
   -o-object-fit: none;
      object-fit: none;
 }
 
+.comment {
+  padding-left: 28px;
+}
+
+.comment p {
+  margin-top: 0;
+}
+
 .comment .text {
-  margin-top: 123px;
-  width: 386px;
+  max-width: 386px;
   font-size: 16px;
   line-height: 26px;
   letter-spacing: 0.4px;
@@ -1189,7 +1236,7 @@ li {
 }
 
 .subscribe__mail {
-  width: 570px;
+  max-width: 570px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1203,7 +1250,7 @@ li {
 }
 
 .subscribe__mail .title {
-  margin-top: 146px;
+  margin-top: 0;
   margin-bottom: 0;
   color: #222224;
   font-size: 24px;
@@ -1296,7 +1343,7 @@ li {
 }
 
 .bottom-text {
-  width: 427px;
+  max-width: 427px;
   color: #898989;
   font-size: 14px;
   font-weight: 300;
@@ -1304,6 +1351,10 @@ li {
   letter-spacing: 0.35px;
 }
 
+.bottom__brand {
+  padding-right: 10px;
+}
+
 .bottom__menu {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -1399,40 +1450,39 @@ li {
           transform: scale(1.1);
 }
 
-.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover {
+.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover, .mega__menu-sale a:hover img {
   -webkit-box-shadow: 0 5px 5px #d6d6d6;
           box-shadow: 0 5px 5px #d6d6d6;
 }
 
-.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover {
+.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover, .cart__menu-checkout:hover {
   background-color: #f16d7f;
   color: #ffffff;
 }
 
-.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active {
+.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active, .cart__menu-checkout:active, .cart__menu-go:active {
   background-color: #eeeeee;
   color: #f7f7f8;
 }
 
-.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover {
+.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover, .mega__menu-sale a:hover img {
   -webkit-box-shadow: 0 5px 5px #d6d6d6;
           box-shadow: 0 5px 5px #d6d6d6;
 }
 
-.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover {
+.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover, .cart__menu-checkout:hover {
   background-color: #f16d7f;
   color: #ffffff;
 }
 
-.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active {
+.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active, .cart__menu-checkout:active, .cart__menu-go:active {
   background-color: #eeeeee;
   color: #f7f7f8;
 }
 
 .goods-picture {
   position: relative;
-  z-index: 1;
-  height: 777px;
+  max-height: 777px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1444,6 +1494,7 @@ li {
 
 .goods-picture__box {
   width: 1600px;
+  height: 777px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1496,8 +1547,8 @@ li {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  width: 1141px;
-  height: 730px;
+  max-width: 1141px;
+  max-height: 730px;
   background-color: #ffffff;
   border: 1px solid #eaeaea;
 }
@@ -1521,7 +1572,7 @@ li {
   margin-top: 42px;
   margin-bottom: 18px;
   text-align: center;
-  width: 620px;
+  max-width: 620px;
   font-size: 14px;
   line-height: 24px;
   font-weight: 300;
@@ -1593,12 +1644,20 @@ li {
 }
 
 .goods-description__choose-input {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
   margin-top: 16px;
   width: 144px;
   height: 35px;
   border: 1px solid #eaeaea;
   padding-left: 30px;
   font-weight: 400;
+  background-image: url(../img/caret-down.svg);
+  background-size: 14px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
 }
 
 .goods-description__choose-color {
@@ -1635,6 +1694,7 @@ li {
   width: 537px;
   height: 55px;
   margin-top: 28px;
+  margin-bottom: 100px;
   background-color: #ffffff;
   border: 1px solid #ef5b70;
   font-size: 16px;
@@ -1687,7 +1747,8 @@ li {
 }
 
 .like-olso {
-  height: 540px;
+  min-height: 500px;
+  padding-bottom: 40px !important;
 }
 
 .like-olso h1 {
@@ -1704,9 +1765,11 @@ li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
 }
 
 .like-olso__gallery-item {
@@ -1753,23 +1816,29 @@ li {
   color: #f16d7f;
 }
 
-.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover {
+.input-number input::-webkit-outer-spin-button,
+.input-number input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  -moz-appearance: textfield;
+}
+
+.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover, .mega__menu-sale a:hover img {
   -webkit-box-shadow: 0 5px 5px #d6d6d6;
           box-shadow: 0 5px 5px #d6d6d6;
 }
 
-.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover {
+.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover, .cart__menu-checkout:hover {
   background-color: #f16d7f;
   color: #ffffff;
 }
 
-.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active {
+.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active, .cart__menu-checkout:active, .cart__menu-go:active {
   background-color: #eeeeee;
   color: #f7f7f8;
 }
 
 .newarriv {
-  height: 148px;
+  min-height: 148px;
   background-color: #f8f3f4;
 }
 
@@ -1816,8 +1885,9 @@ li {
 }
 
 .cart {
-  height: 1123px;
+  min-height: 1123px;
   font-weight: 400;
+  padding-bottom: 20px !important;
 }
 
 .cart .details {
@@ -1882,7 +1952,7 @@ li {
       -ms-flex-align: center;
           align-items: center;
   padding-top: 20px;
-  height: 115px;
+  min-height: 115px;
   font-size: 13px;
   color: #656565;
 }
@@ -1929,7 +1999,7 @@ li {
   height: 30px;
   width: 40px;
   text-align: center;
-  padding-left: 15px;
+  padding: 0 8px;
   border: 1px solid #eaeaea;
 }
 
@@ -1983,12 +2053,8 @@ li {
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-}
-
-.cart__checkout {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
 }
 
 .cart__checkout .shipping {
@@ -2240,17 +2306,17 @@ li {
   transition: .2s;
 }
 
-.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover {
+.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover, .mega__menu-sale a:hover img {
   -webkit-box-shadow: 0 5px 5px #d6d6d6;
           box-shadow: 0 5px 5px #d6d6d6;
 }
 
-.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover {
+.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover, .cart__menu-checkout:hover {
   background-color: #f16d7f;
   color: #ffffff;
 }
 
-.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active {
+.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active, .cart__menu-checkout:active, .cart__menu-go:active {
   background-color: #eeeeee;
   color: #f7f7f8;
 }
@@ -2472,18 +2538,1080 @@ li {
   opacity: 0;
 }
 
-.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover {
+.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover, .mega__menu-sale a:hover img {
+  -webkit-box-shadow: 0 5px 5px #d6d6d6;
+          box-shadow: 0 5px 5px #d6d6d6;
+}
+
+.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover, .cart__menu-checkout:hover {
+  background-color: #f16d7f;
+  color: #ffffff;
+}
+
+.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active, .cart__menu-checkout:active, .cart__menu-go:active {
+  background-color: #eeeeee;
+  color: #f7f7f8;
+}
+
+.browse__menu {
+  position: relative;
+  z-index: 5;
+  width: 254px;
+  border-radius: 3px;
+  border: 1px solid #e6e6e6;
+  background-color: #ffffff;
+}
+
+.browse__menu-chapter {
+  padding: 14px;
+  margin: 0;
+  color: #222222;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.browse__menu-chapter-title {
+  border-bottom: 1px solid #e6e6e6;
+  margin: 0;
+  margin-bottom: 10px;
+  padding-bottom: 5px;
+  text-transform: uppercase;
+}
+
+.browse__menu-item {
+  text-decoration: none;
+  list-style-type: none;
+  margin-left: 5px;
+  cursor: pointer;
+  -webkit-transition: .3s;
+  transition: .3s;
+}
+
+.browse__menu-item:hover {
+  margin-left: 15px;
+  color: #f16d7f;
+}
+
+.browse__menu-item:not(:last-child) {
+  margin-bottom: 12px;
+}
+
+.browse__menu-switch {
+  position: absolute;
+  z-index: 10;
+  left: -999px;
+  visibility: hidden;
+}
+
+.browse__menu-switch:checked + div {
+  max-height: 0;
+  z-index: 4;
+}
+
+.browse__menu-switch:checked + div > div::before {
+  opacity: 0;
+}
+
+.browse__menu::before {
+  content: '';
+  position: absolute;
+  top: -6px;
+  left: 39px;
+  height: 10px;
+  width: 10px;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  background-color: #fff;
+  border-left: 1px solid #e6e6e6;
+  border-top: 1px solid #e6e6e6;
+  -webkit-transition: .2s;
+  transition: .2s;
+}
+
+.browse__menu-wrapper {
+  padding-top: 8px;
+  position: absolute;
+  overflow: hidden;
+  top: 61px;
+  max-height: 660px;
+  -webkit-transition: .3s;
+  transition: .3s;
+}
+
+.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover, .mega__menu-sale a:hover img {
   -webkit-box-shadow: 0 5px 5px #d6d6d6;
           box-shadow: 0 5px 5px #d6d6d6;
 }
 
-.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover {
+.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover, .cart__menu-checkout:hover {
   background-color: #f16d7f;
   color: #ffffff;
 }
 
-.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active {
+.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active, .cart__menu-checkout:active, .cart__menu-go:active {
   background-color: #eeeeee;
   color: #f7f7f8;
 }
-/*# sourceMappingURL=style.css.map */
\ No newline at end of file
+
+.cart__switcher {
+  position: absolute;
+  z-index: 10;
+  top: -999px;
+  right: 10px;
+  visibility: hidden;
+}
+
+.cart__switcher:checked + div {
+  top: -500px;
+}
+
+.cart__menu {
+  background-color: #fff;
+  position: absolute;
+  z-index: 4;
+  right: 4px;
+  top: 88px;
+  width: 230px;
+  padding: 0 15px 15px;
+  border-radius: 3px;
+  border: 1px solid #e6e6e6;
+  -webkit-transition: .5s;
+  transition: .5s;
+}
+
+.cart__menu-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding-bottom: 15px;
+  padding-top: 15px;
+  border-bottom: 1px solid #e6e6e6;
+}
+
+.cart__menu-item-name {
+  padding: 10px 15px;
+  -webkit-box-flex: 1;
+      -ms-flex: auto;
+          flex: auto;
+}
+
+.cart__menu-item-good {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.cart__menu-item-stars {
+  font-size: 10px;
+  color: goldenrod;
+  margin-top: 8px;
+}
+
+.cart__menu-item-quantity {
+  font-size: 10px;
+  font-weight: 700;
+  color: #f16d7f;
+  margin-top: 8px;
+}
+
+.cart__menu-item-cancel {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+}
+
+.cart__menu-summ {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  font-size: 16px;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 15px 0;
+}
+
+.cart__menu-buttons {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  font-size: 14px;
+  font-weight: 700;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.cart__menu-checkout {
+  margin-top: 10px;
+  border: 1px solid #f16d7f;
+  color: #f16d7f;
+  height: 40px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-transition: .2s;
+  transition: .2s;
+}
+
+.cart__menu-checkout:active {
+  border: 1px solid #e6e6e6;
+}
+
+.cart__menu-go {
+  margin-top: 10px;
+  border: 1px solid #e6e6e6;
+  height: 40px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.cart__menu-go:hover {
+  background-color: #e6e6e6;
+}
+
+.cart__menu::before {
+  content: '';
+  position: absolute;
+  top: -6px;
+  left: 39px;
+  height: 10px;
+  width: 10px;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  background-color: #fff;
+  border-left: 1px solid #e6e6e6;
+  border-top: 1px solid #e6e6e6;
+}
+
+.fetured__gallery-item:hover, .product__gallery-item:hover, .like-olso__gallery-item:hover, .mega__menu-sale a:hover img {
+  -webkit-box-shadow: 0 5px 5px #d6d6d6;
+          box-shadow: 0 5px 5px #d6d6d6;
+}
+
+.viewtype__button:hover, .goods-picture__arrow:hover, .goods-description__main-button:hover, .cart__buttons a:hover, .cart__checkout .coupon form button:hover, .cart__quote:hover, .collapse__block-form button:hover, .cart__menu-checkout:hover {
+  background-color: #f16d7f;
+  color: #ffffff;
+}
+
+.footer-link:active, .goods-picture__arrow:active, .goods-description__main-button:active, .cart__item-del:active i, .cart__buttons a:active, .cart__checkout .coupon form button:active, .cart__quote:active, .collapse__block-form button:active, .cart__menu-checkout:active, .cart__menu-go:active {
+  background-color: #eeeeee;
+  color: #f7f7f8;
+}
+
+.mega__switcher {
+  position: absolute;
+  z-index: 10;
+  top: -999px;
+  right: 25px;
+  visibility: hidden;
+}
+
+.mega__switcher:checked + div {
+  top: -440px;
+  opacity: 0;
+}
+
+.mega__menu {
+  position: absolute;
+  top: 40px;
+  right: -230px;
+  opacity: 1;
+  z-index: 5;
+  -webkit-transition: .8s;
+  transition: .8s;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  padding: 18px 18px 0 18px;
+  border-radius: 3px;
+  border: 1px solid #e6e6e6;
+  background-color: #ffffff;
+  -webkit-column-count: 3;
+          column-count: 3;
+}
+
+.mega__menu-wrapper {
+  position: relative;
+}
+
+.mega__menu-chapter {
+  margin: 0;
+  padding: 0 0 18px 0;
+  color: #222222;
+  font-size: 14px;
+  font-weight: 700;
+  -webkit-column-break-inside: avoid;
+}
+
+.mega__menu-chapter-title {
+  border-bottom: 1px solid #e6e6e6;
+  margin: 0;
+  margin-bottom: 10px;
+  padding-bottom: 5px;
+  text-transform: uppercase;
+}
+
+.mega__menu-item {
+  text-decoration: none;
+  list-style-type: none;
+  margin-left: 5px;
+  cursor: pointer;
+  -webkit-transition: .3s;
+  transition: .3s;
+}
+
+.mega__menu-item:hover {
+  margin-left: 15px;
+  color: #f16d7f;
+}
+
+.mega__menu-item:not(:last-child) {
+  margin-bottom: 12px;
+}
+
+.mega__menu-switch {
+  position: absolute;
+  z-index: 10;
+  left: -999px;
+  visibility: hidden;
+}
+
+.mega__menu-switch:checked + div {
+  max-height: 0;
+  z-index: 4;
+}
+
+.mega__menu-switch:checked + div > div::after div::after {
+  opacity: 0;
+}
+
+.mega__menu::before {
+  content: '';
+  position: absolute;
+  top: -6px;
+  left: 39px;
+  height: 10px;
+  width: 10px;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  background-color: #fff;
+  border-left: 1px solid #e6e6e6;
+  border-top: 1px solid #e6e6e6;
+}
+
+.mega__menu-sale {
+  position: relative;
+}
+
+.mega__menu-sale img {
+  -webkit-transition: .2s;
+  transition: .2s;
+}
+
+.mega__menu-sale a:hover img {
+  opacity: 0.9;
+}
+
+.mega__menu-sale a:hover + div {
+  color: #f16d7f;
+}
+
+.mega__menu-sale-text {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  text-transform: uppercase;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  -webkit-transition: .2s;
+  transition: .2s;
+}
+
+.mega__menu-label {
+  display: inline-block;
+  width: inherit;
+  cursor: pointer;
+  -webkit-transition: .2s;
+  transition: .2s;
+}
+
+.mega__menu-label:hover {
+  color: #f16d7f;
+}
+
+@media screen and (max-width: 1199px) {
+  .container {
+    padding: 0 10px;
+  }
+  .mega__menu {
+    right: -70px;
+  }
+  .hot {
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
+    height: fit-content;
+    -ms-flex-line-pack: center;
+        align-content: center;
+    margin-top: 0;
+  }
+  .hot a {
+    margin-top: 20px;
+  }
+  .fetured {
+    margin-top: 20px;
+  }
+  .fetured__gallery {
+    -webkit-box-pack: space-evenly;
+        -ms-flex-pack: space-evenly;
+            justify-content: space-evenly;
+  }
+  .offer__pic {
+    margin-left: -10px;
+    margin-right: -10px;
+  }
+  .subscribe__box {
+    padding-top: 123px;
+  }
+  .cart__checkout {
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    -ms-flex-pack: distribute;
+        justify-content: space-around;
+  }
+  .goods-picture__box {
+    width: -webkit-fill-available;
+    max-height: 777px;
+  }
+  .product {
+    padding-top: 20px !important;
+    padding-bottom: 20px !important;
+  }
+  .sidebar {
+    min-width: 170px;
+    padding-right: 10px;
+  }
+  .information {
+    padding-top: 69px !important;
+  }
+}
+
+@media screen and (max-width: 991px) {
+  .container {
+    padding: 0 10px;
+  }
+  .mega__menu-wrapper {
+    display: none;
+  }
+  .header {
+    padding-top: 10px;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  .header__left {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  .header__search {
+    margin: 20px 0;
+    height: 52px;
+  }
+  .header__search input {
+    padding-right: 150px;
+    padding-left: 24px;
+  }
+  .header__search input::-webkit-input-placeholder {
+    font-size: 22px;
+  }
+  .header__search input:-ms-input-placeholder {
+    font-size: 22px;
+  }
+  .header__search input::-ms-input-placeholder {
+    font-size: 22px;
+  }
+  .header__search input::placeholder {
+    font-size: 22px;
+  }
+  .header__search button {
+    padding: 0 14px;
+    font-size: 20px;
+  }
+  .header-line {
+    padding-top: 15px;
+  }
+  .header__cart {
+    margin-top: 0;
+  }
+  .search__browse {
+    font-size: 22px;
+    line-height: 44px;
+    padding-left: 20px;
+    padding-right: 40px;
+  }
+  .navbar__menu-item:not(:last-child) {
+    margin-right: 22px;
+  }
+  .fetured__name p {
+    margin-bottom: 40px;
+  }
+  .fetured__button-browse {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-size: 22px;
+  }
+  .offer__pic {
+    background-position: center;
+  }
+  .offer__pic-offer {
+    margin-top: 300px;
+  }
+  .offer__doby {
+    margin-bottom: 0;
+  }
+  .subscribe__box {
+    padding-top: 50px;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  .subscribe__comment {
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    margin-bottom: 50px;
+  }
+  .bottom {
+    -ms-grid-columns: 1fr 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr;
+    justify-items: center;
+    margin-top: 30px;
+  }
+  .bottom__brand {
+    -ms-grid-column: 1;
+        grid-column-start: 1;
+    grid-column-end: 4;
+    padding-right: 0;
+    text-align: center;
+  }
+  .bottom .header__logo {
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
+  .bottom__menu .bottom__list {
+    text-align: center;
+  }
+  .newarriv {
+    min-height: 80px;
+  }
+  .form__login {
+    padding-right: 20px;
+  }
+  .goods-description {
+    margin-top: 0;
+  }
+  .goods-picture__box {
+    height: auto;
+  }
+  .like-olso h1 {
+    margin-top: 90px;
+  }
+  .sidebar {
+    min-width: 210px;
+  }
+  .choose__bar {
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    -webkit-box-pack: space-evenly;
+        -ms-flex-pack: space-evenly;
+            justify-content: space-evenly;
+  }
+  .choose__trendind {
+    margin-bottom: 20px;
+  }
+  .choose__size {
+    margin-bottom: 20px;
+  }
+  .product__gallery {
+    -webkit-box-pack: space-evenly;
+        -ms-flex-pack: space-evenly;
+            justify-content: space-evenly;
+  }
+  .information__item-text {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .browse__menu-wrapper {
+    top: 127px;
+  }
+  .browse__menu-chapter {
+    font-size: 16px;
+  }
+  .browse__menu-item {
+    font-size: 16px;
+  }
+  .cart__switcher:checked + div {
+    top: -580px;
+    opacity: 0;
+  }
+  .cart__menu {
+    top: 48px;
+    right: 0;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .header__left {
+    width: 100%;
+  }
+  .header__search {
+    width: inherit;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
+  .header__search input {
+    width: 100%;
+    padding-right: 0;
+    padding-left: 20px;
+  }
+  .header-line {
+    padding-bottom: 15px;
+  }
+  .navbar {
+    position: relative;
+    min-height: 0;
+  }
+  .navbar .mobile__menu-open {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    opacity: 0;
+    right: 10px;
+    top: -70px;
+    -webkit-transition: .3s;
+    transition: .3s;
+  }
+  .navbar .mobile__menu-close {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    opacity: 1;
+    right: 10px;
+    top: -70px;
+    -webkit-transition: .3s;
+    transition: .3s;
+  }
+  .navbar__menu-list {
+    padding: 0;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    max-height: 400px;
+    overflow: hidden;
+    -webkit-transition: .3s;
+    transition: .3s;
+  }
+  .navbar__menu-item {
+    margin-right: 0 !important;
+  }
+  .navbar input:checked ~ ul {
+    max-height: 0;
+  }
+  .navbar input:checked ~ .mobile__menu-close {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    opacity: 0;
+  }
+  .navbar input:checked ~ .mobile__menu-open {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    opacity: 1;
+  }
+  .brand__text {
+    margin-top: 300px;
+  }
+  .offer__doby {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  .offer__pic {
+    width: inherit;
+    background-image: cover;
+  }
+  .offer__detales {
+    margin: 0 auto;
+  }
+  .offer__detales-text h3 {
+    font-size: 25px;
+  }
+  .collapse__block-form {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  #collapse-switcher1:checked ~ div {
+    height: 800px;
+  }
+  #collapse-switcher2:checked ~ div {
+    height: 800px;
+  }
+  #collapse-switcher3:checked ~ div {
+    height: 800px;
+  }
+  #collapse-switcher4:checked ~ div {
+    height: 800px;
+  }
+  #collapse-switcher5:checked ~ div {
+    height: 800px;
+  }
+  #collapse-switcher6:checked ~ div {
+    height: 800px;
+  }
+  .cart__checkout .coupon {
+    padding-top: 40px;
+  }
+  .cart__checkout .total {
+    margin-top: 30px;
+  }
+  .cart__top {
+    display: none;
+  }
+  .goods-description h3 {
+    margin-top: 30px;
+  }
+  .goods-description__article {
+    margin-top: 5px;
+  }
+  .goods-description__choose {
+    padding-top: 40px;
+  }
+  .goods-description__price-line {
+    width: 500px;
+  }
+  .goods-description__main-button {
+    margin-bottom: 50px;
+  }
+  .goods-picture__image {
+    width: 80%;
+  }
+  .like-olso h1 {
+    margin-top: 50px;
+    margin-bottom: 50px;
+  }
+  .product {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  .sidebar {
+    width: -webkit-fill-available;
+  }
+  .sidebar__menu-item {
+    text-align: center;
+  }
+  .sidebar__menu-item li {
+    font-size: 18px;
+  }
+  .info__box {
+    height: auto;
+  }
+  .information {
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    padding-top: 20px !important;
+  }
+}
+
+@media screen and (max-width: 575px) {
+  .header__search {
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
+  .header__search input {
+    width: 100%;
+    padding-right: 0;
+    padding-left: 10px;
+  }
+  .brand__text-big {
+    line-height: 50px;
+    color: white;
+  }
+  .brand__text-small {
+    line-height: 38px;
+    color: white;
+  }
+  .hot-square {
+    width: 100vw;
+    height: 160px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  .hot-rectangle {
+    width: 100vw;
+    height: 160px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  .hot__label {
+    position: initial;
+  }
+  .hot .formen {
+    background-blend-mode: multiply;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+  .hot .accesories {
+    background-blend-mode: multiply;
+    background-color: rgba(0, 0, 0, 0.3);
+    background-size: cover;
+  }
+  .hot .women {
+    background-blend-mode: multiply;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+  .hot .forkids {
+    background-blend-mode: multiply;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+  .subscribe__comment {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    margin-bottom: 20px;
+  }
+  .subscribe__box {
+    padding-top: 20px;
+  }
+  .subscribe__mail .for {
+    margin-top: 3px;
+    margin-bottom: 10px;
+  }
+  .mail_subscribe input {
+    padding-right: 0;
+  }
+  .comment {
+    padding-left: 0;
+  }
+  .comment .bottom-line {
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
+  .footer__body {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: reverse;
+        -ms-flex-direction: column-reverse;
+            flex-direction: column-reverse;
+  }
+  .footer__links {
+    margin-top: 20px;
+  }
+  .bottom {
+    -ms-grid-columns: 1fr;
+        grid-template-columns: 1fr;
+  }
+  .bottom__menu {
+    -ms-grid-column: 1;
+        grid-column-start: 1;
+    grid-column-end: 4;
+  }
+  .form__login {
+    padding-right: 0;
+  }
+  .form__login button {
+    margin-right: 10px;
+  }
+  .newarriv {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-pack: center !important;
+        -ms-flex-pack: center !important;
+            justify-content: center !important;
+  }
+  .collapse__block-form .form__unit input {
+    width: 300px;
+  }
+  .cart__item {
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    font-size: 17px;
+  }
+  .cart__item .details {
+    width: 480px;
+    margin-bottom: 10px;
+  }
+  .cart__item .price {
+    width: 80px;
+  }
+  .cart__item .shipping {
+    -webkit-box-ordinal-group: 2;
+        -ms-flex-order: 1;
+            order: 1;
+  }
+  .cart__item .action {
+    -webkit-box-ordinal-group: 2;
+        -ms-flex-order: 1;
+            order: 1;
+    width: 275px;
+    height: 35px;
+    margin-top: 12px;
+  }
+  .cart__item-del {
+    height: inherit;
+    width: 100px;
+    border-radius: 4px;
+    background-color: #f16d7f;
+  }
+  .cart-table i {
+    font-size: 20px;
+    color: #fff;
+  }
+  .cart__buttons a {
+    width: 170px;
+  }
+  .goods-description__price-line {
+    display: none;
+  }
+  .goods-description__choose {
+    width: auto;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    padding-top: 0;
+  }
+  .goods-description__choose-feature {
+    margin-bottom: 20px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: baseline;
+        -ms-flex-align: baseline;
+            align-items: baseline;
+    width: auto;
+  }
+  .goods-description__choose-feature .input-name {
+    -webkit-box-flex: 16;
+        -ms-flex: 16;
+            flex: 16;
+    margin-right: 20px;
+  }
+  .goods-description__main-button {
+    width: -webkit-fill-available;
+  }
+  .sort__bar {
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
+  .viewtype__bar {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  .viewtype__page {
+    margin-bottom: 20px;
+  }
+  .browse__menu {
+    width: 354px;
+  }
+  .browse__menu-chapter {
+    font-size: 18px;
+  }
+  .browse__menu-item {
+    font-size: 17px;
+  }
+  .cart__switcher:checked + div {
+    top: 48px;
+    left: -380px;
+    opacity: 0;
+  }
+  .cart__menu {
+    left: -26px;
+  }
+}
diff --git a/goods/cart.html b/goods/cart.html
index d3eb01d..d7df9e9 100644
--- a/goods/cart.html
+++ b/goods/cart.html
@@ -16,7 +16,33 @@
             <a href="../index.html" class="header__logo"><img src="../img/logo.png" alt="logo" />Bran<span>d</span></a>
             <form method="GET" class="header__search">
                 <div class="search__browse">
-                    Browse<i class="fas fa-caret-down"></i>
+                    <label for="browsemenu"><span>Browse</span></label>
+                </div>
+                <input class="browse__menu-switch" checked type="checkbox" id="browsemenu">
+                <div class="browse__menu-wrapper">
+                    <div class="browse__menu">
+                        <ul class="browse__menu-chapter">
+                            <h4 class="browse__menu-chapter-title">Women</h4>
+                            <li class="browse__menu-item">Dresses</li>
+                            <li class="browse__menu-item">Tops</li>
+                            <li class="browse__menu-item">Sweaters/Knits</li>
+                            <li class="browse__menu-item">Jackets/Coats</li>
+                            <li class="browse__menu-item">Blazers</li>
+                            <li class="browse__menu-item">Denim</li>
+                            <li class="browse__menu-item">Leggings/Pants</li>
+                            <li class="browse__menu-item">Skirts/Shorts</li>
+                            <li class="browse__menu-item">Accessories</li>
+                        </ul>
+                        <ul class="browse__menu-chapter">
+                            <h4 class="browse__menu-chapter-title">Men</h4>
+                            <li class="browse__menu-item">Tees/Tank tops</li>
+                            <li class="browse__menu-item">Shirts/Polos</li>
+                            <li class="browse__menu-item">Sweaters</li>
+                            <li class="browse__menu-item">Sweatsirts/Hoodies</li>
+                            <li class="browse__menu-item">Blazers</li>
+                            <li class="browse__menu-item">Jackets/vests</li>
+                        </ul>
+                    </div>
                 </div>
                 <input type="text" name="search" placeholder="Search for Item..." />
                 <button><i class="fas fa-search"></i></button>
@@ -31,19 +57,71 @@
     <div class="header-line"></div>
 
     <div class="navbar container">
+        <input type="checkbox" checked id="mobile__menu-switch">
+        <label class="mobile__menu-open" for="mobile__menu-switch"><i class="fas fa-bars"></i></label>
+        <label class="mobile__menu-close" for="mobile__menu-switch"><i class="far fa-window-close"></i></label>
+
         <ul class="navbar__menu-list">
             <li class="navbar__menu-item"><a href="../index.html" class="active">Home</a></li>
             <li class="navbar__menu-item"><a href="checkout.html">Man</a></li>
-            <li class="navbar__menu-item" id="active"><a href="single_page.html">Women</a></li>
+            <li class="navbar__menu-item"><label class="mega__menu-label" for="megaswitch">Woman</label></li>
             <li class="navbar__menu-item"><a href="#">Kids</a></li>
             <li class="navbar__menu-item"><a href="product.html">Accoseriese</a></li>
-            <li class="navbar__menu-item"><a href="#">Featured</a></li>
+            <li class="navbar__menu-item"><a href="single_page.html">Featured</a></li>
             <li class="navbar__menu-item"><a href="#">Hot Deals</a></li>
         </ul>
+
+        <div class="mega__menu-wrapper">
+            <input class="mega__switcher" type="checkbox" checked id="megaswitch">
+
+            <div class="mega__menu">
+                <ul class="mega__menu-chapter">
+                    <h4 class="mega__menu-chapter-title">Women</h4>
+                    <li class="mega__menu-item">Dresses</li>
+                    <li class="mega__menu-item">Tops</li>
+                    <li class="mega__menu-item">Sweaters/Knits</li>
+                    <li class="mega__menu-item">Jackets/Coats</li>
+                    <li class="mega__menu-item">Blazers</li>
+                    <li class="mega__menu-item">Denim</li>
+                    <li class="mega__menu-item">Leggings/Pants</li>
+                    <li class="mega__menu-item">Skirts/Shorts</li>
+                    <li class="mega__menu-item">Accessories</li>
+                </ul>
+                <ul class="mega__menu-chapter">
+                    <h4 class="mega__menu-chapter-title">Women</h4>
+                    <li class="mega__menu-item">Tees/Tank tops</li>
+                    <li class="mega__menu-item">Shirts/Polos</li>
+                    <li class="mega__menu-item">Sweaters</li>
+                    <li class="mega__menu-item">Sweatsirts/Hoodies</li>
+                </ul>
+                <ul class="mega__menu-chapter">
+                    <h4 class="mega__menu-chapter-title">Women</h4>
+                    <li class="mega__menu-item">Tees/Tank tops</li>
+                    <li class="mega__menu-item">Shirts/Polos</li>
+                    <li class="mega__menu-item">Sweaters</li>
+                </ul>
+                <ul class="mega__menu-chapter">
+                    <h4 class="mega__menu-chapter-title">Women</h4>
+                    <li class="mega__menu-item">Tees/Tank tops</li>
+                    <li class="mega__menu-item">Shirts/Polos</li>
+                    <li class="mega__menu-item">Sweaters</li>
+                    <li class="mega__menu-item">Sweatsirts/Hoodies</li>
+                </ul>
+                <div class="mega__menu-sale">
+                    <a href="#"><img src="../img/Promo Ad.png" alt=""></a>
+                    <div class="mega__menu-sale-text">
+                        <span>Super</span>
+                        <span>sale!</span>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
     </div>
 
     <div class="newarriv">
-        <div class="container">
+        <div class="newarriv container">
             <div class="newarriv__main">New Arrivals</div>
             <div class="newarriv__nav">
                 <a href="../index.html">Home /</a>
@@ -145,6 +223,7 @@
                     <input id="state" type="text" placeholder="State">
                     <input id="zip" type="text" placeholder="Postcode / Zip">
                 </form>
+                <button class="cart__quote">get a quote</button>
             </div>
             <div class="coupon">
                 <span>coupon discount</span>
@@ -167,7 +246,7 @@
         </div>
 
 
-        <button class="cart__quote">get a quote</button>
+
 
     </div>
 
diff --git a/goods/checkout.html b/goods/checkout.html
index e3fc4ef..3217df0 100644
--- a/goods/checkout.html
+++ b/goods/checkout.html
@@ -16,34 +16,167 @@
             <a href="../index.html" class="header__logo"><img src="../img/logo.png" alt="logo" />Bran<span>d</span></a>
             <form method="GET" class="header__search">
                 <div class="search__browse">
-                    Browse<i class="fas fa-caret-down"></i>
+                    <label for="browsemenu"><span>Browse</span></label>
+                </div>
+                <input class="browse__menu-switch" checked type="checkbox" id="browsemenu">
+                <div class="browse__menu-wrapper">
+                    <div class="browse__menu">
+                        <ul class="browse__menu-chapter">
+                            <h4 class="browse__menu-chapter-title">Women</h4>
+                            <li class="browse__menu-item">Dresses</li>
+                            <li class="browse__menu-item">Tops</li>
+                            <li class="browse__menu-item">Sweaters/Knits</li>
+                            <li class="browse__menu-item">Jackets/Coats</li>
+                            <li class="browse__menu-item">Blazers</li>
+                            <li class="browse__menu-item">Denim</li>
+                            <li class="browse__menu-item">Leggings/Pants</li>
+                            <li class="browse__menu-item">Skirts/Shorts</li>
+                            <li class="browse__menu-item">Accessories</li>
+                        </ul>
+                        <ul class="browse__menu-chapter">
+                            <h4 class="browse__menu-chapter-title">Men</h4>
+                            <li class="browse__menu-item">Tees/Tank tops</li>
+                            <li class="browse__menu-item">Shirts/Polos</li>
+                            <li class="browse__menu-item">Sweaters</li>
+                            <li class="browse__menu-item">Sweatsirts/Hoodies</li>
+                            <li class="browse__menu-item">Blazers</li>
+                            <li class="browse__menu-item">Jackets/vests</li>
+                        </ul>
+                    </div>
                 </div>
                 <input type="text" name="search" placeholder="Search for Item..." />
                 <button><i class="fas fa-search"></i></button>
             </form>
         </div>
         <div class="header__right">
-            <a href="cart.html" class="header__cart"><img src="../img/cart.svg" alt="cart" /></a>
+
+            <label class="header__cart" for="cartswitch"><img src="../img/cart.svg" alt="cart" /></label>
+
             <a href="#" class="header__account">My Account<i class="fas fa-caret-down"></i></a>
         </div>
+
+        <input class="cart__switcher" type="checkbox" checked id="cartswitch">
+
+        <div class="cart__menu">
+            <div class="cart__menu-item">
+                <img class="cart__menu-item-img" src="../img/cart01.png" alt="">
+                <div class="cart__menu-item-name">
+                    <div class="cart__menu-item-good">Rebox Zane</div>
+                    <div class="cart__menu-item-stars">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star-half-alt"></i>
+                    </div>
+                    <div class="cart__menu-item-quantity">1 x $250</div>
+                </div>
+                <div class="cart__menu-item-cancel">
+                    <button class="cart__item-del">
+                        <i class="fas fa-times-circle"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="cart__menu-item">
+                <img class="cart__menu-item-img" src="../img/cart02.png" alt="">
+                <div class="cart__menu-item-name">
+                    <div class="cart__menu-item-good">Rebox Zane</div>
+                    <div class="cart__menu-item-stars">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star-half-alt"></i>
+                    </div>
+                    <div class="cart__menu-item-quantity">1 x $250</div>
+                </div>
+                <div class="cart__menu-item-cancel">
+                    <button class="cart__item-del">
+                        <i class="fas fa-times-circle"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="cart__menu-summ">
+                <div class="cart__menu-total">Total</div>
+                <div class="cart__menu-check"><span>$</span>500.00</div>
+            </div>
+            <div class="cart__menu-buttons">
+                <a class="cart__menu-checkout" href="#">checkout</a>
+                <a class="cart__menu-go" href="#">go to cart</a>
+            </div>
+        </div>
+
+
     </div>
 
     <div class="header-line"></div>
 
     <div class="navbar container">
+        <input type="checkbox" checked id="mobile__menu-switch">
+        <label class="mobile__menu-open" for="mobile__menu-switch"><i class="fas fa-bars"></i></label>
+        <label class="mobile__menu-close" for="mobile__menu-switch"><i class="far fa-window-close"></i></label>
+
         <ul class="navbar__menu-list">
             <li class="navbar__menu-item"><a href="../index.html" class="active">Home</a></li>
             <li class="navbar__menu-item" id="active"><a href="#">Man</a></li>
-            <li class="navbar__menu-item"><a href="single_page.html">Women</a></li>
+            <li class="navbar__menu-item"><label class="mega__menu-label" for="megaswitch">Woman</label></li>
             <li class="navbar__menu-item"><a href="#">Kids</a></li>
             <li class="navbar__menu-item"><a href="product.html">Accoseriese</a></li>
-            <li class="navbar__menu-item"><a href="#">Featured</a></li>
-            <li class="navbar__menu-item"><a href="#">Hot Deals</a></li>
+            <li class="navbar__menu-item"><a href="single_page.html">Featured</a></li>
+            <li class="navbar__menu-item"><a href="../goods/cart.html">Hot Deals</a></li>
         </ul>
+
+        <div class="mega__menu-wrapper">
+            <input class="mega__switcher" type="checkbox" checked id="megaswitch">
+
+            <div class="mega__menu">
+                <ul class="mega__menu-chapter">
+                    <h4 class="mega__menu-chapter-title">Women</h4>
+                    <li class="mega__menu-item">Dresses</li>
+                    <li class="mega__menu-item">Tops</li>
+                    <li class="mega__menu-item">Sweaters/Knits</li>
+                    <li class="mega__menu-item">Jackets/Coats</li>
+                    <li class="mega__menu-item">Blazers</li>
+                    <li class="mega__menu-item">Denim</li>
+                    <li class="mega__menu-item">Leggings/Pants</li>
+                    <li class="mega__menu-item">Skirts/Shorts</li>
+                    <li class="mega__menu-item">Accessories</li>
+                </ul>
+                <ul class="mega__menu-chapter">
+                    <h4 class="mega__menu-chapter-title">Women</h4>
+                    <li class="mega__menu-item">Tees/Tank tops</li>
+                    <li class="mega__menu-item">Shirts/Polos</li>
+                    <li class="mega__menu-item">Sweaters</li>
+                    <li class="mega__menu-item">Sweatsirts/Hoodies</li>
+                </ul>
+                <ul class="mega__menu-chapter">
+                    <h4 class="mega__menu-chapter-title">Women</h4>
+                    <li class="mega__menu-item">Tees/Tank tops</li>
+                    <li class="mega__menu-item">Shirts/Polos</li>
+                    <li class="mega__menu-item">Sweaters</li>
+                </ul>
+                <ul class="mega__menu-chapter">
+                    <h4 class="mega__menu-chapter-title">Women</h4>
+                    <li class="mega__menu-item">Tees/Tank tops</li>
+                    <li class="mega__menu-item">Shirts/Polos</li>
+                    <li class="mega__menu-item">Sweaters</li>
+                    <li class="mega__menu-item">Sweatsirts/Hoodies</li>
+                </ul>
+                <div class="mega__menu-sale">
+                    <a href="#"><img src="../img/Promo Ad.png" alt=""></a>
+                    <div class="mega__menu-sale-text">
+                        <span>Super</span>
+                        <span>sale!</span>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
     </div>
 
     <div class="newarriv">
-        <div class="container">
+        <div class="newarriv container">
             <div class="newarriv__main">New Arrivals</div>
             <div class="newarriv__nav">
                 <a href="../index.html">Home /</a>
diff --git a/goods/product.html b/goods/product.html
index 27b2e8c..1c9ee19 100644
--- a/goods/product.html
+++ b/goods/product.html
@@ -16,34 +16,166 @@
             <a href="../index.html" class="header__logo"><img src="../img/logo.png" alt="logo" />Bran<span>d</span></a>
             <form method="GET" class="header__search">
                 <div class="search__browse">
-                    Browse<i class="fas fa-caret-down"></i>
+                    <label for="browsemenu"><span>Browse</span></label>
+                </div>
+                <input class="browse__menu-switch" checked type="checkbox" id="browsemenu">
+                <div class="browse__menu-wrapper">
+                    <div class="browse__menu">
+                        <ul class="browse__menu-chapter">
+                            <h4 class="browse__menu-chapter-title">Women</h4>
+                            <li class="browse__menu-item">Dresses</li>
+                            <li class="browse__menu-item">Tops</li>
+                            <li class="browse__menu-item">Sweaters/Knits</li>
+                            <li class="browse__menu-item">Jackets/Coats</li>
+                            <li class="browse__menu-item">Blazers</li>
+                            <li class="browse__menu-item">Denim</li>
+                            <li class="browse__menu-item">Leggings/Pants</li>
+                            <li class="browse__menu-item">Skirts/Shorts</li>
+                            <li class="browse__menu-item">Accessories</li>
+                        </ul>
+                        <ul class="browse__menu-chapter">
+                            <h4 class="browse__menu-chapter-title">Men</h4>
+                            <li class="browse__menu-item">Tees/Tank tops</li>
+                            <li class="browse__menu-item">Shirts/Polos</li>
+                            <li class="browse__menu-item">Sweaters</li>
+                            <li class="browse__menu-item">Sweatsirts/Hoodies</li>
+                            <li class="browse__menu-item">Blazers</li>
+                            <li class="browse__menu-item">Jackets/vests</li>
+                        </ul>
+                    </div>
                 </div>
                 <input type="text" name="search" placeholder="Search for Item..." />
                 <button><i class="fas fa-search"></i></button>
             </form>
         </div>
         <div class="header__right">
-            <a href="cart.html" class="header__cart"><img src="../img/cart.svg" alt="cart" /></a>
+
+            <label class="header__cart" for="cartswitch"><img src="../img/cart.svg" alt="cart" /></label>
+
             <a href="#" class="header__account">My Account<i class="fas fa-caret-down"></i></a>
         </div>
+
+        <input class="cart__switcher" type="checkbox" checked id="cartswitch">
+
+        <div class="cart__menu">
+            <div class="cart__menu-item">
+                <img class="cart__menu-item-img" src="../img/cart01.png" alt="">
+                <div class="cart__menu-item-name">
+                    <div class="cart__menu-item-good">Rebox Zane</div>
+                    <div class="cart__menu-item-stars">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star-half-alt"></i>
+                    </div>
+                    <div class="cart__menu-item-quantity">1 x $250</div>
+                </div>
+                <div class="cart__menu-item-cancel">
+                    <button class="cart__item-del">
+                        <i class="fas fa-times-circle"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="cart__menu-item">
+                <img class="cart__menu-item-img" src="../img/cart02.png" alt="">
+                <div class="cart__menu-item-name">
+                    <div class="cart__menu-item-good">Rebox Zane</div>
+                    <div class="cart__menu-item-stars">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star-half-alt"></i>
+                    </div>
+                    <div class="cart__menu-item-quantity">1 x $250</div>
+                </div>
+                <div class="cart__menu-item-cancel">
+                    <button class="cart__item-del">
+                        <i class="fas fa-times-circle"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="cart__menu-summ">
+                <div class="cart__menu-total">Total</div>
+                <div class="cart__menu-check"><span>$</span>500.00</div>
+            </div>
+            <div class="cart__menu-buttons">
+                <a class="cart__menu-checkout" href="#">checkout</a>
+                <a class="cart__menu-go" href="#">go to cart</a>
+            </div>
+        </div>
+
     </div>
 
     <div class="header-line"></div>
 
     <div class="navbar container">
+        <input type="checkbox" checked id="mobile__menu-switch">
+        <label class="mobile__menu-open" for="mobile__menu-switch"><i class="fas fa-bars"></i></label>
+        <label class="mobile__menu-close" for="mobile__menu-switch"><i class="far fa-window-close"></i></label>
+
         <ul class="navbar__menu-list">
             <li class="navbar__menu-item"><a href="../index.html" class="active">Home</a></li>
             <li class="navbar__menu-item"><a href="checkout.html">Man</a></li>
-            <li class="navbar__menu-item"><a href="single_page.html">Women</a></li>
+            <li class="navbar__menu-item"><label class="mega__menu-label" for="megaswitch">Woman</label></li>
             <li class="navbar__menu-item"><a href="#">Kids</a></li>
             <li class="navbar__menu-item" id="active"><a href="#">Accoseriese</a></li>
-            <li class="navbar__menu-item"><a href="#">Featured</a></li>
-            <li class="navbar__menu-item"><a href="#">Hot Deals</a></li>
+            <li class="navbar__menu-item"><a href="single_page.html">Featured</a></li>
+            <li class="navbar__menu-item"><a href="../goods/cart.html">Hot Deals</a></li>
         </ul>
+
+        <div class="mega__menu-wrapper">
+            <input class="mega__switcher" type="checkbox" checked id="megaswitch">
+
+            <div class="mega__menu">
+                <ul class="mega__menu-chapter">
+                    <h4 class="mega__menu-chapter-title">Women</h4>
+                    <li class="mega__menu-item">Dresses</li>
+                    <li class="mega__menu-item">Tops</li>
+                    <li class="mega__menu-item">Sweaters/Knits</li>
+                    <li class="mega__menu-item">Jackets/Coats</li>
+                    <li class="mega__menu-item">Blazers</li>
+                    <li class="mega__menu-item">Denim</li>
+                    <li class="mega__menu-item">Leggings/Pants</li>
+                    <li class="mega__menu-item">Skirts/Shorts</li>
+                    <li class="mega__menu-item">Accessories</li>
+                </ul>
+                <ul class="mega__menu-chapter">
+                    <h4 class="mega__menu-chapter-title">Women</h4>
+                    <li class="mega__menu-item">Tees/Tank tops</li>
+                    <li class="mega__menu-item">Shirts/Polos</li>
+                    <li class="mega__menu-item">Sweaters</li>
+                    <li class="mega__menu-item">Sweatsirts/Hoodies</li>
+                </ul>
+                <ul class="mega__menu-chapter">
+                    <h4 class="mega__menu-chapter-title">Women</h4>
+                    <li class="mega__menu-item">Tees/Tank tops</li>
+                    <li class="mega__menu-item">Shirts/Polos</li>
+                    <li class="mega__menu-item">Sweaters</li>
+                </ul>
+                <ul class="mega__menu-chapter">
+                    <h4 class="mega__menu-chapter-title">Women</h4>
+                    <li class="mega__menu-item">Tees/Tank tops</li>
+                    <li class="mega__menu-item">Shirts/Polos</li>
+                    <li class="mega__menu-item">Sweaters</li>
+                    <li class="mega__menu-item">Sweatsirts/Hoodies</li>
+                </ul>
+                <div class="mega__menu-sale">
+                    <a href="#"><img src="../img/Promo Ad.png" alt=""></a>
+                    <div class="mega__menu-sale-text">
+                        <span>Super</span>
+                        <span>sale!</span>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
     </div>
 
     <div class="newarriv">
-        <div class="container">
+        <div class="newarriv container">
             <div class="newarriv__main">New Arrivals</div>
             <div class="newarriv__nav">
                 <a href="../index.html">Home /</a>
@@ -175,12 +307,12 @@
                             <button class="filter__range-handle bar__min"></button>
                             <button class="filter__range-handle bar__max"></button>
                         </div>
-                    
 
-                    <div class="filter__range-value">
-                        <label>$<input type="text" name="min-interval" value="52"></label>
-                        <label>$<input type="text" name="max-interval" value="400"></label>
-                    </div>
+
+                        <div class="filter__range-value">
+                            <label>$<input type="text" name="min-interval" value="52"></label>
+                            <label>$<input type="text" name="max-interval" value="400"></label>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -192,7 +324,6 @@
                         <option value="">Brand</option>
                         <option value="">Price</option>
                     </select>
-                    <i class="fas fa-caret-down"></i>
                 </div>
                 <div class="sort__box">
                     <div class="sort__box-title">Show</div>
@@ -201,7 +332,6 @@
                         <option selected value="">09</option>
                         <option value="">18</option>
                     </select>
-                    <i class="fas fa-caret-down"></i>
                 </div>
             </div>
             <div class="show__box">
@@ -213,42 +343,42 @@
                     </a>
                     <a href="#" class="product__gallery-item">
                         <div class="product__gallery-picture"><img src="../img/p02.png" alt=""></div>
-                        <div class="product__gallery-name">Mango  People  T-shirt</div>
+                        <div class="product__gallery-name">Mango People T-shirt</div>
                         <div class="product__gallery-price">$52.00</div>
                     </a>
                     <a href="#" class="product__gallery-item">
                         <div class="product__gallery-picture"><img src="../img/p03.png" alt=""></div>
-                        <div class="product__gallery-name">Mango  People  T-shirt</div>
+                        <div class="product__gallery-name">Mango People T-shirt</div>
                         <div class="product__gallery-price">$52.00</div>
                     </a>
                     <a href="#" class="product__gallery-item">
                         <div class="product__gallery-picture"><img src="../img/p04.png" alt=""></div>
-                        <div class="product__gallery-name">Mango  People  T-shirt</div>
+                        <div class="product__gallery-name">Mango People T-shirt</div>
                         <div class="product__gallery-price">$52.00</div>
                     </a>
                     <a href="#" class="product__gallery-item">
                         <div class="product__gallery-picture"><img src="../img/p05.png" alt=""></div>
-                        <div class="product__gallery-name">Mango  People  T-shirt</div>
+                        <div class="product__gallery-name">Mango People T-shirt</div>
                         <div class="product__gallery-price">$52.00</div>
                     </a>
                     <a href="#" class="product__gallery-item">
                         <div class="product__gallery-picture"><img src="../img/p06.png" alt=""></div>
-                        <div class="product__gallery-name">Mango  People  T-shirt</div>
+                        <div class="product__gallery-name">Mango People T-shirt</div>
                         <div class="product__gallery-price">$52.00</div>
                     </a>
                     <a href="#" class="product__gallery-item">
                         <div class="product__gallery-picture"><img src="../img/p07.png" alt=""></div>
-                        <div class="product__gallery-name">Mango  People  T-shirt</div>
+                        <div class="product__gallery-name">Mango People T-shirt</div>
                         <div class="product__gallery-price">$52.00</div>
                     </a>
                     <a href="#" class="product__gallery-item">
                         <div class="product__gallery-picture"><img src="../img/p08.png" alt=""></div>
-                        <div class="product__gallery-name">Mango  People  T-shirt</div>
+                        <div class="product__gallery-name">Mango People T-shirt</div>
                         <div class="product__gallery-price">$52.00</div>
                     </a>
                     <a href="#" class="product__gallery-item">
                         <div class="product__gallery-picture"><img src="../img/p09.png" alt=""></div>
-                        <div class="product__gallery-name">Mango  People  T-shirt</div>
+                        <div class="product__gallery-name">Mango People T-shirt</div>
                         <div class="product__gallery-price">$52.00</div>
                     </a>
                 </div>
diff --git a/goods/single_page.html b/goods/single_page.html
index 761c8bb..3bcb72c 100644
--- a/goods/single_page.html
+++ b/goods/single_page.html
@@ -16,34 +16,166 @@
             <a href="../index.html" class="header__logo"><img src="../img/logo.png" alt="logo" />Bran<span>d</span></a>
             <form method="GET" class="header__search">
                 <div class="search__browse">
-                    Browse<i class="fas fa-caret-down"></i>
+                    <label for="browsemenu"><span>Browse</span></label>
+                </div>
+                <input class="browse__menu-switch" checked type="checkbox" id="browsemenu">
+                <div class="browse__menu-wrapper">
+                    <div class="browse__menu">
+                        <ul class="browse__menu-chapter">
+                            <h4 class="browse__menu-chapter-title">Women</h4>
+                            <li class="browse__menu-item">Dresses</li>
+                            <li class="browse__menu-item">Tops</li>
+                            <li class="browse__menu-item">Sweaters/Knits</li>
+                            <li class="browse__menu-item">Jackets/Coats</li>
+                            <li class="browse__menu-item">Blazers</li>
+                            <li class="browse__menu-item">Denim</li>
+                            <li class="browse__menu-item">Leggings/Pants</li>
+                            <li class="browse__menu-item">Skirts/Shorts</li>
+                            <li class="browse__menu-item">Accessories</li>
+                        </ul>
+                        <ul class="browse__menu-chapter">
+                            <h4 class="browse__menu-chapter-title">Men</h4>
+                            <li class="browse__menu-item">Tees/Tank tops</li>
+                            <li class="browse__menu-item">Shirts/Polos</li>
+                            <li class="browse__menu-item">Sweaters</li>
+                            <li class="browse__menu-item">Sweatsirts/Hoodies</li>
+                            <li class="browse__menu-item">Blazers</li>
+                            <li class="browse__menu-item">Jackets/vests</li>
+                        </ul>
+                    </div>
                 </div>
                 <input type="text" name="search" placeholder="Search for Item..." />
                 <button><i class="fas fa-search"></i></button>
             </form>
         </div>
         <div class="header__right">
-            <a href="cart.html" class="header__cart"><img src="../img/cart.svg" alt="cart" /></a>
+
+            <label class="header__cart" for="cartswitch"><img src="../img/cart.svg" alt="cart" /></label>
+
             <a href="#" class="header__account">My Account<i class="fas fa-caret-down"></i></a>
         </div>
+
+        <input class="cart__switcher" type="checkbox" checked id="cartswitch">
+
+        <div class="cart__menu">
+            <div class="cart__menu-item">
+                <img class="cart__menu-item-img" src="../img/cart01.png" alt="">
+                <div class="cart__menu-item-name">
+                    <div class="cart__menu-item-good">Rebox Zane</div>
+                    <div class="cart__menu-item-stars">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star-half-alt"></i>
+                    </div>
+                    <div class="cart__menu-item-quantity">1 x $250</div>
+                </div>
+                <div class="cart__menu-item-cancel">
+                    <button class="cart__item-del">
+                        <i class="fas fa-times-circle"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="cart__menu-item">
+                <img class="cart__menu-item-img" src="../img/cart02.png" alt="">
+                <div class="cart__menu-item-name">
+                    <div class="cart__menu-item-good">Rebox Zane</div>
+                    <div class="cart__menu-item-stars">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star-half-alt"></i>
+                    </div>
+                    <div class="cart__menu-item-quantity">1 x $250</div>
+                </div>
+                <div class="cart__menu-item-cancel">
+                    <button class="cart__item-del">
+                        <i class="fas fa-times-circle"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="cart__menu-summ">
+                <div class="cart__menu-total">Total</div>
+                <div class="cart__menu-check"><span>$</span>500.00</div>
+            </div>
+            <div class="cart__menu-buttons">
+                <a class="cart__menu-checkout" href="#">checkout</a>
+                <a class="cart__menu-go" href="#">go to cart</a>
+            </div>
+        </div>
+
     </div>
 
     <div class="header-line"></div>
 
     <div class="navbar container">
+        <input type="checkbox" checked id="mobile__menu-switch">
+        <label class="mobile__menu-open" for="mobile__menu-switch"><i class="fas fa-bars"></i></label>
+        <label class="mobile__menu-close" for="mobile__menu-switch"><i class="far fa-window-close"></i></label>
+
         <ul class="navbar__menu-list">
             <li class="navbar__menu-item"><a href="../index.html" class="active">Home</a></li>
             <li class="navbar__menu-item"><a href="checkout.html">Man</a></li>
-            <li class="navbar__menu-item" id="active"><a href="#">Women</a></li>
+            <li class="navbar__menu-item"><label class="mega__menu-label" for="megaswitch">Woman</label></li>
             <li class="navbar__menu-item"><a href="#">Kids</a></li>
             <li class="navbar__menu-item"><a href="product.html">Accoseriese</a></li>
-            <li class="navbar__menu-item"><a href="#">Featured</a></li>
-            <li class="navbar__menu-item"><a href="#">Hot Deals</a></li>
+            <li class="navbar__menu-item" id="active"><a href="single_page.html">Featured</a></li>
+            <li class="navbar__menu-item"><a href="../goods/cart.html">Hot Deals</a></li>
         </ul>
+
+        <div class="mega__menu-wrapper">
+            <input class="mega__switcher" type="checkbox" checked id="megaswitch">
+
+            <div class="mega__menu">
+                <ul class="mega__menu-chapter">
+                    <h4 class="mega__menu-chapter-title">Women</h4>
+                    <li class="mega__menu-item">Dresses</li>
+                    <li class="mega__menu-item">Tops</li>
+                    <li class="mega__menu-item">Sweaters/Knits</li>
+                    <li class="mega__menu-item">Jackets/Coats</li>
+                    <li class="mega__menu-item">Blazers</li>
+                    <li class="mega__menu-item">Denim</li>
+                    <li class="mega__menu-item">Leggings/Pants</li>
+                    <li class="mega__menu-item">Skirts/Shorts</li>
+                    <li class="mega__menu-item">Accessories</li>
+                </ul>
+                <ul class="mega__menu-chapter">
+                    <h4 class="mega__menu-chapter-title">Women</h4>
+                    <li class="mega__menu-item">Tees/Tank tops</li>
+                    <li class="mega__menu-item">Shirts/Polos</li>
+                    <li class="mega__menu-item">Sweaters</li>
+                    <li class="mega__menu-item">Sweatsirts/Hoodies</li>
+                </ul>
+                <ul class="mega__menu-chapter">
+                    <h4 class="mega__menu-chapter-title">Women</h4>
+                    <li class="mega__menu-item">Tees/Tank tops</li>
+                    <li class="mega__menu-item">Shirts/Polos</li>
+                    <li class="mega__menu-item">Sweaters</li>
+                </ul>
+                <ul class="mega__menu-chapter">
+                    <h4 class="mega__menu-chapter-title">Women</h4>
+                    <li class="mega__menu-item">Tees/Tank tops</li>
+                    <li class="mega__menu-item">Shirts/Polos</li>
+                    <li class="mega__menu-item">Sweaters</li>
+                    <li class="mega__menu-item">Sweatsirts/Hoodies</li>
+                </ul>
+                <div class="mega__menu-sale">
+                    <a href="#"><img src="../img/Promo Ad.png" alt=""></a>
+                    <div class="mega__menu-sale-text">
+                        <span>Super</span>
+                        <span>sale!</span>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
     </div>
 
     <div class="newarriv">
-        <div class="container">
+        <div class="newarriv container">
             <div class="newarriv__main">New Arrivals</div>
             <div class="newarriv__nav">
                 <a href="../index.html">Home /</a>
@@ -82,7 +214,7 @@ <h2>Moschino Cheap And Chic</h2>
             <div class="goods-description__choose-feature">
                 <div class="input-name">Choose Color</div>
                 <div class="goods-description__choose-color">
-                    <select class="goods-description__choose-input" name="" id="">
+                    <select class="goods-description__choose-input">
                         <option value="1" id="red">Red</option>
                         <option value="2" id="yellow">Yellow</option>
                         <option value="3" id="green">Green</option>
@@ -92,7 +224,7 @@ <h2>Moschino Cheap And Chic</h2>
             </div>
             <div class="goods-description__choose-feature">
                 <div class="input-name">Choose Size</div>
-                <select class="goods-description__choose-input" name="" id="">
+                <select class="goods-description__choose-input">
                     <option value="">XXL</option>
                     <option value="">XL</option>
                     <option value="">L</option>
@@ -101,7 +233,7 @@ <h2>Moschino Cheap And Chic</h2>
                     <option value="">XS</option>
                 </select>
             </div>
-            <div class="goods-description__choose-feature">
+            <div class="goods-description__choose-feature  input-number">
                 <div class="input-name">Quantity</div>
                 <input class="goods-description__choose-input" type="number" value="2">
             </div>
diff --git a/img/Promo Ad.png b/img/Promo Ad.png
new file mode 100644
index 0000000..6a657ee
Binary files /dev/null and b/img/Promo Ad.png differ
diff --git a/img/caret-down.svg b/img/caret-down.svg
new file mode 100644
index 0000000..be876b4
--- /dev/null
+++ b/img/caret-down.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 292.362 292.362" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
+<g xmlns="http://www.w3.org/2000/svg">
+	<path d="M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424   C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428   s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z" fill="#838383" data-original="#000000" style="" class=""/>
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+</g></svg>
diff --git a/img/cart01.png b/img/cart01.png
new file mode 100644
index 0000000..4ee3f2b
Binary files /dev/null and b/img/cart01.png differ
diff --git a/img/cart02.png b/img/cart02.png
new file mode 100644
index 0000000..3d41dc2
Binary files /dev/null and b/img/cart02.png differ
diff --git a/index.html b/index.html
index a738fbf..96ebb70 100644
--- a/index.html
+++ b/index.html
@@ -16,30 +16,164 @@
       <a href="index.html" class="header__logo"><img src="img/logo.png" alt="logo" />Bran<span>d</span></a>
       <form method="GET" class="header__search">
         <div class="search__browse">
-          Browse<i class="fas fa-caret-down"></i>
+          <label for="browsemenu"><span>Browse</span></label>
+        </div>
+        <input class="browse__menu-switch" checked type="checkbox" id="browsemenu">
+        <div class="browse__menu-wrapper">
+          <div class="browse__menu">
+            <ul class="browse__menu-chapter">
+              <h4 class="browse__menu-chapter-title">Women</h4>
+              <li class="browse__menu-item">Dresses</li>
+              <li class="browse__menu-item">Tops</li>
+              <li class="browse__menu-item">Sweaters/Knits</li>
+              <li class="browse__menu-item">Jackets/Coats</li>
+              <li class="browse__menu-item">Blazers</li>
+              <li class="browse__menu-item">Denim</li>
+              <li class="browse__menu-item">Leggings/Pants</li>
+              <li class="browse__menu-item">Skirts/Shorts</li>
+              <li class="browse__menu-item">Accessories</li>
+            </ul>
+            <ul class="browse__menu-chapter">
+              <h4 class="browse__menu-chapter-title">Men</h4>
+              <li class="browse__menu-item">Tees/Tank tops</li>
+              <li class="browse__menu-item">Shirts/Polos</li>
+              <li class="browse__menu-item">Sweaters</li>
+              <li class="browse__menu-item">Sweatsirts/Hoodies</li>
+              <li class="browse__menu-item">Blazers</li>
+              <li class="browse__menu-item">Jackets/vests</li>
+            </ul>
+          </div>
         </div>
         <input type="text" name="search" placeholder="Search for Item..." />
         <button><i class="fas fa-search"></i></button>
       </form>
     </div>
     <div class="header__right">
-      <a href="goods/cart.html" class="header__cart"><img src="img/cart.svg" alt="cart" /></a>
+
+      <label class="header__cart" for="cartswitch"><img src="img/cart.svg" alt="cart" /></label>
+
       <a href="#" class="header__account">My Account<i class="fas fa-caret-down"></i></a>
+
+      <input class="cart__switcher" type="checkbox" checked id="cartswitch">
+
+      <div class="cart__menu">
+        <div class="cart__menu-item">
+          <img class="cart__menu-item-img" src="img/cart01.png" alt="">
+          <div class="cart__menu-item-name">
+            <div class="cart__menu-item-good">Rebox Zane</div>
+            <div class="cart__menu-item-stars">
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star-half-alt"></i>
+            </div>
+            <div class="cart__menu-item-quantity">1 x $250</div>
+          </div>
+          <div class="cart__menu-item-cancel">
+            <button class="cart__item-del">
+              <i class="fas fa-times-circle"></i>
+            </button>
+          </div>
+        </div>
+        <div class="cart__menu-item">
+          <img class="cart__menu-item-img" src="img/cart02.png" alt="">
+          <div class="cart__menu-item-name">
+            <div class="cart__menu-item-good">Rebox Zane</div>
+            <div class="cart__menu-item-stars">
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star-half-alt"></i>
+            </div>
+            <div class="cart__menu-item-quantity">1 x $250</div>
+          </div>
+          <div class="cart__menu-item-cancel">
+            <button class="cart__item-del">
+              <i class="fas fa-times-circle"></i>
+            </button>
+          </div>
+        </div>
+        <div class="cart__menu-summ">
+          <div class="cart__menu-total">Total</div>
+          <div class="cart__menu-check"><span>$</span>500.00</div>
+        </div>
+        <div class="cart__menu-buttons">
+          <a class="cart__menu-checkout" href="#">checkout</a>
+          <a class="cart__menu-go" href="#">go to cart</a>
+        </div>
+      </div>
+
     </div>
+
+
   </div>
 
   <div class="header-line"></div>
 
   <div class="navbar container">
+    <input type="checkbox" checked id="mobile__menu-switch">
+    <label class="mobile__menu-open" for="mobile__menu-switch"><i class="fas fa-bars"></i></label>
+    <label class="mobile__menu-close" for="mobile__menu-switch"><i class="far fa-window-close"></i></label>
+
     <ul class="navbar__menu-list">
       <li class="navbar__menu-item" id="active"><a href="#">Home</a></li>
       <li class="navbar__menu-item"><a href="goods/checkout.html">Man</a></li>
-      <li class="navbar__menu-item"><a href="goods/single_page.html">Women</a></li>
+      <li class="navbar__menu-item"><label class="mega__menu-label" for="megaswitch">Woman</label></li>
       <li class="navbar__menu-item"><a href="#">Kids</a></li>
       <li class="navbar__menu-item"><a href="goods/product.html">Accoseriese</a></li>
-      <li class="navbar__menu-item"><a href="#">Featured</a></li>
-      <li class="navbar__menu-item"><a href="#">Hot Deals</a></li>
+      <li class="navbar__menu-item"><a href="goods/single_page.html">Featured</a></li>
+      <li class="navbar__menu-item"><a href="goods/cart.html">Hot Deals</a></li>
     </ul>
+
+    <div class="mega__menu-wrapper">
+      <input class="mega__switcher" type="checkbox" checked id="megaswitch">
+
+      <div class="mega__menu">
+        <ul class="mega__menu-chapter">
+          <h4 class="mega__menu-chapter-title">Women</h4>
+          <li class="mega__menu-item">Dresses</li>
+          <li class="mega__menu-item">Tops</li>
+          <li class="mega__menu-item">Sweaters/Knits</li>
+          <li class="mega__menu-item">Jackets/Coats</li>
+          <li class="mega__menu-item">Blazers</li>
+          <li class="mega__menu-item">Denim</li>
+          <li class="mega__menu-item">Leggings/Pants</li>
+          <li class="mega__menu-item">Skirts/Shorts</li>
+          <li class="mega__menu-item">Accessories</li>
+        </ul>
+        <ul class="mega__menu-chapter">
+          <h4 class="mega__menu-chapter-title">Women</h4>
+          <li class="mega__menu-item">Tees/Tank tops</li>
+          <li class="mega__menu-item">Shirts/Polos</li>
+          <li class="mega__menu-item">Sweaters</li>
+          <li class="mega__menu-item">Sweatsirts/Hoodies</li>
+        </ul>
+        <ul class="mega__menu-chapter">
+          <h4 class="mega__menu-chapter-title">Women</h4>
+          <li class="mega__menu-item">Tees/Tank tops</li>
+          <li class="mega__menu-item">Shirts/Polos</li>
+          <li class="mega__menu-item">Sweaters</li>
+        </ul>
+        <ul class="mega__menu-chapter">
+          <h4 class="mega__menu-chapter-title">Women</h4>
+          <li class="mega__menu-item">Tees/Tank tops</li>
+          <li class="mega__menu-item">Shirts/Polos</li>
+          <li class="mega__menu-item">Sweaters</li>
+          <li class="mega__menu-item">Sweatsirts/Hoodies</li>
+        </ul>
+        <div class="mega__menu-sale">
+          <a href="#"><img src="img/Promo Ad.png" alt=""></a>
+          <div class="mega__menu-sale-text">
+            <span>Super</span>
+            <span>sale!</span>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
   </div>
 
   <div class="brand">
@@ -48,6 +182,7 @@
         <div class="brand__text-big">The brand</div>
         <div class="brand__text-small">of luxerious <span>fashion</span></div>
       </div>
+      <div></div>
     </div>
   </div>
 
@@ -146,53 +281,53 @@ <h2>Fetured Items</h2>
     </div>
   </div>
 
-  <div class="offer">
-    <div class="offer__doby container">
-      <div class="offer__pic">
-        <div class="offer__pic-offer">30% <span>Offer</span></div>
-        <div class="offer__pic-women">For women</div>
+
+  <div class="offer__doby container">
+    <div class="offer__pic">
+      <div class="offer__pic-offer">30% <span>Offer</span></div>
+      <div class="offer__pic-women">For women</div>
+    </div>
+    <div class="offer__detales">
+      <div class="offer__detales-item">
+        <div class="offer__detales-icon">
+          <img src="img/Car.svg" alt="#" />
+        </div>
+        <div class="offer__detales-text">
+          <h3>Free Delivery</h3>
+          <p>
+            Worldwide delivery on all. Authorit tively morph next-generation
+            innov tion with extensive models.
+          </p>
+        </div>
       </div>
-      <div class="offer__detales">
-        <div class="offer__detales-item">
-          <div class="offer__detales-icon">
-            <img src="img/Car.svg" alt="#" />
-          </div>
-          <div class="offer__detales-text">
-            <h3>Free Delivery</h3>
-            <p>
-              Worldwide delivery on all. Authorit tively morph next-generation
-              innov tion with extensive models.
-            </p>
-          </div>
+      <div class="offer__detales-item">
+        <div class="offer__detales-icon">
+          <img src="img/percent.svg" alt="#" />
         </div>
-        <div class="offer__detales-item">
-          <div class="offer__detales-icon">
-            <img src="img/percent.svg" alt="#" />
-          </div>
-          <div class="offer__detales-text">
-            <h3>Sales & discounts</h3>
-            <p>
-              Worldwide delivery on all. Authorit tively morph next-generation
-              innov tion with extensive models.
-            </p>
-          </div>
+        <div class="offer__detales-text">
+          <h3>Sales & discounts</h3>
+          <p>
+            Worldwide delivery on all. Authorit tively morph next-generation
+            innov tion with extensive models.
+          </p>
         </div>
-        <div class="offer__detales-item">
-          <div class="offer__detales-icon">
-            <img src="img/crown.svg" alt="#" />
-          </div>
-          <div class="offer__detales-text">
-            <h3>Quality assurance</h3>
-            <p>
-              Worldwide delivery on all. Authorit tively morph next-generation
-              innov tion with extensive models.
-            </p>
-          </div>
+      </div>
+      <div class="offer__detales-item">
+        <div class="offer__detales-icon">
+          <img src="img/crown.svg" alt="#" />
+        </div>
+        <div class="offer__detales-text">
+          <h3>Quality assurance</h3>
+          <p>
+            Worldwide delivery on all. Authorit tively morph next-generation
+            innov tion with extensive models.
+          </p>
         </div>
       </div>
     </div>
   </div>
 
+
   <div class="subscribe">
     <div class="subscribe__box container">
       <div class="subscribe__comment">
@@ -298,6 +433,7 @@ <h3>Quality assurance</h3>
       </div>
     </div>
   </div>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/css/_body.sass b/sass/_body.sass
similarity index 95%
rename from css/_body.sass
rename to sass/_body.sass
index 87b7e85..f704e84 100644
--- a/css/_body.sass
+++ b/sass/_body.sass
@@ -27,5 +27,5 @@ li
   font-weight: 700
 
 .container
-  width: 1140px
+  max-width: 1140px
   margin: 0 auto
diff --git a/css/_cart.sass b/sass/_cart.sass
similarity index 97%
rename from css/_cart.sass
rename to sass/_cart.sass
index b1cf6a3..03fb1dd 100644
--- a/css/_cart.sass
+++ b/sass/_cart.sass
@@ -1,7 +1,7 @@
 @import "_variables.sass"
 
 .newarriv
-    height: 148px
+    min-height: 148px
     background-color: #f8f3f4
     & div
         height: inherit
@@ -30,8 +30,9 @@
         color: $mainRedColor
 
 .cart
-    height: 1123px
+    min-height: 1123px
     font-weight: 400
+    padding-bottom: 20px!important
     & .details
         width: 440px
     & .price
@@ -70,7 +71,7 @@
 .cart__item
     align-items: center
     padding-top: 20px
-    height: 115px
+    min-height: 115px
     font-size: 13px
     color: #656565
     & .details
@@ -82,7 +83,7 @@
             color: #575757
             & .name
                 margin-top: 10px
-                color: #222222
+                color: $mainFontColor
                 line-height: 1.2
                 text-transform: uppercase
             & .color
@@ -97,7 +98,7 @@
             height: 30px
             width: 40px
             text-align: center
-            padding-left: 15px
+            padding: 0 8px
             border: 1px solid #eaeaea
     &-del
         border-radius: 50%
@@ -133,13 +134,10 @@
         &:active
             @extend %activeButtonColor 
         
-
 .cart__checkout
     display: flex
     justify-content: space-between
-
-.cart__checkout
-    display: flex
+    flex-wrap: wrap
     & .shipping
         width: 355px
         display: flex
diff --git a/css/_checkout.sass b/sass/_checkout.sass
similarity index 97%
rename from css/_checkout.sass
rename to sass/_checkout.sass
index ce87496..2ed5bdd 100644
--- a/css/_checkout.sass
+++ b/sass/_checkout.sass
@@ -16,7 +16,7 @@
             line-height: 72px
             font-weight: 700
             text-transform: uppercase
-            color: #222222
+            color: $mainFontColor
             &:hover 
                 background-color: #fafafa
 .collapse__switcher
@@ -73,7 +73,7 @@
             font-size: 13px
             line-height: 1.2
             text-transform: uppercase
-            color: #222222
+            color: $mainFontColor
             margin-bottom: 8px
             &-description
                 font-size: 13px
@@ -88,7 +88,7 @@
         line-height: 1.2
         // font-weight: 400
         text-transform: uppercase
-        color: #222222  
+        color: $mainFontColor
     button
         width: 180px
         height: 50px 
diff --git a/css/_footer.sass b/sass/_footer.sass
similarity index 77%
rename from css/_footer.sass
rename to sass/_footer.sass
index bc954bb..06f6750 100644
--- a/css/_footer.sass
+++ b/sass/_footer.sass
@@ -7,21 +7,23 @@
   background-blend-mode: overlay
   &__box
     display: flex
+    justify-content: space-between
     height: inherit
-
+    padding-top: 123px
 .subscribe__comment
-  min-height: 438px
-  width: 570px
+  max-height: 438px
+  max-width: 570px
   display: flex
-  border-right: 1px solid #ffffff
+  align-items: start
+  // border-right: 1px solid #ffffff
   img
-    margin-top: -110px
-    margin-right: 28px
     object-fit: none
-.comment    
+.comment  
+  padding-left: 28px 
+  p 
+    margin-top: 0 
   .text
-    margin-top: 123px
-    width: 386px
+    max-width: 386px
     font-size: 16px
     line-height: 26px
     letter-spacing: 0.4px
@@ -42,21 +44,21 @@
     display: flex
     justify-content: start
     .line-element
-        width: 38px
-        height: 4px
-        margin-right: 13px
+      width: 38px
+      height: 4px
+      margin-right: 13px
     .grey
-        background-color: #d6d6d6
+      background-color: #d6d6d6
     .red
-        background-color: $mainRedColor
+      background-color: $mainRedColor
 
 .subscribe__mail
-  width: 570px
+  max-width: 570px
   display: flex
   flex-direction: column
   align-items: center
   .title
-    margin-top: 146px
+    margin-top: 0
     margin-bottom: 0
     color: #222224
     font-size: 24px
@@ -83,10 +85,10 @@
     padding-right: 78px
     background-color: #e1e1e1
     &::placeholder
-        color: #a4a4a4
-        font-size: 14px
-        font-weight: 300
-        letter-spacing: 0.35px
+      color: #a4a4a4
+      font-size: 14px
+      font-weight: 300
+      letter-spacing: 0.35px
   a
     font-size: 14px
     line-height: 46px
@@ -99,7 +101,7 @@
     background-color: $mainRedColor
     transition: .2s
     &:hover
-        background-color: $mainRedHover
+      background-color: $mainRedHover
 
 .bottom
   min-height: 338px
@@ -107,13 +109,15 @@
   display: grid
   grid-template-columns: 2.3fr 1fr 1fr 1fr
   &-text
-    width: 427px
+    max-width: 427px
     color: #898989
     font-size: 14px
     font-weight: 300
     line-height: 24px
     letter-spacing: 0.35px
 
+.bottom__brand
+  padding-right: 10px
 .bottom__menu
   display: flex
   flex-direction: column
@@ -126,15 +130,15 @@
   .bottom__list
     padding-left: 0
     .bottom__item
-        margin-bottom: 18px
-        a
-            color: #898989
-            font-size: 16px
-            font-weight: 400
-            letter-spacing: 0.4px
-            transition: .2s
-            &:hover
-                color: #f16d7f
+      margin-bottom: 18px
+      a
+        color: #898989
+        font-size: 16px
+        font-weight: 400
+        letter-spacing: 0.4px
+        transition: .2s
+        &:hover
+          color: $mainRedColor
 
 .footer
   min-height: 79px
@@ -171,13 +175,6 @@
       @extend %activeButtonColor  
 
 
- 
-
-
-
-  
-
-
 
 
 
diff --git a/css/_header.sass b/sass/_header.sass
similarity index 69%
rename from css/_header.sass
rename to sass/_header.sass
index 8df3cd7..2213b68 100644
--- a/css/_header.sass
+++ b/sass/_header.sass
@@ -10,6 +10,8 @@
     display: flex
     align-items: center
     height: inherit
+  .header__right
+    position: relative
 
 .header__logo
   font-size: 27px
@@ -41,10 +43,10 @@
     padding-left: 16px
     padding-right: 78px
     &::placeholder
-        color: #a4a4a4
-        font-size: 14px
-        font-weight: 300
-        letter-spacing: 0.35px
+      color: #a4a4a4
+      font-size: 14px
+      font-weight: 300
+      letter-spacing: 0.35px
   button
     height: inherit
     padding-right: 11px
@@ -52,19 +54,29 @@
 
 .search__browse
   height: inherit
-  width: inherit
+  position: relative
+  z-index: 5
+  width: 87px
   font-size: 14px
   font-weight: 400
   line-height: 36px
-  padding-left: 15px
-  padding-right: 9px
+  
   background-color: #f8f8f8
-  i
-    margin-left: 8px
+  background-image: url(../img/caret-down.svg)
+  background-size: 14px
+  background-repeat: no-repeat
+  background-position: right 8px center
+  span
+    display: block
+    height: inherit
+    cursor: pointer
+    padding-left: 15px
+    padding-right: 9px
 
 .header__cart
   margin-right: 26px
   margin-top: 15px
+  cursor: pointer
   & img
     transition: 0.2s
   &:hover img
@@ -92,9 +104,29 @@
   border-bottom: 1px solid #ececec
 
 .navbar
+  // position: sticky
+  // top: 0
+  position: relative
+  z-index: 3
+  background-color: #ffffff7a
   min-height: 51px
   display: flex
   justify-content: center
+  .mobile__menu-open
+    position: absolute
+    font-size: 40px
+    color: $mainRedColor
+    display: none
+  .mobile__menu-close
+    position: absolute
+    font-size: 40px
+    color: $mainRedColor
+    display: none
+
+#mobile__menu-switch
+  display: none
+  left: -999px
+  visibility: hidden
 
 .navbar__menu-list
   display: flex
diff --git a/css/_index.sass b/sass/_index.sass
similarity index 59%
rename from css/_index.sass
rename to sass/_index.sass
index d76d6e1..f3dac66 100644
--- a/css/_index.sass
+++ b/sass/_index.sass
@@ -5,36 +5,27 @@
   background-color: #e8e8e8
   display: flex
   &__picture
-     height: 614px 
-     background: url(../img/Layer_24_.jpg) no-repeat 
-     background-position: right bottom
+    width: inherit
+    height: 614px
+    background: url(../img/Layer_24_.jpg) no-repeat
+    background-position: right bottom
   &__text
-     text-transform: uppercase     
-     font-weight: 900   
-     border-left: 12px solid $mainRedColor
-     padding-left: 12px
-     margin-top: 224px  
+    text-transform: uppercase
+    font-weight: 900
+    border-left: 12px solid $mainRedColor
+    padding-left: 12px
+    margin-top: 224px
   &__text-big
-     font-size: 60px
-     letter-spacing: 1.5px
-     line-height: 43px  
+    font-size: 60px
+    letter-spacing: 1.5px
+    line-height: 43px
   &__text-small
-     font-size: 40px
-     letter-spacing: 1px
-     line-height: 32px
-     margin-top: 18px
-     span
-        color: $mainRedColor
-
-.hot-square
-  width: 560px
-  height: 542px
-  position: relative
-
-.hot-rectangle
-  width: 560px
-  height: 261px
-  position: relative
+    font-size: 40px
+    letter-spacing: 1px
+    line-height: 32px
+    margin-top: 18px
+    span
+      color: $mainRedColor
 
 .formen
   background: url(../img/Layer_30.jpg)
@@ -57,6 +48,10 @@
   justify-content: space-between
   align-content: space-between
   margin-top: 98px
+  &-square
+    width: 560px
+    height: 542px
+    position: relative
   &__label
     position: absolute
     top: 26px
@@ -74,9 +69,16 @@
     font-size: 18px
     letter-spacing: 0.45px
   &-red
-    color: #f16d7f
+    color: $mainRedColor
     font-size: 30px
     letter-spacing: 0.75px
+  &-rectangle
+    width: 560px
+    height: 261px
+    position: relative
+
+
+
 
 .fetured
   margin-top: 100px
@@ -89,16 +91,16 @@
     width: 261px
     margin-bottom: 22px
     & .pic
-        position: absolute;object-fit: cover
-        object-fit: cover
+      position: absolute;object-fit: cover
+      object-fit: cover
     & .add-cart
-        position: absolute
-        z-index: 999
-        display: none
+      position: absolute
+      z-index: 999
+      display: none
     &:hover
-        @extend %hoverShadow 
+      @extend %hoverShadow
     &:hover .add-cart
-        display: initial 
+      display: initial
 
 .fetured__name
   text-align: center
@@ -140,7 +142,7 @@
   align-items: center
   &-browse
     background-color: $mainRedColor
-    height: 38px
+    min-height: 38px
     color: #ffffff
     font-size: 15px
     font-weight: 400
@@ -148,17 +150,16 @@
     padding-left: 24px
     padding-right: 19px
     &:hover
-        background-color: $mainRedHover
+      background-color: $mainRedHover
     & i
-        margin-left: 9px
+      margin-left: 9px
 
 .offer
-  height: 529px
-  margin-bottom: 97px
   &__doby
-    height: inherit
+    min-height: 529px
     display: flex
     background-color: #222224
+    margin-bottom: 97px
   &__pic
     padding-left: 39px
     height: inherit
@@ -166,40 +167,41 @@
     color: #ffffff
     background: url(../img/Image_offer.jpg) no-repeat
     &-offer
-        margin-top: 132px
-        font-size: 54px
-        font-weight: 700
-        text-transform: uppercase
-        letter-spacing: 1.5px
-        & span
-            color: $mainRedColor
+      margin-top: 132px
+      font-size: 54px
+      font-weight: 700
+      text-transform: uppercase
+      letter-spacing: 1.5px
+      & span
+        color: $mainRedColor
     &-women
-        font-size: 32px
-        font-weight: 700
-        text-transform: uppercase
-        letter-spacing: 0.9px
+      font-size: 32px
+      font-weight: 700
+      text-transform: uppercase
+      letter-spacing: 0.9px
   &__detales
     height: inherit
-    width: 373px
+    max-width: 373px
+    padding-right: 10px
     display: flex
     flex-direction: column
     &-item
-        display: flex
-        justify-content: space-between
+      display: flex
+      justify-content: space-between
+      padding-top: 40px
     &-icon
-        margin-top: 46px
-        margin-left: 30px
+      padding-right: 10px
+      padding-left: 20px
     &-text
-        width: 252px
-        color: #fbfbfb
-        font-size: 14px
-        font-weight: 300
-        line-height: 24px
-        letter-spacing: 0.35px
-        & h3
-            margin-left: 2px
-            margin-top: 55px
-            margin-bottom: 0
+      min-width: 252px
+      color: #fbfbfb
+      font-size: 14px
+      font-weight: 300
+      line-height: 24px
+      letter-spacing: 0.35px
+      padding-left: 10px
+      & h3
+        margin: 0
         & p
-            width: 219px
-            margin-top: 0
+          width: 219px
+          margin-top: 0
diff --git a/sass/_media.sass b/sass/_media.sass
new file mode 100644
index 0000000..5191f1a
--- /dev/null
+++ b/sass/_media.sass
@@ -0,0 +1,402 @@
+@media screen and ( max-width: 1199px )
+    .container
+        padding: 0 10px
+    .mega__menu
+        right: -70px
+    .hot
+        height: fit-content
+        align-content: center
+        margin-top: 0
+        & a
+            margin-top: 20px
+    .fetured
+        margin-top: 20px
+        &__gallery
+            justify-content: space-evenly
+    .offer
+        &__pic
+            margin-left: -10px
+            margin-right: -10px
+    .subscribe__box
+        padding-top: 123px
+    .cart__checkout
+        flex-wrap: wrap
+        justify-content: space-around
+    .goods-picture
+        &__box
+            width: -webkit-fill-available
+            max-height: 777px
+    .product
+        padding-top: 20px!important
+        padding-bottom: 20px!important
+    .sidebar
+        min-width: 170px
+        padding-right: 10px
+    .information
+        padding-top: 69px!important
+
+@media screen and ( max-width: 991px )
+    .container
+        padding: 0 10px
+    .mega__menu-wrapper
+        display: none
+    .header
+        padding-top: 10px
+        flex-direction: column
+        align-items: center
+        &__left
+            flex-direction: column
+        &__search
+            margin: 20px 0
+            height: 52px
+            input
+                padding-right: 150px
+                padding-left: 24px
+                &::placeholder
+                    font-size: 22px
+            button
+                padding: 0 14px
+                font-size: 20px
+        &-line
+            padding-top: 15px
+        &__cart
+            margin-top: 0
+    .search__browse
+        font-size: 22px
+        line-height: 44px
+        padding-left: 20px
+        padding-right: 40px
+    .navbar__menu-item
+        &:not(:last-child)
+            margin-right: 22px
+    .fetured__name p
+        margin-bottom: 40px
+    .fetured__button-browse
+        padding-top: 10px
+        padding-bottom: 10px
+        font-size: 22px
+    .offer__pic
+        background-position: center
+        &-offer
+            margin-top: 300px
+    .offer__doby
+        margin-bottom: 0
+    .subscribe__box
+        padding-top: 50px
+        flex-direction: column
+        align-items: center
+    .subscribe__comment
+        justify-content: center
+        margin-bottom: 50px
+        // border: none
+    .bottom
+        grid-template-columns: 1fr 1fr 1fr
+        justify-items: center
+        margin-top: 30px
+        &__brand
+            grid-column-start: 1
+            grid-column-end: 4
+            padding-right: 0
+            text-align: center
+        & .header__logo
+            justify-content: center
+        &__menu .bottom__list
+            text-align: center
+    .newarriv
+        min-height: 80px
+    .form__login
+        padding-right: 20px
+    .goods-description
+        margin-top: 0
+    .goods-picture__box
+        height: auto
+    .like-olso
+        h1
+            margin-top: 90px
+    .sidebar
+        min-width: 210px
+    .choose__bar
+        flex-wrap: wrap
+        justify-content: space-evenly
+    .choose__trendind
+        margin-bottom: 20px
+    .choose__size
+        margin-bottom: 20px
+    .product__gallery
+        justify-content: space-evenly
+    .information__item-text
+        padding-left: 10px
+        padding-right: 10px
+
+    .browse__menu
+        &-wrapper
+            top: 127px
+        &-chapter
+            font-size: 16px
+        &-item
+            font-size: 16px
+
+    .cart__switcher
+        &:checked + div
+            top: -580px
+            opacity: 0
+    .cart__menu
+        top: 48px
+        right: 0
+
+@media screen and ( max-width: 767px )
+    .header__left
+        width: 100%
+    .header__search
+        width: inherit
+        justify-content: space-between
+        input
+            width: 100%
+            padding-right: 0
+            padding-left: 20px
+    .header-line
+        padding-bottom: 15px
+    .navbar
+        position: relative
+        min-height: 0
+        .mobile__menu-open
+            display: flex
+            opacity: 0
+            right: 10px
+            top: -70px
+            transition: .3s
+        .mobile__menu-close
+            display: flex
+            opacity: 1
+            right: 10px
+            top: -70px
+            transition: .3s
+        &__menu-list
+            padding: 0
+            flex-direction: column
+            align-items: center
+            max-height: 400px
+            overflow: hidden
+            transition: .3s
+        &__menu-item
+            margin-right: 0!important
+        input:checked ~ ul
+            max-height: 0
+        input:checked ~ .mobile__menu-close
+            display: flex
+            opacity: 0
+        input:checked ~ .mobile__menu-open
+            display: flex 
+            opacity: 1 
+    .brand__text
+        margin-top: 300px
+    .offer
+        &__doby
+            flex-direction: column
+        &__pic
+            width: inherit
+            background-image: cover
+        &__detales
+            margin: 0 auto
+            &-text h3
+                font-size: 25px
+    .collapse__block
+        &-form
+            flex-direction: column
+    #collapse-switcher1:checked ~ div
+        height: 800px
+    #collapse-switcher2:checked ~ div
+        height: 800px
+    #collapse-switcher3:checked ~ div
+        height: 800px
+    #collapse-switcher4:checked ~ div
+        height: 800px
+    #collapse-switcher5:checked ~ div
+        height: 800px
+    #collapse-switcher6:checked ~ div
+        height: 800px
+    .cart__checkout
+        .coupon
+            padding-top: 40px
+        .total
+            margin-top: 30px
+    .cart
+        &__top
+            display: none
+    .goods-description
+        h3
+            margin-top: 30px
+        &__article
+            margin-top: 5px
+        &__choose
+            padding-top: 40px
+        &__price-line
+            width: 500px
+        &__main-button
+            margin-bottom: 50px
+    .goods-picture__image
+        width: 80%
+    .like-olso
+        h1
+            margin-top: 50px
+            margin-bottom: 50px
+    .product
+        flex-direction: column
+    .sidebar
+        width: -webkit-fill-available
+        &__menu-item
+            text-align: center
+            li
+                font-size: 18px
+    .info__box
+        height: auto
+    .information
+        flex-wrap: wrap
+        padding-top: 20px!important
+
+@media screen and ( max-width: 575px )
+    .header__search
+        justify-content: space-between
+        input
+            width: 100%
+            padding-right: 0
+            padding-left: 10px
+    .brand__text-big
+        line-height: 50px
+        color: white
+    .brand__text-small
+        line-height: 38px
+        color: white
+    .hot
+        // display: none
+        &-square
+            width: 100vw
+            height: 160px
+            display: flex
+            justify-content: center
+            align-items: center
+        &-rectangle
+            width: 100vw
+            height: 160px
+            display: flex
+            justify-content: center
+            align-items: center
+        &__label
+            position: initial
+        .formen
+            background-blend-mode: multiply
+            background-color: rgba(0, 0, 0, 0.3)
+        .accesories
+            background-blend-mode: multiply
+            background-color: rgba(0, 0, 0, 0.3)
+            background-size: cover
+        .women
+            background-blend-mode: multiply
+            background-color: rgba(0, 0, 0, 0.3)
+        .forkids
+            background-blend-mode: multiply
+            background-color: rgba(0, 0, 0, 0.3)
+    .subscribe__comment
+        flex-direction: column
+        align-items: center
+        margin-bottom: 20px
+    .subscribe__box
+        padding-top: 20px
+    .subscribe__mail
+        & .for
+            margin-top: 3px
+            margin-bottom: 10px
+    .mail_subscribe
+        input
+            padding-right: 0
+    .comment
+        padding-left: 0
+        .bottom-line
+            justify-content: center
+    .footer__body
+        flex-direction: column-reverse
+    .footer__links
+        margin-top: 20px
+    .bottom
+        grid-template-columns: 1fr
+        &__menu
+            grid-column-start: 1
+            grid-column-end: 4
+    .form__login
+        padding-right: 0
+        button
+            margin-right: 10px
+    .newarriv
+        flex-direction: column
+        justify-content: center!important
+    .collapse__block-form
+        .form__unit
+            input
+                width: 300px
+    .cart__item
+        justify-content: center
+        flex-wrap: wrap
+        font-size: 17px
+        .details
+            width: 480px
+            margin-bottom: 10px
+        .price
+            width: 80px
+        .shipping
+            order: 1
+        .action
+            order: 1
+            width: 275px
+            height: 35px
+            margin-top: 12px
+        &-del
+            height: inherit
+            width: 100px
+            border-radius: 4px
+            background-color: $mainRedColor
+    .cart-table
+        i
+            font-size: 20px
+            color: #fff
+    .cart__buttons
+        a
+            width: 170px
+    .goods-description__price-line
+        display: none
+    .goods-description__choose
+        width: auto
+        flex-direction: column
+        align-items: center
+        padding-top: 0
+        &-feature
+            margin-bottom: 20px
+            display: flex
+            align-items: baseline
+            width: auto
+            .input-name
+                flex: 16
+                margin-right: 20px
+    .goods-description__main-button
+        width: -webkit-fill-available
+    .sort__bar
+        justify-content: space-between
+    .viewtype__bar
+        flex-direction: column
+        align-items: center
+    .viewtype__page
+        margin-bottom: 20px
+
+    .browse__menu
+        width: 354px
+        &-chapter
+            font-size: 18px
+        &-item
+            font-size: 17px
+
+    .cart__switcher
+        &:checked + div
+            top: 48px
+            left: -380px
+            opacity: 0
+    .cart__menu
+        left: -26px
diff --git a/sass/_menubrowse.sass b/sass/_menubrowse.sass
new file mode 100644
index 0000000..c4fde5a
--- /dev/null
+++ b/sass/_menubrowse.sass
@@ -0,0 +1,64 @@
+@import "_variables.sass"
+
+.browse__menu
+    position: relative
+    z-index: 5
+    width: 254px
+    border-radius: 3px
+    border: 1px solid #e6e6e6
+    background-color: #ffffff
+    &-chapter
+        padding: 14px
+        margin: 0
+        color: $mainFontColor
+        font-size: 14px
+        font-weight: 700
+        &-title
+            border-bottom: 1px solid #e6e6e6
+            margin: 0
+            margin-bottom: 10px
+            padding-bottom: 5px
+            text-transform: uppercase
+    &-item
+        text-decoration: none
+        list-style-type: none
+        margin-left: 5px
+        cursor: pointer
+        transition: .3s
+        &:hover
+            margin-left: 15px
+            color: $mainRedColor
+    &-item:not(:last-child)
+        margin-bottom: 12px
+    &-switch
+        position: absolute
+        z-index: 10
+        left: -999px
+        visibility: hidden
+        &:checked + div
+            max-height: 0
+            z-index: 4
+            // padding: 0
+        &:checked + div > div::before
+            opacity: 0
+    &::before
+        content: ''
+        position: absolute
+        top: -6px
+        left: 39px
+        height: 10px
+        width: 10px
+        transform: rotate(45deg)
+        background-color: #fff 
+        border-left: 1px solid #e6e6e6        
+        border-top: 1px solid #e6e6e6 
+        transition: .2s
+    &-wrapper
+        // z-index: 2
+        padding-top: 8px
+        position: absolute
+        overflow: hidden
+        top: 61px
+        max-height: 660px
+        transition: .3s
+
diff --git a/sass/_menucart.sass b/sass/_menucart.sass
new file mode 100644
index 0000000..aa9ce6c
--- /dev/null
+++ b/sass/_menucart.sass
@@ -0,0 +1,101 @@
+@import "_variables.sass"
+
+
+.cart__switcher
+    position: absolute
+    z-index: 10
+    top: -999px
+    right: 10px
+    visibility: hidden
+    &:checked + div
+        top: -500px
+.cart__menu
+    background-color: #fff
+    position: absolute
+    z-index: 4
+    right: 4px
+    top: 88px
+    width: 230px
+    padding: 0 15px 15px
+    border-radius: 3px
+    border: 1px solid #e6e6e6
+    transition: .5s
+    &-item
+        display: flex
+        padding-bottom: 15px
+        padding-top: 15px
+        border-bottom: 1px solid #e6e6e6
+        &-img
+        &-name
+            padding: 10px 15px
+            flex: auto
+        &-good
+            font-size: 12px
+            font-weight: 700
+            text-transform: uppercase
+        &-stars
+            font-size: 10px
+            color: goldenrod
+            margin-top: 8px
+        &-quantity
+            font-size: 10px
+            font-weight: 700
+            color: $mainRedColor
+            margin-top: 8px
+        &-cancel
+            display: flex
+            align-items: center
+            justify-content: flex-end
+    &-summ
+        display: flex
+        justify-content: space-between
+        font-size: 16px
+        font-weight: 700
+        text-transform: uppercase
+        padding: 15px 0
+    &-total
+    &-check
+    &-buttons
+        display: flex
+        flex-direction: column
+        font-size: 14px
+        font-weight: 700
+        text-transform: uppercase
+        text-align: center
+    &-checkout
+        margin-top: 10px
+        border: 1px solid $mainRedColor
+        color: $mainRedColor
+        height: 40px
+        display: flex
+        align-items: center
+        justify-content: center
+        transition: .2s
+        &:hover
+            @extend %hoverButtonColor
+        &:active
+            @extend %activeButtonColor
+            border: 1px solid #e6e6e6
+    &-go
+        margin-top: 10px
+        border: 1px solid #e6e6e6
+        height: 40px
+        display: flex
+        align-items: center
+        justify-content: center
+        &:hover
+            background-color: #e6e6e6
+        &:active
+            @extend %activeButtonColor
+    &::before
+        content: ''
+        position: absolute
+        top: -6px
+        left: 39px
+        height: 10px
+        width: 10px
+        transform: rotate(45deg)
+        background-color: #fff 
+        border-left: 1px solid #e6e6e6        
+        border-top: 1px solid #e6e6e6 
+
diff --git a/sass/_menumega.sass b/sass/_menumega.sass
new file mode 100644
index 0000000..a4840c5
--- /dev/null
+++ b/sass/_menumega.sass
@@ -0,0 +1,102 @@
+@import "_variables.sass"
+
+
+.mega__switcher
+    position: absolute
+    z-index: 10
+    top: -999px
+    right: 25px
+    visibility: hidden
+    &:checked + div
+        top: -440px
+        opacity: 0
+.mega__menu
+    position: absolute
+    top: 40px
+    right: -230px
+    opacity: 1
+    z-index: 5
+    transition: .8s
+    width: fit-content
+    padding: 18px 18px 0 18px
+    border-radius: 3px
+    border: 1px solid #e6e6e6
+    background-color: #ffffff
+    column-count: 3
+    &-wrapper
+        position: relative
+    &-chapter
+        margin: 0
+        padding: 0 0 18px 0
+        color: #222222
+        font-size: 14px
+        font-weight: 700
+        -webkit-column-break-inside: avoid
+        &-title
+            border-bottom: 1px solid #e6e6e6
+            margin: 0
+            margin-bottom: 10px
+            padding-bottom: 5px
+            text-transform: uppercase
+    &-item
+        text-decoration: none
+        list-style-type: none
+        margin-left: 5px
+        cursor: pointer
+        transition: .3s
+        &:hover
+            margin-left: 15px
+            color: $mainRedColor
+    &-item:not(:last-child)
+        margin-bottom: 12px
+    &-switch
+        position: absolute
+        z-index: 10
+        left: -999px
+        visibility: hidden
+        &:checked + div
+            max-height: 0
+            z-index: 4
+            // padding: 0
+        &:checked + div > div::after div::after
+            opacity: 0
+    &::before
+        content: ''
+        position: absolute
+        top: -6px
+        left: 39px
+        height: 10px
+        width: 10px
+        transform: rotate(45deg)
+        background-color: #fff 
+        border-left: 1px solid #e6e6e6        
+        border-top: 1px solid #e6e6e6 
+    &-sale
+        position: relative
+        img
+            transition: .2s
+        a:hover img
+            @extend %hoverShadow
+            opacity: 0.9
+        a:hover + div
+            color: $mainRedColor
+        &-text
+            position: absolute
+            bottom: 10px
+            right: 10px
+            display: flex
+            flex-direction: column
+            text-transform: uppercase
+            color: #fff
+            font-size: 18px
+            font-weight: 700
+            letter-spacing: 0.05em
+            transition: .2s
+    &-label
+        display: inline-block
+        width: inherit
+        cursor: pointer
+        opacity: 
+        transition: .2s
+        &:hover
+            color: $mainRedColor
diff --git a/css/_product.sass b/sass/_product.sass
similarity index 94%
rename from css/_product.sass
rename to sass/_product.sass
index b949e8e..58315e9 100644
--- a/css/_product.sass
+++ b/sass/_product.sass
@@ -61,7 +61,8 @@
             transition: .5s
             &:hover
                 padding-left: 14px
-
+            &:hover a
+                color: $mainRedColor
 .choose__bar
     display: flex
     justify-content: space-between
@@ -93,7 +94,7 @@
             right: 0
             height: 13px
             width: 1px
-            background-color:  #dfdfdf
+            background-color: #dfdfdf
         & a:last-child::after
             display: none
         & a:not(:first-child)
@@ -141,7 +142,7 @@
             position: absolute
             height: 6px
             width: 130px
-            background-color: #f16d7f
+            background-color: $mainRedColor
         &-handle
             position: absolute
             top: -4px
@@ -149,7 +150,7 @@
             border: none
             height: 14px
             width: 14px
-            background-color: #f16d7f
+            background-color: $mainRedColor
             cursor: pointer
         &-value
             display: flex
@@ -182,10 +183,6 @@
     background-color: #ffffff
     border: 1px solid #ebebeb
     margin-right: 10px
-    & i
-        position: absolute
-        color: #6f6e6e
-        right: 5px
     &-title
         padding-left: 13px
         padding-right: 8px
@@ -205,7 +202,10 @@
         cursor: pointer
         outline: none
         appearance: none
-        
+        background-image: url(../img/caret-down.svg)
+        background-repeat: no-repeat
+        background-size: 11px
+        background-position: right 6px center
 
 .show__box
     padding-top: 48px
@@ -237,7 +237,7 @@
         font-size: 16px
         font-weight: 700
         text-transform: uppercase
-        color: #f16d7f
+        color: $mainRedColor
         margin-left: 14px
 
 
diff --git a/css/_singlpage.sass b/sass/_singlpage.sass
similarity index 88%
rename from css/_singlpage.sass
rename to sass/_singlpage.sass
index c24b512..9bfc2bc 100644
--- a/css/_singlpage.sass
+++ b/sass/_singlpage.sass
@@ -2,13 +2,13 @@
 
 .goods-picture
     position: relative
-    z-index: 1
-    height: 777px
+    max-height: 777px
     display: flex
     justify-content: center
     background-color: #f7f7f7
     &__box
         width: 1600px
+        height: 777px
         display: flex
         justify-content: space-between
         align-items: center
@@ -39,8 +39,8 @@
     display: flex
     flex-direction: column
     align-items: center
-    width: 1141px
-    height: 730px
+    max-width: 1141px
+    max-height: 730px
     background-color: #ffffff
     border: 1px solid #eaeaea
     & h3
@@ -58,7 +58,7 @@
         margin-top: 42px
         margin-bottom: 18px
         text-align: center
-        width: 620px
+        max-width: 620px
         font-size: 14px
         line-height: 24px
         font-weight: 300
@@ -104,19 +104,24 @@
                 color: #2f2f2f
                 width: 112px
         &-input
+            appearance: none
+            cursor: pointer
             margin-top: 16px
             width: 144px
             height: 35px
             border: 1px solid #eaeaea
             padding-left: 30px
             font-weight: 400
+            background-image: url(../img/caret-down.svg)
+            background-size: 14px
+            background-repeat: no-repeat
+            background-position: right 8px center
         &-color
             position: relative
             &::before
                 content: ''
                 width: 12px
                 height: 12px
-                // font-family: "Font Awesome 5 Brands"
                 background-color: $mainRedColor
                 position: absolute
                 bottom: 12px
@@ -133,6 +138,7 @@
         width: 537px
         height: 55px
         margin-top: 28px
+        margin-bottom: 100px
         background-color: #ffffff
         border: 1px solid #ef5b70
         font-size: 16px
@@ -164,7 +170,8 @@
             border-bottom: 3px solid #ef5b70
 
 .like-olso
-    height: 540px
+    min-height: 500px
+    padding-bottom: 40px!important
     & h1
         margin-top: 119px
         margin-bottom: 72px
@@ -175,7 +182,8 @@
         text-align: center
     &__gallery
         display: flex
-        justify-content: space-between
+        flex-wrap: wrap
+        justify-content: space-evenly
         &-item
             width: 263px
             height: 364px
@@ -204,3 +212,10 @@
                 font-weight: 700
                 text-transform: uppercase
                 color: $mainRedColor
+
+.input-number
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button
+        -webkit-appearance: none
+        -moz-appearance: textfield
+
diff --git a/css/_variables.sass b/sass/_variables.sass
similarity index 100%
rename from css/_variables.sass
rename to sass/_variables.sass
diff --git a/css/style.sass b/sass/style.sass
similarity index 78%
rename from css/style.sass
rename to sass/style.sass
index b449aab..153fa2e 100644
--- a/css/style.sass
+++ b/sass/style.sass
@@ -7,7 +7,10 @@
 @import "_singlpage"
 @import "_cart"
 @import "_checkout.sass"
-@import "_menu.sass"
+@import "_menubrowse.sass"
+@import "_menucart.sass"
+@import "_menumega"
+@import "_media"
 
 @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap")