// colors
	@text-primary:					#222;
	@brand-primary:					#2986b9;
	@brand-success:					#64b92a;
	@brand-info:					#4fbeba;
	@brand-warning:					#d7af0d;
	@brand-danger:					#c0392b;
	@brand-inverse:					#34495e;
	
	@color_a:						#3498db;
	@color_b:						#e67e22;
	@color_c:						#e74c3c;
	@color_d:						#27ae60;
	@color_e:						#8c0095;
	@color_f:						#008299;
	@color_g:						#ac193d;
	@color_h:						#dc4fad;
	@color_i:						#4617b4;
	
	@active-background:				#2487c9;
	@subactive-background:			lighten(@active-background, 50%);
	
// navbar
	@navbar-height:                 42px;
	@navbar-default-color:          #777;
	@navbar-default-bg:             #f8f8f8;

// body
	@body-main-bg:					#f5f6f7;
	@body-padding-top:				@navbar-height;

// buttons
	@btn-default-color:             #333;
	@btn-default-bg:                #fff;
	@btn-default-border:            #ccc;
	
	@btn-primary-color:             #fff;
	@btn-primary-bg:                @brand-primary;
	@btn-primary-border:            darken(@btn-primary-bg, 5%);
	
	@btn-success-color:             #fff;
	@btn-success-bg:                @brand-success;
	@btn-success-border:            darken(@btn-success-bg, 5%);
	
	@btn-info-color:                #fff;
	@btn-info-bg:                   @brand-info;
	@btn-info-border:               darken(@btn-info-bg, 5%);
	
	@btn-warning-color:             #fff;
	@btn-warning-bg:                @brand-warning;
	@btn-warning-border:            darken(@btn-warning-bg, 5%);
	
	@btn-danger-color:              #fff;
	@btn-danger-bg:                 @brand-danger;
	@btn-danger-border:             darken(@btn-danger-bg, 5%);
	
	@btn-inverse-color:              #fff;
	@btn-inverse-bg:                 @brand-inverse;
	@btn-inverse-border:             darken(@btn-inverse-bg, 5%);
	
	.button-variant(@color; @background; @border) {
		color: @color;
		background-color: @background;
		border-color: @border;
		&:hover,
		&:focus,
		&:active,
		&.active,
		.open .dropdown-toggle& {
			color: @color;
			background-color: darken(@background, 8%);
			border-color: darken(@border, 12%);
		}
		&:active,
		&.active,
		.open .dropdown-toggle& {
			background-image: none;
		}
		&.disabled,
		&[disabled],
		fieldset[disabled] & {
			&,
			&:hover,
			&:focus,
			&:active,
			&.active {
				background-color: @background;
				border-color: @border;
			}
		}
		.badge {
			color: @background;
			background-color: @color;
		}
	}

// tables
	.table-row-variant(@state; @background) {
		.table > thead > tr,
		.table > tbody > tr,
		.table > tfoot > tr {
			> td.@{state},
			> th.@{state},
			&.@{state} > td,
			&.@{state} > th {
				background-color: @background;
				color: #fff;
			}
		}
	  
		.table-hover > tbody > tr {
			> td.@{state}:hover,
			> th.@{state}:hover,
			&.@{state}:hover > td,
			&.@{state}:hover > th {
				background-color: darken(@background, 5%);
			}
		}
	}

// custom fonts
	.custom_font(@weight: 400, @size: 22px, @height: 32px) {
		font: @weight @size e('/') @height "Source Sans Pro", Arial, sans-serif;
	}
	
