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

.hero {
	&.video {
		max-height: 720px;
		video { height:100%; max-height: 720px; height:56.25vw; }
	}
	&.has-play.played {
		.hero-overlay {
			pointer-events: none;
			background-image: linear-gradient(transparent, transparent);
			#overlay-text {
				margin-right: -2000px;
				opacity: 0;
			}
			#npoo {
				margin-top: -1000px;
				opacity: 0;
			}
			.npoo-contact {
				margin-bottom: -10000px;
				opacity: 0;
			}
		}
	}
	.hero-overlay {
		* {transition: all ease-in-out 0.4s}
		width:100%;
		height:100%;
		max-height: 720px;
		position: absolute;
		top: 0;
		background-color: fade(#393939, 25);
		display:grid;
		grid-gap:25px 50px;
		grid-template-columns: auto 1fr auto;
		grid-template-rows:auto auto;
		grid-template-areas:
			". text npoo"
			". text contact";
		.hero-image { min-height:100%; }
		#overlay-text { grid-area:text; }
		#npoo { grid-area:npoo; }
		.npoo-contact { grid-area:contact; }
		#npoo, .npoo-contact {
			.vertAlign;
			flex-direction:column;
			> div, > p {
				width:100%;
			}
		}
		#overlay-text {
			text-align:right;
			align-self:center;
			justify-self:center;
			padding-bottom:150px;
			padding-right: 20px;
			h1 {
				color:#fff;
				.font(Montserrat, 400, 100px);
				.max({ font-size:75px; }, 1080);
				text-align:right;
				text-shadow:5px 5px 10px fade(#393939, 75);
				text-transform:none;
				width:fit-content;
				margin:0 0 .35em auto;
				* {
					display:block;
				}
				b {
					color:inherit;
					font-size:.8em;
					text-transform:uppercase;
				}
				small {
					font-size:.75em;
					text-align:left;
				}
				span {
					font-family: MrDafoe;
				}
			}
			.play.with-sound {
				position: relative;
				display: block;
				margin: auto;
				top: 0;
				left: 0;
				margin-top: 30px;
				-webkit-transform: unset;
				transform: unset;
				path {
					fill:#fff;
				}
			}
			.hero-play {
				position: relative;
				display: block;
				margin: auto;
				top: 0;
				left: 0;
				margin-top: 30px;
				-webkit-transform: unset;
				transform: unset;
				z-index: 5;
			    height: auto;
			    width: 18%;
				@media (max-width:768px) {
					margin-top: 0;
				}
				path {
					fill: #fff;
				}
			}
		}
		.green-button {
			line-height: 24px;
			.max({ display:none !important; });
		}
	}
	@media (min-width:769px) {
		@media (max-width:1200px) {
			align-items: start;
			
			.hero-overlay {
				grid-template-areas:
					"text text"
					"npoo contact";
				grid-template-columns: auto auto;
				grid-gap: 25px 0;
				justify-items: center;
				
				#npoo { background-color: #E8EFE9; }
				.npoo {
					margin: 0 auto;
				}
			}
		}
	}
	@media (max-width:768px) {
		align-items: start;
		&.video {
			//min-height: 300px;
			//max-height: 350px;
			> video {
				//height: 100%;
			}
		}
		.hero-overlay {
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 100%;
			
			#overlay-text {
				padding-bottom: 0;
				margin-left: auto;
				width:~"max(50vw, 280px)";
				h1 {
					font-size: 48px;
					.max({ font-size:36px; }, 540);
					margin-bottom:0;
				}
				.play.with-sound {
					margin-top:0;
				}
			}
			#npoo, .npoo-contact {
				display: none;
			}
		}
	}
}

.npoo {
	display: none !important;
}

section {
	.margin-ends(5vw);
	.entry-content &.dcmo_block:last-child { margin-bottom:5vw; }
}

#welcome {
	> div {
		max-width:1280px;
	}
	h2 {
		color:#6D6E71;
		.font(Montserrat, 500, 40px);
		.max({ font-size:(40px * .75); });
		letter-spacing:.05em;
		margin-bottom:25px;
		text-align:center;
		text-transform:none;
		b {
			.inherit(@green);
			.font();
			display:block;
			padding-top:.15em;
		}
	}
	p {
		text-align-last:center;
	}
}

