/*
 Theme Name:        Willow Leaf Web Solutions - Divi Child
 Description:       Divi Child Theme
 Author:            Jonathan Clensy
 Author URI:        https://www.willowleafwebsolutions.co.uk
 Date Last Amended: 20/12/21
 Template:          Divi
*/

/*
 Divi Default Breakpoints:
	Desktop:	981 to 1920
	Tablet: 	768 to 980
	Mobile:		320 to 767
 * /



/*** HEADER LINKS - START*********************/
/* You can set all the header link colours in the customizer (apart from the hover)*/
#top-menu li a:hover {
	color: #B88EB1!important;
}
/*** HEADER LINKS - END**********************/

/*** FOOTER LINKS - START***********************/
.footerlinks {
	color:#ffffff;
}
.footerlinks:hover {
	color: #B88EB1;
} 

.subfooter_col1 {
	width:35%!important;
}
.subfooter_col2 {
	width:10%!important;
}
.subfooter_col3 {
	width:10%!important;
}
.subfooter_col4 {
	width:10%!important;
}
.subfooter_col5 {
	width:35%!important;
}

/*** FOOTER LINKS - END***********************/



/*****************************************/
/*** HOMEPAGE FULL WIDTH HEADER - START***/
/*****************************************/
@media screen and (max-width: 767px) {
	.et_pb_fullwidth_header_0 .header-content img.header-logo	/* Target the logo for mobile viewport */
	{
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 80%;
		margin-top: -100px;
		
	}

	.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button,
	.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_two.et_pb_button /* Target the button for mobile viewport */
	{
		width:100%;
		text-align:center;
	}
	
	.homepage-CTA-desktop-break	/* CTA has a break midway through for desktop & tablet viewport only */
	{
		display:none;
	}
	
	.jc-HP-herotext /* Add some background around the H1 and H2 headers of the homepage when viewed by Mobile*/
	{
		background-color: rgba(65, 93, 67, 0.9); /* 90% opacity. Opacity here only applies to the DIV and not any of the sublevel elements */
		border-radius:5px;margin-top:50px;padding-top:20px;padding-bottom:20px;padding-left:20px;padding-right:20px;
	}
	
}
/*** HOMEPAGE FULL WIDTH HEADER - END***/

/*************************************************/
/*** HOMEPAGE PACKAGES BLURBS - START*************/
/*************************************************/
.et_pb_blurb_0 .et_pb_module_header, .et_pb_blurb_1 .et_pb_module_header, .et_pb_blurb_2 .et_pb_module_header, .et_pb_blurb_3 .et_pb_module_header	/* Target the heading title of a blurb */
{
	height:70px;
}

.homepage-packages-blurb-text-container /* Target the main text container of a blurb */
{
	position: relative; 
	height: 450px;
}

@media screen and (min-width: 768px) and (max-width: 980px) {
	.homepage-packages-blurb-text-container /* Target the main text container of a blurb */
	{
		height: 350px;
	}
}
@media screen and (min-width: 320px) and (max-width: 767px) {
	.homepage-packages-blurb-text-container /* Target the main text container of a blurb */
	{
		height: 350px;
	}
}

.homepage-packages-blurb-text-price /* Target the price section of a blurb - forcing it to the bottom of the blurb column */
{
	width: 100%; 
	position: absolute; 
	padding-top:0px;
	bottom: 95px;
	/*border-top: 5px solid #B88EB1;*/ /*Adds a border to the top of the class*/
}

@media screen and (min-width: 768px) and (max-width: 980px) {
	.homepage-packages-blurb-text-price
	{
		bottom: 10px;
	}
}
@media screen and (min-width: 320px) and (max-width: 767px) {
	.homepage-packages-blurb-text-price
	{
		bottom: 10px;
	}	
}

.homepage-packages-blurb-text-price-amount
{
	font-size: 40px!important; 
	font-weight: bold!important;
}

