/*******************************
         Site Settings
*******************************/

/*-------------------
       Fonts
--------------------*/

$fontName          : 'Lato' !default;
$fontSmoothing     : antialiased !default;

$headerFont        : $fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;
$pageFont          : $fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;

$googleFontName    : $fontName !default;
$importGoogleFonts : true !default;
$googleFontSizes   : '400,700,400italic,700italic' !default;
$googleSubset      : 'latin' !default;

$googleProtocol    : 'https://' !default;
$googleFontRequest : '${googleFontName}:${googleFontSizes}&subset=${googleSubset}' !default;

/*-------------------
      Base Sizes
--------------------*/

/* This is the single variable that controls them all */
$emSize   : 14px !default;

/* The size of page text  */
$fontSize : 14px !default;

/*-------------------
  Exact Pixel Values
--------------------*/
/*
  These are used to specify exact pixel values in em
  for things like borders that remain constantly
  sized as emSize adjusts

  Since there are many more sizes than names for sizes,
  these are named by their original pixel values.

*/


$a1px  : (1 / $emSize) + rem !default;
$a4px  : (4 / $emSize) + rem !default;
$a11px  : (11 / $emSize) + rem !default;
$a14px  : (14 / $emSize) + rem !default;

$relative1px  : (1 / $emSize) + em !default;
$relative4px  : (4 / $emSize) + em !default;
$relative11px  : (11 / $emSize) + em !default;
$relative14px  : (14 / $emSize) + em !default;



/*-------------------
    Border Radius
--------------------*/

/* See Power-user section below
   for explanation of $px variables
*/
$relativeBorderRadius: $relative4px !default;
$absoluteBorderRadius: $a4px !default;

$defaultBorderRadius: $absoluteBorderRadius !default;



/*-------------------
      Site Colors
--------------------*/

/*---  Colors  ---*/
$red              : #DB2828 !default;
$orange           : #F2711C !default;
$yellow           : #FBBD08 !default;
$olive            : #B5CC18 !default;
$green            : #21BA45 !default;
$teal             : #00B5AD !default;
$blue             : #2185D0 !default;
$violet           : #6435C9 !default;
$purple           : #A333C8 !default;
$pink             : #E03997 !default;
$brown            : #A5673F !default;
$grey             : #767676 !default;
$black            : #1B1C1D !default;

/*---  Light Colors  ---*/
$lightRed         : #FF695E !default;
$lightOrange      : #FF851B !default;
$lightYellow      : #FFE21F !default;
$lightOlive       : #D9E778 !default;
$lightGreen       : #2ECC40 !default;
$lightTeal        : #6DFFFF !default;
$lightBlue        : #54C8FF !default;
$lightViolet      : #A291FB !default;
$lightPurple      : #DC73FF !default;
$lightPink        : #FF8EDF !default;
$lightBrown       : #D67C1C !default;
$lightGrey        : #DCDDDE !default;
$lightBlack       : #545454 !default;

/*---   Neutrals  ---*/
$fullBlack        : #000000 !default;
$offWhite         : #F9FAFB !default;
$darkWhite        : #F3F4F5 !default;
$midWhite         : #DCDDDE !default;
$white            : #FFFFFF !default;

/*--- Colored Backgrounds ---*/
$redBackground    : #FFE8E6 !default;
$orangeBackground : #FFEDDE !default;
$yellowBackground : #FFF8DB !default;
$oliveBackground  : #FBFDEF !default;
$greenBackground  : #E5F9E7 !default;
$tealBackground   : #E1F7F7 !default;
$blueBackground   : #DFF0FF !default;
$violetBackground : #EAE7FF !default;
$purpleBackground : #F6E7FF !default;
$pinkBackground   : #FFE3FB !default;
$brownBackground  : #F1E2D3 !default;

/*--- Colored Text ---*/
$redTextColor    : $red !default;
$orangeTextColor : $orange !default;
$yellowTextColor : #B58105 !default; // Yellow text is difficult to read
$oliveTextColor  : #8ABC1E !default; // Olive is difficult to read
$greenTextColor  : #1EBC30 !default; // Green is difficult to read
$tealTextColor   : #10A3A3 !default; // Teal text is difficult to read
$blueTextColor   : $blue !default;
$violetTextColor : $violet !default;
$purpleTextColor : $purple !default;
$pinkTextColor   : $pink !default;
$brownTextColor  : $brown !default;

