/* CSS for home page */

/* Anchors in the hero */
#hero a {
	color: var(--highlight_color_level3) !important;
	border-bottom-color: var(--highlight_color_level3);

}


/***
 * Header jumping 
 * https://divi.space/tutorials/fixing-the-jumping-header-issue-in-divi/
 * Values taken from the page after it's rendered
*/

div.header-content > img{opacity:1;} /* Include on Home only. Other pages have the logo altered by functions.js*/

/*body.home*/ #page-container {
	padding-top: 0;
}

.et_pb_slider .et-pb-controllers {
	bottom:0;
}

/* Better text shadow for the hero text */
div#hero .et_pb_bg_layout_dark .et_pb_fullwidth_header_subhead {
	text-shadow: 2px 2px 3px rgb(0 0 0 / 80%);
	line-height: 1.3em;
	/*padding-bottom:0.5em; */
	font-size: var(--fs-600) !important;
}


/* Couch fade-in-scroll neatness */
#hero > section > div.et_pb_fullwidth_header_container > div.header-image-container > div > img {
	transition: opacity 1s linear, background 4s ease-in-out !important;	/* This overrides the background transition CSS in javascript*/
	transition-delay: 0;
}

/* Margin around the couch */
#hero div.et_pb_fullwidth_header_container div.header-image-container img {
	margin-top:1em;
}

/* Position of the "click me to scroll down" icon */
span.scroll-down.et-pb-icon {
	margin-bottom:76px;
}
/* Glowing "click me" image */
@keyframes attentionglow {
	/*
	30% {opacity:1;}
	50% {opacity:0;}
	70% {opacity:1;}
	*/
	0% {opacity:0;}
	70% {opacity:0;}
	85% {opacity:1;}
	100% {opacity:0;}
}
/* Front page couch "down arrow" */
.et_pb_fullwidth_header .et_pb_fullwidth_header_scroll a .et-pb-icon { 
	opacity:1;
	animation-name: attentionglow;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	/*color: var(--anchorline_standard);*/
	/*color: var(--highlight_color_heroslider) !important;*/
}
.et_pb_fullwidth_header .et_pb_fullwidth_header_scroll a .et-pb-icon:hover {
	color: var(--highlight_color_level3);
	animation-name: unset;
}
.et_pb_fullwidth_header .et_pb_fullwidth_header_scroll a {
	background-image:none !important;
}


/* Trying to avoid the JUMPIN when the header loads */
/*.et_parallax_bg_wrap .et_parallax_bg*/ 
/*body.home*/ div#prehero, /*body.home*/ div#prehero > .et_pb_fullwidth_image, /*body.home*/ div#prehero > .et_pb_fullwidth_image > img {
	width: 100vw;
	height:100vh;
	position:absolute;
}
/* Divi Builder*/
html.et-bfb-html /*body.home*/ div#prehero,
	html.et-bfb-html /*body.home*/ div#prehero > .et_pb_fullwidth_image, 
	html.et-bfb-html /*body.home*/ div#prehero > .et_pb_fullwidth_image > img {
	width: unset;
	height: unset;
	position: unset;
}

/*body.home*/ div#prehero > .et_pb_fullwidth_image > img {
	object-fit: cover;
	object-position: 0 -10px;
	z-index:1;
	/*transition: all 1s;*/
}

div.JFBQuotation {
	font-size: var(--fs-800);
	line-height: 1.6px;
}
div.JFBQuotation p {
	text-align:center;
}
div.JFBQuotation p.quotation {
	font-style:italic;
}
div.JFBQuotation img.quotation.small {
	top:0.2em;
}
div.JFBQuotation p.author {
	font-size:90%;
	margin-top:0.5em;
}

@media only screen and (max-width: 450px) {
	div.JFBQuotation {
		font-size: var(--fs-400);
	}
}



