/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here... */ 

/*
	*********************************************************************************
	*																				*
	* 			custom style.css - Miles Hitcham - Copyright 2020					*
	*																				*	
	*********************************************************************************
*/

 
/*
	WP/Builder advice seems to be:
	
	 1. put custom css in child themes style.css to apply site wide (careful re addreses are then relative to where style.css is)
	
	 2. if only want css to refer to one page, can alternatively use within page builder page layout, Tools menu, then click Layout CSS & JavaScript. (Cmd-Y)
	 
	 3. can also apply CSS/JS Globally by using Tools menu, Global Settings, CSS & Javascipt when in BB layout. (Cmd-U)
	 
	 but see https://only.beaverjunction.com/where-to-put-css-in-beaver-builder/ for best places to store css
	 
	 The WP customizer in BB does give live preview, but code window small, and puts css out inline within page & with comments shown!, rather than separate style.css file. So probably not best idea.
	 
	 I will put it here in style.css of child theme re all in one place and wont get lost!  (might loose an element of live preview though, but this is best and traditional way)
	  
	 
	 *** So this will be my structure: ***
	 
	 functions.php (of bb-theme-child) - All my custom PHP functions and shortcodes
	 style.css	   (of bb-theme-child) - All my custom CSS.  i.e. I will not use BB/WP's customizor layout code facilities
	 mycustom.js   (of bb-theme-child) - All my Javascript in mycustom.js file created by me  (need to enqueue it properly). again avoiding BB/WP layout code facilities.
	 //miles-custom-data-plugin		   - was my WP plugin to handle all custom posts and CMB2 metaboxes (custom fields with their UI). Not using CMB2 anymore	 
	 
	 NB there are ways of just loading/enqueuing JS file(s) for specific pages only, but I will currently put all js in one file 
	 
	 ***
	 
*/

/*

#award-3D-slider
{
	height: 450px !important;
	
}
*/


/*
	*********************************************************************************
	*																				*
	* 	Font and Leading Clamping (refer to my spreadsheet calculator and notes)	*
	*																				*	
	*********************************************************************************
*/



p {font-size: clamp(1.760rem, 1.661rem + 0.282vw, 2.000rem);}
p {line-height: clamp(2.640rem, 2.393rem + 0.706vw, 3.240rem);}

h1 {font-size: clamp(3.000rem, 2.753rem + 0.706vw, 3.600rem);}
h1 {line-height: clamp(4.050rem, 3.716rem + 0.953vw, 4.860rem);}

h2 {font-size: clamp(2.300rem, 2.094rem + 0.588vw, 2.800rem);}
h2 {line-height: clamp(3.105rem, 2.827rem + 0.794vw, 3.780rem);}








/*
	*********************************************************************************
	*																				*
	* 					Cookie Banner Styling										*
	*																				*	
	*********************************************************************************
*/


#SelectWebGroup-Cookie-Banner
{
	position: Fixed;
	z-index: 999;
	right: 9px;
	bottom: 9px;
	visibility: hidden;	
}


#SelectWebGroup-Cookie-Banner .pp-button:hover i	/* also for cookie button icons */
{
	color: #bbaf61 !important;
	
}

#consentRow .pp-button:hover i	/* also for cookie consent button option icons */
{
	color: #bbaf61 !important;
	
}


/* use suitable button default background color for disabled Managed Cookie Popup buttons 
	It did not always work when set in the module. Only worked always for enabled switch colour	
*/

.uabb-rbs-switch:not(.checked) + .uabb-rbs-slider
{
	background: #d7d7e4 !important;	
}







/*
	*********************************************************************************
	*																				*
	* 					Add Font Smoothing to all text								*
	*																				*	
	*********************************************************************************

	I judge it increases readability and is pleasing on the eye, but makes fonts look lighter/thinner. (Makes a big difference in terms of perception) 
	Effect will also vary in different browsers and at different font sizes.
	
	i.e. yes antialiased/smoothed fonts do look more readable, crisper and more pro but maybe thinner, smaller, seem lighter in colour and less bold  (may meed to adjust for this)
	
	May be less suitable for headings and menus, or unless taken into account.
	
	See:	https://davidwalsh.name/font-smoothing
			https://css-tricks.com/almanac/properties/f/font-synthesis/
*/

body
{
	/* font smoothing */
	-webkit-font-smoothing: antialiased; /* Chrome, Safari */
	-moz-osx-font-smoothing: grayscale; /* Firefox */
	
	/* prevent false synthesis of non-existent bold and italic style font faces which may degrade their display 
		
		I will leave synthesis on for now re would like italic and bold if does not exist within fon 	
	*/
	/* 	font-synthesis:none; */

}











/* highlight in blue the carousel-highlight-text span text (already in bold) at beginning of each site description in info circle */

.carousel-highlight-text
{
	color: rgba(36,68,117,0.96) !important;	/* same colour as title */
}



/*
	*********************************************************************************
	*																				*
	* 	Position Newsletter Signup button bottom of Welcome/Home page header row 	*
	*																				*	
	*********************************************************************************

	- Had to use this technique on this page re the main row of the page already overlaps the header row
	and so could not use the method used on other pages where a row containing the button is place under
	the header row with a -60 negative top margin on the row containing the PP smart button module.
	(I tried it and it did not display over the video and when I got it to via CSS z-index it then did not
	launch the newletter popup properly displayed.
	
	So for welcome page I added the signup button module via HTML shortcode within header row (similar to video)
	and then targeted it via CSS below. works good and launches Newsletter Signup UABB pop-up correctly.
	
	Notes:
	- I prefer to use the 'row below negative top margin' method where possible.
	- I used a smaller module button on the Welcome page compared to other page headers
	- the Newletter UABB popup is sitewide since every footer has access to it too.
	 
*/


#Newsletter-button-smaller
{
	position: relative;
	margin: 0 auto;
	width: 270px;
	z-index: 3;
	top: 173px;
}


/*
	*********************************************************************************
	*																				*
	* 			hide gravity forms validation error box at top of form				*
	*			re input fields already explain any validation errors				*
	*																				*	
	*********************************************************************************
*/

.gform_validation_errors
{
	display: none !important;
}







/*
	*********************************************************************************
	*																				*
	* 		re other GF form styling and overrides to overcome theme styles			*
	*																				*	
	*********************************************************************************

i.e. overcoming orbital theme and default theme styling

*/


/* make button full width on contact form */

#gform_submit_button_4  /* re this is button 4 */
{
/* 	width: 100% !important; */

}



/* bigger label text size */

.gform-field-label.gform-field-label--type-sub
{
	
	font-size: 1em !important;
} 


/* less or specific space between rows */

/* .gform-theme--foundation .gform_fields */ /* apply to all forms */
.gform-theme--foundation #gform_fields_4 /* only apply to contact form */
{
  grid-row-gap: 20px !important;
}

.gform-theme--foundation #gform_fields_3 /* only apply to contact form */
{
  grid-row-gap: 20px !important;
}






body .gform-theme--foundation .gform_wrapper .gform_ajax_spinner {

/*
color: green !important;
background-color: red !important;
*/

}

/* form 4 = contact form */
form#gform_4 input#gform_submit_button_4 {
  background: #428aca !important;				/* change submit button colour */
}

form#gform_4 input#gform_submit_button_4:hover {
  background: #00092d !important;				/* change submit button hover colour */
}

/* form 3 = Newsletter form */
form#gform_3 input#gform_submit_button_3 {
  background: #428aca !important;				/* change submit button colour */
}

form#gform_3 input#gform_submit_button_3:hover {
  background: #00092d !important;				/* change submit button hover colour */
}



/* center GF contact and newsletter form submit button horizontally */
/* see https://workfromsomewhere.com/how-to-center-submit-button-on-gravity-form/ */

#gform_submit_button_4 
{
	display: flex;
	align-items: center !important;
	justify-content: center;
/* 	width: 50% !important; */
	margin-right:auto;
	margin-left:auto;
}

#gform_submit_button_3 
{
	display: flex;
	align-items: center !important;
	justify-content: center;
	width: 50% !important;
	margin-right:auto;
	margin-left:auto;
}


/* this purely removes the unattractive box shadow on GF focused input fields
	set the input field border properties incl focus/active within individual form Grav form styler modules
	Note: this box shadow removal technique will apply to all GFs 
*/

.gform_wrapper .gform_body input[type=text]:focus,
.gform_wrapper .gform_body input[type=email]:focus,
.gform_wrapper .gform_body textarea:focus
{
/*
	outline: 2px solid red;
*/	
/* 	outline-offset: -2px; */

	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	  
}




/* Ensure good min readable font size of all GF input fields */

body .gform_wrapper .gform_body input[type=text],
body .gform_wrapper .gform_body input[type="email"],
body .gform_wrapper .gform_body input[type="password"],
body .gform_wrapper .gform_body input[type="url"],
body .gform_wrapper .gform_body input[type="tel"],
body .gform_wrapper .gform_body input[type="number"],
body .gform_wrapper .gform_body .gform_fields .gfield select,
body .gform_wrapper .gform_body textarea
{
	font-size: 17px;	/* could font clamped() this but 17px seems good size for all screen widths since forms are much narrower than screen on larger widths */ 
}










/*
	*********************************************************************************
	*																				*
	* 		Old Powerpack Contact form method (now using GF instead		 			*
	*																				*	
	*********************************************************************************
*/


.contact-us-form .fl-button
{
	margin-top: 8px; /* re would not accept the top margin put into th pp contact form button top margin */
	
	
}









/*

.moove-gdpr-branding-cnt
{
	
	display: none;
}
*/


	 /*
	*********************************************************************************
	*																				*
	* 	Make content width of UABB Modal Popups wider on screens less than 700px 	*
	*																				*	
	*********************************************************************************

	The default was 80% when screen was narrow which I considered gave too little content width and too much margin at that small size
	
	also needed to move exit close cross into the form vs outside it (in top right)
	
	*/
	
	@media ( max-width: 700px )
	{
		 .uabb-modal .uabb-content
		 {
	/* 	 	width: 89% !important; */
		 	width: 95% !important;
		}
	}
	
	
	.uabb-modal-close
	{
	/*
		top: 12px !important;
		right: 12px !important;
		left: auto;
	*/
	
	top: 8px !important;
		right: 8px !important;
		left: auto;
	
	}
	
	
	.uabb-modal-close:hover
	{
		.uabb-close-icon
		{
			color: rgba(10,12,29,0.95) !important;
		}
	}
	



/*
	*********************************************************************************
	*																				*
	* 	Terms and conditions UABB Modal Popup headings in different colour = blue	*
	*	and create better list item spacing											*
	*																				*	
	*********************************************************************************
	
	just need to give UABB popup saved row an id = terms-and-conditions
	
*/

#terms-and-conditions-overlay .fl-heading
{
/* 	color: #000e38; */
	color: rgba(10,12,29,0.95);
}

#terms-and-conditions-overlay ul li
{
	margin-bottom: 8px;
}
	
	 
	 

/*
	*********************************************************************************
	*																				*
	* 			Login Box HTML element for PB Login									*
	*																				*	
	*********************************************************************************

	could not use BB text editor component re PB fields were too large on mobile  

*/

/* set login html with white background */  	 
.loginbox
{
	background-color: rgba(255,255,255,0.80);
/* 	position: relative; */
}

.loginbox h1, h2
{
	text-align: center;
	color: rgba(37,32,71,0.87);	
}	 

#login-logo
{
	position: absolute;
/*
	right: 10px;
	bottom: 10px;
*/
margin: 0 auto; 
/* 	right:10px; */
	bottom: 10px;
	width: 100px;
}






	 
	 


/*
	*********************************************************************************
	*																				*
	* 			Center footer themer layout elements in their divs					*
	*																				*	
	*********************************************************************************

	see https://stackoverflow.com/questions/114543/how-can-i-horizontally-center-an-element
	
	Is actually quite complex to get right so all divs are properly horizontally centerd.
	(Many sites do not do it properly)
	
	APPROACH: use a series of side-byside #outer div (columns) each containing an #inner HTML multi-line Text block
	The main problem is that in all methods, the width of the inner div multi-line text block
	must be absolutely specified for the inner div to be horizontally centered within the outer div,
	otherwise it will not be centered and take up 100% of the outer div space.
	Therefore for most methods it will not be properly centered and expansion space is wasted.
	
	SOLUTION: specify the inner div width as fixed percentage (but that will still not center properly)
	or better still: set max-width: max-content; on the inner div which then centers the inner div exactly
	NOTE:  max-width: max-content; maybe not supported on IE11 (released Oct 2013, approx 0.4% global use) but otherwise v good support    
	
	Other complications are that the longest line sometimes wraps as the outer div gets smaller 
	and inner div as a proportion of that is too small for full text line.
	
	SOLUTION: use white-space: nowrap; set on the inner div (but not such/any problem if use max-width: max-content; on inner div
*/



