// Variables and Mixins - Guy Primavera
@import "elements.less";
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Raleway);
@import url(https://fonts.googleapis.com/css?family=Lato);

@desktop:   ~"only screen and (min-width: 1025px)";
@laptop:   ~"only screen and (max-width: 1024px)";
@tablet:   ~"only screen and (max-width: 960px)";
@mobile:   ~"only screen and (max-width: 782px)";

// Variables (actually constants)

@sideWidth: 250px;
@sideWidthFolded: 60px;
@barHeight: 65px;
@barHeightMobile: 46px;

// Mixins

.fontAwesome { font-family: "fontAwesome"!important; }
.menuFA { font-family: "fontAwesome" !important;font-size: 18px;line-height: 1.6; }
.serif { font-family: 'Raleway', serif; }
.sans { font-family: 'Roboto', sans-serif!important; }
.heading { font-family: 'Raleway', sans-serif; }
.bgCov { background-size: cover; background-position: center center; background-repeat: repeat; }
.icoAquila { font-family: 'Aquila' !important; content: "\a002"; }

// Text

.tac {
	text-align: center;
}

// Positioning

.va {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.abs {
	position: absolute;
}
.absFull {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
.fix {
	position: fixed;
}
.rel {
	position: relative;
}
.dN {
	display: none;
}
.dNI {
	display: none!important;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
.z0 {
	z-index: 0;
}
.z1 {
	z-index: 1;
}
.z10 {
	z-index: 10;
}
.z99 {
	z-index: 99;
}
.z999 {
	z-index: 999;
}

/* Widths & Heights */

.w0 {
	width: 0%;
}
.w25 {
	width: 25%;
}
.w50 {
	width: 50%;
}
.w75 {
	width: 75%;
}
.w100 {
	width: 100%;
}
.mw100 {
	max-width: 100%;
}
.h0 {
	height: 0%;
}
.h25 {
	height: 25%;
}
.h50 {
	height: 50%;
}
.h75 {
	height: 75%;
}
.h100 {
	height: 100%;
}
.mh100 {
	max-height: 100%;
}

/* Other */

.borderBox {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.trans {
	transition: 0.2s all linear; 
	-webkit-transition: 0.2s all linear; 
	-moz-transition: 0.2s all linear;
	-o-transition: 0.2s all linear;
}
.transNone {
	transition: none!important; 
	-webkit-transition: none!important; 
	-moz-transition: none!important;
	-o-transition: none!important;
}

// From Chris Coyier

.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius:    @radius;
	border-radius:         @radius;

	-moz-background-clip:    padding;
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
}
.opacity (@opacity: 0.5) {
	-webkit-opacity: 	@opacity;
	-moz-opacity: 		@opacity;
	opacity: 		@opacity;
}
.gradient (@startColor: #eee, @endColor: white) {
	background-color: @startColor;
	background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
	background: -webkit-linear-gradient(top, @startColor, @endColor);
	background: -moz-linear-gradient(top, @startColor, @endColor);
	background: -ms-linear-gradient(top, @startColor, @endColor);
	background: -o-linear-gradient(top, @startColor, @endColor);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
 	background-color: @startColor;
	background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
	background-image: -webkit-linear-gradient(left, @startColor, @endColor);
	background-image: -moz-linear-gradient(left, @startColor, @endColor);
	background-image: -ms-linear-gradient(left, @startColor, @endColor);
	background-image: -o-linear-gradient(left, @startColor, @endColor);
}
.transition (@transition) {
	-webkit-transition: @transition;  
	-moz-transition:    @transition;
	-ms-transition:     @transition; 
	-o-transition:      @transition;  
}
.transform(@string){
	-webkit-transform: @string;
	-moz-transform: 	 @string;
	-ms-transform: 		 @string;
	-o-transform: 		 @string;
}
.scale (@factor) {
	-webkit-transform: scale(@factor);
	-moz-transform: 	 scale(@factor);
	-ms-transform: 		 scale(@factor);
	-o-transform: 		 scale(@factor);
}
.rotate (@deg) {
	-webkit-transform: rotate(@deg);
	-moz-transform: 	 rotate(@deg);
	-ms-transform: 		 rotate(@deg);
	-o-transform: 		 rotate(@deg);
}