@font-face {
  font-family: "CircularXXWeb-Book";
  src: url("../../assets/fonts/CircularXXWeb-Book.woff") format("woff");
}

@font-face {
  font-family: "CircularXXWeb-Book";
  src: url("../../assets/fonts/CircularXXWeb-Book.woff2") format("woff2");
}

@font-face {
  font-family: "CircularXXWeb-BookItalic";
  src: url("../../assets/fonts/CircularXXWeb-BookItalic.woff") format("woff");
}

@font-face {
  font-family: "CircularXXWeb-BookItalic";
  src: url("../../assets/fonts/CircularXXWeb-BookItalic.woff2") format("woff2");
}

@font-face {
  font-family: "CircularXXWeb-Bold";
  src: url("../../assets/fonts/CircularXXWeb-Bold.woff") format("woff");
}

@font-face {
  font-family: "CircularXXWeb-Bold";
  src: url("assets/fonts/CircularXXWeb-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "CircularXXWeb-BoldItalic";
  src: url("../../assets/fonts/CircularXXWeb-BoldItalic.woff") format("woff");
}

@font-face {
  font-family: "CircularXXWeb-BoldItalic";
  src: url("../../assets/fonts/CircularXXWeb-BoldItalic.woff2") format("woff2");
}


body, html {
  webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

*:focus {
    outline: none;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

#denken-maken-delen a{
  font-family: "CircularXXWeb-Bold";
  text-decoration:underline;
}

.anchor {
  position:absolute;
  top:-150px;
  left:0px;

}

.min-h-100 {min-height:50vh !important;}
.min-h-80 {min-height:70vh;}
.min-h-50 {min-height:60vh;}

.overflow-x-hidden {overflow-x:hidden !important;}

.the-title {
  padding-right:2vw;
  font-size:80px;
  line-height:80px;
}

.the-title span {
aspect-ratio: 1/1;
height:20px;
display:inline-block;
position: relative;
}

.the-title span::after {
  content:'';
  position: absolute;
  aspect-ratio: 1/1;
  width:100px;
  display:inline-block;
  background-image:url('../images/vrhl-cloud-black.svg');
  background-size:contain;
  margin-left:30px;
  transform: scale(1.2);
  top:-90px;
  left:0px;

}

.vrhl-cloud-black {
  position: absolute;
  left: 70%;
  bottom:30px;
  width:20%;
  height:155px;
}

.background-video {
  position: absolute;
  left:0px;
  top:0px;
  width:200vw;
  z-index: -1;
  mix-blend-mode: overlay;
  opacity:0.2;
}

.arrow-fixed {
  position: absolute;
  width:160px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:-1;
  margin-left:500px;
}

.orange-overlay {
  position: absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  z-index:0;
  background-color:var(--orange);
}

.btn-orange {
  color: var(--orange); 
  margin-top:30px; 
  padding:15px 30px 15px 30px; 
  border: 3px solid var(--orange);
  font-family: "CircularXXWeb-Bold";
  border-radius:5px;
  display:inline-block;
  position: relative;
  transition:0.3s;
  text-decoration:none !important;
}

.btn-orange:hover {
  color: #ffffff !important; 
  transition:0.3s;
}

.btn-orange::before {
  height:100%;
  width:0%;
  background-color: var(--orange);
  left:0px;
  top:0px;
  position: absolute;
  content:'';
  transition:0.3s;
  z-index:-1;
}

.btn-orange:hover::before {
  height:100%;
  width:100%;
  background-color: var(--orange);
  left:0px;
  top:0px;
  position: absolute;
  content:'';
}

.gfield_required {display:none !important;}

body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message {border: 1px solid red}

.gform_validation_errors {
  background: none !important;
  border: 0px solid #ffffff !important;
  border-radius: 0px;
  box-shadow: 0 0px 0px rgba(0,0,0,0),0 0 0px rgba(0,0,0,0) !important;
  margin-bottom: 8px;
  margin-top: 8px;
  padding: 0px 0px 0px 0px !important;
  position: relative;
  width: 100%;
  color:#ffffff !important;
  box-shadow: 0 0px 0px rgba(0,0,0,0),0 0 0px rgba(0,0,0,0) !important;
}

.gform_validation_errors h2 {
  color:#ffffff !important;
  font-size:22px !important;
  line-height:26px !important; 
}

.gfield_error label {
  color:#ffffff !important;
}

.validation_message {
  background: none !important;
  border: 0px solid #ffffff !important;
  font-size: 14.992px;
  margin-top: 8px;
  padding: 0px !important;
  color:#ffffff !important;}

  .gform_button {
    color: #ffffff; 
    margin-top:30px; 
    padding:15px 30px 15px 30px !important; 
    border: 2px solid #ffffff !important;
    font-family: "CircularXXWeb-Bold";
    border-radius:5px !important; 
    display:inline-block;
    position: relative;
    transition:0.3s;
  }

  .gform_button:hover {
    color: #ffffff !important; 
    transition:0.3s;
  }

  .gform_button::before {
    height:100%;
    width:0%;
    background-color: #ffffff;
    left:0px;
    top:0px;
    position: absolute;
    content:'';
    transition:0.3s;
    z-index:-1;
  }

  .gform_button:hover::before {
    height:100%;
    width:100%;
    background-color: #ffffff;
    left:0px;
    top:0px;
    position: absolute;
    content:'';
  }



  .mask{
   mask-image: url('../images/mask.svg');
   -webkit-mask-image: url('../images/mask.svg');
   mask-size: contain;
   -webkit-mask-size: contain;
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-position: center;
   text-align: center;
   max-width: 95%;
   max-height: 95%;
   display: inline-block;
   margin: auto;
   transition:0.3s;
 }

 #popup {
  position: fixed;
  bottom: -400px;
  right: 60px;
  width:600px;
  background-color: #ffffff;
  z-index:1 !important;
  transition:0.3s;
  padding:30px;
  border-radius:5px;
  background-image:url('../images/popup.png');
  background-position: right center;
  background-size:contain;
  background-repeat:no-repeat;
  -webkit-box-shadow: 0px 0px 94px 10px rgba(0,0,0,0.27);
-moz-box-shadow: 0px 0px 94px 10px rgba(0,0,0,0.27);
box-shadow: 0px 0px 94px 10px rgba(0,0,0,0.27);
}

.kill {
  background-color:#000000 !important;
}

.showit {
  opacity: 1;
  bottom: 60px !important;
  animation-duration: 0.3s;
  z-index:999999999 !important;
}

.close {
  display:block;
  position: absolute;
  right:-20px;
  top:-20px;
  width:40px;
  height:40px;
  background-color:#ffffff;
  color:#1D1D1B;
  border:1px solid #1D1D1B;
  border-radius:50px;
  transition:0.3s;
  transform: scale(1);

}

.close:hover {
  transform:scale(1.2);
  transform: rotate(230deg);
}

.first-line {
  height:2px;
  width:20px;
  background-color:#1D1D1B;
  position: absolute;
  top: 18px;
  left: 9px;
  transform: rotate(45deg);
  transition:0.3s;
}

.second-line {
  height:2px;
  width:20px;
  background-color:#1D1D1B;
  position: absolute;
  top: 18px;
  left: 9px;
  transform: rotate(-45deg);
  transition:0.3s;
}

.close:hover span:first-child {
  opacity:0;
}


 h1 {font-size: 80px; color:#1D1D1B; letter-spacing:-3px; line-height:80px; padding-bottom:20px; font-family: "CircularXXWeb-Bold";}
 h2 {font-size: 40px; color:#1D1D1B; line-height:40px; padding-bottom:30px; text-decoration: underline;  font-family: "CircularXXWeb-Bold";}
 h2:after {content:'.'}

 p strong{font-size:22px; font-family: "CircularXXWeb-Bold";}

 [data-aos=drop] {
  transform: scale(2);
  opacity:0;
  filter: blur(20px);
}
[data-aos=drop].aos-animate {
  transform: scale(1);
  opacity:1;
  filter: blur(0px);
}

 [data-aos=zoom] {
  transform: scale(20);
  opacity:0;
  filter: blur(20px);
}
[data-aos=zoom].aos-animate {
  transform: scale(1);
  opacity:0.4;
  filter: blur(0px);
}

.letter {
  position: absolute;
  font-size:calc(160px + 8vw);
  left:-45px;
  top:25px;
  color:#FFDBD0;
  z-index:-1;
  opacity:1;
  font-family: "CircularXXWeb-Bold";
}

.container-horizontal {
  position: relative;
  width: 100%;
  min-height: 30vh;
  background-color:#f4f4f4;
}

.animation-box { height:90vh; display:flex; align-items: flex-end; width:100%;}

.magazine {animation-duration: 5s; 
  animation-iteration-count:infinite; 
  animation-delay:1s; 
  transform: rotate(0deg); 
}

.magazine:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:280px;
  animation-name: first-magazine;
  transition:0.3s;
  opacity:0;
}

.magazine:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:280px;
  animation-name: second-magazine;
  transition:0.3s;
  opacity:0;
}

.magazine:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:280px;
  animation-name: third-magazine;
  transition:0.3s;
}

@keyframes first-magazine {
  0%   {opacity:0; top:50%; left:50%;}
  10%   {opacity:1; top:20%; left:20%; transform: rotate(10deg);}
  60%   {top:20%; left:20%; transform: rotate(13deg);}
  70%   {top:20%; left:20%; transform: rotate(0deg);}
  100%   {top:50%; left:50%; opacity:1;}
}

@keyframes second-magazine {
  0%   {opacity:0; top:50%; left:50%;}
  10%   {opacity:1; top:30%; left:10%; transform: rotate(-10deg);}
  60%   {top:30%; left:10%; transform: rotate(-12deg);}
  70%   {top:30%; left:10%; transform: rotate(0deg);}
  100%   {top:50%; left:50%; opacity:1;}
}

@keyframes third-magazine {
  0%   {top:50%; left:50%;}
  10%   {top:40%; left:40%;transform: rotate(5deg);}
  60%   {top:40%; left:40%;transform: rotate(8deg);}
  70%   {top:40%; left:40%;transform: rotate(0deg);}
  100%   {top:50%; left:50%; opacity:1;}

}

.magazine-shadow-header {
  top: 10%;
  left: 10%;
  filter: blur(30px); 
  z-index:-1; 
  transform: scale(1); 
  opacity:0.5;
  position: absolute;
}


.magazine-shadow {
  top: 10%;
  left: 30%;
  filter: blur(30px); 
  z-index:-1; 
  transform: scale(1); 
  opacity:0.5;
  position: absolute;
}

.space-holder {
  position: relative;
  width: 100%;
}

.sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
  z-index:2;
  background-image:url('../images/vrhl-magazines-header-dark.jpg');
  background-attachment: fixed;
  background-position: center center;
  background-repeat:no-repeat;
  background-size:cover;
}



