/*
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 {
/* --NPRB-Black:	#696559; */
--NPRB-Black:	#22180A;
--NPRB-Text:	#645C51;
--Menu-Highlight:#625A4D; 
--Section-BG:	#383227;
}

/* 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
   H2 Section Title
   H3 Titles Links
   H4 Policy Subsection Titles
   
***********************************************************************/

h1, h2, h3, h3>a, h4, .right-info-blurb h4.et_pb_module_header, .et_pb_promo h2.et_pb_module_header, .left-info-blurb h4.et_pb_module_header, .action-blurb h4.et_pb_module_header, .testi-slider .et_pb_slide_title, .widget_shopping_cart h4.widgettitle {
	font-family: Georgia,Times,Times New Roman,serif; 
	color:var(--NPRB-Text) !important;
}

h1 {
	font-weight:400;
}

h3, .widget_shopping_cart h4.widgettitle {
	font-weight:700;
}

a, p, article, body, .testi-slider .et_pb_slide_content, input.et_pb_s {
	font-family: Georgia,Times,Times New Roman,serif; 
	color:var(--NPRB-Text) !important;
}

/* use this for links embedded in text */
p>a, .et_pb_text a, h2>a, span.woocommerce-terms-and-conditions-checkbox-text>a {
	text-decoration:underline;	
}

/* change opacity on embedded link hover */
p>a:hover, .et_pb_text a:hover, h2>a:hover, span.woocommerce-terms-and-conditions-checkbox-text>a:hover {
	text-decoration:none;	
}

@media (max-width:640px) {
	h1, h2 {
		text-align:center;
	}
}

/* push the Author to the left */
.shop-item h2, .shop-item-mobile h2 {
	text-align:left;
}

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

   Set the Font Size to be used....
   
***********************************************************************/

h1 {
    font-size: 48px !important;
}

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

h2 {
    font-size: 40px;
}

@media (max-width:640px) {
	h2 {
		font-size: 32px;
	}
}

.shop-item h2 {
    font-size: 24px;
}

h3 {
    font-size: 1.17em;
}

h4 {
	margin-top:15px;
    font-size: 1.8em;
}

/*****************************************************************
		
					Style the Header & Logo
		
*****************************************************************/

/* add BG to header */
#main-header {
    background-size: initial;
    background-repeat: repeat;
    background-image: url('../../uploads/2018/10/HeaderBG.png') !important;
}

.et_menu_container {
	padding:0px !important;
}

/* set the BG colour on the menu bar */
#et-top-navigation {
	background-color:var(--NPRB-Black);
}

/* shopping cart icon in the menu bar */
#et-top-navigation a.et-cart-info {
	padding:20px 10px 20px 10px !important;
	margin:5px 0px 5px 10px !important;
	border-left:var(--Menu-Highlight) solid 1px;
	border-right:var(--Menu-Highlight) solid 1px;
}

#et-top-navigation .et-cart-info span::before {
	color:white;
    transition: all 0.4s;
}

#et-top-navigation .et-cart-info:hover span::before {
	opacity:1 !important;
	color:var(--Menu-Highlight) !important;	
}

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

style the Mobile Header                          

*********************************************************************************/
@media (max-width: 980px) {
	/* constrain the size of the logo a little */
	#logo {
		max-height: 100% !important;
		max-width:100% !important;
	}
}

@media (max-width: 640px) {
	/* take little more space out from above the logo */
	header#main-header {
		padding-top:0px !important;	
	}

}

@media (max-width: 980px) {
	.logo_container {
		max-height:300px !important;
	}
}

/* this color needs to be off */
@media (max-width:980px) {
	#et-top-navigation, .mobile_nav {
		background-color:transparent !important;
	}
}

/*****************************************************************
		
					Style the Primary Menu
		
 *****************************************************************/
 
/* Style menu items */        
#top-menu a {
	color:white !important;
    font-size: 20px;
    text-transform:lowercase;  
	padding-bottom:20px !important;
	padding-top:20px;
    transition: all 0.4s;
}

#top-menu>li {
	padding-left:10px;
	padding-right:10px !important;
	border-left:var(--Menu-Highlight) solid 1px;
	margin-top:5px;
	margin-bottom:5px;
}

