@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap&subset=cyrillic,cyrillic-ext');

:root {
	--color-black:	#222;
	--color-red: #FF003E;
	--base-text-size: 15px;
	--base-font: 'Roboto', Tahoma, Arial, sans-serif;
}

@media all and (max-width: 1000px) {
	:root {
		--base-text-size: 13px;
	}
}

/* RESET HTML */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

/*noinspection CssNoGenericFontName*/
BODY {
		margin: 0; background: #FFF;
		font-family: var(--base-font);
		font-weight: 300;
		font-size: var(--base-text-size);
		line-height: calc( var(--base-text-size) * 1.35 );
		color: var(--color-black);
	}


/* базовые */
   IMG{ border: none; max-width: 100%; margin: 0; padding: 0; }
   .wrap { min-width: 240px; max-width: 1146px; width: 94%; margin: 0 auto; }
   .clear { clear: both; }
   .clear:after { content: ""; display: table; clear: both; }
	
   A{ color: blue; }
   A:HOVER{ color: var(--color-red); }
   
   BUTTON{
		padding: 10px 18px; background: none; cursor: pointer;
		border: 1px solid #333; color: #333; transition: 0.5s background;
   }
   BUTTON:HOVER{
	   background: #333; color: #FFF;
   }

   BUTTON.white{
		border: 1px solid #FFF; color: #FFF;
   }
   BUTTON.white:HOVER{
		background: var( --color-red );
		border: 1px solid var( --color-red );
   }
	
   BUTTON.red{
		background: var( --color-red ); color: #FFF; border: none; text-transform: uppercase;
		padding: 12px 20px;
   }
   BUTTON.red:HOVER{
	   background: var( --color-black );
   }
	
   BUTTON.close{
		background: var( --color-red ); padding: 0; width: 50px; height: 50px;
		border: none; border-radius: 50%; position: relative;
   }
   BUTTON.close:before, BUTTON.close:after{
		content: "";
		position: absolute;
		left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg);
		width: 20px; height: 3px; background: #FFF;
	}
	BUTTON.close:before{
		transform: translate(-50%, -50%) rotate(-45deg);
	}
   BUTTON.close:HOVER{
	   background: var( --color-black );
   }
	


	INPUT[type=text],INPUT[type=tel] ,INPUT[type=file], SELECT{ 
		box-sizing: border-box; font-size: 16px; padding: 10px; border: 1px solid #999;
	}
	SELECT > option{ 
		-webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px;
	}

	.acenter{ text-align: center; }


/*
   шапка с лого
*/

   #top{  }
   #top > DIV.wrap{ height: 55px; position: relative; }

   #top > DIV.wrap > A#logo{ 
      position: absolute; left: 0; bottom: 0; display: block;
		font-size: 24px; font-weight: 900; text-decoration: none; color: var(--color-black);
		padding: 5px 0; border-bottom: 6px solid var(--color-red);
   }

   
	#top > DIV.wrap > .contacts{
		position: absolute; right: 0; top: 5px; display: block;
	}
	#top > DIV.wrap > .contacts > DIV{
		display: inline-block; vertical-align: middle; margin-left: 30px;
		text-align: right;
	}
	
	#top > DIV.wrap > .contacts A.insta{
		width: 34px; height: 34px; margin-top: 5px;
		background: url(../i/top_icon_insta.png) center center no-repeat;
		display: inline-block;
	}

	#top > DIV.wrap > .contacts A.mailto{
		margin-bottom: 5px; display: inline-block;
		padding: 0 0 0 22px;
		background: url(../i/top_icon_mail.png) left center no-repeat;
		font-size: var( --base-text-size ); color: #666;
	}
	
	#top > DIV.wrap > .contacts A.mailto:HOVER{
		color: var( --color-red );
	}

	#top > DIV.wrap > .contacts A.phone{ 
		display: block;
		font-size: 20px; font-weight: 900; color: #666;
		text-decoration: none; padding: 2px 0 2px 0;
		/*background: url(../i/phone.png) left center no-repeat;*/
		margin-bottom: 2px;
	}

	#top > DIV.wrap > .contacts A.order-call{
		font-size: 14px; font-weight: 700; text-transform: uppercase;
		color: var( --color-red ); text-decoration: underline;
		cursor: pointer;
	}
	
@media(max-width:720px){
	#top > DIV.wrap{ height: 50px;  }
	#top > DIV.wrap > .contacts > DIV:nth-child(1){ display: none; }
	#top > DIV.wrap > .contacts > DIV:nth-child(2){ display: none; }
}

@media(max-width:440px){
	#top > DIV.wrap{ height: 40px; }
	#top > DIV.wrap > .contacts{ display: none; }
}


