/* Fonts */
@font-face {
    font-family: 'CASlalom';
    src: url('../fonts/CASlalom-Bold.woff') format('woff'),
    url('../fonts/CASlalom-Bold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Light.woff') format('woff'),
    url('../fonts/Gilroy-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-ExtraBold.woff') format('woff'),
    url('../fonts/Gilroy-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body, .b-longread {
    height: 100%;
}

body {
    background-image: url("https://static.sobaka.ru/uploads/posts/152644/bg.jpg");
    background-repeat: repeat;
    background-size: cover;
    background-attachment:fixed;
}

/* Reset */
.b-longread * {
    margin: 0;
    padding: 0;
    font: inherit;
    box-sizing: border-box;
}

@media (max-width: 1920px) {
    .b-longread {
        font-size: calc(10vw / 1920 * 100);
    }
}

@media (max-width: 640px) {
    .b-longread {
        font-size: calc(10vw / 800 * 100);
    }
}

.b-longread__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 72px;
    margin-bottom: calc(15em / 10);
}

.b-longread__header-logo {
    width: calc(322em / 10);
    height: calc(245em / 10);
}

.b-longread__header-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.b-longread__header-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.b-longread__header-title {
    font-family: 'CASlalom', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: calc(40em / 10);
    line-height: calc(48em / 40);
    text-align: center;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #fff;
}

.b-longread__header-subtitle {
    font-family: 'CASlalom', sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: calc(72em / 10);
    line-height: calc(96em / 72);
    text-align: center;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px #00E5BC;
    text-stroke: 1px #00E5BC;
}

.b-longread-text {
    font-family: 'Gilroy', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: calc(25em / 10);
    line-height: calc(42em / 25);
    text-align: center;
    letter-spacing: 0.4px;
    color: #FFFFFF;
    max-width: calc(1188em / 20);
    margin: 0 auto calc(55em / 20);
}

.b-longread-text__quote {
    color: #00E6BC;
    font-weight: 800;
}

.b-longread-text__link {
    color: #00E6BC;
    font-weight: 800;
    text-decoration: underline;
}

.b-longread-text__link:hover {
    color: #FF65F9;
}

.b-longread-text strong {
    font-weight: 800;
}

.b-longread-text-bold {
    font-weight: 800;
    font-size: calc(32em / 10);
    line-height: calc(42em / 32);
    max-width: calc(1188em / 32);
}

.swiper-slide {
    display: flex;
    max-width: calc(376em / 10);
    height: calc(667em / 10);
    flex: 0 0 auto;
}

.b-longread-item:nth-child(2n) {
    margin-top: calc(50em / 10) ;
}

.b-longread-item-video {
    width: calc(400em / 10);
    height: calc(667em / 10);
    margin-top: calc(-40em / 10) !important;
}

.b-longread__slider_arrow {
    position: absolute;
    width: calc(54em / 10);
    height: calc(54em / 10);
    top: 40%;
    cursor: pointer;
    z-index: 1;
}

.b-longread__slider-prev {
    left: calc(44em / 10);
}

.b-longread__slider-next {
    right: calc(44em / 10);
    transform: rotate(180deg);
}

.b-longread__video {
    width: 100%;
    height: 100%;
}

.b-longread__video-iframe {
    width: 100%;
    height: 100%;
    border: none !important;
}

.b-longread__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.b-longread__info {
    color: #fff;
    margin-left: 50px;
    padding-bottom: 20px;
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
}

.b-longread__info a {
    text-decoration: underline;
}

.b-longread__btn-next {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Gilroy', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: calc(23em / 10);
    line-height: calc(28em / 23);
    letter-spacing: 0.4px;
    color: #FFFFFF;
    background-color: #00E6BC;
    border-radius: calc(15em / 23);
    max-width: calc(300em / 23);
    max-height: calc(62em /23);
    padding: calc(15em / 23) calc(40em /23);
    margin: 0 auto calc(15em / 23);
    cursor: pointer;
    transition: all .3s;
}

.b-longread__btn-next:hover {
    background-color: #FF65F9;
}

.b-longread__link-home {
    font-family: 'Gilroy', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: calc(23em / 10);
    line-height: calc(27em / 23);
    text-align: center;
    letter-spacing: 0.4px;
    text-decoration-line: underline;
    color: #FFFFFF;
    margin: 0 auto;
    padding-bottom: calc(100em /23);
    transition: all .3s;
}

.b-longread__link-home:hover {
    color: #ccc;
}

.block-hide {
    display: none;
}

.block-show {
    display: block;
    animation: fadeIn 1s ease;
}

.btn-disabled {
    cursor: auto;
    background-color: #3d3d3d;
    color: #ccc;
}

.btn-disabled:hover {
    cursor: auto;
    background-color: #3d3d3d;
    color: #ccc;
}

/* swiper */

.swiper-wrapper {
    margin: 0 auto calc(55em / 10);
}

.swiper-slide {
    display: flex;
    max-width: calc(400em / 10);
    height: calc(630em / 10);
    flex: 0 0 auto;
}

.swiper-slide+.swiper-slide {
    margin-left: calc(64em / 10);
}

.swiper-slide:nth-child(2n) {
    margin-top: calc(50em / 10) ;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (max-width: 640px) {
    body {
        background-image: url("https://static.sobaka.ru/uploads/posts/152644/bg_m.jpg");
    }

    .b-longread__header {
        flex-direction: column;
    }

    .b-longread__header-subtitle {
        font-size: calc(59em / 10);
        line-height: calc(96em / 59);
    }

    .b-longread-text {
        font-size: calc(30em / 10);
        line-height: calc(40em / 30);
        max-width: calc(691em / 30);
    }

    .b-longread-items {
        position: relative;
        height: calc(1817em / 10);
    }

    .b-longread-item {
        position: absolute;
    }

    .b-longread-item+.b-longread-item {
        margin: 0;
    }

    .b-longread-item:nth-child(1) {
        left: calc(49em / 10);
        top: calc(250em / 10);
        z-index: 3;
    }

    .b-longread-item:nth-child(2) {
        right: calc(49em / 10);
        top: calc(50em / 10);
        z-index: 4;
    }

    .b-longread-item:nth-child(3) {
        right: calc(49em / 10);
        top: calc(800em / 10);
        z-index: 2;
    }

    .b-longread-item:nth-child(4) {
        right: calc(49em / 10);
        top: calc(1150em / 10);
        z-index: 1;
    }

    .b-longread-item:hover {
        transform: scale(1.02);
    }

    .flex-center {
        height: calc(1450em / 10);
    }

    .b-longread__link-home {
        font-size: calc(35em / 10);
        line-height: calc(27em / 35);
        padding-bottom: calc(100em /35);
    }
}