/* the default font in our template*/
@font: 'Raleway', sans-serif;

/* default color skin */
@skin-color: #ec005f;

/* default color skin 2 */
@skin-color2: #e0005f;

/* background grey, headings text color*/
@skin-color3: #3a3d41;

/* background skin with transparency*/
@background2: rgba(58, 61, 65, 0.5);

/* text color 1 (some titles and some subtitles contain this color)*/
@color1: #dddddd; 

/* text color 2 (some text paragraphcs)*/
@color2: #999999;

/* white color*/
@white: #ffffff;

/* black color*/
@black: #000000;

/* ul reset margin and padding*/
.ul-reset {
    margin: 0;
    padding: 0;
}

/* default style for paragraphs in this template*/
.paragraph {
    font-size: 13px;
    color: @color1;
    font-family: @font;
    font-weight: 400;
    line-height: 20px;
    margin: 0 0 24px;
}

/* default style for anchors in this template*/
.anchor {
    display: inline-block;
    text-decoration: none;
    .transition;
}

/* default style for hading1 in this template*/
.heading1 {
    color: @skin-color3;
    font-size: 24px;
    font-family: @font;
    font-weight: 700;
    margin: 0 0 7px;
}

/* default style for hading2 in this template*/
.heading2 {
    color: @skin-color3;
    font-size: 14px;
    font-family: @font;
    font-weight: 700;
    margin: 0 0 2px;
    text-transform: uppercase;
}

/* default style for hading3 in this template*/
.heading3 {
    color: @white;
    font-size: 18px;
    font-family: @font;
    font-weight: 700;
    margin: 0 0 16px;
}

/* default style for hading4 in this template*/
.heading4 {
    color: @color2 - #202020;
    font-size: 16px;
    font-family: @font;
    text-transform: uppercase;
    line-height: 25px;
    margin: 0 0 10px;
}

/* variable for radius corners*/
.radius(@radius) { 
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

/* variable for radius corners*/
.radius-bottom-left(@radius) { 
    -webkit-border-bottom-left-radius: @radius;
    -moz-border-bottom-left-radius: @radius;
    -o-border-bottom-left-radius: @radius;
    border-bottom-left-radius: @radius;
}

/* variable for radius corners*/
.radius-bottom-right(@radius) { 
    -webkit-border-bottom-right-radius: @radius;
    -moz-border-bottom-right-radius: @radius;
    -o-border-bottom-right-radius: @radius;
    border-bottom-right-radius: @radius;
}

/* variable for radius corners*/
.radius-top-left(@radius) {
    -webkit-border-top-left-radius: @radius;
    -moz-border-top-left-radius: @radius;
    -o-border-top-left-radius: @radius;
    border-top-left-radius: @radius;
}

/* variable for radius corners*/
.radius-top-right(@radius) { 
    -webkit-border-top-right-radius: @radius;
    -moz-border-top-right-radius: @radius;
    -o-border-top-right-radius: @radius;
    border-top-right-radius: @radius;
}

/* variable for transitions*/
.transition { 
    transition: all 0.20s ease-in-out;
    -moz-transition: all 0.20s ease-in-out;
    -webkit-transition: all 0.20s ease-in-out;
    -o-transition: all 0.20s ease-in-out;
}

/* variable for transitions*/
.transition2 { 
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

/* variable for tranform grow elem scale*/
.grow-transform(@scale) { 
    transform: scale(@scale);
    -webkit-transform: scale(@scale);
    -moz-transform: scale(@scale);
    -o-transform: scale(@scale);
}

/* no shadow  variable*/
.no-shadow {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
}

/* box shadow  variable*/
.box-shadow(@val) {
    box-shadow: @val;
    -webkit-box-shadow: @val;
    -moz-box-shadow: @val;
    -o-box-shadow: @val;
}

/* animation duration  variable*/
.animation-hover {
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-name: hovertrans;
    -moz-animation-name: hovertrans;
    -ms-animation-name: hovertrans;
    -o-animation-name: hovertrans;
    animation-name: hovertrans;
}

/* animate transform variable*/
.animate-transform {
    @-webkit-keyframes hovertrans {
        0% { .grow-transform(0); }    
        50% { .grow-transform(1.07); }
        100% { .grow-transform(1); }
    }
    @-moz-keyframes hovertrans {
        0% { .grow-transform(0); }    
        50% { .grow-transform(1.07); }
        100% { .grow-transform(1); }
    }
    @-o-keyframes hovertrans {
        0% { .grow-transform(0); }    
        50% { .grow-transform(1.07); }
        100% { .grow-transform(1); }
    }
    @keyframes hovertrans {
        0% { .grow-transform(0); }    
        50% { .grow-transform(1.07); }
        100% { .grow-transform(1); }
    }
}

/* animate transform rotate variable*/
.rotate(@rotate) {
    -webkit-transform: rotate(@rotate);
    -moz-transform: rotate(@rotate);
    -ms-transform: rotate(@rotate);
    -o-transform: rotate(@rotate);
    transform: rotate(@rotate);
}

/* animate transform rotate x variable*/
.rotateX(@rotate) {
    -webkit-transform: rotateX(@rotate);
    -moz-transform: rotateX(@rotate);
    -ms-transform: rotateX(@rotate);
    -o-transform: rotateX(@rotate);
    transform: rotateX(@rotate);
}

/* animate transform rotate Y variable*/
.rotateY(@rotate) {
    -webkit-transform: rotateY(@rotate);
    -moz-transform: rotateY(@rotate);
    -ms-transform: rotateY(@rotate);
    -o-transform: rotateY(@rotate);
    transform: rotateY(@rotate);
}

/* animate transform rotate Y variable*/
.trans-origin {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
}