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

/* =========================================================================================== 
   JACKY WORLDWIDE
/*

/* =========================================================================================== */
/* GENERAL STYLING */

/* Temporary fix for parallax in Firefox
================================================================= */
.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
    -webkit-transform: none !important;
}

/* Paint a 3-pixel red border above the top menu
================================================================= */
#top-header 
	{border-top: 2px solid #e30d76;
}

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

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

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



/* IMAGE BULLET
================================================================= */
.bullet-pink-image {
	list-style-image: url("https://t47.co.za/wp-content/uploads/2018/06/bullet-pink.png");
	padding-left: 10px;
	margin-left: 20px;
}





/* =========================================================================================== */
/* BUTTON STYLES */

/* SCROLL TO TOP BUTTON COLOUR - MENU BLUE
================================================================= */
.et_pb_scroll_top.et-pb-icon {
/*	background: #3393e6;   /* Blue used in primary menu Home button */
	background: #6bc2d8;   /* logo blue */
}

/* PINK BUTTON
================================================================= */
.button-pink {
	background-color: #2269b7; /* pink */
	border: 2px solid #2269b7; /* pink */
/*	border-radius: 4px; */
	box-shadow: none;
	color: #fff !important;
	font-weight: bold;
	cursor: pointer;
	padding: 5px 8px;
	width: auto;
}

.button-pink:hover {
	background-color: #fff; /* white */
	color: #2269b7 !important; /* pink text */
	text-decoration: none !important;
}

/* BLACK BUTTON
================================================================= */
.button-black {
	background-color: #000; /* black */
	border: 2px solid #000; /* black */
/*	border-radius: 4px; */
	box-shadow: none;
	color: #fff !important;
	font-weight: bold;
	cursor: pointer;
	padding: 5px 8px;
	width: auto;
}

.button-black:hover {
	background-color: #fff; /* white */
	color: #000 !important; /* black text */
	text-decoration: none !important;
}








/* =========================================================================================== */
/* 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 6-PIXEL PINK BORDER ABOVE THE TOP MENU ON MOBILES
=================================================================  */
@media all and (max-width: 980px) {
	#main-header {
	border-top: 5px solid #e30d76 !important; /* pink line */
	}
}

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















/* =========================================================================================== */
/* 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 MENU - Hover white underline
================================================================= */
#et-secondary-menu > ul > li > a:hover,
.et-social-icons a:hover {
	color: #fff;
	text-decoration: underline; 
	opacity: 1.0; 
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out; 
}






/* =========================================================================================== */
/* PRIMARY MENU CUSTOMISATION - LOWER MENU WITH LOGO */

/* PRIMARY MENU - HOVER COLOUR WHITE
================================================================= */
#top-menu-nav #top-menu a:hover,
#mobile_menu_slide a:hover { 
	color: #fff !important;
	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);	
}




/* PRIMARY MENU - BLUE button-type background - First two items
================================================================= */
/*.home-menu-item-background {
	border-radius: 0px;
} */

.home-menu-item-background a {
	color: #fff !important;
}

li.home-menu-item-background {
/*	background-color:#3393e6; /* blue */
	background: #6bc2d8; /* logo blue */
	font-weight: 700; 
    text-transform: uppercase; 
    text-align: center; 
    padding: 12px 17px 10px 17px !important;
	margin-right: 10px !important;
    border-radius: 18px 0px 18px 18px;
	margin-bottom: 20px;
}	

/* Primary Blue Menu Item Hover - background colour change to darker blue
----------------------------------------------------------------- */
li.home-menu-item-background:hover {
	background: #09a5cc;  /* darker blue */
	border-radius: 18px 18px 18px 18px;
}

 .home-menu-item-background:hover a {
	color: #fff !important;
}

/* Primary Blue Height Setting - Desktop & Tablets
----------------------------------------------------------------- */
@media only screen and (min-width : 981px) {
	li.home-menu-item-background {height: 40px;}
}






/* PRIMARY MENU - PINK button-type background - Contact Us item
================================================================= */
/*.contact-menu-item-background {
	border-radius: 0px;
} */

.contact-menu-item-background a {
	color: #fff !important;
}

li.contact-menu-item-background {
	background-color:#e30d76; 
    font-weight: 700; 
    text-transform: uppercase; 
    text-align: center; 
    padding: 12px 13px 10px 10px !important;
	margin-right: 10px !important;
    border-radius: 18px 18px 18px 0px;
	margin-bottom: 20px;
}	

/* Primary ink Menu Item Hover - background colour change to lighter pink
----------------------------------------------------------------- */
li.contact-menu-item-background:hover {
	background: #ff2892; /* lighter pink */
    border-radius: 18px 18px 18px 18px;	
}

/* Primary Pink Height Setting - Desktop & Tablets
----------------------------------------------------------------- */
@media only screen and (min-width : 981px) {
	li.contact-menu-item-background {height: 40px;}
}








/* =========================================================================================== */
/* GRAVITY FORMS CUSTOMSATION */

/* GRAVITY FORMS - REMOVE LABEL ON FIELDS USING PLACEHOLDER 
================================================================= */
.gform_wrapper .top_label .gfield_label,
.gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label {	
	display: none !important;
}
/* GRAVITY FORMS - FIELD STYLING
================================================================= */
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="tel"], 
body .gform_wrapper .gform_body .gform_fields .gfield textarea {
	background: #fff;
	border: none;
	border-radius: 0;
	color: #333 !important;
	padding: 10px 15px !important;
}

/* GRAVITY FORMS - 'SEND MESSAGE' BUTTON STYLING 
================================================================= */
body .gform_wrapper .gform_footer input[type=submit] { 
	width: 96.5%;
	color: #fff;
	background: #e30d76; /* pink button */
	border: solid 2px #e30d76; /* pink border */
	font-family: Nunito Sans, Arial, Sans Serif;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 12px 23px; 
	cursor: pointer;
}

/* Hover: Change to light pink background and border
----------------------------------------------------------------- */
body .gform_wrapper .gform_footer input:hover[type=submit] {
	background: #ff2892; /* lighter pink */
	border: solid 2px #ff2892; /* pink border */
}


/* ======= REMOVE THIS IF THERE IS NO FOOTER ========== */


/* REDUCE THE GAP BETWEEN THE BOTTOM OF THE PAGE AND FOOTER 
================================================================= */
#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,
	.footer-widget #text-5.fwidget.et_pb_widget.widget_text  { 
		margin-top:-20px !important;
		margin-bottom:-50px !important;
	}
}