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

@dark-blue: #02335b;
@light-blue: #31adf4;
@easing: cubic-bezier(0.77, 0, 0.175, 1);

header#masthead {
	position:relative;
	&:before {
		content:' ';
		display:block;
		position:absolute;
		height:100%;
		width:~"calc( (100% * (1 / 3)) / 2 )";
		min-width: 280px;
		background-color:#efefef;
		top:0;
		right:0;
		z-index:-1;
		box-shadow:inset 20px 0px 25px -15px fade(#000, 50);
	}
	#ctt {
		.vertAlign;
		svg {
			overflow:visible;
		}
	}
	#callus {
		.vertAlign;
		> * {
			flex:1;
			padding:25px;
			text-align:center;
		}
	}

	ul.nav {
		> li {
			position:relative;
			z-index:2;
			@media (min-width:769px) {
				&:before {
					content:' ';
					display:block;
					position:absolute;
					background-color:#e3e4e5;
					width:100%;
					height:100%;
					top:50%;
					.translateY(-50%);
					left:0;
					.transition(all, .5s, @easing);
					opacity:0;
				}
				&.active:before,
				&:hover:before {
					opacity:1;
					height:~"calc(100% - -20px)";
				}
				&:hover {
					z-index:3;
				}
			}
			> a {
				position:relative;
				z-index:5;
				.transition(color, .5s, @easing);
			}
		}
	}
}

@media (min-width:769px) {
	body {
		margin-top: 291px;
	}
	header#masthead {
		position: fixed;
		width: 100%;
		z-index: 100;
		background-color: #fff;
		top: 0;
		left: 0;
		
		#logo {
			padding: 25px 10px;
			img,svg { max-height: 150px; }
			&,img,svg {
				transition: 0.5s all ease;
			}
		}
		#callus {
			> * {
				transition: 0.5s all ease;
			}
		}
		
		&.smaller {
			#logo {
				padding: 5px 0;
				img,svg {
					max-height:75px;
				}
			}
			#callus {
				> * {
					padding: 10px;
				}
			}
		}
	}
	#responsiveButtons, #belowSliderLinks { display: none; }
}

@media (max-width:1580px) and (min-width:1101px) {
	body {
		margin-top: 15.7vw;
	}
}

@media (max-width:1100px) and (min-width:769px) {
	body {
		margin-top: calc(15.7vw - -30px);
	}
}

@media (max-width:1400px) and (min-width:769px) {
	header#masthead {
		&::before {
			min-width:180px
		}
		#callus {
			> * { padding: 10px; }
		}
	}
	#callusCopy { font-size: 20px; }
	#phonenumberCopy a {
		font-size: 24px;
	}
	.navbar {
		margin-right: 180px;
	}
}

@media (max-width:900px) and (min-width:769px) {
	header#masthead {
		#ctt {
			svg { width: 220px; }
		}
		ul.nav > li > a {
			text-transform: capitalize;
			padding: 0 7px;
		}
	}
	#callusCopy { font-size: 16px; }
}

@media (max-width:768px) {
	header#masthead {
		#logo {
			padding: 10px;
		}
		&::before, #ctt, #callus { display: none; }
	}
	#responsiveheader {
		padding: 0 10px;
	}
	#belowSliderLinks {
		margin-top: 10px;
		a {
			display: block;
			max-width: 300px;
			margin: 0 auto 10px;
			padding: 5px 8px;
			background: #31adf4; /* Old browsers */
			background: -moz-linear-gradient(top, @light-blue 0%, #2b9fd3 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top, @light-blue 0%, #2b9fd3 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom, @light-blue 0%, #2b9fd3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			color: #fff;
			font-weight: 700;
			text-align: center;
			text-transform: capitalize;
			border-radius: 5px;
			box-shadow: inset 2px 2px 30px -15px rgba(0,0,0,0.5);
			overflow: visible;
		}
	}
}

