
.Columns(@col){
    -moz-column-count: @col;
    -webkit-column-count: @col;
    column-count: @col;
}
.Scale(@perc){
    -ms-transform: scale(@perc); /* IE 9 */
    -webkit-transform: scale(@perc); /* Chrome, Safari, Opera */
    transform: scale(@perc);
}
.Rotate(@deg){
    -ms-transform: rotate(@deg); /* IE 9 */
    -webkit-transform: rotate(@deg); /* Chrome, Safari, Opera */
    transform: rotate(@deg);
}
.ScaleRotate(@perc, @deg){
    -ms-transform: scale(@perc) rotate(@deg); /* IE 9 */
    -webkit-transform: scale(@perc) rotate(@deg); /* Chrome, Safari, Opera */
    transform: scale(@perc) rotate(@deg);
}
.Slide1Animation(){
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
    -webkit-transition-delay: 2s; /* Safari */
    transition-delay: 2s;
}
.Transform(@param){
    -ms-transform: @param; /* IE 9 */
    -moz-transform: @param; /* Chrome, Safari, Opera */
    -webkit-transform: @param; /* Chrome, Safari, Opera */
    transform: @param;
}
.Transition (@transition: all ease 0.25s) {
    -webkit-transition: @transition;
    -moz-transition:    @transition;
    -ms-transition:     @transition;
    -o-transition:      @transition;
}
.TranslateY(@translate: -50%){
    -ms-transform: translateY(@translate);
    -webkit-transform: translateY(@translate);
    -o-transform: translateY(@translate);
    transform: translateY(@translate);
}
.TranslateX(@translate: -50%){
    -ms-transform: translateX(@translate);
    -webkit-transform: translateX(@translate);
    -o-transform: translateX(@translate);
    transform: translateX(@translate);
}

.TranslateXY(@translateX: -50%, @translateY: -50%){
    -ms-transform: translate(@translateX, @translateY);
    -webkit-transform: translate(@translateX, @translateY);
    -o-transform: translate(@translateX, @translateY);
    transform: translate(@translateX, @translateY);
}
.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);
}

.GradientVertical (@startColor: #eee, @endColor: white) {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/@startColor+0,009ec3+100;Blue+3D+%2315 */
    background: @startColor; /* Old browsers */
    background: -moz-linear-gradient(left,  @startColor 0%, @endColor 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  @startColor 0%,@endColor 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  @startColor 0%,@endColor 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@startColor', endColorstr='@endColor',GradientType=1 ); /* IE6-9 */
}

.Shadow (@x: 0, @y: 1px, @blur: 15px, @spread: 0, @alpha: 0.1) {
    -webkit-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
    -moz-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
    box-shadow:		@x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.BorderRadius (@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;
}

.BorderRadiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
    -webkit-border-top-right-radius:    @topright;
    -webkit-border-bottom-right-radius: @bottomright;
    -webkit-border-bottom-left-radius:  @bottomleft;
    -webkit-border-top-left-radius:     @topleft;

    -moz-border-radius-topright:        @topright;
    -moz-border-radius-bottomright:     @bottomright;
    -moz-border-radius-bottomleft:      @bottomleft;
    -moz-border-radius-topleft:         @topleft;

    border-top-right-radius:            @topright;
    border-bottom-right-radius:         @bottomright;
    border-bottom-left-radius:          @bottomleft;
    border-top-left-radius:             @topleft;

    -moz-background-clip:    padding;
    -webkit-background-clip: padding-box;
    background-clip:         padding-box;
}

.TextShadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
    text-shadow: @string;
}

.InsetShadow(@blur: 15px, @radius: 5px, @strength: 0.5){
    -webkit-box-shadow: inset 0px 0px @blur -@radius rgba(0,0,0,@strength);
    -moz-box-shadow: inset 0px 0px @blur -@radius rgba(0,0,0,@strength);
    box-shadow: inset 0px 0px @blur -@radius rgba(0,0,0,@strength);
}

.Animation (@param) {
    -webkit-animation: @param;
    -moz-animation: @param;
    -ms-animation: @param;
    animation: @param;
}

.GradientBorderVertical(@size: 2px, @color1: red, @color2: blue){
    border-top: @size solid @color1;
    border-bottom: @size solid @color2;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    -webkit-background-size: @size 100%;
    -moz-background-size: @size 100%;
    background-size: @size 100%;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(top, @color1 0%, @color2 100%), -webkit-linear-gradient(top, @color1 0%, @color2 100%);
    background-image: -moz-linear-gradient(top, @color1 0%, @color2 100%), -moz-linear-gradient(top, @color1 0%, @color2 100%);
    background-image: -o-linear-gradient(top, @color1 0%, @color2 100%), -o-linear-gradient(top, @color1 0%, @color2 100%);
    background-image: linear-gradient(to bottom, @color1 0%, @color2 100%), linear-gradient(to bottom, @color1 0%, @color2 100%);

}

.GradientBorderHorizontal(@size: 2px, @color1: red, @color2: blue){
    border-left: @size solid @color1;
    border-right: @size solid @color2;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-position: 0 0, 0 100% ;
    background-repeat: no-repeat;
    -webkit-background-size: 100% @size;
    -moz-background-size: 100% @size;
    background-size: 100% @size;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(left, @color1 0%, @color2 100%), -webkit-linear-gradient(left, @color1 0%, @color2 100%);
    background-image: -moz-linear-gradient(left, @color1 0%, @color2 100%), -moz-linear-gradient(left, @color1 0%, @color2 100%);
    background-image: -o-linear-gradient(left, @color1 0%, @color2 100%), -o-linear-gradient(left, @color1 0%, @color2 100%);
    background-image: linear-gradient(to right, @color1 0%, @color2 100%), linear-gradient(to right, @color1 0%, @color2 100%);
}