/*
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

--DM-Red:	#ef282b;
	   
*******************************************************/

:root {
--DM-Red:	#f26722;
--Dark-Grey:	#2f2f2f;
--Light-Grey:   #ebebeb;
--Grey:     #aaaaaa;
}

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

   load the required fonts - they have already been stored in the 
   fonts folder of the child theme so we can serve them to the website
   
***********************************************************************/

@font-face {
	font-family: 'PangolinRegular';  
	src: url(fonts/Pangolin-Regular.ttf);  
}

@font-face {
	font-family: 'FrederickaTheGreat';  
	src: url(fonts/FrederickatheGreat-Regular.ttf);  
}

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

   Style the fonts to be used....
   
***********************************************************************/

a, p, article, body, h1, h2, .et_pb_promo h2, h3, h4, h5, h6, .highlight-text p, /* .testi-slider */ .et_pb_bg_layout_dark h2 {
    font-family: Lato, sans-serif;
	color:var(--Dark-Grey) !important;
}

/* links embedded in text i.e. not in Divi modules */
p>a, h3>a, .et_pb_text_inner>a, .et_pb_text_inner>ul>li>a, .et_pb_text_inner>h2>a {
	font-weight:bold;
}

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

h1, h2, .et_pb_promo h2 {
	text-transform:uppercase !important;
	font-weight:bold !important;
}

h1, .highlight-text p, .et_pb_promo h2, /* .testi-slider */ .et_pb_bg_layout_dark h2  {
	text-align:center;	
}

.highlight-text p {
	font-style:italic;
	font-weight:bold;
}

/* SmartSlider Text */
.n2-ow p, .n2-ow span {
    font-family: Lato, sans-serif;
	color:white !important;	
}

/* use Pangolin in the Kid's Zone */
.kids-zone p, .kids-zone h1, .kids-zone h2, .kids-zone h2.entry-title a, .quiz .et_pb_toggle_title {
    font-family: PangolinRegular, sans-serif !important;	
}

/* mobile menu items */
#et_mobile_nav_menu a {
    font-family: Lato, sans-serif;
	color:var(--DM-Red) !important;
}

.little-woodham h2>a, .little-woodham p>a, .little-woodham p, .little-woodham h2 {
	font-family: 'FrederickaTheGreat', cursive !important;  
	text-transform:none;
}

/* add a little space h3 in the footer is not really used as a header so it often wraps */
.desktop-footer h3, .mobile-footer h3 {
	line-height:1.2em;
}

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

   Set the Font Size 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 {
    font-size: calc( 20px + (30 - 20) * (100vw - 980px) / (1600 - 980)) !important;
}

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

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

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

/* body text etc. */
p, p>a, article, body, .et_pb_text {
    font-size: 18px;
}

.kids-zone p, .kids-zone p>a, .kids-zone article, .kids-zone body, .kids-zone .et_pb_text {
    font-size: 24px;
}

/* highlight text */
.highlight-text p {
    font-size: 24px;
}

/* testi slider title font size etc. */
.testi-slider .et_pb_slide_title {
    font-size:18px !important;
}

/* testi slider content font size etc. */
.testi-slider .et_pb_slide_content, .testi-slider .et_pb_slide_content p {
    font-size: calc( 20px + (26 - 20) * (100vw - 320px) / (1600 - 320));
	line-height:1.8em;
}

/* decrease font size in the footer to save space */
.desktop-footer h3, .mobile-footer h3 {
	font-size:16px !important;
}

.desktop-footer h2, .mobile-footer h2 {
	font-size:20px !important;
}

/* force a little padding in the footer to space out the links */
.desktop-footer h2, .mobile-footer h2 {
	padding-bottom:10px !important;
}

 /*****************************************************************
		
					Style the Header & Logo
		
 *****************************************************************/
 
.et_menu_container {
	width:90% !important;
	margin-right:0% !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:95% !important;
		margin-left:5% !important;
	}	
} 

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

/* make as much space as possible for the menu */
/* the logo is on the left so expand on the right */
#et-top-navigation {
	margin-right:0px !important;
	width:auto;
}

