@import url(https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap);
label.checkbox{
	position: relative;
    bottom: 15px;
}
.checkbox__text {
    position: relative;
    padding-left: 25px;
    cursor: pointer
}

.checkbox__text__line {
    display: block;
    cursor: pointer;
    margin-left: 25px
}

.checkbox__text:before {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACwSURBVHgB3ZK9DcJADIWf70BKGTZgAqTroUhHSiZghTBBskHIBjABHaGLRAaIAgOQDbiSAnxcIsrjr81XWU/PlvVsgiUvzzHAkS19uNFEtJlPJys6HE+pgRndHhwtAqVd7ryoxpAiYYOG8rK+4s4qDFSDD+yKyvcG4mLXqQ1+pPUK/ElfGnQb2TdjdwvrFcyceUOZvgQn3UApY5v/llphX1ZrMmIJevMaBhrEWThTyRNgPkI7E0ACIAAAAABJRU5ErkJggg==);
    position: absolute;
    top: 1px;
    left: 0;
    -webkit-transition: .2s;
    transition: .2s
}

.checkbox__text:after {
    content: "";
    position: absolute;
    top: 0;
    left: 1px;
    -webkit-transition: .2s;
    transition: .2s
}

.checkbox input:checked+.checkbox__text:before {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACwSURBVHgB3ZK9DcJADIWf70BKGTZgAqTroUhHSiZghTBBskHIBjABHaGLRAaIAgOQDbiSAnxcIsrjr81XWU/PlvVsgiUvzzHAkS19uNFEtJlPJys6HE+pgRndHhwtAqVd7ryoxpAiYYOG8rK+4s4qDFSDD+yKyvcG4mLXqQ1+pPUK/ElfGnQb2TdjdwvrFcyceUOZvgQn3UApY5v/llphX1ZrMmIJevMaBhrEWThTyRNgPkI7E0ACIAAAAABJRU5ErkJggg==)
}

.checkbox input:checked+.checkbox__text:after {
    content: url(../img/check.54f7cab9.svg)
}

.question {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
    min-height: 300px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px
}

.question .traditional {
    cursor: pointer
}

.question-mob {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 5px;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-transition: all 1s;
    transition: all 1s;
    -webkit-animation: slideTop 1s;
    animation: slideTop 1s
}

.question-mob .left,
.question-mob .right,
.question .left,
.question .right {
    max-width: 250px;
    font-size: 12px;
    line-height: 14px;
    color: #384c63;
    opacity: .5;
    cursor: pointer
}

.question-mob .left,
.question-mob .right {
    display: none
}

.question-mob .left {
    max-width: 200px;
    font-size: 10px
}

.question .left,
.question .right {
    position: absolute
}

.question .left {
    left: 10px;
    margin-left: 30px
}

.question .right {
    max-width: 180px;
    right: 10px;
    margin-right: 20px
}

.question-mob .left .my-underline,
.question .left .my-underline {
    text-decoration: underline
}

.question-mob .left .my-bold,
.question .left .my-bold {
    font-weight: 700
}

.question-mob .left .my-link,
.question .left .my-link {
    cursor: pointer;
    color: #1b84bf;
    font-weight: 700
}

.question-mob .left .my-link:hover,
.question .left .my-link:hover {
    text-decoration: underline
}

@media (max-width:762px) {
    .question .left,
    .question .right {
        display: none
    }
    .question-mob .left,
    .question-mob .right {
        display: block
    }
}

.question-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center
}

.question .symbols {
    font-size: 90px;
    color: #384c63
}

.question .symbols.small {
    font-size: 56px
}

.question .symbols.smaller {
    font-size: 25px
}

.question .text {
    font-size: 24px;
    color: #384c63;
    -webkit-transition: all 1s;
    transition: all 1s;
    min-height: 34px;
    margin-top: 5px;
    margin-bottom: 5px
}

.question .text.text-green {
    color: #000
}

.symbols.show {
    -webkit-animation: fadeInBlur 1s backwards;
    animation: fadeInBlur 1s backwards;
    font-size: 90px;
    -webkit-transition: all 1s;
    transition: all 1s
}

.symbols.hide.small,
.symbols.hide.smaller,
.symbols.hide {
    -webkit-animation: fadeInBlur 1s both;
    animation: fadeInBlur 1s both;
    font-size: 0;
    -webkit-transition: all 1s;
    transition: all 1s
}

.symbols.show.smaller,
.symbols.small,
.symbols.smaller {
    font-size: 30px
}

.pinyin.show {
    font-size: 90px;
    color: #384c63 !important;
    -webkit-transition: all 1s;
    transition: all 1s
}

.pinyin.show.small {
    font-size: 50px
}

.pinyin.show.smaller {
    font-size: 30px
}

.pinyin.hide.small,
.pinyin.hide.smaller,
.pinyin.hide {
    font-size: 24px;
    -webkit-transition: all 1s;
    transition: all 1s
}

.question .pinyin-no-animation {
    font-size: 24px;
    color: #518dd4;
    max-width: 900px
}

.pinyin-no-animation.show.smaller {
    font-size: 30px;
    color: #384c63
}

.question .pinyin {
    color: #518dd4;
    max-width: 900px;
    opacity: 0
}

.question .pinyin.delay {
    -webkit-animation: fadeInBlur 1s ease-in forwards;
    animation: fadeInBlur 1s ease-in forwards
}

.question .tooltip {
    color: red;
    font-size: 20px
}

@-webkit-keyframes slideTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes slideTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes fadeInBlur {
    0% {
        opacity: 0;
        -webkit-filter: blur(5px);
        filter: blur(5px)
    }
    to {
        opacity: 1;
        -webkit-filter: blur(0);
        filter: blur(0)
    }
}

@keyframes fadeInBlur {
    0% {
        opacity: 0;
        -webkit-filter: blur(5px);
        filter: blur(5px)
    }
    to {
        opacity: 1;
        -webkit-filter: blur(0);
        filter: blur(0)
    }
}

.symbol-list {
    list-style: none;
    display: inline-block
}

.list-complete-item {
    -webkit-transition: all 1s;
    transition: all 1s;
    display: inline-block;
    margin-right: 10px
}

.list-complete-enter,
.list-complete-leave-to {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px)
}

.list-complete-leave-active {
    position: absolute
}

