@charset "UTF-8";
/*==============================================  css Reset ==============================================*/
@import url(../css/font.css);
@import url(../css/slick.css);
@import url(../css/slick-theme.css);
* {
  direction: rtl;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

*:focus {
  outline: none !important;
}

audio, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.25rem;
}

h3 {
  font-size: 1.125rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 0.8125rem;
}

h6 {
  font-size: 0.9375rem;
}

p {
  margin: 0;
  padding: 0;
}

blockquote {
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.7;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

blockquote cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  margin-top: 0.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code, kbd, tt, var {
  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  font-size: 0.9375rem;
}

abbr, acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark, ins {
  background: #eee;
  text-decoration: none;
}

big {
  font-size: 125%;
}

blockquote {
  quotes: "" "";
}

q {
  quotes: "“" "”" "‘" "’";
}

blockquote:before, blockquote:after {
  content: "";
}

label {
  color: #333;
  display: block;
  font-weight: 800;
  margin-bottom: 0.5em;
}

fieldset {
  margin-bottom: 1em;
}

select {
  border: 1px solid #bbb;
  border-radius: 3px;
  height: 3em;
  max-width: 100%;
}

b, strong {
  font-weight: bold;
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
}

body {
  font-family: IRANSans;
  direction: rtl;
  line-height: 1.5;
  font-weight: 500;
  position: relative;
}

input,
textarea,
button,
select {
  font-family: IRANSans;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
}

button, input[type=submit] {
  cursor: pointer;
}

a {
  text-decoration: none;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  color: #4f4f4f;
}

ul {
  list-style: none;
}

dl, ol, ul {
  margin-top: 0;
  margin-bottom: 0;
}

main {
  min-height: 245px;
}

/*===================== [ color (sass) ] ===========================*/
/*===================== [ import ] =================================*/
/*======================= [ mixed-in (sass) ] ============================*/
/*_ mixed-in for ( display=flex; flex=1;)_*/
/*_ mixed-in for ( display=flex;)_*/
/*_ mixed-in for ( display=flex; - up to down = center , right to left = center )_*/
/*_ mixed-in for ( display=flex; - up to down = center , right to left = space-between )_*/
/*_ mixed-in for ( transition effect )_*/
/*_ mixed-in for ( transition effect )_*/
/*============================ [ breakpoints for responsive in sass ] ==================================*/
/* xsm--Extra small  (smart phones, portrait iPhone, portrait 480x320 phones (Android)) */
/* sm--smart phones, Android phones, landscape iPhone */
/* sm--smart phones, Android phones, landscape iPhone */
/* md-- tablet, landscape iPad, lo-res laptops ands desktops */
/* lg-- hi-res laptops and desktops */
/* xl-- hi-res laptops and desktops */
/* 2xl -- Extra large screens, TV */
/* 3xl -- Extra large screens, TV */
/*=====================<< slick style >>======================*/
/**** arrows bg-header ****/
.arrow-next, .arrow-prev, .arrow-prev-little, .arrow-next-little {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 100px;
  transform: translateY(-50%);
  color: white;
  background-color: #BABABA;
  cursor: pointer;
  transition: 0.3s;
  border: none;
  font-size: 12px;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {
  .arrow-next, .arrow-prev, .arrow-prev-little, .arrow-next-little {
    width: 25px;
    height: 70px;
  }
}

.arrow-next svg, .arrow-prev svg {
  height: 15px;
  width: 15px;
}

.arrow-prev {
  left: 0;
}

.arrow-next {
  right: 0;
}

.arrow-next svg, .arrow-next-little svg, .arrow-next-size svg {
  transform: rotate(180deg);
}

.arrow-next:hover, .arrow-prev:hover, .arrow-prev-little:hover, .arrow-next-little:hover {
  color: white;
  background-color: #D19E66;
}

/**** arrows in multi-slider ****/
.arrow-prev-little, .arrow-next-little {
  width: 20px;
  height: 70px;
  z-index: 12;
  top: 180px;
}
@media (max-width: 768px) {
  .arrow-prev-little, .arrow-next-little {
    top: 80px;
  }
}

.arrow-prev-little svg, .arrow-next-little svg {
  height: 12px;
  width: 12px;
}

.arrow-prev-little {
  left: 0;
}

.arrow-next-little {
  right: 0;
}

/**** arrows in size slider ****/
.arrow-prev-size, .arrow-next-size {
  height: 30px;
  width: 30px;
  border-radius: 5px;
  z-index: 5;
  position: absolute;
  top: 50%;
  border: 1px solid #EFEFEF;
  background-color: #F7F7F7;
  transform: translateY(-50%); /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrow-prev-size:hover, .arrow-next-size:hover {
  border: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.arrow-prev-size svg, .arrow-prev-size img, .arrow-next-size svg, .arrow-next-size img {
  width: 10px;
  height: 10px;
}

.arrow-prev-size {
  left: -35px;
}

.arrow-next-size {
  right: -35px;
}

/**** dots ****/
.slick-dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
}

.slick-slider ul.slick-dots li {
  position: relative;
  display: inline-block;
  height: 11px !important;
  width: 11px !important;
  padding: 0;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
  margin-right: 5px;
  text-align: center;
  background-color: transparent;
  border-radius: 50% !important;
  border: 1px solid #42464F;
}

.slick-slider ul.slick-dots li:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  height: 11px !important;
  width: 11px !important;
  border-radius: 50% !important;
  background-color: white;
}

.slick-dots .slick-active {
  z-index: 5;
  background-color: #5F5F5F !important;
  border: none !important;
}

.slick-dots .slick-active:after {
  background-color: #5F5F5F !important;
}

/*====================== [ media query - container ] ==========================*/
.container {
  width: 80%;
  margin: 0 auto;
}
@media (max-width: 992px) {
  .container {
    width: 90%;
  }
}

/*<< Start Code  :  >>*/
/*======================== [ header in home ] =================================*/
/*==============< top-header >=============*/
.top-header { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  /*[____ top-header > logo _____]*/
  /*[____ top-header > form.search-header ____]*/
  /*[____ top-header > member-header ____]*/
}
@media (max-width: 1140px) {
  .top-header {
    flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  .top-header {
    justify-content: center;
  }
}
.top-header .logo {
  height: 74px;
  width: 177px;
  display: inline-block;
}
.top-header .logo img {
  width: 100%;
  height: 100%;
}
.top-header form.search-header { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F7F7F7;
  width: 440px;
  height: 50px;
  border-radius: 3px;
  position: relative;
  /*[ top-header > search-header > input ]*/
  /*[ top-header > search-header > button#search-icon ]*/
}
@media (max-width: 768px) {
  .top-header form.search-header {
    margin-top: 30px;
  }
}
.top-header form.search-header input {
  width: 100%;
  height: 50px;
  background-color: transparent;
  border-radius: 3px;
  padding: 5px 15px 5px 0;
  border: 1px solid #BCBCBC;
  filter: alpha(opacity=100);
  color: rgb(0, 0, 0);
  transition: 0.3s;
}
.top-header form.search-header input:focus, .top-header form.search-header input:hover {
  border: 1px solid #D19E66;
}
.top-header form.search-header button#search-icon {
  background-color: #F7F7F7;
  border: none;
  width: 48.5px;
  height: 48.2px;
  border-radius: 2.5px 0 0 2.5px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  transform: translateY(calc(-50% + 0.1px));
  position: absolute;
  top: 50%;
  left: 2px;
}
.top-header form.search-header button#search-icon svg, .top-header form.search-header button#search-icon img {
  width: 20px;
  height: 20px;
  color: #42464F;
  background-color: transparent;
  fill: currentColor;
  transition: 0.3s;
}
.top-header form.search-header button#search-icon:hover svg {
  color: #D19E66;
}
.top-header .member-header { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  color: #3E3E3E;
}
@media (max-width: 1140px) {
  .top-header .member-header {
    margin: 30px 0 25px 0;
  }
}
.top-header .member-header > div {
  border-left: 1px solid black;
  padding-left: 10px;
  cursor: pointer;
  position: relative; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
}
.top-header .member-header > div:last-child {
  border-left: none;
  padding-left: 0;
}
.top-header .member-header .member-person span {
  font-size: 1rem;
  font-weight: 400;
}
.top-header .member-header .member-person svg, .top-header .member-header .member-person img {
  margin-left: 10px;
}
.top-header .member-header .basket-list {
  padding-right: 10px;
}
.top-header .member-header .basket-list span {
  font-size: 1rem;
  font-weight: 400;
}
.top-header .member-header .basket-list svg {
  margin-right: 10px;
}
.top-header .member-header .basket-list .basket-icon {
  position: relative;
}
.top-header .member-header .basket-list .basket-count {
  position: absolute;
  top: -10px;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: #EF394E;
  color: white;
  text-shadow: 0 0 10px rgb(255, 255, 255);
  border-radius: 2px;
  font-size: 0.75rem; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-header .member-header .basket-list #slide-basket-list {
  position: absolute;
  top: calc(100% + 33px);
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  width: 250px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  z-index: 10;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.top-header .member-header .basket-list #slide-basket-list a.heading-basket { /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #D19E66;
  border-bottom: 1px solid #C4C4C4;
  width: 100%;
  background-color: white;
  height: 60px;
  border-radius: 5px 5px 0 0;
}
.top-header .member-header .basket-list #slide-basket-list a.heading-basket:after {
  content: "❯";
  margin-right: 3px;
  transform: translateY(1px);
  transition: 0.3s;
}
.top-header .member-header .basket-list #slide-basket-list a.heading-basket:hover:after {
  transform: translateY(1px) translateX(-5px);
}
.top-header .member-header .basket-list #slide-basket-list ul { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  padding: 10px 5px;
  width: 100%;
  max-height: 150px;
  overflow-y: scroll;
  /*[____ style for scroll ____]*/
  scrollbar-width: thin; /* "auto" or "thin" */
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
  /*[____ slide-basket-list ul > li ____]*/
}
.top-header .member-header .basket-list #slide-basket-list ul::-webkit-scrollbar {
  width: 4px;
}
.top-header .member-header .basket-list #slide-basket-list ul::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.top-header .member-header .basket-list #slide-basket-list ul::-webkit-scrollbar-thumb {
  background: #888;
}
.top-header .member-header .basket-list #slide-basket-list ul::-webkit-scrollbar-thumb:hover {
  background: #888;
}
.top-header .member-header .basket-list #slide-basket-list ul li {
  display: inline-flex;
  padding: 10px 5px;
  border-bottom: 1px solid #E5E5E5;
}
.top-header .member-header .basket-list #slide-basket-list ul li a {
  position: relative;
  width: 100%; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  padding: 5px 5px;
  border-radius: 5px;
}
.top-header .member-header .basket-list #slide-basket-list ul li a:hover {
  background-color: #F7F7F7;
}
.top-header .member-header .basket-list #slide-basket-list ul li:last-child {
  border-bottom: none;
}
.top-header .member-header .basket-list #slide-basket-list ul li .info-basket { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  flex: 1;
  -webkit-flex: 1;
  -webkit-box-flex: 1;
  -moz-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  margin-right: 10px;
}
.top-header .member-header .basket-list #slide-basket-list ul li .info-basket h4 {
  font-size: 0.75rem;
  height: 20px;
  overflow: hidden;
  transition: 0.3s;
}
.top-header .member-header .basket-list #slide-basket-list ul li .info-basket .size-basket-list { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
}
.top-header .member-header .basket-list #slide-basket-list ul li .info-basket .size-basket-list span {
  font-size: 0.75rem;
  margin-left: 20px;
}
.top-header .member-header .basket-list #slide-basket-list ul li .info-basket .size-basket-list span:last-child {
  margin-left: 0;
}
.top-header .member-header .basket-list #slide-basket-list ul li .info-basket .single-price-basket-list {
  color: #EF394E;
}
.top-header .member-header .basket-list #slide-basket-list ul li .info-basket .single-price-basket-list span {
  font-size: 0.75rem;
  width: calc(100% - 20px);
}
.top-header .member-header .basket-list #slide-basket-list ul li figure {
  border: 1px solid #D19E66;
  width: 60px;
  height: 60px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  position: relative;
}
.top-header .member-header .basket-list #slide-basket-list ul li figure img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  transition: 0.4s;
}
.top-header .member-header .basket-list #slide-basket-list ul li button.trash {
  position: absolute;
  bottom: 10px;
  left: 5px;
  width: 23px;
  height: 23px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-header .member-header .basket-list #slide-basket-list ul li button.trash svg, .top-header .member-header .basket-list #slide-basket-list ul li button.trash img {
  color: #EF394E;
  width: 100%;
  height: 100%;
  z-index: 20;
  fill: currentColor;
  transition: 0.3s;
}
.top-header .member-header .basket-list #slide-basket-list ul li button.trash:hover svg, .top-header .member-header .basket-list #slide-basket-list ul li button.trash img {
  transform: scale(1.1);
}
.top-header .member-header .basket-list #slide-basket-list .bottom-basket-list {
  height: 60px;
  background-color: white;
  border-top: 1px solid #C4C4C4;
  width: 100%;
  z-index: 3;
  padding: 5px 10px;
  border-radius: 0 0 5px 5px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-header .member-header .basket-list #slide-basket-list .bottom-basket-list .price-box { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  cursor: default;
}
.top-header .member-header .basket-list #slide-basket-list .bottom-basket-list .price-box h6 {
  font-size: 0.75rem;
  font-weight: normal;
}
.top-header .member-header .basket-list #slide-basket-list .bottom-basket-list .price-box b {
  font-size: 0.875rem;
}
.top-header .member-header .basket-list #slide-basket-list .bottom-basket-list .price-box span {
  font-size: 0.75rem; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
}
.top-header .member-header .basket-list #slide-basket-list .bottom-basket-list a {
  background-color: #D19E66;
  color: white;
  border-radius: 5px; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.top-header .member-header .basket-list #slide-basket-list .bottom-basket-list a:hover {
  background-color: #D28E1B;
}
.top-header .member-header button {
  background-color: transparent;
  border: none; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
}
.top-header .member-header button svg, .top-header .member-header button img {
  width: 20px;
  height: 20px;
  color: #3E3E3E;
  fill: currentColor;
  transform: translateY(4px);
  transition: 0.3s;
}
.top-header .member-header button:hover {
  color: #D19E66;
}
.top-header .member-header button:hover svg, .top-header .member-header button:hover img {
  color: #D19E66;
}
.top-header .member-header ul#slide-login-header {
  position: absolute;
  top: calc(100% + 33px);
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  display: none;
  width: 180px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 10px;
  z-index: 2;
}
.top-header .member-header ul#slide-login-header li {
  margin: 10px 0;
}
.top-header .member-header ul#slide-login-header li a { /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  font-size: 0.875rem;
}
.top-header .member-header ul#slide-login-header li a svg, .top-header .member-header ul#slide-login-header li a img {
  height: 20px;
  width: 20px;
  color: #33313B;
  stroke: #33313B;
  fill: currentColor;
  transition: 0.3s;
}
.top-header .member-header ul#slide-login-header li:hover a {
  transform: translateX(-5px);
  color: #D19E66;
}
.top-header .member-header ul#slide-login-header li:hover a svg, .top-header .member-header ul#slide-login-header li:hover a img {
  color: #D19E66;
  stroke: #D19E66;
}
.top-header .log-sign {
  display: none;
}
.top-header .log-sign svg, .top-header .log-sign img {
  width: 20px;
  height: 20px;
  color: #3E3E3E;
  fill: currentColor;
  transition: 0.3s;
}
.top-header .log-sign a { /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  font-size: 1rem;
  font-weight: 400;
  color: #33313B;
}
.top-header .log-sign a::after {
  content: "/";
  margin: 0 5px;
}
.top-header .log-sign a:nth-child(2)::after {
  content: "";
}
.top-header .log-sign a:hover {
  color: #D19E66;
}

.login-signup .log-sign { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
}
.login-signup #member-button {
  display: none;
}

.number-basket-list {
  width: 15px;
  height: 15px;
  background-color: #EF394E;
  color: white;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  right: -6px;
  font-size: 0.75rem;
  z-index: 3;
  transform: translateY(-50%); /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
}

/*============< middle-header >===========*/
.middle-header {
  background-color: #33313B;
  height: 55px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}
.middle-header ul#main-menu { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 55px;
}
.middle-header ul#main-menu > li > a {
  color: white; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  font-weight: bold;
  font-size: 0.875rem;
  padding: 17px 10px;
}
.middle-header ul#main-menu > li:hover > a {
  color: #D19E66;
  transform: translateY(-4px);
}
.middle-header ul#main-menu li.menu-item-has-children {
  position: relative;
}
.middle-header ul#main-menu li.menu-item-has-children > a:after {
  content: "‹";
  color: white;
  font-size: 1rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  left: -3px;
  transition: 0.3s;
}
.middle-header ul#main-menu li.menu-item-has-children .child-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%); /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: white;
  visibility: hidden;
  width: 200px;
  border-radius: 5px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  color: #33313B;
  overflow: hidden;
  opacity: 0;
  transition: 0.3s;
  z-index: 3;
}
.middle-header ul#main-menu li.menu-item-has-children .child-menu ul {
  height: auto;
  padding: 10px 20px 20px 20px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: 0.3s;
}
.middle-header ul#main-menu li.menu-item-has-children .child-menu ul li {
  width: 100%;
  margin: 5px 0;
}
.middle-header ul#main-menu li.menu-item-has-children .child-menu ul li a {
  color: #33313B;
  width: 100%;
  display: inline-flex;
}
.middle-header ul#main-menu li.menu-item-has-children .child-menu ul li a:hover {
  margin-right: 5px;
  color: #D19E66;
}
.middle-header ul#main-menu li.menu-item-has-children .child-menu .heading-child-menu {
  border-bottom: 2px solid #D19E66;
  display: inline-block;
  padding: 20px 0 10px 0;
  margin: 0 20px;
  font-weight: bold;
  opacity: 0;
  transition: 0.3s;
}
.middle-header ul#main-menu li.menu-item-has-children:hover .child-menu {
  visibility: visible;
  opacity: 1;
}
.middle-header ul#main-menu li.menu-item-has-children:hover .child-menu ul {
  opacity: 1;
}
.middle-header ul#main-menu li.menu-item-has-children:hover .child-menu .heading-child-menu {
  opacity: 1;
}
.middle-header ul#main-menu li.menu-item-has-children:hover > a:after {
  color: #D19E66;
}
.middle-header .closebtn {
  display: none;
}
.middle-header button.menu-button {
  display: none;
}
@media (max-width: 768px) {
  .middle-header ul#main-menu {
    width: 0;
    height: 100% !important;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #fff;
    color: #33313B;
    overflow-x: hidden;
    overflow-y: scroll;
    transition: 0.3s;
    padding-top: 40px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    flex-direction: column;
    justify-content: flex-start;
    display: none;
    border-left: 1px solid #BCBCBC;
    z-index: 15;
    /*[____ style for scroll ____]*/
    scrollbar-width: thin; /* "auto" or "thin" */
    /* width */
    /* Track */
    /* Handle */
    /* Handle on hover */
  }
  .middle-header ul#main-menu::-webkit-scrollbar {
    width: 4px;
  }
  .middle-header ul#main-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  .middle-header ul#main-menu::-webkit-scrollbar-thumb {
    background: #888;
  }
  .middle-header ul#main-menu::-webkit-scrollbar-thumb:hover {
    background: #888;
  }
  .middle-header ul#main-menu > li {
    width: 100%;
    padding-right: 20px;
  }
  .middle-header ul#main-menu > li > a {
    padding: 15px 0;
    color: #33313B;
    width: 100%;
  }
  .middle-header ul#main-menu > li:hover > a {
    color: #D19E66;
    transform: translateY(0) translateX(-2px);
  }
  .middle-header ul#main-menu > li:hover > a:after {
    color: #D19E66;
  }
  .middle-header ul#main-menu li.menu-item-has-children > a:after {
    content: "‹";
    color: #33313B;
    font-size: 1rem;
    position: absolute;
    top: 10px;
    transform: translateY(0) rotate(90deg) translateX(0);
    left: 30px;
    transition: 0.3s;
  }
  .middle-header ul#main-menu li.menu-item-has-children .child-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%); /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
    display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: white;
    visibility: hidden;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    color: #33313B;
    overflow: hidden;
    opacity: 0;
    transition: 0.3s;
    z-index: 10;
  }
  .middle-header ul#main-menu li.menu-item-has-children .child-menu ul li {
    width: 100%;
    margin: 5px 0;
  }
  .middle-header ul#main-menu li.menu-item-has-children .child-menu ul li a {
    color: #33313B;
    width: 100%;
    display: inline-flex;
  }
  .middle-header ul#main-menu li.menu-item-has-children .child-menu ul li a:hover {
    color: #D19E66;
  }
  .middle-header ul#main-menu li.menu-item-has-children:hover .child-menu {
    visibility: hidden;
    opacity: 0;
  }
  .middle-header .closebtn {
    position: absolute;
    top: 0;
    left: 25px;
    font-size: 36px;
    display: block;
  }
  .middle-header .closebtn svg {
    height: 30px;
    color: white;
    fill: currentColor;
  }
  .middle-header nav {
    position: relative;
    height: 55px;
    display: flex;
    align-items: center;
  }
  .middle-header button.menu-button {
    display: block;
    color: white;
    font-size: 35px;
    margin-top: 5px;
    background-color: transparent;
    text-align: right;
    border: none;
    width: 30px;
    height: 30px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
    display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .middle-header button.menu-button svg {
    height: 30px;
    width: 30px;
    color: white;
    fill: currentColor;
  }
}

