@import "/wp-content/themes/DentalCMO-Badger/wp-less/mixins.less";

@maroon: #53160f;
@green: #76722e;
@red: #ca4225;

@easing: cubic-bezier(0.77, 0, 0.175, 1);

@media (min-width:769px) {
	body:not(.home) {
		header#masthead {
			background-color: fade(@green,75%);
		}
		#page {
			padding-top: 200px;
		}
	}
	header#masthead {
		position: fixed;
		width:100%;
		z-index:100;
		top:0;
		left:0;
		background-color: fade(@green,45%);
		#logo {
			img { max-height: 170px; }
		}
		#ctc, #callus { padding-bottom: 50px !important; }
		
		&, * {
			transition: all 0.5s ease;
		}
		
		&.smaller {
			background-color: fade(@green,75%);
			#logo {
				padding: 10px;
				img {
					max-height:100px;
				}
			}
		}
	}
	.navbar.navbar-default {
		margin-top: -50px;
	}
	#responsiveButtons { display: none; }
}

header#masthead {	
	#widget-logo-area-container > div {
		flex:unset;
		width:auto;
		padding:15px;
		margin-bottom:20px;
	}
	
	#logo {
		margin-right:auto;
	}
	
	#ctc, #callus {
		.vertAlign;
		@media (max-width:768px) { display:none; }
	}
	.headerInfo {
			display:grid;
			grid-template-columns: 35px 1fr;
			grid-template-rows: 1fr 1fr;
		svg {
			grid-row:1 / span 2;
			fill:@maroon;
			align-self:center;
			justify-self:end;
			margin-right:15px;
		}
		> *:nth-child(2) {
			align-self:end;
			justify-self:start;
		}
		> *:nth-child(3) {
			align-self:start;
			justify-self:end;
		}
		.font(Mukta, 300, 17px);
		letter-spacing:.1em;
		text-transform:uppercase;
		color:#fff;
		* {
			color:inherit;
			.font();
			letter-spacing:inherit;
			text-transform:inherit;
		}
		a, b {
			.font(inherit, 700, 1.25em);
		}
	}
	.search-query { min-width:120px; }
	@media (max-width:768px) {
		#logo {
			margin: 0 auto;
		}
		#responsiveButtons {
			padding: 0 !important;
			#responsiveheader {
				padding: 0 10px;
			}
		}
		
		.navbar-collapse {
			background-color: @red;
		}
	}
}

/* Less */
header#masthead {
	#header-info-cont,
	nav.navbar > .container {
		max-width:1440px;
		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;
		}
	}
}
body:not(.home) {
	#content>.container {
		max-width:1440px;
		width:100%;
		margin-top:25px;
		.margin-sides(auto);
		.padding-sides(15px);
	}
}

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

#hero-container {
	position:relative;
	video {
		max-height:100vh;
	}
	
	#overlay {
		position:absolute;
		width:100%;
		height:100%;
		@media (min-width:769px) { height:~"calc(100% - 200px)"; }
		bottom:0;
		left:0;
		z-index:10;
		.vertAlign;
		svg {
			max-width:75%;
			max-height:75%;
		}
	}
}

@media (min-width:769px) {
	#belowHeroLinks { display: none; }
}

@media (max-width:768px) {
	#hero-container {
		margin-bottom: 0 !important;
	}
	#belowHeroLinks {
		a {
			display: block;
			margin: 5px;
			padding: 8px;
			border-radius: 10px;
			color: #fff;
			font-size: 18px;
			text-transform: capitalize;
			text-align:center;
			
			&:nth-of-type(odd) {
				background-color: @green;
			}
			&:nth-of-type(even) {
				background-color: @maroon;
			}
		}
	}
}

@media (min-width:769px) {
	#content {
		background-image:url('/wp-content/uploads/2019/12/background.svg');
		background-position:left 5%;
		background-repeat:no-repeat;
		background-size: 20vw;
		body:not(.home) & {
			padding-left: calc(20vw - 25px);
		}
	}
	.anchor {
		position: relative;
		> a {
			position: absolute;
			top: -200px;
		}
	}
}

#hero-container,
#belowHeroLinks,
#sectionWelcome,
#sectionTestimonials,
#sectionHighlights,
#sectionDifference,
#sectionCallToAction {
	margin-bottom:~"calc(3vw)";
}

