.icon-star:before {
    content: "\61"
}

.icon-chat:before {
    content: "\62"
}

.icon-like:before {
    content: "\63"
}

* {
    margin: 0;
    padding: 0
}

body {
    background: url(../img/xbackground.jpg) repeat scroll 0% 0% #fff;
    font-family: Tahoma, Verdana;
    font-size: 16px;
    line-height: 26px;
    width: 100%;
    min-width: 320px
}

a {
    color: #0a78c2;
    outline: medium;
    text-decoration: underline
}

a:hover {
    text-decoration: none
}

p {
    margin: 0 0 11px
}

strong, b {
    font-weight: bolder
}

img {
    border: medium;
    max-width: 100%;
    height: auto
}

h1, h2 {
    margin: 10px 0;
    font-size: 1.8em
}

h3 {
    margin: 2px 0 10px;
    font-size: 1.6em;
    font-weight: 400
}

.container {
    max-width: 960px;
    margin: 0 auto
}

.header {
    position: relative;
    max-width: 960px;
    margin: 0 auto 2.083%;
    background: url(../img/header-bg.jpg) no-repeat scroll center center transparent;
    background-size: 100% auto;
    height: 0;
    padding-top: 13.65%;
    cursor: pointer
}

.header h1 {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    margin: 1.6em 0 0 .6em;
    font-size: 2.2em;
    font-weight: 700;
    color: #fff
}

.header a {
    text-decoration: none
}

.header p {
    position: absolute;
    top: 35%;
    margin-top: -12px;
    color: #fff
}

.header h1 + p {
    right: 38%
}

.header p {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700
}

.header p span {
    position: absolute;
    right: 50%;
    top: 100%;
    margin-right: -15px;
    font-size: 30px
}

.header h1 + p + p {
    right: 20.5%
}

.header h1 + p + p span {
    position: absolute
}

.header p + p:last-child {
    right: 3%
}

.left-column {
    float: left;
    width: 59.375%;
    background: none repeat scroll 0% 0% #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    padding: 30px;
    margin-bottom: 20px
}

.left-column h1 + p + a img {
    float: right;
    margin: 0 0 10px 10px;
    width: 280px
}

.sidebar {
    float: right;
    width: 32.128%;
    max-width: 309px;
    font-size: 12px
}

.sidebar-last-posts {
    background: none repeat scroll 0% 0% #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    padding: 15px;
    margin-bottom: 20px
}

.sidebar-last-post {
    margin-bottom: 0
}

.posttiplink, .sidebar-last-post a, .sidebar-last-post > span:first-of-type {
    color: #489b1f
}

.sidebar-last-post > span:first-of-type {
    padding-left: 5px;
    float: right
}

.sidebar-last-post-info {
    font-size: 11px;
    margin-bottom: 15px
}

.sidebar-last-post-info-login {
    color: #bb225c;
    margin-right: 5px
}

.sidebar-last-post-info-date {
    margin-right: 5px;
    color: #777
}

.sidebar-last-post-info-comments {
    color: #777;
    text-decoration: underline
}

.sidebar-bloggers {
    background: none repeat scroll 0% 0% #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    padding: 15px;
    margin-bottom: 20px
}

.sidebar-bloggers-avatar {
    display: inline-block
}

.sidebar-bloggers img {
    margin: 4px;
    width: 50px;
    height: 50px
}

.footer {
    clear: both;
    margin: 0 auto 10px;
    font-size: 12px;
    color: #777
}

.photo {
    display: block;
    width: auto;
    height: 80%;
    margin: 0 auto
}

.vk-container {
    font-family: tahoma, arial, verdana, sans-serif, Lucida\ Sans;
    font-size: 14px;
    line-height: 1.4;
    color: #000;
    text-decoration: none
}

.vk-link {
    text-decoration: none !important;
    cursor: default !important;
    display: inline-block
}

.vk-header {
    background: none repeat scroll 0% 0% #dae2e8;
    padding: 4px 4px 4px 6px;
    margin-bottom: 10px
}

.vk-logo {
    width: 16px;
    height: 16px;
    float: right;
    margin-top: -1px
}

