@font-face {
    font-family: 'SFProDisplay';
    src: url(../fonts/SFProDisplay-Regular.ttf);
    font-weight: 100;
    font-style: normal;
}


@font-face {
    font-family: 'SFProDisplayBold';
    src: url(../fonts/SFProDisplay-Bold.ttf);
    font-weight: 100;
    font-style: normal;
}
/* Стилизация скролл */
body::-webkit-scrollbar {
    width: 8px;
    /* ширина scrollbar */
}

body::-webkit-scrollbar-track {
    background: #fff;
    /* цвет дорожки */
}

body::-webkit-scrollbar-thumb {
    background-color: #014990;
    /* цвет плашки */
    border-radius: 20px;
    /* закругления плашки */
    border: 2px solid #fff;
    /* padding вокруг плашки */
}

/* Завершение стилизация скролл */

html,
body {
    padding: 0;
    margin: 0;
    font-family: 'SFProDisplay', 'Arial Narrow', Arial, sans-serif, Verdana, Geneva, Tahoma, sans-serif;
    background-color: #fff;
    color: #014990;
}

button {
    padding: 0;
    color: #014990;
}

p {
    padding: 0 0 8px 0;
    margin: 0;
}


.slide {
    display: none;
}

.slide img {
    width: 400px;
}

.page_title {
    font-size: 18px;
    text-align: center;
    padding: 40px 0;

}

.page_title p {
    display: inline-block;
    padding: 9px 0px;
    width: 235px;
    color: #fff;
}


.content_container {
    margin: 0 auto;
    width: 280px;
    padding-bottom: 30px;
}

.blue_slide {
    color: #fff;
    background-color: #014990;
    padding: 0px 0 0px 0;
}

.white_slide {
    padding: 50px 0 0px 0;

}

.full_slide {
    min-height: 100vh;
}


