:root {
    --font-family-sans-serif: Inter, sans-serif;
    --sub-font-family: Kazimir;
}

.size-s {

    max-width: 880px;
    margin: 0 auto;
}

#section-blockquote {
    background: transparent !important;
    background-color: transparent !important;
}

.container-inner {
    padding: 152px 0 160px 0;
}

.pp-section {
    background: #1C1C1C;
}

.pp-section[data-shade=dark] {
    background-color: #151515;
}

.logo-fixed {

    right: -webkit-calc(48px + var(--scrollbar-width));
    /** Safari 6, Chrome 19-25 **/
    right: -moz-calc(48px + var(--scrollbar-width));
    /** FF 4-15  **/
    right: calc(48px + var(--scrollbar-width));
    top: 48px;
}

.pp-section.pp-easing {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.overview .overview-top img {
    margin: 0 auto;
    display: block;
    bottom: 0;
    max-height: 100%;
    position: relative;
    bottom: -100px;
    opacity: 0;
    visibility: hidden;
    width: auto;
    pointer-events: none;
}

.overview-circle {
    position: absolute;
    background: #151515;
    z-index: -1;
    border-radius: 50%;
    left: 50%;
    transition: 0.9s;
    transform: translate(-50%, -40%);
    width: 768px;
    height: 768px;
    -webkit-transform: translate(-50%, -40%);
    -moz-transform: translate(-50%, -40%);
    -ms-transform: translate(-50%, -40%);
    -o-transform: translate(-50%, -40%);
    -webkit-transition: 0.9s;
    -moz-transition: 0.9s;
    -ms-transition: 0.9s;
    -o-transition: 0.9s;
}

#overview-section .overview-bottom {
    margin-top: auto;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}

#overview-section .footer {
    margin-bottom: 16px;
    padding-bottom: 0;

    font-family: var(--sub-font-family);
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 150%;

    text-align: center;
    text-transform: uppercase;
    font-feature-settings: 'salt'on;
}

#overview-section .footer>*,
#overview-section .footer>* a {
    height: auto;
    padding: 0;
    font-weight: 300;
    font-size: 16px;
    text-transform: uppercase;
    font-feature-settings: 'salt'on;
    color: #FFFFFF;
    margin: 0;
    line-height: 150%;
}

.footer .footer-left {
    text-align: left;

    padding: 0;
}

#overview-section .footer .text-red {
    color: var(--red);
}

.overview .overview-title .text-top {
    font-size: 36px;
    line-height: 133%;
    color: #DC2828;
}

.overview .overview-title .text-bottom {
    font-size: 96px;
    line-height: 100%;
    color: #FFFFFF;
    margin-bottom: 72px;
}

section#overview-section {
    background: #1C1C1C;
}
#overview-section .footer>* a:hover {
    color: var(--red);
    text-decoration: none;
}

.hr-transform {
    height: 80px;
    width: 1px;
    background: #404040;
    margin: 0 auto;
}

.numscroller {
    font-family: var(--sub-font-family);
    font-weight: 300;
    font-size: 300px;
    line-height: 93%;
    font-feature-settings: 'ss01'on;
    position: absolute;
    color: #838383;
    writing-mode: vertical-rl;
    white-space: nowrap;
    pointer-events: none;
}

.numscroller .numscroller-content {
    transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
}

.numscroller.numbscroller-left {

    left: 0;
}

.numscroller.numbscroller-right {

    right: -32px;
}

.numscroller.numbscroller-sm {
    font-size: 28px;
    line-height: 143%;
}

.numscroller.numbscroller-right.numbscroller-sm {

    right: 16vw;
}

.numscroller.numbscroller-border {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #838383;
    color: transparent;
}

.numscroller.numbscroller-md {
    font-size: 48px;
    line-height: 117%;
}

.numscroller.numbscroller-reverse span {
    transform: scaleY(-1);
    display: inline-block;
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
}

.numscroller.numbscroller-randomus span {
    height: 490px;
    white-space: nowrap;
}

.delimiter {
    text-align: center;
    position: relative;
    width: 100%;
    height: 1px;
    padding: 0;
    margin: 88px 0 48px 0;
}

.delimiter:before {
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    background: #404040;
    left: 0;
    top: 50%;
    margin-top: -1px
}