.menu-item {
	.form-search {
		.search-query {
			min-width: 150px;
		}
		#searchsubmit {
			height: 34px;
			margin: 0 -1px 0 0 !important;
			background-color: @light-blue;
			color: #fff;
			font-weight:700;
			border: 0;
		}
	}
}


#hero-container {
	position:relative;
	figure.video {
		video {
			max-height:945px;
		}
	}
	#overlay {
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		overflow:hidden;
		.vertAlign(@justifyContent:flex-start);
		padding:50px;
		> div {
			max-height:100%;
			text-align:right;
			svg {
				overflow:visible;
				display:block;
				width: auto;
				max-height: 20vw;
			}
			> a {
				display:inline-block;
				margin-top:5vw;
				margin-bottom:5vw;
				img {
					max-height:10vw;
				}
			}
			> img {
				display:block;
				max-height:15vw;
				margin:0 0 0 auto;
				cursor:pointer;
			}
		}
		
		@media (max-width:768px) {
			padding: 10px;
			> div {
				> a img {
					max-height: 15vw;
				}
				img {
					display:inline-block;
					max-height: 20vw;
					margin-left: 20px;
				}
			}
		}

		.transition(all, .5s, @easing);
	}
	&.playedWithSound {
		#overlay {
			opacity:0;
			pointer-events:none;
		}
	}
}

#sectionWelcome {
	margin-bottom:~"calc(7vw - -50px)";
	#welcometo {
		display: block;
		background-image:url('/wp-content/uploads/2019/10/welcome-to.svg');
		background-position:top center;
		color:#fff;
		.font(Montserrat, 30, 39px);
		letter-spacing:.5em;
		height:125px;
		.vertAlign;
		padding:15px;
		margin:0;
		@media (max-width:768px) { font-size: 26px; }
	}
	#practiceName {
		margin: 1em;
		text-align:center;
		img {
			margin: 10px 1em;
			@media (max-width:768px) {
				max-height: 25px;
			}
		}
	}
	#welcomeArea {
		display:grid;
		grid-template-columns: 1fr minmax(auto, 1300px) 1fr;
		grid-template-areas: ". copy npoo";
		> * {
			align-self: center;
		}
		.welcomeCopy {
			grid-area:copy;
			background-color:#e3e4e5;
			padding:25px;
			max-width:1300px;
			margin:auto;
			width:100%;
			h1 {
				margin-bottom: 20px;
			}
			p {
				font-size:22px;
				.margin-sides(auto);
				@media (max-width:768px) { font-size: 16px; }
			}
		}
	}
}

#npoo, .npo {
	justify-self:flex-end;
	margin:0 0 0 25px;
	border-top:1px solid @dark-blue;
	border-left:1px solid @dark-blue;
	border-bottom:1px solid @dark-blue;
	padding:25px 0 25px 25px;
	grid-area:npoo;
	> div, &.npo {
		background-color:@dark-blue;
		padding:20px;
		text-align:center;
		h4 {
			background-color: transparent;
			color:#fff;
			.font(Montserrat, 300, 24px);
			text-align:center;
			span {
				display:block;
			}
		}
		.textwidget {
			background-color: transparent !important;
			padding: 0;
		}
		hr {
			border-top:2px solid #fff;
			max-width:100px;
			.margin-sides(auto);
		}
		p {
			color:#fff;
			font-size:22px;
			text-align:center;
			font-family: Montserrat;
		}
		small {
			display: block;
			font-size: 14px;
		}
		strong, b { color: #fff; }
		h5 {
			color:#fff;
			.font(Montserrat, 600, 24px);
			letter-spacing:.1em;
			text-align:center;
			text-transform:uppercase;
			+ a {
				color:#fff;
				.font(Montserrat, 600, 20px);
				display:inline-block;
				border:1px solid #fff;
				padding:.3em 1em;
			}
		}
		h6 {
			color:#fff;
			.font(Montserrat, 600, 18px);
			letter-spacing:.1em;
			text-align:center;
			text-transform:uppercase;
		}
	}
}

