/* @import "http://webfonts.ru/import/arsenal.css"; */
/* @import "http://webfonts.ru/import/djserif.css"; */
/* @import "http://webfonts.ru/import/bebasneue.css"; */

* {
	box-sizing : border-box;
	-moz-transition : transform .1s ease, color .5s ease, background-color .5s ease, border .5s ease;
	transition : transform .1s ease, color .5s ease, background-color .5s ease, border .5s ease;
}

.hidden {
	display : none!important;
}

html {
	height : 100%;
}

body {
	font-family : 'Arsenal', 'Calibri', 'Arial', 'Sans-Serif';
	font-size : 13pt;
	padding : 0;
	margin : 0;
	color : #636363;
	height : 100%;
}

.clearfix {
	clear : both;
}

.grid800 {
	width : 700px;
	margin : 0em auto;
	clear : both;
	padding : 5% 15%;
}

.grid1200 {
	width : 1200px;
	margin : 0em auto 0em auto;
	padding : 4em 0em 0em 0em;
	clear: both;
	overflow: hidden;
}

.wide {
	padding : 1em 0em;
	margin : 0em 0em 0em 0em;
}


/* MAIN BANNER */

#mainBanner {
	display : inline-block;
	display : flex;
	width : 100%;
	min-height : 100%;
	position : relative;
	background-image : url('../images/mainbanner.jpg');
	background-position : center center;
	background-size : cover;
	background-repeat : no-repeat;
	padding : 4rem 1rem 1rem 1rem;
	/*min-height : 43rem;*/
}

#mainBanner>div {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-align: center;
    min-height: 100%;
    position: relative;
    border: 2px solid #fff;
    z-index: 2;
    background: rgba(255, 255, 255, 0.0);
}

#mainBanner #backShade {
	border : 0;
	background-image : url('../images/panelShade.png');
	background-size : contain;
	background-repeat : no-repeat;
	background-position : left top;
	position : absolute;
	top : 0;
	left : 0;
}

#serviceMan {
	position : absolute;
	bottom : 0;
	right : 0;
	height : 80%;
	width : 30%;
	background-image : url('../images/special.png');
	background-position : center bottom;
	background-repeat : no-repeat;
	background-size : contain;
}

#servicesPanel {
	position : absolute;
	top : 0;
	left : 0;
	height : 100%;
	display : none;
	padding-top : 4em;
	padding-left : 2rem;
	
}

#servicesPanel a {
	display: block;
    padding: 0;
    position: relative;
    margin: 4rem 0;
}

#servicesPanel a img {
	display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 5rem;
    height: auto;
    z-index: 2;
}

#servicesPanel a.item001 img {
	margin-top: -7%;
}

#servicesPanel a.item002 img {
	height : 5rem;
	width : auto;
	margin-left : -6%;
}

#servicesPanel a.item001 { left : 0em; }
#servicesPanel a.item002 { left : 1em; }
#servicesPanel a.item003 { left : 2em; }
#servicesPanel a.item004 { left : 3em; }

#servicesPanel a div {
    background-color: #ff8004;
    font-family: 'Roboto Condensed', sans-serif;
    color: #fff;
    text-transform: uppercase;
    padding: .5em .5em .5em 4em;
    display: inline-block;
    /* width: 14rem; */
    line-height: 2em;
    margin: 0;
    width: 12rem;
    /* margin-left: 10%; */
    vertical-align: middle;
    /* height: 4rem; */
    position: relative;
    left: 2rem;
    top: 1rem;
}

#servicesPanel a div p {
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    padding: 0;
    margin: 0;
}

/* Main offer */

#mainOffer {
	display: block;
    width: 50rem;
    /* margin: 6rem auto; */
    /* text-align: center; */
    /* padding: 0 20%; */
	
}

#mainOffer h1 {
	font-size: 2.5rem;
    text-transform: uppercase;
    /*background: rgba(255, 255, 255, 0.3);*/
    padding: .2em 10%;
	text-shadow : 1px 1px 1px #000;
	color : #fff;
    margin: 0;
	font-family: 'Roboto Condensed', sans-serif;
    /* text-align: left; */
}

