/*
Theme Name: Two Blue Toucans
Version: 1.0
Description: A Child Theme to add styling to Divi
Author: Two Blue Toucans
Author URI: http://www.twobluetoucans.co.uk
Template: Divi
*/


/*******************************************************

       Colours
	   
*******************************************************/

:root {
--HDS-MenuUnderlineColor:	#216b5b;  /* Dark Green */
--HDS-MenuItemColor:		#2f2f2f;    /* Dark Grey */
--HDS-CurrentPageMenuItemColor: 	#216b5b;  /* Dark Green */
--HDS-TitleColor:		#00226d;     /* Dark Blue */
--HDS-SeaGreen:		#419976;
--HDS-MainColor:			#216b5b;  /* Dark Green */
--HDS-ButtonFGColor:		#2f2f2f;    /* Dark Grey */
--HDS-ContrastColor:		#ffc500;     /* Yellow */
--HDS-BodyColor:		#2f2f2f;    /* Dark Grey */
--HDS-GreyBGColor: 	#f0f0f0;      /* Mid Grey */
--HDS-HistoryBoxColor:   #f0f0f0;      /* Mid Grey */
--HDS-BulletTextColor:			#216b5b;  /* Dark Green */
--HDS-BulletPointColor:			#00226d;     /* Dark Blue */
}

/* RGBA COLORS WILL NOT BE CHANGED BY MODIFYING ABOVE */
/* RGBA COLORS NEED TO BE SET BY HAND */


/***********************************************************************

   Style the fonts to be used....
   
   H1 - page title - big, bold, uppercase, center aligned
   H2 - section title - left aligned - slightly smaller than H1
   H3 - identical to H2 but center aligned
   H4 - section subtitle - smaller than H2
   Hero H1 & Hero H2 - Identical - Hero H2 is for use when H1 is on page body - so need to avoid using Hero H1
   highlight-text - center aligned, normal case, bold, medium size, body color
   address-text - left aligned, slightly bigger than body
   
   
***********************************************************************/

a, p, .et_pb_text_inner, article, body, h1, h2, .et_bloom_form_header h2, h2>a, h3, h3>a, h4 {
    font-family: Lato, sans-serif;
}

h1, h2, h3, h4, .highlight-text p {
	color:var(--HDS-TitleColor) ;
}

a, p, .et_pb_text_inner, article, body {
	color:var(--HDS-BodyColor);
}

.et_bloom_form_header h2 {
	color:white;
}

h1, h2, h3, h4 {
	text-transform:uppercase;
}

.et_bloom_form_header h2 {
	text-transform:none !important;
}

h1, h2, .et_bloom_form_header h2, h3, h4, .highlight-text, .bullet-points p, .bullet-points-plus p {
	font-weight:bold;
}

h1, .highlight-text, h3 {
	text-align:center;
}

.hero-slider h1, .hero-slider h2 {
	text-align:left;
	text-transform:none !important;
}

.bullet-points p, .bullet-points-plus p {
	color:var(--HDS-BulletTextColor);
}

/***********************************************************************

   Style the embedded text links
   
***********************************************************************/

/* stand alone h2 etc. links */
.et_pb_text_inner>h2>a, .et_pb_text_inner>h3>a {
	font-weight:bold;
}

.et_pb_text_inner>h2>a:hover, .et_pb_text_inner>h3>a:hover {
	opacity:0.7;
}

/* links embedded in text */
p>a, .et_pb_text>a, .et_pb_toggle_content>a, .impu-form-links-pass a {
	color:var(--HDS-MainColor);
	font-weight:bold;
}

p>a:hover, .et_pb_text>a:hover, .et_pb_toggle_content>a:hover, .impu-form-links-pass a:hover {
	opacity:0.6;
}

/***********************************************************************

    Size the fonts to be used....
   
    We use Fluid Typography.....

    https://www.smashingmagazine.com/2016/05/fluid-typography
   
***********************************************************************/

h1 {
    font-size: calc( 32px + (48 - 32) * (100vw - 980px) / (1600 - 980)) !important;
}

@media (min-width:1600px) {
    h1 {
	    font-size:48px !important;			
	}
}

@media (min-width:420px) and (max-width:980px) {
    h1 {
	    font-size:32px !important;	
	}
}	

@media (max-width:420px) {
    h1 {
	    font-size:26px !important;	
	}
}

h2, h3 {
    font-size: calc( 20px + (30 - 20) * (100vw - 980px) / (1600 - 980)) !important;
}

@media (min-width:1600px) {
    h2, h3 {
	    font-size:30px !important;			
	}
}

@media (max-width:980px) {
    h2, h3 {
	    font-size:20px !important;	
	}
}

.footer-section h2, .footer-section h3 {
    font-size: 20px !important;
}	

@media (min-width:981px) {
    h4 {
	    font-size:20px !important;			
	}
}

@media (max-width:980px) {
    h4 {
	    font-size:18px !important;	
	}
}	

.bullet-points p, .bullet-points-plus p {
    font-size: 20px;
}

/* body text etc. */
p, p>a, article, body, .et_pb_text_inner, .caldera-grid input.form-control {
    font-size: 18px;
}

/* Highlighted body text etc. */
.image-section p, .image-section p>a, .image-section .et_pb_text_inner,
.parallax-section p, .parallax-section p>a, .parallax-section .et_pb_text_inner,
.gradient-section p, .gradient-section p>a, .gradient-section .et_pb_text_inner,
.highlight-section p, .highlight-section p>a, .highlight-section .et_pb_text_inner {
    font-size: 24px;
}

/* decrease font size in the footer to save space */
.footer h2 {
	font-size:20px !important;
}

.footer h3 {
	font-size:14px !important;
	padding-bottom:5px;
}

.footer p, .footer p>a {
	font-size:14px !important;
	line-height:1.4em;
}

/* highlight text */
.highlight-text p, .highlight-text .et_pb_text_inner   {
    font-size: 28px;
}

/* address text */
.address-text p, .address-text .et_pb_text_inner   {
    font-size: 24px;
}

/* Hero fonts */
.hero-slider h1 {
	font-size:44px !important;
}

.hero-slider h2 {
	font-size:44px !important;	
}

@media (max-width:640px) {
	/* Hero fonts */
	.hero-slider h1 {
		font-size:36px !important;
	}

	.hero-slider h2 {
		font-size:36px !important;	
	}	
}

/*****************************************************************
		
					Style the Header & Logo
		
*****************************************************************/
 
.et_menu_container {
	width:80% !important;
	margin-right:10% !important;
	margin-left:10% !important;
	padding-right:0% !important;
	padding-left:0% !important;
}

/* move header to the left a little as screen narrows */
@media (max-width:1500px) {
	.et_menu_container {
		width:90% !important;
		margin-left:5% !important;
		margin-right:5% !important;
	}	
} 

@media (max-width:1200px) {
	.et_menu_container {
		width:93% !important;
		margin-left:5% !important;
		margin-right:2% !important;
	}	
}

/* add a little space atound on mobile */
@media (max-width:640px) {
	.et_menu_container {
		margin-top:1%; 
		margin-bottom:1%; 
	}	

}
/* when the logo size is a lot bigger than the displayed size, 
     DIVI makes a real mess of shrinking it and this helps a lot
*/
#logo {
-webkit-transform:none;
}

/* put a shadow under the hanging logo */
/* make the logo object a circle otherwise shadow is "square" */
img#logo {
	border-radius:50%;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.2);
}

/* make logo smaller and push up a little on mobile */
@media (max-width:600px) {
	.logo_container {
		height:50% !important;
	}
	#logo {
		margin-top:-5px !important;
	}
}

/* just push the menu down a little within the header */
/* this creates a little extra space for the icon menu items to clear the top of the page */
#et-top-navigation {
	margin-top:8px;
}

/* push the hamburger over a bit on mobile */
@media (max-width:600px) {
	#et-top-navigation {
		padding-right:20px !important;
	}
}

/* not sure why but logo gets big at this range os sizes so force it a bit smaller */
@media (min-width:980px) and (max-width:1200px) {
	.logo_container {
		height:60% !important;
	}
}
 
/*****************************************************************
		
					Style the Top Header
		
*****************************************************************/

/* slim the section */
.top-header { 
	padding:2px !important;
}

/* spread the items out a bit */
.top-header .et_pb_column { 
	margin:0px 0px 0px 8px !important;
	margin-right:0px !important;
}

/* slim the row */
.top-header .et_pb_row {
	padding:5px 0px !important;
}

/* remove a lot more whitespace on tablet etc. */
@media (max-width:980px) {
	.top-header .et_pb_column {
		width:auto !important;
	}
	.top-header .et_pb_module {
		margin:0px !important;
	}
	.top-header .et_pb_module a {
		padding:8px !important;
		font-size:12px;
	}
}

/* move the content over to the right to keep it aligened with the menu (et_menu_container) */
@media (max-width:1500px) {
	.top-header .et_pb_row {
		width:90% !important;
		margin-left:5% !important;
		margin-right:5% !important;
	}	
} 

@media (max-width:1200px) {
	.top-header .et_pb_row {
		width:93% !important;
		margin-left:5% !important;
		margin-right:2% !important;
	}	
} 

/* switch off entirely on phones */
@media (max-width:640px) {
	.top-header {
		display:none;
	}	
} 

/*****************************************************************

    Right Align
	
	Use flex to right align objects in a row into a row and 
	vertically center them. 
	
	Used in the top header to right align phone numbers and social icons
                                                               
*****************************************************************/

/* shrink to fit the columns and modules */
.right-align .et_pb_column, .right-align .et_pb_module {
	width:auto;
	margin:0px 5px 0px 0px;
}

.right-align {
	display:flex;
	flex-direction:row;	
	justify-content:flex-end;
	align-items:center;
}

/* add some extra left space to the button on mobile */
/* this is because, on mobile, we are using single social icons, not a social icon module containing three icons.... */
/* so the spacing is changed and we need the extra space to neaten it up */
@media (max-width:980px) {
	.right-align .et_pb_button {
		margin-left:10px;
	}
}
 
 /*****************************************************************
		
					Fix the Divi Jumping Header
		
******************************************************************/

