/* SET BACKGROUND, FILTER AND OVERLAY TO COVER ALL CAROUSEL GRID AREA */
.carousel-background,
.carousel-slide,
.carousel-background-blue-filter,
.carousel-background-yellow-filter,
.carousel-overlay,
.carousel-content{
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -1;
}

/* BACKGROUND IMAGE SETTINGS */
.carousel-background,
.carousel-slide{
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.carousel-slide{
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left: 0;
}

/* SLIDE ANIMATION CSS ONLY */
.carousel-slideshow{
  position: relative;
}
/* Slide animation takes 8 seconds, last 2 seconds are not visible.
This way, the next image does not fade from a blank canvas. */
@keyframes fade2slides {
  /* 12s => 1%=0.12s => 1s=8.333% */
  0% { opacity: 0; }
  16.66% { opacity: 1; } /* 2 sec fade in */
  50.00% { opacity: 1; } /* 4 sec visible */
  66.66% { opacity: 0; } /* 2 sec fade-out */
  100% { opacity: 0; }
}
@keyframes fade3slides {
  /* 18s => 1%=0.18s => 1s=5.556% */
  0% { opacity: 0; }
  11.11% { opacity: 1; } /* 2 sec fade in */
  33.33% { opacity: 1; } /* ~ 4 sec visible */
  44.44% { opacity: 0; } /* ~ 2 sec fade-out */
  100% { opacity: 0; }
}
.carousel-slideshow div{
  opacity:0; 
  animation-iteration-count: infinite;
}

/* SLIDER WITH 2 SLIDES */
.carousel-slideshow-2-slides div{
  animation-duration: 12s;
  -webkit-animation-name: fade2slides;
  animation-name: fade2slides;
}
.carousel-slideshow-2-slides div:nth-child(1) { animation-delay: -2s; }
.carousel-slideshow-2-slides div:nth-child(2) { animation-delay: 4s; }

/* SLIDES WITH 3 SLIDES*/
.carousel-slideshow-3-slides div{
  animation-duration: 18s;
  -webkit-animation-name: fade3slides;
  animation-name: fade3slides;
}
.carousel-slideshow-3-slides div:nth-child(1) { animation-delay: -2s; }
.carousel-slideshow-3-slides div:nth-child(2) { animation-delay: 4s; }
.carousel-slideshow-3-slides div:nth-child(3) { animation-delay: 10s; }



/* COLOR FILTERS */
.carousel-background-blue-filter,
.carousel-background-yellow-filter{
  z-index: 2;
}
.carousel-background-blue-filter{
  background-color: var(--clr-1-a-40);
}
.carousel-background-yellow-filter{
  background-color: var(--clr-2-a-40);
}

/* ALL DIFFERENT (SKEWED) OVERLAYS*/
.carousel-overlay{
  z-index: 3;
  -ms-transform: skew(-15deg, 0deg);
  -webkit-transform: skew(-15deg, 0deg);
  transform: skew(-15deg, 0deg);
}
.carousel-overlay-left-1{
  grid-column: col1 / col1;
  transform-origin: top left;
}
.carousel-overlay-left-25{
  grid-column: col1 / col3;
  transform-origin: top left;
}
.carousel-overlay-left-33{
  grid-column: col1 / col4;
  transform-origin: top left;
}
.carousel-overlay-left-50{
  grid-column: col1 / col6;
  transform-origin: top left;
}
.carousel-overlay-left-66{
  grid-column: col1 / col8;
  transform-origin: top left;
}
.carousel-overlay-left-75{
  grid-column: col1 / col9;
  transform-origin: top left;
}
.carousel-overlay-right-1{
  grid-column: col12 / col12;
  transform-origin: bottom right;
}
.carousel-overlay-right-25{
  grid-column: col10 / col12;
  transform-origin: bottom right;
}
.carousel-overlay-right-33{
  grid-column: col9 / col12;
  transform-origin: bottom right;
}
.carousel-overlay-right-50{
  grid-column: col7 / col12;
  transform-origin: bottom right;
}
.carousel-overlay-right-66{
  grid-column: col5 / col12;
  transform-origin: bottom right;
}
.carousel-overlay-right-75{
  grid-column: col4 / col12;
  transform-origin: bottom right;
}
.carousel-overlay-full{
  z-index: 3;
  -ms-transform: skew(0, 0deg);
  -webkit-transform: skew(0, 0deg);
  transform: skew(0, 0deg);
  grid-column: col1 / col12;
}



/* CAROUSEL CONTENT CONTAINER */
.carousel-content{
  z-index: 4;
  grid-template-rows: auto;
  grid-auto-flow: dense;
  justify-items: stretch;
  align-items: start;
  /*padding-top:3rem;
  padding-bottom:3rem;*/
}





/* CAROUSEL CONTENT DESIGN */
.carousel-content-column > *:not(:first-child) {
  margin-top:2rem;
}
.carousel-content .pretitle{
  font-size: 2.4rem;
  font-weight: 400;
  text-shadow: 0 0 5px var(--clr-black);
}
.carousel-content .title,
.carousel-content h1{
  color: var(--clr-white);
  font-size: 5rem;
  font-weight: 700;
  line-height: 1.25em;
  text-shadow: 0 0 5px var(--clr-black);
}
.carousel-content h1.whitney-bold,
.carousel-content .title.whitney-bold{
  font-size: 6rem;
  font-weight: normal;
}
.carousel-content .subtitle{
  color: var(--clr-white);
  font-size: 2.1rem;
  font-weight: 300;
  text-shadow: 0 0 5px var(--clr-black);
}
.carousel-content .text{
  color: var(--clr-white);
  font-size: 1.8rem;
  font-weight: 300;
  text-shadow: 0 0 5px var(--clr-black);
}
.carousel-content .branche{
  display: block;
}
.carousel-content .niveaus{
  color: var(--clr-white);
  font-size: 1.8rem;
  font-weight: 600;
  text-shadow: 0 0 5px var(--clr-black);
}
.carousel-content .theorielocaties{
  color: var(--clr-white);
  font-size: 1.8rem;
  font-weight: 400;
  text-shadow: 0 0 5px var(--clr-black);
}


.carousel-content .buttons{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: stretch;
  gap: 1rem;
}
.carousel-content .buttons a{
  align-self: center;
  display: flex;
  align-items: center;
}



/* CAROUSEL MENU SETTINGS */
.carousel-menu ul{
  list-style: none;
  margin:0; padding: 0;
  box-shadow: 0 0 5px var(--clr-black);
}
.carousel-menu li:first-child a{
  border-top:none;
}

/* Button general settings*/
.carousel-menu a{
  display: block;
  padding: 2rem 3rem;
  font-size:1.6rem;
  font-weight:600;
  text-decoration: none;
  overflow: hidden;

  border-top: solid 1px var(--clr-gray-1-60);
  background-color: var(--clr-white);
  border-right: solid 5px var(--clr-white);
  color: var(--clr-1);
}
.carousel-menu a[href]:hover{
  background-color: var(--clr-white);
  border-right: solid 5px var(--clr-2);
  color: var(--clr-2);
}

/* Blue button */
.carousel-menu li.blue a,
.carousel-menu a.blue{
  border-top: none;
  background-color: var(--clr-1);
  border-right: solid 5px var(--clr-1);
  color: var(--clr-white) !important;
}
.carousel-menu li.blue a[href]:hover,
.carousel-menu a.blue[href]:hover{
  background-color: var(--clr-1-40);
  border-right: solid 5px var(--clr-1-40);
  color: var(--clr-white) !important;
}

/* Yellow button */
.carousel-menu li.yellow a,
.carousel-menu a.yellow{
  border-top: none;
  background-color: var(--clr-2);
  border-right: solid 5px var(--clr-2);
  color: var(--clr-white) !important;
}
.carousel-menu li.yellow a[href]:hover,
.carousel-menu a.yellow[href]:hover{
  background-color: var(--clr-2-40);
  border-right: solid 5px var(--clr-2-40);
  color: var(--clr-white) !important;
}



@media only screen and (min-width: 1201px) and (max-width: 1919px) {
  .carousel-content{
    grid-template-areas:
      "col1 col2 col2 col4";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /*column-gap:9rem;*/
  }
  .carousel-content > *{
    grid-column: col2;
  }
  .carousel-content .carousel-menu{
    grid-column: col4;
  }
  .carousel-content .title,
  .carousel-content h1{
    font-size: 3rem;
  }
  .carousel-content h1.whitney-bold,
  .carousel-content .title.whitney-bold{
    font-size: 5rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
  .carousel-content{
    grid-template-areas:
      "col1 col2";
    grid-template-columns: 3fr 1fr;
    column-gap:9rem;
  }
  .carousel-content > *{
    grid-column: col1;
  }
  .carousel-content .carousel-menu{
    grid-column: col2;
  }
  .carousel-content .title,
  .carousel-content h1{
    font-size: 3rem;
  }
  .carousel-content h1.whitney-bold,
  .carousel-content .title.whitney-bold{
    font-size: 5rem;
  }
}



@media only screen and (max-width: 768px) {
  .carousel-overlay{
    -ms-transform: skew(0);
    -webkit-transform: skew(0);
    transform: skew(0);
    grid-column: col1 / col12 !important;
  }
  .carousel-content{
    grid-template-areas:
      "col1";
    grid-template-columns: 1fr;
  }
  .carousel-content > *{
    grid-column: col1 / col1 !important;
  }
  .carousel-content-column > *:not(:first-child) {
    margin-top:2rem;
  }
  .carousel-content .pretitle{
    font-size:1.8rem;
  }
  .carousel-content .title,
  .carousel-content h1{
    font-size: 3rem;
    
  }
  .carousel-content h1.whitney-bold,
  .carousel-content .title.whitney-bold{
    font-size:4rem;
  }
  .carousel-content .subtitle{
    font-size:1.8rem;
  }
  .carousel-content .text{
    font-size:1.6rem;
  }
}