/* CSS Document */

*, html {margin:0; padding:0;}
*, *:after, *:before {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing:border-box; 
	box-sizing:border-box; 
	padding:0; margin: 0;
}
.clear {clear:both;}
body { 
	font:16px sans-serif; 
	font: 18px HelveticaNeue-Light, sans-serif; 
	font: 100 20px "Myriad Pro", Arial, sans-serif;
	color: var(--main-color); 
	background: var(--bg-main-color);
}
section, .container, FOOTER { 
	width:100%; 
	clear:both; 
}
article {
    max-width:1200px;
    margin:0 auto;
	padding: 100px 20px;
    position: relative;
    z-index: 10;
}
.content {
    max-width:1200px;
    margin:0 auto 20px;
    z-index: 10;
}

img, embed, object, video, iframe {max-width: 100%;}
img {display: block;}

H2 {
    font: 600 45px 'MagistralC';
	font: 34px roboto_medium, sans-serif;
	margin-bottom: 20px;
	color: var(--H2-color);
    position: relative;
    z-index: 15;
	position: relative;
		&:before {
			content: '';
			width: 5em;
			height: 5px;
			background: red;
			position: absolute;
			bottom: -5px;
			left: 0;
		}
}
H2 span {
	display: block;
	font-size: 0.8em;
	opacity: .7;
}
H3 {
	font: 400 30px/1em "Myriad Pro", sans-serif;
	margin: 20px 0;
	color: var(--H3-color);
}
H3 span {
	display: block;
	font-size: 0.8em;
	opacity: .8;
}
H4 {
    font: 20px HelveticaNeue-Regular, sans-serif;
    font: 20px 'SF Pro Display', sans-serif;
	font: 20px 'roboto_cnregular', sans-serif;
    font-weight: 400;
	text-transform: uppercase;
	color: #38c;
}
p {
	margin-bottom: 10px;
	text-align: justify;
}
a {color: inherit;}
a:hover {text-decoration: none;}
ol {counter-reset: li;}
ol li {
    list-style: none;
    font-size: var(--li-font-size);
    text-align: left;
    margin-bottom: 20px;
    padding: 40px 0 0;
    position: relative;
	
	&:before {
        display: initial;
        position: absolute;
        top: -5px;
        left: 0px;
        font: 30px 'roboto_cnregular';
        color: #38C;
        content: counter(li, decimal-leading-zero) ".";
        /* content: counter(li, decimal-leading); */
        counter-increment: li;}
}


/******************************************** COMMON **************************************/
.flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.blocks-2 li, .blocks-3 li, .blocks-4 li {list-style: none; }
.blocks-2 li {flex-basis: calc(50% - 15px); margin-bottom: 30px;}
.blocks-3 li {flex-basis: calc(33.33% - 20px); margin-bottom: 30px; }
.blocks-4 li {flex-basis: calc(25% - 10px); margin-bottom: 20px; }

.shadow-blocks li {
	box-shadow: 2px 2px 10px #999;
	margin-bottom: 4%;
}

.box-blocks li {}
.box-blocks.blocks2 li, .box-blocks.blocks2 div {
	padding: 30px 25px;
}
.box-blocks.numbered_blocks li {
	padding: 0px 0 0 45px;
	margin-bottom: 5px;
}
.flex li H3 {
	margin: 0 0 5px;
    font: 30px/1em "Roboto_cnbold";
    font-family: 'roboto_cnregular';
}
.blocks2 div, .blocks2 li, .blocks3 div, .blocks3 li, .blocks4 div, .blocks4 li {
    position: relative;
    z-index: 10;
	list-style: none;
}
.blocks2 li, .blocks2 div, .blocks2 article {
	flex-basis: 49%;
	margin-bottom: 2%;
}
.portfolio .big-img {
	flex-basis: 49%;
}

.blocks3 li, .blocks3 div, .blocks3 article {
	flex-basis: 32%;
	margin-bottom: 2%;
}
.blocks4 li, .blocks4 div, .blocks4 article {
	flex-basis: calc(25% - 15px);
	margin-bottom: 3%;
}
.none {display: none !important;}


