
/*Flex mixin*/
@import "vars";
.inline-flex,
.flex-inline,
.mixin-inline-flex {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
}
.flex,
.flex-row,
.mixin-flex-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-row-nowrap,
.mixin-flex-row-nowrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.row-reverse,
.flex-row-reverse,
.mixin-flex-row-reverse {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.flex-column,
.mixin-flex-column {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -ms-flex-direction: column;
    flex-wrap: wrap;
    flex-direction: column;
}
.flex-column-reverse,
.mixin-flex-column-reverse {
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
.flex-center,
.mixin-flex-center {
    align-items: center;
    justify-content: center;
}
.overlay{
    position: relative;
}
.overlay:after{
    .overlay(@background: @dark , @alpha: 0.5);
}
.overlay-opacity-0:after{
    opacity: 0!important;
}
.overlay-opacity-1:after{
    opacity: 0.1!important;
}
.overlay-opacity-2:after{
    opacity: 0.2!important;
}
.overlay-opacity-3:after{
    opacity: 0.3!important;
}
.overlay-opacity-4:after{
    opacity: 0.4!important;
}
.overlay-opacity-5:after{
    opacity: 0.5!important;
}
.overlay-opacity-6:after{
    opacity: 0.6!important;
}
.overlay-opacity-7:after{
    opacity: 0.7!important;
}
.overlay-opacity-8:after{
    opacity: 0.8!important;
}
.overlay-opacity-9:after{
    opacity: 0.9!important;
}
.overlay-opacity-10:after{
    opacity: 1!important;
}
.overlay *{
    position: relative;
    z-index: 1;
}
.overlay(@background: @dark , @alpha: 0.5){
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: @background;
    opacity: @alpha;
}
.gradient-overlay(@opacity: 0.5) {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: @opacity;
    pointer-events: none;
}
.gradient-color (@origin: to bottom right, @first-color: fade(@primary, 50%), @second-color: fade(@dark, 100%)){
    background-image: -webkit-linear-gradient(@origin, @first-color, @second-color);
    background-image: -moz-linear-gradient(@origin, @first-color, @second-color);
    background-image: -o-linear-gradient(@origin, @first-color, @second-color);
    background-image: -ms-linear-gradient(@origin, @first-color, @second-color);
    background-image: linear-gradient(@origin, @first-color, @second-color);
}
.border-radius (@radius: 0) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomright: 5px, @bottomleft: 5px) {
    -webkit-border-radius: @topleft @topright @bottomright @bottomleft;
    -moz-border-radius: @topleft @topright @bottomright @bottomleft;
    border-radius: @topleft @topright @bottomright @bottomleft;
}
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @ofset: 0px, @alpha: 0.5,) {
    -webkit-box-shadow: @x @y @blur @ofset rgba(0, 0, 0, @alpha);
    -moz-box-shadow: @x @y @blur @ofset rgba(0, 0, 0, @alpha);
    box-shadow: @x @y @blur @ofset rgba(0, 0, 0, @alpha);
}
.transition(@prop: all, @time: 0.3s, @ease:ease-in-out) {
    -webkit-transition: @prop @time @ease;
    -moz-transition: @prop @time @ease;
    -o-transition: @prop @time @ease;
    -ms-transition: @prop @time @ease;
    transition: @prop @time @ease;
}
.reflect(@length: 50%, @opacity: 0.2){
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255,255,255,@opacity)));
}

section:not(.block-style) .has-style,
section:not(.block-style).has-style{
    .border-radius(0%);
    .box-shadow(0px, 0px, 5px, 0px, 0);
    border: 1px solid @light;
    background-color: @light;
}
/* Icon Style */
@icon-size:2rem;
@icon-container-1: 3rem;
@icon-container-2: 5rem;
@icon-container-3: 7rem;

.icon(){
    .mixin-inline-flex();
    /*.mixin-flex-center();*/
    /*    background: transparent;*/
    .border-radius(100%);
    padding: 0.1rem;
    line-height: 1; 
    /* background-clip: content-box;*/
}



.icons {
    .icon();
    /*.has-style();*/
    .border-radius(50%);   
}

.icon-size(@width: @icon-container-1, @height: @width, @size:@icon-size){
    /*  width: @width;
        height: @height;*/
    font-size: @size;
}
.icon-style-1{
    .icon-size();  
}
.icon-style-2  {
    .icon-size(@icon-container-2, @icon-container-2, @icon-size*1.5);
}
.icon-style-3 {
    .icon-size(@icon-container-3, @icon-container-3, @icon-size*2);
}
/* Icon Style */