@media screen and (min-width: 981px) {
	#page-container {
		top: 153px !important;
		padding-top: 153px !important;
	}
}

/*****************************************************************
		
					Style the Primary Menu
		
******************************************************************/
 
/* Style menu items */        
#top-menu a {
	color:var(--HDS-MenuItemColor) !important;
    font-size: calc( 12px + (16 - 12) * (100vw - 980px) / (2000 - 980));
    text-transform:uppercase;  
	text-align:center;
    font-weight:bold;
}

@media (min-width:2000px) {
	#top-menu a { 	
	    font-size:16px;
	}
}

@media (max-width:980px) {
	#top-menu a { 	
	    font-size:12px;
	}
}

@media (max-width:1200px) {
	#top-menu li { 	
	    padding-right:12px;
	}
}

/* we use an underline and color change to show the hover so stop the default change in opacity */
#top-menu a:hover {
	opacity:1 !important;
	color:var(--HDS-MenuUnderlineColor) !important;	
}

/* Highlight the current page on the menu */
/* This also highlights the root menu item if the current page is on this submenu */
#top-menu .current-menu-item>a, #top-menu .current-menu-parent>a {
	opacity:1;
	color:var(--HDS-CurrentPageMenuItemColor) !important;	
}

/* Style the font awesome icons */
/* These are in the main menu */
#top-menu .fas {
	color:var(--HDS-MenuItemColor) !important;
}

/*******************************************************

      Style Desktop Sub Menus             

*******************************************************/

/* this is the drop down container */
/* by default it aligns with the left edge of the parent */
/* so set left to a negative to make the submenu look centered */
#top-menu .menu-item ul.sub-menu {
	width:300%;
    left:-100%;
}

/* Switch off the top border (it uses the default color) */
#top-menu .menu-item ul.sub-menu {
	border-top:0px;
}

/* this is the submenu menu item container */
/* The menu text is a bit narrow considering both the */
/* menu items and the menu container has padding.... */
#top-menu .menu-item ul.sub-menu li.menu-item {
   padding-right:0px !important;
   padding-left:0px !important;
   width:100%;
}

/* this is the submenu menu item */
#top-menu .menu-item ul.sub-menu a {
	text-align:center;
	padding:6px 12px 6px 12px !important;
	width:90% !important;
	margin-right:5%;
	margin-left:5%;
}

/* submenus are getting an opacity change on the background colour by default so switch that off please */
#top-menu .menu-item ul.sub-menu a:hover {
	background-color:transparent;
}

/* the submenu root item has no page attached to it so switch off any behaviour that suggests it is clickable */
#top-menu .menu-item-has-children>a:hover {
	cursor:default;
}

/* switch off the down carot displayed on menu items that have submenus */
#top-menu .menu-item-has-children > a::after {
    display:none;
}

/* for some reason.... when we attached a submenu to a top menu */
/* the topmenu menu item is widened a little with some padding.... */
#top-menu .menu-item-has-children a {
	padding-right:0px !important;
}

/* the menu items in the submenu are quite wide and one of them wraps */
/* So we need to move the end-position of the underline down a bit */
#top-menu .menu-item ul.sub-menu a:hover::after,
#top-menu .menu-item ul.sub-menu a:focus::after {
	/* this is the end position for the underline */
	/* can be a negative number */
	/* should be smaller number than starting position */
	/* -webkit-transform: translateY(0.6em) !important; */
	/* -moz-transform: translateY(0.6em) !important; */
	/* transform: translateY(0.6em) !important; */
}

/*******************************************************

	Underline on Menu Hover - adapted from
	
	https://divisoup.com/five-subtle-menu-hover-effects/

the issue with this is that when the menu is fixed it 
actually varies in height as the oage is scrolled.... so 
we need to choose a 'top' value that works for both the 
max and min menu sizes.      

*******************************************************/

#top-menu a::after {
	position: absolute;
	top: 50%; /*you may want to adjust this*/
	left: 0;
	width: 100%;
	height: 3px; /* thickness of underline */
	background:var(--HDS-MenuUnderlineColor);   /* underline colour */
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	/* this is the starting position for the underline */
	-webkit-transform: translateY(1em);
	-moz-transform: translateY(1em);
	transform: translateY(1em);     
}

#top-menu a:hover::after,
#top-menu a:focus::after {
	opacity: 1 !important;
	/* this is the end position for the underline */
	/* can be a negative number */
	/* should be smaller number than starting position */
	-webkit-transform: translateY(0.2em);
	-moz-transform: translateY(0.2em);
	transform: translateY(0.2em);
}

/* if we have a centered inline logo.... */
/* we need to switch off the underline or it appears on mouse hover */
div.logo_container a::after {
	display:none;
}

/* this is quite complicated but it is intended to.... */
/* ...center align all submenu items.... */
/* ...remove all whitespace to left and right... */
/* ...shrink-to-fit all <a> containers..... */
/* all with the intention of making the underline exactly the same width as the sub menu item */
#top-menu ul.sub-menu a {
	display:inline-block !important;
	width:auto;
}

#top-menu .menu-item ul.sub-menu a {
	width:auto !important;
	margin-left:0px;
	margin-right:0px;
	padding-left:0px !important;
	padding-right:0px !important;
}

#top-menu .menu-item ul.sub-menu li.menu-item {
	text-align:center;
}

/* set the underline on submenu items */
#top-menu ul.sub-menu a::after {
	top: 80% !important; /*you may want to adjust this*/
}

/* when we have a submenu... it gets complicated.... */
/* and the menu::after gets it's position from the submenu */
/* so we need to stop that... and set it back to the same */
/* value as the other top menus */
.menu-item-has-children a::after {
	top: 50% !important; /*you may want to adjust this*/	
	content:"" !important; /* main menus with a submenu have a down carrot under them so switch that off please */
}

/*****************************************************************
		
					Mobile Menu
		
 *****************************************************************/
 
@media ( max-width: 980px ) {

	/* style all menu items */	
	#et_mobile_nav_menu a {
		font-size: 20px;
		letter-spacing:4px;
		text-transform:uppercase;  
		/* text-align:center; */
		font-weight:400;
	}
	
    /* style the hamburger */
	span.mobile_menu_bar.mobile_menu_bar_toggle:before {
		color: var(--HDS-MainColor);  
		font-size:48px;
	}
	
	/* change the contrast colour stripe at the top */
	/* narrow the popup menu and position it */
	.et_mobile_menu {
		border-top-color: var(--HDS-MainColor);	
		width:50%;
		left:30%;
		padding:0px;
	}
	
	/* center the hamburger */
	#et_mobile_nav_menu {
		float:none !important;
		margin-left:auto;
		margin-right:auto;
	}

	span.mobile_menu_bar {
	    text-align:right;		
	}

	/* switch off all submenu items on mobile */
	/* otherwise menu is HUGE */
    .sub-menu .menu-item {
        /* display:none; */
    }
	
	/* remove the submenu root as there is no page for it to jump to */
    .menu-item-has-children>a {
		/* display:none !important; */
    }
}

/* adjust layout for mobile */
@media (max-width:600px) {
	/* reduce the font and whitespace */
	#et_mobile_nav_menu a {
		font-size: 14px !important;
		letter-spacing:2px;
		padding-top:5px;
		padding-bottom:5px;
	}
	
	/* widen the popup menu and center position it */
	.et_mobile_menu {
		width:80%;
		left:10%;
	}
}

/*****************************************************************
		
		Mobile SubMenus
		
		There is some JS to go with this. It's probably in Divi Options -> Integration
		
 *****************************************************************/

/********* Mobile Menu Collapse ********/
 
/* color the hidden sub menus to match their parent menu item */
#mobile_menu .menu-item-has-children ul.sub-menu {
    background-color:rgba(0,0,0,0.05);
}

/* increase the indent on the submenus */
#mobile_menu .menu-item-has-children ul.sub-menu .menu-item,
#mobile_menu .menu-item-has-children ul.sub-menu {
    padding-left:15px;  
}
 
/**** This hides the sub menu items on mobile ****/
 
#main-header .et_mobile_menu li ul.hide {
    display: none !important; 
	position:absolute;
	opacity:0;
  transition: position 0s, opacity 0s linear;
}

#main-header .et_mobile_menu li ul {
    /* display: none !important; */
	position:relative;
	opacity:1;
  transition: position 0.5s, opacity 0.5s linear;
}
 
/**** This adjusts the positioning of the parent menu item on mobile ****/
 
#mobile_menu .menu-item-has-children {
    position: relative;
}
 
/**** This styles the icon and moves it to the right ****/
 
#mobile_menu .menu-item-has-children > a + span {
	position: absolute;
	right: 0;
	top: 0;
	padding: 5px 10% 5px 80%;
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
	z-index: 3;
}
 
/**** Here you can swap out the actual icons ****/
 
span.menu-closed:before {
	font-family: 'ETmodules' !important;
	content: '\4c';
}
 
span.menu-closed.menu-open:before {
	font-family: 'ETmodules' !important;
	content: '\4d';
}

/*******************************************************

	Overhanging logo by Geno Quiroz	  
	
https://quiroz.co/the-overlapping-divi-logo/

*******************************************************/

#top-header {z-index: 99999;}
 
#logo {
	background-color:white;
    max-height: 200% !important;
	max-width:200%;
	/* min-height:200px; */
    margin-top: -40px;
    z-index: 100000;
}

@media (max-width:640px) {
	#logo {
		margin-top: 0px !important;
	}
}

/*****************************************************************

                  Style the Hero Section  	

Video section at top of home page				  
                                                               
*****************************************************************/

/* force height of the section to display an appropriate amount of video */
.hero-section {
	padding:0px;
	min-height:calc(100vw * 540 / 1280);
}

@media (max-width:640px) {
	/* force height to be the same as the video clip */
	.hero-section {
		padding:0px;
		min-height:calc(100vw * 760 / 1280);
	}	
}