/**********************************
 * Potential for a media/Portrait setting so that the prehero image positions correctly? 
 */
 @media only screen and (orientation: portrait){
	/* HOME PAGE
 	 * Managing the prehero image's position
	 */
	body.home div#prehero>.et_pb_fullwidth_image > img {
		/* object-position: center 100px; */ /* 120px 80px*/
		object-position: calc(50% + 15px) 60px;
	}
}



/* Experimental - we can't stop the image from loading if it's already in teh HTML, so remove it from the HTM and control it here */
/* Nah - do it in javascript */
/*
body.home div#prehero>.et_pb_fullwidth_image > img.IsBot {
	content:url();
}
body.home div#prehero>.et_pb_fullwidth_image > img:not(.IsBot) {
	content:url("/wp-content/uploads/sites/5/2021/04/FrontPagePreLoadHeroImage-1b.jpg");
}
*/
/* Make the prehero image invisible until we're ready for it */

/*body.home*/ div#prehero>.et_pb_fullwidth_image {
	transition: all 0.3s;
}
/*
body.home div#prehero>.et_pb_fullwidth_image > img {
	display:none;
}
*/

/*******************
 * Images etc that are to be loaded if there's not a Bot
 */
/* Doesn't work 0 Divi is doing soe resizing that makes this useless */
/*
#hero > section.et_pb_fullwidth_header > span.et_parallax_bg_wrap > span.et_parallax_bg {
	opacity:0;
}
*/

/*
body.home.NotBot div#prehero>.et_pb_fullwidth_image > img {
	content: url("/wp-content/uploads/sites/5/2021/04/FrontPagePreLoadHeroImage-1b.jpg") !important;
	display:block;

*/ 

/*
We're not using ajax_loader at the present time...

body.home.NotBot div#ajax_loader > .et_pb_row > .et_pb_column > .et_pb_module > .et_pb_code_inner > img {
	content: url("/wp-content/uploads/sites/5/2021/03/Loading.gif");
}
 
body.home.NotBot img.quotation {
	content: url("/wp-content/uploads/sites/5/2015/10/examplequote11.gif");
}
*/



/*
body.home div#hero {
	background: rgb(86,160,225);
	background: linear-gradient(180deg, rgba(86,160,225,1) 0%, rgba(0,102,185,1) 75%) !important;
}
*/

/*body.home*/ div#hero .et_pb_fullwidth_header {
	opacity:0; 
	/*transition: all 0.5s;*/	/* determins how slowly the front page hero section appears*/
	transition: opacity 0.5s;
}
/* PATCH: 	This stops the top juddering (leaving a big light blue bar) when the transform is applied.
 *			We'll undo this transtion in javascript functions.js
 *			April 2020 - commenting out as we have a new "prehero" image
 */
 /*
body.home #prehero, body.home #prehero .et_pb_fullwidth_image, body.home #prehero img, body.home #hero, body.home #hero .et_parallax_bg {
	transition: all 1s ease-out;
}
*/
/*body.home*/ div#prehero {
	z-index:99;
	background-color:#6ca1cb; /*#529ad0*/
}
/*body.home*/ div#prehero .et_pb_fullwidth_image {
	background-color: #6ca1cb; /*#529ad0*/
}


/* https://intercom.help/elegantthemes/en/articles/2359901-divi-header-jumping-moving-on-page-load */
/*body.home*/ div#hero /*.et_pb_section:first-child*/ {
	padding:0px !important;
	top:0 !important;
	margin-top:0 !important;
}
/*body.home*/ div#hero .et_pb_module:first-child {
	padding:0px !important;
}
/*body.home*/ div#hero .et_pb_fullwidth_header {
	padding-top:0 !important;
	top:0 !important;
	margin-top:0 !important;
}

/*body.home*/ div#hero div.et_pb_fullwidth_header_container {
	width: 95%; /*90%;*/
	max-width: 1200px;
}
/*body.home*/ div#hero div.et_pb_fullwidth_header_container > div.header-content-container > div.header-content {
	width: 90%;
	max-width: initial;
}


