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

@black: #231F20;
@blue: #113B59;
@gold: #AE841F;

.hero {
	position:relative;
	.hero-image {
		max-height:800px;
		position:relative;
		z-index:1;
	}
	&:before {
		content:' ';
		display:block;
		position:absolute;
		z-index:2;
		width:100%;
		height:65%;
		left:0;
		top:0;
		.gradient(#393939, fade(#393939, 0), #393939);
	}
	h1 {
		position:relative;
		z-index:3;
	}
}

.entry-content p {
	text-align-last:center;
}

h1 {
	color:#fff;
	font-size:75px;
	font-size:~"min(75px, 5vw)";
	margin-bottom:4em;
	b {
		.inherit();
		.font(@size:1.33em);
	}
	span {
		display:block;
		&:nth-child(1) { padding-right:5em; }
		&:nth-child(2) { padding-left:5em; }
	}
}

#welcome {
	.margin-ends(5vw);
	h2 {
		color:@black;
		.font(Montserrat, 500, 64px);
		.max({ font-size:42px; });
		.max({ font-size:36px; }, 540);
		.max({ font-size:28px; }, 360);
		margin-bottom:25px;
		text-align:center;
		text-transform:uppercase;
		small {
			.inherit(@transform:none);
			.font(@size:.78em);
			display:block;
		}
		b {
			border-bottom:1px solid @blue;
			display:inline-block;
			padding:.5em;
			font-size:1em;
			word-spacing:.75em;
			img, svg {
				height:1em;
				width:auto;
			}
		}
	}
	h3 {
		color:@blue;
		.font(Roboto, 300, 32px);
		margin:25px auto;
		text-align:center;
		text-transform:none;
	}
}

#testimonials {
	background-color:#113B59;
	.margin-ends(5vw);
	> div {
		border:1px solid #fff;
		padding:25px 25px 50px;
		max-width:100%;
	}
	h2 {
		color:#fff;
		.font(Montserrat, 500, 50px);
		.max({ font-size:42px; });
		.max({ font-size:36px; }, 540);
		.max({ font-size:28px; }, 360);
		margin-bottom:25px;
		letter-spacing:.1em;
		text-align:center;
	}
	#testimonial_rotator_wrap_2439 {
		margin:0;
		.max-width(1080px);
		padding:0 ~"calc(25px - -1em)";
		font-size:32px;
		.max({ font-size:28px; });
		.max({ font-size:24px; }, 540);
		.max({ font-size:20px; }, 360);
		
	}
	#testimonial_rotator_2439 { font-size:16px; }
	.testimonial_rotator_stars {
		color:@gold;
		padding:0;
	}
	.testimonial_rotator_quote { color:#fff; }
	.longform_hr { display:none; }
	.testimonial_rotator_author_info {
		margin:0;
		padding:10px 0 0;
		p {
			color:#fff;
			.font(Roboto, 400, 1.5em);
			&:before { content:'-'; }
		}
	}
	.testimonial_rotator_prev, .testimonial_rotator_next {
		width:32px;
		height:2em;
		background-image:url('/wp-content/uploads/2021/06/arrow.svg');
		background-position:center;
		background-size:contain;
		background-repeat:no-repeat;
	}
	.testimonial_rotator_next { .rotate(180deg); }
}

#why {
	overflow:hidden;
	.margin-ends(5vw);
	background-image:url('/wp-content/uploads/2021/06/why.svg');
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	> div {
		text-align:center;
		overflow:visible;
	}
	h2 {
		border-bottom:1px solid @blue;
		color:@gold;
		display:inline-block;
		.font(Montserrat, 500, 64px);
		.max({ font-size:42px; });
		.max({ font-size:36px; }, 540);
		.max({ font-size:28px; }, 360);
		margin-bottom:25px;
		padding:.5em 1em;
		text-align:center;
		text-transform:uppercase;
	}
	.dcmo_full_block {
		background-color:fade(@gold, 12);
		ul {
			padding:25px;
			columns: 2 320px;
			display: block;
			margin:0;
			.max-width(1440px);
			li {
				font-size:20px;
				&:not(:last-child) { margin-bottom:.5em; }
			}
		}
	}
	.request {
		display:inline-block;
		background-color:@gold;
		border:2px solid @gold;
		color:#fff;
		.font(Montserrat, 500, 24px);
		padding:.5em 1.5em;
		text-transform:uppercase;
		&:hover {
			background-color:fade(@gold, 0);
			color:@gold;
		}
	}
}

