/* Start:/local/templates/main/style.css?173271192339210*/
@font-face {
  font-family: 'Noah';
  src: local('Noah Bold'), local('Noah-Bold'),
      url('/local/templates/main/fonts/Noah-Bold.woff2') format('woff2'),
      url('/local/templates/main/fonts/Noah-Bold.woff') format('woff'),
      url('/local/templates/main/fonts/Noah-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Noah';
  src: local('Noah ExtraBold'), local('Noah-ExtraBold'),
      url('/local/templates/main/fonts/Noah-ExtraBold.woff2') format('woff2'),
      url('/local/templates/main/fonts/Noah-ExtraBold.woff') format('woff'),
      url('/local/templates/main/fonts/Noah-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}


html { min-width:320px;}

body {max-height: 100dvh; overflow: hidden; min-width: 320px; position: relative; background:#fff; margin: 0; padding: 0px 0 0 0; height: auto !important; min-height: 100%; font-family:  'Noah', 'Helvetica', sans-serif;}
html > body {padding: 0;}
img {padding: 0; margin: 0; border: 0;}
.cleaner {clear: both;}
a:hover {text-decoration: none;}
input::-moz-placeholder {opacity: 1; color: #C1C1C1;}
input::-webkit-input-placeholder {opacity: 1; color: #C1C1C1;}
input:focus::-moz-placeholder {opacity: 0;}
input:focus::-webkit-input-placeholder {opacity: 0;}
textarea::-moz-placeholder {opacity: 1; color: #C1C1C1;}
textarea::-webkit-input-placeholder {opacity: 1; color: #C1C1C1;}
textarea:focus::-moz-placeholder {opacity: 0;}
textarea:focus::-webkit-input-placeholder {opacity: 0;}

a {color: #243DB6;}
* {box-sizing: border-box; outline: none; -tap-highlight-color: transparent;}
.all {max-width: 1480px; padding: 0 40px; margin: 0 auto; width: 100%; 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;}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}

.container {width: 100%; position: relative;} 
.hidden {display: none;}

.ui-loader {position: fixed; top: 50%; width: 100%; z-index: -1; height: 150dvh; transform: translateY(-50%); background: url(/local/templates/main/img/loader.webp) center center no-repeat;}
.ui-loader-header {display: none;}


.true-false-panel {font-size: 15px; font-weight: bold; color: #B1B1B1; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; position: absolute; top: 50%; left: 50%; margin-left: -387px; margin-top: -320px;  width: 784px; height: 26px; background: #fff; border-radius: 13px;}
.true-false-panel:before {transition: opacity 0.3s ease; opacity: 0; background: linear-gradient(to right, #CC081A, #fff, #fff); content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; border-radius: 13px;}
.true-false-panel:after {transition: opacity 0.3s ease; opacity: 0; background: linear-gradient(to left, #4EBE00, #fff, #fff); content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; border-radius: 13px;}
.true-false-panel .false, .true-false-panel .true {z-index: 2; padding: 0 30px; position: relative;}
.true-false-panel .false:before {transition: all 0.3s ease; content: ''; display: block; width: 20px; height: 16px; position: absolute; top: 50%; margin-top: -8px; left: 0; background: url(/local/templates/main/img/situation/false-ic.svg) center center no-repeat;}
.true-false-panel .true:before {transition: all 0.3s ease; content: ''; display: block; width: 20px; height: 16px; position: absolute; top: 50%; margin-top: -8px; right: 0; background: url(/local/templates/main/img/situation/true-ic.svg) center center no-repeat;}
.false-hover .true-false-panel .true {opacity: 0.5;}
.false-hover .true-false-panel:before {opacity: 1;}
.false-hover .true-false-panel .false {color: #fff;}
.false-hover .true-false-panel .false:before {filter: grayscale(100%) brightness(800%);}
.true-hover .true-false-panel .false {opacity: 0.5;}
.true-hover .true-false-panel:after {opacity: 1;}
.true-hover .true-false-panel .true {color: #fff;}
.true-hover .true-false-panel .true:before {filter: grayscale(100%) brightness(800%);}

#reject-block.hidden {display: block; position: absolute; top: -999999px; left: -999999px; width: 100%;}
#situation-block {cursor: pointer;}
#situation-block .situation-txt {z-index: 11;}


.situation-block.hidden {display: block; width: 100%; position: absolute; left: -999999px; top: -99999px;}
.situation-block {min-height: 100dvh; overflow: hidden; background: url(/local/templates/main/img/backgrounds/bus-stop-bg.webp) center center/cover no-repeat; position: relative; top: 0; left: 0; bottom: 0; width: 100%; height: -webkit-fill-available;}

.situation-block.hidden .btns {display: none;}

.situation-block .btns .false button {z-index: 99; border: 0; text-indent: -999999999px; background: url(/local/templates/main/img/situation/false-bg.svg) top left/auto 100% no-repeat; transition: opacity 0.3s ease; position: fixed; top: 0; opacity: 0; display: block; left: 0; width: 40%; height: 100dvh; cursor: pointer;}
.situation-block .btns .false button:hover,
.false-hover .situation-block .btns .false button {opacity: 1;}
.situation-block .btns .true button {z-index: 99; border: 0; text-indent: -999999999px; background: url(/local/templates/main/img/situation/true-bg.svg) top right/auto 100% no-repeat; transition: opacity 0.3s ease; position: fixed; top: 0; opacity: 0; display: block; right: 0; width: 40%; height: 100dvh; cursor: pointer;}
.situation-block .btns .true button:hover,
.true-hover .situation-block .btns .true button {opacity: 1;}


.situation-block.bus-stop {background-image: url(/local/templates/main/img/backgrounds/bus-stop-bg.webp);}
.situation-block.kitchen {background-image: url(/local/templates/main/img/backgrounds/kitchen.webp);}
.situation-block.cafe {background-image: url(/local/templates/main/img/backgrounds/cafe.webp);}
.situation-block.office {background-image: url(/local/templates/main/img/backgrounds/office.webp);}
.situation-block.hall {background-image: url(/local/templates/main/img/backgrounds/hall-bg.webp);}
.situation-block.bus {background-image: url(/local/templates/main/img/backgrounds/bus.webp); }
.situation-block.office:before {content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background: url(/local/templates/main/img/backgrounds/office+.webp) center center/cover; opacity: 0; transition: opacity 0.6s ease;} 
.true-hover .situation-block.office:before,
.false-hover .situation-block.office:before {opacity: 1;}
.situation-block.metro {background-image: none;}


.situation-block.bus .bus-anim {left: 0;}
.bus-anim {width: 100%; position: absolute; top: 0; left: -999999px; bottom: 0; -webkit-mask-image: url(/local/templates/main/img/backgrounds/dog-mask.png);  mask-image: url(/local/templates/main/img/backgrounds/dog-mask.png);  mask-repeat: no-repeat; mask-size: cover; -webkit-mask-size: cover; mask-position: center center; -webkit-mask-position: center center;}
.bus-anim:before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; bottom: 0; background: url(/local/templates/main/img/backgrounds/dog.png) center center/cover no-repeat; transition: all 1s ease; transform: translateY(300px);}
.true-hover .bus-anim:before {transform: none;}


.situation-block.metro .metro-bg {left: 0;}
.metro-bg {position: fixed; top: 0; left: -999999px; bottom: 0; width: 100%;}
.metro-bg:before {z-index: 3; position: absolute; width: 100%; top: 0; left: 0; bottom: 0; content: ''; display: block; background: url(/local/templates/main/img/backgrounds/metro.webp) center center/cover;}
/*.metro-bg:after {z-index: 3; position: absolute; width: 24.0625%; top: 0; right: 0; bottom: 0; content: ''; display: block; background: url(/local/templates/main/img/backgrounds/metro-right.png) center left/cover;}*/
.metro-video {position: absolute; width: 100%; top: 0; right: 0; bottom: 0; content: ''; display: block;}


/* .situation-block.start-block, .situation-block {background-image: url(/local/templates/main/img/backgrounds/hall-bg.webp);}
.situation-block#rank-block {background-image: url(/local/templates/main/img/backgrounds/kitchen.webp);} */
.start-block .situation-txt {padding-top: 35px; height: 748px; font-size: 19px; }
.start-block .situation-txt p.title {font-size: 24px; line-height: 30px; padding: 0 0 23px;}
.start-block .situation-txt .inp-outer {margin: 46px 0 23px; position: relative;}
.start-block .situation-txt .inp-outer .txt-inp {z-index: 2; position: relative; width: 100%; border: 0; background: #fff; border-radius: 15px; display: block; font-family: inherit; padding: 0 50px 0 20px; height: 55px; color: #000; font-size: 19px; font-weight: bold; text-transform: uppercase;}
.start-block .situation-txt .inp-outer .txt-inp:not(:focus)::-moz-placeholder {opacity: 0.45; color: #000;}
.start-block .situation-txt .inp-outer .txt-inp:not(:focus)::-webkit-input-placeholder {opacity: 0.45; color: #000;}
.start-block .situation-txt .inp-outer .q-ic {z-index: 3; transition: all 0.3s ease; cursor: pointer; width: 26px; height: 27px; position: absolute; top: 14px; right: 14px; }
.start-block .situation-txt .inp-outer .q-ic:before {content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background: url(/local/templates/main/img/start/q-ic.svg) center center/contain no-repeat; transition: opacity 0.3s ease;}
.start-block .situation-txt .inp-outer .q-ic:after {content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background: url(/local/templates/main/img/other/tooltip-close-ic.svg) center center/contain no-repeat; opacity: 0; transition: opacity 0.3s ease;}
.start-block .situation-txt .inp-outer.tooltip-open .q-ic:after {opacity: 1;}
.start-block .situation-txt .inp-outer.tooltip-open .q-ic:before {opacity: 0;}
.start-block .situation-txt .inp-outer .tooltip {position: absolute; top: -9999px; left: -99999px; opacity: 0; transition: opacity 0.3s ease; background: #F1C3A4; padding: 35px 20px 20px; border-radius: 0 0 15px 15px; margin-top: -17px; font-weight: bold; text-align: center;}
.start-block .situation-txt .inp-outer.tooltip-open .tooltip {position: relative; top: auto; left: auto; opacity: 1;}

.start-block .situation-txt .inp-outer .error-block {position: absolute; top: -9999px; left: -99999px; opacity: 0; transition: opacity 0.3s ease; background: #E22F1E; padding: 35px 20px 20px; border-radius: 0 0 15px 15px; margin-top: -17px; font-weight: bold; text-align: center; color: #fff;}
.start-block .situation-txt .inp-outer .error-block.visible {position: relative; top: auto; left: auto; opacity: 1;}

.start-block .situation-txt .gender {margin: 0 0 46px; border-radius: 15px; background: #fff; display: flex;}
.start-block .situation-txt .gender label {padding: 0; line-height: 55px; margin: 0; border: 0!important; outline: none!important; border-radius: 15px; height: 55px; background: none; font-size: 19px; font-weight: bold; color: #000; text-transform: uppercase; position: relative; cursor: pointer; width: 50%; display: flex; align-items: center; justify-content: center;}
.start-block .situation-txt .gender label span {display: none;}
.start-block .situation-txt .gender label.ui-state-active {background: #E44C33; color: #fff;}
.start-block .situation-txt .gender label input {position: absolute; top: -99999px; left: -999999px;}
.start-block .situation-txt .gender label span.t {display: table;}
.start-block .situation-txt .gender label span.ic {line-height: 100%; margin: 0 10px 0 0; display: table;}
.start-block .situation-txt .gender label span.ic img {height: 24px; margin: 0; width: auto; transition: all 0.1s ease; display: table;}
.start-block .situation-txt .gender label.ui-state-active span.ic img {filter: invert(1);}
.start-block .situation-txt .ref-link {display: table; margin: 0 auto 27px; font-size: 19px; line-height: 24px; color: #E44C33; font-weight: bold; text-transform: uppercase; text-decoration: none;}
.start-btn a.disabled {cursor: default;}
.start-btn a, .start-btn button {transition: all 0.3s ease; border: 0; cursor: pointer; font-family: inherit; font-size: 24px; line-height: 55px; text-decoration: none; color: #fff; text-transform: uppercase; font-weight: bold; display: table; width: 100%; border-radius: 15px; background: #121212;}
.start-btn a img {display: inline-block; margin: 0 0 0 14px; max-height: 27px; width: auto; transform: translateY(5px);}
.start-btn a + a {margin-top: 23px;}
.start-btn {margin: 0 0 23px;}
.start-btn a:not(.disabled):hover, .start-btn button:hover {background: #4F4F4F;}

.start-block .situation-txt .rate-block {font-size: 19px; line-height: 24px; font-weight: bold; margin: 0 -20px; width: calc(100% + 40px); background: #fff; border-radius: 30px 30px 0 0; overflow: auto; max-height: 200px; padding: 18px 0 0 0; -ms-overflow-style: none; scrollbar-width: none;}
.start-block .situation-txt .rate-block::-webkit-scrollbar {display: none;}
.start-block .situation-txt .rate-block p.title {font-size: 24px; line-height: 30px; padding: 0 0 8px; text-transform: uppercase;}
.start-block .situation-txt .rate-block .row {align-items: center; border-bottom: 2px solid #F2F2F2; height: 47px; display: flex;}
.start-block .situation-txt .rate-block .row:last-child {border: 0;}
.start-block .situation-txt .rate-block .row div:first-child {width: 50px; text-align: center;}
.start-block .situation-txt .rate-block .row div {width: calc(100% - 105px);}
.start-block .situation-txt .rate-block .row div:last-child {width: 55px; text-align: center;}



.start-block.bottom .sit-wrap {top: calc(100dvh + 130px); margin-top: 0;}
.start-block .sit-wrap {transition: all 1.5s ease;}
.sit-wrap {z-index: 15; transition: all 0.3s ease; width: 1040px; height: 857px; background: url(/local/templates/main/img/man-hand.svg) top center no-repeat; position: absolute; top: 50%; margin-top: -180px; left: 50%; margin-left: -520px;}
.sit-wrap:before {content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background: url(/local/templates/main/img/woman-hand.svg) top center no-repeat; opacity: 0; transition: opacity 0.3s ease;}
.female .sit-wrap {background: none;}
.female .sit-wrap:before {opacity: 1;}
.situation-screen {padding: 37px 5px 0; color: #000; text-align: center; position: absolute; width: 404px; height: 862px; top: -240px; margin-left: -202px;  left: 50%;}
.situation-screen:before {content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background: url(/local/templates/main/img/phone.svg) top center/contain no-repeat;} 
.situation-screen.hidden {top: -999999px; left: -999999px;}
.situation-screen .points-block {font-size: 15px; color: #000; font-weight: 800; position: absolute; left: 20px; width: calc(100% - 40px); display: flex; align-items: center; justify-content: space-between; bottom: 70px;}
.situation-screen .url {z-index: 10; position: absolute; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #B1B1B1; left: 63px; bottom: 32px;}
.situation-screen .url:before {content: ''; display: block; position: absolute; width: 14px; height: 18px; background: url(/local/templates/main/img/url-ic.svg) center center no-repeat; top: 50%; margin-top: -9px; left: -30px;}
.situation-screen .url.red:before {background-image: url(/local/templates/main/img/red-url-ic.svg); width: 18px; background-size: contain;}
.situation-screen .time {z-index: 10; position: absolute; display: flex; align-items: center; font-size: 12px; line-height: 15px; color: #000; font-weight: 800; text-transform: uppercase; top: 15px; left: 30px;}
.situation-screen .time .time-wrap {margin: 0 10px 0 0;}
.situation-screen .battery {z-index: 10; position: absolute; display: flex; align-items: center; font-size: 12px; line-height: 15px; color: #000; font-weight: 800; text-transform: uppercase; top: 13px; right: 30px;}
.situation-screen .battery .in {overflow: hidden; position: relative; height: 9px; margin: 3px 2px 0; width: calc(100% - 9px);}
.situation-screen .battery .in .fill {height: 9px; background: #000; border-radius: 3px;}
.situation-screen .battery .bat {width: 30px; height: 15px; margin: 0 6px 0 0; background: url(/local/templates/main/img/battery.svg) left center no-repeat;}
.points-block .points-bar {position: relative; width: calc(100% - 82px); height: 13px; overflow: hidden; border-radius: 7px; border: 2px solid #000; background: #fff;}
.points-block .points-bar .fill {height: 10px; background: #DE443A; border-radius: 5px; width: 0; position: absolute; left: 0px; top: 0px;}

.false-hover .sit-wrap {transform: rotate(-14deg) translateX(-200px) translateY(-50px);}
.true-hover .sit-wrap {transform: rotate(14deg) translateX(200px) translateY(-50px);}

/*.false-hover .situation-txt {border-radius: 30px; transform: rotate(-26deg) translateY(-80px) translateX(-110px); transition-delay: 0.2s;}
.true-hover .situation-txt {border-radius: 30px; transform: rotate(26deg) translateY(-80px) translateX(110px); transition-delay: 0.2s;}*/


.false-click .situation-txt {position: absolute; transition: all 1.5s ease; border-radius: 30px; transform: translateY(0%) translateX(-500%) rotate(-250deg);}
.true-click .situation-txt {position: absolute; transition: all 1.5s ease; border-radius: 30px; transform: translateY(0%) translateX(500%) rotate(250deg);}


#situation-block .situation-txt {padding-top: 20px;}

.situation-txt {width: 100%; position: relative; padding: 50px 20px 0; transition: none; height: 726px; overflow-y: auto; background: #F2F2F2; font-size: 22px; font-weight: bold; line-height: 27px; -ms-overflow-style: none; scrollbar-width: none;}
.situation-txt::-webkit-scrollbar {display: none;}
.situation-txt p {padding: 0; margin: 0;}
.situation-txt img {margin: 30px -20px 0; width: calc(100% + 40px); display: block;}
.situation-txt .counter {font-size: 15px; color: #B1B1B1; font-weight: 600; line-height: 125%; margin: 0 0 10px;}


.situation-txt.start-screen {overflow: hidden; padding-top: 22px; background: #F0C3A3 url(/local/templates/main/img/start/start-bg.svg) top center no-repeat;}
.situation-txt .logos {margin: 0 0 57px; display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 15px 30px; border-radius: 20px;}
.situation-txt .logos .block:first-child {padding: 0 20px 0 0; border-right: 1px solid #F2F2F2;}
.situation-txt .logos .block:first-child img {height: 74px; display: block;}
.situation-txt .logos .block img {margin: 0; width: auto; height: 47px; display: block;}

.situation-txt .true-or-false-logo {display: table; margin: 0 auto -40px; width: 314px; position: relative; z-index: 2;}
.auth-block {background: #fff; border-radius: 20px 20px 0 0; padding: 109px 20px 30px; margin: 0 -20px; width: calc(100% + 40px);}
.auth-block .descr {line-height: 24px; font-size: 19px; max-width: 276px; margin: 0 auto 56px;}
#hook-block {margin-top: 30px;}


#awards-block .situation-screen:before {background-image: url(/local/templates/main/img/other/awards-phone.svg);}
#awards-block .situation-screen:after {content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; pointer-events: none; background: url(/local/templates/main/img/other/phone-frame.svg) top left/contain no-repeat;}
#awards-block .situation-screen {padding: 0; border-radius: 20px; overflow: hidden;}
#awards-block .situation-screen .situation-txt {display: flex; align-items: center; background: none; height: 858px; padding: 0 25px;}
#awards-block .situation-screen .situation-txt.all-awards-open {padding: 35px 35px; align-items: flex-start;}
#awards-block .close-ic {transition: all 0.3s ease; width: 32px; height: 32px; cursor: pointer; position: absolute; top: 20px; right: 20px; border-radius: 50%; background: #E44C33 url(/local/templates/main/img/other/close.svg) center center no-repeat;}
#awards-block .close-ic:hover {background-color: #E22F1E;}
#awards-block .block {position: relative;}
#awards-block .block .pic {display: none; width: 314px; position: relative; height: 110px; border-radius: 15px 15px 0 0; background: #ADADAD; margin: 0 auto;}
#awards-block .block:first-child .pic,
#awards-block .block.active .pic {display: block;}
#awards-block .block + .block {margin-top: 54px;}
#awards-block .block + .block.active {margin-top: 30px;}
#awards-block .block .descr {color: #E22F1E; font-size: 19px; line-height: 115%; font-weight: 600; background: #F0C3A3; position: relative; padding: 20px; text-align: center; border-radius: 15px; border: 4px solid #E22F1E;}
#awards-block .block .descr a {line-height: 100%; color: #000; border-bottom: 2px dotted #000; text-decoration: none; white-space: nowrap; display: inline-block;}
#awards-block .block .descr a:hover {border-color: transparent;}
#awards-block .block .descr a.underline {display: inline; text-decoration: underline; border: 0; white-space: normal;}
#awards-block .block .descr a.underline:hover {text-decoration: none;}
#awards-block .block .descr .title {display: table; position: relative; font-size: 30px; color: #E22F1E; margin: 0 auto 10px; line-height: 100%; text-transform: uppercase;}
#awards-block .block .descr .title span {position: relative;}
#awards-block .block.active .descr .title:before {transform: rotate(-1deg); content: ''; display: block; position: absolute; top: -1px; bottom: 0px; left: -20px; width: calc(100% + 40px); z-index: 0; background: #E44C33;}
#awards-block .block.active .no-points {display: none;}
#awards-block .block .no-points {position: absolute; display: table; line-height: 24px; padding: 0 10px; border-radius: 10px 10px 0 0; background: #E22F1E; color: #fff; text-transform: uppercase; font-size: 19px; font-weight: 600; top: -24px; left: 50%; transform: translateX(-50%); white-space: nowrap;}

#awards-block .block.active .descr {color: #000; background: #fff; border-color: #fff;}
#awards-block .block.active .descr a {color: #E44C33; border-color: #E44C33;}
#awards-block .block.active .descr .title {color: #fff; margin-bottom: 23px;}

.women-only {display: none;}
.female .women-only {display: block;}
.female .men-only {display: none;}

.situation-txt.reaction {padding: 0;}
.situation-txt.reaction .reaction-pic {position: relative;}
.situation-txt.reaction .reaction-pic img {display: block; width: 100%; margin: 0;}
.situation-txt.reaction .change-block {border-radius: 10px; width: 70px; background: #4EBE00; top: -18px; margin-left: -35px; color: #fff; font-size: 22px; font-weight: bold; text-align: center; line-height: 37px; left: 50%; display: table; position: absolute;}
.situation-txt.reaction .change-block.red {background: #E1081A;}
.situation-txt.reaction .reaction-title {margin: 0 0 25px;}
.situation-txt.reaction .reaction-title p {position: relative; display: table; margin: 0 auto; color: #fff; font-size: 30px; line-height: 37px; font-weight: bold; text-transform: uppercase;}
.situation-txt.reaction .reaction-title p:nth-child(even):before {transform: rotate(1deg);}
.situation-txt.reaction .reaction-title p:before {transform: rotate(-1deg); content: ''; display: block; position: absolute; top: 3px; bottom: 3px; left: -5px; width: calc(100% + 10px); z-index: 0; background: #E44C33;}
.situation-txt.reaction .reaction-title p span {position: relative;}
.situation-txt.reaction .reaction-txt {font-size: 19px; line-height: 24px; position: relative; padding: 40px 20px 20px; width: 100%; border-radius: 20px 20px 0 0; background: #fff; margin-top: -17px;}
.situation-txt.reaction .reaction-txt .start-btn button {font-family: inherit; border: 0; cursor: pointer; font-size: 24px; line-height: 55px; text-decoration: none; color: #fff; text-transform: uppercase; font-weight: bold; display: table; width: 100%; border-radius: 15px; margin: 30px 0 0 0; background: #121212;}


#rank-block .situation-txt {background: #fff; padding: 0;}
#rank-block .start-btn {margin: 30px 20px; width: calc(100% - 40px);}
.rank-pic {margin: 0 0 0px; background: #F0C3A3 url(/local/templates/main/img/start/start-bg.svg) top center no-repeat; display: flex; align-items: center; justify-content: center; padding-bottom: 10px; height: 337px;}
.rank-pic img {margin: 0; display: block; max-width: 100%; max-height: 100%; width: auto;}
.rank-txt-wrap {border-radius: 15px 15px 0 0; background: #fff; margin: -17px 0 0 0; position: relative; padding: 40px 0 0 0;}
.rank-txt {font-size: 19px; line-height: 130%; padding: 0 20px;}
.rank-txt-title {font-size: 30px; font-weight: 600; color: #fff; text-transform: uppercase; display: table; margin: 0 auto 35px; position: relative;}
.rank-txt-title:before {transform: rotate(-1deg); content: ''; display: block; position: absolute; top: -1px; bottom: -1px; left: -20px; width: calc(100% + 40px); z-index: 0; background: #E44C33;}
.rank-txt-title .rank-current-name {position: relative;}

.vkshare {margin: 0 auto; display: table;}
.vkshare img {margin: 0; display: block; width: auto;}

.animation-video {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-video {
    width: 100%;
    height: 100vh;
    position: absolute;
    overflow: hidden;
    z-index: 1; top: 0; left: 0; z-index: 0;
}
.video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.tutorial-block .situation-txt {background: #fff; padding: 0;}
.tutorial-block .slide {height: 726px; position: absolute; top: -99999px; left: -99999px; opacity: 0; transition: opacity 0.5s ease;}
.tutorial-block .slide.active {top: auto; left: auto; position: relative; opacity: 1;}
.tutorial-block .rank-pic {height: 345px;}
.tutorial-block .rank-pic img {max-width: calc(100% - 32px);}
.tutorial-block .rank-pic.big {align-items: flex-start;}
.tutorial-block .rank-pic.big img {width: 100%; max-width: 100%;}
.tutorial-block .slide.opacity {opacity: 0;}
.tutorial-block .slide .txt {height: 398px; font-size: 19px; line-height: 125%; padding: 0px 20px; display: flex; align-items: center; background: #fff; border-radius: 15px 15px 0 0; margin: -17px 0 0 0; position: relative;}
.tutorial-block .slide .txt .title {margin: 0 0 30px;}
.tutorial-block .slide .txt .title p {position: relative; display: table; margin: 0 auto; color: #fff; font-size: 30px; line-height: 37px; font-weight: bold; text-transform: uppercase;}
.tutorial-block .slide .txt .title p:nth-child(even):before {transform: rotate(1deg);}
.tutorial-block .slide .txt .title p:before {transform: rotate(-1deg); content: ''; display: block; position: absolute; top: 3px; bottom: 3px; left: -5px; width: calc(100% + 10px); z-index: 0; background: #E44C33;}
.tutorial-block .slide .txt .title p span {position: relative;}
.tutorial-block .slide .txt .title.big-lineheight p + p {margin-top: 5px;}
.tutorial-block .slide .btns {margin: 30px 0; display: flex; justify-content: space-between;}
.tutorial-block .slide .btns .next:first-child:last-child {width: 100%;}
.tutorial-block .slide .btns:last-child {margin-bottom: 0;}
.tutorial-block .slide .btns .prev {transition: all 0.3s ease; cursor: pointer; width: 55px; height: 55px; border-radius: 15px; background: #121212 url(/local/templates/main/img/other/back-ic.svg) center center no-repeat;}
.tutorial-block .slide .btns .prev.disabled {background-color: #F2F2F2; cursor: default;}
.tutorial-block .slide .btns .next {transition: all 0.3s ease; cursor: pointer; line-height: 55px; height: 55px; padding: 0 35px; display: table; font-size: 24px; font-weight: 600; color: #fff; text-transform: uppercase; border-radius: 15px; background: #121212;}
.tutorial-block .slide .btns .next:hover,
.tutorial-block .slide .btns .prev:not(.disabled):hover {background-color: #4F4F4F;}
.tutorial-block .slide .skip-tutorial {text-decoration: none; font-size: 19px; display: table; margin: 0 auto; color: #E44C33; font-weight: 600; text-transform: uppercase; line-height: 120%;}
.tutorial-block .slide .txt a {line-height: 100%; color: #E44C33; border-bottom: 2px dotted #E44C33; text-decoration: none; white-space: nowrap; display: inline-block;}


#final-block .situation-txt {background: #F0C3A3 url(/local/templates/main/img/start/start-bg.svg) top center no-repeat; height: 748px; padding: 30px 20px 0;}
#final-block .situation-txt .top-white-block {max-width: 327px; position: relative; border-radius: 15px 15px 0 0; background: #fff; padding: 20px 20px 20px; margin: 0 auto 133px; text-align: center; font-size: 19px; line-height: 120%;}
#final-block .situation-txt .top-white-block .title {font-size: 30px; font-weight: 600; color: #fff; text-transform: uppercase; display: table; margin: 0 auto 30px; position: relative;}
#final-block .situation-txt .top-white-block .title span {position: relative;}
#final-block .situation-txt .top-white-block .title:before {transform: rotate(-1deg); content: ''; display: block; position: absolute; top: -4px; bottom: -1px; left: -20px; width: calc(100% + 40px); z-index: 0; background: #E44C33;}
#final-block .situation-txt .reg-btn {transition: all 0.3s ease; line-height: 110%; height: 93px; max-height: 93px; font-weight: 500; color: #fff; text-align: left; text-decoration: none; font-size: 15px; text-transform: uppercase; left: -12.5px; width: calc(100% + 25px); padding: 0 0 5px; border-radius: 15px; background: #1A679E; position: absolute; top: calc(100% - 3px);}
#final-block .situation-txt .reg-btn:hover .in {background: #1A679E;}
#final-block .situation-txt .reg-btn:hover {transform: translateY(3px); max-height: 90px; padding-bottom: 2px;}
#final-block .situation-txt .reg-btn .in {transition: all 0.3s ease; position: relative; overflow: hidden; align-items: center; height: 87px; display: flex; border-radius: 15px; background: #2C7FBA; padding: 0 29px; }
#final-block .situation-txt .reg-btn .in:before {content: ''; display: block; position: absolute; top: -2px; left: -1px; width: calc(100% + 2px); border-radius: 15px; border: 1px solid #57AAE4; bottom: 1px;}
#final-block .situation-txt .reg-btn img {position: relative; display: block; width: 60px; margin: 0 20px 0 0;}
#final-block .situation-txt .reg-btn .txt {width: calc(100% - 80px);}
#final-block .situation-txt .reg-btn .txt span {position: relative; line-height: 110%; font-weight: bold; display: block; font-size: 24px;}


#final-block .situation-txt .white-block {position: relative; border-radius: 15px; background: #fff; padding: 20px 20px 20px; margin: 0 auto 46px; text-align: center; font-size: 19px; line-height: 120%;}
#final-block .situation-txt .white-block .txt a {line-height: 100%; color: #E44C33; border-bottom: 2px dotted #E44C33; text-decoration: none; white-space: nowrap; display: inline-block;}
#final-block .situation-txt .white-block .title {font-size: 24px; font-weight: 600; display: table; margin: 0 auto 15px; position: relative;}
#final-block .situation-txt .white-block .title .big {line-height: 120%; display: block; text-transform: uppercase; color: #E44C33;}

#final-block .situation-txt .vkshare {font-size: 19px; font-weight: bold; color: #0077FF; display: flex; width: 100%; align-items: center; justify-content: center; background: #fff; border-radius: 15px; height: 50px; text-decoration: none;}
#final-block .situation-txt .vkshare:hover {background: #0077FF; color: #fff;}
#final-block .situation-txt .vkshare:hover img {filter: grayscale(100%) brightness(800%);}
#final-block .situation-txt .vkshare .ic {width: 32px; height: 32px; position: relative; margin: 0 10px 0 0; display: block;}
#final-block .situation-txt .vkshare .ic:before,
#final-block .situation-txt .vkshare .ic:after {transition: opacity 0.3s ease; background: center center/contain no-repeat; content: ''; position: absolute; display: block; top: 0; left: 0; width: 100%; bottom: 0;}
#final-block .situation-txt .vkshare .ic:before {background-image: url(/local/templates/main/img/other/vk-blue.svg);}
#final-block .situation-txt .vkshare .ic:after {background-image: url(/local/templates/main/img/other/vk-white.svg); opacity: 0;}

#final-block .situation-txt .vkshare:hover .ic:before {opacity: 0;}
#final-block .situation-txt .vkshare:hover .ic:after {opacity: 1;}

#final-block .situation-screen:before {z-index: 2;}
#final-block .situation-txt {z-index: 3;}


.situation-block .bus .bus-stop-video {left: 0;}
.bus-stop-video {
  width: 100%;
  height: 100vh;
  position: absolute;
  overflow: hidden;
  z-index: 1;
  top: 0;
  left: -999999px;
  z-index: 0;
}

.bus-stop-video .video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.awards-btn {transition: all 0.1s ease-out; animation: clickme 3s ease-out infinite; text-decoration: none; padding: 20px 0 0 0px; font-size: 24px; font-weight: 600; color: #fff; text-transform: uppercase; position: absolute; width: 66px; height: 367px; border-radius: 0 15px 15px 0; background: #E44C33; right: -60px; bottom: 73px;}
.awards-btn:hover {animation: none; right: -63px;}
.awards-btn.static {animation: none;}
.awards-btn img {margin: 0 0 24px; }
.awards-btn span {display: block; white-space: nowrap; transform: rotate(90deg);}

@keyframes clickme {
0% {
 transform: none;
}
8% {
  transform: translateX(2px);
}

16% {
  transform: none;
}

24% {
  transform: translateX(2px);
}

32% {
  transform: translateX(0);
}

88% {
  transform: translateX(0px);
}
}
.sound-button {transition: all 0.3s ease; position: fixed; top: 20px; left: 20px; z-index: 999; width: 64px; height: 64px; cursor: pointer; border-radius: 50%; background: #fff;}
.sound-button:after {transition: all 0.3s ease; background: url(/local/templates/main/img/other/sound-btn.svg) center center no-repeat; content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; bottom: 0;}
.sound-button.off:after {background-image: url(/local/templates/main/img/other/sound-btn-off.svg);}
@media all and (min-width:1001px) {
.sound-button:hover {background: #E44C33;}
.sound-button:hover:after {filter: grayscale(100%) brightness(800%);}
}
.close-button {transition: all 0.3s ease; position: fixed; top: 20px; right: 20px; z-index: 999; width: 64px; height: 64px; cursor: pointer; border-radius: 50%; background: #fff;}
.close-button:hover {background: #E44C33;}
.close-button:hover:after {filter: grayscale(100%) brightness(800%);}
.close-button:after {transition: all 0.3s ease; background: url(/local/templates/main/img/other/close-btn.svg) center center no-repeat; content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; bottom: 0;}

.close-popup {z-index: 999; display: flex; align-items: center; justify-content: center; position: fixed; top: -999999px; left: -9999999px; opacity: 0; transition: opacity 0.3s ease; width: 100%; height: 110dvh;}
.close-popup.visible {opacity: 1; left: 0; top: 50%; transform: translateY(-50%);}
.close-popup .ovlay {background: #F0C3A3; opacity: 0.75; position: absolute; top: 0; left: 0; width: 100%; bottom: 0;}
.close-popup .into {text-align: center; font-size: 19px; font-weight: 600; line-height: 120%; padding: 40px; width: 523px; max-width: calc(100% - 60px); border-radius: 15px; background: #fff; position: relative; }
.close-popup .into p {padding: 0; margin: 0;}
.close-popup .into p + .btn {margin-top: 40px;}
.close-popup .title {line-height: 100%; font-size: 30px; font-weight: 600; color: #fff; text-transform: uppercase; display: table; margin: 0 auto 30px; position: relative;}
.close-popup .title p {padding: 0; margin: 0 auto 10px; position: relative; display: table;}
.close-popup .title span {position: relative;}
.close-popup .title p:before {transform: rotate(-1deg); content: ''; display: block; position: absolute; top: -1px; bottom: 3px; left: -20px; width: calc(100% + 40px); z-index: 0; background: #E44C33;}
.close-popup .title p:nth-child(even):before {transform: rotate(1deg);}
.close-popup .btn a {text-align: center; transition: all 0.3s ease; border: 0; cursor: pointer; font-family: inherit; font-size: 24px; line-height: 55px; text-decoration: none; color: #fff; text-transform: uppercase; font-weight: bold; display: table; width: 100%; border-radius: 15px; background: #121212;}
.close-popup .btn + .btn {margin-top: 20px;}
.close-popup .btn a:hover {background: #4F4F4F;}
.close-popup .btn.red a {background: #E44C33;}
.close-popup .btn.red a:hover {background: #E22F1E;}


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

.sit-wrap {transform: scale(0.8); margin-top: -240px;}
.true-hover .sit-wrap {transform: rotate(7deg) translateX(100px) translateY(-25px) scale(0.8);}
/*.true-hover .situation-txt {transform: rotate(13deg) translateY(-40px) translateX(60px);}*/

.false-hover .sit-wrap {transform: rotate(-7deg) translateX(-100px) translateY(-25px) scale(0.8);}
/*.false-hover .situation-txt {transform: rotate(-13deg) translateY(-40px) translateX(-60px);}*/

.true-false-panel {margin-top: -250px; width: 600px; margin-left: -300px;}

.start-block.bottom .sit-wrap {top: calc(100dvh + 50px); margin-top: 0;}
}

@media all and (max-height:750px) {
.start-block.bottom .sit-wrap {top: calc(100dvh - 30px); margin-top: 0;}
.sit-wrap {transform: scale(0.7); margin-top: -240px;}
.true-hover .sit-wrap {transform: rotate(7deg) translateX(100px) translateY(-25px) scale(0.7);}
/*.true-hover .situation-txt {transform: rotate(13deg) translateY(-40px) translateX(60px);}*/

.false-hover .sit-wrap {transform: rotate(-7deg) translateX(-100px) translateY(-25px) scale(0.7);}
/*.false-hover .situation-txt {transform: rotate(-13deg) translateY(-40px) translateX(-60px);}*/

}

@media all and (max-height:650px) {
.start-block.bottom .sit-wrap {top: calc(100dvh - 70px); margin-top: 0;}
.sit-wrap {transform: scale(0.6); margin-top: -280px;}
.true-hover .sit-wrap {transform: rotate(7deg) translateX(100px) translateY(-25px) scale(0.6);}
/*.true-hover .situation-txt {transform: rotate(13deg) translateY(-40px) translateX(60px);}*/

.false-hover .sit-wrap {transform: rotate(-7deg) translateX(-100px) translateY(-25px) scale(0.6);}
/*.false-hover .situation-txt {transform: rotate(-13deg) translateY(-40px) translateX(-60px);}*/

.true-false-panel {margin-top: -220px; width: 500px; margin-left: -250px;}

}
}

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

.sound-button {width: 40px; height: 40px;}
.sound-button:after {background-size: 24px auto;}
.close-button {width: 40px; height: 40px;}
.close-button:after {background-size: 18px auto;}
.close-popup .btn a {font-size: 19px; line-height: 50px;}
.close-popup .title {font-size: 24px; line-height: 110%; margin: 0 0 20px;}
.situation-block .btns .false button {background-position: right center; z-index: 10; width: 60%; background-image: url(/local/templates/main/img/situation/false-mob-bg.svg);}
.situation-block .btns .true button {background-position: left center; z-index: 10; width: 60%; background-image: url(/local/templates/main/img/situation/true-mob-bg.svg);}
.true-false-panel {width: 404px; top: 0; margin-top: 0; margin-left: -202px; border-radius: 0 0 13px 13px;}
.true-false-panel:before, .true-false-panel:after {border-radius: 0 0 13px 13px;}

.true-hover .situation-txt {transform: none;}
.false-hover .situation-txt {transform: none;}

@media all and (max-height:950px) {
  .start-block.bottom .sit-wrap {top: calc(100dvh - 30px); margin-top: 0;}
  .sit-wrap {transform: scale(0.7); margin-top: -240px;}
  .true-hover .sit-wrap {transform: rotate(7deg) translateX(100px) translateY(-25px) scale(0.7);}

  
  .false-hover .sit-wrap {transform: rotate(-7deg) translateX(-100px) translateY(-25px) scale(0.7);}

}


}

@media all and (max-width: 450px) {
.true-false-panel {margin-left: 0; left: 58px; width: calc(100% - 116px);}
.start-block.bottom .sit-wrap {top: calc(100dvh - 60px); margin-top: 0;}

@media all and (max-height:850px) {
  .start-block.bottom .sit-wrap {top: calc(100dvh + 10px); margin-top: 0;}
  
}

@media all and (min-height:900px) {
  .start-block.bottom .sit-wrap {top: calc(100dvh - 100px); margin-top: 0;}
  
}

}
/* End */
/* /local/templates/main/style.css?173271192339210 */