/* remove the shitespace - flex is vertically centering the section content */
/* We want the spacing to be equal top and bottom. Setting it to zero is arbtrary but equal */
.hero-section .et_pb_column {
	margin:0px;
}

/* Add a little padding to the top level row child of the section */
/* This leaves a little breathing space between our content and the section boundary */
.hero-section>.et_pb_row {
	padding-top:50px;
	padding-bottom:50px;
}

/*****************************************************************

                  Style the Page Banner 	

Banner on all pages (apart from home page)				  
                                                               
*****************************************************************/

.page-banner {
	padding-top:0px !important;
	padding-bottom:0px !important;
	min-height:calc(100vw * 257 / 750);
}

/*****************************************************************

                  Style the hero sliders  

We actually use the slide title for the content and the 
slide content for the title.... In effect, putting the title
beneath the content.....				  
                                                               
*****************************************************************/


/* Center the slide text vertically within the slide using Flex */
/* Be sure to remove all vertical whitespace to allow this - Flex is now managing the layout */
.hero-slider .et_pb_slide .et_pb_container {
	display:flex;
	flex-direction:row;
	align-items:center;
}

/* the hero is now full width so remove as much margin etc. as possible to maximise its width */
.hero-slider .et_pb_slide_description, .hero-slider .et_pb_slide {
	padding:0px;
}

/* remove the shadow from each slide and text*/
/* when a light background is used, the targeting does not work so well and we need to go after .et_pb_bg_layout_dark */
.hero-slider .et_pb_slide {
	box-shadow:none !important;
}

.hero-slider .et_pb_slide_description {
    text-shadow:none;
}

/* the slide backgrounds need to be transparent because we have an image on the section */
.hero-slider .et_pb_slide {
	background-color:transparent !important;
}

/*****************************************************************

                  Style the Back-to-Top Button                 
                                                               
*****************************************************************/

/* switch off on desktop */
@media (min-width:980px) {
	.et_pb_scroll_top {
		display:none !important;
	}
}

/*******************************************************************************

Remove sidebars from Blog Posts and the 404 page

Sidebars will still be visible on archives and Woo Pages.                                                    
                                                                           
*******************************************************************************/

.event-template-default #left-area, .single-post #left-area, .error404 #left-area, 
.woocommerce-checkout #left-area, .woocommerce-cart #left-area, .woocommerce-lost-password #left-area  {
	width:100%;
}

/* remove vertical bar that separates content from sidebar */
.event-template-default .container:before, .single-post .container:before, .error404 .container:before, 
.woocommerce-checkout .container:before, .woocommerce-cart .container:before, .woocommerce-lost-password .container:before  {
	display:none;
} 

.event-template-default #sidebar, .single-post #sidebar, .error404 #sidebar, 
.woocommerce-checkout #sidebar, .woocommerce-cart #sidebar, .woocommerce-lost-password #sidebar {
	display:none;
}

/*******************************************************************************

Style the pages where we have Sidebars

These pages are all Woo pages plus the search results page.                                                 
                                                                           
*******************************************************************************/

@media (min-width:1350px) {
	.woocommerce-page #et-main-area .container {
		max-width:100%;
		margin-left:15%;
		width:85%;
		margin-right:0% !important;
	}
	.woocommerce-page #left-area {
		width:75%;
		padding-right:5%;
	}	
	.woocommerce-page #sidebar {
		width:25%;
		padding-right:5%;
	}
	.woocommerce-page #et-main-area .container:before {
		right:25% !important;
	}	
}

/*********************************************************************************

style all buttons...  

We style the default buttons so they are all 'dark-buttons'. But we set them to be 'light styling' in dark-sections. 
Sometimes it is useful to have a dark-button in a dark-section so we need the dark-section dark-button class to do this....                                      

*********************************************************************************/

/* switch OFF the default hover behaviour - stop it from adding a '>' to the right.... */
.et_pb_button::after, button.single_add_to_cart_button::after, .woocommerce a.checkout-button::after, .woocommerce a.button::after, .woocommerce-message a.button::after, .related.products form.cart .button::after, button.button.alt::after,
.woocommerce a.checkout-button::after, .woocommerce a.button::after, .woocommerce-message a.button::after, .woocommerce button#place_order::after, .shipping-calculator-form button.button::after, .woocommerce .woocommerce-form-login__submit::after, .woocommerce td.actions button.button::after, .woocommerce-account button.button::after           
{
	display:none;
}

/* buttons in the page body and the Comment Submit button and the CF7 Submit button and the search button, and the mailchimp subscription button */
a.et_pb_button, p.form-submit input[type="submit"], .wpcf7 input[type="submit"], .et_pb_search input.et_pb_searchsubmit, div#mc_embed_signup input[type="submit"], .caldera-grid input[type="submit"],
.et_pb_blog_grid a.more-link, .hds_events_grid a.more-link, .et_bloom_submit_subscription, .action-blurb p:last-child a, .action-blurb .et_pb_blurb_description>a,
.woocommerce button.single_add_to_cart_button, .woocommerce a.checkout-button.button.alt.wc-forward, .woocommerce input.button, .woocommerce a.button, .woocommerce button.button, .woocommerce a.added_to_cart.wc-forward, .woocommerce-message a.button,
.sidebar .textwidget a, .widget_shopping_cart a.button.wc_forward, .related.products form.cart .button,
.ihc-login-template-13 .impu-form-submit input, .ihc-login-template-13 .ihc-register-link, .ihc-upload-avatar, .ihc-register-14 .iump-submit-form input, .ihc-logout-wrap, .iump-renew-subscription-button,
.hds-email-preferences input[type="submit"]
{
	border-radius:0px !important;
    font-family: Lato, sans-serif;
    text-transform:uppercase;  
	font-weight:bold !important;
	border:2px solid var(--HDS-ContrastColor) !important;
	color:var(--HDS-ButtonFGColor) !important;
	background-color:var(--HDS-ContrastColor) !important;
	padding:0.2em 0.8em 0.2em 0.8em !important;
    transition: all 0.4s;
    font-size: 16px !important;
	line-height:24px !important;
}

a.et_pb_button:hover, p.form-submit input[type="submit"]:hover, .wpcf7 input[type="submit"]:hover, .et_pb_search input.et_pb_searchsubmit:hover, div#mc_embed_signup input[type="submit"]:hover, .caldera-grid input[type="submit"]:hover,
.et_pb_blog_grid a.more-link:hover, .hds_events_grid a.more-link:hover, .et_bloom_submit_subscription:hover, .action-blurb p:last-child a:hover, .action-blurb .et_pb_blurb_description>a:hover,
.woocommerce button.single_add_to_cart_button:hover, .woocommerce a.checkout-button.button.alt.wc-forward:hover, .woocommerce input.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.added_to_cart.wc-forward:hover, .woocommerce-message a.button:hover,
.sidebar .textwidget a:hover, .widget_shopping_cart a.button.wc_forward:hover, .related.products form.cart .button:hover,
.ihc-login-template-13 .impu-form-submit input:hover, .ihc-login-template-13 .ihc-register-link:hover, .ihc-upload-avatar:hover, .ihc-register-14 .iump-submit-form input:hover, .ihc-logout-wrap:hover, .iump-renew-subscription-button:hover,
.hds-email-preferences input[type="submit"]:hover
{
	color:var(--HDS-ContrastColor) !important;
	background-color:transparent !important;
}

/* 'light' buttons - for dark background - these inherit from 'standard' buttons above but need colors changing */
/* We need these here even if we use the same color scheme for buttons in dark as in light - because if not,    */
/* the dark-section styling will use 'dark link' styling on the dark buttons....                                */
.dark-section a.et_pb_button, .dark-section .caldera-grid input[type="submit"] {
	color:var(--HDS-ButtonFGColor) !important;
	background-color:var(--HDS-ContrastColor) !important;
}

.dark-section a.et_pb_button:hover, .dark-section .caldera-grid input[type="submit"]:hover {
	color:var(--HDS-ContrastColor) !important;
	background-color:transparent !important;
}

/* Usually, buttons expand to be as wide as the text they display. So, they */
/* are variable width. We prefer fixed width so expand the buttons so that they */
/* fill their container. Thus, buttons in the same column will have the same width */
.full-width a {
	width:100%;
	margin-right:0%;
	margin-left:0%;
	display:block;
	text-align:center;
}

/* if we set body text to be fully justified, we need to be careful with the */
/* buttons because without this they will look left aligned */
div.et_pb_button_module_wrapper a {
	text-align:center !important;
}

/* we don't like really narrow buttons - buttons with lables of 'ON' or 'OFF' for example */
.et_pb_button_module_wrapper a {
	min-width:100px;
}

/* we don't like really narrow buttons in the Woo product archive either */
.woo-archive-button {
    display: inline-block;
    /* min-width: 100px; */
    min-width: 100%;
    text-align: center;
}

/* this is a bit weird - Is this a bug? */
/* When we have an ET button in a text module..... we need to make it inline-block */
/* or it is given the wrong height..... */
/* We have ET buttons in text moduless in the login-logout shortcode in the top header */
.top-header .et_pb_text_inner a.et_pb_button {
	display:inline-block;
}


/*********************************************************************************

style the Social Follow Buttons

https://www.diviguide.com/the-definitive-guide-to-the-social-media-module

https://divibooster.com/adding-more-icons-to-the-social-media-follow-module/

*********************************************************************************/

/* foreground */
.et_pb_social_media_follow li a.icon::before {
	color:var(--HDS-ButtonFGColor) !important; 
    font-size:20px !important; 
	margin-top:2px;
    line-height:28px !important; 
}

/* Is there a bug in Divi? On CPT pages (like woo shops) we CANNOT set the bg color of social icons*/
/* So we had to put the color in by hand, adding it to the social follow module icon */
.et_pb_social_media_follow li a.icon:hover::before {
	color:var(--HDS-ContrastColor) !important; 
}