#sectionWelcome {
	@media (min-width:769px) {
		padding-left: 20vw;
	}
	h1 {
		color:#58595b;
		.font(Questrial, 400, 32px);
		@media (max-width:540px) { font-size:26px; }
		letter-spacing:.1em;
		margin-bottom:25px;
		text-align:center;
		text-transform:uppercase;
		b {
			color:@red;
			display:inline-block;
			.font(@size: 1.25em);
			margin-left:6px;
			padding:1em 1.25em;
			position:relative;
			text-transform:inherit;
			.pseudoBeforeAfter;
			&:before, &:after {
				border:2px solid @maroon;
				pointer-events:none;
			}
			&:before {
				top:-6px;
				left:-6px;
			}
			&:after {
				top:6px;
				left:6px;
			}
		}
	}
	

}

#sectionTestimonials {
	text-align:center;
	background-image:url('/wp-content/uploads/2019/12/testimonials.jpg');
	padding:0 25px 75px;
	h2 {
		background-color:@maroon;
		color:#fff;
		display:inline-block;
		.font(Questrial, 400, 40px);
		@media (max-width:540px) { font-size:26px; }
		letter-spacing:.1em;
		margin:0;
		padding:1em 1.25em;
		position:relative;
		text-transform:uppercase;
		.translateY(-50%);
		&:before {
			content:' ';
			display:block;
			position:absolute;
			width:~"calc(100% - 24px)";
			height:~"calc(100% - 24px)";
			top:12px;
			left:12px;
			border:2px solid #fff;
			pointer-events:none;
		}
	}
	.testimonial {
		.video {
			background-position:center;
			background-size:cover;
			position:relative;
			line-height:0;
			overflow:hidden;
		}
		&:nth-child(1) .video { background-image:url('/wp-content/uploads/2020/01/testimonial-1.jpg'); }
		&:nth-child(2) .video { background-image:url('/wp-content/uploads/2020/01/testimonial-2.jpg'); }
		.su-lightbox {
			position:absolute;
			width:100%;
			height:100%;
			top:0;
			left:0;
			.vertAlign(flex-end, flex-start);
			padding:25px;
			span {
				position:relative;
				display:inline-block;
				cursor:pointer;
				&:before {
					content:' ';
					display:block;
					position:absolute;
					width:100vw;
					height:2px;
					top:0;
					bottom:0;
					margin:auto;
					left:50%;
					.translateX(-50%);
					z-index:0;
					background-color:#fff;
				}
				img {
					position:relative;
					z-index:10;
				}
			}
		}
		.quote {
			text-align: center;
			padding: 5px;
			font-style: italic;
		}
	}
}

#sectionHighlights {
	display:grid;
	grid-gap:25px;
	@media (min-width:769px) {
		grid-template-columns:1fr 1fr;
		grid-template-areas:1fr 1fr;
	}
	.active() {
		.highlightCopy > div {
			opacity:1;
		}
		.highlightCopy {
			z-index: 9;
		}
	}
	
	#cosmetic.highlight .highlightCopy { background-image:url('/wp-content/uploads/2020/01/cosmetic.jpg'); }
	#implants.highlight .highlightCopy { background-image:url('/wp-content/uploads/2020/01/implants.jpg'); }
	#orthodontics.highlight .highlightCopy { background-image:url('/wp-content/uploads/2020/01/emergency.jpg'); }
	#family.highlight .highlightCopy { background-image:url('/wp-content/uploads/2020/01/family.jpg'); }
	
	.highlight {
		h2 {	
			color:#fff;
			overflow:hidden;
			margin:0;
			.font(Questrial, 400, 40px);
			@media (max-width:960px) and (min-width:769px) {
				font-size:26px;
			}
			@media (max-width:540px) { font-size:26px; }
			letter-spacing:.1em;
			text-align:center;
			padding:2em;
		}
		.highlightCopy {
//			background-image:url('https://cameron.dentalcmo.com/wp-content/uploads/2018/12/Placeholder.svg');
			background-position:center;
			background-size:cover;
			margin:50px;
			@media (max-width:540px) {margin:0; }
			> div {
				height:100%;
				width:100%;
				@media (max-width:540px) { max-width:100vw; }
				padding:25px;
				.vertAlign;
				flex-direction:column;
				background-color:fade(#fff, 85);
			}
			a.learn-more {
				color:@maroon;
				.font(Questrial, 400, 22px);
				letter-spacing:.1em;
				text-align:center;
				text-transform:uppercase;
				padding:1em;
				margin-top:1em;
				.pseudoBeforeAfter;
				&:before, &:after {
					border:2px solid @maroon;
					pointer-events:none;
				}
				&:before {
					top:-6px;
					left:-6px;
				}
				&:after {
					top:6px;
					left:6px;
				}
				b {
					color:inherit;
					display:inline-block;
					.font();
					text-transform:inherit;
				}
				& {
					.transition(color, .3s, @easing);
					&:before, &:after {
						.transition(border, .3s, @easing);
					}
				}
				&:hover {
					color:@red;
					&:before, &:after {
						border:2px solid @red;
					}
				}
			}
		}
		
		& {
			.highlightCopy > div {
				opacity:0;
				.transition(all, .5s, @easing);
			}
		}
		
		@media (min-width:769px) {
			.flex;
			flex-direction:row-reverse;
			h2 {
				padding-left:6em;
				margin-left:-4em;
				writing-mode: vertical-rl;
			}
			.highlightCopy {
				margin-right:0;
			}
			&:nth-child(1), &:nth-child(4) {
				h2 {
					background-color:@green;
				}
			}
			&:nth-child(2), &:nth-child(3) {
				h2 {
					background-color:@red;
				}
			}
			&:hover {
				.active();
			}
		}
		@media (max-width:768px) {
			h2 {
				padding-bottom:6em;
				margin-bottom:-4em;
			}
			.highlightCopy {
				margin-top:0;
			}
			&:nth-child(even) {
				h2 {
					background-color:@green;
				}
			}
			&:nth-child(odd) {
				h2 {
					background-color:@red;
				}
			}
			&.waypointEffect {
				.active();
			}
		}
	}
	
	@media (min-width:769px) {
		&:not(:hover) .highlight.active {
			.active();
		}	
	}
}