/* PayPal "Thanks" */
.PaypalThanks { 
	opacity:1;
	z-index:9;
	position: fixed; 
	top: 25%; 
	left: 20%; 
	padding:20px 40px 30px 40px;
	width: 60vw; 
	border-radius: 12px;
	box-shadow: 5px 5px 16px rgba(0,0,0,0.55); 
	background-image: linear-gradient(180deg,#2b87da 0%,#381575 100%);
	background-color: white;
	border-left:2px solid #0ff;
	border-top:2px solid #0ff;

	> img {
		float:right; height:7vw; margin-left:2em; min-width:100px; min-height:100px; filter: drop-shadow(13px 17px 10px #333)
	}
	> h2 {
		font-size: var(--fs-h3); 
		color: var(--lowlight_color_level2); 
		font-weight:bold; 
		border-left: none !important;
		border-right: none !important;
		background: none !important;
		box-shadow: none !important;
		border-bottom: none !important;
		padding-left: 0 !important;
		text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	}
	p {
		color:white
	}
/*
.PaypalThanks img {width:25%; height:auto;}
*/
}

/* Slider arrows */
.et-pb-slider-arrows a {
	text-decoration: none;
}

/* Design of the Services Buttons */
.service_buttons a.et_pb_button {
	line-height:1.4em !important;
}

/* Buttons with smaller text */
a.et_pb_button.book_learnmore /*, a.et_pb_button.et_pb_smallerbutton*/  {
	font-size:10px;
	width:50%;
}
a.et_pb_button.book_learnmore::after /*, a.et_pb_button.et_pb_smallerbutton::after*/ {
	line-height: 1em;
}


@media only screen and ( max-width: 980px ) {
	.PaypalThanks{width:90vw; left:5%; top:15%; padding:20px;}
	.PaypalThanks > img {width:25vw; height:auto; margin-left:1em; min-width:132px}

}

/* Service Buttons - hopefully catching Google's attention */
/* the class .service_buttons is placed on the section container, the row is made "Equalise Columns" */
/* .service_buttons (r0w) / .et_pb_column / .et_pb_button_module_wrapper / .et_pb_button */
/*
.service_buttons .et_pb_column,
	.service_buttons .et_pb_column .et_pb_button_module_wrapper {
	display:flex;
	align-items: stretch;
	border: 1px solid transparent;	// Makes the flex height work for some reason
}
*/
.service_buttons .et_pb_column,
	.service_buttons .et_pb_column .et_pb_button_module_wrapper,
		.service_buttons .et_pb_column .et_pb_button_module_wrapper .et_pb_button {
	flex-grow: 1;
}

.service_buttons .et_pb_column {
	justify-content: center;
}
.service_buttons .et_pb_button {
	font-size: var(--fs-300);
	/*
	min-height:100%;
	height: 4.5em;
	*/
    display: flex !important;
    align-items: center;
    justify-content: center;
	text-align: center;
}
@media only screen and ( max-width: 479px ) {
	#hero > section > div.et_pb_fullwidth_header_container > div.header-content-container > div {
		margin-top:1em;
		margin-bottom: 0;
	}
	#hero > section > div.et_pb_fullwidth_header_container > div.header-image-container.bottom {
		margin-bottom: 1em; /*2em;*/
	}
	.service_buttons {
		padding-right: 10px;
		padding-left: 10px;
	}
	.service_buttons .et_pb_row {
		padding-bottom:0;
	}
	.service_buttons .et_pb_column_1_4 {
		width:50% !important;
		float:left;
	}
 	.service_buttons .et_pb_button {
		height:inherit;
		width: 90%;
	    margin: 0 auto;
		font-size:var(--fs-300);
		line-height: 1.2em !important;
	}
}
@media only screen and ( max-width: 300px ) {
	.service_buttons .et_pb_button {
		font-size: 85%;
	}
}



/*body.home*/ h1 {
	/*font-size: 52px*/ /*46px*/
	margin-bottom: 0 /*0.3em*/;

/*
	background: -webkit-linear-gradient(#eee, #333);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
*/
}
h1 span.h1::before {
	/*content: " ~ ";*/
	content: " ";
}


