#interactionButton {
         position: absolute;
         top: 10px;
         left: 10px;
     }


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

body {
    line-height: 1;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%
}

ol,ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote:before,blockquote:after,q:before,q:after {
    content: "";
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

table th {
    text-align: left
}

*,*:before,*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

input,button,textarea,select {
    color: inherit;
    font-size: inherit;
    font-style: inherit;
    font-family: inherit;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-padding-start: 0;
    align-items: flex-start;
    text-index: 0;
    border: none;
    outline: none;
    background: none;
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
    line-height: 1em
}

input[type=text],input[type=reset],input[type=password],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=time],input[type=week],input[type=month],input[type=date],input[type=datetime],input[type=datetime-local],input[type=number],input[type=submit],input[type=color],input[type=file],button,textarea,select {
    height: 1em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

input[type=color] {
    width: 1em
}

input::-ms-clear {
    display: none
}

details,summary {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

mark {
    background: none
}

hr {
    height: 1px;
    margin: 0;
    padding: 0
}

u {
    text-decoration: none
}

a {
    color: inherit;
    outline: none
}

@font-face {
    font-family: Greycliff;
    src: url(/assets/fonts/subset-GreycliffCF-Medium.woff2) format("woff2"),url(/assets/fonts/subset-GreycliffCF-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Greycliff;
    src: url(/assets/fonts/subset-GreycliffCF-Bold.woff2) format("woff2"),url(/assets/fonts/subset-GreycliffCF-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Greycliff;
    src: url(/assets/fonts/subset-GreycliffCF-ExtraBold.woff2) format("woff2"),url(/assets/fonts/subset-GreycliffCF-ExtraBold.woff) format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap
}

:root {
    --header-height: 80px;
    --page-top-padding: 80px
}

@media (max-width: 1300px) {
    :root {
        --header-height: 70px;
        --page-top-padding: 70px
    }
}

@media (max-width: 1080px) {
    :root {
        --header-height: 60px;
        --page-top-padding: 60px
    }
}

@media (max-width: 800px) {
    :root {
        --header-height: 50px;
        --page-top-padding: 50px
    }
}

.sizes-viewport-dummy {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100)
}

html {
    font-size: 16px;
    overflow-x: hidden;
    background: #FFF
}

@media (max-width: 1600px) {
    html {
        font-size:16px
    }
}

@media (max-width: 1300px) {
    html {
        font-size:16px
    }
}

@media (max-width: 1080px) {
    html {
        font-size:16px
    }
}

@media (max-width: 800px) {
    html {
        font-size:15px
    }
}

@media (max-width: 600px) {
    html {
        font-size:14px
    }
}

@media (max-width: 400px) {
    html {
        font-size:14px
    }
}

@media print {
    html {
        font-size: 10px!important
    }
}

html.is-theme-dark {
    background: #1a1a1a;
    color: #fff
}

html.is-theme-abyss {
    background: #140b29;
    color: #fff
}

html.is-theme-abyss ::selection {
    color: #140b29;
    background: #57fdf3
}

body {
    font-family: Roboto,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden
}

p {
    margin-bottom: 1em;
    line-height: 1.5em
}

p:last-child {
    margin-bottom: 0
}

p .highlight,ul .highlight,ol .highlight {
    color: #32ffce
}

p .highlight.is-green,ul .highlight.is-green,ol .highlight.is-green {
    color: #c6ff83
}

p .highlight.is-purple,ul .highlight.is-purple,ol .highlight.is-purple {
    color: #b79eff
}

p a,ul a,ol a {
    text-decoration: underline
}

li {
    line-height: 1.5em
}

strong,.strong {
    font-weight: 700
}

a {
    text-decoration: none
}

a[href^=mailto] {
    white-space: nowrap
}

s {
    display: inline-block;
    position: relative;
    text-decoration: none
}

s.is-light:after {
    background: #fff
}

s:after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 2px);
    left: -20%;
    width: 140%;
    height: .1em;
    transform: rotate(31deg);
    background: #705df2
}

s:before {
    content: "-50%";
    display: block;
    position: absolute;
    top: -120%;
    left: 170%;
    padding: .1em;
    transform: rotate(15deg);
    background: #705df2;
    color: #fff;
    box-shadow: 0 0 12px #0008
}

button {
    cursor: pointer;
    height: auto
}

small {
    font-size: .5em
}

h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5 {
    font-family: Greycliff,sans-serif;
    font-weight: 700
}

h1,.h1 {
    font-size: 2rem
}

h2,.h2 {
    font-size: 1.75rem
}

h3,.h3 {
    font-size: 1.5rem
}

h4,.h4 {
    font-size: 1.25rem
}

::selection {
    background: #8b7bf3
}

::-moz-selection {
    background: #8b7bf3
}

.clear-selection ::selection {
    background: rgba(139,123,243,.333)
}

.clear-selection ::-moz-selection {
    background: rgba(139,123,243,.333)
}

pre[contenteditable] ::selection {
    background: rgba(139,123,243,.267)
}

pre[contenteditable] ::-moz-selection {
    background: rgba(139,123,243,.267)
}

.helper-no-wrap {
    white-space: nowrap!important
}

.helper-text-align-left {
    text-align: left!important
}

.helper-text-align-center {
    text-align: center!important
}

.helper-text-align-right {
    text-align: right!important
}

.helper-text-muted {
    opacity: .5
}

@-moz-keyframes logo-blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes logo-blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-o-keyframes logo-blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes logo-blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-moz-keyframes loader-dot {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes loader-dot {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-o-keyframes loader-dot {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes loader-dot {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.alerts {
    margin-bottom: 2rem
}

.alerts:last-child {
    margin-bottom: 0
}

.alert {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 40px;
    background: linear-gradient(34.41deg,#4d4657 0%,rgba(61,59,84,.74) 38.5%,rgba(44,48,81,.479) 77.01%,rgba(29,38,78,.234) 113.2%,rgba(15,28,75,0) 147.85%);
    border-radius: 12px;
    margin-bottom: 1rem;
    line-height: 1.25em
}

@media (max-width: 600px) {
    .alert {
        padding-left:30px;
        padding-right: 30px
    }
}

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

.alert.has-icon {
    padding-left: 80px;
    padding-right: 40px
}

@media (max-width: 600px) {
    .alert.has-icon {
        padding-left:60px;
        padding-right: 30px
    }
}

.alert.has-icon.helper-text-align-center {
    padding-right: 80px
}

@media (max-width: 600px) {
    .alert.has-icon.helper-text-align-center {
        padding-right:60px
    }
}

@media (max-width: 600px) {
    .alert>.icon {
        left:30px
    }
}

.alert>.icon svg {
    display: block
}

.alert .button {
    box-shadow: 5px 5px 30px #27212e;
    -webkit-mask-image: none
}

.animated-title {
    display: inline-block
}

.animated-title.is-visible .letter {
    transition-property: opacity,transform;
    transition-duration: .3s,.3s;
    transition-timing-function: ease-out,ease-out;
    opacity: 1;
    transform: translateY(0)
}

.animated-title.is-visible .letter.letter-0 {
    transition-delay: 0s
}

.animated-title.is-visible .letter.letter-1 {
    transition-delay: .08s
}

.animated-title.is-visible .letter.letter-2 {
    transition-delay: .16s
}

.animated-title.is-visible .letter.letter-3 {
    transition-delay: .24s
}

.animated-title.is-visible .letter.letter-4 {
    transition-delay: .32s
}

.animated-title.is-visible .letter.letter-5 {
    transition-delay: .4s
}

.animated-title.is-visible .letter.letter-6 {
    transition-delay: .48s
}

.animated-title.is-visible .letter.letter-7 {
    transition-delay: .56s
}

.animated-title.is-visible .letter.letter-8 {
    transition-delay: .64s
}

.animated-title.is-visible .letter.letter-9 {
    transition-delay: .72s
}

.animated-title.is-visible .letter.letter-10 {
    transition-delay: .8s
}

.animated-title.is-visible .letter.letter-11 {
    transition-delay: .88s
}

.animated-title.is-visible .letter.letter-12 {
    transition-delay: .96s
}

.animated-title.is-visible .letter.letter-13 {
    transition-delay: 1.04s
}

.animated-title.is-visible .letter.letter-14 {
    transition-delay: 1.12s
}

.animated-title.is-visible .letter.letter-15 {
    transition-delay: 1.2s
}

.animated-title.is-visible .letter.letter-16 {
    transition-delay: 1.28s
}

.animated-title.is-visible .letter.letter-17 {
    transition-delay: 1.36s
}

.animated-title.is-visible .letter.letter-18 {
    transition-delay: 1.44s
}

.animated-title.is-visible .letter.letter-19 {
    transition-delay: 1.52s
}

.animated-title.is-visible .letter.letter-20 {
    transition-delay: 1.6s
}

.animated-title.is-visible .letter.letter-21 {
    transition-delay: 1.68s
}

.animated-title.is-visible .letter.letter-22 {
    transition-delay: 1.76s
}

.animated-title.is-visible .letter.letter-23 {
    transition-delay: 1.84s
}

.animated-title.is-visible .letter.letter-24 {
    transition-delay: 1.92s
}

.animated-title.is-visible .letter.letter-25 {
    transition-delay: 2s
}

.animated-title.is-visible .letter.letter-26 {
    transition-delay: 2.08s
}

.animated-title.is-visible .letter.letter-27 {
    transition-delay: 2.16s
}

.animated-title.is-visible .letter.letter-28 {
    transition-delay: 2.24s
}

.animated-title.is-visible .letter.letter-29 {
    transition-delay: 2.32s
}

.animated-title.is-visible .letter.letter-30 {
    transition-delay: 2.4s
}

.animated-title.is-visible .letter.letter-31 {
    transition-delay: 2.48s
}

.animated-title.is-visible .letter.letter-32 {
    transition-delay: 2.56s
}

.animated-title.is-visible .letter.letter-33 {
    transition-delay: 2.64s
}

.animated-title.is-visible .letter.letter-34 {
    transition-delay: 2.72s
}

.animated-title.is-visible .letter.letter-35 {
    transition-delay: 2.8s
}

.animated-title.is-visible .letter.letter-36 {
    transition-delay: 2.88s
}

.animated-title.is-visible .letter.letter-37 {
    transition-delay: 2.96s
}

.animated-title.is-visible .letter.letter-38 {
    transition-delay: 3.04s
}

.animated-title.is-visible .letter.letter-39 {
    transition-delay: 3.12s
}

.animated-title.is-visible .letter.letter-40 {
    transition-delay: 3.2s
}

.animated-title .word {
    white-space: nowrap
}

.animated-title .letter {
    display: inline-block;
    position: relative;
    color: #fff;
    opacity: 0;
    transform: translateY(-20px);
    will-change: opacity,transform
}

.animated-title .letter.highlight {
    color: #705df2
}


.button {
    display: inline-flex;
    position: relative;
    height: 47px;
    margin-right: 20px;
    border-radius: 8px;
    background: #272727;
    flex-direction: row;
    align-items: center;
    color: #fff;
    text-decoration: none!important;
    overflow: hidden;
    vertical-align: middle;
    -webkit-mask-image: -webkit-radial-gradient(#fff,#000)
}

@media (max-width: 800px) {
    .button {
        margin-right:15px
    }
}

@media (max-width: 600px) {
    .button {
        margin-right:10px
    }
}

.button:last-child {
    margin-right: 0
}

.button.is-disabled {
    opacity: .5;
    cursor: default
}

.button.has-icon-left .label {
    margin-left: 0
}

.button.has-icon-right .label {
    margin-right: 0
}

.button.is-main-join {
    height: 72px;
    border-radius: 36px;
    box-shadow: 0 24px 74px #3c00bd29;
    -webkit-mask-image: none
}

@media (max-width: 1600px) {
    .button.is-main-join {
        height:68px
    }
}

@media (max-width: 1300px) {
    .button.is-main-join {
        height:64px
    }
}

@media (max-width: 1080px) {
    .button.is-main-join {
        height:60px
    }
}

.button.is-main-join:hover .price {
    opacity: .8
}

.button.is-main-join:hover .price .vat {
    opacity: 1
}

.button.is-main-join .label {
    margin-left: 40px;
    margin-right: 40px;
    font-family: Greycliff;
    font-weight: 700;
    font-size: 20px
}

@media (max-width: 1600px) {
    .button.is-main-join .label {
        margin-left:38px;
        margin-right: 38px
    }
}

@media (max-width: 1300px) {
    .button.is-main-join .label {
        margin-left:36px;
        margin-right: 36px
    }
}

@media (max-width: 1080px) {
    .button.is-main-join .label {
        margin-left:34px;
        margin-right: 34px;
        font-size: 19px
    }
}

@media (max-width: 800px) {
    .button.is-main-join .label {
        font-size:18px
    }
}

.button.is-main-join .vertical-separator {
    display: block;
    position: relative;
    left: -4px;
    width: 1px;
    height: 100%;
    background: #705df2;
    opacity: .1
}

.button.is-main-join .price {
    position: relative;
    padding-right: 20px;
    padding-left: 20px;
    margin-right: 14px;
    font-family: Greycliff;
    font-weight: 700;
    font-size: 26px;
    opacity: .6;
    transition: opacity .3s
}

@media (max-width: 1080px) {
    .button.is-main-join .price {
        padding-right:18px;
        padding-left: 18px;
        font-size: 24px
    }
}

@media (max-width: 800px) {
    .button.is-main-join .price {
        padding-right:16px;
        padding-left: 16px;
        font-size: 22px
    }
}

.button.is-main-join .price .vat {
    position: absolute;
    top: calc(50% + .85em);
    left: 0;
    width: 100%;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .3s
}

.button.is-main-join .hover {
    opacity: .035
}

.button.is-login .icon {
    width: 21px;
    height: 19px
}

@media (max-width: 400px) {
    .button.is-login .icon {
        display:none
    }
}

@media (max-width: 400px) {
    .button.is-login .label {
        margin-left:15px
    }
}

.button.is-white {
    background: #fff;
    color: #705df2
}

.button.is-white .label {
    opacity: 1
}

@media (max-width: 400px) {
    .button.is-white .label {
        margin-left:15px
    }
}

@media (max-width: 400px) {
    .button.is-white .label {
        margin-right:15px
    }
}

.button.is-white .hover {
    background: #705df2;
    opacity: .035
}

.button.is-join {
    background: #705df2
}

.button.is-join .icon {
    width: 18px;
    height: 19px;
    opacity: 1
}

@media (max-width: 400px) {
    .button.is-join .icon {
        display:none
    }
}

.button.is-join .label {
    opacity: 1
}

@media (max-width: 400px) {
    .button.is-join .label {
        margin-left:15px
    }
}

.button.is-abyss-join {
    border-radius: 24px;
    padding: 0 10px
}

.button.is-abyss-join .icon {
    width: 14px;
    height: 16px;
    opacity: 1
}

.button.is-abyss-join .icon svg * {
    fill: none;
    stroke: #fff
}

.button.is-abyss-join .label {
    opacity: 1
}


.button.is-discord.is-secondary {
    background: #4b495b
}

.button.is-locked .icon {
    top: 0;
    width: 20px;
    height: 21px
}

.button.has-code .clickable-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 170px;
    height: 100%
}

.button.has-code .code {
    display: block;
    position: relative;
    font-family: Greycliff,sans-serif;
    font-weight: 700;
    font-size: 16px;
    margin-right: 6px;
    padding: 6px 8px;
    border-radius: 5px;
    background: rgba(0,0,0,.267)
}

.button.is-pink {
    background: #ec4a7a
}

.button.is-pink .icon,.button.is-pink .label {
    opacity: 1
}

.button.is-purple {
    background: #705df2
}

.button.is-purple .icon,.button.is-purple .label {
    opacity: 1
}

.button.is-gray {
    background: #393939
}

.button.is-gray .icon,.button.is-gray .label {
    opacity: 1
}

.button.is-small {
    border-radius: 4px;
    height: 24px
}

.button.is-small .label {
    margin-left: 8px;
    margin-right: 8px;
    font-size: .6rem
}

.button.is-large {
    height: 60px;
    white-space: nowrap
}

@media (max-width: 800px) {
    .button.is-large {
        height:55px
    }
}

@media (max-width: 600px) {
    .button.is-large {
        height:50px
    }
}

.button.is-large .label {
    margin-left: 20px;
    margin-right: 20px;
    font-size: 1rem
}

.button.is-gift .icon {
    width: 20px;
    height: 20px
}

.button.is-play .icon {
    width: 12px;
    height: 14px
}

.button.is-play .icon svg {
    display: block
}

.button.is-linkedin .icon {
    width: 21px;
    height: 21px
}

.button.is-linkedin .icon svg {
    display: block
}

.button.is-do.is-done .icon .disc {
    transform: scale(1)
}

.button.is-do .label {
    margin-right: 25px;
    line-height: 1.25em
}

.button.is-do .hover {
    background: #fff
}

.button.is-do .icon {
    margin-left: 15px;
    margin-right: 15px;
    width: 29px;
    height: 29px;
    opacity: 1
}

.button.is-do .icon .default {
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 6px);
    width: 12px;
    height: 11px
}

.button.is-do .icon .default svg {
    display: block
}

.button.is-do .icon .default svg * {
    fill: #fff
}

.button.is-do .icon .disc {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 50%;
    transform: scale(0);
    transition: transform .2s ease-in;
    will-change: transform
}

.button.is-do .icon .disc .inner {
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 6px);
    width: 12px;
    height: 10px
}

.button.is-do .icon .disc .inner svg {
    display: block;
    width: 100%;
    height: 100%
}

.button.is-do .icon .disc .inner svg * {
    fill: #705df2
}

.button:hover:not(.is-disabled) .hover {
    transform-origin: 0 0;
    transform: scaleX(1)
}

.button:hover:not(.is-disabled) .icon {
    transition-delay: .15s;
    opacity: 1
}

.button:hover:not(.is-disabled) .label {
    transition-delay: .25s;
    opacity: 1
}

.button .hover {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: .05;
    transform: scaleX(0);
    transform-origin: 100% 100%;
    transition: transform .6s cubic-bezier(.53,.21,0,1);
    will-change: transform
}

.button .icon {
    display: block;
    position: relative;
    margin-left: 15px;
    margin-right: 15px;
    opacity: .75;
    transition: opacity .3s;
    will-change: opacity
}

.button .icon svg {
    display: block;
    width: 100%;
    height: 100%
}

.button .icon svg * {
    fill: #fff
}

.button .label {
    display: block;
    position: relative;
    text-align: center;
    line-height: 1em;
    font-family: Greycliff,sans-serif;
    font-weight: 700;
    font-size: 16px;
    margin-left: 15px;
    margin-right: 15px;
    opacity: .75;
    transition: opacity .3s;
    will-change: opacity
}

.card {
    box-shadow: 0 14px 40px #000;
    border-radius: 12px;
    width: 550px;
    max-width: 100%
}

@media (max-width: 600px) {
    .card {
        width:calc(100% - 40px)
    }
}

@media (max-width: 400px) {
    .card {
        width:calc(100% - 20px)
    }
}

.card.is-flexible {
    width: auto;
    min-width: 550px
}

@media (max-width: 600px) {
    .card.is-flexible {
        width:calc(100% - 20px);
        min-width: 0
    }
}

.card.is-flexible .text {
    display: flex;
    flex-direction: column;
    align-items: center
}

.card.is-flexible .text p {
    width: 465px
}

@media (max-width: 600px) {
    .card.is-flexible .text p {
        width:auto
    }
}

.card.is-flexible .text ul,.card.is-flexible .text ol {
    text-align: left
}

.card.is-flexible .text .code-toolbar {
    min-width: 465px
}

@media (max-width: 600px) {
    .card.is-flexible .text .code-toolbar {
        width:auto
    }
}

.card.has-close .card-head {
    padding-left: 80px;
    padding-right: 80px
}

@media (max-width: 600px) {
    .card.has-close .card-head {
        padding-left:20px
    }
}

@media (max-width: 400px) {
    .card.has-close .card-head {
        padding-left:10px;
        padding-right: 60px
    }
}

.card .card-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 20px 40px;
    background: #222;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    text-align: center
}

@media (max-width: 600px) {
    .card .card-head {
        min-height:80px;
        padding: 20px
    }
}

@media (max-width: 400px) {
    .card .card-head {
        min-height:70px;
        padding: 20px 10px
    }
}

.card .card-head .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px
}

@media (max-width: 400px) {
    .card .card-head .close {
        right:10px
    }
}

.card .card-head .close .icon svg * {
    fill: #fff;
    stroke: #fff
}

.card .card-title {
    font-size: 1.75rem
}

.card .card-details {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    bottom: 15px;
    right: 15px;
    text-align: right;
    font-size: .8rem;
    white-space: nowrap;
    line-height: 1.25em
}

.card .card-details .link {
    opacity: .35
}

.card .card-details .link:hover {
    opacity: .5
}

.card .card-details .link .icon {
    display: inline-block;
    position: relative;
    width: 12px;
    height: 12px;
    margin-left: 3px;
    vertical-align: middle
}

.card .card-details .link .icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #fff
}

.card .card-details .link .icon svg * {
    fill: #fff
}

.card .card-hero-image {
    width: 100%;
    height: auto;
    border-radius: 8px
}

.card .buttons .button {
    margin-bottom: 5px
}

.card .card-body {
    position: relative;
    padding: 40px;
    text-align: left;
    background: #1a1a1a;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px
}

@media (max-width: 600px) {
    .card .card-body {
        padding:20px
    }
}

@media (max-width: 400px) {
    .card .card-body {
        padding:10px
    }
}

.card.is-error .code {
    margin-bottom: 1rem;
    font-size: 7rem;
    letter-spacing: -.5rem
}

.card.is-error .code .digit {
    position: relative;
    font-family: Greycliff,sans-serif;
    font-weight: 700
}

.card.is-error .code .digit:first-child,.card.is-error .code .digit:last-child {
    color: #fa6c63
}

.card.is-end .quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.card.is-end .quote p {
    position: relative;
    margin-bottom: 1.25em
}

.card.is-end .quote p:after {
    content: "— Bruno";
    position: absolute;
    bottom: -1.5em;
    right: -2em;
    opacity: .5
}

.card.is-end .progress {
    position: relative;
    width: 100%;
    height: 12px;
    margin-top: 30px;
    margin-bottom: 40px;
    background: #323232;
    border-radius: 4px
}

.card.is-end .progress.is-complete .fill {
    background: #32ffce
}

.card.is-end .progress .fill {
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    background: #705df2;
    border-radius: 3px
}

.card.is-end .progress .percentage {
    position: absolute;
    top: 20px;
    right: 0;
    font-size: .8rem;
    font-weight: 500;
    opacity: .35
}

.card.is-end .progress .pin {
    position: absolute;
    bottom: 12px;
    margin-left: -10px
}

.card.is-end .buttons {
    display: flex;
    align-items: center;
    justify-content: center
}

.card.is-end .buttons.is-vertical {
    flex-direction: column
}

.card.is-end .buttons .button {
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px
}

code[class*=language-],pre[class*=language-] {
    color: #ccc;
    background: none;
    font-family: Roboto Mono,monospace;
    font-size: .85rem;
    font-weight: 700;
    text-align: left;
    white-space: pre-wrap;
    word-spacing: normal;
    word-break: break-word;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none
}

pre[class*=language-] {
    padding: 25px;
    margin: .5em 0;
    overflow: auto
}

@media (max-width: 600px) {
    pre[class*=language-] {
        padding:20px
    }
}

@media (max-width: 400px) {
    pre[class*=language-] {
        padding:15px
    }
}

:not(pre)>code[class*=language-],pre[class*=language-] {
    background: #222
}

:not(pre)>code[class*=language-] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal
}

.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata {
    color: #999
}

.token.punctuation {
    color: #62c8f3
}

.token.function-name {
    color: #6196cc
}

.token.italic {
    font-style: italic
}

.token.entity {
    cursor: help
}

.token.inserted {
    color: #fff
}

.token.tag {
    color: #eee
}

.token.attr-name,.token.namespace,.token.deleted {
    color: #e2777a
}

.token.boolean,.token.number,.token.function {
    color: #ffc061
}

.token.property,.token.class-name,.token.constant,.token.symbol {
    color: #fe6854
}

.token.selector {
    color: #fff
}

.token.important,.token.atrule,.token.keyword,.token.builtin {
    color: #ac9fff
}

.token.string,.token.char,.token.attr-value,.token.regex,.token.variable {
    color: #7ec699
}

.token.operator,.token.entity,.token.url {
    color: #67cdcc
}

.token.important,.token.bold {
    font-weight: 700
}

.confetti-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.copy-link {
    display: block;
    width: 100%;
    padding: 26px 20px;
    margin-bottom: 2em;
    background: #131313;
    border: 1px solid #131313;
    border-radius: 12px
}

.copy-link:focus {
    box-shadow: 0 14px 40px #0006;
    border-color: #705df2
}

.footer {
    padding: 50px 25px;
    background: #202020
}

@media print {
    .footer {
        display: none
    }
}

html.experience .footer {
    display: none
}

html.home .footer,html.studentsWorks .footer,html.studentsWorksSingle .footer,html.twitterContests .footer {
    background: #150c21
}

html.is-theme-abyss .footer {
    background: none
}

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

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

.footer .inner {
    display: flex;
    justify-content: space-between;
    max-width: 1180px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    color: #fff
}

@media (max-width: 1080px) {
    .footer .inner {
        flex-wrap:wrap
    }
}

@media (max-width: 800px) {
    .footer .inner {
        flex-direction:column
    }
}

.footer a {
    text-decoration: none
}

.footer a:hover {
    text-decoration: underline
}

.footer .column {
    font-size: 16px;
    text-align: left;
    margin-right: 4em
}

.footer .column:last-child {
    margin-right: 0
}

@media (max-width: 1080px) {
    .footer .column {
        margin-right:3em;
        margin-bottom: 2em
    }
}

@media (max-width: 800px) {
    .footer .column {
        margin-right:2em
    }
}

@media (max-width: 600px) {
    .footer .column {
        margin-right:1.5em
    }
}

@media (max-width: 400px) {
    .footer .column {
        margin-right:1em
    }
}

.footer .column .column-title {
    margin-bottom: 1em;
    font-family: Greycliff;
    font-weight: 700;
    font-size: 18px
}

@media (max-width: 1080px) {
    .footer .column .column-title {
        margin-bottom:.75em
    }
}

@media (max-width: 800px) {
    .footer .column .column-title {
        margin-bottom:.5em
    }
}

.footer .column .column-title:not(:first-child) {
    margin-top: 1.5em
}

.footer .column .separator {
    display: block;
    width: 45px;
    height: 1px;
    margin-top: .75em;
    margin-bottom: .75em;
    background: #fff;
    opacity: .2
}

.footer .column .icon {
    position: relative;
    margin-right: 6px
}

.footer .column .icon.email {
    display: inline-block;
    top: 3px;
    width: 14px;
    height: 14px
}

.footer .column .icon.twitter {
    display: inline-block;
    top: 1px;
    width: 13px;
    height: 11px;
    margin-right: 7px
}

.footer .column .icon.discord {
    top: 2px;
    display: inline-block;
    width: 14px;
    height: 15px;
    margin-right: 8px
}

.footer .column .icon.youtube {
    top: 2px;
    display: inline-block;
    width: 15px;
    height: 14px;
    margin-right: 8px
}

.footer .column .icon.linkedin {
    top: 2px;
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 8px
}

.footer .column .icon.gift {
    top: 1px;
    display: inline-block;
    width: 12px;
    height: 13px;
    margin-right: 6px
}

.footer .column .icon svg {
    width: 100%;
    height: 100%
}

.footer .column .icon svg * {
    fill: #8b8b8b
}

@media (max-width: 1080px) {
    .footer .column.is-logo {
        width:100%
    }
}

@media (max-width: 800px) {
    .footer .column.is-logo {
        width:auto
    }
}


.form a {
    text-decoration: underline
}

.form fieldset {
    margin-bottom: 1em
}

.form .messages {
    padding-bottom: 2em
}

.form .messages:last-child {
    padding-bottom: 0
}

.form .messages.success {
    color: #32ffce
}

.form .messages.warning {
    color: #ffab3a
}

.form .messages.errors {
    color: #fa6c63
}

.form .messages .title {
    font-family: Greycliff,sans-serif;
    font-weight: 800;
    font-size: 1.75em;
    margin-bottom: .5em
}

.form .messages li {
    position: relative;
    padding-left: 1em
}

.form .messages li:before {
    content: "";
    display: block;
    position: absolute;
    top: calc(.8em - 2px);
    left: .2em;
    width: 4px;
    height: 4px;
    background: #fff;
    opacity: .2
}

.form .field.text,.form .field.textarea,.form .field.select {
    display: flex;
    position: relative;
    height: 80px;
    max-width: 550px;
    margin-bottom: 10px;
    align-items: center;
    background: #131313;
    border-radius: 12px
}

@media (max-width: 800px) {
    .form .field.text,.form .field.textarea,.form .field.select {
        height:70px
    }
}

@media (max-width: 600px) {
    .form .field.text,.form .field.textarea,.form .field.select {
        height:60px
    }
}

.form .field.text.textarea,.form .field.textarea.textarea,.form .field.select.textarea {
    height: auto
}

.form .field.text label,.form .field.textarea label,.form .field.select label {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    padding-left: 20px;
    font-weight: 700;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
    line-height: 1.1em
}

@media (max-width: 600px) {
    .form .field.text label,.form .field.textarea label,.form .field.select label {
        width:35%
    }
}

.form .field.text label .faded,.form .field.textarea label .faded,.form .field.select label .faded {
    padding-left: 3px;
    opacity: .4;
    font-weight: 400
}

.form .field.text input,.form .field.textarea input,.form .field.select input {
    width: 100%;
    height: 100%;
    padding-right: 20px;
    padding-left: calc(40% + 20px);
    background: #131313;
    border-radius: 12px
}

@media (max-width: 600px) {
    .form .field.text input,.form .field.textarea input,.form .field.select input {
        padding-left:calc(35% + 15px)
    }
}

.form .field.text input:-webkit-autofill,.form .field.textarea input:-webkit-autofill,.form .field.select input:-webkit-autofill,.form .field.text input:-webkit-autofill:hover,.form .field.textarea input:-webkit-autofill:hover,.form .field.select input:-webkit-autofill:hover,.form .field.text input:-webkit-autofill:focus,.form .field.textarea input:-webkit-autofill:focus,.form .field.select input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    box-shadow: 0 0 0 100px #131313 inset;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #fff
}

.form .field.text input:focus,.form .field.textarea input:focus,.form .field.select input:focus {
    box-shadow: 0 14px 40px #0006;
    border: 1px solid #705df2;
    padding-left: calc(40% + 19px)
}

@media (max-width: 600px) {
    .form .field.text input:focus,.form .field.textarea input:focus,.form .field.select input:focus {
        padding-left:calc(35% + 14px)
    }
}

.form .field.text textarea,.form .field.textarea textarea,.form .field.select textarea {
    width: 100%;
    min-height: 80px;
    height: 80px;
    resize: vertical;
    padding-top: .5em;
    padding-bottom: .5em;
    padding-right: 20px;
    padding-left: calc(40% + 20px);
    background: #131313;
    border-radius: 12px
}

@media (max-width: 800px) {
    .form .field.text textarea,.form .field.textarea textarea,.form .field.select textarea {
        min-height:70px;
        height: 70px
    }
}

@media (max-width: 600px) {
    .form .field.text textarea,.form .field.textarea textarea,.form .field.select textarea {
        min-height:70px;
        height: 70px;
        padding-left: calc(35% + 15px)
    }
}

.form .field.text textarea:-webkit-autofill,.form .field.textarea textarea:-webkit-autofill,.form .field.select textarea:-webkit-autofill,.form .field.text textarea:-webkit-autofill:hover,.form .field.textarea textarea:-webkit-autofill:hover,.form .field.select textarea:-webkit-autofill:hover,.form .field.text textarea:-webkit-autofill:focus,.form .field.textarea textarea:-webkit-autofill:focus,.form .field.select textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    box-shadow: 0 0 0 100px #131313 inset;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #fff
}

.form .field.text textarea:focus,.form .field.textarea textarea:focus,.form .field.select textarea:focus {
    box-shadow: 0 14px 40px #0006;
    border: 1px solid #705df2;
    padding-left: calc(40% + 19px)
}

.form .field.text select,.form .field.textarea select,.form .field.select select {
    width: 60%;
    margin-left: calc(40% + 20px);
    height: 100%;
    line-height: 80px;
    background: #131313
}

@media (max-width: 800px) {
    .form .field.text select,.form .field.textarea select,.form .field.select select {
        line-height:70px
    }
}

@media (max-width: 600px) {
    .form .field.text select,.form .field.textarea select,.form .field.select select {
        margin-left:calc(35% + 15px);
        line-height: 60px
    }
}

