/* slider mini */

.slider-mini {
    display: block;
    position: absolute;
    top: calc(50% - 40%);
    left: 0;
    right: 0;
    width: 100vw;
    height: 10%;
    z-index: 10 !important;
    overflow: hidden;
    margin: 0rem auto;
    box-sizing: border-box;
    text-align: center;
    font-size: 1rem;
    background-color: var(--default-slide-background-color, transparent);
    animation-name: slider-fadein-keyframes;
    animation-direction: normal;
    animation-duration: 1200ms;
    animation-iteration-count: 1;
    animation-delay: 0.1s;
    animation-timing-function: ease-out;
  }
  
  .slider-mini.option--mode-inline {
    position: relative;
    width: unset;
    height: 100%;
    margin: 0rem 0rem;
  }

  .slider-mini > .slider-mini-content {
    display: inline-flex;
    position: relative;
    z-index: 1;
    flex-flow: row nowrap;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 0em 7.5em;
    padding: 0em 1.5em; /* match the gap distance */
    margin: 0em 0em;
    box-sizing: border-box;
    line-height: 2rem;
    -webkit-transition: left 1500ms cubic-bezier(0.8,0,0.025,1.105);
    -moz-transition: left 1500ms cubic-bezier(0.8,0,0.025,1.105);
    transition: left 1500ms cubic-bezier(0.8,0,0.025,1.105);
  }
  
  .slider-mini.option--mode-inline > .slider-mini-content {

  }

  .slider-mini-panel {
    display: inline-flex;
    position: relative;
    flex: 100% 0 0;
    flex-flow: column nowrap;
    width: 90%;
    height: 100%;
    padding: 0em 0em;
    margin: 0em 0em;
    justify-content: center;
    align-content: center;
    box-sizing: content-box;
    border-left-style: solid;
    border-left-width: 0.5em;
    border-left-color: #ff02d5;
    line-height: 2rem;
    background-color: #ff02d522;
    cursor: pointer;
  }
  
  .slider-mini.option--mode-inline .slider-mini-panel > .slider-mini-panel-content {

  }

  .slider-mini-panel > .slider-mini-panel-content {
    display: inline-flex;
    flex-direction: row nowrap;
    grid-area: slider-mini-panel-content;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 0rem 2rem;
    line-height: 1.25rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--default-slide-font-color, rgb(70, 70, 70));
  }

  .slider-mini-panel.option--mode-inline > .slider-mini-panel-content {
    
  }

  .slider-mini > .slider-mini-area-backward {
    display: block;
    position: absolute;
    top: calc(0% - var(--slide-button-backward-top-offset, 0rem));
    left: calc(0% - var(--slide-button-backward-left-offset, 0rem));
    width: 10%;
    height: 100%;
    z-index: 3;
    opacity: 0;
    background-color: var(--default-slide-area-forward-background-color, transparent);
    -webkit-transition: opacity 300ms ease-out;
    -moz-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
    transform: translateX(0rem);
    transition: 300ms all ease-out;
    cursor: pointer;
  }
  
  .slider-mini-area-backward > .slider-mini-button-backward {
    display: inline-block;
    position: relative;
    top: calc(50% - 2.5rem - var(--slide-button-backward-top-offset, 0rem));
    left: calc(2% - var(--slide-button-backward-left-offset, 0rem));
    opacity: 1;
    padding: 1.25rem;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2rem;
    font-weight: 900;
    background-color: var(--default-slide-button-backward-background-color, #fff);
    color: var(--default-slide-button-backward-font-color, #bebebe);
    border-radius: 0.5rem;
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
  }
  
  .slider-mini > .slider-mini-area-backward:hover {
    opacity: 0.75;
    transform: translateX(1rem);
  }
  
  .slider-mini-area-backward > .slider-button-backward:before {
    content: '\003C';
    margin-left: -0.5rem;
  }
  
  .slider-mini > .slider-mini-area-forward {
    display: block;
    position: absolute;
    top: calc(0% - var(--slide-area-forward-top-offset, 0rem));
    right: calc(0% - var(--slide-area-forward-right-offset, 0rem));
    width: 10%;
    height: 100%;
    z-index: 3;
    opacity: 0;
    padding: 0rem;
    margin: 0rem;
    background-color: var(--default-slide-area-forward-background-color, transparent);
    -webkit-transition: opacity 300ms ease-out;
    -moz-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
    transform: translateX(0rem);
    transition: 300ms all ease-out;
    cursor: pointer;
  }
  
  .slider-mini-area-forward > .slider-mini-button-forward {
    display: inline-block;
    position: relative;
    top: calc(50% - 3rem - var(--slide-button-forward-top-offset, 0rem));
    left: calc(2% - var(--slide-button-forward-right-offset, 0rem));
    opacity: 1;
    padding: 1.5rem;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 3rem;
    font-weight: 900;
    background-color: var(--default-slide-button-forward-background-color, #fff);
    color: var(--default-slide-button-forward-font-color, #bebebe);
    border-radius: 0.5rem;
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
  }
  
  .slider-mini > .slider-mini-area-forward:hover {
    opacity: 0.75;
    transform: translateX(-1rem);
  }
  
  .slider-mini-area-forward > .slider-mini-button-forward:before {
    content: '\003E';
    margin-right: -0.5rem;
  }
  
  .slider-mini > .slider-mini-content > .slider-mini-panel:nth-child(1) {
    -left: 100vw !important;
  }


  @media only screen and (max-width: 450px) {
    .slider-mini {
      top: 1%;
      -height: 95%;
    }
  
    .slider-mini > .slider-mini-content {
      align-items: flex-start;
    }
  
    .slider-mini-panel {
      -min-height: 250px;
    }
  }
  
  @media only screen and (max-width: 850px) {
    .slider-mini {
      -top: 1%;
      -height: 95%;
    }
  
    .slider-mini .slider-mini-content {
      padding: 0em 0.75em !important;
    }

    .slider-mini-panel {
      width: 100%;
      min-width: 92.5vw;
      -max-height: 700px;
      -min-height: 250px;
    }

    .slider-mini-panel > .slider-mini-panel-content {
        padding: 1rem 2rem;
    }
  }
  
  @media only screen and (min-width: 451px) {
    .slider-mini-panel {

    }
  }
  
  @media only screen and (min-width: 851px) {
    .slider-mini-panel {
      min-width: 92.5vw;
      -max-width: 850px;
      -max-height: 550px;
      -min-height: 250px;
    }
  }
  
  @media only screen and (min-width: 1024px) {
    .slider-mini > .slider-mini-content {
      -padding: 0rem 1rem;
    }
  }
  
  @media only screen and (min-width: 1600px) {
    .slider-mini > .slider-mini-content {
      -padding: 0rem 5rem;
    }
  }
  
  @media only screen and (min-width: 2048px) {
    .slider-mini > .slider-mini-content {
      -padding: 0rem 5rem;
    }
  }
  
  @media only screen and (max-height: 300px) {
    .slider-mini {
      top: auto;
      -height: 100%;
    }
  
    .slider-mini-panel {
      min-width: 100%;
      -min-height: 250px;
    }
  }