/*------------------------------------------------------------------
# [Variables]
------------------------------------------------------------------*/

/*************** 1. COLORS ***************/

/*****---------- 1.1 Base Colors ----------*****/

@black: #000000;
@black-1: #707580; //#989898;
@black-roll: #666;

@white: #FFFFFF;
@white-1: #F6F6F5;
@white-2: #EFEFEF;

@grey: #D2D2D1;
@grey-1: #707580; //#989898;
@grey-2: #707070;

@indigo-1: #F8F9FD;
@indigo-2: #EEF0FB;

@red: #FF1E43;
@red-roll: #FE5671;
@green: #00C58D;
@blue: #4E63CE; //#4251FF;
@blue-roll: #6889E2;
@blue-light: #00E7FF;
@yellow: #FFC001;
@blue-grey: #E8ECED;
@blue-grey-dark: #A0AEB4;

@deactivated: @grey;
@lazy-placeholder: #646a76;

@zendesk: #93A3B2;

@primary-btn-color: @blue;
@secondary-btn-color: @blue;


/*****---------- 1.2 Genre Colors ----------*****/

@country: #cd79ba;
@pop: #66c2e7;
@hip-hop: #66d2d6;
@rnb: #66c9ab ;
@latin: #f4729b;
@electronic: #66d8ed;
@rock: #7baad5;
@metal: #798cc2;
@punk: #a281bd;
@jazz: #a6d78f;
@reggae: #fdd471;
@blues: #66cd94;
@classical: #c9e188;
@religious: #e0e97f;
@european: #f5907a;
@asian: #fabc78;
@middle-eastern: #f0f070;
@african: #ffe566;


/*****---------- 1.3 Channel Colors ----------*****/

@viberate: #FF1F43;
@viberate-low: #FF627B;
@viberate-lower: #FF8FA1;
@instagram: #C13684;
@instagram-low: #D372A8;
@instagram-lower: #E09AC1;
@facebook: #1877F2;
@facebook-low: #7A94C9;
@facebook-lower: #8BBBF8;
@twitter: #00ACEE;
@twitter-low: #4CC4F3;
@twitter-lower: #7FD5F6;
@youtube: #FF0000;
@youtube-low: #FF4C4C;
@youtube-lower: #FF7F7F;
@spotify: #1DB954;
@spotify-low: #61E38F;
@spotify-lower: #8EEBAF;
@deezer: #00796B;
@deezer-low: #4CA197;
@deezer-lower: #7FBCB5;
@soundcloud: #FF6400;
@soundcloud-low: #FF924C;
@soundcloud-lower: #FFB17F;
@shazam: #2255FF;
@shazam-low: #6488FF;
@shazam-lower: #90AAFF;
@tiktok: #3CDAE5;
@tiktok-low: #76E5EC;
@tiktok-lower: #9DECF2;
@bandsintown: #00B4B3;
@bandsintown-low: #4CCAC9;
@bandsintown-lower: #7FD9D9;
@beatport: #99CC00;
@beatport-low: #B7DB4C;
@beatport-lower: #C1D77F;

@female: #FF99CE;
@male: #80E4E8;

@lower-value: #A4A5A8;
@higher-value: #494C52;


/*************** 2. FONTS ***************/

/*****---------- 2.1 Font Variables ----------*****/

@suiss-int: 'suisseInt', sans-serif;
@suiss-int-mono: 'suisseIntMono', sans-serif;
@roboto-condensed: 'Roboto Condensed', sans-serif;
@icon-font: "icomoon";

@base-font: @suiss-int;
@base-font-size: 14;
@base-line-height: 1.5em;
@base-letter-spacing: 0.5px;

@text-color: @black;

@base-color: rgb(35,31,32);
@base-color-light: rgb(90,90,90);
@comp-color: spin(@base-color, 180);
@border-color: lighten(@base-color, 60%);


/*************** 3. FORMS ***************/

/*****---------- 3.1 Form Variables ----------*****/

//@input-background: #F5F5F5;
//@input-text-color: @black;
//@input-border: #CCC;
//@input-border-width: 0;
//@input-border-style: solid;
//@input-focus: #FFB932;
//@input-error-border: @error;
//@input-valid-border: @success;
//@input-error: @dark;
//@input-valid: @dark;
//@label: @dark;
//@select-hover: #F5F5F5;
//@placeholder-color: #ccc;
//@disabled: #ccc;


/*************** 4. LAYOUT ***************/

/*****---------- 4.1 Page Variables ----------*****/

@max-page-width: 1440px;
@max-page-mq-width: 1440px;

@page_spacer_mobile: 16px;
@page_spacer_mobile_landscape: 16px;
//@page_spacer_tablet: 50px;
@page_spacer_tablet: 40px;
//@page_spacer_tablet_landscape: 70px;
@page_spacer_tablet_landscape: 40px;
@page_spacer_desktop: 90px;

/*****---------- 4.2 Section Variables ----------*****/

@section_spacer_mobile: 40px;			//was 80
@section_spacer_mobile_landscape: 40px; //was 80
@section_spacer_tablet: 120px;
@section_spacer_tablet_landscape: 120px;
@section_spacer_desktop: 120px;

@section_spacer_fullscreen_mobile: 40px;
@section_spacer_fullscreen_tablet: 60px;
@section_spacer_fullscreen_tablet_landscape: 90px;
@section_spacer_fullscreen_desktop: 90px;

/*****---------- 4.3 Notifications ----------*****/

@notification-color: @blue;
@notification-color-opacity: 1;
@notification-color-text: @white;

/*****---------- 4.4 Header ----------*****/

@header-mobile-height: 40px;
@header-tablet-height: 65px; //was 70px
@header-desktop-height: 65px; //was 90px


/*************** 5. ANIMATION ***************/

/*****---------- 5.1 Animation variables ----------*****/

@ease-in-quad: cubic-bezier(.55, .085, .68, .53);
@ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
@ease-in-quart: cubic-bezier(.895, .03, .685, .22);
@ease-in-quint: cubic-bezier(.755, .05, .855, .06);
@ease-in-expo: cubic-bezier(.95, .05, .795, .035);
@ease-in-circ: cubic-bezier(.6, .04, .98, .335);

@ease-out-quad: cubic-bezier(.25, .46, .45, .94);
@ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
@ease-out-quart: cubic-bezier(.165, .84, .44, 1);
@ease-out-quint: cubic-bezier(.23, 1, .32, 1);
@ease-out-expo: cubic-bezier(.19, 1, .22, 1);
@ease-out-circ: cubic-bezier(.075, .82, .165, 1);

@ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
@ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
@ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
@ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
@ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
@ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);