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

@blue: #2EB1AE;
@gray: #BBBDBF;

.hero {
	.hero-overlay {
		align-self:start;
		.max-width(1650px);
		margin-top:5vw;
		padding:25px;
	}
}

h1 {
	color:#737373;
	.font(Montserrat, 400, 64px);
	font-size:~"min(64px, 5vw)";
	text-transform:none;
	width:4em;
	b {
		color:@blue;
		text-transform:uppercase;
		.font(inherit, 600, 1.35em);
	}
}

#homePageH1 {
	color:#2eb1ae;
	.font(Montserrat, 600, 20px);
	font-size:~"min(20px, 3vw)";
	text-decoration: underline;
	text-transform:none;
	width:14em;
}

#homePageHero {
	color:#737373;
	.font(Montserrat, 400, 64px);
	font-size:~"min(64px, 5vw)";
	text-transform:none;
	width:4em;
	b {
		color:@blue;
		text-transform:uppercase;
		.font(inherit, 600, 1.35em);
	}
}
.entry-content {
	.dcmo_block,
	section {
		margin:0;
	}
	> section,
	> section.dcmo_block {
		.margin-ends(7vw);
	}
}

.fonts(@size: 54px, @min:0px) {
	.max({ font-size:~"max(calc(@{size} * .8), @{min})"; }, 1280);
	.max({ font-size:~"max(calc(@{size} * .6), @{min})"; });
	.max({ font-size:~"max(calc(@{size} * .4), @{min})"; }, 540);
}

#welcome {
	overflow:hidden;
	.dcmo_block {
		background-image:url('/wp-content/uploads/2021/08/welcome.svg');
		background-position:center;
		background-size:contain;
		background-repeat:no-repeat;
		.padding-ends(5vw);
		> div {
			display:grid;
			justify-items:center;
			overflow:visible;
		}	
	}
	h2 {
		color:#231F20;
		font-size:54px;
		.fonts(54px);
		margin-bottom:.5em;
		text-align:center;
		.padding-sides(25px);
		img {
			display:block;
			margin:.2em auto 0;
			height:1.75em;
		}
	}
	h3 {
		display:grid;
		.font(Montserrat, 400, 42px);
		.fonts(42px);
		margin-bottom:25px;
		text-align:center;
		text-transform: none;
		padding:0 25px;
		position:relative;
		color: #737373;
		&:before, &:after {
			content:' ';
			display:block;
			position:absolute;
			margin:auto;
			top:0;
			bottom:0;
			width:100vw;
			height:1px;
			background-color:@blue;
		}
		&:before {
			right:100%;
		} &:after {
			left:100%;
		}
	}
	p {
		text-align:center;
	}
	
}

#services {
	display:grid;
	grid-gap:50px;
	.min({grid-template-columns:1fr 1fr;});
	.min({padding:0 50px;});

	#invisalign { background-image:url('/wp-content/uploads/2020/08/blonde-woman-smiling_751122502.jpg'); }
	#cosmetic { background-image:url('/wp-content/uploads/2020/08/happy-couple-in-afternoon_1720359037.jpg'); }
	#cerec { background-image:url('/wp-content/uploads/2020/08/man-in-fedora_231812140.jpg'); }
	#general { background-image:url('/wp-content/uploads/2020/08/woman-in-park-smiling_163195115.jpg'); }

	.service {
		background-size:cover;
		background-position:center;
		position:relative;
		font-size:42px;
		.fonts(42px, 24px);
		&:before, &:after {
			content:' ';
			display:block;
			position:absolute;
			width:1.25em;
			height:1.25em;
			color:@blue;
		}
		&:before {
			border-top:3px solid;
			border-left:3px solid;
		}
		&:after {
			border-bottom:3px solid;
			border-right:3px solid;
		}
		> div {
			font-size:1em;
			overflow:hidden;
			min-height:10em;
			height:100%;
			> div {
				background-color:fade(@blue, 90);
				font-size:1em;
				height:100%;
				padding:0 25px 50px;
				.blur(5px);
				display:grid;
				grid-template-rows:auto 1fr auto;
			}
		}
		h2 {
			color:#fff;
			font-size:1em;
			height:2.5em;
			text-align:center;
			.vertAlign;
		}
		p {
			.max-width(640px);
			color:#fff;
		}
		.learn-more {
			.font(Montserrat, 600, 32px);
			.fonts(32px);
			color:#fff;
			display:block;
			margin:auto;
			padding: 0.5em;
			max-width: 9em;
			position:relative;
			text-align:center;
			text-transform:uppercase;
			&:before, &:after {
				content:' ';
				display:block;
				position:absolute;
				width:.75em;
				height:.75em;
			}
			&:before {
				top:0;
				left:0;
				.transition(top);
				.transition(left);
				border-top:2px solid;
				border-left:2px solid;
			}
			&:after {
				right:0;
				bottom:0;
				.transition(right);
				.transition(bottom);
				border-bottom:2px solid;
				border-right:2px solid;
			}
			&:hover {
				&:before {
					top:.2em;
					left:.2em;
				}
				&:after {
					right:.2em;
					bottom:.2em;
				}
			}
		}
	}
	.service {
		&:before {
			top:-.375em;
			left:-.375em;
			.transition(top);
			.transition(left);
		}
		&:after {
			right:-.375em;
			bottom:-.375em;
			.transition(right);
			.transition(bottom);
		}
		> div > div {
			.translateY(~"calc(100% - 2.5em)");
			.transition();
		}
	}
	.service:hover {
		&:before {
			top:0;
			left:0;
		}
		&:after {
			right:0;
			bottom:0;
		}
		> div > div {
			.translateY(0);
		}
	}
}