.form .field.text select:-webkit-autofill,.form .field.textarea select:-webkit-autofill,.form .field.select select:-webkit-autofill,.form .field.text select:-webkit-autofill:hover,.form .field.textarea select:-webkit-autofill:hover,.form .field.select select:-webkit-autofill:hover,.form .field.text select:-webkit-autofill:focus,.form .field.textarea select:-webkit-autofill:focus,.form .field.select select:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    box-shadow: 0 0 0 100px #131313 inset;
    transition: background-color 5000s ease-in-out 0s
}

.form .field.text.has-error:after,.form .field.textarea.has-error:after,.form .field.select.has-error:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 1px solid #b24f61;
    pointer-events: none
}

.form .field.text.has-success:after,.form .field.textarea.has-success:after,.form .field.select.has-success:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 1px solid #9bffe7;
    pointer-events: none
}

.form .field.checkbox.has-error .label,.form .field.radio.has-error .label {
    color: #fa6c63
}

.form .field.checkbox.has-error .label:hover .checkmark:before,.form .field.radio.has-error .label:hover .checkmark:before {
    opacity: .8
}

.form .field.checkbox.has-error .label .checkmark:before,.form .field.radio.has-error .label .checkmark:before {
    border-color: #fa6c63;
    opacity: .6
}

.form .field.checkbox.radio .label .checkmark:before,.form .field.radio.radio .label .checkmark:before {
    border-radius: 50%
}

.form .field.checkbox .label,.form .field.radio .label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 25px;
    cursor: pointer;
    user-select: none
}

.form .field.checkbox .label:hover .checkmark:before,.form .field.radio .label:hover .checkmark:before {
    opacity: .4
}

.form .field.checkbox .label input,.form .field.radio .label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.form .field.checkbox .label input:checked~.checkmark:after,.form .field.radio .label input:checked~.checkmark:after {
    display: block
}

.form .field.checkbox .label .checkmark,.form .field.radio .label .checkmark {
    position: absolute;
    top: calc(50% - 12px);
    left: 0;
    height: 25px;
    width: 25px
}

.form .field.checkbox .label .checkmark:before,.form .field.radio .label .checkmark:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 6px;
    opacity: .2;
    transition: opacity .15s
}

.form .field.checkbox .label .checkmark:after,.form .field.radio .label .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 9px;
    top: 5px;
    width: 6px;
    height: 12px;
    border: solid #32ffce;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg)
}

.form .field.is-disabled {
    opacity: .6
}

.form .instructions {
    color: #ccc;
    padding-left: 0;
    padding-right: 20px;
    padding-top: 0;
    font-size: .9rem
}

.form .submit {
    margin-top: 1em;
    height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    background: #705df2;
    white-space: nowrap
}

@media (max-width: 800px) {
    .form .submit {
        height:55px
    }
}

@media (max-width: 600px) {
    .form .submit {
        height:50px
    }
}

.form .submit .label {
    opacity: 1
}

.form .spacer {
    height: 1.5em
}

.form .vat-refund-fieldset.is-checked .field.payer-company-name,.form .vat-refund-fieldset.is-checked .field.payer-vat-number,.form .vat-refund-fieldset.is-checked .field.instructions,.form .vat-refund-fieldset.is-checked .instructions {
    display: block
}

.form .vat-refund-fieldset .field.payer-company-name,.form .vat-refund-fieldset .field.payer-vat-number,.form .vat-refund-fieldset .instructions {
    display: none
}

.form .delivery-fieldset.is-delivery-auto .field.email,.form .delivery-fieldset.is-delivery-auto .field.message {
    display: block
}

.form .delivery-fieldset .field.email,.form .delivery-fieldset .field.message {
    display: none
}

.form .delivery-fieldset .field.email textarea,.form .delivery-fieldset .field.message textarea,.form .delivery-fieldset .field.email input,.form .delivery-fieldset .field.message input {
    padding-left: calc(32% + 20px)
}

.form .delivery-fieldset .field.message label {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

.form .delivery-fieldset .field.message label .faded {
    padding-left: 0;
    font-size: .8em
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #140b29;
    z-index: 6;
    pointer-events: none
}

@media print {
    .header {
        display: none
    }
}

html.is-theme-dark .header {
    background: #1a1a1a
}

html.is-theme-dark .header .menu .menu-background {
    background: linear-gradient(180deg,#1a1a1a 80%,rgba(26,26,26,.65) 100%)
}

html.is-theme-light .header {
    background: #fff
}

html.is-theme-light .header .links .link .label {
    opacity: .65
}

html.is-theme-light .header .actions .login-button {
    opacity: .65;
    transition: opacity .15s
}

html.is-theme-light .header .actions .login-button:hover {
    opacity: 1
}

html.is-theme-light .header .actions .login-button .icon svg * {
    fill: #000
}

html.is-theme-light .header .actions .logout-button {
    opacity: .65;
    transition: opacity .15s
}

html.is-theme-light .header .actions .logout-button:hover {
    opacity: 1
}

html.is-theme-light .header .actions .logout-button .icon svg * {
    fill: #000
}

html.is-theme-light .header .menu-trigger .bar {
    background: #000
}

html.is-theme-light .header .menu .menu-background {
    background: linear-gradient(180deg,#fff 69.94%,rgba(255,255,255,.5) 100%)
}

.header.is-menu-open .menu-trigger .bar:nth-child(1) {
    animation-name: bar-1
}

.header.is-menu-open .menu-trigger .bar:nth-child(2) {
    animation-name: bar-2
}

.header.is-menu-open .menu-trigger .bar:nth-child(3) {
    animation-name: bar-3
}

.header.is-menu-open .menu {
    opacity: 1;
    pointer-events: auto
}

.header .container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: auto;
    height: var(--header-height);
    padding-left: 25px;
    padding-right: 25px
}

@media (max-width: 600px) {
    .header .container {
        padding-left:20px;
        padding-right: 20px
    }
}

@media (max-width: 400px) {
    .header .container {
        padding-left:10px;
        padding-right: 10px
    }
}

.header .container .links,.header .container .actions {
    pointer-events: auto
}

.header .navigation {
    display: flex
}

.header .links {
    display: flex
}

@media (max-width: 1080px) {
    .header .links {
        display:none
    }
}

.header .links:hover .link .label {
    opacity: .5!important
}

.header .links:hover .link:hover .label {
    text-decoration: underline;
    opacity: 1!important
}

.header .links .link {
    position: relative;
    display: block;
    display: flex;
    align-items: center;
    padding-left: 25px;
    padding-right: 25px
}

@media (max-width: 1080px) {
    .header .links .link {
        padding-left:15px;
        padding-right: 15px
    }
}

.header .links .link.is-active .highlight {
    opacity: 1;
    transform: scaleX(1)
}

.header .links .link.is-active .label {
    opacity: 1
}

.header .links .link .highlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scaleX(0);
    transition: opacity .3s,transform .3s;
    background: linear-gradient(to bottom,rgba(112,93,242,.2),rgba(112,93,242,0))
}

.header .links .link .highlight:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #705df2
}

.header .links .link .label {
    font-family: Greycliff,sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    letter-spacing: .04em;
    opacity: .5;
    transition: opacity .15s
}

.header .actions {
    position: relative;
    display: flex;
    align-items: center;
    font-family: Greycliff,sans-serif;
    font-weight: 700
}

@media (max-width: 1080px) {
    .header .actions.is-desktop {
        display:none
    }
}

.header .actions .login-button {
    display: flex;
    align-items: center;
    margin-right: 20px
}

@media (max-width: 1080px) {
    .header .actions .login-button {
        margin-right:10px
    }
}

.header .actions .login-button:hover .label {
    text-decoration: underline
}

.header .actions .login-button .icon {
    display: inline-block;
    width: 15px;
    height: 20px;
    margin-right: 8px
}

.header .actions .login-button .icon svg {
    width: 100%;
    height: 100%;
    fill: #fff
}

.header .actions .logout-button {
    display: flex;
    align-items: center;
    margin-right: 20px
}

@media (max-width: 1080px) {
    .header .actions .logout-button {
        margin-right:10px
    }
}

.header .actions .logout-button:hover .label {
    text-decoration: underline
}

.header .actions .logout-button .icon {
    display: inline-block;
    width: 19px;
    height: 20px;
    margin-right: 8px
}

.header .actions .logout-button .icon svg {
    width: 100%;
    height: 100%;
    fill: #fff
}

.header .actions .button {
    margin-left: 15px
}

.header .actions .button .label {
    font-size: 18px
}

@media (max-width: 1080px) {
    .header .actions .button .non-important {
        display:none
    }
}

.header .menu-trigger {
    display: none;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 38px;
    pointer-events: auto
}

@media (max-width: 1080px) {
    .header .menu-trigger {
        display:block
    }
}

.header .menu-trigger .bar {
    position: absolute;
    top: calc(50% - 1px);
    left: calc(50% - 12px);
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    animation: .3s both
}

.header .menu-trigger .bar:nth-child(1) {
    animation-name: bar-1-reverse
}

.header .menu-trigger .bar:nth-child(2) {
    animation-name: bar-2-reverse
}

.header .menu-trigger .bar:nth-child(3) {
    animation-name: bar-3-reverse
}

@-moz-keyframes bar-1 {
    0% {
        transform: translateY(-7px)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(0) rotate(-45deg)
    }
}

@-webkit-keyframes bar-1 {
    0% {
        transform: translateY(-7px)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(0) rotate(-45deg)
    }
}

@-o-keyframes bar-1 {
    0% {
        transform: translateY(-7px)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(0) rotate(-45deg)
    }
}

@keyframes bar-1 {
    0% {
        transform: translateY(-7px)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(0) rotate(-45deg)
    }
}

@-moz-keyframes bar-2 {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(0) scaleX(1)
    }

    51% {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(0)
    }
}

@-webkit-keyframes bar-2 {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(0) scaleX(1)
    }

    51% {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(0)
    }
}

@-o-keyframes bar-2 {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(0) scaleX(1)
    }

    51% {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(0)
    }
}

@keyframes bar-2 {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(0) scaleX(1)
    }

    51% {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(0)
    }
}

@-moz-keyframes bar-3 {
    0% {
        transform: translateY(7px)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(0) rotate(45deg)
    }
}

@-webkit-keyframes bar-3 {
    0% {
        transform: translateY(7px)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(0) rotate(45deg)
    }
}

@-o-keyframes bar-3 {
    0% {
        transform: translateY(7px)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(0) rotate(45deg)
    }
}

@keyframes bar-3 {
    0% {
        transform: translateY(7px)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(0) rotate(45deg)
    }
}

@-moz-keyframes bar-1-reverse {
    0% {
        transform: translateY(0) rotate(-45deg)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-7px)
    }
}

@-webkit-keyframes bar-1-reverse {
    0% {
        transform: translateY(0) rotate(-45deg)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-7px)
    }
}

@-o-keyframes bar-1-reverse {
    0% {
        transform: translateY(0) rotate(-45deg)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-7px)
    }
}

@keyframes bar-1-reverse {
    0% {
        transform: translateY(0) rotate(-45deg)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-7px)
    }
}

@-moz-keyframes bar-2-reverse {
    0% {
        transform: scaleX(0)
    }

    50% {
        transform: scaleX(0)
    }

    51% {
        transform: translateY(0) scaleX(1)
    }

    to {
        transform: translateY(0)
    }
}

@-webkit-keyframes bar-2-reverse {
    0% {
        transform: scaleX(0)
    }

    50% {
        transform: scaleX(0)
    }

    51% {
        transform: translateY(0) scaleX(1)
    }

    to {
        transform: translateY(0)
    }
}

@-o-keyframes bar-2-reverse {
    0% {
        transform: scaleX(0)
    }

    50% {
        transform: scaleX(0)
    }

    51% {
        transform: translateY(0) scaleX(1)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes bar-2-reverse {
    0% {
        transform: scaleX(0)
    }

    50% {
        transform: scaleX(0)
    }

    51% {
        transform: translateY(0) scaleX(1)
    }

    to {
        transform: translateY(0)
    }
}

@-moz-keyframes bar-3-reverse {
    0% {
        transform: translateY(0) rotate(45deg)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(7px)
    }
}

@-webkit-keyframes bar-3-reverse {
    0% {
        transform: translateY(0) rotate(45deg)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(7px)
    }
}

@-o-keyframes bar-3-reverse {
    0% {
        transform: translateY(0) rotate(45deg)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(7px)
    }
}

@keyframes bar-3-reverse {
    0% {
        transform: translateY(0) rotate(45deg)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(7px)
    }
}

.header .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
    overflow: scroll
}

.header .menu .menu-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,#140b29 69.94%,rgba(20,11,41,.65) 100%)
}

.header .menu .links {
    padding-top: 100px;
    display: flex;
    flex-direction: column
}

.header .menu .links .link {
    justify-content: center;
    padding: .35em 0;
    font-size: 64px;
    text-align: center
}

@media (max-width: 1300px) {
    .header .menu .links .link {
        font-size:59px
    }
}

@media (max-width: 1080px) {
    .header .menu .links .link {
        font-size:54px
    }
}

@media (max-width: 800px) {
    .header .menu .links .link {
        font-size:49px
    }
}

@media (max-width: 600px) {
    .header .menu .links .link {
        font-size:44px
    }
}

@media (max-width: 400px) {
    .header .menu .links .link {
        font-size:39px
    }
}

.header .menu .links .link.is-active .highlight {
    opacity: 1;
    transform: scaleY(1)
}

.header .menu .links .link.is-active .label {
    opacity: 1
}

.header .menu .links .link .highlight {
    transform: scaleY(0);
    background: linear-gradient(to right,rgba(112,93,242,.2),rgba(112,93,242,0))
}

.header .menu .links .link .highlight:before {
    width: 3px;
    height: 100%
}

.header .menu .links .link .label {
    font-weight: 700
}

.header .menu .actions {
    padding-top: 50px;
    padding-bottom: 25px;
    justify-content: center
}

.hero {
    background: linear-gradient(38.54deg,#5250b3 0%,rgba(92,72,160,.755) 27.13%,rgba(103,63,140,.5) 55.41%,rgba(113,54,120,.24) 84.27%,rgba(123,46,102,0) 110.83%);
    text-align: center;
    border-radius: 12px;
    padding-top: 75px;
    padding-bottom: 75px
}

@media (max-width: 1080px) {
    .hero {
        padding-top:calc(20px + 6vmin);
        padding-bottom: calc(20px + 6vmin)
    }
}

.hero .inner {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto
}

@media (max-width: 600px) {
    .hero .inner {
        padding-left:40px;
        padding-right: 40px
    }
}

.hero p {
    font-size: 20px;
    opacity: .8
}

.lazy {
    opacity: 0;
    transition: opacity ease-in .3s;
    will-change: opacity
}

.lazy.is-loaded {
    opacity: 1;
    will-change: auto
}

.main-logo {
    display: flex;
    width: 220px;
    height: 38px;
    align-items: center
}

.main-logo.is-light svg * {
    fill: #fff
}

.main-logo.is-dark {
    height: 44px
}

.main-logo.is-dark svg * {
    fill: #000
}

.main-logo.is-dark .logo {
    width: 39px;
    height: 100%
}

@media (max-width: 600px) {
    .main-logo.is-dark .logo {
        width:34px
    }
}

@media (max-width: 400px) {
    .main-logo.is-dark .logo {
        width:32px
    }
}

.main-logo.is-dark .logo svg * {
    fill: #705df2
}

.main-logo.is-dark .text {
    height: 100%;
    margin-left: 10px
}

@media (max-width: 600px) {
    .main-logo.is-dark .text {
        width:140px;
        margin-left: 8px
    }
}

@media (max-width: 400px) {
    .main-logo.is-dark .text {
        width:122px;
        margin-left: 6px
    }
}

.main-logo:hover.is-abyss .logo,.main-logo:hover.is-dark .logo {
    transform: translate(10px);
    transition-delay: 0s
}

.main-logo:hover.is-abyss .letter,.main-logo:hover.is-dark .letter {
    transform: translate(10px)
}

.main-logo:hover.is-abyss .letter:nth-child(1),.main-logo:hover.is-dark .letter:nth-child(1) {
    transition-delay: .01s
}

.main-logo:hover.is-abyss .letter:nth-child(2),.main-logo:hover.is-dark .letter:nth-child(2) {
    transition-delay: .02s
}

.main-logo:hover.is-abyss .letter:nth-child(3),.main-logo:hover.is-dark .letter:nth-child(3) {
    transition-delay: .03s
}

.main-logo:hover.is-abyss .letter:nth-child(4),.main-logo:hover.is-dark .letter:nth-child(4) {
    transition-delay: .04s
}

.main-logo:hover.is-abyss .letter:nth-child(5),.main-logo:hover.is-dark .letter:nth-child(5) {
    transition-delay: .05s
}

.main-logo:hover.is-abyss .letter:nth-child(6),.main-logo:hover.is-dark .letter:nth-child(6) {
    transition-delay: .06s
}

.main-logo:hover.is-abyss .letter:nth-child(7),.main-logo:hover.is-dark .letter:nth-child(7) {
    transition-delay: .07s
}

.main-logo:hover.is-abyss .letter:nth-child(8),.main-logo:hover.is-dark .letter:nth-child(8) {
    transition-delay: .08s
}

.main-logo:hover.is-abyss .letter:nth-child(9),.main-logo:hover.is-dark .letter:nth-child(9) {
    transition-delay: .09s
}

.main-logo:hover.is-abyss .letter:nth-child(10),.main-logo:hover.is-dark .letter:nth-child(10) {
    transition-delay: .1s
}

.main-logo:hover.is-abyss .letter:nth-child(11),.main-logo:hover.is-dark .letter:nth-child(11) {
    transition-delay: .11s
}

.main-logo:hover.is-abyss .letter:nth-child(12),.main-logo:hover.is-dark .letter:nth-child(12) {
    transition-delay: .12s
}

.main-logo:hover.is-abyss .letter:nth-child(13),.main-logo:hover.is-dark .letter:nth-child(13) {
    transition-delay: .13s
}

.main-logo:hover.is-abyss .letter:nth-child(14),.main-logo:hover.is-dark .letter:nth-child(14) {
    transition-delay: .14s
}

.main-logo:hover.is-abyss .letter:nth-child(15),.main-logo:hover.is-dark .letter:nth-child(15) {
    transition-delay: .15s
}

.main-logo:hover .triangle-1 {
    animation: logo-blink .6s .15s
}

.main-logo:hover .triangle-2,.main-logo:hover .triangle-3 {
    animation: logo-blink .6s 0s
}

.main-logo:hover .face-1 {
    animation: logo-blink .6s .1s
}

.main-logo:hover .face-2,.main-logo:hover .face-3 {
    animation: logo-blink .6s .05s
}

.main-logo:hover .letter {
    transform: translate(10px)
}

.main-logo:hover .letter:nth-child(1) {
    transition-delay: .31s
}

.main-logo:hover .letter:nth-child(2) {
    transition-delay: .32s
}

.main-logo:hover .letter:nth-child(3) {
    transition-delay: .33s
}

.main-logo:hover .letter:nth-child(4) {
    transition-delay: .34s
}

.main-logo:hover .letter:nth-child(5) {
    transition-delay: .35s
}

.main-logo:hover .letter:nth-child(6) {
    transition-delay: .36s
}

.main-logo:hover .letter:nth-child(7) {
    transition-delay: .37s
}

.main-logo:hover .letter:nth-child(8) {
    transition-delay: .38s
}

.main-logo:hover .letter:nth-child(9) {
    transition-delay: .39s
}

.main-logo:hover .letter:nth-child(10) {
    transition-delay: .4s
}

.main-logo:hover .letter:nth-child(11) {
    transition-delay: .41s
}

.main-logo:hover .letter:nth-child(12) {
    transition-delay: .42s
}

.main-logo:hover .letter:nth-child(13) {
    transition-delay: .43s
}

.main-logo:hover .letter:nth-child(14) {
    transition-delay: .44s
}

.main-logo:hover .letter:nth-child(15) {
    transition-delay: .45s
}

.main-logo svg {
    width: 100%;
    height: 100%;
    overflow: visible
}

.main-logo .logo {
    display: inline-block;
    width: 34px;
    height: 38px;
    transition: transform .2s .15s;
    will-change: transform
}

.main-logo .text {
    display: inline-block;
    width: 156px;
    height: 20px;
    margin-left: 6px
}

.main-logo .letter {
    transition: transform .2s;
    will-change: transform
}

.main-logo .letter:nth-child(1) {
    transition-delay: .14s
}

.main-logo .letter:nth-child(2) {
    transition-delay: .13s
}

.main-logo .letter:nth-child(3) {
    transition-delay: .12s
}

.main-logo .letter:nth-child(4) {
    transition-delay: .11s
}

.main-logo .letter:nth-child(5) {
    transition-delay: .1s
}

.main-logo .letter:nth-child(6) {
    transition-delay: .09s
}

.main-logo .letter:nth-child(7) {
    transition-delay: .08s
}

.main-logo .letter:nth-child(8) {
    transition-delay: .07s
}

.main-logo .letter:nth-child(9) {
    transition-delay: .06s
}

.main-logo .letter:nth-child(10) {
    transition-delay: .05s
}

.main-logo .letter:nth-child(11) {
    transition-delay: .04s
}

.main-logo .letter:nth-child(12) {
    transition-delay: .03s
}

.main-logo .letter:nth-child(13) {
    transition-delay: .02s
}

.main-logo .letter:nth-child(14) {
    transition-delay: .01s
}

.main-logo .letter:nth-child(15) {
    transition-delay: 0s
}

.page.has-card {
    padding-top: var(--header-height);
    background-color: #1a1a1a
}

.page.has-card .page-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 80px);
    padding-bottom: 80px
}

@media (max-width: 1080px) {
    .page.has-card .page-content {
        min-height:calc(100vh - 60px);
        padding-bottom: 60px
    }
}

@media (max-width: 800px) {
    .page.has-card .page-content {
        min-height:calc(100vh - 40px);
        padding-bottom: 40px
    }
}

@media (max-width: 600px) {
    .page.has-card .page-content {
        min-height:0;
        padding-top: 20px;
        padding-bottom: 20px
    }
}

@media (max-width: 400px) {
    .page.has-card .page-content {
        min-height:0;
        padding-top: 10px;
        padding-bottom: 10px
    }
}

.page.has-card .panel {
    position: relative;
    width: 550px;
    background: #202020;
    border-radius: 12px;
    box-shadow: 0 14px 40px #0006;
    overflow: hidden
}

.page.has-card .panel .head {
    padding: 40px;
    font-size: 1.75em;
    text-align: center;
    background: rgba(255,255,255,.024)
}

.page.has-card .panel .body {
    padding: 40px
}

@media (max-width: 800px) {
    .page.has-card .panel .body {
        padding:35px 30px
    }
}

@media (max-width: 600px) {
    .page.has-card .panel .body {
        padding:30px 20px
    }
}

@media (max-width: 400px) {
    .page.has-card .panel .body {
        padding:25px 15px
    }
}

.page.has-boring-content {
    padding-top: var(--header-height);
    padding-bottom: var(--header-height);
    padding-left: 25px;
    padding-right: 25px;
    background-color: #1a1a1a
}

@media (max-width: 800px) {
    .page.has-boring-content {
        padding-left:20px;
        padding-right: 20px
    }
}

@media (max-width: 600px) {
    .page.has-boring-content {
        padding-left:15px;
        padding-right: 15px
    }
}

.page.has-boring-content .text {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px
}

.page.has-boring-content .text .lang-switcher {
    margin-bottom: 2em
}

@media (max-width: 1080px) {
    .page.has-boring-content .text {
        padding-top:60px;
        padding-bottom: 60px
    }
}

@media (max-width: 800px) {
    .page.has-boring-content .text {
        padding-top:40px;
        padding-bottom: 40px
    }
}

@media (max-width: 600px) {
    .page.has-boring-content .text {
        padding-top:20px;
        padding-bottom: 20px
    }
}

@media (max-width: 400px) {
    .page.has-boring-content .text {
        padding-top:10px;
        padding-bottom: 10px
    }
}

.page.has-boring-content .text .button.is-lang-switch {
    margin-right: 0
}

.page.has-boring-content .text h2 {
    position: relative
}

.player {
    position: relative;
    width: 100%;
    background: #202020;
    overflow: hidden
}

.player.is-hover .video-area .tracks {
    transform: translateY(-30px);
    transition-duration: .2s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0,0,.25,1)
}

.player.is-hover .controls .bottom {
    transform: translateY(-100%) translateY(12px)!important;
    transition-duration: .2s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0,0,.25,1)
}

.player.is-hover .controls .quality:hover .list .mover {
    transform: translateY(0);
    transition-timing-function: cubic-bezier(.29,.29,0,1)
}

.player.is-hover.is-fullscreen .video-area .tracks {
    transform: translateY(-40px)
}

.player.is-hover.is-meta-loaded .controls .seekbar.is-hover .cursor,.player.is-hover.is-meta-loaded .controls .seekbar.is-hover .update-hint {
    opacity: 1
}

.player.has-played-once .poster {
    opacity: 0
}

.player.has-thumbnail .controls .cursor .cursor-inner .cursor-thumbnail {
    display: block
}

.player.is-playing .controls .play-toggle .pause {
    transform: scale(1);
    transition: .12s .06s transform
}

.player.is-playing .controls .play-toggle .play {
    transform: scale(.001);
    transition: .12s transform
}

.player.is-playing .overlay,.player.is-playing .logo {
    opacity: 0
}

.player.is-paused .controls .play-toggle .pause {
    transform: scale(.001);
    transition: .12s transform
}

.player.is-paused .controls .play-toggle .play {
    transform: scale(1);
    transition: .12s .06s transform
}

.player.is-meta-loaded .controls .rate,.player.is-meta-loaded .controls .play-toggle,.player.is-meta-loaded .controls .time {
    opacity: 1
}

.player.is-not-using-hls .controls .quality {
    display: none
}

.player.is-quality-loaded .controls .quality {
    opacity: 1
}

.player.is-fullscreen-not-supported .controls .fullscreen-toggle {
    display: none
}

.player.is-fullscreen .video-area {
    height: 100%
}

.player.is-fullscreen .video-area .tracks {
    bottom: 2em
}

.player.is-fullscreen .controls .fullscreen-toggle .icon .corner.corner-1 .shape {
    transform: rotate(-90deg)
}

.player.is-fullscreen .controls .fullscreen-toggle .icon .corner.corner-2 .shape {
    transform: rotate(0)
}

.player.is-fullscreen .controls .fullscreen-toggle .icon .corner.corner-3 .shape {
    transform: rotate(90deg)
}

.player.is-fullscreen .controls .fullscreen-toggle .icon .corner.corner-4 .shape {
    transform: rotate(180deg)
}

.player.is-muted .controls .volume .volume-toggle .icon svg .wave {
    opacity: .15
}

.player .video-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 28px);
    overflow: hidden;
    cursor: pointer;
    z-index: 0
}

.player .video-area .video,.player .video-area .video-and-subtitles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none
}

.player .video-area .direction {
    display: flex;
    position: absolute;
    top: 0;
    width: 15%;
    max-width: 260px;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: .3s;
    will-change: opacity;
    user-select: none;
    pointer-events: none
}

@media (max-width: 800px),(orientation: portrait) {
    .player .video-area .direction {
        pointer-events:auto
    }
}

html.has-touch .player .video-area .direction {
    display: flex
}

.player .video-area .direction.is-backward {
    left: 0;
    background: linear-gradient(to right,rgba(11,11,11,.733) 25%,rgba(11,11,11,0))
}

.player .video-area .direction.is-forward {
    right: 0;
    background: linear-gradient(to left,rgba(11,11,11,.733) 25%,rgba(11,11,11,0))
}

.player .video-area .direction.is-active {
    transition: none;
    opacity: 1
}

.player .video-area .tracks {
    position: absolute;
    bottom: .5em;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition-property: transform;
    transition-duration: .4s;
    transition-timing-function: cubic-bezier(.55,0,.25,1);
    font-size: 1.65vw
}

.player .video-area .tracks .tracks-text {
    padding: .5em 1em;
    border-radius: .5vh;
    background: rgba(0,0,0,.733);
    transition: opacity .15s;
    pointer-events: auto;
    user-select: none;
    text-align: center
}

.player .video-area .tracks .tracks-text:hover {
    opacity: .1
}

.player .video-area .tracks .tracks-text:empty {
    display: none
}

.player .video-area .tracks .tracks-text .technical-term {
    font-family: Roboto Mono,monospace;
    font-weight: 400;
    font-size: .92em;
    color: #32ffce;
    padding: 0 .15em
}

.player .video-area .tracks .tracks-text .quote {
    font-style: italic
}

.player .controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28px;
    z-index: 2
}

.player .controls .seekbar {
    position: absolute;
    top: 0;
    width: 100%;
    height: 28px;
    background: #0b0b0b;
    cursor: pointer
}

.player .controls .seekbar .inner {
    position: absolute;
    top: 11px;
    left: 10px;
    right: 10px;
    height: 6px;
    border-radius: 3px;
    background: #313131
}

