@charset "utf-8";

body, html { padding: 0px; margin: 0px; }

body { font-family: Arial, Helvetica, sans-serif; font-size: 20px; line-height: 1.3; color: rgb(51, 51, 51); }

p { margin: 0px 0px 20px; }

h1 { font-size: 1.8em; line-height: 1.1; color: rgb(51, 51, 51); }

img { height: auto; width: 100%; }

.container { max-width: 960px; padding: 20px 30px; margin: 0px auto; box-shadow: rgb(196, 196, 196) 0px 0px 6px 2px; }

.center { text-align: center; }

.red-txt { color: red; }

.container img { max-width: 87%; display: block; margin: 0px auto 20px; border-radius: 5px; }

h2, .h2 { font-size: 1.26em; }

.container > div { margin-bottom: 30px; padding: 10px; }

.container > div p:last-child, .container > div ul, .container > div ol { margin-bottom: 0px; }

.yell-bg { background: rgba(255, 191, 0, 0.27); }

figure { margin: 0px auto 20px; max-width: 650px; }

figure img { margin-bottom: 8px !important; }

figcaption { text-align: center; font-size: 0.9em; font-weight: 600; }

.gray-bg { background: rgba(156, 156, 156, 0.33); border: 1px solid rgb(51, 51, 51); }

.color2 { color: rgb(196, 23, 12); }

.b-comments__comment { height: 100%; overflow: hidden; }

.b-comments { font-size: 18px; }

img.b-comments__item-avatar { float: left; width: 50px; height: 50px; margin-bottom: 0px; margin-right: 10px !important; }

.b-comments__item-ind { margin-left: 60px; }

.b-comments__item-head { font-weight: bold; margin-bottom: 3px; }

.b-comments__item-ind img { margin: 6px 0px 0px; }

.reply { margin-left: 30px; }

.container > div.b-comments { padding: 0px; }

@media screen and (max-width: 640px) {
  h1 { margin-top: 0px; }
  body { font-size: 18px; }
}

.mob-show { display: none; }

@media screen and (max-width: 540px) {
  .mob-show { display: block; }
  .mob-hide { display: none; }
}

#blank, .btn { font-weight: 700; }

.btn, .form-order, form small { max-width: 300px; }

#blank, #blank > *, .red-border::after { box-sizing: border-box; }

.box-img, .form_input, .price div, form small, p.promo_note { text-align: center; }

.form-order { width: 100%; padding: 15px 20px; margin-top: 0px; background: rgb(255, 255, 255); border-radius: 12px; box-shadow: rgb(204, 204, 204) 0px 0px 5px; }

.rel { position: relative; }

.price { font-size: 25px; display: -webkit-flex; justify-content: center; margin-bottom: 20px; padding: 0px 0px 10px; }

#blank { display: flex; justify-content: space-around; align-items: center; margin: 30px auto 15px; border-radius: 8px; flex-direction: column; background: rgb(247, 247, 247); box-shadow: rgb(197, 197, 197) 0px 0px 5px; width: 100%; padding: 15px; max-width: 690px; font-family: sans-serif; font-size: 20px; line-height: 1.4; }

.price div:last-child { margin-left: 20px; }

.price-text { font-size: 18px; color: rgb(68, 68, 68); margin: 0px; }

.currency-price .x_currency, .currency-price .x_price_current { color: red; font-weight: 700; }

#blank .currency-price { padding-left: 20px; border-left: 1px solid rgb(197, 197, 197); }

form small { display: block; margin: 0px auto 8px; font-size: 14px; }

form small:last-of-type, p.promo_note:last-of-type { margin-bottom: 0px; }

.old-price { text-decoration: line-through; }

.btn { font-size: 17px; cursor: pointer; display: inline-block; width: 100%; height: 55px; background-image: linear-gradient(to left, rgb(220, 20, 60), rgb(211, 24, 211)); background-color: rgb(220, 20, 60); color: rgb(255, 255, 255); border: 0px; border-radius: 7px; transition: 0.4s; }

.btn:hover { background-image: linear-gradient(to left, rgb(211, 24, 211), rgb(220, 20, 60)); }

@media screen and (max-width: 449px) {
  .form-order { max-width: 270px; display: block; }
  #blank { padding: 10px; }
}

.form_input input { width: 100%; max-width: 300px; height: 40px; border: 1px solid gray; margin-bottom: 15px; padding-left: 10px; font-size: 16px; transition: 0.3s; }

.form_input button, .promo_notes { margin-bottom: 10px; }

.form_input input:focus { box-shadow: rgba(0, 0, 0, 0.2) 2px 3px 5px; }

.form_input input:valid { box-shadow: rgba(0, 255, 127, 0.2) 2px 3px 5px; }

.form_input button { padding-right: 5px; padding-left: 5px; }

.form-flex, .red-border, .red-border__text { display: flex; align-items: center; justify-content: center; }

.form-flex img { margin-right: 30px; }

@media screen and (max-width: 768px) {
  .product img { max-width: 100%; }
  .form-flex { flex-direction: column; }
  .form-flex img { margin-right: 0px; margin-bottom: 20px; }
}

.box-img img { display: block; max-width: 500px; }

.box-img img { margin: 0px auto; border-radius: 10px; border: 1px solid rgb(204, 204, 204); width: 100%; }

@media (max-width: 767px) {
  .container { padding: 20px 15px; box-shadow: rgb(196, 196, 196) 0px 0px 6px 2px; }
  .container img { max-width: 100%; }
}

.link-offer { font-weight: 600; color: rgb(72, 131, 241); text-decoration: none; transition: 0.3s; }

.link-offer:hover { color: rgb(0, 55, 156); }