/* log-out-fill */
#log-out-fill, #dialog-delete {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: none;
  z-index: 10;
}
#log-out-fill .log-out-content, #dialog-delete .log-out-content {
  width: 35vw;
  padding: 50px;
  background-color: white;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  border-radius: 10px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#log-out-fill .log-out-content span, #dialog-delete .log-out-content span {
  display: inline-block;
  margin-bottom: 40px;
  font-size: 1.25rem;
  color: #3E3E3E;
}
#log-out-fill .log-out-content .log-out-buttons, #dialog-delete .log-out-content .log-out-buttons { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  color: #3E3E3E;
}
#log-out-fill .log-out-content .log-out-buttons a, #dialog-delete .log-out-content .log-out-buttons a { /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 0.75px solid #D19E66;
  margin: 0 10px;
  width: 200px;
  height: 45px;
  font-size: 1.125rem;
  color: #3E3E3E;
}
#log-out-fill .log-out-content .log-out-buttons a:first-child, #dialog-delete .log-out-content .log-out-buttons a:first-child {
  background-color: #EF394E;
  color: white;
}
#log-out-fill .log-out-content .log-out-buttons a:hover, #dialog-delete .log-out-content .log-out-buttons a:hover {
  background-color: #EF394E;
  color: white;
}
@media (max-width: 1400px) {
  #log-out-fill .log-out-content, #dialog-delete .log-out-content {
    padding: 40px;
    width: 55vw;
  }
}
@media (max-width: 1200px) {
  #log-out-fill .log-out-content, #dialog-delete .log-out-content {
    padding: 40px;
  }
}
@media (max-width: 992px) {
  #log-out-fill .log-out-content, #dialog-delete .log-out-content {
    padding: 50px 30px;
  }
  #log-out-fill .log-out-content .log-out-buttons a, #dialog-delete .log-out-content .log-out-buttons a {
    border-radius: 10px;
    margin: 0 10px;
    width: 150px;
    height: 45px;
    font-size: 1.125rem;
  }
}
@media (max-width: 768px) {
  #log-out-fill .log-out-content, #dialog-delete .log-out-content {
    width: 70vw;
  }
}
@media (max-width: 576px) {
  #log-out-fill .log-out-content, #dialog-delete .log-out-content {
    width: 80vw;
    padding: 30px;
  }
}
@media (max-width: 480px) {
  #log-out-fill .log-out-content, #dialog-delete .log-out-content {
    width: 90vw;
  }
  #log-out-fill .log-out-content span, #dialog-delete .log-out-content span {
    font-size: 1rem;
  }
  #log-out-fill .log-out-content .log-out-buttons a, #dialog-delete .log-out-content .log-out-buttons a {
    border-radius: 10px;
    margin: 0 10px;
    width: 120px;
    height: 45px;
    font-size: 1rem;
  }
}
@media (max-width: 346px) {
  #log-out-fill .log-out-content, #dialog-delete .log-out-content {
    padding: 30px 20px;
  }
  #log-out-fill .log-out-content .log-out-buttons a, #dialog-delete .log-out-content .log-out-buttons a {
    border-radius: 5px;
    margin: 0 5px;
    width: 100px;
    height: 40px;
  }
}

/*=============< bg-header >===============*/
#bg-header {
  height: 550px;
}
@media (max-width: 1140px) {
  #bg-header {
    height: 450px;
  }
}
@media (max-width: 768px) {
  #bg-header {
    height: 250px;
  }
}
#bg-header .slide-header-item {
  height: 550px;
  width: 100%;
  margin: 20px 0;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 1140px) {
  #bg-header .slide-header-item {
    height: 400px;
  }
}
@media (max-width: 768px) {
  #bg-header .slide-header-item {
    height: 200px;
  }
}
#bg-header .slide-header-item img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*======================== [ main in home ] ==================================*/
/* head-section */
.head-section { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0;
}
@media (max-width: 576px) {
  .head-section {
    margin: 0 0 30px 0;
  }
}
.head-section h3 {
  color: #42464F;
  font-size: 1.5rem;
  display: inline-block;
  font-weight: 500;
}
@media (max-width: 576px) {
  .head-section h3 {
    font-size: 18px;
  }
}
.head-section a.view-more {
  color: #42464F;
  cursor: pointer;
  font-size: 1.375rem;
  border-bottom: 2px solid #42464F;
  display: inline-flex;
  font-weight: 400;
}
@media (max-width: 576px) {
  .head-section a.view-more {
    font-size: 18px;
  }
}
.head-section a.view-more:hover {
  color: #D19E66;
  border-bottom: 2px solid #D19E66;
}

/*=============< multi-slide >===============*/
.multi-slide-parent {
  position: relative;
  height: 350px;
  margin: 30px 0;
}
@media (max-width: 768px) {
  .multi-slide-parent {
    height: 250px;
  }
}

/* product-box */
a.product-box {
  height: 340px;
  margin: 0 10px;
  overflow: hidden;
}
@media (max-width: 768px) {
  a.product-box {
    height: 250px;
  }
}
a.product-box figure {
  height: 240px;
  border-radius: 5px 5px 0 0;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  a.product-box figure {
    height: 150px;
  }
}
a.product-box figure img, a.product-box figure video {
  width: 100%;
  height: 100%;
  border-radius: 5px 5px 0 0;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.4s;
}
a.product-box figure .back-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  border-radius: 5px;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%);
  background-color: rgba(255, 255, 255, 0.3); /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}
a.product-box figure .toolotip-end {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: #EF394E;
  color: white;
  padding: 5px 15px;
  border-radius: 5px;
  font-size: 0.75rem;
}
a.product-box .product-text {
  text-align: center; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  align-items: center;
}
a.product-box .product-text h4 {
  font-weight: normal;
  text-align: center;
  height: 30px;
  overflow: hidden;
  font-size: 1.125rem;
  color: #42464F;
  margin: 10px 0 5px 0;
  transition: 0.3s; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
}
@media (max-width: 1140px) {
  a.product-box .product-text h4 {
    margin: 5px 0;
  }
}
@media (max-width: 576px) {
  a.product-box .product-text h4 {
    font-size: 14px;
  }
}
a.product-box .product-text .product-price { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
a.product-box .product-text .product-price span.real-price {
  color: #20D29B;
  font-weight: bold;
  font-size: 1.125rem; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
}
@media (max-width: 576px) {
  a.product-box .product-text .product-price span.real-price {
    font-size: 14px;
  }
}
a.product-box .product-text .product-price span.off-item {
  color: #BCBCBC;
  font-size: 1rem;
  font-weight: normal;
  -webkit-text-decoration: line-through #EF394E;
          text-decoration: line-through #EF394E;
  margin-left: 5px;
  display: none;
}
@media (max-width: 576px) {
  a.product-box .product-text .product-price span.off-item {
    font-size: 13px;
  }
}
a.product-box .product-text .product-price span.end {
  color: #ababab;
  font-weight: 400;
  display: none;
  font-size: 1.125rem;
}
a.product-box:hover h4 {
  color: #D19E66;
}
a.product-box:hover figure .back-slide {
  opacity: 1;
}

/* product-box > off-product */
.off-product .product-price span.off-item {
  display: inline-flex !important;
}

.end-box .product-price span.end {
  display: inline-flex !important;
}
.end-box .product-price span.real-price {
  display: none !important;
}
.end-box .product-price span.off-item {
  display: none !important;
}

/*=============< suggest-grid >===============*/
.suggest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 30px;
  grid-template-areas: "item3 item2 item1 item1" "item6 item6 item5 item4";
}
@media (max-width: 1140px) {
  .suggest-grid {
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    grid-template-areas: "item3 item2" "item1 item1" "item5 item4" "item6 item6";
  }
}
.suggest-grid a.product-box {
  margin: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  border-radius: 5px;
  overflow: hidden;
}
.suggest-grid a.product-box:hover img {
  transform: scale(1.1);
}
.suggest-grid a.product-box:first-child .product-text, .suggest-grid a.product-box:last-child .product-text {
  display: none;
}
@media (max-width: 768px) {
  .suggest-grid a.product-box:first-child .product-text, .suggest-grid a.product-box:last-child .product-text {
    display: block;
  }
}
.suggest-grid a.product-box:first-child figure, .suggest-grid a.product-box:last-child figure {
  height: 100%;
  width: 100%;
  border-radius: 5px;
}
@media (max-width: 768px) {
  .suggest-grid a.product-box:first-child figure, .suggest-grid a.product-box:last-child figure {
    height: 240px;
  }
  .suggest-grid a.product-box:first-child figure img, .suggest-grid a.product-box:last-child figure img {
    border-radius: 5px 5px 0 0;
  }
}
@media (max-width: 768px) {
  .suggest-grid a.product-box:first-child figure, .suggest-grid a.product-box:last-child figure {
    height: 150px;
  }
}
.suggest-grid a.product-box:first-child figure img, .suggest-grid a.product-box:last-child figure img {
  border-radius: 5px;
}
.suggest-grid a.product-box:first-child figure .back-slide, .suggest-grid a.product-box:last-child figure .back-slide {
  height: 100%;
  width: 100%;
}
.suggest-grid .item1 {
  grid-area: item1;
}
.suggest-grid .item2 {
  grid-area: item2;
}
.suggest-grid .item3 {
  grid-area: item3;
}
.suggest-grid .item4 {
  grid-area: item4;
}
.suggest-grid .item5 {
  grid-area: item5;
}
.suggest-grid .item6 {
  grid-area: item6;
}

/*=============< service >====================*/
.service {
  background-color: #F7F7F7;
  margin: 30px 0;
  padding: 30px;
  border-radius: 5px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .service {
    padding: 20px 0;
  }
}
.service .service-box {
  color: #A57A4A; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
}
@media (max-width: 1140px) {
  .service .service-box {
    flex-direction: column;
  }
}
@media (max-width: 346px) {
  .service .service-box {
    flex-basis: 45%;
    margin-bottom: 10px;
  }
}
.service .service-box svg, .service .service-box img {
  height: 70px;
  width: 70px;
  color: #D19E66;
}
@media (max-width: 1140px) {
  .service .service-box svg, .service .service-box img {
    height: 40px;
    width: 40px;
    margin-bottom: 5px;
  }
}
@media (max-width: 768px) {
  .service .service-box svg, .service .service-box img {
    height: 35px;
    width: 35px;
  }
}
.service .service-box .ser-text { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 10px;
  flex: 1;
}
.service .service-box .ser-text span {
  color: #A57A4A;
}
.service .service-box .ser-text span:first-child {
  font-size: 1.125rem;
}
@media (max-width: 1140px) {
  .service .service-box .ser-text span:first-child {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .service .service-box .ser-text span:first-child {
    font-size: 11px;
  }
}

/*=============< contact-home >===============*/
.contact-home { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  margin: 30px 0;
  padding: 0 10px;
}
@media (max-width: 768px) {
  .contact-home {
    flex-wrap: wrap;
    background-color: #F7F7F7;
    justify-content: center;
    border-radius: 5px;
  }
}
.contact-home .contact-address {
  flex-basis: 50%;
  align-self: center;
  background-color: #F7F7F7;
  padding: 50px 50px 50px 100px;
  color: #42464F;
  min-height: 500px;
  border-radius: 5px;
}
@media (max-width: 992px) {
  .contact-home .contact-address {
    padding: 30px 30px 30px 50px;
  }
}
@media (max-width: 768px) {
  .contact-home .contact-address {
    flex-basis: 100%;
    padding: 40px 20px;
    min-height: 400px;
  }
}
.contact-home .contact-address h3 {
  font-size: 1.875rem;
  text-align: center;
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  .contact-home .contact-address h3 {
    font-size: 18px;
  }
}
.contact-home .contact-address .address-box h6 {
  font-size: 1.25rem;
  font-weight: normal;
  margin: 10px 0;
}
@media (max-width: 768px) {
  .contact-home .contact-address .address-box h6 {
    font-size: 16px;
  }
}
.contact-home .contact-address .address-box p {
  font-size: 1.125rem;
  font-weight: lighter;
  margin: 20px 0;
}
@media (max-width: 768px) {
  .contact-home .contact-address .address-box p {
    font-size: 14px;
  }
}
.contact-home .contact-address .address-box span {
  font-size: 1.125rem;
  text-align: end;
  display: inline-block;
  width: 100%;
  margin: 20px 0;
}
.contact-home .contact-address .button-box {
  text-align: center;
  margin-top: 55px;
}
@media (max-width: 768px) {
  .contact-home .contact-address .button-box {
    margin-top: 30px;
  }
}
.contact-home .contact-address .button-box a {
  background-color: #D19E66;
  color: white;
  padding: 10px 40px;
  border-radius: 5px;
  display: inline-block;
  text-align: center;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.3);
}
.contact-home .contact-address .button-box a:hover {
  background-color: #D28E1B;
}
.contact-home .contact-map {
  flex-basis: 50%;
}
@media (max-width: 768px) {
  .contact-home .contact-map {
    flex-basis: 90%;
    margin-bottom: 30px;
  }
}
.contact-home .contact-map #map {
  width: calc(100% + 50px);
  z-index: 9;
  height: 420px;
  margin-right: -50px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}
@media (max-width: 992px) {
  .contact-home .contact-map #map {
    width: calc(100% + 30px);
    margin-right: -30px;
  }
}
@media (max-width: 768px) {
  .contact-home .contact-map #map {
    width: 100%;
    margin-right: 0;
    height: 300px;
  }
}

/* map > + & - */
.leaflet-control-attribution a {
  display: none;
}

.leaflet-touch .leaflet-bar a:first-child {
  border-radius: 50% !important;
  color: #D19E66;
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
  border: 0 solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

.leaflet-touch .leaflet-bar a:last-child {
  border-radius: 50% !important;
  color: #D19E66;
}

/*=============< footer >====================*/
footer {
  background-color: #F7F7F7;
  padding: 30px 0 0 0;
  /* footer-top */
  /* about-foot */
  /* copyright */
}
footer .footer-top { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  justify-content: space-between;
}
@media (max-width: 1140px) {
  footer .footer-top {
    flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  footer .footer-top {
    text-align: center;
  }
}
footer .footer-top .foot-item {
  margin-left: 5px;
}
footer .footer-top .foot-item:last-child {
  margin-left: 0;
}
footer .footer-top .foot-item .logo img {
  height: 115px;
  display: inline-block;
}
@media (max-width: 768px) {
  footer .footer-top .foot-item .logo img {
    height: 75px;
  }
}
footer .footer-top .foot-item h5 {
  font-size: 1.125rem;
  font-weight: normal;
  color: #33313B;
  margin-bottom: 20px;
}
footer .footer-top .foot-item ul.fast-link li {
  margin-bottom: 10px;
}
footer .footer-top .foot-item ul.fast-link li a {
  font-weight: 400;
  font-size: 1rem;
  color: #33313B; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  transition: 0.4s;
}
footer .footer-top .foot-item ul.fast-link li a:hover {
  transform: translateX(-10px);
  color: #D19E66;
}
footer .footer-top .foot-item a.warranty-foot {
  border-radius: 5px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  width: 122px;
  height: 122px; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  margin: 40px 10px 0 10px;
}
footer .footer-top .foot-item a.warranty-foot:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
footer .footer-top .foot-item a.warranty-foot img {
  border-radius: 5px;
  width: 122px;
  height: 122px;
  -o-object-fit: contain;
     object-fit: contain;
}
footer .footer-top .foot-item .social-foot { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-wrap: wrap;
}
footer .footer-top .foot-item .social-foot a {
  background-color: white;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  width: 180px;
  margin-right: 15px;
  border-radius: 5px;
  height: 50px;
  font-size: 1rem;
  color: #42464F; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
footer .footer-top .foot-item .social-foot a:first-child {
  margin-right: 0;
}
footer .footer-top .foot-item .social-foot a svg, footer .footer-top .foot-item .social-foot a img {
  width: 25px;
  height: 25px;
  color: #D19E66;
  margin-left: 10px;
  fill: currentColor;
}
footer .footer-top .foot-item .social-foot a:hover {
  background-color: #D19E66;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  color: white;
}
footer .footer-top .foot-item .social-foot a:hover svg {
  color: white;
}
@media (max-width: 1400px) {
  footer .footer-top .foot-item .social-foot { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
    display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
    display: flex;
    flex-wrap: wrap;
  }
  footer .footer-top .foot-item .social-foot a {
    width: 100%;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 10px;
  }
  footer .footer-top .foot-item .logo {
    height: 70px;
    width: 200px;
    display: inline-block;
  }
  footer .footer-top .foot-item .logo img {
    height: 70px;
    width: 200px;
    display: inline-block;
  }
}
@media (max-width: 1200px) {
  footer .footer-top .foot-item a.warranty-foot {
    margin: 30px 5px 0 5px;
    width: 100px;
    height: 100px;
  }
  footer .footer-top .foot-item a.warranty-foot img {
    width: 100px;
    height: 100px;
  }
}
@media (max-width: 1140px) {
  footer .footer-top .foot-item {
    flex-basis: calc(50% - 20px);
    margin-bottom: 20px;
  }
  footer .footer-top .foot-item .logo {
    height: 115px;
    width: 270px;
    display: inline-block;
  }
  footer .footer-top .foot-item .logo img {
    height: 115px;
    width: 270px;
    display: inline-block;
  }
  footer .footer-top .foot-item a.warranty-foot {
    width: 122px;
    height: 122px;
  }
  footer .footer-top .foot-item a.warranty-foot img {
    width: 122px;
    height: 122px;
  }
  footer .footer-top .foot-item .social-foot a {
    width: 180px;
    margin-right: 15px;
    margin-top: 30px;
  }
  footer .footer-top .foot-item .social-foot a:first-child {
    margin-right: 0;
  }
}
@media (max-width: 992px) {
  footer .footer-top .foot-item .social-foot a {
    width: 100%;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 10px;
  }
}
@media (max-width: 768px) {
  footer .footer-top .foot-item {
    flex-basis: 100%;
    margin: 0 0 30px 0;
  }
  footer .footer-top .foot-item .social-foot {
    justify-content: center;
  }
  footer .footer-top .foot-item .social-foot a {
    width: 180px;
    margin-right: 15px;
    margin-top: 30px;
  }
  footer .footer-top .foot-item .social-foot a:first-child {
    margin-right: 0;
  }
  footer .footer-top .foot-item ul.fast-link {
    text-align: right;
  }
  footer .footer-top .foot-item h5 {
    text-align: right;
  }
  footer .footer-top .foot-item .logo {
    height: 70px;
  }
  footer .footer-top .foot-item .logo img {
    height: 70px;
  }
}
@media (max-width: 576px) {
  footer .footer-top .foot-item .social-foot a {
    width: 100%;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 15px;
  }
}
footer .about-foot {
  color: #33313B;
}
footer .about-foot h3 {
  margin-top: -30px;
}
footer .about-foot p {
  margin-top: 20px;
  font-weight: 400;
  color: #42464F;
}
@media (max-width: 1140px) {
  footer .about-foot {
    margin-top: 30px;
  }
}
footer .copyright {
  border-top: 1px solid #C4C4C4;
  background-color: #eee;
  padding: 10px 0;
  text-align: center; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  margin-top: 20px;
  font-size: 0.75rem;
}
footer .copyright .copy {
  position: relative;
  padding-right: 15px;
  color: #33313B;
  margin-top: 20px;
}
footer .copyright .copy:before {
  content: "©";
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  right: 0;
}
footer .copyright .copy a {
  color: #D19E66;
  font-weight: bold;
  margin: 0 5px; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
}
footer .copyright .copy a:hover {
  color: #D28E1B;
}

/*=============================================== [ single-product page ] ================================================*/
/*======================== [ main in single-product ] ==================================*/
/******** page-name ***********/
#navigation-page { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-wrap: wrap;
  margin: 15px 0;
}
#navigation-page li a {
  color: #33313B;
  font-size: 0.875rem;
  margin-left: 10px;
  font-weight: 400;
}
#navigation-page li a:hover {
  color: #D19E66;
}
#navigation-page li a:hover:after {
  color: #33313B;
}
#navigation-page li a:after {
  content: "›";
  font-size: 1.25rem;
  margin-right: 10px;
  margin-top: 5px;
  transition: 0.3s;
}
#navigation-page li:last-child a {
  font-weight: normal;
  pointer-events: none;
}
#navigation-page li:last-child a:after {
  content: "";
}

