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

@blue: #004071;
@green: #8dc63f;
@easing: cubic-bezier(0.77, 0, 0.175, 1);

.entry-content {
	body.home & h1, h1, h2, h3, h4, h5, h6 {
		text-align:left;
		line-height:1;
	}
}

header#masthead > .container:first-child {
	display:none;
}

#hero-container {
	position:relative;
	video {
		max-height:720px;
		object-fit: cover;
	}
	#overlay {
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		z-index:20;
		overflow:hidden;
		.vertAlign;
		#heroOverlay {
			overflow:visible;
			position:absolute;
			width:100%;
			height:100%;
			max-width:960px;
			max-height:960px;
			margin:auto;
			top:0;
			left:0;
			right:0;
			bottom:0;
		}
		#overlayText {
			text-align:center;
			position:relative;
			z-index:5;
			h1 {
				color:#fff;
				font-size:6vw;
				letter-spacing:.15em;
				-webkit-text-stroke: .02em #fff;
				.user-select(none);
			}
			#playWithSound {
				cursor:pointer;
				max-width:25vw;
				height:auto;
			}
		}
		opacity:1;
		.transition(opacity, .5s, @easing);
	}
	
	&.playedWithSound #overlay {
		opacity:0;
		pointer-events: none;
	}
}


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

#belowSliderLinks {
	@media (min-width:769px) {
		display:none;
	}
	@media (max-width:768px) {
		margin-top: 10px;
		max-width: 300px;
		margin: 10px auto;
		
		a {
			font-family: "D Din Condensed", Open Sans, Arial;
			display: block;
			text-align: center;
			background-color: #8dc63f;
			color: #fff;
			font-size: 20px;
			margin: 0 10px 10px;
			padding: 5px 10px;
		}
	}
}

#sectionWelcome {
	margin-top: ~"calc(5vw - -50px)";
	
	> div {
		overflow:visible;
		text-align:center;
	}
	h2 {
		color:@blue;
		display:inline-block;
		font-family:Bellerose;
		font-size:54px;
		font-weight:300;
		letter-spacing:.15em;
		line-height:1.375em;
		margin-bottom:1em;
		padding: .25em 1.75em .5em;
		position:relative;
		text-align:center;
		-webkit-text-stroke: .02em @blue;
		
		@media (max-width:768px) {
			font-size: 30px;
		}
		
		&.lazyloaded {
			background-image:url('/wp-content/uploads/2019/03/title.jpg');
		}
		&:before,
		&:after {
			content:' ';
			display:block;
			position:absolute;
			width:50%;
			height:6%;
			top:0;
			bottom:0;
			margin:auto;
			background-color:@green;
		}
		&:before {
			right:~"calc(100% - -25px)";
			.clip("0 50%, 100% 100%, 100% 0");
		}
		&:after {
			left:~"calc(100% - -25px)";
			.clip("0 0, 0% 100%, 100% 50%");
		}
	}
}
#sectionTestimonials {
	h2 {
		background-color:@green;
		color:#fff;
		font-family:"D Din Condensed", Open Sans, Arial;
		font-size:45px;
		font-weight:700;
		letter-spacing:.2em;
		line-height:1.375em;
		margin-bottom:25px;
		padding:.3em;
		text-align:center;
		b {
			display:inline-block;
			color:inherit;
			font-family:Bellerose;
			font-size:1.45em;
			text-transform:inherit;
		}
		
		@media (max-width:768px) {
			font-size: 26px;
		}
	}
	.testimonial {
		width:100%;
		flex:1;
		.transition(all, .5s, @easing);
		.su-lightbox {
			background-position:center;
			background-size:cover;
			display:block;
			.flex;
			align-items: center;
			-webkit-align-items: center;
			justify-content: flex-start;
			-moz-justify-content: flex-start;
			-webkit-justify-content: flex-start;
			cursor: pointer;

			img {
				margin-left:50px;
			}
		}
		@media (min-width:769px) {
			&:nth-child(2) {
				.margin-sides(25px);
			}
			&:hover {
				flex:1.5;
			}
			.su-lightbox {
				height:~"calc(33vw * .5625)";
			}
		}
		@media (max-width:768px) {
			&:not(:last-child) {
				margin-bottom:25px;
			}
			.su-lightbox {
				height: 56.25vw;
			}
		}
	}

	&.lazyloaded {
		#David {
			.su-lightbox {
				background-image: url('/wp-content/uploads/2019/05/David.jpg');
			}
		}
		#Bob {
			.su-lightbox {
				background-image: url('/wp-content/uploads/2019/05/Bob.jpg');
			}
		}
		#Tom {
			.su-lightbox {
				background-image: url('/wp-content/uploads/2019/05/Tom.jpg');
			}
		}
	}
}

