/* Стили страницы с лендингом */
@font-face {
    font-family: "Fontfabric-MullerMedium";
    src: url(../fonts/Fontfabric-MullerMedium.otf);
}

@font-face {
    font-family: "Fontfabric-MullerExtraBold";
    src: url(../fonts/Fontfabric-MullerExtraBold.otf);
}

/* Это для Имя/Телефон/Район полей */
@font-face {
    font-family: "Fontfabric-MullerHairline";
    src: url(../fonts/Fontfabric-MullerHairline.otf);
}

@font-face {
    font-family: "Fontfabric-MullerLight";
    src: url(../fonts/Fontfabric-MullerLight.otf);
}

@font-face {
    font-family: "Fontfabric-MullerBold";
    src: url(../fonts/Fontfabric-MullerBold.otf);
}

@font-face {
    font-family: "Fontfabric-MullerUltraLight";
    src: url(../fonts/Fontfabric-MullerUltraLight.otf);
}

@font-face {
    font-family: "Fontfabric-MullerBlack";
    src: url(../fonts/Fontfabric-MullerBlack.otf);
}

@font-face {
    font-family: "Fontfabric-MullerRegular";
    src: url(../fonts/Fontfabric-MullerRegular.otf);
}

@font-face {
    font-family: "Fontfabric-MullerHeavy";
    src: url(../fonts/Fontfabric-MullerHeavy.otf);
}

input[type="text"], input[type="tel"], input:valid, .contact-form-inline-item:focus {

    background-color : transparent!important; 
  
  }
.socials {
    margin-top: 10px;
}

.instagram-header {
    margin-right: 20px;
}

.instagram-header img, .whatsapp-header img{
    height: 45px;
    

}

/* Картинка на заднем фоне главной страницы */
header {
    background: url(../img/main-screen-bg.jpg) no-repeat;
    background-size: cover;
    color: white;
}

header.header-nsk {
    background: url(../img/main-screen-bg-nsk.jpg) no-repeat;
}

/* END Картинка на заднем фоне главной страницы */

/* Правила для всех тегов */
a, a:hover {
    text-decoration: none;
}

h1, h2 {
    font-family: "Fontfabric-MullerExtraBold";
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 24px;
}

/* END Правила для всех тегов */

header .row {
    display: flex;
}

.header-links-wrapper {
    order: 3;
}

@media (min-width: 996px) {
    .header-links-wrapper {
        order: 0;
        padding-top: 0;
    }
}

.header, .header a, .logo {
    color: white;
}

.header a {
    color: white;
    font-family: "Fontfabric-MullerUltraLight";
}

.header-logo {
    width: 70px;
    height: 100px;
}

.header-sitename {
    font-family: "Fontfabric-MullerExtraBold";
    font-size: 24px;
    line-height: 22px;
    align-self: center;
}

.header {
    padding-top: 30px;
}

.header-links {
    padding-top: 10px;
    font-size: 14px;
}

.header-links a, .contacts-link a {
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 158, 227, 0.1);
}

.header-links a:hover, .contacts-link a:hover {
    text-decoration: none;
    border-color: rgba(0, 158, 227, 0.5);
}

.header .header-links {
    padding-top: 10px;
}

/* Контакты справа в хедере */
.header-contact-us {
    padding-top: 7px;
}

.call-request {
    font-size: 14px;
}

.header-call-request {
    margin-top: 5px;
}

.call-request-link a {
    font-weight: bold;
    background: linear-gradient(45deg, #ff6801, #ffa100);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom: 1px solid rgba(255, 161, 0, 0.1);
    padding-top: 5px;
}

.call-request-link a:hover {
    text-decoration: none;
    border-color: rgba(255, 161, 0, 0.5);
}

.header-links a {
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 158, 227, 0.1);
}

.header-links a:hover {
    text-decoration: none;
    border-color: rgba(0, 158, 227, 0.5);
}

/* END Контакты справа в хедере */

/* Телефон */
.phone-first-part, .phone-second-part {
    font-size: 20px;
}

.phone-first-part {
    font-family: "Fontfabric-MullerLight";
}

.phone-second-part {
    font-family: "Fontfabric-MullerBold";
}

@media (max-width: 420px) {
    .phone-first-part, .phone-second-part, .header-sitename {
        font-size: 16px;
        align-self: flex-start;
    }

    .header-logo {
        width: 55px;
        height: 75px;
    }

    .call-request {
        font-size: 14px;
    }

    .call-request .fa-phone {
        margin-right: 5px;
    }
}

@media (max-width: 576px) {
    .header-contact-us {
        padding-top: 0;
    }
}

/* END Телефон */