/****************************************** COLORS **************************************/
:root {
	--main-color: #555;
	--bg-main-color: #FFF;
	--bg1-color: white;
	--bg2-color: #FFFADA;
	--bg3-color: #F6F6F6;
	--text1-color: #333;
	--text2-color: #777;
	--H1-color: #FFF;
	--H2-color: #246;
	--H3-color: #37B;
	--button-color: #E5B52B;
}

.white {background:var(--bg-color); --bg-color:#FFF;}
.snowwhite {--bg-color:#F7F9F8; background-color: var(--bg-color);}
.beige {background-color:var(--bg-color); --bg-color:beige;}
.lightblue {--bg-color:aliceblue;}
.grey {--bg-color:#F2F2F2; background-color: var(--bg-color);}
.dark-grey {--bg-color: grey; background-color: var(--bg-color);}


/****************************************** HEADER **************************************/
HEADER {
	background-color: var(--bg1-color);	 
	border-bottom: 1px solid #999;
}
HEADER article {
	display: flex;
	padding: 10px 20px;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}
#logo { 
	margin: 15px 0 10px;
	text-decoration: none;
}
#logo span {
	width: 28em;
	padding: 10px 0 10px 0px; 
	font: 17px 'roboto_cnregular', sans-serif;
    text-transform: uppercase;
	color: #777;
	display: none;
}
#logo span strong {display: block; font-size: 120%; }
HEADER address {
	flex-basis: 10em;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-end;
}
.tel {
    --link-color: #777;
	color: var(--link-color);
	padding: 0;
}
.tel .fa {
	padding: 5px 8px;
	font-size: 30px;
	border: 2px solid;
    border-radius: 50%;
}
.tel .telegram .fa, .tel .whatsapp .fa {
	border: none;
	font-size: 45px;
	padding: 0;
}
.tel .telegram .fa {
	border: none;
	margin: 0;
	font-size: 40px;
}
.tel a {
	text-decoration: none; 
	line-height: 1.7em;
	display: flex; 
}
.tel a.order_call {
    font-size: 20px;
    width: auto;
    align-self: end;
		&:after {
			content: '';
	        width: 0%;
	        height: 2px;
	        position: absolute;
	        left: 0px;
	        bottom: -0px;
	        max-width: calc(100% - 0px);
	        background-color: var(--address-color);
			-webkit-transition: all 0.3s ease 0s;
	        -moz-transition: all 0.3s ease 0s;
	        -ms-transition: all 0.3s ease 0s;
	        -o-transition: all 0.3s ease 0s;
	        transition: all 0.3s ease 0s;			
		}
		&:hover:after {
			width: 100%;
		}
}

/************************************* DESCRIPTION ************************************/
#description {
	background: black url('../images/head-img.jpg') no-repeat right bottom;
	background-size: cover;
}
#description article {
	padding-top: 150px;
	padding-bottom: 150px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
#description div {
	max-width: calc(100% - 280px);
	max-width: 43em;
}
H1 {
	font: 54px Candara, sans-serif;
    font: 45px 'roboto_cnitalic', sans-serif;
    margin: 0px 0 70px;
    text-shadow: 2px 2px 1px #222;
	color: var(--H1-color);
	position: relative;
		&:before {
			content: '';
			width: 5em;
			height: 5px;
			background: red;
			position: absolute;
			bottom: -20px;
			left: 0;
		}
}
H1 span {
	display: block;
	font-size: 0.8em;
	opacity: 0.8;
	padding: 5px;
	/*margin-top: 20px;*/
}
#description H3 {
	padding: 0px;
	margin: 0;
    font: 22px 'roboto_ltregular', sans-serif;
	color: bisque;
	-webkit-box-decoration-break: clone;
}
#description address {
	/*background-color: rgba(0,0,0, .7);*/
	padding: 15px 0px 0;
    justify-content: flex-start;
	align-items: center;
}
#description address H4 {
	font: 30px/1.1em roboto_cnregular, sans-serif;
	text-align: right;
	margin-bottom: 10px;
	padding-right: 5px;
	flex-basis: auto;
}
#description address p {
    width: 11em;
	margin-bottom: 5px;
	font: 20px/1.1em roboto_condensedlight, sans-serif;
    text-align: right;
    color: gold;
}

