.pre {
    background-color: #333;
    padding: 48px 0;
}

.pre__items {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pre__images-item {
	max-width: 100%;
}

.pre__title {
    font-family: Ivar, sans-serif;
    font-style: normal;
    font-size: 32px;
    line-height: 38.4px;
    color: #fff;
    margin-bottom: 15px;
    letter-spacing: 2.2px;
}


.pre__content-text {
    font-family: Larsseit, Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    margin-bottom: 25px;
}


@media (min-width: 768px) {
}


.pre .pre-order {
    order: 1;
}

.pre .pre__images-item.large {
    display: none;
}

@media (min-width: 768px) {

    .pre {
        padding: 72px 0;
    }

    .pre__title {
        font-size: 36px;
        line-height: 43.2px;
        letter-spacing: 2.5px;
        margin-bottom: 12px;
    }

    .pre .pre-order {
        order: 0;
    }

    .pre__content-text {
        font-size: 18px;
        line-height: 27px;
        margin-bottom: 0;
    }
}

@media (min-width: 1260px) {

    .pre {
        padding: 82px 0 124px;
    }

    .pre__items {
        align-items: flex-start;
    }

    .pre__item {
        padding-left: 70px;
    }

    .pre .pre-order {
        order: 1;
    }

	
	.pre .pre__images-item {
		max-width: none;
	}

    .pre .pre__images-item.small {
        display: none;
    }
    .pre .pre__images-item.large {
        display: block;
        margin-left: 20px;
    }
}

@media (min-width: 1920px) {
    .pre__item {
        padding-left: 51px;
    }

    .pre .pre__images-item.large {
        display: block;
        margin-left: -59px;
    }
}























.api {
    padding: 80px 0;
    overflow: hidden;
}

.api__title {
    font-family: Ivar, Times New Roman, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 38.4px;
    color: #000;
    margin-bottom: 15px;
    letter-spacing: 2.05px;
}


.api__content-text {
    font-family: Larsseit, Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: #000;
    margin-bottom: 25px;
}


.api .api-image img {
    box-shadow: 0 5.84px 11.68px 0 rgba(37,67,98,.16);
    border-radius: 6px;
}

.api .api-image img {
    width: 380px;
}

@media (min-width: 768px) {

    .api {
        padding: 88px 0;
    }

    .api__items {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .api__title {
        font-size: 36px;
        line-height: 43.2px;
        letter-spacing: 2.5px;
        margin-bottom: 11px;
    }

    .api .pre-image {
        margin-left: 0;
    }

    .api .api-image img {
        width: 442px;
    }

    .api__content-text {
        font-size: 18px;
        line-height: 27px;
        margin-bottom: 0;
    }


}

@media (min-width: 1260px) {

    .api {
        padding: 0 0 140px;
        margin-top: -40px;
    }




    .api .api-image .api__images {
        text-align: right;
        width: 100%;
        margin-right: 14px;
    }
    .api .api-image img {
        width: 518px;
    }

    .api .api-image {
        order: 1;
    }

    .api .api__items {
        margin-left: 36px;
    }

    .api .api__title {
        margin-bottom: 16px;
    }

    .api .api-content {
        order: 2;
    }
}

















section.flow {
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}


.flow_title {
    font-family: Ivar, Times New Roman, serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 38px;
    text-align: center;
    margin-bottom: 16px;
    color: #262626;
}

@media (min-width: 768px) {

    .flow_title {
        font-size: 36px;
        line-height: 44px;
    }

}

.flow_title span {
    display: block;
}
@media (min-width: 768px) {

    .flow_title span {
        display: inline;
    }

}

.flow_description {
    font-family: 'Larsseit';
    font-size: 16px;
    font-style: normal;
    line-height: 24px;
    text-align: center;
    color: #262626;
    max-width: 460px;
    margin: 0 auto 54px;
}

@media (min-width: 768px) {
    .flow_description {
        font-size: 18px;
        line-height: 27px;
        margin: 0 auto 43px;
    }
}

@media (min-width: 1260px) {
    .flow_description {
        max-width: 430px;
        margin-bottom: 24px;
    }
}


.flow_images {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



.flow_images .flow_images_img-2,
.flow_images .flow_images_img-3 {
    display: none;
}


@media (min-width: 768px) {
    .flow_images .flow_images_img-1 {
        display: none;
    }

    .flow_images .flow_images_img-2 {
        display: block;
    }
}

@media (min-width: 1260px) {

    .flow_images .flow_images_img-2 {
        display: none;
    }

    .flow_images .flow_images_img-3 {
        display: block;
    }
}






.flow.flow1 {
	margin-top:40px;
}

.flow1 .flow_images .flow_images_img-1 {
    width: 303px;
}


.flow2 .flow_images .flow_images_img-1 {
    width: 358px;
}
.flow2 .flow_description {
    margin-bottom: 47px;
}


.flow.flow3 {
    padding-bottom: 76px;
}
.flow3 .flow_images .flow_images_img-1 {
    width: 334px;
}
.flow3 .flow_description {
    margin-bottom: 48px;
}



@media (min-width: 768px) {

	.flow.flow1 {
		margin-top:44px;
	}

    .flow1 .flow_images .flow_images_img-2 {
        width: 593px;
    }

    .flow.flow2 {
        padding-top: 51px;
    }

    .flow2 .flow_description {
        margin-bottom: 46px;
    }

    .flow2 .flow_images .flow_images_img-2 {
        width: 495px;
        margin-left: -4px;
    }

    .flow.flow3 {
        padding-top: 47px;
		margin-bottom: 44px;
    }

    .flow3 .flow_images .flow_images_img-2 {
        width: 634px;
        margin-left: -10px;
    }

}


@media (min-width: 1260px) {

    .flow.flow1 {
        padding-top: 40px;
    }

    .flow1 .flow_description {
        margin-bottom: 15px;
    }

    .flow1 .flow_images .flow_images_img-3 {
        width: 1007px;
    }



    .flow.flow2 {
        padding-top: 59px;
    }


    .flow2 .flow_images .flow_images_img-3 {
        width: 1146px;
        margin-left: 18px;
    }



    .flow.flow3 {
        padding-top: 66px;
        padding-bottom: 96px;
		margin-bottom: 0;
    }

    .flow3 .flow_images .flow_images_img-3 {
        width: 765px;
    }

}