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

#masthead {
	background-image: url('/wp-content/uploads/2019/04/Nav-Bar-Design.svg');
	background-position: center center;
	background-size: cover;
}

#header-info-cont {
	position: relative;
}

#logo {
}
	
#desktopButtons {
	position: absolute;
    top: 0;
    bottom: 0;
	pointer-events: none;
	
	> div {
		display: flex;
		justify-content: space-between;
		width:100%;
		
		.headerInfo {
			pointer-events: auto;
			
			> * {
				display: block;
				text-align: center;
				margin: 0 auto;
			}
		}
	}
}

@media (min-width:769px) {
	.navbar-nav > li:nth-of-type(n + 2) {
	
		> a {
			position: relative;

			&::before {
				content: '';
				position: absolute;
				top: 20%;
				right:calc(100% - -1px);
				height:60%;
				width: 2px;
				background-color: #c6ccca;
			}
		}
	}
}

#hero-container {
	position: relative;
// 	background-image: url('/wp-content/uploads/2019/04/hero.jpg');
	background-position: center center;
	background-size: cover;
	font-size: 0;
	overflow:hidden;
	
	#hero {
		position: absolute;
		top:0;
		z-index:-1;
		max-height:100%;
		transition: 0.5s z-index 0.5s linear;
	}
	
	svg {
		transform: translateX(0vw);
		.transition(all,0.7s,ease);
		
		text, text * {
			font-family: Lato;
		}
		
		#playWithSound {
			cursor: pointer;
		}
	}
	
	#hero-text {
		position: absolute;
		bottom: 0;
		left: 0;
		max-width: 33%;
		color: #fff;
		font-style: italic;
		font-size: 3.5vw;
		letter-spacing: 0.1em;
		padding-bottom: 8vw;
		padding-left: 8vw;
		text-align: center;
		transform: translateX(0vw);
		transition: 0.5s all 0.5s ease;
		
		@media (max-width:768px) {
			font-size: 16px;
			max-width:50%;
		}
		
		span {
			font-style: normal;
			font-weight: 700;
			text-transform: uppercase;
		}
		
		a {
			display: inline-block;
			padding: 8px 12px;
			background-color: #3589c7;
			color: #fff;
			text-transform: uppercase;
			font-size: 30%;
			letter-spacing: 0.05em;
			font-style: normal;

			@media (max-width:768px) {
				font-size: 55%;
			}
		}
	}
	
	&.playedWithSound {
		#hero { z-index: 0; }
		> svg {
			transform: translateX(101vw);
		}
		#hero-text {
			transform: translateX(-101vw);
		}
	}
}

#sectionWelcome {
	overflow: hidden;
	
	> div {
		position: relative;
		overflow:visible;
		padding: calc(6vw - -50px) 25px !important;
		
		svg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: auto;
			height: 100%;
			overflow: visible;
		}
		
		h1 {
			font-size: 3.5vw;
			font-weight: 300;
			margin-bottom:.75em;
		
			@media (max-width:768px) {
				font-size: 30px;
			}
			
			span {
				font-weight: 700;
				text-transform: uppercase;
			}
		}
		
		p {
			text-align: left;
		}
	}
}

#sectionTestimonials,
#sectionHighlights,
#sectionCTA,
#footer {
	margin-bottom: 50px;
}

