@import url("reset.css");
@import url("helper.css");
@import url("clearsans.css");
@import url("monitorica.css");
@import url("bebas.css");
@import url("opensans.css");
HTML, BODY{  box-sizing:border-box}

BODY{font-family: "ClearSansThin"; font-size:14px;line-height:1.5em; min-width:320px;  
	 margin:auto; background-image: url(/images/image-1.jpg); background-repeat: no-repeat;width: 100%;  background-position:  center top; background-size:200%}
a,p,span,h1,h2,h3{font-weight: 500}
a{text-decoration: none}
DIV{position:relative}
.wrapper{max-width: 1200px; margin: auto}
.font-light{font-family: ClearSansLight}
.font-thin{font-family: ClearSansThin}
.font-bebas{font-family:BebasRegular}
.font-regular{font-family: ClearSansRegular}
.text-dark{color:#575757}
.text-blue{color:#83cffc }
.text-white{color: white;}
h2.title-size{font-size: 24px; line-height: 1.3em; padding-bottom: 5px}
.text-upp{text-transform: uppercase;}
.bo-box{display: block;box-sizing: border-box}
.sprite{background-image: url(../images/sprite.png);background-repeat: no-repeat;}
.styk{ position:relative; z-index:9000;
box-shadow: 0px 0px 5px 0px #818181;  
-webkit-box-shadow: 0px 0px 5px 0px #818181;  
-moz-box-shadow:0px 0px 5px 0px #818181;
}
header .main-menu{display: none}
header .wrap{height: 60px; background-color: rgba(255,255,255,0.96)}
header .logo-wrap{display: flex; position: absolute; left: 10px; top: 10px}
header .logo{background-repeat: no-repeat; width: 72px; height: 38px; background-size: contain; display: block}
header .logo-text{font-size: 26px;display: block;line-height: 50px}
header .logo-text span{color: #83cffc}
header .menu-button{position: absolute;background-position: 0 0; height: 40px;width: 40px; right: 10px;top: 10px}
.header-phone{ color: #fff}
/*=-=- =-=-=-=-=-=- 1 SCREEN -=-=-=-=-=-=-=-=-*/

.screen-1 .content-wrap{background: rgba(0,0,0,0.50); padding-bottom: 20px}
.screen-1 .telephone-wrap{padding-top: 20px}
.screen-1 .telephone-wrap .item{font-size: 16px; text-align: center; display: block; box-sizing: border-box; padding: 3px}
.screen-1 .e-mail{font-size: 13px; text-align: center; display: block;box-sizing: border-box;padding-top: 5px}
.screen-1 .adress-wrap .item{font-size: 12px; text-align: center; padding: 0 30px 5px 30px; line-height: 16px;}
.screen-1 .adress-wrap{padding: 10px 0}
.screen-1 .button-wrap{}
.screen-1 .button-wrap .button{text-align: center; padding: 12px; border-radius: 3px; background: #ff5c5c; width: 160px; margin: auto}
.screen-1 .button-wrap .button:hover{ cursor:pointer; background:#f11a1a; }
.screen-1 .about-wrap{background: rgba(255,255,255, 0.95); text-align: center; padding: 10px 0 20px 0;    z-index: 1123;}
.screen-1 .title {width: 150px; margin: auto;border-bottom: 2px solid #83cffc}
.screen-1 .about-text{padding: 5px 20px}

/*-=-=-=-=-=-=--=-= 2 SCREEN -=-=-=-=-=-=-=-=-*/

.screen-2 {background-image: url(../images/blue-bg.png); background-repeat: no-repeat;background-size: cover}
.screen-2 .wrapper{padding: 20px 0}
.screen-2 .title {width: 150px; margin: auto;border-bottom: 2px solid white; text-align: center}
.screen-2 .number{font-size: 36px; text-align: center; }
.screen-2 p {line-height: 1.3em}
.screen-2 .item {padding: 10px 0}
.screen-2 .text{font-size: 18px; width: 180px; text-align: center; margin: auto}

/*=-=-=-=-=-=-=-==- 3 SCREEN =-=-=-=-=-=-=-=-=*/

.screen-3{background:rgba(255,255,255,0.8) }
.screen-3 .wrapper {padding: 20px 0}
.screen-3 .title {width: 150px; margin: auto;border-bottom: 2px solid #575757; text-align: center}
.screen-3 .right-side{display: none}
.screen-3 h3{width: 300px; text-align: center; margin: auto; padding: 10px 0 0 0}
.screen-3 .item-wrap{padding: 20px 0 0 0}
.screen-3 .item-1, .screen-3 .item-3, .screen-3 .item-5 {background: #4f5253}
.screen-3 .item-2, .screen-3 .item-4 { background: #3fa9e7}
.screen-3 .item ul {width: 170px; margin: auto;padding-left: 20px}
.screen-3 .button{width: 180px;margin: auto; text-align: center; background: #ff5c5c;padding: 10px 20px; border-radius: 3px}
.screen-3 .button:hover{ cursor:pointer; background:#f11a1a; }
.screen-3 .button-wrap{padding: 20px 10px}
.screen-3 .img{background-repeat: no-repeat; width: 300px; height: 200px; margin: auto; background-size: cover}
.screen-3 .img-wrap{padding-top: 10px}

/*-=-=-=-=-=-=-=-=- 4 SCREEN =-=-=-=-=-=-=-=-=*/

.screen-4{background-image: url(../images/blue-bg.png); background-repeat: no-repeat;background-size: cover}
.screen-4 .title {width: 250px; margin: auto;border-bottom: 2px solid white; text-align: center}
.screen-4 .wrapper{padding: 20px 0}
.screen-4 .img{height: 64px; width: 64px; background-repeat: no-repeat; margin: auto}
.screen-4 .content-wrap{display: flex; width: 100%; flex-wrap: wrap; justify-content: space-around; padding-top: 20px}
.screen-4 .item{width: 50%; padding: 10px}
.screen-4 .text-wrap{text-align: center}
.screen-4 .item-1 .img{background-position: -41px -2px}
.screen-4 .item-2 .img{background-position: -107px 0; width: 54px}
.screen-4 .item-3 .img{background-position: -163px 0}
.screen-4 .item-4 .img{background-position: -228px 0}
.screen-4 .item-5 .img{background-position: -292px 0}
.screen-4 .item-6 .img{background-position: -358px 0; width: 47px}


/*=-=-=-=-=-=-=-=-= 5 SCREEN -=-=-=-=-=-=-=-=-*/

.screen-5{background:rgba(255,255,255,0.8) }
.screen-5 .wrapper {padding: 20px 0; }
.screen-5 .title {width: 260px; margin: auto;border-bottom: 2px solid #575757; text-align: center}

/*=-=-=--=-=-=-=-=- 6 SCREEN -=-=-=-=-=-=-=-=-*/

.screen-6{background-image: url(../images/ass-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;}
.screen-6 .ass-bg{background-image: url(../images/dark-bg.png); background-repeat: no-repeat; background-size: cover; background-position: top; height:100%; position:absolute; top:0; left:0; width:100%; opacity:0.7}
.screen-6 .wrapper {padding: 20px 0}
.screen-6 .title {width: 260px; margin: auto;border-bottom: 2px solid white; text-align: center}
.screen-6 .text-wrap p{text-align: center}
.screen-6 .text-wrap{padding: 10px 30px 20px 30px}
.screen-6 .button {padding: 13px 40px; background: #ff5c5c; width: 240px; margin: auto; text-align: center; border-radius: 3px}

.screen-6 .button:hover{ cursor:pointer; background:#f11a1a; }


/*-=-=-=-=-=-=-=-=- 7 SCREEN =-=-=-=-=-=-=-=-=*/

.screen-7 .yandex-map{height: 300px;     background: rgb(228, 228, 228); }

/*-=-=-=-=-=-=-=-=- 8 SCREEN -=-=-=-=-=-=-=-=-*/

footer{background: #242424; height: 100px}
footer .img{background-image: url(../images/logo-footer.png); background-repeat: no-repeat; width: 56px; height: 28px; background-size: contain; }
footer .flex-wrap{display: flex;width:110px; margin: auto}
footer .logo-wrap{position: absolute;left: 10px;top: 10px; width: 120px;}
footer .logo-text{font-size: 20px; padding-top: 8px}
footer .text-wrap p{line-height: 1.1em; font-size: 10px; text-align: left; padding-left: 5px}
footer .text-wrap{}
footer .menu a{display: inline-block; padding: 0 5px; font-size:13px; line-height:20px;}
footer .menu-wrap{position: absolute; right: 0; top: 10px; width: 130px}

/*************************************************/
.ajax-form-popup{ max-width:240px; } 
.ajax-form-popup h3{ font-size:16px; text-align:center; text-transform:uppercase; padding:15px 0; margin:0;}
.ajax-form-popup .desc{ text-align:center; padding-bottom:15px; color:#777777; font-size:13px;}
.ajax-form-row{ width:170px; margin:auto; padding-bottom:10px;}
.ajax-form-row input[type="text"]{ box-sizing:border-box; padding:7px 10px; width:100%; border:1px solid #d6d6d6}
.ajax-form-row textarea{ box-sizing:border-box; padding:7px 10px; width:100%; height:70px; border:1px solid #d6d6d6}
.ajax-form-row input.af-button{text-transform: uppercase; padding: 10px 36px 10px!important;  border: 1px solid #c1bfbf!important; background-color: #ff5c5c; display: block; margin: auto; width:100%; box-sizing:border-box; color:#FFFFFF;  background-position:center; background-size: 56%; }
.ajax-form-row input.af-button:hover{ background-color:#f11a1a; cursor:pointer}
.ajax-form-row .field-title{ padding:0 3px; font-size:14px; font-weight:bold; color:#757575; padding-bottom:5px;}
.ajax-form-row .field-title span{ display:block;font-size:13px; font-weight: normal; line-height:1.3em; }

.af-button.inprocess{ background-image:url(499.gif); background-repeat: no-repeat; background-position: center; background-size: 56%; }
.ajax-form-row-error{ font-size:12px; color:#FD6568}

.ajax-form-success{    text-align: center;    color: #00a4d8; font-size:16px}
.ajax-form-fail{ text-align: center;    color:#FF5B5E;}

/*******************************************************/
.slider-wrap{position:relative; padding:0 15px; margin: 20px 0; height:100px; width:100%; box-sizing:border-box; }
.slick-slider{padding:0 40px;  height:100%;}
.slick-list{height:100%}
.slick-track{height:100%}
.slick-slide .slide{box-sizing:border-box; padding:0 5px;  height:100%;}
.slick-slide a{display:block; width:100%; height:100%;  position:relative; box-sizing:border-box;border:1px solid #CBCBCB; background-repeat:no-repeat; background-position:center; background-size:cover;}
.slider-wrap .slick-arrow{ position:absolute; background:url(/images/icons.png) center left no-repeat; width:32px; height:100%; top:0px; cursor:pointer; display:block; border:none; opacity:0.5}
.slider-wrap .slick-arrow.slick-prev{ left:0px; background-position:  0 center;}
.slider-wrap .slick-arrow.slick-next{ right:0px; background-position:-32px center;}
.slider-wrap .slick-arrow:hover{opacity:1}

h3.fs{ font-size:18px; text-align:center; text-transform:uppercase}
.wrapper.fs{ background:#eee; padding:30px 0px;}

.fs .morelink-wrap{text-align:right; padding:0 40px}
.fs .morelink{ display:inline-block; text-align:right;     color: #636262;}
.fs .morelink:hover{ text-decoration:underline}
.fs .arrow:after {background-position:-20px center;} 

/*********************************************************/
.over-content a{ display:block; text-align:center;}
.over-content .item{ padding:10px; border-bottom: 1px solid #eee}

.over-content .title{ text-align:center; padding:10px; background:#5cc0f3; text-transform:uppercase; font-size:14px; color:#FFFFFF;}

.screen-5{ padding: 15px; }
.fotos { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 20px; max-width: 1100px; margin: auto}
.fotos .foto-item { width: calc(50% - 10px); margin-bottom: 10px}
.fotos .foto-item img { display: block; width: 100%;  border-radius: 4px;}

.acms_popup_wrapper {background-color: #83cffc !important; border-radius: 4px !important;}

.popup-form label {font-weight: 600;padding: 6px;display: block;}
.popup-form .title-wrap .text{font-size: 16px;margin: 15px;}
.popup-form .field-error{ color: #d15d5d}
@media only screen and (min-width: 480px) {	
	 body{ background-size: 130%}


	.screen-1 .adress-wrap .item{line-height: 1.5em}
	.screen-3 .img{width: 100%; height: 100%;background-position: center;}
	.screen-3 .img-wrap{width: 50%; height: 246px; padding-top: inherit}
	.screen-3 .left-side{}
	.screen-3 h3{width: 200px;padding: 10px 0 5px 0; text-align: left}
	.screen-3 .item{display: flex; box-sizing: border-box; justify-content: space-between; border-radius: 3px; margin: auto}
	.screen-3 .item-1,.screen-3 .item-3,.screen-3 .item-5{ flex-direction: row-reverse}
	.screen-3 .item ul{width: 190px; padding-left: 13px}
	.screen-3 .item-1 .sides-wrap, .screen-3 .item-3 .sides-wrap, .screen-3 .item-5 .sides-wrap{padding-left: 15px}
	.screen-3 .item-2 .sides-wrap, .screen-3 .item-4 .sides-wrap{padding-right: 20px}
	.screen-3 .button{margin: inherit}
	footer .menu-wrap{    width: 290px; top: 20px;}
	footer{height: 85px}
}
@media only screen and (min-width: 600px) {
		 body{background-attachment: fixed; background-size: cover}

	
		header .menu-button{display: none}
	header .main-menu{display: flex; position: absolute; right: 10px; top: 28px;}
	header .item{font-size: 12px;box-sizing: border-box;padding: 0}
	header .item a:hover{border-bottom: 2px solid #56BBF7}
	header .item:after{ content:"/"; display:inline-block; padding:0 7px;     color: #00a6f7; }
	header .item:last-child:after{ display:none}

	header .item{font-size: 14px}
	.screen-1 .container{position: absolute;;padding-bottom: 20px; background-image: url(/images/glass-11.png);background-repeat: no-repeat;width: 100%;z-index: 1109; height: 420px;background-size: cover; background-position: top}
	.screen-1 .wrapper{height: 325px}
	.screen-1 .content-wrap{ background:inherit;position: absolute; right: 0; top: 0; width: 340px;z-index: 1110}
	.screen-1 .telephone-wrap .item{text-align: right; padding-right: 20px}
	.screen-1 .e-mail{text-align: right; padding-right: 20px}
	.screen-1 .adress-wrap .item{text-align: right; padding: 0 25px 10px 80px;}
	.screen-1 .button-wrap{padding-left: 120px; padding-bottom: 20px}
	.screen-1 .button-wrap .button{text-align: right; width: 170px; padding-right: 20px}
	.screen-1 .title{margin: 0}
	.screen-1 .about{max-width: 1200px; margin: auto}
	.screen-1 .about-wrap{padding: 20px 0}
	.screen-1 .about-text{text-align: left;padding: 5px 50px;}
	.screen-1 .item-1{padding-top: 20px}
	.screen-2 .content-wrap{width: 560px; margin: auto; display: flex; justify-content: space-between; padding-top: 40px}
	.screen-2 .item{width: 30%}
	.screen-2 .text{width: auto}
	.screen-2 .title{position: absolute; right: 0; top: 10px; width: 200px; text-align: right; padding-right: 30px}
	.screen-3 .title{width: 250px; position: absolute; left: 0; top: 10px; text-align: left; padding-left: 30px}
	.screen-4 .title{position: absolute; right: 0; top: 10px; text-align: right; padding-right: 30px; width: 300px}
	.screen-5 .title{width: 450px; position: absolute; left: 0; top: 10px; text-align: left; padding-left: 30px}
	.screen-6 .title{position: absolute; right: 0; top: 10px; width: 250px; text-align: right; padding-right: 30px}
	.screen-3 .wrapper{padding: 45px 0;}
	.screen-6 .wrapper{    padding: 53px 0 30px 0;}
	.screen-4 {font-size: 16px}
	.screen-4 .img-wrap {padding-bottom: 10px}
	.screen-4 .content-wrap{padding-top: 50px}
	footer .menu-wrap{    width: 386px; top: 30px}
	
	.ajax-form-popup{ max-width:360px; } 
	.ajax-form-row {   width: 240px;}
	.ajax-form-row textarea{ height:120px;}
	
	.screen-7 .yandex-map{height: 350px;}
	
	.screen-5 .content-wrap{ padding-top:30px}
}

@media only screen and (min-width: 800px) {
	header .logo-wrap{left: 20px}
	header .main-menu{right: 20px}
	.screen-1 .content-wrap{width: 450px;}
	.screen-1 .telephone-wrap .item{width: 100%; font-size: 20px; padding: 5px 40px}
	.screen-1 .adress-wrap .item{width: 100%;padding: 0 40px 10px 115px;font-size: 14px}
	.screen-1 .e-mail{padding: 5px 40px;}
	.screen-1 .button-wrap{padding-left: 180px;}
	.screen-1 .wrapper{height: 370px}
	.screen-2 .content-wrap{width: 740px}
	.screen-2 .text-1, .screen-2 .text-3{width: 70%; margin: auto}
	.screen-2 .wrapper{padding: 20px 0 40px 0}
	.screen-2 .title{    padding-right: 40px;}
	.screen-3 .right-side{display: block}
	.screen-3 .img-wrap{width: 41%;height: 251px;}
	.screen-3 .sides-wrap{width:  70%; display: flex}
	.screen-3 .item{width: 700px}
	.screen-3 .right-side p{font-size: 13px}
	.screen-3 .right-side{width: 50%; padding: 20px 10px}
	.screen-3 .left-side{width: 50%; padding: 10px 0 0 20px}
	.screen-3 .item-1 .sides-wrap, .screen-3 .item-3 .sides-wrap, .screen-3 .item-5 .sides-wrap{padding-left: 0}
	.screen-3 .item-2 .sides-wrap, .screen-3 .item-4 .sides-wrap{padding-right: 0}
	.screen-4 .item{display: flex}
	.screen-4 {font-size: 17px}
	.screen-4 p{text-align: left}
	.screen-4 .text-wrap{padding: 25px 9px;}
	.screen-4 .content-wrap{padding: 50px 30px 20px 30px; max-width: 900px; margin: auto}
	.screen-4 .item-6 .img-wrap{padding-left: 10px}
	.screen-6 .text-wrap p{font-size: 16px;padding: 0 30px;line-height: 1.5em;}
	footer .flex-wrap{width:auto;margin: 0; box-sizing: border-box; padding-left: 15px
	}
	footer .logo-wrap{width: 200px;}
	footer .logo-text{font-size: 26px; padding-top: 16px}
	footer .text-wrap p{line-height: 1.2em; font-size: 12px; padding-left: 15px}
	footer .img{width: 72px; height: 38px;}
	footer .menu a{font-size: 18px}
	footer .menu-wrap{width: 475px}
	
	.screen-7 .yandex-map{height: 400px;}

	.fotos .foto-item { width: calc(33.33% - 15px); margin-bottom: 15px}
}
@media only screen and (min-width: 900px){
	header .wrap{height: 75px}
	header .logo{width: 96px; height: 48px}
	header .logo-text{font-size: 36px; line-height: 63px}
	header .main-menu{top:32px;}
	header .item{font-size: 16px}
	.screen-1 .telephone-wrap .item{font-size: 24px;padding: 7px 40px;}
	.screen-1 .adress-wrap .item{font-size: 16px; padding: 0 40px 10px 105px;}
	.screen-1 .button-wrap .button{line-height: 1.5em; font-size: 18px; width: 215px; padding: 18px 24px 18px 15px}
	.screen-1 .content-wrap{width: 480px}
	.screen-1 .e-mail{font-size: 16px; padding: 10px 40px}
	.screen-1 .wrapper{height: 420px}
	.screen-2 .number{font-size: 52px;}
	.screen-2 .text{font-size: 22px;}
	.screen-2 .content-wrap{width: 840px;}
	.screen-3 .item{width: 800px}
	.screen-3 .item ul{font-size: 16px; width: 205px;padding-left: 24px;}
	.screen-3 h3{font-size: 18px; line-height: 1.3em}
	.screen-3 .right-side p{font-size: 15px}
	.screen-3 .right-side{padding: 26px}
	.screen-3 .img-wrap{height: 263px;}
	.screen-4 .content-wrap{max-width: 1000px}
	.screen-6 .button{width: 280px;font-size: 18px;    padding: 20px 40px;}
}
@media only screen and (min-width: 1100px) {
	h2.title-size{font-size: 30px}
	header .wrap{height: 93px}
	header .logo{width: 125px; height: 70px}
	header .logo-wrap{left: 30px}
	header .logo-text{display: block;box-sizing: border-box; font-size: 53px; padding: 20px 0 0 10px; line-height: 50px}
	header .main-menu{top: 36px; right: 30px}
	header .item {font-size:20px}
	header .item:after{ padding:0 10px;}  
	.screen-1 .telephone-wrap .item{font-size: 30px;padding: 10px 40px;}
	.screen-1 .adress-wrap .item{font-size: 18px}
	.screen-1 .e-mail{font-size: 18px; padding: 10px 40px}
	.screen-1 .content-wrap{width: 520px}
	.screen-1 .button-wrap .button{font-size: 24px; width: 295px;    padding: 18px 24px 18px 35px;}
	.screen-1 .button-wrap{padding-left: 145px}
	.screen-1 .wrapper{height: 465px}
	.screen-1 .container{height: 680px}
	.screen-1 .about-text{font-size: 18px}
	.screen-2 .content-wrap{padding-top: 60px}
	.screen-2 .title{width: 300px}
	.screen-2 .wrapper{padding: 20px 0 60px 0}
	.screen-3 .item{width: 1000px}
	.screen-3 .img-wrap{height: 280px}
	.screen-3 h3{font-size: 24px; line-height: 1.3em; width: auto;padding: 10px 0 5px 15px;}
	.screen-3 .item ul{line-height: 1.3em;    padding-left:0}
	.screen-3 .right-side p{line-height: 1.5em}
	.screen-3 .right-side{padding: 40px 30px}
	.screen-3 .item-3 ul, .screen-3 .item-5 ul{padding-left: 17px}
	.screen-4 {font-size: 20px}
	.screen-4 .title{width: 400px}
	.screen-6 .text-wrap{ padding: 30px 100px}
	.screen-6 .text-wrap p{font-size: 18px;line-height: 1.6em;padding:0}
	
	.screen-7 .yandex-map{height: 450px;}
	
	.slider-wrap{height:200px}
		.screen-5 .content-wrap{ padding-top:50px; padding-bottom:20px;}

	.fotos .foto-item { width: calc(25% - 20px); margin-bottom: 20px}



}

@media only screen and (min-width: 1200px) {
	.screen-2 .number{font-size: 72px}
	.screen-2 .text{font-size: 23px}
	.screen-3 .item{width: 1100px}
	.screen-3 .right-side{width: 50%}
	.screen-3 .left-side{width: 50%}
	.screen-3 .item ul{padding-left: 0}
	.screen-3 h3{font-size: 28px;    line-height: 1.1em;}
		
}

@media only screen and (min-width: 1300px) {
	
}

@media only screen and (min-width: 1500px) {

}