* { padding: 0; margin: 0; }
html,body{width:100%; height:100%;background:#f5f5f5; font-family: "Inter", sans-serif; font-size:16px;}
#menu{display:flex}
#logo{margin:5px 0 0 5px; padding:10px}
#logo img{width:153px}
#phone{text-align:center; width:100%; margin:25px 0 0 0; color:#5b5b5b; text-shadow: #f5f5f5 1px 1px 1px;}
#phone a{ color:#5b5b5b; text-decoration:none; font-size:22px;font-weight: 600; text-align:center;}
.fa-phone{color:#116da2; margin:0 10px 0 0}
#call button, .doororder, .doorordercredit{border:2px solid #116da2; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; padding:10px 15px; width:170px; margin:15px 15px 0 0; font-weight:bold}
#call button:hover, .doororder:hover, .doorordercredit:hover{background:#116da2;color:#fff; cursor:pointer}
.doorprice p{margin-top:10px}

.header{display:flex; justify-content:center; flex-direction:column; }
.oldprice{text-decoration:line-through; font-weight:normal; color:#fc3f1d}
.price{font-size:22px; font-weight: 600; color:#5b5b5b;}
.yes{color:#00a704}
#doorpage .doordiscount{padding:10px 0}

#header{position:fixed; top:0; z-index:10; width:100%; height:75px; background-color:rgba(226, 226, 226, 0.9); /*background-color:rgba(129, 129, 129, 0.5); */ box-shadow: 0 1px 3px rgb(0 0 0 / 20%);  border-bottom: 1px solid #e5e5e6}
.headerfixed{position:fixed; }
.modal .fade{z-index:100}
.modal-dialog{z-index:150}
.roistat-lh-pulsator-phone {right: 10px; bottom: 70px !important;}
.roistat-lh-pulsator-fill{background:rgba(17, 109, 162, 0.9)}

nav ul{display:flex; width:460px;list-style-type:none; justify-content: center; margin:25px 0 0 90px}
nav ul li:hover{background-color:#fbfbfc;  border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;}
nav ul li span{display:inline-block; padding:5px 10px; background-color:#fbfbfc;  border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;}
nav ul li:last-child{border:none}
nav ul li a{display:inline-block; padding:5px 10px; text-decoration:none; color:#373737; color:#000 !important; text-shadow: #f5f5f5 1px 1px 1px;}

h1{display:block;font-size:1.4rem;text-align:center;}
h2{display:block;font-size:1.3rem;text-align:center;margin:20px 0}
#breadcrumbs{margin:0 0 0 20px}
#breadcrumbs .fa-chevron-right{color:#aaaaaa !important}
#catalog{display:flex; position: relative;}
#main {padding:95px 0 80px 0}
#main .main h1{margin:0 0 20px 0}
#main h1{margin:20px}
.navpage{margin:40px}
.navpage p{margin:20px 0}
.navpage ul{margin:20px; list-style-type:none}
#main .navpage #breadcrumbs{margin:0 0 0 0}
.contact div{margin:20px 0 0 0}
.contact .email{margin:0 0 0 57px}
#firm div{margin:0}
#firm span{font-weight:bold}
#firm #h{margin:0 0 10px 0}

#main .navpage h1, #main .navpage h2{text-align:left; margin:20px 0; color:#000}
.setup li span{display:inline-block; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; background:#7f7f7f;color:#fff; padding:15px; margin:10px 10px 0 0}
a{text-decoration:none; color:#116da2}
.b{font-weight:bold}

.promotext{max-width: 1140px; padding:0 20px; margin: 0 auto 20px auto;}
.pagecontent{padding: 100px 40px 0 40px;}
.photomaincontent{display:flex; margin:10px 0 10px 0}
.vse-cveta, .ofis{display:block; width:40%; height:auto; margin:10px auto}
.vse-cveta img, .ofis img{width:100%}
.youtube{width:70%;height:600px}
.pagecontent ol {padding:20px}
.pagecontent ol li {margin:5px 10px}
.pagecontent h3{margin:20px 0 20px 0; text-align:center}

#sort{margin:0 0 0 20px}
#sort a{margin:0 0 0 10px}

#filter {
    width: 40px;
    position: -webkit-sticky;
    position: sticky;
    z-index: 3;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #e2e2e2;

	/*border-bottom: 1px solid #e5e5e6;
    border-right: 1px solid #e5e5e6;*/
}
#catalog #filter.open{width:320px; min-width:260px}
#filter .fa-filter{display:none; }
#filter .fa-filter, #filter .fa-arrow-left{color:#0f6ba1;/*#5b5b5b;*/}
#pricerange{width:210px; margin:10px 0 10px 5px}
#btnfilter{position:absolute; right:0; padding:10px; cursor:pointer;}
#filterform{padding:40px 20px 20px 20px; font-size:15px}
#filterform input{width:50px}
#filterform h3{position:absolute;top:10px; left:20px; font-size:14px; margin:0; padding:0}
#filterform select{width:225px; height:30px; font-size:15px	}
#filterform input[type=submit], #filterform button{display:block; width:100px; height:30px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border:1px solid #116da2 }
#filterform button:hover, #filterform input[type=submit]:hover{background:#116da2;color:#fff; cursor:pointer}
#filterform .buttons{display:flex; margin:20px 0 0 0; justify-content:space-around}
#filterprice{font-size:15px}
#filterprice div{display:inline-block}
#cats{margin:10px 10px 0 10px; font-size:14px; }
#cats ul{list-style-type:none; }
#cats ul li{ display:inline-block;}
#cats ul li:after{ content:' • '; color:#000; margin: 0 4px 0 0}
#cats ul li:last-child:after{ content:'';}


#grid {position: relative; width: 100%;}
/*#catalog #filter.open + #grid {width: calc(100% - 400px);}*/
#grid #top{display: flex;padding:10px 0 10px 20px;     background-color: #e2e2e2;}
#grid #body{position: relative; width:100%; overflow: hidden;}

#grid #body > div {
    width: calc(100% + 1px);
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row wrap;
    align-self: flex-start;
    align-content: flex-start;
}


#grid #body .dooritem {
    width: 25%;
	box-sizing:border-box;
    border-right: 1px solid #e5e5e6;
    border-bottom: 1px solid #e5e5e6;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    padding: 14px 30px;
    cursor: pointer;
    color: #000;
	vertical-align:top;
}


.dooritem a{display:block}
.dooritem img{width:300px}
.dooritem:hover{cursor:pointer; background-color:#fbfbfc; box-shadow: 0 0 45px -5px rgb(0 0 0 / 25%);}
.model{margin:10px 0}

#pagination{height:100px; margin:20px 0}
.pagination{display: flex;list-style-type: none; justify-content: center;}
.pagination .active{background:#116da2}
.pagination li{background:#d8d6d6; padding:10px;   border:  1px solid #e5e5e6; border-radius:15px}	
.pagination li a{color:#000;text-decoration:none}
.pagination .active a{color:#fff}



#doorpage{display:flex}
#doorimage img{width:600px}
#doorimage .dopimg {display:flex; flex-wrap: wrap;}
#doorimage .dopimg a{display:block;height:100px;}
#doorimage .dopimg a img{height:100%; width:auto}
#doorparams td, .setup td, .props_table td{padding:5px 	10px}
#doorparams tr:nth-child(even),.setup tr:nth-child(even), .props_table tr:nth-child(even) {background: #eff9fe}
#doorparams tr:nth-child(odd),.setup tr:nth-child(odd), .props_table tr:nth-child(odd){background: #FFF}
#doorpage div{padding:10px}
#doordescr div span{font-weight:bold}
#doordescr h1{text-align:left; margin:10px; padding:5px 0 0 0}
.back{display:block; margin:10px}

.fa-bars{display:none} 
.fa-window-close{display:none}
.fancybox__content{width:350px; height:50%; min-width:300px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;}

#zamer, #zamer--clone {display:none;min-height: 300px}
#zamer input, #zamer--clone input{border:none;width:280px;outline:1px solid #000; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:5px; margin:10px 0 10px 0; font-size:18px}
#zamer button#zsend, #zamer--clone button#zsend{display:block; border:2px solid #116da2; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; padding:10px 15px; width:200px; font-weight:bold;font-size:16px; margin:15px auto}
/*#zamer input#zsend:hover, #zamer--clone input#zsend:hover{background:#116da2;color:#fff; cursor:pointer}*/

#zsend:hover{background:#116da2;color:#fff; cursor:pointer}

#zamer input[type=checkbox],#zamer--clone input[type=checkbox]{width:30px; outline:none;}
#zfdoor {display:none}

#raboty{height:400px}
.carousel__dots{display:none}
/*
.ui-slider.ui-slider-horizontal {
    background: #BFE2FF;
    height:12px;
    border:none;
}
.ui-slider .ui-slider-handle {
    width: 0; 
    height: 0;
    border-top: 18px solid transparent;
    border-left: 36px solid #337AB7;
    border-bottom: 18px solid transparent;
    border-right: none;
    top:-12px;
    margin-left:-18px;
    cursor:pointer;
    background: transparent;
}
.ui-slider .ui-slider-range {
    background: #337AB7;
    height:12px;
}*/
/*
#wrapmaincarousel{width:100%;height:600px !important}
#mainCarousel {
	height:600px;
}
*/

 .owl-carousel .owl-stage {

    }

   .owl-carousel .owl-item img {
	 width: 100%;
    height: 500px!important;
    object-fit: cover;
    object-position: center;
    }
.owl-nav > button {
	position: absolute;
	top: 50%;
	font-size: 30px !important;
}	
.owl-next span {
	padding-left: 3px;
}
.owl-prev span {
	padding-right: 3px;
}
	
.owl-nav > .owl-next {
	right: 20px;
}
.owl-nav > .owl-prev {
	left: 20px;
}

.owl-nav {
	width: 100%;
}




.is-next, .is-prev, .owl-next , .owl-prev  {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: rgba(255,255,255,0.7) !important;
}



@media (man-width: 10000px){
	#catalog #filter.open +#grid #body .dooritem {width: 25%;}
}
@media (max-width: 1679px) {
	/*#catalog #filter.open +#grid{width: calc(100% - 320px);}*/
	
	#catalog #filter.open +#grid #body .dooritem {width: 33.3333333333%;}
}

@media (max-width: 1250px) {
	#grid #body .dooritem {width: 33.3333333333%;}
	nav ul {margin-left:10px}
	#catalog #filter.open +#grid #body .dooritem {width: 50%;}
}

@media (max-width: 1110px) {
	#doorimage img{width:500px}
	#phone{margin:29px 0 0 0}
	#phone a {font-size: 16px;}
	#topmenu{display:none}
	#topmenu{position: fixed; top:0;right:0; width:250px;height:100%; background-color:rgba(226, 226, 226, 0.97); box-shadow: 0 5px 5px rgb(0 0 0 / 20%); border-left:1px solid #e5e5e6}
	nav{margin:15px 0 0 0}
	nav ul{margin:20px 0 0 20px; flex-direction:column;}
	nav li{width:80%}
	nav ul li a{width:100%}
	nav ul li:hover{background:transparent !important}
	#topmenu #close{display:block}
	.fa-bars,.fa-window-close{position:absolute; display:block;  right:10px; top:15px; height:26px; font-size:26px; padding:5px 10px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border:2px solid #116da2; color:#000 !important;}
	.fa-bars:hover,.fa-window-close{background:#116da2;color:#fff !important; cursor:pointer}
	.fa-window-close{z-index:1000}
	#call button {margin:15px 70px 0 0}
}
@media (max-width: 1060px) {
	#grid #body .dooritem {width: 50%;}
}
@media (max-width: 991px) {

	#doorpage{display:flex; flex-direction:column; justify-content: center; align-items: center}
	#doordescr h1{display:block; width:90%; margin:0 auto}
	#doordescr div, #doordescr table{width:90%; margin:0 auto}
}

@media (max-width: 867px) {
	#catalog #filter.open +#grid #body .dooritem {width: 100%;}
}

@media (max-width: 767px) {
	#filter {position:fixed; background-color:rgba(17, 109, 162, 0.9); color:#fff; height:40px; top:210px; border:none}
	#catalog #filter.open{height:600px; top:75px; overflow-y:scroll; width:280px}
	#cats {background-color:rgba(226, 226, 226, 0.9); margin:10px 0 0 0; padding:10px 15px 10px 15px}
	#cats div b{color:#000}
	#filter .fa-filter,  #filter .fa-arrow-left{color:#fff;}
	.dooritem img{width:200px}
	.price{font-size:16px; }
	#catalog #filter.open +#grid #body .dooritem {width: 50%;}
	/*#mainCarousel {height:400px;}*/
	#wrapmaincarousel {height:400px;}
}

#footer{  position:fixed; z-index:10; width:100%; left: 0;bottom: 0;height:20px;  color: #000; background-color: #e2e2e2; padding:20px}
#footer .container{display:flex}
.dev{margin:0 auto 0 auto}

@media (max-width: 600px) {
	#phone a:nth-child(2){display:none}
	#phone{margin:25px 0 0 0}
	#phone a:nth-child(1) {font-size:22px}
	#doorimage img{width:400px}
	h1{font-size:18px}
	#grid #top{font-size: 14px;}
	#pagination li{font-size: 12px;}
	.hs{display:none}
	.vs{display:block}
	.navpage{margin:20px}
	.youtube{width:100%;height:300px}
	.pagecontent{padding: 100px 10px 0 10px;}
	.vse-cveta, .ofis{width:100%}
	#footer .container{ flex-direction: column;}
}
@media (max-width: 400px) {
	.dooritem img{width:150px}
	#doorimage img{width:300px}
	#call button {width:90px; margin:15px 70px 0 0; font-size:12px; padding:5px;}
	#zamer input{border:none;width:270px;}
}