#services {
	display:flex;
	gap:3px;
	.service {
		&:nth-of-type(1) { background-image: url('/wp-content/uploads/2021/05/highlight-1.jpg'); }
		&:nth-of-type(2) { background-image: url('/wp-content/uploads/2021/05/highlight-2.jpg'); }
		&:nth-of-type(3) { background-image: url('/wp-content/uploads/2021/05/highlight-3.jpg'); }
		&:nth-of-type(4) { background-image: url('/wp-content/uploads/2021/05/highlight-4.jpg'); }
		background-size:cover;
		background-position:center;
		padding:25px;
		.vertAlign;
		flex-direction:column;
		min-height:520px;
		.pseudoBefore();
		h2 {
			color:#fff;
			.font(Montserrat, 300, 32px);
			.max({ font-size:(32px * .75); });
			letter-spacing:.05em;
			margin:0;
			text-align:center;
			text-transform:uppercase;
		}
		.copy {
			max-width:720px;
				text-align-last: center;
			> *:first-child {
				padding-top:15px;
			}
			p {
				color:#fff;
				a {
					color: inherit;
					text-decoration: underline;
				}
			}
			.learn-more {
				color:#fff;
				text-transform:uppercase;
				&:after { content:' >>'; }
			}
		}
		&:nth-child(odd):before {
			background-color:fade(@dark-green, 80);
		}
		&:nth-child(even):before {
			background-color:fade(@dark-green, 80);
		}
	}
	.service {
		flex:1;
		.transition(flex, .5s);
		.copy {
			opacity:0;
			.clip(@square_up);
			max-height:0;
			.transition(@duration: .5s);
		}
	}
	&:not(:hover) .service.active,
	.service:hover {
		flex:3;
		.copy {
			opacity:1;
			.clip(@square);
			max-height:1000px;
		}
	}
	@media (min-width:769px) {
		@media (max-width:1200px) {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
	}
	@media (max-width:768px) {
		flex-direction: column;
		
		.service {
			.copy {
				opacity: 1;
				max-height: 100%;
				clip-path: none;
			}
		}
	}
}

#testimonials {
	h2 {
		color:@green;
		.font(Montserrat, 300, 40px);
		.max({ font-size:(40px * .75); });
		letter-spacing:.05em;
		margin:0 0 25px;
		text-align:center;
		text-transform:uppercase;
	}
	#testimonial {
		display:grid;
		grid-template-columns:auto 1fr auto;
		grid-gap:25px;
		.slick-track {
			//display:grid;
			//grid-gap:25px;
			//grid-auto-flow:column;
		}
		.slick-arrow {
			align-self:center;
			justify-self:center;
			font-size:0;
			width:29px;
			height:92px;
			background:transparent;
			background-image:url('/wp-content/uploads/2021/05/arrow.svg');
			background-size:contain;
			background-repeat:no-repeat;
			background-position:center;
			&.slick-next { .rotate(180deg); }
		}
		.slick-slide {
			&.brenda { background-image: url('/wp-content/uploads/2021/09/brenda.jpg'); }
			&.lana { background-image: url('/wp-content/uploads/2021/09/lana.jpg'); }
			&.patti { background-image: url('/wp-content/uploads/2021/09/patti.jpg'); }
			&.susan { background-image: url('/wp-content/uploads/2021/05/susan.jpg'); }
			&.donna { background-image: url('/wp-content/uploads/2021/05/donna.jpg'); }
			&.wayne { background-image: url('/wp-content/uploads/2021/05/wayne.jpg'); }
			background-size:cover;
			background-position:center;
			margin:0 25px;
			position:relative;
			cursor:pointer;
			.su-lightbox:after {
				content:' ';
				display:block;
				position:absolute;
				width:83px;
				height:58px;
				max-width: 25%;
				background-image:url('/wp-content/uploads/2021/05/play.svg');
				background-position:center;
				background-size:contain;
				background-repeat:no-repeat;
				right:40px;
				top:6vw;
			}
		}
		.slick-dots {
			align-self:center;
			justify-self:center;
			grid-column:1 / -1;
			display:grid;
			grid-auto-flow:column;
			grid-gap:10px;
			margin:0;
			padding:0;
			list-style-type:none;
			li {
				font-size:0;
				height:14px;
				width:14px;
				background-color:#fff;
				border:2px solid #7E8080;
				border-radius:50%;
				cursor:pointer;
				.transition(background-color, .3s, linear);
			}
			li:hover { background-color:fade(#7E8080, 50); }
			li.slick-active { background-color: #7E8080; }
		}
	}
}

#rice {
	background-color:#F8EFEC;
	.green-button {
		float:right;
	}
	> div {
		max-width:1000px;
		.padding-ends(2.5vw);
	}
	img {
		border-radius:25px;
		overflow:hidden;
		width:300px;
		margin-bottom:0;
	}
	h2 {
		color:@green;
		display:inline-block;
		.font(Montserrat, 300, 40px);
		.max({ font-size:(40px * .75); });
		letter-spacing:.05em;
		margin:0;
		padding: 0.5em 0.2em 0 0.1em;
		position:relative;
		text-align:center;
		text-transform:none;
		&:after {
			content:' ';
			display:block;
			position:absolute;
			width:100%;
			height:2px;
			background-color:@green;
			left:0;
			bottom:-3px;
		}
	}
	h3 {
		color:#49494A;
		.font(Montserrat, 400, 14px);
		letter-spacing:.05em;
		margin-bottom:25px;
		text-transform:none;
		b {
			.inherit(@transform:uppercase);
			.font();
		}
	}
	.max({
		img {
			float: none;
			display: block;
			margin: 0 auto 20px;
			max-width: 100%;
		}
	});
}

#membership {
	h2 {
		color:@green;
		.font(Montserrat, 300, 40px);
		.max({ font-size:(40px * .75); });
		letter-spacing:.05em;
		margin:0 0 50px;
		text-align:center;
		text-transform:uppercase;
		.max({font-size:30px;});
		b {
			.inherit(#6D6E71);
			.font();
		}
	}
}