@media (max-width:1370px) {
    .question .symbols {
        font-size: 80px
    }
    .question .symbols.small {
        font-size: 56px
    }
    .question .symbols.smaller {
        font-size: 25px
    }
    .symbols.hide.small,
    .symbols.hide.smaller,
    .symbols.hide {
        -webkit-animation: fadeInBlur 1s both;
        animation: fadeInBlur 1s both;
        font-size: 0;
        -webkit-transition: all 1s;
        transition: all 1s
    }
    .pinyin.show {
        font-size: 80px
    }
    .pinyin-no-animation.small,
    .pinyin-no-animation.smaller {
        font-size: 24px
    }
    .pinyin-no-animation.show.smaller {
        font-size: 30px;
        color: #384c63
    }
    .pinyin.show.small {
        font-size: 40px
    }
    .pinyin.show.smaller {
        font-size: 30px
    }
    .pinyin.hide.small,
    .pinyin.hide.smaller {
        font-size: 24px
    }
    .question {
        min-height: 200px;
        margin-bottom: 30px
    }
}

@media (max-width:1150px) {
    .question .symbols {
        font-size: 70px
    }
    .pinyin.hide.small {
        font-size: 24px
    }
    .pinyin.hide.smaller {
        font-size: 20px
    }
    .question .symbols.small {
        font-size: 50px
    }
    .symbols.hide.small,
    .symbols.hide.smaller,
    .symbols.hide {
        -webkit-animation: fadeInBlur 1s both;
        animation: fadeInBlur 1s both;
        font-size: 0;
        -webkit-transition: all 1s;
        transition: all 1s
    }
    .pinyin.show {
        font-size: 70px
    }
    .pinyin.show.small {
        font-size: 40px
    }
    .pinyin.show.smaller {
        font-size: 30px
    }
    .pinyin-no-animation.small,
    .pinyin-no-animation.smaller {
        font-size: 20px
    }
    .pinyin-no-animation.show.smaller {
        font-size: 30px;
        color: #384c63
    }
    .question {
        min-height: 180px;
        margin-bottom: 10px
    }
}

@media (max-width:805px) {
    .question {
        padding-left: 10px;
        padding-right: 10px
    }
    .question .symbols.show {
        font-size: calc(30px + 3vw)
    }
    .question .text {
        font-size: calc(13px + .4vw);
        min-height: calc(13px + .4vw);
        line-height: calc(13px + .4vw)
    }
    .question .symbols.small {
        font-size: calc(20px + 2vw)
    }
    .question .symbols.smaller {
        font-size: calc(14px + .4vw)
    }
    .symbols.hide.small,
    .symbols.hide.smaller,
    .symbols.hide {
        -webkit-animation: fadeInBlur 1s both;
        animation: fadeInBlur 1s both;
        font-size: 0;
        -webkit-transition: all 1s;
        transition: all 1s
    }
    .question .pinyin.show {
        font-size: calc(30px + 3vw)
    }
    .pinyin.hide.small,
    .pinyin.hide.smaller {
        font-size: calc(14px + .4vw)
    }
    .pinyin.show.small {
        font-size: calc(20px + .4vw)
    }
    .pinyin-no-animation.small,
    .pinyin-no-animation.smaller,
    .pinyin.show.smaller {
        font-size: calc(14px + .4vw)
    }
    .pinyin-no-animation.show.smaller {
        font-size: calc(14px + .4vw);
        color: #384c63
    }
    .question .left,
    .question .right {
        font-size: 10px
    }
    .question .left {
        max-width: 200px
    }
}

@media (max-width:770px) {
    .question {
        padding-left: 20px;
        padding-right: 20px
    }
}

@media (max-width:700px) {
    .question {
        padding-left: 10px;
        padding-right: 10px
    }
}

.question {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
    min-height: 300px;
    margin-bottom: 30px
}

.question-wrapper {
    text-align: center
}

.question .symbols {
    font-size: 90px;
    color: #384c63
}

.question .text {
    font-size: 24px;
    color: #384c63;
    -webkit-transition: all 1s;
    transition: all 1s;
    line-height: 34px;
    height: 34px
}

.question .text.text-green {
    color: #000
}

.symbols.hide.small,
.symbols.hide.smaller,
.symbols.hide {
    font-size: 0
}

.symbols.hide.small,
.symbols.hide.smaller,
.symbols.hide,
.symbols.show {
    -webkit-animation: fadeInBlur 1s both;
    animation: fadeInBlur 1s both;
    -webkit-transition: all 1s;
    transition: all 1s
}

.symbols.show {
    font-size: 90px
}

.symbols.show.smaller,
.symbols.small,
.symbols.smaller {
    font-size: 30px
}

.pinyin.show {
    font-size: 90px;
    color: #384c63 !important;
    -webkit-transition: all 1s;
    transition: all 1s
}

.pinyin.show.small {
    font-size: 50px
}

.pinyin.show.smaller {
    font-size: 24px
}

.pinyin.hide.small,
.pinyin.hide.smaller,
.pinyin.hide {
    font-size: 24px;
    -webkit-transition: all 1s;
    transition: all 1s
}

.question .pinyin-no-animation {
    font-size: 24px;
    color: #518dd4;
    max-width: 900px
}

.question .pinyin {
    color: #518dd4;
    max-width: 900px;
    opacity: 0
}

.question .pinyin.delay {
    -webkit-animation: fadeInBlur 1s ease-in forwards;
    animation: fadeInBlur 1s ease-in forwards
}

.question .tooltip {
    color: red;
    font-size: 20px
}

.arrow {
    width: 48px;
    height: 76px
}

@-webkit-keyframes fadeInBlur {
    0% {
        opacity: 0;
        -webkit-filter: blur(5px);
        filter: blur(5px)
    }
    to {
        opacity: 1;
        -webkit-filter: blur(0);
        filter: blur(0)
    }
}

.symbol-list {
    list-style: none;
    display: inline-block
}

.list-complete-item {
    margin-right: 10px
}

.list-complete-enter,
.list-complete-leave-to {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px)
}

.list-complete-leave-active {
    position: absolute
}

@media (max-width:1370px) {
    .question .symbols.show,
    .question .symbols {
        font-size: 80px
    }
    .question .symbols.small,
    .question .symbols.smaller {
        font-size: 25px
    }
    .pinyin.show {
        font-size: 30px
    }
    .pinyin-no-animation.small,
    .pinyin-no-animation.smaller {
        font-size: 24px
    }
    .pinyin.show.small,
    .pinyin.show.smaller {
        font-size: 20px
    }
    .pinyin.hide.small,
    .pinyin.hide.smaller {
        font-size: 24px
    }
    .question {
        min-height: 200px;
        margin-bottom: 30px
    }
}

