@import "@{parenturl}/less/mixins.less";
@import "@{themeurl}/less/vars.less";

.entry-content {
	h2 {
		letter-spacing:.1em;
	}
}

.button {
	display:block;
	width:fit-content;
	min-width:300px;
	.margin-sides(auto);
	padding:.7em 3em .6em;
	border-radius:.5em;
	.font(Raleway, 500, 24px);
	text-align:center;
	text-transform:uppercase;
	cursor:pointer;
	.blur(5px);
	.hover();
	&.light-blue {
		border:1px solid @light_blue;
		background-color:@light_blue;
		color:#fff;
		&:hover {
			background-color:fade(#fff, 50);
			color:@light_blue;
		}
	}
	&.blue {
		border:1px solid @blue;
		background-color:@blue;
		color:#fff;
		&:hover {
			background-color:fade(#fff, 50);
			color:@blue;
		}
	}
	&.white {
		border:1px solid #fff;
		background-color:#fff;
		color:@blue;
		&:hover {
			background-color:fade(@blue, 50);
			color:#fff;
		}
	}
}

#header {
	position:sticky;
	top:0;
	z-index:999999;
	> div {
		background-color: #fff;
		border-bottom:4px solid #80B0CE;
	}
	.virtual {
		span {
			font-size: 20px;
		}
	}
}

#logo {
	padding:25px;
	text-align:center;
}

#before-footer {
	background-image:url('/wp-content/uploads/2021/09/footer.jpg');
	position:relative;
	&:before {
		content:' ';
		display:block;
		position:absolute;
		width:100vw;
		height:65px;
		left:0;
		top:0;
		background-image:url('/wp-content/uploads/2021/09/cruve.svg');
		background-position:bottom center;
		.rotate(180deg);
		.translateY(1px);
	}
	> div {
		padding-top:~"calc(65px - -2.5vw)";
		padding-bottom:2.5vw;
	}
	#footer-info {
		align-self:center;
		justify-self:center;
	}
	#footer-logo {
		svg {
			fill:#fff;
			* {
				fill:inherit;
			}
		}
	}
	h5 {
		color:#fff;
		.font(Raleway, 500, 32px);
		text-align:center;
	}
	
	body.hilliard & {
		.westerville { display:none !important; }
	}
	body.westerville & {
		.hilliard { display:none !important; }
	}
	
	.location {
		h5 {
			text-align:left;
		}
		p a, address {
			color:#fff;
			.font(Raleway, 500, 18px, 1.25);
		}
		.button {
			font-size:16px;
		}
	}
	#social-media {
		.vertAlign;
		gap:20px;
		margin-top:25px;
		a {
			display:block;
			font-size:32px;
			color:#fff;
			svg {
				height:1em;
				width:auto;
				fill:currentcolor;
			}
		}
	}
	.better-input {
		display:grid;
		grid-gap:0 25px;
		grid-template-columns:repeat(2, 1fr);
		grid-template-rows:repeat(4, 1fr);
		grid-auto-flow:column;
		.your-message {
			grid-row:span 3;
		}
		textarea { height:170px; }
		input[type="submit"] {
			border:1px solid #fff;
			background-color:#fff;
			color:@blue;
			.hover();
			&:hover {
				background-color:fade(@blue, 50);
				color:#fff;
			}
		}
	}
}

/**** Full BORDER Color ****/
.wpcf7 .better-input {
	.wpcf7-form-control-wrap {
		position: relative;
		background-color:fade(#fff, 0);
		border:1px solid #fff;
		margin-bottom:0;
		display:block;
		margin-top: 25px;
		color:#fff;
		.font(Montserrat, 400, 16px);
	}
	.betterInput {
		.inherit();
		.font();

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

		* {
			color:inherit;
			border:0;
			padding: 1px 2px;
			resize:none;
		}
		label {
			.transition();
		}

		input, select, textarea {
			color:inherit;
			font-size:inherit;
			font-weight:inherit;
			font-family:inherit;
			padding:.6em;
			width:100%;
			&:focus {
				outline:none;
			}
		}
		textarea {
			height:100px;
			resize:none;
		}
		select {
			display:block;
			width:100%;
			margin-bottom:0;
		}

		label {
			position: absolute;
			width:100%;
			top:0;
			transform: translateY(.65em) translateX(.5em);
			left:0;
			pointer-events: none;
			color:inherit;
			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:#fff; // 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(-1.3em);
			font-size: .8em;
			display: none;
		}
	}
	input[type="submit"] {
		display:block;
		.margin-sides(auto);
		height:~"calc(100% - 25px)";
		padding:0;
		width:100%;
		margin-top:25px;
		border-radius:.5em;
		.font(Raleway, 500, 24px);
		text-align:center;
		text-transform:uppercase;
		.blur(5px);
		&:focus { outline:none; }
	}
}

#footer {
	background-color:#595b5c;
	padding:25px 25px 10px;
	> * {
		.max-width(1080px);
		&:not(:last-child) { margin-bottom:20px; }
	}
	.geo-served {
		line-height:1.5;
		text-align:center;
	}
}

