@media screen and (min-width: 1199px) {
    .hide-mobile {
        display: block;
    }

    .hide-desktop {
        display: none !important;
    }
}

@media screen and (max-width: 1199px) {
    .hide-mobile {
        display: none !important;
    }

    .hide-desktop {
        display: block;
    }

    img.interview-header__img {
        height: auto;
    }

    .slider__description,
    .slider__description1,
    .slider__description2,
    .custom-slider__description {
        font-size: 16px;
        line-height: 23px;
        letter-spacing: 0.4px;
        width: 100%;
    }

    .interview-wrapper .youtube-video {
        width: 640px;
        height: 357px;
    }
}

@media screen and (min-width: 640px) and (max-width: 767px) {
    .interview-wrapper .youtube-video {
        width: 600px;
        height: 334px;
    }
}

@media screen and (min-width: 480px) and (max-width: 639px) {
    .interview-wrapper .youtube-video {
        width: 460px;
        height: 256px;
    }
}

/* mobile phones - desktop @media */
@media screen and (min-width: 320px) and (max-width: 1199px) {
    .interview-header {
        height: auto;
        background-image: none !important;
    }

    .interview-container {
        margin: 25px 0;
    }

    /* buttons */
    .back-btn {
        width: 120px;
        height: 34px;
    }

    .back-small-btn {
        width: 85px;
        height: 34px;
        margin: 0 0 30px 0;
    }

    .prev-btn {
        width: 256px;
        height: 34px;
    }

    .next-btn {
        width: 251px;
        height: 34px;
    }

    .share-buttons a:not(:last-child) {
        margin-right: 60px;
    }

    /* buttons */
    /* slider */
    .slick-dots li button:before {
        content: "";
        background: #3156d0;
        border-radius: 50%;
        width: 12px;
        height: 12px;
        border: 2px solid #3156d0;
        opacity: 1;
    }

    .slick-dots li.slick-active button:before {
        opacity: 1;
        background: #fff;
    }

    .mt-20 {
        margin-top: -5px;
    }

    /* slider */
}