.horizontal {
  position: absolute;
  height: 100%;
  will-change: transform;
}

.cards {
  position: relative;
  height: 100%;
  padding: 0 0 0 0px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-center;
  align-items: center;
}

.portfolio-card:first-child {
  opacity:1;
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 0%);
  width: 100vw;
  background: rgba(255, 255, 255, 0) !important;
    backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);

}

.portfolio-card:first-child h1 {
  opacity:1;
  color:#ffffff;
}


#werkwijze {
  background-image:url('../images/vrhl-magazines-header-dark.jpg');
  background-size:cover;

}


.swiper-pagination-bullet {
  width:10px;
  height:10px;
  transition:0.4s;
  background-color:#ffffff;
  opacity:0.7;
  transform: scale(1);
  margin-left:15px;
  margin-right:6px !important;
}

.swiper-pagination-bullet-active {
  background-color:var(--orange);
  transform: scale(1.5);
}

.portfolio-card .swiper-slide-next {
  opactiy:1 !important;
}

.portfolio-card:first-child:hover {
  box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
  background-size:contain !important;
}

.portfolio-card p {
  max-width:100%;
}

.portfolio-card {
  position: relative;
  height: 35vh;
  margin-bottom:10vh;
  text-align:center !important;
  background-size:100%;
  transition:0.3s;
  opacity:1;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  transform: scale(1);
  clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
  user-select: none;

}

