@import url('template.css');
.opis2 {
    display: block;
    width: 60%;
    padding: 28px;
    margin: 30px 0;
    background: #5d6f7acc;
    font-size: 16px;
    line-height: 1.3;
}
.opis2 p {
	padding-bottom: 14px
}
.epichead {
	background-color: #eee;
	text-align: left;
	padding: 140px 0 40px 0;
	color: #fff;
	overflow: hidden;
	position: relative;
}
.epichead::after {
    content: "";
    position: absolute;
    width: 50%;
    height: 170%;
    background: #f46a37c4;
    z-index: 1;
    transform: rotate(15deg);
    bottom: -20%;
    left: -10%;
}
.epichead > img {
    position: absolute;
    width: 100%;
    min-height: 100%;
    z-index: 1;
    -webkit-animation: scaling-bg 56s linear infinite;
    animation: scaling-bg 20s linear infinite;
    top: 0;
    left: 0;
	object-fit: cover;
	object-position: center;
}
@keyframes scaling-bg {
    0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1);
}
50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
}
.epichead > .block {z-index:2}

.epichead h2 {
	font-size: 60px;
	text-shadow: 1px 1px 2px rgba(0,0,0,.4);
}
.epichead h3 {
	font-size: 40px;
	text-shadow: 1px 1px 2px rgba(0,0,0,.4);
	color: #5d6f7a
}


