@charset "UTF-8";
/* CSS Document */

html {height:100%;}
body {height:100%;font-family: 'Ubuntu', sans-serif;color:#858389;}

.rood {color:#fc3118;}
.grijs {color:#858389;}
.wit {color:#fff;}
.bg-rood {background-color:#fc3118;}

.transform {-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s; }

.logo {width: 250px;}

.top {text-align:right;padding:5px 15px;font-size:14px;color:#858389;background: rgb(255,255,255);background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(224,224,224,1) 100%);}
.top i {color:#fc3118;margin:0 5px;}
.top a {color:#858389;}
.top a:hover {color:#fc3118;}

a {color:#fc3118}
a:hover {color:#858389;;text-decoration: none;}

a.wit {color:#fff;opacity:1;display: block;}
a.wit:hover {opacity:0.8;}

h1 {font-weight: 300;}

header {background-color:#fff;width: 100%;position: fixed;top: 0;left: 0;z-index: 999; }
.nav-up {top: -150px;}
header #logo img { display: inline-block;height: 130px;margin-top:-30px;margin-left:15px;}
header.smaller #logo img {height: 75px; }
.bovenruimte {margin-top:145px;}

.card-img {background-size:cover;background-position:center; width: 100%;height:250px;}
.card-body {min-height: 200px;}
.aanbod {margin:0 auto;border:3px solid #fff;width: 200px;height:200px;background-size:cover;background-position:center center}
.aanbod-title {margin-top:15px;}

.contact-bg {background-color:#eee;background-image:url(../images/gezichten.png);background-size:200px;background-position:bottom right;background-repeat:no-repeat;}

.grow {display:inline-block;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}
.grow:hover {transform: scale(1.1);}


@media (max-width:1150px) {
.nav-up {top: -120px;}
header #logo img { height: 80px;}
header.smaller #logo img {height: 65px; }
.bovenruimte {margin-top:95px;}
.card-img {height:180px;}
}

@media (max-width:992px) {
.card-img {height:130px;}
}
@media (max-width:767px) {
.top {display:none;}
.nav-up {top: -100px;}
header #logo img { height: 70px;margin-top:0px;}
header.smaller #logo img {height: 50px; }	
.card-img {width: 90px; height:60px;float:left;margin-right:15px}
.card-title {font-size:1rem;}	
.card {display:block;background-color:transparent;border:0px;margin-bottom:15px;}
.card-body {min-height: 80px;}
.aanbod {width: 150px;height:150px;}
.aanbod-title {font-size:1rem;}
.contact-bg {background-image:url();}
	h1{font-size: 1.8rem;}
}
@media (max-width:500px) {
header #logo img { height: 60px;margin-top:0px;}
header.smaller #logo img {height: 30px; }	
	h1{font-size: 1.5rem;}
}



.btn-outline-primary {color: #fc3118;border-color: #fc3118;}
.btn-outline-primary:hover {color: #fff;background-color: #fc3118;border-color: #fc3118;}
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {color: #fff;background-color: #fc3118;border-color: #fc3118;}
.btn-outline-primary.focus, .btn-outline-primary:focus {box-shadow: 0 0 0 0.2rem rgba(252,49,24,.5);}
.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-primary.dropdown-toggle:focus {box-shadow: 0 0 0 0.2rem rgba(252,49,24,.5);}


.navbar-brand {padding-top: 0rem;width: 350px;margin-top:-25px;}

.bg-light {background-color: #ffffff!important;}

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {color: #fc3118;}



.headerafb {background-size:cover;background-position:center top;width: 100%;opacity: 0;height:320px;}
.headertekst {position:absolute;top:10%;width: 80%;left:10%;color:#fff;font-size:18px;line-height: normal;font-weight:300;}
.gezichten {position: absolute; right:0;display:none;}
.ctablok {background-size:cover;background-position:center center;width: 100%;height:400px;opacity:0.1;}
.cta {position:absolute;bottom:60px;text-align:center;width: 100%;font-size:18px;}




@media (min-width: 576px) { 
	.headerafb {height:350px;opacity: 0.8;} 
	.headertekst {width: 60%;font-size:18px;}

}
@media (min-width: 768px) { 
	.headerafb {height:400px;} 
	.headertekst {width: 50%;font-size:20px;}
	.gezichten {width:80%; top:-130px;display: block;}
		.cta {font-size:20px;}



}
@media (min-width: 992px) { 
	.headerafb {height:500px;}
	.headertekst {width: 40%;font-size:25px;}
	.gezichten {width:70%; top:-130px;}
	.ctablok {height:500px;}
	.cta {font-size:25px;}
	.card:hover {transform: scale(1.1);}

}
@media (min-width: 1200px) { 
	.headerafb {height:600px;}
	.headertekst {font-size:30px;}
	.gezichten {width:60%;top:-180px;}

}



.animated { 
-webkit-animation-duration: 3s; 
animation-duration: 3s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-timing-function: ease; 
animation-timing-function: ease; 
}
.animated1 { 
-webkit-animation-duration: 5s; 
animation-duration: 5s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-timing-function: ease-in-out; 
animation-timing-function: ease-in-out;
} 
.animated2 {
-webkit-animation-name: bounceIn;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-name: bounceIn;
animation-duration: 2s;
animation-iteration-count: 5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}

@-webkit-keyframes fadeInDown { 0% {opacity: 0;-webkit-transform: translateY(-20px);} 100% {opacity: 1;-webkit-transform: translateY(0);} } 
@keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } 
.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }

@-webkit-keyframes fadeInUp { 0% {opacity: 0;-webkit-transform: translateY(0);} 100% {opacity: 0.8;-webkit-transform: translateY(-20px);} } 
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(0); } 100% { opacity: 0.8; transform: translateY(-20px); } } 
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }

@-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-50px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } 
@keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); }} 
.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }

@-webkit-keyframes fadeIn { 0% {opacity: 0;}100% {opacity: 0.9;} } 
@keyframes fadeIn { 0% {opacity: 0;}100% {opacity: 0.9;}  } 

@-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } 
@keyframes fadeInRight { 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0); } } 
.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }
.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }

@-moz-keyframes slide {0% {-moz-transform: translateX(-100px);}100% {-moz-transform: translateX(0);}}
@-webkit-keyframes slide {0% {-webkit-transform: translateX(-100px);}100% {-webkit-transform: translateX(0);}}
@keyframes slide {0% {transform: translateX(-100px);}100% {transform: translateX(0);}}

@-webkit-keyframes pulse {0% { -webkit-transform: scale(1); }50% { -webkit-transform: scale(1.5); }100% { -webkit-transform: scale(1); }} 
@keyframes pulse {0% { transform: scale(1); }50% { transform: scale(1.5); }100% { transform: scale(1); }} 
.pulse {-webkit-animation-name: pulse;animation-name: pulse;}
	
	

.fade-in{
  animation: animationFrames ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: animationFrames ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes animationFrames{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes animationFrames {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes animationFrames {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}