/*****************************************************************
		
					Fix the Divi Jumping Header
		
******************************************************************/

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

/*****************************************************************
		
					Style the Icon Header

	The Icon Header has been disabled because more space was needed to
	accommodate the large menu
		
 *****************************************************************/

 /* CAREFUL - the width here is forced to be just enough for the icons - each icon is 52px wide */
 .icon-header {
	margin-left:22px;
	width:calc(60px * 3) !important;
	margin-top:-12px !important;
	display:inline-block;
	padding-top:0px !important;
	padding-bottom:0px !important;
}

/* not enough space for the social icons so switch off */ 
@media (max-width:1420px) {
	 .icon-header {
		 display:none;
	 }
 }
 
/*****************************************************************
		
					Style the Primary Menu
		
 *****************************************************************/
 
/* Style menu items */        
#top-menu a {
	color:var(--Dark-Grey) !important;
    font-size: calc( 12px + (16 - 12) * (100vw - 980px) / (2000 - 980));
    text-transform:uppercase;  
	text-align:center;
    font-weight:bold;
}

/* 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(--Grey) !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 */
#top-menu .current-menu-item a {
	opacity:1;
	color:var(--Grey) !important;	
}

/* We use the Default menu layout to get the logo to display on the left */
/* but we want the menu to be left aligned as well and the default is right aligned */
/* so we need to remove the float:right and the padding-left (used to make sure the menu does not end up under the logo) */
/* and we add our own spacing intended to line everything up just to the right of the logo */
#et-top-navigation {
	float:none !important;
	padding-left:0px !important;
	margin-right:20px !important;
	margin-left:200px;
	width:auto;
}

@media (min-width:980px) and (max-width:1200px) {
	#top-menu-nav {
		width:100% !important;		
	}
	#top-menu {
        display:flex;
		flex-wrap:nowrap;
		flex-direction:row;
		width:100% !important;
        justify-content:space-around;
	}
	#top-menu>.menu-item {
		padding-right:0px;
	}
}

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

	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(--DM-Red);   /* 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;
}

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

/* 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 only screen and ( 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(--DM-Red);  
		font-size:48px;
	}
	
	/* remove the contrast colour stripe at the top */
	/* narrow the popup menu and center position it */
	.et_mobile_menu {
		border-top-color: var(--DM-Red);	
		width:50%;
		left:25%;
	}
	
	/* 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 submenus on mobile */
	/* otherwise menu is HUGE */
    .sub-menu .menu-item {
        /* display:none; */
    }
	
	/* center align all menu items on mobile */
	.menu-item {
		text-align:center;
	}
	
	/* 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 */
	#et_mobile_nav_menu a {
		font-size: 14px !important;
		letter-spacing:2px;
	}
	
	/* widen the popup menu and center position it */
	.et_mobile_menu {
		width:80%;
		left:10%;
	}
}

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

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

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

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

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

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

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

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

	Style SmartSlider 3

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

/* when we use two SS3 modules in the same column.... */
/* bottom margin is added and we need to remove it */

/* We sometimes use two SS3 modules together because one is for desktop and one is for mobile....*/

.smart-slider>.et_pb_column>.et_pb_module {
    margin-bottom:0px !important;	
}

/* Force slides to these heights on table and mobile */
/* No content on slides in tablet and phone so without forcing height the slides would br very short */
@media (max-width:980px) {
	.smart-slider .n2-ow {
		height:500px !important;
	}
}

@media (max-width:460px) {
	.smart-slider .n2-ow {
		height:400px !important;
	}
}

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

   Style the Page Banners
   
 ***********************************************************************/
 
/* force the height so that it is dependent on the Viewport Width */
/* Use the aspect ratio of the image to avoid any cropping of images */
/* Include a 'fiddle factor' for the height of the menu */
.page-banner  {
	min-height:calc(100vw * 720 / 1800);
}

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

   Style the HP Slider
   
 ***********************************************************************/
 
/* force the height so that it is dependent on the Viewport Width */
/* Use the aspect ratio of the image to avoid any cropping of images */
/* Include a 'fiddle factor' for the height of the menu */
.hp-slider, .hp-slider .et_pb_slide  {
	min-height:calc(100vw * 720 / 1800);
}