/* mobile ipad - desktop @media */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .preloader-curtain {
        animation: pbar 6s linear;
    }

    .preloader-wrapper .preloader img {
        width: 100%;
    }

    .logo-tass {
        top: 0;
        right: 0;
    }

    .logo-tass img {
        width: 40px;
        height: 40px;
    }

    .logo-beeline {
        top: 8px;
        left: 10px;
    }

    .logo-beeline img {
        width: 25px;
        height: 25px;
    }

    .main-header {
        padding: 80px 20px;
    }

    h1.main-header__title {
        width: 100%;
        font-size: 27px;
        line-height: 38px;
        letter-spacing: 0.6px;
    }

    h2.main-header__subtitle {
        width: 100%;
        font-family: "Merriweather-Light";
        font-size: 33px;
        letter-spacing: 0.1px;
    }

    .main-header {
        min-height: 320px;
    }

    .page {
        background: #000345;
        padding: 0;
    }

    .paragraph-wrapper {
        padding: 50px 0;
    }

    .paragraph-wrapper p {
        color: #fff;
        width: 100%;
        font-size: 16px;
        font-weight: 100;
        line-height: 28px;
        letter-spacing: 1.1px;
        padding: 0 20px;
    }

    .main-author {
        width: 100%;
        margin-bottom: 50px;
    }

    .main-author .left {
        width: 100%;
        display: block;
        float: none;
        height: auto;
    }

    .main-author .left img {
        width: 100%;
        margin: 0;
    }

    .main-author .right {
        width: 100%;
    }

    h1.right__name {
        width: 100%;
        padding: 0 20px;
        font-size: 35px;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.2;
        letter-spacing: 0.4px;
        text-align: left;
        color: #f9be43;
        margin-top: 25px;
        margin-left: 0;
    }

    h4.right__job {
        width: 100%;
        padding: 0 20px;
        font-size: 16px;
        font-weight: normal;
        line-height: 1.63;
        letter-spacing: 0.6px;
        text-align: left;
        color: #ffffff;
    }

    /*.second-author {*/
    /*margin-left: 0;*/
    /*}*/
    .link-top {
        background: #3156d0;
        width: 100%;
        color: #fff;
        position: relative;
        display: block;
        height: 25px;
        line-height: 25px;
        font-family: "Montserrat-Bold";
        font-size: 13px;
        letter-spacing: 0.8px;
    }

    .read-btn-mobile {
        background: transparent;
        border: 2px solid #fff;
        border-radius: 20px;
        color: #fff;
        width: 115px;
        line-height: 30px;
        padding: 5px;
    }

    .read-btn-mobile b {
        font-family: "Montserrat-Bold";
        font-size: 13px;
        letter-spacing: 0.8px;
        text-align: left;
        color: #ffffff;
        text-transform: uppercase;
        text-align: center;
        text-align: -webkit-center;
    }

    .read-btn-mobile i {
        margin-left: 5px;
        height: 100%;
        line-height: 100%;
        font-size: 23px;
        vertical-align: sub;
    }

    .logo-beeline img {
        width: 80px;
        height: 28px;
    }

    .main-header {
        padding: 80px 20px;
    }

    h1.main-header__title {
        width: 100%;
        font-size: 27px;
        line-height: 38px;
        letter-spacing: 0.6px;
    }

    h2.main-header__subtitle {
        width: 100%;
        font-family: "Merriweather-Light";
        font-size: 33px;
        letter-spacing: 0.1px;
    }

    .main-header {
        min-height: 320px;
    }

    .page {
        background: #000345;
        padding: 0 40px;
    }

    .paragraph-wrapper {
        padding: 50px 0;
    }

    .paragraph-wrapper p {
        color: #fff;
        width: 100%;
        font-size: 17px;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: 0.3px;
    }

    .interview-container.greeting {
        width: 620px;
    }

    .interview-container .left-part img {
        width: 109px;
    }

    .interview-container .left-part {
        text-align: center;
        text-align: -webkit-center;
    }

    .right-part .author {
        width: 100%;
    }

    .author .author__name {
        width: 100%;
        font-size: 35px;
        line-height: 42px;
        letter-spacing: 0.4px;
    }

    .author .author__job {
        width: 100%;
        font-size: 16px;
        line-height: 26px;
        letter-spacing: 0.6px;
    }

    .interview-container .text-bold {
        font-size: 17px;
        line-height: 28px;
        letter-spacing: 0.3px;
    }

    .interview-container .text-regular {
        font-size: 17px;
        line-height: 28px;
        letter-spacing: 0.3px;
    }

    .interview-container .text-greeting {
        margin: unset;
    }

    .interview-container .text-regular::before {
        display: none;
    }

    .interview-container .text-regular::after {
        left: 0;
        top: -30px;
    }

    .interview-container-big {
        width: 700px;
        position: relative;
        margin: 30px 0;
    }

    .interview-container-big .quote {
        font-size: 22px;
        line-height: 41px;
        letter-spacing: 0.3px;
        padding: 0 35px;
        margin: 15px 0;
    }

    .interview-container-big .quote::before {
        display: none;
    }

    .interview-container-big .quote::after {
        display: none;
    }

    .interview-wrapper .big-picture {
        width: 100%;
    }

    .quote-img {
        width: 91px;
        height: auto;
    }

    .interview-container-slider {
        width: 100%;
    }

    #custom-slider img,
    #big-slider img,
    #big-slider1 img,
    #big-slider2 img {
        width: 100%;
        margin-bottom: 15px;
    }

    #small-slider,
    #small-slider1,
    #small-slider2 {
        display: none;
    }

    .slider__next-arrow-mobile {
        position: absolute;
        bottom: -25px;
        right: 70px;
        height: 30px;
        width: 30px;
        z-index: 2;
        border: 2px solid #3156d0;
        border-radius: 50%;
    }

    .slider__next-arrow-mobile i {
        font-size: 24px;
        color: #3156d0;
    }

    .slider__prev-arrow-mobile {
        position: absolute;
        bottom: -25px;
        left: 70px;
        height: 30px;
        width: 30px;
        z-index: 2;
        border: 2px solid #3156d0;
        border-radius: 50%;
    }

    .slider__prev-arrow-mobile i {
        font-size: 24px;
        color: #3156d0;
    }

    footer .footer-container {
        width: 100%;
        margin-top: 50px;
    }

    .share-buttons {
        margin-bottom: 40px;
    }

    .share-buttons img:not(:last-child) {
        margin-right: 50px;
    }

    .navigation-buttons .middle {
        height: auto;
    }

    .navigation-buttons .left {
        display: block;
        float: none;
    }

    .navigation-buttons .right {
        display: block;
        float: none;
    }

    .navigation-buttons .left img {
        width: 249px;
    }

    .navigation-buttons .right img {
        width: 249px;
    }

    .navigation-buttons__name {
        font-size: 16px;
        line-height: 23px;
        letter-spacing: 0.3px;
        text-align: center;
        text-align: -webkit-center;
        margin: 8px 0 30px 0;
    }

    body {
        padding-bottom: 0;
    }
}