/******** product ***********/
.bg-gray-box {
  background-color: #F7F7F7;
  padding: 30px;
  border-radius: 5px;
  margin-bottom: 30px;
}

.product-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
  position: relative;
}
@media (max-width: 1140px) {
  .product-info {
    grid-template-columns: 1fr;
  }
}
.product-info .pro-pic { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
}
.product-info .pro-pic .slide-for {
  width: 100%;
  margin-bottom: 10px;
  position: relative;
}
.product-info .pro-pic .slide-for img, .product-info .pro-pic .slide-for video {
  width: 100%;
  height: 450px;
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 768px) {
  .product-info .pro-pic .slide-for img, .product-info .pro-pic .slide-for video {
    height: 350px;
  }
}
@media (max-width: 576px) {
  .product-info .pro-pic .slide-for img, .product-info .pro-pic .slide-for video {
    height: 300px;
  }
}
@media (max-width: 480px) {
  .product-info .pro-pic .slide-for img, .product-info .pro-pic .slide-for video {
    height: 250px;
  }
}
.product-info .pro-pic .slide-nav { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-wrap: wrap;
}
.product-info .pro-pic .slide-nav li {
  margin: 5px 0 5px 11px;
  height: 80px;
  width: 80px;
  background-color: white;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.4s;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}
.product-info .pro-pic .slide-nav li:hover {
  border: 1px solid #D19E66;
  padding: 0;
}
.product-info .pro-pic .slide-nav img, .product-info .pro-pic .slide-nav video {
  height: 100%;
  width: 100%;
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}
.product-info .pro-text {
  color: #33313B; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
}
.product-info .pro-text h2 {
  font-size: 2.1875rem;
  margin-bottom: 20px;
}
.product-info .pro-text hr {
  background-color: #EFEFEF;
  height: 0.5px;
  width: 100%;
  border: none;
}
.product-info .pro-text .short-info { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
  border-bottom: 1px solid #EFEFEF;
}
.product-info .pro-text .short-info .short { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-basis: 49%;
  align-items: center;
}
@media (max-width: 576px) {
  .product-info .pro-text .short-info .short {
    flex-basis: 100%;
  }
}
.product-info .pro-text .short-info .short span {
  font-size: 1.25rem;
  margin-bottom: 20px;
}
.product-info .pro-text .short-info .short span:first-child {
  font-weight: bold;
  flex-basis: 40%;
}
.product-info .pro-text .short-info .short span:last-child {
  font-size: 1.125rem;
  font-weight: 300;
}
.product-info .pro-text .button-size-parent { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 576px) {
  .product-info .pro-text .button-size-parent {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
  }
}
.product-info .pro-text .button-size-parent span {
  font-size: 1.25rem;
  font-weight: bold;
}
.product-info .pro-text .button-size-parent button#button-size {
  border: 1px solid #D19E66;
  background-color: white;
  border-radius: 5px;
  width: 185px;
  height: 40px;
  color: #D19E66;
  margin: 20px 0;
}
.product-info .pro-text .button-size-parent button#button-size:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
@media (max-width: 576px) {
  .product-info .pro-text .button-size-parent button#button-size {
    align-self: center;
  }
}
.product-info .pro-text .button-size-parent button#button-size span { /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  font-size: 1rem;
  font-weight: normal;
}
.product-info .pro-text .button-size-parent button#button-size span.icon-question {
  width: 20px;
  height: 20px;
  background-color: #D19E66;
  color: white;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
}
.product-info .pro-text #size-popup {
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.45);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
  z-index: 15;
}
.product-info .pro-text #size-popup .dialog-size {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  width: 40vw;
  max-height: 95vh;
  background-color: white;
  border-radius: 5px;
  padding: 10px 30px 30px 30px;
  color: #33313B; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
}
@media (max-width: 1200px) {
  .product-info .pro-text #size-popup .dialog-size {
    padding: 10px 15px 15px 15px;
  }
}
@media (max-width: 1200px) {
  .product-info .pro-text #size-popup .dialog-size {
    width: 60vw;
  }
}
@media (max-width: 1140px) {
  .product-info .pro-text #size-popup .dialog-size {
    width: 80vw;
  }
}
.product-info .pro-text #size-popup .dialog-size .head-size { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-info .pro-text #size-popup .dialog-size .head-size h6 {
  font-size: 1.25rem;
  font-weight: normal;
}
.product-info .pro-text #size-popup .dialog-size .head-size button#close-btn-size {
  font-size: 2.5rem;
  background-color: transparent;
  border: none;
}
.product-info .pro-text #size-popup .dialog-size .head-size button#close-btn-size:hover {
  color: #EF394E;
}
.product-info .pro-text #size-popup .dialog-size img.size-img {
  width: 250px;
  align-self: center;
}
@media (max-width: 768px) {
  .product-info .pro-text #size-popup .dialog-size img.size-img {
    width: 200px;
  }
}
.product-info .pro-text #size-popup .dialog-size .circle-list { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  overflow-y: auto;
  /*[____ style for scroll ____]*/
  scrollbar-width: thin; /* "auto" or "thin" */
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.product-info .pro-text #size-popup .dialog-size .circle-list::-webkit-scrollbar {
  width: 4px;
}
.product-info .pro-text #size-popup .dialog-size .circle-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.product-info .pro-text #size-popup .dialog-size .circle-list::-webkit-scrollbar-thumb {
  background: #888;
}
.product-info .pro-text #size-popup .dialog-size .circle-list::-webkit-scrollbar-thumb:hover {
  background: #888;
}
.product-info .pro-text #size-popup .dialog-size .circle-list .circle {
  flex-basis: 80px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 5px;
}
@media (max-width: 768px) {
  .product-info .pro-text #size-popup .dialog-size .circle-list .circle {
    flex-basis: 70px;
  }
}
.product-info .pro-text #size-popup .dialog-size .circle-list .circle .cir-top {
  width: 80px;
  height: 80px;
  background-color: #D19E66;
  color: white;
  border-radius: 50%; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  .product-info .pro-text #size-popup .dialog-size .circle-list .circle .cir-top {
    width: 70px;
    height: 70px;
    font-size: 0.875rem;
  }
}
.product-info .pro-text #size-popup .dialog-size .circle-list .circle .cir-bottom {
  direction: ltr;
}
.product-info .pro-text #notif-popup {
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.45);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  display: none;
}
.product-info .pro-text #notif-popup .notif {
  padding: 20px 0;
  border-radius: 5px;
  background-color: white;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  color: #33313B;
  width: 25vw; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
}
@media (max-width: 1400px) {
  .product-info .pro-text #notif-popup .notif {
    width: 40vw;
  }
}
@media (max-width: 1140px) {
  .product-info .pro-text #notif-popup .notif {
    width: 50vw;
  }
}
@media (max-width: 768px) {
  .product-info .pro-text #notif-popup .notif {
    width: 80vw;
  }
}
@media (max-width: 480px) {
  .product-info .pro-text #notif-popup .notif {
    width: 90vw;
  }
}
.product-info .pro-text #notif-popup .notif .head-notif { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  margin-bottom: 20px;
}
.product-info .pro-text #notif-popup .notif .head-notif h6 {
  font-size: 1rem;
  font-weight: normal;
  text-align: right;
}
.product-info .pro-text #notif-popup .notif .info-call {
  border-top: 1px solid #C4C4C4;
  border-bottom: 1px solid #C4C4C4;
  padding: 20px;
  font-size: 0.9375rem;
  /********* checkbox *********/
}
.product-info .pro-text #notif-popup .notif .info-call > span {
  font-size: 1rem;
  font-weight: bold;
}
.product-info .pro-text #notif-popup .notif .info-call label {
  font-weight: normal;
}
.product-info .pro-text #notif-popup .notif .info-call .container-checkbox {
  margin-top: 10px;
  text-align: right;
  /* Hide the browser's default checkbox */
  /* Create a custom checkbox */
  /* On mouse-over, add a grey background color */
  /* When the checkbox is checked, add a blue background */
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Show the checkmark when checked */
  /* Style the checkmark/indicator */
}
.product-info .pro-text #notif-popup .notif .info-call .container-checkbox .check {
  display: block;
  position: relative;
  padding-right: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: #33313B;
  transition: 0.3s;
}
.product-info .pro-text #notif-popup .notif .info-call .container-checkbox .check:hover {
  color: #D19E66;
}
.product-info .pro-text #notif-popup .notif .info-call .container-checkbox .check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.product-info .pro-text #notif-popup .notif .info-call .container-checkbox .checkmark {
  position: absolute;
  top: 0;
  right: 0;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border: 1px solid #A2A3A7;
  border-radius: 2px;
  transform: translateY(2px); /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-info .pro-text #notif-popup .notif .info-call .container-checkbox .container:hover input ~ .checkmark {
  background-color: #000;
}
.product-info .pro-text #notif-popup .notif .info-call .container-checkbox .check input:checked ~ .checkmark {
  background-color: transparent;
  border: 1px solid #D19E66;
}
.product-info .pro-text #notif-popup .notif .info-call .container-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.product-info .pro-text #notif-popup .notif .info-call .container-checkbox .check input:checked ~ .checkmark:after {
  display: block;
}
.product-info .pro-text #notif-popup .notif .info-call .container-checkbox .check .checkmark:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #D19E66;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.product-info .pro-text #notif-popup .notif .button-notif {
  margin: 30px 0 10px 0;
  text-align: center;
}
.product-info .pro-text #notif-popup .notif .button-notif input[type=submit] {
  background-color: #D19E66;
  width: 160px;
  height: 45px;
  color: white;
  border-radius: 5px;
  border: 1px solid #D19E66;
  font-size: 1rem;
  margin-left: 10px;
}
.product-info .pro-text #notif-popup .notif .button-notif input[type=submit]:hover {
  background-color: #D28E1B;
  border: 1px solid #D28E1B;
}
@media (max-width: 480px) {
  .product-info .pro-text #notif-popup .notif .button-notif input[type=submit] {
    width: 140px;
    height: 45px;
  }
}
.product-info .pro-text #notif-popup .notif .button-notif #back {
  color: #33313B;
  width: 120px;
  height: 45px;
  border-radius: 5px;
  font-size: 1rem;
  border: 1px solid #D19E66;
}
.product-info .pro-text #notif-popup .notif .button-notif #back:hover {
  background-color: #EF394E;
  border: 1px solid #EF394E;
  color: white;
}
@media (max-width: 480px) {
  .product-info .pro-text #notif-popup .notif .button-notif #back {
    width: 100px;
    height: 45px;
  }
}
.product-info .pro-text div.number-size-slide {
  width: 480px;
  height: 50px;
  margin: 10px 0; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
@media (max-width: 1200px) {
  .product-info .pro-text div.number-size-slide {
    width: 320px;
  }
}
@media (max-width: 576px) {
  .product-info .pro-text div.number-size-slide {
    width: 300px;
  }
}
@media (max-width: 480px) {
  .product-info .pro-text div.number-size-slide {
    width: 230px;
  }
}
@media (max-width: 346px) {
  .product-info .pro-text div.number-size-slide {
    width: 200px;
  }
}
@media (max-width: 576px) {
  .product-info .pro-text div.number-size {
    width: 50px !important;
    height: 30px !important;
  }
}
@media (max-width: 480px) {
  .product-info .pro-text div.number-size {
    width: 40px !important;
    height: 20px !important;
  }
}
@media (max-width: 346px) {
  .product-info .pro-text div.number-size {
    width: 30px !important;
    height: 20px !important;
  }
}
.product-info .pro-text .slick-slider { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 480px;
  flex-wrap: wrap;
}
.product-info .pro-text .slick-slider .slick-track, .product-info .pro-text .slick-slider .slick-list { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 480px;
}
.product-info .pro-text .slick-initialized .slick-slide { /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
}
.product-info .pro-text .buy {
  margin-top: 40px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 1200px) {
  .product-info .pro-text .buy {
    flex-direction: column;
  }
}
.product-info .pro-text .buy .price-buy { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  text-align: center;
}
@media (max-width: 1200px) {
  .product-info .pro-text .buy .price-buy {
    margin-bottom: 20px;
  }
}
.product-info .pro-text .buy .price-buy h5 {
  font-size: 1.875rem;
  margin-bottom: 10px;
}
.product-info .pro-text .buy .price-buy .real-price span {
  color: #20D29B;
}
.product-info .pro-text .buy .price-buy .real-price span:first-child {
  font-size: 2.5rem;
}
.product-info .pro-text .buy .price-buy .real-price span:last-child {
  font-size: 1.375rem;
}
.product-info .pro-text .buy .add { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
}
.product-info .pro-text .buy .add button {
  width: 270px;
  height: 60px;
  border-radius: 5px; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  align-items: center;
  font-size: 1.375rem;
  padding: 0 30px 0 0;
}
@media (max-width: 576px) {
  .product-info .pro-text .buy .add button {
    font-size: 1.125rem;
  }
}
@media (max-width: 480px) {
  .product-info .pro-text .buy .add button {
    width: 230px;
    height: 50px;
    font-size: 1.125rem;
    padding: 0 15px 0 5px;
  }
}
.product-info .pro-text .buy .add button svg {
  height: 25px;
  width: 25px;
  margin-left: 10px;
}
.product-info .pro-text .buy .add button.add-to-basket {
  background-color: #D19E66;
  color: white;
  margin-bottom: 20px;
  stroke: white;
  border: none;
}
.product-info .pro-text .buy .add button.add-to-basket:hover {
  background-color: #D28E1B;
}
.product-info .pro-text .buy .add button.add-later {
  background-color: white;
  border: 1px solid #D19E66;
  color: #33313B;
}
.product-info .pro-text .buy .add button.add-later:hover {
  background-color: rgba(239, 57, 78, 0.2);
}
.product-info .pro-text .buy .add button.add-later svg {
  color: #33313B;
}
.product-info .pro-text .buy .add button.add-later #heart-fullcolor {
  color: #EF394E;
  display: none;
  transform: scale(0);
}

.number-size {
  background-color: white;
  border-radius: 5px;
  border: 1px solid #707070;
  width: 70px !important;
  height: 30px !important;
  margin: 0 5px;
  cursor: pointer;
  font-weight: normal;
  position: relative; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
}
.number-size:hover {
  border: 1px solid #20D29B;
}
.number-size input[type=checkbox] {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
}
.number-size svg {
  display: none;
}

.size-active {
  position: relative;
  border: 1px solid #20D29B;
  padding-right: 10px;
}
.size-active svg {
  width: 13px;
  height: 13px;
  margin-left: 10px;
  z-index: 5;
  display: inline-block;
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
}

#product .buy .off-item span {
  color: #BCBCBC;
  font-weight: normal;
  margin-left: 5px;
  font-size: 1.125rem;
  display: none;
}
#product .buy .off-item span:first-child {
  font-size: 1.875rem;
  -webkit-text-decoration: line-through #EF394E;
          text-decoration: line-through #EF394E;
}
#product .off-product .buy .off-item span {
  display: inline-block !important;
}
#product .end-item {
  text-align: center;
  width: 100%;
  display: none;
}
#product .end-item h3 {
  font-size: 2.5rem;
  color: #707070;
  margin-bottom: 20px;
}
#product .end-item button#send-exist {
  background-color: #D19E66;
  color: white;
  font-size: 1.125rem;
  width: 275px;
  height: 55px;
  border: none;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  border-radius: 5px; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#product .end-item button#send-exist.active {
  background-color: lightgray;
  color: black;
}
#product .end-item button#send-exist svg {
  height: 25px;
  width: 25px;
  color: white;
  margin-left: 10px;
  fill: currentColor;
}
#product .end-item button#send-exist:hover {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
}
#product .end-item button#send-exist:hover svg {
  -webkit-animation: ring 3s 0s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 3s 0s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ring 3s 0s ease-in-out infinite;
  transform-origin: 50% 4px;
}
#product .end-product .end-item {
  display: block;
}
#product .end-product .buy .price-buy, #product .end-product .buy .add {
  display: none;
}
#product .fav-product .add button.add-later svg#add-heart {
  display: none;
  transform: scale(0);
}
#product .fav-product .add button.add-later svg#heart-fullcolor {
  color: #EF394E;
  display: block;
  transform: scale(1);
}

