/*=================================================================================================*/
/*================================================ COMMON =========================================*/
/*=================================================================================================*/
body {
	background: #E6E7E8;
	font-family: 'Roboto', sans-serif;
}

h2, h3 {
	position: relative;
	font-size: 32px;
	margin-left: 50px;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	text-transform: uppercase;	
	margin-bottom: 30px;
	img {width: 36px; height: 36px; position: absolute; top: 2px; left: -50px;}
}
h3 {
	font-size: 24px;
	margin-left: 30px;
	img {width: 24px; height: 24px; position: absolute; top: 2px; left: -30px;}
}
@link: #1C75BC;
@linkhover: #F7B901;

a {
	color: @link;
	border-bottom: 1px solid fadeout(@link, 60%);
	&:hover {
		text-decoration: none;
		color: @linkhover;
		border-bottom: 1px solid @linkhover;
	}
}
a.fancybox-close, a.fancybox-close:hover, a.fancybox-nav:hover {
	border-bottom: 0px;
}
.transition (@speed: 0.2s) {
     -webkit-transition: all @speed ease-out;
     -moz-transition: all @speed ease-out;
     -o-transition: all @speed ease-out;
     transition: all @speed ease-out;
}
.boxsizing {
	box-sizing: content-box;
	-moz-box-sizing: border-box;
}


/*=================================================================================================*/
/*================================================ HEADER =========================================*/
/*=================================================================================================*/
header {
	min-width: 1000px;
    height: 160px;
    background: #F1F2F2;
    margin: 0 auto;
    section {
    	width: 1000px;
    	margin: 0 auto;
    	position: relative;
    }
}

.introtext,
.contacts {
	position: absolute;
}
a.logo {
	width: 179px;
	height: 88px;
	position: absolute;
	display: block;
	top: 30px;
	left: 20px;
	background: url(/tpl/images/logo2.svg) no-repeat center;
	text-decoration: none;
	text-indent: -999px;
	border-bottom: 0px;
	&:hover {border-bottom: 0px;}
}
.introtext {
	position: relative;
	font-family: 'Roboto', sans-serif;
	font-style: italic;
	font-weight: 300;
	font-size: 21px;
	width: 460px;
	top: 30px;
	left: 260px;	
}
.contacts {
	width: 220px;
	top: 30px;
	right: 30px;
	.phone, .adres, .worktime {display: block; width: 200px;}
	.phone {position: relative; margin-left: 40px; font-weight: 900; font-size: 24px; line-height: 18px; margin-bottom: 20px;}
	.phone span {font-size: 12px;}
	.phone:before {background: url(/tpl/images/icon_phone.png) no-repeat center; position: absolute; left: -40px; top: 13px; width: 25px; height: 25px; content: " ";}

	.adres {position: relative; margin-left: 40px; font-weight: 900; font-size: 14px; line-height: 18px; margin-bottom: 20px;}
	.adres:before {background: url(/tpl/images/icon_adres.png) no-repeat center;  position: absolute; left: -40px; top: 5px; width: 25px; height: 27px; content: " ";}
	
	.worktime {position: relative; margin-left: 40px; font-weight: 900; font-size: 14px; line-height: 18px; margin-bottom: 20px; display: none;}
	.worktime:before {background: url(/tpl/images/icon_time.png) no-repeat center;   position: absolute; left: -40px; top: 5px; width: 25px; height: 27px; content: " ";}
}

/*=================================================================================================*/
/*================================================ NAV =========================================*/
/*=================================================================================================*/

