@border-color: #e5e5f8;
@brand-primary: #1a1a1a;
@secondary-color: #f9a11b;
@special-color: #77c720;
@text-color: #515666;

@transition-default: all 0.4s ease 0s;
.translate(@x; @y) {
    -webkit-transform: translate(@x, @y);
    -ms-transform: translate(@x, @y); // IE9 only
    -o-transform: translate(@x, @y);
    transform: translate(@x, @y);
}

.transition(@transition) {
    -webkit-transition: @transition;
    -o-transition: @transition;
    transition: @transition;
}

.opacity(@opacity) {
    opacity: @opacity;
    // IE8 filter
    @opacity-ie: (@opacity * 100);
    filter: ~"alpha(opacity=@{opacity-ie})";
}

.border-radius(@radius:4px) {
    -webkit-border-radius: @radius;
    border-radius: @radius;
}

.clearfix() {
    &:before,
    &:after {
        content: " "; // 1
        display: table; // 2
    }
    &:after {
        clear: both;
    }
}

.clearfix {
    .clearfix();
}

.after_cler() {
    &:after {
        clear: both;
        display: block;
        content: '';
    }
}

.box-shadow(@shadow) {
    -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
    box-shadow: @shadow;
}

// Animations
.animation(@animation) {
    -webkit-animation: @animation;
    -o-animation: @animation;
    animation: @animation;
}

.animation-name(@name) {
    -webkit-animation-name: @name;
    animation-name: @name;
}

.animation-duration(@duration) {
    -webkit-animation-duration: @duration;
    animation-duration: @duration;
}

.animation-timing-function(@timing-function) {
    -webkit-animation-timing-function: @timing-function;
    animation-timing-function: @timing-function;
}

.animation-delay(@delay) {
    -webkit-animation-delay: @delay;
    animation-delay: @delay;
}

.animation-iteration-count(@iteration-count) {
    -webkit-animation-iteration-count: @iteration-count;
    animation-iteration-count: @iteration-count;
}

.animation-direction(@direction) {
    -webkit-animation-direction: @direction;
    animation-direction: @direction;
}

.animation-fill-mode(@fill-mode) {
    -webkit-animation-fill-mode: @fill-mode;
    animation-fill-mode: @fill-mode;
}

.transform(@transform) {
    -webkit-transform: @transform;
    -moz-transform: @transform;
    -ms-transform: @transform; // IE9 only
    transform: @transform;
}

.translate3d(@x,@y,@z) {
    .transform(translate3d(@x,@y,@z));
}