.delimiter .icon {
    background: #151515;
    position: relative;
    padding: 0 20px;
    width: 80px;
    top: -16px;
}

.footer .footer-center {
    text-align: center;
    max-width: 528px;
}

.footer {
    color: #737373;
    font-size: 16px;
    border-top: none;
    padding: 0 48px 64px 48px;
    line-height: 150%;
}

.footer>* {
    padding: 0;
    height: 64px;
    width: 100%;
}

@keyframes logoAnimation {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, 16px);
        -moz-transform: translate(0, 16px);
        -ms-transform: translate(0, 16px);
        -o-transform: translate(0, 16px);
        transform: translate(0, 16px);
        top: 0;
        visibility: hidden;
    }

    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        top: 48px;
        opacity: 1;
        visibility: visible;
    }
}

body {
    background-color: #1C1C1C;
}

.container-offset {
    max-width: 1056px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    position: relative
}

.hr-red {
    height: 2px;
    background: var(--red);
    margin: 40px 0
}

.hr-dark-light {
    height: 1px;
    background: var(--light);
    margin: 40px 0
}

.copyright {
    width: 100%;
    margin: auto 0 0;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -.01em;
    text-align: center;
    color: var(--white);
    position: relative;
}

p {
    letter-spacing: -.01em;
    text-align: left;
    margin: 16px 0;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
}

.blockquote-text {
    margin: 0;
    font-style: italic;
    font-weight: 300;
    font-size: 30px;
    line-height: 133%;
    font-feature-settings: 'salt'on;
    color: var(--white);
    font-family: var(--sub-font-family);
}

.blockquote-star {
    text-align: center;
    margin-bottom: 32px;
}

.pagetitle {
    color: var(--white);
    line-height: 106%
}

.h0,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.h7,
.h8,
h1,
h2,
h3,
h4,
h5,
h6 {
    text-align: left;
    margin: 0;
    letter-spacing: 0
}

h1 {
    font-style: normal;
    font-weight: 700;
    font-size: 60px;
    line-height: 107%;
    margin: 48px 0
}

.h0,
.pagetitle {
    font-style: normal;
    font-weight: 700
}

.h2,
h2 {
    font-style: normal;
    font-weight: 700;
    font-size: 42px;
    line-height: 114%;
    margin: 48px 0 48px 0;
}

.h3,
h3 {
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 123%;
    letter-spacing: -.01em;
    margin: 25px 0
}

.h4,
h4 {
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 133%;
    margin: 16px 0
}

.h5,
h5 {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    margin: 12px 0
}

.h6,
h6 {
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 133%;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 16px 0
}

.h7,
h7 {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 171%;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin: 12px 0
}

.h8,
h8 {
    font-style: normal;
    font-weight: 600;
    font-size: 11px;
    line-height: 145%;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 8px 0
}

.relation-text {
    font-family: var(--sub-font-family);
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    line-height: 117%;
    text-align: center;
    font-feature-settings: var(--sub-font-settings);
    color: var(--red)
}

.item-offset {
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 0;
    max-width: 528px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 767px) {
    .item-offset {
        margin-top: 32px;
        margin-bottom: 48px;
        max-width: 416px;
    }
}


#overview-section .overview-title .text-left,
#overview-section .overview-title .text-right,
.copyright,
.pagetitle {
    position: relative
}

.overview.animation .overview-top img {
    animation: slideUpBigFadeIn 1s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards;
    -webkit-animation: slideUpBigFadeIn 1s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards;
}

#overview-section.animation .overview-bottom .footer {
    -moz-animation: slideUpFadeIn 1s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.8s forwards;
    -webkit-animation: slideUpFadeIn 1s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.8s forwards;
    -o-animation: slideUpFadeIn 1s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.8s forwards;
    animation: slideUpFadeIn 1s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.8s forwards;
}

.overview-bottom {
    display: table;
}

#overview-section.animation .overview-title .text-right {
    -moz-animation: slideDownBigFadeIn 2s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards;
    -webkit-animation: slideDownBigFadeIn 2s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards;
    -o-animation: slideDownBigFadeIn 2s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards;
    animation: slideDownBigFadeIn 2s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards
}

#overview-section.animation .overview-title .text-left {
    -moz-animation: slideUpBigFadeIn 2s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards;
    -webkit-animation: slideUpBigFadeIn 1.5s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards;
    -o-animation: slideUpBigFadeIn 2s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards;
    animation: slideUpBigFadeIn 2s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards
}