.player .controls .seekbar .canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.player .controls .seekbar .sections-separators {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.player .controls .seekbar .sections-separators .section-separator {
    position: absolute;
    top: 0;
    width: 7px;
    height: 6px;
    background: url(/assets/images/player-seekbar-section-separator.png);
    background-size: cover
}

.player .controls .seekbar .sparkles-container {
    position: absolute;
    top: 50%
}

.player .controls .seekbar .disabled {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background-image: repeating-linear-gradient(-55deg,#313131,#313131 5px,#0b0b0b 5px,#0b0b0b 10px)
}

.player .controls .seekbar .update-hint {
    position: absolute;
    top: 0;
    opacity: 0;
    transition: opacity .15s;
    will-change: transform,opacity
}

.player .controls .seekbar .update-hint:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -1px;
    width: 3px;
    height: 6px;
    background: #ffd78a;
    border: 1px solid #000
}

.player .controls .seekbar .update-hint .icon {
    position: absolute;
    bottom: 6px;
    left: -8px;
    width: 16px;
    height: 15px
}

.player .controls .seekbar .update-hint .icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.player .controls .cursor {
    position: absolute;
    bottom: calc(100% + 22px);
    left: 0;
    height: 28px;
    opacity: 0;
    transition: opacity .15s;
    will-change: transform,opacity;
    pointer-events: none
}

.player .controls .cursor .cursor-inner {
    position: absolute;
    bottom: 0;
    left: 0
}

.player .controls .cursor .cursor-inner .cursor-tip {
    position: absolute;
    top: calc(100% - 1px);
    left: calc(50% - 10px);
    width: 20px;
    height: 12px;
    border-radius: 2px;
    overflow: hidden
}

.player .controls .cursor .cursor-inner .cursor-tip:after {
    content: "";
    position: absolute;
    left: calc(50% - 5px);
    top: -5px;
    display: block;
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    background: #705df2
}

.player .controls .cursor .cursor-content {
    position: absolute;
    bottom: 0;
    left: 0;
    min-width: 192px;
    transform: translate(-50%);
    background: #705df2;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 500;
    box-shadow: 0 5px 25px #0009;
    pointer-events: none
}

.player .controls .cursor .cursor-thumbnail {
    display: none;
    position: relative;
    width: 100%;
    height: 108px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    overflow: hidden;
    box-shadow: 2px 2px 20px inset #0003;
    background-size: cover
}

.player .controls .cursor .cursor-label {
    display: flex;
    position: relative;
    min-height: 28px;
    text-align: center
}

.player .controls .cursor .cursor-label.has-sections .cursor-time {
    position: relative;
    width: 65px;
    height: auto;
    background: rgba(0,0,0,.133)
}

.player .controls .cursor .cursor-label .cursor-section-title {
    padding: 8px;
    width: calc(100% - 65px);
    line-height: 1.25em
}

.player .controls .cursor .cursor-label .cursor-time {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    white-space: nowrap
}

.player .controls .cursor .cursor-label .cursor-time .value,.player .controls .cursor .cursor-label .cursor-time .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.player .controls .cursor .cursor-label .cursor-time .placeholder {
    visibility: hidden
}

.player .controls .bottom {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to top,#0b0b0b,rgba(11,11,11,.467));
    justify-content: space-between;
    align-items: stretch;
    transform: translateY(0);
    transition-property: transform;
    transition-duration: .4s;
    transition-timing-function: cubic-bezier(.55,0,.25,1)
}

.player .controls .bottom .left {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.player .controls .bottom .right {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.player .controls .play-toggle {
    position: relative;
    width: 45px;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s .3s;
    will-change: opacity
}

.player .controls .play-toggle .play,.player .controls .play-toggle .pause {
    display: block;
    position: absolute;
    will-change: transform
}

.player .controls .play-toggle .play {
    top: calc(50% - 10px);
    left: 15px;
    width: 17px;
    height: 20px
}

.player .controls .play-toggle .play svg {
    display: block
}

.player .controls .play-toggle .play svg * {
    fill: #fff
}

.player .controls .play-toggle .pause {
    top: calc(50% - 8px);
    left: 15px;
    width: 16px;
    height: 16px
}

.player .controls .play-toggle .pause .bar {
    display: block;
    position: absolute;
    top: 0;
    width: 6px;
    height: 100%;
    background: #fff
}

.player .controls .play-toggle .pause .bar.bar-1 {
    left: 0
}

.player .controls .play-toggle .pause .bar.bar-2 {
    right: 0
}

.player .controls .time {
    display: block;
    position: relative;
    margin-right: 12px;
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .3s .3s;
    will-change: opacity;
    cursor: pointer
}

.player .controls .time .current {
    display: inline-block
}

.player .controls .time .separator {
    display: inline-block;
    opacity: .35;
    margin-left: 4px;
    margin-right: 3px
}

.player .controls .time .duration {
    display: inline-block;
    opacity: .35
}

.player .controls .time .digit {
    display: inline-block;
    width: .55em;
    text-align: center
}

.player .controls .rate {
    white-space: nowrap;
    opacity: 0;
    transition: opacity .3s .3s;
    will-change: opacity
}

.player .controls .rate .button {
    margin: 0
}

.player .controls .rate .button.is-less {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.player .controls .rate .button.is-current {
    border-radius: 0;
    margin-left: 1px;
    margin-right: 1px
}

.player .controls .rate .button.is-current .label {
    text-align: center
}

.player .controls .rate .button.is-current .label .text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.player .controls .rate .button.is-current .label .placeholder {
    visibility: hidden
}

.player .controls .rate .button.is-more {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.player .controls .fullscreen-toggle {
    position: relative;
    width: 45px;
    height: 100%
}

.player .controls .fullscreen-toggle .icon {
    position: absolute;
    top: 50%;
    left: 50%
}

.player .controls .fullscreen-toggle .icon .corner {
    position: absolute
}

.player .controls .fullscreen-toggle .icon .corner.corner-1 {
    top: -5px;
    left: 7px
}

.player .controls .fullscreen-toggle .icon .corner.corner-1 .shape {
    transform: rotate(90deg)
}

.player .controls .fullscreen-toggle .icon .corner.corner-2 {
    top: 5px;
    left: 7px
}

.player .controls .fullscreen-toggle .icon .corner.corner-2 .shape {
    transform: rotate(180deg)
}

.player .controls .fullscreen-toggle .icon .corner.corner-3 {
    top: 5px;
    left: -7px
}

.player .controls .fullscreen-toggle .icon .corner.corner-3 .shape {
    transform: rotate(-90deg)
}

.player .controls .fullscreen-toggle .icon .corner.corner-4 {
    top: -5px;
    left: -7px
}

.player .controls .fullscreen-toggle .icon .corner.corner-4 .shape {
    transform: rotate(0)
}

.player .controls .fullscreen-toggle .icon .corner .shape {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 6px;
    height: 6px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    border-top-left-radius: 3px
}

.player .controls .volume {
    position: relative;
    width: 45px;
    height: 100%
}

.player .controls .volume:hover .progress {
    opacity: 1;
    pointer-events: auto
}

.player .controls .volume .volume-toggle {
    display: flex;
    width: 100%;
    height: 100%;
    padding-right: 6px;
    align-items: center;
    justify-content: center
}

.player .controls .volume .volume-toggle .icon {
    width: 24px;
    height: 16px
}

.player .controls .volume .volume-toggle .icon svg {
    display: block;
    width: 100%;
    height: 100%
}

.player .controls .volume .volume-toggle .icon svg .wave {
    opacity: 1;
    transition: .15s;
    will-change: opacity
}

.player .controls .volume .volume-toggle .icon svg * {
    fill: #fff
}

.player .controls .volume .progress {
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: 100px;
    cursor: pointer;
    background: rgba(11,11,11,.467);
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none
}

.player .controls .volume .progress .bar {
    position: absolute;
    left: calc(50% - 3px);
    bottom: 5px;
    top: 15px;
    width: 6px;
    background: #313131;
    border-radius: 3px;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(#fff,#000)
}

.player .controls .volume .progress .bar .fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 3px;
    transform: translate(100%);
    will-change: transform
}

.player .controls .shortcuts {
    margin-right: 4px
}

html.has-touch .player .controls .shortcuts {
    display: none
}

.player .controls .select {
    position: relative;
    margin-right: 15px;
    z-index: 2
}

.player .controls .select:hover .list .mover {
    transform: translateY(0);
    transition-timing-function: cubic-bezier(.29,.29,0,1)
}

.player .controls .select .is-main {
    position: relative;
    margin-right: 0;
    box-shadow: 0 14px 40px #0002;
    pointer-events: none
}

html.has-mouse .player .controls .select .is-main {
    pointer-events: auto
}

html.has-touch .player .controls .select .is-main {
    pointer-events: none
}

.player .controls .select .is-main .label.is-placeholder {
    margin-right: 26px;
    visibility: hidden
}

.player .controls .select .is-main .label.is-value {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    line-height: 24px
}

.player .controls .select .is-main .arrow {
    display: block;
    position: absolute;
    top: calc(50% - 2px);
    right: 10px;
    width: 8px;
    height: 5px;
    transform: rotate(180deg)
}

.player .controls .select .is-main .arrow svg {
    display: block;
    width: 100%;
    height: 100%
}

.player .controls .select .is-main .arrow svg * {
    fill: #fff
}

.player .controls .select .list {
    position: absolute;
    bottom: 24px;
    left: 0;
    min-width: 100%;
    overflow: hidden;
    pointer-events: none
}

.player .controls .select .list .mover {
    padding-top: 5px;
    border-radius: 4px;
    background: #1f1f1f;
    transform: translateY(100%);
    transition: transform .6s cubic-bezier(.75,0,.25,1);
    will-change: transform;
    pointer-events: auto
}

.player .controls .select .list .link {
    position: relative;
    display: inline-flex;
    height: 25px;
    line-height: 0;
    padding: 10px 15px;
    border-radius: 5px;
    font-family: Greycliff,sans-serif;
    font-weight: 700;
    font-size: .6rem;
    white-space: nowrap;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(#fff,#000);
    opacity: .75
}

.player .controls .select .list .link.is-active {
    color: #705df2;
    opacity: 1
}

.player .controls .select .list .link:hover {
    opacity: 1
}

.player .controls .quality {
    opacity: 0;
    transition: opacity .3s .3s;
    will-change: opacity
}

.player .controls .quality.is-auto-enabled .list .link:first-child {
    color: #705df2
}

.player .controls .quality.is-auto-enabled .list .link.is-active {
    color: #fff
}

.player .controls .quality.is-auto-enabled .list .link.is-active:after {
    content: "*";
    color: #705df2;
    font-size: 2em
}

.player .controls .subtitles button {
    text-transform: uppercase
}

.player .poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0e0e0e;
    transition: opacity .3s;
    pointer-events: none
}

.player .poster img {
    width: 100%;
    height: -100%;
    object-fit: cover
}

.player .poster img.is-loaded {
    opacity: .75
}

.player .logo {
    position: absolute;
    top: calc(50% - 34px / 1.5);
    left: calc(50% - 19px);
    width: 34px;
    height: 38px;
    transition: opacity .3s;
    pointer-events: none
}

.player .logo svg {
    display: block;
    width: 100%;
    height: 100%
}

.player .logo svg * {
    fill: #fff
}

.player.bp-800 .controls .time {
    font-size: 16px
}

.player.bp-600 .controls .non-important {
    display: none
}

.player.bp-600 .controls .play-toggle {
    width: 40px
}

.player.bp-600 .controls .time {
    margin-right: 8px;
    font-size: 15px
}

.player.bp-600 .controls .time .separator,.player.bp-600 .controls .time .duration {
    display: none
}

.player.bp-600 .controls .rate .button.is-less .label,.player.bp-600 .controls .rate .button.is-more .label {
    margin-left: 6px;
    margin-right: 6px
}

.player.bp-600 .controls .rate .button.is-current .label {
    margin-left: 2px;
    margin-right: 2px
}

.player.bp-600 .controls .shortcuts {
    display: none
}

.player.bp-600 .controls .select {
    margin-right: 8px
}

.player.bp-400 .controls .play-toggle {
    width: 30px
}

.player.bp-400 .controls .play-toggle .play {
    top: calc(50% - 8px);
    left: 10px;
    width: 13px;
    height: 15px
}

.player.bp-400 .controls .play-toggle .pause {
    top: calc(50% - 6px);
    left: 10px;
    width: 12px;
    height: 12px
}

.player.bp-400 .controls .play-toggle .pause .bar {
    display: block;
    position: absolute;
    top: 0;
    width: 4px;
    height: 100%;
    background: #fff
}

.player.bp-400 .controls .play-toggle .pause .bar.bar-1 {
    left: 0
}

.player.bp-400 .controls .play-toggle .pause .bar.bar-2 {
    right: 0
}

.player.bp-400 .controls .fullscreen-toggle,.player.bp-400 .controls .volume {
    width: 40px
}

.player.bp-400 .controls .time {
    font-size: 12px
}

.player.bp-400 .controls .seekbar .cursor .cursor-content {
    min-width: auto
}

.player.bp-400 .controls .seekbar .cursor .cursor-content .cursor-thumbnail {
    display: none
}

.player.bp-400 .controls .seekbar .cursor .cursor-content .cursor-time {
    padding-left: 10px;
    padding-right: 10px;
    background: none
}

.player.bp-400 .controls .seekbar .cursor .cursor-content .cursor-section-title {
    display: none
}

.video-area.is-playing .overlay,.is-playing .video-area .overlay,.video-area.is-playing .logo,.is-playing .video-area .logo {
    opacity: 0
}

.video-area:hover .triangle-1 {
    animation: logo-blink .6s .15s
}

.video-area:hover .triangle-2,.video-area:hover .triangle-3 {
    animation: logo-blink .6s 0s
}

.video-area:hover .face-1 {
    animation: logo-blink .6s .1s
}

.video-area:hover .face-2,.video-area:hover .face-3 {
    animation: logo-blink .6s .05s
}

.video-area:hover .letter {
    transform: translate(10px)
}

.video-area:hover .letter:nth-child(1) {
    transition-delay: .32s
}

.video-area:hover .letter:nth-child(2) {
    transition-delay: .34s
}

.video-area:hover .letter:nth-child(3) {
    transition-delay: .36s
}

.video-area:hover .letter:nth-child(4) {
    transition-delay: .38s
}

.video-area:hover .letter:nth-child(5) {
    transition-delay: .4s
}

.video-area:hover .letter:nth-child(6) {
    transition-delay: .42s
}

.video-area:hover .letter:nth-child(7) {
    transition-delay: .44s
}

.video-area:hover .letter:nth-child(8) {
    transition-delay: .46s
}

.video-area:hover .letter:nth-child(9) {
    transition-delay: .48s
}

.video-area:hover .letter:nth-child(10) {
    transition-delay: .5s
}

.video-area:hover .letter:nth-child(11) {
    transition-delay: .52s
}

.video-area:hover .letter:nth-child(12) {
    transition-delay: .54s
}

.video-area:hover .letter:nth-child(13) {
    transition-delay: .56s
}

.video-area:hover .letter:nth-child(14) {
    transition-delay: .58s
}

.video-area:hover .letter:nth-child(15) {
    transition-delay: .6s
}

.video-area .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0e0e0e;
    opacity: .1;
    transition: opacity .3s;
    pointer-events: none
}

.video-area .logo {
    position: absolute;
    top: calc(50% - 17px);
    left: calc(50% - 19px);
    width: 34px;
    height: 38px;
    transition: opacity .3s;
    pointer-events: none
}

.video-area .logo svg {
    display: block;
    width: 100%;
    height: 100%
}

.video-area .logo svg * {
    fill: #fff
}

.popin {
    display: none
}

.popins {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7;
    align-items: center;
    justify-content: center;
    pointer-events: none
}

.popins.is-open .background {
    opacity: .8;
    pointer-events: auto;
    transition-timing-function: ease-in;
    transition-delay: 0s
}

.popins .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s .2s ease-out;
    will-change: opacity,transform
}

.popins .popin {
    display: block;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .3s ease-out,transform .3s cubic-bezier(1,0,1,1);
    will-change: opacity,transform;
    pointer-events: none
}

.popins .popin.is-active {
    opacity: 1;
    transform: scale(1);
    transition-timing-function: ease-in,cubic-bezier(0,0,0,1);
    pointer-events: auto
}

.popins .popin .card-body {
    max-height: calc(100vh - 140px);
    overflow: auto
}

.popins .popin .text {
    margin-bottom: 2em
}

.popins .popin .remember {
    display: inline-block
}

.popins .popin .remember .field.checkbox .label {
    padding-left: 0;
    padding-right: 33px;
    margin: 0 0 0 5px;
    opacity: .5;
    transition: opacity .15s
}

.popins .popin .remember .field.checkbox .label:hover {
    opacity: 1
}

.popins .popin .remember .field.checkbox .label:hover .checkmark:before {
    opacity: .4
}

.popins .popin .remember .field.checkbox .label .checkmark {
    left: auto;
    right: 0
}

.quizzes-index .chapter.is-open .lessons {
    display: block
}

.quizzes-index .chapter.is-open .chapter-head:hover .arrow {
    transform: rotate(-180deg)
}

.quizzes-index .chapter.is-open .chapter-head .arrow {
    transform: rotate(-90deg)
}

.quizzes-index .chapter.is-done .chapter-head .progress .circle .fill circle {
    stroke: #32ffce
}

.quizzes-index .chapter-head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding: .5rem 50px .5rem 0;
    cursor: pointer
}

.quizzes-index .chapter-head:hover .arrow {
    opacity: 1;
    transform: rotate(0)
}

.quizzes-index .chapter-head .progress {
    position: relative;
    margin-right: 15px
}

.quizzes-index .chapter-head .progress .circle {
    display: inline-block;
    position: relative;
    vertical-align: middle
}

.quizzes-index .chapter-head .progress .circle svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.quizzes-index .chapter-head .progress .circle .full circle {
    stroke: #2f2f2f
}

.quizzes-index .chapter-head .progress .circle .fill {
    transform: rotate(-90deg)
}

.quizzes-index .chapter-head .progress .circle .fill circle {
    stroke: #705df2;
    transition: stroke-dashoffset .3s
}

.quizzes-index .chapter-head .texts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start
}

.quizzes-index .chapter-head .texts .label {
    font-size: .9rem;
    opacity: .5
}

.quizzes-index .chapter-head .texts .title {
    font-weight: 500
}

.quizzes-index .chapter-head .arrow {
    position: absolute;
    top: calc(50% - 3px);
    right: 22px;
    opacity: .5;
    transform: rotate(-90deg);
    transition: opacity .15s,transform .3s
}

.quizzes-index .chapter-head .arrow svg {
    display: block
}

.quizzes-index .chapter-head .arrow svg * {
    fill: #fff;
    opacity: 1
}

.quizzes-index .lessons {
    display: none;
    padding-left: 50px;
    margin-bottom: .5em
}

.quizzes-index .lessons .lesson {
    position: relative;
    display: flex;
    align-items: center;
    padding: 6px 0;
    width: 100%;
    text-decoration: none
}

.quizzes-index .lessons .lesson.is-unavailable {
    pointer-events: none
}

.quizzes-index .lessons .lesson.is-active:after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 10px);
    right: 0;
    width: 4px;
    height: 20px;
    background: #fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.quizzes-index .lessons .lesson.is-active .title {
    opacity: 1
}

.quizzes-index .lessons .lesson .title {
    opacity: .5;
    transition: opacity .15s
}

.quizzes-index .lessons:hover .lesson .title {
    opacity: .5
}

.quizzes-index .lessons:hover .lesson:hover .title {
    opacity: 1
}

.quizzes-index .lessons .icon {
    display: block;
    margin-right: 20px;
    flex-shrink: 0
}

.quizzes-index .lessons .icon.is-timedOut {
    width: 13px;
    height: 16px
}

.quizzes-index .lessons .icon.is-timedOut svg * {
    fill: #fa6c63
}

.quizzes-index .lessons .icon.is-unavailable svg * {
    stroke: #888
}

.quizzes-index .lessons .icon.is-completed {
    width: 18px;
    height: 20px;
    margin-right: 15px
}

.quizzes-index .lessons .icon.is-completed svg * {
    fill: #32ffce
}

.quizzes-index .lessons .icon.is-toDo {
    width: 13px;
    height: 20px
}

.quizzes-index .lessons .icon.is-toDo svg * {
    fill: #888
}

.quizzes-index .lessons .icon.is-errors {
    width: 11px;
    height: 11px
}

.quizzes-index .lessons .icon svg {
    display: block;
    width: 100%;
    height: 100%
}

.quizzes-index .lessons .icon svg * {
    fill: #fff
}

.sparkles {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    pointer-events: none
}

.is-done .sparkles {
    opacity: 1
}

.is-done .sparkles .sparkle:nth-child(1) .inner,.is-done .sparkles .sparkle:nth-child(2) .inner,.is-done .sparkles .sparkle:nth-child(3) .inner {
    transform: translate(25px);
    transition: transform 1.2s cubic-bezier(0,0,0,1)
}

.is-done .sparkles .sparkle:nth-child(1) .inner:after,.is-done .sparkles .sparkle:nth-child(2) .inner:after,.is-done .sparkles .sparkle:nth-child(3) .inner:after {
    transition: transform 1.2s .25s cubic-bezier(0,0,0,1);
    transform: scale(.0001)
}

.is-done .sparkles .sparkle:nth-child(4) .inner,.is-done .sparkles .sparkle:nth-child(5) .inner,.is-done .sparkles .sparkle:nth-child(6) .inner {
    transform: translate(30px);
    transition: transform .5s cubic-bezier(0,0,0,1)
}

.is-done .sparkles .sparkle:nth-child(4) .inner:after,.is-done .sparkles .sparkle:nth-child(5) .inner:after,.is-done .sparkles .sparkle:nth-child(6) .inner:after {
    transition: transform .5s .25s cubic-bezier(0,0,0,1);
    transform: scale(.0001)
}

.is-done .sparkles .sparkle:nth-child(7) .inner,.is-done .sparkles .sparkle:nth-child(8) .inner,.is-done .sparkles .sparkle:nth-child(9) .inner,.is-done .sparkles .sparkle:nth-child(10) .inner {
    transform: translate(35px);
    transition: transform .3s cubic-bezier(0,0,0,1)
}

.is-done .sparkles .sparkle:nth-child(7) .inner:after,.is-done .sparkles .sparkle:nth-child(8) .inner:after,.is-done .sparkles .sparkle:nth-child(9) .inner:after,.is-done .sparkles .sparkle:nth-child(10) .inner:after {
    transition: transform .3s .25s cubic-bezier(0,0,0,1);
    transform: scale(.0001)
}

.is-done .sparkles.is-small .sparkle:nth-child(1) .inner,.is-done .sparkles.is-small .sparkle:nth-child(2) .inner,.is-done .sparkles.is-small .sparkle:nth-child(3) .inner {
    transform: translate(15px);
    transition: transform 1.2s cubic-bezier(0,0,.5,1)
}

.is-done .sparkles.is-small .sparkle:nth-child(1) .inner:after,.is-done .sparkles.is-small .sparkle:nth-child(2) .inner:after,.is-done .sparkles.is-small .sparkle:nth-child(3) .inner:after {
    transition: transform 1.2s .25s cubic-bezier(0,0,.5,1);
    transform: scale(.0001)
}

.is-done .sparkles.is-small .sparkle:nth-child(4) .inner,.is-done .sparkles.is-small .sparkle:nth-child(5) .inner,.is-done .sparkles.is-small .sparkle:nth-child(6) .inner {
    transform: translate(20px);
    transition: transform .5s cubic-bezier(0,0,.5,1)
}

.is-done .sparkles.is-small .sparkle:nth-child(4) .inner:after,.is-done .sparkles.is-small .sparkle:nth-child(5) .inner:after,.is-done .sparkles.is-small .sparkle:nth-child(6) .inner:after {
    transition: transform .5s .25s cubic-bezier(0,0,.5,1);
    transform: scale(.0001)
}

.is-done .sparkles.is-small .sparkle:nth-child(7) .inner,.is-done .sparkles.is-small .sparkle:nth-child(8) .inner,.is-done .sparkles.is-small .sparkle:nth-child(9) .inner,.is-done .sparkles.is-small .sparkle:nth-child(10) .inner {
    transform: translate(25px);
    transition: transform .3s cubic-bezier(0,0,.5,1)
}

.is-done .sparkles.is-small .sparkle:nth-child(7) .inner:after,.is-done .sparkles.is-small .sparkle:nth-child(8) .inner:after,.is-done .sparkles.is-small .sparkle:nth-child(9) .inner:after,.is-done .sparkles.is-small .sparkle:nth-child(10) .inner:after {
    transition: transform .3s .25s cubic-bezier(0,0,.5,1);
    transform: scale(.0001)
}

.sparkles.is-purple .sparkle .inner:after {
    background: #705df2
}

.sparkles.is-white .sparkle .inner:after {
    background: #fff
}

.sparkles .sparkle {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.sparkles .sparkle:nth-child(1) {
    transform: rotate(-108deg)
}

.sparkles .sparkle:nth-child(2) {
    transform: rotate(-126deg)
}

.sparkles .sparkle:nth-child(3) {
    transform: rotate(-54deg)
}

.sparkles .sparkle:nth-child(4) {
    transform: rotate(-162deg)
}

.sparkles .sparkle:nth-child(5) {
    transform: rotate(-18deg)
}

.sparkles .sparkle:nth-child(6) {
    transform: rotate(-72deg)
}

.sparkles .sparkle:nth-child(7) {
    transform: rotate(-144deg)
}

.sparkles .sparkle:nth-child(8) {
    transform: rotate(-90deg)
}

.sparkles .sparkle:nth-child(9) {
    transform: rotate(-36deg)
}

.sparkles .sparkle:nth-child(10) {
    transform: rotate(-180deg)
}

.sparkles .sparkle .inner {
    position: absolute
}

.sparkles .sparkle .inner:after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #32ffce
}

section.start {
    position: relative;
    color: #fff
}

section.start .background {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    background: #150c21
}

section.start .content {
    display: flex;
    position: relative;
    width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 80px 120px;
    background: #705df2;
    border-radius: 14px;
    justify-content: space-between;
    align-items: center
}

@media (max-width: 1300px) {
    section.start .content {
        width:auto;
        margin-right: 50px;
        margin-left: 50px;
        padding: 60px 90px
    }
}

@media (max-width: 1080px) {
    section.start .content {
        margin-right:40px;
        margin-left: 40px;
        padding: 50px 60px
    }
}

@media (max-width: 800px) {
    section.start .content {
        margin-right:25px;
        margin-left: 25px;
        padding: 50px 40px 40px
    }
}

@media (max-width: 600px) {
    section.start .content {
        display:block;
        margin-left: 20px;
        margin-right: 20px;
        padding: 50px 20px 30px;
        text-align: center
    }
}

@media (max-width: 400px) {
    section.start .content {
        margin-left:10px;
        margin-right: 10px
    }
}

section.start .texts .section-title {
    margin-bottom: .35em
}

section.start .texts .section-sub-title {
    margin-bottom: .35em;
    color: #fff
}

@media (max-width: 600px) {
    section.start .texts .section-sub-title {
        margin-bottom:.35em
    }
}

section.start .texts .section-sub-title span {
    opacity: .6
}

@media (max-width: 600px) {
    section.start .texts .trustpilot {
        margin-bottom:1em
    }
}

section.start .button {
    margin-right: 0
}

section.start .illustration {
    position: absolute;
    top: -28px;
    left: 8%
}

@media (max-width: 1300px) {
    section.start .illustration {
        top:-50px
    }
}

section.start .join-group {
    display: flex;
    flex-direction: column;
    align-items: center
}

section.start .join-group .gift {
    padding: 12px 42px 0;
    white-space: nowrap;
    font-size: 16px
}

section.start .join-group .gift:hover {
    text-decoration: underline
}

section.start .join-group .gift .gift-icon {
    display: inline-block;
    width: 15px;
    height: 15px
}

section.start .join-group .gift .gift-icon svg {
    width: 100%;
    height: 100%
}

section.start .join-group .gift .gift-icon svg * {
    fill: #fff
}

.text {
    color: #fff
}

.text code[class*=language-],.text pre[class*=language-] {
    color: #ccc;
    background: none;
    font-family: Roboto Mono,monospace;
    font-size: .85rem;
    font-weight: 700;
    text-align: left;
    white-space: pre-wrap;
    word-spacing: normal;
    word-break: break-word;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none
}

.text pre[class*=language-] {
    padding: 25px;
    margin: .5em 0;
    overflow: auto
}

@media (max-width: 600px) {
    .text pre[class*=language-] {
        padding:20px
    }
}

@media (max-width: 400px) {
    .text pre[class*=language-] {
        padding:15px
    }
}

.text :not(pre)>code[class*=language-],.text pre[class*=language-] {
    background: #222
}

.text :not(pre)>code[class*=language-] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal
}

.text .token.comment,.text .token.block-comment,.text .token.prolog,.text .token.doctype,.text .token.cdata {
    color: #999
}

.text .token.punctuation {
    color: #62c8f3
}

.text .token.function-name {
    color: #6196cc
}

.text .token.italic {
    font-style: italic
}

.text .token.entity {
    cursor: help
}

.text .token.inserted {
    color: #fff
}

.text .token.tag {
    color: #eee
}

.text .token.attr-name,.text .token.namespace,.text .token.deleted {
    color: #e2777a
}

.text .token.boolean,.text .token.number,.text .token.function {
    color: #ffc061
}

.text .token.property,.text .token.class-name,.text .token.constant,.text .token.symbol {
    color: #fe6854
}

.text .token.selector {
    color: #fff
}

.text .token.important,.text .token.atrule,.text .token.keyword,.text .token.builtin {
    color: #ac9fff
}

.text .token.string,.text .token.char,.text .token.attr-value,.text .token.regex,.text .token.variable {
    color: #7ec699
}

.text .token.operator,.text .token.entity,.text .token.url {
    color: #67cdcc
}

.text .token.important,.text .token.bold {
    font-weight: 700
}

.text h2,.text h3,.text h4,.text h5,.text .h2,.text .h3,.text .h4,.text .h5,.text .title {
    margin-top: 1.5em;
    margin-bottom: .75em;
    font-weight: 700
}

@media (max-width: 400px) {
    .text h2,.text h3,.text h4,.text h5,.text .h2,.text .h3,.text .h4,.text .h5,.text .title {
        word-break:break-word
    }
}

.text h2:first-child,.text h3:first-child,.text h4:first-child,.text h5:first-child,.text .h2:first-child,.text .h3:first-child,.text .h4:first-child,.text .h5:first-child,.text .title:first-child {
    margin-top: 0
}

.text h2,.text .h2 {
    font-size: 2rem
}

.text h3,.text .h3 {
    font-size: 1.75rem
}

.text h4,.text .h4 {
    font-size: 1.5rem
}

.text h5,.text .h5 {
    font-size: 1.25rem
}

.text strong {
    font-weight: 700;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto
}

.text ul,.text ol {
    margin-bottom: 1em
}

.text li {
    position: relative;
    padding-left: 1em;
    margin-bottom: .25em
}

.text li:before {
    content: "";
    display: block;
    position: absolute;
    top: calc(.8em - 2px);
    left: .2em;
    width: 4px;
    height: 4px;
    background: #fff;
    opacity: .2
}

.text li ul {
    margin-top: .25em;
    padding-left: 1em
}

.text p,.text li {
    margin-bottom: .5em
}

.text p:last-child,.text li:last-child {
    margin-bottom: 0
}

.text p a:not(.button),.text li a:not(.button) {
    text-decoration: none;
    color: #b08aff
}

@media (max-width: 600px) {
    .text p a:not(.button),.text li a:not(.button) {
        word-break:break-word
    }
}

.text p a:not(.button):hover,.text li a:not(.button):hover {
    text-decoration: underline
}

.text p code,.text li code {
    display: inline-block;
    position: relative;
    margin-bottom: 1px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 4px;
    font-weight: 700;
    color: #fff;
    font-family: Roboto Mono,monospace;
    background: rgba(112,93,242,.667);
    font-size: .85rem
}

@media (max-width: 600px) {
    .text p code,.text li code {
        word-break:break-word
    }
}

.text .is-image {
    text-align: center
}

.text .is-image .image-inner {
    display: inline-block;
    border: 4px solid #202020;
    border-radius: 6px;
    line-height: 0
}

.text .is-image .image-inner img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity .5s
}

.text .is-image .image-inner img.is-loaded {
    opacity: 1
}

.text .code-toolbar pre[class*=language-] {
    margin-bottom: 1em;
    outline: none;
    border-radius: 6px;
    border: 1px solid #202020;
    font-weight: 700
}

.text .code-toolbar pre[class*=language-]:focus {
    border: 1px solid #705df2
}

.text .code-toolbar .toolbar {
    top: 10px;
    right: 10px
}

.text .code-toolbar .toolbar .toolbar-item {
    display: inline-block;
    vertical-align: top;
    line-height: 25px;
    height: 25px;
    margin-left: 4px
}

.text .code-toolbar .toolbar .toolbar-item span,.text .code-toolbar .toolbar .toolbar-item a,.text .code-toolbar .toolbar .toolbar-item button {
    display: inline-block;
    line-height: 25px;
    height: 25px;
    padding: 0 10px;
    font-weight: 700;
    box-shadow: none;
    color: inherit;
    border-radius: 4px
}

.text .code-toolbar .toolbar .toolbar-item span {
    background: none
}

.text .code-toolbar .toolbar .toolbar-item a,.text .code-toolbar .toolbar .toolbar-item button {
    background: #1a1a1a
}

.text .video {
    position: relative;
    margin-bottom: 1em;
    background: #202020;
    border: 4px solid #202020;
    border-radius: 6px;
    cursor: pointer
}

.text .video .element {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    outline: none
}

.text .video .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0e0e0e;
    opacity: .1;
    transition: opacity .3s;
    pointer-events: none
}

.text .video .logo {
    position: absolute;
    top: calc(50% - 34px / 1.5);
    left: calc(50% - 19px);
    width: 34px;
    height: 38px;
    transition: opacity .3s;
    pointer-events: none
}

.text .video .logo svg {
    display: block;
    width: 100%;
    height: 100%
}

.text .video .logo svg * {
    fill: #fff
}

.text .video.is-playing .overlay,.text .video.is-playing .logo {
    opacity: 0
}

.top-navigation {
    position: fixed;
    top: 55px;
    right: 85px;
    text-align: right;
    z-index: 3
}

@media (max-width: 1600px) {
    .top-navigation {
        top:45px;
        right: 70px
    }
}

@media (max-width: 1300px) {
    .top-navigation {
        top:35px;
        right: 35px
    }
}

@media (max-width: 1080px) {
    .top-navigation {
        top:25px;
        right: 25px
    }
}

@media (max-width: 800px) {
    .top-navigation {
        top:20px;
        right: 20px
    }
}

@media (max-width: 600px) {
    .top-navigation {
        top:15px;
        right: 15px
    }
}

@media (max-width: 400px) {
    .top-navigation {
        top:10px;
        right: 10px
    }
}

.top-navigation br {
    display: none
}

@media (max-width: 800px) {
    .top-navigation br {
        display:inline
    }
}

.top-navigation .button {
    height: 48px;
    margin-right: 0;
    margin-left: 15px;
    border-radius: 24px;
    box-shadow: 0 14px 55px #3c00bd26;
    -webkit-mask-image: none
}

@media (max-width: 1300px) {
    .top-navigation .button {
        margin-left:10px
    }
}

@media (max-width: 1080px) {
    .top-navigation .button {
        margin-left:5px
    }
}

@media (max-width: 800px) {
    .top-navigation .button {
        margin-left:0;
        margin-bottom: 10px
    }
}

.top-navigation .button .label {
    margin-left: 28px;
    margin-right: 28px;
    font-family: Greycliff;
    font-weight: 700;
    font-size: 18px
}

@media (max-width: 1080px) {
    .top-navigation .button .label {
        margin-left:24px;
        margin-right: 24px
    }
}

@media (max-width: 800px) {
    .top-navigation .button .label {
        margin-left:20px;
        margin-right: 20px
    }
}

@media (max-width: 600px) {
    .top-navigation .button .label:first-letter {
        text-transform:uppercase
    }
}

@media (max-width: 600px) {
    .top-navigation .button .non-important {
        display:none
    }
}

.trustpilot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500
}

.trustpilot:hover .score {
    text-decoration: underline
}

.trustpilot.has-theme-dark .stars.is-empty .star {
    background: #fff
}

.trustpilot.has-theme-dark .trustpilot-minilogo-text {
    fill: #fff
}

.trustpilot * {
    display: block
}

.trustpilot .score {
    margin-right: 12px
}

.trustpilot .stars-container {
    position: relative;
    height: 20px;
    margin-right: 12px
}

.trustpilot .stars {
    white-space: nowrap;
    font-size: 0
}

.trustpilot .stars.is-empty .star svg {
    opacity: .5
}