#mainOffer p {
	display: block;
    width: 60%;
    /* text-align: left; */
    text-transform: uppercase;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.65);
    font-size: 1.2rem;
    margin: .5rem auto;
    font-weight: bold;
	color : #252525;
}

#mainOffer a {
	display : block;
	width : 30%;
	background-color: #070707;
    text-transform: uppercase;
    border: .2rem solid #ff8004;
	color : #ff8004;
	padding : .5rem;
	font-weight : bold;
	margin : .5em auto;
	z-index : 3;
	position : relative;
}

#mainOffer a:hover {
	background-color : #ff8004;
	color : #fff;
}

#mainOffer img {
	display : inline-block;
	width : 15%;
	height : auto;
	padding : 0;
	margin : 1rem;
}


.splitter {
	display : block;
	width : 30%;
	height : .2rem;
	background-color : #fff;
	margin : .5rem auto;
	transition : margin .5s ease, width .5s ease;
}

*:hover>.splitter {
	width : 90%;
}

/* MENU */

#mainNav {
	display : inline-block;
	width : 100%;
	position : fixed;
	top : 0em;
	left : 0em;
	padding : 0em;
	padding-left : 1rem;
	text-align : left;
	z-index : 999;
	background-color : #FBFBFB;
	transition : padding-left .5s ease;
}

#mainNav a {
	display : inline-block;
	font-size : 1.5rem;
	color : #aaa;
	font-family : 'Roboto Condensed', sans-serif;
	text-decoration : none;
	padding : .6rem 1rem; 
}

#mainNav a:hover {
	background-color : #fff;
	color : #ff8004;
}

#mainNav #phone {
	float : right;
	color : #FF8004;
	font-size : 2.5rem;
	padding : .1rem 1rem; 
}

#mainNav #menuLogo {
	display : inline-block;
	width : 9rem;
	background-image : url('../images/logo.png');
	background-position : center center;
	background-repeat : no-repeat;
	background-size : contain;
	position : absolute;
	left : -100%;
	top : .1rem;
	transition : left .5s ease;
}

#mainNav #menuLogo:hover {
	background-color : transparent;
}

@media (min-width: 1200px) {

	#mainNav.scrolled {
		padding-left : 10rem;
	}

	#mainNav.scrolled #menuLogo {
		left : 0em;
	}

}
	
#mainBanner #logo {
	display : inline-block;
	width : 15em;
	height : 5em;
	
	position : absolute;
	background-image : url('../images/logo.png');
	background-position : center center;
	background-repeat : no-repeat;
	background-size : contain;
	top : 1rem;
	left : 1rem;
	
	z-index : 2;
}

#mainBanner #phone {
	display : inline-block;	
	position : absolute;
	top : 1rem;
	right : 2rem;
	color : #fff;
	font-family : 'Roboto Condensed', sans-serif;
	font-size : 3em;
	text-decoration : none;
	text-shadow: 1px 1px 2px #000;

}


/* blocks */

section>div>h2 {
    text-align: center;
    text-transform: uppercase;
    color: #5D5D5D;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 3em;
}

section>div>h2::after {
	display : block;
	content : '';
	width : 10%;
	margin : 0 auto;
	padding : 0;
	height : .3rem;
	background-color : #ccc;
}


#aboutUs #choosers img {
	display: inline-block;
    width: 15%;
    height: auto;
    /* border: 1px solid #aaa; */
    margin: 0 2rem;
}

#aboutUs #choosers {
	text-align: left;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 0;
    /* padding-left: 20%; */
    display: flex;
	width  :60%;
	margin : 0 auto;
}

#aboutUs:after {
	display : inline-block;
	position : absolute;
	top : 0;
	left : 0;
	right : 0;
	bottom : 0;
	background-color : rgba(255,255,255,0.75);
	content : '';
	z-index : 0;
}

