@mixin border-radius($radius) {
    -ms-border-radius: $radius;
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

@mixin border-top-radius($radius) {
  -webkit-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
   -webkit-border-top-left-radius: $radius;
   border-top-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
     -webkit-border-top-right-radius: $radius;
     border-top-right-radius: $radius;
     background-clip: padding-box;
}
@mixin border-bottom-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
   -webkit-border-bottom-left-radius: $radius;
   border-bottom-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
  border-bottom-left-radius: $radius;
     -webkit-border-top-left-radius: $radius;
     border-top-left-radius: $radius;
     background-clip: padding-box;
}

@mixin box-shadow($x: 0, $y: 0, $radius: 4px, $spread: 0, $color: rgba(0,0,0,0.5)) {
    -o-box-shadow: $x $y $radius $spread $color;
    -ms-box-shadow: $x $y $radius $spread $color;
    -moz-box-shadow: $x $y $radius $spread $color;
    -webkit-box-shadow: $x $y $radius $spread $color;
    box-shadow: $x $y $radius $spread $color;
}

@mixin background-gradient-horizontal($first-color, $second-color, $first-color-start, $second-color-start) {
    background: transparent;
    background: -o-linear-gradient(left, $first-color $first-color-start, $second-color $second-color-start);
    background: -ms-linear-gradient(left, $first-color $first-color-start, $second-color $second-color-start);
    background: -moz-linear-gradient(left, $first-color $first-color-start, $second-color $second-color-start);
    background: -webkit-linear-gradient(left, $first-color $first-color-start, $second-color $second-color-start);
    background: linear-gradient(to right, $first-color $first-color-start, $second-color $second-color-start);
}
@mixin background-gradient-vertical($first, $second) {
    background: $first;
    background: -o-linear-gradient(top, $first 0%, $second 100%);
    background: -ms-linear-gradient(top, $first 0%, $second 100%);
    background: -moz-linear-gradient(top, $first 0%, $second 100%);
    background: -webkit-linear-gradient(top, $first 0%, $second 100%);
    background: linear-gradient(top, $first 0%, $second 100%);
}

@mixin hookmeup-with-an-icon($whats-the-icon){
	content: $whats-the-icon;
}

@mixin box-sizing( $type: border-box ) {
    -webkit-box-sizing: $type;
}


@mixin helper-padding($padding) {
    .pt-#{$padding} {
        padding-top: #{$padding}px;
    }
    .pr-#{$padding} {
        padding-right: #{$padding}px;
    }
    .pb-#{$padding} {
        padding-bottom: #{$padding}px;
    }
    .pl-#{$padding} {
        padding-left: #{$padding}px;
    }
}

@mixin animate-up($name){
    @-webkit-keyframes #{$name} {
        0% {
            bottom: -100px;
            opacity: 0;
        }
        30% {
            bottom: -70px;
            opacity: .04;
        }
        70% {
            bottom: -30px;
            opacity: .08;
        }
        100% {
            bottom: 0px;
            opacity: 1;
        }
    }
    -webkit-animation: $name .5s .5s ease-in forwards;
}

@-webkit-keyframes fade-in{
      0%   { opacity: 0; }
      30%   { opacity: .04; }
      70%   { opacity: .08; }
      100% { opacity: 1; }
}

@-webkit-keyframes fade-out{
      0%   { opacity: 1; }
      100% { opacity: 0; }
}

@-webkit-keyframes show-message{
    0%   { opacity: 0; }
    30%  { opacity: 0; }
    70%  { opacity: 0; }
    100% { opacity: 1; }
}