@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
:root {
	--base: #414141; /* Donker grijs*/
    --theme1: #605f4f; /*  */
	--theme2: #075796; /* Blauw */
    --theme3: #414035; /* Donker grijs/bruin */
	--theme4: #d5d1c7; /* licht grijs/bruin */
    --font: 'Poppins', sans-serif;
}
body{ color: var(--base); font-size: 1.1rem; font-family: var(--font); }
html {scroll-behavior: smooth; }
.bg-theme1{ background-color: var(--theme1); }
.bg-theme2{ background-color: var(--theme2); }
.bg-theme3{ background-color: var(--theme3); }
.bg-theme4{ background-color: var(--theme4); }
.mh{ margin-top: 175px; }
.bg-nav{ background-color: rgb(255 255 255); }
.bg-theme2 a{color: #fff; text-decoration: none;  }
.bg-theme2 a:hover, .bg-theme2 a:visited{color: orange }
.navbar-brand img{
	transition: width .3s ease-in-out, height .3s ease-in-out;
}
#hero{ min-height: 600px; overflow: hidden; margin-top: 124px; }
#hero .container{ bottom: 5%}
#hero h2 span{
	border-radius: 20px;
	padding: 2px 20px;
}
a, a:visited{ color: var(--theme1);}
a:hover{ color: var(--theme2);}
h1, h2, h3, h4{ font-weight: 700; margin: 1rem 0;}
#nieuws-blok{ background: transparent url(/img/nieuws.svg) no-repeat 20px 40px;}
.telefoon a{ color: #fff!important; text-decoration: none; font-weight: 600}
.telefoon a:hover{ color: var(--theme2); }
.navbar{
	transition: padding 0.3s;
	box-shadow: 0 0 10px 0 hsla(0,0%,52%,.5);
 }
.nav-link{
	font-weight: 700;
	font-size: 1.2rem;
	color:  #000;
	padding: 0.5rem 0 0.5rem 0.5rem;
}
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
	display: none;
    z-index: 1080;	
}
.navbar a , .navbar a:visited, .navbar a.dropdown-item:active {color: #000;}
.navbar a.dropdown-item, .navbar a.dropdown-item:visited { color:#000}
.dropdown-item.active, .dropdown-item:active{ color: #fff!important;}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show, .nav-link:focus, .nav-link:hover  {
    color: var(--theme2);
}
.active a.nav-link, .dropdown-item.active, .dropdown-item:active{
	    background-color: var(--theme2);
		color: #fff;
}
.btn{ font-size: 1.2rem; }
.btn-theme {
    color: #fff!important;
    background-color: var(--theme2);
	box-shadow: inset 0 0 0 0 var(--theme1);
	-webkit-transition: ease-out 0.2s;
	-moz-transition: ease-out 0.2s;
	transition: ease-out 0.2s;
    border-color: var(--theme2);
}
.btn-theme:not(:disabled):not(.disabled).active, .btn-theme:not(:disabled):not(.disabled):active, .show>.btn-theme.dropdown-toggle, .btn-theme:hover, .btn-theme.focus, .btn-theme:focus {
    border-color: var(--theme1);
	box-shadow: inset 400px 0 0 0 var(--theme1);
}
.btn-theme2 {
    color: #fff!important;
    background-color: var(--theme1);
    border-color: var(--theme1);
}
.btn-theme2:not(:disabled):not(.disabled).active, .btn-theme2:not(:disabled):not(.disabled):active, .show>.btn-theme2.dropdown-toggle, .btn-theme2:hover, .btn-theme2.focus, .btn-theme2:focus {
    color: var(--theme2)!important;
    border-color: var(--theme2);
}
/* Floating form: label on border*/
.form-floating>.form-control {
    padding: 0;
}
.form-floating .float-up{
	transform: scale(.85) translateY(-1.1rem) translateX(0.15rem);
}
.form-floating>.form-control, .form-floating>.form-select {
   min-height: calc(1.3rem + 2px );
}
.form-floating>label {
    padding: .1rem .75rem .2rem .75rem;
	background-color: #fff;
	height: 30px;
	width: auto;
	margin: 3px 0 0 2px;
	transition: opacity .1s ease-in-out,transform .1s ease-in-out!important;
}
.form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown) {
    padding: .4rem 1rem 0 .6rem;
}
.form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
    opacity: .9;
    transform: scale(.85) translateY(-1.1rem) translateX(0.15rem);
}
.form-control:focus, .form-select:focus {
    border-color: #a7a6a6;
    box-shadow: 0 0 0 0.25rem rgb(207 207 207 / 40%);
}
.form-floating>.form-select {
    padding-top: .6rem;
}
.breadcr {
    display: block;
}
.breadcr ul {
    margin: 0 0 0 -30px;
}
.breadcr ul li {
    display: inline-block;
}
.breadcr ul li:after {
    content: " » ";
}
.breadcr ul li:last-child:after {
    content: " ";
}
#adminmenu{
	background-color: #fff;
	z-index: 2003;
	position: fixed;
	top: 0;
	padding: 0.1rem 0.1rem;
}
#adminmenu a, #adminmenu a:visited{ color: var(--base);}
#adminmenu a:hover{ color: var(--theme2);}
.parallax {
  position: relative;
  min-height: 450px; 
  background-attachment: fixed;
  background-position: 50% 10%;
  background-repeat: no-repeat;
 }
