@b_color1:rgba(0, 0, 0, 0.6);
@font:'Yanone Kaffeesatz', sans-serif;
@top_color:#fff;
@lines_color1:#e4290ba8;
@color:#e4290ba8;
@footer_b_color:#696663;
@h_color:#e3270d;
@nav_color:#5d5d5d;

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&display=swap&subset=cyrillic');
*{
	margin:0;
	padding:0;
	border:none;
	outline:none;
}
a{
	color:inherit;
	text-decoration:none;
}
body{
	max-width:100%;
	overflow:hidden;
	overflow-y:auto;
}
header{
	width:100%;
	height:auto;
	position:relative;
	float:left;
	background:url(../img/fon1.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100% 100%;
	padding-bottom:5vw;
	
	@media screen and (max-width: 800px){
		background:#fff;
	}
}
.logo{
	width:20%;
	height:auto;
	margin-left:2.5%;
	margin-top:2.3vw;
	margin-bottom:0.2vw;
	@media screen and (max-width: 800px){
		display:none;
	}
}
.mobile_logo{
	display:none;
	@media screen and (max-width: 800px){
		width:50%;
		margin-left:25%;
		padding-top:1vw;
		padding-bottom:1vw;
		display:block;
	}
}
#top_line{
	width:100%;
	padding-top:0.2vw;
	padding-bottom:0.2vw;
	background:@b_color1;
	float:left;
}

.top_telefon{
	width:auto;
	float:left;
	color:@top_color;
	margin-left:3%;
	padding-top:0.4vw;
	padding-bottom:0.4vw;
	font-family:@font;
	font-size:1.3vw;
	@media screen and (max-width: 800px){
		width:100%;
		text-align:center;
		padding-top:1vw;
		padding-bottom:1vw;
		font-size:6vw;
		margin:0;
	}
}
.top_email{
	width:auto;
	float:right;
	color:@top_color;
	margin-right:3%;
	padding-top:0.4vw;
	padding-bottom:0.4vw;
	font-family:@font;
	font-size:1.3vw;
	@media screen and (max-width: 800px){
		width:100%;
		text-align:center;
		padding-top:1vw;
		padding-bottom:1vw;
		font-size:6vw;
		margin:0;
	}	
}
#head_info_body{
	width:75%;
	height:auto;
	margin-top:0.3vw;
	margin-bottom:0.2vw;	
	float:right;
	min-height:15vw;
	@media screen and (max-width: 800px){
		width:100%;
		height:auto;
		margin-top:1vw;
		margin-bottom:1vw;		
	}
}
#top_forma_body{
	width:45%;
	float:right;
	height:auto;
	padding-bottom:2vw;
	margin-top:1vw;
	margin-bottom:1vw;
	background:@b_color1;
	margin-right:2.5vw;
	border:1px solid #000000;
	display:none;
	@media screen and (max-width: 800px){
		width:90%;
		padding-left:5%;
		padding-right:5%;
		margin-right:0vw;
	}
}
#top_forma_h1{
	width:100%;
	float:right;
	color:@top_color;
	margin-right:3%;
	padding-top:0.4vw;
	padding-bottom:0.4vw;
	font-family:@font;
	font-size:2vw;
	line-height:1.7vw;
	text-align:center;
	margin-top:0.8vw;
	@media screen and (max-width: 800px){
		font-size:7vw;
		line-height:8vw;
		margin-right:0%;
	}
}
#top_forma_title{
	width:100%;
	float:right;
	color:@top_color;
	margin-right:3%;
	padding-top:0.4vw;
	padding-bottom:0.4vw;
	font-family:@font;
	font-size:1.4vw;
	line-height:1vw;
	text-align:center;
	@media screen and (max-width: 800px){
		font-size:5vw;
		line-height:6vw;
	}	
}
.top_input_block{
	width:100%;
	height:auto;
	float:left;
	margin-top:0.5vw;
}
.top_input{
	font-family:@font;
	font-size:1.4vw;
    margin-left: 5%;
    width: 89%;
	padding-left:1%;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    margin-top: 1vw;
	background:rgba(255,255,255, 0.4);
	@media screen and (max-width: 800px){
		font-size:6vw;
	}
}

.top_input::placeholder{
	color:#000000;
}
.top_input_button{
	background:@lines_color1;
	color:@top_color;
	cursor:pointer;
	border:1px solid #000000;
	font-family:@font;
	@media screen and (max-width: 800px){
		font-size:6vw;
	}
}