#overview-section.animation .overview-star {
    -moz-animation: fadein 3.5s 1 cubic-bezier(.39, .58, .57, 1) 1.3s forwards;
    -webkit-animation: fadein 3.5s 1 cubic-bezier(.39, .58, .57, 1) 1.3s forwards;
    -o-animation: fadein 3.5s 1 cubic-bezier(.39, .58, .57, 1) 1.3s forwards;
    animation: fadein 3.5s 1 cubic-bezier(.39, .58, .57, 1) 1.3s forwards
}

#overview-section .overview-bottom .footer,
#overview-section .overview-star,
#overview-section .overview-title .text-left,
#overview-section .overview-title .text-right {
    opacity: 0
}

.overview .overview-title {
    width: 100%;
    margin-bottom: auto;
    position: relative;
    z-index: 1;
    font-family: var(--sub-font-family);
    font-style: normal;
    font-weight: 300;

    text-align: center;

    text-transform: uppercase;
    font-feature-settings: 'ss01'on;
}

.overview .overview-star {
    margin-top: 8px;
    margin-bottom: auto;
    width: 192px;
    height: 192px;
    z-index: 1;
    position: absolute;
    line-height: 192px;
}

.overview-star .overview-star_text {
    position: absolute;
    font-family: var(--sub-font-family);
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    text-align: center;
    text-transform: uppercase
}

