*,
:before,
:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
}

.page {
    margin: 0;
    font-family: 'Lato', sans-serif;
    color: #0d319c;
    background-color: #7dbfff;
    font-size: 22px;
    font-weight: 400;
}

.main {
    position: relative;
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    background-color: #6ab4fc;
    overflow: hidden;
    height: 768px;
    opacity: 1;
    transition: opacity 5s;
}

.main.hidden {
    opacity: 0;
}
.main__wrapper {
    position: relative;
    height: 2304px;
    background-image: url(../images/iceberg-fully.png);
    background-size: cover;
    transition: transform 0.6s cubic-bezier(0.11, 0.41, 0.56, 0.99);
    touch-action: none;
    user-drag: none;
    user-select: none;
}

.main__wrapper[data-page="1"] {
    transform: translateY(-768px);
}

.main__wrapper[data-page="2"] {
    transform: translateY(-1536px);
}

.section {
    /*height: 100vh;*/
    position: relative;
    width: 1024px;
    height: 768px;
    margin-left: auto;
    margin-right: auto;
}

.headline,
.textline {
    position: absolute;
}

.headline {
    font-size: 50px;
    font-weight: 400;
}

.textline {
    font-size: 20px;
}

.headline--1 {
    left: 72px;
    top: 120px;
}

.headline--2 {
    position: static;
    color: white;
    padding-top: 250px;
    text-align: center;
}

.textline--1 {
    left: 625px;
    top: 282px;
}

.textline--2 {
    left: 223px;
    top: 402px;
}

.textline--3 {
    left: 761px;
    top: 493px;
}

.textline--4 {
    left: 358px;
    top: 512px;
}

.radio-circle {
    background-image: url(../images/radio-circle.svg);
    background-size: cover;
    position: absolute;
}

.radio-circle--1 {
    left: 562px;
    top: 264px;
    width: 53px;
    height: 53px;
}

.radio-circle--2 {
    left: 274px;
    top: 427px;
    width: 28px;
    height: 28px;
}

.radio-circle--3 {
    left: 823px;
    top: 517px;
    width: 17px;
    height: 17px;
}

.radio-circle--4 {
    left: 478px;
    top: 538px;
    width: 17px;
    height: 17px;
}

.ice {
    position: absolute;
}

