.landing-page {
	.row {
		max-width: 100%;
	}
	
	h3, h3 a {

		// color: $sulo-dark-color;
	}
	
	.section .content-item {
		&:not(.collection-item):not(.feature-item) {
			margin-bottom: 1.5rem;
		}
	}

	.sell-on-sulo {
		background: rgba($sulo-color, 0.3);
		padding: 4rem 1rem 4rem 1rem;
		margin-bottom: 0;
		.lead {
			margin-left: auto;
			margin-right: auto;
			max-width: 30rem;
		}
	}


	.mobile-app-banner {
		background: rgba($light-gray, 0.3);
		padding: 2rem 3rem 0 3rem;
		text-align: center;
		@include breakpoint(medium) {
			text-align: left;
		}
		.lead i {
			color: $dark-gray;
			max-width: 20rem;
			// margin-bottom: 0;
		}
		.photo-container {
			// margin-top: -1rem;
			background: none;
			max-width: 30rem;
			margin: 0 auto;
		}
		.column {
			padding-bottom: 0;
			// @include breakpoint(small only) {
			// 	&:last-child {
			// 		margin-top: -2rem;
			// 	}
			// }
		}
	}

	.banner {
		.icon {
			width: 50px;
			height: 50px;
			opacity: 1;
		}
	}

	.features-banner {
		.jumbo-lead {
			margin-bottom: 0;
		}
	}

	.sulo-instagram {
		background: rgba($light-gray, 0.3);
		margin-bottom: 0;
		padding: 4rem 0;
		h3 a {
			color: $sulo-dark-color;
		}
	}
	.section {
		padding: 2rem 0;
		@include breakpoint(medium) {
			padding: 4rem 0;
		}
		&.content, &.collections {
			.row .column {
				padding:  0 2px;
				@include breakpoint(medium) {
					padding:  0 5px;
				}
			}
		}
	}
	.section.form {
		padding-bottom: 0;
	}


	&#sulo-index-container {
		.hero-content {
			@include breakpoint(medium) {
				padding: 0 1rem 8rem 1rem;
			}
		}
	}
	&#sulo-start-store {
		$color: $black;//darken($sulo-dark-color, 30%);
		h2 {
			text-transform: none;
		}
		
		h6 {
			margin-bottom: 0.5rem;
			strong {
				font-weight: bold;
			}
		}
		h3, h5, h6 {
			text-transform: none;
			font-weight: $global-weight-bold;
		}
		.hero-background {
			.photo-container {
				height: 100%;
				.photo {
					padding: 0;
					height: 100%;
				}
			}
			// background: $sulo-color;
			// background: radial-gradient(rgba($black, 0.2), rgba($black, 0.2), rgba($black, 0.4) );
		}
		.hero-content {
			background: radial-gradient(rgba($color, 0.4), rgba($color, 0.5), rgba($color, 0.75) );
			text-shadow: 1px 1px 0 rgba($black, 0.2);
			padding: 8rem 0;
			min-height: 60vh;
			position:relative;
			.button {
				text-shadow: none;
				margin: 0;
			}
			p {
				// color: $white;
			}

			.callout:not(.success) {
				text-shadow: none;
				background: rgba($color, 0.5);
				// color: $white;
				margin: 0;
				a, label, small {
					color: $white;
					// font-weight: bold;
				}
				.is-invalid-input {
					background-color: lighten($alert-color, 35%) !important;
				}
				// display: flex;
				
				.row {
					max-width: $global-width;
				}
			}

			.lead {
				margin-bottom: 2rem;
			}
			form {
				width: 100%;
				max-width: 30rem;
			}
		}

		// .hero:not(.hero-footer) {
		// 		.callout {
		// 			background: rgba($color, 0.25);
		// 			position: absolute;
		// 			left: 0;
		// 			bottom: 0;
		// 			right: 0;
		// 		}
		// 	}
		.hero {
			height: auto;
			img {
				// filter: blur(2px);
			}
		}
		.hero-footer {
			img {
				filter: blur(2px);
			}
		}

		.sulo-banner {
		// padding: 4rem 0;
		// background: rgba($sulo-color, 0.3);
		overflow: hidden;
			position: relative;
			padding-bottom: 0;
			img {
				flex: 0 0 auto;
				max-width: 20rem;
				margin: 0 auto;
				object-fit: contain;
			}
			@include breakpoint(medium) {
				padding-bottom: 4rem;
				img {
					position: absolute;
					height: 100%;
					top: 0;
					// left: 50%;
					max-width: none;
					margin: 0 auto;
				}
			}
			.column:first-child {
				display: flex;
				justify-content: center;
				flex-direction: column;
			}
			.column:last-child {
				padding: 0 2%;
			}

			

			h3 {
				margin-top: 0;
			}
			h5 {
				// color: $sulo-dark-color;
				text-transform:  none;
				font-weight: $global-weight-normal;
				margin-bottom: 0.25rem;
			}
			.menu {
				padding-bottom: 2rem;
				p {
					margin-bottom: 0.5rem;
				}
			}
			
		}

		.video-production-banner {
			position: relative;
			overflow: hidden;
			padding-bottom: 0;
			.column:last-child {
				padding: 0 2%;
			}
			@include breakpoint(medium) {
				padding-bottom: 4rem;
				img {
					// z-index: 0;
					position: absolute;
					right: 50%;
					top: 0;
					width: auto;
					// bottom: 0;

				}
			}
			@include breakpoint(large) {
				img {
					height: 100%;
				}
			}
			// .menu, .section-title {
			// 	z-index: 1;
			// }
		}
	}

	.success-message {
		color: darken(map-get($foundation-palette, success), 10%);
		// padding: 0.5rem;
		// font-weight: $global-weight-bold;
		// letter-spacing: 0.5px;
		font-weight: $global-weight-bold;
		font-size: 90%;
		// color: $dark-gray;
		text-align: center;
	}
}