.counterSlider {
	-webkit-appearance: none;
	width: 20%;
	min-width: 150px;
	height: 25px;
	background: #d3d3d3;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
	border-radius: 20px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 15px;
}

.counterSlider:hover {
	opacity: 1;
}

.counterSlider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	background: #757b75;
	cursor: pointer;
	border-radius: 50%;
}

.counterSlider::-moz-range-thumb {
	width: 15px;
	height: 15px;
	background: rgba(142, 165, 143, 0);
	cursor: pointer;
}



.content {
	width: 100%;
	height: 400px;
	display: flex;
	flex-direction: row;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.content .images {
	width: 330px;
	height: 186px;
	overflow: hidden;
	position: absolute;
	left: 35px;
	top: 90px;
}

.content .images > div img {
	width: 100%;
	height: auto;
}

.content .images > div {
	border: 1px solid rgb(200, 200, 200);
}


.content .desc {
	width: calc(100% - 250px);
	height: 400px;
	margin-top: 50px;
	overflow: hidden;
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(.85, rgba(0,0,0,1)), to(rgba(1,0,0,0))); 
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1), 85%, rgba(0,0,0,0));
}

.customImage {
	height: 1300px;
	width: auto;
	transition: width 1s, height 1s;
}

.content .desc > div {
	height: 33%;
	padding: 0 50px;
	color: rgb(99, 99, 99);
}

.content .desc > div:nth-child(2n) {
	text-align: right;
}

.content .desc > div p {
	font-size: 15px;
}

.content .desc > div .title {
	color: rgb(51, 51, 51);
	font-weight: 700;
	font-size: 17px;
}

.features > div > .title {
	color: rgb(99, 99, 99);
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	margin-top: 40px;
}

.features > div > .title.separation {
	margin-top: 130px;
}

.features > div > .subtitle {
	color: rgb(134, 134, 134);
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	margin-bottom: 50px;
	max-width: 800px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

@media screen and (max-width: 1410px) {
	.customImage {
		height: 1100px;
	}
}

@media screen and (max-width: 1350px) {
	.customImage {
		opacity: .15;
		position: absolute;
		max-height: 1800px;
		height: 140vh;
		left: -10%;
	}

	.content {
		width: 90%;
	}

	.features > div > .title {
		margin-top: 25px;
	}
}


@media screen and (max-width: 1000px) {
	.content {
		flex-direction: column;
		height: max-content;
	}

	.content > div:first-of-type {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}

	.content .desc {
		width: 80%;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 40px;
	}

	.content .images {
		width: 40%;
		height: calc(40vw * 0.9 * 0.52);
		left: 30%;
		top: calc(11% + 40px);
	}
}

@media screen and (max-width: 835px) {
	.content .images {
		top: calc(10% + 25px);
	}
}


@media screen and (max-width: 635px) {
	.content .images {
		top: calc(9% + 15px);
	}
}

@media screen and (max-width: 500px) {
	.content .images {
		top: calc(7% + 10px);
	}

	.content .desc {
		width: 90%;
	}
}


.themes {
	width: 100%;
	display: flex;
	flex-direction: row;
	padding-bottom: 30px;
}

.themes .theme {
	width: 33%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.themes .theme img {
	width: 90%;
}

.themes .theme p {
	margin-top: 10px;
	font-weight: 600;
	font-size: 16px;
}

@media screen and (max-width: 650px) {
	.themes .theme {
		width: 100%;
		margin-bottom: 40px;
	}

	.themes {
		flex-direction: column;
	}
}