/* 
	*** Method D (my Super simple method, but will always need an inner element width specified)
	
	and therefore will commonly not properly center inner element (i.e. it centers the specified width)
	
	unless max-width: max-content; used
	
	This simple method relies on fact a div is centered by default 
	  
*/

/*

#inner
{
	max-width: max-content;
	white-space: nowrap;
	border: 1px solid blue;
}

#outer
{
	border: 1px solid red;
}
*/




/* 
	*** Method A (margin 0 auto, but will always need an inner element width specified)
	
	and therefore will commonly not properly center inner element (i.e. it centers the specified width)
	
	unless max-width: max-content; used 
*/


#inner
{
	max-width: max-content;			
	margin: 0px auto auto auto;
	white-space: nowrap;
/*   border: 1px solid blue; */
}

#outer
{
/* 	border: 1px solid red; */
}










#innerforlogin	/* special inner for login which allows wrap for login error message display box */
{
	max-width: max-content;			
	margin: 0px auto auto auto;
/* 	white-space: nowrap; */
/*   border: 1px solid blue; */

}

/* corrections for PB sublime reg form until Cozmoslabs fix the CSS */
#wppb-form-style-1-wrapper button.wppb-toggle-pw
{
    top: 19px !important;
    bottom: auto !important;
}

/* This CSS seems to correct the login form knock-on effect from changing the register form CSS re only the login form has a wrapper called #wppb-login-wrap and it seems to use flexbox alignment. The order of these CSS lines is important.*/
 
#wppb-form-style-1-wrapper #wppb-login-wrap #wppb-loginform button.wppb-toggle-pw
{
    align-items: start !important;
}








/* 
	*** Method B (Flexbox, but will always need an inner element width specified)
	
	and therefore will commonly not properly center inner element (i.e. it centers the specified width)
	
	unless max-width: max-content; used	  
*/


/*


#inner
{
	max-width: max-content;
	white-space: nowrap;
		
}

#outer
{
	display: flex;
	justify-content: center;

}
*/





/* 
	*** Method C (Table, but will always need an inner element width specified)
	
	and therefore will commonly not properly center inner element (i.e. it centers the specified width)
	
	unless max-width: max-content; used
	  
*/


/*

#inner
{
	max-width: max-content;
	display: table;
	margin: 0 auto;
	white-space: nowrap;
	border: 1px solid blue;
}

#outer
{
	border: 1px solid red;

}
*/

/* make footer link headings in darker/gray */

#inner p span
{
	color: #bbbbbb;
	
}











/* 
		To center last line item of all packages of PP pricing table if pricing table has .last-item-centered class 	
	*/
	
	.last-item-centered .pp-pricing-table .pp-pricing-table-column li:last-child
	{
		text-align: center !important;
	}








/* need to correct/remove vert scrollbars that crop award images on smaller screen sizes: probably bug in module */

@media (min-width: 992px)
{
	.pp-3d-slider
	{	
		height: 450px !important;
	}

	
	
}		
@media (max-width: 991px) and (min-width: 768px)
{
	.pp-3d-slider
	{
		height: 450px !important;
	}

	

}		
@media (max-width: 767px)
{
	.pp-3d-slider
	{
		height: 390px !important;
	}
}		



/* To center last line item of all packages of PP pricing table if pricing table has .last-item-centered class */
/* I used for a link for more details to a hosting-box-section on same page
	
	.last-item-centered .pp-pricing-table .pp-pricing-table-column li:last-child
	{
		text-align: center !important;
	}
















/* video banner styles */


#info-circle-col
{
	z-index: 10; /*100;  was 3 */
	
}


#video-banner-single   
{
	position: relative;
	/*min-height: 665px;*/ /* 500px for mobile width */
	
/* 	height: 500px; */
	vertical-align: top;
	
/* 	margin-bottom: -200px; */

}


#background-video
{
/* 	height: 500px; */
	
	
}







/* Style the video: 100% width and height to cover the entire window */

/*

#background-video
{
margin-top: -100px;
margin-bottom: 100px;

}
*/

#background-video video{
  
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
/*   object-position: 50% 75%; */	/* done dynamically inline now depending on actual video!!! */
  z-index: 2;
/*   border-bottom: 1px solid transparent; */
}

.fit-picture
{
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 1;
  display: none;	
}

/*

#requestHelpButton
{
	z-index: 500 !important;
}

#requestHelpButtonRow
{
	z-index: 500 !important;
}
*/




/*
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}
*/

/*

#background-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}
*/










/* AMAZINGWEBDESIGN.CO.UK */




	/*
	*********************************************************************************
	*																				*
	* 		from old AWD taking css on each page layout and adding all together		*
	*		i.e. from AllPagesAddedTogether.css
	*																				*	
	*********************************************************************************


	*/




/* *** Home Page CSS *** */

	/*

	
	
	For Responsive design / Our services middle section using Ids
	
	My clever media query adjustment so when screen is v wide,
	the left and right 'spacer columns' are 8% width and there
	so the services info circle is still centered in rhs but is not too big
	But when the screen is smaller than v wide the spacer columns are removed
	and both the lhs unoverlaid part of the image and the infor circle column are 50% width
	
	Note: I am already using 2 rows, one for desktop and the other for medium and small
	re the 50% width half overlay of the background image is unsuitaible for medium and small
	when still displaying the info circle


	*/


	@media only screen and (max-width: 2013px)
	{
	    
	    #leftColSpacer, #rightColSpacer
	    {
	        display: none;
	        /*width: 0;*/
	    }
	
	    #leftRow
	    {
	        width: 50%;
	    }
	    
	    #rightRow
	    {
	        width: 50%;   
	    }
	   
	}








/* ** Website-design Page CSS ** */ 
	
	/* 
	
	Website Design Programming Skills, infolist columns
	
	remove rounded corners on info list on small screens */
	
	
	
	@media only screen and (max-width: 1300px)
	{
	    
	
	    /* both !important and > specificy needed to work   */
	    .myInfoListLeftColClass > .fl-col-content,
	    .myInfoListRightColClass > .fl-col-content
	    {
	        
	        border-top-left-radius: 0px !important;
	        border-top-right-radius: 0px !important;
	        border-bottom-left-radius: 0px !important; 
	        border-bottom-right-radius: 0px !important;
	    }
	    
	    
	    .myInfoListLeftColClass > .fl-col-content
	    {
	        border-right-width: 0px !important;
	    }
	    
	    .myInfoListRightColClass > .fl-col-content
	    {
	        border-left-width: 0px !important;
	    }

	}








/*** Contact-us Page CSS ***/ 
	
	
	.contact-us-form textarea
	{
		resize: vertical; /* restrict message box to vertical resizing only */
	
	}

	
	/* 
	    Custom CSS to make icon responsive and show as link re I custom programmed JS to respond to it
	
	*/

	#myGoogleMapIconID:hover
	{
	    cursor: pointer; 
	    cursor: hand; 
	
	}
	
	
	
	#myGoogleMapIconID:hover .uabb-icon-wrap .ua-icon
	{

	    /*cursor: pointer; */
	   /* cursor: hand;*/       /* provide link indication as link would do */
	    
	    /*color: red;*/
	
	    -webkit-transform: scale(1.2); 
		-moz-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-o-transform: scale(1.2);
		 transform: scale(1.2);
	}
	
	
	
	#myGoogleMapIconID:hover .uabb-icon-wrap .uabb-icon i:before
	{
	    color: #428aca;
	}
	
		
	
	#myAddressID:hover .uabb-icon-wrap .ua-icon
	{
	    -webkit-transform: scale(1.2); 
		-moz-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-o-transform: scale(1.2);
		 transform: scale(1.2);
	}
	
	
	
	
	#myEmailID:hover .uabb-icon-wrap .ua-icon
	{
	    -webkit-transform: scale(1.2); 
		-moz-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-o-transform: scale(1.2);
		 transform: scale(1.2);
	}
	
	
	
	#myPhoneID:hover .uabb-icon-wrap .ua-icon
	{
	     
	    
	    -webkit-transform: scale(1.2); 
		-moz-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-o-transform: scale(1.2);
		 transform: scale(1.2);
	}
	
	.uabb-icon-wrap .ua-icon
	{
	    -webkit-transition: 0.3s ease-in;
	    -moz-transition: 0.3s ease-in;
	    -o-transition: 0.3s ease-in;
	    transition: 0.3s ease-in;
	}
	
	
	.transition-class
	{
	    
	    -webkit-transform: scale(1.2); 
		-moz-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-o-transform: scale(1.2);
		 transform: scale(1.2);
	    
	    -webkit-transition: 0.3s ease-in;
	    -moz-transition: 0.3s ease-in;
	    -o-transition: 0.3s ease-in;
	    transition: 0.3s ease-in;
	}
	
	






/*** for AWD contact us girl on various pages, common to Home and About pages i.e. says Click to tell us about your project ***/ 
	
	
	/* just give girl .contactusgirl class */
	
	
	.contactusgirl:hover
	{
	    /*cursor: pointer; */
	   /* cursor: hand;*/       /* provide link indication as link would do */
	    
	    /*color: red;*/
	
	    -webkit-transform: scale(1.1); 
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
		 transform: scale(1.1);
	}
	
	
	.contactusgirl
	{
	 	-webkit-transition: 0.5s ease-in;
	    -moz-transition: 0.5s ease-in;
	    -o-transition: 0.5s ease-in;
	    transition: 0.5s ease-in;
	}
	
	





	/*  make see more cta link larger when hover                       */

	.uabb-info-circle-cta:hover
	{
	    /*cursor: pointer; */
	   /* cursor: hand;*/       /* provide link indication as link would do */
	    
	    /*color: red;*/
	
	    -webkit-transform: scale(1.2); 
		-moz-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-o-transform: scale(1.2);
		 transform: scale(1.2);
	}
	
	.uabb-info-circle-cta
	{
	 	-webkit-transition: 0.15s ease-in;
	    -moz-transition: 0.15s ease-in;
	    -o-transition: 0.15s ease-in;
	    transition: 0.15s ease-in;
	}





	
/*** Global Header Themer Layout CSS ***/ 
	
	
	/* my CSS to underline first level nav menu items */
	
	/* just give Powerpack advanced menu .myMenu class */
	
	
	
	.myMenu .menu-item a:hover,
	.myMenu .menu-item a:focus,
	.myMenu .menu-item a:active
	{
	  color: #fff;
	  text-decoration: none;
	}
	
	
	.myMenu .menu-item a
	{
	    /*line-height:75px;*/
	    
	}
	
	.myMenu > .menu-item a
	{
	    /*line-height:50px !important;*/
	    
	}
	
	
	
	
	.myMenu .menu-item a::after {
	  content: "";
	  position: absolute;
	}
	
	
	.myMenu .menu-item a::after {
	  margin-top: 31px;
	  /*top: 65%;*/
	  height: 4px !important;
	  width: 0%;
	  left: 50%;
	  
	  background-color: rgba(255, 255, 255, 0.20);
	  
	   /*background-color: #e7f3f8;*/
	  
/* 	  transition: 0.3s ease-out all .1s; */
	transition: 0.1s ease-out all .1s;
	}
	
		
	
	.myMenu .menu-item:hover a::after
	{
	  /*top: 65%; */
	  margin-top: 28px;
	   height: 5px !important;
	  width: 76%;
	  left: 12%;
	  
/* 	  background-color: #428aca; */
	  
/* 	  background-color: rgba(66,  138,  202, 0.66); */
/* 	  background-color: #2D5787; */
/* 	  background-color: #1A3383; */
/* 	  background-color: #428aca; */
/* 	  background-color: #4E6AAC; */
	  background-color: #4E70AC;
	  
	  
	  
	  
	  
	  
/* 	  background-color: rgba(255, 255, 255, 0.45); */
	  
	  
	    transition: 0.2s ease all;
	}
	
	
	/* prevent underline of current page's menu item */
	.myMenu .current-menu-item:hover a::after
	{
	  width:0% !important;
	  left: 50%;
	}
	/* prevent link cursor for current page's menu item */
	.myMenu .current-menu-item
	{
	    cursor: not-allowed !important;
	    pointer-events: none;
	}
	
	
	
	
	
	
	
