// @file
// Custom sass mixins
//
// Define the custom mixins for your project here.
// http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#defining_a_mixin

// Makes an element visually hidden, but accessible.
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
@mixin element-invisible {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

// Turns off the element-invisible effect.
@mixin element-invisible-off {
  position: static !important;
  clip: auto;
  height: auto;
  width: auto;
  overflow: auto;
}

// Makes an element visually hidden by default, but visible when focused.
@mixin element-focusable {
  @include element-invisible;

  &:active,
  &:focus {
    @include element-invisible-off;
  }
}

$text: #292929;
$deepdark-gray: #1a1a1a;
$middledark-gray: #373536;
$dark-gray: #4b4b4b;
$gray: #888;
$light-gray: #a5a5a5;
$lighter-gray: #c0c0c0;
$extralight-gray: #e8e8e8;
$topic-gray: #efeeed;
$deep-white: #fafafa;
$deep-white2: #f5f5f5;
$topic-green: #55b47a;
$topic-darkgreen: #49ac6f;
$topic-cyan: #00a0aa; //#37abab;
$topic-darkcyan: #00949B; //#20a1a1;
$topic-yellow: #fdb036;
$topic-darkyellow: #fea100;
$topic-orange: #ff6a6a; //#fd8061;
$topic-darkorange: #ff5959; //#fa6e4b;
$topic-purple: #d35291; //#c977b1;
$topic-darkpurple: #bb4980; //#be6da6;
$topic-brown: #d39467;
$topic-darkbrown: #c48a61;
$brown: #322721; //#8b5a0d;
$red: #eb0000; //#c63b1a;
$green: #357e51;
$darkgreen: #2f6d47;
$blue: #007bb6;
$button-blue: #054c8a;
$button-red: #e32427;
$hover: #f4f2f0;
$hover2: #dfdfdf;
$light-blue: #a0a7a7;
$baby: #f6fafd;

.filter-green {
  -webkit-filter: invert(70%) sepia(11%) saturate(1649%) hue-rotate(91deg) brightness(87%) contrast(85%);
  filter: invert(70%) sepia(11%) saturate(1649%) hue-rotate(91deg) brightness(87%) contrast(85%);
}
.filter-cyan {
  -webkit-filter: invert(56%) sepia(87%) saturate(310%) hue-rotate(131deg) brightness(87%) contrast(90%);
  filter: invert(56%) sepia(87%) saturate(310%) hue-rotate(131deg) brightness(87%) contrast(90%);
}
.filter-yellow {
  -webkit-filter: invert(87%) sepia(11%) saturate(7309%) hue-rotate(331deg) brightness(102%) contrast(98%);
  filter: invert(87%) sepia(11%) saturate(7309%) hue-rotate(331deg) brightness(102%) contrast(98%);
}
.filter-orange {
  -webkit-filter: invert(66%) sepia(49%) saturate(2122%) hue-rotate(319deg) brightness(101%) contrast(98%);
  filter: invert(66%) sepia(49%) saturate(2122%) hue-rotate(319deg) brightness(101%) contrast(98%);
}

@mixin flexbox($important:null) {
  display: -webkit-box $important;
  display: -moz-box $important;
  display: -ms-flexbox $important;
  display: -webkit-flex $important;
  display: flex $important;
}

@mixin box-shadow($top:0, $left:0, $blur:0, $color:transparent, $side:null) {
  -webkit-box-shadow:$top $left $blur $color $side;
  -moz-box-shadow:$top $left $blur $color $side;
  box-shadow:$top $left $blur $color $side;
}

@mixin txt-shadow($top:0, $left:0, $blur:0, $color:transparent, $important:null) {
  -webkit-text-shadow:$top $left $blur $color $important;
  -moz-text-shadow:$top $left $blur $color $important;
  text-shadow:$top $left $blur $color $important;
}

@mixin box-opacity ($value:0, $important:null) {
  opacity: $value $important;
  -moz-opacity: $value $important;
  -khtml-opacity: $value $important;
  -webkit-opacity: $value $important;
  filter: alpha(opacity=$value*100) $important;
}

@mixin box-radius($tl:0, $tr:0, $br:0, $bl:0, $important:null) {
  border-radius: $tl $tr $br $bl $important;
  -moz-border-radius: $tl $tr $br $bl $important;
  -webkit-border-radius: $tl $tr $br $bl $important;
}

@mixin box-rotate($d:null) {
  -ms-transform: rotate(#{$d}deg);
  -webkit-transform: rotate(#{$d}deg);
  transform: rotate(#{$d}deg);
}

@mixin calc($prop, $val) {
  #{$prop}: -webkit-calc(#{$val});
  #{$prop}: -moz-calc(#{$val});
  #{$prop}: calc(#{$val});
}

@mixin noselect() {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
}

@mixin no-transform() {
  -ms-transform: none !important;
  -webkit-transform: none !important;
  transform: none !important;
}

@mixin no-anim() {
  -webkit-transition: none !important;
  transition: none !important;
}

@mixin linear-gradient($color1, $color2, $start:0%, $end:100%) {
  /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top, #{$color1} #{$start}, #{$color2} #{$end});

  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #{$color1} #{$start}, #{$color2} #{$end});

  /* Opera */
  background-image: -o-linear-gradient(top, #{$color1} #{$start}, #{$color2} #{$end});

  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #{$color1} #{$start}, #{$color2} #{$end});
  /* IE6 & IE7 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color1}', endColorstr='#{$color2}');
  /* IE8*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color1}', endColorstr='#{$color2}')";

  background-color: $color2;
}

@mixin hover-anim($param1:null, $param2:null) {
  -webkit-transition: #{$param1} 0.5s, #{$param2} 0.5s;
  transition: #{$param1} 0.5s, #{$param2} 0.5s;
}

@-webkit-keyframes pulseFade {
 0%,
 100% {
  -webkit-transform:scale(1.1);
  transform:scale(1.1)
 }
 50% {
  -webkit-transform:scale(1.3);
  transform:scale(1.3);
  opacity:.15
 }
}
@keyframes pulseFade {
 0%,
 100% {
  -webkit-transform:scale(1.1);
  transform:scale(1.1)
 }
 50% {
  -webkit-transform:scale(1.3);
  transform:scale(1.3);
  opacity:.15
 }
}

@-moz-keyframes fade{
  0% { opacity: 0; visibility: visible; }
  5% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fade{
  0% { opacity: 0; visibility: visible; }
  5% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@-ms-keyframes fade{
  0% { opacity: 0; visibility: visible; }
  5% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes opacity-on {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes opacity-fade {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes hvr-icon-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  33.3% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  49.95% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes hvr-icon-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  33.3% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  49.95% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}


/*

@-moz-keyframes leftToRight{
  0% { opacity: 0; visibility: visible; }
  5% { opacity: 0; -moz-transform: translateX(-50px); transform: translateX(-50px); }
  20% { opacity: 1; -moz-transform: translateX(0px); transform: translateX(0px); }
  80% { opacity: 1; -moz-transform: translateX(0px); transform: translateX(0px); }
  100% { opacity: 0; visibility: hidden; -moz-transform: translateX(50px); transform: translateX(50px); }
}
@-webkit-keyframes leftToRight{
  0% { opacity: 0; visibility: visible; }
  //5% { opacity: 0; -webkit-transform: translateX(-50px); }
  20% { opacity: 1; -webkit-transform: translateX(0px); }
  80% { opacity: 1; -webkit-transform: translateX(0px); }
  100% { opacity: 0; visibility: hidden; -webkit-transform: translateX(50px); }
}
@-ms-keyframes leftToRight{
  0% { opacity: 0; visibility: visible; }
  //5% { opacity: 0; -ms-transform: translateX(-50px); }
  20% { opacity: 1; -ms-transform: translateX(0px); }
  80% { opacity: 1; -ms-transform: translateX(0px); }
  100% { opacity: 0; visibility: hidden; -ms-transform: translateX(50px); }
}*/


/*
@font-face {
    font-family: 'ProximaNovaBold';
    src: url('../font/proximanova-bold.eot');
    src: url('../font/proximanova-bold.eot') format('embedded-opentype'),
         url('../font/proximanova-bold.woff2') format('woff2'),
         url('../font/proximanova-bold.woff') format('woff'),
         url('../font/proximanova-bold.ttf') format('truetype'),
         url('../font/proximanova-bold.svg#ProximaNovaBold') format('svg');
}
@font-face {
    font-family: 'ProximaNovaBoldItalic';
    src: url('../font/proximanova-boldit.eot');
    src: url('../font/proximanova-boldit.eot') format('embedded-opentype'),
         url('../font/proximanova-boldit.woff2') format('woff2'),
         url('../font/proximanova-boldit.woff') format('woff'),
         url('../font/proximanova-boldit.ttf') format('truetype'),
         url('../font/proximanova-boldit.svg#ProximaNovaBoldItalic') format('svg');
}
@font-face {
    font-family: 'ProximaNovaLight';
    src: url('../font/proximanova-light.eot');
    src: url('../font/proximanova-light.eot') format('embedded-opentype'),
         url('../font/proximanova-light.woff2') format('woff2'),
         url('../font/proximanova-light.woff') format('woff'),
         url('../font/proximanova-light.ttf') format('truetype'),
         url('../font/proximanova-light.svg#ProximaNovaLight') format('svg');
}
@font-face {
    font-family: 'ProximaNovaLightItalic';
    src: url('../font/proximanova-lightitalic.eot');
    src: url('../font/proximanova-lightitalic.eot') format('embedded-opentype'),
         url('../font/proximanova-lightitalic.woff2') format('woff2'),
         url('../font/proximanova-lightitalic.woff') format('woff'),
         url('../font/proximanova-lightitalic.ttf') format('truetype'),
         url('../font/proximanova-lightitalic.svg#ProximaNovaLightItalic') format('svg');
}
@font-face {
    font-family: 'ProximaNovaRegularItalic';
    src: url('../font/proximanova-regitalic.eot');
    src: url('../font/proximanova-regitalic.eot') format('embedded-opentype'),
         url('../font/proximanova-regitalic.woff2') format('woff2'),
         url('../font/proximanova-regitalic.woff') format('woff'),
         url('../font/proximanova-regitalic.ttf') format('truetype'),
         url('../font/proximanova-regitalic.svg#ProximaNovaRegularItalic') format('svg');
}
@font-face {
    font-family: 'ProximaNovaRegular';
    src: url('../font/proximanova-regular.eot');
    src: url('../font/proximanova-regular.eot') format('embedded-opentype'),
         url('../font/proximanova-regular.woff2') format('woff2'),
         url('../font/proximanova-regular.woff') format('woff'),
         url('../font/proximanova-regular.ttf') format('truetype'),
         url('../font/proximanova-regular.svg#ProximaNovaRegular') format('svg');
}
@font-face {
    font-family: 'ProximaNovaSemibold';
    src: url('../font/proximanova-semibold.eot');
    src: url('../font/proximanova-semibold.eot') format('embedded-opentype'),
         url('../font/proximanova-semibold.woff2') format('woff2'),
         url('../font/proximanova-semibold.woff') format('woff'),
         url('../font/proximanova-semibold.ttf') format('truetype'),
         url('../font/proximanova-semibold.svg#ProximaNovaSemibold') format('svg');
}
@font-face {
    font-family: 'ProximaNovaSemiboldItalic';
    src: url('../font/proximanova-semibolditalic.eot');
    src: url('../font/proximanova-semibolditalic.eot') format('embedded-opentype'),
         url('../font/proximanova-semibolditalic.woff2') format('woff2'),
         url('../font/proximanova-semibolditalic.woff') format('woff'),
         url('../font/proximanova-semibolditalic.ttf') format('truetype'),
         url('../font/proximanova-semibolditalic.svg#ProximaNovaSemiboldItalic') format('svg');
}
*/
/*@font-face {
    font-family: 'RobotoItalic';
    src: url('../font/roboto-italic.eot');
    src: url('../font/roboto-italic.eot') format('embedded-opentype'),
         url('../font/roboto-italic.woff2') format('woff2'),
         url('../font/roboto-italic.woff') format('woff'),
         url('../font/roboto-italic.ttf') format('truetype'),
         url('../font/roboto-italic.svg#RobotoItalic') format('svg');
}
@font-face {
    font-family: 'RobotoLight';
    src: url('../font/roboto-light.eot');
    src: url('../font/roboto-light.eot') format('embedded-opentype'),
         url('../font/roboto-light.woff') format('woff'),
         url('../font/roboto-light.ttf') format('truetype'),
         url('../font/roboto-light.svg#RobotoLight') format('svg');
}
@font-face {
    font-family: 'RobotoLightItalic';
    src: url('../font/roboto-lightitalic.eot');
    src: url('../font/roboto-lightitalic.eot') format('embedded-opentype'),
         url('../font/roboto-lightitalic.woff2') format('woff2'),
         url('../font/roboto-lightitalic.woff') format('woff'),
         url('../font/roboto-lightitalic.ttf') format('truetype'),
         url('../font/roboto-lightitalic.svg#RobotoLightItalic') format('svg');
}
@font-face {
    font-family: 'RobotoRegular';
    src: url('../font/roboto-regular.eot');
    src: url('../font/roboto-regular.eot') format('embedded-opentype'),
         url('../font/roboto-regular.woff') format('woff'),
         url('../font/roboto-regular.ttf') format('truetype'),
         url('../font/roboto-regular.svg#RobotoRegular') format('svg');
}
@font-face {
    font-family: 'RobotoThin';
    src: url('../font/roboto-thin.eot');
    src: url('../font/roboto-thin.eot') format('embedded-opentype'),
         url('../font/roboto-thin.woff2') format('woff2'),
         url('../font/roboto-thin.woff') format('woff'),
         url('../font/roboto-thin.ttf') format('truetype'),
         url('../font/roboto-thin.svg#RobotoThin') format('svg');
}
@font-face {
    font-family: 'RobotoThinItalic';
    src: url('../font/roboto-thinitalic.eot');
    src: url('../font/roboto-thinitalic.eot') format('embedded-opentype'),
         url('../font/roboto-thinitalic.woff') format('woff'),
         url('../font/roboto-thinitalic.ttf') format('truetype'),
         url('../font/roboto-thinitalic.svg#RobotoThinItalic') format('svg');
}*/


@import url(https://fonts.googleapis.com/css?family=Raleway:200,400,300,700&subset=latin,latin-ext);
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,400i,700&subset=latin-ext');

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=4.7.0');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../font/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../font/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../font/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../font/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}