.bg-color { background: rgb(255, 255, 255) !important; }
.header-h { font-size: 1rem; margin-left: 1rem; color: rgb(255, 255, 255) !important; }
.hpn-color { color: #202b55 !important; }
.hd-tx-color { color: rgb(0, 0, 0) !important; }
.hd-br-color { border-color: rgb(0, 0, 0) !important; }
.win-bg-color { background-color: #c80f2d !important; }
.win-tx-color { color: #ffffff !important; }
.time-color { color: rgb(238, 88, 88) !important; }
.cart-bg-color { color: rgb(255, 255, 255) !important; }
.btn-color { background-color: #c80f2d !important; }
.btn-tx-color { color: #ffffff !important; }
@media only screen and (min-width: 576px) {
  .btn-color:hover { background-color: #c80f2d !important; }
  .btn-tx-color:hover { color: #202b55 !important; }
}
.date-tx { color: rgb(0, 0, 0) !important; }
.hd { background-color: rgb(255, 255, 255) !important; }
.comment-img { width: 52px !important; height: 52px !important; }
body { font-family: Poppins, sans-serif; font-size: 14px; margin: 0px; padding: 0px; }
.content { padding: 10px; display: block; max-width: 1200px; margin: auto; }
.top-header { width: 100%; }
.header-container { max-width: 170px; margin: auto; padding: 20px; background-position: center center; background-repeat: no-repeat; }
.mob { display: none; padding: 5px 10px; background-size: contain; background-position-x: 100%; }
.logoo { max-width: 240px; max-height: 55px; }
.logo_special { max-width: 150px; max-height: 55px; }
.logo-container { max-height: 55px; max-width: 240px; }
.cart { padding-top: 20px; float: right; font-size: 20px; }
.header-text { border-top: 1px solid rgba(255, 255, 255, 0.31); padding: 10px; font-size: 12px; text-align: center; }
.main-content { box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 10px; margin-bottom: 20px; position: relative; min-height: 300px; background: rgb(255, 255, 255); border-radius: 20px !important; padding: 20px !important; }
.survey-container { position: relative; min-height: 300px; border-radius: 20px !important; padding: 10px !important; }
.main-content .flag { min-height: inherit; }
.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.intro-title { font-size: 42px; font-weight: 700; padding-bottom: 20px; }
.intro-title.uk { font-size: 38px; }
.intro-title span { border-radius: 10px; padding: 0px 10px; }
.intro-sub { position: relative; margin: auto auto 10px; }
.intro-sub .line { border-top: 1px solid rgb(0, 0, 0); width: 100%; }
.intro-sub p { display: inline-block; margin: auto; font-size: 20px; font-weight: 700; position: relative; top: -15px; background-color: rgb(255, 255, 255); padding: 0px 10px; }
.intro-product-name { font-size: 32px; font-weight: 700; margin-top: -20px; margin-bottom: 30px; line-height: 1; }
.intro-text { font-size: 18px; padding-bottom: 20px; line-height: 1.4 !important; }
.mobile-product { display: none; }
.cta { border: 1px solid rgb(222, 222, 222); padding: 10px; border-radius: 20px; }
.time-text { font-size: 18px; line-height: 1.3 !important; }
.clock { width: 22px; display: inline-block; position: relative; margin-top: -4px; }
#time, .orgn { font-weight: 700; }
.continue-btn, .survey_button, .claim_btn, #btn-email, #noEmail, .ansOpt, .continue_s { font-size: 20px; font-weight: 600; display: block; width: 100%; max-width: 600px; cursor: pointer; transition: transform 0.5s ease 0s; font-family: Helvetica, Arial, "sans-serif"; box-shadow: rgb(0, 0, 0) 0px 3px !important; padding: 10px !important; margin: auto auto 10px !important; border: none !important; border-radius: 20px !important; }
.continue-btn:hover, .survey_button:hover, .claim_btn:hover, .continue_s:hover { text-decoration: none; transform: scale(1.05); }
.continue-btn:active, .survey_button:active, .claim_btn:active, .continue_s:active { transform: scale(0.9); }
.marka { display: none; }
.marka.draw::after { animation-duration: 0.8s; animation-timing-function: ease; animation-name: marka; transform: scaleX(-1) rotate(135deg); }
.marka::after { opacity: 1; height: 3.5em; width: 1.75em; transform-origin: left top; border-right: 3px solid rgb(92, 184, 92); border-top: 3px solid rgb(92, 184, 92); content: ""; left: 1.75em; top: 3.5em; position: absolute; }
@keyframes marka { 
  0% { height: 0px; width: 0px; opacity: 1; }
  20% { height: 0px; width: 1.75em; opacity: 1; }
  40% { height: 3.5em; width: 1.75em; opacity: 1; }
  100% { height: 3.5em; width: 1.75em; opacity: 1; }
}
.zagruz { border-width: 1px; border-style: solid; border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgb(92, 184, 92); border-image: initial; animation: 1.2s linear 0s infinite normal forwards running loader-spin; position: relative; display: inline-block; vertical-align: top; border-radius: 50%; width: 7em; height: 7em; }
.gotov { animation: auto ease 0s 1 normal none running none; border-color: rgb(92, 184, 92); transition: border 0.5s ease-out 0s; }
@keyframes loader-spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.confeti { position: relative; min-height: 100vh; overflow: hidden; }
[class|="confetti"] { position: absolute; }
.red { background-color: rgb(233, 74, 63); }
.yellow { background-color: rgb(250, 160, 64); }
.blue { background-color: rgb(95, 201, 245); }
#svg-box .marka__check { animation: 1s ease-out 0s 1 normal none running draw-check; }
.desktop-only { padding-right: 30px; text-align: center; }
img { max-width: 100%; }
.disclaimer, .disclaimer.uk, .disclaimer_s { padding: 10px; border-radius: 5px; font-size: 13px; width: 100%; margin: auto; color: rgb(119, 119, 136); background: rgba(255, 255, 255, 0.7); line-height: 1.3 !important; }
.disclaimer_s { display: none; overflow: hidden; white-space: nowrap; width: 45%; cursor: pointer; position: relative; }
.all_tx { overflow: unset; width: 100%; white-space: unset; }
.disclaimer_s::after { content: "..."; background: rgb(255, 255, 255); position: absolute; right: -1px; }
.all_tx::after { content: ""; background: transparent; }
.question { font-size: 18px; display: block; text-align: center; max-width: 600px; margin-top: auto; margin-right: auto; margin-left: auto; margin-bottom: 20px !important; line-height: 1.2 !important; }
.survey_button { font-size: 20px; text-align: center; }
button:focus { outline: none; }
button { cursor: pointer; }
#q2, #q3, #q4, #q5, #q6, #q7, #pok2, .result, #pok3 { display: none; }
#pok3 { min-width: 200px; }
.reward-page .reward { margin-bottom: 20px; padding: 40px 20px !important; }
.main-content h2, .name, .result { font-weight: 700; }
#pok2 h2 { margin-top: 30px; }
.result-wrap { max-width: 600px; margin: auto; }
.product-title { font-weight: 700; font-size: 18px; }
.mobile-only { display: none; }
#svg-box { display: block; position: relative; width: 150px; margin: 0px auto; }
#svg-box svg { stroke: rgb(1, 189, 34); }
#svg-box circle { stroke-dasharray: 330; stroke-dashoffset: 0; stroke-linecap: round; opacity: 0.4; animation: 0.7s ease-out 0s 1 normal none running draw-circle; }
#svg-box .marka { stroke-width: 6.25; stroke-linecap: round; position: absolute; top: 56px; left: 49px; width: 52px; height: 40px; display: block; }
.p_modal h2 { color: rgb(0, 0, 0); font-size: 25px; text-align: center; font-weight: 600; text-transform: none; position: relative; margin: 25px 0px; padding: 0px; display: block; }
.p_modal p { color: rgb(0, 0, 0); font-size: 15px; text-align: center; font-weight: 300; position: relative; float: none; margin: 10px 0px; padding: 0px; line-height: normal; }
.p_modal { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.comment { padding: 2% 5%; border-bottom: 1px solid rgb(238, 238, 238); }
.comment p { margin-left: 85px; }
.comment-page { box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 10px; border-radius: 20px; margin-top: 10px; background: rgb(255, 255, 255); margin-bottom: 100px; padding: 40px 20px !important; }
.comment-img { display: inline-block; border-radius: 50%; vertical-align: top; }
.comment .desc { display: inline-block; margin-left: 30px; font-size: 14px; }
.vicon { width: 16px; margin: 7px; }
.vtext { font-size: 10px; padding-left: 4px; font-style: italic; color: rgb(76, 175, 73); font-weight: bold; }
.comment-rating-img { width: 62px; }
.comment-time { font-size: 12px; margin-left: 10px; }
.comment-rating { display: block; margin-bottom: 15px; }
.reward:nth-child(1) { border-top: 8px solid rgb(134, 218, 255); }
.reward:nth-child(2) { border-top: 8px solid rgb(69, 195, 85); }
.badge-wrap { position: absolute; right: -18px; top: 30px; background-color: rgb(134, 218, 255); width: 180px; padding: 6px; color: rgb(255, 255, 255); font-size: 16px; font-weight: 600; line-height: 26px; border-radius: 5px 0px 0px 5px; text-align: center; border: 1px solid rgb(59, 202, 226); box-shadow: rgba(0, 0, 0, 0.13) 0px 4px 4px; }
.badge-wrap::before { content: " "; width: 50px; height: 30px; background-color: rgb(60, 202, 197); position: absolute; right: 3px; top: -14px; transform: rotate(26deg); z-index: -999; }
.badge-wrap, .badge-wrap .top, .badge-wrap .popular { display: none; }
.reward:nth-child(1) .badge-wrap, .reward:nth-child(2) .badge-wrap { display: block; }
.reward:nth-child(1) .badge-wrap .top { display: block; }
.reward:nth-child(2) .badge-wrap .popular { display: block; }
.reward:nth-child(2) .badge-wrap { background-color: rgb(114, 213, 98); border: 1px solid rgb(80, 216, 97); }
.reward:nth-child(2) .badge-wrap::before { background-color: rgb(69, 195, 85); }
.tick-icon { width: 18px; margin-right: 8px; }
#policy-close { text-align: center; width: 30px; height: 30px; background: gray; float: right; cursor: pointer; }
#policy-close img { width: 14px; padding-top: 7px; }
#policy-content { padding: 30px; overflow: auto; height: 700px; margin-top: 30px; }
#policy-wrap { display: none; width: 70%; height: 80%; padding: 0px; position: fixed; text-align: justify; z-index: 999999999; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 normal none running zoom-in; transform-origin: center top; background-color: rgb(255, 255, 255); transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s; box-shadow: rgba(0, 0, 0, 0.31) 0px 8px 60px 0px, rgba(0, 0, 0, 0.42) 0px 12px 90px 0px; border-radius: 8px; }
.image { text-align: center; max-height: 200px; }
.hidden { padding-bottom: 25px; animation: 2s ease-in-out 0s 1 normal forwards running move-in; transition: all 0.5s ease 0s; }
.reward:hover { box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 15px; transform: scale(1.01); z-index: 0; }
.reward { box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 10px; margin-top: 10px; padding: 20px 30px; background-color: rgb(255, 255, 255); position: relative; border-top: 8px solid rgb(134, 218, 255); border-radius: 20px; transition: all 0.2s ease-in 0s; margin-left: 0px !important; margin-right: 0px !important; }
.reward .description i { font-size: 14px; display: block; }
.reward.out { opacity: 0.5; }
.reward .image-wrapper .image a img { width: auto; height: 200px; max-width: 100% !important; }
#claim_btn_0 { border-radius: 30px; padding: 10px; width: 100%; cursor: pointer; }
.badge-wrap { position: absolute; right: -18px; top: 30px; width: 180px; padding: 6px; color: rgb(255, 255, 255); font-size: 16px; font-weight: 600; line-height: 26px; border-radius: 5px 0px 0px 5px; text-align: center; border: 1px solid rgb(59, 202, 226); box-shadow: rgba(0, 0, 0, 0.13) 0px 4px 4px; }
.red-price { color: red; }
.green-price { color: green; font-weight: bold; font-size: 18px; }
.footer { border-radius: 20px; padding: 15px; text-align: center; font-size: 10px; background-color: rgba(255, 255, 255, 0.2); left: 50.2%; top: 90%; transform: translate(-50%, -50%); width: 1185px; margin: 0px auto; position: fixed; }
#policy-btn, #terms-btn { cursor: pointer; text-decoration: underline; }
.image-wrapper { position: inherit; }
.boxes { background-size: cover; border-radius: 20px; position: relative; text-align: center; margin: 10px auto; max-width: 800px; }
.boxes .try { position: relative; display: inline-block; width: 23.8%; transition-duration: 0.2s; cursor: pointer; }
.boxes .try.prize .box_prez { animation: 4s ease 0s 1 normal forwards running superior_cover; }
.try { position: relative; margin: 20px 0px; }
.try div { position: absolute; }
.try .box { position: relative; }
.box { z-index: 2; }
.box_cover { z-index: 3; }
.box_back, .box_prez { z-index: 1; }
.box_prez { width: 100%; text-align: center; }
.boxes, .boxes cbox, .boxes .try img { width: 100%; }
.div_img_prez { width: 100%; text-align: center; position: absolute; top: 0px; left: 0px; z-index: 5; display: none; align-items: center; justify-content: center; }
.img_prez { display: none; width: 70%; animation-duration: 1s; animation-fill-mode: both; animation-name: rotateIn; margin: 0px auto; }
@-webkit-keyframes rotateIn { 
  0% { transform-origin: center center; transform: rotate3d(0, 0, 1, -200deg); opacity: 0; }
  100% { transform-origin: center center; transform: none; opacity: 1; }
}
@keyframes rotateIn { 
  0% { transform-origin: center center; transform: rotate3d(0, 0, 1, -200deg); opacity: 0; }
  100% { transform-origin: center center; transform: none; opacity: 1; }
}
.tremor:hover { animation: 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s 1 normal both running tremor; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden; perspective: 1000px; }
.boxes .try.open .box_cover { animation: 2s ease 0s 1 normal forwards running superior_cover; }
@keyframes superior_cover { 
  0% { top: 0px; }
  100% { top: -40px; }
}
@keyframes tremor { 
  10%, 90% { transform: translate3d(-1px, 0px, 0px); }
  20%, 80% { transform: translate3d(2px, 0px, 0px); }
  30%, 50%, 70% { transform: translate3d(-4px, 0px, 0px); }
  40%, 60% { transform: translate3d(4px, 0px, 0px); }
}
.tremor_inf { animation: 2s ease 0s infinite normal none running tremor_inf; }
@keyframes tremor_inf { 
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.gotov { animation: auto ease 0s 1 normal none running none; border-color: rgb(92, 184, 92); transition: border 0.5s ease-out 0s; }
.zagruz { border-width: 1px; border-style: solid; border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgb(92, 184, 92); border-image: initial; animation: 1.2s linear 0s infinite normal none running loader-spin; position: relative; display: inline-block; vertical-align: top; border-radius: 50%; width: 7em; height: 7em; }
#mainWrapper { display: flex; justify-content: center; align-items: center; position: absolute; width: 47px; bottom: 70px; right: 54px; }
.prezbox-container #mainWrapper { width: 120px; right: 35px; bottom: 40px; }
#cardsWrapper { display: flex; justify-content: space-between; position: relative; width: 47px; }
.prezbox-container #cardsWrapper { width: 100px; }
.card { border: none; width: 70px; height: 60px; perspective: 432px; background-color: transparent; }
.prezbox-container .card { width: 100px; }
.image { width: 100%; height: 100%; transform: rotateY(50deg) rotateX(-8deg) rotateZ(-10deg); transform-style: preserve-3d; }
.image.first { background-repeat: no-repeat; background-position: center center; background-size: contain; display: flex; }
.screen { width: 100%; height: 100%; transform: translateZ(30px) scale(0.94); }
#questionTemplate { padding-top: 0px !important; }
.back { display: flex; justify-content: center; align-items: center; width: 100%; background: rgb(148, 180, 215); color: rgb(51, 51, 51); }
.front { background-color: rgb(229, 229, 229); position: absolute; display: flex; justify-content: center; align-items: center; inset: 0px; color: rgb(51, 51, 51); clip-path: inset(0px 0px 0px 0%); transition: clip-path 1s linear 0s; }
.progress { display: none; position: relative; height: 4px; font-size: 14px; overflow: hidden; border-radius: 0px !important; }
.text-percent-container { display: none; margin: auto 15px; border-top: 1px solid rgb(229, 229, 229); border-right: 1px solid rgb(229, 229, 229); border-left: 1px solid rgb(229, 229, 229); border-image: initial; font-weight: bold; padding: 4px; border-bottom: none; }
.pb-cheers { font-weight: 100; }
.prezbox-container { position: relative; width: 270px; height: 200px; margin: 0px auto; }
.chance { font-weight: 400; display: block; margin-top: -8px; letter-spacing: 4px; font-size: 14px !important; padding-right: 7px !important; }
.cht1 { text-align: right; padding-right: 0px; }
.cht2 { text-align: left; }
.congrats_t { border-bottom: 1px solid rgb(221, 221, 221); font-size: 32px !important; font-weight: bold !important; color: rgb(0, 0, 0) !important; padding-bottom: 25px !important; margin-bottom: 10px !important; }
.congrats_p { margin-bottom: 0px !important; }
.product_won { display: block; margin-bottom: 10px; font-size: 43px !important; }
.box-text { border: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); display: inline-block !important; padding: 5px 15px !important; }
.box-text-line { border-bottom: 1px solid rgb(0, 0, 0); margin: -30px 40px 30px; }
.btn-claim-product { padding: 10px 40px; font-size: 25px; font-weight: bold; letter-spacing: 1px; }
#email-form { display: none; padding-top: 20px; }
.email-title { font-size: 22px; line-height: 24px; font-weight: bold; text-align: center; }
.email-sub { padding-bottom: 20px; }
#email-data, #zip-data, #phone-data, #state-data, #street-data, #city-data, #fname-data, #lname-data, #weight-data, #heightF-data, #heightI-data, .birth-container { box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px inset; border: 1px solid rgb(153, 153, 153); border-radius: 5px; display: block; width: 98%; font-size: 20px; color: rgb(51, 51, 51); padding: 8px 20px; margin: auto auto 15px; background-color: rgb(255, 255, 255); }
.birth-container { padding: 0px 10px; background-color: rgb(255, 255, 255); }
#month, #day, #year { margin: auto 0px 15px; }
.bdata { width: 100%; border: none; padding: 10px; background-color: transparent; }
.inline { width: 49% !important; }
#state-data, .city-container { display: none; }
.state { width: 100%; border: none; margin-left: -5px; }
#heightF-data, #heightI-data { display: inline-block; width: 48%; }
#heightF-data { margin-right: 2px; }
#heightI-data { margin-left: 2px; }
#email:focus, .skip-mail:focus, #btn-email:focus, #zip-data:focus, #phone-data:focus { outline: none; }
.skip-mail { color: rgb(222, 222, 222); background-color: transparent; margin: 5px auto auto; border: none; font-size: 12px !important; padding: 10px 20px !important; border-radius: 20px !important; box-shadow: rgb(0, 0, 0) 0px 3px !important; width: auto !important; }
#noEmail, #enterEmail { font-size: 16px !important; }
#email-data-btn, #zip-data-btn, #phone-data-btn { border: none; margin-left: 5px; width: 100%; font-size: 20px; height: 48px; margin-top: -5px; border-radius: 30px; display: block; }
.formbad { border-color: rgb(255, 0, 0) !important; box-shadow: rgb(255, 0, 0) 1px 1px 3px !important; }
#invalid { color: rgb(255, 0, 0); }
.fa-star, .fa-star-half-alt { color: rgb(255, 177, 0); }
#enterEmail { cursor: pointer; padding: 10px 20px; border-radius: 30px; margin: -20px auto auto; display: block; font-size: 20px; }
#email, #btn-email, .skip-mail { display: none; }
.result-wrap p { display: inline-block; color: rgb(213, 213, 213); margin-left: 20px; margin-bottom: 0px; text-align: left; transition: color 0.8s ease 0s; }
.result-wrap .krug1, .krug2, .krug3 { display: inline-block; border: 1px solid rgb(213, 213, 213); width: 25px; height: 25px; border-radius: 50%; position: relative; margin: auto; vertical-align: middle; }
.krug1 i, .krug2 i, .krug3 i { position: relative; left: 3px; top: 5px; color: rgb(213, 213, 213); font-size: 2px; transition: font-size 0.5s ease 0s; margin-top: -5px; }
#divfin1, #divfin2, #divfin3 { margin-bottom: 5px; }
.btn-light { border-color: rgb(51, 51, 51); border-radius: 30px; background: rgba(255, 255, 255, 0.6); }
.btn-light:hover { background-color: rgb(51, 51, 51); color: rgb(255, 255, 255); }
.first { overflow: hidden; }
.image.first img { max-width: 80%; max-height: 80%; margin: auto; }
.quantity { padding: 10px; border-top: 1px solid rgb(213, 213, 213); margin-top: 10px; color: rgb(255, 0, 0); font-size: 20px; font-weight: bold; }
.quantity span span:nth-child(1) { border: 1px solid rgb(255, 0, 0); padding: 1px 5px; margin-right: 5px; }
.redtext { width: 100%; color: rgb(226, 115, 18); padding: 10px; text-align: center; background: rgb(255, 245, 228); font-size: 14px; margin-top: 10px; border: 1px solid rgb(255, 255, 255); border-radius: 5px; }
#weightbad { display: none; }
.arrow { width: 30px; padding: 5px 0px; position: absolute; left: 48%; z-index: 20; background: rgb(255, 255, 255); border-radius: 50%; font-size: 15px; bottom: -12px; text-align: center; cursor: pointer; color: rgb(136, 136, 136); }
.cart-container { margin: auto; }
.cart-container .cart { padding: 0px; }
.rotik { background-size: contain; background-position-x: 80%; }
.rotikm { display: none; background-size: contain; background-position: right center; }
@media only screen and (max-height: 850px) {
  .footer { position: relative; left: 0px; top: 0px; transform: translate(0px, 0px); width: 100%; }
}
@media screen and (max-width: 850px) {
  .footer { position: relative; left: 0px; top: 0px; transform: translate(0px, 0px); width: 100%; }
}
@media (max-width: 767px) {
  .box-text-line { margin: -30px 10px 30px; }
}
@media only screen and (max-width: 736px) {
  #mainWrapper .card { width: 50px !important; }
  #mainWrapper { bottom: 60px !important; right: 30px !important; }
  .prezbox-container #mainWrapper .card { width: 80px !important; }
  .prezbox-container #mainWrapper { bottom: 40px !important; right: 28px !important; }
}
@media screen and (max-width: 705px) {
  .rotikm { display: block; }
  .rotik, .cart-valentine { display: none; }
}
@media screen and (max-width: 558px) {
  .chance { font-size: 10px !important; margin-top: -5px; }
}
@media only screen and (max-width: 500px) {
  .header-container { padding: 10px 20px; }
  .intro.text-center { padding-top: 0px !important; }
  .disclaimer_s { width: 100%; }
  .arrow { left: 45%; }
  .continue-btn { font-size: 18px; }
  .survey_button { font-size: 18px; }
  .continue-btn:hover, .survey_button:hover, .claim_btn:hover, .continue_s:hover { transform: scale(1); }
  #state-data, .city-container { width: 100% !important; }
  .comment p { margin: 0px; }
  .comment { margin-top: 20px; }
  .comment-page { padding: 10px !important; }
  .result-wrap p { width: 250px; margin: auto auto auto 10px; vertical-align: middle; }
  .result-wrap { text-align: center; }
  #p_modal3 img { max-width: 200px; }
  .product_won { line-height: 30px; margin-bottom: 15px; font-size: 33px !important; }
  .congrats_t { font-size: 28px !important; }
  #policy-content { height: 600px !important; font-size: 12px; }
  #policy-wrap { width: 90% !important; }
  .intro-product-name { font-size: 24px; margin-bottom: 10px; }
  .desktop-product { margin-top: 0px !important; }
  .mobile-product { display: inline-block; max-width: 250px; }
  .desktop-only { display: none; }
  .intro-title, .intro-title.uk { font-size: 32px; }
  .intro-text { font-size: 13px; padding-bottom: 0px; }
  .header-text { font-size: 13px; }
  .time-text, .disclaimer.uk, .disclaimer_s { font-size: 12px; }
  .time-text.uk { font-size: 11px; }
}
@media (max-width: 418px) {
  .boxes .try { width: 48%; }
  .boxes .try:nth-child(-n+5) { display: none; }
  .box_prez { width: 25px !important; margin-top: 70px; }
}
@media only screen and (max-width: 414px) {
  #mainWrapper { bottom: 65px !important; right: 35px !important; }
  .mobile-product { border: 1px solid; border-radius: 16px; margin: auto; }
}
@media only screen and (max-width: 375px) {
  #mainWrapper { right: 30px !important; }
  .main-content { padding-top: 25px !important; }
  .intro-product-name { font-size: 38px; }
  .intro-text { font-size: 14px; }
}
@media screen and (max-width: 347px) {
  .box_prez { width: 15px !important; margin-top: 60px; }
}
@media only screen and (max-width: 320px) {
  .result-wrap p { width: 170px; }
  #mainWrapper .card { width: 40px !important; }
  #mainWrapper { right: 16px !important; bottom: 55px !important; }
  .mobile-product { max-width: 50%; }
  .continue-btn, .survey_button, .claim_btn { font-size: 18px; }
  .intro-title { font-size: 26px; }
  .header-text { font-size: 8px; }
  .intro-text { font-size: 10px; }
  .main-content { padding-top: 15px !important; }
  .intro-text { font-size: 10px; }
  .intro-product-name { font-size: 25px; }
  .header-text { font-size: 10px; }
  .cta { padding: 10px; }
  .time-text { font-size: 10px; }
  .continue-btn { font-size: 16px; }
  .intro-title { font-size: 27px; }
  .comment .desc { margin: 0px; }
  .chance { font-size: 12px !important; margin-top: -5px; }
}
@media (max-width: 270px) {
  .boxes .try { width: 100%; }
  .boxes .try:nth-child(-n+6) { display: none; }
  .box_prez { width: 25px !important; margin-top: 58px; }
}
@media only screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) {
  .image-wrapper { height: auto; }
  #state-data { padding: 8px 20px; }
  .state { appearance: none; }
}
box-min-css .boxes, .boxes cbox, .boxes .try img { width: 100%; }
.instructions { padding: 10px; background-color: rgb(225, 30, 53); border-radius: 4px; color: rgb(255, 255, 255); margin-top: 20px; }
.boxes { margin: 10px auto; max-width: 800px; }
.box-o-t { position: absolute; top: -34%; }
.boxes .discover .box-o-b { z-index: 1; position: relative; }
.boxes .iphone { width: 76%; height: auto; position: absolute; z-index: 0; top: -20%; left: 12%; transition-duration: 0.7s; }
.boxes .discover > .iphone { top: -60%; }
.boxes > .try { position: relative; display: inline-block; width: 23.8%; transition-duration: 0.2s; cursor: pointer; }
@media (max-width: 767px) {
  .boxes > .try { width: 32.5%; }
  .boxes > .try:nth-child(-n+4) { display: none; }
}
@media (max-width: 479px) {
  .boxes > .try { width: 32%; }
}
@media (max-width: 319px) {
  .boxes > .try { width: 48%; }
  .boxes > .try:nth-child(-n+5) { display: none; }
}
.div_img_prez { width: 100%; text-align: center; position: absolute; top: 0px; left: 0px; z-index: 5; display: none; align-items: center; justify-content: center; }
.img_prez { display: none; width: 70%; animation-duration: 1s; animation-fill-mode: both; animation-name: rotateIn; margin: 0px auto; }
@-webkit-keyframes rotateIn { 
  0% { transform-origin: center center; transform: rotate3d(0, 0, 1, -200deg); opacity: 0; }
  100% { transform-origin: center center; transform: none; opacity: 1; }
}
@keyframes rotateIn { 
  0% { transform-origin: center center; transform: rotate3d(0, 0, 1, -200deg); opacity: 0; }
  100% { transform-origin: center center; transform: none; opacity: 1; }
}
@keyframes verh_superior { 
  0% { transform-origin: center center; transform: rotate3d(0, 0, 1, -200deg); opacity: 0; }
  100% { transform-origin: center center; transform: none; opacity: 1; }
}
.boxes { background-size: cover; border-radius: 20px; position: relative; text-align: center; }
.try { position: relative; margin: 20px 0px; }
.try > div { position: absolute; }
.try .podar { position: relative; }
.podar_sred { z-index: 1; }
.podar_verh { z-index: 3; }
.podar { z-index: 2; }
.podar_prez { z-index: 1; }
.boxes .try.shtuka > .podar_verh { animation: 2s ease 0s 1 normal forwards running verh_superior; }
.boxes .try.krut > .podar_prez { animation: 4s ease 0s infinite alternate none running verh_superior; }
@keyframes verh_superior { 
  0% { top: 0px; }
  100% { top: -40px; }
}
@media (max-width: 500px) {
  @keyframes verh_superior { 
  0% { top: 0px; }
  100% { top: -30px; }
}
}
mybootstrap .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
*, ::after, ::before { box-sizing: border-box; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }
.text-center { text-align: center !important; }
.pt-3, .py-3 { padding-top: 1rem !important; }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; }
h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0.5rem; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
img { vertical-align: middle; border-style: none; }
.fas.fa-star { background-image: url("star.svg"); }
.far.fa-star { background-image: url("star-regular.svg"); }
.fas.fa-star, .far.fa-star { height: 14px; width: 14px; display: inline-block; background-repeat: no-repeat; }
.cart.cart-bg-color.fas.fa-shopping-cart { background-image: url("cart-shopping.svg"); width: 20px; height: 20px; background-repeat: no-repeat; }
.fas.fa-check.show { background-image: url(""); background-repeat: no-repeat; display: inline-block; height: 20px; width: 20px; }
.justify-content-center { justify-content: center !important; }
.d-flex { display: flex !important; }
.m-3 { margin: 1rem !important; }
.spinner-border { display: inline-block; width: 2rem; height: 2rem; vertical-align: text-bottom; border-width: 0.25em; border-style: solid; border-color: currentcolor transparent currentcolor currentcolor; border-image: initial; border-radius: 50%; animation: 0.75s linear 0s infinite normal none running spinner-border; }
.sr-only { border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; }
.smodal-open .smodal { overflow: hidden auto; }
.fade:not(.show) { opacity: 0; }
.p_modal { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.smodal { position: fixed; top: 0px; left: 0px; z-index: 1050; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0px; background: transparent; }
.fade { transition: opacity 0.15s linear 0s; }
.smodal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none; }
.smodal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; outline: 0px; }
.smodal-body { position: relative; flex: 1 1 auto; padding: 1rem; }
.btn:not(:disabled):not(.disabled) { cursor: pointer; }
.btn-group-lg > .btn, .btn-lg { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; color: rgb(255, 255, 255); border-radius: 0.3rem; }
.marka { display: none; }
.smodal-backdrop.show { opacity: 0.5 !important; }
.smodal-backdrop.fade { opacity: 0; }
.fade { transition: opacity 0.15s linear 0s; }
.smodal-backdrop { position: fixed; top: 0px; left: 0px; z-index: 1040; width: 100vw; height: 100vh; background-color: rgb(0, 0, 0); }
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
.smodal-open { overflow: hidden; }
.main-content { box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 10px; margin-bottom: 20px; position: relative; min-height: 300px; background: rgb(255, 255, 255); border-radius: 20px !important; padding: 20px !important; }
@keyframes spinner-border { 
  100% { transform: rotate(360deg); }
}
.spinner-border { display: inline-block; width: 2rem; height: 2rem; vertical-align: text-bottom; border-width: 0.25em; border-style: solid; border-color: currentcolor transparent currentcolor currentcolor; border-image: initial; border-radius: 50%; animation: 0.75s linear 0s infinite normal none running spinner-border; }
.spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.2em; }
@-webkit-keyframes spinner-grow { 
  0% { transform: scale(0); }
  50% { opacity: 1; transform: none; }
}
@media only screen and (min-width: 992px) {
  .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
}
@media only screen and (max-width: 375px) {
  .main-content { padding-top: 25px !important; }
}
/* Фото товара */
.product-image {
  margin-top: 10px;
  display: flex;
  justify-content: left;
}

.product-image img {
  width: 100%;
  max-width: 200px; /* Оптимальный размер для ПК */
  border-radius: 5px;
}

/* Адаптация для мобильных устройств */
@media (max-width: 500px) {
  .product-image img {
      max-width: 150px; /* Уменьшенный размер для мобильных */
  }
}


.yeppon-top-header {
  width: 100%;
  text-align: center;
  padding: 20px 0;
}

.yeppon-logo-container {
  display: inline-block;
}

.yeppon-logo-image {
  max-width: 200px;
  height: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .yeppon-top-header {
      padding: 15px 0;
  }
}