/* Helm.sh Styles */
//
// Variables
//
// 1. Colours
// 2. Setup Fonts
// 3. CSS3 & Vendor Prefixes


// 1.
// Helm Colours
//
// Primary Colors

$blue1: #2DAFE9;
$blue2: #2BA0D3;
$blue3: #2090CD;
$blue4: #277A9F;

// Shading
$grey1: #ccc;
$grey2: #999;
$grey3: #666;
$grey4: #333333;

$light2: #EBF7FC;
$light1: lighten($light2, 2.5%);


// 2.
// Fonts
//

$base: "Helvetica Neue", Helvetica, Arial, sans-serif;
$mono: "Lucida Console", "Courier New", monaco, monospace;

@font-face {
  font-family: 'klinic-reg';
  src: url('../fonts/klinicslabbook-webfont.eot');
  src: url('../fonts/klinicslabbook-webfont.eot?#iefix') format('embedded-opentype'),
   url('../fonts/klinicslabbook-webfont.woff2') format('woff2'),
   url('../fonts/klinicslabbook-webfont.woff') format('woff'),
   url('../fonts/klinicslabbook-webfont.ttf') format('truetype'),
   url('../fonts/klinicslabbook-webfont.svg#klinic_slabbook') format('svg');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'klinic-bold';
  src: url('../fonts/klinicslabmedium-webfont.eot');
  src: url('../fonts/klinicslabmedium-webfont.eot?#iefix') format('embedded-opentype'),
   url('../fonts/klinicslabmedium-webfont.woff2') format('woff2'),
   url('../fonts/klinicslabmedium-webfont.woff') format('woff'),
   url('../fonts/klinicslabmedium-webfont.ttf') format('truetype'),
   url('../fonts/klinicslabmedium-webfont.svg#klinic_slabmedium') format('svg');
  font-weight: 500;
  font-style: normal;
}

@mixin klinicBold {
  font-family: "klinic-bold", "klinic bold", $base;
  font-weight: 600;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
}

@mixin klinicReg {
  font-family: "klinic-reg", "klinic", $base;
  font-weight: 400;
  letter-spacing: 0.0075em;
  -webkit-font-smoothing: antialiased;
}
@mixin helvetica {
  font-family: $base;
  letter-spacing: 0;
}

@mixin upperCase {
  text-transform: uppercase;
  letter-spacing: 0.25em;
}

@mixin normCase {
  text-transform: none;
  letter-spacing: 0.015em;
}


// 3.
// Load CSS & Vendor Prefixes
//
// via Compass
// https://github.com/gruntjs/grunt-contrib-compass
//

//@import "assets/compass/css3";

@mixin transition($property:all, $duration:0.3s, $easing:ease-in-out) {
  transition: $property $duration $easing;
}

@mixin border-radius($radius1:3px, $radius2:3px) {
  -webkit-border-radius: $radius1 $radius2 $radius1 $radius2;
  -moz-border-radius: $radius1 $radius2 $radius1 $radius2;
  border-radius: $radius1 $radius2 $radius1 $radius2;
}

@mixin box-shadow($xlength:0, $ylength:2px, $size:0, $color:rgba(30,30,30,0.25)) {
  -webkit-box-shadow: $xlength $ylength $size $color;
  -moz-box-shadow: $xlength $ylength $size $color;
  box-shadow: $xlength $ylength $size $color;
}

@mixin keyframe ($animation_name) {
  @-webkit-keyframes $animation_name {
    @content;
  }
  @-moz-keyframes $animation_name {
    @content;
  }
  @-o-keyframes $animation_name {
    @content;
  }
  @keyframes $animation_name {
    @content;
  }
}

@mixin animation ($delay, $duration, $animation) {
  -webkit-animation-delay: $delay;
  -webkit-animation-duration: $duration;
  -webkit-animation-name: $animation;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-delay: $delay;
  -moz-animation-duration: $duration;
  -moz-animation-name: $animation;
  -moz-animation-fill-mode: forwards;
  animation-delay: $delay;
  animation-duration: $duration;
  animation-name: $animation;
  animation-fill-mode: forwards;
}