.vk-header-text {
    padding: 2px 3px 1px;
    line-height: 100%;
    color: #45688e;
    font-weight: 700
}

.vk-avatar img {
    float: left;
    margin-right: 10px
}

.vk-comment, .vk-comment-load {
    margin-bottom: 15px;
    position: relative;
    border-bottom: 1px solid #dae1e8;
    padding-bottom: 15px
}

.vk-comment:last-child {
    border-bottom: 0
}

.vk-comment-name {
    color: #2b587a;
    font-weight: 700;
    font-size: 14px
}

.vk-comment-text {
    margin-left: 60px
}

.vk-comment-date {
    margin-left: 60px;
    color: #999
}

.vk-comment-like {
    position: absolute;
    right: -5px;
    bottom: 10px;
    width: 30px;
    height: 16px;
    display: inline-block
}

.vk-comment-like:hover {
    opacity: .5;
    cursor: pointer
}

.vk-comment-like-count {
    padding-left: 14px;
    font-weight: 700;
    color: #7295b2;
    font-size: 10px
}

.vk-comment-answer {
    color: #2b587a
}

.vk-comment-answer:hover {
    opacity: .5;
    cursor: pointer
}

.center {
    text-align: center
}

.ordrbutt {
    background: #127eb2 none repeat scroll 0 0;
    border-radius: 5px;
    color: #fff !important;
    display: inline-block;
    font-size: 21px;
    padding: 15px 80px;
    text-decoration: none
}

.ordrbutt:hover {
    background: #ff8b68 none repeat scroll 0 0;
    border-color: #f25f32;
    text-decoration: none
}

.product-img {
    float: right;
    margin: 0 0 10px 10px;
    width: 200px;
}

@media screen and (max-width: 768px) {
    .header {
      padding: 0;
      height: 100px;
        margin-bottom: 10px;
      -webkit-background-size: cover;
      background-size: cover;
    }

    .header h1 {
        display: block;
        font-size: 2em;
      margin: 0;
      margin-left: 30px;
      line-height: 100px;
    }

    .left-column {
        float: none;
        width: auto;
        padding: 5px 15px
    }

    .left-column h1 + p + a img {
        width: 240px
    }

    .left-column, .sidebar-bloggers, .sidebar-last-posts {
        margin-bottom: 10px
    }

    .sidebar {
        float: none;
        width: auto;
        max-width: 100%
    }

    .product-img {
        width: 95px
    }

    .vk-container img {
        max-height: 300px;
        width: auto !important
    }

    .header p {
        right: 0 !important;
        top: 0 !important;
        margin: 20px 8px 0;
        position: relative;
        display: inline-block
    }
}

@media screen and (max-width: 480px) {
    h1, h2 {
        font-size: 1.7em
    }

    .header h1 {
        font-size: 1.3em;
    }

    .header p {
        font-size: 12px
    }

    .left-column h1 + p + a img {
        width: 160px
    }

    .photo {
        max-width: 290px;
        height: auto
    }
}

.prod-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    flex-direction: column
}

.prod-wrapper img {
    margin-bottom: 20px
}

@media (max-width: 768px) {
    .prod-wrapper img {
        width: 70%
    }
}

.discl {
    font-size: 18px;
    line-height: 1.2;
    padding: 5px 0;
    text-align: center;
    color: #bdbdbd
}

.discl p {
    padding: 0;
    margin: 0
}

.discl span {
    cursor: pointer;
    text-decoration: underline
}

.discl-footer {
    width: 100%;
    float: right;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    margin: 15px 0
}

.discl-footer p {
    margin: 0 2px;
    padding: 0
}

.discl-footer span {
    cursor: pointer;
    text-decoration: underline;
    margin: 0 2px;
    padding: 0
}