.trustpilot .stars.is-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.trustpilot .stars .star {
    display: inline-block;
    position: relative;
    margin-right: 2px;
    width: 20px;
    height: 20px
}

.trustpilot .stars .star svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.tweet {
    display: block;
    position: relative;
    margin-left: 10px;
    margin-bottom: 20px;
    margin-right: 10px;
    min-height: 360px
}

.tweet .twitter-tweet {
    position: relative
}

.tweet .twitter-tweet iframe {
    width: 100%!important
}

.tweet .placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee
}

.tweet .placeholder .head {
    display: flex;
    align-items: center;
    margin-bottom: 1em
}

.tweet .placeholder .head .user {
    width: 48px;
    height: 48px;
    margin-right: 10px;
    background: #eee;
    border-radius: 50%
}

.tweet .placeholder .head .titles .name {
    width: 100px;
    height: 1em;
    background: #eee;
    margin-bottom: 4px
}

.tweet .placeholder .head .titles .sub-name {
    width: 120px;
    height: 1em;
    background: #eee
}

.tweet .placeholder .text {
    margin-bottom: 1em
}

.tweet .placeholder .text .text-line {
    height: 1em;
    background: #eee;
    margin-bottom: 4px
}

.tweet .placeholder .text .text-line:nth-child(1) {
    width: 50%
}

.tweet .placeholder .text .text-line:nth-child(3) {
    width: 75%
}

.tweet .placeholder .pictures {
    display: flex;
    margin-bottom: 1em
}

.tweet .placeholder .pictures .picture {
    width: 80px;
    height: 80px;
    background: #eee
}

.tweet .placeholder .pictures .picture:nth-child(1) {
    margin-right: 10px
}

.video-jump {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    height: .8em;
    padding: 10px;
    border: 2px solid #fff;
    border-radius: 1em;
    opacity: .5;
    transition: opacity .15s;
    will-change: opacity;
    cursor: pointer;
    text-decoration: none
}

@media print {
    .video-jump {
        display: none
    }
}

.video-jump:hover {
    opacity: 1
}

.video-jump .time {
    font-size: .8rem;
    font-weight: 500
}

.video-jump .play {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 12px;
    margin-right: 4px
}

.video-jump .play svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.video-jump .play svg * {
    fill: #fff
}

.page.account {
    padding-top: var(--page-top-padding);
    padding-left: 25px;
    padding-right: 25px;
    background-color: #1a1a1a;
    color: #fff
}

@media (max-width: 800px) {
    .page.account {
        padding-left:20px;
        padding-right: 20px
    }
}

@media (max-width: 600px) {
    .page.account {
        padding-left:15px;
        padding-right: 15px
    }
}

.page.account .page-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 75px;
    padding-bottom: 45px;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto
}

@media (max-width: 1300px) {
    .page.account .page-content {
        padding-top:5vmin
    }
}

@media (max-width: 600px) {
    .page.account .page-content {
        flex-direction:column
    }
}

.page.account .page-content h1,.page.account .page-content h2,.page.account .page-content h3,.page.account .page-content h4,.page.account .page-content h5,.page.account .page-content .h1,.page.account .page-content .h2,.page.account .page-content .h3,.page.account .page-content .h4,.page.account .page-content .h5 {
    margin-bottom: 1em
}

.page.account .content-section {
    margin-bottom: 4em
}

.page.account .sidebar {
    width: 230px;
    margin-right: 30px;
    border-right: 3px solid #202020
}

@media (max-width: 600px) {
    .page.account .sidebar {
        width:100%;
        margin-bottom: 2rem;
        border: none
    }
}

.page.account .sidebar .item {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    width: 100%;
    text-decoration: none
}

.page.account .sidebar .item.is-active:after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 10px);
    right: 0;
    width: 4px;
    height: 20px;
    background: #fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.page.account .sidebar .item.is-active>* {
    opacity: 1
}

.page.account .sidebar .item>* {
    opacity: .5;
    transition: opacity .15s
}

.page.account .sidebar:hover .item>* {
    opacity: .5
}

.page.account .sidebar:hover .item:hover>* {
    opacity: 1
}

.page.account .sidebar .icon {
    width: 20px;
    margin-right: 10px
}

.page.account .sidebar .icon.guy-mini {
    height: 16px
}

.page.account .sidebar .icon.lock {
    height: 14px
}

.page.account .sidebar .icon.gear {
    height: 16px
}

.page.account .sidebar .icon.paper {
    height: 14px
}

.page.account .sidebar .icon.question-mark {
    height: 16px
}

.page.account .sidebar .icon.certificate {
    height: 20px
}

.page.account .sidebar .icon.heart {
    height: 12px;
    opacity: 1
}

.page.account .sidebar .icon.heart svg * {
    fill: #ec4a7a
}

.page.account .sidebar .icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #fff
}

.page.account .main {
    width: 540px
}

@media (max-width: 600px) {
    .page.account .main {
        width:100%
    }
}

.page.cards {
    padding-top: calc(var(--page-top-padding) + 70px);
    padding-left: 25px;
    padding-right: 25px;
    color: #fff;
    text-align: center
}

@media (max-width: 800px) {
    .page.cards {
        padding-top:var(--page-top-padding);
        padding-left: 20px;
        padding-right: 20px
    }
}

@media (max-width: 600px) {
    .page.cards {
        padding-left:15px;
        padding-right: 15px
    }
}

.page.cards .page-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.page.cards .card {
    margin-bottom: 80px
}

.page.certificateQuiz {
    padding-top: var(--page-top-padding);
    padding-left: 25px;
    padding-right: 25px;
    background-color: #1a1a1a;
    color: #fff
}

@media (max-width: 800px) {
    .page.certificateQuiz {
        padding-left:20px;
        padding-right: 20px
    }
}

@media (max-width: 600px) {
    .page.certificateQuiz {
        padding-left:15px;
        padding-right: 15px
    }
}

.page.certificateQuiz .page-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 75px;
    padding-bottom: 45px;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto
}

@media (max-width: 1300px) {
    .page.certificateQuiz .page-content {
        padding-top:5vmin
    }
}

@media (max-width: 800px) {
    .page.certificateQuiz .page-content {
        flex-direction:column
    }
}

.page.certificateQuiz .page-content h1,.page.certificateQuiz .page-content h2,.page.certificateQuiz .page-content h3,.page.certificateQuiz .page-content h4,.page.certificateQuiz .page-content h5,.page.certificateQuiz .page-content .h1,.page.certificateQuiz .page-content .h2,.page.certificateQuiz .page-content .h3,.page.certificateQuiz .page-content .h4,.page.certificateQuiz .page-content .h5 {
    margin-bottom: 1em
}

.page.certificateQuiz .sidebar {
    width: 340px;
    margin-right: 75px;
    border-right: 3px solid #202020
}

@media (max-width: 800px) {
    .page.certificateQuiz .sidebar {
        width:100%;
        margin-bottom: 2rem;
        border: none
    }
}

.page.certificateQuiz .sidebar .button.is-certificate {
    margin-top: 1rem
}

.page.certificateQuiz .main {
    width: 640px
}

@media (max-width: 800px) {
    .page.certificateQuiz .main {
        width:100%
    }
}

.page.certificateQuiz .top {
    margin-bottom: 4rem
}

.page.certificateQuiz .buttons .button {
    margin-bottom: 4px
}

.page.certificateQuiz .text .code-toolbar .toolbar {
    display: none
}

.page.certificateQuiz .questions.is-timedOut {
    pointer-events: none;
    opacity: .5
}

.page.certificateQuiz .questions .question {
    position: relative;
    margin-bottom: 4rem
}

.page.certificateQuiz .questions .question.is-good {
    pointer-events: none
}

.page.certificateQuiz .questions .question.is-good .choice input[type=radio]:checked+.inner {
    background: #705df2
}

.page.certificateQuiz .questions .question.is-good .choice input[type=radio]:checked+.inner:after {
    border: none
}

.page.certificateQuiz .questions .question.is-good .choice input[type=radio]:checked+.inner .icon.is-checked {
    display: block
}

.page.certificateQuiz .questions .question.is-wrong.is-unchanged .choice input[type=radio]:checked+.inner {
    background: #752525
}

.page.certificateQuiz .questions .question.is-wrong.is-unchanged .choice input[type=radio]:checked+.inner:after {
    border: none
}

.page.certificateQuiz .questions .question.is-wrong.is-unchanged .choice input[type=radio]:checked+.inner .icon.is-cross {
    display: block
}

.page.certificateQuiz .questions .question .index {
    position: absolute;
    right: calc(100% + 5px);
    bottom: calc(100% - 1.35rem);
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none
}

@media (max-width: 800px) {
    .page.certificateQuiz .questions .question .index {
        display:inline-block;
        position: relative;
        right: 0;
        bottom: 0
    }
}

.page.certificateQuiz .questions .question .sentence {
    margin-bottom: .75rem
}

.page.certificateQuiz .questions .question .choice {
    display: block;
    position: relative;
    margin-bottom: .5rem;
    cursor: pointer
}

.page.certificateQuiz .questions .question .choice .text p code,.page.certificateQuiz .questions .question .choice .text li code {
    background: rgba(255,255,255,.129)
}

.page.certificateQuiz .questions .question .choice:hover .inner {
    background: #2a2a2a
}

.page.certificateQuiz .questions .question .choice input[type=radio] {
    display: none
}

.page.certificateQuiz .questions .question .choice input[type=radio]:checked+.inner:after {
    border: 2px solid #705df2
}

.page.certificateQuiz .questions .question .choice .inner {
    display: block;
    position: relative;
    border-radius: 12px;
    padding: 8px 34px 8px 18px;
    background: #202020
}

.page.certificateQuiz .questions .question .choice .inner:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    pointer-events: none
}

.page.certificateQuiz .questions .question .choice .inner pre[class*=language-] {
    background: none;
    border: none;
    padding: 0;
    margin: 0
}

.page.certificateQuiz .questions .question .choice .inner .icon {
    display: none;
    position: absolute;
    top: 0;
    right: 15px;
    width: 10px;
    height: 10px
}

.page.certificateQuiz .questions .question .choice .inner .icon svg {
    display: block;
    width: 100%;
    height: 100%
}

.page.certificateQuiz .questions .question .choice .inner .icon.is-checked {
    top: calc(50% - 4px);
    width: 10px;
    height: 9px
}

.page.certificateQuiz .questions .question .choice .inner .icon.is-checked svg * {
    fill: #32ffce
}

.page.certificateQuiz .questions .question .choice .inner .icon.is-cross {
    top: calc(50% - 5px);
    width: 11px;
    height: 11px
}

.page.certificateQuiz .questions .question .choice .inner .icon.is-cross svg * {
    fill: #32ffce
}

.page.certificateQuiz .questions .submit-container {
    display: flex;
    justify-content: flex-end
}

.page.challenges {
    padding-top: calc(var(--page-top-padding) + 100px)
}

@media (max-width: 1300px) {
    .page.challenges {
        padding-top:calc(var(--page-top-padding) + 80px)
    }
}

@media (max-width: 1080px) {
    .page.challenges {
        padding-top:calc(var(--page-top-padding) + 60px)
    }
}

@media (max-width: 800px) {
    .page.challenges {
        padding-top:calc(var(--page-top-padding) + 40px)
    }
}

@media (max-width: 600px) {
    .page.challenges {
        padding-top:calc(var(--page-top-padding) + 30px)
    }
}

@media (max-width: 400px) {
    .page.challenges {
        padding-top:calc(var(--page-top-padding) + 20px)
    }
}

.page.challenges p {
    font-size: 20px;
    color: #fffc
}

@media (max-width: 1300px) {
    .page.challenges p {
        font-size:20px
    }
}

@media (max-width: 1080px) {
    .page.challenges p {
        font-size:19px
    }
}

@media (max-width: 800px) {
    .page.challenges p {
        font-size:18px
    }
}

@media (max-width: 600px) {
    .page.challenges p {
        font-size:17px
    }
}

@media (max-width: 400px) {
    .page.challenges p {
        font-size:16px
    }
}

.page.challenges p a {
    color: #57fdf3
}

.page.challenges .page-title {
    font-family: Greycliff,sans-serif;
    font-weight: 800
}

.page.challenges .top {
    width: 840px;
    margin: 0 auto;
    text-align: center
}

@media (max-width: 1080px) {
    .page.challenges .top {
        width:auto;
        padding-left: 25px;
        padding-right: 25px
    }
}

@media (max-width: 600px) {
    .page.challenges .top {
        padding-left:15px;
        padding-right: 15px
    }
}

.page.challenges .top .primary {
    font-size: 48px;
    margin-bottom: .25em
}

@media (max-width: 1300px) {
    .page.challenges .top .primary {
        font-size:44px
    }
}

@media (max-width: 1080px) {
    .page.challenges .top .primary {
        font-size:40px
    }
}

@media (max-width: 800px) {
    .page.challenges .top .primary {
        font-size:36px
    }
}

@media (max-width: 600px) {
    .page.challenges .top .primary {
        font-size:32px
    }
}

@media (max-width: 400px) {
    .page.challenges .top .primary {
        font-size:28px
    }
}

.page.challenges .top .secondary {
    font-size: 26px;
    color: #705df2;
    margin-bottom: 1.5em
}

@media (max-width: 1300px) {
    .page.challenges .top .secondary {
        font-size:24px
    }
}

@media (max-width: 1080px) {
    .page.challenges .top .secondary {
        font-size:22px
    }
}

@media (max-width: 800px) {
    .page.challenges .top .secondary {
        font-size:20px
    }
}

@media (max-width: 600px) {
    .page.challenges .top .secondary {
        font-size:18px
    }
}

@media (max-width: 400px) {
    .page.challenges .top .secondary {
        font-size:18px
    }
}

.page.challenges .top .main-description {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 3em
}

@media (max-width: 1300px) {
    .page.challenges .top .main-description {
        font-size:24px
    }
}

@media (max-width: 1080px) {
    .page.challenges .top .main-description {
        font-size:22px
    }
}

@media (max-width: 800px) {
    .page.challenges .top .main-description {
        font-size:20px
    }
}

@media (max-width: 600px) {
    .page.challenges .top .main-description {
        font-size:18px
    }
}

@media (max-width: 400px) {
    .page.challenges .top .main-description {
        font-size:18px
    }
}

.page.challenges .results {
    width: 840px;
    margin: 0 auto 100px
}

@media (max-width: 1080px) {
    .page.challenges .results {
        width:auto;
        padding-left: 125px;
        padding-right: 125px
    }
}

@media (max-width: 800px) {
    .page.challenges .results {
        padding-left:25px;
        padding-right: 25px;
        margin-bottom: 50px
    }
}

@media (max-width: 600px) {
    .page.challenges .results {
        padding-left:15px;
        padding-right: 15px;
        margin-bottom: 25px
    }
}

.page.challenges .results .topic {
    text-align: center;
    font-family: Greycliff,sans-serif;
    font-weight: 700
}

.page.challenges .results .topic .number {
    color: #57fdf3;
    margin-bottom: .5em
}

.page.challenges .results .topic .name {
    margin-bottom: 2em;
    font-size: 26px;
    font-weight: 800
}

@media (max-width: 1300px) {
    .page.challenges .results .topic .name {
        font-size:24px
    }
}

@media (max-width: 1080px) {
    .page.challenges .results .topic .name {
        font-size:22px
    }
}

@media (max-width: 800px) {
    .page.challenges .results .topic .name {
        font-size:20px
    }
}

@media (max-width: 600px) {
    .page.challenges .results .topic .name {
        font-size:18px
    }
}

@media (max-width: 400px) {
    .page.challenges .results .topic .name {
        font-size:18px
    }
}

.page.challenges .results .winner {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 50px
}

@media (max-width: 800px) {
    .page.challenges .results .winner {
        margin-bottom:40px
    }
}

@media (max-width: 600px) {
    .page.challenges .results .winner {
        margin-bottom:25px
    }
}

.page.challenges .results .winner.is-rank-2,.page.challenges .results .winner.is-rank-3 {
    width: calc(50% - 12.5px)
}

@media (max-width: 1080px) {
    .page.challenges .results .winner.is-rank-2,.page.challenges .results .winner.is-rank-3 {
        width:100%
    }
}

.page.challenges .results .winner.is-rank-2 .rank,.page.challenges .results .winner.is-rank-3 .rank {
    padding: 20px 0
}

.page.challenges .results .winner.is-rank-2 .rank .position,.page.challenges .results .winner.is-rank-3 .rank .position {
    font-size: 36px
}

.page.challenges .results .winner.is-rank-2 .details,.page.challenges .results .winner.is-rank-3 .details {
    flex-direction: column;
    align-items: flex-start
}

.page.challenges .results .winner.is-rank-2 .rank {
    background: linear-gradient(226deg,rgba(6,148,185,.2) 0%,rgba(17,31,52,.2) 100%),#271945;
    box-shadow: 0 0 80px #5da2f24d
}

.page.challenges .results .winner.is-rank-2 .rank .position {
    background: linear-gradient(180deg,#fff 0%,#adebff 48.96%,#7981ca 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.page.challenges .results .winner.is-rank-3 .rank {
    left: 100%;
    border-radius: 0 14px 14px 0;
    border: 1px solid rgba(255,255,255,.2);
    border-left: none;
    background: linear-gradient(226deg,rgba(199,100,73,.2) 0%,rgba(88,21,105,.2) 100%),#271945;
    box-shadow: 0 0 80px #705df24d
}

@media (max-width: 1080px) {
    .page.challenges .results .winner.is-rank-3 .rank {
        left:auto;
        right: 100%;
        border-radius: 14px 0 0 14px;
        border: 1px solid rgba(255,255,255,.2);
        border-right: none
    }
}

.page.challenges .results .winner.is-rank-3 .rank .position {
    background: linear-gradient(180deg,#ffe3b8 0%,#7f559f 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.page.challenges .results .winner .visual {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: #ff77f133 0 0 80px;
    flex-shrink: 0
}

.page.challenges .results .winner .visual .ratio-holder {
    width: 100%;
    padding-top: 56.25%
}

.page.challenges .results .winner .visual iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.page.challenges .results .winner .rank {
    position: absolute;
    top: 25px;
    right: 100%;
    border-radius: 14px 0 0 14px;
    border: 1px solid rgba(255,255,255,.2);
    border-right: none;
    background: linear-gradient(226deg,rgba(255,140,56,.2) 0%,rgba(88,21,105,.2) 100%),#271945;
    padding: 10px 0;
    width: 108px;
    text-align: center;
    box-shadow: 0 0 80px #f25d934d
}

@media (max-width: 800px) {
    .page.challenges .results .winner .rank {
        top:0!important;
        right: 25px!important;
        border-radius: 0 0 14px 14px!important;
        border: 1px solid rgba(255,255,255,.2)!important;
        border-top: none!important;
        padding: 10px 0 15px!important
    }
}

@media (max-width: 600px) {
    .page.challenges .results .winner .rank {
        right:15px!important;
        width: 90px;
        padding: 6px 0 10px!important
    }
}

.page.challenges .results .winner .rank .position {
    font-family: Greycliff,sans-serif;
    font-size: 54px;
    font-weight: 800;
    background: linear-gradient(180deg,#fff5eb 0%,#ffbd80 44.79%,#ea4681 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media (max-width: 800px) {
    .page.challenges .results .winner .rank .position {
        font-size:36px
    }
}

@media (max-width: 600px) {
    .page.challenges .results .winner .rank .position {
        font-size:28px!important
    }
}

.page.challenges .results .winner .rank .label {
    margin-top: 4px;
    opacity: .8;
    font-family: Greycliff,sans-serif;
    font-size: 16px;
    font-weight: 700
}

@media (max-width: 800px) {
    .page.challenges .results .winner .rank .label {
        display:none
    }
}

.page.challenges .results .winner .details {
    display: flex;
    width: calc(100% - 50px);
    padding: 35px 40px;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    flex-shrink: 0;
    border-radius: 0 0 14px 14px;
    border: 1px solid rgba(255,255,255,.2);
    border-top: none;
    background: radial-gradient(335.46% 124.73% at 101.61% -14.1%,rgba(255,119,241,.2) 0%,rgba(20,11,41,.2) 100%),#140b29
}

@media (max-width: 1080px) {
    .page.challenges .results .winner .details {
        flex-direction:column;
        align-items: flex-start
    }
}

@media (max-width: 800px) {
    .page.challenges .results .winner .details {
        position:relative;
        padding: 25px 35px
    }
}

@media (max-width: 600px) {
    .page.challenges .results .winner .details {
        padding:20px;
        width: calc(100% - 25px)
    }
}

.page.challenges .results .winner .details .author {
    font-size: 20px;
    color: #ff77f1;
    font-family: Greycliff,sans-serif;
    font-weight: 500
}

@media (max-width: 1300px) {
    .page.challenges .results .winner .details .author {
        font-size:20px
    }
}

@media (max-width: 1080px) {
    .page.challenges .results .winner .details .author {
        font-size:19px
    }
}

@media (max-width: 800px) {
    .page.challenges .results .winner .details .author {
        font-size:18px
    }
}

@media (max-width: 600px) {
    .page.challenges .results .winner .details .author {
        font-size:17px
    }
}

@media (max-width: 400px) {
    .page.challenges .results .winner .details .author {
        font-size:16px
    }
}

.page.challenges .results .winner .details .links {
    display: flex;
    flex-direction: column
}

.page.challenges .results .winner .details .links ul {
    list-style: circle;
    padding-left: 20px
}

.page.challenges .results .winner .details .links ul a {
    opacity: .8;
    margin-bottom: .5em;
    text-decoration: none
}

.page.challenges .results .winner .details .links ul a:hover {
    text-decoration: underline
}

.page.challenges .results .winner .details .project-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
    font-family: Greycliff,sans-serif;
    font-weight: 700
}

.page.challenges .results .winner .details .project-link:hover {
    text-decoration: underline
}

.page.challenges .results .winner .details .project-link .arrow {
    position: relative;
    top: 1px;
    margin-left: 2px;
    transform: rotate(-90deg)
}

.page.challenges .results .winner .details .project-link .arrow svg * {
    fill: #fff;
    opacity: 1
}

.page.challenges .results .others {
    display: flex;
    justify-content: space-between
}

@media (max-width: 1080px) {
    .page.challenges .results .others {
        flex-direction:column;
        justify-content: default;
        align-items: center
    }
}

.page.challenges .instructions {
    display: flex;
    width: 1056px;
    flex-shrink: 0;
    margin: 0 auto 100px
}

@media (max-width: 1080px) {
    .page.challenges .instructions {
        width:auto;
        padding-left: 125px;
        padding-right: 125px;
        flex-direction: column;
        margin-bottom: 50px
    }
}

@media (max-width: 800px) {
    .page.challenges .instructions {
        padding-left:25px;
        padding-right: 25px
    }
}

@media (max-width: 600px) {
    .page.challenges .instructions {
        padding-left:15px;
        padding-right: 15px;
        margin-bottom: 25px
    }
}

.page.challenges .instructions .section-title {
    width: 300px;
    margin-bottom: 1em;
    font-family: Greycliff,sans-serif;
    font-size: 48px;
    font-weight: 800
}

@media (max-width: 1300px) {
    .page.challenges .instructions .section-title {
        font-size:44px
    }
}

@media (max-width: 1080px) {
    .page.challenges .instructions .section-title {
        font-size:40px
    }
}

@media (max-width: 800px) {
    .page.challenges .instructions .section-title {
        font-size:36px
    }
}

@media (max-width: 600px) {
    .page.challenges .instructions .section-title {
        font-size:32px
    }
}

@media (max-width: 400px) {
    .page.challenges .instructions .section-title {
        font-size:28px
    }
}

@media (max-width: 1080px) {
    .page.challenges .instructions .section-title {
        width:auto;
        text-align: center
    }
}

.page.challenges .instructions .steps {
    --sideWidth: 84px;
    position: relative;
    width: 730px;
    flex-shrink: 0;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.2);
    background: radial-gradient(190.8% 119.58% at 88.99% 13.61%,rgba(255,102,81,.2) 0%,rgba(29,18,53,.2) 71.79%),#271945;
    overflow: hidden
}

@media (max-width: 1080px) {
    .page.challenges .instructions .steps {
        width:auto
    }
}

@media (max-width: 600px) {
    .page.challenges .instructions .steps {
        --sideWidth: 60px
    }
}

.page.challenges .instructions .steps:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--sideWidth);
    height: 100%;
    background: #1c1134;
    border-right: 1px solid rgba(255,255,255,.2)
}

.page.challenges .instructions .steps .step {
    position: relative
}

.page.challenges .instructions .steps .step:not(:last-child):after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(var(--sideWidth) + 1px);
    right: 0;
    height: 1px;
    background: #fff;
    opacity: .2
}

.page.challenges .instructions .steps .step.is-maximised .trigger:hover .arrow {
    transform: rotate(-180deg)
}

.page.challenges .instructions .steps .step.is-maximised .trigger .arrow {
    transform: rotate(0)
}

.page.challenges .instructions .steps .step .trigger {
    position: relative;
    display: flex;
    font-family: Greycliff,sans-serif;
    font-size: 26px;
    font-weight: 700;
    width: 100%
}

@media (max-width: 1300px) {
    .page.challenges .instructions .steps .step .trigger {
        font-size:24px
    }
}

@media (max-width: 1080px) {
    .page.challenges .instructions .steps .step .trigger {
        font-size:22px
    }
}

@media (max-width: 800px) {
    .page.challenges .instructions .steps .step .trigger {
        font-size:20px
    }
}

@media (max-width: 600px) {
    .page.challenges .instructions .steps .step .trigger {
        font-size:18px
    }
}

@media (max-width: 400px) {
    .page.challenges .instructions .steps .step .trigger {
        font-size:18px
    }
}

.page.challenges .instructions .steps .step .trigger * {
    display: block
}

.page.challenges .instructions .steps .step .trigger:hover .arrow {
    opacity: 1;
    transform: rotate(0)
}

.page.challenges .instructions .steps .step .trigger .number {
    flex-shrink: 0;
    width: var(--sideWidth);
    text-align: center;
    padding: 25px 0
}

.page.challenges .instructions .steps .step .trigger .label {
    width: calc(100% - var(--sideWidth));
    flex-shrink: 0;
    padding: 25px 60px 25px 25px;
    text-align: left
}

.page.challenges .instructions .steps .step .trigger .arrow {
    position: absolute;
    top: 50%;
    right: 25px;
    transform: rotate(-90deg);
    opacity: .5;
    transition: transform .3s cubic-bezier(.25,0,.25,1)
}

.page.challenges .instructions .steps .step .trigger .arrow svg * {
    fill: #fff;
    opacity: 1
}

.page.challenges .instructions .steps .step .collapse {
    height: 0;
    padding-left: var(--sideWidth);
    overflow: hidden
}

.page.challenges .instructions .steps .step .collapse.is-transitioning {
    transition: height .3s cubic-bezier(.25,0,.25,1)
}

.page.challenges .instructions .steps .step .collapse .inner {
    padding: 0 25px 25px
}

.page.challenges .neighbours {
    padding-bottom: 100px;
    background: radial-gradient(78.91% 103.53% at 63.96% 0%,rgba(176,93,242,.2) 0%,rgba(0,0,0,.2) 100%);
    text-align: center
}

.page.challenges .neighbours .page-title {
    font-size: 48px;
    padding-top: 1.25em;
    margin-bottom: 1.25em
}

@media (max-width: 1300px) {
    .page.challenges .neighbours .page-title {
        font-size:44px
    }
}

@media (max-width: 1080px) {
    .page.challenges .neighbours .page-title {
        font-size:40px
    }
}

@media (max-width: 800px) {
    .page.challenges .neighbours .page-title {
        font-size:36px
    }
}

@media (max-width: 600px) {
    .page.challenges .neighbours .page-title {
        font-size:32px
    }
}

@media (max-width: 400px) {
    .page.challenges .neighbours .page-title {
        font-size:28px
    }
}

.page.challenges .neighbours .items {
    text-align: center
}

.page.challenges .neighbours .neighbour {
    display: inline-block;
    margin: 0 12px 50px;
    position: relative;
    width: 408px;
    font-family: Greycliff,sans-serif;
    font-weight: 700
}

@media (max-width: 600px) {
    .page.challenges .neighbours .neighbour {
        width:calc(100% - 30px)
    }
}

.page.challenges .neighbours .neighbour * {
    position: relative;
    display: block
}

.page.challenges .neighbours .neighbour.is-previous .topic .arrow {
    left: auto;
    right: 50px;
    transform: rotate(-90deg)
}

.page.challenges .neighbours .neighbour .background {
    position: absolute;
    inset: 0 0 60px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.2);
    background: radial-gradient(104.84% 129.17% at 93.34% 4.35%,rgba(112,93,242,.2) 0%,rgba(28,17,52,.2) 100%),#1c1134
}

.page.challenges .neighbours .neighbour .topic {
    position: relative;
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: center
}

.page.challenges .neighbours .neighbour .topic .number {
    color: #57fdf3;
    margin-bottom: .5em
}

.page.challenges .neighbours .neighbour .topic .name {
    font-size: 26px;
    font-weight: 800
}

@media (max-width: 1300px) {
    .page.challenges .neighbours .neighbour .topic .name {
        font-size:24px
    }
}

@media (max-width: 1080px) {
    .page.challenges .neighbours .neighbour .topic .name {
        font-size:22px
    }
}

@media (max-width: 800px) {
    .page.challenges .neighbours .neighbour .topic .name {
        font-size:20px
    }
}

@media (max-width: 600px) {
    .page.challenges .neighbours .neighbour .topic .name {
        font-size:18px
    }
}

@media (max-width: 400px) {
    .page.challenges .neighbours .neighbour .topic .name {
        font-size:18px
    }
}

.page.challenges .neighbours .neighbour .topic .arrow {
    position: absolute;
    top: 50%;
    left: 50px;
    display: inline-block;
    transform: rotate(90deg)
}

.page.challenges .neighbours .neighbour .topic .arrow svg * {
    fill: #fff;
    opacity: 1
}

.page.challenges .neighbours .neighbour .preview {
    margin: 0 20px 25px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: #ff77f133 0 0 80px
}

.page.challenges .neighbours .neighbour .preview .video {
    width: 100%;
    height: auto
}

.page.challenges .neighbours .neighbour .preview .author {
    text-align: left;
    padding: 25px;
    font-size: 20px;
    font-weight: 800;
    background: radial-gradient(335.46% 124.73% at 101.61% -14.1%,rgba(112,93,242,.2) 0%,rgba(20,11,41,.2) 100%),#140b29
}

@media (max-width: 1300px) {
    .page.challenges .neighbours .neighbour .preview .author {
        font-size:20px
    }
}

@media (max-width: 1080px) {
    .page.challenges .neighbours .neighbour .preview .author {
        font-size:19px
    }
}

@media (max-width: 800px) {
    .page.challenges .neighbours .neighbour .preview .author {
        font-size:18px
    }
}

@media (max-width: 600px) {
    .page.challenges .neighbours .neighbour .preview .author {
        font-size:17px
    }
}

@media (max-width: 400px) {
    .page.challenges .neighbours .neighbour .preview .author {
        font-size:16px
    }
}

.page.challenges .neighbours .neighbour .bottom-label {
    display: flex;
    justify-content: center
}

.page.challenges .neighbours .neighbour .bottom-label .arrow {
    position: relative;
    top: 1px;
    display: inline-block;
    margin-left: 10px;
    transform: rotate(-90deg)
}

.page.challenges .neighbours .neighbour .bottom-label .arrow svg * {
    fill: #fff;
    opacity: 1
}

.page.discord {
    padding-top: var(--page-top-padding);
    padding-left: 25px;
    padding-right: 25px;
    background-color: #1a1a1a;
    color: #fff;
    text-align: center
}

@media (max-width: 800px) {
    .page.discord {
        padding-left:20px;
        padding-right: 20px
    }
}

@media (max-width: 600px) {
    .page.discord {
        padding-left:15px;
        padding-right: 15px
    }
}

.page.discord .number {
    font-family: Roboto Mono,monospace;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto
}

.page.discord .page-content {
    padding-top: 75px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto
}

@media (max-width: 1300px) {
    .page.discord .page-content {
        padding-top:5vmin
    }
}

.page.discord .page-content a:not(.button) {
    text-decoration: underline
}

.page.discord .columns {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

@media (max-width: 800px) {
    .page.discord .columns {
        flex-direction:column-reverse;
        align-items: center
    }
}

.page.discord .columns .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    margin-bottom: 5em
}

.page.discord .columns .column:nth-child(1) {
    padding-right: 75px;
    border-right: 3px solid #202020
}

.page.discord .columns .column:nth-child(2) {
    padding-left: 75px
}

@media (max-width: 800px) {
    .page.discord .columns .column {
        width:auto
    }

    .page.discord .columns .column:nth-child(1) {
        padding-right: 0;
        border-right: none
    }

    .page.discord .columns .column:nth-child(2) {
        padding-left: 0
    }
}

.page.discord .main-icon {
    margin-bottom: 1.5em
}