/* animate for ring */
@keyframes ring {
  0% {
    transform: rotate(0);
  }
  1% {
    transform: rotate(30deg);
  }
  3% {
    transform: rotate(-28deg);
  }
  5% {
    transform: rotate(34deg);
  }
  7% {
    transform: rotate(-32deg);
  }
  9% {
    transform: rotate(30deg);
  }
  11% {
    transform: rotate(-28deg);
  }
  13% {
    transform: rotate(26deg);
  }
  15% {
    transform: rotate(-24deg);
  }
  17% {
    transform: rotate(22deg);
  }
  19% {
    transform: rotate(-20deg);
  }
  21% {
    transform: rotate(18deg);
  }
  23% {
    transform: rotate(-16deg);
  }
  25% {
    transform: rotate(14deg);
  }
  27% {
    transform: rotate(-12deg);
  }
  29% {
    transform: rotate(10deg);
  }
  31% {
    transform: rotate(-8deg);
  }
  33% {
    transform: rotate(6deg);
  }
  35% {
    transform: rotate(-4deg);
  }
  37% {
    transform: rotate(2deg);
  }
  39% {
    transform: rotate(-1deg);
  }
  41% {
    transform: rotate(1deg);
  }
  43% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}
/*_ img zoom _*/
.img-zoom-result {
  border: 1px solid #d4d4d4;
  /*set the size of the result div:*/
  width: 49%;
  height: 450px;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 12;
}
@media (max-width: 1140px) {
  .img-zoom-result {
    display: none;
  }
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid #D19E66;
  /*set the size of the lens:*/
  width: 180px;
  height: 180px;
  z-index: 6;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}
@media (max-width: 1140px) {
  .img-zoom-lens {
    display: none;
  }
}

/******** product-explain ***/
.pro-explain {
  color: #33313B;
}
.pro-explain h4 {
  font-size: 1.375rem;
  margin-bottom: 15px;
  color: #33313B;
}
.pro-explain p {
  font-size: 1.25rem;
  font-weight: lighter;
}
@media (max-width: 576px) {
  .pro-explain p {
    font-size: 1.125rem;
  }
}

/******** product-details ***/
.pro-details h4 {
  font-size: 1.375rem;
  margin-bottom: 15px;
  color: #33313B;
}
.pro-details .short-info .short { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  border-bottom: 1px solid #D1D1D1;
  padding: 10px 0;
}
.pro-details .short-info .short:last-child {
  border-bottom: none;
}
.pro-details .short-info .short span {
  font-weight: lighter;
}
.pro-details .short-info .short span:first-child {
  flex-basis: 50%;
  font-weight: normal;
  font-size: 1.125rem;
}

.disable-det {
  display: none;
  padding: 0;
}

/******** commnet ***/
input, textarea {
  transition: 0.3s;
}

.commnet { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  text-align: center;
}
.commnet h4 {
  font-size: 1.375rem;
  margin-bottom: 15px;
  color: #33313B;
  text-align: right;
}
.commnet .sign-com {
  display: none;
}
.commnet form.comment-form textarea {
  width: 98%;
  height: 220px;
  border-radius: 10px;
  border: 1px solid #C4C4C4;
  padding: 25px;
  color: #B9B9B9;
  font-size: 1.125rem;
}
.commnet form.comment-form textarea:hover, .commnet form.comment-form textarea:focus {
  border: 1px solid #D19E66;
}
.commnet form.comment-form input[type=submit] {
  width: 300px;
  height: 60px;
  background-color: #D19E66;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.375rem;
  margin-top: 30px;
}
@media (max-width: 480px) {
  .commnet form.comment-form input[type=submit] {
    width: 250px;
    height: 50px;
  }
}
.commnet form.comment-form input[type=submit]:hover {
  background-color: #D28E1B;
}
.commnet .personal-comment {
  margin: 30px 0;
}
.commnet .personal-comment .p-comment {
  text-align: right;
  padding: 30px 0;
  border-bottom: 1px solid #D1D1D1; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
}
@media (max-width: 576px) {
  .commnet .personal-comment .p-comment {
    flex-direction: column;
  }
}
.commnet .personal-comment .p-comment:last-child {
  border-bottom: none;
}
.commnet .personal-comment .p-comment .com-pic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #D19E66;
  border: 1px solid #D19E66;
  margin-left: 30px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
}
.commnet .personal-comment .p-comment .com-pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.commnet .personal-comment .p-comment .com-pic svg {
  width: 70%;
  height: 70%;
  color: white;
  fill: currentColor;
}
.commnet .personal-comment .p-comment .com-text { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  flex: 1;
  -webkit-flex: 1;
  -webkit-box-flex: 1;
  -moz-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
}
@media (max-width: 576px) {
  .commnet .personal-comment .p-comment .com-text {
    margin-top: 20px;
  }
}
.commnet .personal-comment .p-comment .com-text .com-head {
  margin-bottom: 20px;
}
.commnet .personal-comment .p-comment .com-text .com-head span {
  font-size: 1.25rem;
  color: #33313B;
}
@media (max-width: 576px) {
  .commnet .personal-comment .p-comment .com-text .com-head span {
    font-size: 1rem;
  }
}
.commnet .personal-comment .p-comment .com-text .com-head span:last-child {
  color: #C4C4C4;
  font-size: 1rem;
  margin-right: 20px;
}
.commnet .personal-comment .p-comment .com-text p {
  font-size: 1.25rem;
  color: #33313B;
}
@media (max-width: 576px) {
  .commnet .personal-comment .p-comment .com-text p {
    font-size: 1.125rem;
  }
}
@media (max-width: 480px) {
  .commnet .personal-comment .p-comment .com-text p {
    font-size: 1rem;
  }
}

.sign-in-comment .sign-com {
  color: #33313B;
  margin: 30px 0; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sign-in-comment .sign-com span {
  font-size: 1.625rem;
}
@media (max-width: 768px) {
  .sign-in-comment .sign-com span {
    font-size: 1.25rem;
  }
}
.sign-in-comment .sign-com a {
  width: 300px;
  height: 60px;
  border: 1px solid #D19E66;
  border-radius: 30px;
  color: #33313B;
  font-size: 1.375rem; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.sign-in-comment .sign-com a:hover {
  background-color: #D19E66;
  color: white;
}
@media (max-width: 480px) {
  .sign-in-comment .sign-com a {
    width: 250px;
    height: 50px;
    font-size: 1.25rem;
  }
}
@media (max-width: 1140px) {
  .sign-in-comment .sign-com a {
    align-self: center;
    margin-top: 40px; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
    display: inline-flex;
  }
}
@media (max-width: 1140px) {
  .sign-in-comment .sign-com {
    flex-direction: column;
    align-items: flex-start;
  }
}
.sign-in-comment form.comment-form {
  display: none;
}

/*=============================================== [ contact-us page ] ================================================*/
#contact-us {
  background-color: #F7F7F7;
  border-radius: 5px;
  margin: 30px 0;
}
#contact-us .head-section {
  padding: 30px 40px;
}
#contact-us .head-section h3 {
  margin: 0;
  font-weight: 600;
  color: #42464F;
}

.address {
  color: #33313B;
  border-bottom: 1px solid #C4C4C4;
  padding: 20px 40px;
}
@media (max-width: 1140px) {
  .address {
    padding: 20px;
  }
}
.address li { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.address li svg, .address li img {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}
.address li span {
  font-weight: 600;
  font-size: 1.25rem;
}
.address li span:first-child {
  color: #000;
}
.address li span:last-child {
  font-weight: 400;
  margin-right: 10px;
  color: #42464F;
}

.social-contact {
  padding: 60px 40px 100px 40px;
  border-bottom: 1px solid #C4C4C4; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
@media (max-width: 1140px) {
  .social-contact {
    flex-direction: column;
  }
}
@media (max-width: 1140px) {
  .social-contact {
    padding: 40px 20px;
  }
}
.social-contact li a {
  height: 60px;
  width: 290px;
  border-radius: 5px;
  background-color: white;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  font-size: 1.375rem;
  color: #42464F;
  font-weight: 600; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.social-contact li a svg, .social-contact li a img {
  height: 30px;
  width: 30px;
  margin-left: 10px;
}
.social-contact li a:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
@media (max-width: 1200px) {
  .social-contact li a {
    width: 220px;
  }
}
@media (max-width: 1140px) {
  .social-contact li a {
    width: 400px;
    margin-bottom: 20px;
  }
}
@media (max-width: 576px) {
  .social-contact li a {
    width: 300px;
  }
}
@media (max-width: 480px) {
  .social-contact li a {
    width: 250px;
  }
}

.our-pic { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 60px 40px;
}
@media (max-width: 1140px) {
  .our-pic {
    padding: 40px 20px;
  }
}
.our-pic img {
  width: 90%;
  height: 500px;
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
@media (max-width: 1140px) {
  .our-pic img {
    height: 450px;
  }
}
@media (max-width: 992px) {
  .our-pic img {
    height: 400px;
  }
}
@media (max-width: 768px) {
  .our-pic img {
    width: 100%;
    height: 300px;
  }
}
.our-pic a {
  background-color: #D19E66;
  padding: 15px 60px;
  border-radius: 10px;
  margin-top: 40px; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  color: white;
}
@media (max-width: 576px) {
  .our-pic a {
    padding: 15px 30px;
    font-size: 1.25rem;
  }
}
@media (max-width: 480px) {
  .our-pic a {
    padding: 10px;
    font-size: 1rem;
  }
}
@media (max-width: 346px) {
  .our-pic a {
    font-size: 0.875rem;
  }
}
.our-pic a svg, .our-pic a img {
  width: 30px;
  height: 30px;
  margin-left: 10px;
}
@media (max-width: 480px) {
  .our-pic a svg, .our-pic a img {
    width: 25px;
    height: 25px;
  }
}
.our-pic a:hover {
  background-color: #D28E1B;
}

/*=============================================== [ about & rules ] ================================================*/
.paragraph {
  padding: 40px 60px 60px 60px;
  margin-bottom: 60px;
  color: #33313B;
}
.paragraph .head-section h3 {
  margin: 10px 0;
}
@media (max-width: 768px) {
  .paragraph {
    padding: 40px;
  }
}
@media (max-width: 576px) {
  .paragraph {
    padding: 20px;
  }
}
.paragraph p {
  line-height: 2.5;
  font-size: 1.25rem;
  font-weight: 400;
}
@media (max-width: 768px) {
  .paragraph p {
    line-height: 2;
  }
}
@media (max-width: 576px) {
  .paragraph p {
    font-size: 1.125rem;
  }
}
@media (max-width: 480px) {
  .paragraph p {
    font-size: 1rem;
  }
}

/*=============================================== [ question ] ================================================*/
#question {
  color: #33313B;
}
#question .bg-gray-box {
  padding: 0;
}
#question .tab-question {
  width: 100%;
}
#question .ht-question { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  border: none;
  padding: 40px;
  background-color: transparent;
}
@media (max-width: 992px) {
  #question .ht-question {
    padding: 30px 20px;
  }
}
#question .ht-question h6 {
  color: #33313B;
  font-size: 1.125rem;
  margin-left: 30px;
}
@media (max-width: 992px) {
  #question .ht-question h6 {
    font-size: 1rem;
  }
}
#question .ht-question svg, #question .ht-question img {
  height: 20px;
  width: 20px;
  stroke: #33313B;
  position: absolute;
  top: 50%;
  left: 30px;
  fill: currentColor;
  transform: translateY(-50%);
}
@media (max-width: 992px) {
  #question .ht-question svg, #question .ht-question img {
    height: 15px;
    width: 15px;
    left: 20px;
  }
}
#question .ct-question {
  padding: 0 40px 40px 40px;
  display: none;
}
@media (max-width: 992px) {
  #question .ct-question {
    padding: 0 20px 20px 20px;
  }
}
#question .ct-question p {
  line-height: 2;
  font-size: 1.125rem;
  font-weight: 300;
}
@media (max-width: 992px) {
  #question .ct-question p {
    font-size: 1rem;
  }
}

/*=============================================== [ search ] ================================================*/
#search {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
  margin: 30px 0;
  color: #33313B;
}
@media (max-width: 1200px) {
  #search {
    grid-template-columns: 1fr 2fr;
  }
}
@media (max-width: 768px) {
  #search {
    grid-template-columns: 1fr;
    grid-auto-flow: dense;
  }
  #search aside {
    grid-row: 2;
  }
  #search article.search-result {
    grid-row: 1;
  }
}
#search aside {
  /*=== [ head-aside ] ====*/
  /*=== [ cat-filter ] ====*/
  /*=== [ limit ] ====*/
  /*=== [ range ] ====*/
  /*=== [ size-sidebar ] ====*/
}
#search aside .bg-gray-box {
  padding: 20px;
  margin-bottom: 20px;
}
#search aside .head-aside {
  text-align: center;
}
#search aside .head-aside h3 {
  font-size: 1.25rem;
}
#search aside .cat-filter {
  position: relative;
  overflow: hidden;
}
#search aside .cat-filter .head-aside {
  text-align: right;
  margin: 20px 0;
}
#search aside .cat-filter .cat-filter-list {
  margin-bottom: 15px;
}
#search aside .cat-filter .cat-filter-list li {
  position: relative;
}
#search aside .cat-filter .cat-filter-list li .cat-btn {
  background-color: transparent;
  border: none;
}
#search aside .cat-filter .cat-filter-list li .cat-btn svg, #search aside .cat-filter .cat-filter-list li .cat-btn img {
  fill: currentColor;
  color: #33313B;
  transform: rotate(90deg);
}
#search aside .cat-filter .cat-filter-list .cat-active {
  transform: translateX(-10px);
}
#search aside .cat-filter .cat-filter-list .cat-active .cat-btn {
  color: #D19E66;
  text-shadow: 0 0 1px;
}
#search aside .cat-filter .cat-filter-list .cat-active .cat-btn svg {
  color: #D19E66;
  fill: currentColor;
}
#search aside .cat-filter .cat-filter-list > li .cat-btn {
  font-size: 1.125rem;
}
#search aside .cat-filter .cat-filter-list > li .cat-btn svg {
  height: 12px;
  width: 12px;
}
#search aside .cat-filter .cat-filter-list > li .child-cat-aside {
  height: 0;
  overflow: hidden;
}
#search aside .cat-filter .cat-filter-list > li .child-cat-aside.active {
  height: auto;
}
#search aside .cat-filter .cat-filter-list > li .child-cat-aside li {
  padding-right: 20px;
  margin: 15px 5px 15px 0;
  transition: 0.3s;
}
#search aside .cat-filter .cat-filter-list > li .child-cat-aside li .cat-btn {
  font-size: 1rem;
}
#search aside .cat-filter .cat-filter-list > li .child-cat-aside li .cat-btn svg {
  height: 12px;
  width: 12px;
}
#search aside .cat-filter .cat-filter-list > li .child-cat-aside li:hover {
  transform: translateX(-10px);
}
#search aside .cat-filter .cat-filter-list > li .child-cat-aside li:hover .cat-btn {
  color: #D19E66;
  text-shadow: 0 0 1px;
}
#search aside .cat-filter .cat-filter-list > li .child-cat-aside li:hover .cat-btn svg {
  color: #D19E66;
}
#search aside .cat-filter .more-cat { /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 15px 10px;
  position: absolute;
  bottom: 0;
  left: 50%;
  color: #D19E66;
  font-weight: 700;
  background-color: #F7F7F7;
  border: none;
  transform: translateX(-50%);
  z-index: 2;
}
#search aside .cat-filter .more-cat svg {
  height: 15px;
  width: 15px;
}
#search aside .cat-filter .more-cat span {
  position: relative;
  padding-right: 15px;
}
#search aside .cat-filter .more-cat:hover {
  text-shadow: 0 0 2px rgba(209, 158, 102, 0.5);
}
#search aside .limit .content-limit {
  height: 0;
  overflow: hidden; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  align-items: center;
}
#search aside .has-hide-content .head-aside {
  text-align: right;
  position: relative;
  cursor: pointer; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
}
#search aside .has-hide-content .head-aside svg {
  height: 15px;
  width: 15px;
  margin-left: 10px;
}
#search aside #range-sidebar {
  width: calc(100% - 20px);
}
#search aside .noUi-horizontal {
  height: 3px;
  margin: 30px 0;
}
#search aside .noUi-target {
  background: #B9B9B9;
  border-radius: 10px;
  border: none;
}
#search aside .noUi-connect {
  background: #D19E66;
}
#search aside .noUi-horizontal .noUi-handle {
  width: 10px;
  height: 20px;
  right: -10px;
  top: -8px;
  cursor: pointer;
  border-radius: 3px;
}
#search aside .noUi-handle {
  border-radius: 3px;
  background: #D19E66;
  cursor: default;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
#search aside .noUi-handle:after, #search aside .noUi-handle:before {
  content: "";
  display: block;
  position: absolute;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #D19E66;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
#search aside .range-counter-parent {
  width: 100%; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
#search aside .range-counter { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}
#search aside .range-counter span {
  color: #B9B9B9;
  font-size: 1.125rem;
  font-weight: 400;
}
#search aside .range-counter span#range1, #search aside .range-counter span#range2 {
  color: black;
  font-size: 1.25rem;
  font-weight: 500;
  flex: 1;
  width: 77px;
  text-align: center;
}
#search aside .weight-sidebar .head-aside {
  text-align: right; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
}
#search aside .weight-sidebar .head-aside span {
  color: #BCBCBC;
  margin: 5px 5px 0 0;
}
#search aside .content-weight {
  height: 0;
  overflow: hidden; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  align-items: center;
}
#search aside .content-weight .range-counter {
  flex-direction: row;
  align-items: center;
}
#search aside .content-weight .range-counter span {
  color: #B9B9B9;
  font-size: 1.125rem;
}
#search aside .content-weight .range-counter span#w-range1, #search aside .content-weight .range-counter span#w-range2 {
  color: black;
  font-size: 1.125rem;
}
#search aside .size-sidebar { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
}
#search aside .size-sidebar .content-size-sidebar {
  overflow: hidden;
  height: 0;
}
#search aside .size-sidebar .content-size-sidebar .number-size-parent {
  max-height: 200px;
  overflow-y: auto;
  /*[____ style for scroll ____]*/
  scrollbar-width: thin; /* "auto" or "thin" */
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */ /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}
#search aside .size-sidebar .content-size-sidebar .number-size-parent::-webkit-scrollbar {
  width: 4px;
}
#search aside .size-sidebar .content-size-sidebar .number-size-parent::-webkit-scrollbar-track {
  background: #f1f1f1;
}
#search aside .size-sidebar .content-size-sidebar .number-size-parent::-webkit-scrollbar-thumb {
  background: #888;
}
#search aside .size-sidebar .content-size-sidebar .number-size-parent::-webkit-scrollbar-thumb:hover {
  background: #888;
}
#search aside .size-sidebar .content-size-sidebar .number-size-parent .number-size {
  margin: 0 8px 15px 8px;
}
#search aside .btn-filter {
  background-color: #D19E66;
  color: white;
  width: 100%;
  height: 45px; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 1.125rem;
}
#search aside .btn-filter:hover {
  background-color: #D28E1B;
}

#w-range-sidebar {
  width: calc(100% - 20px);
}