#description address .button {
	width: fit-content;
	padding: 5px 10px;
	/*--main-color: #222;*/
	--bg-color: gold;
	/*color: var(--bg-color);*/
	/*background-color: var(--main-color);*/
	/*border-color: var(--bg-color);*/
		&:hover {
		background-color: transparent;
		border-color: white;
	}
}

/**************************************** NUMBERS ***************************************/
#numbers {background-color: #fAf7F7;}
#numbers article {
	padding-top: 20px;
	padding-bottom: 50px;
}
#numbers  ul {
	margin-left: 0;
	list-style: none;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}
#numbers li {
	flex-basis: calc(33% - 20px);
	max-width: 180px;
	font-size: 18px;
	text-align: center;
}
#numbers span {
	display: block;
	padding-top: 15px;
	font: 34px roboto_cnregular;
	line-height: 1em;
}
#numbers strong {
	text-align: center;
	font: 54px roboto_cnregular;
	font-weight: 100;
}


/******************************************** OFFER **************************************/
#offer {
	background-color: #F3F3F3;
	margin-top: 0px;
	padding: 30px 20px;
	border-left: 4px solid #37B;
}
#offer article {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	padding: 0;
}
#offer H2 {
	font-size: 45px;
	line-height: 1.2em;
	color: #37B;
	position: relative;
		&:before {display: none; }
}
#offer H3 {
	max-width: 30em;
	color: #777;
	font-size: 34px;
}
#offer address {
	justify-content: end;
	position: relative;
	padding: 0;
    margin-top: 20px;
}


/******************************************** SIDE-IMG-BLOCK **************************************/
.side-img-block {
	position: relative;
	/*background-color: transparent;*/
	/*background: #C7DAEA url('../images/benefits-img.jpg') no-repeat right top;
	background-size: 50%;*/
}
#benefits {--bg-image: url('../images/benefits.jpg_');}
#benefits div:last-of-type {background-image: var(--bg-image);}
#about {
	--bg-image: url('../images/benefits.jpg');
	padding-top: 0;
	padding-bottom: 0;
}
#about div:last-of-type {background-image: var(--bg-image);}

.side-img-block article {
	max-width: 100%;
	max-width: 1200px;
	/*padding-left: calc((100% - 1200px)/2);*/
	padding-right: 0;
	display: flex;
	flex-flow: row wrap;
}
.side-img-block H2 {
	flex-basis: 100%;
}
.side-img-block div {
	/*width: calc(50% - 0px);*/
	flex-basis: 50%;
	background-color: #EEEEEC;
	background-color: var(--bg-color);
	background-size: cover;
}
.side-img-block div {padding: 70px 20px;}
.side-img-block div:first-of-type {/*padding-left: calc((100% - 1200px)/2);*/ padding-right: 30px;}
.side-img-block div:last-of-type {padding-right: calc((100% - 1200px)/2);}

#benefits li {
	list-style: none;
	margin-bottom: 0px;
	padding-bottom: 0px;
	padding-left: 50px;
	position: relative;
	
	&:before {
	    display: block;
	    content: '\f26b';
	    font: 40px 'Material-Design-Iconic-Font';
		color: var(--H3-color);
	    position: absolute;
	    top: 25px;
	    left: 10px;
	}
}


/******************************************* ADDRESS ***************************************/