/*--- Colored Headers ---*/
$redHeaderColor    : darken($redTextColor, 5) !default;
$oliveHeaderColor  : darken($oliveTextColor, 5) !default;
$greenHeaderColor  : darken($greenTextColor, 5) !default;
$yellowHeaderColor : darken($yellowTextColor, 5) !default;
$blueHeaderColor   : darken($blueTextColor, 5) !default;
$tealHeaderColor   : darken($tealTextColor, 5) !default;
$pinkHeaderColor   : darken($pinkTextColor, 5) !default;
$violetHeaderColor : darken($violetTextColor, 5) !default;
$purpleHeaderColor : darken($purpleTextColor, 5) !default;
$orangeHeaderColor : darken($orangeTextColor, 5) !default;
$brownHeaderColor  : darken($brownTextColor, 5) !default;

/*--- Colored Border ---*/
$redBorderColor    : $redTextColor !default;
$orangeBorderColor : $orangeTextColor !default;
$yellowBorderColor : $yellowTextColor !default;
$oliveBorderColor  : $oliveTextColor !default;
$greenBorderColor  : $greenTextColor !default;
$tealBorderColor   : $tealTextColor !default;
$blueBorderColor   : $blueTextColor !default;
$violetBorderColor : $violetTextColor !default;
$purpleBorderColor : $purpleTextColor !default;
$pinkBorderColor   : $pinkTextColor !default;
$brownBorderColor  : $brownTextColor !default;

/*-------------------
     Alpha Colors
--------------------*/

$subtleTransparentBlack     : rgba(0, 0, 0, 0.03) !default;
$transparentBlack           : rgba(0, 0, 0, 0.05) !default;
$strongTransparentBlack     : rgba(0, 0, 0, 0.10) !default;
$veryStrongTransparentBlack : rgba(0, 0, 0, 0.15) !default;

$subtleTransparentWhite     : rgba(255, 255, 255, 0.02) !default;
$transparentWhite           : rgba(255, 255, 255, 0.08) !default;
$strongTransparentWhite     : rgba(255, 255, 255, 0.15) !default;



/*-------------------
    Brand Colors
--------------------*/

$primaryColor        : $blue !default;
$secondaryColor      : $black !default;

$lightPrimaryColor   : $lightBlue !default;
$lightSecondaryColor : $lightBlack !default;

/*--------------
  Page Heading
---------------*/

$headerFontWeight : bold !default;
$headerLineHeight : (18 / 14) * 1em !default;

$h1 : (28 / 14) * 1rem !default;
$h2 : (24 / 14) * 1rem !default;
$h3 : (18 / 14) * 1rem !default;
$h4 : (15 / 14) * 1rem !default;
$h5 : (14 / 14) * 1rem !default;


/*-------------------
        Page
--------------------*/

$pageBackground      : #FFFFFF !default;
$pageOverflowX       : hidden !default;

$lineHeight          : 1.4285em !default;
$textColor           : rgba(0, 0, 0, 0.87) !default;


/*--------------
   Form Input
---------------*/

/* This adjusts the default form input across all elements */
$inputBackground        : $white !default;
$inputVerticalPadding   : $relative11px !default;
$inputHorizontalPadding : $relative14px !default;
$inputPadding           : $inputVerticalPadding $inputHorizontalPadding !default;

/* Input Text Color */
$inputColor: $textColor !default;
$inputPlaceholderColor: lighten($inputColor, 75) !default;
$inputPlaceholderFocusColor: lighten($inputColor, 45) !default;

/* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */
$inputLineHeight: (17 / 14) * 1em !default;

/*-------------------
    Focused Input
--------------------*/

/* Used on inputs, textarea etc */
$focusedFormBorderColor: #85B7D9 !default;

/* Used on dropdowns, other larger blocks */
$focusedFormMutedBorderColor: #96C8DA !default;

/*-------------------
        Sizes
--------------------*/

/*
  Sizes are all expressed in terms of 14px/em (default em)
  This ensures these "ratios" remain constant despite changes in EM
*/

$miniSize        : (11 / 14) !default;
$tinySize        : (12 / 14) !default;
$smallSize       : (13 / 14) !default;
$mediumSize      : (14 / 14) !default;
$largeSize       : (16 / 14) !default;
$bigSize         : (18 / 14) !default;
$hugeSize        : (20 / 14) !default;
$massiveSize     : (24 / 14) !default;