#top-menu>li:last-child {	
	border-right:var(--Menu-Highlight) solid 1px;
}

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

/* we switch colors on mouse hover but NOT on the root of a submenu */
#top-menu .menu-item-has-children>a:hover {
    color:white !important;	
}

/* we do NOT switch to highlight colour on mouse hover on the root of a submenu UNLESS it is the parent of the current item */
#top-menu .current-menu-parent>a:hover {
	color:var(--Menu-Highlight) !important;		
}

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

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

/* 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(--Menu-Highlight) !important;	
}

/* AND add the underline to the currnet-menu-item as well */
#top-menu .current-menu-item>a::after {
	background:white;   /* underline colour */
	opacity: 1;
	/* 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); 
}

/* stop mouse pointer behaviour on current item */
#top-menu .current-menu-item>a:hover {
	cursor:default;
	pointer-events:none;
}

/*****************************************************************
		
	Style the Mobile Menu
		
 *****************************************************************/
 
 /* this is for Mobile AND Tablet */
@media ( max-width: 980px ) {

	/* style all menu items */	
	/* reduce white space - there are a LOT of menu items to display */
	#et_mobile_nav_menu a {
		font-size: 18px !important;
		letter-spacing:4px;
		text-transform:lowercase;  
		font-weight:400 !important;
		padding: 10px 5%;
		text-align:center;
	}
	
    /* style the hamburger */
	span.mobile_menu_bar.mobile_menu_bar_toggle:before {
		color: white; 
		font-size:48px;		
	}
	
	/* change the hamburger to an 'X' when mobile menu is open */
	.mobile_nav.opened .mobile_menu_bar:before {
		font-family: "ETmodules";
		content: "\4d"; 
	}
	
	/* position the hamburger */
	span.mobile_menu_bar.mobile_menu_bar_toggle {
		/* margin-left:90%; */
		margin-top:-15px;
		margin-right:calc(50% - 24px);
	}

	/* remove the Select Page text on the left of the header */	
	.mobile_nav span.select_page {
		display:none !important;
	}
	
	/* remove the contrast colour stripe at the top of the mobile menu */
	.et_mobile_menu {
		border-top-width: 0px;	
	}

	/* widen the popup menu ON TABLET - mobile is below */
	.et_mobile_menu {
		width:40% !important;
		margin-left:30% !important;
	}

	/* position the pop up menu */
	.et_mobile_menu {
		top:30px !important;
	}
	
	/* decrease padding top and bottom from mobile menu container */
	.et_mobile_menu {
		padding-top:10px;
		padding-bottom:10px;
	}
	
	/* switch off all submenus on mobile */
	/* otherwise menu is HUGE */
    .sub-menu .menu-item {
        /* display:none; */
    }
	
	/* The submenu root background is grey - this is intended to suggest it is inaccessible */
    .menu-item-has-children>a {
		/* background-color:white !important; */
    }
}

/* adjust layout for mobile only */
@media (max-width:540px) {
	/* reduce the font */
	#et_mobile_nav_menu a {
		font-size: 12px !important;
		letter-spacing:2px;
		padding: 3px 5%;
	}
	
	/* widen the popup menu */
	/* move it up the page a little */
	.et_mobile_menu {
		width:80% !important;
		margin-left:10% !important;
		top:10px;
	}
}
 