/* background */
/* Add the #et-boc to deal with Custom Post Types (such as woo) */
/* Without this, CSS here does not work on CPTs */
.et_pb_social_media_follow li a.icon.et_pb_with_border,
#et-boc .et_pb_social_media_follow li a.icon.et_pb_with_border { 
	background-color:var(--HDS-ContrastColor) !important;
	border:2px solid var(--HDS-ContrastColor) !important; 
	border-radius:100% !important;
	height: 32px; 
    width: 32px; 
    padding: 0; 
    transition: all 0.4s;
}

.et_pb_social_media_follow li a.icon.et_pb_with_border:hover,
#et-boc .et_pb_social_media_follow li a.icon.et_pb_with_border:hover {
	background-color:transparent !important;
}

/* they have margin bottom and we want slim so remove it */
.et_pb_social_media_follow li {
	margin-bottom:0px;
}

/* replace the Dribble icon with a Email icon from ET Font Icon Set */
/* replace the MySpace icon with a Mobile icon from ET Font Icon Set :-) */
/* replace the RSS icon with a Landline icon from ET Font Icon Set :-) */
/* ************** We also add JS to the theme header to change the Target Title for the icon - the mouseover hint changes *****************/
li.et_pb_social_icon.et-social-dribbble a.icon:before {
    content: '\e010' !important; 
}

li.et_pb_social_icon.et-social-myspace a.icon:before {
    content: '\e00b' !important; 
}

li.et_pb_social_icon.et-social-rss a.icon:before {
    content: '\e090' !important; 
}


/*********************************************************************************

    Style the Social Follow Buttons and Text in pairs in a column

*********************************************************************************/

/* flex ROW of vertically centered objects */
.social-column {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items:center;
}

/* remove these - we want the same whitespace on all or flex will not line them up */
.social-column .et_pb_social_icon {
	margin-bottom:0px;
}

.social-column .et_pb_module p {
	padding-bottom:0px !important;
}

/* add a little whiteapce between the items when they are in a row */
.social-column .et_pb_module {
	margin-right:5px;
}

/* now set whitespace between rows */
.social-column .et_pb_module {
	margin-bottom:5px !important;
}

/* style the first module in the column when social-column-title is present - assumes the first module is text.... it is a title.... */
.social-column-title>.et_pb_module:first-child {
    font-weight:bold;
    margin-bottom:10px !important;	
}

/* make the row a little wider on mobile */
/* social columns often contain icon/link pairs and email address is long... */
/* and often wraps on mobile so shrink it a little.... */
@media (max-width:980px) {
	.social-column .et_pb_text_inner p, .social-column .et_pb_text_inner p a {
		font-size:0.9em;
	}
}

.dark-section .social-column .et_pb_text_inner p a {
    color:white !important;
}

/* insert a TEXT MODULE in the column layout with this classname whenever we need to force a line wrap */
.wrap-line {
	width:100%;
	height:0px;
}


/*********************************************************************************

    Style the Social Follow Icons

*********************************************************************************/

.social-icon {
	display:inline-block;
	float:left;
}

.social-text {
	margin-left:50px;	
	padding-top:2px;
}



/*******************************************************************************

Style Bloom Email Optin                   
                                                                           
*******************************************************************************/

/* switch off the title and optin message */
.et_bloom_header_outer {
	/* display:none; */
}

/* set the form BG color */
.et_bloom_form_header, .et_bloom_form_content {
	background-color:var(--HDS-MainColor) !important;
}

.et_bloom_form_content {
	padding-top:0px !important;
}

/* Optin Button uses a span to contain the text so we need this.... */
.et_bloom_submit_subscription span.et_bloom_button_text.et_bloom_button_text_color_light {
	color:var(--HDS-ButtonFGColor) !important;
	text-transform:uppercase;
}

.et_bloom_submit_subscription:hover span.et_bloom_button_text.et_bloom_button_text_color_light {
	color:var(--HDS-ContrastColor) !important;
}

/* It's possible that our minimalist optin confuses the standard styling.... */
/* there is a lot of margin on the success message and it create a big space.... */
h2.et_bloom_success_message {
	margin-top:0px !important;
}

/* this is hideous and I have no idea why it is not working. */
/* Need this to get the Submit button to be the same height  */
/* as the input fields                                       */
.et_bloom_fields, .et_bloom_submit_subscription {
	height:37px !important;
}


/*********************************************************************************

style the Events List                            

*********************************************************************************/

/* COL event-image */ /*              COL event-content                                */
                      /*              ROW event-header                                 */
                            /*         COL event-info       *//* COL event-flag */
                            /*         title, dates etc.    */
                      /*              post-content                                     */


/* align the content - quite complex - generally remove space - the code generates */
/* a column and row layout that we simply resize here to create the layout */
.hds_events_list .event-image {
	width:20%;
	margin-right:5%;
}

.hds_events_list .event-content {
	width:75%;
}

.hds_events_list .event-info {
	width:90%;
	margin:0px;
}
.hds_events_list .event-flag {
	width:10%;
}

.hds_events_list .event-header {
	width:100%;
	margin:0px;
	padding:0px;
}

.hds_events_list .et_pb_post h2.entry-title {
	margin-bottom:0px;	
}

/* a little spacing between events in the list */
.hds_events_list .et_pb_post {
	margin:80px 0px 0px 0px;
	width:100%;
	padding:0px;
}

@media (max-width:640px) {
	.hds_events_list .event-flag img{
		margin-top:10px;
		width:30%;
	}
}

/*********************************************************************************

style the Events Info on the Event Post                            

*********************************************************************************/


                      /*              ROW hds_event_info                                */
                            /*         COL event-info       *//* COL event-flag */
                            /*         title, dates etc.    */
                      /*              post-content                                     */


/* align the content - quite complex - generally remove space - the code generates */
/* a column and row layout that we simply resize here to create the layout */

.hds_event_info {
	margin:40px 0px;
	width:100%;
	padding:0px;
}

.hds_event_info .event-info {
	width:90%;
	margin:0px;
}
.hds_event_info .event-flag {
	width:10%;
}

.hds_event_info h3.event-date, .hds_event_info h3.event-location, .hds_event_info h3.event-times, .hds_event_info h3.event-price {
	color:var(--HDS-MainColor) !important;
	text-transform:none;
	font-weight: bold;
	font-size:20px !important;
	text-align:left;
}

/*********************************************************************************

style the Events GRID        

*********************************************************************************/

/* use the flex STRETCH to get the columns to EQUALIZE HEIGHT */
.hds_events_grid {
	display:flex;
	flex-direction:row;
	align-items:stretch;
}

/* get rid of whitespace added by the row */
.hds_events_grid {
	width:100%;
	margin:0px;
}

/* sort out the column widths */
.hds_events_grid .et_pb_column {
	width:calc((100% - 20px) / 3);
	padding:0px;
}
	
.hds_events_grid .et_pb_column:nth-child(1), .hds_events_grid .et_pb_column:nth-child(2)  {
	margin:0px 15px 0px 0px;
}

.hds_events_grid .et_pb_column:nth-child(3) {
	margin:0px 0px 0px 0px;
}

/* set the BG color */
.hds_events_grid .et_pb_column {
	background-color:white;
}

/* Fix the MORE buttons to the bottom to align them */
.hds_events_grid a.more-link {
	position:absolute;
	bottom:10px;
}

/* turn the one row grid into a column on narrow devices */
@media (max-width:980px) {
	.hds_events_grid {
		flex-direction:column;
	}	
	/* sort out the column widths */
	.hds_events_grid .et_pb_column {
		width:80%;
		margin:30px 10% !important;
	}
}

@media (max-width:640px) {
	/* sort out the column widths */
	.hds_events_grid .et_pb_column {
		width:100%;
		margin:30px 0% !important;
	}
}

/*********************************************************************************

style the Blog Grid                            

*********************************************************************************/

.et_pb_blog_grid .post-content p {
	margin-bottom:2em;
}

.et_pb_blog_grid .et_pb_post {
	/* border:1px solid var(--HDS-MainColor); */
	border-width:0px;
}

/* remove right margin from right most blog in the grid */
/* otherwise it does not align with the right boundary of the row.... */
.et_pb_blog_grid .et_pb_post:last-child {
	margin-right:0px !important;
}

/*********************************************************************************

common style for the Events (archive and grid) and Divi Blog Grid                  

*********************************************************************************/

/* title */
.hds_events_grid h2.entry-title a, .hds_events_list h2.entry-title a, .et_pb_blog_grid h2.entry-title a {
	color:var(--HDS-MainColor) !important;
	text-transform:uppercase;
	font-size:20px !important;
}

/* Date or post meta data */
.hds_events_grid h3.event-date, .hds_events_grid h3.event-location, 
.hds_events_list h3.event-date, .hds_events_list h3.event-location, 
.et_pb_blog_grid p.post-meta {
	color:var(--HDS-MainColor) !important;
	text-transform:none;
	font-weight: bold;
	font-size:16px !important;
	text-align:left;
}

/* create space between the text and the border to allow */
/* us to color the BG if we want to */
.hds_events_grid .event-content, .et_pb_blog_grid .et_pb_post {
	padding:15px;
}

/* because we adjusted the padding, we need to adjust the margin on the image or it does not align with blurb border */
.et_pb_blog_grid .et_pb_image_container {
	margin:-15px -15px 15px -15px;	
}


/* make these inline block to shrink to fit so that underline only extends under the title and not the width of the blog */
.hds_events_grid h2.entry-title a, .hds_events_list .et_pb_post a, .et_pb_blog_grid h2.entry-title a  {
	display: inline-block;
}

/* make space to allow us to position the underline sensibly */
.hds_events_grid h2.entry-title, .hds_events_list .et_pb_post, .et_pb_blog_grid h2.entry-title  {
	margin-bottom:10px !important;
	padding-bottom:0px !important;
}