/*
   Слайдер
*/

	#slider{
		position: relative;
		background: url(../img/slider.jpg) center no-repeat;
		height: 600px;
		max-height: calc( 100vh - 50px );
		background-size: cover;
	}

	#slider .container{ position: relative; height: 100%; }

	#slider .add_info{ 
		position: absolute; right: 0; top: 50px; width: 25%;
		color: #FFF; font-size: calc( var(--base-text-size)*0.85 ); border: 1px solid #FFF; padding: 20px;
	}

	#slider .header{ position: absolute; bottom: 10%; width: 100%; }
	
	#slider .header > DIV.h1{
		width: 65%; vertical-align: top; float: left; max-width: calc( 100% - 360px );
	}
	#slider .header > DIV.h1 > H1{
		font-size: 42px; line-height: 46px; font-weight: 300; color: #fff;
	}

	#slider .header > DIV.price{
		width: 360px; float: right; text-align: right;
	}
	
	#slider .header > DIV.price > DIV{
		position: relative; display: inline-block;
	}

	#slider .header > DIV.price > DIV .num{
		font-size: 150px; line-height: 130px; font-weight: 900; color: #FFF;
	}
	#slider .header > DIV.price .num SMALL{
		font-size: 65px;
	}

	#slider .header > DIV.price .descr{
		font-size: 33px; font-weight: 400; color: #FFF;
		position: absolute; bottom: 0; left: 6px;
	}
	
@media(max-width:1100px){

	#slider .header > DIV.h1{
		width: 65%; max-width: calc( 100% - 250px );
	}
	#slider .header > DIV.h1 > H1{ font-size: 32px; line-height: 38px; }	
	#slider .header > DIV.price{ width: 240px; }
	#slider .header > DIV.price > DIV .num{ font-size: 110px; line-height: 90px; }
	#slider .header > DIV.price .num SMALL{ font-size: 40px; }

	#slider .header > DIV.price .descr{ font-size: 22px; }
	
}

@media(max-width:680px){
	
	#slider .header{ top: 50%; bottom: unset; transform: translateY(-50%); }
	#slider .add_info{ display: none; }
	#slider .header > DIV.h1{ width: 100%; max-width: 100%; text-align: center; padding-bottom: 30px; }
	#slider .header > DIV.price{ float: none; text-align: center; margin: 0 auto; }
	
}




/*********************************************************************************************************
   
	Блоки на главной

*/

	#content{  }
	#content H1{ font-size: 40px; line-height: 46px; }
	#content H2{ 
		font-style: normal; font-weight: 900; text-align: center;
		font-size: calc( var(--base-text-size) * 2.0 );
		line-height: calc( var(--base-text-size) * 2.4 );
		margin-bottom: 10px;
	}
	#content H3{  }
	#content H4{
		font-style: normal; font-weight: normal;
		font-size: calc( var(--base-text-size) * 1.45 );
		line-height: calc( var(--base-text-size) * 1.55 );
		margin-bottom: 10px;
	}


/*
	преимущества
*/

	#content .advantage{ text-align: center; }
	#content .advantage .items{ padding: 60px 0 120px 0; }
	#content .advantage .items LI{ 
		display: inline-block; width: 21%; margin: 0 2%;
		vertical-align: top;
	}
	#content .advantage .items LI .img{ 
		background: #F0F0F0; width: 90px; height: 90px; margin: 0 auto 20px auto;
		position: relative; border-radius: 50%;
	}
	#content .advantage .items LI .img IMG{
		top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute;
	}


@media(max-width:800px){

	#content .advantage{ text-align: left; }
	#content .advantage .items{ padding: 60px 0; max-width: 500px; margin: auto; }
	#content .advantage .items LI{ 
		display: block; position: relative; width: auto; min-height: 100px; padding: 10px 0 20px 100px;
	}
	#content .advantage .items LI .img{ 
		position: absolute; left: 0; top: 0;
	}

}




