@import './fonts.pcss';
@import './reset.pcss';

@import '../src/style/var.css';
@import '../src/style/viewport.css';

@import 'flatpickr/dist/flatpickr.css';

/* autoprefixer grid: autoplace */
::-webkit-input-placeholder { /* Edge */
  color: var(--grey-medium);
  font-size: 18px;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--grey-medium);
  font-size: 18px;
}

::placeholder {
  color: var(--grey-medium);
  font-size: 18px;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: white;
}
::-webkit-scrollbar-corner {
  -webkit-appearance: none;
  display: none;
}
/* background-image: none;
    background-color: var(--grey-light); */

.flatpickr-day.hidden {
  display: block !important;
}

#sapper {

  font-family: var(--proxima), Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--black);

  .transition {
    transition: var(--transition);
  }
  .center-container {
    max-width: 1024px;
    margin: 0 auto;
  }

  .relative {
    position: relative;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }

  .no-br br { display: none }

  .hiddenflow {
    overflow: hidden;
  }
  .hoverflow-visible {
    overflow: visible
  }
  .scroll { overflow: scroll }
  .scroll-y {
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .pointer {
    cursor: pointer;
  }
  .not-allowed {
    cursor: not-allowed
  }

  .no-capture { pointer-events: none }
  .capture { pointer-events: initial }

  .greyscale {
    filter: grayscale(1);
  }

  .opacity-\.4 {
    opacity: .4
  }

  .f-41 {
    font-size: 41px;
    line-height: 1;
  }
  .f-24 {
    font-size: 24px;
    line-height: 30px;
  }
  .f-24.smallHeight {
    line-height: 24px;
  }
  .f-24.verySmallHeight {
    line-height: 15px;
  }
  .f-19 {
    font-size: 19px;
    line-height: 25px;
  }
  .f-16 {
    font-size: 16px;
    line-height: 20px;
  }
  .f-14 {
    font-size: 14px;
    line-height: 20px;
  }
  .up {
    text-transform: uppercase;
  }
  .capitalize {
    text-transform: capitalize;
  }
  .no-text-shadow {
    text-shadow: none;
  }

  .fw-bold { 
    font-family: var(--helveticaRoundBold);
    font-weight: normal; 
  }
  .underline {
    text-decoration: underline;
  }
  strong, .fw-black { 
    font-family: var(--helveticaRoundBlack);
    font-weight: normal; 
  }

  .text-right { text-align: right }
  .text-center { text-align: center; }

  a {
    color: inherit;
    text-decoration: none;
  }

  .border-box { box-sizing: border-box; }
  .w25pc { width: 25%; }
  .w33pc { width: 33%; }
  .w50pc { width: 50%; }
  .w70pc { width: 70%; }
  .w85pc { width: 85%; }
  .w100pc { width: 100%; }
  .w30px { width: 30px; }
  .w45px { width: 45px; }
  .w50px { width: 50px; }
  .w120px { width: 120px; }
  .mw540px { max-width: 540px }
  .mw100pc { max-width: 100% }
  .h45px { height: 45px; }
  .h30px { height: 30px; }
  .h50px { height: 50px; }
  .h100pc { height: 100%; }
  .hauto { height: auto }
  .mh100pc { max-height: 100%; }

  .zi-1  { z-index: -1; }
  .zi10   { z-index: 10; }
  .zi100 { z-index: 999999999; }
  .zi200 { z-index: 9999999999; }

  .grid {
    display: flex;
    flex-wrap: wrap;
  }

  .grid > * {
    margin-bottom: calc(var(--gutter)/2);
    box-sizing: border-box;
  }
  .grid > *:last-child,
  .grid .mr-0 {
    margin-right: 0;
  }

  .grid >*:last-child,
  .noRowGap > *,
  .grid .mb-0 {
    margin-bottom: 0;
  }
  .grid > *:last-child.keep-mb {
    margin-bottom: calc(var(--gutter)/2);
  }

  .col-16 > .span-1 { width: span(100%, 16, 1); }
  .col-16 > .span-2 { width: span(100%, 16, 2); }
  .col-16 > .span-3 { width: span(100%, 16, 3); }
  .col-16 > .span-4 { width: span(100%, 16, 4); }
  .col-16 > .span-5 { width: span(100%, 16, 5); }
  .col-16 > .span-6 { width: span(100%, 16, 6); }
  .col-16 > .span-7 { width: span(100%, 16, 7); }
  .col-16 > .span-8 { width: span(100%, 16, 8); }
  .col-16 > .span-9 { width: span(100%, 16, 9); }
  .col-16 > .span-10 { width: span(100%, 16, 10); }
  .col-16 > .span-11 { width: span(100%, 16, 11); }
  .col-16 > .span-12 { width: span(100%, 16, 12); }
  .col-16 > .span-13 { width: span(100%, 16, 13); }
  .col-16 > .span-14 { width: span(100%, 16, 14); }
  .col-16 > .span-15 { width: span(100%, 16, 15); }
  .col-16 > .span-16 { width: span(100%, 16, 16); }
  .col-16 > .indent-\.5 { margin-left: span(100%, 16, .5); }
  .col-16 > .indent-1 { margin-left: span(100%, 16, 1); }
  .col-16 > .indent-2 { margin-left: span(100%, 16, 2); }
  .col-16 > .indent-3 { margin-left: span(100%, 16, 3); }
  .col-16 > .indent-4 { margin-left: span(100%, 16, 4); }
  .col-16 > .outdent-1 { margin-right: span(100%, 16, 1); }
  .col-16 > .outdent-4 { margin-right: span(100%, 16, 4); }

  .col-14 > .span-1 { width: span(100%, 14, 1); }
  .col-14 > .span-2 { width: span(100%, 14, 2); }
  .col-14 > .span-3 { width: span(100%, 14, 3); }
  .col-14 > .span-4 { width: span(100%, 14, 4); }
  .col-14 > .span-5 { width: span(100%, 14, 5); }
  .col-14 > .span-6 { width: span(100%, 14, 6); }
  .col-14 > .span-7 { width: span(100%, 14, 7); }
  .col-14 > .span-10 { width: span(100%, 14, 10); }
  .col-14 > .span-12 { width: span(100%, 14, 12); }
  .col-14 > .span-14 { width: span(100%, 14, 14); }
  .col-14 > .indent-1 { margin-left: span(100%, 14, 1); }
  .col-14 > .indent-2 { margin-left: span(100%, 14, 2); }

  .span-grow { flex-grow: 1 }

  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .flex { display: flex; }
  .inline-flex { display: inline-flex; }
  .wrap { flex-wrap: wrap; }
  .space-between { justify-content: space-between;}
  .space-around { justify-content: space-around; }
  .flex-end { justify-content: flex-end; }
  .align-start { align-items: flex-start; }
  .align-end { align-items: flex-end; }
  .align-center { align-items: center; }
  .flex-col { flex-direction: column; }
  .flex-col-reverse { flex-direction: column-reverse; }
  .align-self-center { align-self: center; }

  .top-0 { top: 0; }
  .top--10px { top: -10px; }
  .bottom-0 { bottom: 0; }
  .right-0 { right: 0; }
  .right-2 { right: calc(var(--gutter)/3); }
  .left-0 { left: 0; }
  .left-2 { left: calc(var(--gutter)/3); }
  .left--20px { left: -20px; }
  .left44px { left: 44px }

  .mt-0 { margin-top: 0; }
  .mt-2 { margin-top: calc(var(--gutter)/3); }
  .mt-3 { margin-top: calc(var(--gutter)/2); }
  .mt-4 { margin-top: var(--gutter); }
  .mt-5 { margin-top: calc(var(--gutter)*2); }
  .mr-2 { margin-right: calc(var(--gutter)/3); }
  .mr-4 { margin-right: var(--gutter); }
  .mb-0 { margin-bottom: 0; }
  .mb-2 { margin-bottom: calc(var(--gutter)/3); }
  .mb-2-5 { margin-bottom: calc(var(--gutter)/2); }
  .mb-3 { margin-bottom: calc(var(--gutter)/3*2); }
  .mb-4 { margin-bottom: var(--gutter); }
  .mb-5 { margin-bottom: calc(var(--gutter)*2); }
  .ml-1 { margin-left: calc(var(--gutter)/6); }
  .ml-2 { margin-left: calc(var(--gutter)/3); }
  .ml-3 { margin-left: calc(var(--gutter)/3*2); }
  .p-1 { padding: calc(var(--gutter)/6); }
  .p-2 { padding: calc(var(--gutter)/3); }
  .p-4 { padding: var(--gutter); }
  .p-0 { padding: 0; }
  .pr-0 { padding-right: 0; }
  .pr-1 { padding-right: calc(var(--gutter)/6); }
  .pr-2 { padding-right: calc(var(--gutter)/3); }
  .pr-2-5 { padding-right: calc(var(--gutter)/2); }
  .pr-3 { padding-right: calc(var(--gutter)/3*2); }
  .pr-4 { padding-right: var(--gutter); }
  .pl-0 { padding-left: 0; }
  .pl-1 { padding-left: calc(var(--gutter)/6); }
  .pl-2 { padding-left: calc(var(--gutter)/3); }
  .pl-3 { padding-left: calc(var(--gutter)/3*2); }
  .pl-2-5 { padding-left: calc(var(--gutter)/2); }
  .pl-4 { padding-left: var(--gutter); }
  .pt-2 { padding-top: calc(var(--gutter)/3); }
  .pt-2-5 { padding-top: calc(var(--gutter)/2); }
  .pt-3 { padding-top: calc(var(--gutter)/3*2); }
  .pt-11px { padding-top: 11px; }
  .pt-4 { padding-top: var(--gutter); }
  .pb-1 { padding-bottom: calc(var(--gutter)/6); }
  .pb-2 { padding-bottom: calc(var(--gutter)/3); }
  .pb-2-5 { padding-bottom: calc(var(--gutter)/2); }
  .pb-1-25 { padding-bottom: calc(var(--gutter)/4); }
  .pb-3 { padding-bottom: calc(var(--gutter)/3*2); }
  .pb-11px { padding-bottom: 11px; }
  .pb-4 { padding-bottom: var(--gutter); }
  .pb-6 { padding-bottom: calc(var(--gutter)*4); }
  .pt-1 { padding-top: calc(var(--gutter)/6); }
  .pt-5 { padding-top: calc(var(--gutter)*2); }
  .pt-0 { padding-top: 0 }
  .pb-0 { padding-bottom: 0 }

  .inline-block { display: inline-block; }

  .round {
    border-radius: 1000px;
  }
  .border-0 {
    border: 0;
  }
  .border-radius-small {
    border-radius: 5px;
  }
  .border-radius-medium {
    border-radius: 8px;
  }
  .border-radius-left { border-radius: 15px 0 0 15px;}
  .border-radius { border-radius: 15px;}
  .border { border-style: solid }

  .border-white { border-color: white }
  .border-orange { border-color: var(--orange) }
  .border-blue { border-color: var(--blue) }
  .border-grey-dark { border-color: var(--grey-dark) }
  .border-grey-medium { border-color: var(--grey-medium) }
  .border-grey-lightest { border-color: var(--grey-lightest) }

  .border-top-2 { border-top-width: 2px; }
  .border-bottom-2 { border-bottom-width: 2px; }
  .border-bottom-8 { border-bottom-width: 8px; }
  .border-2 { border-width: 2px }
  .border-3 { border-width: 3px }

  .border-grey-light {
    border-color: var(--grey-light);
  }
  .border-white {
    border-color: var(--white);
  }

  .border-top-grey-medium-3 {
    border-top: 3px solid var(--grey-medium);
  }

  .shadow {
    box-shadow: 0px 9px 9px rgba(0,0,0,0.5);
  }

  .white { color:var(--whtie); }
  .black { color: var(--black); }
  
  .orange, .orange-h:hover { 
    color:var(--orange ); 
  }
  .blue, .blue-h:hover { color:var(--blue ); }
  .red, .red-h:hover { color: var(--red); }
  .orange-light {   color:var(--orange-light ); }
  .black {   color:var(--black ); }
  .grey-dark { color:var(--grey-dark ); }
  .grey-medium {   color:var(--grey-medium ); }
  .grey-light {   color:var(--grey-light ); }
  .grey-lightest {   color:var(--grey-lightest ); }
  .white {   color:var(--white ); }

  .bg-none { background: none }
  .bg-blue {   background-color:var(--blue ); }
  .bg-blue-light, .bg-blue-light-h:hover {   background-color:var(--blue-light ); }
  .bg-orange {   background-color:var(--orange ); }
  .bg-orange-medium {   background-color:var(--orange-medium ); }
  .bg-orange-light,
  .bg-orange-light-h:hover { 
    background-color:var(--orange-light ); 
  }
  .bg-overlay { background: rgba(86,86,86,.8) }
  .bg-grey-dark { background-color:var(--grey-dark ); }
  .bg-grey-medium {   background-color:var(--grey-medium ); }
  .bg-grey-light {   background-color:var(--grey-light ); }
  .bg-grey-lightest {   background-color:var(--grey-lightest ); }
  .bg-white {   background-color:var(--white ); }
  .bg-white2 {   background-color:var(--white2 ); }

  .fill-white { fill: var(--white); }

  .none { display: none; }
  .block,
  .group-h-block:hover .item {
    display: block; 
  }

  .triangle:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0px;
    height: 0px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid var(--white);
  }
  .triangle-body:before { border-top-color: #f9f9f9 }

  .triangle-orange:before {
    border-top-color: var(--orange)
  }
  .triangle-blue:before {
    border-top-color: var(--blue)
  }
  .triangle-up-white:before {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid var(--white);
    border-top: none;
    transform: translateX(-50%) translateY(-100%);
  }
  .triangle-up-orange:before {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid var(--orange);
    border-top: none;
    transform: translateX(-50%) translateY(-100%);
  }
  .scale50 { transform: scale(.5) }
  .button:disabled .aux-overlay {
    display: none;
  }
  .bg-orange .aux-overlay:after {
    background-color: var( --blue );
  }
  .bg-grey-dark .aux-overlay:after {
    background-color: var( --blue );
  }
  .bg-blue .aux-overlay:after {
    background-color: var( --orange );
  }
  .bg-grey-light {
    &:hover {
      color: var(--white)
    }
    .aux-overlay:after {
      background-color: var( --orange );
    }
  }
  .checkbox-container {
    .hide-cb {
      display: none;
    }
    .checkbox.small {
      width: 20px;
      height: 20px;
      border-width: 2px;
    }
    .checkbox.small + label {
      width: calc( 100% - 20px);
    }
    .checkbox {
      width: 32px;
      height: 32px;
      position: absolute;
      border: 3px solid var(--blue);
      background-color: var(--grey-lightest);
      box-sizing: border-box;
      top: 3px;
    }
    .checkbox.relative {
      position: relative;
      top: 0;
    }
    .checked {
      background: url(/res/imgs/picto-vu.svg) no-repeat center center;
      background-size: contain;
      opacity: 1;
      transform: scale(1.3) translateX(24%) translateY(-12%);
    }
    &:hover .checkbox {
      opacity: .9;
    }
    &:hover .checkbox.checked {
      background-color: var(--green);
    }
    label {
      width: calc(100% - 32px - 10px);
    }
  }
  .datepicker-container {
    &.hasError input {
      color: var(--red);
    }
    &.hasError {
      border-color: var(--red);
    }
    input {
      width: 100%;
      box-sizing: border-box;
      border: 0;
      background: none;
    }
  }
  .flatpickr-day.selected, 
  .flatpickr-day.startRange,
  .flatpickr-day.endRange,
  .flatpickr-day.selected.inRange,
  .flatpickr-day.startRange.inRange,
  .flatpickr-day.endRange.inRange,
  .flatpickr-day.selected:focus,
  .flatpickr-day.startRange:focus,
  .flatpickr-day.endRange:focus,
  .flatpickr-day.selected:hover,
  .flatpickr-day.startRange:hover,
  .flatpickr-day.endRange:hover, 
  .flatpickr-day.selected.prevMonthDay, 
  .flatpickr-day.startRange.prevMonthDay, 
  .flatpickr-day.endRange.prevMonthDay, 
  .flatpickr-day.selected.nextMonthDay, 
  .flatpickr-day.startRange.nextMonthDay, 
  .flatpickr-day.endRange.nextMonthDay {
    background-color: var(--orange);
    border-color: var(--orange);
  }
  .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
  .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
  .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--orange)
  }
  .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
    background: var(--orange-light);
    border-color: var(--orange-light)
  }
  .flatpickr-day.inRange {
    box-shadow: -5px 0 0 var(--orange-light), 5px 0 0 var(--orange-light)
  }
  .input-container {
    &.hasError {
      border-color: var(--red);
    }
    &.hasError input {
      color: var(--red);
    }
    
    input {
      width: 100%;
      box-sizing: border-box;
      border: 0;
      color: var(--blue);
    }
    
    &.hasIcon input {
      padding-left: calc(var(--gutter)/6*7);
    }
    .icon {
      margin-left: calc(var(--gutter)/3);
      margin-top: calc(var(--gutter)/3);
      position: absolute;
      pointer-events: none;
      width: 16px;
    }
    button {
      border: 0;
      background: none;
      cursor: pointer;
    }
  }
  .quantity-container {

    &.hasError {
      border-color: var(--red);
    }

    &.hasError input {
      color: var(--red);
    }
  
    input {
      padding: 0;
      box-sizing: border-box;
      border: 0;
    }
  }
  .radio-container {
    .hide-cb {
      display: none;
    }
    .radio {
      width: 16px;
      height: 16px;
      align-self: flex-end;
    }
    .radio.relative {
      position: relative;
    }

    .label {
      transform: translateY(2px);
      cursor: pointer;
    }
  }

  .select {
    color: var(--black);
    height: 100%;

    .selectContainer {
      --borderRadius: 15px;
      height: 100%;
      min-height: 35px;
      line-height: 36px;
      box-sizing: border-box;
      background: var(--grey-lightest);
      border: 0;
      padding-top: 26px;
      padding-bottom: 26px;
    }
    .selectContainer:before {
      display: block;
      position: absolute;
      width: 15px;
      height: 15px;
      top: 0;
      right: 0;
      content: url(/res/imgs/icon/dropdown-arrow.svg);
    }
  
    &.is-selected .selectContainer:before {
      display: none;
    }

    .selectContainer input {
      top: 0;
      box-sizing: border-box;
      font-size: 18px;
      text-align: center;
      height: 100%;
      line-height: 34px;
      font-family: inherit;
      color: var(--grey-dark);
    }
    .selectContainer input::placeholder {
      color: var(--grey-medium)
    }
    .selectedItem {
      position: absolute;
      top: 0;
      line-height: inherit;
      height: 100%;
      overflow: hidden;
      font-size: 18px;
      display: flex;
      align-items: center;
      width: 100%;
      text-align: center;
      justify-content: center;
    }
    .clearSelect {
      top: 14px;
      bottom: auto;
      height: 25px;
    }
    .multiSelectItem {
      margin-top: 1px;
    }

    &.hasError .selectContainer {
      border-color: var(--red);
    }
  }
  .spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: relative;
    animation: spinner 0.9s ease alternate infinite;
    animation-delay: 0.36s;
    top: 50%;
    margin: -22px auto 0 auto; 
  }
  .spinner:after, .spinner:before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: spinner 0.9s ease alternate infinite; 
  }
  .spinner:before {
    left: -20px;
    animation-delay: 0.18s; 
  }
  .spinner:after {
    right: -20px;
    animation-delay: 0.54s; 
  }

  .spinner.white,
  .spinner.white:before,
  .spinner.white:after {
    animation-name: spinner-white;
  }
  .spinner.blue-dark,
  .spinner.blue-dark:before,
  .spinner.blue-dark:after {
    animation-name: spinner-blue-dark;
  }

  #scrollContainer {
    height: calc(100% - var(--gutter));
  }
  #scrollContainer { width: 99.7% }
  #scrollContainer > div { width: 101.5% }
  
  .item-label:hover .background, .selected .background {
    display: block;
  }
  .item-label:hover .border, .selected .border {
    display: none;
  }
  .item-label:hover .greyscale, .item-label.selected .greyscale {
    filter: grayscale(0);
  }
  .item-label .border {
    border-top: 4px solid var(--grey-light);
  }

  #overlay-spinner {
    width: 56px;
    height: 56px;
    border: 8px solid var(--orange);
    border-right-color: transparent;
    border-radius: 50%;
    position: relative;
    animation: loader-rotate 1s linear infinite;
    top: 50%;
    margin: -28px auto 0 auto;
  }
  #overlay-spinner:after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--orange);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 47px;
  }

  .svg-box{
    width: 100%;
    height: 0;
    position: relative;
  }
  .svg-container svg{
    width: 100%;
    position: absolute;
    height: 100%;
    display: block;
  }
  .svg-container.fill path {
    fill: inherit;
  }
}