nav {
	background: #282828;
	height: 60px;

    section {
    	width: 1000px;
    	margin: 0 auto;
    	position: relative;
    }

	    ul {
	    	position: relative;
	    	left: -40px;
	    	li {
	    		display: inline-block;
	    		border-right: 1px solid rgba(255,255,255,.2);
	    	}
	    	li:last-child {
	    		border-right: 0px;
	    	}
	    	a {
	    		color: #fff;
	    		line-height: 60px;
	    		display: inline-block;
				padding: 0px 20px 0px 20px;
				font-size: 18px;
	    		font-family: 'Roboto Condensed', sans-serif;
	    		font-weight: bold;
	    		position: relative;
	    		border-bottom: 0px;
	    		.transition;			
	    	}
	    	a:hover {
	    		background: rgba(250,174,66,1);
	    		color: rgb(255,255,255);
	    		text-decoration: none;
	    	}
	    	a.active {background: #515151;}
	    	a.active:hover {background: #515151; color: #fff;}
			a:active {color: #fff; text-decoration: none;}
			a.active:active {color: red !important;}
			
			#menuService {cursor: pointer;}
			#menuService.active:after {
				position: absolute;
				top: 60px;
				left: 900px;
				content: "Закрыть";
				z-index: 150;
			}
	    }
}


/*=================================================================================================*/
/*================================================ SUBMENU =========================================*/
/*=================================================================================================*/

.unfold {
	height: auto !important;
	z-index: 150;
	overflow: auto !important;
	top: 0px !important;
	opacity: 1 !important;
	.transition;
}
.submenu {
	width: 1000px;
	margin: 0 auto;
	background: #515151;
	color: #fff;
	position: absolute;
	top: 0px;
	opacity: 0;
	z-index: 100;
	height: 0px;
	overflow: hidden;
	box-shadow: 0px 20px 20px rgba(0,0,0,.2);
	
	.transition;

	display: -moz-flex;
	display: -o-flex;
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;

	h2 {
		font-family: 'Roboto Condensed', sans-serif;
		font-weight: bold;
		text-transform: uppercase;
		margin-left: 0;
	}

	.menu-column {
		width: 50%;
		box-sizing: content-box;
		padding: 0px 20px 20px 20px;

	}
	a {
		font-size: 16px;
		line-height: 18px;
		text-decoration: none;
		display: inline-block;
		margin: 2px 0px;
		border-bottom: 1px solid rgba(255,255,255,.2);
		.transition(0.1s);
	}
	a:hover {
		border-bottom: 1px solid rgba(247,185,1,.8);
		color: rgba(247,185,1,1);
		text-shadow: 0px 0px 10px rgba(247,185,1,.8);
	}
	a.active {
		border-bottom: 0px;
		cursor: default;
		color: rgba(247,185,1,1);
		font-weight: bold;
		text-shadow: 0px 0px 10px rgba(247,185,1,.8);
	}

	ul {
		margin: 0;
		padding: 0;
		a {color: #fff;}
		li {list-style: none;}
		li ul {margin-left: 20px; padding: 10px 0px;}
	}
}
.unfoldNav {
	position: relative;
	width: 1000px;
	margin: 0 auto;	
}

/*=================================================================================================*/
/*================================================ BREADCRUMBS  =========================================*/
/*=================================================================================================*/

.B_crumbBox {
	color: #ccc;
	a {color: #000; font-size: 12px; border-bottom: 1px solid rgba(0,0,0,.2);}

}
/*=================================================================================================*/
/*================================================ SIDEBAR  =========================================*/
/*=================================================================================================*/
.sidebarBlock {
	ul, li {margin: 0; padding: 0; list-style: none;}
	> ul > li  {font-size: 18px; line-height: 24px; font-weight: 700;}
	> ul > li > ul {padding: 10px 0px;}
	> ul > li > ul > li {font-size: 14px; margin-left: 16px; font-weight: 300;}
	> ul > li > ul > li > ul {padding: 6px 0px;}
	> ul > li > ul > li > ul > li {font-size: 12px; margin-left: 16px;}
}


/*=================================================================================================*/
/*================================================ КОМИССИОННЫЙ ОТДЕЛ  =============================*/
/*=================================================================================================*/
.contentBlock {
	table {
		a { border-bottom: 0px;}
		td {
			img {margin-right: 10px;}
		}
	}
}
.red_price {
	color: #ff0000;
	font-weight: 900;
}
/*=================================================================================================*/
/*================================================ SERVICE =========================================*/
/*=================================================================================================*/ 

section.service, section.sale, section.motoklub, section.content {
	width: 1000px;
	background: #fff;
	padding: 40px 30px;
	margin: 0 auto;
	border-bottom: 3px solid #D1D3D4;
}
.selector {
	margin-bottom: 30px;
}
section.service {
	box-sizing: border-box;
}

.serviceTab {
	color: #231F20;
	background: linear-gradient(to top, rgba(0,0,0,.1), rgba(255,255,255,1));
	display: inline-block;
	font-size: 28px;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;	
	padding: 5px 20px;
	border: 1px solid #231F20;
	box-shadow: 0px 0px 15px rgba(0,0,0,.2);
	cursor: pointer;
	.boxsizing;
	.transition;
}
.serviceTab.active {
	color: #fff;
	background: rgba(247,185,1,1);
	display: inline-block;
	font-size: 28px;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;	
	padding: 5px 20px;
	border: 1px solid rgba(255,255,255,0);
	box-shadow: inset 0px 0px 15px rgba(0,0,0,.2);
	cursor: default;
	.boxsizing;
}

.serviceTab:first-child {
	border-bottom-left-radius: 6px;
	border-top-left-radius: 6px;		
}

.serviceTab:last-child {
	border-bottom-right-radius: 6px;
	border-top-right-radius: 6px;	
}
.serviceTree {
	width: 675px;
	float: left;
	background: #F1F2F2;
	border: 3px solid #D1D3D4;
	position: relative;
	.tabIndicator {
		background: url(/tpl/images/tab_indicator.png) no-repeat center;
		width: 47px;
		height: 20px;
		position: absolute;
		top: -20px;
		.transition;
	}
	.tabIndicator.left {
		left: 80px;
	}
	.tabIndicator.right {
		left: 300px;
	}
}
#paneAuto, #paneMoto {
	display: none;
	.transition;

}
#paneAuto.showBlock, #paneMoto.showBlock {
	display: -moz-flex;
	display: -o-flex;
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	padding: 20px;
}

.col_1, .col_2, .col_3 {
	width: 200px;
	padding: 0px 10px;
	h3 {font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 21px; margin: 0px 0px 30px 0px;}
	ul, li {margin: 0; padding: 0; list-style: none;}
	li {margin-bottom: 10px;}
	a {display: inline-block; background: #F7B901; padding: 2px 8px; color: #231F20; text-decoration: none; .transition; border-bottom: 0px;}
	a:hover {background:  #231F20; color: #F7B901; border-bottom: 0px;}
}
.col_1 {
	width: 350px;
}
.col_2 {
	width: 250px;
}
section.service:after, section.content:after  {
	content: " ";
	display: block;
	clear: both;
}

/*=================================================================================================*/
/*================================================ CONTENT =========================================*/
/*=================================================================================================*/ 

section.content {
	.contentBlock {
		min-height: 400px;
		position: relative;
		h3 {
			margin-left: 0px;
		}
	}
}


 /*=================================================================================================*/
/*================================================ КНОПКА ЗАПИСАТЬСЯ =========================================*/
/*=================================================================================================*/ 
.request_button_sidebar {
	margin-left: 700px;
	position: relative;
	h3 {margin-left: 0px !important;}
	.priceDownload {
		display: inline-block;
		position: relative;
		margin-left: 35px;
		font-size: 16px;
	}
	.priceDownload:before {
		position: absolute;
		content: " ";
		left: -35px;
		top: 0px;
		width: 25px;
		height: 27px;		
		background: url(/tpl/images/download_icon.png) no-repeat center;		
	}	
	a.button_link, {
		background: linear-gradient(to top, rgba(41,41,41,1), rgba(67,67,67,1));
		font-family: 'Roboto Condensed', sans-serif;
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		padding: 10px 20px 10px 50px;
		border: 0px;
		border-radius: 4px;
		box-shadow: 0px 15px 30px rgba(0,0,0,.2), 0px 4px 0px rgb(0,0,0);
		margin-bottom: 30px;
		position: relative;
		display: block;
		border-bottom: 0px;
		.transition;
	}
	a.button_link:hover{
		background: linear-gradient(to top, rgba(51,51,51,1), rgba(77,77,77,1));
		box-shadow: 0px 0px 30px rgba(247,184,1,.6), 0px 4px 0px rgba(0,0,0,.8);
	}
	a.button_link:active {
		box-shadow: none;
		top: 4px;
	}
	a.button_link:before {
		position: absolute;
		content: " ";
		left: 20px;
		top: 10px;
		width: 20px;
		height: 20px;		
		background: url(/tpl/images/price_icon.png) no-repeat center;		
	}	

}

 .button_link {
	background: linear-gradient(to top, rgba(41,41,41,1), rgba(67,67,67,1));
	font-family: 'Roboto Condensed', sans-serif;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	padding: 10px 20px 10px 20px;
	border: 0px;
	border-radius: 4px;
	box-shadow: 0px 15px 30px rgba(0,0,0,.2), 0px 4px 0px rgb(0,0,0);
	margin-bottom: 30px;
	position: relative;
	display: block;
	border-bottom: 0px;
	.transition;
}
.button_link:hover {
	background: linear-gradient(to top, rgba(51,51,51,1), rgba(77,77,77,1));
	box-shadow: 0px 0px 30px rgba(247,184,1,.6), 0px 4px 0px rgba(0,0,0,.8);
}
 .button_link:active {
	box-shadow: none;
	top: 4px;
}



/*=================================================================================================*/
/*================================================ ПРОДАЖА И СТОЯНКА =========================================*/
/*=================================================================================================*/ 
section.sale {
	display: -moz-flex;
	display: -o-flex;
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	background: rgba(255,255,255,.9);
	.saleBlock, .parkingBlock {
		width: 50%;
	}
}
.saleBlock {
	ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 500px;
		li {
			width: 230px;
			display: inline-block;
			margin-bottom: 20px;
				img {
					width: 60px;
					height: 60px;
					float: left;
					margin-right: 10px;
				}
				span {font-size: 14px; font-weight: 700;color: #BE1E2D;}
				.price {
					color: #000;
					font-size: 11px;
				}
		}
	}
	.seeall {font-size: 18px; font-weight: 700;}
}
.parkingBlock {
	> img {
		width: 140px;
		height: 140px;
		float: left;
		margin-right: 10px;
		font-size: 14px;
	}
	.seeall {font-size: 18px; font-weight: 700;}
}

 /*=================================================================================================*/
/*================================================ МОТОКЛУБ =========================================*/
/*=================================================================================================*/ 
.motoBlock {
	display: -moz-flex;
	display: -o-flex;
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	.sheduleBlock, .photoBlock, .schoolBlock {
		width: 33%;
		padding: 0px 10px;
	}
	.sheduleBlock {
		.seeall {font-size: 18px; font-weight: 700; margin-left: 60px;}
		li {margin: 0; padding: 10px 0px; display: inline-block; margin-bottom: 5px; padding-bottom: 5px;}
	}
	.schoolBlock, .photoBlock {.seeall {font-size: 18px; font-weight: 700;}}
	.photoBlock2 {width: 40%; padding: 0px 30px; a {font-size: 12px; line-height: 14px !important;}}
	
	h3 {margin: 0; padding: 0; margin-bottom: 20px;}
	ul {margin: 0; padding: 0; list-style: none; margin-bottom: 10px;}

	a {font-size: 12px; line-height: 14px !important;}

}
.thumbsMainpage {
	display: -moz-flex;
	display: -o-flex;
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;

	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;

	li {width: 25%; border-bottom: 0px;}
}

.sheduleBlock {
	ul, li {list-style: none; margin: 0; padding: 0;}
	li {display: block; margin-bottom: 20px;}
	li:after {content: " "; clear: both; width: 100%; height: 1px; display: block;}
	.seeall {font-size: 18px; font-weight: 700; margin-left: 60px;}
	.date {width: 60px; float: left; text-align: center; margin-right: 10px; border: 1px solid rgba(0,0,0,.1);}
	.num {font-size: 24px; font-weight: 900; display: block;}
	.mounth {font-size: 10px; display: block; padding: 2px ; background: rgba(0,0,0,.1);} 
}

 /*=================================================================================================*/
/*================================================ GALLERY =========================================*/
/*=================================================================================================*/ 
.gallery_list {
	list-style: none;
	padding: 0; margin: 0;
	li {display: inline-block; margin-right: 10px;}
	li {
		margin-bottom: 10px;
		a {margin-bottom: 8px;}
		li { margin-right: 10px;}
	}	
}
.list_of_gallerys {
	list-style: none;
	padding: 0; margin: 0;
	li {
		margin-bottom: 10px;
		a {margin-bottom: 8px;}
		li { margin-right: 10px;}
	}
}
.list_of_gallerys.sidebar {
	strong {margin-bottom: 8px; display: block;}
}
.list_of_gallerys.sidebar > li {
	border-bottom: 1px solid #ccc;
}

 /*=================================================================================================*/
/*================================================ FOOTER =========================================*/
/*=================================================================================================*/ 
footer {
	min-width: 1000px;
	background: #282828;
	height: 120px;

a {
	color: #fff;
	border-bottom: 1px solid fadeout(#fff, 60%);
	&:hover {
		text-decoration: none;
		color: @linkhover;
		border-bottom: 1px solid #f7b801;
	}
}

}
.footerBlock {

	width: 1000px;
	margin: 0 auto;
	padding: 20px 30px;	
	color: #fff;

	display: -moz-flex;
	display: -o-flex;
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;

	.year {
		width: 400px;
		text-align: center;

	}

	.parabit {
		width: 300px;
		font-size: 14px;
		font-weight: 300;
		text-align: right;
		span {
			font-size: 24px;
			font-weight: 900;
		}
	}

	.contactsFooter {
		width: 300px;
		font-size: 14px;
		font-weight: 300;
		text-align: left;
		span {
			font-size: 24px;
			font-weight: 900;
		}
	}
}


a {
	color: @link;
	border-bottom: 1px solid fadeout(@link, 60%);
	&:hover {
		text-decoration: none;
		color: @linkhover;
		border-bottom: 1px solid @linkhover;
	}
}