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

@gold: #a3873d;
@slate: #4a4f5a;
@green: #758b7f;
@easing: cubic-bezier(0.77, 0, 0.175, 1);

#leftOfMenu;

header#masthead {
	
	@media (min-width:769px) {
		body.home & {
			position:absolute;
			width:100%;
			top:0;
			left:0;
			z-index:100;
		}
		body:not(.home) & {
			background-image: url(/wp-content/uploads/2019/12/header.jpg);
			background-size: cover;
		}
	}
	

	.container:first-child {
		justify-content:flex-end;
		.top-bar {
			overflow:visible;
			height: unset;
			width: unset;
			.translateY(50%);
		}	
	}
	
	#callus {
		svg {
			border:1px solid @gold;
			fill:currentcolor;
			width:42px;
			height:42px;
			padding:5px;
		}
	}
	ul.nav {
		position:relative;
		.bar {
			position: absolute;
			height: 3px;
			background-color:@gold;
			bottom:0;
			transition: all .3s @easing;
			overflow:hidden;
			font-size:0;
			color:transparent;
			pointer-events:none;
		}
		@media (max-width:768px) {
			background-color: @gold;
		}
	}
	
}

/* Less */
header#masthead {
	.container,
	> .container:first-child {
		max-width:1490px;
		width:100%;
		.margin-sides(auto);
	}
	@media (min-width: 769px) {
		padding:0 15px;
		#logo {
			text-align:left;
			padding-left:0;
		}
		#desktopButtons > div {
			margin:auto 0 auto auto;
		}
		.headerInfo:last-child {
			padding-right:0;
		}
	}
}

@media (max-width:1225px) and (min-width:769px) {
	#logo {
		padding: 0;
		max-width: 325px;
		svg {
			max-width:100%;
		}
	}
	nav.navbar {
		width: 100%;
	}
}
@media (max-width:768px) {
	#logo {
		svg {
			max-width: calc(100% - 20px);
		}
	}
}


body:not(.home) {
	#content>.container {
		max-width:1440px;
		width:100%;
		margin-top:25px;
		.margin-sides(auto);
		.padding-sides(15px);
	}
}

.shortWideBack>div {
	max-width:1490px;
}

.inherit() {
	color:inherit;
	text-transform:inherit;
	letter-spacing:inherit;
}

#hero {
	background-image:url('/wp-content/uploads/2022/05/office-pic-scaled.jpg');
	.hero(720px);
	min-height:540px;
	.vertAlign;
	
	#overlay {
		max-width:1490px;
		padding:0 25px;
		width:100%;
	}

	h2 {
		color:black;
		.font(Montserrat, 400, 42px, 1, italic);
		@media (max-width:960px) { font-size:3.3vw;}
		letter-spacing:.1em;
		margin:0;
		b {
			.inherit();
			.font(@weight:600, @style:inherit);
		}

		svg {
			overflow:visible;
			height: 3.35em;
			width: auto;
			display:inline-block;
			vertical-align:middle;
			margin-top:-1em;
			path {
				stroke:#fff;
				animation: animate_Line 2000ms linear 1s forwards;
				-webkit-animation: animate_Line 2000ms linear 1s forwards;
			}
			@durationSlider: 1 / 2;
			@delaySpacer: 250ms;

			@delayA: 2s;
			@durationA: 232ms * @durationSlider + @delaySpacer;
			#La {
				stroke-dasharray: 230.591, 232.591;
				stroke-dashoffset: 231.591;
				animation-duration: @durationA;
				animation-delay:@delayA;
			}
			@delayB: @delayA + @durationA;
			@durationB: 43ms * @durationSlider + @delaySpacer;
			#Lb {
				stroke-dasharray: 41.929, 43.929;
				stroke-dashoffset: 42.929;
				animation-duration: @durationB;
				animation-delay:@delayB;
			}
			@delayC: @delayB + @durationB;
			@durationC: 261ms * @durationSlider + @delaySpacer;
			#Lc {
				stroke-dasharray: 259.272, 261.272;
				stroke-dashoffset: 260.272;
				animation-duration: @durationC;
				animation-delay:@delayC;
			}
			@delayD: @delayC + @durationC;
			@durationD: 57ms * @durationSlider + @delaySpacer;
			#Ld {
				stroke-dasharray: 55.374, 57.374;
				stroke-dashoffset: 56.374;
				animation-duration: @durationD;
				animation-delay: @delayD;
			}
			@delayE: @delayD + @durationD;
			@durationE: 359ms * @durationSlider + @delaySpacer;
			#Le {
				stroke-dasharray: 357.792, 359.792;
				stroke-dashoffset: 358.792;
				animation-duration: @durationE;
				animation-delay: @delayE;
			}
			@delayF: @delayE + @durationE + 100ms;
			@durationF: 44ms * @durationSlider + @delaySpacer;
			#Lf {
				stroke-dasharray: 42.513, 44.513;
				stroke-dashoffset: 43.513;
				animation-duration: @durationF;
				animation-delay: @delayF;
			}
			@delayG: @delayF + @durationF;
			@durationG: 144ms * @durationSlider + @delaySpacer;
			#Lg {
				stroke-dasharray: 142.988, 144.988;
				stroke-dashoffset: 143.988;
				animation-duration: @durationG;
				animation-delay: @delayG;
			}
			@delayH: @delayG + @durationG;
			@durationH: 57ms * @durationSlider + @delaySpacer;
			#Lh {
				stroke-dasharray: 55.374, 57.374;
				stroke-dashoffset: 56.374;
				animation-duration: @durationH;
				animation-delay: @delayH;
			}
			@delayI: @delayH + @durationH + 100ms;
			@durationI: 20ms * @durationSlider + @delaySpacer;
			#Li {
				stroke-dasharray: 18.716, 20.716;
				stroke-dashoffset: 19.716;
				animation-duration: @durationI;
				animation-delay: @delayI;
			}
			@delayJ: @delayI + @durationI;
			@durationJ: 20ms * @durationSlider + @delaySpacer;
			#Lj {
				stroke-dasharray: 18.738, 20.738;
				stroke-dashoffset: 19.738;
				animation-duration: @durationJ;
				animation-delay: @delayJ;
			}
		}

	}
	@media (max-width:768px) {
		min-height: 0;
		h2 {
			font-size: 22px;
			svg {
				max-width:35vw;
			}
		}
	}
}
.notransition {
	-o-transition: none !important;
	-ms-transition: none !important;
	-moz-transition: none !important;
	-webkit-transition: none !important;
	transition: none !important;
}

