@import "@{parenturl}/wp-less/mixins.less";

@brown: #a57b5b;

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

#google_translate {
	position:absolute;
	right:0;
	top:0;
}

header#masthead {
	background-color:#000;
	padding:0 50px;

	.grid {
		grid-template-columns:auto 1fr auto;
		align-items:end;
		@media (max-width: 768px) {
			grid-template-columns: 1fr;
		}
		> * {
			grid-row:1;
		}
		#logo {
			grid-column:1;
		}
		nav {
			grid-column:2;
			padding-bottom:25px;
			@media all and (max-width: 768px) {
				grid-column: unset;
				grid-row: 2;
			}
		}
		#callus {
			grid-column:3;
		}
	}

	#callus {
		text-align:center;
		padding:25px 0;
		> div {
			text-align:center;
			margin-bottom:25px;
		}
		#callusCopy, #phonenumberCopy, #phonenumberCopy_1 {
			display:inline-block;
		}

		#consult {
			color:#d66c1a;
			display:inline-block;
			border:1px solid #f7d47c;
			.font(~"Gobold, Oswald", 400, 23px);
			padding:.5em;
			margin-bottom:50px;
		}
	}
	@media (max-width: 768px) {
		ul.nav>li>a {
			color: #000;
		}
	}

}

hr {
	border-top:1px solid #222;
	margin:50px;
}