/*=============================================== [ article ] ================================================*/
article.search-result #navigation-page li:last-child a {
  color: #B9B9B9;
}
article.search-result .head-article { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 50px;
  background-color: #F7F7F7;
  border-radius: 5px;
  padding: 10px 20px;
}
article.search-result .h-right { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
article.search-result .h-right > span {
  font-size: 1.125rem;
  margin: 10px 0 10px 10px;
}
article.search-result .h-right .filter-article { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-wrap: wrap;
}
article.search-result .h-right .filter-article li {
  margin: 10px 0 10px 5px;
}
article.search-result .h-right .filter-article li .filter-btn {
  background-color: transparent;
  border: none;
  padding: 5px 15px;
  border-radius: 5px;
  color: #33313B;
  font-size: 1rem;
  font-weight: 400;
}
article.search-result .h-right .filter-article li .filter-btn:hover {
  background-color: #D19E66;
  color: white;
}
@media (max-width: 576px) {
  article.search-result .h-right .filter-article li .filter-btn {
    font-size: 0.875rem;
    padding: 5px 10px;
  }
}
article.search-result .h-right .filter-article li .btn-active {
  background-color: #D19E66;
  color: white;
}
article.search-result .h-left { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  margin: 10px 0;
}
article.search-result .h-left span {
  font-size: 0.875rem;
  font-weight: lighter;
  color: #33313B;
  margin-left: 10px;
}
article.search-result .h-left select {
  width: 60px;
  padding-right: 15px;
  background-color: transparent;
  color: #33313B;
  border: 1px solid #B9B9B9;
  font-weight: 400;
  height: 35px;
  font-size: 1.125rem;
}
article.search-result .content-article {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}
article.search-result .content-article .product-box {
  margin: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
article.search-result .content-article .product-box:hover {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
@media (max-width: 1200px) {
  article.search-result .content-article {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 576px) {
  article.search-result .content-article {
    grid-template-columns: 1fr;
  }
}
article.search-result .num-page {
  margin-top: 30px;
  background-color: #F7F7F7;
  border-radius: 5px;
  padding: 15px 20px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
}
article.search-result .num-page .num-btn {
  font-size: 1.1875rem;
  color: #33313B;
  width: 35px;
  height: 35px;
  border-radius: 5px;
  border: none;
  margin-left: 5px;
  background-color: transparent; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
article.search-result .num-page .num-btn:hover {
  background-color: #D19E66;
  color: white;
}
article.search-result .num-page .num-active {
  background-color: #D19E66;
  color: white;
}

/*=============================================== [ step-buy -- step1 ] ================================================*/
.step-buy { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
}
@media (max-width: 480px) {
  .step-buy {
    margin: 20px 0;
  }
}
.step-buy .holder {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.1));
}
.step-buy .holder:nth-child(1) .step {
  border-radius: 0 30px 30px 0;
  -webkit-clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 50%);
          clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 50%);
}
.step-buy .holder:nth-child(2) .step {
  -webkit-clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 10% 100%, 0% 50%, 10% 0%);
          clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 10% 100%, 0% 50%, 10% 0%);
}
.step-buy .holder:nth-child(3) .step {
  border-radius: 30px 0 0 30px;
  -webkit-clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0 100%, 0 0);
          clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0 100%, 0 0);
}
.step-buy .step {
  height: 45px;
  width: 250px;
  border: none;
  background-color: white;
  color: #33313B;
  font-size: 1.125rem;
  font-weight: 400;
}
.step-buy .step:hover {
  background-color: #D9B037;
  color: white;
}
@media (max-width: 768px) {
  .step-buy .step {
    width: 160px;
  }
}
@media (max-width: 576px) {
  .step-buy .step {
    width: 130px;
    font-size: 0.875rem;
  }
}
@media (max-width: 480px) {
  .step-buy .step {
    width: 110px;
    font-size: 0.8rem;
    height: 35px;
  }
}
@media (max-width: 346px) {
  .step-buy .step {
    width: 105px;
    font-size: 0.8rem;
  }
}
.step-buy .stp-active {
  background-color: #D9B037;
  color: white;
}
.step-buy .stp-done {
  background-color: #D19E66;
  color: white;
}

.parent-basket {
  display: grid;
  grid-template-columns: 8fr 3fr;
  grid-gap: 30px;
  color: #33313B;
  margin: 30px 0;
}
@media (max-width: 1200px) {
  .parent-basket {
    grid-template-columns: 4fr 2fr;
  }
}
@media (max-width: 768px) {
  .parent-basket {
    grid-template-columns: 1fr;
  }
}

/*======== [ article ] =======*/
.basket-article, .basket-aside, .step-address-parent, .step-final-product {
  background-color: #F7F7F7;
  border-radius: 5px;
}

