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

/* CONTACT */

#heroSlider.hero-thank-slider .et_pb_container{
 margin: auto !important;
}

.contact-form{
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px;
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid grey;
  padding-top: 40px !important;
}

.contact-form h3{
  color: #fff;
  font-weight: 700;
  padding-bottom: 5px
}

.contact-form p{
  color: lightgrey;
  margin-bottom: 20px
}

.contact-form input{
 background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid grey !important;
  border-radius: 10px;
  color: #fff
}

.contact-form{
  color: #fff !important;
}

#heroSlider .et_pb_container{
  margin-left: 0
}

@media screen and (max-width: 980px){
  
  #heroSlider {
    max-height: 100% !important;;
 
  }
  
  #heroSlider .et_pb_slide{
    height: 780px !important;
      
  }
  
  #contact{
    width: 100%;
    max-width: 90%;
    margin: auto !important;;
    left: 5%;
    top: 200px
  }
  
  #heroSlider .et_pb_slide_description{
    padding-top: 0
  }
  
}

.whats-mod a{
  background-color: #fff;
  padding-top: 40px;
  border-radius: 10px;
}

/* __________________________________ */

/* GENERAL */

.headerMenu{
 display: flex;
  justify-content: right;
}
#headerRow{
  display: flex !important;
  align-items: center
}
.limmitIntroTxt{
  overflow: hidden
}

.productModule{
  border-radius: 10px;
  box-shadow: 0px 59px 50px rgba(0, 0, 0, 0.1);
  overflow: hidden;

}

.productModule .containerButton a{
  background-color: #E41E26;
  border-radius: 100px;
  color: #fff;
  width: 100% !important;
  padding-top: 5px;
  padding-bottom: 5px;
  display: block;
	font-weight: 600;
	 transition: all 0.2s
}
.productModule .containerButton a:hover{
  background-color: #000000;
  transition: all 0.2s
}

.productModule .containerButton{
    text-align: center;
 
  margin-top: 30px
 
}

.productModule .containerContent{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  padding-bottom: 30px
}

.readMoreLess{
  color:#919191;
  font-size: 14px !important;
 
}

.productModule h3{
  color: #838588;
  font-family: "cooper-black-std", serif;
  font-size: 20px;
  font-style: italic
}

.productModule  .containerContent p{
  font-family: Helvetica Neue;
  font-size: 14px !important;
  font-weight: 400;
  color: #000000;
  line-height: 120%
}
#securityGatesRow .et_pb_column{
  margin-top: -170px
}

#louvre-shutters-mod .et_pb_text_inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  
 
}
#louvre-shutters-mod .containerContent {
  max-width: 530px;
  
}

#louvre-shutters-mod{
    max-width: 840px;
  line-height: 0px !important;
  margin:auto
}
#louvre-shutters-mod.productModule .containerContent{
  padding: 20px
}
#louvre-shutters-mod .containerButton a{
  line-height: 1.7em
}
  
.productModule .containerImage img{
  max-height: 250px;
  width: 100%;
  object-fit:  cover
}

#louvre-shutters-mod.productModule .containerImage img{
  max-height: 100%;
}


/* #heroSlider .et_pb_slider_container_inner{
  position: absolute;
  bottom: 0
} */

#heroSlider .et_pb_slide_description{
  padding-bottom: 40px
}

.breadCrumbMod .et_pb_text_inner{
  display: flex;
  max-width: 900px;
  width: 100%;
  justify-content: space-between;
  margin: auto
}

.breadCrumbMod a{
  background-color: #838588;
  padding: 10px 25px;
  border-radius: 100px;
  color: #fff;
  transition: all 0.2s
}
.breadCrumbMod a:hover{
  background-color: #E41E26;
  transition: all 0.2s
  
}
.generalTextBox h3{
  font-family: helvetica neue;
  color: #000000;
  font-size: 20px;
	 line-height: 120%
}

.greenBulets li{
  list-style-image: url(/wp-content/uploads/Bulet-tick.svg);
  line-height: 120%;
  margin-bottom: 20px;
  color: #000000;
  font-size: 18px
}
.greenBulets li span{
  font-size: 15px
}
.generalTextBox h2{
  color: #E41E26;
  font-size: 25px;
   text-transform: uppercase
}