.portfolio-card:hover {transform: scale(1);}

.portfolio-card:nth-child(2), .portfolio-card:nth-child(7), .portfolio-card:nth-child(13)  {
  background-color: rgba(247,104,64,0.9);
  backdrop-filter: blur(5px);
}

.portfolio-card h3 {color:#ffffff; font-size:25px; max-width:50%;}
.portfolio-card h1 {
  color:#1D1D1B; 
  font-size:70px; 
  text-align:center; 
  padding-bottom:0px !important;
}


.swiper-pagination {
  margin-top:100px;
}

#marquee {
  margin-top:-50px;
  padding-top:50px;
  padding-bottom:50px;
  font-family: "CircularXXWeb-Bold";
  margin-bottom:100px;
}

.marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  font-size:50px;
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 32s linear infinite;
}

.track span {
  padding-left:30px;
  user-select: none;
}

.track span::after {
  content:'|';
  margin-left:30px;
  font-weight:100;
  font-family:verdana;
  color:#ccc;
  display:inline-block;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

#aanmelden {
  background-color:var(--orange);
  overflow-x: hidden;
  padding-bottom:100px;
  z-index:-2 !important;
  position: relative;

}




.gform_submission:focus {
  display:none !important;
}

#gf_23 {padding-top:100px;}
#gf_23.selected {display:none;}