.hds_events_grid h2.entry-title a:after, .hds_events_list h2.entry-title a:after, .et_pb_blog_grid h2.entry-title a:after {
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.hds_events_grid h2.entry-title:hover a:after, .hds_events_list h2.entry-title:hover a:after, .et_pb_blog_grid h2.entry-title:hover a:after {
    width: 100%;
    /* transition-delay: 0.4s !important; */
}

/* set up and position the underline */
.hds_events_grid h2.entry-title a:after, .hds_events_list h2.entry-title a:after, .et_pb_blog_grid h2.entry-title a:after {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: var(--HDS-MainColor) !important;
    position:relative;
	bottom:10px;
}

.hds_events_list h2.entry-title a:after {
    transform: translate(0, 5px);
}

.hds_events_grid h2.entry-title a:after, .et_pb_blog_grid h2.entry-title a:after {
    transform: translate(0, 15px);
}

/* add the zoom to the image */
.hds_events_grid img, .hds_events_list img, .et_pb_blog_grid img {
    /* -webkit-transition: all .3s ease-out !important; */
    /* -moz-transition: all 0.3s ease-out !important; */
    /* -ms-transition: all 0.3s ease-out !important; */
    /* -o-transition: all 0.3s ease-out !important; */
    /* transition: all 0.3s ease-out !important; */
	transition:all 0.5s; 
	-moz-transition:all 0.5s; 
	-webkit-transition:all 0.5s; 
}

.hds_events_grid img:hover, .hds_events_list img:hover, .et_pb_blog_grid img:hover {
	/* -webkit-transform: translateY(-7px) !important; */
    /* transform: translateY(-7px) !important; */
    /* box-shadow: 0px 8px 14px rgba(127, 103, 79, 0.7) !important; */
	transform:scale(1.05);
	-moz-transform: scale(1.05);
	-webkit-transform:scale(1.05);
}

.hds_events_grid .entry-featured-image-url, .hds_events_list .entry-featured-image-url, .et_pb_blog_grid .entry-featured-image-url {
	overflow: hidden;
}

/* remove some intrusive padding between image and title */
.hds_events_grid .entry-featured-image-url, .et_pb_blog_grid .entry-featured-image-url {
	margin-bottom:0px;
}

/*********************************************************************************

    Bottom align the Blog Grid         

    Works only if you use a 1/3 column in a SINGLE row

    Does NOT need Equalize Column Height to be switched ON	

*********************************************************************************/

/* only do this on wide screen */
/* changes to the structure of the blog grid below 1200 stops this approach from working.... */
@media (min-width:1200px) {

    /* need this for our four column blog grids */	
	.bottom-align-blog-grid .column {
		display:flex;
	}
	
	.bottom-align-blog-grid .et_pb_blog_grid {
		/* display:flex; */
	}
	
	.bottom-align-blog-grid article.et_pb_post {
		display:flex;
		flex-direction:column;
	}

	.bottom-align-blog-grid .post-content {
		display:flex;
		flex-direction:column;
		height:100%;
	}
	
	.bottom-align-blog-grid .post-content p {
		height:100%;
	}
	
	.bottom-align-blog-grid .post-content-inner {
		height:100%;
	}
	
	.bottom-align-blog-grid a.more-link {
		display:inline-block !important;
		margin-right:auto;
	}
}

.bottom-align-blog-grid .et_pb_column_1_2, .bottom-align-blog-grid .et_pb_column_1_3, .bottom-align-blog-grid .et_pb_column_1_4  {
    width: 100%;
}

.bottom-align-blog-grid .et_pb_post {
	display:inline-block;
	vertical-align:top;
	width: 33%;
	margin-right:15px !important;
	margin-bottom:40px !important;
}

@media (min-width:981px) and (max-width:1200px) {
	.bottom-align-blog-grid .et_pb_post {
		width:46%;
	}
}

/* turn the one row grid into a column on narrow devices */
@media (max-width:980px) {
	.bottom-align-blog-grid .column {
		width:80% !important;
		margin:30px 10% !important;
	}
	.bottom-align-blog-grid .et_pb_post {
		width:100%;
		margin:30px 0% !important;
	}
}

@media (max-width:640px) {
	/* sort out the column widths */
	.bottom-align-blog-grid .column {
		width:100% !important;
		margin:30px 0% !important;
	}
}


/*********************************************************************************

style the Action Blurbs                            

*********************************************************************************/

/* style the title */
.action-blurb h4.et_pb_module_header {
	font-weight:bold;
	font-size:20px;
	padding-bottom:10px;
	text-transform:uppercase;
}

.action-blurb h4.et_pb_module_header a {
	color:var(--HDS-TitleColor) !important;
}

/* make these inline block to shrink to fit so that underline only extends under the title and not the width of the blurb */
.action-blurb h4.et_pb_module_header a {
	display:inline-block;
}

.action-blurb h4.et_pb_module_header a:after {
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.action-blurb h4.et_pb_module_header:hover a:after {
    width: 100%;
    /* transition-delay: 0.4s !important; */
}

/* set up the underline */
.action-blurb h4.et_pb_module_header a:after {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: var(--HDS-TitleColor) !important;
    margin: 0 0 0px;
    transform: translate(0, 10px);
}

/* set up the zoom */
.action-blurb img {
    /* -webkit-transition: all .3s ease-out !important; */
    /* -moz-transition: all 0.3s ease-out !important; */
    /* -ms-transition: all 0.3s ease-out !important; */
    /* -o-transition: all 0.3s ease-out !important; */
    /* transition: all 0.3s ease-out !important; */
	transition:all 0.5s; 
	-moz-transition:all 0.5s; 
	-webkit-transition:all 0.5s; 
}

.action-blurb img:hover {
	/* -webkit-transform: translateY(-7px) !important; */
    /* transform: translateY(-7px) !important; */
    /* box-shadow: 0px 8px 14px rgba(127, 103, 79, 0.7) !important; */
	transform:scale(1.05);
	-moz-transform: scale(1.05);
	-webkit-transform:scale(1.05);
}

.action-blurb .et_pb_image_wrap {
	overflow: hidden;
}

/* not sure why, but on wide screen, the images is a little shrunk and */
/* this messes up the zoom overflow */
.action-blurb img {
	width:100%;
}

/* Do this to be consistent with our blog grid cards */
/* Allow a little padding so that blurbs can be used on colored BGs without being up against the border */
.action-blurb .et_pb_blurb_container {
	padding-left:15px;
	padding-right:15px;
	padding-bottom:15px;
}

/* action blurbs have buttons - make sure they are bottom aligned */
/* THIS ONLY WORKS WHEN EQUALIZE COLUMN HEIGHTS IS ON */
.action-blurb, .action-blurb .et_pb_blurb_content {
    height:100%;
}

/* There is spare space at the bottom of a blurb - to allow for variation in the amount of text */
/* We need to get rid of this spare space in order to align the bottom with the bottom edge of the blurb */
/* Force BOTH the blurb_content and blurb_container to take up the spare space */
/* Do this by using flex to expand them to 100% of the spare space */
.action-blurb .et_pb_blurb_content, .action-blurb .et_pb_blurb_container  {
	display:flex;
	flex-direction:column;
}

.action-blurb .et_pb_blurb_container, .action-blurb .et_pb_blurb_description {
	flex:1;
}

/* apply this to a flex container with two items and it moves them to the start and end */
/* In other words, it bottom aligns the buttons */
.action-blurb .et_pb_blurb_description  {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}

/*********************************************************************************

style the Bios                          

*********************************************************************************/

/* force blurb to be full width */
.bios .et_pb_blurb .et_pb_blurb_content {
	max-width:100%;
	width:100%;
	margin-right:0px;
	margin-left:0px;
}

/* sort the proportions of the image and content widths */
.bios .et_pb_blurb .et_pb_main_blurb_image {
	width:20%;
	padding-left:1% !important;
	padding-right:1% !important;
}

.bios .et_pb_blurb .et_pb_blurb_container {
	width:80%;
}

/* make round images */
.bios .et_pb_blurb .et_pb_main_blurb_image img {
	border-radius:50%;
}

/* make some space to separate the rows */
.bios .et_pb_blurb, .blurb-table .et_pb_blurb {
	margin-bottom:80px !important;
}

@media (max-width:640px) {
	/* these left hand blurbs are display:table-cell by default */
	/* force them to be block to get a single column on mobile */
	/* also make them bigger */
	.bios .et_pb_blurb .et_pb_main_blurb_image {
		display:block !important;
		width:50%;
	}	
}

/*********************************************************************************

style the HDSs                            

*********************************************************************************/

/* force blurb to be full width */
.HDSs .et_pb_blurb .et_pb_blurb_content {
	max-width:100%;
	width:100%;
	margin-right:0px;
	margin-left:0px;
}

/* sort the proportions of the image and content widths */
.HDSs .et_pb_blurb .et_pb_main_blurb_image {
	width:30%;
	padding-left:1% !important;
	padding-right:1% !important;
}

.HDSs .et_pb_blurb .et_pb_blurb_container {
	width:70%;
}

/* make some space to separate the rows */
.HDSs .et_pb_blurb {
	margin-bottom:80px !important;
}

@media (max-width:640px) {
	/* these left hand blurbs are display:table-cell by default */
	/* force them to be block to get a single column on mobile */
	/* also make them bigger */
	.HDSs .et_pb_blurb .et_pb_main_blurb_image {
		display:block !important;
		width:50%;
		margin-left:25%;
		margin-right:25%;
	}
	.HDSs .et_pb_blurb .et_pb_blurb_container {
		display:block !important;
		text-align:center !important;
		padding:0px;
		width:100%;
	}	
	.HDSs .et_pb_blurb .et_pb_blurb_container h4.et_pb_module_header {
		padding-bottom:10px;
	}
	.HDSs .et_pb_blurb .et_pb_blurb_container p {
		padding-bottom:0px;
	}
}


/*********************************************************************************

style the bullet points                               

*********************************************************************************/

.bullet-points p:before, .bullet-points-plus p:nth-child(odd):before {
	content: '';
    position:absolute;
	left: 0px;
	width: 15px !important;
	height: 15px; 
	background-color:var(--HDS-BulletPointColor);
	border-radius:50%;
	margin-top:7px;
}

.bullet-points-plus p {
	padding-bottom:10px;
}

.bullet-points-plus p:nth-child(even) {
	font-style:italic;
	margin-bottom:50px;
}

.bullet-points p, .bullet-points-plus p {
	margin-left:30px;
}

/*******************************************************************************

Style 404 page                    
                                                                           
*******************************************************************************/

.error404 .container {
	padding-top:0px !important;
	max-width:100%;
	width:100%;	
}

/*******************************************************************************

Style Caldera Forms                    
                                                                           
*******************************************************************************/

/* change border colour - in effect, switch off the border */
.caldera-grid input.form-control, .caldera-grid textarea.form-control {
	border-color:var(--HDS-BodyColor);
}

/*******************************************************************************

Style the Highlight Box                   
                                                                           
*******************************************************************************/

.highlight-boxes .et_pb_column {
	border:2px solid var(--HDS-ContrastColor) !important;	
	margin-top:50px;
    padding:10px;
    line-height:1.2em;	
}

.highlight-boxes p {
	font-weight:bold;
}

/*****************************************************************

                  Style the FAQ Toggle  			  
                                                               
*****************************************************************/

.policy-toggles .et_pb_toggle, .award-toggles .et_pb_toggle {
	background-color:transparent;
	border-top-width:0px;
	border-left-width:0px;
	border-right-width:0px;
	border-bottom:2px solid var(--HDS-TitleColor);
	padding-left:0px;
	margin-bottom:0px !important;
}

/* now put a top border on the FIRST toggle */
.policy-toggles .et_pb_toggle:nth-of-type(1), .award-toggles .et_pb_toggle:nth-of-type(1) {
	border-top:2px solid var(--HDS-TitleColor);
}

/* shrinkwrap the title to move the buttons to be nearer (and not aligned left) */
.policy-toggles .et_pb_toggle_title, .award-toggles .et_pb_toggle_title {
	line-height:1.7em;
	font-weight:bold;
	text-transform:uppercase;
	display:inline-block;
	color:var(--HDS-TitleColor) !important;
	padding-right:30px !important;
}


/* style the toggle icon */
.policy-toggles .et_pb_toggle_title:before, .award-toggles .et_pb_toggle_title:before {
	color:var(--HDS-TitleColor);
}

/*******************************************************************************

Vertically Center
            

Very handy when we force the height of a section to display a BG image for example.
This allows us to vertically center the row within the setcion.     
                                                                           
*******************************************************************************/

/* vertically center the row within the section */
.vertically-center {
	display:flex;
	flex-direction:row;
	align-items:center;
}

/* applied to row - vertically center items in each column of the row */
.vertically-center-row .et_pb_column {
	display:flex;
	flex-direction:column;
	justify-content:center;
}

/* this makes the columns full height - EQUALIZE COLUMN HEIGHT not needed :-) */
.vertically-center-row {
	display:flex;
	flex-direction:row;
	align-items:stretch;
}

/* vertically center the selected column - applied to the ROW becdause we need to force the equalize column height */
.vertically-center-column-1, .vertically-center-column-2, .vertically-center-column-3, .vertically-center-column-4 {
	display:flex;
	flex-direction:row;
	align-items:stretch;
}

.vertically-center-column-1 .et_pb_column:nth-child(1), 
.vertically-center-column-2 .et_pb_column:nth-child(2),
.vertically-center-column-3 .et_pb_column:nth-child(3),
.vertically-center-column-4 .et_pb_column:nth-child(4) {
	display:flex;
	flex-direction:column;
	justify-content:center;
}

/* or just use this on the column but it ASSUMES THE ROW HAS EQUALIZE COLUMNE HEIGHT SET */
.vertically-center-column {
	display:flex;
	flex-direction:column;
	justify-content:center;
}

/*********************************************************************************

    Style the Timeline
	
EQUALIZE COLUMN HEIGHTS needs to be switched on for each of the rows..... 

Each row is structured DATE IMAGE TEXT

*********************************************************************************/

/* this is the center line - attached to the sction but moved to the middle */
@media (min-width:980px) {
	.timeline:before {
	    content: "";
		position:absolute;
		margin-left:50%;
		height: 100%;  
		border-left:2px solid var(--HDS-MainColor);
	}
}

/* replace the padding above/below the section with margin so the central lines does not stick out */
.timeline {
	padding-top:0px !important;
	padding-bottom:0px !important;
	margin-top:50px;
	margin-bottom:50px;
}

/* remove margin above/below modules in each row */
.timeline .et_pb_row .et_pb_column .et_pb_module {
	margin:0px 0px;
}

/* remove vertical padding between the rows so that the 'center line' actually joins up */
.timeline .et_pb_row {
	padding-top:0px;
	padding-bottom:0px;
}

/* vertically center the DATE, IMAGE and TEXT */
.timeline .et_pb_row .et_pb_column {
    display:flex;
    flex-direction:column;
	justify-content:center;
}

/* DATE column to take up half the space */
.timeline .et_pb_row .et_pb_column:nth-child(1) {
	width:47.25%;
}

/* style the DATE */
.timeline .et_pb_row .et_pb_column:nth-child(1) p {
	font-weight:bold;
	color:var(--HDS-MainColor);
}

/* IMAGE (second) column */
.timeline .et_pb_row .et_pb_column:nth-child(2) {
	background-color:var(--HDS-HistoryBoxColor);
	padding:20px 20px;
	width:17.25%;
}

/* create the 'right pointer' */
/* the vertical position is a bit arbitrary */
.timeline .et_pb_row:nth-child(odd) .et_pb_column:nth-child(2):before,
.timeline .et_pb_row:nth-child(even) .et_pb_column:nth-child(2):after  {
	font-family: "ETmodules";
	font-size:128px;
	color:var(--HDS-HistoryBoxColor);
	position:absolute;
	top:44%;
}

/* odd row TEXT (third) column */
.timeline .et_pb_row .et_pb_column:nth-child(3) {
	background-color:var(--HDS-HistoryBoxColor);
	width:30%;
	padding:10px 0px;
}

/********************************
    DATE IMAGE TEXT
********************************/

/* expand DATE column to take up half the space */
.timeline .et_pb_row:nth-child(odd) .et_pb_column:nth-child(1) {
	margin-right:5.5%;
}

.timeline .et_pb_row:nth-child(even) .et_pb_column:nth-child(1) {
	margin:0%;
}

/* style the DATE */
.timeline .et_pb_row:nth-child(odd) .et_pb_column:nth-child(1) p {
	text-align:right;
}

.timeline .et_pb_row:nth-child(even) .et_pb_column:nth-child(1) p {
	text-align:left;
}

/* style the IMAGE (second) column */
.timeline .et_pb_row:nth-child(odd) .et_pb_column:nth-child(2) {
	margin:0px;
}

/* create the pointers */
.timeline .et_pb_row:nth-child(odd) .et_pb_column:nth-child(2):before {
    content: "\44" !important;
	left:-60px;
}

.timeline .et_pb_row:nth-child(even) .et_pb_column:nth-child(2):after {
    content: "\45" !important;
	right:-60px;
}

/* odd row TEXT (third) column */
.timeline .et_pb_row:nth-child(odd) .et_pb_column:nth-child(3) {
	padding-right:1%;
}

.timeline .et_pb_row:nth-child(even) .et_pb_column:nth-child(3) {
	padding-left:1%;
}

/******************************************
    EVEN ROW re-arange columns on desktop
*******************************************/

@media (min-width:980px) {
	/* the structure in the back end is identical for even and odd rows */
	/* so we are responsable for swapping the order.... */
	.timeline .et_pb_row:nth-child(even) {
		display:flex;
		flex-direction:row;
	}

	.timeline .et_pb_row:nth-child(even) .et_pb_column:nth-child(1) {
		order:3;
	}

	.timeline .et_pb_row:nth-child(even) .et_pb_column:nth-child(2) {
		order:2;
	}

	.timeline .et_pb_row:nth-child(even) .et_pb_column:nth-child(3) {
		order:1;
	}
}


/********************************
    TABLET & MOBILE
********************************/

@media (max-width:980px) {
	/* expand ALL columns to full width */
	.timeline .et_pb_row .et_pb_column {
		width:100% !important;
		margin-right:0% !important;
		margin-left:0% !important;
	}
	/* style the DATE */
	.timeline .et_pb_row .et_pb_column:nth-child(1) p {
		text-align:left !important;
		font-size:32px !important;
	}
	/* insert space around the dates */
	.timeline .et_pb_row .et_pb_column:nth-child(1) {
		margin-top:30px;
		margin-bottom:5px !important;
	}
	/* remove margin beneath the columns - they are organised as a sginle column and need to have no spacing between */
	.timeline .et_pb_row .et_pb_column {
		margin-bottom:0px;
	}
	/* insert space between TIMELINE entries */
	.timeline .et_pb_row {
		margin-bottom:60px !important;
	}
	/* stop the pointers from displaying */
	.timeline .et_pb_row:nth-child(odd) .et_pb_column:nth-child(2):before, .timeline .et_pb_row:nth-child(even) .et_pb_column:nth-child(2):after {
		display:none;
	}
	/* a little vertical spacing for the images */
	.timeline img {
		margin-top:10px;
		margin-bottom:0px;
	}
	.timeline .et_pb_text {
		margin:10px 15px !important;
	}
	/* center the text */
	.timeline .et_pb_text p {
		text-align:center;
	}
	/* restrict the image size */
	.timeline img {
		margin-left:25%;
		width:50%;
	}
}

@media (max-width:640px) {
	/* restrict the image size */
	.timeline img {
		margin-left:10%;
		width:80%;
	}
}

/*******************************************************************************

Style the Shadow Section  

The shadow is in the margin so we need to always have some....              
                                                                           
*******************************************************************************/

.shadow-section {
	margin-bottom:2%;
	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3);
}

/*******************************************************************************

Style the Parallax Image Section                     
                                                                           
*******************************************************************************/

.parallax-section {
	min-height:70vh !important;
}

/* Center the content of the section vertically using Flex */
/* Be sure to remove all vertical whitespace to allow this - Flex is now managing the layout */
.parallax-section {
	display:flex;
	flex-direction:row;
	align-items:center;
}

/* set an opaque overlay on the section background */
.parallax-section .et_parallax_bg::before {
	content: "";
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%; 
	height: 100%;  
	background-image:linear-gradient(0.25turn, var(--HDS-TitleColor), transparent);
}

/*******************************************************************************

Style the Vertical Gradient Section                     
                                                                           
*******************************************************************************/

/* set an opaque overlay on the section background */
.vertical-gradient-section::before {
	content: "";
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%; 
	height: 100%;  
	background-image:linear-gradient(var(--HDS-MainColor), var(--HDS-SeaGreen));
}
	
/*******************************************************************************

Style the Horizontal Gradient Section                     
                                                                           
*******************************************************************************/

.gradient-section {
	min-height:70vh !important;
}

/* Center the content of the section vertically using Flex */
/* Be sure to remove all vertical whitespace to allow this - Flex is now managing the layout */
.gradient-section {
	display:flex;
	flex-direction:row;
	align-items:center;
}

/* set an opaque overlay on the section background */
.gradient-section::before {
	content: "";
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%; 
	height: 100%;  
	background-image:linear-gradient(0.25turn, var(--HDS-TitleColor), transparent);
}

/*****************************************************************

                  Style the Image Sections				  
                                                               
*****************************************************************/

.image-section {
	min-height:70vh !important;
}

/* Center the content of the section vertically using Flex */
/* Be sure to remove all vertical whitespace to allow this - Flex is now managing the layout */
.image-section {
	display:flex;
	flex-direction:row;
	align-items:center;
}


/*******************************************************************************

Style the Footer Section                     
                                                                           
*******************************************************************************/

/* set an opaque overlay on the section background */
.footer-section::before {
	content: "";
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%; 
	height: 100%;  
	opacity:0.9;
	background-image:linear-gradient(var(--HDS-SeaGreen), var(--HDS-TitleColor));
}

.footer-section {
	padding-bottom:0px !important;
}

/*********************************************************************************

style the Footer Credit                                 

*********************************************************************************/

/* style the Two Blue Toucans credit link in the footer */
.footer-credit p {
	font-weight:300;
	font-size:14px !important;
	text-align:right;
}

.footer-credit a {
	font-weight:600;
}

/* slightly different on mobile */
@media ( max-width: 980px ) {
	.footer-credit p {
		/* font-size:12px !important; */
		text-align:center !important;
	}
}

/*******************************************************************************

Style the Dark Section                       
                                                                           
*******************************************************************************/

/* dark sections need white writing */
.dark-section {
	background-color:var(--HDS-MainColor) !important;
}

/* grey sections DO NOT need white writing */
.grey-section {
	background-color:var(--HDS-GreyBGColor);
}

.dark-section p, .dark-section p>a, .dark-section article, .dark-section body, .dark-section .et_pb_text_inner, .dark-section .highlight-text p, .dark-section a, .dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .dark-section h5, .dark-section h6, 
.dark-section .caldera-grid input.form-control, .dark-section .caldera-grid textarea.form-control {
	color:white !important;
}

/*********************************************************************************

stop the Divi footer from being displayed                                 

*********************************************************************************/

#footer-bottom {
	padding:0px;
}

