// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);
@mobile: ~"screen and (max-width: @{screen-xs-max})";
@tablet: ~"screen and (min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})";
@desktop: ~"screen and (min-width: @{screen-md-min}) and (max-width: @{screen-md-max})";
@desktop-lg: ~"screen and (min-width: @{screen-lg-min})";
@desktop-all: ~"screen and (min-width: @{screen-md-min})";
@transition_duration: 0.5s;
@container-width: 			1170px;      
.transition (@prop: all, @time: @transition_duration, @ease: linear,@delay:0) {
    -webkit-transition: @prop @time @ease;
    -moz-transition: @prop @time @ease;
    -o-transition: @prop @time @ease;
    -ms-transition: @prop @time @ease;
    transition: @prop @time @ease;
}
.delay(@delay:0){
    -webkit-transition-delay: @delay;
    -moz-transition-delay: @delay;
    -o-transition-delay: @delay;
    -ms-transition-delay: @delay;
    transition-delay: @delay;
}
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
    -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
    -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
    box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}

.border-radius (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
    -webkit-border-radius: @topleft @topright @bottomright @bottomleft;
    -moz-border-radius: @topleft @topright @bottomright @bottomleft;
    border-radius: @topleft @topright @bottomright @bottomleft;
}

.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
    -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}
.transform-rotateY(@rotate: 90deg){
  -webkit-transform:rotateY(@rotate);
  -moz-transform:rotateY(@rotate);
  -o-transform:rotateY(@rotate);
  -ms-transform:rotateY(@rotate);
  transform:rotateY(@rotate);
}
.transform-rotate(@rotate: 90deg, @time:0.5s, @ease: linear){
    -webkit-transition: -webkit-transform @time @ease;
    -moz-transition: -moz-transform @time @ease;
    transition: transform @time @ease;
    -webkit-transform: rotate(@rotate);
    -moz-transform: rotate(@rotate);
    -o-transform: rotate(@rotate);
    -ms-transform: rotate(@rotate);
    transform: rotate(@rotate);
}
.middle{
    position: absolute;
    top: 50%;
    -webkit-transform:translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.middle-center(){
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.translateY(@y: 0px) {
    -webkit-transform: translateY(@y);
    -moz-transform: translateY(@y);
    -ms-transform: translateY(@y);
    -o-transform: translateY(@y);
    transform: translateY(@y);
}
.translateX(@x: 0px) {
    -webkit-transform: translateX(@x);
    -moz-transform: translateX(@x);
    -ms-transform: translateX(@x);
    -o-transform: translateX(@x);
    transform: translateX(@x);
}
.scale (@scale:0) {
    -o-transform: scale(@scale);
    -ms-transform: scale(@scale);
    -moz-transform: scale(@scale);
    -webkit-transform: scale(@scale);
    transform: scale(@scale);
}
.color-overlay(@color: @base_color, @opacity: 0.8){
    background-color:rgba(red(@color),green(@color),blue(@color), @opacity);
}
.gradient (@startColor: #eee, @endColor: white) {
    background-color: @startColor;
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(@startColor), to(@endColor));
    background-image: -webkit-linear-gradient(top, @startColor, 0%, @endColor, 100%);
    background-image: -moz-linear-gradient(top, @startColor, @endColor);
    background-image: -ms-linear-gradient(top, @startColor 0%, @endColor 100%);
    background-image: -o-linear-gradient(top, @startColor, @endColor);
    background-image: linear-gradient(to bottom, @startColor 0%, @endColor 100%);
}

.quick-gradient (@origin: left, @alpha: 0.2) {
    background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}