/*
 Theme Name:     Divi Child
 Theme URI:      
 Description:   
 Author:         Owl Media
 Author URI:     https://www.owlmedia.co.za
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

.image-map-background canvas{
  width: 100%;
  height: 800px !important;
}


* {margin: 0; padding: 0}
body {background: #000;}
canvas {display: block;}

#image-map-background-row{
  position: absolute;
  top: 0;
  z-index: 0
}

canvas {
  display: block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  box-sizing: border-box
}

#main-content p, #main-content h1 {
  text-align: left !important;
}
#purpose-row {
  max-width: 40% !important;
}

/* GENERAL */

body, p, h1, h2, h3, h4, li, ul, a{
  font-family: Elza;
}
.gen-text-mod p{
font-weight: normal;
font-size: 15px;
line-height: 22px;
color: #707070;

}

.gen-text-mod h2{
font-weight: 300;
font-size: 25px;
line-height: 29px;
text-align: center;
color: #0171bc;
margin-bottom: 8px

}

#scroll-paragarph{
	height: 300px !important;
	overflow: auto
}

/* ____________________________________ */


/* DOWNLOADS PAGE */

.blue-btn{
  background-color: #0171bc;
  color: #fff !important;
  border: 1px solid #0171bc
}

.btn{ 
  padding: 10px 20px !important;
  border-radius: 5px;
  border: 1px solid inherit
}

#menu-main-menu .blue-btn a{
  color: #fff !important;
}


#menu-main-menu a{
  padding-bottom: 0
}

#menu-main-menu li{
  align-items: center
}

#menu-main-menu .blue-btn{
  margin-left: 10px
}


.card-body .media{
  flex-flow: column
}

.card-body .media .ml-3{
  margin: 0 !important;
   width: 100%;
}

.card-body .media .ml-3 .btn{
  width: 100%;
  
}

.card-body .text-muted .fas.fas{
  width: unset;
 padding-top: 10px !important;
  padding-bottom: 15px !important;
}

.card{
border-radius: 10px !important;;
  box-shadow: 0px 13px 50px rgba(0, 0, 0, 0.08);
  border: unset !important;
}

.card h3 a{
  font-size: 17px;
  line-height: 120%;
  color: #373570;
}






/* _____________________ */



#sub-page-main-heading h1{
  font-weight: 300;
  font-size: 25px;
  line-height: 29px;
  text-align: center;
  color: #0171bc;
  margin-bottom: 8px;
}

#main-heading-mod h1{
font-weight: 300;
  font-size: 25px;
  line-height: 29px;
  text-align: center;
  color: #0171bc;
  margin-bottom: 8px;

}


.imp-tooltip{
background: rgba(255, 255, 255, 0.95) !important;

}

.imp-tooltip h3{
  font-family: Elza !important;
font-weight: 600 !important;
font-size: 20px !important;
line-height: 29px !important;
color: #0171bc !important;
}

.imp-tooltip p{
  font-family: Elza !important;
font-weight: normal !important;
font-size: 15px !important;
line-height: 22px !important;
color: #707070 !important;
}

.imp-tooltip{
  width: 100% !important;
  max-width: 700px
}


.call-to-action-mod h3{
  font-family: "Helvetica Neue";
font-weight: 300;
font-size: 25px;
line-height: 37px;
color: #0171BC

}

.call-to-action-mod h3 strong{
  color: #373570
}

.copy-right-mod{
  font-weight: 400
}


#footer-row{
  max-width: 856px;
border-radius: 38px;
background: #fff;
box-shadow: 0px 13px 50px rgba(0, 0, 0, 0.08);

}




@media screen and (max-width: 660px){
  .et_pb_row{
    width: 90%
  }
  
}

#hero-row{
width: 100%
}

@media screen and (max-width: 980px){
  #hero-row{
    height: 200px
  }
  
}

@media screen and (max-width: 680px){
  #hero-row{
    height: 120px
  }

  
}
@media screen and (max-width: 1300px){
  #image-map-section:after{
    left: 37%
  }
  #image-map-section:before{
    right:37%
  }
}

@media screen and (max-width: 1000px){
   #image-map-section:after{
    left: 32%
  }
  #image-map-section:before{
    right: 32%
  }
	
	    .image-map-background canvas{
  height: 585px !important;
}
}

@media screen and (max-width: 900px){
	
	      .image-map-background canvas{
  height: 495px !important;
	}
	
   #image-map-section:after{
    left: 25%
  }
  #image-map-section:before{
    right: 25%
  }
}

@media screen and (max-width: 750px){
   #image-map-section:after{
    left:20%
  }
  #image-map-section:before{
    right: 20%
  }
}

@media screen and (max-width: 680px){
	
	      .image-map-background canvas{
  height: 435px !important; 
	}
	
   #image-map-section:after{
    left:15%
  }
  #image-map-section:before{
    right: 15%
  }
}

@media screen and (max-width: 680px){
   #image-map-section:after{
    left:10%
  }
  #image-map-section:before{
    right: 10%
  }
}

@media screen and (max-width: 600px){
   #image-map-section:after{
    left:-20%;
  }
  #image-map-section:before{
    right:-20%
  }
}

@media screen and (max-width: 500px){
   #image-map-section:after{
    left:-35%;
  }
  #image-map-section:before{
    right:-35%
  }
}