/* 
	доп. преимущества
*/

	#content .additional{ height: 600px; position: relative; overflow: hidden; }

	#content .additional .text_bg{
		position: absolute; width: 49%; height: 100%; top: 0; left: 0; background: #1A1B15; z-index: 100;
	}

	#content .additional .text_bg:after{
		position: absolute; z-index: 120; content: ""; width: 0; height: 0; right: -50px; top: 50%; transform: translateY(-50%); 
		border-top: 300px solid transparent; border-left: 50px solid #1A1B15; border-bottom: 300px solid transparent;
	}

	#content .additional .image{
		position: absolute; width: 52%; height: 100%; right: 0; z-index: 90;
		background-size: cover; background-position: center center;
	}

	#content .additional .text{ 
		position: relative; z-index: 110; color: #FFF;  height: 100%;
	}

	#content .additional .text > DIV{ 
		position: absolute; top: 50%; left: 8.5%; transform: translateY(-50%); width: 31.6%;
	}

	#content .additional .text > DIV H2{ 
		text-align: left; font-weight: normal;
		font-size: calc( var(--base-text-size) * 1.75 ); line-height: calc( var(--base-text-size) * 1.85 );
	}
	#content .additional .text > DIV H2:before{
		content: ""; width: 40px; height: 6px; display: block; margin-bottom: 10px;
		background-color: var( --color-red ); 
	}
	
	
	/* - right */
	#content .additional.right .text_bg{ right: 0; left: unset; }
	#content .additional.right .text_bg:after{ left: -50px; right: unset; border-left: unset; border-right: 50px solid red; }
	#content .additional.right .image{ left: 0; right: unset; }
	#content .additional.right .text > DIV{ 
		right: 8.5%; left: unset;
	}

	/* bort */
	#content .additional.item-bort .text_bg{ background: #424342; }
	#content .additional.item-bort .text_bg:after{ border-right-color: #424342; }

	/* advert */
	#content .additional.item-advert .text_bg{ background: #fff; }
	#content .additional.item-advert .text_bg:after{ border-left-color: #fff; }
	#content .additional.item-advert .text{ color: #222; }

	/* delivery */
	#content .additional.item-delivery .text_bg{ background: #292F35; }
	#content .additional.item-delivery .text_bg:after{ border-right-color: #292F35; }
	
	
@media(max-width: 1100px){
	#content .additional{ height: 50vw; }
}
	
@media(max-width: 800px){
	#content .additional{ height: 70vh; min-height: 400px; }
	#content .additional .text_bg{ width: 100%; opacity: 0.85; }
	#content .additional .text_bg:after{ display: none; }

	#content .additional.right .text > DIV,
	#content .additional .text > DIV{ 
		position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%;
	}
	

	#content .additional .image{ position: absolute; width: 100%; }	
	
}
		
	
	/* продукция */
	#content .product{ padding: 120px 0; text-align: center; background: #f2f2f2; }
	
	#content .product UL{ margin-top: 30px; }
	#content .product UL > LI{
		display: inline-block; width: 29.333%; margin: 2%; vertical-align: top;
		text-align: center;
	}
	#content .product UL > LI > DIV{
		margin: 10px; min-height: 40px;
	}


@media(max-width: 540px){
	#content .product{ padding: 90px 0; }
	#content .product UL > LI{ width: 46%; }
}

@media(max-width: 360px){
	#content .product{ padding: 90px 0 40px 0; }
	#content .product UL > LI{ display: block; width: auto; margin: 10%; }
	#content .product UL > LI > DIV{ min-height: unset; }
}
	


	/* калькулятор */
	#content .calculator{ padding: 120px 0; background: #FFF; position: relative; min-height: 300px; }
	#content .calculator H2{ margin-bottom: 30px; }
	#content .calculator .item{ display: inline-block; vertical-align: top; width: 29.333%; margin: 15px 2%; }

	#content .calculator .item.c2{ width: 62.666%; margin: 15px 2%; }
	
	#content .calculator .item .h5{ margin-bottom: 5px; font-size: calc( var(--base-text-size)*1.15 ) }
	#content .calculator .item .value{ font-size: 30px; line-height: 34px; font-weight: 500; }
	#content .calculator .item .price{ font-size: 40px; line-height: 40px; font-weight: 700; color: var( --color-red ); position: relative; }
	#content .calculator .item .price:before{ content: "~ "; color: #999; position: absolute; left: -30px; }

	#content .calculator .item SELECT{ width: 100%; }
	#content .calculator .item INPUT[type=file]{ background: #F0F0F0; width: 100%; }

	#content .calculator .item.c2 INPUT[type=tel]{ width: 70%; margin-right: 2%; }
	#content .calculator .item.c2 BUTTON{ width: 28%; }
	

	#content .calculator .item INPUT[type=range]{
		-webkit-appearance: none; -moz-appearance: none; appearance: none;
		background: #ccc; height:10px; outline: none; width: 100%;
	}

	#content .calculator .item INPUT[type=range]::-webkit-slider-thumb{
		-webkit-appearance: none; -moz-appearance: none; appearance: none;
		width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff;
		background: var( --color-red );
		cursor:pointer; transition:.1s;
	}
	
	#content .calculator .item .min, #content .calculator .item .max{ float: left; font-size: 14px; color: #666; }
	#content .calculator .item .max{ float: right; }
	
	#content .calculator .calculator_message{ 
		height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 100; background: #FFF; text-align: center;
	}
	#content .calculator .calculator_message .message{
		position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	}	


