@import "@{parenturl}/less/mixins.less";

.hero, .entry-content, #content, #responsiveHeader a {
	&:not(.ready) {
		visibility: hidden;
	}
}

.hero {
	video {
		max-height:720px;
	}

	.play {
		color:#fff;
		.font(~"Bebas Neue", 400, 32px);
		.max({font-size:24px});
		.max({font-size:18px}; 540);
		letter-spacing:.1em;
		text-transform:uppercase;
		.vertAlign;
		.transition();
		img {
			display:block;
			margin-right:.5em;
			width:4.38em;
		}
	}
	
	&.played {
		.play {
			opacity: 0;
			pointer-events: none;
		}
		
		& ~ #content h1 {
			margin-top: 0;
			color: rgba(23,36,76,1);
			pointer-events: none;
			
			> span {
				&::before {
					background-color: rgba(23,36,76,1);
				}
			}
		}
	}
}

h1 {
	color:#fff;
	.font(~"Bebas Neue", 400, 125px);
	font-size:~"min(125px, 10vw)";
	margin-top:-.79em;
	letter-spacing:.1em;
	text-align:right;
	text-transform:uppercase;
	position:relative;
	z-index:10;
	.transition();
	> span {
		position:relative;
		display:inline-block;
		padding-left:25px;
		&:before {
			content:' ';
			display:block;
			position:absolute;
			width:50vw;
			height:4px;
			background-color:#fff;
			right:100%;
			top:0;
			bottom:10%;
			margin:auto;
		}
	}
	.heart {
		position:relative;
		&:before {
			content:' ';
			display:block;
			position:absolute;
			z-index:-1;
			background-image:url('/wp-content/uploads/2021/04/heart.svg');
			background-size:contain;
			background-position:center;
			background-repeat:no-repeat;
			width:1.44em;
			height:1.30em;
			top:50%;
			left:50%;
			.translate(-50%, -50%);
		}
	}
}

section {
	.margin-ends(5vw);
	padding:25px;
}

#welcome {
	overflow:hidden;
	.welcome {
		display:grid;
		grid-template-columns:auto 1fr;
		.max-width(1400px);
		padding:0;

		@media (max-width:540px) {
			display:block !important;
			border-left:2px solid #62AB8C;
			border-right:2px solid #62AB8C;
			border-bottom:2px solid #62AB8C;
		}

		h3 {
			background-color:#A66E30;
			color:#fff;
			.font(~"Bebas Neue", 400, 80px);
			.max({font-size:60px;}; 1080);
			.max({font-size:40px});
			letter-spacing:.1em;
			margin:0;
			text-align:center;
			text-transform:uppercase;
			.vertAlign();

			@media (min-width:541px) {
				.rotate(180deg);
				writing-mode: vertical-rl;
				width:1.5em;
				padding-top:1.1em;
				padding-right:.1em;
				padding-bottom:1em;
			}
		}
		h2 img {
			.max({ max-width:240px; });
			.max({ max-width:100%; }, 540);
		}

		> div {
			padding:25px;
			@media (min-width:541px) {
				border-top:2px solid #62AB8C;
				border-right:2px solid #62AB8C;
				border-bottom:2px solid #62AB8C;
			}
		}
		.grid {
			background-image:url('/wp-content/uploads/2021/04/welcome.jpg');
			padding:50px 25px;
			height:100%;
			align-items:center;
			justify-items:center;
			@media (max-width:1080px) {
				grid-template-columns:1fr;
				> * { grid-column: span 1; }
			}
			> h2 {
				margin:0;
			}
			h2 {
				color:#fff;
			}
			p {
				color:#fff;
				.max({font-size:14px; line-height:1.25}; 540);
			}
		}
	}
	.npoo {
		h4 {
			margin:0;
		}
		.copy {
			background-color:#A66E30;
			padding:25px;
			p {
				color:#fff;
				font-size:16px;
			}
			strong, b { color: #fff; }
		}	
	}
	@media (min-width:540px) { 
		display:grid;
		grid-template-columns:1fr auto;
		padding-right:0;
		.npoo {
			position:relative;
			font-size:36px;
			.max({font-size:28px;}; 1080);
			.max({font-size:24px});
			align-self:center;
			h4 {		
				background-color:#fff;
				.rotate(180deg);
				writing-mode: vertical-rl;
				font-size:1em;
				height: 13em;
				&:after {
					.clip(~"0% 0%, 100% 50px, 100% calc(100% - 50px), 0% 100%");
				}
			}
			.copy {
				font-size:1em;
				height:13em;
				position:absolute;
				width:320px;
				top:0;
				left:100%;
				p { 
					font-size:24px;
					line-height:1.25;
				}
			}
			& {
				.translateX(0);
				.transition();
			}
			&:hover {
				.translateX(-320px);
			}
		}
	}
}

