/* boxing */ 
section{ 
  padding-top: 200px;
}
.grid {
    grid-gap: 6em; 
}
.project{
  margin-bottom: 6em;
}

/* for fullscreen p5 canvas */
#draw{
  z-index: 2;
  opacity: 1;
} 

/* text */
p {
    font-family: "Poppins-Light", sans-serif;
    font-size: 19px;
    font-weight: 200;
    font-style: normal;
    color: #8c8c8c;
    margin-top: 0px;
}
h3{
    font-family: "Gilroy-Regular", sans-serif;
    font-size: 19px;
    font-weight: bold;
    font-weight: 600;
    margin-bottom: 6px;
    margin-top: 20px;
}

li{
font-family: "Poppins-Light", sans-serif;
    font-size: 19px;
    font-weight: 200;
    font-style: normal;
    color: #8c8c8c;
    margin-top: 0px;
}
a{
  cursor: pointer; 
}

/* Typography */
h1{
    font-family: "Gilroy-SemiBold", sans-serif;
    font-size: 62px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #292a2c;
    margin-bottom: 0px;
}

h2{
    font-family: "Poppins-Light", sans-serif;
    font-size: 24px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.58;
    letter-spacing: normal;
    text-align: center;
    color: #292a2c;
}

/* headtext */
.headtext{
  position: absolute;
  left: 25%;
  right: 25%;
  z-index: 5; 
  display: flex;
  flex-direction: column;   /* ← zet items onder elkaar */
  justify-content: center;  /* ← verticaal centreren */
  align-items: center;      /* ← horizontaal centreren */
  text-align: center;
  height: calc(100vh - 160px);

}

/* arrow down */
#scrolldown{
  display:block;
  position:absolute;
  z-index: 100;
  width:50px;
  height:25px;
  left:50%;
  margin-left: -25px;
  bottom:50px;
  top: 800px;
  background:url(https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-32.png) no-repeat; 
  background-size{ 100% 100%;}
  -webkit-animation: arrowbounce 1s infinite;
  -moz-animation: arrowbounce 1s infinite;
  -o-animation: arrowbounce 1s infinite;
  animation: arrowbounce 1s infinite;  
}

/* image-hover-effect */
.hoveredimage {
  overflow: hidden;
  cursor: pointer;
}
.hoveredimage img {
  transition: transform .5s ease;
}
.hoveredimage:hover img {
  transform: scale(1.03);
}
.hoveredimage video {
  transition: transform .5s ease;
}
.hoveredimage:hover video {
  transform: scale(1.03);
}
.hoveredtext:hover a {
  background-size: 100% 1.5px;
}
.hoveredtext{
  margin-top: 20px;
}
.hoveredtext a { 
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 96%;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  transition: background-size .3s;
  cursor: pointer;
}

/* video */
#video-elem2{
  width: 100%;
}

/* tab */
.filter{
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;  
  z-index: 1000;
  width: 100%;
  display: grid;
  place-items: center;
}

.tabs {
  display: flex;
    
}

.tab {
  padding: 6px 16px;
  color: #484848;
  margin: 16px 4px;
  cursor: pointer;
  /*background: linear-gradient(currentColor, currentColor) bottom / 0 .1em no-repeat;*/
  /*transition: background-size .4s ease;*/
  font-size: 14px;
  background-color: #f0f4f3;;
  background-position: left;
  display: inline-block; /* belangrijk voor padding en animatie */
  transition: background-position 2s ease;
  border-radius:3.35544e+07px;
}
.tab.active {
  background-color: #484848;
  color: #f0f4f3;
}

.tabs .tab{
  font-size: 16px;
  text-align: center;
}

.tabs .tab:hover{
  background-size: 100% .1em;
  background-position: right;
  background-color: #d5dfdd;
  color: #000000;
  /*font-weight: 600;*/
}

.tab.active:hover {
  background-color: #000000;
  color: #f0f4f3;
}

.tab-content {
  display: none;
  padding: 20px;
}

.tab-content.active {
  display: grid;
  padding: 0em 8em;
}

/* tablet */
@media screen and (max-width:1280px){
 .tabs{
      /*flex-direction: column;*/
      padding-top: 10px;
 }
 .tab{
    padding: 6px 16px;
    margin: 16px 4px
 }

  .headtext{
    /*padding-bottom: 0px;*/
   /* left: 15%;
    right: 15%;*/

  }
  .grid {
    grid-gap: 2em; 
  }
  section {
    padding: 200px 4em 0em 4em;
  }

  /* video-elem */
  #video-elem2{
    width: 100%;
  } 
  .tab-content.active {
    padding: 0em 2em;
  }
}

/* phone */
@media screen and (max-width:768px){
  /* boxing */
  section{
    padding: 100px 3em 0em 3em;
  }
  .grid {
    grid-gap: 0em;  
/*    padding-top: 100px;  
*/  }
  .col-6 {
    grid-column-start: span 12;
    margin-top: 70px;
  }
  .col-5 {
    grid-column-start: span 12;
    margin-top: 90px;
  }
  
  /* text */
  h1{
    font-size: 30px;
    line-height: 1.20em;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  h2{ 
    font-size: 14px;
    line-height: 1.6em;
    margin-top: 5px;
    width: 90%;
    margin-left: 5%;
  }
  
  p{
    margin-bottom: 40px;
  }

  /* headtext */
  /*.headtext{
    left: 10%;
    right: 10%;
    top: 0%;
    padding-top: 240px;
    padding-bottom: 0px;
  }*/
  
  /* hoverimage */
  .hoveredimage:hover img {
    transform: scale(1.0);
  }
  .hoveredimage:hover video {
    transform: scale(1.0);
  }
  .hoveredtext:hover a {
    background-size: 0% 1.5px;
  }
  .hoveredtext{
    padding-right: 200px;
  }
 
  /* video-elem */
  #video-elem2{
    width: 100%;
  }
}

@media screen and (max-width:630px){
  .hoveredtext{
    padding-right: 50px;
  }
}