/*
Theme Name: HPPL Bootstrap Thema
Theme URI: http://digitaleambacht.nl/
Author: Brandskills
Author URI: http://digitaleambacht.nl/
Description: HPPL responsive Bootstrap thema door Brandskills
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hppl
*/

/*** 		Door Mart Vrieze		***/
/***								***/
/*** 			Huisstyle kleur		***/
/***		#0060a9 of 0,96,169		***/ 
 
@import url('https://fonts.googleapis.com/css?family=Open+Sans'); 
@import url('https://fonts.googleapis.com/css?family=Ubuntu');


body {
  background: url("./images/bg/spacer.png");
  padding-top: 54px;
  font-size: 1.1em;
  font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5{
	font-family: 'Ubuntu', sans-serif;
}

a {
	color: #0060a9;
	text-decoration: none;
}

a:hover{
	color: #5eb9ff;
	text-decoration: none;
}

.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
	width: 98%;
}

.wpcf7-submit {
  width: auto !important;
}

.wpcf7-not-valid-tip{
color: #f00;
}

.grecaptcha-badge {
opacity:0 !important;
  visibility: hidden;
}

.contactform-notice{
  font-size: 0.6rem;
  color: #5b5b5b;
}

.brandskills {color: #747c82;}

/** Mobiel **/

@media only screen and (max-width: 500px) {
    body {
        font-size: 1em;
    }
	h1 {font-size: 1.51em;}
	h2 {font-size: 1.41em;}
	h3 {font-size: 1.31em;}
	h4 {font-size: 1.21em;}
	h4 {font-size: 1.1em;}
	section {
	padding: 15px !important;
	}
	.blacktrans-rounded {
	padding: 15px 20px 15px 20px !important;
    background-color: rgba(0,0,0,0.8);
    border-radius: 10px;
	}
	#homelogo {
		max-width: 60%;
		}
	.hr1 {
		width: 50px !important;
		}
	
	.brands {
	padding: 10px !important;
		} 
	.customers {
	padding: 10px !important;
		} 
	.pt-mobile {
		padding-top: 45px !important;
	}
	.slider-mobile {
		padding-right: 0px !important;
		padding-left: 0px !important;
	}

}

/*** Eind mobiel ***/ 



#socialoverlay {
	display: none;
	width: 40px; 
    height: auto;
	padding: 5px;
    position: fixed;  
    left: 0px;
    bottom: 50%;
    background-color: rgba(0,0,0,0.75); 
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
    z-index: 2; 
	cursor: pointer;
}

#socialoverlay img {
	padding-top: 15px;
	max-width: 20px;
	margin-left: 3px;
}

#socialoverlay .last {
	padding-bottom: 15px;
}


.grow {
	 -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
}


.grow:hover {
	transform: scale(1.05);
}

.grow-big {
	 -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
}


.grow-big:hover {
	transform: scale(1.40);
}


.hr1 {
	background-color: #0060a9;
	border: 2px solid #0060a9;
	width: 100px;
}

.hr2 {
	background-color: #0060a9;
	border: 1px solid #0060a9;
	width: 65px;
}

.product-details-button{
  position: absolute;
  width: 100%;
  bottom: 0;
}

.navbar-toggler-icon { 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}
 
.navbg {
	/** background: url("./images/bg/menu.png"); **/
	background-color: white;
	border-bottom: 3px solid #0060a9;
	color: black !important;
}
 
.navbar-light { color: #0060a9 !important;}
 
footer {
	background-color: black;
	color: white;
	/** border-top: 3px solid #0060a9; ***/
}

#spacer {
	height: 200px;
	width: 100%;
}

.product-block-image{
	min-height: 200px;
}

.product-block{
	min-height: 150px;
}

.no-product-image{
	min-height: 200px;
}
 
section {
	padding: 50px;
}
 
.blacktrans-rounded {
	padding: 15px 50px 15px 50px;
    background-color: rgba(0,0,0,0.8);
    border-radius: 10px;
}

.blacktrans-overlay{
	padding: 15px 50px 15px 50px;
    background-color: rgba(0,0,0,0.8);
}


.card-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.card1 {
	background-color: rgba(128,0,128,0.5);
	border: 1.5px dashed #ffbfff;
}


.card2 {
	background-color: rgba(0,96,128,0.5);
	border: 1.5px dashed #b7edff;
}

.card3 {
	background-color: rgba(0,128,30,0.5);
	border: 1.5px dashed #b3ffc5;
}

.bg-orange {
	background-color: black;
	  background: url("./images/bg/1.jpg") no-repeat center center scroll;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-bottom: 3px solid #ff8900;
	
}

.product-image{
	width: 100%;
	height: 175px;
	object-fit: scale-down;
}

.product-image-single{
	width: 100%;
	object-fit: scale-down;
}

.product-text {
	font-size: 0.9rem !important;
}

.bg-purple {
		border-top: 3px solid rgba(128,0,128,1);
	border-bottom: 3px solid rgba(128,0,128,1);
	background-color: black;
	  background: url("./images/bg/2.jpg") no-repeat center center scroll;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	
}

.equipment-img  {
	border: 4px solid white;
}

.bg-blue {
		border-top: 3px solid  rgba(0,96,128,1);
	border-bottom: 3px solid  rgba(0,96,128,1);
	background-color: black;
	  background: url("./images/bg/3.jpg") no-repeat center center scroll;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	
}

.bg-green {
	border-top: 3px solid  rgba(0,128,30,1);
	border-bottom: 3px solid  rgba(0,128,30,1);
	background-color: black;
	  background: url("./images/bg/4.jpg") no-repeat center center scroll;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	
}

.bg-green .hr-green {
	background-color: #00801e;
    border: 2px solid #00801e;
    width: 50px;
}

.white-outline-dashed {
	border: 2px dashed white;
}

.btn-go-top {
  font-size: 75px;

}


@media ( max-width : 768px ) {
 .btn-sm {
	 font-size: 10px !important;
 }
}
@media ( max-width : 992px ) {
   .btn-sm {
	 font-size: 12px !important; 
 }
}
@media ( max-width : 1200px ) {
   .btn-sm {
	 font-size: 14px !important;
 }
}


.bg-blue li {
	margin-bottom: 15px;
}

.bg-contact {
		border-top: 3px solid #0060a9;
	border-bottom: 3px solid #0060a9;
	background-color: black;
	  background: url("./images/bg/map-image.jpg") no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	
}

.brands {
	padding: 15px;
	background-color: #e0e0e0;
	border-bottom: 3px solid  rgba(0,96,128,1);
}

.customers {
	padding: 15px;
	background-color: #e0e0e0;
	border-bottom: 3px solid  rgba(0,128,30,1);
}

.carousel-item {
  height: 65vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#portfolio {
	border-bottom: 3px solid rgba(128,0,128,1);
}


.portfolio-box {
  position: relative;
  display: block;
  max-width: 650px;
  margin: 0 auto; }
  .portfolio-box .portfolio-box-caption {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    background: rgba(128,0,128, 0.9);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s; }
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
      position: absolute;
      top: 50%;
      width: 100%;
      transform: translateY(-50%);
      text-align: center; }
      .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
      .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
        padding: 0 15px;
        font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; }
      .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase; }
      .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
        font-size: 18px; }
  .portfolio-box:hover .portfolio-box-caption {
    opacity: 1; }
  .portfolio-box:focus {
    outline: none; }
  @media (min-width: 768px) {
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
      font-size: 3em; }
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
      font-size: 22px; } }