address {
	flex-basis: 100%;
	padding-top: 20px;
	--address-color:#BBB;
	color: var(--address-color);
    --add-color: white;
	--button-bg-color: gold;
	font:100 30px Myriad Pro;
    font: 25px "Roboto_condensedlight";
    font-family: 'roboto_cnregular';
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
}
address.content {padding-top: 0;}
address H3, address H4 {flex-basis: 100%; text-align: center;}
address H4 {
	font-size: 25px;
	color: floralwhite;
}
address .button {
	width: 200px;
	min-height: 50px;
	/*padding: 5px 10px 7px;*/
    margin: 5px;
	display: flex;
	justify-content: center;
	border: 1px solid ;
	/*font:400 18px/1em Myriad Pro;*/
	font-size: 18px;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--main-color);
	background-color: var(--button-bg-color);
	
	&:after {display: none;}
	&:hover {
		color: var(--add-color);
		background-color: var(--main-color);
	}
}
address .button i.fa {font-size: 45px;}
address .button span:after {display: none;}
address a.telegram {
	--main-color: deepskyblue;
    --add-color: white;
	color: var(--main-color);
	--button-bg-color: transparent;
}
address a.whatsapp {
	--main-color: limegreen;
    --add-color: white;
    /*font-size: 18px;*/
    color: var(--main-color);
}

address p, address a {position: relative; }
address a {
    padding: 5px 0px; 
    display: flex; 
    align-items: center;
    text-decoration: none;
}
address a span {
    position: relative;
        &:after {
        content: '';
        width: 0%;
        height: 2px;
        position: absolute;
        left: 0px; 
        bottom: -0px;
        max-width: calc(100% - 0px);
        background-color: var(--address-color);
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -ms-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;}
}
address a:hover span:after {width: 100%;}
address a strong {
    display: block;
    font-weight: 400;
}
.fa {
	display: block;
	margin-top: 3px;
	margin-right: 0.3em;
	font-size: 1.6em;
	text-align: center;
}
.fa:before {
	display: initial;
}
address .fa-whatsapp {/*color: limegreen;*/}
address .fa-telegram {font-size: 1.4em; /*color: deepskyblue;*/ padding: 0; }

address.tel a:hover {opacity: 1; }

FOOTER address {flex-direction: column; padding-top: 0; }
FOOTER address a {
	border: none; 
	max-width: max-content;
	font-size: 22px;
		&:after {
		height: 1px; 
		background-color: white;
	}
}


/**************************************** FOOTER ****************************************/
FOOTER {
    background: url(../images/footer-bg.jpg) no-repeat top center, #000;
    background-size: cover;
    /* background-blend-mode: color; */
    color: #777;
    position: relative;
}
FOOTER:after {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    background-color: rgba(0, 0, 0, .5);
}
FOOTER article {padding-top: 50px;}
FOOTER div {flex-basis: 48%; margin-bottom: 20px; }
FOOTER H2 {width: 100%; text-align: left; color: var(--bg-main-color);}
FOOTER H3 {color: #DDD; margin-top: 0;}
FOOTER H4 {color: #EEE; margin-bottom: 10px; font-size: 22px; }
FOOTER p {margin-bottom: 10px; color: #CCC;}
FOOTER a {color: #FFF;}
FOOTER section {background-color: rgba(0,0,0,.7);}
FOOTER article:first-child {
    display: flex;
    justify-content: space-between;
    color: #777;
    padding-bottom: 0px;
}
FOOTER article:last-child {
	padding-top: 20px;
}
FOOTER article:last-child address {
	flex-direction: row;
	justify-content: flex-end;
}
FOOTER article:last-child a {
    color: #DDD;
    height: 50px;
    display: inline-block;
    background: url(http://pi-arts.ru/pix/pi-arts.png) no-repeat left bottom;
    text-align: center;
}
FOOTER article:last-child a:after {display: none;}
FOOTER address a .fa-whatsapp {background-color: var(--bg-color); }	
FOOTER article:last-child address a .fa-telegram {
	color: lightgrey;
	&:hover	{color: dodgerblue;}}
	



/**to top**/
	#toTop {
	/*display: none; */
	text-decoration:none; 
	position:fixed; 
	/*bottom: 15px; 
	margin-right: -470px !important; 
	overflow:hidden; 
	width: 62px; 
	height: 62px; 
	border:none; 
	text-indent:-999px; 
	z-index:999; 
	background:url(../img/up_btn.png) no-repeat left top; 
	transition: 0s ease; 
	-webkit-transition: 0s ease; 
	-o-transition: 0s ease;*/
}