#top_slog_block{
	width:50%;
	height:auto;
	min-height:10vw;
	float:right; 
	margin-top: 2.5vw;
	margin-right:2%;
	@media screen and (max-width: 800px){
		width:90%;
		margin-left:5%;
		margin-right:5%;
		margin-top:2vw;
		margin-bottom:2vw;
	}
}
.top_slog_icon{
	width:3vw;
	float:left;
	@media screen and (max-width: 800px){
		width:6vw;	
	}
}
.slogan_title{
	width:auto;
	float:left;
	color:@top_color;
    padding-top: 0.4vw;
    padding-bottom: 0.5vw;
	padding-left: 4%;
    padding-right: 4%;
	font-family:@font;
	font-size:2vw;
	margin-left:3%;
	background:@lines_color1;
	@media screen and (max-width: 800px){
		font-size:5vw;
	}
}
.slogan_row{
	width:90%;
	float:left;
	margin-top:1.5vw;
	margin-left:10%;
	@media screen and (max-width: 800px){
		margin-top:2vw;
		margin-left:0%;		
	}
}
#top_nav{
	width:100%;
	background:@nav_color;
	padding-top:0.1vw;
	padding-bottom:0.2vw;
	float:left;
	border-top:3px solid @nav_color -  20;
}
.nav_block{
	width:auto;
	float:left;
	padding-left:2.2%;
	padding-right:2.2%;
	padding-top:0.4vw;
	padding-bottom:0.4vw;
	font-family:@font;
	background:@nav_color - 20;
	color:@top_color;
    font-size: 1.5vw;
    margin-left: 0.5%;
    border: 1px solid @nav_color - 20;	
	&:hover{
		background:@lines_color1 - 30;
		border: 1px solid #e09589 + 30;	
	}
	@media screen and (max-width: 800px){
		width:100%;
		padding:0;
		padding-top:2vw;
		padding-bottom:2vw;
		font-size:7vw;
		text-align:center;
	}
}
.body_block{
	width:100%;
	float:left;
}
.nav_start{
	margin-left:4.5%;
}

h1{
	color:@h_color;
}@media screen and (max-width: 800px){
	#content_con img{
		width:97%!important;
		height:auto!important;
		padding-left:1.5%!important;
		padding-right:1.5%!important;
	}
	#content_con .text_block{
		width:97%!important;
		height:auto!important;	
		padding-left:1.5%!important;
		padding-right:1.5%!important;
		font-size:22px!important;	
	}
	#content_con .text_block div{
		font-size:22px!important;
	}	
	#content_con .text_block p{
		font-size:22px!important;
	}
	.this_content_block{
		width:97%!important;
		height:auto!important;
		padding-left:1.5%!important;
		padding-right:1.5%!important;		
	}
	.cont_link_title{
		height:auto!important;
		font-size:22px!important;
		padding-bottom:2vw!important;
	}
	h1, h2, h3, h4, h5{
		font-size:7vw!important;
		padding-top:1vw!important;
		padding-bottom:1vw!important;
	}
}

.content_body{
	width:100%;
	float:left;
	position:relative;
}
/* Каталог */

.pages_list_index_body{
	width:99%;
	padding-left:0.5%;
	padding-right:0.5%;
	position:relative;
	float:left;
}
.pages_list_title_line{
    width: 94%;
    margin-right: 3%;
    float: right;
	margin-top:1vw;
	margin-bottom:1vw;
}
.pages_list_title_line h1{
	font-family:@font;
	font-size:2vw;
	margin-top:2vw;
	text-align:center;
	margin-bottom:2vw;
}
#pages_list_body{
    width: 94%;
    margin-right: 3%;
    float: right;
	padding-bottom:5vw;
}





.photobox{
  display: inline-block;
  min-width:100%;
}

.photobox__previewbox{
  position: relative;
  overflow: hidden;
  min-width:100%;
}

.photobox__preview{
  display: block;
  width: 100%;
  height: 15vw; 
  outline:1px solid red;
  outline-offset:-2px;
  @media screen and (max-width: 800px){
   height:auto; 
  }
}

.photobox__previewbox:before{
  content: "";
}

.photobox_type26 .photobox__preview{
	-webkit-transition: -webkit-transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
	transition: -webkit-transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
	transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
	transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
	-webkit-transform: scale(1) rotate(0);
	        transform: scale(1) rotate(0);
}

.pages_list_block:hover .photobox_type26 .photobox__preview{
  -webkit-transform: scale(1.2) rotate(5deg);
          transform: scale(1.2) rotate(5deg);
}

.photobox_type26 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  
  opacity: .2;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  -webkit-clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
          clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
  
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  
  -webkit-transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, -webkit-transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, -webkit-transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
  
  transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
  
  transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, -webkit-transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
  will-change: transform;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}

.pages_list_block:hover .photobox_type26 .photobox__previewbox:before{
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(7);
          transform: translate(-50%, -50%) scale(7);
  -webkit-transition-duration: var(--photoboxAnimationDuration, .4s);
          transition-duration: var(--photoboxAnimationDuration, .4s);
}

