@import 'library.less';

@menu_width: 186px;
@content_width: 840px;
@color_green: #83BD02;
@color_black: #1A1A1A;
@min_size: 1320px;

html, body {
	font-family: 'lugac';
	-webkit-font-smoothing: antialiased;
}

#shares {
	display: none;
}

.desktop {
	#shares {
		display: block;
		position: fixed;
		top: 20px;
		right: 30px;
		z-index: 11;
	}

	#main_menu {
		position: fixed;
		z-index: 10;
		width: @menu_width;
		height: 100%;
		left: 0;
		top: 0;
		background-color: #171717;
		
		.button {
			display: none;
		}
		
		.logo {
			display: block;
			height: 140px;
			background-image: url(../images/logo-1.svg);
			background-repeat: no-repeat;
			background-position: center center;
		}
		
		.navigation {
			@bc: #282828;
		
			&__item {
				display: block;
				position: relative;
				height: 140px;
				cursor: pointer;
				border-top: 1px solid @bc;
				
				&:before {
					content: '';
					position: absolute;
					z-index: 1;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					background-repeat: no-repeat;
				}
				
				&--a:before {
					background-image: url(../images/menu-a.svg);
					background-position: center 44%;
				}
				
				&--b:before {
					background-image: url(../images/menu-b.svg);
					background-position: center 31%;
				}
				
				&--c:before {
					background-image: url(../images/menu-c.svg);
					border-bottom: 1px solid @bc;
					background-position: center 34%;
				}
				
				&--active {
					pointer-events: none;
					background-image: url(../images/el-5.png);
					
					&:after {
						content: '';
						position: absolute;
						width: 5px;
						height: 100%;
						right: 0;
						top: 0;
						background-color: @color_green;
					}
				}
				
				&--disabled {
					pointer-events: none;
					opacity: 0.38;
				}
				
				span {
					position: absolute;
					z-index: 3;
					width: 100%;
					font-size: 14px;
					text-transform: uppercase;
					text-align: center;
					line-height: 1;
					bottom: 25px;
					left: 0;
					color: #fff;
					font-weight: 700;
				}
				
				&:hover, &--active {
					span {
						color: @color_green;
					}
				}
			}
		}
	}
	
	#page {
		width: auto;
		padding-left: @menu_width;
	
		.page {
			.container {
				width: @content_width;
				margin: 0 auto;
			}	
		}
		
		.grid {
			@h_info: 214px;
			@h_image: 309px;
			
			/* item types */
			
			.type-a, .type-b {
				height: @h_info + @h_image;
				float: left;
			
				.grid__item__info {
					position: absolute;
					left: 0;
					z-index: 2;
					width: 100%;
					height: @h_info;
				}
				
				.grid__item__image {
					position: absolute;
					left: 0;
					width: 100%;
					z-index: 1;
					height: @h_image;
				}
				
				.grid__item__title {
					font-size: 22px;
					line-height: 25px;
				}
				
				.grid__item__subtitle {
					font-size: 16px;
					line-height: 22px;
				}
			}
		
			.type-a {
				.grid__item__info {
					bottom: 0;
					background-color: #83BD02;
					
					&:after {
						@s: 22px;
					
						content: '';
						width: 0;
						height: 0;
						border-style: solid;
						border-width: @s 0 0 @s;
						border-color: transparent transparent transparent #83BD02;
						position: absolute;
						top: -@s;
						left: @s;
					}
				}
				
				.grid__item__title {
					color: @color_black;
				}
				
				.grid__item__subtitle {
					color: #fff;
				}
				
				.grid__item__image {
					top: 0;
				}
				
				.grid__item__tag {
					color: @color_black;
				}
			}
			
			.type-b {
				.grid__item__info {
					top: 0;
					background-color: #658D1B;
					
					&:after {
						@s: 22px;
					
						content: '';
						width: 0;
						height: 0;
						border-style: solid;
						border-width: @s @s 0 0;
						border-color: #658D1B transparent transparent transparent;
						position: absolute;
						bottom: -@s;
						left: @s;
					}
				}
				
				.grid__item__title {
					color: #fff;
				}
				
				.grid__item__subtitle {
					color: @color_black;
				}
				
				.grid__item__image {
					bottom: 0;
				}
				
				.grid__item__tag {
					color: #fff;
				}
			}
			
			.type-c {
				.grid__item__info {
					position: absolute;
					width: 50%;
					height: 100%;
					left: 0;
					top: 0;
					float: left;
					width: 50%;
					background-color: #83BD02;
				}
				
				.grid__item__image {
					position: relative;
					float: right;
					width: 50%;
					
					&:after {
						content: '';
						display: block;
						padding-top: 100%;
					}
					
					&:before {
						content: '';
						position: absolute;
						width: 171px;
						height: 172px;
						background-image: url(../images/el-2.png);
						left: 50%;
						top: 50%;
						margin-left: -85px;
						margin-top: -86px;
					}
				}
				
				.grid__item__title {
					font-size: 42px;
					line-height: 50px;
					color: @color_black;
				}
				
				.grid__item__subtitle {
					font-size: 22px;
					line-height: 25px;
					color: #fff;
				}
				
				.grid__item__tag {
					color: @color_black;
				}
			}
			
			/**/
		
			&__item {
				display: block;
				position: relative;
				
				&__info {
					padding: 30px 22px 0 22px;
					.box-sizing;
				}
				
				&__title {
					margin-bottom: 12px;
					font-weight: 700;
				}
				
				&__subtitle {
				}
				
				&__tag {
					position: absolute;
					left: 20px;
					bottom: 20px;
					font-weight: 700;
					font-size: 12px;
					letter-spacing: 1.5px;
					line-height: 1;
					text-transform: uppercase;
					opacity: 0.7;
				}
				
				&__image {
					.cover;
				}
				
				&:hover {
					&:after {
						content: '';
						pointer-events: none;
						position: absolute;
						z-index: 3;
						width: 100%;
						height: 100%;
						border: 5px solid #fff;
						left: 0;
						top: 0;
						.box-sizing;
					}
				}
			}
			
			/* grid types */
			
			&--8 {
				@media only screen and (max-width: @min_size) {
					.grid__item {
						&--1, &--3, &--5, &--6, &--8 {
							width: 33%;
						}
						
						&--2, &--7 {
							width: 34%;
						}
						
						&--4 {
							width: 67%;
						}
						
						&--1, &--3, &--4, &--7 {
							.type-a;
						}
						
						&--2, &--5, &--6, &--8 {
							.type-b;
						}
					}
				}
				
				@media only screen and (min-width: @min_size) {
					.grid__item {
						width: 25%;
					
						&--1, &--3, &--5, &--7 {
							.type-a;
						}
						
						&--2, &--4, &--6, &--8 {
							.type-b;
						}
					}
				}
			}
			
			&--7 {
				@media only screen and (max-width: @min_size) {
					.grid__item {
						&--1, &--3, &--4, &--7 {
							width: 33%;
						}
						
						&--2 {
							width: 34%;
						}
						
						&--5, &--6 {
							width: 67%;
						}
						
						&--1, &--3, &--4, &--7 {
							.type-a;
						}
						
						&--2, &--5, &--6 {
							.type-b;
						}
					}
				}
				
				@media only screen and (min-width: @min_size) {
					.grid__item {
						&--1, &--2, &--3, &--4, &--5, &--7 {
							width: 25%;
						}
						
						&--6 {
							width: 50%;
						}
						
						&--1, &--3, &--5, &--7 {
							.type-a;
						}
						
						&--2, &--4, &--6 {
							.type-b;
						}
					}
				}
			}
			
			&--6 {
				.grid__item {
					&--1, &--3, &--4, &--6 {
						width: 33%;
					}
					
					&--2, &--5 {
						width: 34%;
					}
					
					&--1, &--3, &--5 {
						.type-a;
					}
					
					&--2, &--4, &--6 {
						.type-b;
					}
				}
			}
			
			&--5 {
				.grid__item {
					&--1, &--3, &--5 {
						width: 33%;
					}
					
					&--2 {
						width: 34%;
					}
					
					&--4 {
						width: 67%;
					}
					
					&--1, &--3, &--4 {
						.type-a;
					}
					
					&--2, &--5 {
						.type-b;
					}
				}
			}
			
			&--4 {
				@media only screen and (max-width: @min_size) {
					.grid__item {
						&--1, &--4 {
							width: 67%;
							.type-a;
						}
						
						&--2, &--3 {
							width: 33%;
							.type-b;
						}
					}
				}
				
				@media only screen and (min-width: @min_size) {
					.grid__item {
						&--1, &--2, &--3, &--4 {
							width: 25%;
						}
						
						&--1, &--3 {
							.type-a;
						}
						
						&--2, &--4 {
							.type-b;
						}
					}
				}
			}
			
			&--3 {
				.grid__item {
					&--1, &--3 {
						width: 33%;
						.type-a;
					}
					
					&--2 {
						width: 34%;
						.type-b;
					}
				}
			}
			
			&--1 {
				.grid__item {
					&--1 {
						.type-c;
					}
				}
			}
		}
	}
	
	.page--index {
		.header {
			position: relative;
			height: 680px;
			position: relative;
			background-color: #62A81F;
			background-image: url(../images/bg-3.jpg);
			.cover;
			
			&__title {
				position: absolute;
				width: 100%;
				font-size: 82px;
				line-height: 82px;
				font-weight: 700;
				color: #1A1A1A;
				left: 0;
				top: 0;
				text-align: center;
				top: 170px;
			}
			
			&__subtitle {
				position: absolute;
				font-size: 20px;
				line-height: 35px;
				text-align: center;
				width: 664px;
				left: 50%;
				margin-left: -332px;
				top: 280px;
			}
			
			&__next {
				position: absolute;
				width: 44px;
				height: 52px;
				left: 50%;
				top: 480px;
				background-image: url(../images/el-4.png);
				margin-left: -22px;
				
				&:after {
					content: 'Скролль вниз';
					position: absolute;
					text-align: center;
					width: 200px;
					left: 50%;
					margin-left: -100px;
					font-size: 12px;
					line-height: 1;
					text-transform: uppercase;
					color: #fff;
					font-weight: 700;
					bottom: -24px;
				}
			}
		}
		
		.footer {
			position: relative;
			height: 60px;
			background-image: url(../images/bg-1.jpg);
			overflow: hidden;
			.cover;
			
			/*&:before {
				content: '';
				position: absolute;
				width: 267px;
				height: 475px;
				background-image: url(../images/el-3.png);
				left: 50%;
				bottom: 0px;
				margin-left: -133px;
			}*/
		}
	
		.part {
			&__header {
				position: relative;
				height: 230px;
				background-image: url(../images/bg-1.jpg);
				.cover;
				
				&:before {
					content: '';
					position: absolute;
					width: 151px;
					height: 179px;
					background-image: url(../images/el-1.png);
					left: 50%;
					top: 50%;
					margin-left: -75px;
					margin-top: -90px;
				}
			
				&__label {
					position: absolute;
					z-index: 2;
					font-weight: 700;
					color: #fff;
					width: 100%;
					left: 0;
					top: 90px;
					text-transform: uppercase;
					font-size: 22px;
					line-height: 1;
					text-align: center;
				}
				
				&__title {
					position: absolute;
					z-index: 2;
					font-weight: 700;
					color: @color_black;
					width: 100%;
					left: 0;
					top: 115px;
					font-size: 42px;
					line-height: 1;
					text-align: center;
				}
			}
		}
		
		.video {
			position: relative;
			padding-top: 56.25%;
		
			video, .play, iframe {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			
			video {
				z-index: 1;
			}
			
			.play {
				z-index: 2;
				cursor: pointer;
				
				&:before {
					content: '';
					position: absolute;
					width: 171px;
					height: 172px;
					background-image: url(../images/el-2.png);
					left: 50%;
					top: 50%;
					margin-left: -85px;
					margin-top: -86px;
					opacity: 0.8;
				}
				
				&:hover {
					&:before {
						opacity: 1;
					}
				}
				
				&.playing {
					&:before {
						display: none;
					}
				}
			}
		}
	}
	
	.page--article {
		/*background-color: #1E1E1E;*/
	
		.header {
			background-color: #658D1B;
			padding-top: 50px;
			padding-bottom: 20px;
		
			&__title {
				font-weight: 700;
				color: #fff;
				font-size: 36px;
				line-height: 40px;
				text-align: center;
				margin-bottom: 10px;
			}
			
			&__subtitle {
				font-size: 16px;
				line-height: 22px;
				text-align: center;
			}
			
			&__tag {
				font-weight: 700;
				color: #fff;
				font-size: 12px;
				line-height: 1;
				text-align: center;
				margin-top: 30px;
				text-transform: uppercase;
				letter-spacing: 1.5px;
				opacity: 0.7;
			}
		}
		
		.content {
			padding: 50px 0;
			background-color: #000000;
		}
		
		.footer {
			&__up {
				position: relative;
				height: 250px;
				background-image: url(../images/bg-1.jpg);
				.cover;
				
				&:before {
					content: '';
					position: absolute;
					width: 151px;
					height: 179px;
					background-image: url(../images/el-1.png);
					left: 50%;
					top: 50%;
					margin-left: -75px;
					margin-top: -90px;
				}
				
				&__title {
					position: absolute;
					z-index: 2;
					font-weight: 700;
					color: @color_black;
					width: 100%;
					left: 0;
					top: 126px;
					font-size: 22px;
					line-height: 1;
					text-align: center;
					text-transform: uppercase;
				}
			}
			
			&__down {
				height: 60px;
				background-image: url(../images/bg-1.jpg);
				.cover;
			}
		}
	}	
}

