/*
 Theme Name:   Divi Child
 Theme URI:    http://cooldesign.co.za
 Description:  A Child Theme built for Divi
 Author:       Cool Design Digital Agency
 Author URI:   http://cooldesign.co.za
 Template:     Divi
 Version:      1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* =========================================================================================== 
   JOSEPH GRIEVESON
/* =========================================================================================== */
/* GENERAL STYLING

/* FOOTER BOTTOM BAR LINK HOVER STYLING
================================================================= */
#footer-info a:hover { 
	opacity: 1 !important;
	border-bottom: 2px solid;
	-webkit-transition-duration: 0.0s !important;
	transition-duration: 0.0s !important;
	-webkit-transition-timing-function: cubic-bezier(0,0,0,0);
	transition-timing-function: cubic-bezier(0,0,0,0);
}

/* IMAGE HOVER EFFECT - GROW
================================================================= */
.img-hover-effect {
	transform: translateZ(0);
	transition-duration: 0.3s;
	transition-property: transform;
}

.img-hover-effect:hover {
	transform: scale(1.1);
}

/* GIVE ITEMS ROUNDED CORNERS
================================================================= */
.rounded-corners  {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
} 

/* LINKS HOVER STYLING - DIFFERENT COLOURS & UNDERLINE LINKS ON HOVER
================================================================= */
.link-hover-underlined a:hover {
	border-bottom: 2px solid;	
}

#footer-info a:hover,
#footer-widgets .footer-widget a:hover  {
	color: #fff !important;
	text-decoration: none !important;
	border-bottom: 2px solid; /* wide underline and turn white in Footer */
}

/* BLURB LINK COLOUR FOR CONTACT PAGE
================================================================= */
.blurb-link-colour a:link {
	color: #ffffff !important;
}

.blurb-link-colour a:hover {
	color: #ffffff !important;
	border-bottom: 2px solid;	
}

/* VERTICALLY ALIGN A COLUMN - FROM DIVI SPACE
================================================================== */
.col-vertical-align { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
} 

/* PUT A BLUE LINE AND SHADOW ABOVE THE COOKIE POPUP BAR
================================================================= */
#cookie-law-info-bar {
	border-top: 5px solid #3d63a5 !important;  
	padding-bottom: 25px !important;
	-webkit-box-shadow: 0px -5px 20px 1px rgba(201,201,201,1);
	-moz-box-shadow: 0px -5px 20px 1px rgba(201,201,201,1);
	box-shadow: 0px -5px 20px 1px rgba(201,201,201,1);
}

.cli_messagebar_head {
	font-weight: 700 !important;
	color: #333333 !important;
}

/* HDE SIDEBAR ON 404 ERROR POSTS 
================================================================= */
/* Take out the divider line between content and sidebar
------------------------------------------------------------------*/
	.error404 #main-content .container:before {
		background: none;
	}

/* Hide Sidebar for 404 pages 
------------------------------------------------------------------*/
.error404  #sidebar {
		display:none;
}


/* ===========================================================================================
   LOGO STYLING
/* ===========================================================================================
/* LOGO - MAKE IT A LITTLE BIGGER ON MOBILES
================================================================= */
@media only screen and (max-width : 980px) {
    #logo { 
    	margin-top: 0px;
	    max-height: 100%;	
    }
} 


/* ===========================================================================================
   HEADER STYLING
/* ===========================================================================================
/* PAINT A 3-PIXEL BORDER ABOVE THE TOP MENU
------------------------------------------------------------------------------*/
#top-header 
	{border-top: 3px solid #cbd1dd;
}

/* ADD A SHADOW BELOW THE MAIN HEADER
================================================================= */
#main-header { 
	-webkit-box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24);
	-moz-box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24);
	box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24);
}

/* Add one to the Fixed Header too
----------------------------------------------------------------- */ 
#main-header.et-fixed-header { 
	-webkit-box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24)!important;
	-moz-box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24)!important;
	box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24)!important;
}

/* PAINT A 10-PIXEL LOGO-BLUE BORDER ABOVE THE TOP MENU ON MOBILES
=================================================================  */
@media all and (max-width: 980px) {
	#main-header {
	border-top: 10px solid #8a9fba !important; /* logo-blue */
	}
}
 