// some mixins from 3L ( http://mateuszkocz.github.io/3l/ )
	
	.border-radius (@radius:5px, ...) {
		-webkit-border-radius: @arguments;
		-moz-border-radius: @arguments;
		border-radius: @arguments;
	}
	.round-corner (top-left, @radius...){
		-webkit-border-top-left-radius: @radius;
		-moz-border-top-left-radius: @radius;
		border-top-left-radius: @radius;
	}
	.round-corner (top-right, @radius...){
		-webkit-border-top-right-radius: @radius;
		-moz-border-top-right-radius: @radius;
		border-top-right-radius: @radius;
	}
	.round-corner (bottom-right, @radius...) {
		-webkit-border-bottom-right-radius: @radius;
		-moz-border-bottom-right-radius: @radius;
		border-bottom-right-radius: @radius;
	}
	.round-corner (bottom-left, @radius...) {
		-webkit-border-bottom-left-radius: @radius;
		-moz-border-bottom-left-radius: @radius;
		border-bottom-left-radius: @radius;
	}
	.box-shadow(@shadow1, @shadow2:X, ...){
		@shadows: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
		-webkit-box-shadow: @shadows;
		-moz-box-shadow: @shadows;
		box-shadow: @shadows;
	}
	.opacity(@value) when (isnumber(@value)) and (@value =< 1){
		opacity: @value;
		filter: ~"alpha(opacity="@value*100~")";
	}
	.opacity(@value) when (isnumber(@value)) and (@value > 1) and not (ispercentage(@value)){
		opacity: @value/100;
		filter: ~"alpha(opacity="@value~")";
	}
	.transition(@transition1, @transition2:X, ...){
		@transitions: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
		-webkit-transition: @transitions;
		transition: @transitions;
	}
	.transition-transform (@transformArguments1, @transformArguments2:X, ...) {
		@transformArguments: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
		-webkit-transition: -webkit-transform @transformArguments;
		transition: transform @transformArguments;
	}
	.transition-property(@property1, @property2:X, ...) {
		@properties: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
		-webkit-transition-property: @properties;
		transition-property: @@properties;
	}
	.transition-duration(@property1, @property2:X, ...) {
		@properties: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
		-webkit-transition-duration: @properties;
		transition-duration: @properties;
	}
	.transition-timing-function(@property1, @property2:X, ...) {
		@properties: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
		-webkit-transition-timing-function: @properties;
		transition-timing-function: @properties;
	}
	.transition-delay(@property1, @property2:X, ...) {
		@properties: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
		-webkit-transition-delay: @properties;
		transition-delay: @properties;
	}
	.transform-origin(@arguments) {
		-webkit-transform-origin: @arguments;
		-moz-transform-origin: @arguments;
		-ms-transform-origin: @arguments;
		-o-transform-origin: @arguments;
		transform-origin: @arguments;
	}
	.rotate(@arguments) {
		-webkit-transform: rotate(@arguments);
		-moz-transform: rotate(@arguments);
		-ms-transform: rotate(@arguments);
		-o-transform: rotate(@arguments);
		transform: rotate(@arguments);
    }
	.scale(@arguments) {
		-webkit-transform: scale(@arguments);
		-moz-transform: scale(@arguments);
		-ms-transform: scale(@arguments);
		-o-transform: scale(@arguments);
		transform: scale(@arguments);
	}
	.scale(@argument1,@argument2) {
		-webkit-transform: scale(@argument1,@argument2);
		-moz-transform: scale(@argument1,@argument2);
		-ms-transform: scale(@argument1,@argument2);
		-o-transform: scale(@argument1,@argument2);
		transform: scale(@argument1,@argument2);
	}
	.scaleX(@arguments) {
		-webkit-transform: scaleX(@arguments);
		-moz-transform: scaleX(@arguments);
		-ms-transform: scaleX(@arguments);
		-o-transform: scaleX(@arguments);
		transform: scaleX(@arguments);
	}
	.scaleY(@arguments) {
		-webkit-transform: scaleY(@arguments);
		-moz-transform: scaleY(@arguments);
		-ms-transform: scaleY(@arguments);
		-o-transform: scaleY(@arguments);
		transform: scaleY(@arguments);
	}
	
	.seo-helper() {
		img:not([alt]), img[alt=""], img[alt^=" "],
		a[href=""], a[href^=" "], a[href="#"], a[rel*="nofollow"],
		div:empty, span:empty, li:empty, p:empty, td:empty, th:empty,
		*[title=""], *[class=""], *[id=""] {
			outline: 2px solid red !important;
			outline-offset: 3px !important;
			}
		head, title:empty, link, meta {display: block;}
		title:empty:before {content: "You've left the <title> empty!"}
		link:before {content: "You don't have a <title>!"}
		title ~ link {display: none;}
		meta[name="description"][content=""]:before, meta[name="description"][content=" "]:before {content: "You've left description empty!";}
	}
	
// css3 animations
	.animated {
		-webkit-animation-duration: 500ms;
		animation-duration: 500ms;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	@-webkit-keyframes fadeOutLeft {
		0% {
			opacity: 1;
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	  
		100% {
			opacity: 0;
			-webkit-transform: translateX(-20px);
			transform: translateX(-20px);
		}
	}
	  
	@keyframes fadeOutLeft {
		0% {
			opacity: 1;
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
		}
	  
		100% {
			opacity: 0;
			-webkit-transform: translateX(-20px);
			-ms-transform: translateX(-20px);
			transform: translateX(-20px);
		}
	}
	  
	.fadeOutLeft {
		-webkit-animation-name: fadeOutLeft;
		animation-name: fadeOutLeft;
	}
	
	@-webkit-keyframes fadeOutRight {
		0% {
			opacity: 1;
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	  
		100% {
			opacity: 0;
			-webkit-transform: translateX(20px);
			transform: translateX(20px);
		}
	}
	
	@keyframes fadeOutRight {
		0% {
			opacity: 1;
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
		}
	  
		100% {
			opacity: 0;
			-webkit-transform: translateX(20px);
			-ms-transform: translateX(20px);
			transform: translateX(20px);
		}
	}
	
	.fadeOutRight {
		-webkit-animation-name: fadeOutRight;
		animation-name: fadeOutRight;
	}
	
	@-webkit-keyframes fadeInLeft {
		0% {
			opacity: 0;
			-webkit-transform: translateX(-20px);
			transform: translateX(-20px);
		}
	  
		100% {
			opacity: 1;
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	}
	
	@keyframes fadeInLeft {
		0% {
			opacity: 0;
			-webkit-transform: translateX(-20px);
			-ms-transform: translateX(-20px);
			transform: translateX(-20px);
		}
	  
		100% {
			opacity: 1;
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
		}
	}
	
	.fadeInLeft {
		-webkit-animation-name: fadeInLeft;
		animation-name: fadeInLeft;
	}
	
	
	@-webkit-keyframes fadeInRight {
		0% {
			opacity: 0;
			-webkit-transform: translateX(20px);
			transform: translateX(20px);
		}
	  
		100% {
			opacity: 1;
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	}
	
	@keyframes fadeInRight {
		0% {
			opacity: 0;
			-webkit-transform: translateX(20px);
			-ms-transform: translateX(20px);
			transform: translateX(20px);
		}
	  
		100% {
			opacity: 1;
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
		}
	}
	
	.fadeInRight {
		-webkit-animation-name: fadeInRight;
		animation-name: fadeInRight;
	}
	