/* оформление инпутов и кнопок */
.btn {

}

.btn_accent {
    background: #46BF27;
    box-shadow: 0px 4px 7px rgba(182, 182, 182, 0.32);
    font-size: 16px;
    line-height: 22px;
    color: #FFFFFF;
}

.btn_rounded {
    border-radius: 25.5px;
}

.btn_full-width {
    width: 100%;
}

.input {
    background: #F3F3F3;
    color: #3F3F3F;
    border: 1px solid #747474;
    box-sizing: border-box;
    padding: 13px 27px;
    max-width: 100%;
}

.input_rounded {
    border-radius: 25.5px;
}

.input_funny {
    display: none;
}



BODY {
    /* background-image: url('/assets/images/portfolio-page_bg-1.png'), url('/assets/images/portfolio-page_bg-2.png');
    background-position: 125% 35vh, 21.5% -27.5vh; */
    background-image: url('/assets/images/portfolio-page_bg-1.png');
    /* background-position: 125% 35vh; */
    background-position: calc(100% + 300px) 310px;
    background-repeat: no-repeat;
}

.portfolio-page__title, .portfolio-page__content .block__header {
    color: #272727;
}

/* .portfolio-page__content + .feedback {
    background: none;
} */

.site-desktop-browser-preview {
    /* box-shadow: 0 0 5px rgba(0,0,0,.25); */
    margin-top: 56px;
}

.site-mobile-browser-preview, .site-mobile-browser-preview__address-row {
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.site-desktop-device-preview {
    width: 100%;
    padding: 3.1% 9.89% 5.5% 10.4%;
    background-image: url('/assets/images/notebook.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

.site-desktop-device-preview__screen {
    width: 100%;
}

.site-desktop-browser-preview__address-row, .site-desktop-browser-preview__preview-wrap {
    box-shadow: 0 0 5px rgba(0,0,0,.25);
}

.site-mobile-device-preview {
    padding: 25% 6%;
    background-image: url('/assets/images/iphone.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

.site-desktop-browser-preview__address-row {
    position: relative;
}

/*
.site-desktop-browser-preview__address-row {
    height: 46px;
    background-image: url('/assets/images/portfolio_desktop_preview_header_bg.png');
    background-size: 100% auto;
    padding: 1% 14%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/*
.site-mobile-browser-preview__address-row {
    height: 34px;
    font-size: 65%;
    background-image: url('/assets/images/portfolio_mobile_preview_header_bg.png');
    background-size: 100% auto;
    padding: 3.1% 24%;
}
*/

.site-mobile-browser-preview__bg-image {
    width: 100%;
}

.site-mobile-browser-preview__address, .site-desktop-browser-preview__address {
    position: absolute;
    top: 50%;
    left: 24%;
    font-size: 75%;
    transform: translateY(-40%);
}

.site-desktop-browser-preview__address {
    left: 14%;
}

.portfolio-page__mobile-prototype-gallery-item_browser, .site-desktop-browser-preview__preview-wrap:not(.swiper-container) {
    box-shadow: 0 0 5px rgba(0,0,0,.25);
}

.portfolio-page__mobile-prototype-gallery-item_browser, .site-desktop-browser-preview__address-row {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.site-desktop-browser-preview__preview-wrap:not(.swiper-container) {
    position: relative;
    z-index: -1;
}

.site-desktop-browser-preview__preview, .site-desktop-browser-preview__bg-image, .site-mobile-browser-preview__image {
    width: 100%;
}

.block_portfolio-page + .block_portfolio-page {
    margin-top: 85px;
}

.block_portfolio-page .block__header {
    font-family: 'Roboto';
    font-weight: bold;
    font-size: 28px;
    line-height: 134.1%;
    text-align: center;
    margin-bottom: 0;
    padding: 30px 0;
}

.portfolio-page__content {
    color: #6F6F6F;
}

.portfolio-page__stage-caption {
    font-size: 20px;
    line-height: 27px;
    font-weight: bold;
    color: #272727;
}

.portfolio-page__stage-mobile-version-caption {
    font-size: 18px;
    line-height: 31px;
    color: #242424;
}

.site-desktop-slider-controls {
    position: relative;
    display: flex;
}

.site-desktop-slider-controls .swiper-button-prev, .site-desktop-slider-controls .swiper-button-next {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
    margin-top: 0;
}

.site-desktop-slider-controls .swiper-button-prev::after, .site-desktop-slider-controls .swiper-button-next::after {
    color: #0c0c0c;
    font-size: 18px;
    font-weight: 800;
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
}

.site-desktop-slider-controls .swiper-pagination-fraction {
    position: relative;
    display: inline-block;
    bottom: 0;
    width: auto;
    font-size: 22px;
    line-height: 31px;
    color: #0c0c0c;
}

.site-desktop-slider-controls .swiper-pagination-current {
    color: #0FB21F;
}

.site-desktop-browser-slide-header {
    font-size: 18px;
    line-height: 31px;
    color: #242424;
}


@media screen and ( max-width: 767px ) {
    .portfolio-page__title {
        font-size: 1.5em;
    }

    .block_portfolio-page .block__header {
        padding: 15px 0;
    }

    .block_portfolio-page + .block_portfolio-page {
        margin-top: 35px;
    }

    .site-desktop-browser-preview {
        margin-top: 28px;
    }

    .site-desktop-browser-preview__address-row {
        font-size: 4.5px;
        /* height: 13px; */
    }

    /*
    .site-mobile-browser-preview__address-row {
        height: 37px;
        padding-top: 3.7%;
        padding-bottom: 3.7%;
    }
    */
}

@media screen and ( min-width: 768px ) and ( max-width: 991px ) {
    .site-mobile-browser-preview__address {
        font-size: 60%;
    }
}