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

@blue: #084c80;
@lightblue: #1faae1;

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

.entry-content h1 {
	letter-spacing:-.05em;
}

#leftOfMenu();

#desktopButtons {
	max-width: 1330px;
	padding: 0 25px;
	margin:auto;
	height:0;
	position:relative;
	z-index:2000;
	.flex(@justifyContent:flex-end);

	.headerInfo {
		padding:2px 0;
		&:not(:last-child) {
			margin-right:50px;
		}
		* {
			display:inline-block;
			vertical-align:middle;
		}
		svg {
			fill:#1faae1;
			margin-right:5px;
		}
		a {
			color:#fff;
			font-family:Montserrat;
			font-size:24px;
			font-weight:600;
			@media (max-width: 1169px) and (min-width: 940px) {
				font-size: 14px;
			}
			
			@media (max-width: 939px) and (min-width: 838px) {
				font-size: 10px;
			}
		}
	}
	@media (max-width: 837px) and (min-width: 769px) {
		max-width: 300px;
		margin-right: 0;
		flex-direction: column;
		justify-content: flex-start;
		-moz-justify-content: flex-start;
		-webkit-justify-content: flex-start;
		.headerInfo:not(:last-child) {
			margin-right: 0;
		}
		.headerInfo a {
			font-size: 18px;
		}
	}
	@media (max-width: 768px) {
		display: none;
	}
}

header#masthead {
	background-color:fade(#084c80,30);

	@media (min-width:769px) {
		body.home & {
// 			background-color:fade(#fff,55); This was causing weird display issues.
			position:absolute;
			width:100%;
			z-index:1000;
		}

		> .container {
			.top-bar { display:none !important; }

			#logo {
				background-color:#fff;
				position:relative;
				z-index:999;
				&:before {
					content:' ';
					display:block;
					position:absolute;
					width:100vw;
					height:100%;
					background-color:#fff;
					top:0;
					right:100%;
				}
				&:after {
					content:' ';
					display:block;
					position:absolute;
					width:100%;
					height:100%;
					background-color:#fff;
					top:0;
					left:100%;
					.clip("-1px -1px, -1px calc(100% - -1px), calc(100% - -1px) -1px");
				}
				a {
					&:before {
						content:' ';
						display:block;
						position:absolute;
						background-color:#bae4f9;
						pointer-events:none;
						height:100%;
						width:200%;
						top:0;
						left:100%;
					}
					&:after {
						content:' ';
						display:block;
						position:absolute;
						background-color:#bae4f9;
						pointer-events:none;
						height:100%;
						width:100%;
						top:0;
						left:300%;
						.clip("-1px -1px, -1px calc(100% - -1px), calc(100% - -1px) -1px");
					}
					img {
						height:unset;
					}
				}
			}

			nav.navbar {
				position:relative;
				z-index:2000;
			}

		}

	}

}

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


@media (max-width:768px) {
	#responsiveheader {
		max-width:500px;
		padding:0 10px;
		a {
			width:auto;
			padding: 0 10px;
			min-width: 100px;
			font-size: 14px;
			margin: 0 3px 10px;
		}
	}
}

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

#hero-container {
	position:relative;

	& {
		.transition(all, .5s, @easing);
		.clip("0 0, 100% 0, 100% calc(100% - 150px), 50% 100%, 0 calc(100% - 150px)");
		margin-bottom:-75px;
	}
	&.playedWithSound {
		.clip("0 0, 100% 0, 100% 100%, 50% 100%, 0 100%");
		margin-bottom:75px;

		+ #content #sectionWelcome {
			.clip("0 0, 50% 0, 100% 0, 100% 100%, 0 100%");
			padding-top:0;
		}
	}

	figure.video {
		video {
			max-height:840px;
		}
	}

	#overlay {
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		.vertAlign(@alignItems:flex-end);

		#playWithSound {
			max-width:25%;
			margin-bottom:5%;
			cursor:pointer;
			.clip("0 0, 0% 100%, 100% 50%");
		}
	}
}

#sectionWelcome {
	background-image:url('/wp-content/uploads/2019/05/interior.jpg');
	.clip("0 0, 50% 150px, 100% 0, 100% 100%, 0 100%");
	padding-top:150px;
	.pseudoBefore;
	.transition(clip-path, .5s, @easing);
	.transition(padding-top, .5s, @easing);

	&:before {
		background-image:url('/wp-content/uploads/2019/05/welcomeOverlay.svg');
		background-position:bottom right;
	}

	#welcomeCopy {
		max-width:720px;
	}

	h1 {
		color:#fff;
		span {
			font-family:Century Gothic;
			display:inline-block;
			letter-spacing:.1em;
			&:first-letter {
				font-family:"Trajan Pro 3",Cinzel,Open Sans,Arial;
				font-size:2em;
				display:inline-block;
				vertical-align:middle;
			}
		}
	}
}