/*** AWD Global Footer Themer Layout CSS ***/ 
	
	/* just give main 2 link blocks the footerlinkblock class */
	
	.footerlinkblock ul, .footerlinkblock li    /* remove browser default styling for li and ul */
	{ list-style-type: none;
	        list-style-position:inside;
	        margin:0;
	        padding:0; 
	}
	
	.footerlinkblock ul li a
	{
	    text-decoration: none;
	}
	
	.footerlinkblock ul li:hover a
	{
	    /*text-decoration: underline;*/
	    
	}
	
	.footerlinkblock ul li
	{
	    margin-bottom: 10px;
	}
	
	
	
	/* Animated Underline of links in footer */
	/* just add .cl-effect-4 to each li footer link you want to be underlined */
	
	.cl-effect-4 a {
		position: relative;
		display: inline-block;
	}
	
	
	/* Effect 4: bottom border enlarge */
	ul .cl-effect-4 a {
		padding: 0 0 2px; /*was 10px */
	}
	
	ul .cl-effect-4 a:after {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 1px;
		/*background: #fff;*/
/* 		background-color: #428aca; */
		background-color: #4E70AC;
		
		content: '';
		opacity: 0;
		-webkit-transition: height 0.2s, opacity 0.2s, -webkit-transform 0.2s;
		-moz-transition: height 0.2s, opacity 0.2s, -moz-transform 0.2s;
		transition: height 0.2s, opacity 0.2s, transform 0.2s;
		-webkit-transform: translateY(-10px);
		-moz-transform: translateY(-10px);
		transform: translateY(-10px);
	}
	
	ul .cl-effect-4 a:hover:after,
	ul .cl-effect-4 a:focus:after {
		height: 3px;
		opacity: 1;
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		transform: translateY(0px);
		
/* 		background-color: #428aca; */	/* blue for AWD */
		background-color: #4E70AC;	/* blue for AWD */
	}
	
	
	
	
	
	
	
/*** Domain-names Page CSS ***/ 
	
	
	/* centralise & style my 'top domains' tables */
	
	.topdomainstable
	{
	    width:100%;
	    
	    margin-left:auto; 
	    margin-right:auto;
	}
	
	
	.topdomainstable th
	{
	    text-align: center; 
	}
	
	
	.pricecol
	{
	    width: 45%;
	    text-align: center;
	}
	
	

	
	
/*** AWD Privacy-policy CSS ***/ 
	
	
	.mybulletlist li
	{
	    padding-bottom: 10px;
	    
	}
	
	
	
	
	
	




 

 
 
 
 

/* ONECLICKPROPERTY.COM */



/* SINGULAR PROPERTY PAGE */


	/*
	**************************************************************************************
	* 																					 *
	*		slightly round orange 'read more' button on singular property page			 *
	*																					 *
	**************************************************************************************
	*/


	.pp-heading.pp-separator-inline .heading-title span
	{
		border-radius: 8px !important;
	}



	/*
	**************************************************************************************
	* 																					 *
	*						On singular property page									 *
	* set UABB Adv tab height max re too high and higher than image gallery to the left	 *
	*																					 *
	**************************************************************************************
	*/


	.propMapTabs
	{
		max-height: 475px;	
	}




	/*
	*****************************************************************************************
	* 																					 	*
	*		UABB Gravity form styler - additional styles									*
	*				 																		* 
	*****************************************************************************************

	Note:

	I tried PP GF form styler but the resulting form submit GF text confirmations lost its ability to have clickable links in it
	
	So Now using UABB GF form Styler which does not have this problem. 

	*/


	.propFormRow
	{
		display:none;														/* hide edit form by default on sigular property page, JS edit property click will later show it if logged in with account and is your property */
	}
	
	
	.gform_wrapper .gfield_select   										/* style dropdown so same height as other boxes */
	{
		height: 50px !important;
		
		-webkit-appearance: none;											/* see https://legacy.forums.gravityhelp.com/topic/dropdown-menu-same-style-as-text-field */
		box-sizing: content-box;
	
	}
	
	
	
	.gform_wrapper .description,
	.gform_wrapper .gfield_description,
	.gform_wrapper .gsection_description									/* get description below input fields closer to bottom of input field so seems 'part of it' */
	{
		padding-top: 0 !important;
	/* 	margin-top: -15px; */												/* if change UABB GF Styler input bottom margins this will need adjusting */
	}
	


	/* To correct dropdown box vertical align problems when compared to other text boxes.  But Not required if put input top margin of 0 in UABB styler */
	/*
	body .gform_wrapper .top_label div.ginput_container
	{
		padding-top: 1px !important;
	}
	*/
	
	
	

	/*
	**************************************************************************************
	* 																					 *
	*						On singular property page									 *
	*	improve gravity form submit spinner & certralise it horiz under submit button 	 *
	*																					 *
	**************************************************************************************
	
	was previously too small and to the right of it

	*/



	.gform_footer 
	{
			position: relative; 
	}
	
	.gform_footer .gform_ajax_spinner
	{
				position: absolute;
				top: 50%;
				left: 50%;
				height: 50px;
/* 				transform: translateX(-50%); */
				transform: translate(-50%, -50%);
				
				color: #000e38;	/* #f16320;	 make it oneclick orange */
	}
	 
	.gform_footer input.disabled
	{
	/* 			background-color: gray; */
				background-color: white;
	}
	




	/*
	**************************************************************************************
	* 																					 *
	*		Property Details row Content and Styling	- On singular property page		 *
	*	 		+ non-UABB Advanced Accordion headings i.e. plain & can't contract		 *
	*																					 *
	**************************************************************************************
	
	.testClass (contains .testLabel) is my HTML to mimic UABB Advanced Accordion item title/heading, but without ability to expand/contract. i.e. just looks like its heading
	
	I used it re Photos and maps row of singular property page did not work as UABB Advanced accordion if it contained a slideshow (or visa versa)	

	*/


	.testClass							
	{
		padding-top: 7px;
		padding-bottom: 7px;
		padding-left: 60px;
		height: 40px;
	/*
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	*/
		background-color: #B8CDE2;
	/* 	color: gray !important; */
		width:100%;
	}
	
	.testClass .testLabel
	{
	/* 	margin-top:10px; */
		color:white;
	/* 	background-color: #B8CDE2; */
		font-family: Helvetica, Verdana, Arial, sans-serif;
		font-size: 18px;
		font-style: normal;
		font-weight: normal;
		line-height: 25px;
		
	}
	
	
	hr.testHr					/* not sure what this was? reckon it can be removed */
	{
		background-color: #fff;
		border-top: 2px dashed #8c8b8b;
		
	}
	
	.restContent
	{
		display: none;	
	}
	
	.fullContent
	{
		display: none;
	}
	
	
	.testBut					/* .testBut is ppSmartHeadingReadMore saved module (PP Smart Heading with read more button & dashed divider */
	{
		cursor: pointer;
		
	}
	
	
/* end of SINGULAR PROPERTY PAGE */	
	
 
 
 
 
	 /*
		*****************************************************************************************
		* 																					 	*
		*  		User Guide UABB Popup modal -  													* 
		*																						*
		*****************************************************************************************
	 */ 
	 
	 /* put margin under each numbered line item */
	 
	 .uabb-modal ol li
	 {
		 margin-bottom: 15px;
	 }
	 
	 
	 
	 /* since pp-advanced menu seems to clone or reconstruct itself when resizing to mobile, I had to delegate and bind to root $(document) and then force a footer guide link click from menu item.
		  It then did not have hover so had to add in this css */
		 
	 .trigger-guide2:hover
	 {
		 cursor: pointer;
		 
	 }
	 
	 
	 
	 
 
	/*
		*****************************************************************************************
		* 																					 	*
		*  		Hide my media custom link field in cmb2 wp.media select/uploader  				* 
		*																						*
		*						(still shows in admin media backend								*
		*****************************************************************************************
	*/ 
	 
	 
	 .media-modal .compat-attachment-fields
	{
		display: none;
	
	}
	
	
	 
	 
	  
	 
	 
	 
	 
	 
	 
	 
	 
	/*
		*****************************************************************************************
		* 																					 	*
		*  		Show link cursor hand when over Properties Page Google Map icon row 			* 
		*			used jQuery to enable row below click										*
		*																						*
		*****************************************************************************************
	*/ 
	 
	
	#myGoogleMapIconRowID2:hover
	{
		cursor: pointer;
	}
	
	
	


	
	
	/*
		*****************************************************************************************
		* 																					 	*
		*  					onlyAccountProperties button/filter for logged-in users				*
		*																						*
		*****************************************************************************************
	*/
	 
	
	.onlyAccountProperties i
	{
		color: #949ba3;
	/* 	background-color: red; */
		opacity: 0.4;
		
	}
	
	.onlyAccountProperties.enabled i
	{
		color: #F16321;
		opacity: 1.0;
		
	}
	
	

 
	 
	 /*
		*****************************************************************************************
		* 																					 	*
		*  						PP Custom Grid CSS (was preset 5)								*
		*																						*
		*****************************************************************************************
	 
		originally CSS preset 5 - but I have messed with it now!
	 */
	 
	
	
	.pp-custom-grid-post {
	    font-size: 14px;
	    padding-bottom: 0.5em;
	    
	    position: relative;		/* changed to relative so can put absolute icons reliably at bottom */
	}
	
	.pp-custom-grid-post-image {
	/*     border-bottom: 3px solid #FF5722; */
	    position: relative;
	    overflow: hidden;
	}
	
	
	.pp-custom-grid-post-image img {
	    transition: all 0.33s ease-out 0s;
	    transform: translateZ(0) scale(1,1); /* prevent transition flicker */
	}
	
	.pp-custom-grid-post-image:hover img {
	    transform: scale(1.05);
	}
	
	
	
	.pp-custom-grid-post-text {
	    padding: 20px;
	    padding-left: 0;
	    padding-right: 0;  
	}
	
	
	
	
	
	.pp-custom-grid-post-title {
	/*     font-size: 20px; */
		font-size: 18px;
		font-weight: bold;
	    text-align: center;
	/*     color: #666666; */
	/* 	color: #444446; */
		color: #585b60;
		
		line-height: 26px;
		margin: 0;
	    margin-bottom: 4px;
	    padding: 0;
	    padding-left: 20px !important;
	}
	
	
	
	
	
	.pp-custom-grid-post-meta a {
	    text-decoration: none;
	}
	.pp-custom-grid-post-meta,
	.pp-custom-grid-post-meta a {
	    color: #888;
	    font-size: 12px;
	    text-transform: capitalize;
	}
	.pp-custom-grid-post-meta a:hover {
	    color: #000;
	}
	.pp-custom-grid-post-meta .fa {
	    margin-left: 8px;
	    margin-right: 6px;
	}
	.pp-custom-grid-post-meta .fa:first-child {
	    margin-left: 0;
	}
	
	.pp-custom-grid-post-more-link,
	.pp-custom-grid-post-more-link a {
	    font-size: 12px;
	}
	.pp-custom-grid-post-more-link .fa {
	    margin-right: 4px;
	    transition: all 0.33s ease;
	}
	.pp-custom-grid-post-more-link a:hover .fa {
	    margin-right: 10px;
	    color: #000e38;
	/*     color: #4e7394; */
	}
	
	.pp-custom-grid-post-more-link a:hover
	{
	/* 	color: #000e38; */
		color: #4e7394;
	
		
	}
	

	/* override to lower the custom grid loading bar meter re my cells are now taller 
		originally set in custom grid's frontend.css
	
		Currently not needed re not using 'load more' infinate scroll loading
	*/
	
	.pp-custom-grid #infscr-loading {
		
		bottom: -80px !important;
	/* 	color: #f16321 !important; */				/* also set 'Loading' our orange colour */
	}
	
	
	







	/*** my custom CSS property overrides for ref, numpic, clickdetails  additions ***/
	
	
	
	/* change color of bottom border of post image */
	    
	.pp-custom-grid-post-image
	{
	/*         border-bottom: 3px solid white; */ /*#c10500*/;
	}
	
	
	
	
	
	
	.grid-post-image-container
	{
		position: relative;
		padding: 0px;		/* to leave white border around image */ 
	}
	













