/*===== Variables =====*/

@import "compass/typography/vertical_rhythm";

/* Theme Colors */

$green-lighter: #37B382;
$green-light: #2f996f;
$green: #28805D;
$green-dark: #20664a;

$off-white: #f5f5f5;

$gray-light: #e6e6e6;
$gray: #cccccc;
$gray-medium-dark: #b3b3b3;
$gray-dark: #666666;
$gray-little-darker: #575757;
$gray-darker: #333;
$gray-darkest: #242424;

/* Typography Variables */

$base-font-size: 16px;
$base-line-height: 24px;

/* Used in compass */
$rhythm-unit: 'rem';

$base-font-family: 'montserrat', 'open sans', 'sans-serif';
$secondary-font-family: 'open sans', 'sans-serif';

$base-font-weight: 400;
$base-font-color: $gray-dark;

$small-font-size: 13px;
$base-font-size: 16px;
$medium-font-size: 21px;
$medium-large-font-size: 26px;
$large-font-size: 36px;
$xlarge-font-size: 42px;

%t-small {
  @include adjust-font-size-to($small-font-size);
}
%t-base {
  @include adjust-font-size-to($base-font-size);
}
%t-medium {
  @include adjust-font-size-to($medium-font-size);
}
%t-medium-large {
  @include adjust-font-size-to($medium-large-font-size);
}
%t-large {
  @include adjust-font-size-to($large-font-size);
}
%t-xlarge {
  @include adjust-font-size-to($xlarge-font-size);
}

/* Social Media Brand Colors */

$twitter: #00aced;
$facebook: #3b5998;
$googleplus: #dd4b39;
$pinterest: #cb2027;
$linkedin: #007bb6;
$youtube: #bb0000;
$vimeo: #aad450;
$tumblr: #32506d;
$instagram: #517fa4;
$flickr: #ff0084;
$dribbble: #ea4c89;
$quora: #a82400;
$foursquare: #0072b1;
$forrst: #5B9A68;
$vk: #45668e;
$wordpress: #21759b;
$stumbleupon: #EB4823;
$yahoo: #7B0099;
$blogger: #fb8f3d;
$soundcloud: #ff3a00;
$rss: #fa9b39;

/*===== Mixins =====*/

@mixin clearfix {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

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

@mixin grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  -moz-backface-visibility: hidden;
}

@mixin remove-grayscale {
  filter: none;
  -webkit-filter: grayscale(0%);
}
@mixin transition($value) {
  -webkit-transition: $value;
  -moz-transition: $value;
  -o-transition: $value;
  transition: $value;
}

@mixin blur($value) {
  filter: blur($value);
  // Browser Specific
  -webkit-filter: blur($value);
  -moz-filter: blur($value);
  -o-filter: blur($value);
  -ms-filter: blur($value);
}
@mixin column-count($value) {
  -webkit-column-count: $value;
  -moz-column-count: $value;
  column-count: $value;
}
@mixin column-gap($value) {
  -webkit-column-gap: $value;
  -moz-column-gap: $value;
  column-gap: $value;
}
@mixin column-break-inside($value) {
  -webkit-column-break-inside: $value;
  -moz-column-break-inside: $value;
  -ms-column-break-inside: $value;
  column-break-inside: $value;
}
@mixin sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
}
@mixin background-clip($value) {
  -moz-background-clip: $value;     /* Firefox 3.6 */
  -webkit-background-clip: $value;  /* Safari 4? Chrome 6? */
  background-clip: $value;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}
@mixin backface-visibility($value) {
  -webkit-backface-visibility: $value;
  -moz-backface-visibility:    $value;
  -ms-backface-visibility:     $value;
}