//
// Component: Variables
// -------------------

// Global variables
// -------------------

//
// Text
//

@global-color:                                  #4b5d73;
@global-light-color:							#a1b7d2;
@global-muted-color:                            #a8aeb6;
@global-dark-color:								#273f5b;
@global-highlight-color:						#4b5d73;
@global-highlight-background:					fade(@global-primary-background, 20%);
@global-section-title-color:					fade(@global-color, 4%);

@global-contrast-color:                         #fff;
@global-heading-color:                          #273f5b;
@global-secondary-color:                        #fff;
@global-secondary-highlight-color:				@global-highlight-background;

@global-link-color:                             #839dbc;
@global-link-hover-color:                       #0083ff;

// 
// Typography
// 

@global-font-size:								17px;
@global-line-height:							30px;
@global-heading-letter-space:					-0.5px;

@global-body-font-family:                       'Nunito';
@global-heading-font-family:                  	'Nunito';
@global-italic-font-family:						'Georgia';

@global-body-font-weight:						400;
@global-thin-font-weight:						200;
@global-light-font-weight:						300;
@global-regular-font-weight:					400;
@global-medium-font-weight:						700;
@global-bold-font-weight:						900;
@global-italic-font-weight:						400;
@global-heading-font-weight:					700;
@global-large-text-font-weight:					700;

//
// Backgrounds & Borders
//

@global-background:                             #fff;
@global-light-background:                       #f3f3f3;
@global-extra-light-background:                 #f8f8f8;
@global-primary-light-background:               #ecf5fe;
@global-background-blend-mode:					overlay;
@global-border:									rgba(0,0,0,0.1);
@global-border-radius:                          10px;

@global-primary-background:						#0083ff;
@global-primary-2-background:					#98d5ff;
@global-primary-2-color:						#fff;
@global-primary-3-background:					#839dbc;
@global-primary-3-color:						#fff;
@global-primary-4-background:					#4b5d73;
@global-primary-4-color:						#fff;
@global-secondary-background: 					#273f5b;
@global-dark-background: 						#121921;

@global-success-background:                     #01a23c;
@global-warning-background:                     #f89101;
@global-danger-background:                      #ff3133;

//
// Icons
//

@global-font-icon:                              "fontAwesome";
@global-utouch-icon:                      		"utouch-icons";

//
// Spacings
//

@global-margin:                                 20px;
@global-margin-small:                           15px;
@global-margin-large:							30px;
@global-margin-xlarge:							50px;
@global-grid-gutter:                            30px;
@global-grid-gutter-large:                      50px;
@global-block-gutter:							30px;
@global-block-gutter-small:						20px;
@global-padding-large:							100px;

//
// Controls
//

@global-height:                                 40px;
@global-mini-height:                            25px;
@global-small-height:                           35px;
@global-large-height:                           60px;

//
// Breakpoints
//

@breakpoint-medium:								900px;

//
// Z-index
//

@global-z-index:                                1000;

//
// Transition
//

@global-transition:                             all 0.3s ease-in-out;
@global-transition-slow:                        all 0.4s ease-in-out;
@global-transition-fast:                        all 0.1s ease-in-out;

@global-transition-color:                       color 0.3s ease-in-out;
@global-transition-background:                  background 0.3s ease-in-out;
@global-transition-border:                		border 0.3s ease-in-out;
@global-transition-box-shadow:                	box-shadow 0.3s ease-in-out;
@global-transition-fill:                		fill 0.3s ease-in-out;
@global-transition-opacity:                		opacity 0.3s ease-in-out;
@global-transition-transform:                	transform 0.3s ease-in-out;
@global-transition-width:                		width 0.3s ease-in-out;

//
// Global shadows
//

@global-light-05-shadow:						rgba(255,255,255,0.05);
@global-light-1-shadow:							rgba(255,255,255,0.1);
@global-light-15-shadow:						rgba(255,255,255,0.15);
@global-light-2-shadow:							rgba(255,255,255,0.2);
@global-light-3-shadow:							rgba(255,255,255,0.3);
@global-light-4-shadow:							rgba(255,255,255,0.4);

@global-dark-05-shadow:							rgba(0,0,0,0.05);
@global-dark-075-shadow:						rgba(0,0,0,0.075);
@global-dark-15-shadow:							rgba(0,0,0,0.15);
@global-dark-1-shadow:							rgba(0,0,0,0.1);
@global-dark-2-shadow:							rgba(0,0,0,0.2);
@global-dark-3-shadow:							rgba(0,0,0,0.3);
@global-dark-4-shadow:							rgba(0,0,0,0.4);
@global-dark-5-shadow:							rgba(0,0,0,0.5);

//
// Internal Global variables
//

@global-style:                                  'default';

// 
// Gradients
// 

.gradient-left (@gradientColor: @global-contrast-color, @startGradient: @global-light-1-shadow, @endGradient: @global-dark-075-shadow) {
	background: @gradientColor;
	background: -moz-linear-gradient(left, @startGradient 0%, @endGradient 100%);
	background: -webkit-linear-gradient(left, @startGradient 0%,@endGradient 100%);
	background: linear-gradient(to right, @startGradient 0%,@endGradient 100%);
}

.gradient-diagonal (@gradientColor: @global-contrast-color, @startGradient: @global-light-1-shadow, @endGradient: @global-dark-075-shadow) {
	background: @gradientColor;
	background: linear-gradient(135deg, @startGradient 0%,@endGradient 100%);
}

.gradient (@gradientColor: @global-contrast-color, @startGradient: @global-light-1-shadow, @endGradient: @global-dark-075-shadow) {
	background: @gradientColor;
	background: -moz-linear-gradient(top, @startGradient 0%, @endGradient 100%);
	background: -webkit-linear-gradient(top, @startGradient 0%,@endGradient 100%);
	background: linear-gradient(to bottom, @startGradient 0%,@endGradient 100%);
}