// $primary-color: map-get($foundation-palette, sulo);

$header-background-color: rgba($white,1);//map-get($foundation-palette, primary);//#2E2A31;
$header-font-color: $black;
$header-border-color: rgba($black, 0.1);

$banner-background-color: map-get($foundation-palette, sulo);//rgba($primary-color, 0.15);
$section-footer-color: $primary-color;

#sulo-index, #sulo-sell {
	.page-content {
		padding-bottom: 0;
	}
}

#sulo-sell {
	.footer {
		// visibility: hidden;
	}

	.hero {
		.action-buttons {
			display: flex;
			flex-direction: column-reverse;
			.button.hollow {
				border: none;
				text-decoration: underline;
				margin-top: 1rem;
				&::before {
					// content: "<<";
					// margin-right: 0.2rem;
				}
			}
		}
	}

	// .feature-menu {

	ul.feature-menu {
		li {
			display: flex;
			justify-content: center;
			letter-spacing: 0.5px;
		}
		li:before {
  			content: '✓';
  			margin-right: 0.5rem;
  			color: $sulo-dark-color;
		}
		&:after {
			content: "---";
			color: $sulo-dark-color;
			margin-bottom: 0.5rem;
		}
	}
	// }
}

.hero {
		height: 20rem;

		@include breakpoint(medium) {
			height: 35rem;
		}
		// @include breakpoint(medium) {}
		// max-height: 600px;
		position: relative;
		overflow-y: hidden;
		display: flex;
		.hero-background  {
			background: $black;
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			video {
				width: 100%;
				// height: 100%;
				min-width: 1076px;
				background: $black;
				// filter: blur(5px);
			}
			.photo-container {
				background: transparent;
			}
		}
		
		.hero-content {
			
			position: relative;
			z-index: 2;
			flex: 1;
			display: flex;
			flex-direction: column;
			background: radial-gradient(rgba($black, 0.3), rgba($black, 0.3), rgba($black, 0.4) );
			.va-container {
				flex: 1;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				// text-shadow: 1px 1px 2px rgba($black, 0.5);
			}
			.va-footer {
				h3 {
					color: $white;
					text-align: center;
					margin-top: 0;
					// margin-bottom: 0;
				}
				.content-item {
					padding-top: 0;
				}
				.content-item-text {
					color: $white;
				}
				position: absolute;
				background: rgba($black, 0.5);
				left: 0;
				bottom: 0;
				right: 0;
				height: 15rem;
				.row {
					max-width: $global-width;
				}
			}
		}
	}