#sectionWelcome,
#sectionTestimonials,
#sectionHighlights,
#sectionCallToAction {
	.margin-ends(~"calc(7vw - -50px)");
}

#sectionWelcome {
	margin-top:0;
	background-image:url('/wp-content/uploads/2019/12/h.svg');
	> div {
		padding-top:100px;
	}
	h1 {
		color:@slate;
		.font(Montserrat, 300, 30px);
		letter-spacing:.1em;
		.vertAlign;
		margin-bottom:50px;
		@media (max-width:960px) { flex-wrap: wrap; }
		span {
			.inherit();
			margin-right:.5em;
		}
		img {
			height:1em;
			margin-left:.75em;
			&:nth-of-type(1) {
				height:1.75em;
				margin-left:0;
			}
		}
	}
	img.alignright {
		shape-outside: url('/wp-content/uploads/2019/04/best-of-dawson-1024x768.png');
		shape-margin:25px;
		width:540px;
	}
}

#sectionTestimonials {
	max-width:1080px;
	.margin-sides(auto);
	h2 {
		color:@gold;
		.font(Montserrat, 400, 40px);
		letter-spacing:.1em;
		text-align:center;
		text-transform:uppercase;
		margin-bottom:~"calc(1em - -10px)";
		b {
			display:inline-block;
			position:relative;
			.inherit();
			.font(@weight:700,@style:italic);
			&:after {
				content:' ';
				display:block;
				position:absolute;
				width:100%;
				height:2px;
				background-color:@slate;
				left:0;
				bottom:-.5em;
			}
		}
	}
	#testimonial_rotator_wrap_386 {
		padding: 10px 45px;
		margin:0;
	}
	.testimonial_rotator_quote {
		color:@slate;
		.font(~"Montserrat", 300, 32px, 1.25, italic);
		max-width:720px;
		margin:0 auto 25px;
		@media (max-width:768px) { font-size: 18px; }
		b {
			.inherit();
			.font(@weight:700, @style:italic);
		}
	}
	.testimonial_rotator_author_info {
		margin:0;
		padding:0;
		p {
			margin:0;
			padding:0;
			color:@slate;
			.font(Jaceline, 400, 125px);
			@media (max-width:768px) { font-size: 75px; }
		}	
	}
	.testimonial_rotator_prev,
	.testimonial_rotator_next {
		width:35px;
		height:85px;
		&:before {
			content:' ';
			display:block;
			position:absolute;
			width:~"calc(100% - 5px)";
			height:100%;
			top:0;
			background-color:@gold;
		}
		&:after {
			content:' ';
			display:block;
			position:absolute;
			width:5px;
			height:100%;
			top:0;
			background-color:@slate;
		}
	}
	.testimonial_rotator_prev {
		left:0;
		&:before {
			left:0;
			.clip("100% 0, 100% 100%, 0 50%");
		}
		&:after {
			right:0;
		}
	}
	.testimonial_rotator_next {
		right:0;
		&:before {
			right:0;
			.clip("0 0, 0% 100%, 100% 50%");
		}
		&:after {
			left:0;
		}
	}
}

