:root {
    --bgc: green;

}

html, body {padding: 0; margin: 0; height: 100%;}
section {padding: 50px 0}
.wraper{width: 100%; height: 100%;}
    header{background: url(/static/src/landings/kolodcy/img/fon.png); height: auto; width: 100%;}
    .header-bg{background: url(/static/src/landings/kolodcy/img/header.jpg) no-repeat 50% 0; height: 392px;}
    .header-bg span{ line-height: 45px; color: #777;}
    .header-bg a {color: #777;}
    .h1-block{ background-color: #f1e8bb; }
    h1 {
        font-size: 48px; 
        font-weight: 600; 
        color: #777; 
        text-align: center;
    }
    .form {margin: 0 auto}
    .form_base input {
        border-color: #343a40;
        background-color: rgba(255, 255, 255, 1);
        -webkit-border-radius: 4px;
        border-radius: 4px;
        color: #343a40;
        height: 50px;
        font-size: 14px;
        font-family: Open Sans;
        font-weight: 400;
        font-style: normal;
    } 
    .description {color: #324b6b; font-size: 16px}  
    .header-h1 button{
        background-color: #f81515 !important; 
        height: 50px; color: #ffffff; font-size: 16px;
        font-weight: 600;
    }
    .button-base {background-color: var(--bgc); color: #ffffff; height: 40px; font-weight: 600}
    .button-base:hover {color: #f4f4f4; background-color: #424b6b}
    
    .bg_menu{ width: 100%; background-color: #f1e8bb;}
        #navigation { display: none; }
        #navigation.fixed{
            position: fixed;
            top: 0;
            width: 100%;
            display: block;
            z-index: 100000000;
            box-shadow: 3px 3px 5px -3px #bbbbbb inset, -3px -3px 5px -3px #bbbbbb inset;
        }
        .nav-item {padding: 5px;}
        .nav-link {text-transform: uppercase;}
        .navbar-text, .navbar-brand {font-size: 1.2em;}
        .logo-bg {color: #777; text-transform: uppercase;}
/*---------------------Модальные окна-------------------------*/
.opis{ line-height: 35px; font-size: 16px; max-width: 700px; padding: 20px;}
.item-li {display: flex;align-items: baseline;flex-wrap: wrap;justify-content: space-between;line-height: 35px;}
        .item-label{margin-right: 3px}
        .item-line {flex-grow: 1; border-bottom: rgb(185, 185, 185) 1px dotted;}
        .item-value{font-weight: 600; color: #414042}
/*----------------------о нас---------------------------*/
.company{background: url(/static/src/landings/kolodcy/img/bg-fon.jpg);box-shadow: 3px 3px 5px -3px #bbbbbb inset, -3px -3px 5px -3px #bbbbbb inset;}
.button-company { background-color: #f7f7f7 !important; color: #ffffff; height: 40px }
.foto{height: auto; width: 235px; border-radius: 1px}
.foto img{height: 100%; width: 100%; border-radius: 1px; border: 7px solid #f7f7f7;}
.form_company input {
    background-color: rgba(255, 255, 255, 1);
    -webkit-border-radius: 4px;
    border: 1px solid #c7c7c7;
    border-radius: 4px;
    color: #343a40;
    height: 40px;
    font-size: 14px;
    font-family: Open Sans;
    font-weight: 400;
    font-style: normal;
    padding-left: 10px;
}
.form_company input, .form_company button{
    width: 200px !important;
}
.form__company {
    gap: 10px;
}
.form_company{
    border-color: #343a40;
    border-radius: 4px;
}
.form_block{
    box-shadow: 3px 3px 5px -3px #bbbbbb, -3px -3px 5px -3px #bbbbbb;
    padding: 30px;
    background: #f1e8bb;
    height: 100%;
}
.form__footer {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0px 10px;
}
.form__footer input, #form input {
    height: 40px;
    border-radius: 5px;
    border: 1px solid #c7c7c7;
    padding-left: 10px;
    width: 100%;
}
.wid{}
    .owl-carousel {width: 100% !important; margin: 0 auto !important;}
    .owl-dot span{background-color: #777 !important;}
    .owl-dot.active:hover{}
    .owl-nav {margin-top: 0 !important;}
    .owl-carousel .owl-nav button.owl-next  {position: absolute; top: 130px; right: 50px}
    .owl-carousel .owl-nav button.owl-prev  {position: absolute; top: 130px; left: 50px}
/* -------------------Услуги--------------------------*/
.services{ background-color: #f1e8bb;}
.services hr {height: 2px;}
.services-item{
	width: 300px;
	margin: 15px;
	background-color: #f8f8f8;
	box-shadow: 3px 3px 5px -3px #bbbbbb, -3px -3px 5px -3px #bbbbbb, 3px -3px 5px -3px #bbbbbb, -3px 3px 5px -3px #bbbbbb;
	border-radius: 25px 0
}
.services-title{font-size: 24px; padding: 10px;}
.services-body{height: 250px;}
.services-body img{height: 100%; width: 100%;}
.services-footer{ font-size: 24px; padding: 10px;}

.usluga {width: 200px; height: 200px;}
.usluga img { width: 100%; height: 100%; }
.usluga-name { font-size: 22px; }
.usluga-description {  }
/*---------------------Цены---------------------------*/
.catalog {background-color: #f1e8bb;}
table {
    background: url(/static/src/landings/kolodcy/img/bg-fon.jpg);
    width: 90%; 
    text-align: center; 
    border: 1px solid #dfdfdf; 
    /*border-radius: 6px; */
    border-collapse: separate; 
    border-spacing: 0px;
    margin: auto;
}
caption {
    text-transform: uppercase;
    font-size: 16px;
    color: #555555;
    margin: 5px 0;
}
table tr td,  th{
    height: 40px;
    line-height: 40px;
    border-right: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    border-collapse: separate;
}
table tr {
    color: #666666; 
    
}
table tr td:last-child {border-right: 0px;}
table  tr:nth-child(1n) {
    
    border-right: 2px solid #e9e9e9;
}
table tr:nth-child(2n) {
    
    border-right: 2px solid #ffffff;
}

table tr td:first-child {
    text-align: left;
    padding-left: 15px;
}
table tr td:last-child {}
/*---------------------Материалы----------------------*/
.gbi {}
.gbi img {height: 100px; width: 100px;}
/* -------------------fotorama--------------------------*/
.portfolio{ 
	height: auto;
	width: 100%;
	display: block;
    position: relative;
    background: url('/static/src/landings/kolodcyimg/bg-fon.jpg');
}
/*.portfolio::after {
	content: "";
	background: url('/static/src/img/fon-portfolio.jpg');
	background-position: center center;
    -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	opacity: 0.2;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: -1;   
	background-color: #555;
}*/
.portfolio .owl-carousel .owl-nav button.owl-next  {position: absolute; top: 110px; right: -50px}
.portfolio .owl-carousel .owl-nav button.owl-prev  {position: absolute; top: 110px; left: -50px}
.galery {width: 250px; height: 280px;}
.galery img{width: 100%; height: 100%; background-size: 100% 100%;}
h3{color: #000;}
.fotorama{}
.fotorama__wrap{}
.fotorama__stage{}
.fotorama__nav{}
.fotorama__nav__shaft{}
.fotorama__nav__frame{}
.fotorama__thumb-border{}
/*-------------------------видео---------------------------------*/
.company-video{background-color: #efeadd;border: 4px solid #324b6b; border-radius: 10px}
.company-video {}
/*--------------------------Этапы работ--------------------------*/
.etap-rabot { background: url(/static/src/img/bg-fon.jpg);box-shadow: 3px 3px 5px -3px #bbbbbb inset, -3px -3px 5px -3px #bbbbbb inset; }
.etap-rabot-img {height: 100%;width: auto;}
.etap-rabot-img img {height: 100%;width: 100%;}
/*-------------------------Отзывы--------------------------------*/
video { height: 350px; min-width: 250px; max-width: 100%; }
/*.video { min-width: 250px; max-width: 100%;}*/
.otzyv video { height: 350px; width: 250px; }
/*.otzyv .video {  background-color: #f1e8bb;min-width: 300px; max-width: 100%;}*/
.otzyv { background-color: #f1e8bb; }
.review {box-shadow: 2px 2px 10px -5px #bbbbbb inset, -2px -2px 10px -5px #bbbbbb inset; background-color: #f8f8f8;font-size: 16px}
    .review_title {min-width: 250px}
    .review_img { height: 135px; width: 150px; }
        .review_img img { height: 100%; width: 100%;}

/*----------------------------Цитаты-------------------------------*/
.section { background-color: #006464; color: #fff;}
.citata {font-size: 2em}
/*------------------------------Вопрос - ответ-------------------*/
.qwest_foto {height: 300px; width: 250px}
.qwest_foto img{ height: 100%; width: 100%;border-radius: 1px; border: 7px solid #f7f7f7;}
.accordion {max-width: 650px; font-size: 18px}
/*-------------------------------Карта---------------------------*/
.maps{
    background: url(/static/src/landings/kolodcy/img/bg-fon.jpg);
    box-shadow: 2px 2px 10px -5px #bbbbbb inset, -2px -2px 10px -5px #bbbbbb inset;
}
.empty{height: 70px; background-color: #fff;}
/*-------------------------------footer--------------------------*/
.footer{ color: #777; background-color: #f1e8bb;}
.footer button{}
.footer button:hover{color: #fff;}
.footer-img { background: url(/static/src/img/footer.jpg)no-repeat 100% 100%;}
.footer-img img{ }
/*-------------------------------------------------------------------------*/
.wrap, .wrap_plastic {width: 100%; position: relative;}
.wrap h2, .wrap_plastic h2 {
    position: relative; 
    color: #fff;
    font-family: Roboto;
    font-size: 32px;
    font-weight: 900;
    text-transform: initial;
}
.wrap h2::before {
    content: "";
    position: absolute;
    right: -20px;
    top: -15px;
    z-index: -1;
    background: url(/static/src/img/images/line.png) no-repeat 100% 50%;
    width: 1600px;
    height: 76px;
}

/*--Калькулятор стоимости колодца--*/
#calc {
    width: 220px;
    padding-left: 10px;
} 
.form-inline {
    margin-bottom: 20px;
}                   
.fw { width: 180px !important; }
#calc label {
    margin-bottom: 5px;
}
#calculate {
    width: 100% !important;
}
.modal-footer {
    display: flex;
    padding-left: 25px !important;
    justify-content: flex-start !important;
}
.modal-d { max-width: 1000px !important;}
#form-responce div{
    height: 35px;
    border-bottom: 1px solid #f9f9f9;
    line-height: 35px;
    padding-left: 10px;
}
.empty_field {
    border-color: Red;
}
/*---Отзывы---*/

.review-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 15px;
    background-color: #f1e8bb;
    position: relative;
}
.video {
    border: 1px solid #ffffff;
    margin-bottom: 15px;
    margin-right: 15px;
    padding: 5px;
    border-radius: 15px;
}
.review img {
    height: 100%;
    width: 100%;
    border-radius: 15px;
}
.review .owl-prev, .review .owl-next {
        position: absolute;
        top: calc(10% - 15px);
    }
.review .owl-prev {

    width: 35px;
    height: 35px;
    background: #ffffff !important;
    opacity: .8;
    border-radius: 20px !important;
}
.review .owl-next {
    right: 0 !important;
    width: 35px;
    height: 35px;
    background: #ffffff !important;
    opacity: .8;
    border-radius: 20px !important;
}
.owl-next:cursor, .owl-prev:hover {
    background: #fff !important;
    opacity: .6;
}
.review .owl-prev span, .review .owl-next span {
    color: #000;
}
.owl-dot span{
    background: #D05700 !important;
    opacity: 0.5;
}
.owl-dots .active span{
    background: #D05700 !important;
    opacity: 0.99;
}
#modalImg {
    width: 100%;
    height: 100%;
}
.modal-dialog-img {
    width: 100%;
    height: 100%;
}
#modal-img img {
    width: 100%;
    height: 100%;
}
#modal-img .modal-content {background: none !important;}