.basket-article {
  /*________ off-price ______________*/
  /*________ off-price ______________*/
}
.basket-article .head-b-article {
  padding: 30px;
  border-bottom: 1px solid #C4C4C4;
}
.basket-article .head-b-article h4 {
  font-size: 1.25rem;
  font-weight: 500;
  color: #42464F;
}
.basket-article .product-basket {
  padding: 0 30px 0 30px;
}
.basket-article .product-basket .basket-box {
  padding: 30px 0;
  border-bottom: 1px solid #E5E5E5;
}
.basket-article .product-basket .basket-box:last-child {
  border-bottom: none;
}
.basket-article .product-basket .basket-box figure {
  position: relative;
  height: 95px;
  width: 95px;
  margin-left: 20px;
}
@media (max-width: 576px) {
  .basket-article .product-basket .basket-box figure {
    height: 80px;
    width: 80px;
  }
}
.basket-article .product-basket .basket-box figure img {
  height: 100%;
  width: 100%;
  border-radius: 5px;
}
.basket-article .product-basket .b-total-parent { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.basket-article .product-basket .b-total-parent .b-right { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-basis: 40%;
  align-items: center;
  min-height: 100px;
}
@media (max-width: 576px) {
  .basket-article .product-basket .b-total-parent .b-right {
    font-size: 14px;
  }
}
@media (max-width: 1200px) {
  .basket-article .product-basket .b-total-parent .b-right {
    flex-basis: 100%;
  }
}
@media (max-width: 576px) {
  .basket-article .product-basket .b-total-parent .b-right {
    align-items: flex-start;
  }
}
.basket-article .product-basket .b-total-parent .b-right .b-text-right {
  flex: 1;
}
.basket-article .product-basket .b-total-parent .b-right .b-text-right h5 {
  font-size: 1.125rem;
}
@media (max-width: 576px) {
  .basket-article .product-basket .b-total-parent .b-right .b-text-right h5 {
    font-size: 14px;
  }
}
.basket-article .product-basket .b-total-parent .b-right .b-text-right .right-detail { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 30px;
  width: 100%;
  color: #42464F;
}
@media (max-width: 576px) {
  .basket-article .product-basket .b-total-parent .b-right .b-text-right .right-detail {
    margin-top: 10px;
  }
}
.basket-article .product-basket .b-total-parent .b-right .b-text-right .right-detail .bdt span:nth-child(2) {
  font-size: 1.25rem;
}
@media (max-width: 576px) {
  .basket-article .product-basket .b-total-parent .b-right .b-text-right .right-detail .bdt span:nth-child(2) {
    font-size: 14px;
  }
}
.basket-article .product-basket .b-total-parent .b-right .b-text-right .right-detail .bdt span:nth-child(2) span {
  font-size: 1rem;
  font-weight: 400;
}
.basket-article .product-basket .b-total-parent .b-left {
  min-height: 100px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-basis: 55%;
  flex-wrap: wrap;
}
@media (max-width: 1200px) {
  .basket-article .product-basket .b-total-parent .b-left {
    flex-basis: 100%;
    margin-right: 120px;
    margin-top: 40px;
  }
}
@media (max-width: 576px) {
  .basket-article .product-basket .b-total-parent .b-left {
    margin-right: 0;
    margin-top: 10px;
  }
}
.basket-article .product-basket .bt-info h5 {
  font-size: 1.125rem;
}
.basket-article .product-basket .bt-info h5 span {
  font-weight: 400;
}
.basket-article .product-basket .bt-info-detail { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 30px;
}
.basket-article .bt-number {
  flex-basis: 40%;
  text-align: center;
}
@media (max-width: 1200px) {
  .basket-article .bt-number {
    text-align: right;
  }
}
@media (max-width: 480px) {
  .basket-article .bt-number {
    flex-basis: 100%;
  }
}
.basket-article .bt-number h5 {
  color: #42464F;
  font-weight: 400;
}
.basket-article .bt-number .bt-info-detail { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 1200px) {
  .basket-article .bt-number .bt-info-detail {
    align-items: flex-start;
  }
}
@media (max-width: 480px) {
  .basket-article .bt-number .bt-info-detail {
    margin-top: 10px;
  }
}
.basket-article .bt-delete {
  flex-basis: 60%;
  text-align: center;
}
@media (max-width: 1200px) {
  .basket-article .bt-delete {
    text-align: right;
  }
}
@media (max-width: 480px) {
  .basket-article .bt-delete {
    flex-basis: 100%;
    margin-top: 20px;
  }
}
.basket-article .bt-delete .bt-info-detail { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
}
@media (max-width: 1200px) {
  .basket-article .bt-delete .bt-info-detail {
    align-items: flex-start;
  }
}
.basket-article .b-changed {
  color: #EF394E;
  font-weight: 600;
  margin-top: 20px;
  display: none;
  margin-right: 120px;
}
@media (max-width: 576px) {
  .basket-article .b-changed {
    margin-right: 0;
    font-size: 13px;
  }
}
.basket-article .off-price .bt-delete .bt-info-detail {
  margin-top: 5px;
}
@media (max-width: 576px) {
  .basket-article .off-price .bt-delete .bt-info-detail {
    margin-top: 30px;
  }
}
.basket-article .b-off {
  color: #EF394E;
  display: none;
}

.delete {
  width: 100px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid #EF394E;
  background-color: transparent;
  color: #EF394E; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
}
.delete svg {
  height: 16px;
  width: 16px;
  color: #EF394E;
  margin-left: 10px;
  fill: currentColor;
  transition: 0.3s;
}
.delete:hover {
  background-color: #EF394E;
  color: white;
}
.delete:hover svg {
  color: white;
}
@media (max-width: 576px) {
  .delete {
    align-self: flex-end;
  }
}

/*======== [ aside ] =======*/
.basket-aside {
  color: #42464F;
  padding: 20px 0;
}
.basket-aside .price-aside {
  padding: 10px 20px;
}
.basket-aside .price-aside h5 {
  font-size: 1.125rem;
}
.basket-aside .price-aside h5 span {
  font-weight: 400;
  color: #33313B;
}
.basket-aside .price-aside-off, .basket-aside .price-aside, .basket-aside .price-aside-total, .basket-aside .price-complete, .basket-aside .price-send { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 1200px) {
  .basket-aside .price-aside-off, .basket-aside .price-aside, .basket-aside .price-aside-total, .basket-aside .price-complete, .basket-aside .price-send { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
    display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
    display: flex;
    flex-direction: column;
    line-height: 2;
  }
}
@media (max-width: 768px) {
  .basket-aside .price-aside-off, .basket-aside .price-aside, .basket-aside .price-aside-total, .basket-aside .price-complete, .basket-aside .price-send {
    flex-direction: row;
  }
}
@media (max-width: 480px) {
  .basket-aside .price-aside-off, .basket-aside .price-aside, .basket-aside .price-aside-total, .basket-aside .price-complete, .basket-aside .price-send {
    flex-wrap: wrap;
  }
}
@media (max-width: 346px) {
  .basket-aside .price-aside-off, .basket-aside .price-aside, .basket-aside .price-aside-total, .basket-aside .price-complete, .basket-aside .price-send {
    flex-direction: column;
  }
}
.basket-aside .price-aside-off {
  color: #EF394E;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 10px 0;
  padding: 0 20px;
}
.basket-aside .price-aside-off span span {
  font-size: 1.125rem;
  font-weight: 600;
}
.basket-aside .price-aside-total {
  border-top: 1px solid #E5E5E5;
  padding: 20px;
}
.basket-aside .price-aside-total .price-aside-num {
  color: #20D29B;
}
.basket-aside .price-aside-total span span {
  font-size: 1.5rem;
  font-weight: 600;
}
.basket-aside .aside-done {
  height: 50px;
  width: calc(100% - 40px);
  background-color: #D19E66;
  color: white; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  margin-top: 30px;
  font-size: 1.125rem;
}
.basket-aside .aside-done:hover {
  background-color: #D28E1B;
}

/*________ changed-price ______________*/
.changed-price .b-changed {
  display: inline-block;
}

/*________ off-price ______________*/
.off-price .b-off {
  display: inline-block;
}
.off-price .b-off .bt-delete .bt-info-detail {
  margin-top: 5px;
}

/*________ style input type number ______________*/
.quantity {
  position: relative;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.quantity input {
  width: 81px;
  height: 30px;
  display: flex;
  margin: 0;
  border: 1px solid #D19E66;
  border-radius: 7px;
  text-align: center;
  background-color: transparent;
}

.quantity input:focus {
  outline: 0;
  background-color: white;
}

.quantity-nav {
  display: flex;
}

.quantity-button {
  position: relative;
  cursor: pointer;
  width: 20px;
  text-align: center;
  font-size: 1.5rem;
  font-family: "Trebuchet MS", Helvetica, sans-serif !important;
  transform: translateX(-100%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  border-radius: 2px;
}

.quantity-button.quantity-up, .quantity-button.quantity-down {
  position: absolute;
  height: 20px;
  top: 50%;
  transform: translateY(-50%); /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D19E66;
}
.quantity-button.quantity-up:hover svg, .quantity-button.quantity-down:hover svg {
  color: #BCBCBC;
}

.quantity-button.quantity-up {
  right: 5px;
}
.quantity-button.quantity-up svg {
  width: 10px;
  height: 10px;
}

.quantity-button.quantity-down {
  left: 5px;
}
.quantity-button.quantity-down svg {
  width: 10px;
  height: 2px;
}

/*=============================================== [ step-buy -- step2] ================================================*/
.step-address-parent .head-b-article {
  padding: 30px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.step-address-parent .head-b-article h4 {
  font-size: 1.25rem;
  font-weight: 500;
  color: #42464F;
}
.step-address-parent .head-b-article .btn-edit-head {
  background-color: #D19E66;
  color: white;
  border-radius: 10px;
  padding: 10px 40px;
  border: none;
  font-weight: 500;
  font-size: 1rem;
}
.step-address-parent .head-b-article .btn-edit-head span {
  opacity: 0;
  transform: scale(0);
  transition: 0.5s; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
}
.step-address-parent .head-b-article .btn-edit-head:hover span {
  opacity: 1;
  transform: scale(2);
}
@media (max-width: 576px) {
  .step-address-parent .head-b-article .btn-edit-head {
    width: 100%;
    margin-top: 20px;
    padding: 15px 20px;
  }
}
@media (max-width: 576px) {
  .step-address-parent .head-b-article {
    padding: 20px 20px 5px 20px;
    flex-wrap: wrap;
  }
}
.step-address-parent .stp-address {
  padding: 20px;
  /* Hide the browser's default radio button */
  /* Create a custom radio button */
  /* On mouse-over, add a grey background color */
  /* When the radio button is checked, add a blue background */
  /* Create the indicator (the dot/circle - hidden when not checked) */
  /* Show the indicator (dot/circle) when checked */
  /* Style the indicator (dot/circle) */
}
.step-address-parent .stp-address .container-radio {
  display: block;
  position: relative;
  padding: 30px 65px 30px 20px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 1px solid #AAAAAA; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.step-address-parent .stp-address .container-radio:hover {
  border: 1px solid #D19E66;
}
.step-address-parent .stp-address .container-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.step-address-parent .stp-address .checkmark-radio {
  position: absolute;
  top: 50%;
  right: 20px;
  height: 25px;
  width: 25px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid #E5E5E5;
  transform: translateY(-50%);
}
.step-address-parent .stp-address .checkmark-radio:checked {
  border: 1px solid #D19E66;
}
.step-address-parent .stp-address .container-radio:hover input ~ .checkmark-radio {
  background-color: #D19E66;
}
.step-address-parent .stp-address .container-radio input:checked ~ .checkmark-radio {
  background-color: transparent;
  border: 1px solid #D19E66;
}
.step-address-parent .stp-address .checkmark-radio:after {
  content: "";
  position: absolute;
  display: none;
}
.step-address-parent .stp-address .container-radio input:checked ~ .checkmark-radio:after {
  display: block;
}
.step-address-parent .stp-address .container-radio .checkmark-radio:after {
  top: 3.5px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #D19E66;
}
.step-address-parent .stp-address .address-detail { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #42464F;
}
@media (max-width: 576px) {
  .step-address-parent .stp-address .address-detail {
    flex-direction: column;
    align-items: flex-start;
  }
}
.step-address-parent .stp-address .address-detail .right-address {
  margin-left: 20px;
}
@media (max-width: 576px) {
  .step-address-parent .stp-address .address-detail .left-address {
    align-self: flex-end;
    margin-top: 20px;
  }
}
.step-address-parent .stp-address .address-detail .lit-ad { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1200px) {
  .step-address-parent .stp-address .address-detail .lit-ad {
    flex-direction: column;
    align-items: flex-start;
  }
}
.step-address-parent .stp-address .address-detail .lit { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-left: 60px;
  font-weight: 400;
  font-size: 1rem;
}
.step-address-parent .stp-address .address-detail .lit svg, .step-address-parent .stp-address .address-detail .lit img {
  height: 25px;
  width: 25px;
  color: #514A4E;
  margin-left: 10px;
  fill: currentColor;
}
@media (max-width: 1200px) {
  .step-address-parent .stp-address .address-detail .lit svg, .step-address-parent .stp-address .address-detail .lit img {
    height: 20px;
    width: 20px;
  }
}
@media (max-width: 1200px) {
  .step-address-parent .stp-address .address-detail .lit {
    margin-left: 0;
  }
}
.step-address-parent .stp-address .address-detail .long-ad {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 20px; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
}
@media (max-width: 1140px) {
  .step-address-parent .stp-address .address-detail .long-ad {
    font-size: 14px;
  }
}
.step-address-parent .stp-address .address-detail .btn-edit-address {
  width: 120px;
  height: 40px;
  border: 1px solid #D19E66;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 400; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.step-address-parent .stp-address .address-detail .btn-edit-address svg, .step-address-parent .stp-address .address-detail .btn-edit-address img {
  height: 22px;
  width: 22px;
  color: #514A4E;
  margin-left: 10px;
  fill: currentColor;
}

.basket-aside {
  padding: 10px 0 20px 0;
}
.basket-aside .head-b-aside {
  font-size: 1.25rem;
  font-weight: 400;
  color: #42464F;
  padding: 20px;
  text-align: center;
}
.basket-aside .pro-aside-parent {
  padding: 20px 15px 0 15px;
  border-bottom: 1px solid #C4C4C4;
  border-top: 1px solid #C4C4C4;
  max-height: 320px;
  overflow-y: auto;
  /*[____ style for scroll ____]*/
  scrollbar-width: thin; /* "auto" or "thin" */
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.basket-aside .pro-aside-parent::-webkit-scrollbar {
  width: 4px;
}
.basket-aside .pro-aside-parent::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.basket-aside .pro-aside-parent::-webkit-scrollbar-thumb {
  background: #888;
}
.basket-aside .pro-aside-parent::-webkit-scrollbar-thumb:hover {
  background: #888;
}
.basket-aside .product-aside {
  margin-bottom: 20px;
  border-bottom: 1px solid #E5E5E5; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  flex-direction: column;
  width: 100%;
}
.basket-aside .product-aside:last-child {
  border-bottom: none;
}
.basket-aside .product-aside .price-aside {
  margin: 10px 0 0 0;
  padding: 0;
}
.basket-aside .product-aside .price-aside-off {
  margin: 5px 0;
  padding: 0;
}
.basket-aside .pro-aside { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
}
.basket-aside .pro-aside figure {
  position: relative;
  height: 95px;
  width: 95px;
  margin-left: 20px;
}
@media (max-width: 576px) {
  .basket-aside .pro-aside figure {
    height: 80px;
    width: 80px;
  }
}
.basket-aside .pro-aside figure img {
  height: 100%;
  width: 100%;
  border-radius: 5px;
}
.basket-aside .pro-aside .b-text-right {
  flex: 1;
}
.basket-aside .pro-aside .b-text-right h5 {
  font-size: 1rem;
}
.basket-aside .pro-aside .b-text-right .right-detail { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-top: 5px;
  width: 100%;
  color: #BCBCBC;
}
.basket-aside .pro-aside .b-text-right .right-detail .bdt span {
  font-size: 0.875rem;
}
.basket-aside .pro-aside .b-text-right .right-detail .bdt span:nth-child(2) {
  font-size: 0.875rem;
  color: #909090;
}
.basket-aside .pro-aside .b-text-right .right-detail .bdt span:nth-child(2) span {
  font-size: 0.75rem;
  font-weight: 400;
}

.aside-done {
  width: calc(100% - 40px);
  margin: 0 20px;
}

.dialog-address, .edit-username, .edit-password {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.45);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: none;
  z-index: 99;
  /* Reset Select */
  /* etiqueta <p> con la opcion selecionada  */
  /* end Select */
}
.dialog-address form, .edit-username form, .edit-password form {
  background-color: white;
  width: 40vw;
  border-radius: 10px;
  padding: 20px 0;
  overflow-y: auto;
  max-height: 95vh;
  /*[____ style for scroll ____]*/
  scrollbar-width: thin; /* "auto" or "thin" */
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}
@media (max-width: 1140px) {
  .dialog-address form, .edit-username form, .edit-password form {
    width: 60vw;
  }
}
@media (max-width: 576px) {
  .dialog-address form, .edit-username form, .edit-password form {
    width: 70vw;
  }
}
@media (max-width: 480px) {
  .dialog-address form, .edit-username form, .edit-password form {
    width: 90vw;
  }
}
.dialog-address form::-webkit-scrollbar, .edit-username form::-webkit-scrollbar, .edit-password form::-webkit-scrollbar {
  width: 4px;
}
.dialog-address form::-webkit-scrollbar-track, .edit-username form::-webkit-scrollbar-track, .edit-password form::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.dialog-address form::-webkit-scrollbar-thumb, .edit-username form::-webkit-scrollbar-thumb, .edit-password form::-webkit-scrollbar-thumb {
  background: #888;
}
.dialog-address form::-webkit-scrollbar-thumb:hover, .edit-username form::-webkit-scrollbar-thumb:hover, .edit-password form::-webkit-scrollbar-thumb:hover {
  background: #888;
}
.dialog-address .head-ad, .edit-username .head-ad, .edit-password .head-ad { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px 20px 30px;
  border-bottom: 1px solid #C4C4C4;
}
.dialog-address .head-ad h6, .edit-username .head-ad h6, .edit-password .head-ad h6 {
  font-size: 1rem;
  font-weight: 500;
  color: #42464F;
}
.dialog-address .head-ad svg, .edit-username .head-ad svg, .edit-password .head-ad svg {
  width: 15px;
  height: 15px;
}
.dialog-address .close-edit-ad, .edit-username .close-edit-ad, .edit-password .close-edit-ad {
  background-color: transparent;
  border: none;
  color: #42464F;
}
.dialog-address .close-edit-ad:hover, .edit-username .close-edit-ad:hover, .edit-password .close-edit-ad:hover {
  color: #EF394E;
}
.dialog-address .content-ad, .edit-username .content-ad, .edit-password .content-ad {
  padding: 20px 30px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /* The check-address */
  /* Hide the browser's default checkbox */
  /* Create a custom checkbox */
  /* When the checkbox is checked, add a blue background */
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Show the checkmark when checked */
  /* Style the checkmark/indicator */
}
.dialog-address .content-ad label, .edit-username .content-ad label, .edit-password .content-ad label {
  font-size: 0.875rem;
  font-weight: 400;
  margin-bottom: 5px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  flex-basis: 47%;
}
@media (max-width: 768px) {
  .dialog-address .content-ad label, .edit-username .content-ad label, .edit-password .content-ad label {
    flex-basis: 100%;
  }
}
.dialog-address .content-ad label span, .edit-username .content-ad label span, .edit-password .content-ad label span { /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  margin: 5px 0;
  color: #42464F;
}
.dialog-address .content-ad label.w-full, .edit-username .content-ad label.w-full, .edit-password .content-ad label.w-full {
  flex-basis: 100%;
}
.dialog-address .content-ad label.w-22, .edit-username .content-ad label.w-22, .edit-password .content-ad label.w-22 {
  flex-basis: 22%;
}
@media (max-width: 768px) {
  .dialog-address .content-ad label.w-22, .edit-username .content-ad label.w-22, .edit-password .content-ad label.w-22 {
    flex-basis: 47%;
  }
}
.dialog-address .content-ad textarea, .dialog-address .content-ad input[type=text], .dialog-address .content-ad input[type=email], .dialog-address .content-ad input[type=password], .edit-username .content-ad textarea, .edit-username .content-ad input[type=text], .edit-username .content-ad input[type=email], .edit-username .content-ad input[type=password], .edit-password .content-ad textarea, .edit-password .content-ad input[type=text], .edit-password .content-ad input[type=email], .edit-password .content-ad input[type=password] {
  border: 1px solid #C4C4C4;
  border-radius: 5px;
  color: #33313B;
  padding: 10px 15px;
}
.dialog-address .content-ad textarea:hover, .dialog-address .content-ad textarea:focus, .dialog-address .content-ad input[type=text]:hover, .dialog-address .content-ad input[type=text]:focus, .dialog-address .content-ad input[type=email]:hover, .dialog-address .content-ad input[type=email]:focus, .dialog-address .content-ad input[type=password]:hover, .dialog-address .content-ad input[type=password]:focus, .edit-username .content-ad textarea:hover, .edit-username .content-ad textarea:focus, .edit-username .content-ad input[type=text]:hover, .edit-username .content-ad input[type=text]:focus, .edit-username .content-ad input[type=email]:hover, .edit-username .content-ad input[type=email]:focus, .edit-username .content-ad input[type=password]:hover, .edit-username .content-ad input[type=password]:focus, .edit-password .content-ad textarea:hover, .edit-password .content-ad textarea:focus, .edit-password .content-ad input[type=text]:hover, .edit-password .content-ad input[type=text]:focus, .edit-password .content-ad input[type=email]:hover, .edit-password .content-ad input[type=email]:focus, .edit-password .content-ad input[type=password]:hover, .edit-password .content-ad input[type=password]:focus {
  border: 1px solid #D19E66;
}
.dialog-address .content-ad textarea, .edit-username .content-ad textarea, .edit-password .content-ad textarea {
  resize: none;
  height: 80px;
}
.dialog-address .content-ad input[type=text], .edit-username .content-ad input[type=text], .edit-password .content-ad input[type=text] {
  height: 40px;
  width: 100%;
}
.dialog-address .content-ad input[type=submit], .edit-username .content-ad input[type=submit], .edit-password .content-ad input[type=submit] { /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  height: 45px;
  width: 200px;
  border-radius: 5px;
  background-color: #D19E66;
  color: white;
  border: none;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 20px;
}
.dialog-address .content-ad input[type=submit]:hover, .edit-username .content-ad input[type=submit]:hover, .edit-password .content-ad input[type=submit]:hover {
  background-color: #D28E1B;
}
.dialog-address .content-ad .check-address, .edit-username .content-ad .check-address, .edit-password .content-ad .check-address {
  flex-basis: 100%;
  position: relative;
  cursor: pointer;
  font-size: 1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: #42464F;
  font-weight: 500;
  padding: 15px 30px 15px 0;
  margin: 10px 0 0 0;
  border-top: 1px solid #C4C4C4;
}
.dialog-address .content-ad .check-address input, .edit-username .content-ad .check-address input, .edit-password .content-ad .check-address input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.dialog-address .content-ad .check-ad, .edit-username .content-ad .check-ad, .edit-password .content-ad .check-ad {
  position: absolute;
  top: 10px;
  right: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 1px solid #A2A3A7;
  border-radius: 2px;
}
.dialog-address .content-ad .check-address input:checked ~ .check-ad, .edit-username .content-ad .check-address input:checked ~ .check-ad, .edit-password .content-ad .check-address input:checked ~ .check-ad {
  background-color: white;
  border: 1px solid #D19E66;
}
.dialog-address .content-ad .check-ad:after, .edit-username .content-ad .check-ad:after, .edit-password .content-ad .check-ad:after {
  content: "";
  position: absolute;
  display: none;
}
.dialog-address .content-ad .check-address input:checked ~ .check-ad:after, .edit-username .content-ad .check-address input:checked ~ .check-ad:after, .edit-password .content-ad .check-address input:checked ~ .check-ad:after {
  display: block;
}
.dialog-address .content-ad .check-address .check-ad:after, .edit-username .content-ad .check-address .check-ad:after, .edit-password .content-ad .check-address .check-ad:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #D19E66;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.dialog-address .icon_select_mate, .edit-username .icon_select_mate, .edit-password .icon_select_mate {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 16px;
  height: 24px;
  width: 24px;
  transition: all 275ms;
  color: #42464F;
}
.dialog-address .select_mate, .edit-username .select_mate, .edit-password .select_mate {
  position: relative;
  float: left;
  width: 100%;
  height: 40px;
  color: #33313B;
  background-color: #fff;
  border: 1px solid #C4C4C4;
  border-radius: 5px;
  transition: all 375ms ease-in-out;
  font-size: 0.875rem;
  font-weight: 500;
  /* Oculto el elemento select */
}
.dialog-address .select_mate select, .edit-username .select_mate select, .edit-password .select_mate select {
  position: absolute;
  overflow: hidden;
  height: 0px;
  opacity: 0;
  z-index: -1;
}
.dialog-address .cont_list_select_mate, .edit-username .cont_list_select_mate, .edit-password .cont_list_select_mate {
  position: relative;
  float: left;
  width: 100%;
}
.dialog-address .cont_select_int, .edit-username .cont_select_int, .edit-password .cont_select_int {
  max-height: 300px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  overflow-y: scroll;
  height: 0;
  width: 100%;
  background-color: #fff;
  padding: 0;
  margin-bottom: 0;
  margin-top: 0;
  border-radius: 0 0 5px 5px;
  transition: all 375ms ease-in-out;
  /*[____ style for scroll ____]*/
  scrollbar-width: thin; /* "auto" or "thin" */
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.dialog-address .cont_select_int::-webkit-scrollbar, .edit-username .cont_select_int::-webkit-scrollbar, .edit-password .cont_select_int::-webkit-scrollbar {
  width: 4px;
}
.dialog-address .cont_select_int::-webkit-scrollbar-track, .edit-username .cont_select_int::-webkit-scrollbar-track, .edit-password .cont_select_int::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.dialog-address .cont_select_int::-webkit-scrollbar-thumb, .edit-username .cont_select_int::-webkit-scrollbar-thumb, .edit-password .cont_select_int::-webkit-scrollbar-thumb {
  background: #888;
}
.dialog-address .cont_select_int::-webkit-scrollbar-thumb:hover, .edit-username .cont_select_int::-webkit-scrollbar-thumb:hover, .edit-password .cont_select_int::-webkit-scrollbar-thumb:hover {
  background: #888;
}
.dialog-address .cont_select_int li, .edit-username .cont_select_int li, .edit-password .cont_select_int li {
  position: relative;
  float: left;
  width: 100%;
  border-bottom: 1px solid #E0E0E0;
  background-color: #F7F7F7;
  list-style-type: none;
  padding: 10px;
  margin: 0;
  transition: all 275ms ease-in-out;
  display: block;
  cursor: pointer;
  z-index: 5;
}
.dialog-address .cont_select_int li:last-child, .edit-username .cont_select_int li:last-child, .edit-password .cont_select_int li:last-child {
  border-radius: 3px;
  border-bottom: 0;
}
.dialog-address .cont_select_int li:hover, .edit-username .cont_select_int li:hover, .edit-password .cont_select_int li:hover {
  background-color: #D19E66;
  color: white;
}
.dialog-address .cont_select_int .active, .edit-username .cont_select_int .active, .edit-password .cont_select_int .active {
  background-color: #D19E66;
  color: white;
}
.dialog-address .selecionado_opcion, .edit-username .selecionado_opcion, .edit-password .selecionado_opcion {
  padding: 10px 15px 10px 15px;
  width: 96%;
  height: 40px;
  display: block;
  margin: 0;
  cursor: pointer;
}
.dialog-address .error-field textarea, .dialog-address .error-field input[type=text], .dialog-address .error-field .select_mate, .dialog-address .error-field input[type=email], .dialog-address .error-field input[type=password], .edit-username .error-field textarea, .edit-username .error-field input[type=text], .edit-username .error-field .select_mate, .edit-username .error-field input[type=email], .edit-username .error-field input[type=password], .edit-password .error-field textarea, .edit-password .error-field input[type=text], .edit-password .error-field .select_mate, .edit-password .error-field input[type=email], .edit-password .error-field input[type=password] {
  border: 1px solid #EF394E;
  box-shadow: 0 0 3px rgba(239, 57, 78, 0.1);
}

.edit-password .error-pass-character {
  color: #EF394E;
  font-size: 0.875rem;
  font-weight: 400;
  display: none;
}
.edit-password form {
  width: 25vw;
}
@media (max-width: 1140px) {
  .edit-password form {
    width: 40vw;
  }
}
@media (max-width: 576px) {
  .edit-password form {
    width: 70vw;
  }
}
@media (max-width: 480px) {
  .edit-password form {
    width: 90vw;
  }
}
.edit-password .error-pass .error-pass-character {
  display: inline-block;
}

/*=============================================== [ step-buy -- step3] ================================================*/
.step-final-product .head-b-article {
  border-bottom: 1px solid #C4C4C4;
  padding: 20px;
}
.step-final-product .head-b-article h4 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #42464F;
}

.final-bas {
  padding: 20px 30px;
}

.product-stp3 { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid #E5E5E5;
}
.product-stp3:last-child {
  border-bottom: none;
}
.product-stp3 figure {
  position: relative;
  height: 95px;
  width: 95px;
  margin-left: 20px;
}
@media (max-width: 576px) {
  .product-stp3 figure {
    height: 80px;
    width: 80px;
  }
}
.product-stp3 figure img {
  height: 100%;
  width: 100%;
  border-radius: 5px;
}
.product-stp3 .b-text-right {
  flex: 1;
}
.product-stp3 .b-text-right h5 {
  font-size: 1rem;
}
.product-stp3 .b-text-right .right-detail { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 25px;
  width: 80%;
  color: #BCBCBC;
}
.product-stp3 .b-text-right .right-detail .bdt {
  flex-basis: 18%;
}
.product-stp3 .b-text-right .right-detail .bdt span {
  font-size: 0.875rem;
}
.product-stp3 .b-text-right .right-detail .bdt span:nth-child(2) {
  font-size: 0.875rem;
  color: #909090;
}
.product-stp3 .b-text-right .right-detail .bdt span:nth-child(2) span {
  font-size: 0.75rem;
  font-weight: 400;
}
@media (max-width: 1400px) {
  .product-stp3 .b-text-right .right-detail .bdt {
    flex-basis: 30%;
  }
}
@media (max-width: 576px) {
  .product-stp3 .b-text-right .right-detail .bdt {
    flex-basis: 100%;
  }
}
@media (max-width: 1400px) {
  .product-stp3 .b-text-right .right-detail {
    width: 100%;
  }
}
@media (max-width: 576px) {
  .product-stp3 .b-text-right .right-detail {
    flex-wrap: wrap;
    margin-top: 0;
  }
}

.receiver {
  border-top: 1px solid #C4C4C4;
  padding: 30px;
}
.receiver h4 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #42464F;
}
@media (max-width: 768px) {
  .receiver h4 {
    font-size: 16px;
  }
}
.receiver ul {
  color: #42464F; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}
@media (max-width: 768px) {
  .receiver ul {
    margin-top: 10px;
  }
}
@media (max-width: 576px) {
  .receiver ul {
    flex-direction: column;
  }
}
.receiver ul li {
  min-width: 48%;
  margin-bottom: 10px;
  margin-left: 10px;
}
@media (max-width: 576px) {
  .receiver ul li {
    min-width: 100%;
    margin-left: 0;
  }
}
.receiver ul li span:first-child {
  font-size: 1.25rem;
  font-weight: 500;
}
@media (max-width: 768px) {
  .receiver ul li span:first-child {
    font-size: 14px;
  }
}
.receiver ul li span:last-child {
  font-size: 1.125rem;
  font-weight: 400;
}
@media (max-width: 768px) {
  .receiver ul li span:last-child {
    font-size: 14px;
  }
}

.price-complete {
  padding: 0 20px 10px 20px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: center;
}
.price-complete span span {
  font-weight: 600;
  font-size: 1.375rem;
  color: #33313B;
}
@media (max-width: 768px) {
  .price-complete span span {
    font-size: 16px;
  }
}

.price-send { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  color: #808080;
  flex-wrap: wrap;
}
@media (max-width: 346px) {
  .price-send {
    flex-direction: column;
  }
}

.final-aside .aside-done {
  margin-top: 0;
}
.final-aside .head-b-aside {
  font-size: 1.5625rem;
  font-weight: 600;
  color: #42464F;
}
@media (max-width: 768px) {
  .final-aside .head-b-aside {
    font-size: 16px;
  }
}
.final-aside .price-aside-total {
  border-top: none; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.final-aside .price-aside-total span {
  font-size: 1.5625rem;
  font-weight: 400;
}
@media (max-width: 768px) {
  .final-aside .price-aside-total span {
    font-size: 16px;
  }
}
.final-aside .price-aside-total span.price-aside-num {
  margin-top: 10px;
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  .final-aside .price-aside-total span.price-aside-num {
    font-size: 16px;
  }
}
.final-aside .price-aside-total span.price-aside-num span {
  font-size: 2.125rem;
}
@media (max-width: 768px) {
  .final-aside .price-aside-total span.price-aside-num span {
    font-size: 16px;
  }
}

.off-code-aside {
  padding: 0 20px;
}
@media (max-width: 576px) {
  .off-code-aside {
    padding: 0 10px;
  }
}

.off-code {
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  padding: 20px 0;
}
.off-code label {
  margin: 0;
  width: 100%;
  background-color: white;
  height: 40px;
  border: 1px solid #C4C4C4;
  border-radius: 5px;
  padding: 0 10px;
}
.off-code label .verify-code {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-radius: 5px;
  display: none;
}
.off-code label .verify-code svg {
  width: 24px;
  height: 24px;
  margin-left: 10px;
}
.off-code label .verify-code .code {
  flex-basis: 40%;
  font-size: 1.125rem;
  font-weight: 500;
}
.off-code label .verify-code .dlt-code {
  color: #EF394E;
  font-size: 1rem;
  font-weight: 400;
  margin-right: 10px;
  display: inline-block;
  justify-self: flex-end;
  background-color: transparent;
  border: none;
}
.off-code label .default-code { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.off-code label .default-code input[type=text] {
  border-radius: 5px;
  flex-basis: 70%;
  background-color: transparent;
  border: none;
  font-size: 1rem;
  color: #474545;
}
.off-code label .default-code input[type=submit] {
  font-size: 1.125rem;
  font-weight: 500;
  color: #D19E66;
  background-color: transparent;
  border: none;
  flex-basis: 20%;
}
.off-code .error-off-code {
  display: none;
}
.off-code.off-verify .verify-code { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
}
.off-code.off-verify .default-code {
  display: none;
}
.off-code.error-code .error-off-code { /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  margin-top: 10px;
  color: #EF394E;
  font-size: 1rem;
  font-weight: 400;
}

.error-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #EF394E;
  color: white;
  margin-left: 10px; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/*=============================================== [ connect bank] ================================================*/
.connect-bank {
  width: 100%;
  height: 100vh; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #33313B;
}
.connect-bank span {
  color: #33313B;
}
.connect-bank .logo {
  width: 260px;
  height: 109px; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
}
.connect-bank .logo img {
  width: 100%;
  height: 100%;
}
.connect-bank .follow {
  margin: 30px 0; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  font-size: 1.5625rem;
}
.connect-bank .connect {
  font-size: 1.25rem;
}
.connect-bank .connect-dot {
  margin-top: 30px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  justify-content: center;
  direction: ltr;
}
.connect-bank .connect-dot .dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: rgba(209, 158, 102, 0.5);
  margin: 0 5px;
  animation-name: connect;
  animation-timing-function: ease-in-out;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
.connect-bank .connect-dot .dot:nth-child(1) {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
.connect-bank .connect-dot .dot:nth-child(2) {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}
.connect-bank .connect-dot .dot:nth-child(3) {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}
.connect-bank .connect-dot .dot:nth-child(4) {
  animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
}
.connect-bank .connect-dot .dot:nth-child(5) {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

@keyframes connect {
  0% {
    background-color: rgba(209, 158, 102, 0.5);
  }
  10% {
    background-color: rgb(209, 158, 102);
  }
  100% {
    background-color: rgba(209, 158, 102, 0.5);
  }
}
/*=============================================== [ factor ] ================================================*/
.factor-aside .head-b-aside {
  color: #42464F;
  font-size: 1.5rem;
  font-weight: 500;
}
.factor-aside .price-aside {
  font-size: 1.4375rem;
  font-weight: 400;
}
.factor-aside .price-aside-total {
  flex-direction: column;
  text-align: center;
}
.factor-aside .price-aside-total span {
  font-size: 1.25rem;
  color: #33313B;
}
.factor-aside .price-aside-total span:last-child {
  margin-top: 10px;
}
.factor-aside .price-aside-total span:last-child span {
  font-size: 1.875rem;
}
.factor-aside .aside-done {
  margin-top: 0;
}
.factor-aside .aside-done svg {
  height: 25px;
  width: 25px;
  margin-left: 15px;
}

/*=============================================== [ .order-view ] ================================================*/
#order-view {
  background-color: #F7F7F7;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 5px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 1.25rem;
  color: #42464F;
}
#order-view .head-view { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#order-view .head-view h6 {
  font-size: 1.25rem;
  font-weight: 500;
}
#order-view .head-view span {
  margin-right: 10px;
  color: #33313B;
}
#order-view .content-view { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 5px;
}
#order-view .content-view span:last-child {
  font-size: 1.625rem;
  font-weight: 500;
  color: #33313B;
  margin-right: 10px;
}
#order-view a {
  font-size: 1rem;
  font-weight: 400;
  padding: 10px 30px;
  border: 1px solid #D19E66; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  margin-top: 10px;
}
#order-view a:hover {
  border: 1px solid #D28E1B;
  color: #D28E1B;
}