#sectionHighlights {
	display:grid;
	grid-gap:20px;
	grid-template-columns:10fr 1fr 10fr;
	grid-template-rows:1fr 1fr;
	grid-template-areas:
		"H1 H1 H2"
		"H3 H4 H4";
	
	.highlight:nth-child(1) { grid-area:H1; }
	.highlight:nth-child(2) { grid-area:H2; }
	.highlight:nth-child(3) { grid-area:H3; }
	.highlight:nth-child(4) { grid-area:H4; }
	
	#family { background-image:url('/wp-content/uploads/2019/12/family.jpg'); }
	#cosmetic { background-image:url('/wp-content/uploads/2019/12/cosmetic.jpg'); }
	#sedation { background-image:url('/wp-content/uploads/2019/12/sedation.jpg'); }
	#implants { background-image:url('/wp-content/uploads/2019/12/implants.jpg'); }
	
	.highlight {
		background-position:center;
		background-size:cover;
		min-height:600px;
		padding:25px 50px;
		display:grid;
		grid-template-columns:1fr;
		grid-template-rows:1fr auto 1fr;
		.pseudoBefore;
		&:before {
			background-color:fade(#758b7f, 86);
		}
		.highlightSlider {
			grid-row: 2 / span 1;
			border:1px solid #fff;
			padding:25px;
			h2 {
				margin:0;
				color:#fff;
				.font(Montserrat, 400, 45px);
				padding:1em 0;
				text-align:center;
				text-transform:uppercase;
				letter-spacing:.1em;
				cursor:pointer;
				position:relative;
				text-shadow:0 0 6px fade(#000, 25);
				&:before {
					content:' ';
					display:block;
					position:absolute;
					height:2px;
					background-color:#fff;
					width:0;
					left:50%;
					.translate(-50%);
					bottom:.5em;
					.transition(all, .5s, @easing);
				}
				&:hover:before {
					width:50%;
				}
				b {
					.inherit();
					.font(@weight:600);
				}
			}
			.highlightCopy {
				overflow: hidden;
				max-height: 0px;
				.transition(all, .5s, @easing);
				> div {
					padding-top:25px;
					max-width:540px;
					.margin-sides(auto);
				}
				p {
					color:#fff;
				}
			}
		}
		a.learn-more {
			grid-row: 3 / span 1;
			justify-self:center;
			align-self:end;
			color:#fff;
			.font(~"Montserrat", 300, 23px);
			letter-spacing:.1em;
			text-transform:uppercase;
			b {
				.inherit();
				.font(@weight:700);
			}
		}
		& {
			&:before, a.learn-more {
				opacity:0;
				.transition(all, .5s, @easing);
			}
		}
		&.active {
			&:before, a.learn-more {
				opacity:1;
			}
			h2:before {
				width:60% !important;
			}
		}
		
		@media (max-width:1225px) {
			padding: 20px;
			.highlightSlider {
				padding: 10px;
				h2 {
					font-size: 30px;
				}
			}
		}
	}
	@media (max-width:768px) {
		display: block;
	}
}

#sectionCallToAction {
	> div {
		max-width:1130px;
		text-align:center;
	}
	h2 {
		color:@slate;
		.font(Montserrat, 200, 40px);
		letter-spacing:.1em;
		text-align:center;
		text-transform:uppercase;
		b {
			color:@gold;
			.font(Jaceline, 400, 4.75em);
			text-transform:none;
			vertical-align: middle;
			margin-top: -.1em;
			display: inline-block;
		}
	}
	p {
		text-align-last:center;
	}
	a.CTA {
		border:2px solid @gold;
		display:inline-block;
		padding:.33em;
		color:#fff;
		.font("Montserrat", 700, 30px);
		.transition(border, .5s, @easing);
		@media (max-width:768px) { font-size: 28px; }
		span {
			display:block;
			background-color:@green;
			padding:.5em 1em;
			.transition(background-color, .5s, @easing);
		}
		&:hover {
			border:2px solid @green;
			span {
				background-color:@gold;
			}
		}
	}
}

#titleBanner {
	h1 {
		text-align: center;
		background-color: #a3873d;
		color: #fff;
	}
}

#secondary {
	.widget {
		b, strong, a {
			color: inherit;
		}
	}
}