.box-img.wr img { border: 0px !important; }

.red-border { color: rgb(255, 255, 255); width: 84px; height: 84px; font-size: 24px; position: absolute; top: -22px; right: 20px; }

.red-border__text { position: relative; width: 72px; height: 72px; background-color: red; border-radius: 50%; }

.red-border::after { content: ""; position: absolute; border-radius: 50%; width: 100px; height: 100px; border-bottom: 2px solid red; top: -7px; right: -7px; animation: 2s linear 0s infinite normal none running load; }

@keyframes load { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

p.promo_note { margin-top: 0px; margin-bottom: 5px; font-size: 16px; }

#blank, .btn { font-weight: 700; }

.btn, .form-order, form small { max-width: 300px; }

#blank, #blank > *, .red-border::after { box-sizing: border-box; }

.box-img, .form_input, .price div, form small, p.promo_note { text-align: center; }

.form-order { width: 100%; padding: 15px 20px; margin-top: 0px; background: rgb(255, 255, 255); border-radius: 12px; box-shadow: rgb(204, 204, 204) 0px 0px 5px; }

.rel { position: relative; }

.price { font-size: 25px; display: -webkit-flex; justify-content: center; margin-bottom: 20px; padding: 0px 0px 10px; }

#blank { display: flex; justify-content: space-around; align-items: center; margin: 30px auto 15px; border-radius: 8px; flex-direction: column; background: rgb(247, 247, 247); box-shadow: rgb(197, 197, 197) 0px 0px 5px; width: 100%; padding: 15px; max-width: 690px; font-family: sans-serif; font-size: 20px; line-height: 1.4; }

.price div:last-child { margin-left: 20px; }

.price-text { font-size: 18px; color: rgb(68, 68, 68); margin: 0px; }

.currency-price .x_currency, .currency-price .x_price_current { color: red; font-weight: 700; }

#blank .currency-price { padding-left: 20px; border-left: 1px solid rgb(197, 197, 197); }

form small { display: block; margin: 0px auto 8px; font-size: 14px; }

form small:last-of-type, p.promo_note:last-of-type { margin-bottom: 0px; }

.old-price { text-decoration: line-through; }

.btn { font-size: 17px; cursor: pointer; display: inline-block; width: 100%; height: 55px; background-image: linear-gradient(to left, rgb(220, 20, 60), rgb(211, 24, 211)); background-color: rgb(220, 20, 60); color: rgb(255, 255, 255); border: 0px; border-radius: 7px; transition: 0.4s; }

.btn:hover { background-image: linear-gradient(to left, rgb(211, 24, 211), rgb(220, 20, 60)); }

@media screen and (max-width: 449px) {
  .form-order { max-width: 270px; display: block; }
  #blank { padding: 10px; }
}

.form_input input { width: 100%; max-width: 300px; height: 40px; border: 1px solid gray; margin-bottom: 15px; padding-left: 10px; font-size: 16px; transition: 0.3s; }

.form_input button, .promo_notes { margin-bottom: 10px; }

.form_input input:focus { box-shadow: rgba(0, 0, 0, 0.2) 2px 3px 5px; }

.form_input input:valid { box-shadow: rgba(0, 255, 127, 0.2) 2px 3px 5px; }

.form_input button { margin-top: 15px; padding-right: 5px; padding-left: 5px; }

.form-flex, .red-border, .red-border__text { display: flex; align-items: center; justify-content: center; }

.form-flex img { margin-right: 30px; }

@media screen and (max-width: 768px) {
  .product img { max-width: 100%; }
  .form-flex { flex-direction: column; }
  .form-flex img { margin-right: 0px; margin-bottom: 20px; }
}

.box-img img { display: block; max-width: 320px; }

.box-img img { margin: 0px auto; border-radius: 10px; border: 1px solid rgb(204, 204, 204); width: 100%; }

.box-img.wr img { border: 0px !important; }

.red-border { color: rgb(255, 255, 255); width: 84px; height: 84px; font-size: 24px; position: absolute; top: -22px; right: 20px; }

.red-border__text { position: relative; width: 72px; height: 72px; background-color: red; border-radius: 50%; }

.red-border::after { content: ""; position: absolute; border-radius: 50%; width: 100px; height: 100px; border-bottom: 2px solid red; top: -7px; right: -7px; animation: 2s linear 0s infinite normal none running load; }

@keyframes load { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

p.promo_note { margin-top: 0px; margin-bottom: 5px; font-size: 16px; }

.container > div.b-comments { margin-bottom: 25px; padding: 10px; background-color: rgb(248, 248, 248); border-radius: 10px; }

img.b-comments__item-avatar { float: left; width: 50px; height: 50px; margin-bottom: 0px; border-radius: 50%; margin-right: 10px !important; }

.b-comments__item-ind img { border-radius: 8px; }

.link.btn { width: 100%; max-width: 400px; text-align: center; font-size: 19px; margin: 35px auto 20px; display: flex; align-items: center; justify-content: center; text-decoration: none; }

@keyframes changeOfSize { 
  0% { transform: scale(0.001); }
  100% { transform: scale(1); }
}

@keyframes movement { 
  100% { transform: translateX(15px); }
}

.preloader { position: relative; display: none; width: 40px; height: 10px; margin: auto; font-size: 20px; }

.dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgb(255, 255, 255); animation: 1s ease 0s infinite normal none running none; }

.dot1, .dot2 { left: 0px; }

.dot3 { left: 15px; }

.dot4 { left: 30px; }

.dot1 { animation-name: changeOfSize; }

.dot2, .dot3 { animation-name: movement; }

.dot4 { animation-name: changeOfSize; animation-direction: reverse; }

.preloader.preloader-active { display: flex; }