/* Facet WP - additional styling */



	/*
		*****************************************************************************************
		* 																					 	*
		*		re FacetWP - hide the author facet but whilst also making sure it still works	*
		* I change its value programatically with JS on FWP object via 'My properties' button	*
		*	 																					*
		*****************************************************************************************
		
		e.g. see https://www.sitepoint.com/five-ways-to-hide-elements-in-css/
		
	*/
	
	
	#author_facet
	{
		position: absolute;	/* stops it taking up space in page flow */
		visibility: hidden;	/* display:none would have prevented any programmatical interaction */
		top: -9999px;
	   left: -9999px;
	}





	/*
		*****************************************************************************************
		* 																					 	*
		*		re FacetWP - Location Proximity Facet used to be width 100% of container 		*
		*			but no longer, so this corrects that, so works as before					* 
		*	 																					*
		*****************************************************************************************
			
	*/
	
	
	.facetwp-type-proximity .location-wrap
	{
		width: 100%;
	}
	





	/*
		*****************************************************************************************
		* 																					 	*
		*			My custom styling of FacetWP fSelect top wrapper & dropdown					*
		*						re sometimes too wide when narrow container						*
		*	 																					*
		*****************************************************************************************
	*/
	
	
	.facetwp-submit
	{
		margin-top: 7px;
		
	}
	
	
	
	input.facetwp-location
	{
		min-width: 200px !important;	/* the default min-width of 240 verry occasionallly made location input field too wide for criteria column */
		
	}
	
	
	/* options box is not on top of other items without this. Did not need it on earler ver of FacetWP I think 
		
		but still puts fs-dropdown box text below next heading if grid and serach columns are set to equal height setting! so could not use that setting
		
	*/
	.facetwp-type-fselect .fs-dropdown				
	{
		z-index: 99 !important;
	}
	
	
	
	
	.facetwp-type-fselect .fs-wrap	/* top wrap is pos relative within facet */
	{
		/*  was width: 220px; in facetwp's assets css front.css */
		width: 100% !important; 
	
	}
	
	.facetwp-type-fselect .fs-dropdown	/* dropdown box is pos absolute within screen! */
	{
		/*  was width: 220px; in facetwp's assets css front.css */
			
		width: 14.5% !important;		/* default to follow facets column max screen width setting */
		
	}
	
	/* now integrated this into my main new media query lattice below */
	
	
		@media (max-width: 1300px)		/* add media queries for medium and small screens so dropdown width follows responsive facet column widths */
		{
				.facetwp-type-fselect .fs-dropdown
				{
	/* 				width: 30% !important; */
	  			}
		}
		@media (max-width: 768px)
		{
				.facetwp-type-fselect .fs-dropdown
				{
	/* 				width: 92% !important; */
	  			}
		}
	
	
	
	.facetwp-map-filtering
	{
		display:none;					/* hide factewp map filtering facility */
	
	}
	
	











/*** My UABB ADVANCED POSTS ***** grid column & image cell height size overrides 
	
	inc my custom styling of FacetWP fSelect top wrapper & absolute positioned dropdown
	re sometimes too wide when narrow container
	
	This is what helps keep the property search page in proportion at all screen sizes!
	
	I have necessarily 'bullied' it to keep all dimensions at their best at all screen sizes
	
	Any other way would have not allowed that best and possible outcome.
	
	Uses 'a battery' of media queries. see 	https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/
	
	NB started off with PP Custom Grid but had problems with it with pagination etc (refer to emails to PP support)
	Therefore numerous styles refer to original .pp-xxx in the myppcustomgridhtml html template and in this stylesheet.
	But it is definately UABB ADVANCED POSTS module used with Grid appearance, FacetWP enabled and Custom Post layout (5 columns on desktop)
	using a Custom Post layout of [my_pp_custom_grid_html] as the shortcode for it. (Module has a whole has .propertyGrid class allocated)
	
***/



	.pp-custom-grid-post-image a img
	{
	/* 		height: 280px !important; */					/* just make img max-height & use css object-fit: fill or cover! */
	/* 		object-fit: fill !important; */				/* later give users a choice of fill or cover for their main search image! */	
		object-fit: cover !important;
	/* 		object-fit: contain !important; */				/* see https://caniuse.com/#search=object-fit
										   				and https://css-tricks.com/on-object-fit-and-object-position/
										   				and https://alligator.io/css/cropping-images-object-fit/
													*/
	}
	
	
	
	/* 
		my override re the UABB Advanced posts grid is display flex as standard on many parts,
		whereas Powerpacks custom grid is display block as standard and my custom media queries have been written for display block
		Not sure if all these are needed though. careful css caching if adjust esp on Safari. Just clear the browser cache to get latest css
	*/
	.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5							
	{
		display: block !important;						
		float: left !important;
	}
	/*
	.propertyGrid .uabb-blog-posts .uabb-post-wrapper
	{
		display: block !important;
		float: left !important;	
	}
	.uabb-blog-posts
	{
		display: block !important;
		float: left !important;
	}
	*/
	
	
	
	
	/* 1st sort the FaectWP search column and property search grid horizontal proportions */
	
	
	/* massive size screen default - which will almost never be used! - re so large */
	
	
	@media (min-width: 3001px)
	{		
	
		.searchCriteriaCol				/* set Search Criteria Column */
		{
			width:10% !important;
		}
		
		.propertyGridCol				/* set custom grid Column */
		{
			width:90% !important;
		}
		
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
			width: 20% !important;		/* i.e. 5 columns */
	/* 		width: 16.667% !important; */
			
		}
		
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
			clear:none !important;
		}
		
		/* see https://css-tricks.com/almanac/selectors/n/nth-child/ */
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5:nth-child(5n + 1)               
		{
			clear:both !important;
		}
		
		.pp-custom-grid-post-image 
		{
			/*  I added to stop one taller than large image changing the height of all grid cells too much */
			max-height: 300px;
		}
		
			.pp-custom-grid-post-image a img
		{
			height: 300px !important;					
		}
		
		
	}
	
	
	@media (max-width: 3000px) and (min-width: 2231px)		
	{
		.searchCriteriaCol				/* set Search Criteria Column */
		{
			width:12% !important;
		}
	
		.propertyGridCol				/* set custom grid Column */
		{
			width:88% !important;
		}	
		
		.facetwp-type-fselect .fs-dropdown
		{
			width: 11% !important;
		}
		
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
			width: 20% !important;		/* i.e. 5 columns */
	/* 		width: 16.667% !important; */
			
		}
		
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
			clear:none !important;
		}
		
		 /* see https://css-tricks.com/almanac/selectors/n/nth-child/ */    
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5:nth-child(5n + 1)          
		{
			clear:both !important;
		}
		
		.pp-custom-grid-post-image 
		{
			/*  I added to stop one taller than large image changing the height of all grid cells too much */
			max-height: 280px;
			
		}
		
		.pp-custom-grid-post-image a img
		{
			height: 280px !important;
		}
		
		
		
				
	}
	
	
	@media (max-width: 2230px) and (min-width: 1779px)		
	{
		.searchCriteriaCol				/* set Search Criteria Column */
		{
	/* 		width:15% !important; */
			width:12% !important;		
		}
	
		.propertyGridCol				/* set custom grid Column */
		{
	/* 		width:85% !important; */
			width:88% !important;
		}	
	
		.facetwp-type-fselect .fs-dropdown
		{
	/* 		width: 14% !important; */
			width: 11% !important;		
		}
	
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
	/* 		width: 25% !important; */		/* i.e. 4 columns */
			width: 20% !important;		
		}
		
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
			clear:none !important;
		}
		
		 /* see https://css-tricks.com/almanac/selectors/n/nth-child/ */    
	/* 	.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5:nth-child(4n + 1) */
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5:nth-child(5n + 1)          
		{
			clear:both !important;
		}
		
		.pp-custom-grid-post-image 
		{
			/*  I added to stop one taller than large image changing the height of all grid cells too much */
			max-height: 240px;
		}
		
		.pp-custom-grid-post-image a img
		{
			height: 240px !important;
		}		
	}
	
	
	
	
	
	
	@media (max-width: 1778px) and (min-width: 1501px)			
	{
		.searchCriteriaCol				/* set Search Criteria Column */
		{
	/* 		width:18% !important; */
			width:15% !important;
			
		}
	
		.propertyGridCol				/* set custom grid Column */
		{
	/* 		width:82% !important; */
			width:85% !important;
			
		}
		
		.facetwp-type-fselect .fs-dropdown
		{
	/* 		width: 16% !important; */
			width: 14% !important;
		}
		
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
	/* 		width: 33.333% !important; */		/* i.e. 3 columns */
			width: 25% !important;		
		}
		
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
			clear:none !important;
		}
		
		 /* see https://css-tricks.com/almanac/selectors/n/nth-child/ */    
	/* 	.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5:nth-child(3n + 1) */
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5:nth-child(4n + 1)          
		{
			clear:both !important;
		}
		
		.pp-custom-grid-post-image 
		{
			/*  I added to stop one taller than large image changing the height of all grid cells too much */
	/* 		max-height: 300px; */
			max-height: 260px;
		}
		
		.pp-custom-grid-post-image a img
		{
	/* 		height: 300px !important; */
			height: 260px !important;
		}
			
	}
	
	
	
	
	
	@media (max-width: 1500px) and (min-width: 1351px)		
	{
		.searchCriteriaCol				/* set Search Criteria Column */
		{
			width:20% !important;
		}
	
		.propertyGridCol				/* set custom grid Column */
		{
			width:80% !important;
		}
		
		.facetwp-type-fselect .fs-dropdown
		{
			width: 19% !important;
		}	
	
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
			width: 33.333% !important;		/* i.e. 3 columns */
			
		}
		
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
			clear:none !important;
		}
		
		 /* see https://css-tricks.com/almanac/selectors/n/nth-child/ */    
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5:nth-child(3n + 1)          
		{
			clear:both !important;
		}
		
		.pp-custom-grid-post-image 
		{
			/*  I added to stop one taller than large image changing the height of all grid cells too much */
			max-height: 250px;
			
		}
		
		.pp-custom-grid-post-image a img
		{
			height: 250px !important;
		}	
	}
	
	
	@media (max-width: 1350px) and (min-width: 1101px)		
	{
		.searchCriteriaCol				/* set Search Criteria Column */
		{
			width:25% !important;
		}
	
		.propertyGridCol				/* set custom grid Column */
		{
			width:75% !important;
		}
		
		.facetwp-type-fselect .fs-dropdown
		{
			width: 24% !important;
		}	
		
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
			width: 50% !important;		/* i.e. 2 columns */
			
		}
		
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
			clear:none !important;
		}
		
		 /* see https://css-tricks.com/almanac/selectors/n/nth-child/ */    
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5:nth-child(2n + 1)          
		{
			clear:both !important;
		}
		
		.pp-custom-grid-post-image 
		{
			/*  I added to stop one taller than large image changing the height of all grid cells too much */
			max-height: 295px;
		}
	
		.pp-custom-grid-post-image a img
		{
			height: 295px !important;
		}
				
	}
	
	
	@media (max-width: 1100px) and (min-width: 971px)	
	{
		.searchCriteriaCol				/* set Search Criteria Column */
		{
			width:28% !important;
		}
	
		.propertyGridCol				/* set custom grid Column */
		{
			width:72% !important;
		}
		
		.facetwp-type-fselect .fs-dropdown
		{
			width: 26% !important;
		}	
		
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
			width: 50% !important;		/* i.e. 2 columns */
			
		}
		
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
			clear:none !important;
		}
		
		 /* see https://css-tricks.com/almanac/selectors/n/nth-child/ */    
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5:nth-child(2n + 1)          
		{
			clear:both !important;
		}
		
		.pp-custom-grid-post-image 
		{
			/*  I added to stop one taller than large image changing the height of all grid cells too much */
			max-height: 225px;
		}
		
		.pp-custom-grid-post-image a img
		{
			height: 225px !important;
		}
					
	}
	
	
	
	@media (max-width: 970px) and (min-width: 822px)		
	{
		.searchCriteriaCol				/* set Search Criteria Column */
		{
			width:35% !important;
		}
	
		.propertyGridCol				/* set custom grid Column */
		{
			width:65% !important;
		}
		
		.facetwp-type-fselect .fs-dropdown
		{
			width: 33% !important;
		}	
		
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
			width: 100% !important;		/* i.e. 1 column */
			
		}
		
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
			clear:none !important;
		}
		
		 /* see https://css-tricks.com/almanac/selectors/n/nth-child/ */    
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5:nth-child(1n + 1)          
		{
			clear:both !important;
		}
		
		.pp-custom-grid-post-image 
		{
			/*  I added to stop one taller than large image changing the height of all grid cells too much */
			max-height: 380px;
		}
		
		.pp-custom-grid-post-image a img
		{
			height: 380px !important;
		}
	
		
					
	}
	
	
	
	@media (max-width: 821px) and (min-width: 769px)	/* 768px is current small device breakpoint set in globals */		
	{
		.searchCriteriaCol				/* set Search Criteria Column */
		{
			width:40% !important;
		}
	
		.propertyGridCol				/* set custom grid Column */
		{
			width:60% !important;
		}
		
		
		.facetwp-type-fselect .fs-dropdown
		{
			width: 37.5% !important;
		}	
		
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
			width: 100% !important;		/* i.e. 1 column */
			
		}
		
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5
		{
			clear:none !important;
		}
		
		 /* see https://css-tricks.com/almanac/selectors/n/nth-child/ */    
		.propertyGrid .uabb-blog-posts-grid .uabb-blog-posts-col-5:nth-child(1n + 1)          
		{
			clear:both !important;
		}
		
		.pp-custom-grid-post-image 
		{
			/*  I added to stop one taller than large image changing the height of all grid cells too much */
			max-height: 295px;
		}
		
		.pp-custom-grid-post-image a img
		{
			height: 295px !important;
		}	
				
	}
	
	
	
	@media (max-width: 768px) and (min-width: 731px) /* Grid and Search columns both now 100% width and stacked as set in builder */
	{
		.facetwp-type-fselect .fs-dropdown
		{
			width: 94.5% !important;
		}	
		
	
		.pp-custom-grid-post-image 
		{
			/*  I added to stop one taller than large image changing the height of all grid cells too much */
			max-height: 490px;
		}
		
		.pp-custom-grid-post-image a img
		{
			height: 490px !important;
		}	
		
				
	}
	
	
	@media (max-width: 730px) and (min-width: 631px)
	{
		.facetwp-type-fselect .fs-dropdown
		{
			width: 94.5% !important;
		}	
		
		.pp-custom-grid-post-image 
		{
			/*  I added to stop one taller than large image changing the height of all grid cells too much */
			max-height: 465px;
		}
		
		.pp-custom-grid-post-image a img
		{
			height: 465px !important;
		}	
		
		
				
	}
	
	
	@media (max-width: 630px) and (min-width: 581px)
	{
		.facetwp-type-fselect .fs-dropdown
		{
			width: 93% !important;
		}	
		
		.pp-custom-grid-post-image 
		{
			/*  I added to stop one taller than large image changing the height of all grid cells too much */
			max-height: 395px;
		}
		
		.pp-custom-grid-post-image a img
		{
			height: 395px !important;
		}	
				
	}
	
	@media (max-width: 580px)
	{
		.facetwp-type-fselect .fs-dropdown
		{
			width: 93% !important;
		}	
		
		.pp-custom-grid-post-image 
		{
			/*  I added to stop one taller than large image changing the height of all grid cells too much */
			max-height: 365px;
		}
		
		.pp-custom-grid-post-image a img
		{
			height: 365px !important;
		}	
				
	}
	
	
	
	
	
	/* etc */
	