#npof {
	background: rgb(49,173,244);
	margin: 0 300px;
	
}

#npof h2{
	text-align: center;
	padding-top:5px;
}

div#frm_field_2_container.frm_form_field{
	text-align:center;
}
div#frm_field_3_container.frm_form_field{
	text-align:center;
}

div#frm_field_4_container.frm_form_field{
	text-align:center;
}


#npof label{
	text-align:center;
	padding: 20px;
}

#npof textarea{
	width: 80%;
}

#npof input{
	width: 80%;
}

#npof .wpcf7 input[type=submit] {
	color:white !important;
}

#npof .frm_submit{
	text-align:center;
}

#npof button.frm_button_submit{
	background: #02335b;
}

@media (max-width:1100px) {
	#sectionWelcome #welcomeArea {
		display:block;
	}
	
	#welcomeArea img {
		height: 250px;
		width: 200px;
	}
	
	#npof {
		margin:0 25px;
	}
}

#sectionWelcome{
	margin-bottom:30px;
}

#sectionTestimonials {
	.margin-ends(~"calc(7vw - -50px)");

	h2 {
		color:@light-blue;
		.font(Montserrat, 300, 36px);
		letter-spacing:.2em;
		text-align:center;
		text-transform:uppercase;
		margin-bottom:75px;
		@media (max-width:768px) { font-size: 26px; }
		b {
			color:@dark-blue;
			.font(@size:1.75em);
			text-transform:inherit;
		}
	}

	.shortWideBack {
		background-image:url('/wp-content/uploads/2019/10/testimonials.jpg');
		> div {
			overflow:visible;
		}
	}

	#testimonials {
		.flex;
		margin-top:-100px;
		
		.testimonial {
			background-position:center;
			background-size:cover;
			max-height:420px;
			height:56.25vw;
			.transition(all, .5s, @easing);
			.pseudoBefore;

			&:nth-child(1):before {
				background-color:#065e8b
			}
			&:nth-child(2):before {
				background-color:@dark-blue;
			}
			&:nth-child(3):before {
				background-color:@light-blue;
			}
			.su-lightbox {
				display:block;
				width:~"calc(100% - 50px)";
				height:~"calc(100% - 50px)";
				margin:25px;
				border:1px solid #fff;
			}
			h4 {
				color:#fff;
				.font(Montserrat, 300, 48px);
				position:absolute;
				margin:auto;
				left: 0;
				right: 0;
				text-align: center;
				white-space:pre;
				height:50px;
				.vertAlign;
			}
		}

		.testimonial {
			flex:1;
			.transition(all, .5s, @easing);
			&:before {
				opacity:.7;
				.transition(opacity, .5s, @easing);
			}
			h4 {
				.transition(all, .5s, @easing);
				top:50%;
				.translateY(-50%);
				.rotate(-90deg);
				@media (max-width:768px) { font-size: 28px; }
			}
		}

		&:not(:hover) .testimonial.active,
		.testimonial:hover {
			flex:5;
			&:before {
				opacity:0;
			}
			h4 {
				top:~"calc(100% - 25px - 50px)";
				.translateY(0);
				.rotate(0);
				width:100%;
			}
		}
		@media (max-width:768px) {
			flex-direction: column;
			max-width:450px;
			margin-left: auto;
			margin-right: auto;
			.testimonial {
				height: 230px;
				h4 {
					.translateY(0);
					.rotate(0deg);
				}
			}
		}
		.testimonial {
			&:nth-of-type(1) { background-image: url('/wp-content/uploads/2019/12/joan.jpg'); }
			&:nth-of-type(2) { background-image: url('/wp-content/uploads/2019/12/jennifer.jpg'); }
			&:nth-of-type(3) { background-image: url('/wp-content/uploads/2019/12/george.jpg'); }
		}
	}
}

@media (max-width:768px) {
	#sectionTestimonials #testimonials .testimonial .su-lightbox {
	height:125px;
}
}