@media (max-width:1150px) {
    .question .symbols.show,
    .question .symbols {
        font-size: 70px
    }
    .question .symbols.small,
    .question .symbols.smaller {
        font-size: 22px
    }
    .pinyin.show {
        font-size: 10px
    }
    .pinyin.show.small,
    .pinyin.show.smaller {
        font-size: 30px
    }
    .pinyin-no-animation.small,
    .pinyin-no-animation.smaller,
    .pinyin.hide.small,
    .pinyin.hide.smaller {
        font-size: 20px
    }
    .question {
        min-height: 180px;
        margin-bottom: 10px
    }
}

@media (max-width:805px) {
    .question {
        padding-left: 10px;
        padding-right: 10px
    }
    .question .symbols.show {
        font-size: calc(30px + 3vw)
    }
    .question .text {
        font-size: calc(13px + .4vw);
        min-height: calc(13px + .4vw);
        line-height: calc(13px + .4vw)
    }
    .question .symbols.small {
        font-size: calc(20px + 2vw)
    }
    .question .symbols.smaller {
        font-size: calc(14px + .4vw)
    }
    .symbols.hide.small,
    .symbols.hide.smaller,
    .symbols.hide {
        -webkit-animation: fadeInBlur 1s both;
        animation: fadeInBlur 1s both;
        font-size: 0;
        -webkit-transition: all 1s;
        transition: all 1s
    }
    .question .pinyin.show {
        font-size: calc(30px + 3vw)
    }
    .pinyin.hide.small,
    .pinyin.hide.smaller {
        font-size: calc(14px + .4vw)
    }
    .pinyin.show.small {
        font-size: calc(20px + .4vw)
    }
    .pinyin-no-animation.small,
    .pinyin-no-animation.smaller,
    .pinyin.show.smaller {
        font-size: calc(14px + .4vw)
    }
    .pinyin-no-animation.show.smaller {
        font-size: calc(14px + .4vw);
        color: #384c63
    }
    .question .left,
    .question .right {
        font-size: 10px
    }
    .question .left {
        max-width: 200px
    }
}

@keyframes fadeInBlur {
    0% {
        opacity: 0;
        -webkit-filter: blur(5px);
        filter: blur(5px)
    }
    to {
        opacity: 1;
        -webkit-filter: blur(0);
        filter: blur(0)
    }
}

.list-complete-item {
    -webkit-transition: all 1s;
    transition: all 1s;
    display: inline-block
}

.move-char-left {
    position: relative;
    -webkit-transform: translate(-100px);
    transform: translate(-100px)
}

.move-right {
    position: relative;
    -webkit-transform: translate(100px);
    transform: translate(100px)
}

.invisible {
    color: #fff !important
}

.zoom-out {
    font-size: 1px !important
}

@media (max-width:1370px) {
    .question .symbols {
        font-size: 80px
    }
    .symbols.hide.small,
    .symbols.hide.smaller,
    .symbols.hide {
        -webkit-animation: fadeInBlur 1s both;
        animation: fadeInBlur 1s both;
        font-size: 0;
        -webkit-transition: all 1s;
        transition: all 1s
    }
    .question {
        min-height: 200px
    }
    .pinyin.show {
        font-size: 80px
    }
    .move-char-left {
        -webkit-transform: translate(-90px);
        transform: translate(-90px)
    }
    .move-right {
        -webkit-transform: translate(90px);
        transform: translate(90px)
    }
}

@media (max-width:1150px) {
    .pinyin.show,
    .question .symbols {
        font-size: 70px
    }
    .symbols.hide.small,
    .symbols.hide.smaller,
    .symbols.hide {
        -webkit-animation: fadeInBlur 1s both;
        animation: fadeInBlur 1s both;
        font-size: 0;
        -webkit-transition: all 1s;
        transition: all 1s
    }
    .move-char-left {
        -webkit-transform: translate(-80px);
        transform: translate(-80px)
    }
    .move-right {
        -webkit-transform: translate(80px);
        transform: translate(80px)
    }
}

@media (max-width:805px) {
    .move-char-left {
        -webkit-transform: translate(calc(-38px - 3vw));
        transform: translate(calc(-38px - 3vw))
    }
    .move-right {
        -webkit-transform: translate(calc(38px + 3vw));
        transform: translate(calc(38px + 3vw))
    }
}

.answer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(170px + 5vw);
    min-height: calc(170px + 5vw);
    overflow-wrap: break-word;
    border-radius: 30px;
    margin-bottom: 20px;
    font-weight: 700;
    border: 0 solid transparent;
    -webkit-animation: fadeInDown 1s ease-out both;
    animation: fadeInDown 1s ease-out both;
    cursor: pointer;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: 20px;
    margin-right: 20px
}

.answer#a1.correct {
    -webkit-animation: blinkCorrectA1 .3s 4;
    animation: blinkCorrectA1 .3s 4;
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.answer#a2.correct {
    -webkit-animation: blinkCorrectA2 .3s 4;
    animation: blinkCorrectA2 .3s 4;
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.answer#a3.correct {
    -webkit-animation: blinkCorrectA3 .3s 4;
    animation: blinkCorrectA3 .3s 4;
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.answer#a4.correct {
    -webkit-animation: blinkCorrectA4 .3s 4;
    animation: blinkCorrectA4 .3s 4;
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.answer#a1.start {
    -webkit-animation: blinkPronounceA1S .3s 3;
    animation: blinkPronounceA1S .3s 3
}

.answer#a2.start {
    -webkit-animation: blinkPronounceA2S .3s 3;
    animation: blinkPronounceA2S .3s 3
}

.answer#a3.start {
    -webkit-animation: blinkPronounceA3S .3s 3;
    animation: blinkPronounceA3S .3s 3
}

.answer#a4.start {
    -webkit-animation: blinkPronounceA4S .3s 3;
    animation: blinkPronounceA4S .3s 3
}

.answer-block {
    position: relative
}

.answer-wrong-wrap {
    position: absolute;
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
    bottom: 12px
}

.answer-wrong-wrap,
.answer-wrong {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 30px
}