a.homepage-packages-blurb-btn /* Target the button inside a blurb */
{
  	display:inline-block;	/* Required to make width and margin-top work */
	color:#ffffff;
  	width:100%;
	margin-top:10px;
	padding-left:20px;
	padding-right:20px;
	padding-top:10px;
	padding-bottom:10px;
	border-radius: 10px;
	background-color:#B88EB1;
}

a.homepage-packages-blurb-btn:hover
{
	background-color:#6CBE95;
}

/* Targeting specific non standard viewport sizes in the mobile range to reduce the font-size for the package blurbs so that they fit in the columns*/
@media screen and (min-width: 480px) and (max-width: 650px) {
	.et_pb_blurb_0 .et_pb_module_header, .et_pb_blurb_1 .et_pb_module_header, .et_pb_blurb_2 .et_pb_module_header, .et_pb_blurb_3 .et_pb_module_header
	{
		font-size:1.5em!important;
	}
	.et_pb_blurb_0 .et_pb_blurb_content, .et_pb_blurb_1 .et_pb_blurb_content, .et_pb_blurb_2 .et_pb_blurb_content, .et_pb_blurb_3 .et_pb_blurb_content
	{
		font-size:0.8em!important;
	}
	.homepage-packages-blurb-text-price-amount
	{
		font-size: 1.5em!important; 
	}
	.homepage-packages-blurb-text-price h4
	{
		font-size: 1.5em!important; 
	}
}

/* Targeting specific non standard viewport sizes in the desktop range to reduce the font-size for the package blurbs so that they fit in the columns*/
@media screen and (min-width: 981px) and (max-width: 1350px) {
	.et_pb_blurb_0 .et_pb_module_header, .et_pb_blurb_1 .et_pb_module_header, .et_pb_blurb_2 .et_pb_module_header, .et_pb_blurb_3 .et_pb_module_header
	{
		font-size:1.2em!important;
	}
	.et_pb_blurb_0 .et_pb_blurb_content, .et_pb_blurb_1 .et_pb_blurb_content, .et_pb_blurb_2 .et_pb_blurb_content, .et_pb_blurb_3 .et_pb_blurb_content
	{
		font-size:0.8em!important;
	}
	.homepage-packages-blurb-text-price-amount
	{
		font-size: 1.5em!important; 
	}
	.homepage-packages-blurb-text-price h4
	{
		font-size: 1.5em!important; 
	}
}

/*** HOMEPAGE PACKAGES BLURBS - END***************/

/*************************************************/
/*** HOMEPAGE TESTIMONIAL SLIDER START ***********/
/*************************************************/
/* Stop the sliders from having default animation*/
.jc_hp_testimonial_slider .et_pb_slide_description {
    animation: none !important;
}

/* The slider applies its own font sizes so we need to overule them here */
.jc_hp_testimonial_slider .et_pb_slide_content {
	font-size:16px !important;
	font-weight: 500 !important;
}

/* Always display the navigation arrows */
.jc_hp_testimonial_slider .et-pb-slider-arrows a.et-pb-arrow-prev,
.jc_hp_testimonial_slider .et-pb-slider-arrows a.et-pb-arrow-next {
    opacity: 1 !important;
}
.jc_hp_testimonial_slider .et-pb-slider-arrows a.et-pb-arrow-prev {
    left: 22px;
}
.jc_hp_testimonial_slider .et-pb-slider-arrows a.et-pb-arrow-next {
    right: 22px;
}

@media screen and (min-width: 768px) and (max-width: 980px) {
	/* Tablet */
	.jc_hp_testimonial_slider .et_pb_slide_content {
		font-size:14px !important;
	}
}

@media screen and (min-width: 320px) and (max-width: 767px) {
	/* Mobile */
	.jc_hp_testimonial_slider .et_pb_slide_content {
		font-size:13px !important;
	}
	
	.jc_hp_testimonial_slider .et-pb-slider-arrows a.et-pb-arrow-prev,
	.jc_hp_testimonial_slider .et-pb-slider-arrows a.et-pb-arrow-next {
		opacity: 0 !important;
	}
}

