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

@green: #8ec640;
@orange: #f47621;
@brown: #231f20;
@easing: cubic-bezier(0.76, 0, 0.24, 1);

header#masthead {
	@media (min-width:1280px) {
		+ * {
			margin-top:170px;
		}
		.grid {
			align-items:center;
			justify-items:center;
			grid-template-columns:auto 1fr auto auto;
			grid-template-rows:auto auto;
			grid-template-areas:
				"logo . chat phone"
				"logo nav nav nav";
		}
	}
	@media (min-width:769px) and (max-width:1279px) {
		+ * {
			margin-top:220px;
		}
		.grid {
			align-items:center;
			justify-items:center;
			grid-template-columns:auto 1fr auto;
			grid-template-rows:auto auto auto;
			grid-template-areas:
				"logo . chat"
				"logo . phone"
				"nav nav nav";
		}
	}
	@media (min-width:769px) {
		position:fixed;
		width:100%;
		top:0;
		left:0;
		z-index:10000;
		background-color:fade(#fff, 65);
		.blur(20px);
		padding:0 25px;
		.grid {
			.max-width(1700px);
			grid-gap:0 50px;
			#logo { grid-area:logo; }
			#header-ctt { grid-area:chat; }
			#header-phone { grid-area:phone; }
			nav {
				grid-area:nav;
				align-self:end;
				justify-self:end;
			}
			#logo {
				&, img, svg { transition: 0.5s all ease; }
				img, svg { max-height: 120px; } // Please keep this as a pixel value to allow for smooth transition with the .smaller changes
			}
		}
		#responsiveHeader { display:none !important; }
		
		&.smaller {
			#logo {
				padding: 10px 0;
				img,svg { max-height: 80px; }
			}
		}
	}
	@media (max-width:768px) {
		.header-info { display:none !important; }
		#responsiveHeader a { width:115px; }
		#logo {
			padding:20px;
		}
	}

	.header-info {
		a {
			color:#5e5f5f;
			display:grid;
			.font(Poppins, 400, 19px);
			text-align:center;
			text-transform:uppercase;
			align-items:center;
			justify-items:center;
			grid-gap:10px;
			grid-auto-flow:column;
			svg { fill:@green; }
			b {
				display:block;
				.inherit();
				.bold(@size:1.25em);
			}
		}
	}

}

#hero {
	background-image:url('/wp-content/uploads/2020/10/hero.jpg');
	.hero();
	body:not(.home) & {
		max-height:420px;
	}
	.border-sides(25px solid #fff);
	//.max-width(1750px);
}

#online-offer {
	line-height:0;
	text-align:center;
	margin-bottom:-45px;
	position:relative;
	top:-45px;
	z-index:100;
	.npo-content {
		display: flex;
		justify-content: center;
		max-width: 720px;
		margin: 0 auto;
		padding: 20px;
		p {
			line-height: 1em;
			width: 50%;
			
			&:first-of-type {
				font-size: 26px;
			}
			&:last-of-type {
				font-size: 20px;
				padding-right: 25px;
			}
		}
	}
}

.npo {
	background-color: @orange;
	
	h4 {
		padding: 8px !important;
		border: 0;
		color: @brown;
		font-weight: 700;
	}
	.textwidget {
		padding: 10px;
		background-color: @brown !important;
		
		*, a:hover { color: @orange; }
		
		p {
			font-size: 18px;
			&:first-of-type { font-size: 25px; }
		}
		b {
			text-transform: uppercase;
		}
	}
}

#section-welcome {
	.margin-ends(~"calc(5vw - -50px)");
	> div {
		.padding-ends(0);
	}
	h1 {
		color:@green;
		.font(~"Baskerville, Libre Baskerville", 400, 50px);
		@media (max-width:1280px) { font-size:36px; }
		letter-spacing:.1em;
		margin-bottom:25px;
		text-align:center;
		text-transform:lowercase;
		small {
			color:#4a4f59;
			display:block;
			.font(Poppins, 400, .6em);
			letter-spacing:.2em;
			text-align:center;
			text-transform:uppercase;
		}
	}
	p {
		color:#5e5f5f;
		text-align:center;
	}
}

