@import url("https://use.typekit.net/lzl4age.css");

html {min-width: 320px;}

 body {position: relative; margin: 0; padding: 0px 0 0 0; height: auto !important; min-height: 100%; min-width:320px;}
 html > body {padding: 0;}
 img {padding: 0; margin: 0; border: 0;}
 .cleaner {clear: both;}
 a:hover {text-decoration: none;}
 input, textarea {scrollbar-width: none;}
input::-moz-placeholder {opacity: 1; color: #A6A6A6;}
input::-webkit-input-placeholder {opacity: 1; color: #A6A6A6;}
input.error::-moz-placeholder {opacity: 1; color: color: #A6A6A6;}
input.error::-webkit-input-placeholder {opacity: 1; color: #A6A6A6;}
input:focus::-moz-placeholder {opacity: 0!important;}
input:focus::-webkit-input-placeholder {opacity: 0!important;}
textarea::-moz-placeholder {opacity: 0.4;}
textarea::-webkit-input-placeholder {opacity: 0.4;}
textarea:focus::-moz-placeholder {opacity: 0;}
textarea:focus::-webkit-input-placeholder {opacity: 0;}
a {color: #ED8AA2;}
a:hover {color: #BA476C;}
* {outline: none; box-sizing: border-box; -webkit-appearance: none!important; max-height: 9999999px;}
.all {width:100%; max-width: 1240px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; position: relative;}
form {padding: 0; margin: 0; border: 0;}
form fieldset {padding: 0; margin: 0; border: 0;}
button, a {transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
p {padding: 0;margin: 0;}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
 /* display: none; <- Crashes Chrome on hover */
 -webkit-appearance: none;
 margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}


body.pop-open:before {content: ''; display: block; top: 0; left: 0; width: 100%; bottom: 0; position: fixed; opacity: 0.75; background: url(/img/quiz-left-bg.svg) top left/60% auto no-repeat, url(/img/quiz-right-bg.svg) bottom right/60% auto no-repeat; background-color: #C652E2; z-index: 100;}


.quiz-container {padding: 20px; background: url(/img/quiz-left-bg.svg) top left/60% auto no-repeat, url(/img/quiz-right-bg.svg) bottom right/60% auto no-repeat; background-color: #C652E2; min-height: 100dvh;}
.corn-logos {display: flex; align-items: center; position: absolute; top: 20px; left: 20px;}
.corn-logos img {display: block; max-height: 72px;}
.corn-logos a + a {margin-left: 20px;}

.rotate-window {opacity: 0; transition: opacity: 0.3s ease; background: url(/img/quiz-left-bg.svg) top left/60% auto no-repeat, url(/img/quiz-right-bg.svg) bottom right/60% auto no-repeat; background-color: #C652E2; font-size: 24px; font-weight: bold; color: #fff; position: fixed; top: 0; left: -99999999px; bottom: 0; width: 100%; z-index: 50; display: flex; align-items: center; justify-content: center;}
.rotate-window.visible {opacity: 1; left: 0;}
.rotate-window .txt {max-width: 300px; text-align: center;}
.rotate-window img {display: table; margin: 0 auto 54px;}

.quiz-close-ic {transition: all 0.3s ease; position: absolute; z-index: 70; cursor: pointer; top: 1.5vw; right: 1.5vw; width: 3.5vw; height: 3.5vw; border-radius: 50%; background: #343D58 url(/img/quiz-close-ic.svg) center center/1.6vw auto no-repeat;}
.quiz-close-ic:hover {background-color: #565E75;}

.round-step .quiz-close-ic, .repeat-step .quiz-close-ic {top: -10px; right: -10px;}

.notif-window .wrap {max-width: 60%; max-height: 60%;}
.notif-txt {text-align: center; font-size: 2.85vw; font-weight: bold; text-transform: uppercase; color: #343D58; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; padding: 0 40px;}


.go-btn, .next-question, .quiz-go-btn, .repeat-txt {user-select: none; -webkit-user-select: none; -moz-user-select: none;-ms-user-select: none;}

.video-wrap {position: relative; overflow: hidden; border-radius: 20%; max-width: 100%; max-height: 100%; width: 100%; height: 100%;}
.back-video-wrap.hidden {display: none;}

.sound-toggle-ic {transition: all 0.3s ease; position: absolute; z-index: 70; cursor: pointer; left: -1vw; bottom: -1vw; width: 3.5vw; height: 3.5vw; border-radius: 50%; background: #343D58 url(/img/sound-ic.svg) center center/1.6vw auto no-repeat;}
.sound-toggle-ic:hover {background-color: #565E75;}
.sound-toggle-ic.muted:after {content: ''; display: block; position: absolute; top: 0; left: 50%; width: 1px; bottom: 0; background: #fff; transform: rotate(45deg); }
.sound-toggle-ic.hidden {display: none;}

.quiz-container .exit-window {transition: opacity 0.3s ease; max-width: 466px; font-size: 15px; line-height: 120%; color: #343D58; position: fixed; top: 50%; left: -9999999px; opacity: 0; transform: translate(-50%,-50%); border-radius: 20px; padding: 30px; background: #fff; z-index: 101;}
.quiz-container .exit-window.visible {opacity: 1; left: 50%;}
.quiz-container .exit-window .exit-title {font-size: 36px; line-height: 100%; margin: 0 0 30px; font-weight: bold;}
.quiz-container .exit-window .exit-txt {margin: 0 0 60px;}
.quiz-container .exit-window .btns {display: flex; justify-content: space-between;}
.quiz-container .exit-window .btns a {padding: 0 20px; white-space: nowrap; border-radius: 27px; line-height: 49px; display: table; border: 1px solid #343D58; text-decoration: none; width: 65%; text-align: center; font-size: 15px; color: #343D58; font-weight: bold; text-transform: uppercase;}
.quiz-container .exit-window .btns a:first-child:hover {color: #fff; background: #343D58;}
.quiz-container .exit-window .btns a + a {width: 35%; margin-left: 17px; color: #fff; background: #343D58;}
.quiz-container .exit-window .btns a + a:hover {background-color: #565E75; border-color: #565E75;}

.quiz-container .quiz-wrap {transition: opacity 0.8s ease;}
.quiz-container .quiz-wrap.hidden {width: 100%; position: absolute!important; left: -9999999px!important; top: -999999px!important; opacity: 0;}
.quiz-container .quiz-wrap.opacity {opacity: 0; transition: opacity 0.8s ease;}
.quiz-container .quiz-wrap.first-step .wrap {padding: 0 20px; width: 100%; font-size: 15px; color: #F8F9FB; line-height: 120%; position: fixed; top: 50%; left: 50%; transform: translate(-50%,calc(-50% + 30px)); text-align: center; max-width: 570px; color: #fff;}
.quiz-container .quiz-wrap.first-step .step-title {margin: 0 0 50px; line-height: 100%; font-size: 36px; font-weight: bold; text-transform: uppercase;}
.quiz-container .quiz-wrap.first-step .name-form {flex-wrap: wrap; width: 100%; margin: 0 0 50px; display: flex; align-items: center; justify-content: space-between;}
.quiz-container .quiz-wrap.first-step .name-form .inp-text {width: calc(50% - 10px); font-size: 15px; font-weight: bold; background: none; text-align: center; border: 1px solid #fff; height: 50px; border-radius: 25px; font-family: inherit; text-transform: uppercase;}
.quiz-container .quiz-wrap.first-step .name-form .inp-text.error {background: #FF8F0B; color: #343D58; border-width: 5px;}
.quiz-container .quiz-wrap.first-step .name-form .inp-text:not(:focus)::-moz-placeholder {opacity: 0.35; color: #F8F9FB;}
.quiz-container .quiz-wrap.first-step .name-form .inp-text:not(:focus)::-webkit-input-placeholder {opacity: 0.35; color: #F8F9FB;}
.quiz-container .quiz-wrap.first-step .name-form .quiz-go-btn {width: 100%; border-radius: 25px; line-height: 50px; display: table; color: #343D58; background: #fff; font-size: 15px; font-weight: bold; text-decoration: none; text-transform: uppercase; margin: 40px 0 0 0;}
.quiz-container .quiz-wrap.first-step .name-form .quiz-go-btn.disabled {cursor: default; opacity: 0.2;}
.quiz-container .quiz-wrap.first-step .step-txt {max-width: 410px; margin: 0 auto;}

.quiz-container .quiz-wrap.video-intro {position: fixed; top: 20px; left: 20px; bottom: 20px; width: calc(100% - 40px); border-radius: 20px; background: #fff;}
.quiz-container .quiz-wrap.video-intro video {border-radius: 20px; clip-path: inset(1px 1px); top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; width: auto; height: 100%; min-width: 100%; min-height: 100%;}
.quiz-container .quiz-wrap.video-intro .fly-pattern .left-pattern {position: absolute; left: 0; width: 40%; top: 0; bottom: 0;}
.quiz-container .quiz-wrap.video-intro .fly-pattern .right-pattern {position: absolute; right: 0; width: 40%; top: 0; bottom: 0;}
.quiz-container .quiz-wrap.video-intro .fly-pattern img {width: 1000px;}

.quiz-wrap.video-intro .quiz-close-ic {top: 10px; right: 10px;}
.quiz-wrap.video-intro .sound-toggle-ic {bottom: 10px; left: 10px;}

.fly-pattern.var1 .pattern01 {position: absolute; left: 0; top: -10px; width: 50%; height: 60%; display: flex; align-items: center; justify-content: center;}
.fly-pattern.var1 .pattern01 img {animation: pattern1-01 10s linear infinite; max-width: 95%; max-height: 95%;}
.fly-pattern.var1 .pattern02 {position: absolute; left: 50%; top: 0px; width: 50%; height: 65%; display: flex; align-items: center; justify-content: flex-start;}
.fly-pattern.var1 .pattern02 img {animation: pattern1-02 8s linear infinite; max-width: 55%; max-height: 55%;}
.fly-pattern.var1 .pattern03 {position: absolute; left: 50%; top: 65%; width: calc(55%); height: 35%; display: flex; align-items: center; justify-content: flex-start;}
.fly-pattern.var1 .pattern03 img {animation: pattern1-03 12s linear infinite;max-width: 70%; max-height: 70%;}
.fly-pattern.var1 .pattern04 {position: absolute; left: 0; top: 60%; width: 45%; height: 40%; display: flex; align-items: center; justify-content: center;}
.fly-pattern.var1 .pattern04 span {animation: pattern1-01 7s linear infinite; display: block; width: 35%; border-radius: 50%; background: #E1EFFF;}
.fly-pattern.var1 .pattern04 span:after {content: ''; display: block; padding-top: 100%;}
.fly-pattern.var1 .pattern04 span.small {animation: pattern1-02 10s linear infinite; position: absolute; top: -10%; right: -10%; display: block; width: 20%; border-radius: 50%; background: none; border: 1px solid #4C86E2;}
.fly-pattern.var1 .pattern05 {position: absolute; right: 0; top: -10px; width: 35%; height: 60%; display: flex; align-items: center; justify-content: center;}
.fly-pattern.var1 .pattern05 img {animation: pattern1-03 12s linear infinite; max-width: 45%; max-height: 45%;}
.fly-pattern.var1 .pattern06 {position: absolute; right: 0; bottom: -10px; width: 75%; height: 60%; display: flex; align-items: center; justify-content: center;}
.fly-pattern.var1 .pattern06 img {animation: pattern1-04 12s linear infinite; max-width: 85%; max-height: 85%;}
.fly-pattern.var1 .pattern07 {position: absolute; right: 40%; top: -10px; width: 65%; height: 40%; display: flex; align-items: center; justify-content: center;}
.fly-pattern.var1 .pattern07 img {animation: pattern1-01 9s linear infinite; max-width: 65%; max-height: 65%;}
.fly-pattern.var1 .pattern08 {position: absolute; right: 0; top: 0%; width: 35%; height: 100%; display: flex; align-items: center; justify-content: center;}
.fly-pattern.var1 .pattern08 span {animation: pattern1-01 7s linear infinite; display: block; width: 35%; border-radius: 50%; background: #E1EFFF;}
.fly-pattern.var1 .pattern08 span:after {content: ''; display: block; padding-top: 100%;}
.fly-pattern.var1 .pattern08 span.small {animation: pattern1-02 10s linear infinite; position: absolute; top: 20%; right: 110%; display: block; width: 15%; border-radius: 50%; background: none; border: 1px solid #4C86E2;}


.fly-pattern.var2 .pattern01 {position: absolute; left: 10%; top: 5%; width: 30%; height: 30%; display: flex; align-items: center; justify-content: flex-start;}
.fly-pattern.var2 .pattern01 img {animation: pattern1-01 7s linear infinite; max-width: 45%; max-height: 45%;}
.fly-pattern.var2 .pattern02 {position: absolute; left: 30%; top: 0%; width: 35%; height: 30%; display: flex; align-items: center; justify-content: center;}
.fly-pattern.var2 .pattern02 img {animation: pattern1-02 8s linear infinite; max-width: 65%; max-height: 65%;}
.fly-pattern.var2 .pattern03 {position: absolute; left: 10%; top: 40%; width: 35%; height: 30%; display: flex; align-items: flex-start; justify-content: center;}
.fly-pattern.var2 .pattern03 span {animation: pattern1-03 6s linear infinite; display: block; width: 25%; border-radius: 50%; background: #E1EFFF;}
.fly-pattern.var2 .pattern03 span:after {content: ''; display: block; padding-top: 100%;}
.fly-pattern.var2 .pattern03 span.small {animation: pattern1-04 10s linear infinite; position: absolute; bottom: 10%; left: 20%; display: block; width: 10%; border-radius: 50%; background: none; border: 1px solid #4C86E2;}
.fly-pattern.var2 .pattern04 {transform: scale(-1,1); position: absolute; left: 0%; top: 45%; width: 85%; height: 55%; display: flex; align-items: center; justify-content: center;}
.fly-pattern.var2 .pattern04 img {animation: pattern1-02 12s linear infinite; max-width: 85%; max-height: 80%;}
.fly-pattern.var2 .pattern05 {position: absolute; right: -5%; top: 0%; width: 50%; height: 40%; display: flex; align-items: center; justify-content: center;}
.fly-pattern.var2 .pattern05 img {animation: pattern1-01 11s linear infinite; max-width: 75%; max-height: 75%;}
.fly-pattern.var2 .pattern06 {position: absolute; right: 0%; top: 30%; width: 50%; height: 50%; display: flex; align-items: center; justify-content: center;}
.fly-pattern.var2 .pattern06 img {animation: pattern1-03 12s linear infinite; max-width: 55%; max-height: 55%;}
.fly-pattern.var2 .pattern07 {position: absolute; right: 30%; top: 60%; width: 50%; height: 40%; display: flex; align-items: center; justify-content: center;}
.fly-pattern.var2 .pattern07 img {animation: pattern1-04 8s linear infinite; max-width: 50%; max-height: 50%;}
.fly-pattern.var2 .pattern08 {position: absolute; right: 10%; top: 20%; width: 90%; height: 80%; display: flex; align-items: flex-start; justify-content: center;}
.fly-pattern.var2 .pattern08 span {animation: pattern1-01 7s linear infinite; display: block; width: 10%; border-radius: 50%; background: #E1EFFF;}
.fly-pattern.var2 .pattern08 span:after {content: ''; display: block; padding-top: 100%;}
.fly-pattern.var2 .pattern08 span.small {animation: pattern1-02 10s linear infinite; position: absolute; bottom: 10%; right: 5%; display: block; width: 6%; border-radius: 50%; background: none; border: 1px solid #4C86E2;}


.fly-pattern.var3 .pattern01 {position: absolute; left: 30%; top: 5%; width: 60%; height: 30%; display: flex; align-items: center; justify-content: flex-start;}
.fly-pattern.var3 .pattern01 img {animation: pattern1-02 7s linear infinite; max-width: 50%; max-height: 50%;}
.fly-pattern.var3 .pattern02 {position: absolute; left: 20%; top: 50%; width: 35%; height: 30%; display: flex; align-items: flex-start; justify-content: center;}
.fly-pattern.var3 .pattern02 span {animation: pattern1-03 6s linear infinite; display: block; width: 25%; border-radius: 50%; background: #E1EFFF;}
.fly-pattern.var3 .pattern02 span:after {content: ''; display: block; padding-top: 100%;}
.fly-pattern.var3 .pattern02 span.small {animation: pattern1-1 6s linear infinite; position: absolute; bottom: 0%; left: 80%; display: block; width: 10%; border-radius: 50%; background: none; border: 1px solid #4C86E2;}
.fly-pattern.var3 .pattern03 {position: absolute; right: 10%; top: 20%; width: 50%; height: 50%; display: flex; align-items: center; justify-content: center;}
.fly-pattern.var3 .pattern03 img {animation: pattern1-03 12s linear infinite; max-width: 55%; max-height: 55%;}
.fly-pattern.var3 .pattern04 {position: absolute; right: 40%; top: 60%; width: 50%; height: 40%; display: flex; align-items: center; justify-content: center;}
.fly-pattern.var3 .pattern04 img {animation: pattern1-04 8s linear infinite; max-width: 50%; max-height: 50%;}
.fly-pattern.var3 .pattern05 {position: absolute; right: 10%; top: 10%; width: 90%; height: 80%; display: flex; align-items: flex-start; justify-content: center;}
.fly-pattern.var3 .pattern05 span {animation: pattern1-01 7s linear infinite; display: block; width: 13%; border-radius: 50%; background: #E1EFFF;}
.fly-pattern.var3 .pattern05 span:after {content: ''; display: block; padding-top: 100%;}
.fly-pattern.var3 .pattern05 span.small {animation: pattern1-02 10s linear infinite; position: absolute; bottom: 10%; left: 85%; display: block; width: 10%; border-radius: 50%; background: none; border: 1px solid #4C86E2;}




@keyframes pattern1-01 {
	0% { transform: translate(0,0);}
	20% { transform: translate(-10%,-8%);}
	35% { transform: translate(-10%,-15%);}
	37% { transform: translate(-10%,-15%);}
	55% { transform: translate(10%,-10%);}
	75% { transform: translate(15%,0%);}
	90% { transform: translate(7%,5%);}
  100% { transform: translate(0,0);}
}

@keyframes pattern1-02 {
	0% { transform: translate(0,0);}
	20% { transform: translate(10%,8%);}
	35% { transform: translate(10%,15%);}
	37% { transform: translate(10%,15%);}
	55% { transform: translate(0%,10%);}
	75% { transform: translate(14%,3%);}
	90% { transform: translate(7%,-5%);}
  100% { transform: translate(0,0);}
}

@keyframes pattern1-03 {
	0% { transform: translate(0,0);}
	20% { transform: translate(-12%,4%);}
	35% { transform: translate(-8%,11%);}
	45% { transform: translate(-10%,15%);}
	60% { transform: translate(-10%,-5%);}
	75% { transform: translate(-14%,8%);}
	90% { transform: translate(-7%,5%);}
  100% { transform: translate(0,0);}
}

@keyframes pattern1-04 {
	0% { transform: translate(0,0);}
	20% { transform: translate(12%,-4%);}
	35% { transform: translate(8%,-11%);}
	45% { transform: translate(0%,0%);}
	55% { transform: translate(-4%,-5%);}
	65% { transform: translate(-12%,0%);}
	75% { transform: translate(-14%,8%);}
	90% { transform: translate(-7%,5%);}
  100% { transform: translate(0,0);}
}


.quiz-wrap {max-height: 90dvh;}
.quiz-container .round-step {font-size: 1.6vw; width: calc(100vw - 4vw); justify-content: space-between; display: flex; align-items: stretch; position: fixed; top: 50%; transform: translate(-50%,-50%); left: 50%;}
.quiz-container .round-step .leftcol {max-height: 90dvh; height: 43vw; border-radius: 20px; background: center center/cover; width: 32vw; position: relative; display: flex; align-items: stretch;}
.quiz-container .round-step .leftcol.video-ended video {opacity: 0;}
.quiz-container .round-step .leftcol.video-ended {background: url(/img/cover.png) center center/cover;}
.quiz-container .round-step .leftcol.video-question-col {max-height: 35vw;} 
.quiz-container .round-step .leftcol.big-width {width: 62vw; margin-bottom: -3px;}
.quiz-container .round-step .leftcol.big-width .video:before {padding-top: 68%;}
.quiz-container .round-step .leftcol .video {width: 100%; max-height: 100%; border-radius: 20px; overflow: hidden; position: relative; bottom: 0;}
.quiz-container .round-step .leftcol .video:before {content: ''; display: block; padding-top: 137%; transition: all 0.3s ease;}
.quiz-container .round-step .leftcol .video.compact:before {padding-top: 100%;}
.quiz-container .round-step .leftcol .video.compact video {width: 300%; height: auto; bottom: auto; top: 0;}
.quiz-container .round-step .leftcol .video:not(.compact) + .round-timer.hidden + .play-pause-video {left: 7dvh;}
.quiz-container .round-step .leftcol video {border-radius: 20px; clip-path: inset(1px 1px); height: 100%; top: 0; left: 50%; transform: translateX(-50%); position: absolute; width: auto; height: 100%; min-width: 100%; min-height: 100%;}
.quiz-container .round-step .round-timer {z-index: 5; transition: all 0.3s ease; width: 10vw; height: 10vw; position: absolute; bottom: 0; left: 0; border-radius: 50%; background: #343D58;}
.quiz-container .round-step .round-timer.hidden {visibility: hidden; opacity: 0;}
.quiz-container .round-step .round-timer:after {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; bottom: 0; background: url(/img/timer-round-bg.svg) center center/114% auto no-repeat;}
.quiz-container .round-step .round-timer .line {position: absolute; top: 5%; left: 5%; bottom: 5%; width: calc(100% - 10%); border-radius: 50%;}
.quiz-container .round-step .round-timer .sec {position: absolute; display: block; top: 0; line-height: 10vw; width: 100%; text-align: center; color: #fff; font-size: 3vw; font-weight: bold;}
.quiz-container .round-step .rightcol {color: #fff; line-height: 130%; display: flex; flex-direction: column; padding: 5vw 0; width: 55vw; position: relative;}
.quiz-container .round-step .rightcol .round-info {margin: 0 0 1.5vw;}
.quiz-container .round-step .rightcol .round-info span {margin: 0 15px;}
.quiz-container .round-step .rightcol .round-title {font-size: 3.9vw; line-height: 120%; font-weight: bold; text-align: left;}
.quiz-container .round-step .rightcol .bottom-bar {margin-top: auto;}
.quiz-container .round-step .next-question {color: #fff; font-size: 1.75vw; line-height: 110%; font-weight: bold; text-transform: uppercase; transition: all 0.3s ease; padding: 1.5vw 3vw 1.5vw 8vw; display: flex; align-items: center; background: #343d58 url(/img/next-question-arr.svg) left 15% center/ auto 50% no-repeat; border-radius: 999px 0 0 999px; position: absolute; top: 50%; right: -19vw; transition: right 0.3s ease; margin-top: -3.5vw;} 
.quiz-container .round-step .next-question.hidden {visibility: hidden; opacity: 0;}
.quiz-container .round-step .next-question span {transition: opacity 0.3s ease; opacity: 0;}
.quiz-container .round-step .next-question:hover, .quiz-container .round-step .rightcol .bottom-bar .next-question.open {right: -2.2vw;}
.quiz-container .round-step .next-question:hover span, .quiz-container .round-step .rightcol .bottom-bar .next-question.open span {opacity: 1;}
.quiz-container .round-step .repeat-cols .next-question:not(:hover) {right: -14vw; background-position: left 15% center;}

.quiz-container .round-step .rightcol .go-btn {color: #fff; line-height: 5.6vw; display: table; text-transform: uppercase; font-weight: bold; text-decoration: none; border-radius: 50px; font-size: 2.4vw; padding: 0 4.5vw; border: 1px solid #fff; display: table; margin: 2.2vw 0 0 0;}
.quiz-container .round-step .rightcol .go-btn:hover,
.quiz-container .round-step .rightcol .go-btn.selected {background: #fff; color: #343D58;}

.quiz-container .round-step .rightcol .top-bar * {user-select: none; -webkit-user-select: none; -moz-user-select: none;-ms-user-select: none; }


.quiz-container .round-step .leftcol.big-width + .rightcol {width: 32vw;}
.quiz-container .round-step .leftcol.big-width + .rightcol .round-title {font-size: 2.vw;}

.quiz-container .round-step .leftcol.big-width + .rightcol.extrasmallfont .round-title,
.quiz-container .round-step .rightcol.question-wrap.extrasmallfont .round-title {font-size: 1.5vw; width: calc(100% - 2.5vw);}

.quiz-container .round-step .leftcol.big-width + .rightcol.smallfont .round-title,
.quiz-container .round-step .rightcol.question-wrap.smallfont .round-title {font-size: 1.85vw;}


.quiz-container .round-step .leftcol.big-width + .rightcol.mediumfont .round-title,
.quiz-container .round-step .rightcol.question-wrap.mediumfont .round-title {font-size: 2.2vw;}

.quiz-container .round-step .rightcol.question-wrap {padding: 0; width: 61vw;}
.quiz-container .round-step .rightcol.question-wrap .round-title {text-transform: none;}
.quiz-container .round-step .rightcol.question-wrap .round-title {padding-right: 3vw; font-size: 2.1vw;}
.quiz-container .round-step .rightcol .btns {display: flex; flex-wrap: wrap; justify-content: space-between; }
.quiz-container .round-step .rightcol .btns .go-btn {display: flex; align-items: center; justify-content: center; width: calc(50% - 0.8vw); line-height: 120%; padding: 1.5vw 4vw; text-align: center; font-size: 1.75vw;}
.quiz-container .round-step .rightcol .btns.finished .go-btn:not(.selected):hover {cursor: default; color: #fff; background: none;}
.quiz-container .round-step .rightcol .btns.finished .go-btn.selected {cursor: default;}
.quiz-container .round-step .rightcol .btns.finished .go-btn.pre-selected {cursor: default; padding: 1.1vw 4vw; border-width: 0.4vw; border-color: #F8F9FB;}
/* .quiz-container .round-step .rightcol .btns.finished .go-btn.correct {background: #F8F9FB; color: #343D58;}
.quiz-container .round-step .rightcol .btns.finished .go-btn.wrong {background: #FF8F0B; color: #343D58;} */
.quiz-container .round-step .leftcol .video.compact {transition: all 0.3s ease; background: #fff; width: 12vw; max-height: 12vw; border-radius: 50%; overflow: hidden; bottom: 0; left: 0; position: absolute;}
.quiz-container .round-step .leftcol .video.compact.hidden {visibility: hidden; opacity: 0;}
.quiz-container .round-step .play-pause-video {transition: all 0.3s ease; position: absolute; z-index: 70; cursor: pointer; bottom: -1vw; left: 9.7vw; width: 3.5vw; height: 3.5vw; border-radius: 50%; background: #343D58 url(/img/quiz-video-pause-ic.svg) center center/1.6vw auto no-repeat;}
.quiz-container .round-step .play-pause-video.paused {background-image: url(/img/quiz-video-play-ic.svg);}
.quiz-container .round-step .play-pause-video:hover {background-color: #565E75;}
.quiz-container .round-step .play-pause-video.hidden {display: none;}

.quiz-container .vertical-timer {width: 100%; max-height: 100dvh; overflow: hidden; color: #fff; position: fixed; top: 0; bottom: 0; left: 0; text-align: center; font-size: 150px; line-height: 170px; font-weight: bold;}
.quiz-container .vertical-timer:before {content: ''; display: block; position: absolute; top: 0; left: calc(50% - 250px); width: 100px; bottom: 0; background: url(/img/vertical-timer-arrow.svg) center center/30px auto no-repeat;}
.quiz-container .vertical-timer:after {transform: scale(-1,1); content: ''; display: block; position: absolute; top: 0; right: calc(50% - 250px); width: 100px; bottom: 0; background: url(/img/vertical-timer-arrow.svg) center center/30px auto no-repeat;}
.quiz-container .vertical-timer .timer-wrap {transition: all 0.3s ease; position: fixed; top: calc(50% - 85px); left: 50%; transform: translateX(-50%);}
.quiz-container .vertical-timer .timer-wrap .num {opacity: 0.4; transition: all 0.3s ease;}
.quiz-container .vertical-timer .timer-wrap .num.active {opacity: 1;}
.quiz-container .vertical-timer .timer-wrap.finished .num:last-child {opacity: 1;}

.quiz-container .repeat-rightcol .vertical-timer {overflow: visible; position: absolute; font-size: 80px; line-height: 110px;}
.quiz-container .repeat-rightcol .vertical-timer .timer-wrap {position: absolute; top: calc(50% - 55px);}


.quiz-container .repeat-step {display: flex; align-items: center; justify-content: center; height: 43vw; font-size: 1.6vw; width: calc(100vw - 4vw); position: fixed; top: 50%; transform: translate(-50%,-50%); left: 50%;}
.quiz-container .repeat-step.hidden {display: none;}
.quiz-container .repeat-step .repeat-txt {text-align: center; color: #fff; font-weight: bold; text-transform: uppercase; font-size: 4vw;}

.quiz-container .round-step .repeat-cols {width: 100%; height: 43vw; display: flex; max-height: 98dvh;}
.quiz-container .round-step .repeat-cols .repeat-leftcol {width: 50%; position: relative; z-index: 2; height: 43vw; max-height: 100dvh;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .jspVerticalBar {right: 10px;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .scroll-content {max-height: 43vw; overflow: auto; width: 100%; height: 43vw;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .scroll-content .jspPane {left: 0!important; width: 100%!important; margin: 0!important;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .scroll-content .scroll-content-wrap {padding-bottom: 200px; padding-top: 3.7vw;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .jspHorizontalBar {display: none!important;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block {user-select: none; -webkit-user-select: none; -moz-user-select: none;-ms-user-select: none; width: calc(100% - 40px); padding: 10px 0px 0 0; margin: 0 0 2vw;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block:first-child {padding-top: 0;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .question-title {margin:  0 0 2vw; font-size: 2.6vw; color: #fff; font-weight: bold; line-height: 120%;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .selected-answer {position: relative; transition: opacity 0.3s ease; font-size: 1.75vw; font-weight: bold; text-transform: uppercase; color: #fff;  display: flex; align-items: center; position: relative;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .selected-answer span {max-width: calc(100% - 6vw); cursor: pointer;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .selected-answer.hidden {opacity: 0; position: absolute; left: -99999px;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .selected-answer:before {transition: all 0.3s ease; cursor: pointer; content: ''; display: block; width: 4vw; height: 4vw; margin: 0 2vw 0 0; border-radius: 50%; border: 1px solid #fff;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .selected-answer:after {cursor: pointer; transition: all 0.3s ease; filter: grayscale(100%) brightness(800%); transform: translateY(-50%); width: 4vw; height: 4vw; position: absolute; content: ''; display: block; position: absolute; top: 50%; left: 0; background: url(/img/answer-edit-ic.svg) center center/45% auto no-repeat;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .selected-answer:hover:after {filter: none;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .selected-answer:hover:before {background: #fff;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .answers-btns {max-width: 90%; min-width: 65%; transition: opacity 0.3s ease; display: table; position: relative; }
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .answers-btns.long {max-width: 100%; width: calc(100% - 25px);}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .answers-btns.hidden {position: absolute; left: -99999px; opacity: 0;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .answers-btns a {width: 100%; color: #fff; line-height: 120%; padding: 1.5vw 4vw; text-align: center; font-size: 1.75vw; display: table; text-transform: uppercase; font-weight: bold; text-decoration: none; border-radius: 50px; border: 1px solid #fff; display: table; margin: 2.2vw 0 0 0;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .answers-btns a:hover {background: #fff; color: #343D58;}

.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .answers-btns .inp-text {text-transform: uppercase; font-size: 3.4dvh; font-weight: bold; background: none; text-align: center; border: 1px solid #fff; border-radius: 99px; width: 100%; font-family: inherit; padding: 4dvh 5dvh 4.1dvh 2dvh; height: 10.7dvh; color: #fff;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .answers-btns .inp-text:not(:focus)::-moz-placeholder {opacity: 0.35; color: #F8F9FB;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .answers-btns .inp-text:not(:focus)::-webkit-input-placeholder {opacity: 0.35; color: #F8F9FB;}

.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .answers-btns .ok {transition: all 0.3s ease; display: block; position: absolute; height: calc(10.7dvh + 6px); width: calc(10.7dvh + 6px); cursor: pointer; background: #fff; border-radius: 50%; top: 50%; right: 0; transform: translateY(-50%);}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .answers-btns .ok:hover {background: #343D58;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .answers-btns .ok:after {transition: all 0.3s ease; content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/img/ok-ic.svg) center center/40% auto no-repeat;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .answers-btns .ok:hover:after {filter: grayscale(100%) brightness(800%);}

.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .answers-btns.yes-no {max-width: 95%; flex-wrap: nowrap; display: flex; justify-content: space-between;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .question-block .answers-btns.yes-no a {width: 48%;}


.quiz-container .round-step .repeat-cols .repeat-rightcol {width: 50%; position: relative; padding-top: 3.7vw;}
.quiz-container .round-step .repeat-cols .repeat-rightcol .repeat-step {position: relative;}
.quiz-container .round-step .repeat-cols .repeat-rightcol .question-block {min-height: 100%; width: 95%; margin-left: auto; display: flex; flex-direction: column;}
.quiz-container .round-step .repeat-cols .repeat-rightcol .question-block.hidden {display: none;}
.quiz-container .round-step .repeat-cols .repeat-rightcol .question-block .question-title {user-select: none; -webkit-user-select: none; -moz-user-select: none;-ms-user-select: none; margin:  0 0 2vw; font-size: 2.6vw; color: #fff; font-weight: bold; line-height: 120%;}
.quiz-container .round-step .repeat-cols .repeat-rightcol .question-block .bottom-bar {justify-content: space-between; display: flex; align-items: flex-end; margin-top: auto;}
.quiz-container .round-step .repeat-cols .repeat-rightcol .question-block .bottom-bar .round-pic {width: 30%; border-radius: 20px; background: top center/cover;}
.quiz-container .round-step .repeat-cols .repeat-rightcol .question-block .bottom-bar .round-pic:before {content: ''; display: block; padding-top: 137%;}
.quiz-container .round-step .repeat-cols .repeat-rightcol .question-block .bottom-bar .round-answers {width: 67%; line-height: 120%; color: #fff; text-transform: uppercase; font-weight: bold; font-size: 1.75vw;}
.quiz-container .round-step .repeat-cols .repeat-rightcol .question-block .bottom-bar .round-answers .answer-block {border-bottom: 1px solid rgba(255,255,255,0.2); padding: 0 0 1vw; margin: 0 0 1vw;}
.quiz-container .round-step .repeat-cols .repeat-rightcol .question-block .bottom-bar .round-answers .answer-block:last-child {padding: 0; margin: 0; border: 0;}
.quiz-container .round-step .repeat-cols .repeat-rightcol .question-block .bottom-bar .round-pic.horiz-pic {width: 60%;}
.quiz-container .round-step .repeat-cols .repeat-rightcol .question-block .bottom-bar .round-pic.horiz-pic:before {padding-top: 67%;}

.points-screen {text-align: center; height: calc(100dvh - 40px); display: flex; align-items: center; justify-content: center;}
.points-screen:before {background: url(/img/points-screen-bg.webp) center center/cover; content: ''; position: fixed; display: block; top: 0; width: 100%; bottom: 0; left: 0;}
.hidden.points-screen:before {left: -999999px;}
.points-screen .wrap {position: relative;}
.points-screen .points-screen-title {line-height: 100%; font-size: 8.5dvh; color: #fff; text-transform: uppercase; font-weight: bold; margin: 0 0 5dvh;}
.points-screen .points-screen-subtitle {line-height: 100%; font-size: 5.3dvh; color: #fff; font-weight: bold;}
.points-screen .quiz-go-btn {color: #fff; line-height: 6vw; display: table; text-transform: uppercase; font-weight: bold; text-decoration: none; border-radius: 50px; font-size: 2.2vw; padding: 0 8.5vw; border: 1px solid #fff; display: table; margin: 16dvh auto 0;}
.points-screen .quiz-go-btn:hover {background: #fff; color: #343D58;}

.points-screen .sound-toggle-ic {bottom: 1.5dvh; left: 1.5dvh;}

.points-screen.video-bg:before {display: none;}
.points-screen.video-bg .wrap {z-index: 21;}

.points-screen .video-bg {    
    object-fit: cover;
    z-index: 20; opacity: 0.3;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
	left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}

.points-screen .video-bg video {
    top: 0;
    left: 0;
    position: absolute;
    object-fit: fill;
    height: auto; min-height: 100vh; width: 100vw;
}

.points-screen.hidden .video-bg {left: -99999px;} 

.quiz-container .round-step .rightcol .bottom-bar .field-inp {border: 1px solid #fff; border-radius: 6dvh; display: table; width: 100%;}
.quiz-container .round-step .rightcol .bottom-bar .field-inp.hidden {display: none;}
.quiz-container .round-step .rightcol .bottom-bar .field-inp + .field-inp {margin-top: 2dvh;}
.quiz-container .round-step .rightcol .bottom-bar .field-inp.pre-selected {border-width: 0.4vw; border-color: #F8F9FB;}
.quiz-container .round-step .rightcol .bottom-bar .field-inp.pre-selected textarea {color: #343D58;}
/* .quiz-container .round-step .rightcol .bottom-bar .field-inp.correct .inp-text {background: #F8F9FB; color: #343D58;}
.quiz-container .round-step .rightcol .bottom-bar .field-inp.wrong .inp-text {background: none; color: #343D58;}
.quiz-container .round-step .rightcol .bottom-bar .field-inp.wrong {background: #FF8F0B;} */
.quiz-container .round-step .rightcol .bottom-bar .inp-text {user-select: none; outline: none; scrollbar-width: none; overflow-y: scroll; text-transform: uppercase; font-size: 3.2dvh; font-weight: bold; background: none; text-align: center; border: 0; border-radius: 5dvh; width: 100%; font-family: inherit; padding: 3.5dvh 2dvh 3.6dvh; height: 10.3dvh;}
.quiz-container .round-step .rightcol .bottom-bar .field-inp:nth-last-child(2):nth-child(2) .answer:not(:empty) + .inp-text {position: absolute; left: -99999px;}
.quiz-container .round-step .rightcol .bottom-bar .field-inp .answer:not(:empty) {position: relative; left: auto;}
.quiz-container .round-step .rightcol .bottom-bar .field-inp:nth-last-child(3) .inp-text {position: absolute; left: -99999px;}
.quiz-container .round-step .rightcol .bottom-bar .field-inp .answer {display: table; position: absolute; left: -9999999px; text-transform: uppercase; font-size: 3.2dvh; font-weight: bold; background: none; text-align: center; border: 0; border-radius: 6dvh; width: 100%; font-family: inherit; padding: 3.5dvh 2dvh 3.6dvh; min-height: 10.3dvh;}
.quiz-container .round-step .rightcol .bottom-bar .field-inp.smallfont .answer {font-size: 2.2dvh; line-height: 3.2dvh;}
.quiz-container .round-step .rightcol .bottom-bar .correct .answer {position: relative; left: auto;}
.quiz-container .round-step .rightcol .bottom-bar .wrong .answer {position: relative; left: auto;}
.quiz-container .round-step .rightcol .bottom-bar .inp-text::-webkit-scrollbar {
  display: none; /*chrome*/
}

.quiz-container .round-step .rightcol .bottom-bar .field-inp.pre-selected.correct {border-width: 2px;}
.quiz-container .round-step .rightcol .bottom-bar .correct textarea, .quiz-container .round-step .rightcol .bottom-bar .wrong textarea {position: absolute; left: -999px;}


.quiz-container .round-step .rightcol .bottom-bar .inp-text:not(:focus)::-moz-placeholder {opacity: 0.35; color: #F8F9FB;}
.quiz-container .round-step .rightcol .bottom-bar .inp-text:not(:focus)::-webkit-input-placeholder {opacity: 0.35; color: #F8F9FB;}


.brick  {float: right; width: 5vw; height: 5vw;}


.results-bar {display: flex; align-items: center; width: 100%;}
.results-bar .position {font-size: 3.2dvh; color: #343D58; line-height: 100%; width: 26dvh; background: #fff; height: 24dvh; border-radius: 4dvh; display: flex; align-items: center; justify-content: center; text-align: center;}
.results-bar .position span {display: block; font-size: 8dvh; font-weight: bold; line-height: 90%; margin: 2.5dvh 0;}
.results-bar .score-blocks {line-height: 100%; padding: 3.5dvh 5dvh; width: calc(100% - 26dvh); justify-content: space-between; color: #fff; font-size: 3dvh; text-align: center; border-radius: 0 4dvh 4dvh 0; border: 1px solid #fff; display: flex; align-items: center;}
.results-bar .score-blocks .block:first-child {font-weight: bold;}
.results-bar .score-blocks .block .title {text-transform: none; display: block; margin: 0 0 2dvh;}
.results-bar .score-blocks .block .big {font-size: 3.5dvh;}
.final-points.points-screen .results-btns {margin: auto 0; display: flex; justify-content: space-between;}
.final-points.points-screen .results-btns .quiz-go-btn {width: 100%; padding: 0; white-space: nowrap;}
.final-points.points-screen .results-btns .quiz-go-btn:last-child {background: #fff; color: #343D58; width: 40%; padding: 0 10dvh; margin-left: 5dvh;}
.final-points.points-screen .results-btns .quiz-go-btn:last-child:hover {background: #343D58; border-color: #343D58; color: #fff;}
.final-points.points-screen .quiz-go-btn {margin: 0;}


.points-screen.final-points {width: 84%; margin: 0 auto;}
.points-screen.final-points .wrap {display: flex; flex-direction: column; width: 100%;  height: 76dvh;} 

.points-screen.final-points .share-title {font-size: 3.2dvh; color: #fff; text-transform: uppercase; font-weight: bold; margin: 0 0 3.5dvh;}
.points-screen.final-points .links {display: flex; justify-content: center;}
.points-screen.final-points .links a {display: flex; align-items: center; justify-content: center; width: 7.2dvh; height: 7.2dvh; background: #fff; border-radius: 2dvh; margin: 0 2dvh;}
.points-screen.final-points .links img {max-width: 50%; display: block; max-height: 50%; width: 1000px;}

.review-window {z-index: 100; position: fixed; top: 0; left: -99999px; opacity: 0; transition: opacity 0.3s ease; bottom: 0; width: 100%; display: flex; align-items: center; justify-content: center;}
.review-window.visible {opacity: 1; left: 0;}
.review-window .ovlay {position: absolute; top: 0; left: 0; width: 100%; bottom: 0; background: #C652E2; opacity: 0.4;}
.review-window .wrap {display: flex; flex-direction: column; padding: 6dvh; background: #fff; width: calc(100vw - 60px); height: calc(100dvh - 60px); border-radius: 4.5dvh; position: relative;}
.review-window .review-title {margin: 0 0 auto; font-size: 6.5dvh; line-height: 100%; font-weight: bold; text-transform: uppercase; color: #343D58;}
.review-window textarea {line-height: 150%; color: #343D58; font-size: 3.4dvh; font-weight: bold; margin: auto 0; height: 38dvh!important; padding: 4dvh 6dvh; font-family: inherit; resize: none; overflow: hidden; border-radius: 5.5dvh; width: 100%; border: 1px solid #343D58;}
.review-window form {margin: auto 0;}
.review-window .review-buttons {display: flex; justify-content: space-between; margin: auto 0 0 0;}
.review-window .review-buttons .cancel {white-space: nowrap; padding: 0 30px; font-size: 3.4dvh; color: #343D58; font-weight: bold; border-radius: 999px; border: 1px solid #343D58; width: 22%; line-height: 12dvh; text-align: center; display: table; text-decoration: none; text-transform: uppercase;}
.review-window .review-buttons .cancel:hover {background: #343D58; color: #fff;}
.review-window .review-buttons .send {white-space: nowrap; padding: 0 30px; border: 0; cursor: pointer; font-family: inherit; transition: all 0.3s ease; line-height: 12dvh; width: 48%; display: table; text-align: center; color: #fff; font-weight: bold; font-size: 3.4dvh; text-transform: uppercase; background: #343D58; border-radius: 999px;}

.review-window.review-thanks .wrap {font-size: 3.4dvh; color: #343D58; max-width: 60%; height: 60dvh;}
.review-window.review-thanks .review-title {margin-bottom: 5dvh;}
.review-window.review-thanks .review-buttons .cancel {width: 100%; border-color: #343D58; background: #343D58; color: #fff;}
.review-window.review-thanks .review-buttons .cancel:hover {background: none; color: #343D58;}

.bet-block {margin: 4dvh 0 0 0; font-size: 3.2dvh; color: #fff;}
.bet-block.hidden {display: none;}
.bet-block-in {margin: 2.2dvh 0 0 0; display: flex; align-items: center;}
.bet-block-in .bet-btn {transition: all 0.3s ease; position: relative; cursor: pointer; width: 11dvh; height: 11dvh; display: flex; align-items: center; justify-content: center; border: 1px solid #fff;}
.bet-block-in .bet-btn:not(.disabled):hover {background: #fff;}
.bet-block-in .bet-btn.disabled {opacity: 0.5; cursor: default;}
.bet-block-in .bet-btn.minus {border-radius: 10dvh 4dvh 4dvh 10dvh;}
.bet-block-in .bet-btn.minus:after {background: url(/img/minus-ic.svg) left 55% center/40% auto no-repeat;}
.bet-block-in .bet-btn.plus:after {background: url(/img/plus-ic.svg) right 55% center/40% auto no-repeat;}
.bet-block-in .bet-btn.plus {border-radius: 4dvh 10dvh 10dvh 4dvh;}
.bet-block-in .bet-btn:after {transition: all 0.3s ease; filter: grayscale(100%) brightness(800%); content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; bottom: 0;}
.bet-block-in .bet-btn:not(.disabled):hover:after {filter: none;}
.bet-value {user-select: none; font-size: 5.5dvh; color: #343D58; font-weight: bold; width: 13dvh; height: 11dvh; text-align: center; line-height: 11dvh; background: #fff; border-radius: 2dvh; margin: 0 1dvh;}


.quiz-container .round-step .repeat-cols .repeat-leftcol .bet-block {margin-bottom: 4dvh;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .bet-block-in .bet-btn {width: 7vw; height: 7vw;}
.quiz-container .round-step .repeat-cols .repeat-leftcol .bet-value {font-size: 3.5vw; width: 10dvh; height: 7vw; line-height: 7vw;}

/*custom scrollbar*/.jspContainer{overflow:hidden;position:relative}.jspPane{position:relative; margin-left: 0!important; width: 100%!important;}
.jspVerticalBar{position:absolute;top:0px;right:0px;width:10px;height:100%;background: none; border: 1px solid #fff; border-radius: 5px;}
.jspHorizontalBar:before {content: ''; display: block; position: absolute; left: 0; top: -33px; width: 18px; height: 18px; background: url(/img/drag-ic.svg) center center/contain no-repeat;}
.jspHorizontalBar{position:absolute;bottom: 3px;left:0; width: calc(100% - 15px);height:3px;background:#fff; border-radius: 3px;}.jspCap{display:none}.jspHorizontalBar .jspCap{float:left}.jspTrack{position:relative}
.jspDrag{background: #fff; border-radius: 2px; position:relative;top:0;left:2px;cursor:pointer; height: 3px; margin-top: 2px; width: 4px;}.jspHorizontalBar .jspTrack,.jspHorizontalBar .jspDrag{float:left;height:3px}.jspArrow{background:#50506d;text-indent:-20000px;display:block;cursor:pointer;padding:0;margin:0}.jspArrow.jspDisabled{cursor:default;background:#80808d}.jspVerticalBar .jspArrow{height:16px}.jspHorizontalBar .jspArrow{width:16px;float:left;height:100%}.jspVerticalBar .jspArrow:focus{outline:none}.jspCorner{background:#eeeef4;float:left;height:100%}* html .jspCorner{margin:0 -3px 0 0} .jspHorizontalBar .jspTrack {height: 1px;}


@media all and (max-width: 1500px) {
.quiz-container .vertical-timer  {font-size: 120px; line-height: 140px;}
.quiz-container .vertical-timer .timer-wrap {top: calc(50% - 70px);}

.quiz-container .repeat-rightcol .vertical-timer {overflow: visible; position: absolute; font-size: 70px; line-height: 100px;}
.quiz-container .repeat-rightcol .vertical-timer .timer-wrap {position: absolute; top: calc(50% - 50px);}
}


@media all and (max-width: 1300px) {
.quiz-container .vertical-timer {font-size: 90px; line-height: 120px;}
.quiz-container .vertical-timer .timer-wrap {top: calc(50% - 60px);}
.quiz-container .vertical-timer:before, .quiz-container .vertical-timer:after {background-size: 20px auto;}

.quiz-container .repeat-rightcol .vertical-timer {overflow: visible; position: absolute; font-size: 50px; line-height: 70px;}
.quiz-container .repeat-rightcol .vertical-timer .timer-wrap {position: absolute; top: calc(50% - 35px);}
}


@media all and (max-width:1001px) {

.quiz-container .round-step {zoom: 100%;}
.quiz-container .vertical-timer {font-size: 80px;  line-height: 100px;}
.quiz-container .vertical-timer .timer-wrap {top: calc(50% - 50px);}
.quiz-container .vertical-timer:before {left: calc(50% - 140px); background-size: auto auto;}
.quiz-container .vertical-timer:after {right: calc(50% - 140px); background-size: auto auto;}
.corn-logos img {height: 50px;}
.quiz-container .quiz-wrap.first-step .step-title {font-size: 30px; margin: 0 0 40px;}
.quiz-container .quiz-wrap.first-step .name-form {margin: 0 0 40px;}
.quiz-container .quiz-wrap.first-step .wrap {transform: translate(-50%,calc(-50% + 20px));}

.quiz-container .repeat-rightcol .vertical-timer {overflow: visible; position: absolute; font-size: 40px; line-height: 60px;}
.quiz-container .repeat-rightcol .vertical-timer .timer-wrap {position: absolute; top: calc(50% - 30px);}
}


@media all and (max-width:1001px) {


@media all and (max-height:350px) {
.corn-logos img {height: 40px;}
.quiz-container .quiz-wrap.first-step .step-title {font-size: 25px; margin: 0 0 30px;}
.quiz-container .quiz-wrap.first-step .name-form {margin: 0 0 30px;}
}