@font-face {
	font-family: Philosopher; /* Гарнитура шрифта */
    src: url('/font/Philosopher-Regular.ttf'); /* Путь к файлу со шрифтом */
}

/* Reset the container */
.container {
  min-width: 970px !important;
  max-width: 1200px !important;
}

* {
	padding: 0;
	margin: 0;
}

a {
	color: inherit;
	text-decoration: inherit;
	&:hover {
		color: inherit;
		text-decoration: inherit;
	}
}
label {
	cursor: pointer;
}
@headFont: Philosopher;
@baseFont: "Segoe UI";
@colorGold: #8c7633;
@colorLightGold: #b18712;
@colorGray: #777777;
@colorWhite: #ffffff;
@colorTime: #b8bfbd;
@colorBtnBorder: #b7b7b7;
@colorBtnHover: #dadada;
@colorNavHover: #bda45f;
@colorBtnTop: #eece77;
@colorBtn: #eba116;
@colorBlack: #000000;
@colorBlackOpacity: rgba(0,0,0,0.7);
@colorError: #ee5f5b;
@sizeBig: 24px;
@sizeLarge: 30px;
@sizeSmall: 14px;
@sizeBtn: 16px;
@sizeNormal: 18px;
@sizeHead: 19px;
@sizeVerySmall: 12px;
@footerOtstup: 71px;