/*** end of UABB Advanced posts grid for my property custom grid column & image cell heightsize overrides ***/













/*** offertype in bottom right of image */

    .offertype
    {
        font-size: 14px;
        font-weight: bold;
        /*color: white;*/
        color: #c10500;
        color: #f16321;
/*
        
        position: absolute;
        right: -1px;
        bottom: -1px;
        
*/
        
        position: absolute;
        right: 0px;
        bottom: -9px;
        
        
        
        
        padding-right: 5px;
        padding-left: 6px;
        
        /*background-color: #c10500;*/ /*#FF5722;*/
        background-color: white; 
        opacity: 1.0;
    
		border: 1px solid lightgray;
		border-right: 0px none white; /* #c10500;*/
        border-radius: 15px 0 0 15px;    /* makes cicle!*/ 
        line-height: 1.5;
        
        transition: all 0.9s ease;
        transform: translateZ(0) scale(1,1); /* prevent transition flicker */
    }
    
    .pp-custom-grid-post-image:hover .offertype
    {
		/* opacity: 0.8; */ /* remove for now??? */
        /*line-height: 0;*/
    }
        
        



	.my-ref-new	/* new bottom left version vs old top left corner ver */
    {
        font-size: 14px;
        font-weight: bold;
        /*color: white;*/
        color: #c10500;
        color: #f16321;
        color: darkgray;
        color: #666666;
        
        position: absolute;
        left: 0px;
        bottom: -9px;
        
        
        
        
        padding-right: 5px;
        padding-left: 6px;
        
        /*background-color: #c10500;*/ /*#FF5722;*/
        background-color: white; 
        opacity: 1.0;
		
		border: 1px solid lightgray;
		border-left: 0px none white; /* #c10500;*/
		
        border-radius: 0 15px 15px 0;    /* makes cicle!*/ 
        line-height: 1.5;
        
        transition: all 0.9s ease;
        transform: translateZ(0) scale(1,1); /* prevent transition flicker */
    }




        
   



/*** Show my animated-in 'click for details' message at bottom of property image */

    .myclickdetailswrapper
    {
        position:absolute;
        left:50%;
        bottom:-20px;
         opacity: 0;
         transition: all 0.4s ease-out 0.6s;  /* 2nd optional timing param is delay but time function must come b4 delay if delay specified */
         transform: translateZ(0) scale(1,1); /* prevent transition flicker */
    }
    
    .myclickdetails
    {
        font-size: 15px;
        line-height: 1.5;
        position: relative;
        left:-50%;
        padding-left: 3px;
        padding-right:3px;
        
        color: white; /* #555; */ /* white; */
        background: #000e38; /*#f16321; #FFEDD0; */ /* #888888; */
        border-radius: 4px 4px 4px 4px;
    }
    
    .pp-custom-grid-post-image:hover .myclickdetailswrapper {
        
       opacity: 0.88;
       bottom:20px;
    }
    
    
    
    .pp-custom-grid-post-meta
    {
        padding-top: 10px;
        padding-left: 20px;
        
    }
    
    
    .pp-custom-grid-post-meta a
    {
        text-decoration: none;
    }
    
    
/*** Show area dimensions in red */    
    
    .my-sqft 
    {
        /*color: #c10500;*/
        color: #E97447;
        text-transform: none;   /* turns capitalization off */
        color: #A83C4C;
    }

    .my-sqft span
    {
        color: #888888;
/*         color: #E97447; */
		color: #E97447;
		color: #A83C4C;
    }


/*** Show town */    
    
    .my-town 
    {
        color: #333333;
        color: #091A41;
  
    }

    .my-town span
    {
        color: #888888;
        color: #091A41;
    }
    
/*** Show prop type */    
    
    
    .my-proptype
    {
        color: #428bca;
        /*font-weight: bold;*/
        color: green;
   
    }

    
    .my-proptype a:hover
    {
        color: #428bca;
        /*font-weight: bold;*/
/*         color: green; */
   
    }

    .my-proptype span
    {
        color: #888888;
        color: green;
    }
    

    .my-proptype2
    {
        color: #888888;
        color: #313F5F;
        color: #8A90A9;
    }

   
   
   .my-proptype2 a:hover
    {
        color: #428bca;
        /*font-weight: bold;*/
        color: #767D96;
   
    }

    .my-proptype2 span
    {
        color: #888888;
        color: #313F5F;
        color: #8286D7;
        color: #6577D7;
        
    }
  



/*** put read more link bottom right **/  
  
  
	.pp-custom-grid-post-text
	{
    	padding-right: 0px;
    	margin-bottom: 0.7em;
	}
  
  
  
    .pp-custom-grid-post-more-link
    {
/*        float: right; */
		position: absolute;
		right: 1px;
		bottom: 10px;
		

    }




/* style tooltip */

	.tooltip.top .tooltip-inner {
	    background-color:#FFEDD0;
	    color: #f16321;
	    color: #555;
	     
	   
	}
	
	.tooltip-inner {
	/* 	border: solid 1px #aaa; */
	}
	
	.tooltip.top .tooltip-arrow {
	      border-top-color: #f16321;
		  border-top-color: #aaa;
	/* 	  border-top-color: #FFEDD0; */
	}
	
	.tooltip-inner	/* stop tooltip wrapping. see https://stackoverflow.com/questions/25833199/bootstrap-tooltip-need-to-be-in-single-line  */
	{
	  white-space:nowrap;
	  max-width:none;
	}
	













    .my-read-more-wrapper
    {
        float: right;
        width: 80px;
        padding-top: 15px; 
    }
    
  
  
	.myproximity
	{
		position: absolute;
		bottom: 45px;
		right:10px;
		color: #E97447;	
	}
  
  
  
  
	.myhr
	{
		position: absolute;
		bottom: 43px;
		width:98%;
		left:1%;
		border-top: 1px solid #ccc;
		height: 1px;
	}
  
  
  
  
  
  