#sectionWelcome {
	display:grid;
	margin-bottom:100px;
	width:100vw;
	grid-template-columns: ~"calc(100vw * (2/3))" ~"calc(100vw * (1/3))";
	@media (max-width: 1279px) {
		grid-template-columns: none;
	}
	#hero {
		width:100%;
		position: relative;
		/**
		ul.slick-dots {
			background-color:fade(#fff, 50);
			padding:10px;
			list-style: none;
			display:grid;
			grid-template-columns:repeat(3, 1fr);
			position:absolute;
			left:0;
			right:0;
			width:190px;
			bottom:0;
			margin:auto;
			text-align:center;
			line-height:0;
			.translateY(50%);
			li {
				display:inline-block;
				line-height:0;
				button {
					font-size:0;
					line-height:0;
					color:transparent;
					height:15px;
					width:15px;
					border-radius:50%;
					overflow:hidden;
					border:none;
					background-color:#636466;
				}
				&.slick-active button {
					background-color:@brown;
				}
			}
		}
		.slick-slide:focus { outline:none !important; }
		***/
		img {
			width:100%;
			height:auto;
			object-fit:cover;
			object-position:center;
		}
		#expertise {
			position: absolute;
			bottom: 0;
			background-color: #fff;
			width: 100%;
			img {
				width: 100%;
				display: block;
			}
			@media (max-width: 768px) {
				position: relative;
				text-align: center;
			}
		}
	}
	#welcome {
		padding:50px;
		.vertAlign;
	}
	h1 {
		text-align:center;
		letter-spacing:.1em;
		margin-bottom:50px;
		box-shadow:0px 0px 13px -5px fade(#000, 50);
		.clip("0 -100%, 100% -100%, 100% 200%, 0 200%");
		&:before, &:after {
			content:' ';
			display:block;
			width:100%;
			height:2px;
			background-color:#fff;
		}
		span {
			.inherit();
			.font();
			display:block;
			border:1px solid #000000;
			padding:.25em 5px;
			margin:10px 0;
		}
		small {
			.inherit(#636466);
			.font(Roboto, 400, .7em);
			display:inline-block;
			.translateY(-.2em);
		}
	}
	h2 {
		text-align:center;
		margin-bottom:40px;
	}
}

#sectionHighlights {
	display:grid;
	grid-gap:50px;
	grid-template-columns:repeat(3, 1fr);
	grid-template-rows:repeat(2, 1fr);
	padding:0 50px;
	@media (max-width: 999px) {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}
	.highlight {
		display:grid;
		grid-template-rows:1fr auto;
		&#general .highlight-container { background-image:url('/wp-content/uploads/2020/08/general.jpg'); }
		&#cosmetic .highlight-container { background-image:url('/wp-content/uploads/2020/08/cosmetic.jpg'); }
		&#sedation .highlight-container { background-image:url('/wp-content/uploads/2020/08/sedation.jpg'); }
		&#implants .highlight-container { background-image:url('/wp-content/uploads/2020/08/implants.jpg'); }
		&#tmj .highlight-container { background-image:url('/wp-content/uploads/2020/08/showcase.jpg'); }
		&#invisalign .highlight-container { background-image:url('/wp-content/uploads/2020/03/smile.png'); }

		.highlight-container {
			grid-row:1;
			background-position:center;
			background-size:cover;
			overflow:hidden;
			.highlight-copy {
				background-color:fade(@brown, 80);
				padding:50px 50px 0;
				height:100%;
				display:grid;
				grid-gap:50px;
				grid-template-rows:1fr auto;
				p {
					color:#fff;
					margin-bottom:0;
				}
				.learn-more {
					display:block;
					text-align:center;
					padding:.75em;
					.font(Montserrat, 400, 16px);
					text-transform:uppercase;
					width:10.5em;
					margin:auto;
					background-color:fade(#fff, 40);
					color:#000;
					&:hover {
						background-color:fade(#000, 40);
						color:#fff;
					}
				}
			}
		}
		h2 {
			grid-row:2;
			text-align:center;
			color:#000;
			.font(~"Playfair Display", 400, 25px);
			text-align:left;
			text-transform:uppercase;
			height:50px;
			.vertAlign(@justifyContent: flex-start);
			margin:0;
		}
	}
	.highlight {
		.highlight-copy {
			.translateY(100%);
			.transition(all, .5s, @easing);
		}
	}
	.highlight:hover {
		.highlight-copy {
			.translateY(0);
		}
	}
}

#sectionSlider {

	width:100%;
	.slick-track {
		display:grid;
		grid-auto-flow:column;
	}
	.slick-slide { 
		padding:0 25px 50px;
		.vertAlign;
		height:100%;
		> div {
			.max-width(1080px);
		}
		iframe {
			margin-bottom:10px;
		}
		&:focus { outline:none !important; }
	}
	ul.slick-dots {
		background-color:fade(#fff, 50);
		padding:10px;
		list-style: none;
		display:grid;
		grid-template-columns:repeat(3, 1fr);
		position:absolute;
		left:0;
		right:0;
		width:190px;
		bottom:0;
		margin:auto;
		text-align:center;
		line-height:0;
		li {
			display:inline-block;
			line-height:0;
			button {
				font-size:0;
				line-height:0;
				color:transparent;
				height:15px;
				width:15px;
				border-radius:50%;
				overflow:hidden;
				border:none;
				background-color:#636466;
			}
			&.slick-active button {
				background-color:@brown;
			}
		}
	}
}
.slick-slide img {
    display: block;
    min-width: 64px;
}
#sectionLogos {
	padding:0 25px;
	#logos {
		.max-width(1220px);
		display:grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		align-items:center;
		grid-gap:25px;
	}
	.slick-list {
		.max-width(640px);
	}
	.slick-track {
		display:grid;
		grid-auto-flow:column;
	}
	.slick-slide { 
		padding:0 10px;
		.vertAlign;
		height:100%;
		&:focus { outline:none !important; }
	}
}

