/*
 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
*/
/* =========================================================================================== 
   INSITE TOOLKITS
/* =========================================================================================== */
/* GENERAL STYLING */

/* FIX WORDPRESS 5.7 SPACING PROBLEM
================================================================== */
body p:empty:before {
    content: none;
}

/* LOGO SIZE CONTROL ======================================================== */
/* Keep logo from getting too small on tablets 
---------------------------------------------------------------------------- */
#logo {
    max-height: 90%;
    margin-top: 0px; 
}


@media only screen and ( max-width: 1100px ) {
    #logo { 
    	margin-top: 0px;
    	max-height: 80%;
    }
} 

/* SHADOW BELOW THE MAIN HEADER  ======================================================== */
/*--------Header Drop Shadow-----*/
.home #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);
 }

/*--------FIXED Header Drop Shadow-----*/
.home #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;
 }


/* SCROLL TO TOP BUTTON  ======================================================== */
/* Scroll to top button colour 
---------------------------------------------------------------------------- */
.et_pb_scroll_top.et-pb-icon {
/*	background: #117aff none repeat scroll 0 0; ------- where did I get this from? */
	background: #117aff;
}



/* IMAGE HOVER EFFECTS ======================================================== */

/* Image Hover - Grow shadow
------------------------------------------------------------------------------ */
.img-hover-effect {
	padding: 10px 20px 25px 20px;
	background-color: #f9f9f9;
	border: solid 2px #d1d1d1;
	box-shadow: 3px 3px 4px #d1d1d1;
}

.img-hover-effect:hover {
	background-color: #fcfcfc;
	box-shadow: 9px 9px 12px #999999;
	border: solid 2px #b1b1b1 !important;
}


/* Woocommerce Product Item Hover - Grow shadow
------------------------------------------------------------------------------ */
.woocommerce ul.products li.product {
	padding: 10px 20px 25px 20px;
	background-color: #f9f9f9;
	border: solid 2px #d1d1d1;
	box-shadow: 3px 3px 4px #d1d1d1;
}

.woocommerce ul.products li.product:hover {
	background-color: #fcfcfc;
	box-shadow: 9px 9px 12px #999999;
	border: solid 2px #b1b1b1 !important;
}

/* MENU ITEMS ================================================================ */


/* MAIN HEADER BOTTOM BORDER SHADOW
------------------------------------------------------------------------------ 
#main-header {
	-webkit-box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0.1);
} */

/* Original code ----------
#main-header {
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
} /*


/* MENU ====================================================================== */
/* Menu hover colors
------------------------------------------------------------------------------ 
#top-menu-nav #top-menu a:hover,
#mobile_menu_slide a:hover { 
    color: #ffffff !important;  -- WHITE -- 
    opacity:1 !important;
} 
*/

/* Menu hover colors - white underlined (top menu) and black for main menu --- this is all confusing and needs to be sorted out
------------------------------------------------------------------------------ */
#top-menu-nav > ul > li > a:hover,
#et-secondary-menu > ul > li > a:hover,
#et-info-email:hover,
.et-social-icons a:hover {
	color: #ffffff;      /* -- WHITE -- */
	text-decoration: underline;
	opacity: 1.0; 
	font-weight: bold;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out; 
}
#top-menu-nav #top-menu a:hover { 
	color: #117aff !important; /* ================== Black for now */
	opacity: 1.0; 
	text-decoration: none;
}

#top-menu li li a:hover {
	color: red !important; 
	background-color: #ffffff;      /* -- WHITE -- */
	opacity: 1.0; 
	font-weight: bold;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out; 
}

#top-menu li li a  {
	font-size: 14px;
	line-height: 1.4em;
}

/* MENU UNDERLINE ON HOVER
------------------------------------------------------------ */ 
#top-menu li a:hover:before {
	-webkit-transform: translateY(14px);
	transform: translateY(14px);
	opacity: 1;
}
 
/* Determine underline properties -------------------------- */
#top-menu li a:before {
	content: '';
	position: absolute;
	top: 5px;
	left: 0;
	background: #117aff; /* --- BLUE Underline colour --- */
	width: 100%;
	height: 3px;
	-webkit-transform: translateY(24px);
	transform: translateY(24px);
	opacity: 0;
	/* transition: 0.3s ease;  - makes underline hop */
}


/* FOOTER WIDGETS & BOTTOM BAR LINK COLOURS ================================= */
/* Footer links hover colour - white underlined
------------------------------------------------------------------------------*/
#footer-info a:hover,
#footer-widgets .footer-widget a:hover  {
	color: #53e2eb ;
	text-decoration: underline;
	font-weight: bold; 
	opacity: 1.0
}


