@function rand($min: 0, $max: 100) {
  $str : str-slice(unique-id(), 2);
  $res : toInt($str, 16);
  @return ($res % ($max - $min)) + $min;
}

@mixin rounded($vert, $horz, $radius: 10px) {
	border-#{$vert}-#{$horz}-radius: $radius;
	-moz-border-radius-#{$vert}#{$horz}: $radius;
	-ms-border-radius-#{$vert}#{$horz}: $radius;
	-o-border-radius-#{$vert}#{$horz}: $radius;
	-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

@mixin allrounded($radius: 10px) {
	-webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius;
}

@mixin crossproperty( $property, $value ) {
	-webkit-#{$property}: #{$value};
	-moz-#{$property}: #{$value};
	-ms-#{$property}: #{$value};
	-o-#{$property}: #{$value};
	#{$property}: #{$value};
}

// usage @include font-size(14px)
@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size, $important: default) {
	@if $important != default {
		font-size: $size !important;
		font-size: calculateRem($size) !important;
	} @else {
		font-size: $size;
		font-size: calculateRem($size);
	}
}

@function prefix($property, $prefixes: (webkit moz o ms)) {
    $vendor-prefixed-properties: transform background-clip background-size;
    $result: ();
    @each $prefix in $prefixes {
       @if index($vendor-prefixed-properties, $property) {
         $property: -#{$prefix}-#{$property}
       }
       $result: append($result, $property);
    }
    @return $result;
}
 
@function trans-prefix($transition, $prefix: moz) {
    $prefixed: ();
    @each $trans in $transition {
        $prop-name: nth($trans, 1);
        $vendor-prop-name: prefix($prop-name, $prefix);
        $prop-vals: nth($trans, 2);
        $prefixed: append($prefixed, ($vendor-prop-name $prop-vals), comma);
    }
    
    @return $prefixed;
}
 
 
@mixin transition($values...) { 
    $transitions: ();
    @each $declaration in $values {
        $prop: nth($declaration, 1);
        $prop-opts: ();
        $length: length($declaration);
        @for $i from 2 through $length {
            $prop-opts: append($prop-opts, nth($declaration, $i));   
        }
        $trans: ($prop, $prop-opts);
        $transitions: append($transitions, $trans, comma);
    }
      
    -webkit-transition: trans-prefix($transitions, webkit);
    -moz-transition: trans-prefix($transitions, moz);
    -o-transition: trans-prefix($transitions, o);
    transition: $values;
}

@mixin transform( $properties: all ) {
	-webkit-transform: -webkit-#{$properties};
	-moz-transform: -moz-#{$properties};
	-o-transform: -o-#{$properties};
	-ms-transform: -ms-#{$properties};
	transform: #{$properties};
}

@mixin exclusivetransition( $properties: all, $prefix: -webkit, $ms: .5s ) {
  #{$prefix}-transition: #{$ms} cubic-bezier(0.230, 1.000, 0.320, 1.000);
  #{$prefix}-transition-property: #{$properties};
}

@mixin opacity( $opacity: 1 ) {
	$oldopacity : $opacity * 100;
	-khtml-opacity: $opacity; -moz-opacity: $opacity; -ms-filter: "alpha(opacity='#{$oldopacity}')"; opacity: $opacity;
}

// Grid Calculation for Percentages
@function col($n) {
	@return percentage( (( $n * ($columnWidth + $gutterWidth) - $gutterWidth) ) / $gridWidth );
}

// Each column
@mixin column($n) {
	width: col($n);
	margin-left: percentage( $gutterWidth / $gridWidth );
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} { @content }
  @-moz-keyframes #{$name} { @content }
  @-o-keyframes #{$name} { @content }
  @keyframes #{$name} { @content }
}