/*********************************************************************************

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, .dark-section a.et_pb_button.dark-button::after, .dark-section .et_pb_button::after, button.single_add_to_cart_button::after, button.et_pb_contact_submit.et_pb_button::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
{
	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, .dark-section a.et_pb_button.dark-button , p.form-submit input[type="submit"], .nf-form-content input[type="submit"], .et_pb_search input.et_pb_searchsubmit, .widget_search input#searchsubmit, div#mc_embed_signup input[type="submit"],
.et_pb_blog_grid a.more-link, .et_pb_posts a.more-link, .et_bloom_submit_subscription, button.et_pb_contact_submit.et_pb_button, .et_pb_tabs_controls a, 
.adv-book-search input[type="submit"], .std-book-search input[type="submit"],
.woocommerce button.single_add_to_cart_button.button.alt, .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,
.product-archive a.more-link, .product-archives a.more-link,
.sidebar .textwidget a, .widget_shopping_cart a.button.wc_forward 
{
	border:2px solid var(--NPRB-Black) !important;
	border-radius:0px;
	color:white !important;
	background-color:var(--NPRB-Black) !important;
	font-family: Georgia,Times,Times New Roman,serif !important; 
	font-weight:bold;
    font-size: 16px;
	text-decoration:none;
	padding:0.5em 0.8em 0.5em 0.8em !important;
    transition: all 0.4s;
}

a.et_pb_button:hover, .dark-section a.et_pb_button.dark-button:hover, p.form-submit input[type="submit"]:hover, .nf-form-content input[type="submit"]:hover, .et_pb_search input.et_pb_searchsubmit:hover, .widget_search input#searchsubmit:hover, div#mc_embed_signup input[type="submit"]:hover,
.et_pb_blog_grid a.more-link:hover, .et_pb_posts a.more-link:hover, .et_bloom_submit_subscription:hover, button.et_pb_contact_submit.et_pb_button:hover, .et_pb_tabs_controls a:hover,
.adv-book-search input[type="submit"]:hover, .std-book-search input[type="submit"]:hover,
.woocommerce button.single_add_to_cart_button.button.alt: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,
.product-archive a.more-link:hover, .product-archives a.more-link:hover,
.sidebar .textwidget a:hover, .widget_shopping_cart a.button.wc_forward:hover 
{
	border:2px solid var(--NPRB-Black) !important;
	color:var(--NPRB-Black) !important;
	background-color:transparent !important;
	opacity:1;
	padding:0.5em 0.8em 0.5em 0.8em !important;
}

/* no idea why but the cursor does not change to pointer on hover over this form so force it here */
.adv-book-search input[type="submit"]:hover {
	cursor:pointer;
}

/* 'light' buttons - for dark background */
.dark-column a.et_pb_button, .dark-section a.et_pb_button, .dark-section .et_pb_blog_grid a.more-link, .dark-column .std-book-search input[type="submit"] {
	border:2px solid white !important;
	color:var(--NPRB-Black) !important;
	background-color:white !important;
	font-family: Georgia,Times,Times New Roman,serif !important; 
	font-weight:bold;
    font-size: 16px;
	padding:0.5em 0.8em 0.5em 0.8em !important;
    transition: all 0.4s;
}

.dark-column a.et_pb_button:hover, .dark-section a.et_pb_button:hover, .dark-section .et_pb_blog_grid a.more-link:hover, .dark-column .std-book-search input[type="submit"]:hover {
	border:2px solid white !important;
	color:white !important;
	background-color:var(--NPRB-Black) !important;
	opacity:1;
	padding:0.5em 0.8em 0.5em 0.8em !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 {
	width:100%;
}

/* 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 */
.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;
}

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

Style the Advanced Book Search                               

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

.adv-book-search .search-params {
	padding-bottom:15px;
}

/* narrow these on desktop */
.adv-book-search form.adv-search-form {
	width:50%;
	padding-bottom:100px;
}

/* set the submit button width */
.adv-book-search input[type="submit"] {
	width:25%;
}

/* set the field input width */
.adv-book-search .search-param input {
	width:50%;
}

/* style the field input */
.adv-book-search .search-param input {
	border: 1px solid var(--NPRB-Black) !important;
}

/* set the label width */
.adv-book-search .search-param h3 {
	width:30%;
	display:inline-block;
}

.adv-book-search .woocommerce-pagination {
	margin-top:50px;
}

@media (max-width:980px) {
	/* wider on tablet and mobile */
	.adv-book-search form.adv-search-form {
		margin-left:0%;
		width:100%;
	}
	/* but maintain the width of the Submit button */
	.adv-book-search input[type="submit"] {
		margin-left:25%;
		width:50%;
	}
}

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

Style the Standard Book Search Form                

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

.std-book-search  form.std-book-form {
	margin-bottom:50px;
}

/* set the input form up the same as our buttons, so it has the same height and aligns with them */
.std-book-search input#search_string {
	border: 2px solid var(--NPRB-Black) !important;
	font-family: Georgia,Times,Times New Roman,serif !important;
    font-weight: bold;
    font-size: 16px;
    padding: 0.5em 0.8em 0.5em 0.8em !important;
}

