@charset "UTF-8";
/*
 *   https://github.com/kenwheeler/slick/blob/master/slick/slick.scss
 *   https://github.com/kenwheeler/slick/blob/master/slick/slick-theme.scss
 */
/* compiling variables */
/*
 *   https://github.com/kenwheeler/slick/blob/master/slick/slick.scss
 *   https://github.com/kenwheeler/slick/blob/master/slick/slick-theme.scss
 */
/* Overwriting Default Vars*/
/*
 * CORLORS
 */
/*
 * ARROWS
 *
 */
/* FontAwesom Settings */
/*  !!! mv this to an own include file  */
/* for inline SVG usage */
/* for SVG file usage */
/* FontAwesom Settings */
/* Button (= clickable area)*/
/* this works for fontawsome icons */
/* this works for inline svg */
/*
 * Dots
 *
 */
/* if there are more mixins use:
 *  // Utilities
 *  @import "mixins/breakpoints";
 *  @import "mixins/hover";
 *  @import "mixins/.....";
 */
/* sets a margin or padding betwenn the single slides
 * more infos see https://github.com/kenwheeler/slick/issues/582
 */
/* TODO: use gulp cfg with param project name and repleace it here
 *  $project: 00_default; */
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  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;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  [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; }

/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat; }

/* Icons */
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none; }
  .slick-prev:hover, .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    outline: none;
    background: transparent;
    color: transparent; }
    .slick-prev:hover:before, .slick-prev:focus:before,
    .slick-next:hover:before,
    .slick-next:focus:before {
      opacity: 1; }
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: 0.25; }
  .slick-prev:before,
  .slick-next:before {
    font-family: "";
    font-size: 20px;
    line-height: 1;
    color: white;
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

.slick-prev {
  left: -25px; }
  [dir="rtl"] .slick-prev {
    left: auto;
    right: -25px; }
  .slick-prev:before {
    content: ""; }
    [dir="rtl"] .slick-prev:before {
      content: ""; }

.slick-next {
  right: -25px; }
  [dir="rtl"] .slick-next {
    left: -25px;
    right: auto; }
  .slick-next:before {
    content: ""; }
    [dir="rtl"] .slick-next:before {
      content: ""; }

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px; }

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%; }
  .slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer; }
    .slick-dots li button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0px;
      font-size: 0px;
      color: transparent;
      padding: 5px;
      cursor: pointer; }
      .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 {
        position: absolute;
        top: 0;
        left: 0;
        content: "•";
        width: 20px;
        height: 20px;
        font-family: "";
        font-size: 6px;
        line-height: 20px;
        text-align: center;
        color: #669DCA;
        opacity: 0.25;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
    .slick-dots li.slick-active button:before {
      color: #669DCA;
      opacity: 0.75; }

/* margin or padding between slides, */
/* !!! DON'T use this in FULL SCREEN Sliders !!! */
/*
 * ARROWS
 *
 */
.mv-slide {
  position: relative;
  /* FIX:
   *  arrow key breaks the total page width this will fix it (play with the settings to arrange the arrows)
   *      * threr are diffence if the arrows are inside the slides or outside
   *      * this settings are for arrwos OUTSIDE the slides
   *      * see class &.full-width-hover for arrows INSIDE the slides which e.g. comes up on hover
   */
  /* FIX:
   *  arrow key breaks the total page width this will fix it (play with the settings to arrange the arrows)
   *      * threr are diffence if the arrows are inside the slides or outside
   *      * this settings are for arrwos INSIDE the slides
   *      * TODO make hover working, d.h. derzeit sind die arrows immer da
   *      *  see class &.full-width for arrows OUTSIDE the slides
   */ }
  .mv-slide.mv-arrows-outer {
    /*  free space for arrow Keys
	 *    NOT nessesary if the arrow Keys are "inside" the slides
	 */
    margin-left: 20px;
    margin-right: 20px; }
    .mv-slide.mv-arrows-outer .slick-slider {
      /*  free space for arrow Keys
	   *    NOT nessesary if the arrow Keys are "inside" the slides
	   */ }
      .mv-slide.mv-arrows-outer .slick-slider .slick-list {
        width: 90%;
        margin-left: auto;
        margin-right: auto; }
      .mv-slide.mv-arrows-outer .slick-slider .slick-next,
      .mv-slide.mv-arrows-outer .slick-slider .slick-prev {
        position: absolute;
        margin-top: -10px;
        padding: 0;
        top: 50%;
        width: 3%;
        border: 0;
        cursor: pointer;
        display: block;
        font-size: 0;
        height: 100%;
        line-height: 0;
        z-index: 10; }
        .mv-slide.mv-arrows-outer .slick-slider .slick-next:before,
        .mv-slide.mv-arrows-outer .slick-slider .slick-prev:before {
          z-index: 11; }
      .mv-slide.mv-arrows-outer .slick-slider .slick-prev {
        left: 5px; }
        [dir="rtl"] .mv-slide.mv-arrows-outer .slick-slider .slick-prev {
          left: auto;
          right: 5px; }
      .mv-slide.mv-arrows-outer .slick-slider .slick-next {
        right: 5px; }
        [dir="rtl"] .mv-slide.mv-arrows-outer .slick-slider .slick-next {
          left: 5px;
          right: auto; }
  .mv-slide.mv-arrows-inner {
    /* Arrows Icons / Keys  */ }
    .mv-slide.mv-arrows-inner .slick-next,
    .mv-slide.mv-arrows-inner .slick-prev {
      /* for y alignment 0 - 100% !!! look for a better solution !!!! */
      top: 50%;
      /* height of "click arear" 0 - 100% */
      height: 50px;
      /* for x alignment bzw. width of "click arear"; see also Class .slick-[prev-next] */
      width: 50px;
      position: absolute;
      padding: 0;
      border: 0;
      background-color: rgba(255, 255, 255, 0.99);
      border-radius: 50px;
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      opacity: 0.65;
      cursor: pointer;
      display: block;
      font-size: 0;
      line-height: 0;
      z-index: 10;
      /* fontawesom default class for arrows */ }
      .mv-slide.mv-arrows-inner .slick-next:hover, .mv-slide.mv-arrows-inner .slick-next:focus,
      .mv-slide.mv-arrows-inner .slick-prev:hover,
      .mv-slide.mv-arrows-inner .slick-prev:focus {
        opacity: 0.9; }
      .mv-slide.mv-arrows-inner .slick-next:before,
      .mv-slide.mv-arrows-inner .slick-prev:before {
        background-color: rgba(255, 255, 255, 0.99);
        font-family: inherit;
        z-index: 11; }
      .mv-slide.mv-arrows-inner .slick-next .mv-fa,
      .mv-slide.mv-arrows-inner .slick-prev .mv-fa {
        font-size: 2rem;
        color: rgba(0, 0, 0, 0.5); }
    .mv-slide.mv-arrows-inner .slick-prev {
      left: 15px; }
      [dir="rtl"] .mv-slide.mv-arrows-inner .slick-prev {
        left: auto;
        right: 15px; }
      .mv-slide.mv-arrows-inner .slick-prev:before {
        content: ""; }
    .mv-slide.mv-arrows-inner .slick-next {
      right: 15px; }
      [dir="rtl"] .mv-slide.mv-arrows-inner .slick-next {
        left: 15px;
        right: auto; }
      .mv-slide.mv-arrows-inner .slick-next:before {
        content: ""; }

/* ??? */
/*
 * DOTS
 *
 */
/*
 * generat classes for dots colors and dots froms (svgs)
 *  * Shape is : full for active ; circle for inactive
 *  * use this classes e.g. slick-dots-mv-blue in PluginFlexForms aditional Dos Classes
 */
.slick-dots-mv-primary li button:hover:before, .slick-dots-mv-primary li button:focus:before {
  opacity: 1; }

.slick-dots-mv-primary li button:before {
  color: #f0067e;
  opacity: 0.25;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f0067e' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-primary li.slick-active button::before {
  color: #f0067e;
  opacity: 0.75;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f0067e' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

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

.slick-dots-mv-secondary li button:before {
  color: #4a4a49;
  opacity: 0.25;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%234a4a49' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-secondary li.slick-active button::before {
  color: #4a4a49;
  opacity: 0.75;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%234a4a49' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

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

.slick-dots-mv-white li button:before {
  color: #fff;
  opacity: 0.25;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-white li.slick-active button::before {
  color: #fff;
  opacity: 0.75;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

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

.slick-dots-mv-beige li button:before {
  color: #fff3dc;
  opacity: 0.25;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff3dc' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-beige li.slick-active button::before {
  color: #fff3dc;
  opacity: 0.75;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff3dc' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

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

.slick-dots-mv-magenta li button:before {
  color: #f0067e;
  opacity: 0.25;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f0067e' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-magenta li.slick-active button::before {
  color: #f0067e;
  opacity: 0.75;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f0067e' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

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

.slick-dots-mv-cyan li button:before {
  color: #00b0b9;
  opacity: 0.25;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2300b0b9' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-cyan li.slick-active button::before {
  color: #00b0b9;
  opacity: 0.75;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2300b0b9' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

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

.slick-dots-mv-red li button:before {
  color: #be1522;
  opacity: 0.25;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23be1522' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-red li.slick-active button::before {
  color: #be1522;
  opacity: 0.75;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23be1522' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

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

.slick-dots-mv-blue li button:before {
  color: #669dca;
  opacity: 0.25;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23669dca' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-blue li.slick-active button::before {
  color: #669dca;
  opacity: 0.75;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23669dca' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

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

.slick-dots-mv-green li button:before {
  color: #97d700;
  opacity: 0.25;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2397d700' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-green li.slick-active button::before {
  color: #97d700;
  opacity: 0.75;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2397d700' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

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

.slick-dots-mv-black li button:before {
  color: black;
  opacity: 0.25;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-black li.slick-active button::before {
  color: black;
  opacity: 0.75;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

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

.slick-dots-mv-gray-1 li button:before {
  color: #4a4a49;
  opacity: 0.25;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%234a4a49' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-gray-1 li.slick-active button::before {
  color: #4a4a49;
  opacity: 0.75;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%234a4a49' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-gray-2 li button:hover:before, .slick-dots-mv-gray-2 li button:focus:before {
  opacity: 1; }

.slick-dots-mv-gray-2 li button:before {
  color: #9d9d9c;
  opacity: 0.25;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%239d9d9c' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-gray-2 li.slick-active button::before {
  color: #9d9d9c;
  opacity: 0.75;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%239d9d9c' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-gray-3 li button:hover:before, .slick-dots-mv-gray-3 li button:focus:before {
  opacity: 1; }

.slick-dots-mv-gray-3 li button:before {
  color: #dadada;
  opacity: 0.25;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23dadada' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-gray-3 li.slick-active button::before {
  color: #dadada;
  opacity: 0.75;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23dadada' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-gray-4 li button:hover:before, .slick-dots-mv-gray-4 li button:focus:before {
  opacity: 1; }

.slick-dots-mv-gray-4 li button:before {
  color: #e0e0e0;
  opacity: 0.25;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23e0e0e0' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-gray-4 li.slick-active button::before {
  color: #e0e0e0;
  opacity: 0.75;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23e0e0e0' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-gray-5 li button:hover:before, .slick-dots-mv-gray-5 li button:focus:before {
  opacity: 1; }

.slick-dots-mv-gray-5 li button:before {
  color: #f6f6f6;
  opacity: 0.25;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f6f6f6' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z'    /%3E%3C/svg%3E"); }

.slick-dots-mv-gray-5 li.slick-active button::before {
  color: #f6f6f6;
  opacity: 0.75;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f6f6f6' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

/* Full Dots for inactive and active states */
.slick-dots-full li button:hover:before, .slick-dots-full li button:focus:before {
  opacity: .75; }

.slick-dots-full li button:before {
  color: #4a4a49;
  opacity: 0.25;
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%234a4a49' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

.slick-dots-full li.slick-active button::before {
  content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f0067e' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'    /%3E%3C/svg%3E"); }

/* Dot Sizes */
.slick-dots-size-xs li button::before {
  font-size: 8px !important;
  width: 8px !important; }

.slick-dots-size-s li button::before {
  font-size: 10px !important;
  width: 10px !important; }

.slick-dots-size-m li button::before {
  font-size: 12px !important;
  width: 12px !important; }

.slick-dots-size-l li button::before {
  font-size: 15px !important;
  width: 15px !important; }

.slick-dots-size-xl li button::before {
  font-size: 20px !important;
  width: 20px !important; }

/*
  !!! this should be done in @each above dont use this anny more

$fas-fa-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" /></svg>';
$far-fa-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"/></svg>';

$slick-dot-character-active: url($svg-perfix + $fas-fa-circle);
$slick-dot-character-no-active: url($svg-perfix + $far-fa-circle);
//$slick-dot-character: "\2022" !default;

*/
.mv-slide {
  /* DOTS position and styling */ }
  .mv-slide .slick-dots {
    /* for debuggng purpose */
    /* see also $slick-dot-xxx Variable */
    /* for y alignment use bottom or top also with negaitve values */
    bottom: -30px;
    /* for x alignment use text-align and padding */
    text-align: "center";
    width: 100%; }
    .mv-slide .slick-dots li {
      /* space between (around) dots y x */
      margin: 0px 2px; }
      .mv-slide .slick-dots li button::before {
        font-size: 10px;
        width: 10px; }

/* https://github.com/misterboe/slickcarousel/blob/master/Resources/Public/Css/slick.scss */
.mv-slide {
  position: relative; }
  .mv-slide.mv-bg-simple .slick-slide {
    height: auto; }
  .mv-slide.mv-htmloverlay .slick-item.overlay-outer {
    position: relative;
    padding: 0 10px; }
    .mv-slide.mv-htmloverlay .slick-item.overlay-outer picture img {
      margin: 0px;
      min-height: 450px; }
    .mv-slide.mv-htmloverlay .slick-item.overlay-outer .overlay-inner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .mv-slide.mv-htmloverlay .slick-item.overlay-outer .overlay-inner .inner-content {
        /* !!! inner content should be styeled in porvider EXT not at this plase */
        /*
     THIS SETTINGS are for spill.at move it to  porvider EXT
          padding: 1rem;
          margin-bottom: 2rem;
          color: white;
          background-color: rgba(white, 0.1);
          font-size: 22px;

          @media ( min-width: 1200px ) {
            max-width: 33vw;
            margin-left: 14rem;
          }
          @media ( min-width: 577px ) and ( max-width: 1199px) {
            max-width: 60vw;
          }
          // @include media-breakpoint-down(sm)
          @media ( max-width: 576px ) {
            max-width: 100vw;
          }
*/ }