/*** HOMEPAGE TESTIMONIAL SLIDER - END ***********/



/*************************************************/
/*** DIVI CONTACT FORM - START********************/
/*************************************************/

/* Style the Divi Form Success Message */
.et-pb-contact-message p {
display: inline-flex;
font-size: 27px;
color: #242424;
text-align:center !important;
line-height:1.5em !important;
padding-top:25px !important;
padding-bottom:25px !important;
}

/* Style the Divi Form Error Message */
.et-pb-contact-message li {
color: #ffffff;
font-size:16px;
}

@media screen and (max-width: 980px) {
	.et-pb-contact-message p {
		font-size: 25px;
		text-align:left !important;
	}
	
	.et-pb-contact-message li {
		font-size:14px;
	}
}

@media screen and (max-width: 767px) {
	.et-pb-contact-message p {
		font-size: 20px;
		text-align:left !important;
	}
	
	.et-pb-contact-message li {
		font-size:13px;
	}
}
/*** DIVI CONTACT FORM - END*********************/

/*************************************************/
/*** ABOUT PAGE - START***************************/
/*************************************************/
.img-about-left-aligned		/* Handle images to either align to the left or to the right and for text to wrap around them */
{
	float:left;
	max-width:350px;
	margin-right:20px!important;
	margin-bottom:20px!important;
}

.img-about-right-aligned
{
	float:right;
	max-width:350px;
	margin-left:20px!important;
	margin-bottom:20px!important;
}

@media screen and (max-width: 767px) {
	.img-about-left-aligned, .img-about-right-aligned  /* Handle the images when viewed on a mobile to align centrally with no float to wrap the text */
	{
		float:none;
		display: block!important;
  		margin-left: auto!important;
  		margin-right: auto!important;
		max-width:300px;
	}	
}

/*** ABOUT PAGE - END*****************************/

/*************************************************/
/*** SERVICES PAGE - START************************/
/*************************************************/

.et_pb_pricing_table_0 .et_pb_pricing_heading, .et_pb_pricing_table_1 .et_pb_pricing_heading, .et_pb_pricing_table_2 .et_pb_pricing_heading, .et_pb_pricing_table_3 .et_pb_pricing_heading
{
	background-color:#415D43!important;  /*Set the color of the top part of each pricing table column */
	border-top:solid 20px #415D43;
	/*border-left: 2px solid #ffffff;
	border-right: 2px solid #ffffff;*/
}

.et_pb_pricing_table_0 .et_pb_pricing_content_top, .et_pb_pricing_table_1 .et_pb_pricing_content_top, .et_pb_pricing_table_2 .et_pb_pricing_content_top, .et_pb_pricing_table_3 .et_pb_pricing_content_top
{
	background-color:#415D43!important;
	border-bottom:solid 20px #415D43; /* Adding spacing below the price */
	margin-bottom:50px;	/* Adding margin at top of main content */
	/*border-left: 2px solid #ffffff;
	border-right: 2px solid #ffffff;*/
}

.et_pb_pricing_table_0 .et_pb_pricing_heading .et_pb_best_value, .et_pb_pricing_table_1 .et_pb_pricing_heading .et_pb_best_value, .et_pb_pricing_table_2 .et_pb_pricing_heading .et_pb_best_value, .et_pb_pricing_table_3 .et_pb_pricing_heading .et_pb_best_value
{
	padding-top:30px;
}


.pricingTableMainTextBlock
{
	/*background-color: red;*/
	display: block; 
	min-height: 300px;
	margin-top:-30px; /* Added to counter the span required for the anchorOffset */
}

.anchorOffset
{
	/* The anchor tags for the different services need to be offset to display the top of the service section*/
	display: inline;
    position: relative;
    top: -250px;
    visibility: hidden;
	
}


.pricingTableListing
{
	/*background-color: red;*/
	font-weight: bold;
	
	display:block;
	margin-left:0px;
	margin-right:0px;
}

.pricingTableSeparator
{
	height:3px;
	width: 10%; 
	background-color:#B88EB1;
	border: none;
	margin-top: 0px; 
	margin-bottom: 0px;	
}