@media (max-width: 800px) {
    .page.discord .main-icon {
        margin-bottom:.75em
    }
}

.page.discord .main-icon.lock {
    display: inline-block;
    position: relative;
    width: 42px;
    height: 50px;
    margin-bottom: calc(1.5em + 4px);
    opacity: .65
}

@media (max-width: 800px) {
    .page.discord .main-icon.lock {
        margin-bottom:.75em
    }
}

.page.discord .main-icon.lock .loop {
    position: absolute;
    top: 0;
    left: 4px;
    width: 34px;
    height: 22px;
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
    border-top: 8px solid #fff;
    border-left: 8px solid #fff;
    border-right: 8px solid #fff;
    animation-name: lock-animation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.65,0,.25,1);
    animation-direction: alternate
}

@-moz-keyframes lock-animation {
    0% {
        transform: translate(0)
    }

    33% {
        transform: translate(-24px)
    }

    to {
        transform: translate(-24px)
    }
}

@-webkit-keyframes lock-animation {
    0% {
        transform: translate(0)
    }

    33% {
        transform: translate(-24px)
    }

    to {
        transform: translate(-24px)
    }
}

@-o-keyframes lock-animation {
    0% {
        transform: translate(0)
    }

    33% {
        transform: translate(-24px)
    }

    to {
        transform: translate(-24px)
    }
}

@keyframes lock-animation {
    0% {
        transform: translate(0)
    }

    33% {
        transform: translate(-24px)
    }

    to {
        transform: translate(-24px)
    }
}

.page.discord .main-icon.lock .case {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 42px;
    height: 28px;
    background: #fff
}

.page.discord .title {
    margin-bottom: .5em
}

.page.discord .title .secondary {
    font-weight: 400;
    opacity: .65
}

.page.discord .count {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5em;
    padding: 7px 11px;
    background: rgba(255,255,255,.2);
    border-radius: 10px
}

.page.discord .count .icon {
    margin-right: 8px
}

.page.discord .count .icon svg {
    display: block
}

.page.discord .count .number {
    font-size: .8rem
}

.page.discord .description {
    margin-bottom: 1.5em
}

@media (max-width: 800px) {
    .page.discord .description br {
        display:none
    }
}

.page.discord .bullet-points {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5em
}

.page.discord .bullet-points ul {
    padding: 20px 30px;
    background: #202020;
    border-radius: 10px;
    text-align: left
}

.page.discord .bullet-points .icon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: .8em
}

.page.discord .bullet-points .icon svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.page.discord .bullet-points .icon svg * {
    fill: #32ffce
}

.page.discord .bullet-points .icon.check {
    width: 10px;
    height: 9px
}

.page.discord .bullet-points .icon.cross {
    width: 10px;
    height: 11px
}

.page.discord .leaderboard {
    display: flex;
    justify-content: center
}

.page.discord .leaderboard .title {
    margin-bottom: 1em
}

.page.discord .leaderboard .inner {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    width: 600px
}

.page.discord .leaderboard .description {
    max-width: 400px
}

.page.discord .leaderboard .users {
    position: relative;
    background: #202020;
    width: 100%;
    border-radius: 10px;
    font-size: .8rem
}

.page.discord .leaderboard .users .row {
    display: flex;
    justify-content: space-around;
    margin: 10px;
    padding: 8px 0
}

.page.discord .leaderboard .users .column {
    display: flex;
    align-items: center
}

.page.discord .leaderboard .users .head {
    opacity: .5
}

.page.discord .leaderboard .users .user {
    border-radius: 10px;
    background: rgba(255,255,255,.027)
}

.page.discord .leaderboard .users .user:nth-child(2) {
    color: #ffcd52
}

.page.discord .leaderboard .users .rank {
    width: 10%;
    justify-content: center
}

.page.discord .leaderboard .users .rank.has-medal {
    font-size: 1.5rem
}

.page.discord .leaderboard .users .name {
    width: 40%;
    justify-content: flex-start;
    text-align: left
}

.page.discord .leaderboard .users .name .avatar {
    display: block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    font-size: .8em;
    border-radius: 6px
}

.page.discord .leaderboard .users .messages {
    width: 20%;
    justify-content: center
}

.page.discord .leaderboard .users .xp,.page.discord .leaderboard .users .level {
    width: 15%;
    justify-content: center
}

.page.discord .leaderboard .users .bottom {
    padding: 8px 0 16px
}

.page.discord .leaderboard .users .bottom a {
    opacity: .5
}

.page.discord .leaderboard .users .bottom a:hover {
    opacity: .8
}

.page.experience .experience {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.page.home {
    font-size: 20px
}

@media (max-width: 1600px) {
    .page.home {
        font-size:18px
    }
}

@media (max-width: 1300px) {
    .page.home {
        font-size:16px
    }
}

@media (max-width: 1080px) {
    .page.home {
        font-size:15px
    }
}

@media (max-width: 800px) {
    .page.home {
        font-size:15px
    }
}

@media (max-width: 600px) {
    .page.home {
        font-size:14px
    }
}

@media (max-width: 400px) {
    .page.home {
        font-size:13px
    }
}

.page.home .section-title {
    font-family: Greycliff;
    font-weight: 800;
    font-size: 48px;
    letter-spacing: -.02em
}

@media (max-width: 1600px) {
    .page.home .section-title {
        font-size:44px
    }
}

@media (max-width: 1300px) {
    .page.home .section-title {
        font-size:40px
    }
}

@media (max-width: 1080px) {
    .page.home .section-title {
        font-size:36px
    }
}

@media (max-width: 800px) {
    .page.home .section-title {
        font-size:32px
    }
}

@media (max-width: 600px) {
    .page.home .section-title {
        font-size:28px
    }
}

@media (max-width: 400px) {
    .page.home .section-title {
        font-size:24px
    }
}

.page.home .section-sub-title {
    font-family: Greycliff;
    font-weight: 500;
    font-size: 24px;
    color: #a5a5a5
}

@media (max-width: 1600px) {
    .page.home .section-sub-title {
        font-size:22px
    }
}

@media (max-width: 1300px) {
    .page.home .section-sub-title {
        font-size:21px
    }
}

@media (max-width: 1080px) {
    .page.home .section-sub-title {
        font-size:20px
    }
}

@media (max-width: 800px) {
    .page.home .section-sub-title {
        font-size:19px
    }
}

@media (max-width: 600px) {
    .page.home .section-sub-title {
        font-size:18px
    }
}

@media (max-width: 400px) {
    .page.home .section-sub-title {
        font-size:17px
    }
}

.page.home .button.deactivated {
    cursor: not-allowed
}

.page.home .chapter {
    position: relative
}

.page.home .chapter.chapter-01 .section-title,.page.home .chapter.chapter-01 .information,.page.home .chapter.chapter-01 .lessons .lesson-number {
    color: #ff6651
}

.page.home .chapter.chapter-01 .information .format-icon svg * {
    stroke: #ff6651
}

.page.home .chapter.chapter-01 .grid .line {
    background: #ff6651
}

.page.home .chapter.chapter-01 .illustration {
    position: absolute;
    top: -40px;
    right: -40px
}

.page.home .chapter.chapter-02 .section-title,.page.home .chapter.chapter-02 .information,.page.home .chapter.chapter-02 .lessons .lesson-number {
    color: #54baf3
}

.page.home .chapter.chapter-02 .information .format-icon svg * {
    stroke: #54baf3
}

.page.home .chapter.chapter-02 .grid .line {
    background: #54baf3
}

.page.home .chapter.chapter-02 .illustration {
    position: absolute;
    top: -90px;
    right: -80px
}

@media (max-width: 600px) {
    .page.home .chapter.chapter-02 .illustration {
        right:-40px
    }
}

@media (max-width: 400px) {
    .page.home .chapter.chapter-02 .illustration {
        right:-70px
    }
}

.page.home .chapter.chapter-03 .section-title,.page.home .chapter.chapter-03 .information,.page.home .chapter.chapter-03 .lessons .lesson-number {
    color: #ffb905
}

.page.home .chapter.chapter-03 .information .format-icon svg * {
    stroke: #ffb905
}

.page.home .chapter.chapter-03 .grid .line {
    background: #ffb905
}

.page.home .chapter.chapter-03 .illustration {
    position: absolute;
    top: -50px;
    right: -30px
}

.page.home .chapter.chapter-04 .section-title,.page.home .chapter.chapter-04 .information,.page.home .chapter.chapter-04 .lessons .lesson-number {
    color: #705df2
}

.page.home .chapter.chapter-04 .information .format-icon svg * {
    stroke: #705df2
}

.page.home .chapter.chapter-04 .grid .line {
    background: #705df2
}

.page.home .chapter.chapter-04 .illustration {
    position: absolute;
    top: -70px;
    right: -100px
}

.page.home .chapter.chapter-05 .section-title,.page.home .chapter.chapter-05 .information,.page.home .chapter.chapter-05 .lessons .lesson-number {
    color: #666789
}

.page.home .chapter.chapter-05 .information .format-icon svg * {
    stroke: #666789
}

.page.home .chapter.chapter-05 .grid .line {
    background: #666789
}

.page.home .chapter.chapter-05 .illustration {
    position: absolute;
    top: -55px;
    right: -50px
}

.page.home .chapter.chapter-06 .section-title,.page.home .chapter.chapter-06 .information,.page.home .chapter.chapter-06 .lessons .lesson-number {
    color: #8cae70
}

.page.home .chapter.chapter-06 .information .format-icon svg * {
    stroke: #8cae70
}

.page.home .chapter.chapter-06 .grid .line {
    background: #8cae70
}

.page.home .chapter.chapter-06 .illustration {
    position: absolute;
    top: -65px;
    right: -100px
}

@media (max-width: 1080px) {
    .page.home .chapter.chapter-06 .illustration {
        right:-150px
    }
}

@media (max-width: 600px) {
    .page.home .chapter.chapter-06 .illustration {
        right:-80px
    }
}

@media (max-width: 400px) {
    .page.home .chapter.chapter-06 .illustration {
        top:-85px;
        right: -100px
    }
}

.page.home .chapter.chapter-07 .section-title,.page.home .chapter.chapter-07 .information,.page.home .chapter.chapter-07 .lessons .lesson-number {
    color: #4774c8
}

.page.home .chapter.chapter-07 .information .format-icon svg * {
    stroke: #4774c8
}

.page.home .chapter.chapter-07 .grid .line {
    background: #4774c8
}

.page.home .chapter.chapter-07 .illustration {
    position: absolute;
    top: -70px;
    right: -120px
}

@media (max-width: 1080px) {
    .page.home .chapter.chapter-07 .illustration {
        right:-140px
    }
}

@media (max-width: 600px) {
    .page.home .chapter.chapter-07 .illustration {
        right:-40px
    }
}

@media (max-width: 400px) {
    .page.home .chapter.chapter-07 .illustration {
        right:-70px
    }
}

.page.home .chapter .grid {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    height: 400px;
    overflow: hidden;
    opacity: .6
}

.page.home .chapter .grid .shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 150px -150px 150px #fff inset
}

.page.home .chapter .grid .line {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 1px;
    transform-origin: top right
}

.page.home .chapter .grid .line:nth-child(1) {
    top: 120px
}

.page.home .chapter .grid .line:nth-child(2) {
    top: 240px
}

.page.home .chapter .grid .line:nth-child(3) {
    top: 360px
}

.page.home .chapter .grid .line:nth-child(4) {
    top: -120px
}

.page.home .chapter .grid .line:nth-child(5) {
    top: 0
}

.page.home .chapter .grid .line:nth-child(6) {
    top: 120px
}

.page.home .chapter .grid .line:nth-child(7) {
    top: 240px
}

.page.home .chapter .grid .line.vertical {
    transform: rotate(-30deg)
}

.page.home .chapter .grid .line.horizontal {
    transform: rotate(30deg)
}

.page.home .chapter .illustration {
    position: absolute;
    top: 0;
    right: 0
}

@media (max-width: 1300px) {
    .page.home .chapter .illustration {
        margin-top:-40px;
        margin-right: -60px
    }
}

@media (max-width: 1080px) {
    .page.home .chapter .illustration {
        margin-top:-10px;
        margin-right: -15px
    }
}

@media (max-width: 600px) {
    .page.home .chapter .illustration {
        margin-top:-40px;
        margin-right: -60px
    }
}

.page.home .chapter .illustration img {
    position: absolute;
    top: 0;
    right: 0
}

@media (max-width: 600px) {
    .page.home .chapter .illustration img {
        transform:scale(.75)
    }
}

@media (max-width: 400px) {
    .page.home .chapter .illustration img {
        transform:scale(.5)
    }
}

.page.home .chapter .number {
    display: block;
    position: relative;
    margin-bottom: 8px;
    font-family: Greycliff;
    font-weight: 800;
    font-size: 24px
}

@media (max-width: 1600px) {
    .page.home .chapter .number {
        font-size:23px
    }
}

@media (max-width: 1300px) {
    .page.home .chapter .number {
        font-size:22px
    }
}

@media (max-width: 1080px) {
    .page.home .chapter .number {
        font-size:21px
    }
}

@media (max-width: 800px) {
    .page.home .chapter .number {
        font-size:20px
    }
}

@media (max-width: 600px) {
    .page.home .chapter .number {
        font-size:19px
    }
}

@media (max-width: 400px) {
    .page.home .chapter .number {
        font-size:18px
    }
}

.page.home .chapter .section-title {
    position: relative;
    margin-bottom: 15px;
    font-size: 2.2rem
}

.page.home .chapter .description {
    position: relative;
    margin-bottom: 25px;
    font-size: 18px
}

@media (max-width: 1300px) {
    .page.home .chapter .description {
        font-size:16px
    }
}

@media (max-width: 1080px) {
    .page.home .chapter .description {
        font-size:15px
    }
}

@media (max-width: 800px) {
    .page.home .chapter .description {
        font-size:15px
    }
}

@media (max-width: 600px) {
    .page.home .chapter .description {
        font-size:14px
    }
}

@media (max-width: 400px) {
    .page.home .chapter .description {
        font-size:13px
    }
}

.page.home .chapter .information {
    position: relative;
    margin-bottom: 25px;
    font-size: 16px;
    font-weight: 500
}

.page.home .chapter .information .format-icon {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 25px;
    margin-right: 4px
}

.page.home .chapter .lessons {
    position: relative;
    width: 100%;
    color: #464646;
    font-size: 18px
}

@media (max-width: 1300px) {
    .page.home .chapter .lessons {
        font-size:16px
    }
}

@media (max-width: 1080px) {
    .page.home .chapter .lessons {
        font-size:15px
    }
}

@media (max-width: 800px) {
    .page.home .chapter .lessons {
        font-size:15px
    }
}

@media (max-width: 600px) {
    .page.home .chapter .lessons {
        font-size:14px
    }
}

@media (max-width: 400px) {
    .page.home .chapter .lessons {
        font-size:13px
    }
}

.page.home .chapter .lessons tr {
    background-position: bottom left;
    background-image: url(/assets/images/dotted-border.png);
    background-size: 8px 2px;
    background-repeat: repeat-x
}

.page.home .chapter .lessons tr:hover .badge.is-sneak-peek {
    opacity: 1
}

.page.home .chapter .lessons tr td {
    vertical-align: middle;
    padding-top: .5em;
    padding-bottom: .5em
}

.page.home .chapter .lessons tr:last-child {
    background: none
}

.page.home .chapter .lessons tr .lesson-number {
    padding-right: .8em;
    font-weight: 700
}

.page.home .chapter .lessons tr .lesson-title {
    width: calc(100% - 105px);
    line-height: 1.25em
}

.page.home .chapter .lessons tr .lesson-title a:hover {
    text-decoration: underline
}

.page.home .chapter .lessons tr .badges {
    text-align: right;
    white-space: nowrap
}

.page.home .chapter .lessons tr .badge {
    margin-left: 2px;
    font-size: .7em;
    height: 20px;
    color: #fff;
    white-space: nowrap;
    padding: 0 8px;
    border-radius: 10px;
    opacity: 1;
    transition: opacity .15s
}

.page.home .chapter .lessons tr .badge.is-sneak-peek {
    opacity: 0;
    background: #b9b9b9
}

.page.home .chapter .lessons tr .badge.is-new {
    background: #705df2
}

.page.home .chapter .lessons tr .badge.is-free {
    background: #ffab3a
}

.page.home .chapter .lessons tr .lesson-duration {
    padding-left: .8em;
    text-align: right;
    font-size: 16px;
    white-space: nowrap;
    opacity: .8
}

@media (max-width: 1600px) {
    .page.home .chapter .lessons tr .lesson-duration {
        font-size:15px
    }
}

@media (max-width: 1300px) {
    .page.home .chapter .lessons tr .lesson-duration {
        font-size:14px
    }
}

@media (max-width: 1080px) {
    .page.home .chapter .lessons tr .lesson-duration {
        font-size:13px
    }
}

@media (max-width: 800px) {
    .page.home .chapter .lessons tr .lesson-duration {
        font-size:12px
    }
}

.page.home section.landing {
    position: relative;
    min-height: 100vh
}

@media (max-width: 800px) {
    .page.home section.landing {
        min-height:0
    }
}

.page.home section.landing.is-interacting .experience {
    transform: translate(0);
    transition-duration: 1s;
    transition-delay: .3s;
    transition-timing-function: cubic-bezier(.75,0,.25,1)
}

@media (max-width: 800px) {
    .page.home section.landing.is-interacting .experience {
        transition:none
    }
}

.page.home section.landing.is-interacting .main-logo {
    opacity: 0;
    transform: translate(-30px);
    transition-property: opacity,transform;
    transition-duration: .3s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(.75,0,1,1)
}

@media (max-width: 800px) {
    .page.home section.landing.is-interacting .main-logo {
        transition:none
    }
}

.page.home section.landing.is-interacting .navigation {
    opacity: 1;
    transform: translateY(0);
    transition-property: opacity,transform;
    transition-duration: .5s;
    transition-delay: 1s
}

@media (max-width: 800px) {
    .page.home section.landing.is-interacting .navigation {
        transition:none
    }
}

.page.home section.landing.is-interacting .click {
    opacity: 0;
    transform: translateY(105px);
    transition-property: opacity,transform;
    transition-duration: .5s;
    transition-delay: 0s
}

.page.home section.landing.is-interacting .mask {
    transition-duration: 1s
}

.page.home section.landing.is-interacting .mask.is-top {
    transform: scaleY(0);
    transition-timing-function: cubic-bezier(.75,0,.25,1);
    transition-delay: .3s
}

.page.home section.landing.is-interacting .mask.is-right {
    transform: translate(0);
    transition-timing-function: cubic-bezier(.75,0,.25,1);
    transition-delay: .3s
}

.page.home section.landing.is-interacting .mask.is-bottom {
    transform: scaleY(0);
    transition-timing-function: cubic-bezier(.75,0,.25,1);
    transition-delay: .3s
}

.page.home section.landing.is-interacting .mask.is-left {
    transform: translate(-100%);
    transition-timing-function: cubic-bezier(.75,0,.25,1);
    transition-delay: .3s
}

.page.home section.landing.is-interacting .close {
    pointer-events: auto
}

.page.home section.landing.is-interacting .close .background {
    transform: scale(1);
    transition-duration: .5s;
    transition-delay: .95s;
    transition-timing-function: cubic-bezier(.59,1.97,.55,.83)
}

.page.home section.landing.is-interacting .close .bars {
    transform: scale(1);
    transition-duration: .5s;
    transition-delay: 1s;
    transition-timing-function: cubic-bezier(.59,1.97,.55,.83)
}

.page.home section.landing.is-interacting .chapters {
    pointer-events: auto
}

.page.home section.landing.is-interacting .chapters .overlay {
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 1.3s
}

.page.home section.landing.is-interacting .content {
    pointer-events: none
}

.page.home section.landing.is-interacting .content .element {
    opacity: 0;
    transform: translate(-30px);
    transition-property: opacity,transform;
    transition-duration: .3s,.3s;
    transition-timing-function: cubic-bezier(.75,0,1,1)
}

@media (max-width: 800px) {
    .page.home section.landing.is-interacting .content .element {
        opacity:1;
        transform: none;
        transition: none
    }
}

.page.home section.landing.is-interacting .content .element.delay-0 {
    transition-delay: 0s
}

.page.home section.landing.is-interacting .content .element.delay-1 {
    transition-delay: .05s
}

.page.home section.landing.is-interacting .content .element.delay-2 {
    transition-delay: .1s
}

.page.home section.landing.is-interacting .content .element.delay-3 {
    transition-delay: .15s
}

.page.home section.landing.is-interacting .content .element.delay-4 {
    transition-delay: .2s
}

.page.home section.landing.is-interacting .content .element.delay-5 {
    transition-delay: .25s
}

.page.home section.landing.is-not-interacting .experience {
    transform: translate(730px);
    transition-duration: 1s;
    transition-delay: .3s;
    transition-timing-function: cubic-bezier(.75,0,.25,1)
}

@media (max-width: 2150px) {
    .page.home section.landing.is-not-interacting .experience {
        transform:translate(630px)
    }
}

@media (max-width: 1600px) {
    .page.home section.landing.is-not-interacting .experience {
        transform:translate(535px)
    }
}

@media (max-width: 1300px) {
    .page.home section.landing.is-not-interacting .experience {
        transform:translate(450px)
    }
}

@media (max-width: 1080px) {
    .page.home section.landing.is-not-interacting .experience {
        transform:translate(390px)
    }
}

@media (max-width: 800px) {
    .page.home section.landing.is-not-interacting .experience {
        transform:none;
        transition: none
    }
}

.page.home section.landing.is-not-interacting .main-logo {
    opacity: 1;
    transform: translate(0);
    transition-property: opacity,transform;
    transition-duration: .3s;
    transition-delay: 1s;
    transition-timing-function: cubic-bezier(0,0,.25,1),cubic-bezier(0,0,.25,1)
}

@media (max-width: 800px) {
    .page.home section.landing.is-not-interacting .main-logo {
        transition:none
    }
}

.page.home section.landing.is-not-interacting .navigation {
    opacity: 0;
    transform: translateY(105px);
    transition-property: opacity,transform;
    transition-duration: .5s;
    transition-delay: 0s
}

.page.home section.landing.is-not-interacting .click {
    opacity: 1;
    transform: translateY(0);
    transition-property: opacity,transform;
    transition-duration: .5s;
    transition-delay: 1s
}

.page.home section.landing.is-not-interacting .mask {
    transition-duration: 1s
}

.page.home section.landing.is-not-interacting .mask.is-top {
    transform: scaleY(1);
    transition-timing-function: cubic-bezier(.75,0,.25,1);
    transition-delay: .3s
}

.page.home section.landing.is-not-interacting .mask.is-right {
    transform: translate(calc(100% - 25px));
    transition-timing-function: cubic-bezier(.75,0,.25,1);
    transition-delay: .3s
}

@media (max-width: 1600px) {
    .page.home section.landing.is-not-interacting .mask.is-right {
        transform:translate(calc(100% - 20px))
    }
}

@media (max-width: 1300px) {
    .page.home section.landing.is-not-interacting .mask.is-right {
        transform:translate(calc(100% - 15px))
    }
}

.page.home section.landing.is-not-interacting .mask.is-bottom {
    transform: scaleY(1);
    transition-timing-function: cubic-bezier(.75,0,.25,1);
    transition-delay: .3s
}

.page.home section.landing.is-not-interacting .mask.is-left {
    transform: translate(0);
    transition-timing-function: cubic-bezier(.75,0,.25,1);
    transition-delay: .3s
}

.page.home section.landing.is-not-interacting .close {
    pointer-events: none
}

.page.home section.landing.is-not-interacting .close .background {
    transform: scale(.0001);
    transition-duration: .5s;
    transition-delay: .1s
}

.page.home section.landing.is-not-interacting .close .bars {
    transform: scale(.0001);
    transition-duration: .5s;
    transition-delay: 0s
}

.page.home section.landing.is-not-interacting .chapters {
    pointer-events: none
}

.page.home section.landing.is-not-interacting .chapters .overlay {
    opacity: 0;
    transition-duration: 1s
}

.page.home section.landing.is-not-interacting .content {
    pointer-events: auto
}

.page.home section.landing.is-not-interacting .content .element {
    opacity: 1;
    transform: translate(0);
    transition-property: opacity,transform;
    transition-duration: .3s,.3s;
    transition-timing-function: cubic-bezier(0,0,.25,1),cubic-bezier(0,0,.25,1)
}

.page.home section.landing.is-not-interacting .content .element.delay-0 {
    transition-delay: 1s
}

.page.home section.landing.is-not-interacting .content .element.delay-1 {
    transition-delay: 1.05s
}

.page.home section.landing.is-not-interacting .content .element.delay-2 {
    transition-delay: 1.1s
}

.page.home section.landing.is-not-interacting .content .element.delay-3 {
    transition-delay: 1.15s
}

.page.home section.landing.is-not-interacting .content .element.delay-4 {
    transition-delay: 1.2s
}

.page.home section.landing.is-not-interacting .content .element.delay-5 {
    transition-delay: 1.25s
}

.page.home section.landing .experience {
    position: absolute;
    top: var(--page-top-padding);
    left: 0;
    width: calc(100vw - 500px);
    bottom: 0;
    outline: none;
    overflow: hidden;
    will-change: transform;
    transition-property: transform
}

@media (max-width: 1600px) {
    .page.home section.landing .experience {
        width:calc(100vw - 460px)
    }
}

@media (max-width: 1300px) {
    .page.home section.landing .experience {
        width:calc(100vw - 420px)
    }
}

@media (max-width: 1080px) {
    .page.home section.landing .experience {
        width:calc(100vw - 360px)
    }
}

@media (max-width: 800px) {
    .page.home section.landing .experience {
        position:relative;
        top: auto;
        left: auto;
        width: auto;
        height: 100vw;
        max-height: 100vh
    }
}

.page.home section.landing .experience .canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: grab
}

.page.home section.landing .navigation {
    position: absolute;
    bottom: 45px;
    left: calc(50% - 131px);
    width: 262px;
    height: 58px;
    background: #fff;
    border-radius: 29px;
    box-shadow: 0 30px 70px #3c00bd22;
    will-change: transform;
    cursor: default;
    z-index: 3;
    user-select: none
}

@media (max-width: 1600px) {
    .page.home section.landing .navigation {
        left:calc(50% - 125px);
        bottom: 40px;
        width: 250px;
        height: 58px
    }
}

@media (max-width: 1300px) {
    .page.home section.landing .navigation {
        left:calc(50% - 120px);
        bottom: 35px;
        width: 240px;
        height: 56px
    }
}

@media (max-width: 1080px) {
    .page.home section.landing .navigation {
        left:calc(50% - 115px);
        bottom: 30px;
        width: 230px;
        height: 52px
    }
}

@media (max-width: 800px) {
    .page.home section.landing .navigation {
        left:calc(50% - 110px);
        bottom: 25px;
        width: 220px;
        height: 48px
    }
}

@media (max-width: 600px) {
    .page.home section.landing .navigation {
        left:calc(50% - 105px);
        bottom: 20px;
        width: 210px;
        height: 44px
    }
}

@media (max-width: 400px) {
    .page.home section.landing .navigation {
        left:calc(50% - 100px);
        bottom: 20px;
        width: 200px;
        height: 40px
    }
}

.page.home section.landing .navigation .sibling {
    display: flex;
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: none
}

@media (max-width: 1600px) {
    .page.home section.landing .navigation .sibling {
        width:58px
    }
}

@media (max-width: 1300px) {
    .page.home section.landing .navigation .sibling {
        width:56px
    }
}

@media (max-width: 1080px) {
    .page.home section.landing .navigation .sibling {
        width:54px
    }
}

@media (max-width: 800px) {
    .page.home section.landing .navigation .sibling {
        width:52px
    }
}

@media (max-width: 600px) {
    .page.home section.landing .navigation .sibling {
        width:50px
    }
}

@media (max-width: 400px) {
    .page.home section.landing .navigation .sibling {
        width:48px
    }
}

.page.home section.landing .navigation .sibling.is-active {
    pointer-events: auto
}

.page.home section.landing .navigation .sibling.is-active .icon {
    opacity: 1
}

.page.home section.landing .navigation .sibling.is-previous {
    left: 0;
    padding-left: 3px
}

.page.home section.landing .navigation .sibling.is-previous:after {
    right: 0
}

.page.home section.landing .navigation .sibling.is-previous .icon {
    top: 1px
}

.page.home section.landing .navigation .sibling.is-next {
    right: 0;
    padding-right: 3px
}

.page.home section.landing .navigation .sibling.is-next:after {
    left: 0
}

.page.home section.landing .navigation .sibling.is-next .icon {
    transform: rotate(180deg)
}

.page.home section.landing .navigation .sibling:after {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: #705df2;
    opacity: .1
}

.page.home section.landing .navigation .sibling .icon {
    display: block;
    position: relative;
    width: 12px;
    height: 7px;
    opacity: .2;
    transition: opacity .2s;
    will-change: opacity
}

.page.home section.landing .navigation .sibling .icon svg {
    display: block;
    width: 100%;
    height: 100%
}

.page.home section.landing .navigation .sibling .icon svg * {
    fill: #705df2;
    opacity: 1
}

.page.home section.landing .navigation .label {
    display: flex;
    position: absolute;
    top: 0;
    left: 60px;
    right: 60px;
    height: 100%;
    line-height: 58px;
    justify-content: center;
    font-size: 18px;
    opacity: .9
}

@media (max-width: 1600px) {
    .page.home section.landing .navigation .label {
        line-height:58px
    }
}

@media (max-width: 1300px) {
    .page.home section.landing .navigation .label {
        line-height:56px;
        font-size: 16px
    }
}

@media (max-width: 1080px) {
    .page.home section.landing .navigation .label {
        line-height:52px;
        font-size: 15px
    }
}

@media (max-width: 800px) {
    .page.home section.landing .navigation .label {
        line-height:48px;
        font-size: 15px
    }
}

@media (max-width: 600px) {
    .page.home section.landing .navigation .label {
        line-height:44px;
        font-size: 14px
    }
}

@media (max-width: 400px) {
    .page.home section.landing .navigation .label {
        line-height:40px;
        font-size: 13px
    }
}

.page.home section.landing .navigation .label .value {
    position: relative;
    display: inline-block
}

.page.home section.landing .navigation .label .value .placeholder {
    visibility: hidden
}

.page.home section.landing .navigation .label .value .digit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition-property: transform,opacity;
    transition-duration: .5s,.5s;
    will-change: transform,opacity
}

.page.home section.landing .navigation .label .value .digit.is-before {
    transform: translateY(10px);
    opacity: 0;
    transition-delay: 0,0
}

.page.home section.landing .navigation .label .value .digit.is-current {
    transform: translateY(0);
    opacity: 1;
    transition-delay: .2s,.2s
}

.page.home section.landing .navigation .label .value .digit.is-after {
    transform: translateY(-10px);
    opacity: 0;
    transition-delay: 0,0
}

.page.home section.landing .click {
    position: absolute;
    bottom: 45px;
    left: calc(50% - 131px);
    width: 200px;
    height: 58px;
    background: #fff;
    border-radius: 29px;
    box-shadow: 0 30px 70px #3c00bd22;
    will-change: transform;
    cursor: default;
    z-index: 3;
    pointer-events: none;
    user-select: none
}

@media (max-width: 1600px) {
    .page.home section.landing .click {
        left:calc(50% - 125px);
        bottom: 40px;
        width: 200px;
        height: 58px
    }
}

@media (max-width: 1300px) {
    .page.home section.landing .click {
        left:calc(50% - 120px);
        bottom: 35px;
        width: 200px;
        height: 56px
    }
}

@media (max-width: 1080px) {
    .page.home section.landing .click {
        left:calc(50% - 115px);
        bottom: 30px;
        width: 200px;
        height: 52px
    }
}

@media (max-width: 800px) {
    .page.home section.landing .click {
        left:calc(50% - 110px);
        bottom: 25px;
        width: 200px;
        height: 48px
    }
}

@media (max-width: 600px) {
    .page.home section.landing .click {
        left:calc(50% - 105px);
        bottom: 20px;
        width: 200px;
        height: 44px
    }
}

@media (max-width: 400px) {
    .page.home section.landing .click {
        left:calc(50% - 100px);
        bottom: 20px;
        width: 200px;
        height: 40px
    }
}

.page.home section.landing .click .icon {
    position: relative;
    width: 20px;
    height: 30px;
    border: 2px solid #705df2;
    border-radius: 11px;
    margin-left: 24px
}

@media (max-width: 800px) {
    .page.home section.landing .click .icon {
        width:18px;
        height: 26px
    }
}

.page.home section.landing .click .icon .left-button {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(50% - 2px);
    height: 9px;
    background: #705df2;
    border-top-left-radius: 6px
}

.page.home section.landing .click .label {
    color: #000;
    font-family: Roboto,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400
}

.page.home section.landing .mask {
    position: absolute;
    height: 100%;
    background: #fff;
    transition-property: transform;
    will-change: transform;
    z-index: 1
}