#aboutUs .gridFlex {
	z-index : 1;
	position  :relative;
}

#aboutUs {
	position : relative;
	text-align : center;
}

#aboutUs h3 {
    width: 100%;
    text-transform: uppercase;
    text-align: center;
    font-weight: normal;
    color: #5d5d5d;
    font-size: 2.5rem;
    margin: 1rem 0;
    /* border-bottom: 1px solid; */
    /* padding-left: 4%; */
    font-family: 'Roboto Condensed', sans-serif;
}

#aboutUs article p {
	font-size : 1.2em;
	margin : 0 0 1rem 0;
	/* padding-left : 20%; */
}

#aboutUs {
	background-image : url('../images/about.jpg');
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}

#aboutUs .img {
	width : 40%;
	background-image : url('../images/about.png');
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}

#aboutUs article {
	width : 60%;
}

#services {
	background-color : #eee;
}

.services .gridFlex .flexBlock div {
	background-color : #fff;
	box-shadow : .1em .1em .2em #aaa;
	padding : 1em 0 0 0;
	
	background-position : right bottom;
	background-repeat : no-repeat;
	background-size : auto 40%;
	width : 48%;
	margin : 1%;
	display: inline-flex;
    /* min-height: 30rem; */
    flex-direction: column;
    /* align-items: center; */
    justify-content: space-between;
}

#preparates.services .gridFlex .flexBlock div {
	width : 30%;
	background-size: auto 33%;
}

.flexBlock {
	display : flex;
	flex-wrap : wrap;
	justify-content : space-around;
}


.special {
	background-color: #ff8004;
    color: #fff;
    font-size: 1.2rem;
	text-align : center;
	background-image : url('../images/special.jpg');
	background-size : cover;
}

.special .flexBlock {
	flex-wrap : nowrap;
}

.special b {
	font-size : 2rem;
}


#aboutUs .flexBlock {
	/* padding-left : 20%; */
	margin : 2rem 0;
}

#aboutUs .flexBlock div {
	text-align : center;
	/* width  : 32%; */
}

#aboutUs .flexBlock div i {
	font-size : 3rem;
	color : #000;
	display : inline-block;
	margin-bottom : 1rem;
}

#gallery.belt .flexBlock a {
	width : 15%;
	padding : 0;
	height : auto;
	/* display : inline-flex; */
	outline : 0;
	background-color : transparent;
}

#gallery.belt .flexBlock a img {
	display : inline-block;
	border : 1px solid #fff;
	width : 100%;
	height : auto;
	outline : 0;
	padding : 0;
	transition : opacity .5s ease;
}

#gallery.belt .flexBlock a:hover img {
	opacity : .7;
}

#aboutUs .flexBlock div p { font-size : 1.2rem;	color : inherit; margin : 0; line-height : 1; }
#aboutUs .flexBlock div .small { font-size : .8rem;	color : #5d5d5d; }
#aboutUs .flexBlock div .big { font-size : 3rem;	color : #ff8004; }

#services .item001 { background-image : url('../images/services/back001.jpg');}
#services .item002 { background-image : url('../images/services/back002.jpg');}
#services .item003 { background-image : url('../images/services/back003.jpg');}
#services .item004 { background-image : url('../images/services/back004.jpg');}

#preparates .item001 { background-image : url('../images/preps/001.png');}
#preparates .item002 { background-image : url('../images/preps/002.png');}
#preparates .item003 { background-image : url('../images/preps/003.png');}

#services .gridFlex div:first-of-type {
	/* margin-left : 0; */
}

#services .gridFlex div:last-of-type {
	/* margin-right : 0; */
}

.services .gridFlex div h3 {
	text-transform : uppercase;
	font-family : 'Roboto Condensed', sans-serif;
	padding : 1rem 1rem 0 1rem;
	text-align : center;
	font-size : 1.5em;
	margin : 0;
}

.services .gridFlex div p {
	padding : 1em;
	margin : 0;
}

