@blue: #456;
@green: #58d4a7;
@green-dark: #005540;
@gray-dark: #8A8A8A;
@gray-light: #767676;;
@dark: #777;
@black: #000;
@white: #FFF;
@yellow: #D39B45;
@gray: #443F3F;
@coffe:#c3c3c3;
@red: #F7484E;
@colorWhite: #ffffff;
@colorBlack: #000000;
@header--bg_color:#212121;
@text-color2:#c59d5f;

.border-radius(@radius:50%) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}
.transition(@time:0.3s) {
	-webkit-transition: all @time ease-out;
	-moz-transition: all @time ease-out;
	-o-transition: all @time ease-out;
	transition: all @time ease-out;
}
.button {
    color: @colorBlack !important;
    text-transform: none;
    font-size: 15px;
    font-weight: 700;
    position: relative;
    background-color: @text-color2 !important;
    .transition;
    border-width: 0px !important;

    &:hover {
        color: @colorWhite !important;
        background-color:  darken(@text-color2, 30%) !important;
        .transition(0.5s);
        border-width: 0px !important;

        a&, 
        a{text-decoration: none;}
    }
}
.input {
    border: 1px solid @coffe;
    color: @colorBlack;
    font-size: 1.2em;
    font-weight: normal;
    padding: 5px 10px;
    margin: 0 0 10px 0;

    &:focus{
          border-color:@text-color2;
        .style_placeholder({

            .ms_opacity (0);

        });
    }
}
.rotation(@deg:45deg) {
    -moz-transform: rotate(@deg);
    -ms-transform: rotate(@deg);
    -o-transform: rotate(@deg);
    -webkit-transform: rotate(@deg);
    transform: rotate(@deg);
}
.scale(@scale:1) {
    -moz-transform: scale(@scale);
    -ms-transform: scale(@scale);
    -o-transform: scale(@scale);
    -webkit-transform: scale(@scale);
    transform: scale(@scale);
}
.blur(@px:1px) {
    filter: blur(@px);
    -webkit-filter: blur(@px);
    -moz-filter: blur(@px);
    -o-filter: blur(@px);
}
.text-shadow {
    text-shadow: 1px 0px 1px @white;
    -webkit-text-shadow: 1px 0px 1px @white;
    -moz-text-shadow: 1px 0px 1px @white;
    -o-text-shadow: 1px 0px 1px @white;
}
.rect(@width: 40px , @height: 40px ){
    width: @width ;
    height: @height;
}

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

.merging_transition (@property: all,@duration: 0s,@delay: 0s,@ease: ease-in-out) when (@property=transform) {
    -webkit-transition+: -webkit-transform @duration @delay @ease;
       -moz-transition+:    -moz-transform @duration @delay @ease;
         -o-transition+:      -o-transform @duration @delay @ease;
            transition+:     -ms-transform @duration @delay @ease, 
                                 transform @duration @delay @ease;  
        
}
.merging_transition (@property: all,@duration: 0s,@delay: 0s,@ease: ease-in-out) when not (@property=transform) {
    -webkit-transition+: @arguments;
       -moz-transition+: @arguments;
         -o-transition+: @arguments;
            transition+: @arguments;
}

@max-desktop: ~"(min-width: 1025px)";

@desktop: ~"(max-width: 1024px)";

@max-tablet: ~"(min-width: 769px)";

@tablet: ~"(max-width: 768px)";

@max-mobile: ~"(min-width: 481px)";

@mobile: ~"(max-width: 480px)";





.media_max-desktop(@rules) {
    @media @max-desktop {
        @rules();
    };
};

.media-desktop(@rules) {
    @media @desktop {
        @rules();
    };
};

.media_max-tablet(@rules) {
    @media @max-tablet {
        @rules();
    };
};

.media-desktop-and-max-tablet(@rules) {
    @media @desktop and @max-tablet {
        @rules();
    };
};

.media-tablet(@rules) {
    @media @tablet {
        @rules();
    };
};

.media_max-mobile(@rules) {
    @media @max-mobile {
        @rules();
    };
};

.media-tablet-and-max-mobile(@rules) {
    @media @tablet and @max-mobile {
        @rules();
    };
};

.media-mobile(@rules) {
    @media @mobile {
        @rules();
    };
};





.mixin_right_trial(
@width:6px,
@height:6px,
@background: @colorBlack )
{
  display: block;
  width: 0;
  height: 0;
  border-left: @width solid @background  ;
  border-top:  @height/2 solid  transparent;
  border-bottom: @height/2 solid  transparent ;
}

.text_element_property
(
    @font-family: inherit,
    @font-weight: bold,
    @font-size: 60px,
    @color:@colorBlack,
    @line_height:60px,
    @text-transform: uppercase, 
)
{
    font-family: @font-family;
    font-size: @font-size;
    font-weight: @font-weight;
    color:  @color;
    line-height: @line_height;
    text-transform: @text-transform;
}

