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

@gold: #D19F5D;
@navy: #134C56;
@teal: #AFDFE4;

body, .hero, #hero-text > div, #hero-text > div > div, .video-controls, #content {
	&:not(.ready) {visibility: hidden;}
}

.hero {
	.grid-one();
	
	video {
		max-height: 860px;
	}
	#hero-text {
		position:relative;
		z-index:10;
		height:100%;
		width:100%;
		background-color:fade(#C18951, 40);
		.transition();
		> div {
			.max-width(1280px);
			display:grid;
			justify-items:start;
			> div {
				text-align:center;
			}
		}
		svg {
			fill:#fff;
			margin-bottom:25px;
			> *:last-child {
				stroke:#fff;
				.keyframes(animateLine; {
					100%{ stroke-dashoffset:0; }
				});
				.animation(animateLine 2s @easing 3.5s forwards);
			}
		}
		.consult {
			background-color:@teal;
			color:#fff;
			display:block;
			padding:1em 1.5em;
			.font(Montserrat, 400, 22px);
			margin-bottom:50px;
			text-align:center;
			text-transform:uppercase;
			.clip(~"0 0, 100% 0, calc(100% - 1em) 50%, 100% 100%, 0 100%, 1em 50%");
			b {
				.inherit();
				.bold();
			}
			&:hover {
				background-color:@navy;
			}
		}
	}
	&.played {
		#hero-text {
			opacity: 0;
			pointer-events: none;
		}
	}
	
	@media (min-width:769px) {
		border-left:25px solid #fff;
		border-right:25px solid #fff;
		border-bottom:25px solid #fff;
		
		#hero-text {
			padding:50px 200px 50px 25px;
		}
	}
	
	@media (max-width:768px) {
		#hero-text {
			padding: 20px;
			
			svg {
				max-height: 25vw;
				margin-bottom: 10px;
			}
			.consult {
				margin-bottom: 10px;
				padding: 10px;
				font-size: 16px;
			}
		}
		
		.play {
			max-height: 50px;
		}
	}
}

main#content {
	position: relative;
	z-index: 999;
	grid-template-columns: 100%;
}

#welcome {
	width: 100%;
	padding: calc(2vw - -25px) 25px;
	background-image:url('/wp-content/uploads/2021/02/welcome.svg');
	background-position: center 60%;
	background-size: cover;
	
	@media (min-width:769px) {
		.img {
			order: 0;
			display: flex;
			align-items: center;
			padding-top: 200px;
		}
		.content { order: 1; }
	}
	
	> div {
		width: 100%;
		max-width:1600px;
		margin-right: 0;
		margin-left: auto;
		
		> .grid {
			grid-template-columns: 1fr 300px;
			align-items: center;
			@media (max-width:1100px) {
				grid-template-columns: 1fr;
			}
			
			.grid {
				grid-template-columns: 300px 1fr;
				
				@media (max-width:768px) {
					grid-template-columns: 1fr;
				}
			}
		}
	}
	
	@media (max-width:768px) {
		h1 { font-size: 25px; }
	}
}

#npoo {
	align-self: start;
	max-width: 300px;
	justify-self: center;
	background-color: #fff;
	h4 {
		display: grid;
		grid-template-columns: 80px 1fr;
		align-items: center;
		grid-gap: 10px;
		margin: 0;
		padding: 15px;
		background-color: @teal;
		color: @navy;
		font-weight: 100;
		font-size: 21px;
		text-align: justify;
		text-align-last: justify;
		letter-spacing: 0.05em;
		
		.line1 {
			letter-spacing: 0.12em;
		}
	}
	.offer-details {
		padding: 15px;
		background-color: fade(@teal,80);
		white-space: pre-wrap;
		text-align: center;
		line-height: 1.4em;
	}
	form {
		position: relative;
		padding: 1px 15px 0;
		background-color: fade(@teal,50);
	}
	
	.wpcf7 .better-input {
		overflow:hidden;
		padding-bottom:20px;
		.wpcf7-form-control-wrap {
			margin-top: 1.5em;

			.betterInput {
				input, textarea, select {
					background-color: #fff;
				}
			}

			textarea {
				height: 80px;
			}
		}
		
		input[type="submit"] {
			position: absolute;
			margin: 0;
			bottom: -1em;
			right: 15px;
		}
	}
}

.entry-content section.dcmo_block {
	.padding-ends(50px);
	margin-bottom:0;
}

h1 {
	letter-spacing:.38em;
	margin-bottom:50px;
	text-align:center;
	span {
		display:inline-block;
		.translateX(.2em);
	}
	svg {
		display:block;
		fill:#666666;
		margin:.25em auto 0;
	}
}

#lee {
	background-color:fade(#fff, 50);
	padding:10px;
	margin-top:-10px;
	.blur(5px);
	object-fit: cover;
	object-position: center top;
	aspect-ratio: 6/8;
}

.covid-button {
	display: block;
	margin: 25px auto;
	width: fit-content;
	padding: 10px;
	text-align: center;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	font-style: normal;
	font-variant: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background-color: #134C56;
	color: #fff;

}