/* make it square on mobile */
@media (max-width:680px) {
    .hp-slider, .hp-slider .et_pb_slide  {
	    min-height:100vw;
   }
}

/* make it a bit more boxy :-) */
.hp-slider .et_pb_slide_description  {
    text-shadow:none;
    padding: 6% 28%;
}

@media (max-width:800px) {
    .hp-slider .et_pb_slide_description  {
        padding: 6% 15%;
    }
}

.hp-slider .et_pb_slide p  {
	font-size:44px;
	line-height:60px;
	color:white !important;
	padding:20px;
}

@media (max-width:980px) {
    .hp-slider .et_pb_slide p  {
	    font-size:34px;
	    line-height:50px;
    }
}

/* give a little overlay color to the BG to let the text stand out */
.hp-slider .et_pb_slide_content { 
    background-color:rgba(0,0,0,0.1);
}

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

Style the page layout by removing all sidebars....

You can only do this per page within Divi....                                                      
                                                                           
*******************************************************************************/

div#left-area {
	width:100%;
}

div.container:before {
	display:none;
} 

div#sidebar {
	display:none;
}

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

Style Blog pages a little....                                                    
                                                                           
*******************************************************************************/

/* I think this is a bug.... */
/* for some reason, when we set the blog page to fullwidth..... */
/* If we have a full width row that has a background..... */
/* Divi sets the width of the row to 80%..... So we need to firce it..... */
.force-full-width-row {
	width:100% !important;
}

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

    five column responsive rows         
	
*******************************************************/	

/* use this target name to overcome specificity that otherwise gets in the way */
.five-columns .et_pb_column>.et_pb_module {
	width: calc(20% - 5px); 
	vertical-align:top; 
	display:inline-block; 
	padding:5px;
}

@media (max-width:980px) {
	.five-columns .et_pb_column>.et_pb_module {
		width: calc(50% - 5px); 
	}	
}

@media (max-width:460px) {
	.five-columns .et_pb_column>.et_pb_module {
		width: 100%; 
	}	
}

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

    Force four column rows to one column on tablet and mobile        
	
*******************************************************/	