#testimonials {
	background-color:#F2F2F2;
	h2 {
		background-color:#BBBDBF;
		color:#fff;
		display:grid;
		height:2.5em;
		align-items:center;
		grid-template-columns:1fr auto 1fr;
		text-align:center;
		text-transform:uppercase;
		.fonts(42px);
		margin:0;
		&:before, &:after {
			content:' ';
			display:block;
			height:100%;
			background-image:url('/wp-content/uploads/2021/08/icons.svg');
			background-size:cover;
		}
		&:before {
			background-position:right center;
		}
		&:after {
			background-position:left center;
		}
	}
	#wprev-slider-4 {
		.max-width(1650px);
		font-size:25px;
		.fonts(25px);
		padding:2em 1em 1em;
		ul.slick-slider {
			margin:0;
			display:grid;
			grid-gap:1em;
			font-size:1em;
			grid-template-columns:auto 1fr auto;
			.slick-arrow {
				cursor:pointer;
				align-self:center;
				&.next { .rotate(180deg); }
				.max({ width:25px; });
			}
			.slick-dots {
				margin:0;
				justify-self:center;
				grid-column: 1 / -1;
				display:inline-grid;
				grid-auto-flow:column;
				grid-gap:.4em;
				list-style-type:none;
				font-size:1em;
				li {
					font-size:0;
					display:block;
					cursor:pointer;
					color:fade(#fff, 0);
					width:15px;
					height:15px;
					border-radius:50%;
					border:2px solid @blue;
					overflow:hidden;
					margin-left:0;
					.hover();
					button { display:none !important; }
					&:hover {
						background-color:fade(@blue, 50);
					}
					&.slick-active {
						background-color:@blue;
					}
				}
			}
			.slick-slide {
				padding:0;
				margin:0 1em;
				> div {
					padding:0;
					margin:0;
					a {
						opacity:.25;
						cursor:auto;
					}
				}
			}
		}
	}
}

#cta {
	overflow:hidden;
	> div {
		display:grid;
		justify-items:center;
		overflow:visible;
	}	
	h3 {
		display:grid;
		.font(Montserrat, 400, 42px);
		.fonts(42px);
		margin-bottom:25px;
		text-align:center;
		text-transform: none;
		padding:0 25px;
		position:relative;
		color: #737373;
		&:before, &:after {
			content:' ';
			display:block;
			position:absolute;
			margin:auto;
			top:0;
			bottom:0;
			width:100vw;
			height:1px;
			background-color:@blue;
		}
		&:before {
			right:100%;
		} &:after {
			left:100%;
		}
	}
	p {
		text-align:center;
	}
	.raa {
		background-color:@blue;
		border:1px solid @blue;
		color:#fff;
		display:inline-block;
		.font(Montserrat, 500, 1.25em);
		margin-top:.8em;
		text-transform:uppercase;
		padding:.75em 1.5em;
		&:hover {
			background-color:#fff;
			color:@blue;
		}
	}
}