.header_style(
@text-transform: uppercase, 
@font-family: "Roboto Slab",
@font-weight: normal,
@font-size: 30px,
@line_height:30px,
@color:  @colorBlack
)
{
font-family: @font-family;
text-transform: @text-transform;
 font-weight: @font-weight;
 font-size: @font-size;
color: @color ;
line-height: @line_height;
}

.heading--block(){
margin-top: 30px;
margin-bottom: 20px;
}

.ms_opacity (@alpha) {
    @ms-alpha : @alpha*100;
    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=@ms-alpha);
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=@ms-alpha);
    // TODO: fix me
    //filter:~`"alpha(opacity="+@ms-alpha+")"`;
    -moz-opacity: @alpha;
    -khtml-opacity: @alpha;
    -webkit-opacity: @alpha;
    -o-opacity: @alpha;
    opacity: @alpha;
}


.base_block_for_effect(){
    overflow: hidden;
    position: relative;
}

.after_block(
    @width:100%,
    @height: 100%,
    @pointer-events: none
)
{
    position: absolute;
    content: '';
    width: @width;
    height: @height;
    left: 0px;
    top: 0;
    pointer-events: @pointer-events; 
}

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

.block--center_align(){
  margin-right: auto;
  margin-left: auto;
}

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

.golden_section(@n:1){
  width: (100% / 3) * @n;
}

.mixin_absolute_block_vertical(@width:66.66%, @height:290px){
position:absolute; 
top: 50%;
width:@width; 
height:@height;
margin-top: -@height / 2;
} 

.mixin_absolute_block_horizontal
(@width:20px, @height:20px)
{
position:absolute; 
left: 50%;
width:@width; 
height:@height;
margin-left: -@width / 2;
} 

.style_placeholder(@rules){

    &::-webkit-input-placeholder {@rules();};
    
    &::-moz-placeholder { @rules();};
    
    &:-moz-placeholder   {  @rules();};
    
    &:-ms-input-placeholder      { @rules();};

}

.text_cut
(
@height:auto,
@width:auto, 
@type_text_overflow: ellipsis,
@white-space: nowrap
)
{
height: @height;
width: @width ;
overflow: hidden;
text-overflow: @type_text_overflow;
white-space:   @white-space;
}

// keyframes______________________________

.keyframes(@name,@rules) {


  @-webkit-keyframes @name {
  @rules();
  };

  @-moz-keyframes @name {
  @rules();
  };

  @-ms-keyframes @name {
  @rules();
  };

  @-o-keyframes @name {
  @rules();
  };

  @keyframes @name {
  @rules();
  };

}

.animation(
    @name,
    @duration:3s,
    @animation-delay: 0s,
    @count:1, 
    @direction:name,
    @function:linear,
    @animation-play-state:running,
    @animation-fill-mode:forwards
 ) {
    -webkit-animation-name+: @name;
    -moz-animation-name+: @name;
    -ms-animation-name+: @name;
    -o-animation-name+: @name;
    animation-name+: @name;

    -webkit-animation-duration+: @duration;
    -moz-animation-duration+: @duration;
    -ms-animation-duration+: @duration;
    -o-animation-duration+: @duration;
    animation-duration+: @duration;

    -webkit-animation-iteration-count+: @count;
    -moz-animation-iteration-count+: @count;
    -ms-animation-iteration-count+: @count;
    -o-animation-iteration-count+: @count;
    animation-iteration-count+: @count;

    -webkit-animation-direction+: @direction;
    -moz-animation-direction+: @direction;
    -ms-animation-direction+: @direction;
    -o-animation-direction+: @direction;
    animation-direction+: @direction;

    -webkit-animation-timing-function+: @function;
    -moz-animation-timing-function+: @function;
    -ms-animation-timing-function+: @function;
    -o-animation-timing-function+: @function;
    animation-timing-function+: @function;

    -webkit-animation-play-state+: @animation-play-state;
    -moz-animation-play-state+: @animation-play-state;
    -ms-animation-play-state+: @animation-play-state;
    -o-animation-play-state+: @animation-play-state;
    animation-play-state+: @animation-play-state;

    -webkit-animation-fill-mode+: @animation-fill-mode;
    -moz-animation-fill-mode+: @animation-fill-mode;
    -ms-animation-fill-mode+: @animation-fill-mode;
    -o-animation-fill-mode+: @animation-fill-mode;
    animation-fill-mode+: @animation-fill-mode;

    -webkit-animation-delay+: @animation-delay;
    -moz-animation-delay+: @animation-delay;
    -ms-animation-delay+: @animation-delay;
    -o-animation-delay+: @animation-delay;
    animation-delay+:@animation-delay;

} 

.img-bg-darknes-fon(){background-color:  fade(@colorBlack, 70%);}

.js-events-none{pointer-events: none;}

.js-events-auto{pointer-events: auto;}

.js-overflow-hid{ overflow: hidden;}