.answer-wrong {
    width: 901px;
    min-height: 383px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4UAAAF/CAYAAAD+Rmz2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAA4dSURBVHgB7d1Pb1x3vcfx7++Mr26gXMl3fdHFLEDs6oBovau7qyojzCPAacqa9hGk3bEj3SERiLtj11RqSncZVriqRJwdoguMVCR2daVAW8kzh5kBh7RNUsdxEs98Xi/J9px/yXL01vec32n1kKyvby1/+pVaHw8G32itVtu4Vvvql6u1lQIAAODO+n5v0k17fdV+q/5G1Xh45mbtDofb+/UQtDpB0xD85GvdTyf/7Pp0swAAADgpw0koXmkHozd33tneqxNyIlG4trG1XjW4UEIQAADgURhWjV7deWt7WA/ogaJQDAIAADxGfe31fXvp3bcvvVnHdKwoXHtua6WWBpdLDAIAADx+fW3XaDI5PMZtpYO6T09vnP9pdd1vJjX5nQIAAODxa7Vardv8+re/u//B+9dv3N+lRzRdRObj/+kutMlosgAAADiV+r5dfPfqpZePev6RonD2eoknlq71rV8tAAAATrXW124/Gv3oKLeTfmkUzp4fHAyuTc5cKQAAAOZDX3s1Gj37ZWF4zygUhAAAAHNsEoZn/j46e68X33f3ur4Nlt4QhAAAAHNq0nOfPjG4Nn0k8G6n3DUKn/7BCz/3DCEAAMB861utfvzE0oW7Hb/jKynWnn9hq7X2swIAAGDutVZr//etsx/99f3rO1849vkdniMEAABYPH3VfjsYnf38wjNfvH10MLggCAEAABbLZCK4XEuDy3fY/x9PbWxtdjV4owAAAFhQ7dmdty4ND7c+Myns+sHPCwAAgAXWf2bRmVtRuLaxte62UQAAgIW3vrbx4vrhxm2TwsGFAgAAIMB/poWzZwpnK44uDf5cAAAARDhzc/S/w+H2/mxS2A+6zQIAACDGJ1/rXpr+nUVha+2HBQAAQJD2zOz36ubW8pmDwYcFAABAlOktpN2Zg1otAAAA4nz81aVnuqpuvQAAAMjTxt/sWrUnCwAAgDita092fdVyAQAAEKcf12pXfb9SAAAAxGmTIWFXra0UAAAAeVqtdAUAAEAsUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAEE4UAAADBRCEAAEAwUQgAABBMFAIAAAQThQAAAMFEIQAAQDBRCAAAEEwUAgAABBOFAAAAwUQhAABAMFEIAAAQTBQCAAAE6/qq/QIAACDOtAe71veiEAAAIFFfe11rbbcAAACI09pkUjiu8V8KAACAOG08vtG1sUkhAABAor5117uuxqIQAAAg0Kgf3WjTD09vnP9w8mG5AAAAyND3eztXf/3N2XsKWz9+swAAAAjShtPf/3p5fRtsFwAAADlae33253DbLaQAAAAh/n3r6PRjd7ivVf9aAQAAsPD6qlv9dysKP1kaX5wc2C8AAAAWWhuNrxx+vhWFu1e2900LAQAAFl17deed7b3Dre72Q6aFAAAAC6zv9+rgYPv2XYPbN/72x91P/v9bZz+t1p4rAAAAFkx7aee3l3/3mT13Om1t4/y1yZ/1AgAAYDH0tb1z9VfnPr+7u+PJB6Nzs7EiAAAA82/ad6PRq3c61O52zfef/8nqoBtfLwAAAObaaDw6+97b27t3Otbd7aL33v7lbo37cwUAAMDc6vv28t2CcGpwr4s/eP/67te//b3pNHG9AAAAmDPt1XevXvrZvc64ZxROffCnPwyFIQAAwHyZTgi/LAinWh3RUxvnNycnX578LBcAAACnUl/9fjdq537/219dOcr5R47CqbXntlZq0F2r1lYKAACA02W2yuj42Z13tveOesl9ReGhtY0XX5n8bxcKAACAU6GN67X//sfoleFwe/++rqtjmk0NlwaXy7OGAAAAj9NwuqDMzluXhnUMx47CQ2vPv7BVXftxiUMAAIBHafggMXjogaPw0Oxl9238UlX/jGcOAQAATt5sEZlxe73v2pUHjcFDJxaFt1vbeHG9jfvNvqsnywQRAADgWKYR2KrttnHdOMkQvN1DicLPm00Ru365xuOV6mqlAIjVxm153NU3pq84mnzRrU6+6LzqaGq6Wlxrk5/aa6P6qO/6+1okAIDF0Ff7cDJg+2jctf1u6b92d678Yq8eskcShQBwN9OFy8ZLg9Wur82oRxAmEdj69uaoq+FXb46G97tSHACcFFEIwKmyyM+o/+sWoO61ycfhw7j9BwCOQxQCcCrNXn3UdeuTb6oLcx+Hk6lg39rFr9wcvW4iCMBpIwoBONVWN7eWzxwsTSeHF2rOHE4Gz9w8uCgGATitRCEAc2E6OeyXBm9MvrhWaz4M62B0bued7b0CgFNMFAIwV9Y2XnzltE8N+769/O7VSxcLAOaAKARg7jy1cX5z8gV2efpaizpN+n5v1I9/9N7b27sFAHNCFAIwl2YL0Qy6a6dmEZrpewZH42fdLgrAvBGFAMytUxOGghCAOSYKAZhrjz0MBSEAc04UAjD3HlsYCkIAFoAoBGAhPPIwFIQALAhRCMDCeGRhKAgBWCCiEICF8tDDUBACsGBEIQAL56GFoSAEYAGJQgAW0omHoSAEYEGJQgAW1omFoSAEYIGJQgAW2gOHoSAEYMGJQgAW3rHDUBACEEAUAhDhvsNQEAIQQhQCEOPIYSgIAQgiCgGI8qVhKAgBCCMKAYhz1zAUhAAEEoUARPpCGApCAEKJQgBi3QrDKUEIAACQZxqGszgEgFD/BPjml/l32cYVAAAAAElFTkSuQmCC);
    text-align: center
}

.answer-wrong .line1 {
    font-size: 24px;
    margin-top: 60px;
    margin-bottom: 50px;
    max-width: 680px
}