@media (max-width:980px) {
	.one-column-mobile .et_pb_column.et_pb_column_1_4 {
		width: 100% !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, .dark-section a.et_pb_button.dark-button::after, .dark-section .et_pb_button::after, button.single_add_to_cart_button::after, div.woocommerce a.checkout-button::after, div.woocommerce a.button::after, div.woocommerce-message a.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"], .wpcf7 input[type="submit"], .et_pb_search input.et_pb_searchsubmit, div#mc_embed_signup input[type="submit"], .nf-form-content input[type="submit"],
.et_pb_blog_grid a.more-link, .et_pb_posts a.more-link, .et_bloom_submit_subscription,
a.wppsac-readmorebtn
{
	border-radius:0px;
    font-family: Lato, sans-serif;
    text-transform:uppercase;  
	font-weight:bold;
	border:2px solid var(--DM-Red) !important;
	color:white !important;
	background-color:var(--DM-Red) !important;
	padding:0.5em 0.8em 0.5em 0.8em !important;
    transition: all 0.4s;
    font-size: 16px;
}

a.et_pb_button:hover, .dark-section a.et_pb_button.dark-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, .nf-form-content input[type="submit"]:hover,
.et_pb_blog_grid a.more-link:hover, .et_pb_posts a.more-link:hover, .et_bloom_submit_subscription:hover,
a.wppsac-readmorebtn:hover
{
	border:2px solid var(--DM-Red) !important;
	color:var(--DM-Red) !important;
	background-color:transparent !important;
	opacity:1;
	padding:0.5em 0.8em 0.5em 0.8em !important;
}

/* 'light' buttons - for dark background */
.dark-section a.et_pb_button {
	border-radius:0px;
    font-family: Lato, sans-serif;
    text-transform:uppercase; 
	font-weight:bold;
	border:2px solid white !important;
	color:white !important;
	background-color:transparent !important;
	padding:0.5em 0.8em 0.5em 0.8em !important;
    transition: all 0.4s;
    font-size: 16px;
}

.dark-section a.et_pb_button:hover {
	border:2px solid white !important;
	color:var(--DM-Red) !important;
	background-color:white !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 */
div.et_pb_button_module_wrapper a {
	text-align:center !important;
}

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

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:white;
    font-size:20px !important; 
    /* margin-left:0px !important;  */
	margin-top:2px;
    line-height:28px !important; 
}

.et_pb_social_media_follow li a.icon:hover::before {
	color:var(--DM-Red);
}

/* background */
.et_pb_social_media_follow li a.icon.et_pb_with_border {
	background-color:var(--DM-Red) !important;
	border:2px solid var(--DM-Red); 
	border-radius:100%;
	height: 32px; 
    width: 32px; 
    padding: 0; 
    transition: all 0.4s;
}

.et_pb_social_media_follow li a.icon.et_pb_with_border:hover {
    background-color:white !important;	
	border:2px solid var(--DM-Red); 
}

/* replace the Dribble icon with an Email icon from Socicon Font :-) */
/* We could put the following in the theme header to load the font style sheet... */
/* <link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?libdco">  */
/* BUT INSTEAD WE ENQUEU THIS FILE IN THE functions.php */
/* ************** 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 { */
/* font-family: "Socicon" !important; */
/* content: '\e050' !important;  */
/* } */

/* replace the Dribble icon with a Email icon from FontAwesome :-) */
/* replace the MySpace icon with a Phone icon from FontAwesome :-) */
/* replace the RSS icon with a TripAdvisor icon from FontAwesome :-) */
/* We could put the following in the theme header to load the font style sheet... */
/* <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> */
/* BUT INSTEAD WE ENQUEU THIS FILE IN THE functions.php */
/* ************** 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 {
 font-family: "FontAwesome" !important;
 content: '\f003' !important; 
}

li.et_pb_social_icon.et-social-myspace a.icon:before {
 font-family: "FontAwesome" !important;
 content: '\f095' !important; 
}

li.et_pb_social_icon.et-social-rss a.icon:before {
 font-family: "FontAwesome" !important;
 content: '\f262' !important; 
 /* margin-left:5px !important; */
}

/* use the FontAwesome icons as well, even for the ones that are actually available from ET - this gives a consistent set of icons.... */
li.et_pb_social_icon.et-social-facebook a.icon:before {
   font-family: "FontAwesome" !important;
   content: '\f09a' !important; 
   /* margin-left:6px !important; */
}

li.et_pb_social_icon.et-social-instagram a.icon:before {
   font-family: "FontAwesome" !important;
   content: '\f16d' !important; 
}

li.et_pb_social_icon.et-social-twitter a.icon:before {
   font-family: "FontAwesome" !important;
   content: '\f099' !important; 
}

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

    Style the Social Follow Buttons for a Dark Section

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

/* foreground */
.dark-section .et_pb_social_media_follow li a.icon::before {
    color:var(--DM-Red);
}

.dark-section .et_pb_social_media_follow li a.icon:hover::before {
	color:white;
}

/* background */
.dark-section .et_pb_social_media_follow li a.icon.et_pb_with_border {
	background-color:white !important;
	border:2px solid white; 
}

.dark-section .et_pb_social_media_follow li a.icon.et_pb_with_border:hover {
    background-color:var(--DM-Red) !important;	
	border:2px solid white; 
}

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

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

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

/* flex container that vertically centers items */
.social-column {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items:center;
}

/* equalize the whitespace below to allow flex to line these up */
.social-column .et_pb_module {
	margin-bottom:10px !important;
}

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

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

/* force the width to be a specific size - must be big enough for the icons though */
/* UPDATE BELOW IF CHANGED */
.social-column .et_pb_social_media_follow {
    width:50px;
}

/* CAREFUL - this is the width we allocated for the icons..... */
/* UPDATE ABOVE IF CHANGED */
.social-column .et_pb_text {
	width:calc(100% - 50px);
}

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

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:bold;
}

.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:20px !important;
}

.nf-form-content .ninja-forms-req-symbol {
	/* color:white; */
}

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

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