/*body.home*/ .et_pb_fullwidth_header .et_pb_fullwidth_header_container.center .header-content img /*:first-child*/ {
	width: 50vw;
}

/* Try removing the buttons at the top - encourage scrolling downwards? */
/*body.home*/ #hero /*.et_pb_section_0*/ div.et_pb_fullwidth_header_container a.et_pb_more_button {
	display:none !important;
}
/* Logo image in the hero header */
/*
	Update - now controlled my jQuery
body.home #hero div.et_pb_fullwidth_header_container > div.header-image-container.bottom > div > img {
	width: 55%;
    max-width: 600px;
}
*/
/*body.page #page_header div.et_pb_fullwidth_header_container div.header-content > img {*/
body.page #page_header div.et_pb_fullwidth_header_container div.header-content img.header-logo {
	width: 40%;
	height: auto;
	max-width: 360px; 
}

/* HOME PAGE */
section#page_header,
#page_header section  {
	padding-top: 35px;
	padding-bottom: 0px;
}

/*body.home*/ #page_header div.header-content > img {
	height:74px;
	width:auto;
	float:left;
}

/* "Latest" blog post */
div#BlogLatest {
	border-radius: 16px;
	box-shadow: 0 3px 6px rgb(0 0 0 / 25%);
}
/* Darken the background image - https://linuxhint.com/different-methods-to-darken-background-image-css/ */
div#BlogLatest div.et_pb_slides div.et_pb_slide {
	background-color: rgb(146, 143, 143);
	background-blend-mode: multiply;
}

div#BlogLatest h2.et_pb_slide_title {
	border:none;
	text-align: center;
}

@media only screen and (orientation: portrait) and (max-width: 981px) { 
	div#BlogLatest h2.et_pb_slide_title {
		font-size:150%;
	}
}

div#BlogLatest div.et_pb_slide_content p {
	font-size: var(--fs-400) !important;
	line-height: 1.5em;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.9);
}
div#BlogLatest h2.et_pb_slide_title span a {
	text-decoration: none;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
}
div#BlogLatest div.et_pb_slide_description {
	padding-inline: 1ch;
}

div#BlogLatest .et_pb_more_button {
	padding-block: 0;
    font-size: 95%;
}

 /*************************************************************
  * Front page management of the hero layout (dynamic image & text sizes )
  */ 
@media only screen and (orientation: landscape) and (max-width: 1300px) { 
/*(max-aspect-ratio: 630/383) {*/
/* ((max-width:1300px) or (max-height: 750px)) {*/

	/* Let jQuery deal with this couch...
	#hero div.header-image > img {	
		width: 40vw !important;
		height: auto !important;
	}
	*/

	/* Rings */
	#hero img.header-logo {
		width: auto;
		height: 15vh;
	}

	/*
	#hero  h1 {
		font-size: 3vw;
	}
	*/
}

@media only screen and (orientation: portrait) and (max-width: 981px) { 
	/* Position of the "click me to scroll down" icon */
	span.scroll-down.et-pb-icon {
		margin-bottom:0em; /*35px;*/
	}

	#BlogLatest div.et_pb_slide_content > div > p {
		font-size: var(--fs-350) !important;
	}

	@media (min-height: 890px) {
		/* Let jQuery deal with the couch
		#hero div.header-image > img {
			width: 25vw;
			height: auto;
		}
		*/
	}
	@media (max-height: 890px) {
		/* Let jQuery deal with the couch
		#hero div.header-image > img {	
			display:none;
		}
		*/
		/*
		#hero .et_pb_fullwidth_header_subhead {
			font-size: 3.6vw;
		}
		*/
	}
	/*
	#hero  h1 {
		font-size: 9vw;
	}
	*/
}

/* Front page item buttons */
@media only screen and (max-width: 1260px) {
	a.et_pb_button.fp_item_button {
		font-size: 10px !important;
	}
}