/* ===========================================================================================
   BUTTON STYLING
/* ===========================================================================================
/* SCROLL TO TOP BUTTON COLOUR - NAVY BLUE FROM BY-LINE BAR
================================================================= */
.et_pb_scroll_top.et-pb-icon {
	background: #3c5473;
}

/* WATERMELON BUTTON
================================================================= */
.button-watermelon {
	background-color: #ce5143; /* dark watermelon red */
	border: none;
	border-radius: 4px;
	box-shadow: none;
	color: #fff !important;
	font-weight: bold;
	cursor: pointer;
	padding: 5px 8px;
	width: auto;
}

.button-watermelon:hover {
	background-color: #c73221; /* darker watermelon red */
	color: #fff !important;
	text-decoration: none !important;
	border: 0 !important; 
	padding: 6px 9px;
	font-weight: bold;
}


/* ===========================================================================================
   SECONDARY MENU CUSTOMISATION - TOP-MOST MENU
/* ===========================================================================================
/* CENTRE SECONDARY MENU
================================================================= */
#et-secondary-menu {
	text-align: center;
	float:none;
}
 
.et_vertical_nav #top-header {
	padding-right: 0px;
	margin-left: 0px;
}

/* SECONDARY SUB-MENU - ALIGN LEFT
================================================================= */
/* Align the sub-menu background box to the left
----------------------------------------------------------------- */
 #et-secondary-nav li ul {
    padding: 1em 0;
    position: absolute;
    left: 0;
}
/* Align the sub-menu text to the left
----------------------------------------------------------------- */
#et-secondary-nav li {
    text-align: left !important;
}

/* Sub-menu text size and colouring
----------------------------------------------------------------- */
#et-secondary-nav .sub-menu {
	width: 290px;
}

#et-secondary-nav li li a {
	font-size: 15px !important;
	width: 230px;
	padding-top: 20px !important;
}

/* SECONDARY MENU - ACTIVE BACKGROUND COLOUR - WHITE
================================================================= */
#et-secondary-menu li.current-menu-item > a,
#et-secondary-menu li.current-menu-ancestor > a { 
	background-color: #fff !important;
	color: #5f3b35 !important;  /* menu brown */
}

#et-secondary-menu > ul > li a {
	padding-top: 10px;
	margin-top: -10px;	
	padding-left: 15px;
	padding-right: 15px;
	margin-right: -18px;  /* closes gaps between menu items to 2px */
}

/* Sub-menu active background colour - keep it white on brown
----------------------------------------------------------------- */
#et-secondary-nav li li.current-menu-item > a,
#et-secondary-nav li li.current-menu-ancestor > a {
	background-color: #7e4e46 !important;   /* lighter version of menu brown */
	color: #fff !important;
	font-weight: 700;
}

/* SECONDARY MENU - HOVER TEXT COLOUR - WHITE
================================================================= */
#et-secondary-menu a {
	-webkit-transition-duration: 0.0s;
	transition-duration: 0.0s;
	-webkit-transition-timing-function: cubic-bezier(0,0,0,0);
	transition-timing-function: cubic-bezier(0,0,0,0);
}

#et-secondary-menu a:hover {
	background-color: #fff !important;
	color: #5f3b35 !important;  /* menu brown */ 
	opacity:1 !important; 
	-webkit-transition-duration: 0.0s !important;
	transition-duration: 0.0s !important;
	-webkit-transition-timing-function: cubic-bezier(0,0,0,0);
	transition-timing-function: cubic-bezier(0,0,0,0);
}

/* Sub-menu background colour on hover - keep it white on blue
----------------------------------------------------------------- */
#et-secondary-nav li li a:hover {
	background-color: #7e4e46 !important;   /* lighter version of menu brown */
	color: #ffffff !important;
	opacity:1 !important; 
	font-weight: 700;
/*	text-decoration: underline;	*/
}