#sectionHighlights {
	.flex;
	margin:~"calc(7vw - -50px)" 25px;

	#cosmetic {
		background-image:url('/wp-content/uploads/2019/10/cosmetic.jpg');
	}
	#implants {
		background-image:url('/wp-content/uploads/2019/10/implants.jpg');
	}
	#restoration {
		background-image:url('/wp-content/uploads/2019/10/restoration.jpg');
	}

	.highlight {
		background-position:center;
		background-size:cover;
		overflow:hidden;
		padding:10vw 25px 25px;

		.highlightContainer {
			position:relative;
			&:before {
				content:' ';
				display:block;
				position:absolute;
				width:1500px;
				height:1500px;
				background-color:fade(#194f90, 70);
				border-radius:50%;
				top:-150px;
				z-index:-1;
			}
		}
		.highlightCopy {
			width:~"calc(100vw * (1 / 3))";
			margin:0 0 0 auto;
			text-align:center;
			p {
				color:#fff;
				opacity: 0;
				transition: 0.5s all ease;
			}
			> a {
				display:inline-block;
				margin-top:25px;
			}
		}
		h2 {
			color:#fff;
			.font(Montserrat, 300, 36px);
			text-align:center;
			max-width: 640px;
			margin: 0 0 25px auto;
			height:75px;
			.vertAlign;
			transform-origin: bottom left;
			b {
				color:inherit;
				text-transform:uppercase;
				letter-spacing:.2em;
			}
		}
	}

	.highlight {
		flex:1;
		box-shadow:5px 5px 15px 0px fade(#000, 0);
		.transition(all, .5s, @easing);
		.highlightContainer {
			.transition(all, .5s, @easing);
			.translateY(~"calc(100% - 75px)");
			&:before {
				.transition(all, .5s, @easing);
				left:100%;
				.translateX(-50%);
			}
		}
		h2 {
			.transition(all, .5s, @easing);
			.rotate(-20deg);
		}
	}

	&:not(:hover) .highlight.active,
	.highlight:hover {
		margin-bottom:-50px;
		flex:3;
		box-shadow:5px 5px 15px 0px fade(#000, 50);
		.highlightContainer {
			.translateY(0);
			&:before {
				left:75%;
				.translateX(-50%);
			}
		}
		.highlightCopy {
			p {
				opacity: 1;
			}
		}
		h2 {
			.rotate(0);
		}
	}
	
	@media (max-width:1440px) {
		.highlight {
			h2 {
				font-size: 26px;
				&, b { letter-spacing: -1px; }
			}
			.highlightCopy {
				p {
					line-height: 1.4em;
				}
				> a > img {
					max-height:55px;
				}
			}
		}
	}
	@media (max-width:768px) {
		flex-direction: column;
		.highlight {
			margin-bottom: 0 !important;
			.highlightContainer {
				.translateY(0);

				&::before {
					left: 75% !important;
					.translateX(-50%);
				}
				
				h2 {
					.rotate(0);
				}
				
				.highlightCopy {
					width: 100%;
					p {
						opacity: 1;
					}
				}
			}
		}
	}
}

#sectionCallToAction {
	.margin-ends(~"calc(7vw - -50px)");
	&.shortWideBack > div {
		overflow:visible;
	}
	h3 {
		text-align:center;
		margin-bottom:25px;
		
		img {
			display: block;
			margin: 0 auto 20px;
			@media (max-width:768px) { width:300px; max-width:100%; }
		}
	}
	p {
		text-align:center;
		.font(Montserrat, 300, 20px);
	}
}

#sectionKois {
	.margin-ends(~"calc(7vw - -50px)");
	overflow:hidden;
	
	h2 {
		.font(Montserrat, 300, 54px);
		position:relative;
		/*display:grid;*/
		text-align:center;
		grid-template-columns:1fr auto 1fr;
		grid-gap:25px;
		text-transform:none;
		margin-bottom:25px;
		@media (max-width:768px) { font-size: 24px; }
		&:before,
		&:after {
			content:' ';
			display:block;
			height:1px;
			background-color:#000;
			margin:auto 0;
		}
		b {
			color:#a3916c;
			.font(Georgia, 400, 1.25em);
			text-transform:uppercase;
		}
	}
	#koisCont {
		.flex;
		overflow:hidden;
		@media (max-width:768px) { flex-direction: column; }
		figure {
			margin:0;
			flex:2;
			z-index: 1;
		}
		#koisSide {
			position:relative;
			flex:1;
			.vertAlign;
			padding:25px;
			svg {
				position:absolute;
				top:50%;
				.translateY(-50%);
				left:0;
				overflow:visible;
			}
			img {
				position:relative;
			}
		}
	}
}