.overview-star img {
    width: 100%;
    pointer-events: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.overview .overview-bottom {
    margin-top: auto;
    margin-bottom: 32px;
    width: 100%;
    position: relative
}

.overview .overview-bottom .overview-wheel {
    margin-left: auto;
    width: 100%;
    text-align: center;
}

.overview .overview-bottom .overview-author {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: var(--red);
    text-transform: uppercase;
    right: 0;
    margin-left: auto;
    flex-grow: 0;
}

.overview .overview-top {
    margin-top: 40px;

    height: -webkit-calc(100vh - 40px);
    /** Safari 6, Chrome 19-25 **/
    height: -moz-calc(100vh - 40px);
    /** FF 4-15  **/
    height: calc(100vh - 40px);
    position: absolute;
    width: 100%;
    left: 0;
}

.overview .overview-top .overview-poster {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 0;
    top: 0;
    z-index: 0;
    background: url(../img/template/paster-1.png);
    width: 635px;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain
}

.overview .overview-top .overview-poster img {
    width: 100%;
    display: block
}

.blockquote {
    color: var(--white);
    padding: 0 0 24px 0;
    position: relative;
    margin: 32px 0 28px 0;
    font-style: italic;
    font-weight: 300;
    font-size: 30px;
    line-height: 133%;
    text-align: center;
    font-feature-settings: 'salt'on;
    font-family: var(--sub-font-family);
}

.blockquote .icon-quote.quote-top {
    top: 0;
}

.blockquote .icon-quote.quote-down {
    bottom: 0;
}

a.item-source {
    text-decoration: none !important;
}

a.item-source[href]:hover {
    text-decoration: underline !important;
}

.blockquote .icon-quote {
    display: block;
    color: var(--red);
    position: absolute;
    background: url(../../assets/img/icon/sprite.svg#quote) center/contain no-repeat;
    background-size: 88px 57px;
    width: 88px;
    height: 58px;
    left: 50%;
    margin-left: -44px;
}

.blockquote .icon-quote.quote-down {
    -webkit-transform: scale(1, -1);
    -moz-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    transform: scale(1, -1);
}

.article-title {
    font-family: var(--sub-font-family);
    font-style: normal;
    font-weight: 300;
    font-size: 96px;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    font-feature-settings: 'ss01'on;
}

.article-title .article-num {
    content: "\2116 0"counter(section);
    color: var(--red);
    font-family: var(--sub-font-family);
    font-style: normal;
    font-weight: 300;
    font-size: 36px;
    line-height: 133%;
    text-align: center;
    text-transform: uppercase;
    font-feature-settings: 'salt'on;
}

.article {
    counter-reset: auto;
    counter-increment: section
}



.record-audio.active .record-text .audio-progress {
    cursor: pointer
}



@media screen and (max-width: 1023px) {
    .overview .overview-star {
        margin-right: auto;
        margin-top: -3px
    }

    .overview .overview-star {
        width: 128px;
        height: 128px;
        line-height: 128px
    }



    .overview-star .overview-star_text {
        font-size: 36px
    }

    .overview .overview-title {
        font-size: 112px;
        line-height: 128px;
        margin-bottom: 48px
    }

    .overview .overview-top {

        height: -webkit-calc(100vh - 140px);
        /** Safari 6, Chrome 19-25 **/
        height: -moz-calc(100vh - 140px);
        /** FF 4-15  **/
        height: calc(100vh - 140px);
        margin-top: 69px;
    }

    .overview .overview-top .overview-poster {
        width: 100%
    }

    .overview .overview-bottom .overview-wheel {
        margin-right: auto;
        margin-left: 0;
        width: 100%;
        text-align: left;
    }

    .blockquote {
        padding: 0 0 28px 0;
    }

    .blockquote .icon-quote {
        width: 72px;
        height: 47px;
        margin-left: -36px;
    }

    .size-s {
        padding: 0;
        max-width: 624px;
    }

    .container-offset {
        padding: 0 72px;
    }


    .article-title {
        margin: 48px 0 32px 0;
        font-size: 64px;
    }


}

@media screen and (max-width: 767px) {


    .blockquote .icon-quote {
        width: 40px;
        height: 25px;
        margin-left: -20px;
    }




    .overview .overview-title {
        font-size: 16vw;
        line-height: 117%;
        margin-top: auto;
        margin-bottom: 24px;
    }

    .overview .overview-star {
        width: 96px;
        height: 96px;
        margin-bottom: auto;
        line-height: 96px;
        bottom: 19px
    }

    .overview .overview-top .overview-poster {
        background-position: 19px bottom;
        background-size: auto 84%
    }

    .overview .overview-bottom {
        margin-bottom: 0;
        min-height: 40vh;
        display: flex;
        flex-wrap: wrap;
        align-content: stretch;
        /* height: 65vh; */
    }

    .blockquote {
        font-size: 24px;
        line-height: 133%;
        padding: 16px 0 16px 0;
        margin: 0 0 8px 0;
        font-size: 18px;
    }

    .blockquote-text {
        font-size: 18px;
        line-height: 133%;
    }

    .article-title {
        font-size: 24px;
        line-height: 133%;
        margin: 0 0 16px 0;
    }

    .container-offset {
        padding: 0 24px
    }

    .article-title,
    .article-title .article-num {
        line-height: 114%;
        font-size: 28px;
    }

    p {
        font-size: 16px;
        line-height: 150%
    }

    .item-offset {
        margin-top: 0
    }


}

.logo-fixed.animation {
    -moz-animation: logoAnimation 1s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.8s forwards;
    -webkit-animation: logoAnimation 1s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.8s forwards;
    -o-animation: logoAnimation 1s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.8s forwards;
    animation: logoAnimation 1s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.8s forwards;
}



@media screen and (-ms-high-contrast:active),
(-ms-high-contrast:none) {

    .logo-fixed .logo .logo-text,
    .logo-text_dark__fixed {
        opacity: 0;
        -webkit-transition: var(--transition-standart);
        -moz-transition: var(--transition-standart);
        -ms-transition: var(--transition-standart);
        -o-transition: var(--transition-standart);
        transition: var(--transition-standart)
    }

    .logo-fixed .logo .active {
        opacity: 1
    }
}

.overview-circle {
    width: 0;
    height: 0;
    transition-delay: 1.3s;
}

@keyframes circleStartAnimation {
    0% {
        width: 0;
        height: 0;
    }

    100% {
        width: 768px;
        height: 768px;
    }
}

@keyframes circleEndAnimation {
    0% {
        width: 768px;
        height: 768px;
        transform: translate(-50%, -308px);
        -webkit-transform: translate(-50%, -308px);
        -moz-transform: translate(-50%, -308px);
        -ms-transform: translate(-50%, -308px);
        -o-transform: translate(-50%, -308px);
    }

    100% {
        width: 250vw;
        height: 250vw;
        transform: translate(-50%, -100%);
        -webkit-transform: translate(-50%, -100%);
        -moz-transform: translate(-50%, -100%);
        -ms-transform: translate(-50%, -100%);
        -o-transform: translate(-50%, -100%);
    }
}

.animation .overview-circle {
    width: 75vh;
    height: 75vh;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), height 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1), min-width 1s cubic-bezier(0.4, 0, 0.2, 1), min-height 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);

    -webkit-transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), height 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1), min-width 1s cubic-bezier(0.4, 0, 0.2, 1), min-height 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), height 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1), min-width 1s cubic-bezier(0.4, 0, 0.2, 1), min-height 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), height 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1), min-width 1s cubic-bezier(0.4, 0, 0.2, 1), min-height 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), height 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1), min-width 1s cubic-bezier(0.4, 0, 0.2, 1), min-height 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 1.3s;
}