@keyframes spinner-white {
  0% {
    box-shadow: 0 12px 0 -12px #ffffff; 
  }
  100% {
    box-shadow: 0 12px 0 #ffffff; 
  }
}
@keyframes spinner-blue-dark {
  0% {
    box-shadow: 0 12px 0 -12px var(--blue-dark); 
  }
  100% {
    box-shadow: 0 12px 0 var(--blue-dark); 
  }
}

@keyframes loader-rotate {
  0% {
    transform: rotate(0);
  }
  100% {
      transform: rotate(360deg);
  }
}

@media (--md) {
  #sapper {
    .md-absolute { position: absolute }
    .md-fixed { position: fixed }
    .md-flex { display: flex; }
    .md-inline-flex { display: inline-flex; }
    .md-flex-row { flex-direction: row; }
    .md-no-wrap { flex-wrap: noWrap }
    .md-align-center { align-items: center }
    .md-justify-start { justify-content: start }
    .md-justify-end { justify-content: end }
    .md-justify-start { justify-content: start }
    .md-space-between { justify-content: space-between }
    .md-none { display: none }
    .md-block { display: block }

    .md-w20pc { width: 20% }
    .md-w25pc { width: 25% }
    .md-w33pc { width: 33% }
    .md-w50pc { width: 50% }
    .md-w60pc { width: 60% }
    .md-w100pc { width: 100% }
    .md-h50vh { height: 50vh }
    .md-h40vw { height: 40vw }

    .col-16 > .md-span-5 { width: span(100%, 16, 5); }
    .col-16 > .md-span-6 { width: span(100%, 16, 6); }
    .col-16 > .md-span-7 { width: span(100%, 16, 7); }
    .col-16 > .md-span-8 { width: span(100%, 16, 8); }
    .col-16 > .md-span-14 { width: span(100%, 16, 14); }
    
    .col-14 > .md-span-5 { width: span(100%, 14, 5) }
    .col-14 > .md-span-8 { width: span(100%, 14, 8) }
    .col-14 > .md-span-14 { width: 100% }
    
    .md-span-grow { flex-grow: 1 }

    /* paddings */
    .md-pb-0 { padding-bottom: 0; }
    .md-pb-2 { padding-bottom: calc(var(--gutter)/2); }
    .md-pb-4 { padding-bottom: var(--gutter); }
    .md-pt-2 { padding-top: calc(var(--gutter)/2); }
    .md-pt-4 { padding-top: var(--gutter) }
    .md-mt-0 { margin-top: 0; }
    .md-mt-2 { margin-top: calc(var(--gutter)/2); }
    .md-mt-3 { margin-top: calc(var(--gutter)/3*2); }
    .md-mt-4 { margin-top: var(--gutter); }
    .md-mb-0 { margin-bottom: 0 }
    .md-mb-2-5 { margin-bottom: calc(var(--gutter)/2); }

    .md-border-radius { border-radius: 20px }
    .md-border-radius-top { border-radius: 20px 20px 0 0 }
    .md-border-radius-bottom { border-radius: 0 0 20px 20px }
    .md-border-focus { box-shadow: 0 0 10px var(--orange) }
    .md-border-focus:before { 
      border-top-color: var(--orange)
    }

    .md-triangle-sky:before {
      border-top-color: #77b1cf;
    }
    .md-no-triangle:before {
      display: none
    }

    #ambiance-home {
      padding-top: calc(-374px / 3);
    }
    #ambiance {
      padding-top: calc(374px / 3);
    }
    .f-19 {
      font-size: 20px;
    }
  }
  
}