.ice:before {
    content: '';
    background-image: url(../images/ice-piece.png);
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.ice--1 {
    left: 82px;
    top: 160px;
    width: 82px;
    height: 77px;
    transform: rotate(-45deg);
}

.ice--2:before,
.ice--1:before {
    transform: rotate(-45deg);
}

.ice--2 {
    width: 215px;
    height: 201px;
    left: 876px;
    top: 33px;
    filter: blur(2px);
}

.ice--3 {
    height: 94px;
    width: 101px;
    left: 231px;
    top: 443px;
}

.ice--4 {
    height: 70px;
    width: 75px;
    left: 712px;
    top: 584px;
    filter: blur(4px);
}

.section--3 {
    color: white;
}

.section--slided {
    display: flex;
    flex-wrap: nowrap;
    width: 2048px;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    transition: transform 0.5s cubic-bezier(0.19, 0.4, 0.6, 0.94);
}

.section--slided[data-slide="1"] {
    transform: translateX(-1024px);
}

.section--slided[data-slide="2"] {
    transform: translateX(-2048px);
}

.slide {
    flex: 0 0;
    min-width: 1024px;
    position: relative;
}

.arrows {
    position: absolute;
    background-size: cover;
}

.slide-1__arrows {
    background-image: url(../images/arrows/arrows-1-slide.svg);
    left: 315px;
    top: 336px;
    width: 403px;
    height: 159px;
}

.slide-2 .wrap-elem {
    font-size: 20px;
}

.slide-2__arrows {
    background-image: url(../images/arrows/arrows-2-slide.svg);
    top: 275px;
    width: 472px;
    height: 213px;
    left: 50%;
    transform: translateX(-50%);
}

.slide-3__arrows {
    background-image: url(../images/arrows/arrows-3-slide.svg);
    top: 236px;
    left: 288px;
    width: 508px;
    height: 322px;
}

.wrap-elem {
    font-weight: 300;
    font-size: 22px;
    position: absolute;
    text-align: center;
}

.wrap-elem__number {
    font-weight: 400;
    font-size: 36px;
}

.slide-1__wrap-elem-3 {
    top: 380px;
    left: 221px;
}

.slide-1__wrap-elem-2 {
    top: 380px;
    left: 725px;
}

.slide-1__wrap-elem-1 {
    top: 199px;
    left: 476px;
}

.slide-1__word-box {
    top: 445px;
    width: 245px;
    height: 90px;
}

.word-box {
    /*display: inline-block;*/
    font-size: 20px;
    /*padding: 55px;*/
    border: 1px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.circled-elem {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin-left: auto;
    margin-right: auto;
}

.slide-3 .circled-elem,
.slide-2 .circled-elem {
    width: 55px;
    height: 55px;
}

.circled-elem--letter-b {
    font-weight: 600;
    font-size: 55px;
    text-align: center;
}

.img-fluid {
    width: 70%;
    max-height: 70%;
}

.regular-headline {
    left: 83px;
    top: 112px;
    font-size: 30px;
    position: absolute;
}



.slide-2__word-box {
    top: 312px;
    width: 386px;
    height: 141px;
}



.slide-2__wrap-elem-1 {

    left: 50%;

    transform: translateX(-50%);

    bottom: 500px;
}

.slide-2__wrap-elem-2 {

    bottom: 500px;

    left: 167px;
}

.slide-2__wrap-elem-3 {
    bottom: 500px;
    left: 627px;
}

.slide-2__wrap-elem-4 {
    left: 751px;
    top: 45.5%;
}

.slide-2__wrap-elem-5 {

    top: 491px;

    left: 632px;
}

.slide-2__wrap-elem-6 {

    left: 50%;

    transform: translateX(-50%);

    top: 491px;
}

.slide-2__wrap-elem-7 {

    top: 491px;

    left: 305px;
}

.slide-2__wrap-elem-8 {

    right: 760px;
    top: 45.5%;
}


.wrap-elem--right {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    text-align: left;
}

.wrap-elem--right .wrap-elem__title {
    padding-left: 8px;
}

.wrap-elem--left .circled-elem,
.wrap-elem--right .circled-elem {

    align-self: center;
}

.wrap-elem--left {
    display: flex;
    flex-direction: row;
    text-align: right;
    align-items: flex-end;
}

.wrap-elem--left .wrap-elem__title {
    padding-right: 5px;
}

.wrap-elem--bottom {
    display: flex;
    flex-direction: column-reverse;
}

.rectangle-wrapper {
    border-radius: 45px;
    background-image: linear-gradient(5deg, rgba(0, 0, 0, 0) -17%, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.1) 56%);
}


.slider {
    width: 640px;
    height: 16px;
    position: absolute;
    bottom: 75px;
    left: 195px;
    z-index: 10000;
    /* transform: translateX(-50%); */
    background-color: #435063;
}

.slider__line {
    position: relative;
    height: 100%;
}

.slider__line--filled {
    height: 100%;
    width: 0;
    max-width: 100%;
    background-color: #d1eaff;
}

.slider__ice {
    position: absolute;
    left: 0;
    background-image: url(../images/ice-slider.svg);
    width: 43px;
    height: 53px;
    top: 50%;
    transform: translate(-50%, -50%);
    background-size: cover;
    touch-action: none;
    user-drag: none;
    user-select: none;
}

.slide-3 .wrap-elem {
    font-size: 20px;
}

.slide-3__wrap-elem-1 {
    left: 50%;
    transform: translateX(-50%);
    top: 180px;
}

.slide-3__wrap-elem-1 .circled-elem {
    width: 82px;
    height: 82px;
}

.slide-3__wrap-elem-1 .wrap-elem__text {
    font-size: 25px;
}

.slide-3__wrap-elem-1 .wrap-elem__title {
    position: absolute;
    right: 0;
    white-space: nowrap;
    bottom: 100%;
}

.slide-3__wrap-elem-1 .wrap-elem__number {
    font-weight: 400;
    font-size: 36px;
    margin-right: 15px;

}

.slide-3__wrap-elem-2 {
    top: 342px;
    left: 345px;
}

.slide-3__wrap-elem-3 {

    top: 342px;
    left: 518px;
}

.slide-3__rectangle-wrapper {
    top: 349px;
    left: 696px;
    display: inline-flex;
    flex-direction: column;
    position: absolute;
}

.rectangle-wrapper .wrap-elem {
    position: static;
}

.rectangle-wrapper .wrap-elem__title {
    flex-grow: 1;
}

.rectangle-wrapper .circled-elem {
    margin: 0 8px;
}

.rectangle-wrapper__headline {
    font-size: 14px;
    margin: 14px 0;
    text-align: center;
}

.rectangle-wrapper__elem-block {
    display: flex;
    flex-direction: column-reverse;
    padding-right: 9px;
}

.slide-3__wrap-elem-4 {}

.slide-3__wrap-elem-5 {}

.slide-3__wrap-elem-6 {}

.slide-3__wrap-elem-7 {

    top: 230px;

    left: 699px;
}

.slide-3__wrap-elem-8 {

    top: 229px;

    left: 130px;

    align-items: flex-start;
}

.slide-3__wrap-elem-9 {

    top: 327px;

    left: 50px;
}

.slide-3__wrap-elem-10 {

    top: 476px;

    left: 176px;
}

.slide-3__wrap-elem-11 {

    top: 557px;

    left: 425px;
}

.additional-text {
    position: absolute;
    font-size: 14px;
}

.slide-3__additional-text-1 {

    top: 496px;

    left: 425px;

    font-size: 25px;
}

.slide-3__additional-text-2 {

    top: 428px;

    left: 258px;
}

.slide-3__additional-text-3 {

    top: 437px;

    left: 523px;
}

.section-3__ice {
    opacity: .5;
}

.slide-1__ice--1 {

    width: 216px;

    height: 205px;

    left: 21px;

    top: 554px;

    filter: blur(3px);

    transform: rotate(-45deg);
}

.slide-1__ice--2 {


    width: 106px;

    height: 101px;

    left: 660px;

    top: 227px;

}

.slide-1__ice--3 {

    width: 38px;

    height: 37px;

    left: 911px;

    top: 112px;

    transform: rotate(-60deg);
}

.slide-2__ice--1 {

    width: 106px;

    height: 101px;

    left: calc(1024px + 45px);

    top: 238px;
}

.slide-2__ice--2 {

    width: 38px;

    height: 38px;

    left: calc(1024px + 473px);

    top: 93px;

    transform: rotate(-65deg);
}
.slide-2__ice--3 {

    width: 216px;

    height: 199px;

    left: calc(1024px + 776px);

    top: 570px;

    filter: blur(3px);

    transform: rotate(-45deg);
}
.slide-3__ice--1 {

    width: 38px;

    height: 38px;

    left: calc(2048px + 0px);

    top: 108px;

    transform: rotate(-60deg);
}
.slide-3__ice--2 {

    width: 193px;

    height: 203px;

    left: calc(2048px + 152px);

    top: 594px;

    filter: blur(3px);

    transform: rotate(-68deg);
}
.slide-3__ice--3 {

    width: 106px;

    height: 101px;

    left: calc(2048px + 936px);

    top: 211px;

    transform: rotate(25deg);
}

.slider__year {
    color: #fff;
    font-size: 21px;
    position: absolute;
    top: 40px;
}

.slider__year--1 {
    left: -16px;
}

.slider__year--2 {
    left: 50%;
    transform: translateX(-50%);
}

.slider__year--3 {
    right: -16px;
}

.pagination {
    width: 15px;
    height: 60px;
    position: absolute;
    right: 25px;
    top: 50%;
    /*top: 1152px;*/
    transform: translateY(-50%);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    list-style-type: none;
    justify-content: space-between;
}
.pagination__item {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    transition: background-color 1s;

}
.main__wrapper[data-page="0"]~.pagination .pagination__item--0,
.main__wrapper[data-page="1"]~.pagination  .pagination__item--1,
.main__wrapper[data-page="2"]~.pagination .pagination__item--2 {
    background-color: #f78b1f;
}
.scrolldown {
    display: none;
    position: absolute;
    text-align: center;
    color: white;
    width: 150%;
    bottom: 0;
    height: 107px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 15px;
    background-image: radial-gradient(ellipse at 50% 150px, #f78b1f 30%, transparent 44%, transparent);
    animation: opacity .7s cubic-bezier(0.06, 0.49, 0.72, 1.01);
}
.main__wrapper[data-page="0"] .scrolldown {
    display: block;
}

@keyframes opacity {
    from {opacity: 0;}
    60% {opacity: 0}
    80% {opacity: .3}
    to {opacity: 1;}
}

.scrolldown__text {
    margin-top: 37px;
    margin-bottom: 14px;
}