@charset "utf-8";

/* CSS Document */


/* The image container gets a background-image applied through css */
.ftps-banner-image {
	background-size: cover;
}


/* Annalee styles */
.page-section-banner {
	border-radius: var(--border_radius);
	overflow: hidden;
}

/* If this is the first section in an output position remove the border & border-radius on the top of the image */
.ft-page-sections .page-section-banner:first-child img {
	border-top: none;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}


.banner-inner {
	border-radius: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	display: flex;
	flex-direction: column-reverse;
	overflow: hidden;
	position: relative;
}

.ftps-banner-image {
	padding-bottom: 10%;
	position: relative;
}

.ftps-banner-image::before {
	
	background: linear-gradient(to bottom, var(--banner_accent_color), var(--banner_accent_color) 0, transparent);
	bottom: 0;
                        
	content: "";
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
		
}

.ftps-banner-image img {
	opacity: 0;
	position: absolute;
	z-index: -1;
}

.ftps-banner-image .ft-shop-the-image {
	position: static;
}

.ftps-banner-image .shop-the-image-button {
	z-index: 4;
}

.ftps-banner-content {
	background-color: var(--banner_accent_color);
	position: relative;
}

.ftps-banner-content * {
	color: var(--banner_text_color, inherit);
}

.banner-content {
	padding: 0 var(--space_normal);
}


/* At some point the image/content get next to eachother */
@media (min-width: 45em) {

	.banner-inner {
		background-color: var(--banner_accent_color);
		margin: 0 auto;
		max-width: 1200px;

		/*
		display: flex;
		flex-direction: row-reverse;
		*/
		position: relative;
	}

	.ftps-banner-content {
		background-color: transparent;
		max-width: 70%;

		/*max-width: 560px;*/
		padding: var(--space_normal);
		z-index: 2;
	}

	.ftps-banner-image {
		bottom: 0;
		min-width: 70%;
		padding-bottom: 0;
		position: absolute;
		right: 0;
		top: 0;
	}

	.ftps-banner-image::before {
		background: linear-gradient(to right, var(--banner_accent_color), var(--banner_accent_color) 16.6666%, transparent);
	}
	
	/* If there's too much text make sure the image is still at the top edge */

	/*
	.ftps-hero-image {
		align-self: flex-start;	
	}
	.ftps-hero-content {
		text-align: initial;
		padding-right: var(--space_xlarge);
		max-width: 43%;	
	}
	*/
}