/* set the widths of the input and submit to take up all the space they can */
.std-book-search input#search_string {
	width:calc(100% - 5em) !important;	
}

.std-book-search input#submit_form {
	width:5em !important;	
    padding: 0.5em 0.4em 0.5em 0.4em !important;
}

/* the home page form is on a dark-column */
.dark-column .std-book-search input#search_string {
	border: 2px solid white !important;
	border-right-color:var(--NPRB-Black) !important;
}

/* push the pagination down a bit */
.std-book-search .woocommerce-pagination {
	margin-top:50px;
}

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

Style the Standard Book Search Form on the Results Page             

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

/* narrow the form when it is on the results page on desktop */	
@media (min-width:980px) {
	.std-search-results .std-book-search  form.std-book-form {
		width:50%;
	}
}

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

Style the search results and shop on mobile - reorder them so the sidebar appears after the results  

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

@media (max-width:980px) {
	.std-search-results>.et_pb_row, .adv-search-results>.et_pb_row, .shop-results>.et_pb_row {
		display:flex;
		flex-direction:column-reverse;
	}
	.std-search-results .sidebar, .adv-search-results .sidebar, .shop-results .sidebar {
		margin-top:90px;
	}
}

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

Style the AtoZ links                             

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

.atoz-links a {
	padding-top:0.5em;
	padding-bottom:0.5em;
	width:calc(100%/26);
	text-align:center;
	display:inline-block;
	color:white !important;
	background-color:var(--NPRB-Black) !important;
}

@media (max-width:980px) {
	.atoz-links a {
		width:calc(100%/13);
	}
}

@media (max-width:640px) {
	.atoz-links a {
		width:calc(100%/7);
	}
}

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

Style the RESERVED product label                     

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

.reserved-product {
	background-color:red;
	color:white !important;
	text-align:center !important;
	display:inline-block;
	padding:0.5em;
}

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

Style the Book Product Template Page                             

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

/* widen the page */
/* This is actually a hidden row used by Divi to contain the Specialist Section */
.book-template>.et_pb_row {
	max-width:80%;
	width:80%;
}

/*swap the image and thumbnail order */
.book-template .woocommerce-product-gallery {
	display:flex;
	flex-direction:column-reverse;
}

/* slightly smaller viewport please */
.book-template .et_pb_wc_images  {
	width:75% !important;
}

/* fullsize viewport on mobile please */
@media (max-width:680px) {
	.book-template .et_pb_wc_images  {
		width:100% !important;
	}
}

/* remove some whitespace */
.book-template .flex-control-nav {
	margin-top:0px !important;
}

/* make the thumbnails a little smaller */
.book-template .flex-control-thumbs li {
	width:15% !important; 
	margin-bottom:10px !important;
	margin-right:10px !important;
}

/* try to display three thumbnails per row on mobile */
@media (max-width:680px) {
	.book-template .flex-control-thumbs li {
		width:20% !important; 
	}
}

/* remove the magnifying glass */
a.woocommerce-product-gallery__trigger {
	display:none;
}

/* style the price */
.book-template p.price {
	text-align:left;
	font-size:26px !important;
}

/* widen the sidebar as the screen narrows */
@media (max-width:1300px) {
	/* expand to allow more space for info */
	.book-template>.et_pb_row {
		max-width:90% !important;
		width:90% !important;
	}
	/* allow more width for the left sidebar */
	.book-template>.et_pb_row>.et_pb_column:nth-child(1) {
		width:32.5% !important;
		margin-right:2.5% !important;
	}
	.book-template>.et_pb_row>.et_pb_column:nth-child(2) {
		width:65% !important;
	}
}

@media (max-width:980px) {
	/* force single column layout */
	.book-template>.et_pb_row>.et_pb_column:nth-child(1) {
		margin-right:0% !important;
		width:100% !important;
	}
	.book-template>.et_pb_row>.et_pb_column:nth-child(2) {
		width:100% !important;
	}
}

/* re-order to send book categories and serch form to end */
@media (max-width:980px) {
	.book-template>.et_pb_row {
		display:flex;
		flex-direction:column-reverse;
	}
	.book-template>.et_pb_row>.et_pb_column:nth-child(1) {
		margin-top:50px !important;
		margin-bottom:0px !important;
	}
}

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

