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

@blue: #54685B;
@green: #A5AA9A;

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

#leftOfMenu();

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

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

body {
	background-image:url('http://whitaker.dentalcmo.com/wp-content/uploads/2019/05/background.svg');
	background-position:center;
}

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

@media (max-width:768px) {
	#responsiveheader {
		max-width: 320px;
		
		a {
			width:100px;
		}
	}
}

#desktopButtons {
	.flex(@justifyContent:flex-end);
	max-width:1330px;
	.padding-sides(25px);
	padding-top: 10px;
	.margin-sides(auto);
	height: auto;
	
	@media (max-width:768px) {
		display: none;
	}

	#click-to-call {
		margin-right:100px;
	}
	
	svg {
		fill:@blue;
		margin-right:8px;
	}
	#callus {
		> * {
			display:inline-block;
		}
		* {
			line-height:1;
		}
	}
}

@media (min-width:769px) {
	header#masthead {
		ul.nav {
			> li.active > a:hover {
				font-weight:700;
			}
		}
	}
}

.top-bar { display: none; }

.search-query {
	min-width: 200px;
}

#searchsubmit {
	border: 0;
}

#hero-container {
	position:relative;
	overflow:hidden;
	height: 60vw;
	max-height: 720px;
	
	figure.video {
		video {
			max-height:720px;
			height: 60vw;
		}
	}
	&:not(.playedWithSound) .video-controls {
		opacity:0;
		pointer-events:none;
	}
	#overlay {
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		.vertAlign;
		
		svg {
			height:75%;
			max-height:325px;
			width:auto;
			overflow:visible;
		}
		
		#overlayLeft, #overlayRight {
			position:absolute;
			width:48.5%;
			bottom:0;
			z-index:20;
			text-align:center;
			font-size:3.25vw;
			color:#fff;
			font-family:Caviar Dreams;
			font-weight:400;
			letter-spacing:.1em;
			text-transform:uppercase;
			transform: translateX(0vw);
			.transition(transform, .3s, @easing);
			fill-opacity: 0;
			b {
				font-family:inherit;
				color:inherit;
				text-transform:inherit;
			}
		}
		#overlayLeft {
			left:0;
			background-color: rgba(28,79,125,0.5);
			z-index: 0;
		} #overlayRight {
			right:0;
			background-color: rgba(28,79,125,0.5);
			z-index: 0;
		}
		#playWithSound {
			opacity: 0;
			.transition(opacity, .3s, @easing);
			g { display: none; }
			polygon {
				transform: translateY(2.5%);
			}
		}
	}
	
	&.playedWithSound {
		#overlay {
			pointer-events: none;
			#overlayLeft {
				transform: translateX(-100vw);
			} #overlayRight {
				transform: translateX(100vw);
			}
			#playWithSound {
				opacity: 0;
			}
		}
	}
}


#belowHeroButtons { 
	@media (min-width:769px) { display: none; }
	
	a {
		display: block;
		margin: 5px;
		padding: 5px;
		background-color: #283980;
		color: #fff;
		font-weight: 700;
		font-size: 18px;
		text-align:center;
	}
}

#contact-button,
#sectionWelcome,
#sectionTestimonials,
#sectionHighlights,
#sectionDifference,
#sectionCallToAction {
	margin-bottom:~"calc(5vw - -50px)";
}

body:not(.home) #contact-button {
	margin-bottom: 50px;
}