/* mobile phones - iPad @media */
@media screen and (min-width: 320px) and (max-width: 767px) {

    .preloader-curtain {
        animation: pbar 6s linear;
    }

    .preloader-wrapper .preloader img {
        width: 100%;
    }

    .logo-tass {
        top: 0;
        right: 0;
    }

    .logo-tass img {
        width: 40px;
        height: 40px;
    }

    .logo-beeline {
        top: 8px;
        left: 10px;
    }

    .logo-beeline img {
        width: 80px;
        height: 28px;
    }

    .main-header {
        padding: 80px 20px;
    }

    h1.main-header__title {
        width: 100%;
        font-size: 27px;
        line-height: 38px;
        letter-spacing: 0.6px;
    }

    h2.main-header__subtitle {
        width: 100%;
        font-family: "Merriweather-Light";
        font-size: 33px;
        letter-spacing: 0.1px;
    }

    .main-header {
        min-height: 320px;
    }

    .page {
        background: #000345;
        padding: 0;
    }

    .paragraph-wrapper {
        padding: 50px 0;
    }

    .paragraph-wrapper p {
        color: #fff;
        width: 100%;
        font-size: 16px;
        font-weight: 100;
        line-height: 28px;
        letter-spacing: 1.1px;
        padding: 0 20px;
    }

    .main-author {
        width: 100%;
        margin-bottom: 50px;
    }

    .main-author .left {
        width: 100%;
        display: block;
        float: none;
        height: auto;
    }

    .main-author .left img {
        width: 100%;
        margin: 0;
    }

    .main-author .right {
        width: 100%;
        height: auto;
    }

    .main-author .right.custom {
        flex-direction: column;
    }

    .main-author:last-child {
        margin-bottom: 0;
    }

    h1.right__name {
        width: 100%;
        padding: 0 20px;
        font-size: 35px;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.2;
        letter-spacing: 0.4px;
        text-align: left;
        color: #f9be43;
        margin-top: 25px;
        margin-left: 0;
    }

    h4.right__job {
        width: 100%;
        padding: 0 20px;
        font-size: 16px;
        font-weight: normal;
        line-height: 1.63;
        letter-spacing: 0.6px;
        text-align: left;
        color: #ffffff;
    }

    .second-author {
        margin-left: 0;
    }

    .link-top {
        background: #3156d0;
        width: 100%;
        color: #fff;
        position: relative;
        display: block;
        height: 25px;
        line-height: 25px;
        font-family: "Montserrat-Bold";
        font-size: 13px;
        letter-spacing: 0.8px;
        text-transform: uppercase;
    }

    .read-btn-mobile {
        background: transparent;
        border: 2px solid #fff;
        border-radius: 20px;
        color: #fff;
        width: 115px;
        line-height: 30px;
        padding: 5px;
    }

    .read-btn-mobile b {
        font-family: "Montserrat-Bold";
        font-size: 13px;
        letter-spacing: 0.8px;
        text-align: left;
        color: #ffffff;
        text-transform: uppercase;
        text-align: center;
        text-align: -webkit-center;
    }

    .read-btn-mobile i {
        margin-left: 5px;
        height: 100%;
        line-height: 100%;
        font-size: 23px;
        vertical-align: sub;
    }

    .interview-container {
        width: 100%;
        padding: 0 20px;
    }

    .interview-container.greeting {
        width: unset;
        border: none;
        padding: 0 20px;
    }

    #start-container {
        display: flex;
        flex-direction: column-reverse;
    }

    .interview-container .right-part {
        display: block;
        width: 100%;
        margin-bottom: 30px;
    }

    .interview-container .left-part {
        display: block;
        width: 100%;
        text-align: center;
        text-align: -webkit-center;
        margin-bottom: 50px;
    }

    .interview-container .left-part img {
        width: 109px;
    }

    .right-part .author {
        width: 100%;
    }

    .author .author__name {
        width: 100%;
        font-size: 35px;
        line-height: 42px;
        letter-spacing: 0.4px;
    }

    .author .author__job {
        width: 100%;
        font-size: 16px;
        line-height: 26px;
        letter-spacing: 0.6px;
    }

    .interview-container .text-bold {
        font-size: 17px;
        line-height: 28px;
        letter-spacing: 0.3px;
    }

    .interview-container .text-regular {
        font-size: 17px;
        line-height: 28px;
        letter-spacing: 0.3px;
    }

    .interview-container .text-regular::before {
        display: none;
    }

    .interview-container .text-regular::after {
        left: 0;
        top: -30px;
    }

    .interview-container .text-greeting {
        font-size: 17px;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: 0.3px;
        color: #3156d0;
        margin: unset;
    }

    .interview-container-big {
        width: 100%;
        position: relative;
        margin: 30px 0;
    }

    .interview-container-big .quote {
        font-size: 22px;
        line-height: 41px;
        letter-spacing: 0.3px;
        padding: 0 20px;
        margin: 15px 0;
    }

    .interview-container-big .quote::before {
        display: none;
    }

    .interview-container-big .quote::after {
        display: none;
    }

    .interview-wrapper .big-picture {
        width: 100%;
    }

    .quote-img {
        width: 91px;
        height: auto;
    }

    .interview-container-slider {
        width: 100%;
        margin: 40px auto;
    }

    #custom-slider img,
    #big-slider img,
    #big-slider1 img,
    #big-slider2 img {
        width: 100%;
        margin-bottom: 15px;
    }
    #big-slider.special-dots img {
        margin-bottom: 30px;
    }

    #small-slider,
    #small-slider1,
    #small-slider2 {
        display: none;
    }

    .slider__next-arrow-mobile {
        position: absolute;
        top: 45%;
        right: 10px;
        height: 30px;
        width: 30px;
        z-index: 2;
        background: #fff;
        border: 2px solid #3156d0;
        border-radius: 50%;
    }

    .slider__next-arrow-mobile i {
        font-size: 24px;
        color: #3156d0;
    }

    .slider__prev-arrow-mobile {
        position: absolute;
        top: 45%;
        left: 10px;
        height: 30px;
        width: 30px;
        z-index: 2;
        background: #fff;
        border: 2px solid #3156d0;
        border-radius: 50%;
    }

    .slider__prev-arrow-mobile i {
        font-size: 24px;
        color: #3156d0;
    }

    footer .footer-container {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 50px;
    }

    .share-buttons {
        margin-bottom: 40px;
    }

    .share-buttons img:not(:last-child) {
        margin-right: 50px;
    }

    .navigation-buttons .middle {
        height: auto;
    }

    .navigation-buttons .left {
        display: block;
        float: none;
    }

    .navigation-buttons .right {
        display: block;
        float: none;
    }

    .navigation-buttons .left img {
        width: 249px;
    }

    .navigation-buttons .right img {
        width: 249px;
    }

    .navigation-buttons__name {
        font-size: 16px;
        line-height: 23px;
        letter-spacing: 0.3px;
        text-align: center;
        text-align: -webkit-center;
        margin: 8px 0 30px 0;
    }

    body {
        padding-bottom: 0;
    }
}

@media screen and (min-width: 320px) and (max-width: 480px) {
    .interview-wrapper .youtube-video {
        width: 100%;
        height: 220px;
    }
}