#sectionTestimonials {
	position:relative;
	.padding-ends(~"calc(5vw - -50px)");
	> div {
		max-width:1280px;
		margin:auto;	
	}
	
	#TL {
		position:absolute;
		top:0;
		left:0;
	}
	#BR {
		position:absolute;
		bottom:0;
		right:0;
	}

	h2 {
		background-color:@blue;
		color:#fff;
		font-size:46px;
		letter-spacing:.15em;
		padding:.25em 25px .325em;
		text-align:center;
		margin-bottom:25px;
		@media (max-width:768px) {
			font-size: 26px;
		}
		b {
			color:inherit;
			font-family:inherit;
			text-transform:inherit;
			position:relative;
			z-index:10;
			.padding-sides(1em);
			&:before {
				content:' ';
				display:block;
				position:absolute;
				top:50%;
				left:50%;
				.translateY(-50%);
				.translateX(-50%);
				width:~"calc(100% - -25px)";
				height:~"calc(100% - -50px)";
				background-color:fade(@lightblue, 85);
				z-index:-1;
				.clip("75px 0%, 100% 0%, calc(100% - 75px) 100%, 0% 100%");
				@media (max-width:768px) {
					height:100%;
				}
			}
		}
	}
	.flex {
		max-width:1600px;
		margin:auto;
	}
	.testimonial {
		position:relative;
		background-color:#fff;
		padding:25px;
		overflow:hidden;
		.su-lightbox {
			display:block;
			position:absolute;
			width:100%;
			height:100%;
			z-index:10;
			top:0;
			left:0;
			//background-image:url('http://mcrae.dentalcmo.com/wp-content/uploads/2018/12/Placeholder.svg');
			background-size:cover;
			background-position:center;
			img {
				position:absolute;
				display:block;
				height:30%;
				width:auto;
				top:0;
				bottom:0;
				margin:auto;
				right:25%;
				cursor:pointer;
				@media (max-width:768px) {
					right:auto;
					left:15%;
					opacity:1 !important;
				}
			}
		}
	}
	
	&.lazyloaded {
		.testimonial {
			&#gary .su-lightbox {
				background-image:url('/wp-content/uploads/2019/08/gary.jpg');
			}
			&#jill .su-lightbox {
				background-image:url('/wp-content/uploads/2019/08/jill.jpg');
				@media (max-width:768px) {
					img {
						left: auto;
						right:15%;
					}
				}
			}
			&#john .su-lightbox {
				background-image:url('/wp-content/uploads/2019/08/john.jpg');
			}
		}
	}

	/** Animation **/
	.testimonial,
	.testimonial:before,
	.testimonial:after,
	.testimonial .su-lightbox,
	.testimonial .su-lightbox img {
		.transition(all, 600ms, @easing);
	}
	.testimonial .su-lightbox {
		opacity:.33;
		img {
			opacity:0;	
		}
	}
	/** End Animation **/

	@media (min-width:769px) {
		.flex .testimonial {
			flex:.75;
			//border-bottom:75px solid #fff;
			&:nth-child(2) {
				border-left:20px solid #fff;
				border-right:20px solid #fff;
				min-height:540px;
			}
			&:nth-child(1):after,
			&:nth-child(2):after,
			&:nth-child(3):before,
			&:nth-child(2):before {
				content:' ';
				display:block;
				position:absolute;
				height:40%;
				width:35%;
				max-width:45px;
				max-height:190px;
				top:0;
				bottom:0;
				margin:auto;
				background-color:@lightblue;
				z-index:15;
				pointer-events:none;
			}
			&:nth-child(1):after,
			&:nth-child(2):after {
				.clip("100% 0, 100% 100%, 0 50%");
				right:0;
			}
			&:nth-child(3):before,
			&:nth-child(2):before {
				.clip("0 0, 0% 100%, 100% 50%");
				left:0;
			}
		}
		.flex:not(:hover) .testimonial:nth-child(2).waypointEffect,
		.flex .testimonial:hover {
			flex:10;
		}
		.flex:not(:hover) .testimonial:nth-child(2),
		.flex .testimonial:hover {
			//border-bottom:0 solid transparent;
		}

		.flex:not(:hover) .testimonial:nth-child(2).waypointEffect:before,
		.flex:not(:hover) .testimonial:nth-child(2).waypointEffect:after,
		.testimonial:hover:before,
		.testimonial:hover:after {
			opacity:0;
		}
		.flex:not(:hover) .testimonial:nth-child(2).waypointEffect .su-lightbox,
		.flex:not(:hover) .testimonial:nth-child(2).waypointEffect .su-lightbox img,
		.testimonial:hover .su-lightbox,
		.testimonial:hover .su-lightbox img {
			opacity:1;
		}
		.flex:hover {
			.testimonial:nth-child(1):hover + .testimonial:nth-child(2):after {
				opacity:0;
			}
			.testimonial:nth-child(1):not(:hover) + .testimonial:nth-child(2):not(:hover):before {
				opacity:0;
			}
		}
	}

	@media (max-width:768px) {
		.testimonial {
			min-height:360px;
			width:100%;
			&:not(:last-child) {
				margin-bottom:50px;
			}
		}
		.testimonial.waypointEffect .su-lightbox {
			&, & svg {
				opacity:1;
			}
		}
	}
}