/*-------------------
      Paragraph
--------------------*/

$paragraphMargin     : 0em 0em 1em !default;
$paragraphLineHeight : $lineHeight !default;

/*-------------------
       Links
--------------------*/

$linkColor           : #4183C4 !default;
$linkUnderline       : none !default;
$linkHoverColor      : darken(saturate($linkColor, 20), 15) !default;
$linkHoverUnderline  : $linkUnderline !default;

/*-------------------
  Highlighted Text
--------------------*/

$highlightBackground      : #CCE2FF !default;
$highlightColor           : $textColor !default;

$inputHighlightBackground : rgba(100, 100, 100, 0.4) !default;
$inputHighlightColor      : $textColor !default;

/*-------------------
       Em Sizes
--------------------*/

/*
  This rounds $size values to the closest pixel then expresses that value in (r)em.
  This ensures all size values round to exact pixels
*/
$mini            : (round($miniSize * $emSize) / $emSize) * 1rem !default;
$tiny            : (round($tinySize * $emSize) / $emSize) * 1rem !default;
$small           : (round($smallSize * $emSize) / $emSize) * 1rem !default;
$medium          : (round($mediumSize * $emSize) / $emSize) * 1rem !default;
$large           : (round($largeSize * $emSize) / $emSize) * 1rem !default;
$big             : (round($bigSize * $emSize) / $emSize) * 1rem !default;
$huge            : (round($hugeSize * $emSize) / $emSize) * 1rem !default;
$massive         : (round($massiveSize * $emSize) / $emSize) * 1rem !default;

/* em */
$relativeMini    : (round($miniSize * $emSize) / $emSize) * 1em !default;
$relativeTiny    : (round($tinySize * $emSize) / $emSize) * 1em !default;
$relativeSmall   : (round($smallSize * $emSize) / $emSize) * 1em !default;
$relativeMedium  : (round($mediumSize * $emSize) / $emSize) * 1em !default;
$relativeLarge   : (round($largeSize * $emSize) / $emSize) * 1em !default;
$relativeBig     : (round($bigSize * $emSize) / $emSize) * 1em !default;
$relativeHuge    : (round($hugeSize * $emSize) / $emSize) * 1em !default;
$relativeMassive : (round($massiveSize * $emSize) / $emSize) * 1em !default;

/* rem */
$absoluteMini    : (round($miniSize * $emSize) / $emSize) * 1rem !default;
$absoluteTiny    : (round($tinySize * $emSize) / $emSize) * 1rem !default;
$absoluteSmall   : (round($smallSize * $emSize) / $emSize) * 1rem !default;
$absoluteMedium  : (round($mediumSize * $emSize) / $emSize) * 1rem !default;
$absoluteLarge   : (round($largeSize * $emSize) / $emSize) * 1rem !default;
$absoluteBig     : (round($bigSize * $emSize) / $emSize) * 1rem !default;
$absoluteHuge    : (round($hugeSize * $emSize) / $emSize) * 1rem !default;
$absoluteMassive : (round($massiveSize * $emSize) / $emSize) * 1rem !default;


/*-------------------
       Loader
--------------------*/

$loaderSize              : $relativeBig !default;
$loaderSpeed             : 0.6s !default;
$loaderLineWidth         : 0.2em !default;
$loaderFillColor         : rgba(0, 0, 0, 0.1) !default;
$loaderLineColor         : $grey !default;

$invertedLoaderFillColor : rgba(255, 255, 255, 0.15) !default;
$invertedLoaderLineColor : $white !default;

/*-------------------
        Grid
--------------------*/

$columnCount: 16 !default;

/*-------------------
     Transitions
--------------------*/

$defaultDuration : 0.1s !default;
$defaultEasing   : ease !default;

/*-------------------
     Breakpoints
--------------------*/

$mobileBreakpoint            : 320px !default;
$tabletBreakpoint            : 768px !default;
$computerBreakpoint          : 992px !default;
$largeMonitorBreakpoint      : 1200px !default;
$widescreenMonitorBreakpoint : 1920px !default;