#footer-bottom .container {
	display:none !important;
}

/*********************************************************************************

Style the UMP Login/Logout                     

*********************************************************************************/

/* The Login buttons are constructed in a strange way so we need this as well as applying our general button styling */
/* It looks like the color of the A element is styled specifically rather than inherited from the container */
.ihc-login-template-13 .ihc-register-link a {
	color:var(--HDS-ButtonFGColor) !important;	
}

.ihc-login-template-13 .ihc-register-link:hover a {
	color:var(--HDS-ContrastColor) !important;	
}

/* The Login buttons are constructed in a strange way so we need this as well as applying our general button styling */
/* It looks like the color of the A element is styled specifically rather than inherited from the container */
.ihc-logout-wrap .ihc-register-link a {
	color:var(--HDS-ButtonFGColor) !important;	
}

.ihc-logout-wrap:hover a {
	color:var(--HDS-ContrastColor) !important;	
}

/* style the text in the (login and password) textfields */
.ihc-login-template-13 .impu-form-line-fr input {
	font-size:15px !important;
}

/* make the lost password message on LOGIN form stand out a bit more */
.impu-form-links-pass a {
	display:block;
	text-align:left;	
	font-weight:bold;
	font-size:1.2em;
}

/* stop display of Lost Password link - we want to use WP's password reset, not UMP's */
.ihc-login-template-13 .impu-form-links-pass {
	/* display:none !important; */
}