#sectionHighlights {
	&.lazyloaded {
		.highlight {
			&:nth-of-type(1) {
				background-image:url('/wp-content/uploads/2019/06/cosmetic.jpg');
				background-position: 50% 20%;
			}
			&:nth-of-type(2) {
				background-image:url('/wp-content/uploads/2019/06/family-1.jpg');
				background-position: top;
			}
			&:nth-of-type(3) {
				background-image:url('/wp-content/uploads/2019/06/implant-1.jpg');
				background-position: top;
			}
		}
	}
	.highlight {
		//background-image:url('http://mcrae.dentalcmo.com/wp-content/uploads/2018/12/Placeholder.svg');
		background-size:cover;
		background-position:center;
		
		h4 {
			background-color:fade(@blue, 85);
			color:#fff;
			font-family:Century Gothic;
			font-size:2.5vw;
			font-weight:400;
			letter-spacing:.1em;
			margin:0 0 50px;
			padding:0 .25em;
			height:50px;
			.vertAlign;
			position:relative;
			text-align:center;
			flex-direction: column;
			height: 2em;
			b {
				color:inherit;
				font-family:inherit;
				text-transform:inherit;
				font-size:85%;
			}
			&:before,
			&:after {
				content:' ';
				display:block;
				position:absolute;
				width:100%;
				height:50px;
				top:100%;
				left:0;
			}
			&:before {
				background-color:fade(@lightblue, 85);
				.clip("-1px -1px, 50% 100%, calc(100% - -1px) -1px, calc(100% - -1px) calc(100% - -1px), -1px calc(100% - -1px)");
			}
			&:after {	
				background-color:fade(@blue, 85);
				.clip("-1px -1px, calc(100% - -1px) -1px, 50% 100%");
			}
			@media (max-width: 768px) {
				font-size: 25px;
			}
		}
		.highlightCopy {
			background-color:fade(@lightblue, 85);
			padding:25px;
			p {
				color:#fff;
			}
			.learn-more {
				background-color:#f2af46;
				display:block;
				max-width:145px;
				width:100%;
				margin:auto;
				color:#fff;
				padding:.2em;
				text-align:center;
				text-transform:uppercase;
			}
		}
		& {
			h4:before, .highlightCopy {
				opacity:0;
				.transition(opacity, .5s, @easing);
			}
		}
		&:hover {
			h4:before, .highlightCopy {
				opacity:1;
			}
		}
	}
}

#sectionChooseUs {
	position:relative;
	.padding-ends(~"calc(5vw - -50px)");
	
	.flex {
		max-width:1280px;
		margin:auto;
		.twofifth,
		.threefifth {
			.vertAlign;
		}
	}
	.twofifth {
		position:relative;
		z-index:10;
		@media (min-width:769px) {
			img {
				margin-right:-20%;
			}	
		}
	}
	.threefifth {
		position:relative;
		z-index:5;
		> div {
			width:100%;
		}
	}
	
	h2 {
		background-color:@blue;
		color:#fff;
		.clip("75px 0%, 100% 0%, calc(100% - 75px) 100%, 0% 100%");
		text-align:center;
		padding:.25em 75px;
		position:absolute;
		width:95%;
		left:0;
		right:0;
		margin:auto;
		top:-.75em;
	}
	#chooseCopy {
		background-color:@lightblue;
		padding:50px;
		min-height:450px;
		width:100%;
		.vertAlign;
		p {
			max-width:420px;
			margin:auto;
			color:#fff;
		}
	}
	
	#BL, #TR {
		background-color:fade(#b9e6f7, 30);
		width:25vw;
		height:25vw;
		position:absolute;
	}
	#BL {
		left:0;
		bottom:0;
		.clip("0 0, 0% 100%, 100% 100%");
	}
	#TR {
		top:0;
		right:0;
		.clip("0 0, 100% 0, 100% 100%");
	}
}