/*=============================================== [ dashboard ] ================================================*/
.dashboard-parent {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 30px;
  margin: 30px 0;
}
@media (max-width: 1200px) {
  .dashboard-parent {
    grid-template-columns: 1fr 2fr;
  }
}
@media (max-width: 768px) {
  .dashboard-parent {
    grid-template-columns: 1fr 3fr;
    grid-gap: 5px;
  }
}
@media (max-width: 576px) {
  .dashboard-parent {
    grid-template-columns: 1fr 4fr;
  }
}
.dashboard-parent .dash-buttons ul { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.dashboard-parent .dash-buttons ul li {
  width: 100%; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard-parent .dash-buttons ul li:first-child {
  border-radius: 5px 5px 0 0;
}
.dashboard-parent .dash-buttons ul li:last-child {
  border-radius: 0 0 5px 5px;
}
.dashboard-parent .dash-buttons ul li:last-child .dash-btn {
  border: none;
}
.dashboard-parent .dash-buttons ul li:hover, .dashboard-parent .dash-buttons ul li.dash-active {
  background-color: #D19E66;
}
.dashboard-parent .dash-buttons ul li:hover span, .dashboard-parent .dash-buttons ul li.dash-active span {
  color: white;
}
.dashboard-parent .dash-buttons ul li:hover .right-dash-btn svg, .dashboard-parent .dash-buttons ul li:hover .left-dash-btn svg, .dashboard-parent .dash-buttons ul li.dash-active .right-dash-btn svg, .dashboard-parent .dash-buttons ul li.dash-active .left-dash-btn svg {
  color: white;
}
.dashboard-parent .dash-buttons .dash-btn {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #C4C4C4;
  font-size: 1.125rem;
  font-weight: 400;
  width: 85%;
  padding: 25px 0; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 1400px) {
  .dashboard-parent .dash-buttons .dash-btn {
    font-size: 1rem;
  }
}
@media (max-width: 768px) {
  .dashboard-parent .dash-buttons .dash-btn {
    flex-direction: column-reverse;
    align-items: flex-start;
    width: 90%;
    padding: 10px 0;
  }
}
@media (max-width: 576px) {
  .dashboard-parent .dash-buttons .dash-btn {
    flex-direction: row;
    align-items: center;
    padding: 20px 5px 20px 5px;
  }
}
.dashboard-parent .dash-buttons .dash-btn span {
  color: #42464F;
}
@media (max-width: 576px) {
  .dashboard-parent .dash-buttons .dash-btn span {
    display: none;
  }
}
.dashboard-parent .dash-buttons .dash-btn .right-dash-btn { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  text-align: right;
}
@media (max-width: 768px) {
  .dashboard-parent .dash-buttons .dash-btn .right-dash-btn {
    flex-direction: column;
    align-items: flex-start;
  }
}
.dashboard-parent .dash-buttons .dash-btn .right-dash-btn svg {
  width: 30px;
  height: 30px;
  color: #D19E66;
  margin-left: 20px;
  fill: currentColor;
}
@media (max-width: 1400px) {
  .dashboard-parent .dash-buttons .dash-btn .right-dash-btn svg {
    margin-left: 10px;
    width: 25px;
    height: 25px;
  }
}
@media (max-width: 992px) {
  .dashboard-parent .dash-buttons .dash-btn .right-dash-btn svg {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 768px) {
  .dashboard-parent .dash-buttons .dash-btn .right-dash-btn svg {
    margin-bottom: 10px;
  }
}
@media (max-width: 576px) {
  .dashboard-parent .dash-buttons .dash-btn .right-dash-btn svg {
    margin-bottom: 0;
    width: 25px;
    height: 25px;
  }
}
.dashboard-parent .dash-buttons .dash-btn .left-dash-btn { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .dashboard-parent .dash-buttons .dash-btn .left-dash-btn {
    align-self: flex-end;
  }
}
@media (max-width: 576px) {
  .dashboard-parent .dash-buttons .dash-btn .left-dash-btn {
    align-self: center;
  }
}
.dashboard-parent .dash-buttons .dash-btn .left-dash-btn svg {
  width: 15px;
  height: 15px;
  color: #42464F;
  fill: currentColor;
}
@media (max-width: 576px) {
  .dashboard-parent .dash-buttons .dash-btn .left-dash-btn svg {
    width: 10px;
    height: 10px;
  }
}
.dashboard-parent .holder-dash {
  min-height: 480px;
  max-height: 700px;
  background-color: #F7F7F7;
  border-radius: 5px;
  width: 100%;
  overflow-y: auto;
  /*[____ style for scroll ____]*/
  scrollbar-width: thin; /* "auto" or "thin" */
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.dashboard-parent .holder-dash::-webkit-scrollbar {
  width: 4px;
}
.dashboard-parent .holder-dash::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.dashboard-parent .holder-dash::-webkit-scrollbar-thumb {
  background: #888;
}
.dashboard-parent .holder-dash::-webkit-scrollbar-thumb:hover {
  background: #888;
}
.dashboard-parent .holder-dash:last-child {
  overflow-x: auto;
}

.content {
  width: 100%;
}
.content .dash-head {
  border-bottom: 3px solid #C4C4C4;
  padding: 30px 20px 15px 20px;
  color: #42464F; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .content .dash-head {
    padding: 15px 15px 10px 15px;
  }
}
.content .dash-head h5 {
  font-size: 1.375rem;
  font-weight: 500;
}
@media (max-width: 576px) {
  .content .dash-head h5 {
    font-size: 16px;
  }
}
.content .main-content {
  display: block;
}
.content .main-content .dash-content {
  padding: 30px;
}
@media (max-width: 768px) {
  .content .main-content .dash-content {
    padding: 20px 15px;
  }
}
@media (max-width: 346px) {
  .content .main-content .dash-content {
    padding: 15px 10px;
  }
}

.person-info ul li { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (max-width: 576px) {
  .person-info ul li {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
  }
}
.person-info ul li svg {
  width: 25px;
  height: 25px;
  color: #514A4E;
  fill: currentColor;
  margin-left: 15px;
}
@media (max-width: 768px) {
  .person-info ul li svg {
    display: none;
  }
}
.person-info ul li span {
  color: #42464F;
  font-size: 1.25rem;
  font-weight: 400;
  margin-left: 10px;
}
@media (max-width: 768px) {
  .person-info ul li span {
    font-size: 14px;
  }
}
.person-info ul li span:last-child {
  color: #33313B;
  font-size: 1.375rem;
  font-weight: 500;
}
@media (max-width: 768px) {
  .person-info ul li span:last-child {
    font-size: 14px;
  }
}
.person-info ul li.disable span:last-child {
  color: #B9B9B9;
}
.person-info .person-top { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  justify-content: space-between;
}
@media (max-width: 1140px) {
  .person-info .person-top {
    flex-direction: column;
  }
}
.person-info .person-top .edit-user, .person-info .person-top .btn-edit-address, .person-info .person-bot .change-pass .change-pass-btn {
  width: 200px;
  height: 45px;
  background-color: #D19E66;
  color: white;
  border-radius: 5px;
  border: none;
  font-size: 1.125rem; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1140px) {
  .person-info .person-top .edit-user, .person-info .person-top .btn-edit-address, .person-info .person-bot .change-pass .change-pass-btn {
    margin-bottom: 20px;
  }
}
@media (max-width: 768px) {
  .person-info .person-top .edit-user, .person-info .person-top .btn-edit-address, .person-info .person-bot .change-pass .change-pass-btn {
    width: 150px;
    margin-top: 20px;
    font-size: 16px;
  }
}
.person-info .person-top .edit-user:hover, .person-info .person-top .btn-edit-address:hover, .person-info .person-bot .change-pass .change-pass-btn:hover {
  background-color: #D28E1B;
}
.person-info .person-top .edit-user svg, .person-info .person-top .btn-edit-address svg, .person-info .person-bot .change-pass .change-pass-btn svg {
  width: 25px;
  height: 25px;
  margin-left: 10px;
}
.person-info .person-bot { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #C4C4C4;
  padding-top: 30px;
}
@media (max-width: 1140px) {
  .person-info .person-bot {
    flex-direction: column;
    align-items: flex-start;
  }
}
.person-info .person-bot .password { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.person-info .person-bot .password svg {
  height: 25px;
  width: 25px;
  fill: currentColor;
  color: #514A4E;
  margin-left: 15px;
}
@media (max-width: 576px) {
  .person-info .person-bot .password svg {
    margin-left: 10px;
  }
}
.person-info .person-bot .password span {
  color: #42464F;
  font-size: 1.25rem;
  font-weight: 400;
}
.person-info .person-bot .password span:last-child {
  color: #33313B;
  font-size: 1.375rem;
  margin-right: 10px;
  font-weight: 500;
  margin-top: 10px;
}
.person-info .person-bot .change-pass .change-pass-btn {
  background-color: white;
  border: 1px solid #D19E66;
  color: #42464F;
}
.person-info .person-bot .change-pass .change-pass-btn:hover {
  border: 1px solid #D28E1B;
  color: white;
}

.no-item { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #42464F;
}
.no-item span {
  font-size: 1.125rem;
  font-weight: 400;
  align-self: flex-start;
}
.no-item img {
  width: 300px;
  height: 200px;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 20px 0;
}
@media (max-width: 576px) {
  .no-item img {
    width: 250px;
    height: 150px;
  }
}
@media (max-width: 346px) {
  .no-item img {
    width: 200px;
    height: 100px;
  }
}

.button-link {
  background-color: #D19E66;
  color: white;
  border: none;
  height: 45px;
  width: 200px;
  border-radius: 5px;
  font-size: 1.125rem;
  font-weight: 400; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
@media (max-width: 576px) {
  .button-link {
    font-size: 14px;
  }
}
.button-link svg {
  height: 20px;
  width: 20px;
  fill: currentColor;
  color: white;
  margin-left: 10px;
}
.button-link:hover {
  background-color: #D28E1B;
}

/******************** table **************************/
.table-dashboard {
  display: none;
  padding: 20px 0;
  width: 100%;
}
.table-dashboard table {
  width: 100%;
  border-collapse: collapse;
}
.table-dashboard tr:last-child td {
  border-bottom: none;
}
.table-dashboard tr th, .table-dashboard tr td {
  min-width: 140px;
  text-align: center;
  border-bottom: 1px solid #C4C4C4;
}
@media (max-width: 576px) {
  .table-dashboard tr th, .table-dashboard tr td {
    min-width: 110px;
  }
}
.table-dashboard tr th:nth-child(5), .table-dashboard tr td:nth-child(5) {
  min-width: 160px;
}
.table-dashboard tr th:nth-child(3), .table-dashboard tr td:nth-child(3) {
  min-width: 60px;
}
.table-dashboard tr th .order-tag, .table-dashboard tr th .continue-tag, .table-dashboard tr th .cancel-tag, .table-dashboard tr td .order-tag, .table-dashboard tr td .continue-tag, .table-dashboard tr td .cancel-tag {
  border-radius: 5px;
  width: 150px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.table-dashboard tr th .order-tag, .table-dashboard tr td .order-tag {
  background-color: transparent;
  color: #42464F;
  border: 1px solid #D19E66;
}
.table-dashboard tr th .order-tag:hover, .table-dashboard tr td .order-tag:hover {
  border: 1px solid #D28E1B;
  color: #D28E1B;
}
.table-dashboard tr th .continue-tag, .table-dashboard tr td .continue-tag {
  background-color: #D19E66;
  color: white;
}
.table-dashboard tr th .continue-tag:hover, .table-dashboard tr td .continue-tag:hover {
  background-color: #D28E1B;
}
.table-dashboard tr th .cancel-tag, .table-dashboard tr td .cancel-tag {
  background-color: #E2E2E2;
  color: #999999;
  border: 1px solid transparent;
}
.table-dashboard tr th .cancel-tag:hover, .table-dashboard tr td .cancel-tag:hover {
  background-color: white;
  border: 1px solid #D19E66;
  color: #42464F;
}
.table-dashboard tr th {
  font-size: 1rem;
  border-bottom: 3px solid #C4C4C4;
  color: #33313B;
  font-size: 1.125rem;
  font-weight: 500;
  padding: 20px 10px;
}
@media (max-width: 576px) {
  .table-dashboard tr th {
    font-size: 1rem;
  }
}
.table-dashboard tr td {
  color: #514A4E;
  font-size: 1rem;
  font-weight: 400;
  padding: 30px 10px;
}
@media (max-width: 576px) {
  .table-dashboard tr td {
    font-size: 0.875rem;
  }
}
.table-dashboard tr td:nth-child(4) {
  color: #33313B;
  font-weight: 500;
  font-size: 1.125rem;
}
@media (max-width: 576px) {
  .table-dashboard tr td:nth-child(4) {
    font-size: 1rem;
  }
}

.shop-list .main-content {
  display: none;
}
.shop-list .table-dashboard {
  display: block;
}

/******************** favorite **************************/
.favorite-item {
  display: none;
}
.favorite-item .fav-box {
  padding: 30px;
}
@media (max-width: 768px) {
  .favorite-item .fav-box {
    padding: 20px 15px;
  }
}
@media (max-width: 346px) {
  .favorite-item .fav-box {
    padding: 15px 10px;
  }
}
.favorite-item .fav {
  border-bottom: 1px solid #C4C4C4;
  padding-bottom: 20px;
  margin-bottom: 20px; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.favorite-item .fav:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
@media (max-width: 1140px) {
  .favorite-item .fav {
    flex-wrap: wrap;
  }
}
.favorite-item .fav .b-right { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-basis: 35%;
}
@media (max-width: 1140px) {
  .favorite-item .fav .b-right {
    flex-basis: 100%;
    margin-bottom: 30px;
  }
}
.favorite-item .fav .b-right figure {
  width: 95px;
  height: 95px;
  border-radius: 5px;
  position: relative;
  margin-left: 20px;
}
@media (max-width: 576px) {
  .favorite-item .fav .b-right figure {
    width: 75px;
    height: 75px;
    margin-left: 10px;
  }
}
.favorite-item .fav .b-right figure img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.favorite-item .fav .b-right .b-text-right {
  flex: 1;
}
.favorite-item .fav .b-right .b-text-right h5 {
  font-size: 1.125rem;
}
@media (max-width: 576px) {
  .favorite-item .fav .b-right .b-text-right h5 {
    font-size: 16px;
  }
}
.favorite-item .fav .b-right .b-text-right .right-detail { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 30px;
  width: 100%;
  color: #42464F;
}
@media (max-width: 576px) {
  .favorite-item .fav .b-right .b-text-right .right-detail {
    margin-top: 10px;
  }
}
.favorite-item .fav .b-right .b-text-right .right-detail .bdt span:nth-child(2) {
  font-size: 1rem;
}
.favorite-item .fav .b-right .b-text-right .right-detail .bdt span:nth-child(2) span {
  font-size: 0.875rem;
  font-weight: 400;
}
.favorite-item .fav .view-fav { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
@media (max-width: 768px) {
  .favorite-item .fav .view-fav {
    flex-basis: 100%;
  }
}
.favorite-item .fav .view-fav .button-link {
  width: 180px;
  margin-top: 0;
}
.favorite-item .fav .view-fav .delete {
  margin-top: 20px;
}
.favorite-item .bt-info { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .favorite-item .bt-info {
    flex-basis: 100%;
    margin-bottom: 30px;
    text-align: center;
  }
}
.favorite-item .bt-info h5 {
  font-size: 1.5rem;
}
@media (max-width: 576px) {
  .favorite-item .bt-info h5 {
    font-size: 16px;
  }
}
.favorite-item .bt-info h5 span {
  font-weight: 400;
}
.favorite-item .bt-info .b-off {
  color: #D19E66;
  margin-top: 15px;
  font-size: 1.375rem;
  display: none;
}
@media (max-width: 576px) {
  .favorite-item .bt-info .b-off {
    font-size: 16px;
  }
}
.favorite-item .off-price .b-off {
  display: block;
}

.favorite .favorite-item {
  display: block;
}
.favorite .main-content {
  display: none;
}

/******************** address-item **************************/
.address-item {
  display: none;
}
@media (max-width: 576px) {
  .address-item .dash-head {
    flex-direction: column;
    align-items: flex-start;
  }
}
.address-item .dash-head .button-link {
  background-color: transparent;
  border: 1px solid #D19E66;
  color: #42464F;
  margin-top: 0;
}
.address-item .dash-head .button-link svg {
  color: #42464F;
}
.address-item .dash-head .button-link:hover {
  background-color: white;
}
@media (max-width: 576px) {
  .address-item .dash-head .button-link {
    margin: 15px 0 10px 0;
    width: 100%;
  }
}
.address-item .person-info {
  padding: 30px;
}
@media (max-width: 768px) {
  .address-item .person-info {
    padding: 20px 15px;
  }
}
@media (max-width: 346px) {
  .address-item .person-info {
    padding: 15px 10px;
  }
}
.address-item .person-top {
  border-bottom: 1px solid #C4C4C4;
}
.address-item .person-top ul { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.address-item .person-top ul li {
  margin-left: 30px;
  align-items: flex-start;
}
@media (max-width: 576px) {
  .address-item .person-top ul li {
    flex-basis: 100%;
    margin-left: 0;
    flex-direction: row;
  }
}
.address-item .person-top ul li span {
  font-size: 1.25rem;
  font-weight: 400;
  margin-left: 0;
}
@media (max-width: 576px) {
  .address-item .person-top ul li span {
    font-size: 14px;
  }
}
.address-item .person-top ul li:last-child span {
  font-size: 1.375rem;
  font-weight: 500;
  flex: 1;
}
@media (max-width: 576px) {
  .address-item .person-top ul li:last-child span {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .address-item .person-top ul li svg {
    display: block;
  }
}
@media (max-width: 576px) {
  .address-item .person-top ul li svg {
    width: 20px;
    height: 20px;
  }
}
.address-item .person-top .addr-btn { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 30px;
}
.address-item .person-top .addr-btn .delete {
  border: none;
  width: auto;
  padding: 10px;
  font-size: 1.125rem;
  font-weight: 300;
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  .address-item .person-top .addr-btn .delete {
    margin-bottom: 0;
    margin-top: 20px;
  }
}
@media (max-width: 576px) {
  .address-item .person-top .addr-btn .delete {
    font-size: 14px;
  }
}
.address-item .person-top .addr-btn .delete svg {
  margin: 0 10px 0 0;
  transition: 0.4s;
}
.address-item .person-top .addr-btn .delete:hover {
  background-color: transparent;
  color: #EF394E;
}
.address-item .person-top .addr-btn .delete:hover svg {
  transform: scale(1.1);
  color: #EF394E;
}

.address-dash .address-item {
  display: block;
}
.address-dash .main-content {
  display: none;
}

/******************** comment-item **************************/
.comment-item {
  display: none;
}

.comment-list {
  padding: 30px 30px 60px 30px;
}
@media (max-width: 768px) {
  .comment-list {
    padding: 20px 15px 40px 15px;
  }
}
@media (max-width: 346px) {
  .comment-list {
    padding: 15px 10px;
  }
}
.comment-list .comment-box {
  color: #42464F;
  padding: 20px 0;
  border-bottom: 1px solid #C4C4C4;
  width: 100%;
}
.comment-list .comment-box .com-top { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.comment-list .comment-box .b-right { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-basis: 55%;
}
@media (max-width: 1140px) {
  .comment-list .comment-box .b-right {
    flex-basis: 100%;
  }
}
.comment-list .comment-box .b-right figure {
  width: 95px;
  height: 95px;
  border-radius: 5px;
  position: relative;
  margin-left: 20px;
  border: 1px solid #C4C4C4;
}
@media (max-width: 576px) {
  .comment-list .comment-box .b-right figure {
    width: 75px;
    height: 75px;
    margin-left: 10px;
  }
}
.comment-list .comment-box .b-right figure img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.comment-list .comment-box .b-right .info-com {
  flex: 1;
}
.comment-list .comment-box .b-right .info-com h3 {
  font-size: 1.375rem;
  font-weight: 400;
}
@media (max-width: 768px) {
  .comment-list .comment-box .b-right .info-com h3 {
    font-size: 16px;
  }
}
.comment-list .comment-box .b-right .info-com .com-date {
  color: #B9B9B9;
  font-size: 1.25rem;
  font-weight: 400;
  margin-top: 10px;
}
@media (max-width: 576px) {
  .comment-list .comment-box .b-right .info-com .com-date {
    font-size: 1rem;
  }
}
.comment-list .comment-box .com-text-top {
  flex-basis: 45%;
}
@media (max-width: 1140px) {
  .comment-list .comment-box .com-text-top {
    flex-basis: calc(100% - 120px);
    margin-right: 120px;
    margin-bottom: 20px;
  }
}
@media (max-width: 992px) {
  .comment-list .comment-box .com-text-top {
    flex-basis: 100%;
    margin: 20px 0;
  }
}
@media (max-width: 576px) {
  .comment-list .comment-box .com-text-top {
    margin: 20px 0 10px 0;
  }
}
.comment-list .comment-box .com-text-bot {
  width: calc(100% - 120px); /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  margin: 0 120px 0 0;
}
@media (max-width: 992px) {
  .comment-list .comment-box .com-text-bot {
    width: 100%;
    margin-right: 0;
  }
}
@media (max-width: 576px) {
  .comment-list .comment-box .com-text-bot {
    flex-direction: column;
  }
}
.comment-list .comment-box .com-text-bot svg {
  height: 30px;
  width: 30px;
  margin-left: 20px;
  stroke: #514A4E;
}
@media (max-width: 576px) {
  .comment-list .comment-box .com-text-bot svg {
    height: 25px;
    width: 25px;
    margin-left: 10px;
  }
}
.comment-list .comment-box .com-text-bot p {
  font-size: 1.125rem;
  color: #33313B;
  margin: 0;
  flex: 1;
  font-weight: 400;
}
@media (max-width: 576px) {
  .comment-list .comment-box .com-text-bot p {
    font-size: 14px;
  }
}
.comment-list .comment-box .status { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  font-size: 1.125rem;
  font-weight: 400;
}
@media (max-width: 1400px) {
  .comment-list .comment-box .status {
    flex-wrap: wrap;
  }
}
@media (max-width: 576px) {
  .comment-list .comment-box .status {
    flex-direction: column;
    font-size: 14px;
  }
}
.comment-list .comment-box .status .status-verify { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
}
.comment-list .comment-box .status .verify, .comment-list .comment-box .status .reject { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  display: none;
}
.comment-list .comment-box .status .verify svg, .comment-list .comment-box .status .reject svg {
  height: 24px;
  width: 24px;
  margin: 0 5px;
}
.comment-list .comment-box .status .verify span, .comment-list .comment-box .status .reject span {
  color: #33313B;
}
.comment-list .comment-box .status .verify .error-icon, .comment-list .comment-box .status .reject .error-icon {
  font-size: 1rem;
  color: white;
  margin: 0 5px;
}
.comment-list .comment-box .status .delete {
  border: none;
  width: auto;
  padding: 10px;
  font-size: 1.125rem;
  font-weight: 300;
}
@media (max-width: 576px) {
  .comment-list .comment-box .status .delete {
    padding-right: 0;
    margin-top: 10px;
    align-self: flex-start;
    font-size: 14px;
  }
}
.comment-list .comment-box .status .delete svg {
  margin: 0 10px 0 0;
  transition: 0.4s;
}
.comment-list .comment-box .status .delete:hover {
  background-color: transparent;
  color: #EF394E;
}
.comment-list .comment-box .status .delete:hover svg {
  transform: scale(1.1);
  color: #EF394E;
}
.comment-list .verify-accept .status .verify { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
}
.comment-list .verify-accept .status .reject {
  display: none;
}
.comment-list .verify-reject .status .reject { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
}
.comment-list .verify-reject .status .verify {
  display: none;
}

.comment-dash .comment-item {
  display: block;
}
.comment-dash .main-content {
  display: none;
}

.background {
  background: url("../images/background.png") no-repeat top left/cover;
  height: 100%;
  width: 100%;
}

.login-page {
  width: 100%;
  height: 100vh; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.login-page .login-box {
  width: 35vw;
  min-height: 60vh;
  max-width: 95vh;
  overflow-y: auto;
  background-color: white;
  padding: 70px 20px 30px 20px;
  border-radius: 5px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
  color: #42464F; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1200px) {
  .login-page .login-box {
    padding: 40px 20px 20px 20px;
  }
}
@media (max-width: 1140px) {
  .login-page .login-box {
    width: 45vw;
  }
}
@media (max-width: 992px) {
  .login-page .login-box {
    width: 60vw;
  }
}
@media (max-width: 768px) {
  .login-page .login-box {
    width: 70vw;
  }
}
@media (max-width: 576px) {
  .login-page .login-box {
    padding: 30px 20px 20px 20px;
    width: 85vw;
  }
}
.login-page .login-box .logo {
  max-width: 260px;
  max-height: 109px; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
}
@media (max-width: 576px) {
  .login-page .login-box .logo {
    max-width: 200px;
    max-height: 100px;
    margin-bottom: 40px;
  }
}
@media (max-width: 346px) {
  .login-page .login-box .logo {
    max-width: 150px;
    max-height: 90px;
  }
}
.login-page .login-box .logo img {
  width: 100%;
  height: 100%;
}
.login-page .log-head {
  margin: 30px 0;
}
@media (max-width: 576px) {
  .login-page .log-head {
    margin: 0 0 10px 0;
  }
}
.login-page .log-head h5 {
  font-size: 1.75rem;
  font-weight: 500;
}
@media (max-width: 346px) {
  .login-page .log-head h5 {
    font-size: 1.5rem;
  }
}
.login-page .log-head span {
  font-size: 1.125rem;
  font-weight: 400;
  margin-top: 5px; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
}
@media (max-width: 576px) {
  .login-page .log-head span {
    font-size: 1rem;
  }
}
@media (max-width: 346px) {
  .login-page .log-head span {
    font-size: 0.875rem;
  }
}
.login-page .login-form {
  height: 100%;
}
.login-page .login-form label {
  width: 100%; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-direction: column;
}
.login-page .login-form label span.input-box {
  height: 48px;
  position: relative;
  width: 100%; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
}
.login-page .login-form label span.input-box span {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  align-items: center;
  color: #B9B9B9;
  font-size: 1.125rem;
  font-weight: 400;
  padding-right: 10px;
  width: 110px;
  z-index: 10; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
}
.login-page .login-form input[type=text] {
  text-align: left;
  border-radius: 10px;
  height: 48px;
  border: 0.75px solid #D1D1D1;
  border-radius: 10px;
  background-color: transparent;
  width: 100%;
  padding: 0 10px;
  padding-right: 110px;
  font-size: 1.125rem;
}
.login-page .login-form input[type=text]:focus, .login-page .login-form input[type=text]:hover {
  border: 0.75px solid #D19E66;
}
.login-page .log-rule {
  justify-self: flex-end;
  margin-top: 10px;
  text-align: center;
}
@media (max-width: 576px) {
  .login-page .log-rule {
    margin-top: 20px;
    font-size: 0.75rem;
  }
}
.login-page .log-rule a {
  color: #4173E7; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
}
.login-page .log-rule a:hover {
  color: #D28E1B;
}
.login-page .error-text {
  display: none;
  font-size: 1rem;
  font-weight: 500;
  color: #EF394E;
  margin-top: 10px;
  width: 100%;
}
.login-page .error-login input[type=text].error-input {
  border: 0.75px solid #EF394E;
}
.login-page .error-login input[type=password].error-input {
  border: 0.75px solid #EF394E;
}
.login-page .error-login .error-text {
  display: block;
}
@media (max-width: 480px) {
  .login-page .error-login .error-text {
    font-size: 0.875rem;
  }
}

.verify-phone, .login-form, .log-head, .verify-form, .register-form {
  width: 80%;
}
@media (max-width: 1200px) {
  .verify-phone, .login-form, .log-head, .verify-form, .register-form {
    width: 90%;
  }
}
@media (max-width: 480px) {
  .verify-phone, .login-form, .log-head, .verify-form, .register-form {
    width: 100%;
  }
}
.verify-phone input[type=submit], .login-form input[type=submit], .log-head input[type=submit], .verify-form input[type=submit], .register-form input[type=submit] {
  background-color: #D19E66;
  width: 100%;
  height: 48px;
  border-radius: 25px;
  color: white;
  font-weight: 500;
  font-size: 1.125rem;
  border: none;
  align-self: flex-end;
  margin-top: 50px;
  margin-bottom: 20px;
}
.verify-phone input[type=submit]:hover, .login-form input[type=submit]:hover, .log-head input[type=submit]:hover, .verify-form input[type=submit]:hover, .register-form input[type=submit]:hover {
  background-color: #D28E1B;
}
@media (max-width: 768px) {
  .verify-phone input[type=submit], .login-form input[type=submit], .log-head input[type=submit], .verify-form input[type=submit], .register-form input[type=submit] {
    margin-top: 40px;
  }
}
@media (max-width: 576px) {
  .verify-phone input[type=submit], .login-form input[type=submit], .log-head input[type=submit], .verify-form input[type=submit], .register-form input[type=submit] {
    margin-top: 30px;
  }
}
@media (max-width: 480px) {
  .verify-phone input[type=submit], .login-form input[type=submit], .log-head input[type=submit], .verify-form input[type=submit], .register-form input[type=submit] {
    margin-top: 20px;
  }
}

.verify-phone > span {
  margin: 20px 0;
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 400;
}
@media (max-width: 480px) {
  .verify-phone > span {
    font-size: 0.875rem;
    margin: 10px 0;
  }
}
.verify-phone .verif-top { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  color: #42464F;
}
@media (max-width: 576px) {
  .verify-phone .verif-top {
    flex-direction: column;
  }
}
.verify-phone .verif-top span {
  font-size: 1.75rem;
  letter-spacing: 2px;
  direction: ltr;
}
.verify-phone .verif-top a {
  font-size: 0.875rem;
  font-weight: 400;
  background-color: #EEEEEE;
  border: none;
  padding: 5px 20px;
  border-radius: 25px;
  color: #42464F;
}
.verify-phone .verif-top a:hover {
  background-color: #dadada;
}
@media (max-width: 576px) {
  .verify-phone .verif-top a {
    margin-top: 5px;
  }
}

.verify-form.error-login input[type=text] {
  border: none;
  border-bottom: 3px solid #EF394E;
}
.verify-form.error-login .error-text {
  display: inline-block;
  width: 100%;
}
@media (max-width: 480px) {
  .verify-form.error-login .error-text {
    font-size: 0.875rem;
  }
}
.verify-form form {
  direction: ltr; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.verify-form input[type=text] {
  text-align: center;
  font-size: 40px;
  color: #33313B;
  border: none;
  border-bottom: solid 3px #D19E66;
  outline: none;
  width: 17%;
  transition: all 0.2s ease-in-out;
}
.verify-form input[type=text]::-moz-selection {
  border-bottom: solid 3px #EF394E;
}
.verify-form input[type=text]:focus, .verify-form input[type=text]::selection {
  border-bottom: solid 3px #EF394E;
}
.verify-form input[type=submit] {
  width: 100%;
}
.verify-form .send-verify-code { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  width: 100%;
  font-weight: 400;
}
@media (max-width: 576px) {
  .verify-form .send-verify-code {
    font-size: 0.875rem;
    flex-wrap: wrap;
  }
}
@media (max-width: 346px) {
  .verify-form .send-verify-code {
    flex-direction: column;
  }
}
.verify-form .send-verify-code .counter-code {
  color: #4173E7;
  border-bottom: 1px solid #4173E7;
  margin-right: 30px; /* OLD - iOS 6-, Safari 3.1-6 */ /* NEW - Chrome */ /* dont delet ! this is important for safari */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */
  display: inline-flex;
}
@media (max-width: 576px) {
  .verify-form .send-verify-code .counter-code {
    margin-right: 5px;
  }
}
@media (max-width: 346px) {
  .verify-form .send-verify-code .counter-code {
    margin-top: 10px;
  }
}
.verify-form .send-verify-code .counter-code #timer-code {
  margin-right: 5px;
}
.verify-form .send-verify-code .counter-code:hover {
  text-shadow: 0 0 0.7px #4173E7;
}

.register-form form { /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.register-form label.pass {
  width: 100%;
  height: 48px;
  position: relative;
  margin: 15px 0;
}
.register-form label.pass input[type=text] {
  width: 100%;
}
@media (max-width: 576px) {
  .register-form label.pass input[type=text] {
    margin-top: 0;
  }
}
.register-form label.pass svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  color: #B9B9B9;
  top: 50%;
  left: 0;
  position: absolute;
  transform: translateY(-50%);
  transition: 0.3s;
}
.register-form label.pass span {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 20px;
  height: 48px;
  width: 25px;
  transform: translateY(-50%);
}
.register-form label.pass span .line {
  width: 20px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: rotate(45deg) translateY(-50%);
  background-color: #B9B9B9;
  transition: 0.3s;
}
.register-form label.pass span.active svg {
  color: #EF394E;
}
.register-form label.pass span.active .line {
  display: none;
}
.register-form label.pass span.active:hover svg {
  color: #B9B9B9;
}
.register-form label.pass span.active:hover .line {
  display: block;
}
.register-form label.pass span:hover svg {
  color: #EF394E;
}
.register-form label.pass span:hover .line {
  display: none;
}
.register-form input[type=text] {
  border-radius: 10px;
  height: 48px;
  border: 0.75px solid #D1D1D1;
  border-radius: 10px;
  background-color: transparent;
  padding: 0 10px;
  font-size: 1.125rem;
  width: 48%;
}
.register-form input[type=text]:focus, .register-form input[type=text]:hover {
  border: 0.75px solid #D19E66;
}
.register-form input[type=text]:-moz-placeholder-shown {
  color: #D19E66;
}
.register-form input[type=text]:placeholder-shown {
  color: #D19E66;
}
.register-form input[type=text]::-moz-placeholder {
  color: #B9B9B9;
}
.register-form input[type=text]::placeholder {
  color: #B9B9B9;
}
@media (max-width: 576px) {
  .register-form input[type=text] {
    width: 100%;
    margin-top: 15px;
  }
}
.register-form input[type=password] {
  border-radius: 10px;
  height: 48px;
  border: 0.75px solid #D1D1D1;
  border-radius: 10px;
  background-color: transparent;
  padding: 0 10px 0 50px;
  font-size: 1.125rem;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
}
.register-form input[type=password]::-moz-placeholder {
  color: #B9B9B9;
}
.register-form input[type=password]::placeholder {
  color: #B9B9B9;
}
.register-form input[type=password]:-moz-placeholder-shown {
  color: #D19E66;
}
.register-form input[type=password]:placeholder-shown {
  color: #D19E66;
}
.register-form input[type=password]:focus, .register-form input[type=password]:hover {
  border: 0.75px solid #D19E66;
}

.disposable-pass {
  text-align: center;
}
.disposable-pass a {
  border-bottom: 1px solid #33313B;
  color: #33313B;
  font-size: 1.125rem;
  font-weight: 400;
}
.disposable-pass a:hover {
  text-shadow: 0 0 0.7px #33313B;
}

/*========____________New Style : changed ___________==========*/
.send-free-card {
  background-color: white; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-flex; /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
  margin-bottom: 30px;
  border-radius: 5px;
  font-weight: 400;
  font-size: 20px;
  color: #42464F;
}
.send-free-card svg {
  height: 50px;
  width: 70px;
  margin-left: 20px;
}
@media (max-width: 576px) {
  .send-free-card svg {
    width: 60px;
    margin-left: 10px;
  }
}
@media (max-width: 480px) {
  .send-free-card svg {
    width: 50px;
    height: 40px;
  }
}
@media (max-width: 346px) {
  .send-free-card svg {
    width: 40px;
  }
}
@media (max-width: 576px) {
  .send-free-card {
    font-size: 16px;
    padding: 8px 5px;
  }
}
@media (max-width: 346px) {
  .send-free-card {
    font-size: 14px;
  }
}/*# sourceMappingURL=style.css.map */