#customMod h3{
  max-width: 712px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 40px
}

#secondCol{
  margin-left: 60px !important;
}

.gform_title{
  display: none
}

#contactFormRow{
max-width: 500px;
  border-radius: 10px;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.08);
  padding: 25px 40px 10px 40px;
}

.contactDetails a{
  color:#000000;
  margin-left: 10px;
    transition: all 0.2s;
  font-size: 15px;
  font-family: helvetica neue
}

.contactDetails a:hover{
  margin-left: 15px;
  transition: all 0.2s
}
.contactDetails p{
  padding-bottom: 0
}
.contactDetails img{
  vertical-align: middle
}

.contactFormLogo{
  margin-top: 30px;
  margin-bottom: 60px !important;
}

.socialMediaMod{
  border-top: 1px solid #EFEFEF;
  border-bottom: 1px solid #EFEFEF;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-top: 60px
}
.socialMediaMod img{
  vertical-align: middle;
  margin-bottom: -15px;
  
}
.socialMediaMod img:first-of-type{
  margin-left: 15px
}

.contactFormHead h3{
  font-family: helvetica neue;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 18px;
  color: #000000
}
.contactFormHead p{
  font-family: helvetica neue;
  color: #000000;
  line-height: 120%;
  font-size: 15px
}
#contactFormRow .gfield_label{
  font-family: helvetica neue;
  color: #838588;
  font-size: 15px
}

#contactFormRow input{
  border: unset;
  border-bottom: 1px solid #E0E0E0;
  font-size: 14px
}

#contactFormRow #input_1_4{
  padding-left: 0 !important;
}

#gform_submit_button_1{
  background-color: #000000;
  color: #fff;
  border-radius: 100px;
  padding: 10px;
  font-family: helvetica neue;
  font-size: 15px;
  font-weight:  600;
  transition: all 0.2s
}
#gform_submit_button_1:hover{
  background-color: #e41e26;
  transition: all 0.2s;
  cursor: pointer
}
.productModule p{
  line-height: 140% !important;
}
.socialMediaMod a:last-of-type{
  margin-left: -15px
}

.footerIcons .et_pb_code_inner {
  max-width: 800px;
  margin: auto;
  text-align: center;
}
.footerIcons .et_pb_code_inner img {
  margin-left: 5px
}

@media screen and (max-width: 980px){
   .mainHeadMod strong{
    display: block;
    margin-bottom: 5px
  }
	
  #heroSlider {
    max-height: 300px;
    height: 100% !important;
  }
  #heroSlider .et_pb_container{
    height: 100% !important;
    max-height: 300px
  }
  #heroSlider h1{
    font-size: 1.5em !important;
    max-width: 280px;
    margin: auto

  }
  #heroSloganSection h3{
    font-size: 15px
 
  }
	  
  #breadcrumbSection, #headerSection{
    display: none !important
  
}
	  #secondCol{
    margin-left: unset !important;
    margin-top: -45px
  }
	#securityGatesRow .et_pb_column, #securityGatesRow .et_pb_text_9, #securityGatesRow .et_pb_text_11, #securityGatesRow .et_pb_text_20, #securityGatesRow .et_pb_text_21, #securityGatesRow .et_pb_text_22 {
  margin-top: 0px !important;
}

#securityGatesRow .productModule:first-of-type{
  margin-top: -170px
}
	#louvre-shutters-mod .et_pb_text_inner{
  display: block;

}
#louvre-shutters-mod .containerContent {
  max-width: 100%;
  
}

#louvre-shutters-mod{
    max-width: 100%;
  line-height: 0px !important;
  margin:auto
}

#louvre-shutters-mod.productModule .containerImage img {
  max-height: 250px
}
	.page-id-266 #contactFormRow .contactFormLogo .et_pb_text_inner{
  text-align: center;
}
.page-id-266 #contactFormRow .et_pb_column_1_2{
  margin-bottom: 0
}

.page-id-266 .contactDetails{
  margin-top: 0 !important;
  margin-bottom: 50px !important;
  text-align: center
}
 

}

@media screen and (max-width: 570px){
	
	.footerIcons img {
  max-width: 70px
	}
	
  .contentSection .et_pb_row{
  width: 90%
}
} 
.mobmenu-content a{
  font-family: Helvetica Neue !important;
}