/*********************************************************************************

Style the UMP Registration Form                           

*********************************************************************************/

/* The buttons are constructed in a strange way so we need this as well as applying our general button styling */
/* It looks like the color of the A element is styled specifically rather than inherited from the container */
.ihc-register-14 .ihc-login-link a {
	color:var(--HDS-ButtonFGColor) !important;	
}

.ihc-register-14 .ihc-login-link:hover a {
	color:var(--HDS-ContrastColor) !important;	
}

/* make the text areas a lot bigger to hold more rows */
.ihc-register-14 textarea.iump-form-textarea {
	min-height:10em;
}

/* style the text in the textfields */
.ihc-register-14 textarea.iump-form-textarea, .ihc-register-14 .iump-form-text input {
	font-size:15px !important;
}

/* Style the T&C button and text on the Registration page */
.ihc-tos-wrap {
	margin-top:30px;
	padding-top:10px;
	background-color:var(--HDS-ContrastColor) !important;		
}

.ihc-tos-wrap a {
	color:var(--HDS-BodyColor);
	font-weight:bold;
	font-size:20px;
}

.ihc-tos-wrap a:hover {
	text-decoration:none !important;	
}

/* make the T&C toggle bigger */
.ihc-tos-wrap input {
	width:20px;
	height:20px;
}

/* Remove the login button from the bottom of the registration form */
.iump-register-row-right {
	display:none;
}

.ihc-register-14 .iump-register-row-left {
	width:100%;
}

/* make the Submit button on the Registration form stand out more */
.ihc-register-14 .iump-submit-form {
	margin-top:40px;
}

.ihc-register-14 .iump-submit-form input {
	font-size:24px !important;
	padding:20px !important;
}

/* make the payment choices stand out a bit more */
/* The 'theme' is our choice of radio, drop down menu or logos */
.ihc-register-14 .ihc-select-payment-theme-1, .ihc-register-14 .ihc-select-payment-theme-2, .ihc-register-14 .ihc-select-payment-theme-3 {
	margin-top:60px !important;
	margin-bottom:40px !important;
}

/* Registration form error mesasage */
.error-on-form {
	margin-top:20px;
	background-color:red;
}

.error-on-form p {
	color:white;
	text-align:center;
	padding:10px !important;
	line-height:1.5em;
	font-weight:bold;
}

.ihc-register-notice {
	font-weight:bold;
	font-size:1.2em;
}

/* Sublabel - these get used to add notes to the form fields */
.iump-form-line-register .iump-form-sublabel {
	/* font-weight:bold; */
	font-size:14px;
	color:var(--HDS-BodyColor);
}

.iump-form-line-register .iump-form-sublabel:hover {
	/* font-weight:bold; */
	/* font-size:16px; */
	/* color:red; */
}

/*********************************************************************************

Style the HDS Subscriptions Page  

This is the additional page for buying subscriptions when logged on                        

*********************************************************************************/

/* on mobile, force the gateway toggle items to vertical to avoid ugly wrapping */
@media (max-width:680px) {
	.hds-select-pg .iump-form-paybox {
		display:block;	
	}
}

/*********************************************************************************

Style the UMP Account Pages                           

*********************************************************************************/

/* Account Page Subscription Table */
.ihc-account-subscr-list thead {
	border-bottom-color:var(--HDS-MainColor) !important;
}

/* Account Page Subscription Table - switch off the Finish Payment button */
/* Account Page Subscription Table - switch off the Renew button on limited (non-auto-renew) levels */
/* We need to stop Renew because our non-auto-renew levels are free - don;t want user to renew */
/* We think this is a bug in UMP - the level, when free, should have a toggle to display/remove the renew button */
/* We need to stop Finish Payment because, without the subscription plan toggled on, this always uses the default payment gateway */
.iump-renew-subscription-button {
	display:none;
}

/* push the subscription details to the left on mobile - for some reason, default on mobile is right align */
@media (max-width:768px) {
	.ihc-account-subscr-list tr, .ihc-account-subscr-list tr td {
		text-align:left !important;
	}
}

/* Account page header background */
.ihc-ap-top-theme-4 .ihc-background-overlay {
	background-color:var(--HDS-MainColor) !important;	
}

/* Account page header membership levels */
.ihc-user-page-top-ap-wrapper .ihc-top-level-box, .ihc-user-page-top-ap-wrapper .ihc-top-level-box.ihc-expired-level {
	background-color:var(--HDS-ContrastColor) !important;	
}

/* style the membership card used in Style 3 */
.ihc-membership-card-3 {
	background-color:var(--HDS-MainColor);
}

.ihc-membership-card-3 .ihc-membership-card-full-name {
	background-color:var(--HDS-ContrastColor) !important;	
	color:var(--HDS-MainColor) !important;
}

.ihc-membership-card-member-since, .ihc-membership-card-level, .ihc-membership-level-expire {
	color:white !important;
}

.ihc-membership-card-wrapp .ihc-print-icon, .ihc-membership-card-wrapp .ihc-print-icon:hover {
	display:block !important;
}

.ihc-membership-card-wrapp .ihc-print-icon i.fa-ihc.fa-print-ihc::before {
	color:white;
	font-size:24px;
}