#sectionDifference {
	background-image:url('/wp-content/uploads/2019/12/difference.jpg');
	text-align:center;
	padding:50px 87px 100px;
	@media (max-width:540px) { .padding-sides(25px); }
	overflow:hidden;
	
	h2 {
		border:2px solid #fff;
		padding:6px;
		display:inline-block;
		margin-bottom:50px;
		span {
			display:block;
			background-color:fade(#fff, 50);
			padding:.5em 1em;
		}
		color:#fff;
		.font(Questrial, 400, 45px);
		@media (max-width:540px) { font-size:26px; }
		letter-spacing:.1em;
		text-align:center;
		text-transform:uppercase;
	}
	#testimonial_rotator_wrap_693 {
		margin:0 auto;
		padding:0;
		max-width:1440px;
		overflow:visible;
		.testimonial_rotator_quote {
			color:#fff;
			.font(Montserrat, 400, 18px, 1.5);
			margin:0 auto;
			max-width:1280px;
		}
	}
	.testimonial_rotator_prev, .testimonial_rotator_next {
		width:87px;
		height:100vw;
		background-color:fade(#fff, 30);
		background-position:center;
		background-repeat:no-repeat;
		background-size:25px 52px;
	}
	.testimonial_rotator_prev {
		background-image:url('/wp-content/uploads/2019/12/arrowLeft.svg');
		left:-87px;
	}.testimonial_rotator_next {
		background-image:url('/wp-content/uploads/2019/12/arrowRight.svg');
		right:-87px;
	}
	@media (max-width:769px) {
		.testimonial_rotator_prev, .testimonial_rotator_next {
			width:25px;
		}
		.testimonial_rotator_prev {
			left:-25px;
		}
		.testimonial_rotator_next {
			right:-25px;
		}
	}
}

#sectionCallToAction {
	text-align:center;
	h2 {
		display:grid;
		grid-template-columns:1fr auto 1fr;
		grid-gap:25px;
		margin:0 0 1em;
		font-size:45px;
		@media (max-width:540px) { font-size:26px; }
		hr {
			border-top:1px solid #434147;
			width:100%;
			align-self:center;
		}
		svg {
			overflow:visible;
			align-self:center;
			height:1em;
			width:auto;
		}
	}
	h3, p {
		max-width:1280px;
		.margin-sides(auto);
		text-align:center;
		padding:0 25px;
	}
	a.CTA {
		color:#58595b;
		.font(Questrial, 400, 36px);
		display:inline-block;
		letter-spacing:.1em;
		text-align:center;
		text-transform:uppercase;
		padding:1em;
		margin-top:1em;
		.pseudoBeforeAfter;
		&:before, &:after {
			border:2px solid @green;
			pointer-events:none;
		}
		&:before {
			top:-6px;
			left:-6px;
		}
		&:after {
			top:6px;
			left:6px;
		}
		& {
			.transition(color, .3s, @easing);
			&:before, &:after {
				.transition(border, .3s, @easing);
			}
		}
		&:hover {
			color:@green;
			&:before, &:after {
				border:2px solid #58595b;
			}
		}
	}
}