#services {
	display:grid;
	.min({ grid-template-columns:1fr 1fr; });
	grid-gap:25px;
	padding:0 25px;
	.margin-ends(5vw);
	
	#gen { background-image:url('/wp-content/uploads/2026/01/20.jpeg'); }
	#cos { background-image:url('/wp-content/uploads/2021/06/cosmetic.jpg'); }
	#sed { background-image:url('/wp-content/uploads/2021/06/sedation.jpg'); }
	#imp { background-image:url('/wp-content/uploads/2021/06/implants.jpg'); }
	
	.service {
		background-size:cover;
		background-position:center;
		overflow:hidden;
		position:relative;
		font-size:36px;
		.max({ font-size:28px; });
		.pseudoBeforeAfter;
		&:before {
			outline: 1px solid @gold;
			z-index:5;
			pointer-events:none;
		}
		&:after {
			outline: 10px solid #fff;
			z-index:4;
			pointer-events:none;
		}
		
		> div {
			background-color:fade(@blue, 80);
			.blur(10px);
			font-size:1em;
			height:100%;
		}
		h2 {
			color:@gold;
			.font(Montserrat, 500, 1em);
			height:3em;
			margin-bottom:0;
			.vertAlign();
			text-align:center;
			text-transform:uppercase;
		}
		.copy {
			.max-width(590px);
			padding:0px 25px 40px;
			p {
				color:#fff;
				.max({font-size:16px;}, 960);
			}
			a {
				color:#fff;
				text-decoration:underline;
			}
			a.learn-more {
				display:inline-block;
				background-color:@gold;
				border:2px solid @gold;
				color:#fff;
				.font(Montserrat, 500, 24px);
				padding:.5em 1.5em;
				text-align:center;
				text-decoration:none;
				text-transform:uppercase;
				&:hover {
					background-color:fade(@gold, 0);
					color:@gold;
				}
			}
		}
	}
	
	.service {
		&:before {
			outline-offset: -1px;
			.transition();	
		}
		&:after {
			opacity:1;
			outline-offset:-10px;
			.transition();
		}
		&:before {
			width:100%;
			height:100%;
			.transition();
		}
		> div {
			.translateY(~"calc(100% - 3em - 10px)");
			padding:0;
			.transition();
		}
	}
	.service:hover {
		&:before {
			outline-offset: -11px;
		}
		&:after {
			outline-offset:0px;
		}
		> div {
			.translateY(0);
		}
	}
}

#showcase {
	background-image:url('/wp-content/uploads/2021/06/showcase.svg');
	background-size:cover;
	background-position:center;
	.margin-ends(5vw);
	padding:25px 0;
	text-align:center;
	
	h2 {
		border-bottom:1px solid #fff;
		color:#fff;
		display:inline-block;
		.font(Montserrat, 500, 64px);
		.max({ font-size:42px; });
		.max({ font-size:36px; }, 540);
		.max({ font-size:28px; }, 360);
		margin-bottom:25px;
		padding:.5em 1em;
		text-align:center;
		text-transform:uppercase;
	}
	#videos {
		.min({ .vertAlign; });
		min-height:640px;
		.arrow {
			fill:#fff;
			pointer-events:none;
			.max({display:none !important; });
			&:nth-of-type(1) {
				margin-right:-32px;
				.translateX(25px);
			}
			&:nth-of-type(2) {
				margin-left:-32px;
				.translateX(-25px);
				.rotate(180deg);
			}
			* {
				fill:inherit;
			}
		}
		@media (min-width:769px) {
			.showcase:nth-of-type(2) {
				.padding-sides(32px + 50px);
			}
		}
		.showcase {
			padding-bottom:20px;
			display:flex;
			flex-direction:column;
			cite { order:1; }
			.su-lightbox { order:2; }
			blockquote { order:3; }
		}
		cite {
			color:#fff;
			.font(Montserrat, 500, 36px);
		}
		span.su-lightbox {
			line-height:0;
			aspect-ratio:16/9;
			.vertAlign;
			margin:20px 0;
			background-size:cover;
			background-position:center;
			background-repeat:no-repeat;
			.pseudoBefore();
			&:before {
				background-color:fade(@blue, 80);
				.blur(10px);
			}
			img {
				cursor:pointer;
			}
		}
		blockquote {
			color:#fff;
			.max-width(420px);
			.font(Roboto, 300, 20px);
			> div { padding-bottom:2px; }
		}
		.showcase {
			flex:2;
			border-bottom:1px solid fade(#fff, 0);
			.transition();
			cite {
				opacity:0;
				.transition();
			}
			.su-lightbox{
				&:before {
					opacity:1;
					.transition();
				}
				img {
					opacity:0;
					.transition();
				}
			}
			blockquote {
				opacity:0;
				max-height:0;
				.transition() !important;
			}
		}
		@media (min-width:769px) {
			&:not(:hover) .showcase:nth-of-type(2),
			.showcase:hover {
				flex:3;
				border-bottom:1px solid #fff;
				cite { opacity:1; }
				.su-lightbox{
					&:before { opacity:0; }
					img { opacity:1; }
				}
				blockquote {
					opacity:1;
					max-height:var(--max-height) !important;
				}
			}
		}
		@media (max-width:768px) {
			.showcase {
				.max-width(540px);
				&:nth-of-type(2) {
					margin:50px auto;
				}
			}
			.waypointEffect {
				flex:3;
				cite { opacity:1; }
				.su-lightbox{
					&:before { opacity:0; }
					img { opacity:1; }
				}
				blockquote {
					opacity:1;
					max-height:1000px !important;
				}
			}
		}
	}
	#Robert span.su-lightbox { background-image: url(/wp-content/uploads/2018/07/Robert.jpg); }
	#Sylvia span.su-lightbox { background-image: url(/wp-content/uploads/2018/07/Sylvia.jpg); }
	#Marie span.su-lightbox { background-image: url(/wp-content/uploads/2018/07/Marie.jpg); }
}

#logos {
	.margin-ends(5vw);
	text-align:center;
	> div {
		display:inline-grid;
		grid-auto-flow:column;
		max-width:100%;
		align-items:center;
		justify-items:center;
		grid-gap:25px;
		grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr;
	}
	a { line-height:0; }
}