/* Desktop */
/*
@media only screen and (min-width: 981px) {
	span#counselling_relationships::after {
		content: "\00000a";
		white-space: pre;
	}
}
*/

/* Smartphone */
@media only screen and (max-width: 980px) {
	h1 {
		line-height: 1.1em !important;
	}
	h1 span.h1 {
		display:block;
		font-size:var(--fs-h3);
		margin-top: 0.3em;
		line-height:1.1em;
	}
	h1 span.h1::before {
		content: "";
	}
	/* The Couple/Group switching word */
	h1 span#counselling_relationships {
		line-height: unset;
		display:none; /* Hide on a smartphone to give more realestate below */
		+ span.lb { /* Sibling to span#counselling_relationships */ 
			display:none;
		}
	}

	.darimage_pop .et_pb_row .et_pb_column_1 {
		right: initial;
	}
	.darimage_pop div.fp_slider div.et_pb_slide_description {
		padding-inline: 1ch;
	}
	/*
	.darimage_pop div.fp_slider div.et_pb_slide_0 div.et_pb_slide_description  {
		padding-inline:0;
	}
	*/
	.darimage_pop div.fp_slider div.et_pb_slide_0 div.et_pb_slide_description div.didyouknow{
		margin-inline:0;
		/*margin-top: 1em; */
		padding-top:2em;
	}
}

@media only screen and (max-width: 954px) {
	a.et_pb_button.fp_item_button {
		font-size:initial;
	}
}

@media only screen and (max-width: 540px) {
	#hero div.et_pb_fullwidth_header_container > div.header-content-container span.et_pb_fullwidth_header_subhead {
		font-size:var(--fs-350);	/* defined in responsive.css */
	}
}
@media only screen and (max-width: 535px) {
	a.et_pb_button.fp_item_button {
		font-size:10px !important;
	}

}
@media only screen and (max-width: 435px) {
	h1 {
		margin-bottom: 0.2em;
		/*line-height:0.9em !important;*/
	}

	.et_pb_fullwidth_header_subhead, .et_pb_fullwidth_header_subhead > span {
		line-height: 1.1em !important;
		display:block;
	}

	a.et_pb_button.fp_item_button {
		font-size:12px !important;
	}
}

/* Iphone and smaller */
@media only screen and (max-width: 400px) {
	/*body.home*/ div#hero div.et_pb_fullwidth_header_container {
		width:100%;
	}
}

@media only screen and (max-width: 376px) {
	#hero div.header-content span.et_pb_fullwidth_header_subhead {
		font-size:15px !important;
	}
}

@media only screen and (max-width: 360px) {
	a.et_pb_button.fp_item_button {
		font-size:10px !important;
	}
	.et_pb_fullwidth_header_subhead {
		font-size:90% !important;
	}

}
@media only screen and (max-width: 316px) {
	a.et_pb_button.fp_item_button {
		font-size:9px !important;
	}
}
@media only screen and (max-width: 297px) {
	a.et_pb_button.fp_item_button {
		font-size:8px !important;
	}
}

/* Correction to another place where blockquote has a "Bfore" icon */
#didyouknow blockquote::before {
	height:10px;
	padding-right:0;
	margin-right:0;

	margin-top: 6px !important;
	margin-left: 0px;
	position:relative;
	left: -10px;
	top: 15px;
}

#didyouknow blockquote::after {
	margin-right:0px;
	position:relatoive;
	right: -10px;
	bottom:0;
}

#didyouknow .et_pb_slide .et_pb_slide_content {
	padding-top: 1em;
}
@media only screen and (max-width: 768px) {
	#didyouknow .et_pb_slide .et_pb_slide_content {
		padding-top: 3em;
	}
}

@media only screen and (max-width: 480px) {
	#didyouknow blockquote::before {
		left: 0 !important;
		top: 10px !important;
	}
	#didyouknow blockquote::after {
		bottom: 12px !important;
		right: 4px;
	}
}