.flex
{
  display: flex;
}

.column
{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
}

.grow
{
  // display: flex;
  flex-grow: 1;
}

.wrap
{
  flex-wrap: wrap;
}

.nowrap
{
  flex-wrap: nowrap;
  white-space: nowrap;
}

.v-right
{
  display: flex;
  justify-content: flex-end;
}

.v-left
{
  display: flex;
  justify-content: flex-start;
}

.h-center
{
  display: flex;
  align-items: center;
}

.h-top
{
  display: flex;
  align-items: flex-start;
}

.h-bottom
{
  display: flex;
  align-items: flex-end;
}

.v-center
{
  display: flex;
  justify-content: center;
}

.v-justify
{
  display: flex;
  justify-content: space-between;
}

.v-reverse
{
  flex-direction: row-reverse;
}

.block
{
  display: block;
}

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

.contents
{
  display: contents;
}


.table
{
  display: table;
  width: 100%;

  > *
  {
    display: table-cell;
    vertical-align: top;
  }

  &.v-center > *
  {
    vertical-align: middle;
  }
}

table
{
  width: 100%;

  td
  {
    vertical-align: top;
  }
}

.hidden
{
  display: none;
}

.overflow
{
  overflow: hidden;
}

.scroll
{
  overflow: scroll;
}

.scroll-y
{
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: auto;
}

.no-select
{
  user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  cursor: default;
}

.selectable,
.selectable > *
{
  user-select: initial;
}

.pointer
{
  cursor: pointer;
}

.no-events
{
  pointer-events: none;
}

.no-child-events *
{
  pointer-events: none;
}

g.no-child-events > *:first-child,
g.no-child-events g > *:first-child
{
  pointer-events: auto;
}

.ratio
{
  @include aspect-ratio(1,1);
}

.ratio-4-3
{
  @include aspect-ratio(4,3);
}

.ratio-16-9
{
  @include aspect-ratio(16,9);
}


.flip-vertical
{
  transform: scale(-1, 1);
}

.flip-horizontal
{
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

.pin,
[class^="pin-"],
[class*=" pin-"]
{
  position: fixed;
  z-index: 1;
  transform: translate3d(0, 0, 0);
}

.pin {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.pin-none {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

.pin-y {
  top: 50%;
  transform: translate(0, -50%);
  // top: 0;
  // bottom: 0;
}

.pin-x {
  left: 50%;
  transform: translate(-50%);
  // right: 0;
  // left: 0;
}

.pin-t {
  top: 0;
}

.pin-r {
  right: 0;
}

.pin-b {
  bottom: 0;
}

.pin-l {
  left: 0;
}

.pin-bl {
  bottom: 0;
  left: 0;
}

.pin-br {
  bottom: 0;
  right: 0;
}

.fixed {
  position: fixed;
  z-index: 1;
}

.z-index-1000
{
  z-index: 1000;
}

.z-index-10000
{
  z-index: 10000;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.zoom-1\.1 {
  font-size: 110%;
}

.zoom-1\.5 {
  font-size: 150%;
}

.zoom-2 {
  font-size: 200%;
}

.zoom-2\.5 {
  font-size: 250%;
}

.opacity-20
{
  opacity: 0.2;
}

.opacity-50
{
  opacity: 0.5;
}

.opacity-100
{
  opacity: 1;
}

.hover\:opacity-100:hover
{
  opacity: 1;
}

@include respond-to(mobile)
{
  .mobile\:hidden,
  .mobile\:hide
  {
    display: none !important;
  }

  .mobile\:fixed {
    position: fixed;
  }

  .mobile\:absolute {
    position: absolute;
  }

  .mobile\:flex {
    display: flex;
  }

  .mobile\:v-center {
    display: flex;
    justify-content: center;
  }

  .mobile\:scroll
  {
    overflow: scroll;
  }

  .mobile\:overflow
  {
    overflow: hidden;
  }



  .mobile\:pin-l {
    left: 0;
  }
}

@include respond-to(desktop)
{
  .desktop\:hidden {
    display: none;
  }

  .desktop\:hide {
    display: none;
  }

  .desktop\:fixed {
    position: fixed;
  }

  .desktop\:absolute {
    position: absolute;
  }

  .desktop\:nowrap {
    flex-wrap: nowrap;
  }

  .desktop\:flex {
    display: flex;
  }
}


@include orient-to(landscape)
{
  .landscape\:hidden {
    display: none;
  }

  .landscape\:absolute {
    position: absolute;
  }
}