Style the Shop Archive    

This is used in the results of seaches AND on the stock page       

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

/* force a wider shop */
.shop-section>.et_pb_row {
	width:80% !important;
	max-width:100% !important;
}

/* force a wider archive - remove 3% from the right marginon the sidebar andgive it to the archive column */
.shop-section>.et_pb_row>.et_pb_column:nth-child(1) {
	width:22.5% !important;
	margin-right:2.5% !important;
}

.shop-section>.et_pb_row>.et_pb_column:nth-child(2) {
	width:75% !important;
}

/* add a little whitespace between the shop and pagination */
.product-archive {
	margin-bottom:20px;
}

/* force full width for the row and remove spacing above and below */
/* add a border beneath to get some separation in the archive */
/* The padding determines the gap between the item and the bottom border */
/* The margin determines the gap between the next item and the bottom border */
.product-archive .shop-item {
	padding-top:0px !important;
	padding-bottom:5px !important;
	border-bottom:1px solid var(--NPRB-Black);
	margin-bottom:8px;
	display:flex;
}
	
/* add a border to the top of the first book in the results */
/* the form is the first child..... */
.product-archive .shop-item:nth-child(1) {
	padding-top:8px !important;
	border-top:1px solid var(--NPRB-Black);
}

/* SPACING FOR SHOP ARCHIVE COLUMNS */
.product-archive .shop-item .atc-col {
	width:150px !important;
	margin-right:5px !important;
}

.product-archive .shop-item .price-col {
	width:120px !important;
	margin-right:15px !important;
}

.product-archive .shop-item .info-col {
	width:calc(100% - 150px - 120px - 150px - 35px) !important;
	margin-right:15px !important;
}

.product-archive .shop-item .more-col {
	width:150px !important;
}

/* style the price */
.product-archive .shop-item p.price {
	text-align:right;
	font-size:26px !important;
}

/* style the Read More button */
.product-archive .shop-item .more-col a {
	display: block;
    width: 100%;
    /* margin-left: auto; */
    text-align: center;
    margin-top: 0px;
}

/* style the Add to Cart and View Basket buttons */
.product-archive .shop-item .atc-col a {
    width: 100%;
    text-align: center;
}

/* style the read more button */
/* something a bit off about how these are styled by default.... */
.product-archive .shop-item a.et_woo_read_more {
	display:block;
	text-align:center;   	
}

/* it's confusing but this is actually the AUTHOR */
.product-archive .shop-item .et_pb_woo_title {
	margin-bottom:5px !important;	
}

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

Style the Shop Archive On Narrow Devices  

This is used in the results of seaches AND on the stock page       

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

@media (max-width:1300px) {
	/* expand to allow more space for info */
	.shop-section>.et_pb_row {
		width:90% !important;
	}
	/* allow more width for the left sidebar */
	.shop-section>.et_pb_row>.et_pb_column:nth-child(1) {
		width:32.5% !important;
		margin-right:2.5% !important;
	}
	.shop-section>.et_pb_row>.et_pb_column:nth-child(2) {
		width:65% !important;
	}
}

@media (max-width:980px) {
	/* force single column layout */
	.shop-section>.et_pb_row>.et_pb_column:nth-child(1) {
		margin-right:0% !important;
		width:100% !important;
	}
	.shop-section>.et_pb_row>.et_pb_column:nth-child(2) {
		width:100% !important;
	}
}

/* swap to a single-column layout for the shop-items */
@media (max-width:1300px) {
	.product-archive .shop-item {
		display:flex;
		flex-direction:column;
	}
	.product-archive .shop-item .atc-col {
		width:100% !important;
		margin-right:0px !important;
		margin-bottom:15px !important;
		order:4;
	}
	.product-archive .shop-item .atc-col a {
		width:100% !important;
		text-align:center;
	}
	.product-archive .shop-item .price-col {
		margin-top:5px !important;
		margin-bottom:15px !important;
		order:2;
	}
	.product-archive .shop-item .info-col {
		width:100% !important;
		margin-right:0px !important;
		margin-top:15px !important;
		order:1;
	}
	.product-archive .shop-item .more-col {
		width:100% !important;
		margin-right:0px !important;
		margin-bottom:10px !important;
		order:3;
	}
	.product-archive .shop-item .more-col a {
		display: block;
		text-align: center;
	}
	.product-archive .shop-item p.price {
		text-align:left;
	}	
}