#footer {
	background-color:#000;
	padding:50px;
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	align-items:end;
	justify-items:center;
	#socialMedia {
		grid-column:3;
		grid-row:4;
	}

	> * {
		background-color:#000;
		padding:20px;
		z-index:1;
		position:relative;
	}

	#footer-logo {
		position:relative;
		padding:0;
		margin:0;
		&:before {
			content:' ';
			display:block;
			position:absolute;
			width:200vw;
			height:1px;
			background-color:@brown;
			left:50%;
			.translateX(-50%);
			bottom:52px;
			z-index:-1;
		}
		img {
			background-color:#000;
			padding:20px;
		}
	}

	pre, #footer-phone {
		color:#fff;
		.font(Montserrat, 400, 22px);
		margin:22px 0;
	}
	#footer-phone {
		&:after {
			content:' ';
			display:block;
			position:absolute;
			width:100vw;
			height:100%;
			background-color:#000;
			top:0;
			left:100%;
		}	
	}
	pre {
		white-space:normal;
	}
	a {
		.inherit();
		.bold(@size:1.25em);
	}
	#socialMedia {
		padding:0;
		text-align:center;

		&:before {
			content:' ';
			display:block;
			position:absolute;
			width:100vw;
			height:1px;
			background-color:@brown;
			left:100%;
			top:100%;
		}

		a {
			display:inline-block;
			padding:10px;
			vertical-align:top;
			line-height: 1;
			margin:8px;
		}
		svg {
			height:32px;
			width:auto;
			path {
				fill:@brown;
				fill-opacity:.8;
				transition:fill-opacity .3s;
				-webkit-transition:fill-opacity .3s;
			}
		}
		a:hover svg path {
			fill-opacity:1;
		}
	}
}
#footer-area {
	#colophon {
		padding-top:0;
		padding-bottom:0;
	}
	.geography-served {
		margin-bottom:25px;
	}
	ul.footer-menu {
		margin-bottom:25px;
		.flex(space-between);
		> li > a {
			color:@brown;
			.font(Montserrat, 600, 23px);
			display:inline-block;
			margin-bottom:15px;
		}
		li {
			display:block;
			&:after { display:none !important; }
			text-align:left;
			padding:0;
		}
		ul {
			padding:0;
		}
	}
	.copyright {
		display:none !important;
	}
}

#contactus {
	background-color:#000;
	padding:0 25px 25px;
	> div {
		.max-width(350px);
		background-color:#fff;
		padding:5px;
	}
	h2 {
		margin:0 0 10px;
		background-color:#000;
		color:@brown;
		text-align:center;
		.font(~"Playfair Display", 400, 25px);
		text-transform:uppercase;
		padding:10px 10px 12px;
		letter-spacing:.1em;
	}

	.wpcf7 .better-input {
		.wpcf7-form-control-wrap {
			position: relative;
			border-bottom: 1px solid #000;
			margin-bottom:10px;
			display:block;
			padding-top: 1.2em;
			color:#201d1d;
			.font(~"Monserrat", 300, 16px);
		}
		.betterInput {
			.inherit();
			.font();

			*::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:#201d1d;
				border:0;
				padding: 1px 2px;
				background: transparent;
				resize:none;
			}
			label {
				.transition(.3s, all, @easing);
			}

			input, select, textarea {
				color:#201d1d;
				font-size:inherit;
				font-weight:inherit;
				font-family:inherit;
			}
			textarea {
				height:50px;
			}
			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:#201d1d;
				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:@brown; // 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;
			}
		}
		input[type="submit"] {
			border:none;
			display:block;
			margin:25px auto 0;
			height: 2em;
			.font(Montserrat, 400, 20px);
			letter-spacing:.1em;
			background-color:#ede5de;
			color:#000;
			&:hover {
				color:#ede5de;
				background-color:#000;
			}
		}
	}

}

#copyright {
	background-color:#000;
	text-align:center;
	padding:0 10px 25px;
}

/*** Search ***/
button.navbar-toggle:hover * {
	color:#989a9d;
}
.navbar-default .navbar-toggle:hover .icon-bar {
	background-color:#989a9d;
}
.navbar-nav > li.searchLi > ul.dropdown-menu {
	right: 0px !important;
    left: inherit !important;
	display:block;
	overflow:hidden;
	width:0;
	min-width:inherit;
	border-radius:0;
}
.navbar-nav > li.searchLi:hover > ul.dropdown-menu {
	width:250px;
}
.searchLi ul li {
	float:right;
}
.searchLi .input-group input.form-control {
	width:200px;
	font-family:inherit;
}
.searchLi button.btn-default {
	border: 1px solid #ccc;
    height: 34px;
    color: #ccc;
	width: 51px;
}
.searchLi button.btn-default:hover {
	background-color: #ccc;
	color:#fff;
}
@media all and (min-width:769px) {
	.navbar-nav > li.searchLi > ul.dropdown-menu {
		transition: width .3s;
		-webkit-transition: width .3s;
	}
}
@media all and (max-width:768px) {
	.navbar-nav > li.searchLi.open > ul.dropdown-menu {
		width:100%;
	}
	.searchLi .input-group input.form-control {
		width:100%;
	}
}
.searchLi p {
	display: none;
}
/*** End Search ***/


