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

@blue: #54C0E8;
@dark-blue : #154252;
@teal: #4B858E;

@easing: cubic-bezier(0.76, 0, 0.24, 1);

#leftOfMenu;

header#masthead {
	background-color: #154252;
    min-height: 125px;
	body:not(.home) & {
		z-index:1000;
	}
	@media (min-width:769px) {
		position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	z-index: 999;
    	transition: all .3s;
		> .container {
			display:grid;
			min-height:125px;
			&:first-child { display:none; }
			&:before, &:after { display:none; }
			#responsiveheader {
				position:relative;
				z-index:10;
				pointer-events:auto;
				overflow:visible;
				display:grid;
				align-items:end;
				justify-items:start;
				@media (min-width:1350px) {
					width:100%;
				}
				height:100%;
				> a:first-child {
					color:@dark-blue;
					display:block;
					background-color:fade(@blue, 90);
					border:1px solid @blue;
					.font(Roboto, 400, 24px);
					height:unset;
					letter-spacing:.1em;
					margin:0;
					padding:.25em 0;
					text-align:center;
					width:12em;
					.vertAlign;
					@media (min-width:1080px) {
						.translateY(50%);
					}
					@media (max-width:1079px) {
						margin-top:5px;
					}
					&:hover {
						background-color:fade(@dark-blue, 90);
						color:@blue;
					}
					&:before {
						content:' ';
						display:block;
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 30' width='28px' height='30px'%3E%3Cpath d='M0,9.1A11.3,11.3,0,0,1,1,4.7a14.3,14.3,0,0,1,1.4-2L4.9.5A1.9,1.9,0,0,1,7.7.7,11.2,11.2,0,0,1,10.1,4a6,6,0,0,1,1,2.3,2.7,2.7,0,0,1-1.1,3L8.1,10.9a2.1,2.1,0,0,0-.7,2,8.2,8.2,0,0,0,1.7,3.5,27.3,27.3,0,0,0,3.2,3.7A7.3,7.3,0,0,0,15.2,22a2.1,2.1,0,0,0,2.5-.5l1.9-1.8a3.1,3.1,0,0,1,3.1-.3,7.6,7.6,0,0,1,2.5,1.8l1.3,1a8.5,8.5,0,0,1,1.4,1.9,1.8,1.8,0,0,1-.4,1.9,14.8,14.8,0,0,1-3.6,3,10.7,10.7,0,0,1-3.6,1,12.4,12.4,0,0,1-5.7-1.1,22.1,22.1,0,0,1-4.5-3l-2.2-2L4.8,20.3a22.6,22.6,0,0,1-3.1-4.9A16.6,16.6,0,0,1,.3,11.7Z' fill-rule='evenodd' fill='%23fff'/%3E%3C/svg%3E");
						background-repeat:no-repeat;
						background-size:contain;
						background-position:center;
						height:1.5em;
						width:2em;
					}
				}
			}

			@media (min-width:1080px) {
				grid-template-columns:auto 1fr auto;
			}
			@media (max-width:1079px) {
			}

		}
	}
	@media (max-width:768px) {
		#logo {
			padding: 10px;
		}
		#responsiveheader {
			a:nth-child(1) { display:none !important; }
		}
		.navbar ul.nav {
			background-color: @dark-blue;
		}
	}

	#logo {
		//background-color:#fff;
		position:relative;
		z-index:5;
		&:before,
		&:after {
			content:' ';
			display:block;
			position:absolute;
			top:0;
			left:0;
			z-index:-1;
			.clip("0 0, 0% 100%, 100% 0");
			width: 0;
			height: 0;
			border-top: 700px solid #fff;
			border-top: ~"min(500px, 25vw)" solid #fff;
			border-right: 625px solid transparent;
			border-right: ~"min(500px, 25vw)" solid transparent;
			.translateX(-25px);
		}
		&:before {
			.clip("0 0, 100% 0, 100% 125px, 0 125px");
		}
		&:after {
			opacity:.9;
			body:not(.home) & { display:none !important; }
		}
		a {
			.transition(none);
		}

		@media (min-width:1331px) {
			&:before, &:after { .translateX(~"calc((100vw - 1280px - 50px) / -2 - 25px)"); }
			a { .translateX(~"calc((100vw - 1280px - 50px) / -2)"); }
		}

		@media (min-width:1080px) {
			margin-bottom:-75px;
			img {
				height:150px;
				max-width:20vw;
				object-fit: contain;
				object-position: top center;
			}
		}

		@media (max-width:1079px) {
			background-color:#fff;
			width:100vw;
			&:before, &:after { display:none; }
			img {
				height:unset;
			}
		}
	}

	.searchLi {
		#menuSearch(@height:50px, @mainColor:#fff, @backgroundColor:#255B68, @iconWidth:44px);
		input { color:#fff; }
		a i { color:@blue; }
	}

	@media (max-width:768px) {
		#responsiveheader {
			margin-top:25px;
		}
	}

}