#solea {
	.min({ .padding-sides(50px); });
	.max({ .padding-sides(10px);}; 540);
	
	.heading {
		h2, p { text-align: center; }
	}
	
	> div {
		border:2px solid #9B6230;
		padding:25px;
		.max({ .padding-sides(10px);}; 540);
		max-width:100%;
	}
	.grid {
		background-color:fade(#59A182, 80);
		padding:50px;
		.max({ .padding-sides(25px);}; 540);
		align-items:center;
		justify-items:center;
		position:relative;
		
		@media (max-width:768px) {
			display: flex;
			flex-direction: column;
		}
		
		.copy {
			text-align: center;
			font-size: 20px;
			
			h4 {
				text-align: center;
				font-size: 28px;
			}
		}
		
// 		> * { grid-row:1; }
// 		.copy {
// 			grid-column:1 / span 2;
// 		}
// 		@media (max-width:1080px) {
// 			display:block !important;
// 			@media (min-width:541px) {
// 				.equipment {
// 					float: right;
// 					margin-left: 25px;
// 					max-width: 50%;
// 					margin-bottom: 25px;
// 					shape-outside: url('/wp-content/uploads/2021/04/equipment.png');
// 					shape-margin:25px;
// 					&.alignright {
// 						margin-right:-75px;
// 					}
// 				}
// 			}
// 		}
		.solea {
			position:absolute;
			right:0;
			bottom:0;
			@media (max-width:768px) {
				position:relative;
				display:block;
				margin:25px -50px -50px auto;
			}
			@media (max-width:540px) {
				margin:25px -25px -50px auto;
			}
		}
		h2 {
			color:#172242;
			.font(~"Bebas Neue", 400, 54px);
			.max({font-size:36px;}; 1080);
			.max({font-size:28px});
			letter-spacing:.05em;
			text-transform:uppercase;
			b {
				.inherit(#fff);
				.font(@size:1.1em);
			}
		}
		p {
			color:#fff;
			font-size: 24px;
			.max({font-size:18px; line-height:1.25}; 540);
		}
	}
	a.learn-more {
		display:inline-block;
		background-color:#172242;
		color:#fff;
		padding:.75em 1em;
		.font(~"Open Sans", 600, 24px);
		.max({font-size:18px});
		letter-spacing:.1em;
		text-transform:uppercase;
		border:1px solid #172242;
		&:hover {
			background-color:transparent;
		}
	}
}

#testimonials {
	> div { overflow:visible; }
	h2 {
		color:#17244C;
		.font(~"Bebas Neue", 400, 72px);
		.max({font-size:54px;}; 1080);
		.max({font-size:36px});
		letter-spacing:.1em;
		text-align:center;
		text-transform:uppercase;
		padding-top:.15em;
		margin-bottom:~"calc(.15em - -50px)";
		b {
			background-color:fade(#A66E30, 20);
			display:inline-block;
			.inherit();
			.font();
			margin-left:.25em;
			padding:.25em .4em .15em .5em;
			outline: 1px solid #62AB8C;
			outline-offset: .15em;
		}
	}

	#gary span.su-lightbox {
		background-image: url('/wp-content/uploads/2017/12/gary.png');
	}
	#carolyn span.su-lightbox {
		background-image: url('/wp-content/uploads/2017/12/carolyn.png');
	}

	.testimonial {
		.grid-one();
		span.su-lightbox {
			.vertAlign;
			background-position:center;
			background-size:cover;
			img {
				.clip(@arrow_right);
				cursor:pointer;
			}
		}
	}

}