/* MISCELLANEOUS ITEMS ======================================================= */

/* SUPERSCRIPT AND SUBSCRIPT CORRECTING CSS
------------------------------------------------------------------------------ */
sup {font-size: 0.7em; vertical-align: super; bottom: 0}
sub {font-size: 0.7em;}


/* CHANGE LINKS-HOVER COLOUR - DISABLE FOR NOW
------------------------------------------------------------------------------ */
/*  Old color: #e2e2e2; 
    Old color: #d6031c;    previous red
	Old color: #b82626;    deeper red */

a:hover {
	color: #2468B4;  /* -- deeper blue -- */
	text-decoration: none;
} 

/* SHOPPING CART HOVER IN SECONDARY MENU 
------------------------------------------------------------------------------ */
.et-cart-info:hover  {
	text-decoration: underline !important;
	font-weight: bold;
}

/* UL ENTRY-CONTENT DEFAULT
------------------------------------------------------------------------------ */
.entry-content ul li {
	list-style-type: square;
    padding-left: 10px;
    margin-bottom: 10px;
    line-height: 1.3em !important;
}


/*  BULLET IMAGE - RED SQUARE 
------------------------------------------------------------------------------*/
.red-bullet  {
	list-style-image: url("/wp-content/uploads/2017/06/bullet.png"); 
}


/* RED TICK ICON BULLET
------------------------------------------------------------------------------*/
ul.red_tick li {
	list-style: none;
	list-style-position: outside;
}

ul.red_tick li:before {
	font-family: 'ETmodules';
	content: "\4e";
	font-size: 16px;
	font-weight: 700;
	color: red;
	padding-right: 8px;
	margin-left: -26px
}

/* RED BOX - WHITE WRITING ON RED
------------------------------------------------------------------------------*/
.box-red {
	background-color: #e02b20;
	border: none;
	box-shadow: 5px 5px 10px #444444;
	padding: 5px 8px;
	width: auto;
}


/* RED BUTTON
------------------------------------------------------------------------------*/
.button-red {
	background-color: #e02b20;
/*	background-color: #b82626; */
/*	background-color: #eb1e23; */
	border: none;
	border-radius: 5px;
	box-shadow: none;
	color: #000000;
	cursor: pointer;
	padding: 5px 8px;
	width: auto;
}

.button-red:hover {
	background-color: #f63226;
/*	background-color: #eb1e23; */
/*	background-color: #fd2227; */
	color: #fff;
	text-decoration: none !important;
	font-weight: bold;
}


/* BLUE BUTTON
------------------------------------------------------------------------------*/
.button-blue {
	background-color: #4d70d7;
	border: none;
	border-radius: 5px;
	box-shadow: none;
	color: #000000;
	cursor: pointer;
	padding: 5px 8px;
	width: auto;
}

.button-blue:hover {
	background-color: #5277e2;
	color: #fff;
	text-decoration: none !important;
	font-weight: bold;
}


/* DRAW A HORIZONTAL LINE
------------------------------------------------------------*/ 
div.hr  {
	background: #4D70D7  no-repeat scroll center;
	width:100%;
	height: 4px;
}

div.hr hr {
	display: none;
}


/* IMAGE EFFECTS
============================================================================================== */
/* IMAGE HOVER EFFECT - INCREASE SHADOW, DARKEN BORDER
------------------------------------------------------------------------------------------ */
.img-hover-effect {
	transform: translateZ(0);
	transition-duration: 0.3s;
	transition-property: transform;
}

.img-hover-effect:hover {
	transform: scale(1.03);
	box-shadow: 3px 3px 7px #999999;
	border-color: #fafafa;
}


/* VERTICAL CENTRE ALIGNMENT ====================================== MIGHT USE*/

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


/* COLLAPSE-O-MATIC STYLING
============================================================================================== */
/* Collapse-o-Matic margins and padding -- disabled in this theme
----------------------------------------------------------------- 
.collapseomatic {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.collapseomatic_content {
	border: 0 0 0 0;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}  */


/* Collapse-o-Matic styling  
------------------------------------------------------------------------------------------ */
.collapseomatic {
/*	Background-color: #d5d5d5; */
	Background-color: #e1e1e1; 
	font-family: Calibri,Helvetica,sans-serif;
/*	color: #046a9f; */
	color: #2468A5;
/*	font-size: 16px; */
	font-size: 18px;
/*	padding: 0px 0px 0 30px; */
	padding: 5px 0px 5px 30px;
	text-decoration: none;
	margin-bottom: -15px;
}