.photobox_type26 .photobox__label{
  width: 95%;
  text-align: center;
  
  opacity: 0;  
  -webkit-transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity, transform;
  
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-200%, -50%);
          transform: translate(-200%, -50%);
  z-index: 2;
}

.pages_list_block:hover .photobox_type26 .photobox__label{
  opacity: 1;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
          transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
  -webkit-transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
          transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}

.photobox__label{
	color:@top_color;
	cursor:pointer;
	font-family:@font;	
}
.pages_list_title{
	width:90%;
	padding-left:5%;
	padding-right:5%;
	text-align:center;
	float:left;	
	color:@top_color;
	cursor:pointer;
	font-family:@font;	
	background:@lines_color1;
	padding-top:0.5vw;
	padding-bottom:0.5vw;
	&:hover{
		background:@lines_color1 - 30;
		outline: 1px solid #e09589 + 30;	
	}
}
.pages_list_block{
	width:24%;
	margin-left:1%;
	float:left;
	margin-top:1.5vw;
	@media screen and (max-width: 800px){
		width:100%;
		margin:0;
	}
}#bottom_forma_body{
	width: 90%;
    float: left;
    height: auto;
    padding-bottom: 2vw;
    margin-top:0.5vw;
    margin-bottom:0.5vw;
    margin-right: 2.5vw;
	padding-left:5%;
	padding-right:5%;
	
	@media screen and (max-width: 800px){
		
	}
}
.bottom_forma{
	background: url(../img/fon2.jpg);
    background-attachment: fixed;
    background-size: 100% 100%;	
}
.bottom_input_block{
	width:50%;
	height:auto;
	float:left;
	margin-top:0.2vw;
	@media screen and (max-width: 800px){
		width:100%;
		height:auto;		
	}
}
.center_button{
	width:60%;
	margin-left:20%;
	@media screen and (max-width: 800px){
		width:100%;
		height:auto;	
		margin-left:0%;		
	}
}
.forma_end{
	width:90%;
	margin-left:5%;
	margin-right:5%;
	float:left;
	min-height:15vw;
	display:none;
	color:@top_color;
	padding-top:3vw;
	padding-bottom:3vw;
	font-family:@font;
	font-size:2.5vw;
	text-align:center;
	@media screen and (max-width: 800px){
		width:100%;
		text-align:center;
		padding-top:1vw;
		padding-bottom:1vw;
		font-size:6vw;
		margin:0;
	}
}footer{
	min-height:5vw;
	background:url(../img/footer.png);
	color:@top_color;
	@media screen and (max-width: 800px){
		padding-top:5vw;
		padding-bottom:5vw;
	}
}
.f_logo{
    width: 10%;
    height: auto;
    margin-left: 2.5%;
	float:left;
	@media screen and (max-width: 800px){
		width: 60%;
		height: auto;
		margin-left: 20%;		
		padding-bottom:5vw;
	}
}
.f_center_block{
	width:20%;
	float:left;
	margin-left:30%;
	height:auto;
	margin-top:4vw;
	@media screen and (max-width: 800px){
		width:40%;
		float:left;	
		margin-right:30%;		
	}
}
.footer_icon_top{
	float:left;
	height:2vw;
	margin-left:0.5vw;
	@media screen and (max-width: 800px){
		height:10vw;
		margin-left:0.5vw;		
	}
}
.f_right_block{
	width:20%;
	float:right;
	height:auto;
	padding-top:1vw;
	margin-right:2.5%;
	@media screen and (max-width: 800px){
		width:100%;
		margin:0;
	}
}
.footer_telefon{
	width:auto;
	float:right;
	color:@top_color;
	padding-top:0.3vw;
	font-family:@font;
	font-size:1.2vw;
	@media screen and (max-width: 800px){
		width:100%;
		font-size:6vw;
		padding-bottom:0.5vw;
		padding-top:1vw;
		text-align:center;
	}	
}
.footer_email{
	width:auto;
	float:right;
	color:@top_color;
	padding-top:0.2vw;
	font-family:@font;
	font-size:1vw;	
	@media screen and (max-width: 800px){
		width:100%;
		font-size:6vw;
		padding-bottom:1vw;
		padding-top:1vw;
		text-align:center;
	}
}
.footer_icon_s{
	height:1vw;
	margin-right:0.5vw;
	@media screen and (max-width: 800px){
		height:5vw;
	}	
}
.address{
	width:100%;
	float:left;
	color:@top_color;
	padding-top:0.3vw;
	font-family:@font;
	font-size:1.2vw;
	padding-bottom:1vw;
	@media screen and (max-width: 800px){
		font-size:7vw;
		padding-bottom:3vw;
		padding-top:2vw;
		text-align:center;
	}
}
.start_icon{
	margin-left:22%;
}