// SASS Configuration File

// Fonts
// -----------------------------------------

$font-primary: 'Montserrat', sans-serif !default;
$font-secondary: 'Montserrat', sans-serif !default;

// Colors
// -----------------------------------------

$color-primary: #3D64CC !default;
$color-secondary: #f5f7f7;
$color-light: #f5f7f7;
$color-dark: #202124;

$color-global: #343840;
$color-muted: #8e9193; 
$color-muted-light: rgba(255,255,255,0.5);  

$color-red: #e15757;
$color-blue: #56aee5;
$color-orange: #ec9744;
$color-red: #e15757;
$color-green: #6BB268;
$color-gold: #ebd072;
$color-medium: #bdc3c4;

// Colors - Social 
$color-facebook: #213553;
$color-twitter: #3aa8db;
$color-google: #d04f3e;
$color-behance: #1882ff;
$color-dribbble: #e95aae;
$color-flickr: #f9429c;
$color-instagram: #4f86ac;
$color-linkedin: #008bc2;
$color-pinterest: #cb1f24;
$color-skype: #00bef4;
$color-slack: #44ba97;
$color-tumblr: #435971;
$color-vimeo: #0bc4ef;
$color-vine: #00be9b;
$color-youtube: #ed4533;

// Colors - Lines
$color-line: darken(desaturate(adjust-hue($color-light, 14.2857), 12.9870), 7.4510);
$color-line-light: rgba(255,255,255,0.15);

// Other
// -----------------------------------------

@mixin transition-primary() {
	@include transition(all 0.25s ease-out);
}

@mixin transition-secondary() {
	@include transition(all 0.8s ease-out);
}

@mixin button-clear {
	background-color: transparent;
    @include appearance(none);
    border: none;
    outline: none;
    cursor: pointer;
    @include transition-primary;
}

@mixin input-clear {
	background-color: transparent;
    @include appearance(none);
    border: none;
    outline: none;
    cursor: pointer;
    @include transition-primary;
}

$header-horizontal-height: 60px;
$navigation-mobile-height: 50px;

// Media Queries
// -----------------------------------------

$screen-xl: "only screen and (max-width: 1500px)";
$screen-lg: "only screen and (max-width: 1199px)";
$screen-md: "only screen and (max-width: 991px)";
$screen-sm: "only screen and (max-width: 767px)";
$screen-xs: "only screen and (max-width: 575px)";

$screen-height-sm: "only screen and (max-height: 500px)";

// Arrays
// -----------------------------------------

$socialBrands:
	"facebook", $color-facebook,
	"twitter", $color-twitter,
	"google", $color-google,
	"behance", $color-behance,
	"dribbble", $color-dribbble,
	"flickr", $color-flickr,
	"instagram", $color-instagram,
	"linkedin", $color-linkedin,
	"pinterest", $color-pinterest,
	"skype", $color-skype,
	"slack", $color-slack,
	"tumblr", $color-tumblr,
	"vimeo", $color-vimeo,
	"vine", $color-vine,
	"youtube", $color-youtube;

$colorVersions:
    "primary", $color-primary,
	"secondary", $color-secondary,
	"info", $color-blue,
	"warning", $color-orange,
	"danger", $color-red,
	"success", $color-green,
	"dark", $color-dark;