.viewport-wrapper,body,html{min-width:320px;height:100%}
body,button,input,select,textarea{font-family:Lato,sans-serif}
.preloader,body{background:var(--c01)}
.quiz label.selected .key:before,.start .bt a{background:var(--c04)}
.quiz .cols .item .title,.quiz .rows .item .title{font-size:16px;line-height:28px}
.quiz .key,.quiz .rate label,.result .title,.start .inner{text-align:center}
.navi,.start .bt a{box-shadow:var(--c07) 0 3px 12px 0}
.navi,.quiz .bt{user-select:none}
.navi .arr,.quiz .bt,button,label{cursor:pointer}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}
img,textarea{vertical-align:top}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{position:relative;font-size:24px;line-height:32px;color:var(--c02);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
*,:after,:before{outline:0;max-height:999999px;box-sizing:border-box}
img{border:none}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
button::-moz-focus-inner{padding:0;border:0}
.viewport-wrapper{position:relative;overflow:hidden}
a{color:var(--c03)}
H1,H2,H3,H4,H5,H6{margin:0;padding:0}
input[type=password],input[type=text],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-border-radius:0;border-radius:0}
textarea{overflow:auto;resize:none}
button{border:0}
.dib{display:inline-block;vertical-align:baseline}
.clear_fix{clear:both;display:block;height:0}
.hidden,.preloader.hide{display:none}
.inp-error{border-color:red!important}
.preloader{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:99999}
.preloader img{width:100px}
.result .wrap,.start{position:absolute;left:0;right:0;top:0;bottom:0;overflow:auto;display:flex;padding:0 15px}
.start .inner{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:auto;padding:50px 0}
.banner,.quiz .step{top:0;padding:0 15px}
.start .im img{max-width:100%}
.start .title{margin:40px 0;font-weight:400;font-size:inherit;line-height:inherit}
.quiz label,.start .nav{position:relative}
.start .bt a{display:block;border-radius:4px;width:150px;height:50px;line-height:50px;text-decoration:none;font-weight:700;color:var(--c05)}
.start .press{position:absolute;top:0;bottom:0;left:100%;margin-left:12px;display:flex;align-items:center;font-size:12px;line-height:normal;white-space:nowrap}
.quiz,.result{position:absolute;left:0;right:0;top:0;bottom:0;display:none}
.quiz label:not(.rating){padding:6px;box-shadow:var(--c08) 0 0 0 1px inset;background:var(--c16);border-radius:4px;color:var(--c04)}
.quiz label.selected{animation-duration:.1s;animation-name:blinks;animation-iteration-count:4}
.quiz label:not(.rating).selected{box-shadow:var(--c08) 0 0 0 2px inset}
.quiz label input[type=checkbox],.quiz label input[type=radio]{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;cursor:pointer;opacity:0}
.quiz .key{position:relative;z-index:1;display:block;width:22px;height:22px;line-height:22px;font-weight:700;font-size:12px}
.banner,.quiz .check,.quiz .key span,.quiz .key:before,.quiz .ok,.quiz .ok svg,.quiz .ok:before,.quiz .step,.quiz .stitle span{position:absolute}
.quiz .key:before{left:0;right:0;top:0;bottom:0;display:block;content:'';border-radius:2px;background:var(--c09);border:1px solid var(--c04);z-index:-1}
.quiz .key span{display:block;opacity:0;left:-17px;top:0}
.quiz label.selected .key{color:var(--c06)}
.quiz .ok{display:block;top:0;right:0;width:48px;height:48px;border-radius:0 4px 0 0;overflow:hidden;opacity:0}
.banner,.quiz .cols .item .im img,.quiz .inner,.quiz .rows .item .im img,.quiz .wrap{width:100%}
.quiz .ok:before{content:'';display:block;width:0;height:0;border-width:24px;border-style:solid;border-image:initial;border-color:var(--c10) var(--c10) transparent transparent;right:0;top:0}
.quiz .ok svg{fill:var(--c06);right:5px;top:9px}
.navi.show,.quiz label.selected .check,.quiz label.selected .ok{opacity:1}
.quiz .check{opacity:0}
.banner .ic path,.quiz .check svg{fill:var(--c10)}
.quiz .step{left:0;right:0;bottom:0;overflow:auto;display:flex;-webkit-transition:.7s cubic-bezier(.25,.46,.45,.94);-moz-transition:.7s cubic-bezier(.25,.46,.45,.94);-o-transition:.7s cubic-bezier(.25,.46,.45,.94);transition:.7s cubic-bezier(.25,.46,.45,.94);transform:translate(0,0);opacity:1}
.quiz .step.bottom{transform:translate(0,100vh);opacity:0}
.quiz .step.top{transform:translate(0,-100vh);opacity:0}
.quiz .inner{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:auto;padding:0}
.quiz .wrap{max-width:764px}
.quiz .stitle{position:relative;margin-bottom:32px}
.quiz .stitle span{display:block;right:100%;margin-right:10px;top:5px;color:var(--c04);font-size:16px;line-height:24px}
.quiz .rows{display:flex;flex-wrap:wrap;margin:-8px -4px 0}
.quiz .rows .item{position:relative;width:calc(25% - 8px);margin:8px 4px 0;display:block}
.quiz .rows .item .im{display:block;margin-bottom:6px}
.quiz .rows .item .act{position:relative;margin:4px;display:block}
.quiz .rows .item .im+.act{margin:0 0 4px}
.quiz .rows .item .act .key{position:absolute;left:0;top:3px}
.quiz .rows .item .title{display:block;padding-left:32px;word-break:break-word}
.quiz .rows .item input[type=checkbox]~.act{padding-bottom:45px}
.quiz .rows .item .check{left:50%;transform:translateX(-50%);bottom:15px}
.quiz .cols .item{display:flex;align-items:center;margin-top:8px;min-height:62px}
.quiz .cols .item:first-child{margin-top:0}
.quiz .cols .item .im{flex:0 0 169px;width:169px;margin-right:8px}
.quiz .cols .item .entry{display:flex;align-items:center;padding-left:2px}
.quiz .cols .item .entry .key{margin-right:10px}
.quiz .cols .item .check{top:50%;transform:translateY(-50%);right:20px}
.quiz .fields .item{margin-top:32px}
.quiz .fields .item .lv{margin-bottom:10px;font-size:22px;line-height:30px;color:var(--c04)}
.quiz .fields .item input{width:100%;padding:0 0 7px;background:0 0;border:0;border-bottom:1px solid var(--c17);transition:box-shadow .2s ease-out,border .2s ease-out;color:var(--c10);font-size:28px}
.quiz .fields .item ::-webkit-input-placeholder{color:var(--c14)}
.quiz .fields .item :-moz-placeholder{color:var(--c14)}
.quiz .fields .item ::-moz-placeholder{color:var(--c14)}
.quiz .fields .item :-ms-input-placeholder{color:var(--c14)}
.quiz .fields .item input:focus{border-color:var(--c10);box-shadow:var(--c10) 0 1px}
.quiz .nav{margin-top:16px;display:flex;align-items:center;transform:translate(0,15px);-webkit-transition:.2s ease-out;-moz-transition:.2s ease-out;-o-transition:.2s ease-out;transition:.2s ease-out;opacity:0}
.banner.show,.quiz .nav.show{opacity:1;transform:translate(0,0)}
.quiz .bt{display:flex;align-items:center;justify-content:center;padding:0 10px;height:40px;background:var(--c10);border-radius:4px;border:0;-webkit-transition:background-color .2s ease-out;-moz-transition:background-color .2s ease-out;-o-transition:background-color .2s ease-out;transition:background-color .2s ease-out;color:var(--c11);font-size:20px;font-weight:700}
.quiz .bt .ic{margin-left:8px}
.quiz .press{margin-left:12px;font-size:12px;line-height:normal}
.quiz .rate{display:flex;flex-direction:row-reverse;justify-content:flex-end}
.quiz .rate label{width:71px;padding:0 8px;display:flex;flex-direction:column;font-size:20px;line-height:28px;color:var(--c04)}
.banner,.navi{align-items:center;opacity:0;display:flex}
.quiz .rate label svg{fill:var(--c10);margin-bottom:10px}
.quiz .rate label svg .symbolFill{fill:var(--c01)}
.quiz .rate label.selected svg .symbolFill,.quiz .rate label.selected~label svg .symbolFill{fill:var(--c13)}
.banner{left:0;height:60px;background:var(--c12);justify-content:center;transform:translate(0,-100%);-webkit-transition:1s cubic-bezier(0,0,.2,1);-moz-transition:1s cubic-bezier(0,0,.2,1);-o-transition:1s cubic-bezier(0,0,.2,1);transition:1s cubic-bezier(0,0,.2,1)}
.banner .inn{position:relative;padding-left:22px}
.banner .ic,.navi{position:absolute}
.banner .ic{left:0;top:-6px}
.banner .tx{line-height:1}
.result .inner{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:auto;padding:90px 0}
.result .box{margin:50px auto 0;max-width:700px;border:1px solid var(--c04);padding:20px;border-radius:10px;font-size:18px}
.navi{bottom:16px;right:16px;border-radius:4px;line-height:0;background:var(--c10);justify-content:center;width:73px;height:32px;transition:opacity 1s ease-out}
.navi .arr{width:36px;height:100%;display:flex;align-items:center;justify-content:center;transition:background .2s ease-out}
.navi .arr.l{border-right:1px solid rgba(29,42,13,.3);border-radius:4px 0 0 4px}
.navi .arr.r{border-radius:0 4px 4px 0}
.navi .arr.disabled{cursor:default}
.navi .arr.disabled svg{fill:var(--c15)}
@keyframes blinks {
    0%{opacity:.5}
    100%{opacity:1}
}