
.rel {
    position: relative;
}
.abs {
    position: absolute;
}
.fixed {
    position: fixed;
}
@color: #284179;
@color2: #9ad337;
@color3: #eedfc2;

.flex {
    display: flex;
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
    display: -moz-box; /* Firefox 17- */  
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
    display: -moz-flex; /* Firefox 18+ */  
    display: -ms-flexbox; /* IE 10 */  
}
.flex-wrap {
    flex-flow: wrap;
}
.flex-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.inline-block {
    display: inline-block;
}
.block {
    display: block;
}
.hide {
    display: none;
}
.morewords(@num) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @num;
    overflow: hidden;
}
.bold {
    font-weight: 700;
}
.txt-center {
    text-align: center;
}
.txt-left {
    text-align: left;
}
.txt-right {
    text-align: right;
}
.box-shadow(@num:5px){
    box-shadow: 0 2px @num rgba(0,0,0,.1);
}
.transition(@type: all,@time: .3s) {
    transition: @type @time ease;
    -webkit-transition: @type @time ease;
    -moz-transition: @type @time ease;
    -ms-transition: @type @time ease;
    -o-transition: @type @time ease;
}
.animation(@type: all,@time: .4s) {
    transition: @type .8s @time;
    -webkit-transition: @type .8s @time;
    -moz-transition: @type .8s @time;
    -ms-transition: @type .8s @time;
    -o-transition: @type .8s @time;
}
.translateX(@num) {
    transform: translateX(@num);
    -webkit-transform: translateX(@num);
    -moz-transform: translateX(@num);
    -ms-transform: translateX(@num);
    -o-transform: translateX(@num);
}
.translateY(@num) {
    transform: translateY(@num);
    -webkit-transform: translateY(@num);
    -moz-transform: translateY(@num);
    -ms-transform: translateY(@num);
    -o-transform: translateY(@num);
}
.scale(@num) {
    transform: scale(@num);
    -webkit-transform: scale(@num);
    -moz-transform: scale(@num);
    -ms-transform: scale(@num);
    -o-transform: scale(@num);
}
.before {
    opacity: 0;
    visibility: hidden;
}
.after {
    opacity: 1;
    visibility: visible;
}
.font {
    font-family: Arial;
}
.txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.input(@c:#ccc,@f: 14px) {
    /* input placeholder  */
    ::-webkit-input-placeholder { /* WebKit browsers */
        color: @c;
        font-size: @f;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: @c;
        font-size: @f;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: @c;
        font-size: @f;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
        color:@c;
        font-size: @f;
    }
}
.upper {
    text-transform: uppercase;
}
.middle {
    vertical-align: middle;
}
.background {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.mbackground {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}