#sectionDifference {
	.margin-ends(~"calc(7vw - -50px)");
	> div {
		background-color:@light-blue;
		position:relative;
		&:before {
			content:' ';
			display:block;
			position:absolute;
			height:~"calc(100% - 80px)";
			width:~"calc(100% - 80px)";
			top:0;
			left:0;
			right:0;
			bottom:0;
			margin:auto;
			border:1px solid #fff;
			pointer-events:none;
		}
	}
	h2 {
		color:#fff;
		.font(Montserrat, 300, 40px);
		letter-spacing:.1em;
		text-align:center;
	}
	#testimonial_rotator_wrap_820,
	#testimonial_rotator_820 {
		position:unset;
	}
	.testimonial_rotator_quote {
		max-width:720px;
		margin:auto;
		color:#fff;
	}
	.testimonial_rotator_prev, .testimonial_rotator_next {
		width:55px;
		height:66px;
	}
	.testimonial_rotator_prev {
		background-image:url('/wp-content/uploads/2019/10/leftArrow.svg');
		left:10px;
	} .testimonial_rotator_next {
		background-image:url('/wp-content/uploads/2019/10/rightArrow.svg');
		right:10px;
	}
}

#footer {
	background-image:url('/wp-content/uploads/2019/10/footer.jpg');
	overflow:hidden;
	
	#footerInfo {
		.vertAlign(flex-end);
		position:relative;
		z-index:10;
		> div {
			margin-bottom:50px;
			width:100%;
			background-color:#fff;
			padding:20px;
			.clip("0 0, calc(100% - 50px) 0%, 100% 100%, 0% 100%");
		}
		
		.footerInfo {
			.vertAlign;
			svg {
				fill:#f4cd34;
				width:25px;
				height:32px;
				margin-right:10px;
			}
			a, div, pre {
				color:@dark-blue;
				.font(Montserrat, 300, 28px);
				@media (max-width:768px) { font-size: 18px; }
			}
			pre {
				white-space:normal;
			}
		}
		
	}
	
	.footerContact {
		position:relative;
		z-index:5;
		padding:50px;
		@media (max-width:768px) { padding: 20px; }
		&:before {
			content:' ';
			display:block;
			position:absolute;
			background-color:fade(#194f90, 70);
			width:1500px;
			height:1500px;
			border-radius:50%;
			left:-100px;
			top:50%;
			.translateY(-50%);
			z-index:0;
		}
		> * {
			position:relative;
			z-index:1;
		}
		
		#contactus {
			color:#fff;
			.font(Montserrat, 300, 32px);
			letter-spacing:.1em;
			text-align:center;
			text-transform:uppercase;
			position:relative;
			height:108px;
			margin-bottom:25px;
			.vertAlign;
			&:before {
				content:' ';
				display:block;
				position:absolute;
				width:960px;
				height:100%;
				top:0;
				right:-50px;
				background-color:fade(#0da0a0, 70);
				z-index:0;
				.clip("50px 0%, 100% 0, 100% 100%, 0% 100%");
			}
			span {
				position:relative;
				z-index:1;
			}
			b {
				color:#000;
				.font(inherit, 900, 1.5em);
				text-transform:inherit;
			}
		}
		.wpcf7-form-control-wrap {
			padding: 0;
			width:100%;
			textarea { height: 125px; }
		}
		.betterSubmit {
			background-color:#0db9b0;
			padding:10px;
			max-width:200px;
			margin:25px 0 0 auto;
			input {
				border:1px solid #fff;
				margin:0;
				background:none;
				font-size:16px;
				height:unset;
				padding:5px;
				color:@dark-blue;
			}
		}
		
		#socialMedia {
			text-align:center;
			.vertAlign;
			margin-top:25px;

			a {
				display:block;
				line-height: 1;
				margin:8px;
				background-color:#0db9b0;
				border-radius:50%;
				width:50px;
				height:50px;
				.vertAlign;
			}
			svg {
				height:25px;
				width:25px;
				path {
					fill:#fff;
					fill-opacity:.8;
					transition:fill-opacity .3s;
					-webkit-transition:fill-opacity .3s;
				}
			}
			a:hover svg path {
				fill-opacity:1;
			}
		}
		
	}
}

