.featured-contests {
	.header {
		width: 100%;
		height: 617px;
		position: relative;
		z-index: 20;
		border-top: 1.25px solid $color_blue;
		overflow: hidden;
		h2 {
			font-family: $font_secondary;
			font-size: 69px;
			line-height: 69px;
			font-style: italic;
			font-weight: normal;
			text-align: center;
			position: absolute;
			top: 219px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 20;
		}
		&::before {
			content: '';
			width: 757.04px;
			height: 744.93px;
			display: block;
			background: url('../img/layout/bg-featured.svg') no-repeat left top;
			background-size: contain;
			position: absolute;
			top: -14px;
			left: 50%;
			transform: translateX(-50%);
			margin-left: 3px;
			z-index: 1;
		}
		&::after {
			content: '';
			width: 100%;
			height: 100%;
			display: block;
			background: url('../img/layout/bg-shadow-mobile.svg') no-repeat left top;
			background-size: cover;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		}
	}
	.content {
		width: 100%;
		height: 367px;
		background: url('../img/layout/bg-featured2.svg') repeat center top;
		padding: 39px 0 0;
		position: relative;
		border-top: 1.25px solid $color_blue;
		border-bottom: 1.25px solid $color_blue;
		.tns-ovh {
			position: relative;
			z-index: 30;
		}
		.item {
			display: inline-flex !important;
		}
		.twoitens .sub1 {
			margin-right: 30px;
		}
		.tns-controls {
			position: absolute;
			left: 50%;
			bottom: 30.5px;
			width: 183.25px;
			height: 64.25px;
			background: url('../img/layout/controls-mobile.svg') no-repeat left top;
			background-size: contain;
			transform: translateX(-50%);
			z-index: 50;
			button {
				width: 50%;
				height: 100%;
				background: none;
				border: none;
				text-indent: -999em;
			}
		}
	}

	@include media-breakpoint-up(lg) {
		display: flex;
		border-bottom: 1.25px solid $color_blue;
		.header {
			width: 50%;
			height: 545.76px;
			order: 2;
			border-left: 1.25px solid $color_blue;
			h2 {
				font-size: 68px;
				line-height: 70px;
				top: 203.36px;
			}
			&::before {
				width: 100%;
				height: 100%;
				background-size: 130% auto;
				background-position: calc(50% - 3px) 50%;
				top: 0;
				margin-left: 0;
			}
			&::after {
				background: url('../img/layout/bg-shadow.svg') no-repeat -1px top;
				background-size: cover;
			}
		}
		.content {
			order: 1;
			width: 50%;
			height: 545.76px;
			background: url('../img/layout/bg-quadrado.svg') repeat right top;
			background-size: 92px auto;
			padding: 0;
			text-align: center;
			overflow: hidden;
			border-bottom: none;
			.item {
				display: block;
				.subitem {
					width: 154.92px;
				}
				.sub1 {
					margin-right: 25.39px;
				}
			}
			.slider-featured {
				width: 360px;
				height: 545.76px;
				margin: 0 auto;
				text-align: left;
			}
			.tns-ovh {
				height: 545.76px !important;
			}
			.tns-controls {
				position: absolute;
				left: auto;
				right: 17.43px;
				bottom: 15.44px;
				width: 55.42px;
				height: 155.74px;
				background: url('../img/layout/controls.svg') no-repeat left top;
				background-size: contain;
				transform: none;
				display: flex;
				flex-direction: column;
				button {
					width: 100%;
					height: 50%;
					display: block;
					&:nth-child(1) {
						order: 2;
					}
					&:nth-child(2) {
						order: 1;
					}
				}
			}
		}
	}
	@include media-breakpoint-up(xl) {
		.header {
			height: 904px;
			h2 {
				font-size: 100px;
				line-height: 103px;
				top: 341.73px;
			}
			&::before {
				background-size: 123% auto;
				background-position: calc(50% - -13px) 50%;
			}
		}
		.content {
			height: 904px;
			background-size: 151px auto;
			.item {
				.subitem {
					width: 257.24px;
				}
				.sub1 {
					margin-right: 39.17px;
				}
			}
			.slider-featured {
				width: 553.65px;
				height: 904px;
			}
			.tns-ovh {
				height: 904px !important;
			}
			.tns-controls {
				right: 30.27px;
				bottom: 28.88px;
				width: 87.25px;
				height: 246.25px;
			}
		}
	}
}