/* re-order to send book categories and serch form to end */
@media (max-width:980px) {
	.shop-section>.et_pb_row {
		display:flex;
		flex-direction:column-reverse;
	}
	.shop-section>.et_pb_row>.et_pb_column:nth-child(1) {
		margin-top:50px !important;
		margin-bottom:0px !important;
	}
}

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

Style the View Basket buttons that auto appear after Add To Cart button is clicked                    

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

.book-template a.added_to_cart.wc-forward {
    margin-left: 10px;
    line-height: 1.7em;
}

.product-archive a.added_to_cart.wc-forward {
    margin-left: 0px;
	margin-top:10px;
    line-height: 1.7em;
}

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

Style the Sidebar                    

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

/* color the vertical separator */
.sidebar {
	border-right-width:1px;
	border-right-color:black;
}

/* reduce the large margin beneath sidebar widgets */
.sidebar .et_pb_widget {
	margin-bottom:10px !important;
}

.sidebar form.std-book-form {
	margin-bottom:10px !important;	
}

/* ADD margin above the different sections in the sidebar */
.sidebar .std-book-search, .sidebar .widget_shopping_cart {
	margin-top:30px !important;
}

/* force images used as buttons to be fuill width */
.sidebar a>img {
	width:100%;
}

/* force buttons to be full width */
.sidebar .et_pb_widget a {
	display:block;
	text-align:center;
}

/* just make search button a little wider to accommodate text */
.widget_search input#searchsubmit {
	width:6em;
}

@media (max-width:980px) {
	.sidebar {
		margin-left:25%;
		margin-right:25%;
		width:50%;
		margin-bottom:40px !important;
	}
	.sidebar>* {
		width:100% !important;
		margin-right:0px;
	}
}

@media (max-width:640px) {
	.sidebar {
		margin-left:0%;
		margin-right:0%;
		width:100%;
	}
}

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

Style the Shopping basket Widget                    

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

.widget_shopping_cart {
	border:2px solid var(--NPRB-Black);
	padding:8px 4px 2px 4px;
}

.widget_shopping_cart .total {
	padding:4px 0px !important;
	border-top:2px double var(--NPRB-Black) !important;
	border-bottom:2px double var(--NPRB-Black) !important;
}

.woocommerce-mini-cart-item a {
	display:inline-block !important;
}

/* style the small 'remove 'X' button */
a.remove.remove_from_cart_button {
	background-color:var(--NPRB-Black) !important;	
	color:white !important;	
	border:1.5px solid black;
    font-size: 1.4em;
    height: 1em;
    width: 1em;
    line-height: 0.8em;
}

a.remove.remove_from_cart_button:hover {
	background-color:white !important;	
	color:black !important;
	border:1.5px solid black;
}

/* switch off display of thumbnails in cart widget */
.widget_shopping_cart img {
	display:none;
}

/* force buttons to be full width */
.woocommerce-mini-cart__buttons a {
	width:100%;
	text-align:center;
}

/* do not display widget basket in sidebar on tablet and mobile */
/* we rely instead on the 'Vew Basket' buttons appearing when add to basket is clicked */
@media (max-width:980px) {
	.widget_shopping_cart {
		display:none;
	}	
}

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

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

