/*======================================
Theme Name: Kenryn Home Builders
Theme URI: https://www.kenrynhomebuilders.com/
Description: Custom theme for Kenryn Home Builders
Version: 1.0.0
Author: Payton Smith
Author URI: https://www.kenrynhomebuilders.com/
Template: Divi
======================================*/

/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */

/*=============
|| Variables ||
=============*/
/* Ignore Syntax Error for Variables */

:root {
/* Site Fonts */
--site-head-font: 'Rubik',Helvetica,Arial,Lucida,sans-serif;
--site-body-font: 'Lato',Helvetica,Arial,Lucida,sans-serif;
	
/* Accent Color */
--accent-color: #F64028;
--accent-color2: #000;
}

/*==============
||  Page CSS  ||
==============*/


/* Vertical align for modules with background elements. */
.vert-align { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
} 

/* PART 1 - Before Lazy Load */
img[data-lazyloaded]{
	opacity: 0;
}

/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
	-webkit-transition: opacity .5s linear 0.2s;
	-moz-transition: opacity .5s linear 0.2s;
	transition: opacity .5s linear 0.2s;
	opacity: 1;
}


/*=================
||  Mobile Menu  ||
=================*/
@media only screen and (max-width: 980px) {
	.et_fixed_nav #main-header, 
	.et_fixed_nav #top-header,
	.et_non_fixed_nav.et_transparent_nav #main-header,
	.et_non_fixed_nav.et_transparent_nav #top-header {
    	position: fixed;
	}
	#logo {
		display: none;
	}
	#main-header {
    	-webkit-box-shadow: 0 3px 50px rgba(0,0,0,.2);
    	-moz-box-shadow: 0 3px 50px rgba(0,0,0,.2);
    	box-shadow: 0 3px 50px rgba(0,0,0,.2);
	}
	.mobile_nav.opened .mobile_menu_bar:before {
 		content: '\4d';
	}
	#et-top-navigation span.mobile_menu_bar:before, 
	#et-top-navigation span.mobile_menu_bar:after {
		color: var(--accent-color, #444) !important;
	}
}

.et_mobile_menu {
    overflow: scroll !important;
    max-height: 80vh;
}

.et_mobile_menu {
	border-top: 3px solid var(--accent-color, #444);
	background: #fff!important;
}

.et_mobile_menu li a {
    display: block;
    padding: 20px 5%;
    border-bottom: 1px solid rgba(0,0,0,.03);
    text-align: center;
    font-size: 24px;
	color: #000!important;
}

/*==============
|| Custom CSS ||
==============*/
/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */

/* Fullwidth Blog Styles */
.khb-blog-fullwidth article{
	display: grid;
	grid-template-columns: [first] 25%;
	column-gap: 30px;
	justify-items: stretch;
	border: 1px solid #d8d8d8;
	box-shadow: 6px 6px 18px 0px rgb(0 0 0 / 30%);
}

.khb-blog-fullwidth article .entry-featured-image-url {
	grid-column-start: 1;
	grid-row-start: 1;
	grid-row-end: 4;
	margin-bottom: 0px;
	border-right: 4px solid #000;
}
.khb-blog-fullwidth article .entry-featured-image-url img {
	height: 100%;
	object-fit: cover;
}

.khb-blog-fullwidth article .entry-title {
	grid-column-start: 2;
	grid-row-start: 1;
	align-self: end;
	padding-top: 10px;
}
.khb-blog-fullwidth article .post-meta {
	grid-column-start: 2;
	grid-row-start: 2;
	align-self: start;
}

.khb-blog-fullwidth article .post-content {
	grid-column-start: 2;
	grid-row-start: 3;
	align-self: end;
	padding-bottom: 10px;
}

@media only screen and (max-width: 980px) {
	.khb-blog-fullwidth article {
		display: block;
	}
	.khb-blog-fullwidth article .entry-title,.khb-blog-fullwidth article .post-meta,.khb-blog-fullwidth article .post-content {
		padding: 0px 30px;
	}
	.khb-blog-fullwidth article .entry-title {padding-top: 30px;}
	.khb-blog-fullwidth article .post-content {padding-bottom: 30px;}
	.khb-blog-fullwidth article .entry-featured-image-url {
		border-right: none;
		border-bottom: 4px solid #000;
	}
}

/*Blurb Right*/
.khb-blurb-right .et_pb_blurb_container {
	padding-left: 0px;
	padding-right: 10px;
}

/*Call to Action's*/
.khb-cta .et_pb_module_header {margin-bottom: 30px;}
.khb-cta .et_pb_module_header:after {
	content: '';
	height: 4px;
	width: 64px;
	display: flex;
	justify-content: center;
	position: absolute;
	left: 50%;
	margin-left: -32px;
	margin-top: 15px;
}
/*Black CTA*/
.khb-black-cta .et_pb_module_header:after {background: var(--accent-color);}
/*Red CTA*/
.khb-red-cta .et_pb_module_header:after {background: var(--accent-color2);}
/*Plain CTA*/
.khb-plain-cta .et_pb_module_header:after {background: var(--accent-color);}

/*Circle Counter*/
.khb-circle-counter-plus .percent-value:after{content: "+";}
.khb-circle-counter-dollar .percent-value:before{content: "$";}

/*Comments*/
.khb-comments a {color: var(--accent-color);}
.khb-comments .page_title,.khb-comments .comment-reply-title {
	margin-bottom: 30px;
	border-bottom: 4px solid var(--accent-color);
	width: fit-content;
	max-width: 100%;
}

/*Contact Form*/
.khb-contact .et_pb_contact_main_title:after {
	content: '';
	background: var(--accent-color);
	height: 4px;
	width: 64px;
	display: flex;
	justify-content: center;
	position: absolute;
	left: 50%;
	margin-left: -32px;
	margin-top: 15px;
}
.khb-contact .et-pb-contact-message {
	text-align: center;
	font-family: var(--site-body-font);
	font-weight: 300;
	font-size: 20px;
	line-height: 1.6em;
}

/*Count Down Timer*/
.khb-count-down .title:after {
	content: '';
	background: #fff;
	height: 4px;
	width: 64px;
	display: flex;
	justify-content: center;
	position: absolute;
	left: 50%;
	margin-left: -32px;
	margin-top: 15px;
}

/*Email Opt-In*/
.khb-optin-vertical .et_pb_module_header:after{
	content: '';
	height: 4px;
	width: 64px;
	display: flex;
	justify-content: center;
	position: absolute;
	left: 50%;
	margin-left: -32px;
	margin-top: 15px;
}


/*Gallery Grid & Slider*/
.khb-sq-gallery .et_pb_gallery_image {
  padding-top: 100%;
  display: block;
}

.khb-sq-gallery .et_pb_gallery_item img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}