/* my link icons */    
  
    
	.property-icon-link-options	/* for image and pdf icons   */
	{
		padding-left: 7px;
	/* 	margin-bottom: 0.5em; */
	/* 	float: left; */
	/* 	width: 70%; */
	
	
	
		position: absolute;
		bottom: 4px;
	
	}    
	    
	.email-icon-link-options	/* for image and pdf icons   */
	{    
	    position: absolute;
		bottom: 4px;
		left: 50%;						/* to center horiz  using wrapper below for final adjust*/		
	}    
	    
	.email-icon-link-options-wrapper	/* to center horiz */
	{
		position: relative;
		left: -50%;
		
	}
	
	.email-icon-link-options-wrapper
	{
		position: relative;
		left: -50%;
		
	}
	
	#editiconprop,
	.custom1edit-01
	{
		font-size: 2.3em;/* 27px; */
		    color: #E97447; /* orange */
		    color: #7a95ad;	/* blue gray */
	/* 	    margin-right: 21px; */
			position: relative;
	/* 		top:-2px; */
			top:3px;
		 
		    
		    opacity: 0.8;
		   
		   -webkit-transition: 0.2s ease-in;
		    -moz-transition: 0.2s ease-in;
		    -o-transition: 0.2s ease-in;
		    transition: 0.2s ease-in;	
	}
	
	#editiconprop:hover,
	.custom1edit-01:hover
	{
		  	font-size: 2.4em;
		    color: #4e7394; 
		    opacity: 1.0;
		    margin-left:2px;
	
	}
    
    
    
	.icon-oneclickphoto-photography-image-camera-lens-shot-picture-5,
	.custom1photo-photography-image-camera-lens-shot-picture-3-2
    {
	    font-size: 1.8em;/* 27px; */
	    color: #E97447; /* orange */
	    color: #7a95ad;	/* blue gray */
/* 	    margin-right: 21px; */
		position: relative;
		top:0px;

	 
	    
	    opacity: 0.8;
	   
	   -webkit-transition: 0.2s ease-in;
	    -moz-transition: 0.2s ease-in;
	    -o-transition: 0.2s ease-in;
	    transition: 0.2s ease-in;
	  
	    
    }
        
    
	.icon-oneclickphoto-photography-image-camera-lens-shot-picture-5:hover,
	.custom1photo-photography-image-camera-lens-shot-picture-3-2:hover
    {
/* 	    font-size: 26px; */
	    font-size: 1.9em;
	    color: #4e7394; 
	    opacity: 1.0;
	    margin-left:2px;
/* 	    margin-right:19px; */
	   
	    
    }
        



	.icon-oneclickfile-documen-paper-acrobat-pdf-adobe,
	.custom1file-documen-paper-acrobat-pdf-adobe
    {
/* 	    font-size: 25px; */
	    font-size: 1.9em;
	    color: #E97447; /* orange */
	    color: #7a95ad;	/* blue gray */
/* 	    margin-right: 21px; */
		position: relative;
/* 		top:-2px; */
	    
	    opacity: 0.8;
	   
	   -webkit-transition: 0.2s ease-in;
	    -moz-transition: 0.2s ease-in;
	    -o-transition: 0.2s ease-in;
	    transition: 0.2s ease-in;
	  
	    
    }
        
    
	.icon-oneclickfile-documen-paper-acrobat-pdf-adobe:hover,
	.custom1file-documen-paper-acrobat-pdf-adobe:hover
    {
/* 	    font-size: 26px; */
		font-size: 2.0em;
	    color: #4e7394; 
	    opacity: 1.0;
	    margin-left:2px;
/* 	    margin-right:19px; */
	   
	    
    }
        


	.icon-oneclicktag-favorite-star-add-bookmark-thicker	/* not used currently */
    {
/* 	    font-size: 25px; */
	    font-size: 2.2em;
	    color: #E97447; /* orange */
	    color: #7a95ad;	/* blue gray */
/* 	    margin-right: 21px; */
		position: relative;
/* 		top:-2px; */
	    
	    opacity: 0.8;
	   
	   -webkit-transition: 0.2s ease-in;
	    -moz-transition: 0.2s ease-in;
	    -o-transition: 0.2s ease-in;
	    transition: 0.2s ease-in;
    }
        
    
	.icon-oneclicktag-favorite-star-add-bookmark-thicker:hover
    {
/* 	    font-size: 26px; */
	    color: #4e7394; 
	    opacity: 1.0;
	    margin-left:2px;
/* 	    margin-right:19px; */ /* no margin re last floated left icon */
	    
	    cursor: pointer;	/* makes cursor a hand as if a link */
    }





	.icon-oneclicksend-mail-email-fast-delivery-2,
	.custom1send-mail-email-fast-delivery
    {
/* 	    font-size: 22px; */
	    font-size: 2.7em;
	    color: #E97447; /* orange */
	    color: #7a95ad;	/* blue gray */
/* 	    margin-right: 23px; */	/* no margin re last floated left icon */
		position: relative;
		top:7px;
	    
	    opacity: 0.8;
	   
	   -webkit-transition: 0.2s ease-in;
	    -moz-transition: 0.2s ease-in;
	    -o-transition: 0.2s ease-in;
	    transition: 0.2s ease-in;
	  
	    
    }
        
    
	.icon-oneclicksend-mail-email-fast-delivery-2:hover,
	.custom1send-mail-email-fast-delivery:hover
    {
/* 	    font-size: 26px; */
		font-size: 2.9em;
	    color: #4e7394; 
	    opacity: 1.0;
	     margin-left:4px;
/* 	    margin-right:21px; */ /* no margin re last floated left icon */
	   
    }




 
 
 
 
 
   /*
	*****************************************************************************************
	* 																					 	*
	*  								Pricing table hover zoom and color overrides			*
	*																						*
	*****************************************************************************************
	
	*/	
 
 
 
	 
	.PricingTablePackage .pp-pricing-table-column
	{
		 	-webkit-transition: all 0.15s linear;
		    -moz-transition: all 0.15s linear;
		    -o-transition: all 0.15s linear;
		    transition: all 0.15s linear;
		    
	
		    
	/* 	    background-color: #fdfdfd !important; */
	/* 	    opacity: 0.9; */
		      
	}	    
	 
	 
	 
	
	 
	 
	 .PricingTablePackage .pp-pricing-table-column:hover
	 {
		  -webkit-transform: scale(1.01); 
			-moz-transform: scale(1.01);
			-ms-transform: scale(1.01);
			-o-transform: scale(1.01);
			 transform: scale(1.01);
			 
			 z-index: 99;
			 
	/* 		 background-color: white !important; */
			 opacity: 1.0;
			 
			 border-color: rgba(0,57,122,0.7) !important;
/* 			 border-color: #f16321 !important; */ /* our logo orange */
			 
			 
/* 			 outline:2px solid rgba(0,57,122,0.12); */
			 
			 border-width: 2px !important;
	
	 }
 

 
 
	.PricingTablePackage .pp-pricing-featured-title
	{
	
		outline:1px solid rgba(0,57,122,0.3);	/* outline helped featured title 'outside border' line up with pricing table column border */ 
		border-radius: 5px 5px 0 0;  	
	}
 
 
	.PricingTablePackage .pp-pricing-featured-title
	{
	
		-webkit-transition: all 0.15s linear;
		    -moz-transition: all 0.15s linear;
		    -o-transition: all 0.15s linear;
		    transition: all 0.15s linear;
		    
	}

 
 
 
	/* technique to only target/change child of hovered parent */
	.PricingTablePackage .pp-pricing-table-column:hover .pp-pricing-featured-title
	 {
		 
		 outline:2px solid rgba(0,57,122,0.7) !important;
		 
	 }
	 
	 
	 
	 
	 
	 
	 .PricingTablePackage .pp-pricing-table-column .pp-pricing-package-button
	{
		 	-webkit-transition: all 0.2s linear;
		    -moz-transition: all 0.2s linear;
		    -o-transition: all 0.2s linear;
		    transition: all 0.2s linear;
		    
	}
	 
	 
	/* technique to only target/change child of hovered parent */ 
	 .PricingTablePackage .pp-pricing-table-column:hover .pp-pricing-package-button
	 {
		 
		 background-color: #002b75 !important;
		 
	 }





 
 
 
 
 /*
	*****************************************************************************************
	* 																					 	*
	*  			styling and size of pdf img 'icons' (on singular property details			*
	*					with attachment caption title below img 				 		 	*
	*****************************************************************************************
	
	see https://stackoverflow.com/questions/22592064/how-to-align-text-below-an-image-in-css
	
	NB they are not in a tab now but in an advanced accordion
	
*/	


	.my-pdf-in-tab
	{
		opacity: 0.80;
		
	}

	.my-pdf-in-tab:hover
	{
		 opacity: 1.0;
		 -webkit-transform: scale(1.07); 
		-moz-transform: scale(1.07);
		-ms-transform: scale(1.07);
		-o-transform: scale(1.07);
		 transform: scale(1.07);
	}

	.my-pdf-in-tab
	{
	 	-webkit-transition: 0.2s ease-in;
	    -moz-transition: 0.2s ease-in;
	    -o-transition: 0.2s ease-in;
	    transition: 0.2s ease-in;
	}


	figure.my-pdf-in-tab
	{
    /* To correctly align image, regardless of content height: */
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 107px; /* 170px; */
	}
	
	.my-pdf-in-tab img
	{
	    width: 95px;/* 150px; */
/*
	    height: 100px;
	    background-color: grey;
*/
	}
	.my-pdf-in-tab .caption
	{
	    /* Make the caption a block so it occupies its own line. */
	    display: block;
	}










 /*
	*****************************************************************************************
	* 																					 	*
	*  Changes/Additions to Profile Builder and Paid Membership subscriptions plugins css	*
	*						i.e. overriding or adding to style-front-end.css				*
	*					 																 	*
	*****************************************************************************************
	
*/	

	.pms-subscription-plan input 
	{
/*     margin-right: 7px;	 */    			/* I changed this 13 August 2018 due to cozmoslabs bug after reporting it several times with no fix from them */
    	margin-right: 7px !important;			/*  set right margin of radio input so it takes */ 				
	}

	
/*  [pms-account] shortcode html table  (Cosmoslabs did not format it at all!) */
	
	.pms-account-subscription-details-table
	{
		margin: 0 auto;						/* center table horizontally  */
		margin-bottom: 35px;				/* also put some space under table before the 'go back to account message' below */
		
		margin-top: 35px;
		
		
/* 		border-bottom: 1px solid #ccc; */		/* lightly border the table off at top and bottom - and to tie up with cozmoslabs subscription formatting that was on previous screen */
/* 		border-top: 1px solid #ccc; */	
	}	

	.pms-account-subscription-details-table td, .pms-account-subscription-details-table th
	{
		padding: 0.75rem;					/* separate column headers and data  */					
	}


	.pms-account-subscription-details-table tbody tr td:first-child
	{
/* 		font-weight: bold !important; */
		color: #555555 !important;	
	}



	.pms-table#pms-payment-history
	{
		margin: 0 auto;						/* center table horizontally  */
		
		border-bottom: 1px solid #ccc;		/* lightly border the table off at top and bottom - and to tie up with cozmoslabs subscription formatting that was on previous screen */
		border-top: 1px solid #ccc;	
	}

	.pms-table#pms-payment-history td, .pms-table#pms-payment-history th
	{
		padding: 0.75rem;					/* separate column headers and data  */					
	}

	.pms-table#pms-payment-history th
	{
		/* 		font-weight: bold !important; */
		color: #555555 !important;	
	}

	.my-account-tabs input[type=submit]		/* without this the UABB advanced tabs module buttons text colour overrode the button text colour in any for within the tab  so I added a class to the tab module */
	{
		color:white !important;
	}



	.pms-account-navigation
	{
		display: none;
	}
             

	.subplans .trigger-terms	/* color uabb popup link as link */	
	{
		color: #428bca;
		
	}



	/* put more space above buttons / below text */

	#pms-abandon-subscription-form input[type=submit]
	{
		margin-top:10px;
		
	}

	pms-paypal-express-confirmation-form input[type=submit]
	{
		margin-top:10px;
		
	} 