Style the Person Module                         
                                                                           
*******************************************************************************/

/* Person Name */
.et_pb_team_member h4.et_pb_module_header {
	text-align:center;
}

.et_pb_team_member_image img {
    border-radius:50%;	
}

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

Style the Honours Board Notice                        
                                                                           
*******************************************************************************/

.honours-board p {
    font-size:56px !important;
    font-weight:bold !important;
	text-align:center !important;
	text-transform:uppercase !important;
}

@media (max-width:480px) {
    .honours-board p {
        font-size:32px !important;
        line-height:32px;
    }	
}

.honours-board p:last-child {
  color:black !important;
}

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

                  Style the testi-slider  

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

/* make this as wide as possible so that testis are not too long */
/* The testi text is center aligned so even at 100%, there will be a margin */
.testi-slider {
	width:100%;
}

/* the default padding top and bottom is quite big... so reduce it a bit */
.testi-slider .et_pb_slide_description {
	padding-top:5%;
	padding-bottom:10%;
}

/* box the slider */
.testi-slider {
	/* border:2px solid var(--Dark-Grey) !important;	 */
}

.dark-section .testi-slider {
	/* border:2px solid white !important;	 */
}

/* 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 */
.testi-slider .et_pb_slide {
	box-shadow:none !important;
}

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

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

/* this is the container for the slide title and content */
.testi-slider .et_pb_slide_description { 
	display:flex;
	flex-direction:column;
}

/* some styling on the content */
.testi-slider .et_pb_slide_content p {
	font-style:italic;
	order:1;
}

.testi-slider .et_pb_slide_title {
	padding-top:2%;
	padding-bottom:5%;
	order:2;
}

/* highlight the current slide in the 'dot' display */
.testi-slider .et-pb-controllers a.et-pb-active-control {
	background-color:var(--DM-Red) !important;
}

.dark-section .testi-slider .et-pb-controllers a.et-pb-active-control {
	background-color:var(--DM-Red) !important;
}

/* default colour for the 'dot' display */
.testi-slider .et-pb-controllers a {
	background-color:white !important;
}

/* make the dots bigger */
.testi-slider .et-pb-controllers a {
	width:15px;
	height:15px;
}

/* just push the controlloer down a little */
.testi-slider .et-pb-controllers {
	padding-top:30px;
}

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

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

.highlight-box {
	background-color:var(--DM-Red) !important;	
	padding:30px;
}

.highlight-box p, .highlight-box h2 {
	color:white !important;
}

.highlight-box a {
	color:white !important;
	font-weight:bold;
}

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

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

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

.et_bloom_form_content {
	background-color:var(--Light-Grey) !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:white !important;
}

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

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

style the Events Archive LIST    

Careful to use a 'narrow' layout on tablet etc.                          

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

/* the read more buttons on the Blog LIST archive are display:block */
/* so they take up the whole width of the column..... */
.et_pb_events a.more-link {
	display:inline-block;
}

/* leave space for the underline */
.et_pb_events .et_pb_post h2.entry-title {
	margin-bottom:40px;	
}

@media (max-width:980px) {
	.et_pb_events .et_pb_post h2.entry-title {
		margin-bottom:20px;	
	}
}

/* align the content so it does not revert to the left margin when the text is so much that it goes below the thumbnail */
/* CAREFUL - this is dependent on thumbnail width and margin-right */
.et_pb_events .post-content {
	margin-left:230px !important;
}

.et_pb_events .post-content p {
	margin-bottom:1em;
}

.et_pb_events .et_pb_post img {
	width:200px;
}

@media (max-width:980px) {
	.et_pb_events .post-content {
		margin-left:0px !important;
	}
	.et_pb_events .et_pb_post img {
		width:100%;
	}	
}

/* float the image to position the title and content to the right of the image */
@media (min-width:980px) {
	.et_pb_events .et_pb_post a {
		float: left;
		margin-right:30px;
	}
}

/* a little spacing between events in the list */
.et_pb_events .et_pb_post {
	margin-bottom:140px;
}

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

style the Events GRID and Blog Grid                            

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

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