.loading-bg.complete-top {
    animation: fadeout var(--transition-loadingspeed) cubic-bezier(.55, .085, 0, .99) forwards;
    -webkit-animation: fadeout var(--transition-loadingspeed) cubic-bezier(.55, .085, 0, .99) forwards;
}

section#overview-section {
    overflow: hidden;
}

.overview .overview-bottom .heading {
    overflow: hidden;
    height: 108px;
    margin-bottom: -12px;
}

.overview .overview-bottom .heading span {

    top: -webkit-calc(100% + 20px);
    /** Safari 6, Chrome 19-25 **/
    top: -moz-calc(100% + 20px);
    /** FF 4-15  **/
    top: calc(100% + 20px);
    transition: top 1s;
    -webkit-transition: top 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: top 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: top 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: top 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    line-height: 136%;
    height: 96px;
    transition-delay: 1.8s;
    position: relative;
    opacity: 0;
}

.overview.animation .overview-bottom .heading span {
    top: 0;
    opacity: 1;
}

.overview .overview-bottom .heading-1 {
    height: 48px;
    margin-bottom: -16px;
}

.overview .overview-bottom .heading-1 span {

    transition-delay: 1.8s;

    height: auto;

    line-height: 133%;
}

.overview .overview-bottom .heading-2 span {
    transition-delay: 2s;
}

.overview .overview-bottom .heading-3 span {
    transition-delay: 2.1s;
}



.animation.animationScroll .overview-circle {
    width: 375vh;
    height: 375vh;
    transition: 2s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0s;
    max-width: 3500px;
    max-height: 3500px;
    margin-top: -50vh;
    -webkit-transition: 2s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: 2s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: 2s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-moving-up .overview-circle {

    transition-delay: 0s;
}


section#overview-section .background-hide {
    display: none;
}

#overview-section #preview {
    transform: translateY(0%);
    position: absolute;
    width: 100%;
    height: 100%;
    transition: var(--transition-pagepiling) cubic-bezier(0.4, 0, 0.2, 1), opacity 1.5s;
    opacity: 1;
    -webkit-transition: var(--transition-pagepiling) cubic-bezier(0.4, 0, 0.2, 1), opacity 1.5s;
    -moz-transition: var(--transition-pagepiling) cubic-bezier(0.4, 0, 0.2, 1), opacity 1.5s;
    -ms-transition: var(--transition-pagepiling) cubic-bezier(0.4, 0, 0.2, 1), opacity 1.5s;
    -o-transition: var(--transition-pagepiling) cubic-bezier(0.4, 0, 0.2, 1), opacity 1.5s;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
}

#overview-section.animationScroll #preview {
    transform: translateY(-100%);
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
}



.pp-section:not(.active):not(.vision-up):not(.vision-down):not(.hidden-slide) {
    animation: none;
}

.article-title .article-line,
.article-title .article-num {
    transform: translateX(-20%);
    display: block;
    transition: transform var(--transition-pagepiling) cubic-bezier(.55, .085, 0, .99);
    -webkit-transition: transform var(--transition-pagepiling) cubic-bezier(.55, .085, 0, .99);
    -moz-transition: transform var(--transition-pagepiling) cubic-bezier(.55, .085, 0, .99);
    -ms-transition: transform var(--transition-pagepiling) cubic-bezier(.55, .085, 0, .99);
    -o-transition: transform var(--transition-pagepiling) cubic-bezier(.55, .085, 0, .99);
    -webkit-transform: translateX(-20%);
    -moz-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    -o-transform: translateX(-20%);
    position: relative;
}

