.carrousel, body > aside .slider, body > aside .slick-list, .slick-track, body > aside .slider header {height: 100%;}

@media only screen and (min-width: 800px) 
{

  body > aside {position: relative; height: 100vh;}

}

.slick-slider 
  {
    position: relative;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }

.slick-list
  {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

.slick-list:focus {outline: none;}
.slick-list.dragging {cursor: pointer; cursor: hand;}

.slick-slider .slick-track, .slick-slider .slick-list
  {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

.slick-track 
  {
    position: relative;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    align-content: stretch;
  }

.slick-track:before, .slick-track:after {display: table; content: '';}
.slick-track:after {clear: both;}
.slick-loading .slick-track {visibility: hidden;}

.slick-slide {display: none; min-height: 1px;}
.carrousel .slick-slide {position: relative;}
.carrousel .slick-slide > figure {width: 100%;}

[dir='rtl'] .slick-slide {float: right;}

.slick-slide img {display: block;}

.slick-slide.slick-loading img {display: none;}
.slick-slide.dragging img {pointer-events: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}

.slick-vertical .slick-slide
  {
    display: block;
    height: auto;
    border: 1px solid transparent;
  }

.slick-arrow.slick-hidden {display: none;}

body > aside .logo 
  {
    position: absolute;
    top: 0;
    width: 240px; 
    z-index: 10; 
  }


@media only screen and (max-width: 449px) 
{

  body > aside .logo {left: 0;}

}

@media only screen and (min-width: 450px) 
{


  body > aside .logo {left: 40px;}

}


@media only screen and (min-width: 450px) and (max-width: 799px) 
{

  body > aside .slick-slide > section, body > aside .slick-slide > aside {padding-left: 45px; padding-right: 45px;}

}

body > aside .slick-slide > figure img {height: 100%; width: 100%;}

@media only screen and (max-width: 799px) 
{

  .carrousel .slick-slide > * {position: relative;}
  .carrousel .slick-slide > figure {height: 60vh;}

}

@media only screen and (min-width: 800px) 
{

  .carrousel .slick-slide > * {position: absolute;}
  body > aside .slick-slide > figure {height: 100%;}
  body > aside .slick-slide > section {max-width: 60%;}
  body > aside .slick-slide > aside {max-width: 30%; z-index: 10;}

  body > aside > .logo {width: 240px; z-index: 10; top: 0;}

  .telvb {top: 40px;}
  .telvm {top: 44%; transform: translateY(-50%);}

  body > aside .slick-slide > section.telvo {bottom: 0; padding-bottom: 1em;}
  body.scrolled > aside .slick-slide > section {padding-bottom: 0;}
  body > aside .slick-slide > aside.telvo {bottom: 40px;}

  body > figure {left: 40px;}
  .telhl {left: 90px;}
  .telhm {left: 50%; transform: translateX(-50%);}
  .telhr {right: 90px;}

  .telvm.telhm {transform: translate(-50%,-50%);}

  .slick-slide > section {max-width: 50%;}

}


/* ------- knoppen ------- */

.slick-knop
  {
    font-size: 1.1em;
    line-height: 0;
    position: absolute;
    display: block;
    width: 25px;
    height: 25px;
    line-height: 24px;
    border-radius: 100%;
    text-align: center;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    z-index: 40;
  }

.slick-knop:before {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.slick-knop:focus {outline: none;}
.slick-close {top: 35px; right: 15px;}

@media only screen and (max-width: 799px) 
{

  .slick-knop {top: 35vh;}
  .slick-prev {left: 5%;}
  .slick-next {right: 5%;}

}

@media only screen and (min-width: 800px) 
{

  .slick-knop {top: 50%;}
  .slick-prev {left: 60px;}
  .slick-next {right: 60px;}

}


/* ------- stippen ------- */

.slick-dots li, .slick-dots li button, .slick-dots li button:before {outline: 0;}
.slick-dots li, .slick-dots li button {width: 20px; height: 20px;}

.slick-dots
  {
    position: absolute;
    bottom: -30px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    transition: background 1s;
    text-align: center;
  }


.slick-dots li
  {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
  }

.slick-dots li:before {content: none;}

.slick-dots li button
  {
    font-size: 0;
    line-height: 0;
    display: block;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: 0;
    background: transparent;
  }

.slick-dots li button:hover, .slick-dots li button:focus {outline: none;}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {opacity: 1;}

.slick-dots li button:before
  {
    font-family: 'FAS';
    font-size: 20px;
    line-height: 1;
    content: "\f111";
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }


/* ------- kleuren ------- */

body > aside .logo, body > aside .slick-slide > section, .slick-knop {background-color: #fff;}
body > aside .slick-slide > aside, .slick-knop:hover {background-color: #0a1f8f;}
body > aside .slick-slide > aside {color: #fff;}

.slick-dots li button:before {color: #e72e8a;}
.slick-dots li button:hover:before {color: #ba2a70;}
.slick-dots li.slick-active button:before {color: #000;}

.slick-knop {filter: drop-shadow(0 0 8px hsl(220deg 60% 50% / 0.25));}
.slick-knop:before {color: #61a60e;}
.slick-knop:hover:before {color: #fff;}

.slick-prev:before {content: "\f104";}
.slick-next:before {content: "\f105";}
.slick-close:before {content: "\f00d";}

.slick-knop {transition: background-color 1s, color 1s;}
.slick-knop:before, .slick-dots li button:before {transition: color 1s;}