@charset "UTF-8";
* {margin: 0; padding: 0; box-sizing:border-box;}

html, body {margin: 0; padding: 0; width: 100%; height: 100%; background-color: #FCFCFC; font-size: medium; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; box-sizing: border-box; scrollbar-gutter: stable;  overflow-y: scroll;}
body {display: flex; flex-direction: column; align-items: flex-start; min-height: 100vh;}

@font-face {font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('fonts/montserrat-v31-cyrillic-regular.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Raleway'; font-style: normal; font-weight: 700; src: url('fonts/raleway-v37-cyrillic-700.woff2') format('woff2');}

section {flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; min-width: 100%; padding: 0 0 40px; box-sizing: border-box;}
.article {min-width: 45rem; max-width: 55rem; padding: 60px 0; box-sizing: border-box; font: 400 1.4rem 'Montserrat', sans-serif; line-height: 1.5; text-align: left;}
.article h1 {padding: 0 0 3rem; font: 700 3rem 'Raleway', sans-serif; letter-spacing: 0.03em; text-align: center;}
.article h2 {padding: 30px 0; font: 700 1.6rem 'Raleway', sans-serif; text-align: left;}
.article h3 {padding: 30px 0; font: 700 1.4rem 'Raleway', sans-serif; text-align: left;}

.dark_text {color: #282828;}


.app {width: min(760px, 100%); padding: 0 16px 24px; display: block; margin: 0 auto;}
.card {width: 100%; padding: clamp(10px,5vw,30px);}
.screen{ display:none}.screen.active{display: block}
p {line-height:1.65; margin:0 0 16px}
.lead {color: #4d4a46}
.btn {margin: 20px 0 0; width: auto; background: #33323F; font: 400 1.3rem 'Montserrat', sans-serif; color: #fff; padding: 15px 30px; border: none; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; min-width: 200px;}
.btn:hover {-webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o--transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);}
.btn.secondary {background:#33323F; color: #242321; box-shadow:none}
.actions {display:flex; justify-content: center; margin-top: 28px}
.progress {height: 5px; background: #A9A9A9; border-radius: 99px; overflow: hidden ;margin-bottom: 25px}
.progress>span {display: block; height: 100%; background: #33323F; transition: width .25s}
.question-number {font: 400 1.4rem 'Montserrat', sans-serif; color: #716e69; margin-bottom: 10px}
.option-list {display:grid; gap: 11px; margin-top: 24px}
.option {width: 100%; padding: 17px 18px; text-align: left; background: #fff; border: 1px solid #000; border-radius: 14px; color: #242321; font: 400 1.4rem 'Montserrat', sans-serif; cursor:pointer; transition:.16s; border-color .16s,background .16s,transform .16s}
.result-kicker {font: 400 1.4rem 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing:.12em; color: #716e69; margin-bottom:12px}
.result-intro {font: 400 1.4rem 'Montserrat', sans-serif; color: #282828; line-height:1.6}
.quote {margin:20px 0; padding:17px 19px;border-left: 3px solid #4d5f52; background: #f7f6f3; border-radius:0 12px 12px 0; font-size: 17px;line-height: 1.55}
.result-list {padding-left :22px; margin: 10px 0 0}.result-list li {margin: 9px 0; line-height: 1.5}
.tag {display: inline-block; margin-top: 8px; padding: 7px 11px; border-radius: 99px; background: #eeece7; color: #57534d; font-size:14px}
.note {color: #33323F; font: 400 1.4rem 'Montserrat', sans-serif; line-height: 1.5;}
.fade {animation:fade .3s ease}@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:520px){
 .app {padding:10px 10px 25px; align-items: flex-start}
 .card {border-radius:18px; padding:25px 19px; min-height:calc(100vh - 35px)}
 p {font: 400 1.4rem 'Montserrat', sans-serif;}.lead{font: 400 1.4rem 'Montserrat', sans-serif;}
 .option {padding: 15px 14px }
}

.rise {margin-top: -70px;}

footer {flex-shrink: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 6rem 0 0; padding: 0; background-color: #483E43; box-sizing: border-box;}
.footer-text {min-width: 37.5em; max-width: 62.5rem; padding: 5.5rem 1.25rem 1.25rem 1.25rem; text-align: center; box-sizing: border-box;}
.footer-text li {display: inline; padding: 0 1.25rem 0 0;}
.footer-text a {text-decoration: none; font: 400 1.1rem 'Montserrat', sans-serif; color: #FEFEFE;}
.footer-text a:hover {text-decoration: underline;}

.pd {width: 100%; margin: 0 auto 3rem; font: 400 0.8rem 'Montserrat', sans-serif; color: #FEFEFE; box-sizing: border-box;}
.pd a {font: 400 0.8rem 'Montserrat', serif; color: #FEFEFE;}

#bg_popup {display: none; max-width: 700px; position: fixed; background: rgba(0, 0, 0, 0.8); bottom: 20px; left: 0; margin: 0 20% 0 30px; padding: 20px 40px 20px 20px; z-index: 10; font: 400 0.8rem 'Montserrat', serif; color: #f5f5f5; border-radius: 20px;}
#bg_popup a{color: #f5f5f5;}
.close_bg {display: block; position: absolute; top: 0px; right: 0px; width: 30px; height: 30px; padding: 10px 0 0 10px; color: #fff; background: #af1c23; cursor: pointer; text-decoration: none; border-radius: 0 20px 0 20px;}


@media only screen and (max-width : 1000px)
{
.article {min-width: 100%; max-width: 100%; width: 100%; padding: 30px 0; box-sizing: border-box; font: 400 1.4rem 'Montserrat', sans-serif; line-height: 1.5; text-align: left;}
.article h1 {padding: 0 0 2.2rem; font: 700 2.2rem 'Raleway', sans-serif; letter-spacing: 0.03em; text-align: center;}
.article h2 {padding: 30px 0; font: 700 1.6rem 'Raleway', sans-serif; text-align: left;}
.article h3 {padding: 30px 0; font: 700 1.4rem 'Raleway', sans-serif; text-align: left;}

footer {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; margin: 6rem 0 0; padding: 0 0 4rem; background-color: #483E43; box-sizing: border-box;}
.footer-text {min-width: 100%; max-width: 100%; padding: 1.25rem; text-align: center; box-sizing: border-box;}
.footer-text li {display: inline; padding: 0 1.25rem 0 0; box-sizing: border-box;}
.footer-text a {text-decoration: none; font: 400 1.1rem 'Montserrat', line-height: 1.5; sans-serif; color: #FEFEFE;}
.footer-text a:hover {text-decoration: underline;}

.pd {width: 100%; margin: 0 auto; font: 400 0.8rem 'Montserrat', serif; color: #FEFEFE; box-sizing: border-box;}
.pd a {font: 400 0.7rem 'Montserrat', serif; color: #FEFEFE;}

#bg_popup {display: none; width: 100%; position: fixed; background: rgba(0, 0, 0, 0.8); bottom: 0; left: 0; margin: 0; padding: 30px 20px; z-index: 10; font: 400 0.8rem sans-serif; color: #fff; box-sizing: border-box;}
#bg_popup a {color: #fff;}
.close_bg {display: block; position: absolute; top: 0; right: 0; width: 10px; height: 10px; padding: 4px 10px 10px 2px; color: #fff; background: #af1c23; cursor: pointer; text-decoration: none; border-radius: 0 20px 0 20px;}
}