.npoo {
	.max-width(420px);
	h4 {
		background-color:@blue;
		color:#fff;
		.font(Raleway, 400, 32px, 1.25);
		margin-bottom:4px;
		padding:.25em;
		text-align:center;
		text-transform:uppercase;
	}
	.copy {
		background-color:#595b5c;
		padding:15px;
		margin-bottom:4px;
		p {
			color:#fff;
			.font(Raleway, 400, 28px, 1.25);
			text-align:center;
			margin-bottom:0;
			b {
				.inherit(@transform:uppercase);
				.font(inherit, 700, 2em, 1, italic);
			}
		}
	}
	h5 {
		color:@blue;
		.font(Raleway, 400, 32px);
		margin-top:1.25em;
		margin-bottom:10px;
		text-align:center;
	}
	.wpcf7 .better-input {
		.wpcf7-form-control-wrap {
			border:2px solid @blue;
			color:@blue;
			border-radius:.5em;
		}
		.betterInput {
			*:focus:not(:placeholder-shown) + label,
			*:focus + label,
			*:focus:not(:placeholder-shown) + label .req,
			*:focus + label .req {
				color:@light_blue; // Inputting
			}
		}
		input[type="submit"] {
			border:2px solid @blue;
			background-color:@blue;
			color:#fff;
			padding:.5em;
			.hover();
			&:hover {
				background-color:fade(#fff, 50);
				color:@blue;
			}
		}
	}
}

#sidebar {
	.review {
		text-align:center;
		line-height:0;
	}
	h4 {
		background-color:@blue;
		color:#fff;
		.font(Raleway, 400, 32px, 1.25);
		margin-bottom:4px;
		padding:.25em;
		text-align:center;
		text-transform:uppercase;
	}
	body.hilliard & {
		.westerville.review { display:none !important; }
	}
	body.westerville & {
		.hilliard.review { display:none !important; }
	}
}

#footer {
	ul.footer-menu {
		> li {
			display:block;
			&:not(:last-child) {
				margin-bottom:25px;
			}
			> a {
				display:block;
				font-size:1.5em;
				padding:0 25px;
				margin-bottom:10px;
				border-bottom:1px solid currentcolor;
			}
			ul.sub-menu {
				margin-left:25px;
				columns:200px 5;
			}
		}
		body.hilliard & {
			.westerville { display:none !important; }
		}
		body.westerville & {
			.hilliard { display:none !important; }
		}
	}
}

body.template-hero-image .hero img.hero-image {
	max-height:640px;
}

@media (max-width: 768px) {
	.header-info {
		display: none;
	}
	.nav > li,
	.navbar-toggle {
		color: rgba(27,102,157,0.9);
		background-color: #fff;
	}
	#welcome .dcmo_block>div {
		grid-gap: 165px !important;
		grid-template-columns: 1fr !important;
	}
	.hero h1 {
		font-size: 0 !important;
	}
	.video>video {
		height: 100%;
		max-height: 278px;
	}
}
@media (max-width: 469px) {
	.entry-content h2 {
		font-size: 32px !important;
	}
	.grid[columns="5"]>*[grid="2"] {
		grid-column: span min(2,2);
	}
	#docs .docs>a {
		grid-template-columns: 80px 1fr !important;
	}
	section#SVC {
		h2 {
			font-size: 32px !important;
		}
		h3 {
			font-size: 24px !important;
		}
	}
	#services {
		.service {
			padding: 10px !important;
			h2 {
				font-size: 24px !important;
			}
		}
		flex-direction: column;
	}
	#services:not(:hover) .service.active h2, #services .service:hover h2 {
		transform: translateY(calc(-92% - -50px)) rotate(-90deg) !important;
		-o-transform: translateY(calc(-92% - -50px)) rotate(-90deg) !important;
		-ms-transform: translateY(calc(-92% - -50px)) rotate(-90deg) !important;
		-moz-transform: translateY(calc(-92% - -50px)) rotate(-90deg) !important;
		-webkit-transform: translateY(calc(-92% - -50px)) rotate(-90deg) !important;
	}
	#video-testimonials {
		#videos {
			flex-direction: column;
			.su-lightbox {
				max-height: 60vw !important;
			}
			blockquote {
				width: 90% !important;
			}
			> div * {
				font-size: 0;
			}
			> div.active * {
				font-size: 16px;
			}
		}
	}
	#after-footer {
		gap: 2px !important;
		a {
			font-size: 12px !important;
		}
		h5 {
			font-size: 18px !important;
		}
	}
	#after-footer .westerville,
	#after-footer .hilliard {
		padding-right: 0px !important;
		grid-gap: 2px !important;
	}
}

#logos {
	.margin-ends(5vw);
	padding:25px;
	> div {
		display:grid;
		grid-template-columns:1fr 1fr 1fr 2fr 1fr 1fr 1fr;
		align-items:center;
		justify-items:center;
		grid-gap:25px;
	}
}

#menu-item-908,
#menu-item-1546,
#menu-item-1545,
#menu-item-1544 {
	background-color: rgba(234, 67, 53, 0.9) !important;
}
@media (min-width: 769px){
	body.template-hero-video #header nav, body.template-hero-image #header nav {
		position: sticky !important;
	}
}