// ++++++++++++++++++++++++ Variables ++++++++++++++++++++++++

// Fonts.
$roboto: 'Roboto', sans-serif;
$montserrat: 'Montserrat', sans-serif;
$font_awesome: FontAwesome;

// Breakpoints (required by @mixin break which goes below).
$large: large;
$desktop: desktop;
$medium: medium;
$neutral: neutral;
$mobile: mobile;
$not-mobile: not-mobile;
$x-small: x-small;

// Colors.
$color_primary: #3f3f3f;
$color_secondary: #9d9d9d;

$color_link: inherit;
$color_hover: #fc1b3b;

$red: #fc1b3b;
$green: #58863b;
$blue: #27487a;
$grey: #8c8c8c;
$grey_light: #efefef;
$white_light: #f3f3f3;


// ++++++++++++++++++++++++ Mixins ++++++++++++++++++++++++ */
// Consistent with bootstrap breakpoints.
@mixin break($point) {
  @if $point == large {
    @media (max-width: 1329px) {
      @content;
    }
  } @else if $point == desktop {
    @media (min-width: 1330px) {
      @content;
    }
  } @else if $point == medium {
    @media (max-width: 1199px) {
      @content;
    }
  } @else if $point == neutral {
    @media (max-width: 992px) {
      @content;
    }
  } @else if $point == mobile {
    @media (max-width: 767px) {
      @content;
    }
  } @else if $point == not-mobile {
    @media (min-width: 768px) {
      @content;
    }
  } @else if $point == x-small {
    @media (max-width: 479px) {
      @content;
    }
  }
}

// Adds circles via styles(normally on ::before/::after).
@mixin circle($size: 10px, $color: #fff) {
  width: $size;
  height: $size;
  background: $color;
  border-radius: 50%;
  content: '';
  display: inline-block;
}

// Clear floating.
@mixin clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }
}