.khb-gallery .et_pb_gallery_pagination {border-top: 2px solid #000;}
.khb-gallery .et-pb-controllers {bottom: 0px;}
.khb-gallery .et-pb-controllers a{
	background-color: #fff;
	opacity: 1;
	transition: width 3s color 3s;
	box-shadow: 2px 2px 5px #000;
}
.khb-gallery .et-pb-active-control {
	background-color: var(--accent-color)!important;
	width: 20px;
}
.khb-gallery .et_pb_gallery_items, .khb-gallery .et_pb_gallery_item, .khb-gallery .et_pb_gallery_image, .khb-gallery .et_pb_gallery_image a, .khb-gallery .et_pb_gallery_image img {
	height: 100%!important;
	max-height: 600px;
	object-fit: cover;
	pointer-events: none;
	margin-bottom: 0px!important;
}

.khb-gallery .et-pb-slider-arrows {color: #000;}
.khb-gallery .et-pb-slider-arrows .et-pb-arrow-prev, .khb-gallery .et-pb-slider-arrows .et-pb-arrow-next {opacity: 1;}
.khb-gallery .et-pb-slider-arrows .et-pb-arrow-prev{left: -50px;}
.khb-gallery .et-pb-slider-arrows .et-pb-arrow-next{right: -50px;}


/*Vertical Menu*/
.khb-vert-menu ul.et-menu {flex-flow: column wrap;}
.khb-vert-menu .et_pb_menu__menu {display: flex!important;}
.khb-vert-menu .et_mobile_nav_menu {display: none!important;}

/*Number Counter*/
.khb-numbercounter-dollar .percent-value:before {content:'$'}
.khb-numbercounter-plus .percent-value:after {content:'+'}


/*Person Module*/
.khb-person .et_pb_team_member_description{
	padding: 30px 0px;
	padding-right: 30px;
}


/*Post Slider*/
.khb-post-slider .et-pb-controllers a{
	background-color: #fff;
	opacity: 1;
	transition: width 3s color 3s;
	box-shadow: 2px 2px 5px #000;
}
.khb-post-slider .et-pb-active-control {
	background-color: var(--accent-color)!important;
	width: 20px;
}

/*Slider*/
.khb-slider .et-pb-controllers {bottom: 0px;}
.khb-slider .et-pb-controllers a{
	background-color: #fff;
	opacity: 1;
	transition: width 3s color 3s;
	box-shadow: 2px 2px 5px #000;
}
.khb-slider .et-pb-active-control {
	background-color: var(--accent-color)!important;
	width: 20px;
}

.khb-slider .et_pb_slide_title:after {
	content: '';
	background: var(--accent-color);
	height: 4px;
	width: 64px;
	display: flex;
	justify-content: center;
	position: absolute;
	left: 50%;
	margin-left: -32px;
	margin-top: 15px;
}

/* Parallax Background Overlay */
.khb-bg .et_parallax_bg::before { 
    background-color: rgba(0, 0, 0, 0.4); 
    content: ""; 
    height: 100%;
    width: 100%;
    position: absolute; 
    left: 0;
    top: 0; 
}