.answer-wrong .line2 {
    font-weight: 700;
    font-size: 44px;
    color: #9fc6f4;
    max-width: 680px
}

.answer-wrong .line3 {
    font-size: 16px;
    color: #9fc6f4;
    margin-bottom: 30px;
    max-width: 680px
}

.answer-cross {
    width: 36px;
    height: 35px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAjCAYAAAD8BaggAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFBSURBVHgBvdYBbcNADAVQp0gK4SCkCJYhyDEYhEBZGIzCGGwMAqFj4DnSRcvSVmf7vvslS5F6Pr1eq5yJDmHmN6mr1CI1EDjrnrv9p9riiW8zEg4z3tl/smBgqAeY+6gKphlVwfxHyUNifcwoJWZLf5Ieyx93tqDK2pn06bcTurItVZTxZLgYzlszFOXEpOMmEBQEg0JBMY2oj1JYTCMqBvMElB0TiPJjAlDtGCAKh9mhBvZHfd2cSJ9v8udTu9ACeiF/XgkZtr+Bm362Z2AwKDCmDRWE8aGCMTYU+0aId6mZ7RkjMGnXj5s8GTRcQVAMnvSaUPJwZltUF6UTldarI5M+P1KXruuq91pZcyk92gzrN+mVetcIYTyptDXlCIwRlY9NOQKjROVHTTkCU0HlWtOKWqS+GD12/qGWAsvHz38BBgpMZ+GaE74AAAAASUVORK5CYII=)
}

.answer .text {
    font-weight: 700;
    font-size: calc(16px + .4vw);
    text-align: center;
    margin-left: 10px;
    margin-right: 10px
}

.answer .variant {
    position: absolute;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    background: rgba(0, 0, 0, .15);
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    font-size: 36px;
    top: 0;
    right: 20px
}

.variant .pronounce {
    display: inline-block;
    -webkit-animation: shakeVariant .4s ease-in-out;
    animation: shakeVariant .4s ease-in-out
}

.answered .variant {
    color: #fff;
    background: #cacaca
}

@-webkit-keyframes shakeVariant {
    0% {
        -webkit-transform: scale(1.1) rotate(12deg);
        transform: scale(1.1) rotate(12deg)
    }
    25% {
        -webkit-transform: scale(1.2) rotate(-12deg);
        transform: scale(1.2) rotate(-12deg)
    }
    50% {
        -webkit-transform: scale(1.3) rotate(12deg);
        transform: scale(1.3) rotate(12deg)
    }
    75% {
        -webkit-transform: scale(1.5) rotate(-12deg);
        transform: scale(1.5) rotate(-12deg)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes shakeVariant {
    0% {
        -webkit-transform: scale(1.1) rotate(12deg);
        transform: scale(1.1) rotate(12deg)
    }
    25% {
        -webkit-transform: scale(1.2) rotate(-12deg);
        transform: scale(1.2) rotate(-12deg)
    }
    50% {
        -webkit-transform: scale(1.3) rotate(12deg);
        transform: scale(1.3) rotate(12deg)
    }
    75% {
        -webkit-transform: scale(1.5) rotate(-12deg);
        transform: scale(1.5) rotate(-12deg)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.answer#a1 {
    background: #cb4444
}

.answer#a1.answered,
.answer#a2.answered,
.answer#a3.answered,
.answer#a4.answered {
    background: #e2e2e2;
    color: #a3a3a3
}

.answer:not(.answered)#a1:hover {
    background: #cb4444;
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #cb4444;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #cb4444
}

.answer#a2 {
    background: #1b84bf;
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}

.answer:not(.answered)#a2:hover {
    background: #1b84bf;
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #1b84bf;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #1b84bf
}

.answer#a3 {
    background: #e48f2a;
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.answer:not(.answered)#a3:hover {
    background: #e48f2a;
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #e48f2a;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #e48f2a
}

.answer#a4 {
    background: #1ebf1b;
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.answer:not(.answered)#a4:hover {
    background: #1ebf1b;
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #1ebf1b;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #1ebf1b
}

.fade-enter-active,
.fade-leave-active {
    -webkit-transition: opacity .3s;
    transition: opacity .3s
}

.fade-enter,
.fade-leave-to {
    opacity: 0
}