/* Стили для мобильного */
@media (min-width: 320px) {

    #frame_1 {
        background-color: #014990;
        background-image: url('../img/bg_start_slide.svg');
        background-repeat: no-repeat;
        background-position: 50% 30px;
        background-size: 482px 357px;
    }


    #logo_start {

        margin: auto;
        padding-top: 193px;
        font-weight: bold;
        font-size: 1.1em;
    }

    #logo_start img {
        float: left;
        width: 81px;
        height: 93px;
        margin-right: 15px;
        margin-left: 9px;

    }

    #icon_hand_scroll {
        padding-top: 95px;
        padding-bottom: 65px;
        text-align: center;

    }

    #icon_hand_scroll img {
        width: 60px;
        height: 60px;
    }


    #butSartNextSlide button {
        background-color: none;
        background-image: url(../img/butStartNextSlide.png);
        border: none;
        width: 153px;
        height: 40px;
        border-radius: 30px;
        font-weight: bold;
        font-size: 16px;
        text-align: left;
        padding-left: 25px;

    }

    #startSlideTitle {
        display: inline-block;
        padding-top: 14px;
    }

    #frame_2 {
        background-image: url(../img/slide_1/bgOla.svg);
        background-size: 465px 302px;
        background-position: 50% 40px;
        background-repeat: no-repeat;
    }


    #frame_3 button {
        background-color: transparent;
        border: none;
        cursor: pointer;
    }

    .button_row button {
        background-size: 120px 120px;
        width: 120px;
        height: 120px;
    }

    .button_row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: center;
        grid-column-gap: 5px;
        grid-row-gap: 30px;
        padding-top: 50px;

    }

    #button_facts {
        background-image: url(../img/frame_3/facts.svg);

    }

    #button_facts:hover {
        background-image: url(../img/frame_3/facts_hover.svg);

    }

    #button_our_approach {
        background-image: url(../img/frame_3/our_approach.svg);
    }

    #button_our_approach:hover {
        background-image: url(../img/frame_3/our_approach_hover.svg);

    }

    #button_structure {
        background-image: url(../img/frame_3/structure.svg);
    }

    #button_structure:hover {
        background-image: url(../img/frame_3/structure_hover.svg);

    }

    #button_product {
        background-image: url(../img/frame_3/product.svg);
    }

    #button_product:hover {
        background-image: url(../img/frame_3/product_hover.svg);


    }

    #button_mission {
        background-image: url(../img/frame_3/mission.svg);
        background-size: 135px 82px;
        width: 135px;
        height: 82px;
    }

    #last_button_row {
        text-align: center;
        padding-top: 30px;
    }

    #button_mission:hover {
        background-image: url(../img/frame_3/mission_hover.svg);

    }

    .firstMassageContainer {
        padding: 15px 0 0 95px;
        margin: 75px 0 33px 0;
        background-image: url(../img/page_main/firstCommentArrow.svg);
        background-repeat: no-repeat;
        background-position: 95px 0px;
        background-size: 18px 30px;
        line-height: 20px;

    }

    .massageContainer {
        padding: 0 0 35px 15px;
        background-image: url(../img/page_main/commentArrow.svg);
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 30px 18px;
        line-height: 20px;
    }

    .massageContainer p {
        background-color: #D3EBF3;
        border-radius: 15px;
        padding: 15px 20px;

    }

    .massageOla {
        background-color: #D3EBF3;
        border-radius: 15px;
        padding: 15px 20px;
    }

    .button_next {
        text-align: center;
        padding-top: 15px;
    }

    .button_next button {

        background-color: none;
        background-image: url(../img/butStartNextSlide.svg);
        background-size: 153px 40px;
        border: none;
        width: 153px;
        height: 40px;
        border-radius: 30px;
        color: #D2EBF4;
        font-weight: bold;
        font-size: 16px;
        text-align: left;
        padding-left: 30px;
        cursor: pointer;
    }

    .button_next button:hover {
        background-image: url(../img/butStartNextSlide_hover.svg);
        color: #fff;
        text-decoration: underline;
    }

    .button_previos {
        text-align: center;
        padding: 50px 0;
    }

    .button_previos button {

        background-color: none;
        background-image: url(../img/butPreviosSlide.svg);
        background-size: 153px 40px;
        border: none;
        width: 153px;
        height: 40px;
        border-radius: 30px;
        font-weight: bold;
        font-size: 16px;
        text-align: left;
        padding-left: 55px;
        cursor: pointer;
    }

    .button_previos button:hover {
        text-decoration: underline;
    }


    .page_cover {
        text-align: center;
        height: 405px;
        background-color: #014990;
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 200px 200px;

    }

    .cover_facts {
        background-image: url(../img/page_facts/Cover.svg);
    }

    .cover_our_approach {
        background-image: url(../img/page_our_approach/Cover.svg);
    }

    .cover_structure {
        background-image: url(../img/page_structure/Cover.svg);
    }

    .cover_product {
        background-image: url(../img/page_product/Cover.svg);
    }

    .cover_mission {
        background-image: url(../img/page_mission/Cover.svg);

    }

    .page_facts_list_item div {
        padding-top: 50px;
        text-align: center;
    }

    .page_facts_list_item p {
        padding-top: 15px;
        padding-bottom: 0;
        font-family: 'SFProDisplayBold', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

    .page_facts_list_item img {
        width: 126px;
        height: 126px;
    }

    .button_back {
        text-align: center;
        padding-bottom: 50px;
    }

    .button_back button {
        cursor: pointer;
    }

    #top_bg_our_approach {
        background-image: url(../img/page_our_approach/bg_Ola.svg);
        background-repeat: no-repeat;
        background-position: 50% 40px;
        height: 240px;
        padding-top: 70px;
    }

    #top_bg_our_approach p {
        width: 150px;
        padding: 98px 0 0 133px;
    }

    #our_approach_buttom_bg {
        background-image: url(../img/page_our_approach/buttom_bg.svg);
        background-repeat: no-repeat;
        background-position: 50% 0;
        height: 65px;
    }

    #structure_intro {
        height: 230px;
        background-image: url(../img/page_structure/Bg_Ola.svg);
        background-repeat: no-repeat;
        background-position: 50% 40px;
        padding-top: 20px;
    }

    #structure_intro p {
        width: 140px;
        padding: 35px 0 0 135px;
    }

    .structure_house_roof {
        background-image: url(../img/page_structure/house_roof_bg.svg);
        background-repeat: no-repeat;
        background-size: 100%;
        height: 100px;
        background-position: center bottom;
        border-bottom: solid 3px #014990;
        border: inherit;
        position: relative;
        top: 1px;
    }

    .structure_house {
        background-color: #014990;
        color: #fff;
        text-align: center;
        padding-top: 30px;
        margin-bottom: 50px;


    }

    .structure_house h3 {
        margin: 0;
        font-size: 18px;
        background-image: url(../img/page_structure/gps_bullet.svg);
        background-repeat: no-repeat;
        background-position: center 0;
        padding-top: 40px;

    }

    .structure_house p {
        text-align: center;
        padding-top: 45px;
        background-repeat: no-repeat;
        background-position: 50% 37px;
    }

    .structure_house span {
        display: block;
        max-width: 55px;
        margin: 0 auto;
        padding: 5px 10px;
        border-radius: 20px;
        color: #FFF;
        font-size: 19px;
        margin-bottom: 8px;
    }

    .structure_bullet_green {
        background-image: url(../img/page_structure/bullet_green.svg);
    }

    .structure_bullet_purple {
        background-image: url(../img/page_structure/bullet_purple.svg);
    }

    .structure_bullet_blue {
        background-image: url(../img/page_structure/bullet_blue.svg);
    }

    .structure_bullet_yellow {
        background-image: url(../img/page_structure/bullet_yellow.svg);
    }

    .padding_top_block {
        padding-top: 60px;
    }

    .download_doc {
        text-align: center;
        padding: 50px 0 0 0;
    }


    /*Страница продуктов компании*/

    #ola_block_product_page {
        height: 185px;
        width: 280px;
        background-image: url(../img/page_product/bg_Ola.svg);
        background-repeat: no-repeat;
        background-position: center;
        padding: 35px 0;
    }

    #list_product_page {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px 0;
    }

    #list_product_page div {

        height: 127px;
        width: 127px;
        border-radius: 50%;
        text-align: center;
        color: #fff;
        display: flex;

    }

    #list_product_page p {
        top: 45%;
        margin: auto;
        padding: 0 20px;
        ;
    }

    .purple_bg {
        background-color: #CD50A3;
    }

    .green_bg {
        background-color: #A0CB45;
    }

    .light_blue_bg {
        background-color: #68BDDA;
    }

    .terracote_bg {
        background-color: #D55A2C;
    }

    .violet_bg {
        background-color: #BD8CCD;
    }

    .yellow_bg {
        background-color: #F3C644;
    }

    .purple_bg {
        background-color: #CD50A3;
    }

    #ola_block_mission_page {
        background-image: url(../img/page_mission/bg_Ola.svg);
        background-repeat: no-repeat;
        background-position: left 40px;
        padding: 35px 0 0 97px;

    }

    #ola_block_mission_page div {
        width: 180px;
    }



    /*Страница миссия и ценности*/

}