#sectionHighlights {
	flex-wrap:wrap;

	.highlight {
		background-position:center;
		background-size:cover;
		.vertAlign;
		flex-direction:column;

		.pseudoBefore();
		&:before {
			background-color:fade(#9eb5de, 50);
			.transition(all, .5s, @easing);
		}

		h4 {
			color:#fff;
			cursor:pointer;
			font-family:"D Din Condensed", Open Sans, Arial;
			font-size:45px;
			font-weight:700;
			letter-spacing:.2em;
			line-height:1;
			margin:0;
			padding:0 25px;
			text-align:center;
			
			@media (max-width:768px) {
				font-size: 30px;
			}
		}
		.highlightCopy {
			overflow: hidden;
			max-height: 0px;
			max-width:770px;
			.transition(all, .5s, @easing);
			> div {
				padding:25px;
				text-align:center;
			}
			p {
				color:#fff;
			}
			.learn-more {
				background-color:fade(#fff, 90);
				color:@green;
				display:inline-block;
				padding:.2em .8em;
				font-family:Lato;
				font-weight:600;
				text-transform:uppercase;
			}
		}

		@media (min-width:769px) {
			min-height:~"calc(50vw * .5625)";

			&.active:before {
				background-color:fade(#165166, 70);
			}
		}
		@media (max-width:768px) {
			min-height: 56.25vw;
		}
	}

	&.lazyloaded {
		#fam { background-image:url('/wp-content/uploads/2019/03/family.jpg'); }
		#cos { background-image:url('/wp-content/uploads/2019/03/cosmetic.jpg'); }
		#imp { background-image:url('/wp-content/uploads/2019/03/implants.jpg'); }
		#sed { background-image:url('/wp-content/uploads/2019/03/sedation.jpg'); }
	}
}

#sectionCallToAction {
	h2 {
		background-image:url('/wp-content/uploads/2019/03/callNow.svg');
		background-size:contain;
		background-position:center;
		background-repeat:no-repeat;
		color:#58595b;
		font-family:"D Din Condensed", Open Sans, Arial;
		font-size:40px;
		font-weight:700;
		letter-spacing:.2em;
		line-height:1;
		margin:0 auto 25px;
		padding:2em;
		text-align:center;
		width:5em;
		padding-left: 1em;
	}
	p {
		text-align:center;
	}
	.callToAction {
		color:@green;
		font-family:"D Din Condensed", Open Sans, Arial;
		font-size:36px;
		font-weight:700;
		letter-spacing:.1em;
		line-height:1;
	}
}

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

#footer {
	&.lazyloaded {
		background-image:linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url('/wp-content/uploads/2019/03/footer.jpg');
	}

	h2 {
		color:fade(#fff, 50);
		font-family:Bellerose;
		font-size:7vw;
		font-weight:300;
		line-height:.9;
		padding-bottom:.35em;
		letter-spacing:.625em;
		margin:0;
	}

	.shortWideBack {
		background-color:fade(#fff,50);
		padding:25px 0;
		> div {
			background-color:#ebf4de;
			overflow:visible;
		}

		#footerInfo {
			background-color:@green;
			padding:25px 75px;
			.flex;
			flex-direction:column;
			.translateX(-75px);
			.social {
				h3 {
					color: #fff;
				}
			}
			
			@media (max-width:1000px) and (min-width:769px) {
				.translateX(-50px);
			}
			
			@media (max-width:768px) {
				.translateX(0px);
				padding: 20px;
			}
			
			.footerInfo {
				margin: 10px 0;
				
				&, a, pre, table {
					color:#fff;
					font-family:Lato;
					font-size:20px;
					font-weight:500;
					text-align:left;
					
					@media (max-width:768px) {
						font-size: 16px;
						vertical-align: middle;
					}
				}
				> * {
					display:inline-block;
					vertical-align:top;
				}
				svg {
					width:40px;
					height:40px;
					margin-right:10px;
					vertical-align: middle;
					&, path {
						fill:#fff;	
					}
				}

			}
		}

		#contactus {
			h4 {
				color:@blue;
				font-family:Bellerose;
				font-size:36px;
				font-weight:300;
				line-height:.9;
				padding-bottom:.35em;
				letter-spacing:.1em;
				margin:0 0 15px;
			}

			.wpcf7 {
				label {
					display:none;
				}
				.wpcf7-form-control-wrap {
					display:block;
					width:100%;
				}
				br {
					display:none;
				}
				input, textarea {
					color:@blue;
					border:none;
					width:100%;
					resize:none;
					margin-bottom:15px;
					background-color:fade(#fff,70);
					.placeholder(@blue);
				}
				input[type=submit] {
					margin-top:0;
					width:100px;
				}
			}
		}
	}

	.geography-served,
	.menu-footer-menu-container {
		max-width:1080px;
		box-sizing:content-box;
		padding:25px;
		margin:auto;
		color:#fff;
	}


	.menu-footer-menu-container {

		.menu {
			.flex;
			-webkit-flex-wrap:wrap;
			-moz-flex-wrap:wrap;
			flex-wrap:wrap;
			justify-content: space-evenly;
			-moz-justify-content: space-evenly;
			-webkit-justify-content: space-evenly;
			li {
				a {
					color:#fff;
					font-size:14px;
				}
			}
			> li > a {
				font-size:24px;
			}
		}
		ul, li {
			margin:0;
			padding:0;
			display:block;
			text-align:left;
		}
		li:after {
			display:none;
		}

	}

}

/* Less */
header#masthead {
	> .container {
		max-width:1440px;
		width:100%;
		.margin-sides(auto);
		padding:0;
	}
	@media (min-width: 769px) {
		padding:0 15px;
		#logo {
			text-align:left;
			padding-left:0;
		}
		#desktopButtons > div {
			margin:auto 0 auto auto;
		}
	}
	ul {
		li {
			a {
				width:unset;
			}
		}
	}
}
body:not(.home) {
	#content>.container {
		max-width:1440px;
		width:100%;
		margin-top:25px;
		.margin-sides(auto);
		.padding-sides(15px);
	}
}

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