#hero-container {
	position:relative;
	video {
		max-height:~"min(56.25vw, 1280px)";
	}
	#welcome {
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		.vertAlign(flex-end);
		.transition(all, .5s, @easing);
		h4 {	
			background-color:fade(@dark-blue, 80);	
			color:@blue;
			.font(Walkway, 700, 64px);
			font-size:clamp(32px, 6vw, 64px);
			letter-spacing:.1em;
			margin:0;
			text-align:center;
			text-transform:uppercase;
			width:100%;
			.blur(10px);
			@media (max-width:768px) {
				font-size: 20px;
				font-size: clamp(16px,6vw,30px);
			}
			b {
				.inherit();
				.font(@size:2em);
			}
			small {
				color:#fff;
				.font(~"EB Garamond", 600, 1.6em, 1, italic);
				text-transform:none;
			}
		}
	}
	#overlay {
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		background-color:#fff;
		opacity:.8;
		-webkit-clip-path: url(#my-clip-path);
		clip-path: url(#my-clip-path);
		.blur(10px);
		.transition(all, .5s, @easing);

		.svg {
			position: absolute;
			width: 0;
			height: 0;
		}
	}
	#playWithSound {
		position:absolute;
		top:0;
		left:0;
		bottom:0;
		right:25%;
		margin:auto;
		z-index:10;
		max-height: 25%;
		width: auto;
		height: 100%;
		cursor: pointer;
		.transition(all, .5s, @easing);
	}
	
	&.playedWithSound {
		#overlay, #playWithSound, #welcome {
			opacity:0;
			pointer-events:none;
		}
	}
}

#sectionWelcome {
	margin-top:25px;
	padding-top:25px;
	.pseudoBeforeAfter;
	&:before, &:after {
		background-size:contain;
		background-repeat:no-repeat;
	}
	&:before {
		background-image:url('/wp-content/uploads/2020/06/welcome-left.svg');
		background-position:bottom left;
		max-width:250px;
		max-height:385px;
	}
	&:after {
		background-image:url('/wp-content/uploads/2020/06/welcome-right.svg');
		background-position:top right;
		max-width:440px;
		max-height:640px;
		left:unset;
		right:0;
		top:unset;
		bottom:0;
	}
	h1 {
		color:@dark-blue;
		.font(~"Walkway", 700, 42px);
		font-size:clamp(28px, 6vw, 42px);
		letter-spacing:.1em;
		margin-bottom:25px;
		padding:0 25px;
		text-align:center;
		text-transform:uppercase;
		@media (max-width:768px) {
			font-size: 20px;
			font-size: clamp(18px,6vw,32px);
		}
		b {
			.inherit();
			.font(@size:1.375em);
		}
		small {
			color:@blue;
			.font(~"EB Garamond", 600, .9em, 1, italic);
			text-transform:none;
		}
	}
	.shortWideBack {
		> div {
			max-width:975px;
		}
	}
}

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

	h2 {
		color:@teal;
		.font(~"Walkway", 700, 54px);
		font-size:clamp(32px, 6vw, 54px);
		letter-spacing:.1em;
		margin-bottom:25px;
		text-align:center;
		text-transform:none;
		b {
			.inherit(@color: @dark-blue, @transform:uppercase);
			.font(@size:1.25em);
		}
	}

	#testimonials {
		@media (min-width:769px) {
			.vertAlign;
		}
	}

	.testimonial {
		position:relative;
		@media (min-width:769px) {
			.margin-sides(-25px);
			&:nth-child(2) {
				z-index:2;
			}
		}
		.su-lightbox {
			border-width:15px;
			border-style:solid;
			border-radius:50%;
			display:grid;
			grid-template-columns:1fr;
			grid-template-rows:1fr;
			max-width:400px;
			overflow:hidden;
			margin-bottom:10px;
			cursor:pointer;
			position:relative;
			@media (max-width:768px) { margin:auto; }
			&:before {
				content:' ';
				display:block;
				position:absolute;
				width:100%;
				height:100%;
				top:0;
				left:0;
				background-color:#fff;
				border-radius:50%;
				overflow:hidden;
				pointer-events:none;
			}
			> * {
				grid-column:1 / span 1;
				grid-row:1 / span 1;
			}
			img {
				object-fit:cover;
				object-position:center;
			}
			svg:last-child {
				align-self:end;
				justify-self:center;
				margin-bottom:20px;
			}
		}
		h4 {
			.font(~"Walkway", 700, 36px);
			letter-spacing:.1em;
			text-align:center;
			text-transform:uppercase;
		}
		& {
			.su-lightbox {
				border-color:#BBDCDD;
				.transition(all, .5s, @easing);
				&:before {
					opacity:.5;
					.transition(all, .5s, @easing);
				}
				svg:last-child path {
					fill:#BBDCDD;
					.transition(all, .5s, @easing);
				}
			}
			h4 {
				color:@teal;
				.transition(all, .5s, @easing);
			}
		}
		& .su-lightbox:hover {
			border-color:@dark-blue;
			&:before {
				opacity:0;
			}
			svg:last-child path {
				fill:@dark-blue;
			}
			+ h4 {
				color:@dark-blue;
			}
		}
	}

}

