/* Carousel */

.carousel {
	height: 90%;
	white-space: nowrap;
	position: relative;
	transition: left 1s;
}

.carousel__images {
	height: 90%;
}

@media (min-width: 1000px) {
	.carousel__item {
		height: 100%;
		width: 33%;
		display: inline-block;
		vertical-align: middle;
	}

	.carousel__item--main {
		height: 100%;
		width: 33%;
		display: inline-block;
		vertical-align: middle;
	}
	
	.carousel__image {
		max-height: 50%;
		max-width: 50%;
		display: block;
		margin: 15%;
	}

	.carousel__image--main {
		max-height: 70%;
		max-width: 70%;
		display: block;
		margin: 5%;
	}
}

@media (max-width: 1000px) {
	.carousel__item {
		height: 100%;
		width: 15%;
		display: inline-block;
		vertical-align: middle;
	}

	.carousel__item--main {
		height: 100%;
		width: 70%;
		display: inline-block;
		vertical-align: middle;
	}
	
	.carousel__image {
		max-height: 50%;
		max-width: 50%;
		display: block;
		margin: 25%;
	}

	.carousel__image--main {
		max-height: 70%;
		max-width: 70%;
		display: block;
		margin: 15%;
	}
}

.control {
	height: 10%;
	width: 60%;
	margin-left: 20%;
}

.control__left {
	width: 50px;
	height: 50px;
	float: left;
	margin-bottom: 20px;
	background-color: #9fbdb1;
    border-radius: 25px;
	cursor: pointer;
}

.control__left:hover {
	opacity: 0.8;
}

.control__left--disabled {
	width: 50px;
	height: 50px;
	float: left;
	margin-bottom: 20px;
	background-color: #b2b2b2;
    border-radius: 25px;
	cursor: pointer;
}

.control__right {
	width: 50px;
	height: 50px;
	float: right;
	margin-bottom: 20px;
	background-color: #9fbdb1;
    border-radius: 25px;
	cursor: pointer;
}

.control__right:hover {
	opacity: 0.8;
}

.control__right--disabled {
	width: 50px;
	height: 50px;
	float: right;
	margin-bottom: 20px;
	background-color: #b2b2b2;
    border-radius: 25px;
	cursor: pointer;
}

.control__image {
	width: 40px;
    padding-left: 5px;
    padding-top: 13px;
}