.article-title .article-line:nth-child(odd) {
    transform: translateX(20%);
    -webkit-transform: translateX(20%);
    -moz-transform: translateX(20%);
    -ms-transform: translateX(20%);
    -o-transform: translateX(20%);
}

.article-title .article-line.article-num {
    transform: translateX(10%);
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -ms-transform: translateX(10%);
    -o-transform: translateX(10%);
}

.slide-moving-scrolling .article-title .article-line,
.slide-moving-scrolling .article-title .article-num {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}

.footer {
    display: grid;
    justify-content: space-around;
    grid-auto-flow: column;
    grid-template-columns: 1fr auto 1fr;
}

@media screen and (max-width: 1023px) {


    .overview .overview-title .text-bottom {
        margin-bottom: 172px;
    }

    .overview .overview-title .text-bottom {
        font-size: 64px;
        line-height: 100%;
    }


    .overview .overview-bottom .heading {
        height: 76px;
    }

    .overview .overview-title {
        font-size: 36px;
    }

    .overview .overview-bottom .heading span {
        height: 48px;
    }

    .overview .overview-bottom .heading-1 {
        height: 48px;
        margin-bottom: -12px;
    }



    .animation .overview-circle {
        width: 61vh;
        height: 61vh;
    }

    .container-inner {
        padding: 120px 0 80px 0;
    }

    .delimiter {
        margin: 72px 0 48px 0;
    }

    .article .footer {
        text-align: center;
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        padding: 0 24px 64px 24px;
    }

    .article .footer .footer-left {
        text-align: center;
        height: auto;
        padding: 0;
        margin-bottom: 8px;
    }

    .article .footer .footer-center {
        max-width: 416px;
        margin: 0 auto;
        order: -1;
        height: auto;
        margin-bottom: 40px;
    }

    .article .footer .footer-right {
        text-align: center;
        padding: 0;
        height: auto;
    }

    .item-offset {
        margin-top: 32px;
        max-width: 416px;
    }
}


.slide-moving-up .overview-circle {
    transition: var(--transition-pagepiling);
}


@media screen and (max-width: 767px) {
.numbscroller-randomus {
    display: none!important;
}
    .numscroller {
        display: none;
    }

    .logo-fixed {
        right: 16px;
        top: 16px;
    }

    @keyframes logoAnimation {
        0% {
            opacity: 0;
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
            top: 0;
            visibility: hidden;
        }

        100% {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
            top: 16px;
            opacity: 1;
            visibility: visible;
        }
    }

    .overview .overview-title .text-bottom {
        font-size: 28px;
        line-height: 114%;
        margin-bottom: 9px;
    }

    .overview .overview-bottom .heading span {
        height: 32px;
    }

    .overview .overview-bottom .heading {
        height: 42px;
    }

    .overview .overview-bottom .heading-1 span {
        font-size: 16px;
    }

    .overview .overview-bottom .heading-1 {
        height: 24px;
        line-height: 0px;
        margin-bottom: -4px;
    }

    .overview-circle {
        min-width: 1px;
        min-height: 1px;
    }

    .animation .overview-circle {
        width: 61vh;
        height: 61vh;
        min-width: 346px;
        min-height: 346px;
    }

    .footer,
    #overview-section .footer {
        display: block;
        text-align: center;
        margin-bottom: 31px;
    }

    #overview-section .footer>*,
    #overview-section .footer>* a {
        text-align: center;
        margin: 0 auto;
        display: inline-block;
    }

    #overview-section .footer .footer-center {
        margin-bottom: 8px;
    }

    .overview .overview-top {

        height: -webkit-calc(100vh - 135px);
        /** Safari 6, Chrome 19-25 **/
        height: -moz-calc(100vh - 135px);
        /** FF 4-15  **/
        height: calc(100vh - 135px);
        margin-top: 72px;
    }

    .overview .overview-top img {
        width: 100%;
        object-fit: contain;
    }

    .blockquote-star svg {
        width: 24px;
        height: 24px;
    }

    .blockquote-star {
        margin-bottom: 16px;
    }

    .article-title .article-num {
        font-size: 16px;
        line-height: 150%;
    }

    .hr-transform {
        height: 40px;
    }

    .container-inner {
        padding: 80px 0 46px 0;
        display: table;
        width: 100%;
    }



    .delimiter {
        margin: 40px 0 8px 0;
    }



    .item-offset {
        margin-top: 16px;
        margin-bottom: 36px;
    }



    .article .footer {
        padding: 0 24px 5px 24px;
        margin-top: -6px;
    }

    .delimiter .icon {
        width: 64px;
        height: 24px;
    }

}