@media (max-width: 800px) {
    .page.home section.landing .mask {
        display:none
    }
}

.page.home section.landing .mask.is-top {
    top: 0;
    left: 0;
    width: 100%;
    height: 25px;
    transform-origin: 50% 0%
}

@media (max-width: 1600px) {
    .page.home section.landing .mask.is-top {
        height:20px
    }
}

@media (max-width: 1300px) {
    .page.home section.landing .mask.is-top {
        height:15px
    }
}

.page.home section.landing .mask.is-right {
    top: 0;
    right: 0;
    width: 500px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px
}

@media (max-width: 1600px) {
    .page.home section.landing .mask.is-right {
        width:460px
    }
}

@media (max-width: 1300px) {
    .page.home section.landing .mask.is-right {
        width:420px
    }
}

@media (max-width: 1080px) {
    .page.home section.landing .mask.is-right {
        width:360px
    }
}

.page.home section.landing .mask.is-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25px;
    transform-origin: 50% 100%
}

@media (max-width: 1600px) {
    .page.home section.landing .mask.is-bottom {
        height:20px
    }
}

@media (max-width: 1300px) {
    .page.home section.landing .mask.is-bottom {
        height:15px
    }
}

.page.home section.landing .mask.is-left {
    top: 0;
    left: 0;
    width: 960px
}

@media (max-width: 2150px) {
    .page.home section.landing .mask.is-left {
        width:800px
    }
}

@media (max-width: 1600px) {
    .page.home section.landing .mask.is-left {
        width:650px
    }
}

@media (max-width: 1300px) {
    .page.home section.landing .mask.is-left {
        width:540px
    }
}

@media (max-width: 1080px) {
    .page.home section.landing .mask.is-left {
        width:420px
    }
}

.page.home section.landing .close {
    display: block;
    position: absolute;
    top: 50%;
    left: 115px;
    pointer-events: none;
    z-index: 3
}

@media (max-width: 1600px) {
    .page.home section.landing .close {
        left:100px
    }
}

@media (max-width: 1300px) {
    .page.home section.landing .close {
        left:85px
    }
}

@media (max-width: 1080px) {
    .page.home section.landing .close {
        left:70px
    }
}

@media (max-width: 800px) {
    .page.home section.landing .close {
        left:60px
    }
}

@media (max-width: 600px) {
    .page.home section.landing .close {
        top:40px;
        left: auto;
        right: 45px
    }
}

@media (max-width: 400px) {
    .page.home section.landing .close {
        top:35px;
        left: auto;
        right: 35px
    }
}

.page.home section.landing .close .background {
    display: block;
    position: absolute;
    top: -30px;
    left: -30px;
    width: 59px;
    height: 59px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 30px 70px #3c00bd22;
    transition-property: transform;
    will-change: transform
}

@media (max-width: 600px) {
    .page.home section.landing .close .background {
        top:-25px;
        left: -25px;
        width: 49px;
        height: 49px
    }
}

.page.home section.landing .close .bars {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition-property: transform;
    will-change: transform
}

.page.home section.landing .close .bars .bar {
    display: block;
    position: absolute;
    top: -1px;
    left: -9px;
    width: 19px;
    height: 3px;
    background: #705df2;
    border-radius: 2px
}

.page.home section.landing .close .bars .bar.bar-1 {
    transform: rotate(-45deg)
}

.page.home section.landing .close .bars .bar.bar-2 {
    transform: rotate(45deg)
}

.page.home section.landing .chapters {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 500px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1
}

@media (max-width: 1600px) {
    .page.home section.landing .chapters {
        width:460px
    }
}

@media (max-width: 1300px) {
    .page.home section.landing .chapters {
        width:420px
    }
}

@media (max-width: 1080px) {
    .page.home section.landing .chapters {
        width:360px
    }
}

@media (max-width: 800px) {
    .page.home section.landing .chapters {
        display:none
    }
}

.page.home section.landing .chapters .container {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 20px);
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto
}

.page.home section.landing .chapters .chapter {
    display: none;
    position: absolute;
    display: flex;
    top: 180px;
    left: 0;
    width: 100%;
    min-height: calc(100% - 180px);
    padding-right: 80px;
    padding-bottom: 100px;
    padding-left: 80px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    pointer-events: none
}

@media (max-width: 1600px) {
    .page.home section.landing .chapters .chapter {
        top:140px;
        min-height: calc(100% - 160px);
        padding-right: 70px;
        padding-bottom: 85px;
        padding-left: 70px
    }
}

@media (max-width: 1300px) {
    .page.home section.landing .chapters .chapter {
        top:110px;
        min-height: calc(100% - 140px);
        padding-right: 60px;
        padding-bottom: 70px;
        padding-left: 60px
    }
}

@media (max-width: 1080px) {
    .page.home section.landing .chapters .chapter {
        top:80px;
        min-height: calc(100% - 140px);
        padding-right: 50px;
        padding-bottom: 55px;
        padding-left: 50px
    }
}

.page.home section.landing .chapters .chapter.is-active {
    pointer-events: auto
}

.page.home section.landing .chapters .chapter.is-active .element {
    opacity: 1;
    transform: translate(0);
    transition-timing-function: ease-out
}