/* Главный экран */
.main-screen {
    margin-top: 15px;
    padding: 20px;
    text-align: center;
    width: 100%;
    color: white;
}

.main-screen-title {
    font-family: "Fontfabric-MullerBlack";
    font-size: 56px;
}

.main-screen-description {
    font-family: "Fontfabric-MullerUltraLight";
    font-size: 32px;
}

@media (max-width: 996px) {
    .main-screen-title {
        font-size: 36px;
    }

    .main-screen-description {
        font-size: 20px;
    }
}

/* Футер главной страницы */
.main-screen-hr {
    border: none;
    color: white;
    /* #009ee3 */
    background-color: rgba(0, 158, 227, 0.2);
    height: 1px;
}

.main-screen-image {
    /* #009ee3 */
    border: 1px solid rgba(0, 158, 227, 0.18);
    border-radius: 50px;
    width: 75px;
    height: 75px;
    position: relative;
    margin-left: -15px;
}

.main-screen-image > img {
    width: 35px;
    height: 30px;
    position: absolute;
    top: 23px;
    right: 19px;
}

.main-screen-footer {
    margin-top: 170px;
    margin-bottom: 25px;
}

@media (max-width: 996px) {
    /* а то чёт слишком много лишнего пространства */
    .main-screen-footer {
        margin-top: 15px;
    }
}

.main-screen-footer-items {
    margin-top: 25px;
    text-align: left;
}

.main-screen-footer-item {
    margin-bottom: 20px;
}

.main-screen-footer-item-description {
    font-family: "Fontfabric-MullerRegular";
    font-size: 16px;
}

/* END Футер главной страницы */
/* END Главный экран */

/* Продукты */
.products {
    margin-bottom: 110px;
}

.product {
    margin-top: 20px;
}

/* reversed */
.product-right-info {
    display: flex;
    flex-direction: row-reverse;
}

.product-image {
    width: 100%;
    height: auto;
}

.product-title-left, .product-title-right {
    font-family: "Fontfabric-MullerExtraBold";
}

.product-name {
    font-family: "Fontfabric-MullerBlack";
    font-size: 38px;
}

.product-title {
    font-size: 22px;
    margin-bottom: 40px;
}


@media (max-width: 992px) {
    .product-title-right {
        text-align: left !important;
    }
    .product-field {
        height: 75px!important;
        
    }
}

@media (max-width: 768px) {
    .product-name {
        font-size: 24px;
    }

    .product-title {
        font-size: 16px;
    }

}

@media (max-width: 576px) {
    .product-name {
        font-size: 26px;
    }

    .product-field {
        height: 95px!important;
        
    }
    .h-auto {
    height: auto!important;
}
}

.product-name, .product-title {
    color: #010030;
}

.product-title-right {
    font-size: 20px;
    text-align: right;
}