.in_content_review {
	@media (min-width:769px) { max-width:50%; }
	.testimonial_rotator_wrap {
		background-color: rgb(249, 249, 249);
		padding: 20px;
		.testimonial_rotator.template-longform .testimonial_rotator_description {
			margin-bottom: 0;
		}
	}
}

#footer {
	background-image:url('/wp-content/uploads/2019/12/footer.jpg');
	max-width:1660px;
	width:100%;
	margin:auto;
	padding: ~"calc(5vw - -25px)" 25px;
	overflow:hidden;
	position:relative;
	&:before, &:after {
		content:' ';
		display:block;
		position:absolute;
		z-index:1;
		width:100vw;
		height: ~"calc(5vw - -25px)";
		left:0;
		background-color:fade(#fff, 30);
	}
	&:before {
		top:0;
	} &:after {
		bottom:0;
	}

	> .flex {
		max-width:1440px;
		margin:auto;
		background-color:fade(@maroon, 60);
		padding:50px 25px;
		position:relative;
		&:before, &:after {
			content:' ';
			display:block;
			position:absolute;
			z-index:1;
			width:100vw;
			height:100%;
			top:0;
			background-color:fade(#fff, 30);
		}
		&:before {
			right:100%;
		} &:after {
			left:100%;
		}
	}

	#socialMedia {
		.vertAlign;
		> div {
			.vertAlign;
			flex-direction:column;
			@media (max-width:540px) { flex-wrap:wrap; }
			@media (max-width:768px) { flex-direction:row; }
			a {
				display:block;
				padding:10px;
				vertical-align:top;
				line-height: 1;
				margin: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;
			}
		}
	}

	#contactus {
		.wpcf7 .wpcf7-form-control-wrap {
			margin-bottom: 10px;
		}
		h2 {
			color:#fff;
			.font(~"Montserrat", 500, 46px);
			@media (max-width:959px) { font-size:32px; }

			letter-spacing:.1em;
			text-align:center;
			text-transform:uppercase;
			margin:0;
		}
		input[type="submit"] {
			color:#fff;
			background-color:fade(@green, 90);	
			border:none;
			height:unset;
			padding:.75em .5em .8em;
			.font(~"Montserrat", 700, 18px);
			letter-spacing:.05em;
			&:hover {
				color:#ffe4b2;
				background-color:fade(@green, 80);	
			}
		}
	}

	#footerInfo {
		.vertAlign;
		> div {
			.vertAlign;
			flex-direction:column;
		}
		.footerInfo {
			color:#fff;
			width:100%;
			.vertAlign(@justifyContent: flex-start);
			svg {
				fill:currentcolor;
				margin-right:12px;
			}
			a, div, pre {
				color:inherit;
				.font(~"Montserrat", 500, 24px);
			}
			pre {
				white-space:pre-wrap;
			}
			&.ctc {
				position:relative;
				a {
					> span {
						display:inline-block;
						b, span { display: block; }
					}
					@media (max-width:768px) {
						&.sms {
							position: absolute;
							top: 0; left: 0;
							width:100%; height: 100%;
							display: block;
						}
					}
				}
			}
		}
		hr {
			margin:25px 0;
			width:100%;
		}
	}
}

.wpcf7 {
	.wpcf7-form-control-wrap {
		display: block;
		margin-bottom:0;
	}
	.betterInput {
		display:block;
		position: relative;
		padding-top: 1.2em;
		//border-bottom: 2px solid #fff;
		font-size:16px;
		font-family:Montserrat;
		font-weight:400;
		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:@red;
			font-size:inherit;
			font-weight:inherit;
			font-family:inherit;
			background-color:fade(#fff, 70);
			#footer & {
				color: @maroon;
			}
		}
		select {
			display:block;
			width:100%;
			margin-bottom:5px;
		}
		
		textarea {
			height: 125px;
		}

		label {
			position: absolute;
			width:100%;
			top:0;
			transform: translateY(1.4em);
			left:0;
			pointer-events: none;
			color:@red;
			font-size:inherit;
			font-weight:inherit;
			font-family:inherit;
			#footer & {
				color: @maroon;
			}
		}
		.req {
			color:#FF4136;
			.transition(.3s, color, @easing);
		}

		*:focus:not(:placeholder-shown) + label,
		*:focus + label,
		*:focus:not(:placeholder-shown) + label .req,
		*:focus + label .req {
			&, #footer & {
				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;
		}
	}
}