.page.home section.landing .chapters .chapter.is-active .element.delay-0 {
    transition-delay: 0s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-1 {
    transition-delay: .05s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-2 {
    transition-delay: .1s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-3 {
    transition-delay: .15s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-4 {
    transition-delay: .2s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-5 {
    transition-delay: .25s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-6 {
    transition-delay: .3s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-7 {
    transition-delay: .35s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-8 {
    transition-delay: .4s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-9 {
    transition-delay: .45s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-10 {
    transition-delay: .5s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-11 {
    transition-delay: .55s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-12 {
    transition-delay: .6s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-13 {
    transition-delay: .65s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-14 {
    transition-delay: .7s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-15 {
    transition-delay: .75s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-16 {
    transition-delay: .8s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-17 {
    transition-delay: .85s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-18 {
    transition-delay: .9s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-19 {
    transition-delay: .95s
}

.page.home section.landing .chapters .chapter.is-active .element.delay-20 {
    transition-delay: 1s
}

.page.home section.landing .chapters .chapter .grid,.page.home section.landing .chapters .chapter .illustration {
    display: none
}

.page.home section.landing .chapters .chapter .element {
    opacity: 0;
    transform: translate(30px);
    transition-duration: 4s
}

.page.home section.landing .chapters .overlay {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    opacity: 0;
    will-change: opacity
}

.page.home section.landing .chapters .overlay.is-top {
    top: 0;
    height: 180px;
    background: linear-gradient(#fff 60%,rgba(255,255,255,0) 100%)
}

.page.home section.landing .chapters .overlay.is-bottom {
    bottom: 0;
    height: 100px;
    background: linear-gradient(rgba(255,255,255,0),#fff)
}

.page.home section.landing .main-logo {
    position: absolute;
    top: 55px;
    left: 85px;
    z-index: 2
}

@media (max-width: 1600px) {
    .page.home section.landing .main-logo {
        top:45px;
        left: 70px
    }
}

@media (max-width: 1300px) {
    .page.home section.landing .main-logo {
        top:35px;
        left: 55px
    }
}

@media (max-width: 1080px) {
    .page.home section.landing .main-logo {
        top:25px;
        left: 40px
    }
}

@media (max-width: 800px) {
    .page.home section.landing .main-logo {
        top:20px;
        left: 30px
    }
}

@media (max-width: 600px) {
    .page.home section.landing .main-logo {
        top:20px;
        left: 20px
    }
}

@media (max-width: 400px) {
    .page.home section.landing .main-logo {
        top:20px;
        left: 20px
    }
}

.page.home section.landing .content {
    /* display:flex; */
    position: relative;
    width: 960px;
    min-height: 100vh;
    padding-top: var(--page-top-padding);
    padding-right: 120px;
    padding-bottom: 60px;
    padding-left: 200px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transition-property: opacity,transform;
    z-index: 1
}

@media (max-width: 2150px) {
    .page.home section.landing .content {
        width:800px;
        padding-right: 80px;
        padding-left: 180px
    }
}

@media (max-width: 1600px) {
    .page.home section.landing .content {
        width:650px;
        padding-right: 60px;
        padding-left: 110px
    }
}

@media (max-width: 1300px) {
    .page.home section.landing .content {
        width:540px;
        padding-right: 50px;
        padding-left: 80px
    }
}

@media (max-width: 1080px) {
    .page.home section.landing .content {
        width:420px;
        padding-right: 20px;
        padding-left: 40px
    }
}

@media (max-width: 800px) {
    .page.home section.landing .content {
        min-height:0;
        width: auto;
        padding-top: calc(var(--page-top-padding) + 30px);
        padding-left: 30px
    }
}

@media (max-width: 600px) {
    .page.home section.landing .content {
        min-height:0;
        width: auto;
        padding-left: 20px
    }

    html.has-no-user .page.home section.landing .content {
        padding-top: 140px
    }
}

.page.home section.landing .content .main-title {
    margin-bottom: 2.5vh;
    font-size: 64px;
    font-weight: 800;
    line-height: 1em;
    letter-spacing: -.02em
}

@media (max-width: 1600px) {
    .page.home section.landing .content .main-title {
        font-size:58px
    }
}

@media (max-width: 1300px) {
    .page.home section.landing .content .main-title {
        font-size:52px
    }
}

@media (max-width: 1080px) {
    .page.home section.landing .content .main-title {
        font-size:46px
    }
}

@media (max-width: 800px) {
    .page.home section.landing .content .main-title {
        font-size:40px
    }
}

@media (max-width: 600px) {
    .page.home section.landing .content .main-title {
        font-size:34px
    }
}

@media (max-width: 400px) {
    .page.home section.landing .content .main-title {
        font-size:28px
    }
}

.page.home section.landing .content .author {
    display: block;
    margin-bottom: 3vh
}

@media (orientation: portrait) {
    .page.home section.landing .content .author {
        margin-bottom:3vw
    }
}

.page.home section.landing .content .author .picture {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    margin-right: 12px
}

.page.home section.landing .content .author .label {
    display: inline-block;
    vertical-align: middle;
    height: 50px;
    line-height: 50px;
    font-weight: 700
}

.page.home section.landing .content .author .underline-container {
    display: inline-block;
    position: relative
}

.page.home section.landing .content .author .underline-container:after {
    content: "";
    display: block;
    top: 100%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #000;
    transform: scaleX(0);
    transform-origin: 100% 100%;
    transition: transform .6s cubic-bezier(.53,.21,0,1);
    will-change: transform
}

.page.home section.landing .content .author:hover .underline-container:after {
    transform-origin: 0 0;
    transform: scaleX(1)
}

.page.home section.landing .content .description {
    margin-bottom: 3vh;
    max-width: 700px
}

.page.home section.landing .content .description p:last-child {
    margin-bottom: 0
}

.page.home section.landing .content .separator {
    position: relative;
    width: 250px;
    height: 2px;
    margin-bottom: 3vh
}

.page.home section.landing .content .separator:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #705df2;
    opacity: .15
}

.page.home section.landing .content .students {
    display: flex;
    margin-bottom: 4vh;
    line-height: 1.5em;
    align-items: center
}

.page.home section.landing .content .students .illustration {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px
}

.page.home section.landing .content .students .love-link {
    color: #705df2
}

.page.home section.landing .content .students .love-link:hover {
    text-decoration: underline
}

.page.home section.landing .content .join-group {
    display: flex;
    flex-direction: column;
    align-items: center
}

.page.home section.landing .content .join-group .gift {
    padding: 20px 42px 0;
    font-size: 16px;
    color: #705df2;
    text-shadow: 0px 0px 10px #fff
}

.page.home section.landing .content .join-group .gift:hover {
    text-decoration: underline
}

.page.home section.landing .content .join-group .gift .gift-icon {
    display: inline-block;
    width: 15px;
    height: 15px
}

.page.home section.landing .content .join-group .gift .gift-icon svg {
    width: 100%;
    height: 100%
}

.page.home section.landing .content .join-group .gift .gift-icon svg * {
    fill: #705df2
}

.page.home section.landing .content .join-group .button {
    overflow: visible
}

.page.home section.landing .content .join-group .button .hover {
    border-radius: 36px
}

.page.home section.landing .content .join-group .button .price {
    white-space: nowrap
}

.page.home section.presentation {
    padding-top: 12vh;
    padding-bottom: 12vh;
    background: #244567;
    color: #fff;
    text-align: center
}

@media (max-width: 1300px) {
    .page.home section.presentation {
        padding-top:80px;
        padding-bottom: 80px
    }
}

@media (max-width: 1080px) {
    .page.home section.presentation {
        padding-top:60px;
        padding-bottom: 60px
    }
}

@media (max-width: 800px) {
    .page.home section.presentation {
        padding-top:40px;
        padding-bottom: 40px
    }
}

.page.home section.presentation .content {
    width: 600px;
    margin-left: auto;
    margin-right: auto
}

.page.home section.presentation .content p {
    opacity: .9
}

@media (max-width: 800px) {
    .page.home section.presentation .content {
        width:auto;
        margin-left: 40px;
        margin-right: 40px
    }
}

@media (max-width: 800px) {
    .page.home section.presentation .content {
        margin-top:30px;
        margin-bottom: 30px
    }
}

.page.home section.presentation .section-title {
    margin-bottom: 1em
}

.page.home section.presentation .section-title strong {
    color: #705df2
}

.page.home section.presentation .description {
    margin-bottom: 6vh
}

@media (max-width: 1300px) {
    .page.home section.presentation .description {
        margin-bottom:40px
    }
}

@media (max-width: 1080px) {
    .page.home section.presentation .description {
        margin-bottom:30px
    }
}

@media (max-width: 800px) {
    .page.home section.presentation .description {
        margin-bottom:30px
    }
}

.page.home section.presentation .numbers {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 6vh
}

@media (max-width: 1300px) {
    .page.home section.presentation .numbers {
        margin-bottom:40px
    }
}

@media (max-width: 1080px) {
    .page.home section.presentation .numbers {
        margin-bottom:30px
    }
}

@media (max-width: 800px) {
    .page.home section.presentation .numbers {
        margin-bottom:30px
    }
}

.page.home section.presentation .numbers .number {
    width: 25%
}

.page.home section.presentation .numbers .separator {
    position: relative;
    top: 5px;
    width: 1px;
    height: 80px;
    background: #fff;
    opacity: .1
}

.page.home section.presentation .numbers .value {
    margin-bottom: 10px;
    font-family: Greycliff;
    font-weight: 800;
    font-size: 60px
}

@media (max-width: 1600px) {
    .page.home section.presentation .numbers .value {
        font-size:58px
    }
}

@media (max-width: 1300px) {
    .page.home section.presentation .numbers .value {
        font-size:56px
    }
}

@media (max-width: 1080px) {
    .page.home section.presentation .numbers .value {
        font-size:54px
    }
}

@media (max-width: 800px) {
    .page.home section.presentation .numbers .value {
        font-size:52px
    }
}

@media (max-width: 600px) {
    .page.home section.presentation .numbers .value {
        font-size:50px
    }
}

@media (max-width: 400px) {
    .page.home section.presentation .numbers .value {
        font-size:48px
    }
}

.page.home section.presentation .numbers .label {
    font-size: 18px
}

@media (max-width: 1300px) {
    .page.home section.presentation .numbers .label {
        font-size:16px
    }
}

@media (max-width: 1080px) {
    .page.home section.presentation .numbers .label {
        font-size:15px
    }
}

@media (max-width: 800px) {
    .page.home section.presentation .numbers .label {
        font-size:15px
    }
}

@media (max-width: 600px) {
    .page.home section.presentation .numbers .label {
        font-size:14px
    }
}

@media (max-width: 400px) {
    .page.home section.presentation .numbers .label {
        font-size:13px
    }
}

.page.home section.presentation .video-placeholder {
    margin-bottom: 6vh;
    border-radius: 14px
}

@media (max-width: 1300px) {
    .page.home section.presentation .video-placeholder {
        margin-bottom:40px
    }
}

@media (max-width: 1080px) {
    .page.home section.presentation .video-placeholder {
        padding-bottom:30px
    }
}

@media (max-width: 800px) {
    .page.home section.presentation .video-placeholder {
        width:100%;
        height: auto;
        padding-bottom: 30px
    }
}

.page.home section.presentation .player {
    position: relative;
    width: 800px;
    height: 478px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6vh;
    border-radius: 14px;
    background: #0e0a13
}

@media (max-width: 1300px) {
    .page.home section.presentation .player {
        margin-bottom:40px
    }
}

@media (max-width: 1080px) {
    .page.home section.presentation .player {
        padding-bottom:30px
    }
}

@media (max-width: 800px) {
    .page.home section.presentation .player {
        width:auto;
        height: calc(56.25vw + 18px);
        padding-bottom: 30px
    }
}

.page.home section.table-of-content {
    padding-top: 16vh;
    padding-bottom: 16vh
}

@media (max-width: 1300px) {
    .page.home section.table-of-content {
        padding-top:100px;
        padding-bottom: 100px
    }
}

@media (max-width: 1080px) {
    .page.home section.table-of-content {
        padding-top:80px;
        padding-bottom: 80px
    }
}

@media (max-width: 800px) {
    .page.home section.table-of-content {
        padding-top:60px;
        padding-bottom: 60px
    }
}

.page.home section.table-of-content .columns {
    display: flex;
    justify-content: center
}

.page.home section.table-of-content .columns .column {
    width: 584px
}

@media (max-width: 1600px) {
    .page.home section.table-of-content .columns .column {
        width:540px
    }
}

@media (max-width: 1300px) {
    .page.home section.table-of-content .columns .column {
        width:460px
    }
}

@media (max-width: 1080px) {
    .page.home section.table-of-content .columns .column {
        width:540px
    }
}

@media (max-width: 600px) {
    .page.home section.table-of-content .columns .column {
        width:auto
    }
}

.page.home section.table-of-content .columns .column:first-child {
    margin-right: 55px
}

@media (max-width: 1600px) {
    .page.home section.table-of-content .columns .column:first-child {
        margin-right:45px
    }
}

@media (max-width: 1300px) {
    .page.home section.table-of-content .columns .column:first-child {
        margin-right:35px
    }
}

@media (max-width: 1080px) {
    .page.home section.table-of-content .columns .column:first-child {
        margin-right:0
    }
}

@media (max-width: 1080px) {
    .page.home section.table-of-content .columns .column:last-child {
        display:none
    }
}

.page.home section.table-of-content .intro {
    padding-right: 80px;
    padding-left: 60px
}

@media (max-width: 1600px) {
    .page.home section.table-of-content .intro {
        padding-left:55px
    }
}

@media (max-width: 1300px) {
    .page.home section.table-of-content .intro {
        padding-left:50px
    }
}

@media (max-width: 1080px) {
    .page.home section.table-of-content .intro {
        padding-left:45px
    }
}

@media (max-width: 600px) {
    .page.home section.table-of-content .intro {
        padding-left:30px
    }
}

@media (max-width: 400px) {
    .page.home section.table-of-content .intro {
        padding-left:20px
    }
}

.page.home section.table-of-content .intro .section-title {
    margin-bottom: 1em
}

.page.home section.table-of-content .intro p {
    opacity: .8
}

.page.home section.table-of-content .chapter {
    margin-top: 50px;
    padding: 60px 60px 45px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 50px 60px #0000001a
}

@media (max-width: 1600px) {
    .page.home section.table-of-content .chapter {
        margin-top:45px;
        padding: 55px 55px 40px
    }
}

@media (max-width: 1300px) {
    .page.home section.table-of-content .chapter {
        margin-top:40px;
        padding: 50px 50px 40px
    }
}

@media (max-width: 1080px) {
    .page.home section.table-of-content .chapter {
        margin-top:35px;
        padding: 45px 45px 40px
    }
}

@media (max-width: 600px) {
    .page.home section.table-of-content .chapter {
        margin-top:30px;
        padding: 35px 30px 30px
    }
}

.page.home section.table-of-content .chapter.is-visible .illustration {
    opacity: 1;
    transform: translate(0) translateY(0);
    transition-property: opacity,transform;
    transition-duration: .5s,.5s;
    transition-timing-function: cubic-bezier(0,0,.25,1)
}

.page.home section.table-of-content .chapter .section-title {
    width: 220px
}

.page.home section.table-of-content .chapter .description {
    width: 280px
}

.page.home section.table-of-content .chapter .illustration {
    opacity: 0;
    transform: translate(40px) translateY(-25px);
    will-change: opacity,transform
}

.page.home section.bruno-simon {
    padding-bottom: 16vh;
    background: #150c21;
    color: #fff
}

@media (max-width: 1300px) {
    .page.home section.bruno-simon {
        padding-bottom:100px
    }
}

@media (max-width: 1080px) {
    .page.home section.bruno-simon {
        padding-bottom:80px
    }
}

@media (max-width: 800px) {
    .page.home section.bruno-simon {
        padding-bottom:60px
    }
}

.page.home section.bruno-simon .content {
    position: relative;
    width: 840px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 16vh
}

@media (max-width: 1300px) {
    .page.home section.bruno-simon .content {
        padding-top:100px
    }
}

@media (max-width: 1080px) {
    .page.home section.bruno-simon .content {
        width:auto;
        margin-left: 40px;
        margin-right: 40px;
        padding-top: 80px
    }
}

@media (max-width: 800px) {
    .page.home section.bruno-simon .content {
        margin-left:30px;
        margin-right: 30px;
        padding-top: 60px
    }
}

@media (max-width: 600px) {
    .page.home section.bruno-simon .content {
        margin-left:20px;
        margin-right: 20px
    }
}

.page.home section.bruno-simon .photo {
    position: absolute;
    bottom: 0;
    left: 500px;
    width: calc((100vw - 840px)/2 + 340px);
    height: 100%
}

@media (max-width: 1080px) {
    .page.home section.bruno-simon .photo {
        left:400px;
        width: calc(100vw - 400px)
    }
}

@media (max-width: 800px) {
    .page.home section.bruno-simon .photo {
        display:none
    }
}

.page.home section.bruno-simon .photo .gradient {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 888px;
    background: radial-gradient(farthest-side at 60% 80%,#733236,transparent)
}

.page.home section.bruno-simon .photo .objects {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 797px
}

.page.home section.bruno-simon .photo .ball {
    display: block;
    position: absolute;
    top: 55%;
    right: 3%;
    margin-left: -73px;
    margin-top: -73px;
    animation: photo-object-floating 7.1s infinite ease-in-out alternate
}

@media (max-width: 1300px) {
    .page.home section.bruno-simon .photo .ball {
        width:73px;
        height: 73px;
        margin-left: -36.5px;
        margin-top: -36.5px
    }
}

.page.home section.bruno-simon .photo .pyramid {
    display: block;
    position: absolute;
    top: 35%;
    left: 15%;
    margin-left: -80px;
    margin-top: -72px;
    animation: photo-object-floating 6.5s infinite ease-in-out alternate
}

@media (max-width: 1300px) {
    .page.home section.bruno-simon .photo .pyramid {
        width:80px;
        height: 72px;
        margin-top: -40px;
        margin-left: -36px
    }
}

.page.home section.bruno-simon .photo .cube {
    display: block;
    position: absolute;
    top: 20px;
    left: 40%;
    margin-left: -80px;
    margin-top: -82px;
    animation: photo-object-floating 8s infinite ease-in-out alternate
}

@media (max-width: 1300px) {
    .page.home section.bruno-simon .photo .cube {
        width:80px;
        height: 82px;
        margin-left: -40px;
        margin-top: -41px
    }
}

.page.home section.bruno-simon .photo .bruno {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    max-width: 797px
}

@-moz-keyframes photo-object-floating {
    0% {
        transform: translateY(-30px)
    }

    to {
        transform: translateY(30px)
    }
}

@-webkit-keyframes photo-object-floating {
    0% {
        transform: translateY(-30px)
    }

    to {
        transform: translateY(30px)
    }
}

@-o-keyframes photo-object-floating {
    0% {
        transform: translateY(-30px)
    }

    to {
        transform: translateY(30px)
    }
}

@keyframes photo-object-floating {
    0% {
        transform: translateY(-30px)
    }

    to {
        transform: translateY(30px)
    }
}

.page.home section.bruno-simon .section-title {
    margin-bottom: 1.5em
}

.page.home section.bruno-simon .section-title .hand {
    animation: hand-waving 8s infinite;
    transform-origin: 75% 75%
}

@-moz-keyframes hand-waving {
    0% {
        transform: rotate(0)
    }

    2% {
        transform: rotate(25deg)
    }

    6% {
        transform: rotate(-25deg)
    }

    8% {
        transform: rotate(0)
    }
}

@-webkit-keyframes hand-waving {
    0% {
        transform: rotate(0)
    }

    2% {
        transform: rotate(25deg)
    }

    6% {
        transform: rotate(-25deg)
    }

    8% {
        transform: rotate(0)
    }
}

@-o-keyframes hand-waving {
    0% {
        transform: rotate(0)
    }

    2% {
        transform: rotate(25deg)
    }

    6% {
        transform: rotate(-25deg)
    }

    8% {
        transform: rotate(0)
    }
}

@keyframes hand-waving {
    0% {
        transform: rotate(0)
    }

    2% {
        transform: rotate(25deg)
    }

    6% {
        transform: rotate(-25deg)
    }

    8% {
        transform: rotate(0)
    }
}

.page.home section.students {
    padding-top: 12vh;
    text-align: center
}

@media (max-width: 1300px) {
    .page.home section.students {
        padding-top:80px
    }
}

@media (max-width: 1080px) {
    .page.home section.students {
        padding-top:60px
    }
}

@media (max-width: 800px) {
    .page.home section.students {
        padding-top:40px
    }
}

.page.home section.students .section-title {
    width: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em
}

@media (max-width: 1080px) {
    .page.home section.students .section-title {
        margin-left:auto;
        margin-right: auto
    }
}

@media (max-width: 600px) {
    .page.home section.students .section-title {
        margin-left:20px;
        margin-right: 20px
    }
}

.page.home section.students .section-title strong {
    color: #705df2;
    font-weight: 800
}

.page.home section.students .columns {
    display: flex;
    justify-content: center
}

@media (max-width: 1080px) {
    .page.home section.students .columns {
        margin-left:20px;
        margin-right: 20px
    }
}

@media (max-width: 800px) {
    .page.home section.students .columns {
        display:block;
        width: 340px;
        margin-left: auto;
        margin-right: auto
    }
}

@media (max-width: 600px) {
    .page.home section.students .columns {
        width:auto;
        margin-left: 20px;
        margin-right: 20px
    }
}

.page.home section.students .column {
    width: 400px
}

@media (max-width: 1600px) {
    .page.home section.students .column {
        width:360px
    }
}

@media (max-width: 1300px) {
    .page.home section.students .column {
        width:320px
    }
}

@media (max-width: 1080px) {
    .page.home section.students .column {
        width:auto;
        flex: 1
    }
}

.page.home section.students .button.is-more {
    height: 66px;
    border-radius: 33px;
    box-shadow: 0 14px 55px #3c00bd26;
    -webkit-mask-image: none
}

.page.home section.students .button.is-more .hover {
    opacity: .035
}

.page.home section.students .button.is-more .label {
    margin-right: 35px;
    margin-left: 35px;
    font-size: 20px
}

@media (max-width: 1600px) {
    .page.home section.students .button.is-more .label {
        font-size:18px
    }
}

@media (max-width: 1300px) {
    .page.home section.students .button.is-more .label {
        font-size:16px
    }
}

@media (max-width: 1080px) {
    .page.home section.students .button.is-more .label {
        font-size:15px
    }
}

@media (max-width: 800px) {
    .page.home section.students .button.is-more .label {
        font-size:15px
    }
}

@media (max-width: 600px) {
    .page.home section.students .button.is-more .label {
        font-size:14px
    }
}

@media (max-width: 400px) {
    .page.home section.students .button.is-more .label {
        font-size:13px
    }
}

.page.join .page-content .steps {
    position: relative
}

.page.join .page-content .steps-placeholder {
    transition: height .35s
}

.page.join .page-content .step {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition-property: opacity;
    transition-duration: .25s;
    transition-delay: 0;
    will-change: opacity;
    pointer-events: none
}

.page.join .page-content .step.is-active {
    opacity: 1;
    transition-duration: .5s;
    transition-delay: .5s;
    pointer-events: auto
}

.page.join .page-content .buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1em
}

.page.join .page-content .buttons .button:last-child {
    margin-right: 0
}

.page.join .page-content .form .field.text label {
    width: 25%
}

.page.join .page-content .form .field.text input {
    padding-left: calc(25% + 20px)
}

.page.join .page-content .form .field.text input:focus {
    padding-left: calc(25% + 19px)
}

.page.join .page-content .form .field.checkbox,.page.join .page-content .form .field.radio {
    font-size: 14px;
    color: #eee
}

.page.join .page-content .form .field.checkbox .label,.page.join .page-content .form .field.radio .label {
    margin-bottom: 1.1em
}

.page.join .page-content .form .field.checkbox a,.page.join .page-content .form .field.radio a {
    text-decoration: underline
}

.page.join .page-content .form .field .message {
    position: absolute;
    bottom: 5px;
    right: 10px;
    pointer-events: none;
    font-size: .75rem
}

.page.join .page-content .form .field .message.has-error {
    color: #fa6c63
}

.page.join .page-content .form .field .message.has-success {
    color: #32ffce
}

.page.join .loader {
    display: flex;
    position: absolute;
    top: -5px;
    left: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition-property: opacity;
    transition-duration: .5s;
    opacity: 0;
    pointer-events: none
}

.page.join .loader.is-active {
    opacity: 1;
    pointer-events: auto;
    transition-duration: .25s
}

.page.join .loader.is-loader-main {
    background: #1a1a1a
}

.page.join .loader .loading-label {
    opacity: .35;
    font-size: .75rem;
    line-height: 1em;
    margin-bottom: 8px
}

.page.join .loader .dots {
    display: flex;
    align-items: center;
    justify-content: center
}

.page.join .loader .dots .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: 3px;
    margin-right: 3px;
    background: #aaa;
    animation: loader-dot 1s infinite linear
}

.page.join .loader .dots .dot:nth-child(2) {
    animation-delay: .15s
}

.page.join .loader .dots .dot:nth-child(3) {
    animation-delay: .3s
}

.page.join .step-0 .process {
    margin-bottom: 2em
}

.page.join .step-1 .voucher-messages {
    display: none
}

.page.join .step-1 .voucher-messages.is-active {
    display: block
}

.page.join .step-1 .stripe-message {
    margin-top: 1em;
    text-align: right;
    font-size: .75rem
}

.page.join .step-1 .stripe-message.has-error {
    color: #fa6c63
}

.page.join .step-1 .stripe-message.has-success {
    color: #32ffce
}

.page.join .step-1 .pay-button {
    position: relative;
    margin-right: 0
}

.page.join .step-1 .pay-button:hover .label .local-price {
    opacity: 1
}

.page.join .step-1 .pay-button .label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Greycliff,sans-serif;
    font-weight: 800
}

.page.join .step-1 .pay-button .label .price {
    margin-left: .35rem;
    position: relative;
    top: -.1rem;
    font-size: 1.5rem
}

.page.join .step-1 .pay-button .label .local-price {
    position: absolute;
    top: 100%;
    right: 0;
    opacity: .4;
    transition: opacity .25s
}

.page.join .step-1 .secure-payment {
    display: flex;
    margin-top: 1em;
    font-size: .75rem;
    color: #32ffce;
    justify-content: flex-end;
    align-items: center
}

@media (max-width: 400px) {
    .page.join .step-1 .secure-payment {
        margin-top:10px
    }
}

.page.join .step-1 .secure-payment span {
    display: inline-block
}

.page.join .step-1 .secure-payment .icon {
    display: inline-block;
    position: relative;
    top: -1px;
    width: 11px;
    height: 13px;
    margin-right: 6px
}

.page.join .step-1 .secure-payment .icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #32ffce
}

.page.subscribeClosed .panel {
    width: 580px
}

.page.subscribeClosed .panel .head {
    position: relative
}

.page.subscribeClosed .panel .body {
    padding: 25px 40px 40px;
    font-size: 18px;
    text-align: center
}

@media (max-width: 800px) {
    .page.subscribeClosed .panel .body {
        padding:20px 30px 35px
    }
}

@media (max-width: 600px) {
    .page.subscribeClosed .panel .body {
        padding:15px 20px 30px
    }
}

@media (max-width: 400px) {
    .page.subscribeClosed .panel .body {
        padding:10px 15px 25px
    }
}

.page.lessons {
    padding-top: var(--page-top-padding);
    background-color: #1a1a1a;
    color: #fff
}

.page.lessons .player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media print {
    .page.lessons .player {
        display: none
    }
}

.page.lessons .player-top {
    position: relative;
    width: 100%
}

@media print {
    .page.lessons .player-top {
        display: none
    }
}

.page.lessons .player-top .ratio-dummy {
    aspect-ratio: 1920/1080;
    margin-bottom: 28px;
    max-width: 100vw;
    max-height: calc(100vh - 155px)
}

.page.lessons .player-floating {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: calc(192px * 1.65);
    height: 206.2px;
    background: #202020;
    z-index: 4;
    will-change: transform;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 14px 40px #0009
}

@media print {
    .page.lessons .player-floating {
        display: none!important
    }
}

.page.lessons .player-floating.has-player {
    display: block
}

.page.lessons .player-floating:hover .handle,html.has-touch .page.lessons .player-floating .handle {
    opacity: 1;
    transition-duration: .15s;
    transition-delay: 0s
}

.page.lessons .player-floating .player .video-area .tracks,.page.lessons .player-floating .player .controls .subtitles {
    display: none
}

.page.lessons .player-floating .handle {
    position: absolute;
    top: 0;
    width: 34px;
    height: 34px;
    z-index: 2;
    opacity: 0;
    transition-property: opacity;
    transition-duration: .5s;
    transition-delay: .2s;
    will-change: opacity
}

.page.lessons .player-floating .handle:hover .background {
    opacity: .8
}

.page.lessons .player-floating .handle.is-disable {
    right: 64px;
    cursor: pointer
}

.page.lessons .player-floating .handle.is-disable .icon {
    position: absolute;
    top: 50%;
    right: 50%
}

.page.lessons .player-floating .handle.is-disable .icon .bar {
    position: absolute;
    top: -1px;
    left: -10px;
    width: 20px;
    height: 2px;
    background: #fff
}

.page.lessons .player-floating .handle.is-disable .icon .bar.bar-1 {
    transform: rotate(-45deg)
}

.page.lessons .player-floating .handle.is-disable .icon .bar.bar-2 {
    transform: rotate(45deg)
}

.page.lessons .player-floating .handle.is-move {
    right: 34px;
    cursor: all-scroll
}

.page.lessons .player-floating .handle.is-move .icon {
    position: absolute;
    top: calc(50% - 11px);
    left: calc(50% - 11px)
}

.page.lessons .player-floating .handle.is-resize {
    right: 0;
    cursor: ne-resize
}

.page.lessons .player-floating .handle.is-resize .icon {
    position: absolute;
    top: calc(50% - 14px);
    right: calc(50% - 14px)
}

.page.lessons .player-floating .handle .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #131313;
    opacity: 0;
    transition-property: opacity;
    transition-duration: .15s;
    will-change: opacity
}

.page.lessons .lessons-list {
    position: fixed;
    top: calc(var(--page-top-padding) + 10px);
    bottom: 0;
    left: 0;
    width: 450px;
    z-index: 5;
    transform: translate(-100%);
    transition: transform .5s cubic-bezier(.53,.21,0,1);
    will-change: transform
}

@media (max-width: 600px) {
    .page.lessons .lessons-list {
        width:340px
    }
}

@media (max-width: 400px) {
    .page.lessons .lessons-list {
        width:calc(100vw - 45px)
    }
}

@media print {
    .page.lessons .lessons-list {
        display: none
    }
}

.page.lessons .lessons-list.is-visible {
    transform: translate(0)
}

.page.lessons .lessons-list.is-visible .toggle-button .bar.bar-2 .inner {
    transform: translate(100%);
    transition-delay: .4s
}

.page.lessons .lessons-list.is-visible .toggle-button .bar.bar-3 .inner {
    transform: translate(100%);
    transition-delay: .5s
}

.page.lessons .lessons-list.is-visible .toggle-button .bar.bar-4 .inner {
    transform: translate(0);
    transition-delay: .6s
}

.page.lessons .lessons-list.is-visible .toggle-button .bar.bar-5 .inner {
    transform: translate(0);
    transition-delay: .7s
}

.page.lessons .lessons-list.is-down .shadow-overlay {
    opacity: 0
}

.page.lessons .lessons-list .toggle-button {
    position: absolute;
    left: 100%;
    top: 12px;
    height: 47px;
    width: 47px;
    background: #282828;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 0 14px 40px #0009;
    cursor: pointer
}

@media (max-width: 400px) {
    .page.lessons .lessons-list .toggle-button {
        top:0
    }
}

.page.lessons .lessons-list .toggle-button:hover .hover {
    transform-origin: 0 0;
    transform: scaleX(1)
}

.page.lessons .lessons-list .toggle-button .shadow-fix {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    -webkit-mask-image: -webkit-radial-gradient(#fff,#000)
}

.page.lessons .lessons-list .toggle-button .hover {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: .05;
    transform: scaleX(0);
    transform-origin: 100% 100%;
    transition: transform .6s cubic-bezier(.53,.21,0,1);
    will-change: transform
}

.page.lessons .lessons-list .toggle-button .bar {
    position: absolute;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    overflow: hidden
}

.page.lessons .lessons-list .toggle-button .bar.bar-1 {
    top: calc(50% - 1px);
    left: calc(50% - 10px)
}

.page.lessons .lessons-list .toggle-button .bar.bar-2 {
    top: calc(50% - 7px);
    left: calc(50% - 10px)
}

.page.lessons .lessons-list .toggle-button .bar.bar-2 .inner {
    transition-delay: .7s
}

.page.lessons .lessons-list .toggle-button .bar.bar-3 {
    top: calc(50% + 5px);
    left: calc(50% - 10px)
}

.page.lessons .lessons-list .toggle-button .bar.bar-3 .inner {
    transition-delay: .6s
}

.page.lessons .lessons-list .toggle-button .bar.bar-4 {
    top: calc(50% - 1px);
    left: calc(50% - 10px);
    width: 10px;
    transform-origin: 1px 1px;
    transform: rotate(-45deg)
}

.page.lessons .lessons-list .toggle-button .bar.bar-4 .inner {
    transform: translate(-100%);
    transition-delay: .5s
}

.page.lessons .lessons-list .toggle-button .bar.bar-5 {
    top: calc(50% - 1px);
    left: calc(50% - 10px);
    width: 10px;
    transform-origin: 1px 1px;
    transform: rotate(45deg)
}

.page.lessons .lessons-list .toggle-button .bar.bar-5 .inner {
    transform: translate(-100%);
    transition-delay: .4s
}

.page.lessons .lessons-list .toggle-button .bar .inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background: #fff;
    transition: transform .2s;
    will-change: transform
}

.page.lessons .lessons-list .scroll-container {
    position: absolute;
    top: 0;
    left: 10px;
    bottom: 10px;
    width: calc(100% - 10px);
    background: #0e0e0e;
    border-radius: 12px;
    box-shadow: 0 14px 40px #0009;
    overflow: hidden
}

@media (max-width: 400px) {
    .page.lessons .lessons-list .scroll-container {
        left:0;
        width: 100%;
        border-top-right-radius: 0
    }
}

.page.lessons .lessons-list .scroll-mover {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 40px);
    height: 100%;
    overflow-y: scroll
}

.page.lessons .lessons-list .shadow-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 220px;
    background: linear-gradient(to top,rgba(0,0,0,.533),rgba(0,0,0,0));
    opacity: 1;
    transition: opacity .3s;
    pointer-events: none
}

.page.lessons .lessons-list .chapter-container {
    width: 440px
}

@media (max-width: 600px) {
    .page.lessons .lessons-list .chapter-container {
        width:330px
    }
}

@media (max-width: 400px) {
    .page.lessons .lessons-list .chapter-container {
        width:calc(100% - 40px)
    }
}

.page.lessons .lessons-list .chapter {
    display: flex;
    position: relative;
    background: #1a1a1a;
    padding: 15px 20px 15px 80px;
    border-radius: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start
}

@media (max-width: 600px) {
    .page.lessons .lessons-list .chapter {
        padding-left:55px
    }
}

html.has-no-user .page.lessons .lessons-list .chapter {
    padding-left: 30px
}

@media (max-width: 600px) {
    html.has-no-user .page.lessons .lessons-list .chapter {
        padding-left:15px
    }
}

.page.lessons .lessons-list .chapter.is-done .title {
    color: #32ffce
}

.page.lessons .lessons-list .chapter.is-done .progress .circle .fill circle {
    stroke: #32ffce
}

.page.lessons .lessons-list .chapter.is-done .progress .percentage {
    color: #32ffce
}

.page.lessons .lessons-list .chapter .label {
    font-family: Greycliff,sans-serif;
    font-weight: 700;
    font-size: .9rem
}

.page.lessons .lessons-list .chapter .title {
    font-family: Greycliff,sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    color: #705df2;
    line-height: 1em;
    margin-bottom: .15em
}

.page.lessons .lessons-list .chapter .progress {
    position: absolute;
    top: calc(50% - 19px);
    left: 24px
}

@media (max-width: 600px) {
    .page.lessons .lessons-list .chapter .progress {
        left:6px
    }
}

html.has-no-user .page.lessons .lessons-list .chapter .progress {
    display: none
}

.page.lessons .lessons-list .chapter .progress .circle {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 38px;
    height: 38px
}

.page.lessons .lessons-list .chapter .progress .circle svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.page.lessons .lessons-list .chapter .progress .circle .full circle {
    stroke: #2f2f2f
}

.page.lessons .lessons-list .chapter .progress .circle .fill {
    transform: rotate(-90deg)
}

.page.lessons .lessons-list .chapter .progress .circle .fill circle {
    stroke: #705df2;
    transition: stroke-dashoffset .3s
}

.page.lessons .lessons-list .chapter .progress .percentage {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 36px;
    font-family: Greycliff,sans-serif;
    font-weight: 700;
    font-size: .75rem;
    color: #705df2
}

.page.lessons .lessons-list .list {
    padding-top: 5px;
    padding-bottom: 5px
}

.page.lessons .lessons-list .list:hover .lesson:not(:hover).is-current .background:after {
    transform-origin: 100% 100%;
    transform: scaleX(0)
}

.page.lessons .lessons-list .lesson {
    display: block;
    position: relative
}

.page.lessons .lessons-list .lesson.is-current .link .background:after {
    transform-origin: 0 0;
    transform: scaleX(1)
}

.page.lessons .lessons-list .lesson.is-current .link .title {
    opacity: 1
}

.page.lessons .lessons-list .lesson.is-active .status .icon .active,.page.lessons .lessons-list .lesson.is-done .status .icon .done {
    transform: scale(1);
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(.52,2.67,.61,.6)
}

.page.lessons .lessons-list .lesson.is-was-done.is-current .status .icon .active {
    background: #32ffce
}

.page.lessons .lessons-list .lesson.is-was-done.is-current .status .icon .active .inner svg * {
    fill: #202020
}

.page.lessons .lessons-list .lesson .link {
    display: block;
    padding: 16px 75px
}

@media (max-width: 600px) {
    .page.lessons .lessons-list .lesson .link {
        padding-left:55px;
        padding-right: 55px
    }
}

@media (max-width: 400px) {
    .page.lessons .lessons-list .lesson .link {
        padding-right:20px
    }
}

.page.lessons .lessons-list .lesson .link:hover .background:after {
    transform-origin: 0 0;
    transform: scaleX(1)
}

.page.lessons .lessons-list .lesson .link:hover .title,.page.lessons .lessons-list .lesson .link:hover .badge.is-sneak-peek {
    opacity: 1
}

.page.lessons .lessons-list .lesson .link .background {
    position: absolute;
    top: 0;
    left: 12px;
    right: 0;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(#fff,#000)
}

@media (max-width: 600px) {
    .page.lessons .lessons-list .lesson .link .background {
        left:5px;
        right: 5px
    }
}

@media (max-width: 400px) {
    .page.lessons .lessons-list .lesson .link .background {
        left:0;
        right: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }
}

.page.lessons .lessons-list .lesson .link .background:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: .05;
    transform: scaleX(0);
    transform-origin: 100% 100%;
    transition: transform .6s cubic-bezier(.53,.21,0,1);
    will-change: transform
}

.page.lessons .lessons-list .lesson .link .title {
    display: block;
    position: relative;
    font-weight: 400;
    line-height: 1.35em;
    opacity: .5;
    transition: opacity .3s
}

.page.lessons .lessons-list .lesson .link .badge {
    position: absolute;
    top: -3px;
    right: 0;
    padding: 4px 8px;
    background: #705df2;
    border-radius: 8px;
    font-size: .8rem
}

.page.lessons .lessons-list .lesson .link .badge.is-sneak-peek {
    background: #666;
    opacity: 0;
    transition: opacity .15s
}

.page.lessons .lessons-list .lesson .link .duration {
    position: absolute;
    top: calc(50% - .4em);
    right: 32px;
    font-size: .8rem;
    font-weight: 500;
    opacity: .35
}

@media (max-width: 600px) {
    .page.lessons .lessons-list .lesson .link .duration {
        right:13px
    }
}

@media (max-width: 400px) {
    .page.lessons .lessons-list .lesson .link .duration {
        display:none
    }
}

.page.lessons .lessons-list .lesson .status {
    display: block;
    position: absolute;
    top: 0;
    left: 26px;
    width: 40px;
    height: 100%
}

@media (max-width: 600px) {
    .page.lessons .lessons-list .lesson .status {
        left:5px
    }
}

html.has-user .page.lessons .lessons-list .lesson .status {
    cursor: alias
}

html.has-no-user .page.lessons .lessons-list .lesson .status {
    pointer-events: none
}

.page.lessons .lessons-list .lesson .status .icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%
}

html.has-user .page.lessons .lessons-list .lesson .status .icon {
    cursor: alias
}

.page.lessons .lessons-list .lesson .status .icon .to-do {
    display: block;
    position: absolute;
    top: -9px;
    left: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.2)
}

.page.lessons .lessons-list .lesson .status .icon .done {
    display: block;
    position: absolute;
    top: -13px;
    left: -13px;
    width: 26px;
    height: 26px;
    background: #32ffce;
    border-radius: 50%;
    transform: scale(0);
    transition: transform .2s ease-in;
    will-change: transform
}

.page.lessons .lessons-list .lesson .status .icon .done .inner {
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 6px);
    width: 12px;
    height: 10px
}

.page.lessons .lessons-list .lesson .status .icon .done .inner svg {
    display: block;
    width: 100%;
    height: 100%
}

.page.lessons .lessons-list .lesson .status .icon .done .inner svg * {
    fill: #202020
}

.page.lessons .lessons-list .lesson .status .icon .active {
    display: block;
    position: absolute;
    top: -15px;
    left: -15px;
    width: 29px;
    height: 29px;
    background: #705df2;
    border-radius: 50%;
    transform: scale(0);
    transition: transform .2s ease-in;
    will-change: transform
}

.page.lessons .lessons-list .lesson .status .icon .active .inner {
    position: absolute;
    top: calc(50% - 6px);
    left: calc(50% - 4px);
    width: 10px;
    height: 11px
}

.page.lessons .lessons-list .lesson .status .icon .active .inner svg {
    display: block;
    width: 100%;
    height: 100%
}

.page.lessons .lessons-list .lesson .status .icon .active .inner svg * {
    fill: #fff
}

.page.lessons .tabs {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 500px;
    z-index: 5
}

@media (max-width: 1080px) {
    .page.lessons .tabs {
        width:400px
    }
}

@media (max-width: 800px) {
    .page.lessons .tabs {
        width:360px
    }
}

@media (max-width: 400px) {
    .page.lessons .tabs {
        width:calc(100% - 15px)
    }
}

@media print {
    .page.lessons .tabs {
        display: none
    }
}

.page.lessons .tabs .tabs-buttons {
    display: flex;
    position: absolute;
    bottom: 100%;
    left: 0;
    height: 47px;
    width: 100%;
    border-top-left-radius: 15px
}

@media (max-width: 1080px) {
    .page.lessons .tabs .tabs-buttons {
        left:auto;
        right: 0;
        width: 94px
    }
}

.page.lessons .tabs .tabs-button {
    display: flex;
    align-items: center;
    position: relative;
    width: 50%;
    height: 47px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    background: #1a1a1a
}

.page.lessons .tabs .tabs-button:first-child {
    border-top-left-radius: 15px
}

.page.lessons .tabs .tabs-button.is-scroll-up {
    position: absolute;
    right: calc(100% + 5px);
    bottom: 0;
    width: 55px;
    border-top-right-radius: 15px;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.53,.21,0,1);
    will-change: transform
}

@media (max-width: 1080px) {
    .page.lessons .tabs .tabs-button.is-scroll-up {
        right:99px;
        width: 47px
    }
}

.page.lessons .tabs .tabs-button.is-scroll-up.is-active {
    transform: translateY(0)
}

.page.lessons .tabs .tabs-button.is-scroll-up .icons {
    left: 50%
}

.page.lessons .tabs .tabs-button:hover .hover {
    transform-origin: 0 0;
    transform: scaleX(1)
}

.page.lessons .tabs .tabs-button:hover .icon.is-scroll-up svg .arrow {
    animation: scroll-up-icon 2s infinite
}

@-moz-keyframes scroll-up-icon {
    0% {
        transform: translateY(0)
    }

    10% {
        transform: translateY(6px)
    }

    20% {
        transform: translateY(0)
    }

    30% {
        transform: translateY(6px)
    }

    40% {
        transform: translateY(0)
    }
}

@-webkit-keyframes scroll-up-icon {
    0% {
        transform: translateY(0)
    }

    10% {
        transform: translateY(6px)
    }

    20% {
        transform: translateY(0)
    }

    30% {
        transform: translateY(6px)
    }

    40% {
        transform: translateY(0)
    }
}

@-o-keyframes scroll-up-icon {
    0% {
        transform: translateY(0)
    }

    10% {
        transform: translateY(6px)
    }

    20% {
        transform: translateY(0)
    }

    30% {
        transform: translateY(6px)
    }

    40% {
        transform: translateY(0)
    }
}

@keyframes scroll-up-icon {
    0% {
        transform: translateY(0)
    }

    10% {
        transform: translateY(6px)
    }

    20% {
        transform: translateY(0)
    }

    30% {
        transform: translateY(6px)
    }

    40% {
        transform: translateY(0)
    }
}

.page.lessons .tabs .tabs-button:hover .icon.is-link svg path {
    stroke-dashoffset: 66px
}

.page.lessons .tabs .tabs-button:hover .icon.is-list .row:nth-child(1) .line {
    transform: scaleX(.4)
}

.page.lessons .tabs .tabs-button:hover .icon.is-list .row:nth-child(2) .line {
    transform: scaleX(1)
}

.page.lessons .tabs .tabs-button:hover .icon.is-list .row:nth-child(3) .line {
    transform: scaleX(.7)
}

.page.lessons .tabs .tabs-button .hover {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: .05;
    transform: scaleX(0);
    transform-origin: 100% 100%;
    transition: transform .6s cubic-bezier(.53,.21,0,1);
    will-change: transform
}

.page.lessons .tabs .tabs-button .icons {
    position: absolute;
    top: 50%;
    left: 38px
}

@media (max-width: 1080px) {
    .page.lessons .tabs .tabs-button .icons {
        left:25px
    }
}

.page.lessons .tabs .tabs-button .icon.is-scroll-up {
    display: block;
    position: absolute;
    top: -9px;
    left: -8px;
    width: 16px;
    height: 21px;
    opacity: .5
}

.page.lessons .tabs .tabs-button .icon.is-scroll-up svg {
    display: block;
    width: 100%;
    height: 100%
}

.page.lessons .tabs .tabs-button .icon.is-link {
    display: block;
    position: absolute;
    top: -7px;
    left: -15px;
    width: 29px;
    height: 14px;
    opacity: .5
}

.page.lessons .tabs .tabs-button .icon.is-link svg {
    display: block;
    width: 100%;
    height: 100%
}

.page.lessons .tabs .tabs-button .icon.is-link svg path {
    stroke-dasharray: 33px;
    stroke-dashoffset: 0px;
    transition: stroke-dashoffset .5s cubic-bezier(.65,0,.35,1)
}

.page.lessons .tabs .tabs-button .icon.is-list {
    display: block;
    position: absolute;
    top: -8px;
    left: -15px;
    opacity: .5;
    font-size: 0
}

.page.lessons .tabs .tabs-button .icon.is-list * {
    display: block
}

.page.lessons .tabs .tabs-button .icon.is-list .row {
    position: relative;
    width: 30px;
    height: 4px;
    margin-bottom: 3px
}

.page.lessons .tabs .tabs-button .icon.is-list .row .dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 4px;
    background: #fff
}

.page.lessons .tabs .tabs-button .icon.is-list .row .line {
    position: absolute;
    top: 1px;
    left: 8px;
    right: 0;
    height: 2px;
    background: #fff;
    transform-origin: 0 0;
    transition: transform .3s
}

.page.lessons .tabs .tabs-button .icon.is-list .row:nth-child(1) .line {
    transform: scaleX(.7)
}

.page.lessons .tabs .tabs-button .icon.is-list .row:nth-child(2) .line {
    transform: scaleX(.4)
}

.page.lessons .tabs .tabs-button .icon.is-list .row:nth-child(3) .line {
    transform: scaleX(1)
}

.page.lessons .tabs .tabs-button .label {
    position: relative;
    margin-left: 70px;
    font-family: Greycliff,sans-serif;
    font-weight: 700;
    letter-spacing: .05em;
    opacity: .8
}

@media (max-width: 400px) {
    .page.lessons .tabs .tabs-button .label {
        display:none
    }
}

.page.lessons .tabs .tabs-button .inactive-shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,.133),rgba(0,0,0,.4));
    opacity: 0;
    transition: opacity .3s
}

.page.lessons .tabs .tabs-mover {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 500px;
    max-height: calc(100vh - 90px);
    transform: translateY(100%);
    transition: transform .5s cubic-bezier(.53,.21,0,1);
    will-change: transform;
    box-shadow: 0 -40px 40px #0009
}

@media (max-width: 1080px) {
    .page.lessons .tabs .tabs-mover {
        box-shadow:0 0 40px #0009;
        border-top-left-radius: 15px
    }
}

.page.lessons .tabs .tabs-mover.is-visible {
    transform: translate(0)
}

.page.lessons .tabs .tabs-mover.is-visible .tabs-button:not(.is-active) .inactive-shade {
    opacity: 1
}

.page.lessons .tabs .tabs-mover .tabs-targets {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    overflow: hidden
}

@media (max-width: 1080px) {
    .page.lessons .tabs .tabs-mover .tabs-targets {
        border-top-left-radius:15px
    }
}

.page.lessons .tabs .tabs-mover .tabs-target {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s
}

.page.lessons .tabs .tabs-mover .tabs-target.is-active {
    opacity: 1;
    pointer-events: auto;
    transition-delay: .2s
}

.page.lessons .tabs .tabs-mover .tabs-target .links li,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content li {
    padding-left: 1.75em
}

.page.lessons .tabs .tabs-mover .tabs-target .links li:before,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content li:before {
    top: calc(.8em - 4px);
    width: 6px;
    height: 6px;
    border-radius: 3px
}

.page.lessons .tabs .tabs-mover .tabs-target .links li:hover .link .video-jump,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content li:hover .link .video-jump {
    opacity: .5
}

.page.lessons .tabs .tabs-mover .tabs-target .links li:hover .link .video-jump:hover,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content li:hover .link .video-jump:hover {
    opacity: 1
}

.page.lessons .tabs .tabs-mover .tabs-target .links li:last-child>.link:not(.is-parent) .path,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content li:last-child>.link:not(.is-parent) .path {
    display: none
}

.page.lessons .tabs .tabs-mover .tabs-target .links:hover .link .label,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content:hover .link .label {
    opacity: .5
}

.page.lessons .tabs .tabs-mover .tabs-target .links:hover .link:hover .label,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content:hover .link:hover .label {
    opacity: 1
}

.page.lessons .tabs .tabs-mover .tabs-target .links.is-source-player .link.is-active+ul .dot .disc,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content.is-source-player .link.is-active+ul .dot .disc {
    transform: scale(1.5);
    background: #705df2
}

.page.lessons .tabs .tabs-mover .tabs-target .links .link,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link {
    position: relative;
    display: block;
    color: #fff;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 5px
}

.page.lessons .tabs .tabs-mover .tabs-target .links .link.is-done .dot .disc,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link.is-done .dot .disc {
    transform: scale(.0001)
}

.page.lessons .tabs .tabs-mover .tabs-target .links .link.is-done .dot .check,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link.is-done .dot .check {
    transform: scale(1)
}

.page.lessons .tabs .tabs-mover .tabs-target .links .link.is-active .dot .disc,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link.is-active .dot .disc {
    transform: scale(1.5);
    background: #705df2
}

.page.lessons .tabs .tabs-mover .tabs-target .links .link.is-default .path .line,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link.is-default .path .line {
    position: absolute;
    top: -4px;
    left: -1px;
    display: block;
    width: 2px;
    height: 8px;
    background: #555
}

.page.lessons .tabs .tabs-mover .tabs-target .links .link.is-parent .path .line,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link.is-parent .path .line {
    position: absolute;
    top: -4px;
    left: -1px;
    display: block;
    width: 11px;
    height: calc(1em + 4px);
    border-left: 2px solid #555;
    border-bottom: 2px solid #555;
    border-bottom-left-radius: 8px
}

.page.lessons .tabs .tabs-mover .tabs-target .links .link .label,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link .label {
    transition: opacity .15s
}

.page.lessons .tabs .tabs-mover .tabs-target .links .link .video-jump,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link .video-jump {
    margin-left: 4px;
    opacity: 0;
    transition: opacity .15s
}

.page.lessons .tabs .tabs-mover .tabs-target .links .link .dot,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link .dot {
    position: absolute;
    top: 50%;
    left: -20px;
    width: 0;
    height: 0
}

.page.lessons .tabs .tabs-mover .tabs-target .links .link .dot .disc,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link .dot .disc {
    display: block;
    position: absolute;
    top: -3px;
    left: -3px;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #555;
    transition: transform .15s
}

.page.lessons .tabs .tabs-mover .tabs-target .links .link .dot .check,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link .dot .check {
    display: block;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 9px;
    transition: transform .15s;
    transform: scale(.0001)
}

.page.lessons .tabs .tabs-mover .tabs-target .links .link .dot .check svg,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link .dot .check svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.page.lessons .tabs .tabs-mover .tabs-target .links .link .dot .check svg *,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link .dot .check svg * {
    fill: #32ffce
}

.page.lessons .tabs .tabs-mover .tabs-target .links .link .path,.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link .path {
    position: absolute;
    bottom: 0;
    left: -20px;
    width: 0;
    height: 0
}

.page.lessons .tabs .tabs-mover .tabs-target .join-message {
    margin-top: 1.5em
}

.page.lessons .tabs .tabs-mover .tabs-target .join-message .inner {
    padding: 20px 30px;
    background: #202020;
    border-radius: 15px
}

@media (max-width: 800px) {
    .page.lessons .tabs .tabs-mover .tabs-target .join-message .alternative.alternative.is-large {
        display:none
    }

    .page.lessons .tabs .tabs-mover .tabs-target .join-message .alternative.alternative.is-small {
        display: inline
    }
}

.page.lessons .tabs .tabs-mover .tabs-target .join-message .alternative.is-small {
    display: none
}

.page.lessons .tabs .tabs-mover .scroll-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.page.lessons .tabs .tabs-mover .scroll-mover {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 40px);
    height: 100%;
    padding: 25px 55px 25px 25px;
    overflow-y: scroll
}

.page.lessons .tabs .tabs-mover .shadow-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 220px;
    background: url(../images/bottom-shadow-gradient.png);
    opacity: 1;
    transition: opacity .3s;
    pointer-events: none
}

.page.lessons .main {
    display: flex;
    flex-direction: column;
    align-items: center
}

.page.lessons .main .content {
    margin-bottom: 2em
}

.page.lessons .main .content.width-1792 {
    max-width: 1800px
}

@media (max-width: 2150px) {
    .page.lessons .main .content.width-1792 {
        max-width:1352px
    }
}

.page.lessons .main .content.width-1536 {
    max-width: 1544px
}

@media (max-width: 1600px) {
    .page.lessons .main .content.width-1536 {
        max-width:1032px
    }
}

.page.lessons .main .content .text:not(.links) {
    margin-top: 4em;
    margin-bottom: 4em
}

.page.lessons .main .content .text:not(.links)>h2,.page.lessons .main .content .text:not(.links)>h3,.page.lessons .main .content .text:not(.links)>h4,.page.lessons .main .content .text:not(.links)>h5,.page.lessons .main .content .text:not(.links)>.h2,.page.lessons .main .content .text:not(.links)>.h3,.page.lessons .main .content .text:not(.links)>.h4,.page.lessons .main .content .text:not(.links)>.h5,.page.lessons .main .content .text:not(.links)>ul,.page.lessons .main .content .text:not(.links)>ol,.page.lessons .main .content .text:not(.links)>p:not(.is-image),.page.lessons .main .content .text:not(.links)>pre {
    margin-left: 280px;
    margin-right: 280px
}

@media (max-width: 2150px) {
    .page.lessons .main .content .text:not(.links)>h2,.page.lessons .main .content .text:not(.links)>h3,.page.lessons .main .content .text:not(.links)>h4,.page.lessons .main .content .text:not(.links)>h5,.page.lessons .main .content .text:not(.links)>.h2,.page.lessons .main .content .text:not(.links)>.h3,.page.lessons .main .content .text:not(.links)>.h4,.page.lessons .main .content .text:not(.links)>.h5,.page.lessons .main .content .text:not(.links)>ul,.page.lessons .main .content .text:not(.links)>ol,.page.lessons .main .content .text:not(.links)>p:not(.is-image),.page.lessons .main .content .text:not(.links)>pre {
        margin-left:200px;
        margin-right: 200px
    }
}

@media (max-width: 1600px) {
    .page.lessons .main .content .text:not(.links)>h2,.page.lessons .main .content .text:not(.links)>h3,.page.lessons .main .content .text:not(.links)>h4,.page.lessons .main .content .text:not(.links)>h5,.page.lessons .main .content .text:not(.links)>.h2,.page.lessons .main .content .text:not(.links)>.h3,.page.lessons .main .content .text:not(.links)>.h4,.page.lessons .main .content .text:not(.links)>.h5,.page.lessons .main .content .text:not(.links)>ul,.page.lessons .main .content .text:not(.links)>ol,.page.lessons .main .content .text:not(.links)>p:not(.is-image),.page.lessons .main .content .text:not(.links)>pre {
        margin-left:45px;
        margin-right: 45px
    }
}

@media (max-width: 1080px) {
    .page.lessons .main .content .text:not(.links)>h2,.page.lessons .main .content .text:not(.links)>h3,.page.lessons .main .content .text:not(.links)>h4,.page.lessons .main .content .text:not(.links)>h5,.page.lessons .main .content .text:not(.links)>.h2,.page.lessons .main .content .text:not(.links)>.h3,.page.lessons .main .content .text:not(.links)>.h4,.page.lessons .main .content .text:not(.links)>.h5,.page.lessons .main .content .text:not(.links)>ul,.page.lessons .main .content .text:not(.links)>ol,.page.lessons .main .content .text:not(.links)>p:not(.is-image),.page.lessons .main .content .text:not(.links)>pre {
        margin-left:10px;
        margin-right: 10px
    }
}

.page.lessons .main .details {
    display: flex;
    background: #705df2;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px
}

@media (max-width: 600px) {
    .page.lessons .main .details {
        display:block
    }
}

@media print {
    .page.lessons .main .details {
        display: block
    }
}

.page.lessons .main .details .side {
    flex-grow: 1;
    padding: 40px 45px
}

@media (max-width: 1300px) {
    .page.lessons .main .details .side {
        padding:35px 35px 30px
    }
}

@media (max-width: 1080px) {
    .page.lessons .main .details .side {
        width:auto;
        padding: 30px 25px
    }
}

@media (max-width: 800px) {
    .page.lessons .main .details .side {
        padding:25px 20px
    }
}

.page.lessons .main .details .informations {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center
}

@media (max-width: 600px) {
    .page.lessons .main .details .informations {
        width:auto
    }
}

@media print {
    .page.lessons .main .details .informations {
        width: auto;
        text-align: center
    }
}

.page.lessons .main .details .informations .current-lesson .label {
    margin-bottom: .25em;
    font-size: 1.2em;
    font-family: Greycliff,sans-serif;
    font-weight: 500;
    letter-spacing: -.05em
}

.page.lessons .main .details .informations .current-lesson .title {
    margin-bottom: .5em;
    font-size: 2rem;
    font-family: Greycliff,sans-serif;
    font-weight: 800;
    line-height: 1.25em
}

.page.lessons .main .details .informations .current-lesson .mandatory,.page.lessons .main .details .informations .current-lesson .difficulty {
    font-size: .9rem
}

.page.lessons .main .details .informations .current-lesson .difficulty .value {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 4px;
    border: 1px solid #fff;
    font-weight: 700
}

.page.lessons .main .details .informations .sibling {
    position: relative
}

.page.lessons .main .details .informations .sibling.is-previous {
    left: -10px
}

.page.lessons .main .details .informations .sibling.is-previous .arrow {
    transform: rotate(90deg)
}

.page.lessons .main .details .informations .sibling.is-previous .sibling-link .sibling-info {
    align-items: flex-start;
    left: 0;
    padding: 12px 20px 12px 40px
}

.page.lessons .main .details .informations .sibling.is-next {
    left: 10px
}

.page.lessons .main .details .informations .sibling.is-next .arrow {
    transform: rotate(-90deg)
}

.page.lessons .main .details .informations .sibling.is-next .sibling-link .sibling-info {
    align-items: flex-end;
    right: 0;
    padding: 12px 40px 12px 20px
}

.page.lessons .main .details .informations .sibling .sibling-link {
    display: block;
    position: relative;
    width: 40px;
    height: 40px
}

.page.lessons .main .details .informations .sibling .sibling-link:hover .sibling-info {
    opacity: 1;
    pointer-events: auto
}

.page.lessons .main .details .informations .sibling .sibling-link .sibling-info {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    background: #6251d6;
    border-radius: 12px;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none
}

.page.lessons .main .details .informations .sibling .sibling-link .sibling-info .sibling-title {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.2em;
    font-family: Greycliff,sans-serif;
    font-weight: 700;
    letter-spacing: -.05em;
    white-space: nowrap
}

.page.lessons .main .details .informations .sibling .arrow {
    display: block;
    position: absolute;
    top: calc(50% - 4px);
    left: calc(50% - 6px);
    right: 20px;
    width: 11px;
    height: 7px
}

.page.lessons .main .details .informations .sibling .arrow svg {
    display: block;
    width: 100%;
    height: 100%
}

.page.lessons .main .details .informations .sibling .arrow svg * {
    fill: #fff;
    opacity: 1
}

.page.lessons .main .details .aside {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    background: rgba(0,0,0,.133);
    padding-right: 10px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px
}

@media (max-width: 600px) {
    .page.lessons .main .details .aside {
        width:auto;
        border-top-left-radius: 0
    }
}

@media print {
    .page.lessons .main .details .aside {
        display: none
    }
}

.page.lessons .main .details .aside .title {
    margin-bottom: 1em
}

.page.lessons .main .details .aside .title .icon {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 19px
}

.page.lessons .main .details .aside .title .icon svg {
    display: block;
    width: 100%;
    height: 100%
}

.page.lessons .main .details .aside .title .icon svg * {
    fill: #fff
}

.page.lessons .main .details .aside .title>.label {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    font-size: 1.2em;
    font-family: Greycliff,sans-serif;
    font-weight: 700;
    letter-spacing: -.05em
}

.page.lessons .main .details .aside .aside-section:not(:last-child) {
    margin-bottom: 1.25em
}

.page.lessons .main .details .aside .files .info-button {
    margin-left: 1em
}

@media (max-width: 1080px) {
    .page.lessons .main .details .aside .files .button {
        margin-bottom:.25rem
    }
}

.page.lessons .main .details .aside .files .button .label {
    margin-left: 20px;
    margin-right: 20px
}

.page.lessons .main .details .aside .files .starter {
    background: #fff;
    color: #705df2
}

.page.lessons .main .details .aside .files .starter .label {
    opacity: 1
}

.page.lessons .main .details .aside .files .starter .hover {
    background: #705df2
}

.page.lessons .main .details .aside .files .final {
    color: #fff
}

.page.lessons .main .details .aside .files .final .label {
    opacity: 1
}

.page.lessons .main .details .aside .info-button {
    display: inline-block;
    padding-top: 6px;
    padding-bottom: 6px
}

.page.lessons .main .details .aside .info-button.is-link .label {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-position: under
}

.page.lessons .main .details .aside .info-button .icon {
    display: inline-block;
    vertical-align: middle;
    width: 17px;
    height: 17px
}

.page.lessons .main .details .aside .info-button .icon svg {
    display: block;
    width: 100%;
    height: 100%
}

.page.lessons .main .details .aside .info-button .icon svg * {
    fill: #fff
}

.page.lessons .main .details .aside .info-button .label {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px
}

.page.lessons .text .has-anchor {
    position: relative
}

.page.lessons .text .has-anchor:hover .anchor .link svg {
    opacity: .3
}

.page.lessons .text .has-anchor:hover .anchor .link:hover svg {
    opacity: 1
}

.page.lessons .text .anchor {
    position: absolute;
    top: 0;
    left: 0
}

@media (max-width: 1080px) {
    .page.lessons .text .anchor {
        position:static
    }
}

.page.lessons .text .anchor .target {
    position: absolute;
    top: -80px;
    left: 0
}

.page.lessons .text .anchor .link {
    position: absolute;
    top: 3px;
    right: 0;
    width: 50px;
    height: 1em;
    line-height: 1em;
    cursor: pointer;
    white-space: nowrap
}

@media (max-width: 1080px) {
    .page.lessons .text .anchor .link {
        position:relative;
        top: 0
    }
}

.page.lessons .text .anchor .link svg {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 4px;
    height: 100%;
    opacity: 0;
    transition: opacity .1s
}

@media (max-width: 1080px) {
    .page.lessons .text .anchor .link svg {
        position:static;
        vertical-align: middle
    }
}

.page.lessons .text .anchor .link .copied {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 100%;
    font-family: Roboto,sans-serif;
    font-weight: 400;
    font-size: 13px;
    opacity: 0;
    transition: opacity 1s
}

@media (max-width: 1080px) {
    .page.lessons .text .anchor .link .copied {
        position:static;
        vertical-align: middle
    }
}

.page.lessons .text .anchor .link .copied:after {
    content: "copied"
}

.page.lessons .text .anchor .link .copied.is-visible {
    opacity: 1;
    transition-duration: 0s
}

.page.lessons .text .is-fade-out {
    position: relative
}

.page.lessons .text .is-fade-out:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 120px;
    background-image: linear-gradient(rgba(26,26,26,0),#1a1a1a);
    pointer-events: none
}

.page.lessons .text .join-message {
    display: flex;
    justify-content: center;
    margin-top: 5em
}

.page.lessons .text .join-message .inner {
    width: 50%;
    padding: 40px 60px;
    background: #202020;
    border-radius: 15px;
    text-align: center
}

@media (max-width: 1080px) {
    .page.lessons .text .join-message .inner {
        width:60%
    }
}

@media (max-width: 800px) {
    .page.lessons .text .join-message .inner {
        width:75%
    }
}

@media (max-width: 600px) {
    .page.lessons .text .join-message .inner {
        width:auto
    }
}

.page.lessons .text .join-message .buttons {
    margin-top: 2em
}

.page.lessons .end {
    display: flex;
    position: relative;
    width: 100%;
    padding: 45px;
    background: #705df2;
    border-radius: 12px;
    justify-content: space-between
}

@media (max-width: 800px) {
    .page.lessons .end {
        padding:30px 35px
    }
}

@media (max-width: 600px) {
    .page.lessons .end {
        display:block;
        padding: 30px 25px
    }
}

@media (max-width: 400px) {
    .page.lessons .end {
        padding:25px 20px
    }
}

@media print {
    .page.lessons .end {
        display: none
    }
}

.page.lessons .end .left {
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

@media (max-width: 600px) {
    .page.lessons .end .left {
        margin-right:0;
        margin-bottom: 2rem
    }
}

.page.lessons .end .sur-title {
    margin-bottom: .25em;
    font-size: 1.2em;
    font-family: Greycliff,sans-serif;
    font-weight: 500;
    letter-spacing: -.05em
}

.page.lessons .end .title {
    font-size: 2rem;
    font-family: Greycliff,sans-serif;
    font-weight: 800;
    line-height: 1.25em
}

.page.lessons .end .button {
    height: 80px;
    margin-right: 0;
    background: #fff;
    color: #705df2
}

.page.lessons .end .button .label {
    text-align: left
}

.page.lessons .end .button .hover {
    background: #705df2
}

.page.lessons .end .button .icon {
    margin-left: 25px;
    margin-right: 25px
}

.page.lessons .end .button .icon .default svg {
    display: block
}

.page.lessons .end .button .icon .default svg * {
    fill: #705df2
}

.page.lessons .end .button .icon .disc {
    background: #705df2
}

.page.lessons .end .button .icon .disc .inner svg * {
    fill: #fff
}

.page.selection {
    padding-top: calc(var(--page-top-padding) + 100px)
}

@media (max-width: 1300px) {
    .page.selection {
        padding-top:calc(var(--page-top-padding) + 80px)
    }
}

@media (max-width: 1080px) {
    .page.selection {
        padding-top:calc(var(--page-top-padding) + 60px)
    }
}

@media (max-width: 800px) {
    .page.selection {
        padding-top:calc(var(--page-top-padding) + 40px)
    }
}

@media (max-width: 600px) {
    .page.selection {
        padding-top:calc(var(--page-top-padding) + 30px)
    }
}

@media (max-width: 400px) {
    .page.selection {
        padding-top:calc(var(--page-top-padding) + 20px)
    }
}

.page.selection p {
    font-size: 20px;
    color: #fffc
}

@media (max-width: 1300px) {
    .page.selection p {
        font-size:20px
    }
}

@media (max-width: 1080px) {
    .page.selection p {
        font-size:19px
    }
}

@media (max-width: 800px) {
    .page.selection p {
        font-size:18px
    }
}

@media (max-width: 600px) {
    .page.selection p {
        font-size:17px
    }
}

@media (max-width: 400px) {
    .page.selection p {
        font-size:16px
    }
}

.page.selection p a {
    color: #57fdf3
}

.page.selection .top {
    width: 840px;
    margin: 0 auto;
    text-align: center
}

@media (max-width: 1080px) {
    .page.selection .top {
        width:auto;
        padding-left: 25px;
        padding-right: 25px
    }
}

@media (max-width: 600px) {
    .page.selection .top {
        padding-left:15px;
        padding-right: 15px
    }
}

.page.selection .top .page-title {
    font-family: Greycliff,sans-serif;
    font-weight: 800
}

.page.selection .top .primary {
    font-size: 48px;
    margin-bottom: .25em
}

@media (max-width: 1300px) {
    .page.selection .top .primary {
        font-size:44px
    }
}

@media (max-width: 1080px) {
    .page.selection .top .primary {
        font-size:40px
    }
}

@media (max-width: 800px) {
    .page.selection .top .primary {
        font-size:36px
    }
}

@media (max-width: 600px) {
    .page.selection .top .primary {
        font-size:32px
    }
}

@media (max-width: 400px) {
    .page.selection .top .primary {
        font-size:28px
    }
}

.page.selection .top .secondary {
    font-size: 26px;
    color: #705df2;
    margin-bottom: 1.5em
}

@media (max-width: 1300px) {
    .page.selection .top .secondary {
        font-size:24px
    }
}

@media (max-width: 1080px) {
    .page.selection .top .secondary {
        font-size:22px
    }
}

@media (max-width: 800px) {
    .page.selection .top .secondary {
        font-size:20px
    }
}

@media (max-width: 600px) {
    .page.selection .top .secondary {
        font-size:18px
    }
}

@media (max-width: 400px) {
    .page.selection .top .secondary {
        font-size:18px
    }
}

.page.selection .top .main-description {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 3em
}

@media (max-width: 1300px) {
    .page.selection .top .main-description {
        font-size:24px
    }
}

@media (max-width: 1080px) {
    .page.selection .top .main-description {
        font-size:22px
    }
}

@media (max-width: 800px) {
    .page.selection .top .main-description {
        font-size:20px
    }
}

@media (max-width: 600px) {
    .page.selection .top .main-description {
        font-size:18px
    }
}

@media (max-width: 400px) {
    .page.selection .top .main-description {
        font-size:18px
    }
}

.page.selection .projects {
    margin-bottom: 100px
}

.page.selection .project {
    display: flex;
    align-items: center;
    width: 1056px;
    margin: 0 auto 50px
}

@media (max-width: 1080px) {
    .page.selection .project {
        flex-direction:column;
        width: auto;
        margin-left: 50px;
        margin-right: 50px
    }
}

@media (max-width: 1080px) {
    .page.selection .project {
        margin-left:25px;
        margin-right: 25px
    }
}

@media (max-width: 600px) {
    .page.selection .project {
        margin-left:15px;
        margin-right: 15px
    }
}

.page.selection .project.is-last {
    margin-bottom: 125px
}

@media not screen and (max-width: 1300px) {
    .page.selection .project.is-last {
        width:1272px
    }
}

@media not screen and (max-width: 1300px) {
    .page.selection .project.is-last .details {
        padding-top:80px;
        padding-right: 50px;
        padding-bottom: 80px
    }
}

.page.selection .project .visual {
    position: relative;
    width: calc(690 / 1056 * 100%);
    background: #140b29;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: #ff77f133 0 0 80px;
    flex-shrink: 0;
    z-index: 1
}

@media (max-width: 1080px) {
    .page.selection .project .visual {
        width:100%
    }
}

.page.selection .project .visual .ratio-holder {
    width: 100%;
    padding-top: 56.25%
}

.page.selection .project .visual iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.page.selection .project .details {
    position: relative;
    width: calc(366 / 1056 * 100%);
    flex-shrink: 0;
    padding: 50px 35px 50px 50px
}

@media (max-width: 1080px) {
    .page.selection .project .details {
        width:calc(100% - 50px)
    }
}

@media (max-width: 800px) {
    .page.selection .project .details {
        padding:25px 35px
    }
}

@media (max-width: 600px) {
    .page.selection .project .details {
        width:calc(100% - 25px);
        padding: 20px
    }
}

.page.selection .project .details>* {
    position: relative
}

.page.selection .project .details .background {
    position: absolute;
    inset: 0 0 0 -50px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.2);
    background: radial-gradient(335.46% 124.73% at 101.61% -14.1%,rgba(255,119,241,.2) 0%,rgba(20,11,41,.2) 100%),#140b29
}

@media (max-width: 1080px) {
    .page.selection .project .details .background {
        left:0;
        border-radius: 0 0 14px 14px;
        border-top: none
    }
}

.page.selection .project .details .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5em;
    color: #57fdf3;
    font-family: Greycliff,sans-serif;
    font-weight: 800
}

.page.selection .project .details .info .social-links {
    display: flex
}

.page.selection .project .details .info .social-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px
}

.page.selection .project .details .info .social-links .icon {
    width: 14px;
    height: 14px
}

.page.selection .project .details .info .social-links .icon.is-twitter {
    width: 17px
}

.page.selection .project .details .info .social-links .icon svg {
    display: block;
    width: 100%;
    height: 100%
}

.page.selection .project .details .info .social-links .icon svg * {
    fill: #57fdf3
}

.page.selection .project .details .title {
    margin-bottom: .75em;
    font-size: 26px;
    font-family: Greycliff,sans-serif;
    font-weight: 800
}

@media (max-width: 1300px) {
    .page.selection .project .details .title {
        font-size:24px
    }
}

@media (max-width: 1080px) {
    .page.selection .project .details .title {
        font-size:22px
    }
}

@media (max-width: 800px) {
    .page.selection .project .details .title {
        font-size:20px
    }
}

@media (max-width: 600px) {
    .page.selection .project .details .title {
        font-size:18px
    }
}

@media (max-width: 400px) {
    .page.selection .project .details .title {
        font-size:18px
    }
}

.page.selection .project .details .author {
    margin-bottom: .75em;
    color: #ff77f1;
    font-family: Greycliff,sans-serif;
    font-size: 26px;
    font-weight: 500
}

@media (max-width: 1300px) {
    .page.selection .project .details .author {
        font-size:24px
    }
}

@media (max-width: 1080px) {
    .page.selection .project .details .author {
        font-size:22px
    }
}

@media (max-width: 800px) {
    .page.selection .project .details .author {
        font-size:20px
    }
}

@media (max-width: 600px) {
    .page.selection .project .details .author {
        font-size:18px
    }
}

@media (max-width: 400px) {
    .page.selection .project .details .author {
        font-size:18px
    }
}

.page.selection .project .details .links {
    margin-bottom: 2em;
    display: flex;
    flex-direction: column
}

.page.selection .project .details .links ul {
    list-style: circle;
    padding-left: 20px
}

.page.selection .project .details .links a {
    opacity: .8;
    margin-bottom: .5em;
    text-decoration: none
}

.page.selection .project .details .links a:hover {
    text-decoration: underline
}

.page.selection .project .details .project-link {
    display: flex;
    padding: 5px 0;
    font-family: Greycliff,sans-serif;
    font-weight: 700
}

.page.selection .project .details .project-link:hover {
    text-decoration: underline
}

.page.selection .project .details .project-link .arrow {
    position: relative;
    top: 1px;
    margin-left: 2px;
    transform: rotate(-90deg)
}

.page.selection .project .details .project-link .arrow svg * {
    fill: #fff;
    opacity: 1
}

.page.selection .pagination {
    display: flex;
    justify-content: center;
    padding: 0 25px;
    font-size: 20px;
    margin-bottom: 4em
}

@media (max-width: 1300px) {
    .page.selection .pagination {
        font-size:20px
    }
}

@media (max-width: 1080px) {
    .page.selection .pagination {
        font-size:19px
    }
}

@media (max-width: 800px) {
    .page.selection .pagination {
        font-size:18px
    }
}

@media (max-width: 600px) {
    .page.selection .pagination {
        font-size:17px
    }
}

@media (max-width: 400px) {
    .page.selection .pagination {
        font-size:16px
    }
}

.page.selection .pagination .page {
    position: relative;
    display: block;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    margin: 0 4px;
    font-family: Greycliff,sans-serif;
    font-weight: 500
}

@media (max-width: 800px) {
    .page.selection .pagination .page {
        width:50px;
        height: 50px
    }
}

@media (max-width: 600px) {
    .page.selection .pagination .page {
        width:40px;
        height: 40px
    }
}

.page.selection .pagination .page:hover .inner.is-hover {
    opacity: 1
}

.page.selection .pagination .page.is-active .inner {
    background: #705df2;
    border: none;
    color: #140b29
}

.page.selection .pagination .page.is-active .inner.is-hover {
    border: none;
    background: #fff;
    color: #140b29
}

.page.selection .pagination .page .inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #705df2;
    border-radius: 50%;
    color: #705df2
}

.page.selection .pagination .page .inner.is-hover {
    border-color: #fff;
    color: #fff;
    opacity: 0;
    transition: opacity .15s
}

.page.selection .instructions {
    display: flex;
    width: 1272px;
    flex-shrink: 0;
    margin: 0 auto 125px
}

@media (max-width: 1300px) {
    .page.selection .instructions {
        width:auto;
        padding-left: 125px;
        padding-right: 125px;
        flex-direction: column;
        margin-bottom: 50px
    }
}

@media (max-width: 800px) {
    .page.selection .instructions {
        padding-left:25px;
        padding-right: 25px
    }
}

@media (max-width: 600px) {
    .page.selection .instructions {
        padding-left:15px;
        padding-right: 15px;
        margin-bottom: 25px
    }
}

.page.selection .instructions .section-title {
    position: relative;
    width: 300px;
    margin-bottom: 1em;
    font-family: Greycliff,sans-serif;
    font-size: 48px;
    font-weight: 800
}

@media (max-width: 1300px) {
    .page.selection .instructions .section-title {
        font-size:44px
    }
}

@media (max-width: 1080px) {
    .page.selection .instructions .section-title {
        font-size:40px
    }
}

@media (max-width: 800px) {
    .page.selection .instructions .section-title {
        font-size:36px
    }
}

@media (max-width: 600px) {
    .page.selection .instructions .section-title {
        font-size:32px
    }
}

@media (max-width: 400px) {
    .page.selection .instructions .section-title {
        font-size:28px
    }
}

@media (max-width: 1300px) {
    .page.selection .instructions .section-title {
        width:auto;
        text-align: center
    }
}

.page.selection .instructions .section-title .emote {
    position: absolute;
    bottom: calc(100% - 10px);
    left: 35px
}

@media (max-width: 1300px) {
    .page.selection .instructions .section-title .emote {
        left:calc(50% - 45px);
        bottom: 100%
    }
}

.page.selection .instructions .section-title .emote:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(180deg,rgba(20,11,41,0) 0%,#140b29 100%)
}

.page.selection .instructions .section-title .emote img {
    display: block
}

.page.selection .instructions .description {
    position: relative;
    width: 948px;
    flex-shrink: 0
}

@media (max-width: 1300px) {
    .page.selection .instructions .description {
        width:auto
    }
}

.page.studentsWorks {
    padding-top: calc(var(--page-top-padding) + 100px);
    font-size: 20px
}

@media (max-width: 1600px) {
    .page.studentsWorks {
        font-size:18px
    }
}

@media (max-width: 1300px) {
    .page.studentsWorks {
        font-size:16px
    }
}

@media (max-width: 1080px) {
    .page.studentsWorks {
        font-size:15px
    }
}

@media (max-width: 800px) {
    .page.studentsWorks {
        font-size:15px
    }
}

@media (max-width: 600px) {
    .page.studentsWorks {
        font-size:14px
    }
}

@media (max-width: 400px) {
    .page.studentsWorks {
        font-size:13px
    }
}

.page.studentsWorks .main-logo {
    position: absolute;
    top: 55px;
    left: 85px;
    z-index: 2
}

@media (max-width: 1600px) {
    .page.studentsWorks .main-logo {
        top:45px;
        left: 70px
    }
}

@media (max-width: 1300px) {
    .page.studentsWorks .main-logo {
        top:35px;
        left: 55px
    }
}

@media (max-width: 1080px) {
    .page.studentsWorks .main-logo {
        top:25px;
        left: 40px
    }
}

@media (max-width: 800px) {
    .page.studentsWorks .main-logo {
        top:20px;
        left: 30px
    }
}

@media (max-width: 600px) {
    .page.studentsWorks .main-logo {
        top:20px;
        left: 20px
    }
}

@media (max-width: 400px) {
    .page.studentsWorks .main-logo {
        top:20px;
        left: 20px
    }
}

.page.studentsWorks .section-title {
    font-family: Greycliff;
    font-weight: 800;
    font-size: 48px;
    letter-spacing: -.02em;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    text-align: center
}

@media (max-width: 1600px) {
    .page.studentsWorks .section-title {
        font-size:44px
    }
}

@media (max-width: 1300px) {
    .page.studentsWorks .section-title {
        font-size:40px
    }
}

@media (max-width: 1080px) {
    .page.studentsWorks .section-title {
        margin-left:auto;
        margin-right: auto;
        font-size: 36px
    }
}

@media (max-width: 800px) {
    .page.studentsWorks .section-title {
        font-size:32px
    }
}

@media (max-width: 600px) {
    .page.studentsWorks .section-title {
        margin-left:20px;
        margin-right: 20px;
        font-size: 28px
    }
}

@media (max-width: 400px) {
    .page.studentsWorks .section-title {
        font-size:24px
    }
}

.page.studentsWorks .section-title strong {
    color: #705df2;
    font-weight: 800
}

.page.studentsWorks .section-description {
    font-size: 22px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    text-align: center
}

.page.studentsWorks .section-description strong {
    color: #705df2;
    font-weight: 800
}

.page.studentsWorks .button.is-more {
    height: 66px;
    border-radius: 33px;
    box-shadow: 0 14px 55px #3c00bd26;
    -webkit-mask-image: none
}

.page.studentsWorks .button.is-more .hover {
    opacity: .035
}

.page.studentsWorks .button.is-more .label {
    margin-right: 35px;
    margin-left: 35px;
    font-size: 20px
}

@media (max-width: 1600px) {
    .page.studentsWorks .button.is-more .label {
        font-size:18px
    }
}

@media (max-width: 1300px) {
    .page.studentsWorks .button.is-more .label {
        font-size:16px
    }
}

@media (max-width: 1080px) {
    .page.studentsWorks .button.is-more .label {
        font-size:15px
    }
}

@media (max-width: 800px) {
    .page.studentsWorks .button.is-more .label {
        font-size:15px
    }
}

@media (max-width: 600px) {
    .page.studentsWorks .button.is-more .label {
        font-size:14px
    }
}

@media (max-width: 400px) {
    .page.studentsWorks .button.is-more .label {
        font-size:13px
    }
}

.page.studentsWorks .suggest {
    position: relative;
    height: 72px;
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6vh
}

@media (orientation: portrait) {
    .page.studentsWorks .suggest {
        margin-bottom:4vw
    }
}

@media (max-width: 800px) {
    .page.studentsWorks .suggest {
        width:auto;
        margin-left: 20px;
        margin-right: 20px
    }
}

.page.studentsWorks .suggest.is-success .background {
    opacity: .08;
    background: #705df2;
    transition-delay: .3s,.3s,.1s
}

.page.studentsWorks .suggest.is-success .inputs {
    opacity: 0;
    transition-delay: 0s
}

.page.studentsWorks .suggest.is-success .success .label .label-inner {
    transform: translate(0);
    transition-delay: .8s
}

.page.studentsWorks .suggest.is-done .success .icon .disc {
    transform: scale(1)
}

@media (max-width: 600px) {
    .page.studentsWorks .suggest .non-important {
        display:none
    }
}

.page.studentsWorks .suggest .background {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fefeff;
    border-radius: 36px;
    box-shadow: 0 24px 74px #3c00bd18;
    opacity: 1;
    transition: background .5s ease-in-out,width .5s ease-in-out,opacity .5s ease-in-out;
    transition-delay: .5s,.5s,.7s;
    will-change: opacity
}

.page.studentsWorks .suggest .inputs {
    width: 100%;
    height: 72px;
    transition: opacity .5s ease-out;
    transition-delay: .8s;
    will-change: opacity
}

.page.studentsWorks .suggest .inputs .input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 144px);
    height: 72px;
    padding-left: 25px;
    line-height: 72px;
    border-top-left-radius: 36px;
    border-bottom-left-radius: 36px;
    font-size: 18px;
    color: #202020
}