@media (max-width: 540px) {
    .discl-footer {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.countdown-block {
    text-align: center;
    background: #fff500;
    color: #fff;
    padding: 10px 0;
    margin-left: -10px;
    margin-right: -10px
}

.countdown-block > h3 {
    font-weight: 800;
    font-size: 36px;
    padding-top: 5px;
    margin: 0
}

.countdown-container {
    max-width: 320px;
    text-align: center;
    margin: 0 auto
}

.countdown-container .redd {
    color: red;
    font-weight: 800;
    font-size: 30px;
    line-height: 1.2;
    margin: 0 auto
}

.countdown-container h3 {
    color: #000;
    margin: 0 auto;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    font-family: Roboto
}

.countdown-container h6 {
    font-size: 14px;
    color: #0079f2;
    font-family: inherit
}

.countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 300;
    font-size: 39px;
    line-height: 1
}

.countdown-item {
    color: red;
    width: 5rem;
    font-weight: 800
}

.countdown-divider {
    color: #000;
    width: 1rem
}

.countdown-text {
    margin: 0 auto;
    margin-bottom: -8px;
    width: 90%;
    color: #000;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-family: Roboto
}

.countdown-text span {
    width: 4rem;
    margin-right: 2rem
}

.countdown-text span:last-child {
    margin-right: 0
}

.best-form {
    font: 16px/1.2 "Arial";
    padding: 16px;
    color: #fff;
    background-image: linear-gradient(to top, #d1f0ff, #e9f8ff);
    margin-left: -10px;
    margin-right: -10px
}

.best-form > .wrap {
    max-width: 410px;
    margin: 0 auto
}

.product {
    display: flex;
    margin-bottom: 15px
}

.product .left {
    width: 50%
}

.product .right {
    width: 50%;
    text-align: center;
    font-family: Roboto
}

.product .discount {
    background-image: linear-gradient(to right, #ff0, #ffeb3b);
    color: red;
    border-radius: 10px;
    transform: skew(-15deg);
    font-size: 3.5rem;
    font-weight: 700;
    font-style: italic;
    text-align: center;
    width: 85%;
    height: 5rem;
    line-height: 5rem;
    letter-spacing: -3px;
    margin-top: -.3rem
}

.product .discount div {
    transform: skew(15deg)
}

.product .price {
    color: #ed1b24;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1
}

.product .discount-text {
    margin-top: 1rem;
    color: #000;
    font-size: 18px
}

.product .price span {
    font-weight: 300;
    font-size: 50%;
    display: inline-block
}

.product .price-old {
    line-height: 1
}

.product .price-old span {
    display: inline-block;
    padding: 0 1rem;
    font-size: 25px;
    color: #000;
    position: relative;
    font-weight: 700
}

.product .price-old span:before {
    position: absolute;
    content: "";
    left: 0;
    top: 45%;
    right: 0;
    border-top: 5px solid #ed1b24;
    transform: rotate(-10deg)
}

.country-input, .name-input, .phone-input {
    position: relative;
    color: #000;
    width: 100%;
    box-sizing: border-box;
    font-size: 20px;
    margin-bottom: 10px
}

.name-input input, .phone-input input {
    border: 0;
    font: inherit;
    color: inherit;
    box-sizing: border-box;
    min-width: 0;
    padding: 10px 15px;
    border-radius: 6px;
    width: 100%;
    padding-left: 35px;
    transition: all .15s ease-in-out
}

.phone-input::before {
    position: absolute;
    content: '';
    width: 21px;
    height: 24px;

    background-repeat: no-repeat;
    top: 35px;
    left: 10px
}

.name-input::before {
    position: absolute;
    content: '';
    width: 22px;
    height: 23px;

    background-repeat: no-repeat;
    top: 35px;
    left: 10px
}

.button-submit:focus, input:focus-within {
    outline: 0;
    box-shadow: 0 0 0 4px #bdab3c
}

.name-input:focus-within input, .phone-input:focus-within input {
    outline: 0
}

.name-input .country {
    border-radius: 3px;
    vertical-align: -2px
}

.name-input label, .phone-input label {
    width: 100%;
    margin: 0 auto;
    text-align: center
}

.button-submit {
    text-align: center;
    display: flex;
    box-sizing: border-box !important;
    width: 100%;
    margin: 15px auto;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1;
    color: #544c4c;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    border-radius: 6px;
    border: 0;
    padding: 14px 0;
    background-image: linear-gradient(to top, #d8b81b, #fff080);
    cursor: pointer;
    font: 24px/1.4 "Open Sans", sans-serif;
    font-weight: 400
}

.button-submit:hover {
    transform: scale(1.1)
}

.button-submit-text {
    color: #544c4c;
    flex: 1 1 auto;
    font: inherit;
    font-weight: 700;
    line-height: 1
}

.button-submit-arrow {
    width: 0;
    height: 0;
    border-top: .6rem solid transparent;
    border-bottom: .6rem solid transparent;
    border-left: 1rem solid #fff;
    margin-right: 1rem
}

.ord_button {
    background-color: #5d9d52;
    color: #fff !important;
    display: inline-block;
    padding: 10px 30px;
    font-size: 25px !important;
    box-shadow: 2px 3px 8px #999;
    text-decoration: none !important;
    border-radius: 8px;
    border: 3px solid #fff;
    margin: 20px 0 30px;
    line-height: 27px;
    text-transform: uppercase;
    transition: all .3s ease-in 0s
}

.ord_button:hover {
    background-color: #5d9d52;
    box-shadow: 2px 3px 3px #999;
    text-decoration: none !important;
    transform: scale(1.1)
}

.prod-price {
   
    margin: 0 auto 20px;
    
}

.pop-old-price {
    font-size: 24px;
    color: gray;
    text-decoration: line-through
}

.pop-new-price {
    font-size: 32px;
    color: #544c4c;
    font-weight: bold;
    text-shadow: 0 0 4px #e3c72e
}

.pop-price::before {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    top: -60px;
    content: ' ';
    background-image: url(../img/sale.png);
    background-repeat: no-repeat;
    width: 120px;
    height: 65px;
    background-size: 120px
}


.pop-prod,
.pop-price {
    position: relative;
    width: 100%;
    text-align: center;
    margin: auto
}
.price-bottom {
    margin-top: 25px;
}
.order__form {
  max-width: 280px;
  margin: 16px auto 0;
}

.order__label {
  display: block;
  width: 100%;
}

.order__label:not(:first-of-type) {
  margin-top: 8px;
}

.order__field {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 16px;
  font-size: 16px;
  line-height: 1.2;
  
  color: #7C7C7C;
  border: 1px solid #EAEAEA;
  border-radius: 4px;
  background-color: #ffffff;
  outline: none;
  transition: all .3s ease-out;
}

.order__field::-webkit-input-placeholder {
  font-size: 14px;
  line-height: 1.2;
  
  color: #7C7C7C;
}

.order__field::-moz-placeholder {
  font-size: 14px;
  line-height: 1.2;
  
  color: #7C7C7C;
}

.order__field:-moz-placeholder {
  font-size: 14px;
  line-height: 1.2;
  
  color: #7C7C7C;
}

.order__field:-ms-input-placeholder {
  font-size: 14px;
  line-height: 1.2;
  
  color: #7C7C7C;
}

.order__field--select::-ms-expand {
  display: none;
}

.order__field--select {
  -webkit-appearance: none;
  appearance: none;
  background: url(../img/select.png) center right 8px no-repeat, #ffffff;
}

.order__field:focus {
  border-color: #7C7C7C;
}

.order__prices {
  margin-top: 20px;
}

.button {
  position: relative;
  display: block;
  width: 100%;
  max-width: 176px;
  margin: 0 auto;
  padding: 8px 13px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  
  text-align: center;
  color: #FFFFFF;
  background-color: #44B946;
  border: none;
  border-radius: 4px;
  outline: none;
  transition: all .3s ease-out;
  cursor: pointer;
  z-index: 1;
}

.button:hover {
  background-color: #9AD829;
}

.order__button {
  margin-top: 8px;
  max-width: 100%;
}

@media screen and (max-width: 991px) {
  .sidebar {
    display: none;
  }
  .vk-comment:nth-of-type(-n+21) {
    display: none;
  }
}
footer {
    text-align: center;
    padding: 20px 10px;
}