@mixin experimental($property, $value, $moz: true, $webkit: true, $o: true, $ms: true, $khtml: true, $official: true) {
  @if $webkit   { -webkit-#{$property} : $value; }
  @if $khtml    {  -khtml-#{$property} : $value; }
  @if $moz      {    -moz-#{$property} : $value; }
  @if $ms       {     -ms-#{$property} : $value; }
  @if $o        {      -o-#{$property} : $value; }
  @if $official {         #{$property} : $value; }
}

@mixin animation($value) {
  @include experimental(animation, $value);
}

@include keyframes(bounce) {
	0%, 100% { @include crossproperty('transform', 'scale(0)'); }
	50% { @include crossproperty('transform', 'scale(1)'); }
}
%ie-fix { position: relative; z-index: 1; behavior: url(PIE.htc); }

@mixin btn-transparent($class: default, $cover: default, $touch: default) {
	a#{$class} {
		display: block; color: $white; text-decoration: none; text-align: center; width: 230px; height: 67px; border: 3px $white solid; position: relative; @include font-size(24px); line-height: 67px; text-transform: uppercase; overflow: hidden; @include transition(color .5s $default-transition-easing); letter-spacing: 0.2em; @include crossproperty('transform-style', 'preserve-3d');
		@if $cover == default {
			margin: 0 auto;
		}
		&:after {
			position: absolute; top: 50%; left: 50%; width: 100%; height: 0; content: " "; height: 100%; display: block; @include crossproperty('transform', 'translateY(-50%) translateX(-50%) rotate(-45deg)'); @include opacity(0); z-index: -1; @include transition(height .5s $default-transition-easing, opacity .5s $default-transition-easing, border-color .5s $default-transition-easing); @include crossproperty('transform-style', 'preserve-3d'); @include crossproperty('backface-visibility', 'hidden');
			@if $cover == default {
				background: $white;
			}
			@else {
				background: $black;
			}
		}
		@if $touch == default {
			&:hover {
				@if $cover == default {
					color: $black;
				}
				@else {
					color: $white; border-color: $black !important;
				}
				&:after {
					height: 450%; @include opacity(1);
				}
			}
		}
	}
}

@mixin btn-transparent-black($class: default, $cover: default, $touch: default) {
	a {
		display: block; color: $black; text-decoration: none; font-family: steelfishregular; padding: 0; text-align: center; width: 230px; height: 67px; border: 3px $black solid; position: relative; @include font-size(24px); line-height: 67px; text-transform: uppercase; overflow: hidden; @include transition(color .5s $default-transition-easing, border-color .5s $default-transition-easing); letter-spacing: 0.2em; @include crossproperty('transform-style', 'preserve-3d');
		@if $cover == default {
			margin: 0 auto;
		}
		&:before {
			position: absolute; top: 50%; left: 50%; width: 100%; height: 450%; content: " "; background: $white; display: block; @include crossproperty('transform', 'translateY(-50%) translateX(-50%) rotate(-45deg)'); z-index: -1; @include transition(height .5s $default-transition-easing, opacity .5s $default-transition-easing); @include crossproperty('backface-visibility', 'hidden'); @include crossproperty('transform-style', 'preserve-3d');
		}
		&:after {
			position: absolute; top: 50%; left: 50%; width: 100%; height: 0; content: " "; background: $black; height: 100%; display: block; @include crossproperty('transform', 'translateY(-50%) translateX(-50%) rotate(-45deg)'); @include opacity(0); z-index: -1; @include transition(height .5s $default-transition-easing, opacity .5s $default-transition-easing); @include crossproperty('backface-visibility', 'hidden'); @include crossproperty('transform-style', 'preserve-3d');
		}
		@if $touch == default {
			&:hover {
				color: $white; border-color: $black !important;
				&:after {
					height: 450%; @include opacity(1);
				}
			}
		}
	}
}

@mixin btn-white($class: default, $cover: default, $touch: default) {
	a#{$class} {
		display: block; color: $black; text-decoration: none; text-align: center; width: 230px; height: 67px; border: 3px $white solid; position: relative; @include font-size(24px); line-height: 67px; text-transform: uppercase; overflow: hidden; @include transition(color .5s $default-transition-easing, border-color .5s $default-transition-easing); letter-spacing: 0.2em; @include crossproperty('transform-style', 'preserve-3d');
		@if $cover == default {
			margin: 0 auto;
		}
		&:before {
			position: absolute; top: 50%; left: 50%; width: 100%; height: 450%; content: " "; background: $white; display: block; @include crossproperty('transform', 'translateY(-50%) translateX(-50%) rotate(-45deg)'); z-index: -1; @include transition(height .5s $default-transition-easing, opacity .5s $default-transition-easing);@include crossproperty('backface-visibility', 'hidden'); @include crossproperty('transform-style', 'preserve-3d');
		}
		&:after {
			position: absolute; top: 50%; left: 50%; width: 100%; height: 0; content: " "; background: $black; height: 100%; display: block; @include crossproperty('transform', 'translateY(-50%) translateX(-50%) rotate(-45deg)'); @include opacity(0); z-index: -1; @include transition(height .5s $default-transition-easing, opacity .5s $default-transition-easing);@include crossproperty('backface-visibility', 'hidden'); @include crossproperty('transform-style', 'preserve-3d');
		}
		@if $touch == default {
			&:hover {
				color: $white; border-color: $black !important;
				&:after {
					height: 450%; @include opacity(1);
				}
			}
		}
	}
}

@mixin btn-black($class: default, $cover: default, $touch: default) {
	a {
		display: block; color: $white; text-decoration: none; text-align: center; width: 197px; height: 52px; margin: 0 auto; border: 3px $black solid; position: relative; @include font-size(24px); line-height: 52px; text-transform: uppercase; overflow: hidden; @include transition(color .5s $default-transition-easing, border-color .5s $default-transition-easing); letter-spacing: 0.2em; @include crossproperty('transform-style', 'preserve-3d');
		&:before {
			position: absolute; top: 50%; left: 50%; width: 100%; height: 450%; content: " "; background: $black; display: block; @include crossproperty('transform', 'translateY(-50%) translateX(-50%) rotate(-45deg)'); z-index: -1; @include transition(height .5s $default-transition-easing, opacity .5s $default-transition-easing);@include crossproperty('backface-visibility', 'hidden'); @include crossproperty('transform-style', 'preserve-3d');
		}
		&:after {
			position: absolute; top: 50%; left: 50%; width: 100%; height: 0; content: " "; background: $white; height: 100%; display: block; @include crossproperty('transform', 'translateY(-50%) translateX(-50%) rotate(-45deg)'); @include opacity(0); z-index: -1; @include transition(height .5s $default-transition-easing, opacity .5s $default-transition-easing);@include crossproperty('backface-visibility', 'hidden'); @include crossproperty('transform-style', 'preserve-3d');
		}
		@if $touch == default {
			&:hover {
				color: $black; border-color: $black !important;
				&:after {
					height: 450%; @include opacity(1);
				}
			}
		}
	}
}

@include keyframes(loader) {
	0% { @include crossproperty('transform', 'rotate(0deg)'); }
	25% { @include crossproperty('transform', 'rotate(180deg)'); }
	50% { @include crossproperty('transform', 'rotate(180deg)'); }
	75% { @include crossproperty('transform', 'rotate(360deg)'); }
	100% { @include crossproperty('transform', 'rotate(360deg)'); }
}
@include keyframes(loader-inner) {
	0% { height: 0% }
	25% { height: 0% }
	50% { height: 100% }
	75% { height: 100% }
	100% { height: 0% }
}