label {color:#ffffff; font-size:16px; border-radius:5px;}
label:hover {color:#ffffff; font-size:16px; border-radius:5px;}

input[type=text], input[type=email] {
  border:1px solid #ffffff;
  padding:15px !important;
  border-radius:5px !important;
}


.vrhl-cloud {
  background-size:contain;
  background-image:url('../images/vrhl-cloud.svg');
  height:300px;
  width:300px;
  margin-top:-20px;
}


.white {color:#ffffff !important;}

.magazine-swiper .swiper-slide {opactiy:1 !important;}
.magazine-background {
  position: absolute;
  height:60%;
  width:100%;
  top:20%;
  left:0%;
  background-color:#333;
  z-index:0;
}

.swiper-box {
  border: 1px solid #1D1D1B;
  padding:40px;
  border-radius:8px;
}

.magazine-description {
  color:#ffffff;
  opacity:0;
  transition-delay:1s;
  transition:1s;
}


.swiper-slide-active .magazine-description {
  opacity:1 !important;
}

 .swiper-slide .magazine-description h5 {color:#ffffff !important;}
 .swiper-slide .magazine-description {color:#ffffff !important;}
 .swiper-slide .magazine-description h6 {text-transform:uppercase; font-family:'CircularXXWeb-Book'; font-size:12px; color:#ffffff;}

.magazine-description .swiper-slide-next h5, .magazine-description .swiper-slide-prev h4 {opacity:0; transition-delay:2s; transition:0.3s; color:#ffffff !important;}
.magazine-description .swiper-slide-active h5 {opacity:1; transition:0.3s; transition-delay:1s;}

.magazine-description .swiper-slide-prev p {opacity:0; transition-delay:2s; transition:0.3s; color:#ffffff !important;}
.magazine-description p {opacity:0.6; transition:0.3s; transition-delay:1s;}



.magazine-swiper .swiper-slide-next {
  opacity:0.5;
  filter: blur(4px);
  transition:1s;
  transition-delay:2s;
}

.next-white {
  height:60px;
  width:60px;
  right:20px;
  top: calc(50% - 40px);
  position: absolute;
  z-index:2;
  background-image:url('../images/next-white.svg');
  background-size:contain;
}

.next-white:hover {
  background-image:url('../images/next-orange.svg');
}



.prev-white {
  height:60px;
  width:60px;
  left:20px;
  top: calc(50% - 40px);
  position: absolute;
  z-index:2;
  background-image:url('../images/prev-white.svg');
  background-size:contain;
}

.prev-white:hover, .prev-black:hover {
  background-image:url('../images/prev-orange.svg');
}

.prev-white:hover {
  background-image:url('../images/prev-orange.svg');
}





.next-black, .next-black-second {
  height:60px;
  width:60px;
  left: calc(50% + 10px);
  bottom: -30px;
  position: absolute;
  z-index:2;
  background-image:url('../images/next-black.svg');
  background-size:contain;
}

.prev-black, .prev-black-second  {
  height:60px;
  width:60px;
  right: calc(50% + 10px);
  bottom: -30px;
  position: absolute;
  z-index:2;
  background-image:url('../images/prev-black.svg');
  background-size:contain;
}

.next-black:hover {
  background-image:url('../images/next-orange-2.svg');
}

.prev-black:hover {
  background-image:url('../images/prev-orange-2.svg');
}

.quotes {
  height:60px;
  width:60px;
  left:-15px;
  top: -30px;
  position: absolute;
  z-index:2;
  background-image:url('../images/quotes.svg');
  background-color:#F2F2F2;
  background-size:contain;
}

.single-magazine-slide {font-size:16px; padding-bottom:15px;}
.single-magazine-slide img {max-width:230px !important;}

#team {margin-top:0px;}

.team-slide p { color:var(--orange); line-height:70px; }
.team-slide h4 { color:var(--orange); font-size:36px !important; font-family: "CircularXXWeb-Bold";}




@media only screen and (max-width: 1200px) and (min-width: 1011px) {

.the-title {
  padding-right:2vw;
  font-size:70px;
  line-height:70px;
}

.the-title span {
aspect-ratio: 1/1;
height:2px;
display:inline-block;
position: relative;
}

.the-title span::after {
  content:'';
  position: absolute;
  aspect-ratio: 1/1;
  width:50px;
  display:inline-block;
  background-image:url('../images/vrhl-cloud-black.svg');
  background-size:contain;
  margin-left:30px;
  transform: scale(1.5);
  top:-70px;
  left:0px;

}
}

@media only screen and (max-width: 1010px) and (min-width: 641px) {

.the-title span::after {top:-70px; left:40%;}
.the-title span {width:100%; padding-bottom:70px;}
}

@media only screen and (max-width: 640px) and (min-width: 0px) {

#marquee {
  margin-top:100px;
  font-family: "CircularXXWeb-Bold";
  margin-bottom:100px;
}

.marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  font-size:30px;
}

.the-title {
  padding-right:2vw;
  font-size:50px;
  line-height:50px;
}

.the-title span {
aspect-ratio: 1/1;
height:2px;
display:inline-block;
position: relative;
}

.the-title span::after {
  content:'';
  position: absolute;
  aspect-ratio: 1/1;
  width:50px;
  display:inline-block;
  background-image:url('../images/vrhl-cloud-black.svg');
  background-size:contain;
  margin-left:30px;
  transform: scale(1.5);
  top:-70px;
  left:0px;

}


  h1 {font-size: 50px; color:#1D1D1B; letter-spacing:-3px; line-height:55px; padding-bottom:10px; font-family: "CircularXXWeb-Bold";}
  h2 {font-size: 30px; color:#1D1D1B; line-height:30px; padding-bottom:20px; text-decoration: underline;  font-family: "CircularXXWeb-Bold";}
  h3{font-family: "CircularXXWeb-Bold";}
  
  #intro-magazines {
    margin-top: 20px !important;
  }

  .animation-box { height:100vh; display:flex; align-items: flex-end; width:100%;}

  .magazine {animation-duration: 6s; 
    animation-iteration-count:infinite; 
    animation-delay:2s; 
    transform: rotate(0deg); 
    animation-delay:4s;
  }

  .magazine:nth-child(1) {
    width:180px;
  }

  .magazine:nth-child(2) {
    width:180px;
  }

  .magazine:nth-child(3) {
    width:180px;
  }

  .swiper-box {
    border:0px solid #1D1D1B;
    padding:20px;
    border-radius:0px;
  }



#gf_23 {padding-top:30px;}

  .quotes {display:none;}

  .portfolio-card {
    position: relative;
    height: 25vh;
    width: 90vw;
    text-align:center !important;
    background-size:100%;
    transition:0.3s;
    opacity:1;
    background: rgba(255, 255, 255, 1);
    transform: scale(1);
    clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
  }

  .portfolio-card h3 {
    color:#1D1D1B; 
    font-size:25px; 
    max-width:50%;
  }
  .portfolio-card h1 {
    color:#1D1D1B; 
    font-size:40px; 
    text-align:center; 
    padding-bottom:0px !important;
  }

  .magazine-shadow {display:none;}
  .swiper-thumb img {max-width:200px !important;}

  .next-white {display:none;}
  .prev-white {display:none;}

}  /* end mobile version */