/* Re-usable stuff */
// tables
.table { display: table; width: 100%; height: 100%; }
.cell { display: table-cell; text-align: center; vertical-align: middle; }

// overflow
.scroll-x { overflow-x: scroll;}
.scroll-y { overflow-y: scroll;}
.overflow-hidden, .scroll-hidden { overflow: hidden;}
.overflow-reset { overflow: auto !important;}

//fonts
.noBorder { border: none !important; }
.noText { font-size: 0; }
.noBr, .nobr, .nowrap { white-space: nowrap; }
.wrap-white-space { white-space: initial; }
.noShadow { box-shadow: none !important; }
.noHoverShadow:hover, .noShadowHover:hover { box-shadow: none !important; }

//position
.top { vertical-align: top !important;}
.left { text-align: left !important;}
.right { text-align: right !important;}
.center { text-align: center !important;}
.align-top { vertical-align: top !important;}
.align-left { text-align: left !important;}
.align-right { text-align: right !important;}
.align-center { text-align: center !important;}
.middle { vertical-align: middle !important;}
.bottom { vertical-align: bottom !important;}
.rtl { direction: rtl; unicode-bidi: embed;}
.position-left { left: 0; }
.position-top { top: 0; }
.position-bottom { bottom: 0; }
.position-right { right: 0; }
.float-right { float: right !important;}
.float-left { float: left !important;}
.float-none { float: none !important;}
.outline-none { outline: none !important; }

.slides.firstSlide .hideForFirstSlide,
.slides.lastSlide .hideForLastSlide {
  display: none;
}

//specific
.block { display: block !important;}
.inlineBlock { display: inline-block !important;}
.inline { display: inline !important;}
.relative { position: relative !important;}
.absolute { position: absolute !important;}
.fixed { position: fixed !important;}
.nowrap { white-space: nowrap;}
.wide { width: 100% !important;}
.hidden { display: none; }

//move, bitch
[class*='shift-'] {
  position: relative;
}

.shift-up-1 { top: -1px!important;}
.shift-up-2 { top: -2px!important;}
.shift-up-3 { top: -3px!important;}
.shift-up-4 { top: -4px!important;}
.shift-up-5 { top: -5px!important;}
.shift-down-1 { top: 1px!important;}
.shift-down-2 { top: 2px!important;}
.shift-down-3 { top: 3px!important;}
.shift-down-4 { top: 4px!important;}
.shift-down-5 { top: 5px!important;}
.shift-left-1 { left: -1px!important;}
.shift-left-2 { left: -2px!important;}
.shift-left-3 { left: -3px!important;}
.shift-left-4 { left: -4px!important;}
.shift-left-5 { left: -5px!important;}
.shift-right-1 { left: 1px!important;}
.shift-right-2 { left: 2px!important;}
.shift-right-3 { left: 3px!important;}
.shift-right-4 { left: 4px!important;}
.shift-right-5 { left: 5px!important;}