/* Columns */
$oneWide        : (1 / $columnCount * 100%) !default;
$twoWide        : (2 / $columnCount * 100%) !default;
$threeWide      : (3 / $columnCount * 100%) !default;
$fourWide       : (4 / $columnCount * 100%) !default;
$fiveWide       : (5 / $columnCount * 100%) !default;
$sixWide        : (6 / $columnCount * 100%) !default;
$sevenWide      : (7 / $columnCount * 100%) !default;
$eightWide      : (8 / $columnCount * 100%) !default;
$nineWide       : (9 / $columnCount * 100%) !default;
$tenWide        : (10 / $columnCount * 100%) !default;
$elevenWide     : (11 / $columnCount * 100%) !default;
$twelveWide     : (12 / $columnCount * 100%) !default;
$thirteenWide   : (13 / $columnCount * 100%) !default;
$fourteenWide   : (14 / $columnCount * 100%) !default;
$fifteenWide    : (15 / $columnCount * 100%) !default;
$sixteenWide    : (16 / $columnCount * 100%) !default;

$oneColumn      : (1 / 1 * 100%) !default;
$twoColumn      : (1 / 2 * 100%) !default;
$threeColumn    : (1 / 3 * 100%) !default;
$fourColumn     : (1 / 4 * 100%) !default;
$fiveColumn     : (1 / 5 * 100%) !default;
$sixColumn      : (1 / 6 * 100%) !default;
$sevenColumn    : (1 / 7 * 100%) !default;
$eightColumn    : (1 / 8 * 100%) !default;
$nineColumn     : (1 / 9 * 100%) !default;
$tenColumn      : (1 / 10 * 100%) !default;
$elevenColumn   : (1 / 11 * 100%) !default;
$twelveColumn   : (1 / 12 * 100%) !default;
$thirteenColumn : (1 / 13 * 100%) !default;
$fourteenColumn : (1 / 14 * 100%) !default;
$fifteenColumn  : (1 / 15 * 100%) !default;
$sixteenColumn  : (1 / 16 * 100%) !default;


/*******************************
           Power-User
*******************************/


/*-------------------
    Emotive Colors
--------------------*/

/* Positive */
$positiveColor           : $green !default;
$positiveBackgroundColor : #FCFFF5 !default;
$positiveBorderColor     : #A3C293 !default;
$positiveHeaderColor     : #1A531B !default;
$positiveTextColor       : #2C662D !default;

/* Negative */
$negativeColor           : $red !default;
$negativeBackgroundColor : #FFF6F6 !default;
$negativeBorderColor     : #E0B4B4 !default;
$negativeHeaderColor     : #912D2B !default;
$negativeTextColor       : #9F3A38 !default;

/* Info */
$infoColor              : #31CCEC !default;
$infoBackgroundColor    : #F8FFFF !default;
$infoBorderColor        : #A9D5DE !default;
$infoHeaderColor        : #0E566C !default;
$infoTextColor          : #276F86 !default;

/* Warning */
$warningColor           : #F2C037 !default;
$warningBorderColor     : #C9BA9B !default;
$warningBackgroundColor : #FFFAF3 !default;
$warningHeaderColor     : #794B02 !default;
$warningTextColor       : #573A08 !default;

/*-------------------
        Paths
--------------------*/

/* For source only. Modified in gulp for dist */
$imagePath : '../../themes/default/assets/images' !default;
$fontPath  : '../../themes/default/assets/fonts' !default;


/*-------------------
       Icons
--------------------*/

/* Maximum Glyph Width of Icon */
$iconWidth : 1.18em !default;

/*-------------------
     Neutral Text
--------------------*/

$darkTextColor               : rgba(0, 0, 0, 0.85) !default;
$mutedTextColor              : rgba(0, 0, 0, 0.6) !default;
$lightTextColor              : rgba(0, 0, 0, 0.4) !default;

$unselectedTextColor         : rgba(0, 0, 0, 0.4) !default;
$hoveredTextColor            : rgba(0, 0, 0, 0.8) !default;
$pressedTextColor            : rgba(0, 0, 0, 0.9) !default;
$selectedTextColor           : rgba(0, 0, 0, 0.95) !default;
$disabledTextColor           : rgba(0, 0, 0, 0.2) !default;

$invertedTextColor           : rgba(255, 255, 255, 0.9) !default;
$invertedMutedTextColor      : rgba(255, 255, 255, 0.8) !default;
$invertedLightTextColor      : rgba(255, 255, 255, 0.7) !default;
$invertedUnselectedTextColor : rgba(255, 255, 255, 0.5) !default;
$invertedHoveredTextColor    : rgba(255, 255, 255, 1) !default;
$invertedPressedTextColor    : rgba(255, 255, 255, 1) !default;
$invertedSelectedTextColor   : rgba(255, 255, 255, 1) !default;
$invertedDisabledTextColor   : rgba(255, 255, 255, 0.2) !default;