.geography-served {
	display:inline-block;
	text-align:center;
	padding:2em;
	margin-top:1em;
	margin-bottom:~"calc(1.5em - -25px)";
	.pseudoBeforeAfter;
	&:before, &:after {
		border:2px solid @green;
		pointer-events:none;
	}
	&:before {
		top:-6px;
		left:-6px;
	}
	&:after {
		top:6px;
		left:6px;
	}
	& {
		.transition(color, .3s, @easing);
		&:before, &:after {
			.transition(border, .3s, @easing);
		}
	}
}

#colophon {
	 overflow:visible;
}
.footer-menu {
	.flex(center);
	flex-wrap:wrap;
	font-size:22px;
	position:relative;
	&:before {
		content:' ';
		display:block;
		position:absolute;
		width:100vw;
		height:1px;
		left:50%;
		.translate(-50%);
		background-color:@maroon;
		z-index:-1;
		top:.5em;
	}
	li {
		display:block;
		margin-bottom: 8px;
		text-align:left;
		padding:0;
		line-height:0.8em;
		&:after {
			display:none;
		}
		ul {
			padding-left:1em;
		}
	}
	> li {
		flex:1;
		.margin-sides(25px);
		> a {
			color:@maroon;
			.font(Questrial, 400, 1em);
			letter-spacing:.1em;
			background-color:#fff;
			.padding-sides(1em);
			display:inline-block;
			pointer-events:none;
		}
	}
}

.npo {
	margin-bottom: 20px;
	padding: 20px;
	background-color: @red;
	white-space: pre-wrap;
	font-size: 18px !important;
	text-align: center !important;

	h4 {
		margin-top: 0;
		color: #fff;
		text-align: center;
		font-size: 24px;
		line-height: 1.2em;
		letter-spacing: 0.2em;
	}
	&, p, b, strong, a {
		color: #fff !important;
	}
}

.npoContact {
	padding: 20px;
	background-color: @green;
	
	h4 {
		color: #fff;
		font-size: 20px;
		letter-spacing:0.1em;
		text-align:center;
	}
	textarea { height: 100px !important; }
}
.wpcf7 input[type=submit] {
	font-weight: 700;
	font-size: 18px;
}

.testimonial_rotator.template-longform {
	.testimonial_rotator_description {
		position: relative;
		z-index: 1;
		margin-bottom: 50px;
		&::before {
			content: '“';
			position: absolute;
			top: 10px;
			left: 20px;
			z-index: -1;
			color: fade(@green,30%);
			font-family: Mukta;
			font-size: 300px;
			line-height: .75em;
		}
	}
	.testimonial_rotator_quote {
		font-style: italic;
	}
	.testimonial_rotator_author_info p {
		font-weight: 700;
		font-size: 20px;
		color: @maroon;
	}
}

#secondary {
	.widget, .emptyWidget {
		background-color: @green;
		&.npo, &.localMed {
			background-color: @red;
		}
		.textwidget {
			padding-top: 0;
		}
		a, strong, b {
			color: inherit !important;
		}
	}
	.localMed {
		margin-bottom: 20px;
		a {
			display: block;
			padding: 15px;
			color: #fff !important;
			text-align:center;
			font-size: 20px;
			letter-spacing: 0.2em;
		}
	}
	.writeReview {
		a {
			display: inline-block;
			padding: 5px 10px;
			svg path {
				fill: #fff;
			}
		}
	}
	.testimonial_rotator_quote {
		font-size: 13px;
		line-height: 1.2em;
	}
	.testimonial_rotator_quote, .testimonial_rotator_prev, .testimonial_rotator_next {
		color: #fff;
	}
	.testimonial_rotator_description {
		margin-bottom: 0;
	}
	
	.testimonial_rotator_prev {
		left: 5px !important;
	}
	.testimonial_rotator_next {
		right: 5px !important;
	}
}

.insurance {
	-webkit-columns: 200px 2; /* Chrome, Safari, Opera */
	-moz-columns: 200px 2; /* Firefox */
	columns: 200px 2;
	li {
		text-align:left;
	}
}
@media (max-width:768px) {
   #widgetSVC {
	display:none;
}
}
#SVCButton a{
	color: white !important;
    background: black;
    padding: 20px;
}
.widgetSVC{
	margin-top:50px;
}
#masthead.smaller .widgetSVC{
	margin-top:20px;
}