@media (--sm) {
  #sapper {
    .sm-flex-col { flex-direction: column; }
    .sm-justify-center { justify-content: center }
    .sm-align-center { align-items: center }
    .sm-mr-0 { margin-right: 0 }
    .sm-mr-2 { margin-right: calc(var(--gutter)/3) }
    .sm-pt-2 { padding-top: calc(var(--gutter)/3) }
    .sm-pb-2 { padding-bottom: calc(var(--gutter)/3) }
    .sm-pb-4 { padding-bottom: var(--gutter) }
    .sm-mt-2 { margin-top: calc(var(--gutter)/3) }
    .sm-mb-1 { margin-bottom: calc(var(--gutter)/6) }
    .col-16 > .sm-indent-1 { margin-left: span(100%, 16, 1); }
    .col-16 > .sm-span-14 { width: span(100%, 16, 14); }
  }
}
@media (--xs) {
  #sapper {
    .f-24 {
      font-size: 18px;
      line-height: 23px;
    }
    .f-19 {
      font-size: 14px;
      line-height: 19px;
    }
    .f-14 {
      font-size: 10px;
      line-height: 15px;
    }
  
    .xs-pl-0 { padding-left: 0 }
    .xs-pl-2 { padding-left: calc(var(--gutter)/3); }
    .xs-pr-0 { padding-right: 0 }
    .xs-pr-1 { padding-right: calc(var(--gutter)/6) }
  
    .col-16 .xs-span-5 { width: span(100%, 16, 5) }
    .col-16 .xs-outdent-0 { margin-right: 0 }
  }
  
}