/*---------------------------------------
  Home -> Banner           
-----------------------------------------*/
.banner {
  background: url("../img/elements/bannerElement.png") no-repeat left,
    url("../img/photos/homeBanner.jpg") no-repeat center;
  background-size: cover;
  max-height: 500px;
  height: 30vw;
  min-height: 300px;
  color: var(--white-color);
  width: 100%;
}
.bannerText {
  padding: 100px 0px 0px 13vw;
}
.bannerText p {
  margin: 20px 0px 50px 0px;
}
.bannerText h1 {
  max-width: 750px;
}
#bannerKnop {
  padding: 20px 100px;
  background-color: var(--dark-color);
  color: var(--white-color);
  border-radius: var(--border-radius-medium);
  max-width: 350px;
  text-align: center;
  align-self: center;
  text-decoration: none;
  font-size: var(--button-font-size);
  transition: var(--o-transition-short);
}
#bannerKnop:hover {
  color: var(--dark-color);
  background-color: var(--white-color);
}


/*---------------------------------------
  sectie kop        
-----------------------------------------*/

.kop {
  padding: 100px 6vw 50px 6vw;
  color: var(--white-color);
}

/*---------------------------------------
  Home -> Zakelijk Events          
-----------------------------------------*/
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin: 0px 6vw 0px 6vw;
  column-gap: 20px;
  row-gap: 15px;
}
.grid-item {
  background-color:var(--gray-color);
  text-align: center;
  justify-self: stretch;
  text-decoration: none;
}

.img {
  justify-self: stretch;
  height: 280px
}

#img1 {
  background: url("../img/zakelijkeevents/bedrijfsfeest.jpg") center;
  background-size: cover;
}
#img2 {
  background: url("../img/zakelijkeevents/presntatie.jpg") center;
  background-size: cover;
}
#img3 {
  background: url("../img/zakelijkeevents/stand.jpg") center;
  background-size: cover;
}
#img4 {
  background: url("../img/zakelijkeevents/vasteinstalatie.png") center;
  background-size: cover;
}

.text {
  margin: 40px 30px 60px 30px;
  text-align: left;
  color: var(--dark-color);
}

.text p {
  margin-top: 20px;
  margin-bottom: 40px;
}

.hover:hover {
  transform: scale(1.05);
  cursor: pointer;
}

.itemLink {
  color: var(--primary-color);
  font-weight: bold;

}

.itemLink:hover {
  color: var(--dark-color);
  font-weight: bold;
}

/*---------------------------------------
  Home -> over          
-----------------------------------------*/
.gradientBG {
  background: linear-gradient(
    120deg,
    var(--dark-color) 40%,
    var(--primary-color) 100%
  );
  margin-top: 100px;
  padding-bottom: 200px;
}

#overFoto {
  display: flex;
  justify-content: center;
}
#overText {
  max-width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#overText h3 {
  color: var(--white-color);
}
#overText p {
  color: var(--white-color);
}


#overPhoto {
  height: 80%;
  max-width: 600px;
  padding: 10px;
  background-color: var(--white-color);
}


/*---------------------------------------
  event / projecten       
-----------------------------------------*/
.werkTitel {
  padding-top: 10px;
}
#zakelijke_events {
  padding: 50px 0px 200px 0px;
}
.grid-container-projecten {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0px 6vw 0px 6vw;
  column-gap: 20px;
  row-gap: 15px;
}
.imgProj {
  justify-self: stretch;
  height: 400px
}
#imgProj4 {
  background: url("../img/projecten/In_Musical_Sfeer/IMG_1.jpg") center;
  background-size: cover;
}
#imgProj3 {
  background: url("../img/projecten/60Jaar-Durvuttis/IMG_1.jpeg") center;
  background-size: cover;
}
#imgProj2 {
  background: url("../img/projecten/Floryn_club/IMG_1.png") center;
  background-size: cover;
}
#imgProj1 {
  background: url("../img/projecten/JaarlijkseConcert/IMG_1.jpeg") center;
  background-size: cover;
}

/*---------------------------
  CONTACT
---------------------------*/
.grid-container-over {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0px 6vw 0px 6vw;
  column-gap: 20px;
  row-gap: 15px;
  padding-bottom: 100px;
}
.blackdivide {
  height: 1px;
  width: 50%;
  background-color: var(--gray-color);
  margin: 10px 0px 20px 0px;
}
.contact-text{
  color: var(--white-color);
  text-decoration: none;
}
.contact-text:hover{
  color: var(--primary-color);
}
.overLinks {
  display: flex;
  margin-top: 20px;
}

.overLinks a {
  padding: 0px 10px;
}

.overItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white-color);
}
.mapsBlock {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#mapsLogo {
  position: absolute;
  z-index: 10;
  height: 10vw;
  align-self: center;
  display: none;
  pointer-events: none;
}
#contactMap {
  width: 100%;
  margin: 20px 0px;
  transform: scale(1.5);
  transform-origin: 55% 45%;
  transition: transform 0.4s;
}
#contactMap:hover {
  opacity: 50%;
  transform: scale(1.1);
}