#headerInfo {
	max-width:1440px;
	box-sizing:content-box;
	padding:0 15px;
	margin:0 auto -34px;
	.flex;
	justify-content:flex-end;
	position:relative;
	z-index:10;

	.headerInfo {
		background-color:fade(@green, 30);
		padding:5px 10px;
		.vertAlign;
		white-space: nowrap;
		&:not(:last-child) {
			margin-right:20px;
		}
		svg {
			height:24px;
			width:24px;
			margin-right:10px;
			path {	
				fill:@green;
			}
		}
		a {
			color:@green;
			font-family:Lato;
			font-size:16px;
			font-weight:400;
		}
	}

	@media (max-width:768px) {
		display:none;
	}
}

header#masthead {
	@media (min-width:769px) {
		ul.nav > li > a {
			line-height:150px;
		}
	}
	@media (max-width:1063px) {
		ul.nav > li > a {
			line-height:50px;
			height: 50px;
		}
	}
	
		/*** 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 ***/
}

@media (max-width:768px) {
	#responsiveheader {
		display: flex;
    	justify-content: center;
    	max-width: 100%;
    	padding: 0;
		a {
			width: 80px;
    		justify-self: center;
    		font-size: 16px;
    		margin: 0 5px 15px 5px;
		}
	}
}

#requestAppointmentButton {
	a {
		display: block;
		background-color: #8dc63f;
		margin-bottom: 20px;
		padding: 20px;
		color: #fff;
		font-size: 20px;
		font-weight: 700;
		text-transform: uppercase;
		text-align: center;
		
		&:hover {
			background-color: #004071;
		}
	}
}

.locationWidget {
	a {
		color: inherit;
	}
}

.socialMedia {
	a {
		padding: 0 10px 10px;
	}
	svg {
		g {
			fill: #004071;
		}
	}
}

#secondary {
	.content_block aside.widget {
		margin-bottom: 20px;
	}
	
	label {
		display: none;
	}
	
	.wpcf7-form-control-wrap {
		margin-bottom:15px;
		
		textarea {
			height: 125px;
		}
	}
}
#covid-19 {
    position: fixed;
    bottom: 100px;
    right: 0;
    left: 0;
    margin: auto;
    width: 600px;
    z-index: 99999;
    max-width: 50%;
    background-color: #fff;
    padding: 10px;
	height: auto;
    max-height: 90vh;
    display: none;
    justify-content: center;
}

#closeAd {
    cursor: pointer;
    position: absolute;
	left: 0px;
	top: -30px;
	padding: 5px 10px;
	background-color: #fff;
	z-index: 9;
}

#RwReview {
	display: flex;
	iframe {
		margin: auto;
	}
}

#Copyright-logo-SVG {
    height: 1.1em;
    width: auto;
    overflow: visible;
    vertical-align: text-top;
}

.footer-copyright {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
	padding: 30px 0 60px;
}

.footer-copyright p {
    color: #fff;
	font-size: 20px;
}