#sectionCallToAction {
	position:relative;
	
	margin-bottom:~"calc(5vw - -50px)";
	&.lazyloaded {
		&:before {
			background-image:url('/wp-content/uploads/2019/05/icon.svg');
		}
	}
	&:before {
		content:' ';
		display:block;
		position:absolute;
		width:100%;
		height:75%;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin:auto;
		max-width:650px;
		max-height:500px;
		
		background-position:center;
		background-repeat:no-repeat;
		background-size:contain;
		z-index:5;
	}
	> div {
		position:relative;
		z-index:10;
		.padding-ends(~"calc(5vw - -50px)");
	}
	h2 {
		text-align:center;
		color:@blue;
		font-size:36px;
		line-height:1.25;
		b {
			color:inherit;
			display: inline-block;
			font-family:inherit;
			letter-spacing:.5em;
			text-transform:uppercase;
		}
	}
	p {
		color:#6d6e71;
		font-size:18px;
	}
	.CTA {
		background-color:fade(#f2af46,80);
		color:#fff;
		max-width:250px;
		text-align:center;
		padding:.5em;
		font-size:22px;
		display:block;
		margin:auto;
		&:hover {
			background-color:#f2af46;
		}
	}
}

#footer {
	&.lazyloaded { background-image:url('/wp-content/uploads/2024/06/footer.jpg'); }
	background-size:cover;
	background-position:center;
	padding-top:15vw;
	padding-bottom:5vw;
	
	#contactus {
		max-width:768px;
		margin:auto;
		
		h2 {
			background-color:fade(#f2af46,80);
			text-align:Center;
			color:#fff;
			padding:.3em;
			margin:0;
		}
		input[type="submit"] {
			background-color:fade(#f2af46,80);
			color:#fff;
			max-width:250px;
			text-align:center;
			font-size:18px;
			display:block;
			margin:auto;
			height:40px;
			line-height:40px;
			border:none;
			&:hover {
				background-color:#f2af46;
			}
		}
		textarea {
			height:150px;
		}
	}
}

.wpcf7 .betterInput {
	position: relative;
	padding-top: 1.2em;
	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 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(#bae4f9, 88);
	}
	select {
		display:block;
		width:100%;
		margin-bottom:5px;
	}
	
	label {
		position: absolute;
		width:100%;
		top:0;
		transform: translateY(1.3em);
		left:0;
		pointer-events: none;
		color:#333;
		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:#333; // 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;
	}
}

#menu-footer-menu {
	.flex;
	flex-wrap:wrap;
	margin:0;
	li {
		display:block;
		text-align:left;
		&:after {
			display:none;
		}
		a {
			color:#fff;
			display:block;
			font-size:14px;
			&:hover {
				color:#f2d09b;
			}
			&[href="#"] {
				pointer-events:none;
			}
		}
		&.menu-item-807 ul {
			column-count:2;
			
			@media (max-width:768px) {
				column-count:1;
			}
		}
	}
	ul.sub-menu {
		padding:0;
		padding-left:0;
	}
	> li {
		margin-bottom:20px;
		> a {
			font-size:22px;
			font-weight:700;
			padding-bottom:5px;
			border-bottom:1px solid #fff;
			margin-bottom:5px;
			.padding-sides(10px);
			white-space:nowrap;
		}
	}
}

#colophon {
	max-width:100%;
	width:100%;
	padding:0;
	margin:0;
	overflow:visible;
}

#footer-widget-area {
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	position:relative;
}

#nav_menu-2 {
	position:relative;
	background-color:@lightblue;
	padding:25px 25px 75px;
	&:before, &:after {
		content:' ';
		display:block;
		position:absolute;
		width:100%;
		height:100%;
		background-color:@lightblue;
		.clip("0 0, 0% calc(100% - -1px), 100% calc(100% - -1px)");
		
		@media (max-width:1400px) {
			display:none;
		}
	}
	&:before {
		left:0;
		bottom:100%;
	}
	&:after {
		left:100%;
		bottom:0;
	}
}

#footerLogo {
	padding:25px;
	position:relative;
	a {
		display:block;
		float:right;
	}
	&:before {
		content:' ';
		display:block;
		position:absolute;
		width:100%;
		height:100%;
		right:0;
		bottom:100%;
		background-color:#fff;
		.clip("100% 0, 0% calc(100% - -1px), 100% calc(100% - -1px)");
		
		@media (max-width:1400px) {
			display:none;
		}
	}
}

#footerInfo {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	
	@media (max-width:1400px) {
		position: static;
		background-color: #1faae1;
		padding: 0 10px 10px;
	}
}
#socialMedia {
	text-align:center;

	a {
		display:inline-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;
	}
}
.copyright {
	padding-bottom:5px;
}
ul.nav > li > a {
	width: auto;
}
@media all and (max-width: 768px) {
	ul.nav > li > a {
		color: #084c80;
	}
	ul.nav > li > a:hover {
		background-color: #084c80;
		color: #fff;
	}
}

.alignright-video {
	@media(min-width:769px){width:50%;}
	@media(max-width:768px){width:100%;}	
}