From 1b9fee8dca317f74c26fc197a7200a784bb760c2 Mon Sep 17 00:00:00 2001
From: A1Gard <a1gard@4xmen.ir>
Date: Mon, 12 Jun 2023 10:51:42 +0330
Subject: [PATCH] optimize scss

---
 public/css/theme.css       | 1014 ++++++++++++++++++------------------
 resources/sass/card.scss   |  405 ++++++++++++++
 resources/theme/card.scss  |   54 --
 resources/theme/theme.scss |  356 +------------
 4 files changed, 919 insertions(+), 910 deletions(-)
 create mode 100644 resources/sass/card.scss
 delete mode 100644 resources/theme/card.scss

diff --git a/public/css/theme.css b/public/css/theme.css
index 65af1b6..9238206 100755
--- a/public/css/theme.css
+++ b/public/css/theme.css
@@ -11126,644 +11126,648 @@ tr.border-bottom td {
   display: block;
 }
 
-.x-mega-menu {
-  background: #eeeeee;
-  display: grid;
-  grid-auto-columns: minmax(0, 1fr);
-  grid-auto-flow: column;
+.product-info {
+  padding: 0;
   list-style: none;
-  box-shadow: 0 1px 4px #aaaaaa;
-}
-.x-mega-menu > li {
-  transition: 300ms;
-  font-size: 12pt;
-  font-weight: 100;
-  text-align: center;
-  color: #0085a7;
-  cursor: pointer;
-  grid-column: span 2;
-}
-.x-mega-menu > li.x-has-sub-menu a:after, .x-mega-menu > li.x-has-sub-menu span:after {
-  content: "⌄";
-  position: relative;
-  top: -3px;
-}
-.x-mega-menu > li.x-has-image span, .x-mega-menu > li.x-has-image a {
-  padding: 1px;
-  height: 49px;
 }
-.x-mega-menu > li.x-has-image img {
-  max-height: 40px;
-  max-width: 100vh;
-  display: block;
-  margin: 2px auto;
+.product-info li {
+  border-top: 1px solid #ddd;
+  padding: 7px;
 }
-.x-mega-menu > li.x-small {
-  grid-column: span 1;
+.product-info li:last-child {
+  border-bottom: 1px solid #ddd;
 }
-.x-mega-menu > li:hover, .x-mega-menu > li.x-active {
-  background: #ffffff;
+.product-info li i {
+  margin-top: 3px;
+  margin-left: 10px;
+  float: right;
+  color: #0c63e4;
 }
-.x-mega-menu > li:hover a:before, .x-mega-menu > li:hover span:before, .x-mega-menu > li.x-active a:before, .x-mega-menu > li.x-active span:before {
-  width: 100%;
-  opacity: 1;
+.product-info li b {
+  color: #0c63e4;
+  float: left;
 }
-.x-mega-menu > li ul {
-  display: none;
+
+/*-768px width*/
+@media (max-width: 768px) {
+  #customer label {
+    text-align: start !important;
+  }
 }
-.x-mega-menu > li a, .x-mega-menu > li span {
-  position: relative;
-  text-decoration: none;
-  color: #0085a7;
-  padding: 1em;
-  display: block;
+/*-1000px width*/
+@media (max-width: 1000px) {
+  #top .logo {
+    max-height: 40px;
+  }
+
+  #main-container {
+    padding-top: 20px;
+  }
 }
-.x-mega-menu > li a:before, .x-mega-menu > li span:before {
-  height: 2px;
-  content: " ";
-  position: absolute;
-  right: 0;
-  width: 0;
-  bottom: 0px;
-  transition: 400ms;
-  transition-delay: 100ms;
-  opacity: 0.5;
-  background: linear-gradient(90deg, #0085a7 0%, #0eceff 100%);
+.product-count {
+  font-size: 0;
 }
-
-.x-sub-menu {
-  background: #eeeeee;
-  width: 100%;
-  border: 1px solid silver;
-  transform: scaleY(0) translateY(-50%);
-  transition-timing-function: ease-out;
-  transition: 700ms;
-  opacity: 0;
-  position: absolute;
-  z-index: 999;
-  box-shadow: 0 3px 7px #999999;
+.product-count :first-child {
+  color: white;
+  border-radius: 0 7px 7px 0;
 }
-.x-sub-menu h3 {
-  border-bottom: 1px solid #eee;
-  margin-bottom: 12px;
-  color: #222222;
-  transition: 333ms;
+.product-count :last-child {
+  border-radius: 7px 0 0 7px;
+  color: white;
 }
-.x-sub-menu h3:hover {
-  color: #151515;
+.product-count * {
+  display: inline-block;
 }
-.x-sub-menu li {
+.product-count input {
+  text-align: center;
+  -moz-appearance: textfield;
+  width: 50px;
+  border-radius: 0;
+  font-size: 16px;
   position: relative;
+  top: 4px;
 }
-.x-sub-menu li li {
-  border-bottom: rgba(34, 34, 34, 0.15) 1px solid;
-}
-.x-sub-menu li li a, .x-sub-menu li li span {
-  padding: 8.5px 5.5px;
-  transition: 400ms;
-  display: block;
+.product-count input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
 }
-.x-sub-menu li li a:hover, .x-sub-menu li li span:hover {
-  transform: translateX(-20px);
+
+#card .table {
+  vertical-align: middle;
 }
-.x-sub-menu li li ul {
+
+#sms-code {
   display: none;
 }
-.x-sub-menu li a {
-  padding: 1.2em;
-  color: #222222;
-  transition: 333ms;
-}
-.x-sub-menu li.x-has-sub-menu {
-  position: relative;
+
+#card .meta {
+  border: 1px solid gray;
+  margin-bottom: 2px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 3px;
 }
-.x-sub-menu li.x-has-sub-menu:before {
-  content: "〉";
-  position: absolute;
-  right: 0;
-  top: 7px;
+#card .quantity {
+  cursor: pointer;
+  border: 1px solid gray;
+  margin-bottom: 2px;
+  border-radius: 5px;
+  padding: 3px;
 }
-.x-sub-menu li.x-has-sub-menu.x-right:before {
-  right: auto;
-  left: 0;
+#card .quantity.active {
+  background: #0c63e4;
+  color: white;
 }
-.x-sub-menu li:hover a {
-  color: #2f2f2f;
+#card .quantity hr {
+  margin-top: 3px;
+  margin-bottom: 3px;
 }
-.x-sub-menu.x-active {
-  transform: scaleY(1) translateY(0);
-  opacity: 0.9;
+#card .quantity input {
+  visibility: hidden;
 }
-.x-sub-menu > ul {
-  display: grid;
-  grid-auto-columns: minmax(0, 1fr);
-  grid-auto-flow: column;
+
+.preline {
+  white-space: pre-line;
 }
-.x-sub-menu > ul > li {
-  border-right: 1px solid silver;
+
+.border-x {
+  border: 2px solid gray;
   padding: 1em;
-  color: #0085a7;
 }
-.x-sub-menu > ul > li.x-highlight {
-  background: #0085a7;
+
+.ribbon {
+  position: absolute !important;
+  text-transform: uppercase;
   color: white;
+  z-index: 99;
+  top: -36px;
 }
-.x-sub-menu > ul > li.x-highlight h3 {
+.ribbon .ribbon1 {
+  position: absolute;
+  right: 10px;
   color: white;
 }
-.x-sub-menu > ul img {
-  width: 80%;
-  display: block;
-  margin: 1em auto;
+.ribbon .ribbon1:after {
+  position: absolute;
+  content: "";
+  width: 0;
+  height: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  border-left: 25px solid transparent;
+  border-right: 25px solid transparent;
+  border-top: 15px solid #F8463F;
 }
-.x-sub-menu .x-main-section-menu {
+.ribbon .ribbon1 span {
   position: relative;
+  display: block;
+  text-align: center;
+  background: #F8463F;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 0;
+  padding: 18px 5px 12px 8px;
+  border-top-right-radius: 8px;
+  width: 50px;
 }
-.x-sub-menu .x-main-section-menu .x-multi-level-menu-desktop {
-  position: absolute;
-  left: 15px;
-  right: 15px;
+.ribbon .ribbon1 span:before {
+  height: 6px;
+  width: 6px;
+  left: -5px;
   top: 0;
-  bottom: 0;
-  background: #eeeeee;
+  background: #F8463F;
 }
-.x-sub-menu .x-main-section-menu .x-multi-level-menu-desktop .x-back-btn {
-  cursor: pointer;
+.ribbon .ribbon1 span:after {
+  height: 6px;
+  width: 8px;
+  left: -8px;
+  top: 0;
+  border-radius: 8px 8px 0 0;
+  background: #C02031;
 }
-.x-sub-menu p {
-  line-height: 1.7em;
+.ribbon .ribbon1 span:before, .ribbon .ribbon1 span:after {
+  position: absolute;
+  content: "";
 }
 
-#x-toggle {
-  display: none;
+.trust {
+  box-shadow: 0 5px 5px rgba(134, 134, 134, 0.5333333333);
+  border: 1px solid rgba(134, 134, 134, 0.5333333333);
+  list-style: none;
+  border-radius: 4px;
+  margin-right: 2em;
+  width: calc(100% - 4em);
 }
-
-#x-side-menu {
-  transition: 500ms;
-  transition-timing-function: linear;
-  width: 0;
-  overflow: hidden;
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 999999;
+.trust li {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
 }
-#x-side-menu.x-active {
-  width: 100%;
+.trust i {
+  color: #0a53be;
+  margin-left: 10px;
 }
-#x-side-menu h2, #x-side-menu h3, #x-side-menu h4, #x-side-menu h5 {
-  padding: 0.75em;
-  text-align: center;
-  background: #0091b6;
-  font-size: 18px;
+
+.sizeInfo {
+  width: 100%;
+  padding: 10px 0;
+  display: inline-block;
+  transition: 300ms;
+  border: 1px solid #f5f5f5;
 }
-#x-side-menu .x-side-menu {
-  z-index: 9;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  box-shadow: -1px 0 7px #111, 1px 0 7px #111;
-  background: #0085a7;
-  width: 300px;
-  overflow-y: auto;
-  color: white;
-  height: 100vh;
-  box-sizing: border-box;
-  position: relative;
+.sizeInfo:hover {
+  box-shadow: initial;
+  border: 1px solid #868686;
 }
-#x-side-menu .x-side-menu > li {
-  background: #0099c1;
-  border-top: 1px solid #00718e;
-  position: relative;
-  color: gray;
+.sizeInfo img {
+  width: 20px;
+  height: 20px;
 }
-#x-side-menu .x-side-menu > li:last-child {
-  border-bottom: 1px solid #00718e;
+.sizeInfo a {
+  line-height: 60px;
+  color: #868686 !important;
 }
-#x-side-menu .x-side-menu > li.x-small, #x-side-menu .x-side-menu > li.x-has-image {
-  display: none;
+
+#child {
+  height: 80vh;
+  overflow: hidden;
+  padding-top: 0;
+  position: relative;
+  background: #fdd6ff;
 }
-#x-side-menu .x-side-menu > li ul {
-  display: none;
+#child .particles {
+  width: 10px;
+  height: 10px;
+  background: #f00;
+  border-radius: 50%;
+  box-shadow: 0 0 4px #f00, 0 0 8px #f00;
+  position: absolute;
+  top: -10vh;
+  opacity: 0.6;
 }
-#x-side-menu .x-side-menu > li a, #x-side-menu .x-side-menu > li span {
-  display: block;
-  padding: 1em;
-  color: white;
-  text-decoration: none;
+#child .active h1, #child .active h2, #child .active h3, #child .active h4, #child .active h5, #child .active h6 {
+  -webkit-animation: pulse 1.6s infinite;
+          animation: pulse 1.6s infinite;
+  line-height: 2em;
 }
-#x-side-menu .x-side-menu .x-close {
-  float: right;
-  padding: 10px 0.46em;
-  font-size: 30px;
-  cursor: pointer;
-  background: #007593;
+#child .owl-carousel {
+  padding: 0;
+  margin: 0;
 }
-#x-side-menu .x-has-sub-menu .x-next {
-  border-bottom: 0;
-  border-top: 0;
-  transition: 300ms;
-  right: 0;
+#child .item {
+  position: absolute;
+  left: 0;
   top: 0;
   bottom: 0;
-  position: absolute;
-  width: 45px;
-  padding-left: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  border: 1px solid #00718e;
-  background: #007998;
-  cursor: pointer;
-  color: white;
-}
-#x-side-menu .x-has-sub-menu .x-next:hover {
-  background: #0089ac;
+  right: 0;
 }
-#x-side-menu .x-has-sub-menu .x-next a {
-  display: block;
-  padding-top: 15px;
+#child .item .text {
+  margin-top: 15vh;
+  float: left;
+  padding: 3em;
+  text-align: center;
+  width: 50%;
 }
-#x-side-menu .x-has-sub-menu.x-right .x-next {
-  right: auto;
-  left: 0;
+#child .item img {
+  opacity: 0;
+  max-height: 80vh;
+  width: auto !important;
+  position: absolute;
+  bottom: 0;
+  right: -1000px;
+  transition: 1000ms;
 }
-.x-responsive #x-toggle {
-  display: block;
-  grid-column: span 1;
+#child .active img {
+  opacity: 1;
+  right: 5% !important;
 }
-.x-responsive.x-mega-menu {
-  grid-auto-columns: 1fr;
+#child .owl-item {
+  height: 80vh;
+  position: relative;
 }
-.x-responsive.x-mega-menu > li {
-  display: none;
+#child .owl-odd {
+  height: 80vh;
+  background: rgba(29, 211, 176, 0.6666666667);
 }
-.x-responsive.x-mega-menu > li:before {
-  display: none !important;
+#child .owl-odd img {
+  opacity: 1;
+  right: 65%;
 }
-.x-responsive.x-mega-menu > li.x-has-image, .x-responsive.x-mega-menu > li.x-always-show {
-  display: block;
-  grid-column: span 6;
+#child .owl-dots {
+  position: absolute;
+  bottom: 10px;
+  z-index: 9;
+  left: 0;
+  right: 0;
 }
-.x-responsive.x-mega-menu > li.x-small {
-  grid-column: span 1;
+#child .owl-dots .owl-dot span {
+  border-radius: 0 !important;
+  height: 3px;
+  width: 20px !important;
 }
 
-.x-multi-level-menu {
-  position: absolute;
-  top: 0;
-  width: 290px;
-  background: #0085a7;
-  height: 100vh;
-  box-shadow: -1px 0 7px #111, 1px 0 7px #111;
-  overflow-y: auto;
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
-.x-multi-level-menu li {
-  padding: 0;
+.x-mega-menu {
+  background: #eeeeee;
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
   list-style: none;
+  box-shadow: 0 1px 4px #aaaaaa;
 }
-.x-multi-level-menu li.x-list {
-  background: #0099c1;
-  border-top: 1px solid #00718e;
-  background: #0085a7;
+.x-mega-menu > li {
+  transition: 300ms;
+  font-size: 12pt;
+  font-weight: 100;
+  text-align: center;
+  color: #0085a7;
+  cursor: pointer;
+  grid-column: span 2;
+}
+.x-mega-menu > li.x-has-sub-menu a:after, .x-mega-menu > li.x-has-sub-menu span:after {
+  content: "⌄";
   position: relative;
+  top: -3px;
 }
-.x-multi-level-menu li.x-list ul {
-  display: none;
+.x-mega-menu > li.x-has-image span, .x-mega-menu > li.x-has-image a {
+  padding: 1px;
+  height: 49px;
 }
-.x-multi-level-menu li.x-list a, .x-multi-level-menu li.x-list span {
+.x-mega-menu > li.x-has-image img {
+  max-height: 40px;
+  max-width: 100vh;
   display: block;
-  padding: 1em;
-  color: white;
-  text-decoration: none;
+  margin: 2px auto;
 }
-.x-multi-level-menu .x-back {
-  padding: 0.75em;
-  text-align: center;
-  border-bottom: 1px solid #007593;
-  cursor: pointer;
+.x-mega-menu > li.x-small {
+  grid-column: span 1;
 }
-.x-multi-level-menu .x-back .x-back-btn {
-  float: right;
-  padding: 10px 0.46em;
-  font-size: 20px;
-  cursor: pointer;
-  margin: -0.75em;
-  text-align: left;
-  width: 15px;
+.x-mega-menu > li:hover, .x-mega-menu > li.x-active {
+  background: #ffffff;
 }
-
-.x-blur {
-  filter: blur(5px) grayscale(0.75);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  transition: 100ms;
+.x-mega-menu > li:hover a:before, .x-mega-menu > li:hover span:before, .x-mega-menu > li.x-active a:before, .x-mega-menu > li.x-active span:before {
+  width: 100%;
+  opacity: 1;
+}
+.x-mega-menu > li ul {
+  display: none;
+}
+.x-mega-menu > li a, .x-mega-menu > li span {
+  position: relative;
+  text-decoration: none;
+  color: #0085a7;
+  padding: 1em;
+  display: block;
+}
+.x-mega-menu > li a:before, .x-mega-menu > li span:before {
+  height: 2px;
+  content: " ";
+  position: absolute;
+  right: 0;
+  width: 0;
+  bottom: 0px;
+  transition: 400ms;
   transition-delay: 100ms;
+  opacity: 0.5;
+  background: linear-gradient(90deg, #0085a7 0%, #0eceff 100%);
 }
 
-@-webkit-keyframes border-color-play {}
-
-@keyframes border-color-play {}
-.product-info {
-  padding: 0;
-  list-style: none;
+.x-sub-menu {
+  background: #eeeeee;
+  width: 100%;
+  border: 1px solid silver;
+  transform: scaleY(0) translateY(-50%);
+  transition-timing-function: ease-out;
+  transition: 700ms;
+  opacity: 0;
+  position: absolute;
+  z-index: 999;
+  box-shadow: 0 3px 7px #999999;
 }
-.product-info li {
-  border-top: 1px solid #ddd;
-  padding: 7px;
+.x-sub-menu h3 {
+  border-bottom: 1px solid #eee;
+  margin-bottom: 12px;
+  color: #222222;
+  transition: 333ms;
 }
-.product-info li:last-child {
-  border-bottom: 1px solid #ddd;
+.x-sub-menu h3:hover {
+  color: #151515;
 }
-.product-info li i {
-  margin-top: 3px;
-  margin-left: 10px;
-  float: right;
-  color: #0c63e4;
+.x-sub-menu li {
+  position: relative;
 }
-.product-info li b {
-  color: #0c63e4;
-  float: left;
+.x-sub-menu li li {
+  border-bottom: rgba(34, 34, 34, 0.15) 1px solid;
 }
-
-/*-768px width*/
-@media (max-width: 768px) {
-  #customer label {
-    text-align: start !important;
-  }
+.x-sub-menu li li a, .x-sub-menu li li span {
+  padding: 8.5px 5.5px;
+  transition: 400ms;
+  display: block;
 }
-/*-1000px width*/
-@media (max-width: 1000px) {
-  #top .logo {
-    max-height: 40px;
-  }
-
-  #main-container {
-    padding-top: 20px;
-  }
+.x-sub-menu li li a:hover, .x-sub-menu li li span:hover {
+  transform: translateX(-20px);
 }
-.product-count {
-  font-size: 0;
+.x-sub-menu li li ul {
+  display: none;
 }
-.product-count :first-child {
-  color: white;
-  border-radius: 0 7px 7px 0;
+.x-sub-menu li a {
+  padding: 1.2em;
+  color: #222222;
+  transition: 333ms;
 }
-.product-count :last-child {
-  border-radius: 7px 0 0 7px;
-  color: white;
+.x-sub-menu li.x-has-sub-menu {
+  position: relative;
 }
-.product-count * {
-  display: inline-block;
+.x-sub-menu li.x-has-sub-menu:before {
+  content: "〉";
+  position: absolute;
+  right: 0;
+  top: 7px;
 }
-.product-count input {
-  text-align: center;
-  -moz-appearance: textfield;
-  width: 50px;
-  border-radius: 0;
-  font-size: 16px;
-  position: relative;
-  top: 4px;
+.x-sub-menu li.x-has-sub-menu.x-right:before {
+  right: auto;
+  left: 0;
 }
-.product-count input::-webkit-inner-spin-button {
-  margin: 0;
-  -webkit-appearance: none;
+.x-sub-menu li:hover a {
+  color: #2f2f2f;
 }
-
-#card .table {
-  vertical-align: middle;
+.x-sub-menu.x-active {
+  transform: scaleY(1) translateY(0);
+  opacity: 0.9;
 }
-
-#sms-code {
-  display: none;
+.x-sub-menu > ul {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
 }
-
-#card .meta {
-  border: 1px solid gray;
-  margin-bottom: 2px;
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 3px;
+.x-sub-menu > ul > li {
+  border-right: 1px solid silver;
+  padding: 1em;
+  color: #0085a7;
 }
-#card .quantity {
-  cursor: pointer;
-  border: 1px solid gray;
-  margin-bottom: 2px;
-  border-radius: 5px;
-  padding: 3px;
+.x-sub-menu > ul > li.x-highlight {
+  background: #0085a7;
+  color: white;
 }
-#card .quantity.active {
-  background: #0c63e4;
+.x-sub-menu > ul > li.x-highlight h3 {
   color: white;
 }
-#card .quantity hr {
-  margin-top: 3px;
-  margin-bottom: 3px;
+.x-sub-menu > ul img {
+  width: 80%;
+  display: block;
+  margin: 1em auto;
 }
-#card .quantity input {
-  visibility: hidden;
+.x-sub-menu .x-main-section-menu {
+  position: relative;
 }
-
-.preline {
-  white-space: pre-line;
+.x-sub-menu .x-main-section-menu .x-multi-level-menu-desktop {
+  position: absolute;
+  left: 15px;
+  right: 15px;
+  top: 0;
+  bottom: 0;
+  background: #eeeeee;
 }
-
-.border-x {
-  border: 2px solid gray;
-  padding: 1em;
+.x-sub-menu .x-main-section-menu .x-multi-level-menu-desktop .x-back-btn {
+  cursor: pointer;
 }
-
-.ribbon {
-  position: absolute !important;
-  text-transform: uppercase;
-  color: white;
-  z-index: 99;
-  top: -36px;
+.x-sub-menu p {
+  line-height: 1.7em;
 }
-.ribbon .ribbon1 {
-  position: absolute;
-  right: 10px;
-  color: white;
+
+#x-toggle {
+  display: none;
 }
-.ribbon .ribbon1:after {
-  position: absolute;
-  content: "";
+
+#x-side-menu {
+  transition: 500ms;
+  transition-timing-function: linear;
   width: 0;
-  height: 0;
-  bottom: 0;
+  overflow: hidden;
+  position: fixed;
   left: 0;
-  z-index: 999;
-  border-left: 25px solid transparent;
-  border-right: 25px solid transparent;
-  border-top: 15px solid #F8463F;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 999999;
 }
-.ribbon .ribbon1 span {
-  position: relative;
-  display: block;
+#x-side-menu.x-active {
+  width: 100%;
+}
+#x-side-menu h2, #x-side-menu h3, #x-side-menu h4, #x-side-menu h5 {
+  padding: 0.75em;
   text-align: center;
-  background: #F8463F;
+  background: #0091b6;
   font-size: 18px;
-  font-weight: 600;
-  line-height: 0;
-  padding: 18px 5px 12px 8px;
-  border-top-right-radius: 8px;
-  width: 50px;
 }
-.ribbon .ribbon1 span:before {
-  height: 6px;
-  width: 6px;
-  left: -5px;
-  top: 0;
-  background: #F8463F;
+#x-side-menu .x-side-menu {
+  z-index: 9;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  box-shadow: -1px 0 7px #111, 1px 0 7px #111;
+  background: #0085a7;
+  width: 300px;
+  overflow-y: auto;
+  color: white;
+  height: 100vh;
+  box-sizing: border-box;
+  position: relative;
 }
-.ribbon .ribbon1 span:after {
-  height: 6px;
-  width: 8px;
-  left: -8px;
-  top: 0;
-  border-radius: 8px 8px 0 0;
-  background: #C02031;
+#x-side-menu .x-side-menu > li {
+  background: #0099c1;
+  border-top: 1px solid #00718e;
+  position: relative;
+  color: gray;
 }
-.ribbon .ribbon1 span:before, .ribbon .ribbon1 span:after {
-  position: absolute;
-  content: "";
+#x-side-menu .x-side-menu > li:last-child {
+  border-bottom: 1px solid #00718e;
 }
-
-.trust {
-  box-shadow: 0 5px 5px rgba(134, 134, 134, 0.5333333333);
-  border: 1px solid rgba(134, 134, 134, 0.5333333333);
-  list-style: none;
-  border-radius: 4px;
-  margin-right: 2em;
-  width: calc(100% - 4em);
+#x-side-menu .x-side-menu > li.x-small, #x-side-menu .x-side-menu > li.x-has-image {
+  display: none;
 }
-.trust li {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
+#x-side-menu .x-side-menu > li ul {
+  display: none;
 }
-.trust i {
-  color: #0a53be;
-  margin-left: 10px;
+#x-side-menu .x-side-menu > li a, #x-side-menu .x-side-menu > li span {
+  display: block;
+  padding: 1em;
+  color: white;
+  text-decoration: none;
 }
-
-.sizeInfo {
-  width: 100%;
-  padding: 10px 0;
-  display: inline-block;
+#x-side-menu .x-side-menu .x-close {
+  float: right;
+  padding: 10px 0.46em;
+  font-size: 30px;
+  cursor: pointer;
+  background: #007593;
+}
+#x-side-menu .x-has-sub-menu .x-next {
+  border-bottom: 0;
+  border-top: 0;
   transition: 300ms;
-  border: 1px solid #f5f5f5;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  width: 45px;
+  padding-left: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  border: 1px solid #00718e;
+  background: #007998;
+  cursor: pointer;
+  color: white;
 }
-.sizeInfo:hover {
-  box-shadow: initial;
-  border: 1px solid #868686;
+#x-side-menu .x-has-sub-menu .x-next:hover {
+  background: #0089ac;
 }
-.sizeInfo img {
-  width: 20px;
-  height: 20px;
+#x-side-menu .x-has-sub-menu .x-next a {
+  display: block;
+  padding-top: 15px;
 }
-.sizeInfo a {
-  line-height: 60px;
-  color: #868686 !important;
+#x-side-menu .x-has-sub-menu.x-right .x-next {
+  right: auto;
+  left: 0;
 }
-
-#child {
-  height: 80vh;
-  overflow: hidden;
-  padding-top: 0;
-  position: relative;
-  background: #fdd6ff;
+.x-responsive #x-toggle {
+  display: block;
+  grid-column: span 1;
 }
-#child .particles {
-  width: 10px;
-  height: 10px;
-  background: #f00;
-  border-radius: 50%;
-  box-shadow: 0 0 4px #f00, 0 0 8px #f00;
-  position: absolute;
-  top: -10vh;
-  opacity: 0.6;
+.x-responsive.x-mega-menu {
+  grid-auto-columns: 1fr;
 }
-#child .active h1, #child .active h2, #child .active h3, #child .active h4, #child .active h5, #child .active h6 {
-  -webkit-animation: pulse 1.6s infinite;
-          animation: pulse 1.6s infinite;
-  line-height: 2em;
+.x-responsive.x-mega-menu > li {
+  display: none;
 }
-#child .owl-carousel {
-  padding: 0;
-  margin: 0;
+.x-responsive.x-mega-menu > li:before {
+  display: none !important;
 }
-#child .item {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
+.x-responsive.x-mega-menu > li.x-has-image, .x-responsive.x-mega-menu > li.x-always-show {
+  display: block;
+  grid-column: span 6;
 }
-#child .item .text {
-  margin-top: 15vh;
-  float: left;
-  padding: 3em;
-  text-align: center;
-  width: 50%;
+.x-responsive.x-mega-menu > li.x-small {
+  grid-column: span 1;
 }
-#child .item img {
-  opacity: 0;
-  max-height: 80vh;
-  width: auto !important;
+
+.x-multi-level-menu {
   position: absolute;
-  bottom: 0;
-  right: -1000px;
-  transition: 1000ms;
+  top: 0;
+  width: 290px;
+  background: #0085a7;
+  height: 100vh;
+  box-shadow: -1px 0 7px #111, 1px 0 7px #111;
+  overflow-y: auto;
 }
-#child .active img {
-  opacity: 1;
-  right: 5% !important;
+.x-multi-level-menu li {
+  padding: 0;
+  list-style: none;
 }
-#child .owl-item {
-  height: 80vh;
+.x-multi-level-menu li.x-list {
+  background: #0099c1;
+  border-top: 1px solid #00718e;
+  background: #0085a7;
   position: relative;
 }
-#child .owl-odd {
-  height: 80vh;
-  background: rgba(29, 211, 176, 0.6666666667);
+.x-multi-level-menu li.x-list ul {
+  display: none;
 }
-#child .owl-odd img {
-  opacity: 1;
-  right: 65%;
+.x-multi-level-menu li.x-list a, .x-multi-level-menu li.x-list span {
+  display: block;
+  padding: 1em;
+  color: white;
+  text-decoration: none;
 }
-#child .owl-dots {
-  position: absolute;
-  bottom: 10px;
-  z-index: 9;
-  left: 0;
-  right: 0;
+.x-multi-level-menu .x-back {
+  padding: 0.75em;
+  text-align: center;
+  border-bottom: 1px solid #007593;
+  cursor: pointer;
 }
-#child .owl-dots .owl-dot span {
-  border-radius: 0 !important;
-  height: 3px;
-  width: 20px !important;
+.x-multi-level-menu .x-back .x-back-btn {
+  float: right;
+  padding: 10px 0.46em;
+  font-size: 20px;
+  cursor: pointer;
+  margin: -0.75em;
+  text-align: left;
+  width: 15px;
 }
 
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.2);
-  }
-  100% {
-    transform: scale(1);
-  }
+.x-blur {
+  filter: blur(5px) grayscale(0.75);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  transition: 100ms;
+  transition-delay: 100ms;
 }
+
+@-webkit-keyframes border-color-play {}
+
+@keyframes border-color-play {}
+a {
+  text-decoration: none !important;
+}
+
 .page-item.active .page-link {
   background: #f9247a;
   border-color: #f9247a;
diff --git a/resources/sass/card.scss b/resources/sass/card.scss
new file mode 100644
index 0000000..bb81f37
--- /dev/null
+++ b/resources/sass/card.scss
@@ -0,0 +1,405 @@
+.progress-step{
+    display: grid;
+    grid-template-columns: repeat(3,1fr);
+    .step{
+        text-align: center;
+        margin-bottom: 35px;
+        position: relative;
+        z-index: 9  ;
+        &.done{
+            i,img{
+                border-color: black;
+                color: black;
+            }
+        }
+        i,img{
+            font-size: 45px;
+            width: 75px;
+            height: 75px;
+            border-radius: 50%;
+            border: 2px solid gray;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: gray;
+            margin: 15px auto;
+            background: #ffffff;
+            position: relative;
+            z-index: 10;
+            cursor: pointer;
+        }
+    }
+    .step:before{
+        height: 2px;
+        background: silver;
+        top: calc(50% - 15px);
+        position: absolute;
+        left: 0;
+        right: 0;
+        content: ' ';
+        transform: translateY(-50%);
+    }
+    .step.done:before{
+        background: black;
+    }
+}
+
+#card-steps {
+    .step{
+        display: none;
+        &.active{
+            display: block;
+        }
+    }
+}
+
+.product-info {
+    padding: 0;
+    list-style: none;
+
+    li {
+        border-top: 1px solid #ddd;
+        padding: 7px;
+
+        &:last-child {
+            border-bottom: 1px solid #ddd;
+        }
+
+        i {
+            margin-top: 3px;
+            margin-left: 10px;
+            float: right;
+            color: #0c63e4;
+        }
+
+        b {
+            color: #0c63e4;
+            float: left;
+        }
+    }
+}
+
+/*-768px width*/
+@media (max-width: 768px) {
+    #customer label {
+        text-align: start !important;
+    }
+}
+
+/*-1000px width*/
+@media (max-width: 1000px) {
+    #top .logo {
+        max-height: 40px;
+    }
+
+    #main-container {
+        padding-top: 20px;
+    }
+}
+
+.product-count {
+    font-size: 0;
+
+    :first-child {
+        color: white;
+        border-radius: 0 7px 7px 0;
+    }
+
+    :last-child {
+        border-radius: 7px 0 0 7px;
+        color: white;
+    }
+
+    * {
+        display: inline-block;
+    }
+
+    input {
+        //font-size: initial;
+        text-align: center;
+        -moz-appearance: textfield;
+        width: 50px;
+        border-radius: 0;
+        font-size: 16px;
+        position: relative;
+        top: 4px;
+    }
+
+    input::-webkit-inner-spin-button {
+        margin: 0;
+        -webkit-appearance: none;
+    }
+}
+
+#card {
+    .table {
+        vertical-align: middle;
+    }
+}
+
+#sms-code {
+    display: none;
+}
+
+#card {
+    .meta {
+        border: 1px solid gray;
+        margin-bottom: 2px;
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 3px;
+    }
+
+    .quantity {
+        &.active {
+            background: #0c63e4;
+            color: white;
+        }
+
+        cursor: pointer;
+        border: 1px solid gray;
+        margin-bottom: 2px;
+        border-radius: 5px;
+        padding: 3px;
+
+        hr {
+            margin-top: 3px;
+            margin-bottom: 3px;
+        }
+
+        input {
+            visibility: hidden;
+        }
+    }
+}
+
+//@import "css/dark";
+
+.preline {
+    white-space: pre-line;
+}
+
+.border-x {
+    border: 2px solid gray;
+    padding: 1em;
+}
+
+
+.ribbon {
+    position: absolute !important;
+    text-transform: uppercase;
+    color: white;
+    z-index: 99;
+    top: -36px;
+
+    .ribbon1 {
+        position: absolute;
+        right: 10px;
+        color: white;
+
+        &:after {
+            position: absolute;
+            content: "";
+            width: 0;
+            height: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 999;
+            border-left: 25px solid transparent;
+            border-right: 25px solid transparent;
+            border-top: 15px solid #F8463F;
+        }
+
+        span {
+            position: relative;
+            display: block;
+            text-align: center;
+            background: #F8463F;
+            font-size: 18px;
+            font-weight: 600;
+            line-height: 0;
+            padding: 18px 5px 12px 8px;
+            border-top-right-radius: 8px;
+            width: 50px;
+
+            &:before {
+                height: 6px;
+                width: 6px;
+                left: -5px;
+                top: 0;
+                background: #F8463F;
+            }
+
+            &:after {
+                height: 6px;
+                width: 8px;
+                left: -8px;
+                top: 0;
+                border-radius: 8px 8px 0 0;
+                background: #C02031;
+            }
+
+            &:before,
+            &:after {
+                position: absolute;
+                content: "";
+            }
+        }
+    }
+
+}
+
+.trust {
+    box-shadow: 0 5px 5px #86868688;
+    border: 1px solid #86868688;
+    list-style: none;
+    border-radius: 4px;
+    margin-right: 2em;
+    width: calc(100% - 4em);
+
+    li {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+    }
+
+    i {
+        color: #0a53be;
+        margin-left: 10px;
+
+    }
+}
+
+.sizeInfo {
+    width: 100%;
+    padding: 10px 0;
+    display: inline-block;
+    transition: 300ms;
+    border: 1px solid #f5f5f5;
+
+    &:hover {
+        box-shadow: initial;
+        border: 1px solid #868686;
+    }
+
+    img {
+        width: 20px;
+        height: 20px;
+    }
+
+    a {
+        line-height: 60px;
+        color: #868686 !important;
+    }
+}
+
+#child {
+    height: 80vh;
+    overflow: hidden;
+    padding-top: 0;
+    position: relative;
+    background: #fdd6ff;
+
+    .particles {
+        width: 10px;
+        height: 10px;
+        background: #f00;
+        border-radius: 50%;
+        box-shadow: 0 0 4px #f00,
+        0 0 8px #f00;
+        position: absolute;
+        top: -10vh;
+        opacity: .6;
+    }
+
+    .active {
+        h1, h2, h3, h4, h5, h6 {
+            animation: pulse 1.6s infinite;
+            line-height: 2em;
+        }
+    }
+
+
+    .owl-carousel {
+        padding: 0;
+        margin: 0;
+    }
+
+    .item {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+
+        .text {
+            margin-top: 15vh;
+            float: left;
+            padding: 3em;
+            text-align: center;
+            width: 50%;
+        }
+
+        img {
+            opacity: 0;
+            max-height: 80vh;
+            width: auto !important;
+            position: absolute;
+            bottom: 0;
+            right: -1000px;
+            transition: 1000ms;
+        }
+    }
+
+    .active {
+        img {
+            opacity: 1;
+            right: 5% !important;
+        }
+    }
+
+
+    .owl-item {
+        height: 80vh;
+        position: relative;
+    }
+
+    .owl-odd {
+        height: 80vh;
+        background: #1dd3b0aa;
+
+
+        img {
+            opacity: 1;
+            right: 65%;
+        }
+    }
+
+    .owl-dots {
+        position: absolute;
+        bottom: 10px;
+        z-index: 9;
+        left: 0;
+        right: 0;
+
+        .owl-dot span {
+            border-radius: 0 !important;
+            height: 3px;
+            width: 20px !important;
+        }
+    }
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
diff --git a/resources/theme/card.scss b/resources/theme/card.scss
deleted file mode 100644
index e262248..0000000
--- a/resources/theme/card.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.progress-step{
-    display: grid;
-    grid-template-columns: repeat(3,1fr);
-    .step{
-        text-align: center;
-        margin-bottom: 35px;
-        position: relative;
-        z-index: 9  ;
-        &.done{
-            i,img{
-                border-color: black;
-                color: black;
-            }
-        }
-        i,img{
-            font-size: 45px;
-            width: 75px;
-            height: 75px;
-            border-radius: 50%;
-            border: 2px solid gray;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: gray;
-            margin: 15px auto;
-            background: #ffffff;
-            position: relative;
-            z-index: 10;
-            cursor: pointer;
-        }
-    }
-    .step:before{
-        height: 2px;
-        background: silver;
-        top: calc(50% - 15px);
-        position: absolute;
-        left: 0;
-        right: 0;
-        content: ' ';
-        transform: translateY(-50%);
-    }
-    .step.done:before{
-        background: black;
-    }
-}
-
-#card-steps {
-    .step{
-        display: none;
-        &.active{
-            display: block;
-        }
-    }
-}
diff --git a/resources/theme/theme.scss b/resources/theme/theme.scss
index b5aa209..62951ea 100755
--- a/resources/theme/theme.scss
+++ b/resources/theme/theme.scss
@@ -11,7 +11,7 @@
 @import "css/icofont/icofont.min.css";
 @import "../sass/preloader";
 @import "css/style.css";
-@import "card";
+@import "../sass/card";
 
 $main-color: #0085a7;
 $invert-text-color: white;
@@ -21,6 +21,10 @@ $main-menu-bg: #eeeeee;
 $is-dark: 'false';
 
 @import "~x-mega-menu/src/main-x-mega-menu";
+
+a{
+    text-decoration: none !important;
+}
 //
 //a {
 //    color: #ea4c89;
@@ -84,356 +88,6 @@ $is-dark: 'false';
 //    background-color: darkmagenta;
 //    border-color: dodgerblue;
 //}
-.product-info {
-    padding: 0;
-    list-style: none;
-
-    li {
-        border-top: 1px solid #ddd;
-        padding: 7px;
-
-        &:last-child {
-            border-bottom: 1px solid #ddd;
-        }
-
-        i {
-            margin-top: 3px;
-            margin-left: 10px;
-            float: right;
-            color: #0c63e4;
-        }
-
-        b {
-            color: #0c63e4;
-            float: left;
-        }
-    }
-}
-
-/*-768px width*/
-@media (max-width: 768px) {
-    #customer label {
-        text-align: start !important;
-    }
-}
-
-/*-1000px width*/
-@media (max-width: 1000px) {
-    #top .logo {
-        max-height: 40px;
-    }
-
-    #main-container {
-        padding-top: 20px;
-    }
-}
-
-.product-count {
-    font-size: 0;
-
-    :first-child {
-        color: white;
-        border-radius: 0 7px 7px 0;
-    }
-
-    :last-child {
-        border-radius: 7px 0 0 7px;
-        color: white;
-    }
-
-    * {
-        display: inline-block;
-    }
-
-    input {
-        //font-size: initial;
-        text-align: center;
-        -moz-appearance: textfield;
-        width: 50px;
-        border-radius: 0;
-        font-size: 16px;
-        position: relative;
-        top: 4px;
-    }
-
-    input::-webkit-inner-spin-button {
-        margin: 0;
-        -webkit-appearance: none;
-    }
-}
-
-#card {
-    .table {
-        vertical-align: middle;
-    }
-}
-
-#sms-code {
-    display: none;
-}
-
-#card {
-    .meta {
-        border: 1px solid gray;
-        margin-bottom: 2px;
-        border-radius: 5px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 3px;
-    }
-
-    .quantity {
-        &.active {
-            background: #0c63e4;
-            color: white;
-        }
-
-        cursor: pointer;
-        border: 1px solid gray;
-        margin-bottom: 2px;
-        border-radius: 5px;
-        padding: 3px;
-
-        hr {
-            margin-top: 3px;
-            margin-bottom: 3px;
-        }
-
-        input {
-            visibility: hidden;
-        }
-    }
-}
-
-//@import "css/dark";
-
-.preline {
-    white-space: pre-line;
-}
-
-.border-x {
-    border: 2px solid gray;
-    padding: 1em;
-}
-
-
-.ribbon {
-    position: absolute !important;
-    text-transform: uppercase;
-    color: white;
-    z-index: 99;
-    top: -36px;
-
-    .ribbon1 {
-        position: absolute;
-        right: 10px;
-        color: white;
-
-        &:after {
-            position: absolute;
-            content: "";
-            width: 0;
-            height: 0;
-            bottom: 0;
-            left: 0;
-            z-index: 999;
-            border-left: 25px solid transparent;
-            border-right: 25px solid transparent;
-            border-top: 15px solid #F8463F;
-        }
-
-        span {
-            position: relative;
-            display: block;
-            text-align: center;
-            background: #F8463F;
-            font-size: 18px;
-            font-weight: 600;
-            line-height: 0;
-            padding: 18px 5px 12px 8px;
-            border-top-right-radius: 8px;
-            width: 50px;
-
-            &:before {
-                height: 6px;
-                width: 6px;
-                left: -5px;
-                top: 0;
-                background: #F8463F;
-            }
-
-            &:after {
-                height: 6px;
-                width: 8px;
-                left: -8px;
-                top: 0;
-                border-radius: 8px 8px 0 0;
-                background: #C02031;
-            }
-
-            &:before,
-            &:after {
-                position: absolute;
-                content: "";
-            }
-        }
-    }
-
-}
-
-.trust {
-    box-shadow: 0 5px 5px #86868688;
-    border: 1px solid #86868688;
-    list-style: none;
-    border-radius: 4px;
-    margin-right: 2em;
-    width: calc(100% - 4em);
-
-    li {
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-    }
-
-    i {
-        color: #0a53be;
-        margin-left: 10px;
-
-    }
-}
-
-.sizeInfo {
-    width: 100%;
-    padding: 10px 0;
-    display: inline-block;
-    transition: 300ms;
-    border: 1px solid #f5f5f5;
-
-    &:hover {
-        box-shadow: initial;
-        border: 1px solid #868686;
-    }
-
-    img {
-        width: 20px;
-        height: 20px;
-    }
-
-    a {
-        line-height: 60px;
-        color: #868686 !important;
-    }
-}
-
-#child {
-    height: 80vh;
-    overflow: hidden;
-    padding-top: 0;
-    position: relative;
-    background: #fdd6ff;
-
-    .particles {
-        width: 10px;
-        height: 10px;
-        background: #f00;
-        border-radius: 50%;
-        box-shadow: 0 0 4px #f00,
-        0 0 8px #f00;
-        position: absolute;
-        top: -10vh;
-        opacity: .6;
-    }
-
-    .active {
-        h1, h2, h3, h4, h5, h6 {
-            animation: pulse 1.6s infinite;
-            line-height: 2em;
-        }
-    }
-
-
-    .owl-carousel {
-        padding: 0;
-        margin: 0;
-    }
-
-    .item {
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        right: 0;
-
-        .text {
-            margin-top: 15vh;
-            float: left;
-            padding: 3em;
-            text-align: center;
-            width: 50%;
-        }
-
-        img {
-            opacity: 0;
-            max-height: 80vh;
-            width: auto !important;
-            position: absolute;
-            bottom: 0;
-            right: -1000px;
-            transition: 1000ms;
-        }
-    }
-
-    .active {
-        img {
-            opacity: 1;
-            right: 5% !important;
-        }
-    }
-
-
-    .owl-item {
-        height: 80vh;
-        position: relative;
-    }
-
-    .owl-odd {
-        height: 80vh;
-        background: #1dd3b0aa;
-
-
-        img {
-            opacity: 1;
-            right: 65%;
-        }
-    }
-
-    .owl-dots {
-        position: absolute;
-        bottom: 10px;
-        z-index: 9;
-        left: 0;
-        right: 0;
-
-        .owl-dot span {
-            border-radius: 0 !important;
-            height: 3px;
-            width: 20px !important;
-        }
-    }
-}
-
-@keyframes pulse {
-    0% {
-        transform: scale(1);
-    }
-    50% {
-        transform: scale(1.2);
-    }
-    100% {
-        transform: scale(1);
-    }
-}
 
 
 .page-item.active .page-link {