#sectionTestimonials {
	padding: 50px 25px;
	background-color: #d8ebf1;
	
	h2 {
		text-align: center;
		font-size: 2.5vw;
		letter-spacing: 0.15em;
		line-height: 1em;
		margin-bottom: 50px;
		font-weight:300;
		
		span {
			display: inline-block;
			font-weight: 700;
		}
		
		@media (max-width:768px) {
			font-size: 30px;
		}
	}
	
	#testimonials {
		max-width: 1440px;
		margin: 0 auto;
		align-items: center;
		
		.testimonial {
			position: relative;
			height: 33vw;
			min-height: 300px;
			max-height: 400px;
			margin: 30px 0;
			overflow:hidden;
			//background-image: url('/wp-content/uploads/2018/12/placeholder.jpg');
			background-position: center center;
			background-size: cover;
			transition: all 0.7s ease;
			
			&::after {
				content: '';
				position: absolute;
				top:0; left: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
				background-color:rgba(255,255,255,0.5);
				pointer-events: none;
				transition: all 0.7s ease;
			}
			
			
			.su-lightbox {
				position: absolute;
				top: 0; bottom: 0;
				left: 0; right: 0;
				margin: auto;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				
				svg {
					width: 82px;
					height: 95px;
					margin: auto;
					
					#playText {
						opacity: 0;
					}
				}
			}
			
			
			&:hover {
				transform: scale(1.2);
				z-index: 2;
				
				&::after {
					background-color: rgba(255,255,255,0);
				}
				
				svg #playText {
					opacity: 1;
				}
			}
			
		}
		
		&:not(:hover) {
			.testimonial:nth-of-type(2) {
				transform: scale(1.2);
				z-index: 2;
				
				&::after {
					background-color: rgba(255,255,255,0);
				}
				
				svg #playText {
					opacity: 1;
				}
			}
		}
		
		
	
		&.lazyloaded {
			.testimonial {
				&#Robbie {
					background-image: url('/wp-content/uploads/2019/07/robbie.jpg');
				}
				&#Lael {
					background-image: url('/wp-content/uploads/2019/07/lael.jpg');
				}
				&#JoeCindy {
					background-image: url('/wp-content/uploads/2019/07/joe-cindy.jpg');
				}
			}
		}
	}
}

#sectionHighlights {
	background-color: #3689c9;
	
	.highlight {
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			right: 0;
			z-index: 0;
			width: 50%;
			height: 100%;
			background-image: url(/wp-content/uploads/2019/04/Highlight-1.svg);
			background-position: center center;
			background-size: cover;
			
			@media (max-width:768px) {
				width:100%;
				bottom: 0;
			}
		}
	}
	
	&.lazyloaded {
		.highlight {
			&:nth-of-type(1) {
				&::before {
					background-image: url(/wp-content/uploads/2019/04/Highlight-1.svg);
				}
				.highlightImg {	background-image: url('/wp-content/uploads/2019/04/family-highlight.jpg'); }
			}
			&:nth-of-type(2) {
				&::before {
					background-image: url(/wp-content/uploads/2019/04/Highlight-2.svg);
				}
				.highlightImg {	background-image: url('/wp-content/uploads/2019/04/dentures-highlight.jpg'); }
			}
			&:nth-of-type(3) {
				&::before {
					background-image: url(/wp-content/uploads/2019/04/Highlight-3.svg);
				}
				.highlightImg {	background-image: url('/wp-content/uploads/2019/04/restorative-highlight.jpg'); }
			}
		}
	}
	
	.highlightImg {
		position: relative;
		overflow: hidden;
		height: 300px;
		min-height: 100%;
		@media (min-width:769px) {order: 0;}
		background-position: center center;
		background-size: cover;
		
		img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			min-width: 100%;
			min-height: 100%;
		}
	}
	
	@media (min-width:769px) {
		.highlight:nth-of-type(even) {
			&::before {
				right: auto;
				left: 0;
			}
			.highlightImg {
				order: 2;
			}
		}
	}
	
	.highlightContent {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 25px;
		transform: translateY(calc(50% - 50px));
		transition: all 0.7s ease;
		
		h3 {
			font-size: 3vw;
			color: #fff;
			text-align: center;
			span {
				font-weight: 300;
			}
		
			@media (max-width:768px) {
				font-size: 30px;
			}
		}
		p {
			color: #fff;
			text-align: center;
			max-width: 500px;
			margin: 0 auto 10px;
			opacity: 0;
			transition: all 0.7s ease;
		}
		
		.learnMore {
			display: block;
			margin: 0 auto;
			background-color: #fff;
			text-transform: uppercase;
			color: #3689c9;
			line-height: 1em;
			padding: 5px 15px;
			opacity: 0;
			transition: all 0.7s ease;
			
			&:hover {
				background-color: rgba(255,255,255,0.5);
				color: #3689c9;
			}
		}
	}
	
	@media (max-width:768px) {
		.highlight.waypointEffect {
			.highlightContent {
				transform: translateY(0);
				
				p, .learnMore {
					opacity: 1;
				}
			}
		}
	}
	
	.highlight:hover .highlightContent {
		transform: translateY(0);
		p, .learnMore {
			opacity: 1;
		}
	}
}