/* force membership card to full width of column on mobile - default is only 50% */
@media (max-width:680px) {
	.ihc-membership-card-medium {
		width:100%;
	}
}

/* stop the display of the 'camera' on the account header */
/* This is used to set the bg image and is not very useful */
.ihc-user-page-top-ap-wrapper .cropControls {
	display:none;
}

/* center align the avatar on mobile by making sure the container is full width of screen */
@media (max-width:570px) {
	.ihc-user-page-top-ap-wrapper .ihc-left-side {
		max-width:100%;
	}
}

/* Turn the account icons into a menu on mobile - they are misaligned when labels are too wide */
@media (max-width:570px) {
	/* force single column (default is two columns) */
	.ihc-user-page-content-wrapper .ihc-ap-menu-item {
		width:100%;
		margin:0px !important;
	}
	/* style text as menu items and make them always visible */
	.ihc-user-page-content-wrapper .ihc-ap-menu-item a {
		color:white !important;
	}
	.ihc-user-page-content-wrapper .ihc-ap-menu {
		padding:0px;
		margin:40px 0px;
		background-color:var(--HDS-MainColor);
		display:block;
	}
	/* make sure the hamburger is never visible */
	.ihc-user-page-content-wrapper .ihc-mobile-bttn-wrapp {
		display:none;
	}
	/* stop display of icons themselves */
	.ihc-user-page-content-wrapper .ihc-ap-menu-item i.fa-ihc {
		display:none !important;
	}
}

/*********************************************************************************

Style the UMP Directory                               

*********************************************************************************/

.memdir {
	margin-top:60px;
	margin-bottom:60px;
}

/* We use et_pb_row from our shortcode to give some structure to the directory */
/* But our et_pb_rows really need to be full-width because they are already inside an 80% width row.... */
.memdir .et_pb_row {
	width:100%;
	margin-right:0px;
	margin-left:0px;
}

/* add the separator between members in the directory */
.memdir-bio {
	border-bottom:3px solid var(--HDS-MainColor);
}

.memdir-member:nth-child(1) .memdir-details {
	border-top:3px solid var(--HDS-MainColor);
}

/* reduce space between lines to make the address more compact */
.memdir-address p {
	padding-bottom:0px;
	line-height:1.4em;
}

/* slightly smaller name */
.memdir-contact h2 {
	font-size:18px !important;
}

/* reduce space between lines to make the contact details more compact */
.memdir-contact p {
	padding-bottom:0px;
	line-height:1.4em;
}

/* specify the column widths and margins */
.memdir-image {
	width:15% !important;
	margin-right:2% !important;
}

@media (max-width:680px) {
	.memdir-image {
		width:40% !important;
		margin-right:0px !important;
	}	
}

.memdir-contact {
	width:52%;
	margin-right:1% !important;
}

.memdir-address {
	width:30%;
}

/***********************************************************************

   Style the Member Emails Preferences Page
   
***********************************************************************/

.hds-email-preferences h2 {
	text-align:center;
}

/* center the subscribe/unsubscribe button */
.hds-email-preferences input[type="submit"] {
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:30px;
}

/***********************************************************************

   Style the WooCommerce Product Image Flags
   
***********************************************************************/

.woocommerce-page span.onsale, .woocommerce-page span.new {
    position: absolute;
    z-index: 2;
    top: 10px!important;
    left: 10px!important;
	padding:0.4em 0.6em;
    -webkit-border-radius: 5px!important;
    -moz-border-radius: 5px!important;
    border-radius: 5px!important;
}

.woocommerce-page span.onsale {
    background: var(--HDS-MainColor) !important;
}

.woocommerce-page span.new {
    background: var(--HDS-MainColor) !important;
}


/***********************************************************************

   Style the WooCommerce Product Page
   
***********************************************************************/

/* Price */ 
.product .entry-summary p.price span {
    color:var(--HDS-TitleColor);
	font-size:28px !important;	
}

/* In Stock and Out of Stock messages */
.product .entry-summary p.stock.in-stock {
    color:var(--HDS-TitleColor) !important;
}

.product .entry-summary p.stock.out-of-stock {
    color:red !important;
    font-weight:bold;
	text-transform:uppercase;
	font-size:2em !important;
}

/* Product Title */
.product .entry-summary h1 {
	color:var(--HDS-TitleColor); 
	text-align:left !important;
	text-transform:uppercase;
}

@media (min-width:1600px) {
	.product .entry-summary h1 {	
		font-size: 34px !important;
	}
}

/* Style the Input Quantity Form */
   
/* hmmm can't find a cleaner way of doing this - had to dig this out of the woocommerce CSS style sheet... */	
.woocommerce #content div.product form.cart div.quantity, .woocommerce div.product form.cart div.quantity, .woocommerce-page #content div.product form.cart div.quantity, .woocommerce-page div.product form.cart div.quantity,
.woocommerce #content .quantity input.qty, .woocommerce .quantity input.qty,.woocommerce-cart table.cart td.actions .coupon .input-text,.woocommerce-page #content .quantity input.qty,.woocommerce-page .quantity input.qty {
    border-radius:0px !important; 
}

/* Style the Add To Cart Button  */

/* make the Add to Cart Button the same height as its neighbour - the Quantity form */
/* For some reason, the Quantity form is set to be 49px in height.... */
/* Without this, our button heights vary with the font height (which varies with the viewport width) */
.product button.single_add_to_cart_button.button.alt {
	height:49px !important;
}

/* Variation labels */
.woocommerce .product form.cart .variations td.label {
	color:var(--HDS-TitleColor) !important;
}

/* Variation values drop down */
.woocommerce .product .variations td select {
	background-color:var(--HDS-GreyBGColor) !important;
    border-radius:0px !important; 
}

/* Add to Cart on the related products panel */
.related.products form.cart .button {
	margin-top:0px !important;
}

/* switch off the overlay on the product image */
.woocommerce .product span.et_overlay {
	display:none !important;
}

/* switch off the product meta data */
.woocommerce .product_meta {
	display:none;
}

/* The tab titles on the product page - these are a bit awkward to target */
/* We need to target both the tab titles and the ACTIVE tab title */
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active a, body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li a {
	text-transform:uppercase;
	color:var(--HDS-TitleColor) !important;
}

/* Stop the tab title from being duplicated in the body of the description */
.woocommerce-Tabs-panel h2 {
	display:none;
}

/***********************************************************************

   Style the WooCommerce Archive Page
   
 ***********************************************************************/

/* clear formatting for all but first in row */
.woocommerce-page ul.products li.product:nth-child(3n+2), 
.woocommerce-page ul.products li.product:nth-child(3n+3) {
		clear: none !important;	
}

/* first in row - force it onto a new row */
.woocommerce-page ul.products li.product:nth-child(3n+1) {
		clear: both !important;	
}

/* FORCE two columns instead of three at this width */
/* Woo wants to use three columns..... */
@media (min-width:640px) and (max-width:768px) {
	.woocommerce-page ul.products li.product:nth-child(n) {
		width: 45.25%!important;
		margin: 0 9.5% 9.5% 0!important;
		clear:both !important;
	}	
	.woocommerce-page ul.products li.product:nth-child(2n) {
		width: 45.25%!important;
		margin: 0 0 9.5% 0!important;
		clear:both !important;
	}	
}

/* Price */ 
.woocommerce-Price-amount.amount {
    color:var(--HDS-TitleColor);
	font-size:20px !important;
	font-weight:bold;	
}

/* Title */
h2.woocommerce-loop-product__title {
	color:var(--HDS-TitleColor) !important;
	text-transform:none;
	font-size:20px !important;	
}

.product form.cart {
	margin-top:24px !important;
}

/* pre-allocate space to allow up to three rows in a title */
/* Four or more will still mis-align archive cards */
h2.woocommerce-loop-product__title {
	padding-top:30px !important;
	padding-bottom:10px !important;
	min-height:calc(3em + 40px);
}

/* create a little more space beneath the Price item */
.woocommerce-Price-amount {
	margin-bottom:20px !important;
}

/* add more space below each row of products */
.woocommerce li.product {
	padding-bottom:50px !important;
}

/***********************************************************************

   Style the WooCommerce Add To Cart Shortcode Button
   
   This gets used on WP pages, independent of the Woo pages
   
***********************************************************************/

p.product.woocommerce.add_to_cart_inline {
	border:0px !important;
	padding:0px !important;
}

p.product.woocommerce.add_to_cart_inline a {
	/* display:block; */
	/* width:auto; */
}

span.woocommerce-Price-amount.amount {
	display:block;
	margin-bottom:10px;
}


/***********************************************************************

   Style assorted embedded links in WooCommerce text messages
   
***********************************************************************/

.woocommerce a.reset_variations, .woocommerce-message a.restore-item, .woocommerce a.shipping-calculator-button, .woocommerce .product-name a, .woocommerce .woocommerce-terms-and-conditions-link, .woocommerce-MyAccount-navigation a, .woocommerce-MyAccount-content a, .woocommerce-LostPassword a {
	color:var(--HDS-BodyColor) !important;
}
	
.woocommerce a.reset_variations:hover, .woocommerce-message a.restore-item:hover, .woocommerce a.shipping-calculator-button:hover, .woocommerce .product-name a:hover, .woocommerce .woocommerce-terms-and-conditions-link:hover, .woocommerce-MyAccount-navigation a:hover, .woocommerce-MyAccount-content a:hover, .woocommerce-LostPassword a:hover {
	opacity:0.7;
}

/* these ones are on a dark background */
.woocommerce-message a {
	color:black !important;
}

.woocommerce-message a:hover {
	opacity:0.7;
}

/* assorted highlighted messages - change background colour */
.woocommerce-message, .woocommerce-info, ul.woocommerce-error {
	background-color:var(--HDS-MainColor) !important;
}

.woocommerce-error {
	background:var(--HDS-MainColor) !important;	
}
 

/***********************************************************************

   Remove the WooCommerce cart from the menu
   We have our own font-awesome icon that we use
   
 ***********************************************************************/

a.et-cart-info {
	 display:none;
}