.product-title-right span {
    text-align: right;
    background: linear-gradient(to left, #ff6801, #ffa100);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.product-fields {
    font-family: "Fontfabric-MullerMedium";
    font-size: 14px;
    text-align: left;
}

.product-field {
    height: 55px;
    
}

.product-fields-title {
    font-family: "Fontfabric-MullerBlack";
    font-size: 22px;
    color: #010030;
    display: flex;
}

.product-description {
    font-family: "Fontfabric-MullerRegular";
    font-size: 16px;
    color: #555;
}

.product-fields {
    margin: 30px 0 20px 0;
    display: inline-block;
    list-style: none inside;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 15px;
    font-family: "Fontfabric-MullerBold";
    font-size: 16px;
    color: #010030;
}

.product-field {
    margin-bottom: 15px;
}

.product-field:nth-of-type(even) .product-field-plus {
    color: #f13128;
}

.product-field:nth-of-type(odd) .product-field-plus {
    color: #f1854e;
}

.product-field-plus {
    font-family: "Fontfabric-MullerHeavy";
    font-size: 16px;
    margin-right: 10px;
}


/* END Продукты */

/* Спец. предложение */
/* Картинка с цветом на заднем фоне главной страницы */
.offer-background {
    width: 100%;
    height: 400px;
    color: white;
    content: "";
    position: absolute;
    z-index: -1;
}

/* END Картинка с цветом на заднем фоне главной страницы */

.offer-wrapper {
    background: url(../img/offer-bg.jpg) no-repeat;
    background-size: cover;
}

.offer {
    text-align: center;
    color: white;
    height: 325px;
}

.offer-title, .offer-content, .offer-description {
    text-align: center;
}

.offer-title {
    margin-top: 100px;
    font-family: "Fontfabric-MullerBlack";
    font-size: 38px;
}

.offer-content, .offer-content-bold {
    font-family: "Fontfabric-MullerExtraBold";
    font-size: 22px;
}

@media (max-width: 996px) {
    .offer-title {
        margin-top: 80px;
    }
}

@media (max-width: 768px) {
    .offer-title {
        margin-top: 80px;
        font-size: 28px;
    }

    .offer-content, .offer-content-bold {
        font-size: 20px;
    }

    .offer-description {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .offer-title {
        margin-top: 70px;
    }
}

@media (max-width: 400px) {
    .offer-title {
        margin-top: 30px;
    }
}

.offer-content-bold {
    color: #ffa100;
    margin-left: 3px;
    margin-right: 3px;
}

.offer-description {
    font-family: "Fontfabric-MullerHairline";
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.offer-description .fa-lock {
    opacity: 0.1;
    margin-left: 10px;
    margin-top: 5px;
}

/* END Спец. предложение */

/* Галерея */
.gallery {
    text-align: center;
    margin-bottom: 15px;
}

.gallery-title {
    font-family: "Fontfabric-MullerExtraBold";
    color: #010030;
    font-size: 32px;
    margin-top: 20px;
}

/* END Галерея */

/* Контакты */

/* Картинка с цветом на заднем фоне главной страницы */
.contacts-background {
    width: 100%;
    height: 400px;
    color: white;
    content: "";
    position: absolute;
    z-index: -1;
}

/* END Картинка с цветом на заднем фоне главной страницы */

/* Контакты */
#contacts {
    margin-right: 0;
}

.contacts {
    padding-top: 100px;
    color: white;
}

@media (max-width: 768px) {
    .contacts {
        padding-top: 105px;
        height: 400px;
    }
}

@media (max-width: 576px) {
    .contacts {
        padding-top: 90px;
    }
}

@media (max-width: 576px) {
    .contacts {
        padding-top: 80px;
    }
}

.contacts-title {
    font-family: "Fontfabric-MullerBlack";
    font-size: 38px;
}

.contact-map-wrapper {
    padding: 0 0 0 15px;
}

.contact-right-block {
    background: url(../img/contacts-bg.jpg) no-repeat;
    background-size: cover;
}

.contacts-table {
    font-family: "Fontfabric-MullerBold";
    font-size: 16px;
    border-spacing: 0 10px;
    border-collapse: separate;
    color: white;
}

.contacts-table-item-left {
    padding-right: 10px;
    color: #f1854e;
}

.contacts-table-item-right {
    color: white;
}

.contacts-table-item .fa-map-marker {
    padding-left: 2px;
}

/* Трубу развернуть надо */
.fa-phone {
    color: #f1854e;
    transform: rotateY(180deg);
    margin-right: 10px;
}

/* END Контакты */

/* Контакты */
.contacts-link a {
    color: white;
}

/* END Контакты */

/* Футер лендинга */
footer {
    background-color: #fefdfd;
    min-height: 200px;
    display: flex;
    align-items: center;
}

.footer a, .footer-sitename {
    color: #8d8d8d;
}

.footer-links, .header-links {
    display: flex;
    justify-content: space-around;
}

.footer-links {
    color: #929292;
    font-family: "Fontfabric-MullerUltraLight";
    font-size: 14px;
}

.footer-links a {
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 5px;
}

.footer-links a:hover {
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.footer-sitename {
    font-family: "Fontfabric-MullerExtraBold";
    font-size: 20px;
}

@media (max-width: 1200px) {
    .footer-links {
        order: 3;
    }

    .footer-sitename-wrapper, .footer-phone-wrapper, .footer-links {
        margin: 0;
        padding: 0;
    }
}

@media (max-width: 400px) {
    .sitemap-list {
        font-size: 13px;
    }
}

/* END Футер лендинга */

/* Строка заказа звонка с полями Имя-Телефон-Район */
.contact-form-inline {
    background-color: rgba(0, 158, 227, 0.18);
    padding: 5px 0 5px 30px;
    border-radius: 25px;
    position: relative;
    min-height: 45px;
}

.contact-form-inline-item {
    border: 0;
    background-color: rgba(255, 255, 255, 0);
    padding-left: 20px;
    /* #009ee3 */
    border-left: 1px solid rgba(0, 158, 227, 0.18);
    outline: none;
    caret-color: rgba(255, 255, 255, 0.3);
    font-family: "Fontfabric-MullerHairline";
    font-size: 14px;
    color: white;
}

/* todo перейти на less, чтобы такого колхоза не было */
.contact-form-inline-item::placeholder {
    color: white;
    font-family: "Fontfabric-MullerHairline";
    outline: none;
    opacity: 0.6;
}

.contact-form-inline-item::-webkit-input-placeholder {
    color: white;
    font-family: "Fontfabric-MullerHairline";
    outline: none;
    opacity: 0.6;
}

.contact-form-inline-item::-moz-placeholder {
    color: white;
    font-family: "Fontfabric-MullerHairline";
    outline: none;
    opacity: 0.6;
}

.contact-form-inline-item:-ms-input-placeholder {
    color: white;
    font-family: "Fontfabric-MullerHairline";
    outline: none;
    opacity: 0.6;
}

.contact-form-inline-item:-moz-placeholder {
    color: white;
    font-family: "Fontfabric-MullerHairline";
    outline: none;
    opacity: 0.6;
}

.contact-form-inline-item:focus {
    font-family: "Fontfabric-MullerHairline";
    color: white;
    opacity: 0.6;
}

@media (max-width: 996px) {
    .contact-form-inline-item, .contact-form-inline-send {
        font-size: 15px;
        padding: 3px 0 0 5px;
    }
}

@media (max-width: 768px) {
    .contact-form-phone {
        font-size: 10px !important;
        padding-right: 0;
    }
}

@media (max-width: 576px) {
    .contact-form-inline {
        padding-left: 10px;
    }

    .contact-form-inline-item, .contact-form-inline-send {
        font-size: 15px;
        padding-left: 3px;
    }

    .contact-form-phone {
        font-size: 12px !important;
        padding-right: 0;
    }
}

@media (max-width: 450px) {
    .contact-form-phone {
        font-size: 11px !important;
    }
}

@media (max-width: 400px) {
    .contact-form-inline {
        padding-left: 10px;
    }

    .contact-form-inline-item, .contact-form-inline-send {
        font-size: 13px !important;
        padding-left: 3px;
    }

    .contact-form-phone {
        font-size: 8px !important;
        padding-right: 0;
    }
}

.contact-form-inline-send {
    background: transparent;
    border: 0;
    border-radius: 25px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    color: white;
    font-family: "Fontfabric-MullerExtraBold";
    font-size: 16px;
}

.contact-form-inline-send:hover {
    background: #ff6801;
    cursor: pointer;
}

/* Кнопка "Отправить" после сохранения заявки */
.contact-form-inline-send-success {
    background: green;
    transition: 1s;
}

contact-form-inline-send-error {
    background: red;
    transition: 1s;
}



/* END Строка заказа звонка с полями Имя-Телефон-Район */

/* Owl Carousel */
/*.gallery-slider {*/
/*    margin-top: 50px;*/
/*}*/

.owl-stage-outer {
    height: 630px;
    padding-top: 10px;
}

/*
 * https://github.com/OwlCarousel2/OwlCarousel2/issues/1809
 * Цитирую: "I will close this issue, as there are many proposed solutions."
 * На странице бага разрабы сами признаются, что исправить бл- не могут >_<
 */
/*
.owl-nav {
    display: flex !important;
}
*/

.owl-prev, .owl-next {
    display: none;
}

.owl-wrapper {
    position: relative;
}

.owl-oursite-navigation {
    position: absolute;
    width: 100%;
    bottom: 0;
}

.owl-oursite-navigation .fa {
    color: #ffa100;
    filter: grayscale(100%);
}

.owl-oursite-navigation .fa:hover {
    color: #ffa100;
    filter: grayscale(0);
    transition: 0.3s;
}

.owl-oursite-prev {
    text-align: right;
    z-index: 1;
    padding-right: 20px;
}

.owl-oursite-next {
    text-align: left;
    z-index: 1;
    padding-left: 70px;
}

@media (max-width: 1200px) {
    .owl-oursite-navigation {
        bottom: 20%;
    }

    .owl-oursite-next {
        padding-left: 80px;
    }
}

@media (max-width: 992px) {
    .owl-oursite-navigation {
        bottom: 37%;
    }

    .owl-oursite-next {
        padding-left: 50px;
    }
}

@media (max-width: 768px) {
    .owl-oursite-navigation {
        bottom: 50%;
    }

    .owl-oursite-next {
        padding-left: 30px;
    }
}

@media (max-width: 576px) {
    .owl-oursite-navigation {
        bottom: 60%;
    }

    .owl-oursite-next {
        padding-left: 10px;
    }
}

.owl-oursite-prev-button, .owl-oursite-next-button {
    border: 0;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0)
}

/* Owl Carousel элементы в галерее */
.gallery-slider {
    /* width: 400px; */
}

.owl-item-active {
    transform: scale(1.3);
    transition: 0.5s;
}

.owl-item-center .item {
    transform: scale(1.4);
    transition: 0.5s;
}

.owl-item-side .item {
    opacity: 0.2 !important;
    filter: grayscale(100%) !important;
    transform: scale(0.8);
    transition: 0.5s;
}

/* END Owl Carousel элементы в галерее */
/* END Owl Carousel */