/* switch off on desktop */
@media ( min-width: 980px ) {
	.et_pb_scroll_top {
		display:none !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;
}

/* remove vertical space */
.footer-credit {
	padding-top:0px !important;
	padding-bottom:0px !important;
}

.footer-credit .et_pb_row {
	padding-top:10px !important;
	padding-bottom:10px !important;
}

.footer-credit .et_pb_module {
	margin-top:0px !important;
	margin-bottom:0px !important;
}

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

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

Style the Basket (Cart)  

We don't use this as the default woo icon only appears on desktop and not on mobile menu
So, we use our own icon instead.....                     
                                                                           
*******************************************************************************/

/* style the small 'remove 'X' button */
.woocommerce-cart a.remove {
	background-color:var(--NPRB-Black) !important;	
	color:white !important;		
	border:2px solid black;
    font-size: 2em;
    height: 1.5em;
    width: 1.5em;
    line-height: 1.3em;
}

.woocommerce-cart a.remove:hover {
	background-color:white !important;	
	color:black !important;
	border:2px solid black;
}

/*stop the Woo Voucher Apply from appearing */
.woocommerce-cart .coupon {
	display:none;
}

/*force the procuct thumbnail to be bigger */
.woocommerce-cart .product-thumbnail img {
	width:150px !important;
}

/* make the Proceed to checkout button less intrusive */
.et_pb_wc_cart_totals .wc-proceed-to-checkout {
	width:25%;
}

@media (max-width:980px) {
	/* make the button less intrusive */
	.et_pb_wc_cart_totals .wc-proceed-to-checkout {
		margin-left:25%;
		margin-right:25%;
		width:50%;
	}
}

@media (max-width:640px) {
	/* make the button less intrusive */
	.et_pb_wc_cart_totals .wc-proceed-to-checkout {
		margin-left:0%;
		margin-right:0%;
		width:100%;
	}
}

/* stop the Basket Total text from appearing */
.et_pb_wc_cart_totals .cart_totals>h2 {
	display:none;
}

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

   Remove the WooCommerce cart from the menu
   We just use a menu item - the Woo Cart icon does not appear on mobile menu.....
   
 ***********************************************************************/

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

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

Style the WooCommerce Message, Info etc.                     
                                                                           
*******************************************************************************/

.woocommerce-message, .woocommerce-info, .woocommerce_error, .woocommerce_error li, ul.woocommerce-error {
	font-family: Georgia,Times,Times New Roman,serif; 
	background:red !important;
	margin-top:10px;
	text-align:center !important;
}

.woocommerce-message a, .woocommerce-message p,
.woocommerce-info a, .woocommerce-info p,
.woocommerce-error a, .woocommerce-error p {
	color:white !important;
}

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

Style the Woo Product Carousel                   
                                                                           
*******************************************************************************/

/* change styling on nav controls */
.controlsWrap .prev, .controlsWrap .next  {
	background-color:var(--NPRB-Black);
}

.controlsWrap .prev i.fas, .controlsWrap .next i.fas {
	color:white;
}

/* stop the nav dots from appearing */
/* If we display:none this, is messes up the layout */
.tns-outer .tns-nav button {
	visibility:hidden;
}

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

Style the Dark Column                       
                                                                           
*******************************************************************************/

.dark-column {
	background-color:var(--Section-BG);
}

.dark-column p, .dark-column p>a, .dark-column body, .dark-column .et_pb_text, .dark-column a, .dark-column h1, .dark-column h2, .dark-column h3, .dark-column h4, .dark-column h5, .dark-column h6, .dark-column input.et_pb_s
{
	color:white !important;
}

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

style the Ninja Forms

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

.nf-form-content, .nf-form-fields-required {
    /* font-family: 'Montserrat-Medium', sans-serif; */
}

.nf-form-fields-required {
    display:none;
}

.nf-form-content nf-field label {
	font-weight:normal;
}

.nf-form-content .nf-field-label {
	margin-bottom:0px !important;
}

.nf-form-content textarea.ninja-forms-field {
	height:100px !important;
}

.nf-field-container {
	margin-bottom:0px !important;
}

.nf-form-content .ninja-forms-field.nf-element {
	background-color:transparent;
}

/* add a little spacing */
.nf-form-content .nf-field-container, .nf-form-content input[type="submit"] {
	margin-top:15px;
}

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

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

.dark-section {
	background-color:var(--Section-BG) !important;
}

.dark-section p, .dark-section p>a, .dark-section body, .dark-section .et_pb_text, .dark-section a, .dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .dark-section h5, .dark-section h6, .dark-section input.et_pb_s
{
	color:white !important;
}

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

    Vertically Center objects within columns
	
Column equalisation must be switched ON for this to work
Apply this class to the COLUMNS
                                                               
*****************************************************************/

.vertical-center { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
} 

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

stop the Divi footer from being displayed                                 

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

div#footer-bottom {
	display:none;
}