@import 'flive-vars';

.base {
  display: flex;
  flex-direction: row;
  &.hidden-xs{
    @media (max-width:$screen-xs-max){
      display:none
    }
  }
  &.hidden-sm{
    @media (min-width:$screen-sm-min) and (max-width:$screen-sm-max){
      display:none
    }
  }
  &.hidden-md{
    @media (min-width:$screen-md-min) and (max-width:$screen-md-max){
      display:none
    }
  }
  &.hidden-lg{
    @media (min-width:$screen-lg-min) and (max-width:$screen-lg-max){
      display:none
    }
  }
  &.hidden-xl{
    @media (min-width:$screen-xl-min){
      display:none
    }
  }
}

.level-wrapper-1 {
  z-index: 22;
}

.level-wrapper-2 {
  background: $flive-light-grey;
  border-bottom: 1px solid $flive-medium-grey;
  padding: 0 1px;
  z-index: 21;
}

.sm {
  @include flex-column-centered('sm');
}

.md {
  @include flex-column-centered('md');
}

.lg {
  @include flex-column-centered('lg');
}