.priceListAdditionalServices
{
	margin-left:30px;
	padding-left:20px;
	padding-right:20px;

}

.priceListAdditionalServices ul
{
	line-height: 2em;
}

/* DESKTOP - Targeting specific non standard viewport sizes in the desktop range to reduce the font-size for the package blurbs so that they fit in the columns*/
@media screen and (min-width: 981px) and (max-width: 1375px) {
	
	.pricingTableMainTextBlock
	{
		/*background-color: Blue; */
		margin-left:-10px;
		margin-right:-10px;
	}
	
	.pricingTableListing
	{
		margin-left:-10px;
		margin-right:-10px;
	}
	
}

@media screen and (min-width: 981px) and (max-width: 1260px) {
	
	.et_pb_pricing_table_0 .et_pb_pricing_heading h2, .et_pb_pricing_table_1 .et_pb_pricing_heading h2, .et_pb_pricing_table_2 .et_pb_pricing_heading h2, .et_pb_pricing_table_3 .et_pb_pricing_heading h2
	{
		font-size: 20px;
	}
	
	.pricingTableMainTextBlock
	{
		/*background-color: Yellow; */
		font-size:15px;
		min-height:350px;
	}
	
	.pricingTableListing
	{
		font-size:15px;
	}
}

@media screen and (min-width: 981px) and (max-width: 1000px) {
	
	.pricingTableMainTextBlock
	{
		/*background-color: Green; */
		font-size:14px;
	}
	
	.pricingTableListing
	{
		font-size:14px;
	}
	
}

/* TABLET */
@media screen and (min-width: 768px) and (max-width: 980px) {
	
	.pricingTableMainTextBlock
	{
		/*background-color: Orange; */
		min-height: 200px;
	}
}

/* MOBILE */
@media screen and (max-width: 767px) {
	
	.pricingTableMainTextBlock
	{
		/*background-color: Pink; */
		min-height: 100px;
	}
}

/* For Additional Services section - to keep the 2 columns side by side at all viewports 25/03/22 - Tablets and Mobiles */
@media screen and (max-width: 980px) {
	.additionalservices-two-column .et_pb_column
	{
		/*width:50%!important;*/
		
	}
}




/*** SERVICES PAGE - END**************************/

/*************************************************/
/*** CUSTOM BULLET POINTS - START*****************/
/*************************************************/
.custom_bullets ul li {
  padding-left: 50px;
  list-style:none;
  margin-bottom: 20px;
}

.custom_bullets ul li::before {
  content: '';
  display: inline-block;
  margin-right: 7px;
  margin-left: -30px;
  padding-right: 5px;
  font-family:'ETmodules';
  font-size: 1.3em;
  vertical-align: middle;
}

@media screen and (max-width: 980px) {
	.custom_bullets ul li
	{
		padding-left: 50px;	
		margin-bottom: 0px;
		text-align:left;
	}
}

.custom_bullets--check ul li::before {
  content: '\5a';
  color: #B88EB1;
  font-weight:bold;
}
/*** CUSTOM BULLET POINTS - END*******************/

/*************************************************/
/*** SITE MAP BULLET POINTS - START***************/
/*************************************************/
.sitemap-bulletpoint
{
	padding-bottom: 30px;
}
/*** SITE MAP BULLET POINTS - END****************/

/**********************************************************************************/
/*** DISABLE IMAGE ANIMATION FOR ALL MOBILE & TABLET DEVICES - START***************/
/**********************************************************************************/
/* Have removed this as a work around to the divi jumping header bug as I have added a fade-in to all page headers */
/*@media all and (max-width: 981px) {
	.et_animated {
		opacity: 1 !important
	}
	.et_pb_section * {
		-o-transition-property: none!important;
		-moz-transition-property: none!important;
		-webkit-transition-property: none!important;
		transition-property: none!important;
		-o-transform: none!important;
		-moz-transform: none!important;
		-ms-transform: none!important;
		-webkit-transform: none!important;
		transform: none!important;
		-webkit-animation: none!important;
		-moz-animation: none!important;
		-o-animation: none!important;
		animation: none !important;
	}
}*/
/*** DISABLE IMAGE ANIMATION FOR ALL MOBILE & TABLET DEVICES - END*****************/

