main{
	--main-color: #1e824c;
	--main-color-light: #36b871;
}
.heading{
	background-image: url('/img/heading-background.png');
	background-size: 100% auto;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
	.heading .wrap{
		background-color: rgba(30,130,76,0.85);
	}
		.heading .wrap .services{
			display: block;
			text-align: center;
			padding-top:15vh;
		}
			.heading .wrap .services li{
				display: inline-block;
				vertical-align: top;
				margin: 0 20px;
				margin: 0 1.5vw;
			}
				.heading .wrap .services li a{
					display: block;
				}
					.heading .wrap .services li a img{
						display: block;
						width: 6vw;
						min-width: 80px;
						max-width: 150px;
						height: auto;
					}
		.heading .wrap .hgroup{
			width: 90%;
			padding: 30px 5%;
			text-align: center;
		}
			.heading .wrap h1{
				color: #fff;
				text-transform: uppercase;
				font-size: 2.3em;
				font-weight: normal;
			}
			.heading .wrap h2{
				color: #fff;
				font-size: 1.2em;
				width: 80%;
				margin: 0 auto;
				line-height: 1.1;
				font-weight: normal;
			}
		.heading .wrap .wheel{
			text-align: center;
			margin-top: 20vh;
			padding-bottom: 15px;
		}
			.heading .wrap .wheel p{
				padding-top: 40px;
				background-image: url('/img/heading-mouse.png');
				color: #fff;
				background-size: auto 30px;
				background-position: center 5px;
				background-repeat: no-repeat;
				font-weight: 400;
				text-transform: uppercase;
				font-size: 12px;
				animation: mousewheel .6s infinite ease-in;
			}
			@keyframes mousewheel{
				0%{
					background-position: center 5px;
				}
				25%{
					background-position: center 3px;
				}
				75%{
					background-position: center 7px;
				}
				100%{
					background-position: center 5px;
				}
			}


.who{
	display: flex;
	flex-direction: row;
	align-items: stretch;
	padding: 50px 5%;
}
	.who article{
		display: inline-block;
		vertical-align: bottom;
		width: 50%;
	}
	.who .content{

	}
		.who .content div{
			margin-bottom: 30px;
		}
			.who .content div h3{
				color: #222;
				font-size: 2.4em;
			}
				.who .content div h3 span{
					color: var(--main-color);
				}
			.who .content div p{
				font-size: 15px;
			}
		.who .content div ul{
			margin-top: 20px;
		}
			.who .content div ul li{
				display: block;

				width: 100%;
				padding: 15px;
				box-sizing: border-box;

			}
			.who .content div ul li:hover{
				background-color: #efefef;
			}
			.who .content div ul li:after{
				content: "";
				display: block;
				clear: both;
			}
				.who .content div ul li figure{

				}
					.who .content div ul li figure img{
						width: 15%;
						margin-right: 5%;
						float: left;
						display: block;
					}
					.who .content div ul li figure figcaption{
						display: block;
						float: right;
						width: 80%;
					}
					.who .content div ul li figure figcaption p{
						line-height: 1.1;
						font-size: 14px;
					}
						.who .content div ul li figcaption a{
							display: block;
							font-size: 19px;
							color: var(--main-color);
							margin-bottom: 10px;
						}

	.who .mountain{
		background-image: url('/img/mountain.jpg');
		background-size: 90% auto;
		position: relative;
		background-repeat: no-repeat;
		background-position: center bottom;
		width: 475px!important;
		height: 1000px;
	}
		.who .mountain .point{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 0;
			height: 0;
		}
			.who .mountain .point i{
				display: inline-block;
				position: relative;
				border: 2px solid var(--main-color);
				border-radius: 50%;
				width: 19px;
				height: 19px;
				left: -25px;
				line-height: 16px;
				margin-bottom: -22px;
				margin-top: -22px;
				text-align: center;
				animation: glow 3s infinite ease-in;
				cursor: pointer;
				z-index: 7;
			}
			.who .mountain .point i:before{
				content: "";
				display: inline-block;
				width: 11px;
				height: 11px;
				box-sizing: border-box;
				border-radius: 50%;
				border: 5.5px solid var(--main-color);
				vertical-align: middle;
				border-color: inherit;
				animation: inherit;

			}
			.who .mountain .point i:hover{
				animation: none;
				border-color: var(--main-color-light);
			}
				.who .mountain .point .cnt{
					background-color: rgba(0,0,0,0.9);
					padding: 5px;
					border-radius: 3px;
					margin-top: -22px;
					margin-left: 7px;
					position: relative;
					z-index: 9;
					opacity: 0;
					transition: .2s;
					pointer-events: none;
					min-width: 110px;
				}
				.who .mountain .point:hover .cnt{
					opacity: 1;
				}
				.who .mountain .point .cnt:before{
					content: "◄";
					display: inline-block;
					color: rgba(0,0,0,0.9);
					width: 10px;
				    height: 10px;
				    position: absolute;
				    left: -6px;
				    font-family: monospace;
				}
					.who .mountain .point .cnt h6{
						font-size: 12px;
						color: var(--main-color);
					}
					.who .mountain .point .cnt p{
						font-size: 11px;
						color: #efefef;
					}
			.who .mountain .point.pt1{
				bottom: 12%;
				left: 71%;
			}

			.who .mountain .point.pt2{
				    left: 51%;
    			bottom: 16%;
			}
			.who .mountain .point.pt3{
				bottom: 23%;
    			left: 44%;
			}
			.who .mountain .point.pt4{
			    bottom: 33%;
    			left: 33%;
			}
			.who .mountain .point.pt5{
				    bottom: 41%;
    			left: 37%;
			}
			.who .mountain .point.pt6{
				    left: 51%;
    			bottom: 16%;
			}
			.who .mountain .point.pt7{
				    left: 67%;
    			bottom: 46%;
			}
			.who .mountain .point.pt8{
				    left: 52%;
    			bottom: 54%;
			}
			.who .mountain .point.pt9{
				    left: 58%;
    			bottom: 63%;
			}
			.who .mountain .point.pt10{
				    left: 46%;
    			bottom: 70%;
			}
			.who .mountain .point.pt11{
				    left: 48%;
    			bottom: 78%;
			}

			@keyframes glow{
				0%{
					
					border-color: var(--main-color);
				}
				50%{
					
					border-color: var(--main-color-light);
				}
				100%{
					
					border-color: var(--main-color);
				}
			}

.techno{
	background-color: #222;
	padding: 40px 5%;
}
	.techno h3{
		font-size: 2.3em;
		color: var(--main-color-light);
	}
	.techno .hgroup{
		margin-bottom: 20px;
	}
		.techno .hgroup p{
			color: #fff;
		}
	#tools{

	}
		#tools button{
			display: none!important;
		}
		#tools li{
			outline: none;
		}
			#tools li figure{

			}
				#tools li figure img{
					display: block;
					width: 70%;
					margin: 0 auto;
					margin-bottom: 10px;
				}
					#tools li figure figcaption{

					}
					#tools li figure figcaption p{
						color: #efefef;
						font-size: 13px;
						text-align: center;
						padding: 0 7px;
						word-wrap: break-word;
					}
	#tools .slick-dots{
		text-align: right;
		margin-top: 15px;
	}
		#tools .slick-dots li{
			display: inline-block;
			margin: 0 7px;
			width: 0;
			height: 0;
			padding: 4px;
			background-color: #efefef;
			border-radius: 50%;
		}
		#tools .slick-dots li.slick-active{
			background-color: var(--main-color)
		}