.wpcf7 form > p {
	position: relative;
	padding-top: 1.2em;
	border-bottom: 2px solid #fff;
	margin-bottom:10px;
	font-size:16px;
	font-family:Avenir, Nunito;
	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;
	}
	
	input, select, textarea {
		color:#313131 !important;
		font-size:inherit;
		font-weight:inherit;
		font-family:Montserrat;
		background-color: fade(#fff,50);
	}
	select {
		display:block;
		width:100%;
		margin-bottom:5px;
	}
	
	label {
// 		position: absolute;
		width:100%;
// 		top:0;
// 		transform: translateY(1.2em);
// 		left:0;
 		margin: 10px 0 0;
		pointer-events: none;
		color:#fff;
		font-size:inherit;
		font-weight:inherit;
		font-family:Montserrat;
		.transition(.3s, all, @easing);
	}
	.req {
		color:#FF4136;
		.transition(.3s, color, @easing);
	}
	
// 	*:focus:not(:placeholder-shown) + label,
// 	*:focus + label,
// 	*:focus:not(:placeholder-shown) + label .req,
// 	*:focus + label .req {
// 		color:@light-blue; // 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;
// 	}
}

.npo { 
	margin-left: 0;
	.widget-title {
		min-height: 0;
	}
}

#secondary {
	.wpcf7 form>p { padding-top: 0; }
	.widget_text:not(.npo) {
		strong, b, a { color: inherit; }
	}
	.writeReview {
		svg {
			margin: 0 10px;
			path {
				fill: #fff;
			}
		}
	}
}

#betterFooter;

.referDoctor {
	.wpcf7-submit {
		background-color: @dark-blue !important;
		color: #fff !important;
		font-weight: 700;
		max-width:200px;
		border: 0 !important;
		&:hover {
			background-color: @light-blue !important;
			color: #fff !important;
		}
	}
}

a[href^="tel"] { white-space: nowrap; }

.dcmoBA.side {
	grid-gap: 10px;
	max-width:800px;
	margin: 0 auto 10px;
	
	.before, &.posterText .poster {
		&::before {
			background-color:fade(#194f90,50);
		}
	}
	
	.after {
		&::before {
			background-color:fade(#0da0a0,50);
		}
	}
}

.btn {
	background-color: @light-blue;
    color: #fff !important;
    font-size: 24px;
}

.inlineReview {
	width: 50%;
    min-width: 270px;
    background: #31adf4;
    color: #fff;
	p { text-align: center; }
	p, cite {
		font-size: 20px;
		color: inherit;
	}
	cite {
		display: block;
		text-align:right;
		font-weight: 700;
	}
}

#covid-19 {
	background-color: red;
	text-align: center;
	display: block;
	padding: 10px;
	position: absolute;
	top: 100%;
	.transition(all, .5s, @easing);
}