/**********************************************************************************/
/*** STYLE THE WP FORMS LITE VARIOUS SECTIONS - START *****************************/
/**********************************************************************************/
.wpforms-form input[type=submit], 
.wpforms-form button[type=submit] {
    background-color: #B88EB1 !important;
	border: 2px solid #B88EB1 !important; 
	border-radius: 10px !important;
    color: #ffffff !important; 
    font-size: 20px !important; 
	
    padding: 10px 30px 10px 30px !important; 
	letter-spacing: 1px !important;
	
}

.wpforms-form input[type=submit]:hover, 
.wpforms-form input[type=submit]:active, 
.wpforms-form button[type=submit]:hover, 
.wpforms-form button[type=submit]:active {
    background-color: #6CBE95 !important; 
	border: 2px solid #6CBE95 !important; 
}

.wpforms-form .wpforms-submit-container {
    text-align: right !important;
}

.wpforms-form input, .wpforms-form textarea{
    background-color: #eeeeee !important; 
	border: 2px solid #eeeeee !important; 
	border-radius: 10px !important;
	color: #242424 !important;
	padding-top: 30px !important;
	padding-bottom: 30px !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	font-size:16px !important;
	line-height: 1.7em !important;
	
}

/* Style input fields and paragraph fields when they have focus */
.wpforms-form input:focus, 
.wpforms-form textarea:focus {
    background-color: #B88EB1!important; 
	color: #ffffff !important;
}

/* Style the placeholder text with and without focus. This has to be done for the various webkits for different browsers */

 /************** Chrome and Safari ****************/
.wpforms-container ::-webkit-input-placeholder {
   color: #242424;
}
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder{
  color: #ffffff;
}

 /************** Mozilla Firefox 4 to 18 ****************/
.wpforms-container :-moz-placeholder { 
   color: #242424;
   opacity: 1;
}
input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder{
  color: #ffffff;
}
 
 /************** Moxilla Firefox 19+ ****************/
.wpforms-container ::-moz-placeholder { 
   color: #242424;
   opacity: 1;
}
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder{
  color: #ffffff;
}
 
 /************** Internet Explorer 10-11 ****************/
.wpforms-container :-ms-input-placeholder { 
   color: #242424;
}
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder{
  color: #ffffff;
}
 
 /************** Microsoft Edge ****************/
.wpforms-container ::-ms-input-placeholder { 
   color: #242424;
}
input:focus::-ms-input-placeholder,
textarea:focus::-ms-input-placeholder{
  color: #ffffff;
}

 /************** Catch All ****************/ 
.wpforms-container ::placeholder {
   color: #242424;
}
input:focus::placeholder,
textarea:focus::placeholder{
  color: #ffffff;
}

/***** Style the confirmation message - by default this is shown in a green box, so this code disables the box *********/
div.wpforms-confirmation-container-full {
    color: inherit;
    margin: 0;
    background: none!important;
    border: none!important;
    padding: 0;
	
	/* Following is used to style the confirmation text */
	padding-top:30px;
	padding-bottom:30px;
	font-weight: bold;
	text-align:center;
	font-size:25px;
	line-height: 1.5;
}
 
div.wpforms-confirmation-container-full p:last-of-type {
    margin: inherit;
}
/*** STYLE THE WP FORMS LITE VARIOUS SECTIONS - END *******************************/

/**********************************************************************************/
/*** STYLE THE BLOG SUMMARY PAGE - START ******************************************/
/**********************************************************************************/
.jc_blog_summary .et_pb_post{
	background-color:#415D43!important;	/* This sets the colour of the background of the blog articles when listed in the grid on the blog page*/
}
/**********************************************************************************/
/*** STYLE THE BLOG SUMMARY PAGE - END ********************************************/
/**********************************************************************************/