#section-testimonials {
	background-image:url('/wp-content/uploads/2020/10/testimonials.jpg');
	.padding-ends(25px);
	h2 {
		color:#505152;
		.font(Poppins, 400, 70px);
		@media (max-width:1280px) { font-size:54px; }
		@media (max-width:768px) { font-size:36px; }
		letter-spacing:.1em;
		margin-bottom:25px;
		text-align:center;
		text-transform:uppercase;
		b {
			.inherit(@green);
			.bold();
		}
	}
	#testimonial_rotator_wrap_1933 {
		margin:0;
		padding:0 (64px + 25px) 0 (64px + 25px + 35px);
		@media (max-width:768px) { padding:0 ((64px / 2) + 25px) 0 ((64px / 2) + 25px + 35px); }
		.testimonial_rotator_prev, .testimonial_rotator_next {
			width:64px;
			height:71px;
			@media (max-width:768px) {
				width:(64px / 2);
				height:(71px / 2);
			}
			background-color:fade(@green, 15);
			.vertAlign;
			i {
				width:44%;
				height:64%;
				opacity:1;
				background-color:#000;
				&:before { display:none !important; }
			}
		}
		.testimonial_rotator_prev i {
			.clip("100% 0, 100% 100%, 0 50%");
		}
		.testimonial_rotator_next i {
			.clip("0 0, 0% 100%, 100% 50%");
		}
	}
	.testimonial_rotator_description {
		.max-width(720px);
	}
	.testimonial_rotator_quote {
		text-align:left;
		@media (max-width:768px) { font-size:14px; }
		&:before {
			content:'“';
			.font(~"Playfair Display", 400, 10em);
			display:inline-block;
			float: left;
			line-height: .7em;
			margin-top: -.4em;
			margin-left:-35px;
			transform: translateY(.4em);
		}
		&:after {
			content:'”';
			.font(~"Playfair Display", 400, 10em);
			display:inline-block;
			line-height: 0.7em;
			margin-top: -1em;
			.translateY(.6em);
			margin-bottom: .25em;
		}
	}
}

@main-color: @green;
@secondary-color: #fff;

