@mainBgColor: #f8f8ff;
@defaultBlueColor: #065eec;


@topPaddingGradientLinks: 200px;
@paragraphFontSize: 18px;
@paddingBoxLeft: 40px;
@basePaddingLR: 80px;
@basePaddingLR-xs: 25px;
@paddingLR-xs: 25px;
@paddingLR-sm: 40px;

/*COLORS*/
/*Yellow*/
@colorYellow: #FFCD1A;
@colorYellowLight: #FFF1C0;

/*Pink*/
@colorPink: #FF7A95;
@colorPinkLight: #F0C6FF;
@colorPinkLighter: #FDA0B3;
@colorPinkLightest: #FFE1E7;

/*Blue*/
@colorBlueDark: #13072B;
@colorBlue: #0d6efd;
@colorBlueLightest: #DEDEFF;

/*Green*/
@colorGreen: #17AD6E;
@colorGreenLighter: #5ACF9E;
@colorGreenLightest: #A8DCC6;

/*Purple*/
@colorPurpleDark: #6400A2;
@colorPurple: #9607ED;
@colorPurpleLighter: #CA8DE8;
@colorPurpleLightest: #ECCCFF;

/*CUSTOM NAVBAR*/
.navWhite () {
    /*nav {
        &.navbar {
            .nav-logo {
                filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
            }

            .nav-link {
                color: #FFF;
            }

            .navigation-right {
                .dropdown {
                    .btn {
                        filter: none !important;
                    }
                }
            }
        }
    }*/
}

.navFullWhite () {
    /*nav {
        &.navbar {
            .nav-logo {
                filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
            }

            .nav-link {
                color: #FFF;
            }

            .navigation-right {
                .dropdown {
                    .btn {
                        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
                    }
                }
            }
        }
    }*/
}

/*END OF CUSTOM NAVBAR*/


/*#region main variables*/
.transition (@prop: all, @time: 0.5s, @ease: cubic-bezier(0.77, 0, 0.175, 1)) {
    -webkit-transition: @prop @time @ease;
    -khtml-transition: @prop @time @ease;
    -moz-transition: @prop @time @ease;
    -ie-transition: @prop @time @ease;
    -o-transition: @prop @time @ease;
    -ms-transition: @prop @time @ease;
    transition: @prop @time @ease;
}

.shadow (@shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.65)) {
    -webkit-box-shadow: @shadow;
    -khtml-box-shadow: @shadow;
    -moz-box-shadow: @shadow;
    -ie-box-shadow: @shadow;
    -o-box-shadow: @shadow;
    -ms-box-shadow: @shadow;
    box-shadow: @shadow;
}

.user-select (@select: none) {
    -webkit-user-select: @select;
    -moz-user-select: @select;
    -ms-user-select: @select;
    user-select: @select;
}

.radius (@radius: 0) {
    -webkit-border-radius: (@radius);
    -khtml-border-radius: (@radius);
    -moz-border-radius: (@radius);
    -ie-border-radius: (@radius);
    -o-border-radius: (@radius);
    -ms-border-radius: (@radius);
    border-radius: (@radius);
}

.border-top-radius(@radius) {
    border-top-right-radius: @radius;
    border-top-left-radius: @radius;
}

.border-right-radius(@radius) {
    border-bottom-right-radius: @radius;
    border-top-right-radius: @radius;
}

.border-bottom-radius(@radius) {
    border-bottom-right-radius: @radius;
    border-bottom-left-radius: @radius;
}

.border-left-radius(@radius) {
    border-bottom-left-radius: @radius;
    border-top-left-radius: @radius;
}

.rotate(@degrees) {
    -webkit-transform: rotate(@degrees);
    -ms-transform: rotate(@degrees);
    transform: rotate(@degrees);
}

.scale(@ratio, @ratio-y) {
    -webkit-transform: scale(@ratio, @ratio-y);
    -ms-transform: scale(@ratio, @ratio-y);
    transform: scale(@ratio, @ratio-y);
}

.translate(@x, @y) {
    -webkit-transform: translate(@x, @y);
    -ms-transform: translate(@x, @y);
    transform: translate(@x, @y);
}

.skew(@x, @y) {
    -webkit-transform: skew(@x, @y);
    -ms-transform: skewX(@x) skewY(@y);
    transform: skew(@x, @y);
}

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