#footer {
	background-image:url('/wp-content/uploads/2019/12/hero.jpg');
	background-position:20%;
	background-size:cover;
	.flex(flex-start);
	
	#contactus {
		background-color:fade(@green, 86);
		padding:50px 50px;
		h2 {
			color:#fff;
			.font(Montserrat, 300, 40px);
			letter-spacing:.1em;
			text-align:center;
			text-transform:uppercase;
			b {
				.inherit();
				.font(@weight:600);
			}
		}
		input[type="submit"] {
			max-width:190px;
			display:block;
			border:2px solid #fff;
			color:#fff;
			background-color:fade(#fff, 0);
			height:unset;
			.font(Montserrat, 400, 18px);
			.padding-ends(.5em);
			&:hover {
				background-color:#fff;
				color:@green;
			}
		}
	}
	#socialMedia {
		.vertAlign;
		flex-direction:column;
		background-color:fade(@gold, 65);
		padding:25px;

		a {
			display:block;
			padding:10px;
			vertical-align:top;
			line-height: 1;
			margin:15px 8px;
		}
		svg {
			height:32px;
			width:auto;
			path {
				fill:#fff;
				fill-opacity:.8;
				transition:fill-opacity .3s;
				-webkit-transition:fill-opacity .3s;
			}
		}
		a:hover svg path {
			fill-opacity:1;
		}
	}
	@media (max-width:768px) {
		flex-wrap: wrap;
		#socialMedia {
			width: 100%;
			flex-direction: row;
		}
	}
}

.wpcf7 .betterInput {
	position: relative;
	padding-top: 1.2em;
	margin-bottom:10px;
	.font(Montserrat, 400, 15px);
	color:#fff;

	*::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:#313131;
		border:0;
		padding: 1px 6px;
		background: transparent;
		resize:none;
	}
	label {
		.transition(.3s, all, @easing);
	}

	input, select, textarea {
		color:#fff;
		font-size:inherit;
		font-weight:inherit;
		font-family:inherit;
		//background-color:fade(#fff, 70);
		border:2px solid #fff;
	}
	select {
		display:block;
		width:100%;
		margin-bottom:5px;
	}

	label {
		position: absolute;
		width:100%;
		top:0;
		transform: translateY(1.55em);
		left:0;
		pointer-events: none;
		color:#fff;
		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(0);
		font-size: .8em;
	}
}

#footerInfo {
	margin-top:25px;
	.footerInfo {
		background-color:@slate;
		color:#fff;
		.font("Montserrat", 600, 24px);
		.vertAlign;
		padding:20px;
		svg {
			fill:currentcolor;
			margin-right:8px;
			height:35px;
			width:35px;
		}
		a, pre {
			margin:0;
			.inherit();
			.font();
		}
		pre {
			white-space:normal;
		}
	}
}

#page {
	position:relative;
	&:before {
		content:' ';
		display:block;
		position:absolute;
		width:100vw;
		height:2050px;
		background-image:url('/wp-content/uploads/2019/12/footerH.svg');
		background-position:bottom center;
		background-repeat:no-repeat;
		left:0;
		bottom:0;
		z-index:10;
		pointer-events:none;
	}
	#content {
		position:relative;
		z-index:20;
	}
	#footer {
		position:relative;
		z-index:5;
	}
	#footerInfo {
		position:relative;
		z-index:14;
	}
	#footer-area {
		position:relative;
		z-index:15;
	}
}

#betterFooter;

.footer-menu > li > a {
	color:@gold;
}



/****** 1/23/23********/
img.alignnone.size-full.wp-image-1245.logo-2021 {
    width: 375px;
}

@media (min-width:1000px) and (max-width:1300px) {
	img.alignnone.size-full.wp-image-1245.logo-2021 {
    width: 300px;
}}

@media (min-width:200px) and (max-width:999px) {
	img.alignnone.size-full.wp-image-1245.logo-2021 {
    width: 250px;
    padding: 0px 15px;		
}}

#overlay{
	position: relative;
    top: -9px;
}

#welcome-subheading{
	display: flex;
	justify-content: center;
	color: #4a4f5a;
    font-family: Montserrat;
    font-weight: 600;
    font-size: 28px;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    letter-spacing: 0.1em;
    text-align: center;
	margin-bottom: 50px;
}
#sectionWelcome h1{
	margin-bottom: 25px;
}
@media screen and (max-width: 1200px){
	#sectionWelcome{
		background-image: none;
	}
}
@media screen and (max-width: 769px){
	#hero {
		box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, .38);
	}
	#overlay svg{
		display: block;
		position: relative;
    	top: 3em;
    	right: 8em;
	}
}
@media screen and (max-width: 455px){
	#overlay svg{
		right: 0px;
	}
}