/*-------------------
     Brand Colors
--------------------*/

$facebookColor   : #3B5998 !default;
$twitterColor    : #55ACEE !default;
$googlePlusColor : #DD4B39 !default;
$linkedInColor   : #1F88BE !default;
$youtubeColor    : #CC181E !default;
$pinterestColor  : #BD081C !default;
$vkColor         : #4D7198 !default;
$instagramColor  : #49769C !default;

/*-------------------
      Borders
--------------------*/

$circularRadius                : 500rem !default;

$borderColor               : rgba(34, 36, 38, 0.15) !default;
$strongBorderColor         : rgba(34, 36, 38, 0.22) !default;
$internalBorderColor       : rgba(34, 36, 38, 0.1) !default;
$selectedBorderColor       : rgba(34, 36, 38, 0.35) !default;
$strongSelectedBorderColor : rgba(34, 36, 38, 0.5) !default;
$disabledBorderColor       : rgba(34, 36, 38, 0.5) !default;

$solidInternalBorderColor  : #FAFAFA !default;
$solidBorderColor          : #D4D4D5 !default;
$solidSelectedBorderColor  : #BCBDBD !default;

$whiteBorderColor              : rgba(255, 255, 255, 0.1) !default;
$selectedWhiteBorderColor      : rgba(255, 255, 255, 0.8) !default;

$solidWhiteBorderColor         : #555555 !default;
$selectedSolidWhiteBorderColor : #999999 !default;

/*-------------------
       Accents
--------------------*/

/* Differentiating Neutrals */
$subtleGradient: linear-gradient(transparent, $transparentBlack) !default;

/* Differentiating Layers */
$subtleShadow:
  0px 1px 2px 0 $borderColor
 !default;
$floatingShadow:
  0px 2px 4px 0px rgba(34, 36, 38, 0.12),
  0px 2px 10px 0px rgba(34, 36, 38, 0.15)
 !default;


/*-------------------
    Derived Values
--------------------*/

/* Loaders Position Offset */
$loaderOffset : -($loaderSize / 2) !default;
$loaderMargin : $loaderOffset 0em 0em $loaderOffset !default;

/* Rendered Scrollbar Width */
$scrollbarWidth: 17px !default;

/* Maximum Single Character Glyph Width, aka Capital "W" */
$glyphWidth: 1.1em !default;

/* Used to match floats with text */
$lineHeightOffset       : (($lineHeight - 1em) / 2) !default;
$headerLineHeightOffset : ($headerLineHeight - 1em) / 2 !default;