@media (max-width: 1300px) {
    .page.studentsWorks .suggest .inputs .input {
        font-size:16px
    }
}

@media (max-width: 1080px) {
    .page.studentsWorks .suggest .inputs .input {
        font-size:15px
    }
}

@media (max-width: 800px) {
    .page.studentsWorks .suggest .inputs .input {
        font-size:15px
    }
}

@media (max-width: 600px) {
    .page.studentsWorks .suggest .inputs .input {
        font-size:14px
    }
}

@media (max-width: 400px) {
    .page.studentsWorks .suggest .inputs .input {
        font-size:13px
    }
}

.page.studentsWorks .suggest .inputs .input::placeholder {
    color: #c8c5dd
}

.page.studentsWorks .suggest .inputs .input:-webkit-autofill,.page.studentsWorks .suggest .inputs .input:-webkit-autofill:hover,.page.studentsWorks .suggest .inputs .input:-webkit-autofill:focus {
    -webkit-text-fill-color: #000;
    box-shadow: 0 0 0 100px #fefeff inset;
    transition: background-color 5000s ease-in-out 0s
}

.page.studentsWorks .suggest .inputs .submit {
    display: block;
    position: absolute;
    top: 3px;
    right: 3px;
    width: 180px;
    height: calc(100% - 6px);
    border-radius: 33px;
    margin: 0;
    box-shadow: 0 14px 55px #3c00bd26;
    -webkit-mask-image: none
}

@media (max-width: 600px) {
    .page.studentsWorks .suggest .inputs .submit {
        width:130px
    }
}

.page.studentsWorks .suggest .success {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    line-height: 72px;
    pointer-events: none
}

.page.studentsWorks .suggest .success * {
    pointer-events: none
}

.page.studentsWorks .suggest .success .icon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 26px;
    height: 26px;
    margin-left: 22px;
    margin-right: 10px
}

.page.studentsWorks .suggest .success .icon .disc {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #705df2;
    border-radius: 50%;
    transform: scale(0);
    transition: transform .2s ease-in;
    will-change: transform
}

.page.studentsWorks .suggest .success .icon .disc .inner {
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 6px);
    width: 12px;
    height: 10px
}

.page.studentsWorks .suggest .success .icon .disc .inner svg {
    display: block;
    width: 100%;
    height: 100%
}

.page.studentsWorks .suggest .success .icon .disc .inner svg * {
    fill: #fff
}

.page.studentsWorks .suggest .success .label {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden
}

.page.studentsWorks .suggest .success .label .label-inner {
    display: inline-block;
    position: relative;
    transform: translate(-100%);
    transition: transform .5s cubic-bezier(0,0,.25,1);
    transition-delay: 0s
}

.page.studentsWorks .suggest .error {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    pointer-events: none;
    color: #fe6754;
    overflow: hidden
}

.page.studentsWorks .suggest .error.has-error .error-inner {
    transform: translate(0);
    transition-timing-function: cubic-bezier(0,0,.25,1)
}

.page.studentsWorks .suggest .error .error-inner {
    display: inline-block;
    position: relative;
    transform: translate(-100%);
    transition: transform .5s cubic-bezier(.75,0,1,1)
}

.page.studentsWorks .tweets {
    margin-bottom: 120px
}

.page.studentsWorks .tweets .columns {
    display: flex;
    justify-content: center;
    width: 1560px;
    margin-right: auto;
    margin-left: auto
}

@media (max-width: 1600px) {
    .page.studentsWorks .tweets .columns {
        width:auto;
        margin-right: 20px;
        margin-left: 20px
    }
}

.page.studentsWorks .tweets .column {
    flex: 1;
    max-width: 550px
}

@media (max-width: 1300px) {
    .page.studentsWorks .tweets .column:nth-child(3) {
        display:none
    }
}

@media (max-width: 800px) {
    .page.studentsWorks .tweets .column:nth-child(2) {
        display:none
    }
}

.page.studentsWorks .tweets .column .tweet {
    visibility: visible
}

.page.studentsWorks .tweets .tweet {
    visibility: hidden
}

.page.studentsWorks .tweets .more {
    display: flex;
    justify-content: center;
    margin-top: 30px
}

.page.studentsWorks .tweets .more .button {
    margin-right: 0
}

.page.twitterContests {
    padding-top: calc(var(--page-top-padding) + 100px);
    font-size: 20px
}

@media (max-width: 1600px) {
    .page.twitterContests {
        font-size:18px
    }
}

@media (max-width: 1300px) {
    .page.twitterContests {
        font-size:16px
    }
}

@media (max-width: 1080px) {
    .page.twitterContests {
        font-size:15px
    }
}

@media (max-width: 800px) {
    .page.twitterContests {
        font-size:15px
    }
}

@media (max-width: 600px) {
    .page.twitterContests {
        font-size:14px
    }
}

@media (max-width: 400px) {
    .page.twitterContests {
        font-size:13px
    }
}

.page.twitterContests .section-title {
    font-family: Greycliff;
    font-weight: 800;
    font-size: 48px;
    letter-spacing: -.02em;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
    text-align: center
}

@media (max-width: 1600px) {
    .page.twitterContests .section-title {
        font-size:44px
    }
}

@media (max-width: 1300px) {
    .page.twitterContests .section-title {
        font-size:40px
    }
}

@media (max-width: 1080px) {
    .page.twitterContests .section-title {
        margin-left:auto;
        margin-right: auto;
        font-size: 36px
    }
}

@media (max-width: 800px) {
    .page.twitterContests .section-title {
        font-size:32px
    }
}

@media (max-width: 600px) {
    .page.twitterContests .section-title {
        margin-left:20px;
        margin-right: 20px;
        font-size: 28px
    }
}

@media (max-width: 400px) {
    .page.twitterContests .section-title {
        font-size:24px
    }
}

.page.twitterContests .section-title strong {
    color: #705df2;
    font-weight: 800
}

.page.twitterContests .winners {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3rem
}

.page.twitterContests .winner {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    border: 2px solid rgba(0,0,0,.05);
    border-radius: 10px;
    padding: 10px 15px
}

.page.twitterContests .winner .user-picture-container {
    display: inline-block;
    vertical-align: top;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    overflow: hidden;
    background: #dfdae4
}

.page.twitterContests .winner .user-picture {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden
}

.page.twitterContests .winner .user-information {
    display: inline-flex;
    vertical-align: top;
    width: calc(100% - 68px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 10px;
    line-height: 22px;
    font-size: 16px
}

@media (max-width: 1600px) {
    .page.twitterContests .winner .user-information {
        line-height:21px;
        font-size: 15px
    }
}

@media (max-width: 1300px) {
    .page.twitterContests .winner .user-information {
        line-height:20px;
        font-size: 14px
    }
}

@media (max-width: 1080px) {
    .page.twitterContests .winner .user-information {
        line-height:19px;
        font-size: 13px
    }
}

@media (max-width: 800px) {
    .page.twitterContests .winner .user-information {
        line-height:18px;
        font-size: 12px
    }
}

.page.twitterContests .winner .user-information .name {
    font-weight: 700;
    color: #434246
}

.page.twitterContests .winner .user-information .screen-name {
    color: #705df2
}

.page.twitterContests .winner .user-information .date {
    font-size: 14px;
    opacity: .5
}

@media (max-width: 1080px) {
    .page.twitterContests .winner .user-information .date {
        font-size:13px
    }
}

@media (max-width: 800px) {
    .page.twitterContests .winner .user-information .date {
        display:block;
        font-size: 12px
    }
}

.page.twitterContests .winner .user-information .date:hover {
    text-decoration: underline
}