@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
html, body {height: 100%; width: 100%; font-family: 'poppins', sans-serif; color: #222;}
a {color: black; text-decoration: none;}
a:hover {color: black; text-decoration: none;}
h3 {display:block; font-size: 18px; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: 500;}
.arrow {border: solid white; border-width: 0 3px 3px 0; display: inline-block; padding: 3px;}
.right {transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
.left {transform: rotate(135deg); -webkit-transform: rotate(135deg);}
.up {transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}
.down {transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.dropbtn {background-color: #3F3F3F; color: white; width: 150px; border: 1px solid #d5d5d5; font-size: 16px; width: 150px; border-radius: 0px; display:inline-block; align-content: center;}
.dropdown {z-index: 999; position: relative; display: inline-block;}
.dropdown-content {
	z-index: 999;
	position: relative;
  display: none;
  background-color: #f1f1f1;
  max-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.xlink{display:block;}
.xnolink{display:none;}
.minilang{display:none;}
.dropdown-content a {
	z-index: 999;
	position: relative;
  color: black;
  padding: 12px 2px;
  text-decoration: none;
  display: block;
	width: 150px;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3F3F3F; color: #3F3F3F;border: 1px solid #563d7c;} 
.dropdown-menu-center {
  left: 50% !important;
  right: auto !important;
  text-align: center !important;
  transform: translate(-50%, 0) !important;
}
.column {
  float: left;
  width: 50%;
}
.icon-bar {
  width: 30px; 
  background-color: #aaa; 
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
  z-index: 9999;
  float:right;
}
.icon-bar a {
  display: block; 
  text-align: center; 
  padding: 5px;
transition: all 0.3s ease; 
  color: white; 
  font-size: 15px; 
	  z-index: 9999;
}
.icon-bar a:hover {
  background-color: #000; 
}
.icon-bar2 {
 width: 30px; 
 background-color: #aaa; 
 z-index: 9999;
 position: absolute; top:0; right:0;
}
.icon-bar2 a {
  display: none; 
  text-align: center; 
  padding: 5px; 
  transition: all 0.3s ease; 
  color: white; 
  font-size: 15px; 
 }
.icon-bar2 a:hover {
  background-color: #000; 
}
.icon-bar3 a {
  height: 48px;
  width: 48px;
  border: thin;
  border-color: black;
  margin-left: auto;
margin-right: auto;
  text-align: center;
  display: none; 
  background: #F30004;
  background-color: grey;
  text-align: center; 
  padding: 12px; 
  transition: all 0.3s ease; 
  color: white; 
  font-size: 18px; 
 }
.icon-bar3 a:hover {
  background-color: #000; 
}
.icon-bar4 {
 display: none;
 width: 48px; 
 height: 152px;
 background-color: #aaa; 
 z-index: 9999;
 position: absolute; top:0; right:0;
}
.icon-bar4 a {
  display: none; 
  text-align: center; 
  padding: 12px; 
  transition: all 0.3s ease; 
  color: white; 
  font-size: 18px; 
 }
.icon-bar4 a:hover {
  background-color: #000; 
}
.active2 {
  background-color: #000000; 
	;
}
.active3 {
  background-color: #000000; 
	;
}
.short-text { display: none; }
.productList {
    width: 500px;
}
.product {border-bottom: 1px dashed #aaa;}
.product .name {font-weight: normal;}
.product .price {float: right;}
.noBorder {border: 0px; padding:0; margin:0; border-collapse: collapse;}
.logo {max-height: 240px;max-width: 75%;}
.logo2 {max-height: 200px;}
.logo3 {max-height: 240px;}
.navbar {padding: 0; height: auto;}
.navbar-nav li {padding-right: 5px; float: left; height: 10px;} /*-- padding tussen menu --*/
.nav-link {font-size: 0.9em !important;}
.carousel-inner img {width:100%; height:100%;}
.carousel-caption {position:absolute; top: 50%; transform: translateY(-50%)}
.carousel-caption h1 {font-size: 500%; text-transform: uppercase; text-shadow: 1px 1px 15px #000;}
.carousel-caption h3 {font-size: 200%; font-weight: 500; text-shadow: 1px 1px 10px #000;padding-bottom: 1rem;}
.btn-primary {background-color: #3f3f3f; border: 1px solid #d5d5d5; font-size: 16px; width: 150px; border-radius: 0px; display:inline-block; align-content: center; margin: 3px;}
.btn-primary:hover {background-color: #00000; border: 1px solid #563d7c;}
.btn-outline-secondary {color: white; background-color: #3f3f3f; border: 1px solid #d5d5d5; font-size: 16px; width: 150px; border-radius: 0px;}
.btn-outline-secondary:hover {background-color: #00000; border: 1px solid #563d7c;}
.button1 {background-color: #3f3f3f; border: 1px solid #d5d5d5; font-size: 12px; width: 100px; border-radius: 0px;}
.button1:hover {background-color: #00000; border: 1px solid #563d7c;}
.jumbotron {padding: 1rem; border-radius: 0;}
.padding {padding-bottom: 2rem;}
.welcome {width: 75%;margin: 0 auto;padding-top:1rem;}
.welcome hr {border-top: 2px solid @b4b4b4;width: 95%; margin-top:.3rem; margin-bottom: 1rem;}
.fa-code {color: #e54d26;}
.fa-bold {color: #563d7c;}
.fa-css3 {color: #213648;}
.fa-code, .fa-bold, .fa-css3 {font-size: 4rem;margin: 1rem;}
.fun {background-color: #3f3f3f; color: #ffffff; border: 1px solid #d5d5d5; font-size: 16px; width: 150px; border-radius: 0px; display:inline-block; align-content: center; margin-bottom: 2rem;}
.fun:hover {background-color: #FFFFFF;color: black;border: 1px solid #563d7c;}
.gif {max-width: 100%;}
.social a {font-size: 4.5em; padding: 3rem; }
.fa-facebook {color: #3b5998;}
.fa-location {color: #1E6;}
.fa-mailus {color: #3b5998;}
.fa-twitter {color: #00aced;}
.fa-instagram {color: #e1306c;}
.fa-phoneus  {color: #e1306c;}
.fa-youtube {color: #bb0000;}
.fa-google-plus-g {color: #dd4b39;}
.fa-facebook:hover, .fa-twitter:hover, .fa-instagram:hover, .fa-youtube:hover, .fa-google-plus-g:hover, .fa-phoneus:hover, .fa-location:hover, .fa-mailus:hover {color: #000000;}
footer {background-color: #3f3f3f; color: #d5d5d5; padding-top: 2rem;}
hr.light {border-top: 1px solid #d5d5d5; width: 75%; margin-top: .8rem; margin-bottom: 1rem;}
footer a {color: #d5d5d5; }
hr.light-100 {border-top: 1px solid #d5d5d5; width: 100%; margin-top: .8rem; margin-bottom: 1rem;}
@media (max-width: 992px) 
{
	#bar1 {display: none;}
	.productList {width: 98%;}
	.social a {font-size: 4em; padding: 2rem;}
	.icon-bar2 a {display: block;}
}

@media (max-width: 768px) 
{
.logo3 {max-height: 0;}
	.navbar {padding: 0; height: auto;}
.navbar-nav li {padding-right: 6px; float: left; height: 40px;} /*-- padding tussen menu --*/
.nav-link {font-size: 1.3em !important;}
	.icon-bar2 a {
		display: block;}
	.productList {width: 98%;}
  	.carousel-caption {position:absolute; top: 45%; }
	.carousel-caption h1 {font-size: 350%;}
	.carousel-caption h3 {font-size: 140%; font-weight: 400; text-shadow: 1px 1px 10px #000;padding-bottom: .2rem;}
	.carousel-caption .btn {font-size: 95%; padding: 8px 14px;}
	.display-4 {font-size: 200%}
	.social a {font-size: 2.5rem; padding: 1.5rem;}
	
}
@media (max-width: 576px) 
{
	.productList {
    width: 98%;
}
		.icon-bar2 a {
		display: none;}
				.icon-bar4 {
		display: block;}
			.icon-bar4 a {
		display: block;}
	.xnolink{display:block;}
	.xlink{display:none;}
    .btn-primary {margin: 8px;}
	.logo3 {max-height: 0;}
	.button1 {background-color: #3f3f3f; border: 1px solid #d5d5d5; font-size: 12px; width: 100px; border-radius: 0px; display: inline-block;}
	.button1:hover {background-color: #00000; border: 1px solid #563d7c;}
	.carousel-caption {position:absolute; top: 40%; }
	.carousel-caption h1 {font-size: 250%;}
	.carousel-caption h3 {font-size: 110%; font-weight: 400; text-shadow: 1px 1px 10px #000;padding-bottom: .2rem;}
	.carousel-caption .btn {font-size: 90%; padding: 4px 7px;}
	.display-4 {font-size: 160%}
	.social a {font-size: 2rem; padding: .7rem; }
	.carousel-indicators {display: none;} 
}
@media (max-width: 320px) 
{
	.productList {
    width: 270px;}
		.icon-bar2 a {
		display: none;}
				.icon-bar4 a {
		display: none;}
					.icon-bar4 {
		display: none;}
	.minilang{display:inline-block;}
	.icon-bar3 a {display: inline-block;}
	h1 {font-size: 130%;}
	h2 {font-size: 130%;}
    .short-text { display: inline-block; }
    .full-text { display: none; }
	.logo {max-height: 0%; width: 65vw;}
	.logo2 {max-height: 100%; width: 65vw;}
	.logo3 {max-height: 0px;}
	.button1 {background-color: #3f3f3f; border: 1px solid #d5d5d5; font-size: 12px; width: 60px; border-radius: 0px; display: inline-block; align-content: center;}
	.button1:hover {background-color: #00000; border: 1px solid #563d7c;}
	.carousel-caption {position:absolute; top: 40%; }
	.carousel-caption h1 {font-size: 250%;}
	.carousel-caption h3 {font-size: 110%; font-weight: 400; text-shadow: 1px 1px 10px #000;padding-bottom: .2rem;}
	.carousel-caption .btn {font-size: 90%; padding: 4px 7px;}
	.display-4 {font-size: 160%}
	.social a {font-size: 2rem; padding: .7rem; }
	.carousel-indicators {display: none;} 
}
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
[class*="col-"] {
    padding: 1rem;
}

.team-location-divider {
    width: 100%;
    background-color: #3f3f3f; /* zelfde als footer */
    color: #fff;
    text-align: center;
    padding: 12px 0;
    margin: 40px 0 20px 0;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.team-location-divider span {
    position: relative;
}
.navbar {
  z-index: 10000; /* Zorg ervoor dat de navbar boven andere elementen komt */
  position: relative; /* Zorg ervoor dat de navbar een positie heeft voor de z-index */
}

/* Voor de mobiele weergave, indien nodig */
@media (max-width: 991px) {
  .navbar {
    z-index: 10000; /* Verhoog de z-index voor mobiele weergave */
  }
}
/* Zorg ervoor dat het logo netjes schaalt */
.navbar .logo3 {
    max-height: 60px; /* Max hoogte van het logo (je kunt de waarde aanpassen naar wens) */
    width: auto; /* Zorg ervoor dat de breedte automatisch schaalt om de verhouding te behouden */
}

/* Voor mobiele versies: logo kleiner maken */
@media (max-width: 768px) {
    .navbar .logo3 {
        max-height: 50px; /* Kleinere hoogte op mobiele apparaten */
    }
}



/* Navbar menu-items centreren in desktopmodus */
.navbar-nav {
  display: flex;
  align-items: center;  /* Dit zorgt ervoor dat de items verticaal gecentreerd zijn */
  height: 100%;
  justify-content: center; /* Dit zorgt ervoor dat de items in het midden van de navbar staan */
}

/* De individuele nav-items (menu items) */
.navbar-nav .nav-item {
  padding: 0 7px;
  display: flex;
  align-items: center;
  /* Voeg hier wat marge toe voor verticale uitlijning */
  margin-top: 5px; /* Deze marge kan je aanpassen naar wens */
}

footer .logo2 {
    max-height: 200px;  /* Verlaag de hoogte naar 40px of wat je prettig vindt */
    height: auto;
    width: auto;
    margin: 0;  /* Verwijder eventuele marges rondom de afbeelding */
    padding: 0; /* Verwijder eventuele padding rondom de afbeelding */
}

footer {
    padding-top: 0px; /* Verklein de bovenste ruimte */
    padding-bottom: 0px; /* Verklein de onderste ruimte */
}
footer .row {
    display: flex;
    justify-content: center;
    align-items: center;
}

footer .logo2 {
    max-height: 1000px;
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}