// For reference these styles have been changed from _settings.scss
$white       : #FFFFFF;
$ghost       : #FAFAFA;
$iron        : #CCCCCC;
$base        : #AAAAAA;
$steel       : #666666;
$charcoal    : #505050;
$oil         : #333333;
$jet         : #222222;

// We use these as default colors throughout
$primary-color: #6dc8c2; //green
$secondary-color: #e2e2e2;
$alert-color: #f05251;  //red
$success-color: #4dd1b1;
$warning-color: #fbaf45; //yellow
$info-color: $iron;

// Custom variables Used throughout the site

// Font family variables
$font-family-normal: 'nexa_lightregular';
$font-family-bold: 'nexa_boldregular';

// ROYGBIV colors for Highlights
$red: #f05251;
$orange: #f36523;
$yellow: #fbaf45;
$green: #6dc8c2;
$blue: #00bff3;
$indigo: #2e3192;
$violet: #92278f;
$violet2: #d563d2;
// Colors for background gradient
$gradient-color-1: #fdfdfd;
$gradient-color-2: #c4d3de;

// $gradient-color-1: #eef2f3;
// $gradient-color-2: #8e9eab;

$body-font-family: $font-family-normal;

// background images
$primary-bg-image: url('../../../static/images/congruent_outline.png');
$secondary-bg-image: url('../../../static/images/subtle_zebra_3d.png');
$tertiary-bg-image: url('../../../static/images/subtle_dots.png');

// border styles
$basic-border: 1px solid lighten($iron,7%);
$dashed-border: 1px dashed $iron;
$shadow-inset: inset 0 0 15px rgba(20, 20, 20, 0.5);

@mixin link-hover($link-color, $percent) {
    color: $link-color;
    &:hover {
        color: darken($link-color, $percent);
        -webkit-transition: color .35s ease;
        -moz-transition: color .35s ease;
        transition: color .35s ease;
    }
}

@mixin flex($justify,$direction){
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: $justify;
  flex-direction: $direction;
}
