.el-home-slides{
	.slide{
		position: relative;
		display: flex;
		align-items: center;
		min-height: 100vh;
		.bg{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-size: cover;
			background-position: center;
			overflow: hidden;
			.video{
				position: absolute;
				top: 50%;
				left: 50%;
				min-width: 100%;
				min-height: 100%;
				width: auto;
				height: auto;
				transform: translate(-50%, -50%);
				background-color: #000;
				overflow: hidden;
			}
			.youtube{
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: #000;
				overflow: hidden;
				iframe{
					position:absolute;
					top: 50%;
					left: 50%;
					min-width:100%;
					min-height:100%;
					transform: translate(-50%, -50%);
					border: none;
					margin: 0;
					padding: 0;
				}
			}
		}
		.nav{
			.btn-prev,
			.btn-next{
				position: absolute;
				bottom: 10px;
				transform: translateY(-50%);
				max-width: 75px;
				background-color: #ffffff;
				background-size: cover;
				background-position: center;
				opacity: 0.75;
				outline: none;
				transition: 1s;
				cursor: pointer;
				box-shadow: 0 5px 10px -5px rgba(#000, 0.5);
				@include desktop {
					top: 50%;
					bottom: auto;
					opacity: 0.05;
					max-width: none;
				}
				@include mq-min(1920) {
					box-shadow: 0 valor-fluido(5, 1920) valor-fluido(10, 1920) valor-fluido(-5, 1920) rgba(#000, 0.5);
				}
				img{
					display: block;
					max-width: 100%;
					height: auto;
					margin: 0 auto;
					@include mq-min(1920) {
						width: valor-fluido(150, 1920);
					}
				}
			}
			.btn-prev{
				left: -20px;
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
				@include mq-min(1920) {
					left: valor-fluido(-20, 1920);
					border-top-right-radius: valor-fluido(4, 1920);
					border-bottom-right-radius: valor-fluido(4, 1920);
				}
				&:hover {
					left: 0;
					opacity: 1;
				}
			}
			.btn-next{
				right: -20px;
				border-top-left-radius: 4px;
				border-bottom-left-radius: 4px;
				@include mq-min(1920) {
					right: valor-fluido(-20, 1920);
					border-top-left-radius: valor-fluido(4, 1920);
					border-bottom-left-radius: valor-fluido(4, 1920);
				}
				&:hover {
					right: 0;
					opacity: 1;
				}
			}

			.link-prev,
			.link-next{
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				outline: none;
			}
			.link-prev{
				right: 50%;
				&:hover ~ .btn-prev{
					left: 0;
					opacity: 0.75;
				}
			}
			.link-next{
				left: 50%;
				&:hover ~ .btn-next{
					right: 0;
					opacity: 0.75;
				}
			}

			.btn-som{
				position: absolute;
				bottom: 10px;
				left: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 32px;
				height: 32px;
				margin-left: -16px;
				font-size: 16px;
				border-radius: 50%;
				color: #ffffff;
				background-color: #000000;
				opacity: 0.5;
				box-shadow: 0 5px 10px -5px rgba(#000, 0.5);
				transition: 0.2s;
				outline: none;
				cursor: pointer;
				@include desktop {
					left: auto;
					right: 10px;
					width: 48px;
					height: 48px;
					margin-left: -24px;
					font-size: 24px;
				}
				@include mq-min(1920) {
					bottom: valor-fluido(10, 1920);
					right: valor-fluido(10, 1920);
					width: valor-fluido(64, 1920);
					height: valor-fluido(64, 1920);
					margin-left: valor-fluido(-32, 1920);
					font-size: valor-fluido(32, 1920);
					box-shadow: 0 valor-fluido(5, 1920) valor-fluido(10, 1920) valor-fluido(-5, 1920) rgba(#000, 0.5);
				}
				&:hover{
					opacity: 1;
				}
			}
		}
	}
}