@media(max-width: 720px){

	#content .calculator{ padding: 90px 0; }
	#content .calculator .item{ width: 46%; }
	#content .calculator .item.price{ display: block; width: unset; text-align: center; }
	#content .calculator .item.price .price{ position: relative; }
	#content .calculator .item.price .price:before{ position: relative; left: unset; margin-left: -30px; }
	#content .calculator .item.c2{ display: block; width: unset; }

}
@media(max-width: 540px){

	#content .calculator .item{ display: block; width: unset; }
	#content .calculator .item.c2 INPUT[type=tel]{ width: 100%; margin: unset; }
	#content .calculator .item.c2 BUTTON{ width: 100%; margin: 2% 0 0 0; }

}
	

	/* about */
	#content .about{
		padding: 160px 15%;
		background: url(../i/about.jpg) center center #333;
		text-align: center;
		background-size: cover;
		color: #fff;
	}
	#content .about > DIV{
		margin: 0 auto; max-width: 500px;
	}

@media(max-width: 600px){
	#content .about{
		padding: 90px 20%;
	}
}
	

	/* portfolio */
	#content .portfolio{ padding: 120px 0; background: #222; color: #fff; }
	#content .portfolio H2{ margin-bottom: 40px; }
	#content .portfolio .items{ font-size: 0; line-height: 0; }
	#content .portfolio .items a{ 
		height: 200px; background: #333; margin: 4px; width: calc( 25% - 8px ); display: inline-block;
		background-size: cover;
	}

@media(max-width: 1200px){
	#content .portfolio .items a{ height: 20vw; }
}	


@media(max-width: 600px){
	#content .portfolio{ padding: 90px 0; }
	#content .portfolio .items a{ 
		width: calc( 33.333% - 8px ); height: 25vw;
	}
}



	/* forma */
	
	#content .forma{ padding: 120px 0 90px 0; background: #fff; position: relative; min-height: 300px; }
	#content .forma .items{ margin: 30px auto; max-width: 362px; overflow: visible; }
	#content .forma .items > DIV{ margin: 20px 0; }
	#content .forma .items > DIV INS{ color: var( --color-red ); text-decoration: none; font-size: 150%; }
	#content .forma .items > DIV > input{ width: 99.5%; }
	#content .forma .items > DIV > BUTTON{ width: 99.5%; margin-top: 10px; }
	#content .forma .items > DIV > small{ margin-top: 10px; display: block; font-size: 12px; }
	
	#content .forma .close_btn{ 
		position: absolute; right: 20px; top: 20px; width: 20px; height: 20px; cursor: pointer;
		background: url(../i/x.svg) center center no-repeat; opacity: 0.4;
		display: none;
	}
	#content .forma .close_btn:HOVER{ 
		opacity: 0.8;
	}

	#content .forma .forma_message{ 
		height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 100; background: #FFF; text-align: center;
	}
	#content .forma .forma_message .message{
		position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	}
	
@media(max-width: 600px){
	#content .forma{ padding: 90px 20px 60px 20px; }
}



	#content .show_make_order{
		position: fixed; z-index: 2000; top: 0; left: 0; width: 100vw; height: 100vh;
	}
	
	#content .show_make_order .show_make_order-bg{
		position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; z-index: -1;
		background: rgba(0,0,0,0.80);
	}
	
	#content .show_make_order .forma{
		position: absolute; left: 50%; top: 50%; z-index: 100;
		padding: 60px 20px 40px 20px;
		transform: translate(-50%, -50%);
	}

	#content .show_make_order .close_btn{ display: block; }


	



/*********************************************************************************************************

   Футер

*/


	.contact_map{ }

@media(max-width: 1100px){
	.contact_map{ padding: 20px; }
}


FOOTER{ position: relative; background: #f5f5f5; padding: 10px 0; }
	
	FOOTER > DIV{ position: relative; text-align: center; }
	FOOTER .addr{ line-height: calc( var( --base-text-size )*1.25 ); margin: 20px; }
	FOOTER .addr A{ display: inline-block; text-decoration: none; color: var( --color-black ); }
	FOOTER .addr A[href^="tel:"]{ font-size: calc( var( --base-text-size )*1.35 ); font-weight: 400; margin: 5px; }
	
	FOOTER .to_reklamarket{ 
		background: url(../i/to_reklamarket.png) center center no-repeat; background-size: contain;
		position: absolute; left: 10px; bottom: 10px;
		display: block; width: 150px; height: 30px;
	}

	FOOTER .lobur{ position: absolute; bottom: 10px; right: 10px; color: #999; font-size: 10px; }
	FOOTER .lobur A{ color: #999; }


@media(max-width: 640px){
	
	FOOTER .addr{ }
	FOOTER .to_reklamarket{ position: relative; left: unset; top: unset; transform: unset; margin: 0 auto; }
	FOOTER .lobur{ display: none; }
	
}