.lko-bannerslides {
    display: none;
}

.lko-bannerslides:first-child {
    display: block;
}

.lko-banner-error {
    color: red;
    background-color:white;
    border-color: red;
    margin: 2em;
    padding: 1em;
    border-style: solid;
    z-index:1;
}

/* Added for carousel from old Helix custom.css */
/* HEADER */

.lko-carousel-container {
  display: flex;
  background-color: #595e76;       /* LKOpalette 1010 260223113824 Header bg */
/*min-height: 140px; /* Place holder wanneer LKOheader-center-images niets bevat;                      */
                     /* Als je deze disabled, EN klas 'LKOheader-center-images' op display=none zet,   */
                     /* schuift de rij sp-top3 met plaatjes omhoog in de header                        */
}
.lko-carousel-flex-item-left {
  padding: 10px 10px 10px 0px;
/*  min-width: 150px; /* Zet een minimum breedte als spacing */
/*  flex: 10%;/* Reserve some space right to the center item */
  flex: 1%; /* Provide almost full width for center item */
}

.lko-carousel-flex-item-center {
    padding: 0;
}

.lko-carousel-flex-item-right {
  padding: 0 10px 10px 10px;
/*  min-width: 150px; /* Zet een minimum breedte als spacing */
/*  flex: 10%;/* Reserve some space right to the center item */
  flex: 1%; /* Provide almost full width for center item */
}
.lko-carousel-center-images {
  display: flex;    /* Als je deze op 'none' zet EN property 'min-height' in klas 'LKOheader-container */
  overflow: clip;   /* uit zet, dan schuift de rij sp-top3 met plaatjes omhoog in de header            */
}
                                        /***************************************************************************************************/
@media screen and (max-width: 992px) {  /* Header layout turning point * NOTE: must correspond to the width settings of tablet-phone modus */
    .lko-carousel-center-images {       /***************************************************************************************************/
        display: none;
    }
}

/* @group animation */
:root {
   --lko-carousel-animation-duration:  5s;  /* This value determines the total duration of the animation                                 */
                                            /* IMPORTANT: This value must equal te refresh time in the setTimeout() function in PHP code */
}

.lko-carousel_fading { /* Class introduced for fading animation */
  -webkit-animation-name: lko-carousel_fading;
  -webkit-animation-duration: var(--lko-carousel-animation-duration);
  -webkit-animation-direction: alternate;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-fill-mode: forwards;
  
  animation-name: lko-carousel_fading;
  animation-duration: var(--lko-carousel-animation-duration);
  animation-direction: alternate; /* Fading in and, reverse, fading out */
  animation-iteration-count: 2;   /* Two fadings apply here: in and out */
  animation-fill-mode: forwards;  /* The animation will retain the computed values set by the last keyframe encountered during execution */
}

@-webkit-keyframes lko-carousel_fading {
    0% {opacity: 0}
   30% {opacity: 1} /* The percentage value determines the relative end point of the animations fade in */
  100% {opacity: 1}
}

@keyframes lko-carousel_fading {
    0% {opacity: 0}
   30% {opacity: 1} /* The percentage value determines the relative end point of the animations fade in */
  100% {opacity: 1}
}