/*
	*****************************************************************************************
	* 																					 	*
	*		Property Animated Loader/Spinner for custom grid cells							*
	*					 																 	*
	*****************************************************************************************

	see https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader
	& https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5
	& https://www.w3schools.com/howto/howto_css_loader.asp

  */
 
  

	/* .pp-custom-grid-post-image */ .loader
	{
    display: none;          /* hide by default*/ 
    
    z-index: 99;
    position: absolute;
    top:50%;
    left:50%;
    width:120px;/* 150px; */
    height:120px;/*  150px; */
    margin: -60px 0 0 -60px;
/*     margin: -75px 0 0 -75px; */
    
    
    /* change to smaller diam */
    width:80px;/* 150px; */
    height:80px;/*  150px; */
    margin: -40px 0 0 -40px;
    
    
    
    
    /*  trail section part of circle */
/*     border: 16px solid rgba(248,207,189, 0.4); */
/*     border: 16px solid rgba(148,155,163, 0.45);  */


/*     border: 11px solid rgba(185,193,203, 0.50); */ 
       border: 11px solid rgba(66,138,202,0.5);
   
   /* smaller main part of circle spinner*/
   /* border-top: 16px solid #3498db;*/ /* Blue*/ 

/*     border-top: 11px solid rgba(241,99,33,0.7); */
    border-top: 11px solid rgba(66,138,202,1.0);
        
    border-radius: 50%;
    /*width: 120px;*/
    /*height: 120px;*/
/*     animation: spin 0.5s linear infinite; */
    animation: spin 0.4s linear infinite;
	}
	@keyframes spin {
	    0% { transform: rotate(0deg); }
	    100% { transform: rotate(360deg); }
	}




	.loaderscreen				/* .loaderscreen addition to .loader ensures max z-index & mid screen (fixed) position  see https://stackoverflow.com/questions/31217268/center-div-on-the-middle-of-screen */
	{
		position: fixed;
		z-index:999999;			/* so even above popup and its screen overlay - but get right number */
	    top:0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    margin: auto;
	    
	}

	/*
		This jquery would then add and show fixed .loaderscreen to any page's screen
		
	// add loader html to body of DOM
			$('body').prepend('<div class="loader loaderscreen"></div>');	// prepend adds inside element at beginning
																			// append adds inside element at end	
			// show loader
			$('.loader.loaderscreen').show();								// loaderscreen ensures max z-index & mid screen (fixed)
	
	*/












  /*
	*****************************************************************************************
	* 																					 	*
	*		Search FacetWP Animated Loader/Spinner in Search Criteria Column/box			*
	*					 																 	*
	*****************************************************************************************
	
	see https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader
	& https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5
	&  https://www.w3schools.com/howto/howto_css_loader.asp
	
	*/

	.loadSearchWrapper
	{
		position: relative;
	
		width: 100%;
		height: 50px;
	}
	
	
	
	.searchCriteriaCol .loadSearchWrapper .loaderSearch
	{
	   display: none;          /* hide by default*/ 
	    
	    z-index: 99;
	    position: absolute;
	    top:50%;
	    left:50%;
	    width:50px;
	    height: 50px;
	    margin: -25px 0 0 -25px;
	    
	    
	    
	    /*  trail section part of circle */
	/*     border: 8px solid rgba(255,255,255, 0.3); */ /* Light grey */
	/*     border: 8px solid rgba(241,99,33, 0.17);  */
	/*     border: 8px solid rgba(248,207,189, 0.45); */
	/*     border: 8px solid rgba(148,155,163, 0.40); */
	    border: 6px solid rgba(185,193,203, 0.40); 
	    
		/* smaller main part of circle spinner*/
	   /* border-top: 16px solid #3498db;*/ /* Blue*/ 
	/*     border-top: 8px solid rgba(255,255,255,1.0); */
	    
	    
/* 	    border-top: 6px solid rgba(241,99,33,0.6); */  
	    border-top: 6px solid rgba(66,138,202,0.6);
	    
	    
	    
	    
	    
	    border-radius: 50%;
	    /*width: 120px;*/
	    /*height: 120px;*/
	    animation: spin2 0.4s linear infinite;
	}
	@keyframes spin2 {
	    0% { transform: rotate(0deg); }
	    100% { transform: rotate(360deg); }
	}
	 
 
 
 
 



	/*
	*****************************************************************************************
	* 																					 	*
	*		Fixed Themer header menu. my CSS to underline first level nav menu items		*
	*				old/local version (thin white line vs thick blue remote version			*
	*					 																 	*
	*****************************************************************************************
	*/
 
	
	
	.myMenu .menu-item a:hover,
	.myMenu .menu-item a:focus,
	.myMenu .menu-item a:active
	{
	/*   color: #F16321; */ /*  #fff; */
	  text-decoration: none;
	}
	
	
	.myMenu .menu-item a
	{
	    /*line-height:75px;*/
	    
	}
	
	.myMenu > .menu-item a
	{
	    /*line-height:50px !important;*/
	    
	}
	
	
	
	
	.myMenu .menu-item a::after {
	  content: "";
	  position: absolute;
	}
	
	
	.myMenu .menu-item a::after {
	  margin-top: 28px;
	  /*top: 65%;*/
	  height: 2px !important;
	  width: 0%;
	  left: 50%;
	/*   background-color: rgba(241,99,33, 0.75); */
	  
/* 	  transition: 0.3s ease-out all .1s; */
	transition: 0.1s ease-out all .1s;
	}
	
	
	/*a:not(.active):hover*/
	
	
	/*body:not(:target) .menu-items:target li*/
	
	
	.myMenu .menu-item:hover a::after
	{
	  /*top: 65%; */
	  /*margin-top: 29px;*/
	  width: 76%;
	  left: 12%;
/* 	    transition: 0.3s ease all; */
	transition: 0.1s ease all;
	}
	
	
	/* prevent underline of current page's menu item */
	.myMenu .current-menu-item:hover a::after
	{
	  width:0% !important;
	  left: 50%;
	}
	/* prevent link cursor for current page's menu item */
	.myMenu .current-menu-item
	{
	    cursor: not-allowed !important;
	    pointer-events: none;
	}
	
	
	
	



	/*
	*****************************************************************************************
	* 																					 	*
	*		Fixed Themer header menu. my CSS to underline first level nav menu items		*
	*				new version (thick orange/blue line vs thin white version)				*
	*																						*
	*			Now also prevents underline of right User icon and scales it on hover		* 
	*					 																 	*
	*****************************************************************************************
	*/
 

	
	.myMenu .menu-item a:hover,
	.myMenu .menu-item a:focus,
	.myMenu .menu-item a:active
	{
	  color: #fff;
	  text-decoration: none;
	}
	
	
	.myMenu .menu-item a
	{
	    /*line-height:75px;*/
	    
	}
	
	.myMenu > .menu-item a
	{
	    /*line-height:50px !important;*/
	    
	}
	
	
	
	
	.myMenu .menu-item a::after {
	  content: "";
	  position: absolute;
	}
	
	
	.myMenu .menu-item a::after {
	  margin-top: 31px;
	  /*top: 65%;*/
	  height: 4px !important;
	  width: 0%;
	  left: 50%;
	  
	/*   background-color: rgba(241,99,33, 0.75); */
	  
	  
	  
	   /*background-color: #e7f3f8;*/
	  
/* 	  transition: 0.3s ease-out all 0.1s; */
	  
	  transition: 0.1s ease-out all 0.1s;
	}
	
	
	/*a:not(.active):hover*/
	
	
	/*body:not(:target) .menu-items:target li*/
	
	
	.myMenu .menu-item:hover a::after
	{
	  /*top: 65%; */
	  margin-top: 25px;/* 28px; */
	   height: 4px !important;
	  width: 76%;
	  left: 12%;
	  
	  
	/*   background-color: #428aca; */
	  
	/*   background-color: #F16321; */
	    
	    
	  
	  /*background-color: rgba(255, 255, 255, 0.70);*/
/* 	    transition: 0.3s ease all; */
	transition: 0.1s ease all;
	}
	
	.myMenu.awd .menu-item:hover a::after
	{
/* 		  background-color: #428aca; */		/* like re more subtle underline */
	}
	
	.myMenu.ocp .menu-item:hover a::after
	{
		  background-color: #F16321;
	}
	
	
	
	
	
	
	/* for account/user menu option, now using a fontawesome icon vs a text menu label as entered in WP menu customisation */ 
	
	
	.myMenu .my-user-account-icon:hover a::after			/* prevents underline of user account icon, but still allows hover color change */
	{
		 margin-top: 31px;
	  /*top: 65%;*/
	  height: 4px !important;
	  width: 0%;
	  left: 50%;
	}
	
	
	
	
	
	.myMenu .my-user-account-icon .fa {						/* slightly scale enlarge user account icon upon hover. also see https://generatepress.com/forums/topic/home-icon-instead-of-text-in-menu/ */
	   -webkit-transition: all 0.30s ease;
	   -moz-transition: all 0.30s ease;
	   -ms-transition: all 0.30s ease;
	   -o-transition: all 0.30s ease;
	   transition: all 0.30s ease;
	 }
	 
	 .myMenu .my-user-account-icon:hover .fa {
	   -webkit-transform: scale(1.17);
	   -moz-transform: scale(1.17);
	   -ms-transform: scale(1.17);
	   -o-transform: scale(1.17);
	   transform: scale(1.17);
	   -webkit-transition: all 0.30s ease;
	   -moz-transition: all 0.30s ease;
	   -ms-transition: all 0.30s ease;
	   -o-transition: all 0.30s ease;
	   transition: all 0.30s ease;
	 }
	
	
	
	
	
	/* Digital Marketing Menu Dropdown */
	
	
	.myMenu .digital-marketing:hover a::after			/* prevents underline of top menu item, but still allows hover color change */
	{
		 margin-top: 31px;
	  /*top: 65%;*/
	  height: 4px !important;
	  width: 0%;
	  left: 50%;
	}

	
	
	
	
	
	
	
	/* prevent underline of current page's menu item */
	.myMenu .current-menu-item:hover a::after
	{
	  width:0% !important;
	  left: 50%;
	}
	/* prevent link cursor for current page's menu item */
	.myMenu .current-menu-item
	{
	    cursor: not-allowed !important;
	    pointer-events: none;
	}
	



	
	/* probably is a way of getting rid of account submenu dropdown arrow to make it look cleaner :
		
		do later
		
		 see   https://wordpress.org/support/topic/how-to-remove-drop-down-arrow/  etc */
	
	
	/*
	
	 .my-user-account-icon > a::after, .myMenu ul li.page_item_has_children > a::after
	 {
	    content: none;
	 }
	*/
	
	/*
	.my-user-account-icon .pp-has-submenu-container > a span i::after
	{
		content:none;
		
	}
	*/















	/*
	*****************************************************************************************
	* 																					 	*
	*		Styling of FacetWP Slider bar color	(re default was green #3FB8AF)				*
	*	 																					*
	*****************************************************************************************
	*/


	.facetwp-bb-module .facetwp-slider .noUi-base .noUi-connect
	{
		background-color: #F16321;		/* as per oneclickproperty.com logo orange */	
	}
	
	
	
	.facetwp-slider-reset				/* also increase margin slightly above size slider reset range button */
	{
		margin-top: 7px;
	}
	



	/*
	*****************************************************************************************
	* 																					 	*
	*		Styling of FacetWP Slider bar for proximity facet slider						*
	*	 																					*
	*****************************************************************************************
	
	also See this (wow) https://css-tricks.com/sliding-nightmare-understanding-range-input/
	
	
	*/



	/* original version */
	
	
	input[type=range] {
	  -webkit-appearance: none;
	  margin: 18px 0;
	  width: 100%;
	}
	input[type=range]:focus {
	  outline: none;
	}
	input[type=range]::-webkit-slider-runnable-track {
	  width: 100%;
	  height: 8.4px;
	  cursor: pointer;
	  animate: 0.2s;
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	  background: #F16321; /* #3071a9; */
	  border-radius: 1.3px;
	  border: 0.2px solid #010101;
	}
	input[type=range]::-webkit-slider-thumb {
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	  border: 1px solid #000000;
	  height: 36px;
	  width: 16px;
	  border-radius: 3px;
	  background: #ffffff;
	  cursor: pointer;
	  -webkit-appearance: none;
	  margin-top: -14px;
	}
	input[type=range]:focus::-webkit-slider-runnable-track {
	  background: #F16321 /* #367ebd; */
	}
	input[type=range]::-moz-range-track {
	  width: 100%;
	  height: 8.4px;
	  cursor: pointer;
	  animate: 0.2s;
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	  background: #F16321; /* #3071a9; */
	  border-radius: 1.3px;
	  border: 0.2px solid #010101;
	}
	input[type=range]::-moz-range-thumb {
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	  border: 1px solid #000000;
	  height: 36px;
	  width: 16px;
	  border-radius: 3px;
	  background: #ffffff;
	  cursor: pointer;
	}
	input[type=range]::-ms-track {
	  width: 100%;
	  height: 8.4px;
	  cursor: pointer;
	  animate: 0.2s;
	  background: transparent;
	  border-color: transparent;
	  border-width: 16px 0;
	  color: transparent;
	}
	input[type=range]::-ms-fill-lower {
	  background: #F16321; /* #2a6495; */
	  border: 0.2px solid #010101;
	  border-radius: 2.6px;
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	}
	input[type=range]::-ms-fill-upper {
	  background: #F16321; /* #3071a9; */
	  border: 0.2px solid #010101;
	  border-radius: 2.6px;
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	}
	input[type=range]::-ms-thumb {
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	  border: 1px solid #000000;
	  height: 36px;
	  width: 16px;
	  border-radius: 3px;
	  background: #ffffff;
	  cursor: pointer;
	}
	input[type=range]:focus::-ms-fill-lower {
	  background: #F16321; /* #3071a9; */
	}
	input[type=range]:focus::-ms-fill-upper {
	  background: #F16321; /* #367ebd; */
	}
	
	
	
	
	/* amends version (to override above */
	
	
	
	
	input[type=range] {
	  -webkit-appearance: none;
	  margin: 18px 0;
	  width: 100%;
	}
	input[type=range]:focus {
	  outline: none;
	}
	input[type=range]::-webkit-slider-runnable-track {
	  width: 100%;
	  height: 8.4px;
	  height: 12px;
	  cursor: pointer;
	  animate: 0.2s;
	  box-shadow: 1px 1px 1px gray, 0px 0px 1px #0d0d0d;
	  box-shadow: none;
	  background: #F16321; /* #3071a9; */
	  border-radius: 1.3px;
	  border: 0.2px solid gray;
	  border: 1px solid lightgray;
	}
	input[type=range]::-webkit-slider-thumb {
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
	  border: 1px solid #000000;
	  border: 1px solid lightgray;
	  height: 36px;
	  width: 25px;/* 16px; */
	  border-radius: 3px;
	  background: #ffffff;
	  cursor: pointer;
	  -webkit-appearance: none;
	  margin-top: -14px;
	}
	
	
	input[type=range]:focus::-webkit-slider-runnable-track {
	  background: #F16321 /* #367ebd; */
	}
	input[type=range]::-moz-range-track {
	  width: 100%;
	  height: 8.4px;
	  height: 12px;
	  cursor: pointer;
	  animate: 0.2s;
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	  box-shadow: none;
	  background: #F16321; /* #3071a9; */
	  border-radius: 1.3px;
	  border: 0.2px solid #010101;
	  border: 1px solid lightgray;
	}
	input[type=range]::-moz-range-thumb {
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
	  
	  border: 1px solid #000000;
	  border: 1px solid lightgray;
	  height: 36px;
	  width: 16px;
	  width: 25px;
	  border-radius: 3px;
	  background: #ffffff;
	  cursor: pointer;
	}
	input[type=range]::-ms-track {
	  width: 100%;
	  height: 8.4px;
	  height: 12px;
	  cursor: pointer;
	  animate: 0.2s;
	  background: transparent;
	  border-color: transparent;
	  border-width: 16px 0;
	  color: transparent;
	}
	input[type=range]::-ms-fill-lower {
	  background: #F16321; /* #2a6495; */
	  border: 0.2px solid #010101;
	  border: 1px solid lightgray;
	  border-radius: 2.6px;
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	  box-shadow: none;
	}
	input[type=range]::-ms-fill-upper {
	  background: #F16321; /* #3071a9; */
	  border: 0.2px solid #010101;
	  border: 1px solid lightgray;
	  border-radius: 2.6px;
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	  box-shadow: none;
	}
	input[type=range]::-ms-thumb {
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
	  border: 1px solid gray;
	  border: 1px solid lightgray;
	  height: 36px;
	  width: 16px;
	  width: 25px;
	  border-radius: 3px;
	  background: #ffffff;
	  cursor: pointer;
	}
	input[type=range]:focus::-ms-fill-lower {
	  background: #F16321; /* #3071a9; */
	}
	input[type=range]:focus::-ms-fill-upper {
	  background: #F16321; /* #367ebd; */
	}
	
	
	
	







	/*
	*****************************************************************************************
	* 																					 	*
	*		'return to Properties' link in Individual/Singular propery page					*
	*	 	re I custom programmed JS to respond to it										*
	*					 																 	*
	*****************************************************************************************
	*/



	#returnToPropertyPage:hover
	{
		cursor: pointer; 
	    cursor: hand; 
	}
	
	
	
	
	
	
	



	/*
	*****************************************************************************************
	* 																					 	*
	*		Contact Us page Custom CSS to make Map & other icons responsive & show as link 	*
	*	 	re I custom programmed JS to respond to it										*
	*					 																 	*
	*****************************************************************************************
	*/




	#myGoogleMapIconID:hover
	{
	    cursor: pointer; 
	    cursor: hand; 
	
	}
	
	
	
	#myGoogleMapIconID:hover .uabb-icon-wrap .ua-icon
	{
	    
	
	    
	    /*cursor: pointer; */
	   /* cursor: hand;*/       /* provide link indication as link would do */
	    
	    /*color: red;*/
	
	    -webkit-transform: scale(1.2); 
		-moz-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-o-transform: scale(1.2);
		 transform: scale(1.2);
	
	}
	
	
	
	#myGoogleMapIconID:hover .uabb-icon-wrap .uabb-icon i:before
	{
	    color: #428aca;
	}
	
	#myGoogleMapOpenCloseID:hover ~ .uabb-icon-wrap .uabb-icon i:before
	{
	    /*color: blue !important;    could not get to work    */
	    
	}
	
	
	/*#myGoogleMapOpenCloseID:hover ~ .uabb-icon-wrap .uabb-icon i:before*/
	/*{*/
	/*    color: green !important;*/
	/*}*/
	
	
	
	
	#myAddressID:hover .uabb-icon-wrap .ua-icon
	{
	   
	
	    
	    -webkit-transform: scale(1.2); 
		-moz-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-o-transform: scale(1.2);
		 transform: scale(1.2);
	}
	
	
	
	
	#myEmailID:hover .uabb-icon-wrap .ua-icon
	{
	    -webkit-transform: scale(1.2); 
		-moz-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-o-transform: scale(1.2);
		 transform: scale(1.2);
	}
	
	
	
	#myPhoneID:hover .uabb-icon-wrap .ua-icon
	{
	     
	    
	    -webkit-transform: scale(1.2); 
		-moz-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-o-transform: scale(1.2);
		 transform: scale(1.2);
	}
	
	.uabb-icon-wrap .ua-icon
	{
	    -webkit-transition: 0.3s ease-in;
	    -moz-transition: 0.3s ease-in;
	    -o-transition: 0.3s ease-in;
	    transition: 0.3s ease-in;
	}
	
	
	.transition-class
	{
	    
	    -webkit-transform: scale(1.2); 
		-moz-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-o-transform: scale(1.2);
		 transform: scale(1.2);
	    
	    -webkit-transition: 0.3s ease-in;
	    -moz-transition: 0.3s ease-in;
	    -o-transition: 0.3s ease-in;
	    transition: 0.3s ease-in;
	}
	
	
	


















 
 
	/*
	*****************************************************************************************
	* 																					 	*
	*		conditionally hide property edit button depending on person logged in.			*
	*		 i.e. show button only if admin or author of post logged in	. see			 	* 
	*																					 	* 
	* https://beyondbeaver.com/hide-page-elements-in-beaver-builder-using-url-parameters/ 	*
	*					 																 	*
	*****************************************************************************************
	*/


	
	.editPropButElement													/* hide edit property button unless php showeditbutton class has been added to body by filter */ 
	{
		display:none;
	}
	
	.showeditbutton .editPropButElement
	{
		display:block;													/* show edit button if .showeditbutton was added to body element using WP filter  */
	}
	
	
	
	


	/*
	*****************************************************************************************
	* 																					 	*
	*		conditionally hide property delete button depending on person logged in.		*
	*		 i.e. show button only if admin or author of post logged in	. see			 	* 
	*																					 	* 
	* https://beyondbeaver.com/hide-page-elements-in-beaver-builder-using-url-parameters/ 	*
	*					 																 	*
	*****************************************************************************************

	uses same technique as hiding edit button and same .showeditbutton class (i.e. the delete button shows and hides under same conditions as edit button)

	*/


	
	.deletePropButElement												/* hide edit property button unless php showeditbutton class has been added to body by filter */ 
	{
		display:none;
	}
	
	.showeditbutton .deletePropButElement
	{
		display:block;													/* show edit button if .showeditbutton was added to body element using WP filter  */
	}
	
	
	
	
	







	 
	 
	 
	/*
	*****************************************************************************************
	* 																					 	*
	*		conditionally hide property add button depending on person logged in.			*
	*		 i.e. show button only if subscription says they can						 	* 
	*																					 	* 
	* https://beyondbeaver.com/hide-page-elements-in-beaver-builder-using-url-parameters/ 	*
	*					 																 	*
	*****************************************************************************************
	*/

	/* for property singular page */ 
	
	.addPropButElement
	{
		display:none;
	}
	
	.showaddbutton .addPropButElement
	{
		display: block;													/* show add button on singular page if .showaddbutton was added to body element using WP filter  */
		
	}
	
	
	
	
	
	/* for property archive page */ 
	
	.addPropertyButton												/* add button to be hidden by default */                
	{
		display: none;
		
	/* 	position: absolute; */
		
		
	/*
		right:0px;
		top:0px;	
	*/																		
	}
	
	.showaddbutton .addPropertyButton
	{
		display: block;													/* show add button if .showaddbutton was added to body element using WP filter  */
		
		
	}
	
	
	
	.addPropertyButton i												
	{
		color: #949ba3;
	/* 	background-color: red; */
		opacity: 0.4;
		
	}
	
	.showaddbutton .addPropertyButton i
	{
		color: #F16321;
		opacity: 1.0;
		
		
	/* 	color: blue; */
		
	}
	
	#addPropertyButton .fa {
	   -webkit-transform: scale(1.17);
	   -moz-transform: scale(1.17);
	   -ms-transform: scale(1.17);
	   -o-transform: scale(1.17);
	   transform: scale(1.17);
	}
	
	
	
	/* slightly scale enlarge #onlyAccountProperties user icon upon hover. also see https://generatepress.com/forums/topic/home-icon-instead-of-text-in-menu/ */
	#addPropertyButton .fa {			
	   -webkit-transition: all 0.30s ease;
	   -moz-transition: all 0.30s ease;
	   -ms-transition: all 0.30s ease;
	   -o-transition: all 0.30s ease;
	   transition: all 0.30s ease;
	 }
	 
	#AddPropIconColID:hover #addPropertyButton .fa {
	   -webkit-transform: scale(1.34);
	   -moz-transform: scale(1.34);
	   -ms-transform: scale(1.34);
	   -o-transform: scale(1.34);
	   transform: scale(1.34);
	   -webkit-transition: all 0.30s ease;
	   -moz-transition: all 0.30s ease;
	   -ms-transition: all 0.30s ease;
	   -o-transition: all 0.30s ease;
	   transition: all 0.30s ease;
	 }
	
	
	
	
	
	
	
	
	/* Scale GoogleMapIcon upon hover */
	
	
	#GoogleMapIcon img {			
	   -webkit-transition: all 0.30s ease;
	   -moz-transition: all 0.30s ease;
	   -ms-transition: all 0.30s ease;
	   -o-transition: all 0.30s ease;
	   transition: all 0.30s ease;
	 }
	 
	 #GoogleMapIcon:hover
	 {
	/* 	 background-color: #d1deec; */
	/* 	 background-color: #e2ecdd; */	 
	 }
	 
	 
	#GoogleMapIconColID:hover
	{
		cursor: pointer;
		
	} 
	 
	 
	#GoogleMapIcon:hover img {
		
		
		
		
		
	   -webkit-transform: scale(1.34);
	   -moz-transform: scale(1.34);
	   -ms-transform: scale(1.34);
	   -o-transform: scale(1.34);
	   transform: scale(1.34);
	   -webkit-transition: all 0.30s ease;
	   -moz-transition: all 0.30s ease;
	   -ms-transition: all 0.30s ease;
	   -o-transition: all 0.30s ease;
	   transition: all 0.30s ease;
	 }
	
	
	
	
	
	
	
	/* same for Add property and my property only icons */
	
	
	
	
	#AddPropIconColID
	{
	/* 	display: none; */					/* hide button col unless .showaddbutton added to body by WP PHP filter */
/* 		visibility: hidden; */
	}
	
	#AccountOnlyIconColID				/* hide button col unless .logged-in added to body by WP PHP filter */
	{
	/* 	display: none; */
/* 		visibility: hidden; */
		
	}
	
	
	
	
	#GoogleMapIconColID,
	 .logged-in #AccountOnlyIconColID,
	  .showaddbutton #AddPropIconColID	/* not sure re this method of centering here: see https://stackoverflow.com/questions/41651612/how-to-align-icon-to-center-inside-div-element */
	{
		visibility: visible;
		display: flex;
		justify-content: center;
		align-items: center;	
	} 
	
	
	
	
	
	
	
	
	#AccountOnlyIconColID:hover
	{
		cursor: pointer;
	}
		
	#AddPropIconColID:hover
	{
		cursor: pointer;
		
	}
	
		
	
	/* slightly scale enlarge #onlyAccountProperties user icon upon hover. also see https://generatepress.com/forums/topic/home-icon-instead-of-text-in-menu/ */
	#onlyAccountProperties .fa {			
	   -webkit-transition: all 0.30s ease;
	   -moz-transition: all 0.30s ease;
	   -ms-transition: all 0.30s ease;
	   -o-transition: all 0.30s ease;
	   transition: all 0.30s ease;
	 }
	 
	 #AccountOnlyIconColID:hover #onlyAccountProperties .fa {
	   -webkit-transform: scale(1.34);
	   -moz-transform: scale(1.34);
	   -ms-transform: scale(1.34);
	   -o-transform: scale(1.34);
	   transform: scale(1.34);
	   -webkit-transition: all 0.30s ease;
	   -moz-transition: all 0.30s ease;
	   -ms-transition: all 0.30s ease;
	   -o-transition: all 0.30s ease;
	   transition: all 0.30s ease;
	 }
	
	

	 	 
	 
	/*
	*****************************************************************************************
	* 																					 	*
	*		conditionally hide .onlyAccountProperties button depending on logged in.		*
	*		 i.e. show button only if anyone logged in	. see							 	* 
	*																					 	* 
	* https://beyondbeaver.com/hide-page-elements-in-beaver-builder-using-url-parameters/	* 
	*																						*
	*	also see https://codex.wordpress.org/Plugin_API/Filter_Reference/body_class			*
	*****************************************************************************************
	*/

	.onlyAccountProperties												/* onlyAccountProperties filter button to be hidden by default */                
	{
		display: none;																			
	}
	
	.logged-in .onlyAccountProperties
	{
		display: block;													/* show onlyAccountProperties if logged-in class was added to body element */
																		/* note the logged-in is added automatically and does not need me to add filter */																															
	}