#contact-button {
	text-align:center;
	
	@media (max-width:768px) { display: none; }
	
	a {
		img {
			width:300px;
			max-width:100%;
			.box-shadow(0px 0px 15px 0px fade(#000,50));
			@media (min-width:1500px) { .translateY(-50%); }
		}
	}
}

#npoo {
	margin:0 15px 0 auto;
	background-color:@blue;
	min-width:235px;
	max-width:235px;
	.pseudoBefore;
	&:before {
		background-image:url('/wp-content/uploads/2019/05/icon.svg');
		background-repeat:no-repeat;
		background-position:center;
	}
	h2 {
		background-color:fade(#b8e4f0,30);
		color:#fff;
		font-family:Caviar Dreams;
		font-weight:400;
		letter-spacing:.1em;
		margin:0;
		padding: .5em .5em .45em;
		b {
			color:inherit;
			font-family:inherit;
			font-size:1.5em;
			letter-spacing:inherit;
			text-transform:inherit;
		}
	}
	#npooCopy {
		padding:25px;
		p {
			color:#fff;
			font-size:18px;
			text-align:center;
			line-height:1.25;
			b {
				color:inherit;
				font-size:1.5em;
				text-transform:uppercase;
				letter-spacing:.1em;
			}
		}
		#npooLink {
			display:block;
			color:#fff;
			font-size:1em;
			text-transform:uppercase;
			letter-spacing:.1em;
		}
	}
}

#sectionWelcome {
	>div:first-of-type {
		max-width: 100%;
		padding:0 30px;
	}
	h4 {
		font-size:40px;
		font-family:Caviar Dreams;
		color:@green;
		letter-spacing:.1em;
		text-transform:uppercase;
		text-align:center;
		margin:0 0 .25em;
		@media (max-width:768px) {
			font-size: 30px;
		}
	}
	h1 {
		padding:8px;
		font-size:64px;
		margin-bottom:25px;
		
		@media (min-width:769px) {
			&.lazyloaded {
				background-image:url('/wp-content/uploads/2019/05/trees.jpg');
			}
		}
		
		@media (max-width:768px) {
			font-size: 34px;
			&.lazyloaded {
				background-image:url('/wp-content/uploads/2019/05/trees-768x144.jpg');
			}
		}
		
		span {
			background-color: white;
			color: black;
			mix-blend-mode: screen;
			display:block;
			opacity:.925;
			text-transform:uppercase;
			text-align:center;
			padding: .3em .25em .25em;
			letter-spacing:.2em;
		}
	}
}

#sectionTestimonials {
	> div {
		max-width:1490px;
		display:grid;
		grid-gap:10px;
		grid-template-columns:1fr 1fr;
		grid-template-areas:
			"h2 h2"
			"test-1 test-2"
			"test-3 test-4";
		h2 { grid-area:h2; }
		.testimonial:nth-of-type(1) { grid-area: test-1; }
		.testimonial:nth-of-type(2) { grid-area: test-2; }
		.testimonial:nth-of-type(3) { grid-area: test-3; }
		.testimonial:nth-of-type(4) { grid-area: test-4; }
	}
	h2 {
		background-color:@green;
		color:#fff;
		font-family:Caviar Dreams;
		font-weight:400;
		letter-spacing:.1em;
		text-align:center;
		font-size:46px;
		padding: .3em .25em .25em;
		margin:0;
		
		@media (max-width:768px) {
			font-size: 30px;
		}
		
		b {
			color:inherit;
			font-family:inherit;
			text-transform:inherit;
		}
	}
	&.lazyloaded {
		#test-1 {
			background-image:url('/wp-content/uploads/2019/06/patient-1.jpg');
		}
		#test-2 {
			background-image:url('/wp-content/uploads/2019/05/patient.jpg');
		}
		#test-3 {
			background-image:url('/wp-content/uploads/2019/06/patient-3.jpg');
		}
		#test-4 {
			background-image:url('/wp-content/uploads/2019/09/testimonial_4.jpg');
		}
	}
	
	.testimonial {
		background-position:center;
		background-size:cover;
		min-height:320px;
		position:relative;
		
		h3 {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			text-align: center;
			background-color: white;
			padding: 10px;
			font-family: Caviar Dreams,Open Sans,Arial;
			color: #54685B;
			font-size: 20px;
		}
		
		@media (max-width:768px) {
			min-height: 220px;
		}
		.su-lightbox {
			position:absolute;
			width:100%;
			height:100%;
			top:0;
			left:0;
			cursor: pointer;
			svg {
				position:absolute;
				height:33%;
				max-height:175px;
				width:auto;
				top:0;
				bottom:0;
				right:0;
				left:0;
				margin:auto;
				text {
					fill:@blue;
					font-family: Lato;
					font-size:16px;
					font-weight: 500;
					text-transform: uppercase;
					opacity:0;
				}
			}
		}
		& {
			.su-lightbox {
				background-color:fade(#717373, 70);
				.transition(all, .3s, @easing);
				svg {
					.translateX(0);
					.transition(all, .3s, @easing);
					path, polygon, text {
						.transition(all, .3s, @easing);
					}
				}
			}
		}
		&:hover {
			.su-lightbox {
				background-color:fade(#717373, 0);
				svg {
					.translateX(100%);
					path {
						fill:#fff;
					}
					polygon {
						fill-opacity:1;
					}
					text {
						opacity:1;
					}
				}
			}
		}
		&#test-2:hover {
			.su-lightbox svg {
				.translateX(100%);
			}
		}
	}
}