/* leave space for the underline */
.et_pb_events_grid h2.entry-title, .et_pb_blog_grid h2.entry-title {
	margin-bottom:20px;	
}

.et_pb_events_grid .et_pb_post, .et_pb_blog_grid .et_pb_post {
	/* border:1px solid var(--DM-Red); */
	border-width:0px;
}

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

style the Events GRID            

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

/* IS THIS A BUG IN DIVI???? */
/* Divi uses -20px margin on the blog grid et_pb_image_container to get it to expand over the padding set by the et_pb_post */
/* BUT THE PADDING SET BY THE ET_PB_POST IS 19PX !!!! */
.et_pb_events_grid .et_pb_post {
    padding:20px;	
}

/* when we bottom align the event grid..... something strange happens when it only displays ONE event...... */
/* so make sure the column width is ALWAYS 100% */
.et_pb_events_grid .et_pb_ajax_pagination_container, .et_pb_events_grid .et_pb_salvattore_content, .et_pb_events_grid .column.size-1of1 {
    width:100%;
}

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

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

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

.et_pb_events_grid h2.entry-title a, .et_pb_events h2.entry-title a, .et_pb_blog_grid h2.entry-title a {
	color:var(--DM-Red) !important;
	text-transform:none;
	font-size:20px;
}

.et_pb_events_grid h3.event-date, .et_pb_events h3.event-date {
	font-weight: bold;
	font-size:16px;
}

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

.et_pb_events_grid h2.entry-title a:after, .et_pb_events 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;
}

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

.et_pb_events_grid h2.entry-title a:after, .et_pb_events h2.entry-title a:after, .et_pb_blog_grid h2.entry-title a:after {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: var(--DM-Red) !important;
    margin: 0 0 0px;
}

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

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

.et_pb_events_grid img, .et_pb_events 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; 
}

.et_pb_events_grid img:hover, .et_pb_events 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);
}

.et_pb_events_grid .entry-featured-image-url, .et_pb_events .entry-featured-image-url, .et_pb_blog_grid .entry-featured-image-url {
	overflow: hidden;
}

/* remove the margin otherwise there is a lot of white space below image */
.et_pb_blog_grid .et_pb_post .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% !important;
	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% !important;
	}
}

@media (max-width:980px) {
	.bottom-align-blog-grid .et_pb_post {
		width:100% !important;
	}
}

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

style the Icon Blurbs                            

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

/* left oriented images are a little small - 32px by default */
.icon-blurb .et_pb_main_blurb_image {
	width:50px !important;
}

.icon-blurb h4.et_pb_module_header {
	margin-top:15px;
	font-weight:bold;
	text-transform:uppercase !important;
}

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

style the Action Blurbs                            

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

.action-blurb h4.et_pb_module_header {
	font-weight:bold;
	font-size:20px;
	padding-bottom:10px;
}

.action-blurb h4.et_pb_module_header a {
	color:var(--DM-Red) !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; */
}

.action-blurb h4.et_pb_module_header a:after {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: var(--DM-Red) !important;
    margin: 0 0 0px;
    transform: translate(0, 10px);
}

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

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

Additional Styling for the Collections Blurbs                            

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

.collections-blurb h4.et_pb_module_header {
	text-align:center;
}

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

        Bottom Align - Divi modules and buttons     

Equalize Column Heights MUST BE SWITCHED ON FOR THIS TO WORK	

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

.align-buttons .et_pb_column {
    display:flex;
	flex-direction:column;
	justify-content:space-between;
}

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

    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;
} 

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

style the Person Modules                            

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

.et_pb_team_member h4.et_pb_module_header {
	font-weight:bold;
	font-size:20px;
	padding-top:20px;
}

.et_pb_team_member_image {
	padding:10%;
}

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

                  Style the Quiz and Joke Toggles  			  
                                                               
*****************************************************************/

.quiz .et_pb_toggle {
	background-color:transparent;
	border-top-width:0px;
	border-left-width:0px;
	border-right-width:0px;
	/* border-bottom:1px solid var(--DM-Red); */
	border-bottom-width:0px;
	padding-left:0px;
	margin-bottom:0px !important;
}