/**********************************************************************************/
/*** STYLE THE BLOG POST CONTENT SECTION - START **********************************/
/**********************************************************************************/


/* This is required to ensure that for mobile viewports the header willow tree is correctly positioned.
 * Not sure why they are behaving differently to a standard page header here in the DIVI Theme Builder custom body for All Posts */
@media screen and (max-width: 767px) {
	.blog_post_header img.header-logo {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 80%;
		margin-top: -100px;
	}
}




/*make the featured image & meta parts of the blog post flexible - this is necessary to be able to order the elements*/
.blog_article_featured_image {
	display: flex;
	flex-direction: column;
}

/*target the featured image*/
.blog_article_featured_image .et_pb_title_featured_container {
	order: 1;
	margin-bottom:10px;
}

/*target the post meta*/
.blog_article_featured_image .et_pb_title_container {
	order: 2;
}

/* This class will style the featured image as it appears embedded within the blog article */
.blog_article_featured_image .et_pb_title_featured_container img
{
	border-radius:20px;
}

/* This sets the content of the post to be the full width of the column in which it sits */
.blog-post-content .et_pb_row {
	width:100%;
	margin-top:-70px;
}

/* Added: 06/03/24: style bullet points for blog articles */
.blog-post-content ul li{
	margin-bottom: 20px;
}
.blog-post-content ul li:last-child{
	margin-bottom: 0px;
}




/* Style embedded images within blog articles */
.blog-post-content img{
	border-radius:20px;
}

.img-blog-post-left-aligned		/* Handle images to either align to the left or to the right and for text to wrap around them */
{
	float:left;
	max-width:400px;
	margin-right:20px!important;
}

.img-blog-post-right-aligned
{
	float:right;
	max-width:400px;
	margin-left:20px!important;
}

@media screen and (max-width: 980px) {
	.img-blog-post-left-aligned, .img-blog-post-right-aligned  /* Handle the images when viewed on a mobile to align centrally with no float to wrap the text */
	{
		float:none;
		display: block!important;
  		margin-left: auto!important;
  		margin-right: auto!important;
		max-width:300px;
	}	
}

/*Added: 06/03/24: Control highlighted tip sections within blog articles */
.highlight-section-blog-post
{
	width: 80%; 
	margin: 0 auto; 
	display: block; 
	background-color: #b88eb1; 
	color: #ffffff; 
	padding: 10px; 
	margin-top:20px;
	margin-bottom:20px;
	border-radius: 20px;
}
@media screen and (max-width: 980px) {
	.highlight-section-blog-post
	{
		width: 100%; 
	}	
}

/**********************************************************************************/
/*** STYLE THE BLOG POST CONTENT SECTION - END ************************************/
/**********************************************************************************/

/**********************************************************************************/
/*** STYLE THE BLOG POSTS SIDEBAR SECTION - START *********************************/
/**********************************************************************************/

.pa-blog-sidebar-list .entry-title,
.pa-blog-sidebar-list .post-meta {
	text-align:center;
}

.pa-blog-sidebar-list .entry-featured-image-url img {
	margin-bottom:0px;
}

.pa-blog-sidebar-list h3 {
	margin-top:-20px!important;
}

.pa-blog-sidebar-list .et_pb_post:not(:last-child) {
	border-bottom: 1px solid #dddddd!important;
	padding-bottom:0px;
	margin-bottom:20px;
	
}

/* This hides the section if there are no other posts to display. Without this you would see a nasty 'No Results Found' message */
.et_pb_ajax_pagination_container .not-found-title, .not-found-title + p {
	display:none
}


@media screen and (max-width: 980px) {
	.pa-blog-sidebar-list .entry-featured-image-url img {
		display:block;
		margin-left: auto;
		margin-right: auto;
		
	}
	
}

/**********************************************************************************/
/*** STYLE THE BLOG POSTS SIDEBAR SECTION - END ***********************************/
/**********************************************************************************/