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

@blue: #1B4F72;

.hero {
	.max-width(1750px);
	position:relative;
	&:before {
		content:' ';
		display:block;
		position:absolute;
		width:~"calc(100% - (35px * 2))";
		height:~"calc(100% - (35px * 2))";
		top:0;
		left:0;
		z-index:2;
		opacity:.7;
		border:35px solid #fff;
	}
	img.hero-image {
		z-index:1;
		min-height:325px;
		.min({ height:660px; });
	}
	.hero-overlay {
		z-index:3;
		display:grid;
		.min({ grid-template-columns:1fr 1fr; });
		grid-template-rows:auto auto auto;
		grid-auto-flow:column;
		grid-gap:25px;
		width:100%;
		a {
			.max-width(25em);
			display:block;
			background-color:fade(@blue, 85);
			color:#fff;
			.font(Poppins, 300, 18px);
			.max({font-size:14px; });
			padding:1.25em;
			.max({ padding:.75em; });
			letter-spacing:.075em;
			text-align:center;
			text-transform:uppercase;
			&:hover {
				background-color:fade(#fff, 85);
				color:@blue;
			}
			b {
				.inherit();
				.font(@weight:500);
			}
			-webkit-clip-path: url(#my-clip-path);
			clip-path: url(#my-clip-path);
		}
	}

	h2 {
		color:#fff;
		.font(Poppins, 400, 120px, 0);
		.max({ font-size:64px; });
		text-align:center;
		text-transform:none;
		small {
			color:#fff;
			display:block;
			.font(Poppins, 400, .25em);
			letter-spacing:.1em;
			text-align:center;
			text-transform:uppercase;
		}
		img {
			width:3em;
			height:auto;
		}
	}

}

.entry-content {
	section {
		&, &.dcmo_block {
			.margin-ends(5vw);
		}
	}
}

#welcome {
	background-color:#ECF3F6;
	> div {
		.padding-ends(2vw);
		@media (min-width:960px) {
			display:grid;
			grid-gap:50px;
			grid-template-columns:auto 1fr;
			align-items:center;
		}
	}

	img {
		border-radius:25px;
		align-self:start;
		.min({ max-width:35vw; });
		@media (max-width:959px) and (min-width:769px) {
			float:left;
			margin-right:50px;
			margin-bottom:25px;
		}
	}

	a.meet-my-team {
		max-width:320px;
		display:block;
		background-color:fade(@blue, 85);
		color:#fff;
		.font(Poppins, 300, 18px);
		padding:1em;
		letter-spacing:.075em;
		text-align:center;
		text-transform:uppercase;
		&:hover {
			background-color:fade(#fff, 85);
			color:@blue;
		}
		-webkit-clip-path: url(#my-clip-path);
		clip-path: url(#my-clip-path);
	}

	h2 {
		font-family: Poppins;
		font-size: 44px;
		font-weight: 400;
		text-transform: capitalize;
		color: #1b4f72;
	}
	h3 {
		margin-top:.25em;
	}
}

#testimonials {
	> div { max-width:1080px; }
	h2 {
		color:#505152;
		.font(Poppins, 400, 54px);
		.max({ font-size:36px; }, 1280);
		.max({ font-size:24px; }, 960);
		letter-spacing:.1em;
		margin-bottom:25px;
		text-align:center;
		text-transform:uppercase;
		b {
			.inherit(@blue);
			.font();
		}
	}
	 .grid {
		.max({ grid-template-columns:1fr 1fr; }, 1280);
	} 
	
	
	
	
	#jodi .su-lightbox { background-image:url('/wp-content/uploads/2021/05/jodi.jpg'); }
	#lisa .su-lightbox { background-image:url('/wp-content/uploads/2021/05/lisa.jpg'); }
	#dale .su-lightbox { background-image:url('/wp-content/uploads/2021/05/dale.png'); }

	.testimonial {
		.su-lightbox {
			background-position:center;
			background-size:cover;
			.vertAlign(flex-end);
			margin-bottom:20px;
			padding:10px;
			width:100%;
			aspect-ratio:570/340;
			-webkit-clip-path: url(#my-clip-path-video);
			clip-path: url(#my-clip-path-video);
			
			body.safari & {
				min-height:10vw;
				@media (max-width:1280px) { min-height:20vw; }
				@media (max-width:540px) { min-height:30vw; }
			}
			
			img {
				cursor:pointer;
			}
		}
		blockquote {
			color:#505152;
			.font(Poppins, 400, 18px, 1.5, italic);
			margin-bottom:.75em;
			text-align:center;
		}
		cite {
			color:@blue;
			display:block;
			.font(Poppins, 500, 24px);
			text-align:center;
			text-transform:uppercase;
		}
	}
}





#services {
	
	@media (max-width:960px) and (min-width:769px) {
		grid-template-columns:1fr 1fr;
		.service:last-child {
			grid-column: 1 / -1;
		}
	}
	.max({ grid-template-columns:1fr; });
	
	#cosmetic { background-image:url('/wp-content/uploads/2021/05/cosmetic.jpg'); }
	#sedation { background-image:url('/wp-content/uploads/2021/05/sedation.jpg'); }
	#gum-disease { background-image:url('/wp-content/uploads/2021/05/gum-disease.jpg'); }
	
	.service {
		background-image:url('https://mann.dentalcmo.com/wp-content/uploads/2021/04/photo-coming-soon.svg');
		background-position:center;
		background-size:cover;
		min-height:540px;
		.max({ min-height:420px; });
		.vertAlign;
		flex-direction:column;
		.pseudoBefore;
		padding:25px;
		h2 {
			.font(Poppins, 400, 54px);
			.max({ font-size:36px; }, 1280);
			.max({ font-size:28px; }, 960);
			letter-spacing:.1em;
			margin:0;
			text-align:center;
			text-transform:uppercase;
			b {
				.inherit();
				.bold();
				display:block;
			}
		}
		.copy {
			.max-width(420px);
			> div {
				padding-top:25px;
				p {
					color:#fff;
					.font(Poppins, 300, 16px, 1.5);
					.max({ font-size:14px; }, 1280);
					text-align:center;
				}
				a.learn-more {
					.max-width(320px);
					display:block;
					background-color:#fff;
					body.safari & { background:transparent; }
					color:#fff;
					.font(Poppins, 300, 18px);
					padding:3px;
					letter-spacing:.075em;
					text-align:center;
					text-transform:uppercase;
					-webkit-clip-path: url(#my-clip-path);
					clip-path: url(#my-clip-path);
					span {
						display:block;
						background-color:#826040;
						color:#fff;
						.font(Poppins, 300, 18px);
						padding:1em;
						letter-spacing:.075em;
						text-align:center;
						text-transform:uppercase;
						-webkit-clip-path: url(#my-clip-path);
						clip-path: url(#my-clip-path);
						.transition(background-color, .3s, linear);
					}
					&:hover {
						span {
							background-color:@blue;	
						}
					}
				}
			}
		}
	}
	.service {
		&:before {
			opacity:.8;
			background-color:#fff;
			.transition();
		}
		h2 {
			color:@blue;
			.transition();
		}
	}
	.service.active {
		&:before {
			opacity:.85;
			background-color:@blue;
		}
		h2 {
			color:#fff;
		}
	}
	@media (max-width:768px) {
		.service.waypointEffect {
			&:before {
				opacity:.85;
				background-color:@blue;
			}
			h2 {
				color:#fff;
			}
			.copy {
				max-height:var(--max-height) !important;
			}
		}
	}
}

#best {
	> div {
		max-width:1220px;
	}
	h2 {
		color:#505152;
		.font(Poppins, 400, 42px, 1.5);
		.max({ font-size:36px; }, 1280);
		.max({ font-size:28px; }, 960);
		letter-spacing:.1em;
		margin-bottom:25px;
		text-align:center;
		text-transform:none;
		b {
			.inherit(@blue);
			.font();
			display:block;
		}
	}
	img {
		max-width:340px;
	}
	p {
		.font(Poppins, 300, 18px, 1.75);
		.max({ font-size:16px; }, 960);
		text-align:justify;
		text-align-last:center;
	}
}

#difference {
	background-image:url('/wp-content/uploads/2021/04/difference.jpg');
	background-size:cover;
	background-position:center;
	position:relative;
	img.parallax {
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		pointer-events:none;
	}
	h2 {
		color:@blue;
		.font(Poppins, 400, 64px);
		.max({ font-size:54px; }, 1280);
		.max({ font-size:36px; }, 960);
		letter-spacing:.1em;
		margin:0;
		padding:.8em .75em .75em;
		text-align:center;
		text-transform:uppercase;
	}
	#differences {
		background-color:fade(@blue, 70);
		padding:75px 25px;
		> div {
			display:grid;
			grid-gap:25px;
			grid-template-columns:repeat(6, 1fr);
			.max({ grid-template-columns:repeat(3, 1fr); }, 1280);
			.max({ grid-template-columns:repeat(2, 1fr); });
// 			.max({ grid-template-columns:repeat(1, 1fr); }, 540); Jarrod asked for it to remain 2 columns
			.max-width(1800px);
			//margin-bottom:50px;
		}
		.difference {
			color:#fff;
			.font(Poppins, 300, 18px);
			text-transform:uppercase;
			svg {
				fill:currentcolor;
				display:block;
				margin:0 auto 10px;
				max-width: 80px;
			}
			&:nth-of-type(1) {
				svg { transform: translatex(7%); }
			}
			&:nth-of-type(5) {
				svg { transform: translatex(-8%); }
			}
			&:nth-of-type(6) {
				svg { transform: translatex(-6%); }
			}
			p {
				.inherit();
				.font();
				text-align:center;
			}
		}
		a.learn-more {
			.max-width(320px);
			display:block;
			background-color:#fff;
			color:#fff;
			.font(Poppins, 300, 18px);
			padding:3px;
			letter-spacing:.075em;
			text-align:center;
			text-transform:uppercase;
			-webkit-clip-path: url(#my-clip-path);
			clip-path: url(#my-clip-path);
			span {
				display:block;
				background-color:#826040;
				color:#fff;
				.font(Poppins, 300, 18px);
				padding:1em;
				letter-spacing:.075em;
				text-align:center;
				text-transform:uppercase;
				-webkit-clip-path: url(#my-clip-path);
				clip-path: url(#my-clip-path);
				.transition(background-color, .3s, linear);
			}
			&:hover {
				span {
					background-color:@blue;	
				}
			}
		}
	}
}
#logos {
	padding:25px;
	align-items:center;
	justify-items:center;
	.max-width(1080px);
	.max({ grid-template-columns:1fr; });
}