#sectionHighlights {
	background-image:url('/wp-content/uploads/2020/06/highlight.jpg');
	@media (max-width:768px) {
			background-attachment:fixed !important;
	}
	padding-top:~"calc(7vw - -50px)";
	#highlights {
		padding:25px;
		.pseudoBeforeAfter;
		@media (min-width:769px) {
			&:before {
				background-color:fade(@dark-blue, 80);
				@media (min-width:1280px) {
					.clip("0 0, 40% 0%, 60% 100%, 0% 100%");
				}
				@media (max-width:1279px) {
					.clip("0 0, 50% 0%, 50% 100%, 0% 100%");
				}
			}
			&:after {
				background-color:fade(#E8E2C5, 80);
				@media (min-width:1280px) {
					.clip("40% 0, 100% 0, 100% 100%, 60% 100%");
				}
				@media (max-width:1279px) {
					.clip("50% 0, 100% 0, 100% 100%, 50% 100%");
				}
			}
		}

		display:grid;
		@media (min-width:769px) {
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(3, 1fr);
		}
		grid-gap:25px;
		.highlight {
			display:grid;
			align-items:center;
			justify-items:center;
			h2 {
				margin:0;
				.font(Walkway, 700, 34px);
				letter-spacing:.1em;
				text-transform:uppercase;
				text-align:center;
				position:relative;
				height:100%;
				width:100%;
				padding:25px;
				.vertAlign;
				flex-direction:column;
				&:after {
					content:' ';
					display:block;
					position:absolute;
					height:1px;
					width:100%;
					left:0;
					right:0;
					bottom:0;
					margin:auto;
				}
				svg {
					display:block;
					fill:currentcolor;
					margin:0 auto 10px;
					max-height:100px;
				}
			}
			.highlight-copy {
				.max-width(720px);
				p {
					color:#fff;
				}
			}
			.learn-more {
				color:#fff;
				.font(Walkway, 700, 24px);
				letter-spacing:.1em;
				text-transform:uppercase;
				text-align:center;
				img {
					display:block;
					margin:0 auto 10px;

				}
			}
			@media (min-width:769px) {
				&:not(.active) {
					grid-template-columns:1fr;
					grid-template-rows:1fr;
					> * {
						grid-column:1;
						grid-row:1;
					}
					h2 {
						color:@dark-blue;
						cursor:pointer;
						&:after {
							background-color:@dark-blue;
						}
					}
					.highlight-copy, .learn-more {
						opacity:0;
						pointer-events:none;
						.transition(none);
					}
				}
				&.active {
					grid-column:1;
					grid-row:1 / span 3;
					grid-template-columns:1fr;
					grid-template-rows:repeat(3, 1fr);
					grid-gap:25px;
					h2 {
						color:#fff;
						&:after {
							background-color:#fff;
							max-width:70%;
							opacity:1;
						}
					}
					.highlight-copy, .learn-more {
						opacity:1;
						.transition(all, .5s, @easing);
					}
				}
				&:nth-child(1).active {
					~ .highlight:nth-child(2) h2:after {
						max-width:100%;
					}
					~ .highlight:nth-child(3) h2:after {
						max-width:85%;
						left:unset;
					}
					~ .highlight:nth-child(4) h2:after {
						opacity:0;
					}
				}
				&:nth-child(1):not(.active) {
					h2:after {
						max-width:100%;
					}
					~ .highlight:nth-child(2).active {
						~ .highlight:nth-child(3) h2:after {
							max-width:85%;
							left:unset;
						}
						~ .highlight:nth-child(4) h2:after {
							opacity:0;
						}
					}
					~ .highlight:nth-child(2):not(.active) {
						h2:after {
							max-width:85%;
							left:unset;
						}
						~ .highlight:nth-child(3).active {
							~ .highlight:nth-child(4) h2:after {
								opacity:0;
							}
						}
						~ .highlight:nth-child(3):not(.active) {
							h2:after {
								opacity:0;
							}
						}
					}
				}
			}
		}
		
		@media (max-width:768px) {
			padding:0;
			grid-gap:0;
			.highlight {
				&:nth-child(odd) { background-color:fade(@dark-blue, 80); }
				&:nth-child(even) {
					background-color:fade(#E8E2C5, 80);
					.highlight-copy {
						p {
							color:@dark-blue;
						}
					}
				}
				.highlight-copy {
					padding:0 25px;
				}
				padding-bottom:25px;
				h2 {
					color:#fff;
				}
			}
		}
	}
}