.services .gridFlex div>a {
    display: inline-block;
    margin: .5rem;
    width: 45%;
    text-align: center;
    background-color: #5DAF0B;
    background-color: #FF5E00;
    text-transform: uppercase;
    cursor: pointer;
    padding: .5em 0;
    color: #fff;
	font-weight: bold;
    border: 1px solid #fff;
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
}

.services .gridFlex div>a i {
	display : none;
}

.services .gridFlex div>a:hover {
	background-color : #FFBC00;
}

.services .gridFlex ul a {
	color : #0E6AA7;
	text-decoration : underline;
}

.services .gridFlex ul a:hover {
	text-decoration : none;
}

.services .price {
	list-style: none;
    background-color: #427898;
    background-color: #FFA36D;
    margin: 0;
    padding: 1em 2em;
    color: #fff;
    text-align: center;
}

.services .price li:first-of-type {
	font-size : 1.5em!important;
}

.services .price li:last-of-type {
	font-size : .8em;
}

.services ul:last-of-type {
	/* margin-bottom : 4rem; */
}

.services ul {
	margin-top : 0;
}

#advantages {
	
}

#advantages div {
	text-align : center;
}

#advantages div h3 {
	text-transform : uppercase;
	padding : .5rem .5rem .5rem .5rem;
	margin : 0;
}

#advantages div p {
	padding: 0 .5rem 3em .5rem;
    margin: 0;
}

#advantages img {
	display : inline-block;
	width : 30% 
}


#howwework {
	text-align : center;
}

#howwework>div>div {
	padding : 2em;
}

#howwework i {
	display: inline-block;
    font-size: 4em;
    color: #FFA055;
}

#howwework a {
	color : #0E6AA7;
	text-decoration : underline;
}

#howwework a:hover {
	text-decoration : none;
}


.belt {
	background-color : #aaa;
	background-position : center center;
	background-size : cover;
	background-repeat : no-repeat;
	color : #aaa;
}

.belt>div {
	background-color : rgba(0,0,0,0.8);
}

.belt h2 {
	text-align: center;
    color: #fff;
    font-size: 2em;
    font-family: 'Roboto Condensed', sans-serif;
    margin: 0 0 0 0;
    padding: .5rem 2em;
    font-size: 2.5em;
}


.belt p {
	text-align : center;
	margin : 0;
	padding : .2em;
	
}

.belt .price {
	text-transform : uppercase;
	font-weight : bold;
	text-align : center;
	font-size : 1.2em;
	padding : 1em 0 0 0;
	margin : 0;
}

.belt a {
	display : block;
	width : 80%;
	max-width : 20em;
	background-color : #ff8004;
	margin : .5rem auto;
	padding : .2em;
	color : #fff;
	text-transform : uppercase;
	font-family : 'Roboto Condensed', sans-serif;
	text-align : center;
	font-size : 1.5em;
}

.belt a:hover {
	background-color : #BD5E01;
}

#offer001 { background-image : url('../images/special001.jpg');}
#offer002 { background-image : url('../images/special002.jpg');}
#offer003 { background-image : url('../images/special003.jpg');}
#gallery { background-image : url('../images/special004.jpg');}

.belt .icon {
	display : block;
	width : 10rem;
	height : 10rem;
	background-position : center center;
	background-size : contain;
	margin : 0 auto;
}

#offer001 .icon { background-image : url('../images/promoIcon2.png'); }
#offer003 .icon { background-image : url('../images/promoIcon1.png'); }

#contacts {
	background: #252525;
    border-top: 2px solid #aaa;
}

#contacts h2 {
	text-align : left;
	font-size : 2em;
	font-weight : normal;
	margin : 0;
	padding : .1em 0;
	color : #aaa;	
}

#contacts h2:after {
	width : 40%;
	margin : 0 auto 0 0;
	height : .1rem;
}

#contacts p {
	margin : 0;
}

