/* Design Styling */

.promo-box-component.design0 {
	background-color: #ffffff;
	border-radius: 8px;
	overflow: hidden;		
}

.promo-box-component.design0 .media-container {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.promo-box-component.reverse.design0 .media-container {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}


.promo-box-component.design1, .promo-box-component.reverse.design1 {

	border-left: 1px solid #e4e4e4;
	border-right: 1px solid #e4e4e4;
	border-top: 1px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
	border-radius: 8px;
	overflow: hidden;		
}



.promo-box-component.design1 .text-container, .promo-box-component.reverse.design1 .text-container {
	color: #252525;
	background-color: #ffffff;
}		

.promo-box-component.design2, .promo-box-component.reverse.design2 {

	border-radius: 8px;
	overflow: hidden;		
}	

.promo-box-component.design2 .text-container, .promo-box-component.reverse.design2 .text-container {
	color: #ffffff;
	background-color: #252525;
}		

.promo-box-component.design3, .promo-box-component.reverse.design3 {

	border-radius: 8px;
	overflow: hidden;			
}	

.promo-box-component.design3 .text-container, .promo-box-component.reverse.design3 .text-container {
	color: #ffffff;
	background-color: #002a5c;
}	

.promo-box-component.design4, .promo-box-component.reverse.design4 {
	border-radius: 8px;	
	overflow: hidden;		
}

.promo-box-component.design4 .text-container, .promo-box-component.reverse.design4 .text-container {
	color: #252525;
	/* background-color: #fff9e6; */
}		

.promo-box-component .text-inner-padding {
align-self:center

}

.promo-box-component  .text-container {
min-height:29rem;
display:flex;
flex-direction:row;
padding: 30px;	

}

.promo-box-component .promo-header h3 {
	margin-top: 10px;
	font-weight:bold;		
}

.promo-box-component .media-container a {
	position: absolute;
	z-index: 5;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
    width: 100%;
    height: 100%;
}

/* video icon overlay style */	

.promo-box-component .media-container a::before {
    content: url(/images/youtube-play-red.svg);
	position: absolute;
	z-index:5;	
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	width: 80px;
	opacity: .9;
	

}
.promo-box-component .media-container:hover a::before {
	    content: url(/images/youtube-play-red.svg);
		opacity: 1;

}

.promo-box-component .media-container i.far.fa-play-circle.fa-7x {
    display: none;
}


/* button styles */			
.promo-box-component .text-container .btn {
	color: #000;
	background-color: #ffca2c;
	border-color: #ffc720;
	font-size: 18px;
	margin-top: 15px;
}

.promo-box-component .text-container .btn:hover {
	color: #000;
	background-color: #ffc107;
	border-color: #ffc107;
}	

/* Icon Margins */

.promo-box-component a.btn span  {
	margin-right: 0.3em;	
}

/* Desktop Behavior */

@media screen and (min-width: 768px) {
	.promo-box-component  {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;

		-ms-flex-direction: row;
		flex-direction: row;
		align-items: stretch;
	}


	.promo-box-component.reverse.design4 > .text-container {
		border-left: solid 12px #fec52d;
		border-right:0;
	}

	.promo-box-component.design4 > .text-container {
		border-right: solid 12px #fec52d;
		border-left:0;
	}			

	.promo-box-component .text-container {
		width: 50%;
	}

	.promo-box-component .text-container.sixty-forty {
		width: 60%;
	}			

	.promo-box-component .text-container.forty-sixty {
		width: 40%;
	}

	.promo-box-component .text-container.thirty-seventy {
		width: 30%;
	}			

	.promo-box-component.reverse {
		flex-direction: row-reverse;
	}	

	.promo-box-component .media-container {
		width: 50%;
		height: auto;
		min-height: 40rem;
	}	

	.promo-box-component .media-container.forty-sixty {
		width: 60%;
	}	

	.promo-box-component .media-container.sixty-forty {
		width: 40%;
	}			


	/* arrow indicators */		
	.promo-box-component.reverse.design0 .media-container::after, .promo-box-component.reverse.design1 .media-container::after, .promo-box-component.reverse.design2 .media-container::after, .promo-box-component.reverse.design3 .media-container::after  {
		position: absolute;
		right: -40px;
		left: inherit;	
		bottom: 45%;
		width: 4rem;
		height: 4rem;
		transform: translateX(-50%) rotate(45deg);
		content: '';
		box-shadow: 1px 1px 3px rgb(51 51 51 / 43%);
	}
	.promo-box-component.design0 .media-container::after, .promo-box-component.design1 .media-container::after, .promo-box-component.design2 .media-container::after, .promo-box-component.design3 .media-container::after {
		position: absolute;
		left: 0;
		bottom: 45%;
		width: 4rem;
		height: 4rem;
		-webkit-transform: translateX(-50%) rotate(45deg); 
		transform: translateX(-50%) rotate(45deg);
		content: '';
		box-shadow: 1px 1px 3px rgb(51 51 51 / 43%);
	}	
	
.promo-box-component.design1 .media-container {
	right: -1px;
}
.promo-box-component.reverse.design1 .media-container {
	right: 0;
}	
}

/* arrow colors */
.promo-box-component.reverse.design0 .media-container::after, .promo-box-component.design0 .media-container::after, .promo-box-component.reverse.design1 .media-container::after, .promo-box-component.design1 .media-container::after {background-color:#ffffff}
.promo-box-component.reverse.design2 .media-container::after, .promo-box-component.design2 .media-container::after {background-color:#252525}	
.promo-box-component.reverse.design3 .media-container::after, .promo-box-component.design3 .media-container::after {background-color:#002a5c}


.promo-box-component .media-container {
	position: relative;
	min-height: 29rem;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
}

.full-width .promo-box-component  .media-container {
	position: relative;
	height: 60rem;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
}

/* link color change for darker design backgrounds */
.promo-box-component.design2 a, .promo-box-component.design3 a {
	color: #96daff;
}

/* Stack location border and radius adjustments */			
.img-card-comp-wrap.first-stack .promo-box-component.design0 .media-container {border-bottom-left-radius: 0px;}
.img-card-comp-wrap.middle-stack .promo-box-component.design0 .media-container {border-top-left-radius: 0px;border-bottom-left-radius: 0px;}
.img-card-comp-wrap.last-stack .promo-box-component.design0 .media-container {border-top-left-radius: 0px;}
.img-card-comp-wrap.first-stack .promo-box-component.reverse.design0 .media-container {border-bottom-right-radius: 0px;}
.img-card-comp-wrap.middle-stack .promo-box-component.reverse.design0 .media-container {border-top-right-radius: 0px;border-bottom-right-radius: 0px;}
.img-card-comp-wrap.last-stack .promo-box-component.reverse.design0 .media-container {border-top-right-radius: 0px;}
.img-card-comp-wrap.first-stack .promo-box-component.design1, 
.img-card-comp-wrap.first-stack .promo-box-component.design2, 
.img-card-comp-wrap.first-stack .promo-box-component.design3, 
.img-card-comp-wrap.first-stack .promo-box-component.design4 {border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;border-bottom: 0px;}
.img-card-comp-wrap.middle-stack .promo-box-component.design1, 
.img-card-comp-wrap.middle-stack .promo-box-component.design2, 
.img-card-comp-wrap.middle-stack .promo-box-component.design3, 
.img-card-comp-wrap.middle-stack .promo-box-component.design4 {border-radius:0px;border-top:0px;border-bottom:0px;}
.img-card-comp-wrap.last-stack .promo-box-component.design1, 
.img-card-comp-wrap.last-stack .promo-box-component.design2, 
.img-card-comp-wrap.last-stack .promo-box-component.design3, 
.img-card-comp-wrap.last-stack .promo-box-component.design4 {border-top-left-radius: 0px;border-top-right-radius: 0px;border-top: 0px;}
.img-card-comp-wrap.first-stack .promo-box-component.reverse.design1, 
.img-card-comp-wrap.first-stack .promo-box-component.reverse.design2, 
.img-card-comp-wrap.first-stack .promo-box-component.reverse.design3, 
.img-card-comp-wrap.first-stack .promo-box-component.reverse.design4 {border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom: 0px;}
.img-card-comp-wrap.middle-stack .promo-box-component.reverse.design1, 
.img-card-comp-wrap.middle-stack .promo-box-component.reverse.design2, 
.img-card-comp-wrap.middle-stack .promo-box-component.reverse.design3, 
.img-card-comp-wrap.middle-stack .promo-box-component.reverse.design4 {border-radius:0px;border-top: 0px;}
.img-card-comp-wrap.last-stack .promo-box-component.reverse.design1, 
.img-card-comp-wrap.last-stack .promo-box-component.reverse.design2, 
.img-card-comp-wrap.last-stack .promo-box-component.reverse.design3, 
.img-card-comp-wrap.last-stack .promo-box-component.reverse.design4 {border-top-right-radius: 0px;border-top-left-radius: 0px;border-top: 0px;}

/* Mobile Behavior */		
@media only screen and (max-width : 768px){
	
	.promo-box-component  {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
		
	}

	.promo-box-component {
		margin-bottom: 30px;
	}

	.promo-box-component .text-container {
		padding: 30px;
	}

	.promo-box-component > .promo-header h3 {
		margin-top: 0px;
	}

	.promo-box-component.design1 {
		border-top-right-radius: 8px;
		border-right: 1px solid #e4e4e4;
	}

	.promo-box-component > .media-container::after {
		box-shadow: -1px -1px 3px rgb(51 51 51 / 43%);
	}

	.promo-box-component.reverse.design0 .media-container::after, .promo-box-component.design0 .media-container::after {
		background-color: #f8f8f8;
	}	

	.promo-box-component.reverse.design0 .media-container::after, .promo-box-component.design0 .media-container::after {
		background-color: #f8f8f8;

	}

	.promo-box-component.design0 .text-container {
		padding: 30px;
		background-color: #f8f8f8;
		/*border-top-right-radius: 8px;*/
		/*border-top-left-radius: 8px;*/
	}
	
	.promo-box-component .text-container {
		min-height: auto;}

	.promo-box-component.design2 {
		border-top-right-radius: 8px;
	}	

	.promo-box-component.design3 {
		border-top-right-radius: 8px;
	}			

	.promo-box-component  .media-container::after {
		position: absolute;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		bottom: -2rem;
		width: 4rem;
		height: 4rem;
		-webkit-transform: translateX(-50%) rotate(45deg);
		transform: translateX(-50%) rotate(45deg);
		content: '';
	}
	.promo-box-component.reverse.design4 > .text-container, .promo-box-component.design4 > .text-container {

		border-top: solid 12px #fec52d;

	}	


	.promo-box-component.design0 .media-container, .promo-box-component.design2 .media-container, .promo-box-component.design3 .media-container, .promo-box-component.design4 .media-container {
		border-top-left-radius: 0px;
	}	
/* mobile stack styles */
	
	.img-card-comp-wrap.first-stack .promo-box-component.design1, 
	.img-card-comp-wrap.first-stack .promo-box-component.design2, 
	.img-card-comp-wrap.first-stack .promo-box-component.design3, 
	.img-card-comp-wrap.first-stack .promo-box-component.design4,
	.img-card-comp-wrap.middle-stack .promo-box-component.design1, 
	.img-card-comp-wrap.middle-stack .promo-box-component.design2, 
	.img-card-comp-wrap.middle-stack .promo-box-component.design3, 
	.img-card-comp-wrap.middle-stack .promo-box-component.design4, 
	.img-card-comp-wrap.last-stack .promo-box-component.design1, 
	.img-card-comp-wrap.last-stack .promo-box-component.design2, 
	.img-card-comp-wrap.last-stack .promo-box-component.design3, 
	.img-card-comp-wrap.last-stack .promo-box-component.design4, 
	.img-card-comp-wrap.first-stack .promo-box-component.reverse.design1, 
	.img-card-comp-wrap.first-stack .promo-box-component.reverse.design2, 
	.img-card-comp-wrap.first-stack .promo-box-component.reverse.design3, 
	.img-card-comp-wrap.first-stack .promo-box-component.reverse.design4,
	.img-card-comp-wrap.middle-stack .promo-box-component.reverse.design1, 
	.img-card-comp-wrap.middle-stack .promo-box-component.reverse.design2, 
	.img-card-comp-wrap.middle-stack .promo-box-component.reverse.design3, 
	.img-card-comp-wrap.middle-stack .promo-box-component.reverse.design4, 
	.img-card-comp-wrap.last-stack .promo-box-component.reverse.design1, 
	.img-card-comp-wrap.last-stack .promo-box-component.reverse.design2, 
	.img-card-comp-wrap.last-stack .promo-box-component.reverse.design3, 
	.img-card-comp-wrap.last-stack .promo-box-component.reverse.design4 {
		border-top-right-radius: 8px;
		border-top-left-radius: 8px;
		border-bottom-right-radius: 8px;
		border-bottom-left-radius: 8px;
	}
	.img-card-comp-wrap.first-stack .promo-box-component.reverse.design1,.img-card-comp-wrap.first-stack .promo-box-component.design1 {
		border-bottom: 1px solid #e4e4e4;	
	}
	
	.img-card-comp-wrap.last-stack .promo-box-component.design1, .img-card-comp-wrap.last-stack .promo-box-component.design2, .img-card-comp-wrap.last-stack .promo-box-component.design3, .img-card-comp-wrap.last-stack .promo-box-component.design4 {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
	
	}}

/*editor styles */

.stk-component-editor-wrapper.horizontal-card img {
    float: right;
    max-width: 250px;
}
.stk-component-editor-wrapper.horizontal-card img.yes {
    float: left;
    max-width: 250px;
	margin-right:30px;
	margin-left: 20px;
}


/* Container Additions */

.col-sm-7 .img-card-comp-wrap, .col-sm-6 .img-card-comp-wrap, .col-sm-5 .img-card-comp-wrap, .col-sm-4 .img-card-comp-wrap,  .col-sm-3 .img-card-comp-wrap  {
	container-type: inline-size;
	container-name: image-card-comp; 
}

@container image-card-comp (max-width: 900px) {

	.promo-box-component {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
		float:none;
	}

	.promo-box-component.reverse {
		flex-direction: column-reverse;
	}

	.promo-box-component.reverse.design0 .media-container::after, .promo-box-component.reverse.design1 .media-container::after, .promo-box-component.reverse.design2 .media-container::after, .promo-box-component.reverse.design3 .media-container::after {
		position: absolute;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		bottom: -3rem;
		width: 4rem;
		height: 4rem;
		-webkit-transform: translateX(-50%) rotate(45deg);
		transform: translateX(-50%) rotate(45deg);
		content: '';
	} 

	.promo-box-component .text-inner-padding {
		align-self: flex-start;}

	.media-container.equal-width {
		background-position: 0;
	}

	.promo-box-component {
		margin-bottom: 30px;
	}

	.promo-box-component .text-container {
		padding: 30px;
		width: 100%;
	}

	.promo-box-component .media-container {
		position: relative;
		min-height: 29rem;
		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;
		overflow: hidden;
		aspect-ratio: 16 / 9;
		width:100%;	
	}

	.promo-box-component .media-container.forty-sixty {
		position: relative;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		overflow: hidden;
		width:100%;	
		aspect-ratio: 16 / 9;
		min-height: 45rem;
	}	

	.promo-box-component .media-container.sixty-forty {
		position: relative;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		overflow: hidden;
		width: 100%;
		aspect-ratio: 407 / 190;
		min-height: 19rem;	
	}

	.promo-box-component .text-container.sixty-forty, .promo-box-component .media-container.sixty-forty, .promo-box-component .text-container.forty-sixty {
		width:100%;
	} 
	.promo-box-component > .promo-header h3 {
		margin-top: 0px;
	}
	.promo-box-component.design1 {
		border-top-right-radius: 8px;
		border-right: 1px solid #e4e4e4;
	}
	.promo-box-component > .media-container::after {
		box-shadow: -1px -1px 3px rgb(51 51 51 / 43%);
	}
	.promo-box-component.design0 .text-container {
		padding: 30px;
	}
	.promo-box-component .text-container {
		min-height: auto;}

	.promo-box-component.design2 {
		border-top-right-radius: 8px;
	}	

	.promo-box-component.design3 {
		border-top-right-radius: 8px;
	}		
	.promo-box-component.design1 .media-container {
		right: 0px;
	}
	.promo-box-component.design0 .media-container::after, .promo-box-component.design1 .media-container::after, .promo-box-component.design2 .media-container::after, .promo-box-component.design3 .media-container::after {
		position: absolute;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		bottom: -2rem;
		width: 4rem;
		height: 4rem;
		-webkit-transform: translateX(-50%) rotate(45deg);
		transform: translateX(-50%) rotate(45deg);
		content: '';
	}
	.promo-box-component.reverse.design4 > .text-container, .promo-box-component.design4 > .text-container {
		border-top: solid 12px #fec52d;

	}	
	.promo-box-component.reverse.design1.last-stack, .promo-box-component.reverse.design2.last-stack, .promo-box-component.reverse.design3.last-stack, .promo-box-component.reverse.design4.last-stack {
		border-top-right-radius: 8px;
		border-top-left-radius: 8px;
		border-top: 0px;
	}
	
	.img-card-comp-wrap.first-stack .promo-box-component.design1 {border-bottom:1px}
	.promo-box-component.reverse.design1.middle-stack, .promo-box-component.design1.middle-stack, .promo-box-component.reverse.design1.last-stack, .promo-box-component.design1.last-stack {
		border-top: 1px solid #e4e4e4;
	}
	.promo-box-component.design1.first-stack, .promo-box-component.design2.first-stack, .promo-box-component.design3.first-stack, .promo-box-component.design4.first-stack,.promo-box-component.design1.middle-stack, .promo-box-component.design2.middle-stack, .promo-box-component.design3.middle-stack, .promo-box-component.design4.middle-stack, .promo-box-component.design1.last-stack, .promo-box-component.design2.last-stack, .promo-box-component.design3.last-stack, .promo-box-component.design4.last-stack, .promo-box-component.reverse.design1.first-stack, .promo-box-component.reverse.design2.first-stack, .promo-box-component.reverse.design3.first-stack, .promo-box-component.reverse.design4.first-stack,.promo-box-component.reverse.design1.middle-stack, .promo-box-component.reverse.design2.middle-stack, .promo-box-component.reverse.design3.middle-stack, .promo-box-component.reverse.design4.middle-stack, .promo-box-component.reverse.design1.last-stack, .promo-box-component.reverse.design2.last-stack, .promo-box-component.reverse.design3.last-stack, .promo-box-component.reverse.design4.last-stack, .img-card-comp-wrap.first-stack .promo-box-component.design1, .img-card-comp-wrap.first-stack .promo-box-component.design2, .img-card-comp-wrap.first-stack .promo-box-component.design3, .img-card-comp-wrap.first-stack .promo-box-component.design4, .img-card-comp-wrap.middle-stack .promo-box-component.design1, .img-card-comp-wrap.middle-stack .promo-box-component.design2, .img-card-comp-wrap.middle-stack .promo-box-component.design3, .img-card-comp-wrap.middle-stack .promo-box-component.design4, .img-card-comp-wrap.last-stack .promo-box-component.reverse.design3 {
		border-top-right-radius: 8px;
		border-top-left-radius: 8px;
		border-bottom-right-radius: 8px;
		border-bottom-left-radius: 8px;
	}
	
	.img-card-comp-wrap.last-stack .promo-box-component.design1, .img-card-comp-wrap.last-stack .promo-box-component.design2, .img-card-comp-wrap.last-stack .promo-box-component.design3, .img-card-comp-wrap.last-stack .promo-box-component.design4 {
    border-top-right-radius: 8px;
		border-top-left-radius: 8px;
		border-bottom-right-radius: 8px;
		border-bottom-left-radius: 8px;
}

	.promo-box-component.design0 .media-container, .promo-box-component.design2 .media-container, .promo-box-component.design3 .media-container, .promo-box-component.design4 .media-container {
		border-top-left-radius: 0px;
	}		

	.promo-box-component.design0 .media-container::after, .promo-box-component.design1 .media-container::after, .promo-box-component.design2 .media-container::after, .promo-box-component.design3 .media-container::after {
		bottom: -3rem;
	}
	.promo-box-component .text-container {
		padding: 20px;
		width: 100%;
		padding-bottom: 15px;
	}


	.img-card-comp-wrap.first-stack .promo-box-component.design1,
	.img-card-comp-wrap.middle-stack .promo-box-component.design1,
	.img-card-comp-wrap.last-stack .promo-box-component.design1
	{
		border-bottom: 1px solid #e4e4e4;
	}

}/* End Container Additions */