.rotateX(@degrees) {
    -webkit-transform: rotateX(@degrees);
    -ms-transform: rotateX(@degrees);
    transform: rotateX(@degrees);
}

.rotateY(@degrees) {
    -webkit-transform: rotateY(@degrees);
    -ms-transform: rotateY(@degrees);
    transform: rotateY(@degrees);
}

.rotateZ(@degrees) {
    -webkit-transform: rotateZ(@degrees);
    -ms-transform: rotateZ(@degrees);
    transform: rotateZ(@degrees);
}


.perspective(@perspective) {
    -webkit-perspective: @perspective;
    -moz-perspective: @perspective;
    perspective: @perspective;
}

.perspective-origin(@perspective) {
    -webkit-perspective-origin: @perspective;
    -moz-perspective-origin: @perspective;
    perspective-origin: @perspective;
}

.transform-origin(@origin) {
    -webkit-transform-origin: @origin;
    -moz-transform-origin: @origin;
    -ms-transform-origin: @origin;
    transform-origin: @origin;
}

.animation(@animation) {
    -webkit-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;
}

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

.gradient (@angle: 45deg, @color: #e5e5e5, @color2: #e5e5e5) {
    background: @color;
    /* Old browsers */
    background: -moz-linear-gradient(@angle, @color 20%, @color2 100%);
    background: -webkit-linear-gradient(@angle, @color 20%, @color2 100%);
    background: linear-gradient(@angle, @color 20%, @color2 100%);
}


.clear {
    clear: both;
    content: '';
    display: table;
}


/*#endregion main variables*/

/*#region div templates*/

.divBox (@bg: red, @padding: 20px, @textColor: black, @fsize: 12px, @align: left) {
    background: @bg;
    padding: @padding;
    text-align: @align;

    h1 {
        color: (darken(@textColor, 20%));
        font-size: ceil((@fsize * 2.6));
    }

    h2 {
        color: (darken(@textColor, 10%));
        font-size: ceil((@fsize * 1.7));
    }

    p {
        color: @textColor;
        font-size: @fsize;
        text-align: @align;
    }

    &:hover {
        background-color: (darken(@bg, 10%));
    }
}

.divBoxLight (@bg, @padding, @textColor, @fsize, @align) {
    background: @bg;
    padding: @padding;
    text-align: @align;

    h1 {
        color: (lighten(@textColor, 20%));
        font-size: floor((@fsize * 2.6));
    }

    h2 {
        color: (lighten(@textColor, 10%));
        font-size: floor((@fsize * 1.7));
    }

    p {
        color: @textColor;
        font-size: @fsize;
        text-align: @align;
    }

    &:hover {
        background-color: (lighten(@bg, 10%));
    }
}




/*#endregion div templates*/

/*#region bootstrap-select*/
@color-red-error: rgb(185, 74, 72);
@color-grey-arrow: rgba(204, 204, 204, 0.2);

@width-default: 220px; // 3 960px-grid columns

@zindex-select-dropdown: 1060; // must be higher than a modal background (1050)
/*#endregon bootstrap-select*/


/*#region statusbar*/
.fixedElement(@top, @right, @bottom, @left, @zindex) {
    position: fixed;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
    z-index: @zindex;
}

.backgroundCover(@position, @size: cover) {
    background-size: @size;
    background-repeat: no-repeat;
    background-position: @position;
}

.outline-btn(@color) {
    border: 1px solid @color;
    color: @color;
    background-color: transparent;
    .transition(all, 0.25s, linear);

    a {
        color: white;
    }

    &:hover {
        background-color: @color;
        color: white;
        .transition(all, 0.25s, linear);
    }
}

.linesNumber(@num) {
    display: -webkit-box;
    -webkit-line-clamp: @num;
    -webkit-box-orient: vertical;
}

.download-links-color(@colorR, @colorG, @colorB) {

    &:first-of-type {
        background-color: rgba(@colorR, @colorG, @colorB, 0.95);

        &:hover {
            .transition;
            background-color: rgba(@colorR, @colorG, @colorB, 0.65);
        }
    }

    &:last-of-type {
        background-color: rgba(@colorR, @colorG, @colorB, 0.6);

        &:hover {
            background-color: rgba(@colorR, @colorG, @colorB, 0.4);
        }
    }
}