@include media($tablet, max){
  .wideForTablet {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  .tablet-align-top { vertical-align: top !important;}
  .tablet-align-bottom { vertical-align: bottom !important;}
  .tablet-align-left { text-align: left !important;}
  .tablet-align-right { text-align: right !important;}
  .tablet-align-center { text-align: center !important;}
  .tablet-block { display: block !important; }
  .tablet-inlineBlock { display: inline-block !important; }
}
@include media($phablet, max){
  .wideForPhablet {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  .phablet-align-top { vertical-align: top !important;}
  .phablet-align-bottom { vertical-align: bottom !important;}
  .phablet-align-left { text-align: left !important;}
  .phablet-align-right { text-align: right !important;}
  .phablet-align-center { text-align: center !important;}
  .phablet-block { display: block !important; }
  .phablet-inlineBlock { display: inline-block !important; }
}
@include media($phone, max){
  .wideForPhone {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  .phone-align-top { vertical-align: top !important;}
  .phone-align-bottom { vertical-align: bottom !important;}
  .phone-align-left { text-align: left !important;}
  .phone-align-right { text-align: right !important;}
  .phone-align-center { text-align: center !important;}
  .phone-block { display: block !important; }
  .phone-inlineBlock { display: inline-block !important; }
}

//roundness
.round { border-radius: 999px !important; }
.rounded { border-radius: $rounded-border-radius !important; }
.rectangular { border-radius: 0 !important; }

//opacity
.opacity-0 { opacity: 0 !important;}
.opacity-1 { opacity: 0.1 !important;}
.opacity-2 { opacity: 0.2 !important;}
.opacity-3 { opacity: 0.3 !important;}
.opacity-4 { opacity: 0.4 !important;}
.opacity-5 { opacity: 0.5 !important;}
.opacity-6 { opacity: 0.6 !important;}
.opacity-7 { opacity: 0.7 !important;}
.opacity-8 { opacity: 0.8 !important;}
.opacity-9 { opacity: 0.9 !important;}
.opacity-10,
.opaque    { opacity: 1 !important;}
.transparent { background: transparent !important }

// Crop
.crop { margin: 0 !important;}
.cropBottom { margin-bottom: 0 !important;}
.cropTop { margin-top: 0 !important;}
.cropLeft, .cropSides { margin-left: 0 !important;}
.cropRight, .cropSides { margin-right: 0 !important;}

// Trim
.trim { padding: 0 !important;}
.trimBottom { padding-bottom: 0 !important;}
.trimTop { padding-top: 0 !important;}
.trimLeft, .trimSides { padding-left: 0 !important;}
.trimRight, .trimSides { padding-right: 0 !important;}

//Padding and Margin Generation
$properties: padding padding-top padding-right padding-bottom padding-left margin margin-top margin-right margin-bottom margin-left;
@each $property in $properties {
  $i: index($properties, $property);

  @for $n from 0 through 20 {
    $value: 10px * $n;
    .#{$property}-#{$n} {
      #{$property}: $value !important;
    }
  }
  .#{$property}-auto {
    #{$property}: auto !important;
  }
}

//Padding and Margin for Tablet
@include media($desktop, min){
  @each $property in $properties {
    $i: index($properties, $property);

    @for $n from 0 through 20 {
      $value: 10px * $n;
      .#{$property}-desktop-#{$n} {
        #{$property}: $value !important;
      }
    }
    .#{$property}-desktop-auto {
      #{$property}: auto !important;
    }
  }
}

//Padding and Margin for Tablet
@include media($tablet, max){
  @each $property in $properties {
    $i: index($properties, $property);

    @for $n from 0 through 20 {
      $value: 10px * $n;
      .#{$property}-tablet-#{$n} {
        #{$property}: $value !important;
      }
    }
    .#{$property}-tablet-auto {
      #{$property}: auto !important;
    }
  }
}

//Padding and Margin for Phablet
@include media($phablet, max){
  @each $property in $properties {
    $i: index($properties, $property);

    @for $n from 0 through 20 {
      $value: 10px * $n;
      .#{$property}-phablet-#{$n} {
        #{$property}: $value !important;
      }
    }
    .#{$property}-phablet-auto {
      #{$property}: auto !important;
    }
  }
}

//Padding and Margin for Phone
@include media($phone, max){
  @each $property in $properties {
    $i: index($properties, $property);

    @for $n from 0 through 20 {
      $value: 10px * $n;
      .#{$property}-phone-#{$n} {
        #{$property}: $value !important;
      }
    }
    .#{$property}-phone-auto {
      #{$property}: auto !important;
    }
  }
}


//cursor behaveour
.pointer-events { pointer-events: all !important;}
.disable-pointer-events { pointer-events: none !important;}

.pointer,
.cursorPointer { cursor: pointer !important;}
.cursorZoomIn {
	cursor:  pointer;
	cursor:  -moz-zoom-in !important;
	cursor:  -webkit-zoom-in !important;
}
.cursorZoomOut {
	cursor:  pointer;
	cursor:  -moz-zoom-out !important;
	cursor:  -webkit-zoom-out !important;
}
.cursorGrab {
	cursor: move; 
	cursor: grab !important;
	cursor: -moz-grab !important;
	cursor: -webkit-grab !important;
}

.cursorGrab:active {
	cursor: grabbing !important;
	cursor: -moz-grabbing !important;
	cursor: -webkit-grabbing !important;
}

//background
.pattern .background { background-repeat: repeat; background-size: auto;}
.attachment-fixed, .attachmentFixed { background-attachment: fixed !important; background-size: cover !important;}


.disableClick { pointer-events: none;}
.cover { background-size: cover !important;}
.noSelect,.noSelect *, .disableSelect, .disableSelect * { -webkit-touch-callout: none!important; user-select: none!important;}
.selectable,.selectable *, .enableSelect, .enableSelect * { -webkit-touch-callout: auto!important; user-select: auto!important;}
.clearBoth:after { content: ""; clear: both; display: table;}