.el-cases-destaque-2 .lista-1{
	position: relative;
	background-color: #1e1e1e;
	background-size: cover;
	background-position: center;
	padding: 60px 0;
	@include mq-max(1023) {
		background-image: none !important;
	}
	@include desktop {
		padding: 120px 0;
	}
	@include mq-min(1920) {
		padding: valor-fluido(120, 1920) 0;
	}
	&:before{
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-image: url(../imagens/pattern-1.png);
		background-repeat: repeat;
		background-color: rgba(#000, 0.75);
	}
	>.container{
		position: relative;
	}
	.wrapper{
		position: relative;
		.itens{
			@include tablet {
				display: flex;
				justify-content: space-between;
			}
			@include desktop {
				@include propriedade-fluida("min-height", 360, 790, 1024, 1920);
			}
			@include mq-min(1920) {
				min-height: valor-fluido(790, 1920);
			}
			.item{
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20px;
				text-align: center;
				transition: 1s;
				//cursor: pointer;

				background-size: cover;
				background-position: center;

				@include tablet {
					width: 32%;
					
					&:nth-child(n) { margin-left: 2% }
					&:nth-child(3n+1) { margin-left: 0 }
				}
				@include desktop {
					background: none !important;
					align-items: flex-end;
					width: 29%;

					margin-bottom: 0;
					text-align: left;
					opacity: 0.1;

					&:nth-child(n) { margin-left: 6.5% }
					&:nth-child(3n+1) { margin-left: 0 }
				}

				&:before{
					content: '';
					display: block;
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					background-color: rgba(#000, 0.5);
					border: 2px solid rgba(#ffffff, 0.1);
					border-radius: 4px;
					box-shadow: inset 0 0 10px rgba(#ffffff, 0.1);
					transition: 0.2s;
					@include desktop {
						left: 10%;
						background-color: transparent;
					}
					@include mq-min(1920) {
						border: valor-fluido(2, 1920) solid rgba(#ffffff, 0.1);
						border-radius: valor-fluido(4, 1920);
						box-shadow: inset 0 0 valor-fluido(10, 1920) rgba(#ffffff, 0.1);
					}
				}

				.center{
					padding: 20px 0;
					width: 100%;
					@include mq-min(1920) {
						padding: valor-fluido(20, 1920) 0;
					}
					.titulo{
						position: relative;
						font-size: 12px;
						font-weight: 300;
						color: $color_destaque;
						padding: 0 10px;
						margin-bottom: 5px;
						line-height: 1.2;
						@include tablet {
							margin-bottom: 15px;
							@include propriedade-fluida("font-size", 12, 29, 768, 1200);
						}
						@include desktop {
							margin-bottom: 0;
						}
						@include mq-min(1920) {
							font-size: valor-fluido(29, 1920);
							padding: 0 valor-fluido(10, 1920);
							margin-bottom: valor-fluido(15, 1920);
						}
						b, strong{
							display: block;
							font-size: 20px;
							font-weight: 800;
							color: #ffffff;
							text-transform: uppercase;
							@include tablet {
								@include propriedade-fluida("font-size", 20, 52, 768, 1200);
							}
							@include mq-min(1920) {
								font-size: valor-fluido(52, 1920);
							}
						}
					}
					.desc{
						position: relative;
						font-weight: 300;
						line-height: 1.5;
						padding: 0 10px;
						margin-bottom: 5px;
						color: #ffffff;
						@include tablet {
							margin-bottom: 15px;
						}
						@include desktop {
							display: none;
							padding: 0 14% 0 20%;
						}
						@include mq-min(1920) {
							margin-bottom: valor-fluido(15, 1920);
						}
					}
					.btn{
						position: relative;
						display: block;
						color: $color_destaque;
						line-height: 1.2;
						padding: 0 10px;
						transition: 0.2s;
						@include desktop {
							display: none;
							padding: 0 14% 0 20%;
						}
						&:hover{
							color: darken($color_destaque, 10%);
						}
					}
				}

				&:hover{
					@include desktop {
						opacity: 0.5;
					}
					&:before{
						background-color: rgba(#ffffff, 0.01);
					}
				}
				&.ativo{
					@include desktop {
						align-items: center;
						align-self: stretch;
						opacity: 1;
					}
					.center{
						.titulo{
							@include desktop {
								margin-bottom: 15px;
							}
							@include mq-min(1920) {
								margin-bottom: valor-fluido(15, 1920);
							}
						}
						.desc{
							@include desktop {
								display: block;
							}
						}
						.btn{
							@include desktop {
								display: block;
							}
						}
					}
				}
			}
		}
		.btn-mais{
			display: flex;
			align-items: center;
			justify-content: center;
			@include desktop {
				position: absolute;
				top: 50%;
				right: 0;
				margin-top: -21px;
				margin-right: -21px;
			}
			@include mq-min(1920) {
				margin-top: valor-fluido(-21, 1920);
				margin-right: valor-fluido(-21, 1920);
			}
			a{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 42px;
				height: 42px;
				border-radius: 50%;
				font-size: 40px;
				color: rgba(#ffffff, 0.75);
				background-color: #7a7a7a;
				transition: 0.2s;
				@include mq-min(1920) {
					width: valor-fluido(42, 1920);
					height: valor-fluido(42, 1920);
					font-size: valor-fluido(40, 1920);
				}
				&:hover{
					background-color: $color_destaque;
				}
			}
		}
	}
}


.el-cases-destaque-2 .lista-2{
	position: relative;
	background-color: #101010;
	.itens{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-bottom: 20px;
		@include desktop {
			margin-bottom: 0;
		}
		.item{
			position: relative;
			width: 100%;
			@include phablet {
				width: 50%;
			}
			@include desktop {
				width: 33.33333%;
			}
			.img{
				img{
					display: block;
					margin: 0 auto;
					max-width: 100%;
					height: auto;
					@include mq-min(1920) {
						width: valor-fluido(640, 1920);
					}
				}
			}
			.hover{
				display: flex;
				align-items: center;
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				min-height: 100%;
				background-color: rgba(#000000, 0.85);
				transition: 0.4s ease-out;
				.center{
					width: 100%;
					padding: 0 10px;
					@include mq-min(1360) {
						@include propriedade-fluida("padding-left", 10, 75, 1360, 1920);
						@include propriedade-fluida("padding-right", 10, 75, 1360, 1920);
					}
					@include mq-min(1920) {
						padding-left: valor-fluido(75, 1920);
						padding-right: valor-fluido(75, 1920);
					}
					.categoria{
						display: block;
						font-size: 14px;
						font-weight: 200;
						line-height: 1.2;
						color: $color_destaque;
						@include propriedade-fluida("margin-bottom", 5, 15, 320, 1024);
						@include mq-min(1920) {
							font-size: valor-fluido(14, 1920);
							margin-bottom: valor-fluido(15, 1920);
						}
					}
					.titulo{
						display: block;
						font-weight: 200;
						line-height: 1.2;
						color: #ffffff;
						@include propriedade-fluida("font-size", 16, 24, 320, 1024);
						@include mq-min(1920) {
							font-size: valor-fluido(24, 1920);
						}
					}
				}
				.links{
					display: none;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					width: 100%;
					padding: 25px 10px;
					@include mq-min(1920) {
						padding: valor-fluido(25, 1920) 0;
					}
					a{
						display: inline-block;
						font-size: 12px;
						font-weight: 800;
						line-height: 1.5;
						text-transform: uppercase;
						color: rgba(#ffffff, 0.75);
						text-align: center;
						padding: 5px 10px;
						transition: 0.2s;
						@include mq-min(1920) {
							font-size: valor-fluido(12, 1920);
							padding: valor-fluido(5, 1920) valor-fluido(10, 1920);
						}
						&:hover{
							color: #ffffff;
						}
					}
				}
			}
			&:hover .hover{
				min-height: 0;
				.center{
					display: none;
				}
				.links{
					display: flex;
				}
			}
		}
	}
	.btn-mais{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 20px;
		@include desktop {
			position: absolute;
			top: 50%;
			right: 3%;
			margin-top: -21px;
			margin-right: -21px;
			padding-bottom: 0;
		}
		@include mq-min(1920) {
			margin-top: valor-fluido(-21, 1920);
			margin-right: valor-fluido(-21, 1920);
		}
		a{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 42px;
			height: 42px;
			border-radius: 50%;
			font-size: 40px;
			color: rgba(#ffffff, 0.75);
			background-color: #7a7a7a;
			transition: 0.2s;
			@include mq-min(1920) {
				width: valor-fluido(42, 1920);
				height: valor-fluido(42, 1920);
				font-size: valor-fluido(40, 1920);
			}
			&:hover{
				background-color: $color_destaque;
			}
		}
	}

	&.itens-maximo-4,
	&.itens-maximo-5{
		.itens{
			.item{
				@include desktop-hd {
					width: 25%;
				}
			}
		}
	}
	&.itens-maximo-5{
		.itens{
			.item{
				@include mq-min(1360) {
					width: 20%;
				}
			}
		}
	}
}