#slider {
	margin:0 auto;
	width:100%;
	height:650px;
	position:relative;
	overflow:hidden;
	border-bottom:1px #fff solid;
	background:#222;
}

#slider .slide {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:100;
}

#slider .slide::before {
	width:100%;
	height:100%;
	content:'';
	background: linear-gradient(105deg, transparent 50%, rgba(0,0,0,.5) 10%);
	position:absolute;
	top:0;
	right:0;
	z-index:105;
}

#slider .slide .title {
	margin:300px 25px 10px 25px;
	font:35px 'interstate',sans-serif;
	text-transform:uppercase;
	letter-spacing:2px;
	text-align:right;
	font-weight:300;
	color:#fff;
	display:inline-block;
	float:right;
	position:relative;
	z-index:110;
}

#slider .slide .content {
	margin:0 15px;
	padding:10px;
	max-width:450px;
	font:18px 'omnes-cyrillic',sans-serif;
	text-align:right;
	font-weight:300;
	color:#fff;
	float:right;
	clear:right;
	border-top:2px var(--accent-color) solid;
	position:relative;
	z-index:110;
}

#slider .slide a.more {
	margin:25px;
	padding:10px;
	font:14px 'interstate-condensed',sans-serif;
	text-transform:uppercase;
	text-align:right;
	background:var(--primary-color);
	color:#fff;
	position:relative;
	display:inline-block;
	float:right;
	clear:right;
	z-index:110;
}

#slider .slide a.more::after {
	margin-left:10px;
	content:'\f324';
	font:14px 'Font Awesome 5 Pro';
	color:inherit;
	transition:all .5s ease;
}

#slider .slide a.more:hover {
	background:var(--primary-dark);
}

#slider .controls {
	margin:0 auto;
	width:calc(100% - 50px);
	text-align:right;
	position:absolute;
	z-index:500;
	bottom:0;
	left:0;
	right:0;
}

#slider .controls .control {
	margin:0 5px;
	padding:15px 0;
	width:calc(30% - 10px);
	max-width:60px;
	height:2px;
	display:inline-block;
	vertical-align:bottom;
	cursor:pointer;
}

#slider .controls .control .bar {
	width:100%;
	height:2px;
	background:rgba(255,255,255,.6);
	display:block;
	box-shadow:0 0 5px rgba(0,0,0,.25);
	transition:all .5s ease;
}

#slider .controls .control .bar:hover {
	background:rgba(255,255,255,1);
}

#slider .controls .control.active .bar {
	background:var(--accent-color);
}


@media only screen and (max-width: 1080px) {
	#slider .slide::before {
		width:100%;
		height:100%;
		content:'';
		background: linear-gradient(105deg, transparent 40%, rgba(0,0,0,.5) 10%);
		position:absolute;
		top:0;
		right:0;
		z-index:105;
	}
}

@media only screen and (max-width: 800px) {
	#slider .slide::before {
		width:100%;
		height:100%;
		content:'';
		background: rgba(0,0,0,.5);
		position:absolute;
		top:0;
		right:0;
		z-index:105;
	}
}

#services {
	padding:50px 0;
	background:#fff;
	border-top:1px var(--primary-color) solid;
	border-bottom:1px var(--accent-color) solid;
}

#services .service {
	margin:5px;
	padding:10px;
	width:calc(100% - 30px);
	max-width:330px;
	
	text-align:left;
	display:inline-block;
	vertical-align:top;
}

#services .service img {
	width:100%;
}

#services .service h2 {
	margin:15px 0;
	font:18px 'interstate',sans-serif;
	text-transform:uppercase;
	letter-spacing:1px;
	text-align:left;
	font-weight:400;
	color:var(--primary-color);
}

#services .service p {
	font:16px/24px 'omnes-cyrillic',sans-serif;
	text-align:left;
	font-weight:400;
	color:var(--text-color);
}

#services .service a.more {
	margin-top:15px;
	font:14px 'interstate-condensed',sans-serif;
	text-transform:uppercase;
	text-align:left;
	color:var(--accent-color);
	display:inline-block;
}

#services .service a.more::after {
	margin-left:5px;
	content:'\f324';
	font:14px 'Font Awesome 5 Pro';
	color:var(--accent-color);
	transition:all .5s ease;
}

#services .service a.more:hover {
	color:var(--primary-color);
}

#services .service a.more:hover::after {
	margin-left:10px;
	color:var(--primary-color);
}