.collapseomatic_content {
/*	Background-color: #f3f3f3; */
	Background-color: #ffffff;
	margin: 0 0 0 0;
	border-style: none solid none solid;
	border-width: 30px;
/*	border-color: #f3f3f3; */
	border-color: #ffffff;
	padding: 10px 0 0 0;
}


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


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

/* Styling of the SUBMIT BUTTON on Gravity Forms
------------------------------------------------------------------------------------------ */
body .gform_wrapper .gform_footer input[type=submit] { 
/*	color: #153F65; ..... navy blue */
/*	color: #246db0; ..... light blue*/
	color: #ffffff;
/*	background: #ffc46d; ..... sandy */
	background: #e02b20; /* .. red */
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 1px;
	float:left; 
	margin-left: 10px; 
	height: 35px; 
	min-width: 150px; 
	border: none;
	border-radius: 5px;
}

body .gform_wrapper .gform_footer input:hover[type=submit] {
/*	background: #ffc46d; ..... sandy */
	background: #f63226; /* .. lighter red */
/*	border: solid 1px #153F65;  ..... navy blue */
	border: solid 1px #000000;
/*	box-shadow: 3px 3px 7px #999999; */
/*	color: #153F65; ..... navy blue */

}


/* GIVE GRAVITY FORM BOXES ROUNDED CORERS
------------------------------------------------------------------------------------------ */

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: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px; 
	box-shadow: 1px 1px 3px #d2d2d2;
}


/* MAP OVERLAY TO BLOCK POINTER EVENTS 
====================================================================================================== */
/* Place an overlay of maps to prevent pointer events getting to them.  A click will activate the map
------------------------------------------------------------------------------------------------------ */
.map {
	width:100%;
	height:600px;	
}


.map-wrap {
	position:relative; 
}
	
.overlay {
	width:100%;
	min-height:600px; 
	position:absolute; 
	top:0;
}


/* SIMULATED iPAD / TABLET ON THE FRONT PAGE 
========================================================================================== */
/* Tablet outer appearance 
------------------------------------------------------------------------------------------ */

*{ box-sizing: border-box; }
 
.tablet {
	position: relative;
	background: #1c1c1c;
	width: 100%;
	height: 600px;
	max-width: 450px;
	max-height: 600px;
	margin: 0 auto 0;
	padding: 30px 24px 30px 24px;
	border-radius: 18px;
	border-top:2px solid #3C3F45;
	border-right:2px solid #202227;
	border-bottom:2px solid #202227;
	border-left:2px solid #3C3F45;
	box-shadow:11px 11px 24px rgba(0,0,0,0.5);
}
 
/* Tablet inner appearance
---------------------------------------------------------------- */ 
/*@media only screen and (max-width:768px) {
		height: 400px;
} */
 
.tablet .tab {
	background: #f9f9f9;
	color: black;
	padding: 50px 40px 50px 40px;
	overflow: scroll;
	height: 100%;
	text-align: justify;
}


/* Table Title appearance 
---------------------------------------------------------------- */ 
.tablet .tab h1 {
/* 	font-size: 30px; >>>>>>>>>>>>>>>> */
	font-family: "Dancing script";
	font-weight: bold;
	font-style: italic;
	text-align: center;
	margin: 0 0 20px 0;
	padding: 4px;
	font-size: 25px;
}
 
/* Tablet main text appearance
---------------------------------------------------------------- */ 
.tablet .tab p {
	margin: 0 0 20px 0;
	font-family: "Arial";
	font-size: 13px;
}

/* Tablet Bottom Footer line appearance
------------------------------------------------------------------------------------------ */
footer {
	background: #e9e9e9;
	margin-bottom: 8px;
}


/* FOOTER - REVEAL AS A CURTAIN LIFTING
========================================================================================== */
/* Need to set the height of the footer for each site individually in this code
------------------------------------------------------------------------------------------ */
/* Divi fixed position footer by yatesdesign.com.au */

/* @media only screen and ( min-width: 980px ) {

	#main-content {
		margin-bottom: 365px; This may to be adjusted depending on the content of your footer
	}
 
	#main-footer {
		position: fixed;
		z-index: -1;
		height: 365px; This may to be adjusted depending on the content of your footer
		width: 100%;
		bottom: 0;
	}
 
	#footer-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		padding: 10px 0;
	}
 
	#footer-info, #footer-info a {
		padding: 0;
	}
 
	#main-footer .container {
		height: 100%;
	}
 
	#footer-widgets {
		position: absolute;
		bottom: 15px; This may to be adjusted depending on the content of your footer 
	}
 }
*/ 


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