/* make a little wider by removing whitespace on mobile */
@media (max-width:980px) {
	.quiz .et_pb_toggle {	
		padding-right:0px;
	}
}

.quiz .et_pb_toggle_title {
	line-height:1.7em;
	font-size:24px;
	padding-right:0px !important;
}

/* put a top border on the FIRST toggle */
.quiz.et_pb_toggle:nth-of-type(1) {
	/* border-top:1px solid var(--DM-Red); */
}

/* style the toggle icon */
.quiz .et_pb_toggle_title:before {
	color:white;
	font-size:30px;
	margin-bottom:-20px;
}

.quiz .correct-answer .et_pb_toggle_content {
	background-color:#27c303;
}

.quiz .wrong-answer .et_pb_toggle_content {
	background-color:var(--DM-Red);
}

.quiz .et_pb_toggle_content {
	padding:10px;
}

/* position the toggle icon to the left on desktop */
.quiz .et_pb_toggle_title:before {
	position:relative;
	margin-right:10px;
}

/* on reveal of toggle, mark the icon with a tick or an X if right or wrong answer */
.quiz .et_pb_toggle_title:before {
	content:"\3d";
}

.quiz .wrong-answer.et_pb_toggle_open .et_pb_toggle_title:before {
	content:"\51";
}

.quiz .correct-answer.et_pb_toggle_open .et_pb_toggle_title:before {
	content:"\52";
}

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

style the Brushed Background                               

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

.brushed-background {
	background-size:70% 100% !important;
}

.brushed-background-fullwidth {
	background-size:100% 100% !important;
}

.brushed-background h1, .brushed-background h2 {
	padding-top:20px;
	padding-bottom:20px;
}

.brushed-background-fullwidth h1, .brushed-background-fullwidth h2 {
	width:80%;
	margin-left:auto;
	margin-right:auto;
	padding-top:20px;
	padding-bottom:20px;
}

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

style the rotated images                              

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

.rotate-clock-10 {
	transform:rotate(-10deg);
}

.rotate-anticlock-10 {
	transform:rotate(10deg);
}

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

style the on top rows                             

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

.on-top {
	z-index:999;
}

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

style the Footer Credit                                

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

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

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

.footer-credit p, .footer-credit .et_pb_text_inner {
	font-weight:300;
	font-size:14px !important;

}

@media only screen and ( max-width: 980px ) {
	.footer-credit {
		padding-top:90px !important;
	}
	.footer-credit p, .footer-credit .et_pb_text_inner {
		font-size:16px !important;
	    text-align:center !important;
	}
}

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

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

.dark-section {
	background-color:var(--DM-Red)
}

.dark-section p, .dark-section .highlight-text p, .dark-section p>a, .dark-section article, .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 {
	color:white !important;
}

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

stop the Divi footer from being displayed                                 

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

div#footer-bottom {
	display:none;
}

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

Force the footer on mobile and desktop - for some reason, the disable/enable .action-blurb
does not work when the footer is injected so we need to set this up ourselves....                              

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

@media (max-width:980px) {
    .desktop-footer {
	    display:none;
    }
}

@media (min-width:980px) {
    .mobile-footer {
	    display:none;
    }
}

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

Style the Footer                          

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

.desktop-footer {
	/* padding-bottom:0px !important; */
}

.desktop-footer .et_pb_row {
	width:90%;
	max-width:100%;
	padding-bottom:0px;
}

.mobile-footer {
	padding-bottom:0px;
}

.desktop-footer .social-column h2, .mobile-footer .social-column h2 {
	padding-bottom:10px !important;
}

.desktop-footer .footer-page-links {
	margin-top:25px;
}

.footer-logo {
	max-width:80%;
}

@media (max-width:980px) {
	.footer-logo {
	    max-width:50%;
    }
}

.footer-accreditation {
	max-width:30%;
	margin-bottom:15px !important;
}

.footer-helmet {
	margin-left:0px;
	max-width:50%;
}

.footer-national-museum-logo {
	margin-left:0px;
	max-width:80%;
}

@media (max-width:980px) {
    .footer-national-museum-logo {
		margin-left:auto;
	    max-width:50%;
    }
}