#highlights {
	.max({.padding-sides(0);});
	.grid {
		background-image:url('/wp-content/uploads/2021/04/highlight.jpg');
		display:grid;
		grid-template-columns:1fr 1fr;
		grid-template-rows:1fr 1fr;

		@media (max-width:1080px) {
			background-attachment:fixed !important;
			background-position:center !important;
			grid-template-columns:1fr;
			grid-template-rows:repeat(4, 1fr);
		}
		grid-gap:3px;
	}
	.highlight {
		min-height:420px;
		outline: 3px solid #fff;
		.vertAlign;
		flex-direction:column;
		padding:25px;
		position:relative;
		&:before {
			content:' ';
			display:block;
			position:absolute;
			height:~"calc(100% - 50px)";
			width:~"calc(100% - 50px)";
			top:25px;
			left:25px;
			border:2px solid #fff;
			pointer-events:none;
		}

		h2 {
			color:#fff;
			.font(~"Bebas Neue", 400, 46px);
			.max({font-size:36px;}; 1080);
			.max({font-size:28px});
			letter-spacing:.1em;
			text-align:center;
			text-transform:uppercase;
			.pseudoBeforeAfter;
			margin:0;
		}
		.copy {
			.max-width(540px);
			.max({ .padding-sides(10px); });
			> div {
				padding-top:25px;
			}
			p {
				color:#fff;
				text-align:justify;
				text-align-last:center;
					.max({font-size:14px; line-height:1.25}; 540);
				a {
					.inherit();
					.font();
					b {
						.inherit();
						.bold();
					}
				}
				.learn-more {
					font-size:22px;
					letter-spacing:.1em;
					text-transform:uppercase;
					&:hover {
						color:#62AB8C;
					}
				}
			}
		}

	}

	.highlight {
		background-color:fade(#17244C, 0);
		.transition(background-color);
		&:before {
			opacity:0;
			.transition(opacity);
		}
		h2 {
			padding:.6em .5em .5em .6em;
			.transition(padding);
			&:before {
				background-color:fade(#17244C, 78);
				.clip("0% 0%, 100% 0%, 100% 100%, 0% 100%");
				.transition(background-color);
				.transition(clip-path);
			}
			&:after {
				background-color:fade(#fff, 15);
				.clip(~"50px 0%, calc(100% - 50px) 0%, 100% 100%, 50% 500%, 0% 100%");
				.transition(background-color);
				.transition(clip-path);
			}
		}
	}
	.highlight.active {
		background-color:fade(#17244C, 75);
		&:before {
			opacity:1;
		}
		h2 {
			padding:.35em .5em .25em .6em;
			&:before {
				background-color:#62AB8C;
				.clip("0% calc(100% - 4px), 100% calc(100% - 4px), 100% 100%, 0% 100%");
			}
			&:after {
				background-color:#62AB8C;
				.clip(~"0% 100%, 100% 100%, 100% 100%, 50% 500%, 0% 100%");
			}
		}
	}
}

#different {
	background-color:rgba(23,34,66,0.8);
	.padding-ends(50px);
	position:relative;
	&:before {
		content:' ';
		display:block;
		position:absolute;
		top:50%;
		left:50%;
		.translate(-50%, -50%);
		border:3px solid #62AB8C;
		z-index:-1;
		height:~"calc(100% - -50px)";
		width:~"calc(100% - 100px)";
	}
	> div {
		font-size:75px;
		.max({font-size:54px;}; 1080);
		.max({font-size:42px});
		.max({font-size:24px}; 540);
	}
	h2 {
		color:#fff;
		.font(~"Bebas Neue", 400, 1em);
		.max({font-size:.75em;});
		letter-spacing:.1em;
		margin:0;
		text-align:center;
		text-transform:uppercase;
	}
	ul {
		display:grid;
		grid-gap:25px;
		grid-template-columns:auto 1fr auto;
		margin:0;
		font-size:1em;
		li {
			color:#fff;
			font-size:16px;
			text-align:center;
			margin-left:0;
			@media (max-width:540px) {
				font-size:14px;
				line-height:1.25;
			}
		}
		.slick-list {
			align-self:center;
			padding:25px 0;
		}
		.slick-arrow {
			border:2px solid #fff;
			cursor:pointer;
			padding:25px;
			.vertAlign;
			font-size:1em;
			.min({ margin-top:-1em; });
			@media (max-width:540px) {
				padding:10px;
				font-size:.5em;
			}
		}
	}
	.next img {
		.rotate(180deg);
		transform-origin:center;
	}
}

#cta {
	.margin-ends(5vw);
	> div { overflow:visible; }
	h2 {
		color:#17244C;
		.font(~"Bebas Neue", 400, 50px);
		.max({font-size:36px;}; 1080);
		.max({font-size:28px});
		letter-spacing:.1em;
		text-align:center;
		text-transform:uppercase;
	}
	p {
		text-align:justify;
		text-align-last:center;
		.max({font-size:14px; line-height:1.25}; 540);
	}
	.cta {
		background-color:#62AB8C;
		color:#fff;
		display:inline-block;
		.font(~"Open Sans", 600, 32px);
		.max({font-size:22px;}; 540);
		letter-spacing:.1em;
		padding:.5em 1em;
		outline: 1px solid #A66E30;
		outline-offset: 10px;
		&:hover {
			background-color:#A66E30;
		}
	}
}