#sectionCallToAction {	
	margin-top:7vw;
	> div {
		padding-bottom:0;
	}
}

#contactus {
	.max-width(1080px);
	padding: 50px;
	background-image:url('/wp-content/uploads/2020/06/footer.jpg');
	background-position:top center;
	border-radius:50px 75px;
	.margin-ends(~"calc(7vw - -50px)");
	
	.pseudoBefore;
	&:before {
		background-color:fade(#fff, 25);
		.blur(10px);
	}

	h2 {
		color:@dark-blue;
		.font(Walkway, 700, 34px);
		letter-spacing:.1em;
		margin:0 0 10px;
		text-transform:uppercase;
		text-align:center;
	}
	textarea {
		height: 30px;
	}
}

.wpcf7 .better-input {
	
	@media (min-width: 769px) {
		.flex.extraspace>.half {
			width: ~"calc(50% - (50px / 2))";
		}
	}
	
	.wpcf7-form-control-wrap {
		position: relative;
		border-bottom: 1px solid @dark-blue;
		margin-bottom:10px;
		display:block;
		padding-top: 1.2em;
		color:#fff;
		.font(~"Open Sans", 400, 16px);
	}
	.betterInput {
		.inherit();
		.font();

		*::placeholder { color: rgba(0,0,0,1); opacity: 0.7; }
		*:-ms-input-placeholder { color: rgba(0,0,0,1); }
		*::-ms-input-placeholder { color: rgba(0,0,0,1); }
		*:-moz-input-placeholder { color: rgba(0,0,0,1); }
		*::-moz-input-placeholder { color: rgba(0,0,0,1); }

		* {
			color:#313131;
			border:0;
			padding: 1px 2px;
			resize:none;
		}
		label {
			.transition(.3s, all, @easing);
		}

		input, select, textarea {
			color:@dark-blue;
			font-size:inherit;
			font-weight:inherit;
			font-family:inherit;
		}
		textarea {
			height:150px;
		}
		select {
			display:block;
			width:100%;
			margin-bottom:5px;
		}

		label {
			position: absolute;
			width:100%;
			top:0;
			transform: translateY(1.6em);
			left:0;
			pointer-events: none;
			color:@dark-blue;
			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:@dark-blue; // Inputting
			display: none;
		}
		*:not(:placeholder-shown) + label,
		*:not(:placeholder-shown) + label .req {
			color:#ddd; // Inputted
			display: none;
		}
		*:focus + label,
		*:not(:placeholder-shown) + label {
			transform: translateY(0);
			font-size: .8em;
			display: none;
		}
	}
	input[type="submit"] {
		border:none;
		display:block;
		margin:25px 0 0 auto;
		height: 2em;
		width: 10em;
		.font(~"Open Sans", 400, 18px);
		letter-spacing:.1em;
		background-color:@blue;
		color:@dark-blue;
		&:hover {
			background-color:@dark-blue;
			color:@blue;
		}
	}
}