.advs{
	text-align: center;
	padding: 40px 5%;
}
	.advs ul{
		font-size: 0;
	}
		.advs ul li{
			display: inline-block;
			width: 33%;
			font-size: 15px;
			vertical-align: top;
			margin-bottom: 40px;
			padding: 0 13px;
			box-sizing: border-box;
		}
			.advs ul li h4{
				padding: 7px 10px;
				background-image: url('/img/advs-heading.jpg');
				background-size: auto 100%;
				background-size: cover;
				background-position: center;
				color: #fff;
				font-size: 13px;
				margin-bottom: 15px;
			}
				.advs ul li h4 span{
					color: var(--main-color-light);
				}
			.advs ul li p{
				font-size: 14px;
			}

.clients{
	text-align: center;
}
	.clients h3{
		font-size: 1.9em;
		color: #222;
	}
	.clients .grid{
		padding: 20px 5%;
		font-size: 0;
		text-align: left;
	}
	.clients .grid>*{
		display: inline-flex;
		vertical-align: top;
		width: 25%;
		box-sizing: border-box;
		height: 10.625vw;
		position: relative;
		flex-direction: row;
		border-bottom: 1px solid #ccc;
	}
		.clients .grid img{
			max-width: 70%;
			max-height: 70%;
			position: relative;
			display: block;
			margin: auto auto;
		}
	.clients .grid>*:nth-child(4n+3),.clients .grid>*:nth-child(4n+1),.clients .grid>*:nth-child(4n+2){
		border-right: 1px solid #ccc;
	}
	.grid:after{
		content: "";
		display: block;
		width: 100%;
		background-color: #fff;
		position: relative;
		height: 1px;
		top: -1px;
	}

