.container{
	.roadrunner-slider{
		.slider-item{
			.slider-body{
				.col-lg-5.slider-body-inner{
					@extend .col-lg-7;
					padding-left: 6rem;
					padding-right: 6rem;
				}
			}
		}
	}
}

.roadrunner-slider{
	@extend .tns-slider;
	.slider-item{
		min-height: 20rem;
		position: relative;
		overflow: hidden;
        @include media-breakpoint-down(lg){
			max-height: 80vh;
        }
		img{
			width: 100% !important;
			height: auto;
			position: relative;
			z-index: 1;
		}
		.banner{
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 2;
		}
		.slider-body{
			position: absolute;
			z-index: 3;
			left: 0;
			width: 100%;
			.container{
				padding:0;
			}
			.slider-body-inner{
				padding: 1rem;
				opacity: 0;
				transform: translateY(1rem);
				transition: .5s ease transform, .5s ease opacity;
				transition-delay: 0s;
			}
			&.pos-top-right,
			&.pos-top-left{ top: 4rem; }
			&.pos-bottom-right,
			&.pos-bottom-left{ bottom: 4rem; }
			&.pos-middle-right{ top: 50%;  transform: translateY(-50%); }
			&.pos-middle-left{ top: 50%; transform: translateY(-50%); }
			&.pos-middle{
				top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;
				.slider-body-inner{
					margin: 0 auto;
				}
			}
			&.pos-top-right,
			&.pos-bottom-right,
			&.pos-middle-right{
				.slider-body-inner{
					margin-left: auto;
				}
			}
            @include media-breakpoint-down(lg){
				max-width: 100%;
				&.pos-top-right,
				&.pos-top-left,
				&.pos-bottom-right,
				&.pos-bottom-left,
				&.pos-middle-right,
				&.pos-middle-left{ top: 50%; bottom: unset; }
				transform: translateY(-50%);
            }
		}
		.ribbon{
			position: absolute;
			bottom: 0;
			width: 110%;
			height: 35rem;
			z-index: 2;
			&.ribbon-left{
				left: -5%;
				transform: rotate(5deg) translateY(55%);
				transform-origin: top right;
			}
			&.ribbon-right{
				right: -5%;
				transform: rotate(-5deg) translateY(55%);
				transform-origin: bottom left;
			}
            @include media-breakpoint-down(xl){
            	&.ribbon-left{
					transform: rotate(5deg) translateY(45%);
				}
				&.ribbon-right{
					transform: rotate(-5deg) translateY(45%);
				}
			}
            @include media-breakpoint-down(lg){
            	&.ribbon-left, &.ribbon-right{
	            	top: 0;
	            	left: 0;
	            	transform: unset;
	            	width: 100%;
	            	height: 100%;
            	}
			}
		}
		&.tns-slide-active{
			.slider-body-inner{
				opacity: 1;
				transform: translateY(0);
				transition-delay: .2s;
			}
			.ribbon{

			}
		}
	}
}

.tns-outer .tns-controls{
	outline: unset;
}

.content_wrapper{
	.tns-controls{
		padding: 0 1rem;
        @include media-breakpoint-down(lg){
        	display: none;
        }
	}
	.tns-nav{
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 3;
		padding-bottom: .5rem;
		button{
			width: 1.1rem;
			height: 1.1rem;
			border: 2px solid white;
			background: rgba(255,255,255,.6);
			border-radius: 2rem;
			margin: 0 .25rem;
			outline: unset;
			box-shadow: unset;
			transition: .2s ease;
			&.tns-nav-active{
				background: rgba(255,255,255,1);
				width: 2rem;
			}
		}
	}
}