#footer {
	background-image:url('/wp-content/uploads/2020/06/footer.jpg');
	display:grid;
	@media (min-width:1280px) {
		grid-template-columns:1fr 1fr 1fr;
		.footer-info:nth-child(1) { grid-column:1; }
		.footer-info:nth-child(2) { grid-column:3; }
		.footer-logo:nth-child(3) { grid-column:2; grid-row:1; }
	}
	@media (max-width:1279px) and (min-width:769px) {
		grid-template-columns:1fr 1fr;
		grid-gap:25px;
		.footer-logo:nth-child(3) { grid-column:1 / span 2; }
	}
	overflow:hidden;

	> div {
		padding:25px;
	}

	.footer-info {
		.vertAlign(flex-start);
		position:relative;
		&:before {
			content:' ';
			display:block;
			position:absolute;
			width:732px;
			height:1065px;
			background-size:contain;
			background-position:center;
			top:0;
			z-index:1;
		}
		&:nth-child(1):before {
			right:0;
			@media (min-width:1280px) {
				background-image:url('/wp-content/uploads/2020/06/triangle-1.svg');
			}
			@media (max-width:1279px) {
				background-color:fade(@dark-blue, 75);
			}
		}
		&:nth-child(2):before {
			left:0;
			@media (min-width:1280px) {
				background-image:url('/wp-content/uploads/2020/06/triangle-3.svg');
			}
			@media (max-width:1279px) {
				background-color:fade(@dark-blue, 75);
			}
		}
		> div {
			.vertAlign;
			flex-direction:column;
			position:relative;
			z-index:2;
			padding-top:4vw;
		}
		svg {
			fill:#fff;
			height:65px;
			width:auto;
			margin-bottom:20px;
		}
		a, pre {
			color:#fff;
			.font(Roboto, 700, 22px);
			letter-spacing:.1em;
			margin:0;
			text-align:center;
			text-transform:uppercase;
		}
		> a {
			font-size:32px;
		}
		pre {
			white-space:pre-wrap;
		}
	}
	.footer-logo {
		text-align:center;
		position:relative;
		&:before {
			content:' ';
			display:block;
			position:absolute;
			width:1920px;
			height:1270px;
			background-size:contain;
			background-position:center;
			top:0;
			left:50%;
			.translateX(-50%);
			z-index:1;
			background-image:url('/wp-content/uploads/2020/06/triangle-2.svg');
		}
		img {
			position:relative;
			z-index:2;

			@media (min-width:1280px) {
				max-width:720px;
				width:100%;
			}
			@media (max-width:1790px) {
				max-width:540px;
				width:50%;
			}
			padding-top:8vw;
			padding-bottom:9vw;
		}
	}
}
#social-media {
	text-align:center;

	a {
		display:inline-block;
		padding:10px;
		vertical-align:top;
		line-height: 1;
		margin:8px;
	}
	svg {
		height:32px;
		width:32px;
		path {
			fill:@dark-blue;
			fill-opacity:.8;
			transition:fill-opacity .3s;
			-webkit-transition:fill-opacity .3s;
		}
	}
	a:hover svg path {
		fill-opacity:1;
	}
}

#betterFooter;

ul.footer-menu > li > a {
	color:#49AABA;
}

@media (min-width:769px) {
	body:not(.home) {
		#breadcrumbs, h1 { text-align:right; }
		#content {
			position:relative;
			z-index:100;
		}
	}
	header#masthead .searchLi ul.align-menu-right button {
		color:@dark-blue;
	}
}

.ie, .edge {
	header#masthead #logo {
		overflow: hidden;
		a {
			transform: none !important;
		}
	}
}

.button {
	color: #154252;
    display: block;
    background-color: rgba(84,192,232,0.9);
    border: 1px solid #54C0E8;
    font-family: Roboto;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    height: unset;
    letter-spacing: 0.1em;
    margin: 0;
    padding: 0.25em 0;
    text-align: center;
    width: 12em;
    border-radius: 15px;
	&:hover {
		color: rgba(84,192,232,0.9);
		background-color: transparent;
		border: 1px solid rgba(84,192,232,0.9);
	}
}

.social-media {
	display: flex;
	align-items: center;
	gap: 10px;
	svg {
		height: 45px;
	}
}

#contact-sidebar {
    background-image: url(/wp-content/uploads/2020/06/footer.jpg);
    padding: 5%;
	margin-bottom: 20px;
	.better-input {
		.half {
			width: 100%;
			#yourMessage {
				
			}
		}
		input[type="submit"] {
			margin: 25px auto 0px;
		}
		> div {
			display: block;
		}
	}
}