.mobile {
	#main_menu {
		position: fixed;
		height: 70px;
		width: 100%;
		z-index: 20;
		background-color: @color_black;
		
		.logo {
			display: block;
			position: relative;
			z-index: 2;
			margin-left: 20px;
			width: 80px;
			background-image: url(../images/logo-1.svg);
			background-repeat: no-repeat;
			background-position: center center;
			height: 100%;
			background-size: 90% auto;
		}
		
		.navigation {
			@bc: #282828;
		
			position: absolute;
			z-index: 1;
			left: 0;
			top: 0;
			width: 100%;
			height: 1500%;
			display: none;
			padding-top: 70px;
			background-color: @color_black;
			.box-sizing;
			
			&__item {
				display: block;
				position: relative;
				height: 140px;
				cursor: pointer;
				border-top: 1px solid @bc;
				
				&:before {
					content: '';
					position: absolute;
					z-index: 1;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					background-repeat: no-repeat;
				}
				
				&--a:before {
					background-image: url(../images/menu-a.svg);
					background-position: center 44%;
				}
				
				&--b:before {
					background-image: url(../images/menu-b.svg);
					background-position: center 31%;
				}
				
				&--c:before {
					background-image: url(../images/menu-c.svg);
					border-bottom: 1px solid @bc;
					background-position: center 34%;
				}
				
				&--active {
					/*pointer-events: none;*/
					cursor: default;
					background-image: url(../images/el-5.png);
					
					&:after {
						content: '';
						position: absolute;
						width: 5px;
						height: 100%;
						right: 0;
						top: 0;
						background-color: @color_green;
					}
				}
				
				&--disabled {
					pointer-events: none;
					opacity: 0.38;
				}
				
				span {
					position: absolute;
					z-index: 3;
					width: 100%;
					font-size: 14px;
					text-transform: uppercase;
					text-align: center;
					line-height: 1;
					bottom: 25px;
					left: 0;
					color: #fff;
					font-weight: 700;
				}
				
				&:hover, &--active {
					span {
						color: @color_green;
					}
				}
			}
		}
		
		.button {
			@s: 30px;
		
			position: absolute;
			z-index: 2;
			width: @s;
			height: @s;
			right: 20px;
			top: 50%;
			margin-top: -@s / 2;
			background-repeat: no-repeat;
			background-position: center;
			background-image: url(../images/b.png);
		}
		
		&.open {
			.button {
				background-image: url(../images/c.png);
			}
			
			.navigation {
				display: block;
			}
		}
	}
	
	#page {
		padding-top: 70px;
	
		.page {
			.container {
				width: auto;
				padding: 0 20px;
			}
		}
		
		.grid {
			&__item {
				&:nth-child(odd) {
					.grid__item__info {
						background-color: @color_green;
						
						&:after {
							border-color: transparent transparent transparent @color_green;
						}
					}
					
					.grid__item__subtitle {
						color: #fff;
					}
				}
				
				&:nth-child(even) {
					.grid__item__info {
						background-color: #658D1B;
						
						&:after {
							border-color: transparent transparent transparent #658D1B;
						}
					}
					
					.grid__item__title, .grid__item__tag {
						color: #fff;
					}
				}
			
				&__info {
					position: relative;
					padding: 30px 20px 20px 20px;
					
					
					&:after {
						@s: 22px;
					
						content: '';
						width: 0;
						height: 0;
						border-style: solid;
						border-width: @s 0 0 @s;
						position: absolute;
						top: -@s;
						left: 20px;
					}
				}
				
				&__image {
					padding-bottom: 62%;
					.cover;
				}
				
				&__title {
					font-size: 22px;
					line-height: 25px;
					font-weight: 700;
				}
				
				&__subtitle {
					font-size: 16px;
					line-height: 22px;
					margin-top: 8px;
				}
				
				&__tag {
					margin-top: 40px;
					font-size: 12px;
					text-transform: uppercase;
					opacity: 0.7;
					font-weight: 700;
				}
			}
		}
	}
	
	.page--index {
		.header {
			text-align: center;
			background-color: @color_green;
			padding-top: 40px;
			padding-bottom: 130px;
		
			&__title {
				font-size: 36px;
				line-height: 1;
				font-weight: 700;
			}
			
			&__subtitle {
				padding: 0 40px;
				font-size: 15px;
				line-height: 25px;
				margin-top: 20px;
			}
			
			&__next {
				position: absolute;
				width: 44px;
				height: 52px;
				left: 50%;
				bottom: -70px;
				background-image: url(../images/el-4.png);
				margin-left: -22px;
				
				&:after {
					content: 'Скролль вниз';
					position: absolute;
					text-align: center;
					width: 200px;
					left: 50%;
					margin-left: -100px;
					font-size: 12px;
					line-height: 1;
					text-transform: uppercase;
					color: #fff;
					font-weight: 700;
					bottom: -24px;
				}
			}
		}
		
		.part {
			&__header {
				position: relative;
				height: 290px;
				background-image: url(../images/bg-1.jpg);
				.cover;
				
				&:before {
					content: '';
					position: absolute;
					width: 151px;
					height: 179px;
					background-image: url(../images/el-1.png);
					left: 50%;
					top: 50%;
					margin-left: -75px;
					margin-top: -90px;
				}
			
				&__label {
					position: absolute;
					z-index: 2;
					font-weight: 700;
					color: #fff;
					width: 100%;
					left: 0;
					top: 90px;
					text-transform: uppercase;
					font-size: 18;
					line-height: 1;
					text-align: center;
				}
				
				&__title {
					position: absolute;
					z-index: 2;
					font-weight: 700;
					color: @color_black;
					width: 80%;
					left: 10%;
					top: 115px;
					font-size: 32px;
					line-height: 35px;
					text-align: center;
				}
			}
		}
		
		.footer {
			height: 70px;
			background-image: url(../images/bg-1.jpg);
			.cover;
		}
	}
	
	.page--article {
		.header {
			text-align: center;
			background-color: #658D1B;
			padding: 40px 20px 20px 20px; 
		
			&__title {
				font-size: 32px;
				line-height: 35px;
				font-weight: 700;
				color: #fff;
			}
			
			&__subtitle {
				font-size: 16px;
				line-height: 22px;
				margin-top: 10px;
			}
			
			&__tag {
				margin-top: 20px;
				opacity: 0.7;
				color: #fff;
				font-size: 12px;
			}
		}
		
		.content {
			
		}
		
		.footer {
			&__up {
				position: relative;
				height: 220px;
				background-image: url(../images/bg-1.jpg);
				.cover;
				
				&:before {
					content: '';
					position: absolute;
					width: 109px;
					height: 129px;
					background-image: url(../images/el-6.png);
					left: 50%;
					top: 50%;
					margin-left: -64px;
					margin-top: -55px;
				}
				
				&__title {
					position: absolute;
					z-index: 2;
					font-weight: 700;
					color: @color_black;
					width: 100%;
					left: 0;
					top: 116px;
					font-size: 22px;
					line-height: 1;
					text-align: center;
					text-transform: uppercase;
				}
			}
			
			&__down {
				height: 70px;
				background-image: url(../images/bg-1.jpg);
				.cover;
			}
		}
	}
}