#contacts .phone {
	display : inline-block;
	color : #fff;
	font-size : 3em;
	font-family : 'Roboto Condensed', sans-serif;
	padding : .1rem 0;
	margin : 0;
}

#contacts .phone a {
	color : inherit;
	text-decoration : none;
}

#contacts .mail{
	color : #aaaaaa;
	font-size : 1.5em;
	font-family : 'Roboto Condensed', sans-serif;
	padding : .1rem 0;
	margin : 0;
}

#contacts .mail a{
	color : inherit;
	text-decoration : none;
}

#copy {
	text-align : center;
	color : #fff;
	background-color : #1D1D1D;
}

#copy a {
	text-decoration: underline;
    color: #525252;
    padding: .5em;
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
}

#copy a:hover {
	text-decoration : none;
}

@media (max-width: 1200px) and (min-width: 1024px) {
	#mainNav a {
		font-size : 1.2rem;
		line-height : 1.5rem;
	}
	
	#mainNav #phone {
		line-height : 1;
		font-size : 2rem;
	}
	/*
	#mainNav.scrolled {
		padding-left: 8rem;
	}
	*/
}

@media (max-width: 1023px) {
	#mainBanner #logo {
		position : static;
		width : 100%;
		margin-top : 1em;
	}
	
	#mainBanner #phone {
		position : static;
		width : 100%;
		text-align : center;
	}
	
	#mainBanner {
		height : auto;
		min-height : 0;
		padding : .5rem;
		flex-direction : column;
	}
	
	#mainBanner>div {
		height : auto;
		min-height : 0;
		flex-direction : column;
	}
	
	.special .flexBlock {
		flex-direction : column;
		align-items : center;
	}
	
	.special .flexBlock div {
		margin : 1rem 0;
	}
	
	#aboutUs article {
		width : 100%;
	}
	
	#aboutUs .flexBlock div p {
		padding : 0;
	}
	
	#mainNav {
		height : auto;
		min-height : 0;
		text-align : center;
	}
	
	#mainOffer img {
		width : 15%;
		margin : .2rem;
	}
	
	
	#mainOffer {
		margin : 0;
		padding : .5em;
		width : 100%;
	}
	
	#mainOffer h1 {
		font-size : 2em;
	}
	
	section>div>h2 {
		font-size : 1.8em;
	}
	
	#mainOffer a {
		width : 80%;
	}
	
	.services .gridFlex .flexBlock {
		flex-direction : column;
	}
	
	.services .gridFlex .flexBlock div, #preparates.services .gridFlex .flexBlock div {
		width : 100%;
	}
	
	#gallery.belt .flexBlock a {
		width : 30%;
	}
	
	.services .gridFlex div p {
		background-color : rgba(255,255,255,0.8);
	}
	
	#aboutUs article p {
		padding : 1rem 0;
		font-size  : 1.2rem;
		margin : 0;
		/* background-color : rgba(255,255,255,0.8); */
	}
	
	#aboutUs article .item3 {
		width : 100%;
		margin-top : 2rem;
	}
	
	#aboutUs>.gridFlex {
		padding : 0;
	}
	
	#aboutUs>.gridFlex>* {
		padding-left  :1rem;
		padding-right  :1rem;
	}
	
	
	#aboutUs>div {
		background-image: url('../images/about.png');
		background-image: none;
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: auto 70%;
	}
	
	#aboutUs #choosers {
		width  :100%;
		/* padding-left: 0%; */
		background-color : rgba(255,255,255,0.8);
	}
	
	#aboutUs h3 {
		text-align : center;
		padding : 0 1rem;
	}
	
	#aboutUs #choosers img {
		width  :40%;
		margin : 4%;
	}
	
	.belt h2 {
		padding : .5rem;
		font-size : 2em;
	}
	
	#contacts {
		text-align : center;
	}
	
	#contacts h2 {
		text-align: center;
	}
	
	#contacts h2:after {
		margin : 0 auto;
	}
	
	#contacts .phone {
		font-size : 2em;
	}
}