#sectionCTA {
	&.lazyloaded { background-image:url('/wp-content/uploads/2019/04/Call-Now-Section.svg'); }
	background-position: center center;
	background-size: cover;
	
	h3 {
		margin-bottom: 2vw;
		font-size: 2vw;
		text-align: center;
		
		@media (max-width:768px) {
			font-size: 30px;
		}
	}
	
	p {
		margin-bottom: 2vw;
		text-align: center;
	}
	
	a[href^="tel:"] {
		display: block;
		max-width: 240px;
		margin: 0 auto;
		padding: 5px 15px;
		background-color:#3689c9;
		text-align: center;
		font-size: 24px;
		color: #fff;
		letter-spacing: 0.15em;
	}
}

h1.team-section {
    text-align: center;
}

#footer {
	background-color: #3689c9;
	color: #fff;
	
	.third {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		
		@media (max-width:768px) {
			&:first-of-type {
				padding-top: 20px;
			}
		}
		
		h4 {
			color: #fff;
		}
		pre {
			margi: 0;
		}
		table {
			margin: 0 auto;
			
			* {
				font-family: Lato, Open Sans, Arial;
				text-align: center;
			}
		}
	}
	
	svg {
		fill: #fff;
	}
	
	.footerInfo {
		margin: 20px;
		a {
			display: block;
			color: #fff;
			font-size: 18px;
			font-family: Lato, Open Sans, Arial;
			text-transform: uppercase;
		}
	}
	
	&.lazyloaded {
		#contactus {
			background-image: url('/wp-content/uploads/2019/04/footer.jpg');
		}
	}
	
	#contactus {
		min-width:40%;
		padding: 20px;
		background-position: left center;
		background-size: cover;
		
		h4 {
			width: 100%;
			max-width:400px;
			margin: 0 auto 15px;
			padding: 10px;
			background-color: fade(#3689c9,70%);
			font-family: PT Sans;
			font-weight: 700;
			font-size: 24px;
			letter-spacing: 0.1em;
			line-height: 1em;
		}
	
		.wpcf7 {
			width: 100%;
			max-width: 400px;
			margin: 0 auto;
			
			label {
				display: none;
			}
			
			.wpcf7-form-control-wrap {
				width:100%;
				margin-bottom: 15px;
				> * {
					min-height: 45px;
					background-color: fade(#3689c9,70%);
					color: #fff;
					border: 0;
					text-align: center;
				}
				textarea {
					height: 175px;
				}
			}
			
			.wpcf7-submit {
				margin: 0;
				background-color: #3689c9;
				font-size: 16px;
				border: 0;
			}
		}
	}
}

::placeholder {
	color: #fff;
	text-transform: uppercase;
}

#socialMedia {
	display: flex;
	justify-content: center;
	padding: 20px;
	background-color: #edf5f8;
	
	svg {
		margin: 0 15px;
		height: 45px;
		width: 45px;
		
		&, path {
			fill: #393939;
		}
	}
}

#footer-area {
	background-color: #edf5f8;
}

.footer-menu {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	width: 100%;
	
	> li {
		margin-bottom: 10px;
		vertical-align: top;
		text-align: left;
		@media (max-width:768px) {
			width: 100%;
		}
		
		> a {
			font-size: 18px;
			font-weight: 700;
			color: #3689c9;
			text-transform: uppercase;
		}
		
		&::after { display: none; }
		
		ul {
			padding: 0 0 0 15px;
			li {
				display: block;
				padding: 0;
				text-align: left;
				
				&::after { display: none; }
			}
		}
	}
}


.entry-content cite { font-weight: 700; }