@import "grids";
@import "grids-responsive";
@import "grids-offset";
@import "grids-push";
@import "grids-pull";

$container-padding-mobile : 30px !default;

.container {
  width: 100%;
  margin: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  @media screen and ($bp-larger-than-mobile) {
    width: 100%;
  }
  @media screen and ($bp-larger-than-phablet) {
    width: $bp-phablet;
  }
  @media screen and ($bp-larger-than-tablet) {
    width: $bp-tablet;
  }
  @media screen and ($bp-larger-than-desktop) {
    width: $bp-desktop;
  }
  // @media screen and ($bp-larger-than-desktophd) {
  //   width: $bp-desktophd;
  // }
  @media screen and (max-width: $bp-mobile) {
    &.container-padding-mobile {
      width: auto;
      padding: $container-padding-mobile;
    }
  }
}

.row.row-padding {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  > [class*="col"] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
  }
}

// --hidden & visible custom classes
.hidden-mobile-block {
  display: none !important;
  @media screen and ($bp-larger-than-mobile) {
    display: block !important;
  }
}
.hidden-phablet-block {
  display: none !important;
  @media screen and ($bp-larger-than-phablet) {
    display: block !important;
  }
}
.hidden-tablet-block {
  display: none !important;
  @media screen and ($bp-larger-than-tablet) {
    display: block !important;
  }
}
.hidden-desktop-block {
  display: none !important;
  @media screen and ($bp-larger-than-desktop) {
    display: inline-block !important;
  }
}

.hidden-mobile-inline-block {
  display: none !important;
  @media screen and ($bp-larger-than-mobile) {
    display: inline-block !important;
  }
}
.hidden-phablet-inline-block {
  display: none !important;
  @media screen and ($bp-larger-than-phablet) {
    display: inline-block !important;
  }
}
.hidden-tablet-inline-block {
  display: none !important;
  @media screen and ($bp-larger-than-tablet) {
    display: inline-block !important;
  }
}
.hidden-desktop-inline-block {
  display: none !important;
  @media screen and ($bp-larger-than-desktop) {
    display: inline-block !important;
  }
}

.visible-mobile-block {
  display: block !important;
  @media screen and ($bp-larger-than-mobile) {
    display: none !important;
  }
}
.visible-phablet-block {
  display: block !important;
  @media screen and ($bp-larger-than-phablet) {
    display: none !important;
  }
}
.visible-tablet-block {
  display: block !important;
  @media screen and ($bp-larger-than-tablet) {
    display: none !important;
  }
}
.visible-desktop-block {
  display: inline-block !important;
  @media screen and ($bp-larger-than-desktop) {
    display: none !important;
  }
}

.visible-mobile-inline-block {
  display: inline-block !important;
  @media screen and ($bp-larger-than-mobile) {
    display: none !important;
  }
}
.visible-phablet-inline-block {
  display: inline-block !important;
  @media screen and ($bp-larger-than-phablet) {
    display: none !important;
  }
}
.visible-tablet-inline-block {
  display: inline-block !important;
  @media screen and ($bp-larger-than-tablet) {
    display: none !important;
  }
}
.visible-desktop-inline-block {
  display: inline-block !important;
  @media screen and ($bp-larger-than-desktop) {
    display: none !important;
  }
}