.parallax.projecten{  min-height: 280px; } 
.startmodal{ cursor: pointer; }
footer a, footer a:visited{
	color: #fff;
	text-decoration: none;
}
footer a:hover{ color: var(--theme2);}
footer #bottom-line{
	background-color: var(--theme3);
	color: #fff;
}
footer #bottom-line a{ color: #fff;  }
footer #bottom-line a:hover{ color: #a7deff; }
footer .btn-theme:hover, footer .btn-theme.focus, footer .btn-theme:focus {
    border-color: #fff;
}
footer h2::before {
    background: #fff;
}
footer h2::after, #locatie h1::after{
	background: #605f4f;
}
#locatie h1::after, #locatie h1::before, #hero h1::after, #hero  h1::before, #hero h2::after, #hero h2::before{
	display: none;
}
#hero h1, #hero h2, #hero a{ color: #fff; }
.owl-carousel img{
	filter: grayscale(0);
	
}
.owl-carousel img:hover{
	filter: grayscale(1);
}
#locatie h1{
	top: 230px;
	z-index: 123;
	display: inline-block;
    color: #fff;
    background-color: var(--theme1);
    font-size: 2rem;
    padding: 10px 20px;
}
h1{
	position: relative;
	padding-bottom: 10px;
	font-size: 1.9rem;
}
h2{
	position: relative;
	padding-bottom: 10px;
	font-size: 1.6rem;
}
h3{
	font-size: 1.2rem;
}
.card h3{
	 margin: .4rem 0;
}
.projecten .card a{
	text-decoration: none;
}
.card .card-body{
	padding-bottom: 30px;
}
.card a:hover .card-body{
	background-color: #cea93942;
}
.card .date{
	bottom: 0px;
	right: 0px;
	font-size: .8rem;
	background-color: var(--theme1);
	color: #fff;
	padding: 5px;
	border-top-left-radius: 3px;
	border-bottom-right-radius: 3px;	
}
.card .overlay{
	background-color: rgb(90 90 81 / 70%);
	color: #fff;
	bottom: 0;
	height: 25px;
	width: 100%;
	transition: height .3s;
}
.card a:hover .overlay{
	background-color: var(--theme2);
	height: 100%;
}
.card a:hover h3, .card a:hover .date, .card a:hover p{
	color: #fff;
}
.foto{
	overflow: hidden;	
}
.foto img {
	transition: transform .5s ease;
}
.foto:hover img {
    transform: scale(1.2);
}
.foto .overlay{
	top: 0;
	color: #000;
	background-color: rgb(0 0 0 / 30%);
	opacity: 0;
	width: 100%;
	height: 100%;
	transition: opacity .5s ease;
}
.foto:hover .overlay{
	opacity: 1;
}
.foto .circle{
	background-color: #fff;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	padding: 10px 0 0 10px;
}
.sticky-top {
    top: 160px;
}
h1::before, h2::before {
    position: absolute;
    content: "";
    width: 150px;
    height: 4px;
    left: 0;
    bottom: 0;
    background: var(--theme2);
    border-radius: 2px;
}
h1::after, h2::after {
    position: absolute;
    content: "";
    width: 3px;
    height: 4px;
    bottom: 0px;
    background: #fff;
    -webkit-animation: section-title-run 4s infinite linear;
    animation: section-title-run 4s infinite linear;
}
@-webkit-keyframes section-title-run {
    0% {left: 0; } 100% { left: 145px; }
}
div.titel{
	color: #fff;
	font-size: 2.4rem;
	background-color: rgb(92 91 91 / 70%);
	padding: 10px;
}
h1.titel::before, h1.titel::after{
	visibility: hidden;
}
#slider span {
	display: none;
   &.show {
   display: inline;
 }
}
ul.line{
	padding-left: 10px;
}
.owl-carousel .overlay, .youtube .overlay{
	bottom: 0;
	width: 100%;
	height: 0;
	color: #fff;
	font-weight: 600;
	background-color: #605f4fd6;
	opacity: 0;
	transition: height .4s ease;  
}
.owl-carousel a:hover .overlay, .youtube a:hover .overlay{
	height: 40px;
	opacity: 1;
}
.overlay-img{
	height: 100%;
	width: 100%;
	top: 0;
	background-image: url('/img/overlay.webp');
}
#projecten{
  width: 100%;
  position: relative;
  min-height: 460px;
  overflow: hidden;
  z-index: 1;
}
#projecten p.title{
	top: 40px;
	font-size: 6rem;
	position: absolute;
	color: #fff;
	width: 200%;
	z-index: -1;
}
#vervolg .mh{
	margin-top: 110px;
}
#locatie .mh{
	margin-top: 150px;
}
#diensten .card:hover{
   box-shadow: 0px 0px 70px rgb(25 25 25 / 10%);
}
#diensten .card:hover .fas {  
     transform: rotate(360deg);
	 color: var(--theme2);;
}
#diensten .card:hover .fas {
     transition: transform 0.5s ease 0s;
}
.werkwijze .label{
	font-size: 3rem;
	color: #eee;
}
.werkwijze .stap{
	font-size: 2rem;
	font-weight: 600;
	margin-top: 10px;
}
#circle {position:absolute; background: #000; opacity:.07; z-index: -1; width:50px; height:50px; border-radius:50px; top:50%; left:50%; animation: pulse .5s cubic-bezier(.51,0,0.4,.5) alternate infinite; transform: translate(-50%,-50%) scale(1);  }
@keyframes pulse {
  from { width:50px;height:50px; } to { width:60px; height:60px; }
}
#circle.active { animation:bounce .5s ease; }
@keyframes bounce {
 100%{ transform: translate(-50%,-50%) scale(2); opacity:0; }
  0%{ transform: translate(-50%,-50%) scale(1); opacity:1; }
} 
.overlaycontainer {
    position: relative;
}
.machine h4 {
    position: absolute;
    bottom: 10px;
    padding: 3px 10px;
    margin-right: 20px;
    background: #c9e6fa;
    z-index: 1025;
}
.overlaycontainer .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: rgba(47, 115, 178, 0.75);
}
.overlaycontainer.recensie .overlay {
	height: 60px;
	opacity: 1;
}
.overlaycontainer:hover .overlay {
    opacity: 1;
    height: 100%;
}
.overlaycontainer .text {
    color: white;
    position: absolute;
    top: 100%;
    left: 50%;
	width: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
	  transition: .5s ease;
}
.overlaycontainer:hover .overlay .text{
    top: 50%;	
}
.card .text-muted.bg-theme2{ 
	color: #fff!important;
	padding: 3px 10px;
	border-bottom-right-radius: 7px;
	bottom: -10px; right: 6px
}
.ribbon-top-left {
    top: -7px;
    left: -7px;
    z-index: 1025;
}
.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
}
.ribbon-top-left::before {
    top: 0;
    right: 0;
}
.ribbon-top-left::after {
    bottom: 0;
    left: 0;
}
.ribbon-top-left::before, .ribbon-top-left::after {
    border-top-color: transparent;
    border-left-color: transparent;
}
.ribbon::before, .ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #520000;
}
.ribbon-top-left span {
    right: -25px;
    top: 30px;
    transform: rotate(-45deg);
}
.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 15px 0;
    background-color: #a40000;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    color: #fff;
    font: 700 18px/1 'Lato', sans-serif;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    text-transform: uppercase;
    text-align: center;
}

@media screen and (max-width: 480px) {
	.navbar-brand img{ width: 200px!important; height: 49px!important}
	#home::before { display: none; }
	.mh { margin-top: 116px; }
	h1{ font-size: 1.6rem; }
	#hero{ margin-top: 101px; min-height: 320px;}
	
	#hero h2{ font-size: 1rem; margin: 0.5rem 0}
	#hero h2 span {padding: 2px 7px}
	
}
@media (min-width: 992px) {
	.col-div-5 {
		flex: 0 0 auto;
		width: 20%;
	}
}