/* ===========================================================================================
   MAIN MENU CUSTOMISATION - CALLED 'TOP' MENU IN CSS - THE ONE ALONGSIDE THE LOGO
/* ===========================================================================================
   MAIN (TOP) MENU - HOVER COLOUR BLUE
================================================================= */
#top-menu-nav #top-menu a:hover,
#mobile_menu_slide a:hover { 
	color: #e33a1b !important;  /* dark red */
	opacity:1 !important; 
	-webkit-transition-duration: 0.0s;
	transition-duration: 0.0s;
	-webkit-transition-timing-function: cubic-bezier(0,0,0,0);
	transition-timing-function: cubic-bezier(0,0,0,0);	
}

/* MAIN (TOP) MENU - ANIMATED UNDERLINES ON HOVER 
================================================================= */
/*  Note - had to use Font Awesome icons to work with this - Divi icons clash */

#top-menu li a:before {
	content: "";
	position: absolute;
	z-index: -2;
	left: 0;
	right: 100%;
	bottom: 50%;
	background: #e33a1b; /* *** COLOR OF THE LINE - dark red ***/
	height: 3px; /*** THICKNESS OF THE LINE ***/
	-webkit-transition-property: right;
	transition-property: right;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

#top-menu li a:hover {
	opacity: 1 !important;
}

#top-menu li a:hover:before {
	right: 0;
}

#top-menu li li a:before {
	bottom: 10%;
} 


/* ===========================================================================================
   MOBILE MENU CUSTOMISATION
/* ===========================================================================================
/* MOBILE MENU - HANBURGER LINES IN LOGO-BLUE ON WHITE
=================================================================  */
.mobile_menu_bar:before {
/*	background-color: #184287; */
/*	padding: 2px 2px 2px 2px; */
	color: #184287!important; /* logo blue */
}

/* MOBILE MENU - TURN LIGHT BLUE LINE INTO LOGO-BLUE LINE - DISABLED
================================================================= 
.et_mobile_menu { 
	border-top: 3px solid #184287; 
} */

/* MOBILE MENU - HIGHLIGHT ACTIVE ITEM
================================================================= */
#mobile_menu .current_page_item a {
	background: #184287; /* logo-blue */		
	color: #fff !important;;
}


/* ===========================================================================================
   GRAVITY FORMS CUSTOMSATION
/* ===========================================================================================
/* GRAVITY FORMS - GIVE BOXES ROUNDED CORNERS
================================================================= */
body .gform_wrapper .gform_body .gform_fields .gfield input[type="text"], 
body .gform_wrapper .gform_body .gform_fields .gfield input[type="email"], 
body .gform_wrapper .gform_body .gform_fields .gfield input[type="url"], 
body .gform_wrapper .gform_body .gform_fields .gfield input[type="tel"], 
body .gform_wrapper .gform_body .gform_fields .gfield input[type="password"], 
body .gform_wrapper .gform_body .gform_fields .gfield select, 
body .gform_wrapper .gform_body .gform_fields .gfield textarea {
	background-color: #fff;
	color: #333;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; 
	box-shadow: 1px 1px 3px #d2d2d2; 
}

/* GRAVITY FORMS - REGULAR FORM 'SEND MESSAGE' BUTTON STYLING 
================================================================= */
body .gform_wrapper .gform_footer input[type=submit] { 
	color: #ffffff;
	background: #ce5143; /* watermelon red button */
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 1px;
	float:left; 
/*	margin-left: 10px; */
	height: 35px; 
	min-width: 150px; 
	border: 0;
/*	border: solid 1px #909090; */
	border-radius: 4px;
}

/* Change to darker watermelon red on hover
----------------------------------------------------------------- */
body .gform_wrapper .gform_footer input:hover[type=submit] {
	background: #c73221; /* darker watermelon red */
/*	border: solid 1px #000000; */
	height: 36px; 
	min-width: 151px; 
}

/* WHY DID I PUT THIS HERE? 
================================================================= */
#main-footer .footer-widget h4 {
	margin-top:-20px;
}

/* FOOTER WIDGET SPACING - REDUCE TOP AND BOTTOM MARGINS 
================================================================= */
@media only screen and (min-width : 979px) {
	.footer-widget #text-2.fwidget.et_pb_widget.widget_text,
	.footer-widget #text-3.fwidget.et_pb_widget.widget_text,
	.footer-widget #text-4.fwidget.et_pb_widget.widget_text  {
		margin-top:-20px !important;
		margin-bottom:-30px !important;
	}
}