#sectionHighlights {
	display:grid;
	grid-gap:10px;
	grid-template-columns:repeat(4, 1fr);
	grid-template-rows:repeat(4, 1fr);
	
	
	@media (max-width:768px) {
		display: block;
	}
	
	&.lazyloaded {
		.highlight {
			&#gen { background-image:url('/wp-content/uploads/2019/05/general-1.jpg'); }
			&#imp { background-image:url('/wp-content/uploads/2019/05/implants-1.jpg'); }
			&#inv { background-image:url('/wp-content/uploads/2019/05/invisalign-1.jpg'); }
			&#last { background-image:url('/wp-content/uploads/2019/05/works-1.jpg'); }
			&#cos { background-image:url('/wp-content/uploads/2019/05/cosmetic-1.jpg'); }
		}
	}
	
	.highlight {
		min-height:420px;
		height:100%;
		background-position:center;
		background-size:cover;
		position:relative;
		.vertAlign(@justifyContent:flex-start);
		
		@media (max-width:768px) {
			display: block;
			min-height: 0;
			height: auto;
		}
		
		&:before {
			border:2px solid #fff;
			content: ' ';
			display: block;
			position: absolute;
			width: calc(100% - 50px);
			height: calc(100% - 50px);
			top: 25px;
			left: 25px;
			z-index:10;
			pointer-events:none;
		}
		
		&:nth-child(1) {
			grid-column: 1 / span 2;
			grid-row: 1 / span 2;
			z-index:1;
			h4 {
				 .rotate(180deg);
				writing-mode: vertical-rl;
				width: 150px;
				height: 100%;
			}
		}
		&:nth-child(2) {
			grid-column: 3 / span 2;
			grid-row: 1 / span 2;
			z-index:2;
			h4 {
				writing-mode: vertical-rl;
				width: 150px;
				height: 100%;
				order:2;
			}
		}
		&:nth-child(3) {
			grid-column: 1 / span 2;
			grid-row: 3 / span 2;
			z-index:3;
			h4 {
				 .rotate(180deg);
				writing-mode: vertical-rl;
				width: 150px;
				height: 100%;
			}
		}
		&:nth-child(4) {
			grid-column: 3 / span 2;
			grid-row: 3 / span 2;
			z-index:4;
			h4 {
				writing-mode: vertical-rl;
				width: 150px;
				height: 100%;
				order:2;
			}
		}
		&:nth-child(5) {
			grid-column: 2 / span 2;
			grid-row: 2 / span 2;
			z-index:5;
			.box-shadow(0px 0px 15px 0px fade(#000,50));
			flex-direction:column;
			h4 {
				width: 100%;
				height: 125px;
				.vertAlign;
			}
		}
		
		h4 {
			background-color:fade(@blue, 80);
			color:#fff;
			font-family:Caviar Dreams;
			font-size:40px;
			font-weight:400;
			text-transform:uppercase;
			text-align:center;
			padding: .5em .25em .45em;
			letter-spacing:.15em;
			margin:0;
			width:100%;
			.vertAlign;
			position:relative;
			z-index:2;
			
			@media (max-width:768px) {
				width: auto !important;
				height: auto !important;
				order: 0 !important;
				writing-mode: inherit !important;
				transform: rotate(0deg) !important;
				padding-top: 0.75em;
				span {
					transform: translateX(0) !important;
				}
			}
			
			span {
				display:inline-block;
			}
			b {
				color:inherit;
				font-family:inherit;
				text-transform:inherit;
			}
		}
		.highlightCopy {
			background-color:fade(@blue, 80);
			width:100%;
			height:100%;
			padding:25px 35px;
			.vertAlign;
			flex-direction:column;
			position:relative;
			z-index:1;
			> * {
				max-width:640px;
			}
			p {
				color:#fff;
			}
			
			a {
				color: #A5AA9A;
			}
			
			.learnMore {
				padding: 8px 16px;
				border: 2px solid #fff;
				color: #fff;
				
				&:hover {
					background-color: #fff;
					color: #283980;
					border-color:#283980;
				}
			}
		}
		
		& {
			.box-shadow(0px 0px 15px 0px fade(#000,0));
			.transition(all, .3s, @easing);
			&:before {
				opacity:0;
				.transition(all, .3s, @easing);
			}
			span {
				.transition(all, .3s, @easing);
			}
			.highlightCopy {
				opacity:0;
				.transition(all, .3s, @easing);
			}
		}
		&:hover {
			.box-shadow(0px 0px 15px 0px fade(#000,50));
			z-index:100;
			&:before {
				opacity:1;
			}
			&:not(:nth-child(5)) h4 span {
				.translateX(-1em)
			}
			&:nth-child(5) h4 span {
				.translateY(1em)
			}
			.highlightCopy {
				opacity:1;
			}
		}
	}
	
}

#sectionDifference {
	> div {
		overflow:visible;
	}
	h2 {
		color:@green;
		font-size:38px;
		text-align:center;
		letter-spacing:.1em;
		margin-bottom:50px;
		svg {
			overflow:visible;
			max-width:100%;
		}
	}
}

#sectionCallToAction {
	h2 {
		font-size:64px;
		text-align:center;
		color:#fff;
		padding: .35em .25em .25em;
		letter-spacing:.2em;
		
		&.lazyloaded {
			background-image:url('/wp-content/uploads/2019/05/trees.jpg');
		}
		
		.pseudoBefore;
		&:before {
			background-color:fade(@green, 84);
		}
	}
	.CTA {
		color:#fff;
		background-color:#54685B;
		display:block;
		max-width:300px;
		font-size:24px;
		font-family:Caviar Dreams;
		font-weight:700;
		text-align:Center;
		margin:auto;
		padding: .55em .5em .5em;
	}
}

#footer {
	padding:75px 50px;
	
	&.lazyloaded {
		background-image:url('/wp-content/uploads/2019/05/footer.jpg');
	}
	
	@media (max-width:768px) {
		padding:20px;
	}
	
	> div {
		max-width:1280px;
		margin:auto;
		background-color:fade(@blue, 75);
		padding:50px;
		
		@media (max-width:768px) {
			padding:20px;
		}
	}
	
	#footerInfo {
		.vertAlign;
		flex-direction:column;
	}
	.footerInfo {
		.flex(@justifyContent:flex-start);
		&:not(:last-child) {
			margin-bottom:50px;
		}
		
		svg {
			margin-right:10px;
			fill:#fff;
		}
		a, b, pre, {
			color:#fff;
			font-family:Lato;
			font-size:20px;
			margin:0;
			display:block;
		}
	}
	
	#socialMedia {
		text-align:center;
		.vertAlign;
		flex-direction:column;
		
		@media (max-width:768px) {
			flex-direction: row;
			flex-wrap: wrap;
		}

		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 {
		background-color:#fff;
		padding:25px;
		margin-bottom: 30px;
		.drop-shadow(10px 10px 20px 0px fade(#000,25));
		h2 {
			color:@green;
			font-family:Caviar Dreams;
			font-weight:400;
			text-transform:uppercase;
			text-align:center;
			letter-spacing:.1em;
			font-size:32px;
			margin:0 0 25px;
			b {
				font-family:inherit;
				color:inherit;
				text-transform:inherit;
			}
		}
		
		.wpcf7 input[type="submit"] {
			background-color:#717373;
			border:1px solid #717373;
			&:hover {
				background-color:#fff;
				color:#717373;
			}
		}
	}
}

.wpcf7 .betterInput {
	position: relative;
	padding-top: 1.2em;
	border-bottom: 1px solid #717373;
	margin-bottom:10px;
	font-size:16px;
	font-family:Lato;
	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 2px;
		background: transparent;
		resize:none;
	}
	label {
		.transition(.3s, all, @easing);
	}
	
	input, select, textarea {
		color:#717373;
		font-size:inherit;
		font-weight:inherit;
		font-family:inherit;
	}
	select {
		display:block;
		width:100%;
		margin-bottom:5px;
	}
	
	label {
		position: absolute;
		width:100%;
		top:0;
		transform: translateY(1.2em);
		left:0;
		pointer-events: none;
		color:#717373;
		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:#bae4f9; // Inputting
	}
	*:not(:placeholder-shown) + label,
	*:not(:placeholder-shown) + label .req {
		color:#aaa; // Inputted
	}
	*:focus + label,
	*:not(:placeholder-shown) + label {
		transform: translateY(0);
		font-size: .8em;
	}
}

#footer-area {
	padding-top:50px;
	@media (max-width:768px) {
		padding-top:150px;
	}
	
	ul.footer-menu {
		.flex;
		
		@media (max-width:768px) {
			flex-direction: column;
		}
		
		li {
			margin:0;
			padding:0;
			display:block;
			text-align:left;
			&:after {
				display:none;
			}
		}
		ul.sub-menu {
			margin:0;
			padding-left:10px;
		}
		> li {
			padding:15px;
			> a {
				color:@blue;
				border-bottom:1px solid;
				font-size:24px;
				font-family:Caviar Dreams;
				font-weight:700;
				letter-spacing:.1em;
				text-transform:uppercase;
			}
		}
		
	}
}

#secondary {
	.widget_custom_html { display: block; }
	.testimonial_rotator_wrap {
		margin: 0;
		&.with-prevnext {
			padding: 0 20px;
		}
	}
	.widget {
		.widget-title {
			min-height: 0;
			padding: 10px;
			line-height: 1.2em;
		}
	}
	.npo {
		.widget-title {
			padding: 10px 30px;
		}
		.textwidget {
			font-size: 18px;
		}
	}
	svg {
		margin: 0 10px;
		path {
			fill: #54685B;
		}
	}
	a, strong, b {
		color:inherit;
	}
	#yourMessage {
		height: 120px;
	}
	#requestAppointment {
		a {
			display: block;
			background-color: #9dc563;
			color: #fff;
			padding: 10px;
			text-align: center;
			margin-bottom: 20px;
			font-size: 20px;
			&:hover {
				background-color: #54685B;
			}
		}
	}
}

.npo {
	white-space: pre-wrap;
	strong {
		color: inherit;
	}
}

#logo {
	padding-top: 0;
	margin-top: -30px;
	@media all and (max-width: 768px) {
		padding-top: 25px;
		margin-top: 0;
	}
}

@media all and (max-width: 768px) {
	.newVid {
		margin-top: -50px !important;
		width: 90% !important;
	}
}

a.navbar-brand {
	color: #1E3C6D;
    font-size: 16px;
}

a.button {
    background-color: #54685B;
    color: #fff;
    padding: 0.5em 1em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
	border: 1px solid #54685B;
}

a.button:hover {
	color: #54685B;
	background-color: #fff;
}

#desktopButtons a.button {
	margin-right: 3em;
	font-size: clamp(1rem, 4vw, 20px);
}

@media (min-width: 769px) and (max-width: 1023px) {
	#desktopButtons {
		flex-direction: column;
    	max-width: max-content;
    	gap: 20px;
    	margin: 0 0 0 auto;	
	}
}