@keyframes slideUpBigFadeIn {
    0% {
        bottom: -100px;
        opacity: 0;
        visibility: hidden;
    }

    100% {
        bottom: 0;
        opacity: 1;
        visibility: visible;
    }

}

@media screen and (max-width: 1023px) {
    .numscroller[style*="right: 3.666vw"] {
        right: 6.3vw !important;
    }

    .numscroller[style*="right: 16vw"] {
        right: 7.3vw !important;
    }

    .numscroller[style*="left: 3.333vw"] {
        left: 3.3vw !important;
    }

    .numscroller[style*="right: 11.666vw"] {
        right: 5.3vw !important;
    }

    .numscroller[style*="left: 15.555vw"] {
        left: 7.3vw !important;
        bottom: 68%;
    }

    .numscroller.numbscroller-left {

        left: -32px;
    }

    .numscroller.numbscroller-right {
        right: -64px;
    }

    #numbscroller-7 {
        right: 5.333vw !important;
    }


    #numbscroller-8 {
        left: 4vw !important;
    }

    #numbscroller-10 {
        left: 8vw !important;
    }

    #numbscroller-11 {
        left: 4.333vw !important;
    }

    #numbscroller-12 {
        right: 0.333vw !important;
    }

    #numbscroller-13 {
        right: 4.333vw !important;
    }

    #numbscroller-15 {
        left: 6.66vw !important;
        margin-top: -500px;
    }

    #numbscroller-16 {
        right: 8.3vw !important;
    }

    #numbscroller-17 {
        margin-top: -130px;
    }

    #numbscroller-19-2 {
        left: 9.666vw !important;
    }

    #numbscroller-19 {
        margin-top: 200px;
        right: 8.333vw !important;
    }

    #numbscroller-23 {
        right: 6.6666vw !important;
        margin-top: 300px;
    }

    #numbscroller-24 {
        display: none;
    }

    #numbscroller-21 {
        right: 7vw !important;
        margin-top: 300px;
    }

    #numbscroller-22 {
        left: 4.8888vw !important;
    }

    #numbscroller-25 {
        left: 5.2vw !important;
    }

    #numbscroller-27 {
        right: 9.333vw !important;
        margin-top: 200px;
    }

    #numbscroller-28 {
        left: 8vw !important;
    }

    #numbscroller-29 {
        right: 4.5555vw !important;
        margin-top: 180px;
    }

    #numbscroller-30 {
        right: 5.333vw !important;
    }

    #numbscroller-31 {
        margin-top: -154px;
    }

    #numbscroller-32 {
        right: 8.33vw !important;
    }

    #numbscroller-33 {
        left: 6.444vw !important;
        margin-top: 100px;
    }

    #numbscroller-34 {
        right: 8vw !important;
        margin-top: 80px;
    }

    #numbscroller-35 {
        left: 6.333vw !important;
    }

    #numbscroller-36 {
        right: 6vw !important;
    }

    #numbscroller-38 {
        margin-top: 113px;
    }

    #numbscroller-37 {
        left: 3.666vw !important;
        margin-top: 240px;
    }

    #numbscroller-39 {
        left: 3.33vw !important;
        margin-top: 360px;
    }

    #numbscroller-40 {
        right: 1.333vw !important;
        margin-top: 160px;
    }

    #numbscroller-42 {
        left: 6.2vw !important;
        margin-top: -100px;
    }

    #numbscroller-41 {
        right: 7.666vw !important;
        margin-top: 200px;
    }

    #numbscroller-44 {
        right: 1.3vw !important;
        margin-top: 135px;
    }

    #numbscroller-45 {
        left: 7.3333vw !important;
    }

    #numbscroller-46 {
        right: 3.666vw !important;
        margin-top: 400px;
    }

    #section-blockquote .container-inner {
        padding: 60px 0;
    }


}
.numscroller-content-height {
    border: 20px;
    display: block;
    top: 50%;
    position: absolute;
    left: 0;
    height: 30%;
    right: 0;
    transform: translate(0, -50%);
}



.numbscroller-randomus {
    display: flex;
}