html {height: 100%;}  
* html body {height: 100%;} 
body {
	min-height: 100%;
	position: relative;
	font-family: @baseFont;
	font-size: @sizeNormal;
	line-height: normal;
	color: @colorGray;
	background-image: url(/images/back_pattern.png);
}
.position {
	float: left;
	margin-left: 65%;
}
.pattern-back {
	background-image: url(/images/back_pattern.png);
}
.pos_abs {
	position: absolute;
	top: 70%;
    right: 5%;
}
.pos_rel {
	position: relative;
}
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
}
input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
  -moz-box-shadow: 0 0 6px #f8b9b7;
  box-shadow: 0 0 6px #f8b9b7;
}
.thumbnail {
	webkit-box-shadow: none;
	box-shadow: none;
	border: none;
	padding: 0;
	margin: 0;
	background-color: transparent;
}
.page {
	min-width: 970px;
	padding-bottom: @footerOtstup;
}
.page-text {
	margin-bottom: 45px;
}
.left {
	text-align: left;
}
.right{
	text-align: right;
}
.center {
	text-align: center;
}
.very-small {
	font-size: @sizeVerySmall;
}
.normal {
	font-size: @sizeNormal;
}
.small {
	font-size: @sizeSmall;
}
.big {
	font-size: @sizeBig;
}
.large {
	font-size: @sizeLarge;
}
.lefter {
	float: left;
}
.righter {
	float: right;
}
.social_icon {
	margin-top: 10px;
}
.social_icon a {
	margin-right: 8px;
}
.not-select {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.white {
	color: @colorWhite;
}
.white-back {
	background-color: @colorWhite;
}
.margin-small {
	margin: 5px 0;
}
.margin20 {
	margin-top: 20px;
}
.btn {
	border-color: @colorGray;
	background-color: #e5e5e5; 
}
.zoom-hover {
  	-webkit-transform: scale(1.2);
  	-ms-transform: scale(1.2);
  	transform: scale(1.2);
}
.zoom {
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: -webkit-transform;
	transition-property: transform;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
}
.page-head {
	color: @colorGold;
	font-size: @sizeLarge;
	font-family: @headFont;
	margin-bottom: 15px;
}
.big-head {
	color: @colorGold;
	font-size: @sizeLarge;
	font-family: @headFont;
	font-weight: bold;
	margin: 20px 0;
	&.big-margin {
		margin-top: 45px;
		margin-bottom: 35px;
	}
	&.white {
		.white;
	}
	a:hover {
		opacity: 0.5;
	}
}
.simple-head {
	font-size: @sizeHead;
	color: @colorGold;
	margin-bottom: 15px;
}
.simple-button {
	display: block;
	margin: 10px auto;
	width: 105px;
	background-color: @colorBtn;
	color: @colorWhite;
	text-align: center;
	font-size: @sizeBtn;
	padding-top: 7px;
	padding-bottom: 10px;
	border: 1px solid transparent;
	&:hover {
		background-color: @colorBtnHover;
		color: @colorBtn;
		&:active {
			border-color: @colorBtnBorder;
		}
	} 
}
.lang-link {
	font-size: @sizeSmall;
	text-decoration: underline;
	color: #515151;
	&:hover {
		color: @colorGold;
		text-decoration: underline;
	}
}
.header {
	.white-back;
	.text {
		font-family: @headFont;
		color: @colorGold;
		font-size: @sizeBig;
	}
	.top {
		margin-top: 10px;
	}
	.btn-order {
		.righter;
		.simple-button;
		width: 170px;
	}
	.menu {
		table {
			width: 100%;
			text-align: center;
		}
	}
}
.menu {
	background-color:#f1f1f1;
	height: 80px;
	border-top: 1px solid #dcdcdc; 
	border-bottom: 1px solid #dcdcdc; 
	margin-top: 20px;
}
#nav {
    float: left;
    width:100%;
    list-style:none;
    margin-bottom: 0px;
    margin-left: 0px;
    color: #000;
	li {
	    float: left;
	    font-size: @sizeSmall;
	    padding: 30px 0;
	    a {
		    color:@colorGray;
		    text-decoration:none;
		    &:hover {
				color: @colorGold;
		    }
		}
		span {
		    color:@colorGray;
			&.active {
		    	color:@colorGold;
			}
		}
	}
	>li {
		>a{
		    padding: 30px 0;
		}
		>span {
		    padding: 30px 0;
		}
		float: left;
		margin-right: 40px;
		&:last-child {
			margin-right: 0;
		}
		&:hover {
			ul {
				opacity: 1;
				left:auto;
			}
			span {
				color: @colorGold;
			}
		}
		ul {
			background-color:#f1f1f1;
    		list-style:none;
    		position:absolute;
    		z-index: 2;
    		margin-top: 30px;
    		margin-left: -15px;
    		border-top: 2px solid @colorGold;
    		left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
    		opacity:0; /* Устанавливаем начальное состояние прозрачности */
    		-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
    		li {
			    position:relative;
			    display:block;
				padding: 0px;
			    float:none;
			    margin: 0px;
				a {
				    white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
				    display:block;
				    padding: 5px 0;
				    &:hover {
				    	color: @colorWhite;
				    	background-color: @colorNavHover;
				    }
					padding-left: 15px;
					padding-right: 10px;
				}
				span {
					display: block;
				    padding: 5px 0;
					padding-left: 15px;
					padding-right: 10px;
				}
			}
		}
	}
}
.footer {
	width: 100%;
	position: absolute;
	bottom: 0px;
	height: @footerOtstup;
	color: @colorGray;
	background-color: #eeeeee;
	padding: 10px 0;
	a:hover {
		color: @colorGold;
	}
	.right {
		margin-top: 10px;
		.to-down {
			img {
				margin-top: 5px;
				padding: 0 5px;
			}
			span {
				position: relative;
				top: 5px;
			}
		}
	}
}
.struct-block(@wid, @hei) {
	position: relative;
	min-width: 970px;
	img {
		width: 100%;
	}
	.block {
		position: absolute;
		width: @wid;
		height: @hei;
		top: 50%;
		left: 50%;
		margin-left: -@wid/2;
		margin-top: -@hei/2;
		background-color: @colorBlackOpacity;
		text-align: center;
		color: @colorWhite;
		overflow: hidden;
		.head {
			padding:10px;
			font-family: @headFont;
			font-weight: bold;
			font-size: @sizeBig;
		}
		.text {
			padding: 0 50px;
		}
	} 
}
.welcome {
	.struct-block(620px, 227px);
}
.vystavka {
		width: 300px;
		margin: 0 auto;
		margin-bottom: 45px;
	.head {
		.simple-head;
		.center;
		height: 25px;
		overflow: hidden;
	}
	.image {
		width: 300px;
		height: 190px;
		background-color: #d1d5d4;
		position: relative;
		overflow: hidden;
		.date {
			position: absolute;
			top: 0px;
			background-color: @colorBlackOpacity;
			color: @colorWhite;
			.day {
				font-size: @sizeLarge;
				font-weight: bold;
				text-align: center;
				line-height: 1.2;
			}
			.month {
				font-size: @sizeVerySmall;
				padding: 5px;
				padding-top: 0;
			}
		}
		img {
			.zoom;
		}
	}
	.text {
		color: @colorGray;
		font-size: @sizeSmall;
		margin: 15px 0;
		height: 38px;
		overflow: hidden;
		.center;
	}
	.body:hover {
		.image{
			/*box-shadow: 0 0 4px @colorBlack; Маша конечно не права, но заебало уже*/
			img{
				.zoom-hover;
			}
		}
	}
	.button {
		.simple-button;
	}
}
.gallerys {
	background-image: url(/images/gallery-back.png);
	background-size: 100%;
	background-repeat: no-repeat;
	margin-bottom: 45px;
	.item {
		width: 300px;
		margin: 0 auto;
		margin-top: 20px;
		.head {
			.simple-head;
			.center;
			height: 25px;
			overflow: hidden;
		}
		.image {
			width: 300px;
			height: 185px;
			overflow: hidden;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}
		.text {
			color: @colorGray;
			font-size: @sizeSmall;
			height: 38px;
			overflow: hidden;
			margin: 15px 0;
			.center;
		}
		.block:hover {
			.image img{
				margin-left: -5px;
				margin-top: -5px;
			}
		}
		.button {
			.simple-button;
		}
	}
}
.excurse {
	margin-top: 40px;
	.struct-block(460px,215px);
	.button {
		.simple-button;
		width: 170px;
	}
	.big-head {
		margin-top: 15px;
		margin-bottom: 5px;
	}
}
.news-main {
	margin-bottom: 20px;
	.date {
		font-size: @sizeSmall;
		color: @colorTime;
	}
	.head {
		font-size: @sizeSmall;
		color: @colorGray;
		height: 41px;
		overflow: hidden;
		&:hover {
			color: @colorGold;
			text-decoration: underline;
		}
	}
}
.anons-main {
	margin-bottom: 20px;
	.date {
		float: left;
		height: 60px;
		width: 60px;
		background-color: @colorBtn;
		color :@colorWhite;
		.center;
		.day {
			font-size: @sizeLarge;
			font-weight: bold;
		}
		.month {
			font-size: @sizeVerySmall;
		}
	}
	.text {
		color: @colorGray;
		font-size: @sizeSmall;
		padding-left: 30px;
		height: 60px;
		overflow: hidden;
	}
	&:hover {
		.date {
			box-shadow: 0 0 3px @colorBlack;
		}
		.text {
			color: @colorGold;
		}
	}
}
.simple-form {
	.form-group {
		label {
			color: @colorGray;
			font-weight: normal;
			font-size: @sizeSmall;
			&[for="captcha"] {
				text-align: right;
				margin-top: -4px;
				margin-right: 10px;
				i {
					margin-left: -4px;
				}
				&:hover i {
					color: @colorBtn;
				}
			}
		}
		#captcha {
			width: 60px;
		}
	}
	.btn {
		margin-top: 10px;
		border-color: @colorGray;
		color: @colorGray;
		margin-bottom: 40px;
	}
	.error {
		font-size: @sizeVerySmall;
		color: @colorError;
	}
	
}
.form-main {
	.simple-form;
	#error-captcha {
		margin-top: 70px;
		text-align: right;
	}
}
.form-order {
	.simple-form;
	#error-captcha {
		margin-top: -20px;
		text-align: right;
	}
}
.form-ask {
	margin-top: 10px;
	.simple-form;
	#error-captcha {
		margin-top: -20px;
		text-align: right;
	}
}
#btn-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: none;
	height: 50px;
	width: 50px;
	font-size: 36px;
	color: @colorWhite;
	background-color: #ababab;
	border-radius: 3px;
	text-align: center;
	z-index: 2;
	cursor: pointer;
	.not-select;
	i {
		position: relative;
		top: -3px;
	}
	&:hover {
		background-color: #d5d5d5;
		&:active {
			box-shadow: inset 0 0 1px @colorBlack;
		}
	}
}
.map {
	margin-top: 50px;
}
.navigation {
	font-size: @sizeVerySmall;
	margin: 20px 0;
	a {
		color: @colorGold;
		&:hover {
			text-decoration: underline;
		}
	}
}
.base-prevew {
	width: 300px;
	margin: 0 auto;
	text-align: center;
	line-height: 18px;
	margin-bottom: 40px;
	.head {
		color: @colorGold;
		font-size: @sizeHead;
		height: 40px;
		overflow: hidden;
	}
	.image {
		width: 300px;
		height: 190px;
		overflow: hidden;
		margin: 10px 0;
		img {
			.zoom;
		}
	}
	.text {
		font-size: @sizeSmall;
		height: 70px;
		overflow: hidden;
		margin-bottom: 15px;
	}
	.block:hover {
		img {
			.zoom-hover;
		}
	}
	.button {
		.simple-button;
	}
}
.gallery-item {
	.base-prevew;
}
.catalog-item {
	.base-prevew;
}
.base-left {
	margin-bottom: 25px;
	font-size: @sizeSmall;
	min-height: 40px; 
	color: @colorGold;
	.thumbnail {
		width: 40px;
		height: 30px;
		float: left;
		margin-right: 10px;
	} 
	&.active, &:hover {
		color: @colorLightGold;
	}
	.pod {
		color: @colorGray;
		padding-left: 15px;
		line-height: 30px;
		&:hover, &.active {
			background-color: @colorLightGold;
			color: @colorWhite;
		}
	}
}
.gallery-left {
	.base-left;
}
.history-left {
	.base-left;
	min-height: 30px; 
	margin-bottom: 0;
	.pod {
		line-height: 18px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	&.margin {
		margin-top : 10px;
	}
}
.study-left {
	.base-left;
	margin-bottom: 10px;
}
.catalog-left {
	.base-left;
	min-height: 25px; 
	margin-bottom: 20px;
	.thumbnail {
		width: 25px;
		height: 25px;
	}
	.min-height {
		min-height: 25px;
		margin-bottom: 10px;
	}
}
.base-slider {
	margin-bottom: 20px;
	width: 700px;
	i {
		position: absolute;
		top: 50%;
		font-size: @sizeLarge;
		margin-top: -15px;
		&.fa-chevron-left {
			left: 10px;
		}
		&.fa-chevron-right {
			right: 10px;
		}
	}
	a:hover i {
		color: @colorBtn;
	}
}
#carousel-gallery {
	.base-slider;
}
#carousel-product {
	.base-slider;
}
.view {
	.simple-view;
}
.anons-block {
	.simple-view;
}
.simple-view {
	background-color: #e8e8e8; /*Маша кака*/
	margin-bottom: 10px;
	position: relative;
	width: 100%;
	td {
		height: 174px;	
		text-align: center;
	}
	.date {
		width: 240px;
		vertical-align: middle;
		padding: 20px;
		position: relative;
		color: @colorWhite;
		font-size: @sizeBtn;
		img {
			position: absolute;
			top: 0px;
			z-index: 1;
		}
		div {
			z-index: 2;
			position: relative;
			width: 120px;
		}
		&.right {
			img {
				right: 0;
			}
			div {
				left:70px;
			}
		}
		&.left {
			img {
				left: 0;
			}
		}
	}
	.image {
		width: 240px;
		.zoom;
	}
	.head {
		font-size: @sizeBig;
		color: #4c4c4c;
		padding: 0 10px;
	}
	.text {
		padding: 0 10px;
		height: 125px;
		overflow: hidden;
	}
	&:hover {
		color: @colorGold;
		.head {
			color: @colorGold;
		}
		.image {
			.zoom-hover;
		}
	}
}
.scarbonca {
	background-color: @colorWhite;
	background-color: #e8e8e8; 
	margin-bottom: 10px;
	width: 100%;
	td {
		height: 175px;
	}
	.color {
		width: 25px;
		&.color-0 {
			background-color: #eba116		
		}
		&.color-1 {
			background-color: #2b8586; 		
		}
		&.color-2 {
			background-color: #e9461a;	
		}
		&.color-3 {
			background-color: #eba116;
		}
	}
	.head {
		font-size: @sizeBig;
		color: #4c4c4c;
		padding: 0 30px;
	}
	.text {
		padding: 0 30px;
		height: 125px;
		overflow: hidden;
	}
	.image {
		width: 240px;
		text-align: center;
		a {
			position: relative;
			.icon {
				position: absolute;
				background-color: fadeout(@colorWhite, 40%);
				width: 100%;
				height: 140px;
				text-align: center;
				padding-top: 40px;
				left: -9999px;
				i {
					color: @colorWhite;
					font-size: 60px;
				}
			}
			&:hover {
				.icon {
					left: 0;
				} 
			}
		}
	}
}
.show-more {
	text-align: center;
	padding: 25px 0;
	font-size: @sizeBig;
	color: #4c4c4c;
	cursor: pointer;
	margin-bottom: 40px;
	&:hover {
		color: @colorGold;
		background-color: #e8e8e8;
	}
}
.carousel.responsive {
	margin: 20px 0;
	width: 940px !important;
}
.carousel-nav {
	position: absolute;
	top: 0;
	a {
		width: 50px;
		text-align: center;
	}
	.button {
		height: 290px;
		width: 50px;
		position: absolute;
		top: 0;
		&.btn-left {
			margin-left: 2px;
		}
		&.btn-right {
			right: 2px;
		}
		i {
			font-size: @sizeBig;
			top: 50%;
			position: absolute;
			margin-top: -12px;
			margin-left: -8px;
			color: @colorWhite;
			text-shadow: 1px 1px 4px @colorBlack;
		}
		&:hover {
			&.btn-left
			{
				background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
				background-repeat: repeat-x;
			}
			&.btn-right
			{
				background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
				background-repeat: repeat-x;
			}
			i {
				color: @colorLightGold;
			}
		}
	} 
}
.news-box {
	.news-block {
		margin-bottom: 30px;
		.date {
			font-size: @sizeSmall;
			color: #999999;
		}
		.head {
			font-size: @sizeHead;
			color: @colorGold;
			margin-bottom: 3px;
			&:hover {
				text-decoration: underline;
			}
		}
		.anons {
			font-size: @sizeSmall;
		}
	}
}
.pagination {
	font-size: @sizeSmall;
	>li {
		>a {
			color: @colorBlack;
			&:hover{
				color: @colorBlack;
			}
		}
		&.active a {
			background: #aeaeae;
			border-color: #aeaeae;
			&:hover {
				background: #aeaeae;
				border-color: #aeaeae;
			}
		}
		&.disabled {
			a:hover {
				cursor: default;
			}
		}
	}
}
.news-date {
	color: #999999;
	font-size: @sizeSmall;
	margin-bottom: 10px;
}
.back-to-news {
	font-size: @sizeHead;
	margin-bottom: 25px;
	&:hover {
		color: @colorLightGold;
	}
	i {
		font-size: @sizeVerySmall;
		position: relative;
		top: -2px;
	}
}
.welcome .item>img{
	height: 560px;
	object-fit: cover;
	object-position: center;
}
.owl-carousel .owl-wrapper-outer{
	height: 560px;
}
@media (min-width: 1200px) {
	#nav > li {
		margin-right: 75px;
	}
}