.slogan {
	background: #8b9eaa url(../../../images/mainpage/head.jpg) 50% 50% no-repeat;
	background-size:cover;
	color: #fff;
	padding: 80px 0 60px 0;
}
.slogan h1 {font-weight: 600;font-size: 40px;padding: 20px 0;}
.slogan h2 {color: #ffd253;padding:10px 0;text-transform: uppercase}
.problem {background: #5d6f7a;color: #fff;}
.why2 .block {padding:20px 0 0 0}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f46a37c4;
    z-index: 2;
}
.services {
	background: url(../../images/mainpage/window-glass-replacement.jpg) 50% 50% no-repeat;
	background-size: cover;
	color: #fff;
	padding: 40px 0;
	position: relative;
}
.services .block {z-index: 4}
.services ul {margin: 0 auto;padding: 40px 0 40px 17%}
.services ul li {float:left;width: 50%;}
.services ul li h3 {padding: 10px 0; font-weight: 300;letter-spacing: .5px;font-size:20px}
.prtxt, .aftxt, .bftxt {font-size: 16px}
h2 {font-size:36px;text-shadow: 0 1px 1px rgba(0,0,0,.3);padding: 0 0 20px 0;text-align:left;line-height: normal;}
h1 {text-shadow: 0 1px 1px rgba(0,0,0,.3);}
.services h2, .review h2, .brands h2, .blogposts h2 {text-align: center}
.prtxt p, .aftxt p, .bftxt p {padding: 6px 0 4px 0}
.blogposts h4 {padding:10px;text-align:center}
.problem {padding: 40px 0}
.about .bftxt {
	padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: 1px dotted rgba(0,0,0,.2);
}
.review {
	position: relative;
	background: url(../../images/mainpage/window-glass-replacement.jpg) 50% 50% no-repeat;
	background-size: cover;
	color: #fff;
}
.review .block {z-index: 4}
.problem > ol > li {
	background-size: 100% auto;
	background-position: 0 100%;
	background-repeat: no-repeat;
	margin-bottom: 0px
}
.problem .coll-4 > li:nth-child(4n) {padding-right: 20px}
.problem > ol > li ul {padding: 20px 0 0 0;list-style-type: none;}
.problem > ol > li ul li {display:block;padding:4px 0}
.problem > ol > li ul li:before {
    color: #3ea5ec;
    content: "✔";
    padding-right: 10px;
}
.problem h3 {display: block;text-align:left;font-weight:300; text-transform: uppercase;}

.howto {background: #f8f8f5;}
.howto ol {
	margin-top: 20px;
	padding: 40px 0;
	border-top: 4px double rgba(0,0,0,.2);
	border-bottom: 4px double rgba(0,0,0,.2);
}
.howto li {padding: 0 40px;text-align:center}
.howto li img {max-width:100%;box-shadow: 0 0 2px 1px rgba(0,0,0,.2);}
.howto li h3 {font-weight: 500;padding: 15px 0 5px 0;}

.why2 .blcont {
	display: flex;
	flex-wrap: wrap;
}

.why2 .blcont .prtxt {
    width: 40%;
    flex-basis: 40%;
    align-self: center;
}
.why2 .blcont ol {
	width: 60%;
    flex-basis: 60%;
    align-self: center;
	text-align:center
}
.why2 .opis {
	display: block
}
.why2 {background: #5d6f7a;color:#fff;text-align:center;border:1px solid rgba(255,255,255,.2)}
.why2 img {width: 40px}
.why2 h3 {font-weight: 500}
.why2 li span {
	display: block;
	border-right: 1px solid rgba(255,255,255,.3);
	padding: 0 20px 0 0;
}
.why2 li:last-child span {border:none}

.problem .block {
	display: flex;
	flex-wrap: wrap;
}

.problem .block > div {
    width: 50%;
    flex-basis: 50%;
    align-self: center;
}
.problem .block .bftxt {
	padding-right: 40px
}
.problem .block ol {
    margin: 0;
    padding: 30px;
    outline: 4px dashed rgb(244, 106, 55);
    outline-offset: -15px;
    background: #fff;
    color: #333;
}

.problem .block ol li {
    display: block;
    padding: 0;
}
.problem .oli {display:block}
.problem li img {
    float: left;
    margin: 7px 20px 0 0;
	
}
.problem li div {
    padding: 4px 0;
    font-size: 18px;
    text-transform: uppercase;
}
.problem .opis {
	display: block
}
.problem ol > li .oli:after {
	clear: both;
	content: " ";
	display: block;
	height: 0;
	position: relative;
	width: 100%;
}
.popapvideo {position:relative;cursor:pointer;width:480px;height:270px;background-position: 50% 50%;margin: 0 auto;border-radius: 10px;}
.popapvideo:after {
    position: absolute;
    background: url(../../../images/site/play.png) 50% 50% no-repeat;
    content: '';
	font-size: 14px;
	width: 72px;
	height:72px;
    right: 50%;
	top: 50%;
	margin: -36px -36px 0 0
}
.hvid {text-align:center}
.hvid > div {position:relative}

.aboutxt  {
	display: flex;
	flex-wrap: wrap;
	padding: 20px 0;
	font-size: 14px;
	line-height:22px
}
.bftxt .coll1, .aftxt .coll1 {
    width: 30%;
    flex-basis: 30%;
    align-self: center;
}

.aftxt .coll2, .bftxt .coll2 {
    width: 70%;
    flex-basis: 70%;
    align-self: center;
	
}
.bftxt .coll2 {padding-left: 40px}
.aftxt .coll2 {padding-right: 40px}
.aboutxt img {max-width:100%;box-shadow: 0 0 2px 1px rgba(0,0,0,.2);}
.about .aboutxt.aftxt {}
.about ol {border-top: 1px solid #000;padding-top: 20px;}
.about .oli {
	display: flex;
	flex-wrap: wrap;
}
.about .img {
	width: 20%;
    flex-basis: 20%;
    align-self: top;
	text-align: center
}
.about .img .count {display:block}
.about .prim {
	width: 80%;
    flex-basis: 80%;
    align-self: center;
}
.rew img {
	border-radius: 200px;
	margin: 0 40px 10px 0;
	border: 4px solid #fff;
	box-shadow: 0 0 4px rgba(0,0,0,.4);
}
.rew {max-width:800px;width:100%;margin: 0 auto;display:table}
.rew > div {display:table-cell;vertical-align:middle}
.imgbl {text-align:center}
.imgbl li {display:inline-block}
.imgbl img {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin: 12px 15px;
}

@media (max-width:1169px){
	.problem .block ol {
	margin: 100px 0 100px 20px;
	}
	.problem .block ol li {padding: 15px 0}
}
@media (max-width:979px){
	.problem .block ol {
	padding: 20px;
	}
	.problem li img {margin: 0 15px 0 0;}
	.problem .block ol li {padding: 10px 0}
}
@media (max-width:768px){
	
	.slogan {padding: 80px 0 10px 0;}
	.why2 .block {padding: 20px 14px 0 14px;}
	.epichead h2 {font-size: 40px;padding: 0}
	.epichead {padding: 80px 0 40px 0}
	.epichead::after {width: 150%;left: -100%;}
	
	.opis2 {width: 100%}
	.epichead h3 {font-size: 20px;color: #ffffffde;padding-top: 18px}
	.howto ol {padding: 20px 0 0 0;border-bottom:none;margin-top: 10px;}
	.services, .problem, .howto li {padding: 0}
	.howto li h3 {text-align: left;font-weight: 600;color:#000}
	.services h2, .review h2 {color:#fff}
	.services ul {padding:20px 0 40px 20px}
	.services ul li {float:none;width:100%}
	.aboutxt img, .why2 {display:none}
	.foocont .block {padding: 20px 14px}
	.foocont .ftr1, .foocont .ftr2 {width: 100%;flex-basis: 100%;padding-right: 0;}
	.foocont .headcontacts li {text-align: center}
	.why2 .blcont {display: block;}
	.why2 .blcont .prtxt, .why2 .blcont ol {width: 100%;}
	.why2 ol {display:block}
	.why2 ol > li {display:table-cell;width:auto;}
	.why2 ol > li .oli {margin-right:20px}
	.why2 li:last-child span {margin-right:0;padding:0}
	.why2 .prtxt {margin-bottom:40px}
	.problem .block {display:block}
	.problem .block > div {width:100%}
	.problem .block ol {margin: 20px 40px}
	.aftxt .coll2, .bftxt .coll2 {width: 100%;flex-basis: 100%;padding:0}
	.slogan h1 {font-size:20px;padding:0}
	.slogan h2 {font-size: 22px;padding:22px 0 10px 0}
	.rew {text-align:center}
	.rew, .rew > div {display:block}
	.imgbl img {    margin: 12px 5px;}
}
@media (max-width:480px){
	.why2 ol > li {display:block;width:100%;text-align:left;}
	.why2 ol .prim {float: left;margin: 0 35px 0 0;}
	.why2 li span.oli {display:block;width:100%;border-right: 0px;padding:0;margin:0}
	.why2 ol > li:after {
		clear: both;
		content: " ";
		display: block;
		height: 0;
		position: relative;
		width: 100%;
	}
	.problem .block {display:block}
	.problem .block > div {width:100%}
	.problem .block ol {
		outline: none;
		margin: 20px 0px;
		padding: 10px;
	}
	
}
@media (max-width:1400px){
	.review .block .swiper-button-next, .review .block .swiper-button-prev {
		background-color: #fff;
	}
}