.discounts{
	padding: 40px;
	background-image: url('/img/discounts-background.jpg');
	background-size: 100% auto;
	background-size: cover;
}
	.discounts .offs{
		font-size: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
		.discounts .offs .cool{
			display: inline-block;
			font-size: 15px;
			width:47.5%;
			vertical-align: top;
			box-sizing: border-box;
			padding: 15px;
			background-color: #fff;

		}
		.discounts .offs .cool figure:after{
			content: "";
			display: block;
			clear:both;
		}
			.discounts .offs .cool figure img{
				width: 28%;
				float: left;
				margin-right: 2%;
			}
			.discounts .offs .cool figure figcaption{
				float: right;
				width: 70%;
				padding-bottom: 5px;
			}
				.discounts .offs .cool figure figcaption h5{
					color: var(--main-color);
					font-size: 18px;
					margin-bottom: 10px;
				}
				.discounts .offs .cool figure figcaption p{
					font-size: 13px;
					margin-bottom: 10px;
				}
				.discounts .offs .cool figure figcaption p.legal{
					color: #999;
				}

section.blog{
	padding: 40px 5%;
}
	.blog h3{
		text-align: center;
		margin-bottom: 30px;
	}
	.blog ul{
		font-size: 0;
		text-align: center;
		margin-bottom: 30px;
	}
		.blog ul li{
			display: inline-block;
			font-size: 15px;
			vertical-align: top;
			width: 23%;
			margin-right:1%;
			margin-left: 1%;
		}
			.blog ul li figure{

			}
				.blog ul li figure img{
					width: 100%;
					display: block;
					margin-bottom: 5px;
				}
				.blog ul li figure .chars{
					text-align: left;

				}
					.blog ul li figure .chars *{
						font-size: 12px;
						color: #999;
						display: inline-block;
						vertical-align: bottom;
						padding: 3px;
						padding-left: 16px;
						margin-right: 5px;
						background-size: 13px auto;
						background-position: left center;
						background-repeat: no-repeat;


					}
					.blog ul li figure .chars time{
						background-image: url('/img/blog-date.png')
					}
					.blog ul li figure .chars .views{
						background-image: url('/img/blog-views.png')
					}
			.blog ul li figure figcaption a{
				text-align: left;
				display: block;
				color: #333;
				font-size: 14px;
			}
			.blog ul li figure figcaption a:hover{
				color: var(--main-color);
			}

	.blog .lnk{
		text-align: right;
	}
		.blog .lnk a{
			display: inline-block;
			color: var(--main-color);
			text-decoration: none;
			padding-bottom: 0px;
			border-bottom: 1px solid var(--main-color);
		}


.game{
	height: 25vh;
}


@media screen and (max-width: 768px), screen and (max-aspect-ratio: 1/1){
	.heading .wrap .services{
		text-align: center;
		font-size: 0;
		width: 70%;
		margin: 0 auto;
		padding-top: 50px;
	}
	.heading .wrap .services li{
		width: 40%;
		margin: 5%;
		text-align: center;
	}
	.heading .wrap .services li a img{
		margin: 0 auto;
		display: block;
	}

	.heading .wrap .wheel{
		display: none;
	}


	.who{
		display: block;	
	}
	.who article{
		width: 100%;
		display: block;
	}
	.who .mountain{
		display: none;
	}



	.advs ul li{
		display: block;
		width: 100%;
		margin: 15px 0;
	}


	.clients .grid>*{
		height: 25vw;
		width: 50%;
	}
	.clients .grid>*:nth-child(4n+3), .clients .grid>*:nth-child(4n+1), .clients .grid>*:nth-child(4n+2){
		border-right: none;
	}
	.clients .grid>*:nth-child(2n-1){
		border-right: 1px solid #ccc;
	}
	.grid:after{
		height: 3px;
		top: -3px;
	}


	.discounts .offs{
		display: block;
	}
	.discounts .offs .cool figure img{
		width: 100%;
		margin: 0;

		float: none;
	}
	.discounts .offs .cool figure figcaption{
		width: 100%;
		float: none;
		text-align: center;
	}


	.discounts .offs .cool{
		display: block;
		width: 100%;
		margin: 15px 0;
	}

	.blog ul li{
		width: 48%;
		margin-bottom: 20px;
	}

	.game{
		display: none;
	}
}