.gallery {
	display: flex;
	flex-wrap: wrap;
	.ba {
		position: relative;
		display:block;
		width:300px;
		height: 450px;
		margin: 30px 30px 10px 10px;
		overflow: hidden;
		img {
			position: absolute;
			top: 0;
			left: 0;
			width:100%;
			height:100%;
			object-fit:cover;
			object-position:center center;
			border: 0; 
			&:first-of-type {
				opacity:1;
			}
			&:last-of-type {
				opacity:0;
				pointer-events:none;
			}
		}
		@media all and (min-width: 860px) {
			&:hover {
				img {
					&:first-of-type {
						opacity:0;
						pointer-events:none;
					}
					&:last-of-type {
						opacity:1;
					}
				}
			}
		}
		@media all and (max-width: 860px) {
			&.before {
				img {
					&:first-of-type {
						opacity:1;
					}
					&:last-of-type {
						opacity:0;
						pointer-events:none;
					}
				}
			}
			&.after {
				img {
					&:first-of-type {
						opacity:0;
						pointer-events:none;
					}
					&:last-of-type {
						opacity:1;
					}
				}
			}
		}
		&.withtext {
			p {
				position: absolute;
				bottom:0;
				z-index: 10;
				width:100%;
				display: block;
				padding: 8px;
				background-color: @brown;
				color: #fff;
				text-align: center;
			}
		}
	}
}

#sectionDifference {
	padding: 0 50px;
}
#logo img {
	height:200px;
	min-width:250px;
}
@media all and (min-width:769px) {
	#logo img {
		margin-bottom:50px;
	}
}
@media all and (max-width:768px) { 
	#footer {
		grid-template-columns: repeat(1,1fr);
		padding:0px;
	}
	#footer-phone{
		grid-column: 1;
		grid-row: 3;
	}
	#footer pre{
		font-size:1.25em;
		font-weight: 600;
		margin:0px;
	}

	#footer #socialMedia {
		grid-column: 1;
		grid-row: 4;
	}
	#footer-logo {
		display:none;	
	}	
	#footer #socialMedia:before{
		display:none;	
	}	
}
#responsiveheader {
	grid-row:3 !important;
}
.scroll-to-top {
    bottom: 10%;
	display: block;
}

.phone-custom-class {
    visibility: hidden;
	position: relative;
}
.phone-custom-class::before {
    content: '720-545-0747';
    visibility: visible;
    position: absolute;
    top: 0px;
	font-family: Gobold, Oswald,Open Sans,Arial;
    font-size: 23px;
    font-weight: 400;
    color: #d66c1a;
}

#phonenumberCopy_1 a {
	font-family:Gobold, Oswald,Open Sans,Arial;
	font-size:23px;
	font-weight:400;
	color:#d66c1a;
}
#phonenumberCopy_1 a:hover {
	color:#a54700;
}

.show{
	display: inline-block !important;
}
.hide{
	display: none;
}

.float-left{
	float: left !important;
}

#form_contact-us .frm_button_submit {
			border: none;
    		display: block;
    		margin: 25px auto 0;
		    height: 2em;
		    font-family: Montserrat;
		    font-weight: 400;
		    font-size: 20px;
		    line-height: 1;
		    font-style: normal;
		    font-variant: normal;
		    letter-spacing: 0.1em;
		    background-color: #ede5de;
		    color: #000;
		    width: 100%;
		    border-radius: 0px;
}