/* Header Spacing */
$headerTopMargin    : calc(2rem - #{$headerLineHeightOffset}) !default;
$headerBottomMargin : 1rem !default;

/* Minimum Mobile Width */
$pageMinWidth       : 320px !default;

/* Positive / Negative Dupes */
$successBackgroundColor : $positiveBackgroundColor !default;
$successColor           : $positiveColor !default;
$successBorderColor     : $positiveBorderColor !default;
$successHeaderColor     : $positiveHeaderColor !default;
$successTextColor       : $positiveTextColor !default;

$errorBackgroundColor   : $negativeBackgroundColor !default;
$errorColor             : $negativeColor !default;
$errorBorderColor       : $negativeBorderColor !default;
$errorHeaderColor       : $negativeHeaderColor !default;
$errorTextColor         : $negativeTextColor !default;


/* Responsive */
$largestMobileScreen : ($tabletBreakpoint - 1px) !default;
$largestTabletScreen : ($computerBreakpoint - 1px) !default;
$largestSmallMonitor : ($largeMonitorBreakpoint - 1px) !default;
$largestLargeMonitor : ($widescreenMonitorBreakpoint - 1px) !default;



/*******************************
             States
*******************************/

/*-------------------
      Disabled
--------------------*/

$disabledOpacity: 0.45 !default;
$disabledTextColor: rgba(40, 40, 40, 0.3) !default;
$invertedDisabledTextColor: rgba(225, 225, 225, 0.3) !default;

/*-------------------
        Hover
--------------------*/

/*---  Shadows  ---*/
$floatingShadowHover:
  0px 2px 4px 0px rgba(34, 36, 38, 0.15),
  0px 2px 10px 0px rgba(34, 36, 38, 0.25)
 !default;

/*---  Colors  ---*/
$primaryColorHover    : saturate(darken($primaryColor, 5), 10) !default;
$secondaryColorHover  : saturate(lighten($secondaryColor, 5), 10) !default;

$redHover             : saturate(darken($red, 5), 10) !default;
$orangeHover          : saturate(darken($orange, 5), 10) !default;
$yellowHover          : saturate(darken($yellow, 5), 10) !default;
$oliveHover           : saturate(darken($olive, 5), 10) !default;
$greenHover           : saturate(darken($green, 5), 10) !default;
$tealHover            : saturate(darken($teal, 5), 10) !default;
$blueHover            : saturate(darken($blue, 5), 10) !default;
$violetHover          : saturate(darken($violet, 5), 10) !default;
$purpleHover          : saturate(darken($purple, 5), 10) !default;
$pinkHover            : saturate(darken($pink, 5), 10) !default;
$brownHover           : saturate(darken($brown, 5), 10) !default;

$lightRedHover        : saturate(darken($lightRed, 5), 10) !default;
$lightOrangeHover     : saturate(darken($lightOrange, 5), 10) !default;
$lightYellowHover     : saturate(darken($lightYellow, 5), 10) !default;
$lightOliveHover      : saturate(darken($lightOlive, 5), 10) !default;
$lightGreenHover      : saturate(darken($lightGreen, 5), 10) !default;
$lightTealHover       : saturate(darken($lightTeal, 5), 10) !default;
$lightBlueHover       : saturate(darken($lightBlue, 5), 10) !default;
$lightVioletHover     : saturate(darken($lightViolet, 5), 10) !default;
$lightPurpleHover     : saturate(darken($lightPurple, 5), 10) !default;
$lightPinkHover       : saturate(darken($lightPink, 5), 10) !default;
$lightBrownHover      : saturate(darken($lightBrown, 5), 10) !default;
$lightGreyHover       : saturate(darken($lightGrey, 5), 10) !default;
$lightBlackHover      : saturate(darken($fullBlack, 5), 10) !default;

/*---  Emotive  ---*/
$positiveColorHover   : saturate(darken($positiveColor, 5), 10) !default;
$negativeColorHover   : saturate(darken($negativeColor, 5), 10) !default;

/*---  Brand   ---*/
$facebookHoverColor   : saturate(darken($facebookColor, 5), 10) !default;
$twitterHoverColor    : saturate(darken($twitterColor, 5), 10) !default;
$googlePlusHoverColor : saturate(darken($googlePlusColor, 5), 10) !default;
$linkedInHoverColor   : saturate(darken($linkedInColor, 5), 10) !default;
$youtubeHoverColor    : saturate(darken($youtubeColor, 5), 10) !default;
$instagramHoverColor  : saturate(darken($instagramColor, 5), 10) !default;
$pinterestHoverColor  : saturate(darken($pinterestColor, 5), 10) !default;
$vkHoverColor         : saturate(darken($vkColor, 5), 10) !default;

/*---  Dark Tones  ---*/
$fullBlackHover       : lighten($fullBlack, 5) !default;
$blackHover           : lighten($black, 5) !default;
$greyHover            : lighten($grey, 5) !default;

/*---  Light Tones  ---*/
$whiteHover           : darken($white, 5) !default;
$offWhiteHover        : darken($offWhite, 5) !default;
$darkWhiteHover       : darken($darkWhite, 5) !default;

/*-------------------
        Focus
--------------------*/

/*---  Colors  ---*/
$primaryColorFocus    : saturate(darken($primaryColor, 8), 20) !default;
$secondaryColorFocus  : saturate(lighten($secondaryColor, 8), 20) !default;

$redFocus             : saturate(darken($red, 8), 20) !default;
$orangeFocus          : saturate(darken($orange, 8), 20) !default;
$yellowFocus          : saturate(darken($yellow, 8), 20) !default;
$oliveFocus           : saturate(darken($olive, 8), 20) !default;
$greenFocus           : saturate(darken($green, 8), 20) !default;
$tealFocus            : saturate(darken($teal, 8), 20) !default;
$blueFocus            : saturate(darken($blue, 8), 20) !default;
$violetFocus          : saturate(darken($violet, 8), 20) !default;
$purpleFocus          : saturate(darken($purple, 8), 20) !default;
$pinkFocus            : saturate(darken($pink, 8), 20) !default;
$brownFocus           : saturate(darken($brown, 8), 20) !default;

$lightRedFocus        : saturate(darken($lightRed, 8), 20) !default;
$lightOrangeFocus     : saturate(darken($lightOrange, 8), 20) !default;
$lightYellowFocus     : saturate(darken($lightYellow, 8), 20) !default;
$lightOliveFocus      : saturate(darken($lightOlive, 8), 20) !default;
$lightGreenFocus      : saturate(darken($lightGreen, 8), 20) !default;
$lightTealFocus       : saturate(darken($lightTeal, 8), 20) !default;
$lightBlueFocus       : saturate(darken($lightBlue, 8), 20) !default;
$lightVioletFocus     : saturate(darken($lightViolet, 8), 20) !default;
$lightPurpleFocus     : saturate(darken($lightPurple, 8), 20) !default;
$lightPinkFocus       : saturate(darken($lightPink, 8), 20) !default;
$lightBrownFocus      : saturate(darken($lightBrown, 8), 20) !default;
$lightGreyFocus       : saturate(darken($lightGrey, 8), 20) !default;
$lightBlackFocus      : saturate(darken($fullBlack, 8), 20) !default;

/*---  Emotive  ---*/
$positiveColorFocus   : saturate(darken($positiveColor, 8), 20) !default;
$negativeColorFocus   : saturate(darken($negativeColor, 8), 20) !default;

/*---  Brand   ---*/
$facebookFocusColor   : saturate(darken($facebookColor, 8), 20) !default;
$twitterFocusColor    : saturate(darken($twitterColor, 8), 20) !default;
$googlePlusFocusColor : saturate(darken($googlePlusColor, 8), 20) !default;
$linkedInFocusColor   : saturate(darken($linkedInColor, 8), 20) !default;
$youtubeFocusColor    : saturate(darken($youtubeColor, 8), 20) !default;
$instagramFocusColor  : saturate(darken($instagramColor, 8), 20) !default;
$pinterestFocusColor  : saturate(darken($pinterestColor, 8), 20) !default;
$vkFocusColor         : saturate(darken($vkColor, 8), 20) !default;

/*---  Dark Tones  ---*/
$fullBlackFocus       : lighten($fullBlack, 8) !default;
$blackFocus           : lighten($black, 8) !default;
$greyFocus            : lighten($grey, 8) !default;

/*---  Light Tones  ---*/
$whiteFocus           : darken($white, 8) !default;
$offWhiteFocus        : darken($offWhite, 8) !default;
$darkWhiteFocus       : darken($darkWhite, 8) !default;


/*-------------------
    Down (:active)
--------------------*/

/*---  Colors  ---*/
$primaryColorDown    : darken($primaryColor, 10) !default;
$secondaryColorDown  : lighten($secondaryColor, 10) !default;

$redDown             : darken($red, 10) !default;
$orangeDown          : darken($orange, 10) !default;
$yellowDown          : darken($yellow, 10) !default;
$oliveDown           : darken($olive, 10) !default;
$greenDown           : darken($green, 10) !default;
$tealDown            : darken($teal, 10) !default;
$blueDown            : darken($blue, 10) !default;
$violetDown          : darken($violet, 10) !default;
$purpleDown          : darken($purple, 10) !default;
$pinkDown            : darken($pink, 10) !default;
$brownDown           : darken($brown, 10) !default;

$lightRedDown        : darken($lightRed, 10) !default;
$lightOrangeDown     : darken($lightOrange, 10) !default;
$lightYellowDown     : darken($lightYellow, 10) !default;
$lightOliveDown      : darken($lightOlive, 10) !default;
$lightGreenDown      : darken($lightGreen, 10) !default;
$lightTealDown       : darken($lightTeal, 10) !default;
$lightBlueDown       : darken($lightBlue, 10) !default;
$lightVioletDown     : darken($lightViolet, 10) !default;
$lightPurpleDown     : darken($lightPurple, 10) !default;
$lightPinkDown       : darken($lightPink, 10) !default;
$lightBrownDown      : darken($lightBrown, 10) !default;
$lightGreyDown       : darken($lightGrey, 10) !default;
$lightBlackDown      : darken($fullBlack, 10) !default;

/*---  Emotive  ---*/
$positiveColorDown   : darken($positiveColor, 10) !default;
$negativeColorDown   : darken($negativeColor, 10) !default;

/*---  Brand   ---*/
$facebookDownColor   : darken($facebookColor, 10) !default;
$twitterDownColor    : darken($twitterColor, 10) !default;
$googlePlusDownColor : darken($googlePlusColor, 10) !default;
$linkedInDownColor   : darken($linkedInColor, 10) !default;
$youtubeDownColor    : darken($youtubeColor, 10) !default;
$instagramDownColor  : darken($instagramColor, 10) !default;
$pinterestDownColor  : darken($pinterestColor, 10) !default;
$vkDownColor         : darken($vkColor, 10) !default;

/*---  Dark Tones  ---*/
$fullBlackDown       : lighten($fullBlack, 10) !default;
$blackDown           : lighten($black, 10) !default;
$greyDown            : lighten($grey, 10) !default;

/*---  Light Tones  ---*/
$whiteDown           : darken($white, 10) !default;
$offWhiteDown        : darken($offWhite, 10) !default;
$darkWhiteDown       : darken($darkWhite, 10) !default;


/*-------------------
        Active
--------------------*/

/*---  Colors  ---*/
$primaryColorActive    : saturate(darken($primaryColor, 5), 15) !default;
$secondaryColorActive  : saturate(lighten($secondaryColor, 5), 15) !default;

$redActive             : saturate(darken($red, 5), 15) !default;
$orangeActive          : saturate(darken($orange, 5), 15) !default;
$yellowActive          : saturate(darken($yellow, 5), 15) !default;
$oliveActive           : saturate(darken($olive, 5), 15) !default;
$greenActive           : saturate(darken($green, 5), 15) !default;
$tealActive            : saturate(darken($teal, 5), 15) !default;
$blueActive            : saturate(darken($blue, 5), 15) !default;
$violetActive          : saturate(darken($violet, 5), 15) !default;
$purpleActive          : saturate(darken($purple, 5), 15) !default;
$pinkActive            : saturate(darken($pink, 5), 15) !default;
$brownActive           : saturate(darken($brown, 5), 15) !default;

$lightRedActive        : saturate(darken($lightRed, 5), 15) !default;
$lightOrangeActive     : saturate(darken($lightOrange, 5), 15) !default;
$lightYellowActive     : saturate(darken($lightYellow, 5), 15) !default;
$lightOliveActive      : saturate(darken($lightOlive, 5), 15) !default;
$lightGreenActive      : saturate(darken($lightGreen, 5), 15) !default;
$lightTealActive       : saturate(darken($lightTeal, 5), 15) !default;
$lightBlueActive       : saturate(darken($lightBlue, 5), 15) !default;
$lightVioletActive     : saturate(darken($lightViolet, 5), 15) !default;
$lightPurpleActive     : saturate(darken($lightPurple, 5), 15) !default;
$lightPinkActive       : saturate(darken($lightPink, 5), 15) !default;
$lightBrownActive      : saturate(darken($lightBrown, 5), 15) !default;
$lightGreyActive       : saturate(darken($lightGrey, 5), 15) !default;
$lightBlackActive      : saturate(darken($fullBlack, 5), 15) !default;

/*---  Emotive  ---*/
$positiveColorActive   : saturate(darken($positiveColor, 5), 15) !default;
$negativeColorActive   : saturate(darken($negativeColor, 5), 15) !default;

/*---  Brand   ---*/
$facebookActiveColor   : saturate(darken($facebookColor, 5), 15) !default;
$twitterActiveColor    : saturate(darken($twitterColor, 5), 15) !default;
$googlePlusActiveColor : saturate(darken($googlePlusColor, 5), 15) !default;
$linkedInActiveColor   : saturate(darken($linkedInColor, 5), 15) !default;
$youtubeActiveColor    : saturate(darken($youtubeColor, 5), 15) !default;
$instagramActiveColor  : saturate(darken($instagramColor, 5), 15) !default;
$pinterestActiveColor  : saturate(darken($pinterestColor, 5), 15) !default;
$vkActiveColor         : saturate(darken($vkColor, 5), 15) !default;

/*---  Dark Tones  ---*/
$fullBlackActive       : darken($fullBlack, 5) !default;
$blackActive           : darken($black, 5) !default;
$greyActive            : darken($grey, 5) !default;

/*---  Light Tones  ---*/
$whiteActive           : darken($white, 5) !default;
$offWhiteActive        : darken($offWhite, 5) !default;
$darkWhiteActive       : darken($darkWhite, 5) !default;