#section-highlights {
	.margin-ends(~"calc(5vw - -50px)");
	background-image:url('/wp-content/uploads/2020/10/highlight.jpg');
	body:not(.safari) & { background-attachment:fixed !important; }
	background-position:center;
	position:relative;
	@media (min-width:769px) {
		display:grid;
		grid-template-columns:2fr 1fr;
		grid-template-rows:1fr repeat(5, 2fr);
		&:before {
			content:' ';
			display:block;
			grid-column:1 / span 2;
		}
	}

	h2 {
		grid-column:2 / span 1;
		position:relative;
		margin:0;
		cursor:pointer;

		&[data-order="1"] { grid-row:2; background-color:fade(@green, 80); }
		&[data-order="2"] { grid-row:3; background-color:fade(#cee076, 80); }
		&[data-order="3"] { grid-row:4; background-color:fade(@green, 80); }
		&[data-order="4"] { grid-row:5; background-color:fade(#cee076, 80); }
		&[data-order="5"] { grid-row:6; background-color:fade(@green, 80); }
		&.active {
			display:none;
			+ .highlight-copy {
				opacity:1;
				pointer-events:auto;
			}
		}
		&, & + .highlight-copy > div > a:first-child {
			.font(Poppins, 500, 34px);
			@media (max-width:1280px) { font-size:24px; }
			min-height:3em;
			letter-spacing:.1em;
			text-align:center;
			text-transform:uppercase;
			.vertAlign;
			flex-direction:column;
			padding:25px;
			* {
				pointer-events: none;
			}
			svg {
				margin-bottom:20px;
			}
		}
		& {
			color:#231f20;
			.fill {
				fill:currentcolor;
			}
			.invert {
				opacity:0;
			}
		}
		& + .highlight-copy > div > a:first-child {
			color:@green;
			padding-bottom:50px;
			.fill {
				fill:@green;
			}
			.invert {
				opacity:1;
			}
			+ * {
				border-top:1px solid #e8e2c5;
				padding-top:50px;
			}
		}
	}
	.highlight-copy {
		background-color:fade(#4a494a, 90); 
		grid-column:1 / span 1;
		grid-row:2 /span 5;
		opacity:0;
		pointer-events:none;
		padding:25px;
		.vertAlign;
		.transition(opacity, .5s, @easing);
		> div {
			.vertAlign;
			flex-direction:column;
			.max-width(720px);
		}
		p {
			color:#fff;
		}
		.learn-more {
			display:block;
			color:#fff;
			width:12em;
			margin:25px auto 0;
			.font(Poppins, 400, 20px);
			text-align:center;
			text-transform:uppercase;
			img {
				display:block;
				margin:0 auto 15px;
			}
		}
	}

	@media (max-width:768px) {
		h2 {
			display: none;
		}
		.highlight-copy {
			opacity: 1;
			border-bottom: 5px solid #fff;
			> div {
				> a:first-child {
					pointer-events: none !important;
					font-size: 32px !important;
				}
			}
		}
	}
}

#section-call-to-action {
	.margin-ends(~"calc(5vw - -50px)");
	> div {
		.padding-ends(0);
	}
	h3 {
		&, a {
			color:#505152;
			.font(Poppins, 400, 70px);
			@media (max-width:1280px) { font-size:54px; }
			@media (max-width:768px) { font-size:36px; }
			letter-spacing:.1em;
			margin-bottom:25px;
			text-align:center;
			text-transform:uppercase;
		}
		b {
			.inherit(@green);
			.bold();
		}
	}
	p {
		text-align:center;
		.max-width(720px);
	}
}

#footer {
	background-image:url('/wp-content/uploads/2020/10/footer.jpg');
	display:grid;
	@media (min-width:769px) {
		grid-template-columns:1fr 9px 1fr 9px 1fr;
		grid-template-areas:
			"info hrOne . hrTwo contact";
		#footer-info { grid-area:info; }
		hr:nth-child(2) { grid-area:hrOne; }
		hr:nth-child(3) { grid-area:hrTwo; }
		#contactus { grid-area:contact; }
		hr {
			width:9px;
			height:100%;
		}
	}
	@media (max-width:768px) {
		hr {
			height:9px;
			width:100%;
		}
	}
	
	> div {
		background-color:fade(#231f20, 80);
		.blur(20px);
		padding:50px 25px;
		.vertAlign;
	}
	
	#footer-info {
		> div {
			display:grid;
			grid-auto-flow:row;
			grid-gap:50px;
			align-items:center;
			justify-items:center;
		}
		.footer-info {
			display:grid;
			grid-auto-flow:row;
			grid-gap:10px;
			align-items:center;
			justify-items:center;
			svg {
				fill:@green;
				display:block;
				height:45px;
				width:auto;
			}
			pre, a {
				color:#fff;
				.font(Roboto, 700, 24px);
				text-align:center;
				text-transform:uppercase;
			}
		}
	}
	
	hr {
		margin:0;
		background-color:#fff;
		border:none;
	}
	#contactus {
		h2 {
			color:#fff;
			.font(Poppins, 400, 45px);
			@media (max-width:1280px) { font-size:36px; }
			@media (max-width:768px) { font-size:24px; }
			letter-spacing:.1em;
			margin-bottom:25px;
			text-align:center;
			text-transform:uppercase;
		}
	}

	/**** Full Background Color ****/
	.wpcf7 .better-input {
		.wpcf7-form-control-wrap {
			position: relative;
			background-color:fade(#fff, 80);
			margin-bottom:10px;
			display:block;
			margin-top: 1.75em;
			color:#414042;
			.font(Montserrat, 400, 16px);
		}
		.betterInput {
			.inherit();
			.font();

			*::placeholder { color: rgba(0,0,0,0); opacity: 0; }
			*:-ms-input-placeholder { color: rgba(0,0,0,0); }
			*::-ms-input-placeholder { color: rgba(0,0,0,0); }
			*:-moz-input-placeholder { color: rgba(0,0,0,0); }
			*::-moz-input-placeholder { color: rgba(0,0,0,0); }

			* {
				color:#fff;
				border:0;
				padding: 1px 2px;
				background: transparent;
				resize:none;
			}
			label {
				.transition(.3s, all, @easing);
			}

			input, select, textarea {
				color:#231f20;
				font-size:inherit;
				font-weight:inherit;
				font-family:inherit;
			}
			textarea {
				height:150px;
			}
			select {
				display:block;
				width:100%;
				margin-bottom:5px;
			}

			label {
				position: absolute;
				width:100%;
				top:0;
				transform: translateY(.4em) translateX(.25em);
				left:0;
				pointer-events: none;
				color:#231f20;
				font-size:inherit;
				font-weight:inherit;
				font-family:inherit;
			}
			.req {
				color:#FF4136;
				.transition(.3s, color, @easing);
			}

			*:focus:not(:placeholder-shown) + label,
			*:focus + label,
			*:focus:not(:placeholder-shown) + label .req,
			*:focus + label .req {
				color:#fff; // Inputting
			}
			*:not(:placeholder-shown) + label,
			*:not(:placeholder-shown) + label .req {
				color:#ddd; // Inputted
			}
			*:focus + label,
			*:not(:placeholder-shown) + label {
				transform: translateY(-1.3em);
				font-size: .8em;
			}
		}
		input[type="submit"] {
			border:none;
			display:block;
			margin:25px 0 25px auto;
			height: 2em;
			width: 10em;
			.font(Roboto, 300, 20px);
			letter-spacing:.1em;
			background-color:fade(#f47621, 80);
			color:#fff;
			&:hover {
				background-color:fade(#f47621, 100);
			}
		}
	}

}

#social-media {
	text-align:center;

	a {
		display:inline-block;
		padding:10px;
		vertical-align:top;
		line-height: 1;
		margin:8px;
	}
	svg {
		height:32px;
		width:auto;
		path {
			fill:@green;
			fill-opacity:.8;
			transition:fill-opacity .3s;
			-webkit-transition:fill-opacity .3s;
		}
	}
	a:hover svg path {
		fill-opacity:1;
	}
}

.socialmedia-buttons {
	text-align: center;
	a {
		margin: 5px;
	}
}

#betterFooter;

#secondary .widget>h4 {
    border-bottom: 1px solid #5e5f5f;
}

/* Jen font color for sidebar form 7/14/22
 * .with_frm_style .frm_top_container .frm_primary_label{
	color:black !important;
}*/