@-webkit-keyframes blinkCorrectA1 {
    0% {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    to {
        -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #cb4444;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #cb4444
    }
}

@keyframes blinkCorrectA1 {
    0% {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    to {
        -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #cb4444;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #cb4444
    }
}

@-webkit-keyframes blinkCorrectA2 {
    0% {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    to {
        -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #1b84bf;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #1b84bf
    }
}

@keyframes blinkCorrectA2 {
    0% {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    to {
        -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #1b84bf;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #1b84bf
    }
}

@-webkit-keyframes blinkCorrectA3 {
    0% {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    to {
        -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #e48f2a;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #e48f2a
    }
}

@keyframes blinkCorrectA3 {
    0% {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    to {
        -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #e48f2a;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #e48f2a
    }
}

@-webkit-keyframes blinkCorrectA4 {
    0% {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    to {
        -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #1ebf1b;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #1ebf1b
    }
}

@keyframes blinkCorrectA4 {
    0% {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    to {
        -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #1ebf1b;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px #1ebf1b
    }
}

@-webkit-keyframes blinkPronounceA1S {
    0% {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    to {
        -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .25), 0 0 20px #cb4444;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .25), 0 0 20px #cb4444
    }
}

@keyframes blinkPronounceA1S {
    0% {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    to {
        -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .25), 0 0 20px #cb4444;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .25), 0 0 20px #cb4444
    }
}

@-webkit-keyframes blinkPronounceA2S {
    0% {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    to {
        -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .25), 0 0 20px #1b84bf;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .25), 0 0 20px #1b84bf
    }
}

@keyframes blinkPronounceA2S {
    0% {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    to {
        -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .25), 0 0 20px #1b84bf;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .25), 0 0 20px #1b84bf
    }
}

@-webkit-keyframes blinkPronounceA3S {
    0% {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    to {
        -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .25), 0 0 20px #e48f2a;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .25), 0 0 20px #e48f2a
    }
}

@keyframes blinkPronounceA3S {
    0% {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    to {
        -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .25), 0 0 20px #e48f2a;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .25), 0 0 20px #e48f2a
    }
}

@-webkit-keyframes blinkPronounceA4S {
    0% {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    to {
        -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .25), 0 0 20px #1ebf1b;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .25), 0 0 20px #1ebf1b
    }
}

@keyframes blinkPronounceA4S {
    0% {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    to {
        -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .25), 0 0 20px #1ebf1b;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .25), 0 0 20px #1ebf1b
    }
}

@media (max-width:1370px) {
    .answer {
        height: 46px;
        margin-bottom: 18px
    }
    .answer .variant {
        font-size: 32px
    }
    .answer-wrong-wrap {
        -webkit-transform: scale(.8);
        transform: scale(.8);
        bottom: -32px
    }
    .answer-wrong {
        background-size: 80% 90%;
        background-repeat: no-repeat;
        background-position: 50%
    }
    .answer-wrong .line1 {
        margin-bottom: 30px
    }
}

@media (max-width:1100px) {
    .answer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: calc(50px + 15.9vw);
        min-height: calc(50px + 15.9vw);
        margin-left: 10px;
        margin-right: 10px
    }
    .answer .variant {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 28px;
        right: 10px
    }
}

@media (max-width:800px) {
    .answer {
        width: calc(170px + 5vw);
        min-height: calc(170px + 5vw)
    }
    .answer .variant {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 26px;
        top: 0;
        right: 10px
    }
}

@media (max-width:500px) {
    .answer {
        width: calc(100px + 19vw);
        min-height: calc(100px + 19vw)
    }
    .answer .text {
        font-size: calc(15px + .4vw)
    }
}

@media (max-width:390px) {
    .answer {
        width: calc(60px + 26.69vw);
        min-height: calc(60px + 26.69vw)
    }
}

.answers {
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    z-index: 2
}

.answers-inner,
.answers {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.answers-inner {
    margin-right: 40px;
    margin-left: 40px;
    max-width: 1300px;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.answer-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.bottom-spacer {
    height: 40px
}

.anim {
    -webkit-animation: fadeInLeft 1s ease-in-out 1 backwards;
    animation: fadeInLeft 1s ease-in-out 1 backwards
}

.anim.aa1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    z-index: 7
}

.anim.aa2 {
    z-index: 6
}

.anim.aa3 {
    z-index: 5
}

.anim.aa4 {
    z-index: 4
}

@-webkit-keyframes blinkAnswer {
    0% {
        -webkit-transform: scale(1.01) rotate(2deg);
        transform: scale(1.01) rotate(2deg)
    }
    25% {
        -webkit-transform: scale(1.02);
        transform: scale(1.02)
    }
    50% {
        -webkit-transform: scale(1.03);
        transform: scale(1.03)
    }
    75% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes blinkAnswer {
    0% {
        -webkit-transform: scale(1.01) rotate(2deg);
        transform: scale(1.01) rotate(2deg)
    }
    25% {
        -webkit-transform: scale(1.02);
        transform: scale(1.02)
    }
    50% {
        -webkit-transform: scale(1.03);
        transform: scale(1.03)
    }
    75% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInLeft{
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@media (max-width:1370px) {
    .answers {
        margin-bottom: 0
    }
}

@media (max-width:800px) {
    .answers-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-right: 40px;
        margin-left: 40px;
        max-width: 1300px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }
    .answer-row {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1
    }
}

.menu-wrap {
    position: relative;
    z-index: 10;
    background: #304155
}

.menu-block {
    height: 80px;
    max-width: 1300px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: auto;
    padding-left: 50px;
    padding-right: 50px
}

.menu-block,
.right-controls-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.menu-block .button-save {
    width: 160px;
    height: 40px;
    margin-left: 50px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    background: #516c8b;
    border-radius: 20px;
    cursor: pointer
}

.menu {
    width: 48px;
    height: 48px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALISURBVHgB3ZrtbdswEIZfFf1fZ4KwE7SdoOkk8QbxBlYncDtBuoG7gbuB3QmoTGB3gisvogCFoqTjiUmIPABhWyCPPJH3QdJAZojozhVLQ46u3KJk3AC3NM8GJeIGZkjG2ZUVMvEO+TDCejz4r8iEWAH/hqfenIGcK4z3s+K+IGRWAW+UZ/fVusLTv0/pQIp/QQfug/vyjmCZ0U8Ype0r4d/akeQcg/aG4p6L2UIDzXsU60pN7YycSce9l2Fn6qUp4RqsqTyi7rcaUYDXu0FZXKqqGhj/wIipXZsG5cF2dh0+jHmhC8rlX/hgoICbJlbgD8rjtx/bE8ZswLgP9skGOk6+PPjfPPWffdHQuPLNKdCIW9C0b47BrpRd4mpG5g9Kc7uWtIHTD0jCIaUTr4g08NXQQm2gmeMXlHBbgfw9NJAsPT5iIdTO3hST6XfVE8SVbtCmu8wdpo2OPcKXJMOKK2Dcx7HXbwx2CD/994bLk37JZ5yUxg6ZILmt9dl2jbV5j0EmqM1mNWy4cUoa3LF47UeU0IzDciTWBJcT8vMX6RjtnvgB+WmgIOem/lXQKnCN/BgoYAUapKNNyqb4hHRObP0b0pHtcIrkh2Iht50ATSCpkQkna0dpcNB93CP3UwmDdh0a/6jUVOJxwxXb3ISCVzSfXhywEJIFMAMN1J75zHEPJSRL1yflz7lRSXRcU3DSJhh4d4y4FlTXBU3SbSl3U4pQuyy3lHFL+TY39SRb+y9N1GFUkcGzOzujTK5C9xkz4mwR9hn4ED4YswGegdIU4X3wx/DhmBv9jvKoUypL8iPr60jOdmJ011WSC44aGmhcCUvDK6LUK6ZV0N5SzsH3hK8D4QeKBBZKO91YR9qzEvtAyRvkgmauWZcq0JOTdM36XlpREAVTLkYajPdzwWtcspAs/e4wKBGSbU9rlIy3hZhHsvQM/1T5D5E25EJuqdcVAAAAAElFTkSuQmCC);
    margin-right: 40px
}

.menu-block .controls-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.checkbox__text {
    position: relative;
    cursor: pointer
}

.checkbox__text:before {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAK0SURBVHgB7VmNddowED76OgDdQBuUDcoGzQawQegEuBMUJrA7QZsJnEwAG5hMQDa43MUiOYQkW0I2znv+3rtnYZ/u7tP/CYARI0Z8akwgIRBxSo8FyctkMvkLPeArJAIFr+hRkij9e0Ykfjl0meiahJ/PJI8ke9J/gVuAgyep8ByVR3+JdpQkC+gTjuCbCKzQj6oXIjxMSI6uIBrqci/8I9k1EFHQBbiFPME3EjBsKU2osthhH3eQEmTwHpvRmoBh+85BJM2QIkNrbIcoAsJPlpxEQPBXE9D+zNWKh9MMYkAV/2AYribgIFFhvY+cKfEkKtE/KUPhW0bZ30775IZRDSTMZTczjaUMvA0B2/jO0WzZ8zql0D2+62K9FncBH4G5qw46egPrhpbITh+6QtNGxptggZYjiIeEbOzjTQkYLVsYdUto13PzmxMQwW0ugrPryfm6+gLDQUZyEL/XDr0HUZ4PhoDOBbbiFc8R26q0F+XvQ+oBxn9R5uCVRUcmPdNBEaBeOBivbD0gdYZFIAaDIoCXBzVbjqzk96H1wL0oH2hI7S06SuoMhgDWu+9SvHp0qP4Q5WeuWGE3CE0pK6O+suhNDZ0F98AWbggKYkmPHZwPjd+WFYlh5sZPJyMZpkfTYW6N9mP8xlOnEnpv56W3mzliywQKKv4k+eaovwD7xhIM3eqZ5dOWYll56ijxqoBAp7ZxGtUDeJlhleg4vDl8x6WrgSTaXGzx9Yxq4bc0bMffE+FHPnsVgQB/uWF3A9cC6+Ws7JKA9pGbNtGTN8c4KboggHXmVVmCV5Aa6F6CgwnowHObLezqklc7zmII6GHCQfNkLh0Nwe/TDZsAEjuPbpuFgDe5FfQJrG+WTzduM49e1hB41kurx0ITNYPOsd4bggJP+i9lCPBj5z04Dm4jRoxogVfFReHuykT/aQAAAABJRU5ErkJggg==);
    -webkit-transition: .2s;
    transition: .2s
}

.checkbox input:checked+.checkbox__text:before {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGbSURBVHgB7ZiNbYMwEIWPKAPQCUo3YIVO0GwAG3QEnAmiTkA7QUfoCOkGsEG7wfVZQiqJ/JtAbEf+pJOlcAnvA2I7IcpkMklT0IIwc4mhQf0WRfFBKYHwFWrgfw6UCorwkoFSQBM+DQGErFE/rCZuAQRsDOHjFkC4V7YTpwCCdexGfAIe4eMTQKAD+3ETge0UrsLQo2pUSQmxncIf6UbBcb5WDq5bDWs/Gj55HQZVmNnxjuzh+1l/o+rZoHYUBmGSkOExtGSD12PQnE+c9XWq8Gc9IhoBm4RX+FACOgnv8CEFNBJ+4UMLGCQEObKh8DwqXmNyhdfD5RHqDe+3rhNBBRThBTtMsVEIsGG28Zbg9Rh8w18kweof5KsI8OleSBneIKHdC71RGPbYYQrdwenYnlxg84Ky2B2YztXqruYl/cWsscLwgnrQ9MoPqcidEVfxiWKB9X9ged2BpXFeiXE1RwzPqJEiwmsrMZP4ppTB41GivmJ4hK4CId+TFpCwfgpOQ0CikUhHQKKQOFJqIPROBp++4DVlMpnM3fMH5GACWxUZJroAAAAASUVORK5CYII=)
}

.checkbox input:checked+.checkbox__text:after {
    content: ""
}

.menu:hover {
    cursor: pointer;
    -webkit-animation: rotateGear 2s linear infinite;
    animation: rotateGear 2s linear infinite
}

@-webkit-keyframes rotateGear {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes rotateGear {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.step {
    position: relative;
    top: 9px;
    color: #fff;
    font-size: 64px;
    line-height: 35px;
    font-weight: 700
}

.rest {
    position: relative;
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    left: -10px
}

@media (max-width:1370px) {
    .menu-block {
        height: 70px
    }
    .step {
        font-size: 50px
    }
}

@media (max-width:550px) {
    .button-save {
        display: none
    }
    .menu-block {
        height: 62px
    }
}

.timer-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 50px 50px rgba(0, 0, 0, .15);
    box-shadow: 0 50px 50px rgba(0, 0, 0, .15)
}

.bottom-spacer {
    height: 0
}

.timer-bar-left {
    background: #cb4444;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px
}

.modal-fader-end {
    position: fixed;
    z-index: 5;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8)
}

.modal-popup {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 900px;
    min-height: 300px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: 700;
    font-size: 44px;
    color: #384c63;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 30px
}

.modal-popup.transparent {
    background: hsla(0, 0%, 100%, .8)
}

.modal-popup a,
.modal-popup a:visited {
    color: #9fc6f4
}

@media (max-width:1370px) {
    .modal-popup {
        font-weight: 400;
        font-size: 36px;
        max-width: 650px
    }
}

@media (max-width:770px) {
    .modal-popup {
        font-size: 36px;
        max-width: 84vw
    }
}

@media (max-width:580px) {
    .modal-popup {
        font-size: 32px;
        max-width: 84vw
    }
}

@media (max-width:420px) {
    .modal-popup {
        font-size: 24px;
        max-width: 84vw
    }
}

@media (max-width:310px) {
    .modal-popup {
        font-size: 20px;
        max-width: 84vw
    }
}

.modal-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    color: #9fc6f4;
    width: 100%;
    min-width: 320px;
    background: #fff;
    border-radius: 30px
}

.modal-wrapper input[type=email] {
    width: 90%;
    height: 60px;
    font-size: 24px;
    background: #f3f7fb;
    border-radius: 35px;
    padding-left: 20px;
    padding-right: 20px;
    outline: none;
    border: 0 solid transparent;
    text-align: center;
    color: #384c63
}

.margin-vertical {
    margin-top: 10px;
    margin-bottom: 10px
}

.modal-wrapper input::-webkit-input-placeholder {
    color: #384c63
}

.modal-wrapper input::-moz-placeholder {
    color: #384c63
}

.modal-wrapper input:-ms-input-placeholder {
    color: #384c63
}

.modal-wrapper input::-ms-input-placeholder {
    color: #384c63
}

.modal-wrapper input::placeholder {
    color: #384c63
}

.trial-course {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    max-width: 400px
}

.note-email-sent {
    font-size: 14px
}

.result-content {
    text-align: center
}

.title-email-sent,
.title {
    font-weight: 700;
    font-size: 44px
}

.title.top {
    margin-top: 50px
}

.title-email-sent {
    margin-top: 0
}

.labels {
    font-size: 16px;
    width: 80%;
    max-width: 490px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 40px;
    margin-bottom: 5px
}

.error {
    margin-top: 5px;
    color: red;
    font-size: 12px
}

.labels .correct {
    color: #1ebf1b
}

.labels .incorrect {
    color: #e84a4a
}

.label-input {
    font-size: 14px
}

.progress-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 80%;
    max-width: 490px;
    margin-bottom: 27px
}

.progress-bar .correct {
    height: 10px;
    background: #1ebf1b;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px
}

.progress-bar .middle-wrapper {
    position: relative
}

.progress-bar .middle {
    position: absolute;
    width: 54px;
    height: 43px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAArCAYAAAAzDXuYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFJSURBVHgB7djBTQJBFMbx742rXDxAB9gBezRetANb2A60EkvY0IFWgInRK3TgdiCJXHAIz3l7gmTh9l7yJvM7wGG5/OFjM1lC0i5+phhdtmCegWgMt+gV27/n5mHSUR91VS19Bx1ZYxvrCqPqJZXmEiXGsr6Qoh6Rn1lAnsa5hqGEeVPCvClh3pQwb0qYNyXMmxLmTQnzpoR5U8K8CeD0gDFDAYQVMsPMbyksNln9asxrCrun0NxOOoRY9w/0PUtB6fUdYVdLE0FJ+/F7jwtanP0QxZv+i1WgFibar813epsOXmSsmrvrGkpUb/d75vnJa4Q5FKmGhX3a/KlrFFX/06pTFINzVJ6hUD95DM1Re4ZCPWxojtozFOpTFEdzNJihMDkEH87RYobCJOxwjhYzNCVzbD83SxipYKSfI5HZYdssrJ9jFTsY+Qeuc2swAZd2NAAAAABJRU5ErkJggg==);
    bottom: 0;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

.progress-bar .middle .percents {
    position: relative;
    font-size: 20px;
    font-weight: 700;
    color: #384c63;
    top: 2px;
    left: 2px
}

.progress-bar .incorrect {
    height: 10px;
    background: #e84a4a;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-top-right-radius: 35px;
    border-bottom-right-radius: 35px
}

.score-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 30px
}

.score-wrap .score {
    width: calc(60px + 10vw);
    max-width: 160px;
    height: 100px;
    background: #f3f7fb;
    border-radius: 15px;
    margin: 3px
}

.score {
    font-size: 16px;
    font-weight: 400;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.score-wrap .correct {
    color: #1ebf1b
}

.score-wrap .incorrect {
    color: #e84a4a
}

.score-wrap .unattempted {
    color: #384c63
}

.score-num {
    font-size: 48px;
    line-height: 44px;
    font-weight: 700
}

.bottom-spacer {
    height: 42px
}

@media (max-width:680px) {
    .title {
        font-size: calc(20px + 3vw)
    }
    .title.top {
        margin-top: 30px
    }
    .score {
        font-size: 14px
    }
    .labels {
        margin-top: 20px
    }
    .score-wrap {
        margin-bottom: 30px
    }
    .score-wrap .score {
        width: calc(50px + 10vw)
    }
    .modal-wrapper input[type=email] {
        width: 80%;
        height: 50px;
        font-size: 20px
    }
    .trial-course {
        padding-left: 10px;
        padding-right: 10px
    }
    .title-email-sent {
        font-size: 24px
    }
}

.blurBg {
    -webkit-filter: blur(4px);
    filter: blur(4px);
    -webkit-transition: all 1s;
    transition: all 1s
}

.slide-img {
    width: 90%;
    border-radius: 30px
}

.where {
    text-align: center;
    color: #384c63;
    width: 90%
}

.modal-text {
    font-size: 28px;
    font-weight: 400
}

.button-try {
    max-width: 148px
}

.where input {
    width: 70%;
    height: 60px;
    font-size: 24px;
    border-radius: 60px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    border: 0 solid transparent;
    outline: none;
    background: #f3f7fb;
    color: #384c63
}

.where input:focus {
    -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .15), 0 0 4px #f3f7fb;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15), 0 0 4px #f3f7fb
}

.spacer {
    height: 20px
}

.disabled {
    background: grey
}

@media (max-width:1370px) {
    .modal-text {
        font-weight: 400;
        font-size: 20px
    }
}

.start {
    text-align: center;
    background: url(../img/wall.8501f5a8.jpg) no-repeat;
    background-size: cover;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.start .small {
    font-size: 14px
}

.spacer {
    height: 50px
}

.explanation {
    text-align: center
}

.explanation .spacer {
    height: 50px
}

.explanation .small-text {
    font-size: 16px;
    padding: 10px;
    max-width: 450px
}

.wrapper {
    text-align: center
}

@media (max-width:768px) {
    .wrapper {
        font-size: 30px
    }
    .text {
        padding-left: 10px;
        padding-right: 10px
    }
}

body {
    font-family: Roboto, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-width: 350px
}

.main {
    background: #fff
}

.modal-fader {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .7
}

.visually-hidden {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 10px 0 0 20px
}

.slide1 {
    z-index: 1
}

.slide1,
.slide2 {
    position: relative
}

.slide2 {
    z-index: 2
}

.button-try {
    min-width: 148px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    outline: none;
    margin-left: auto;
    margin-right: auto;
    background: #1ebf1b;
    border-radius: 35px;
    cursor: pointer;
    padding-left: 20px;
    padding-right: 20px
}

.button-try:hover {
    background: #24d321
}

.fade-enter-active,
.fade-leave-active {
    -webkit-transition: opacity 4s;
    transition: opacity 4s
}

.fade-enter,
.fade-leave-to {
    opacity: 0
}

.fade2-enter-active,
.fade2-leave-active {
    -webkit-transition: opacity 1s;
    transition: opacity 1s
}

.fade2-enter,
.fade2-leave-to {
    opacity: 0
}