// .UniCSS v.20-12-2015 
// .UniCSS -> http://unicss.maxsite.com.ua/

*,
*:before,
*:after {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}
// .UniCSS -> http://unicss.maxsite.com.ua/

// normalize.css v3.0.2 | MIT License | git.io/normalize

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit; 
  margin: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; 
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; 
  padding: 0; 
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; 
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0; 
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}
// .UniCSS -> http://unicss.maxsite.com.ua/

// БЛОКИ

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

.b-right  { float: right; }
.b-left   { float: left; }

.b-center { 
        margin-left: auto;
        margin-right: auto; 
}

.b-hide { display: none; } 
.b-hide-imp { display: none !important; } 

.b-inline { display: inline-block; }
.b-block  { display: block; }

.b-clear { clear: both; }
// .UniCSS -> http://unicss.maxsite.com.ua/

// бордюры

// для элементов, где неважно какой border: по-умолчанию — серый
.bordered { border: @gray 1px solid; }

// задается классы: цвет (.bor-color1) стиль (.bor-solid) ширина (.bor1px)
// h6(bor-color5 bor-solid-l bor3px) Пример левого border
// по умолчанию ширина 1px для всех цветов. её можно не указывать
// отображение линии происходит по border-style
// h6(bor-gray300 bor-solid) Полная граница

// для всех классов по умолчанию 1px
[class*="bor-"] {
        border-width: 1px;
}

// цвета основные, дополнительные и серые
.bor-white, .hover-bor-white:hover { border-color: @white; }
.bor-black, .hover-bor-black:hover  { border-color: @black; }
.bor-red, .hover-bor-red:hover          { border-color: @red; }
.bor-green, .hover-bor-green:hover  { border-color: @green; }
.bor-blue, .hover-bor-blue:hover        { border-color: @blue; }
.bor-yellow, .hover-bor-yellow:hover { border-color: @yellow; }
.bor-orange, .hover-bor-orange:hover { border-color: @orange; }
.bor-olive, .hover-bor-olive:hover  { border-color: @olive; }
.bor-teal, .hover-bor-teal:hover        { border-color: @teal; }
.bor-violet, .hover-bor-violet:hover { border-color: @violet; }
.bor-purple, .hover-bor-purple:hover { border-color: @purple; }
.bor-pink, .hover-bor-pink:hover        { border-color: @pink; }
.bor-brown, .hover-bor-brown:hover  { border-color: @brown; }

.bor-color1, .hover-bor-color1:hover  { border-color: @color1; }
.bor-color2, .hover-bor-color2:hover  { border-color: @color2; }
.bor-color3, .hover-bor-color3:hover  { border-color: @color3; }
.bor-color4, .hover-bor-color4:hover  { border-color: @color4; }
.bor-color5, .hover-bor-color5:hover  { border-color: @color5; }

.bor-colorA1, .hover-bor-colorA1:hover { border-color: @colorA1; }
.bor-colorA2, .hover-bor-colorA2:hover { border-color: @colorA2; }
.bor-colorA3, .hover-bor-colorA3:hover { border-color: @colorA3; }
.bor-colorA4, .hover-bor-colorA4:hover { border-color: @colorA4; }
.bor-colorA5, .hover-bor-colorA5:hover { border-color: @colorA5; }

// все оттенки серого
.bor-gray, .hover-bor-gray:hover       { border-color: @gray;    }
.bor-gray50, .hover-bor-gray50:hover   { border-color: @gray50;  }
.bor-gray100, .hover-bor-gray100:hover { border-color: @gray100; }
.bor-gray200, .hover-bor-gray200:hover { border-color: @gray200; }
.bor-gray300, .hover-bor-gray300:hover { border-color: @gray300; }
.bor-gray400, .hover-bor-gray400:hover { border-color: @gray400; }
.bor-gray500, .hover-bor-gray500:hover { border-color: @gray500; }
.bor-gray600, .hover-bor-gray600:hover { border-color: @gray600; }
.bor-gray700, .hover-bor-gray700:hover { border-color: @gray700; }
.bor-gray800, .hover-bor-gray800:hover { border-color: @gray800; }
.bor-gray900, .hover-bor-gray900:hover { border-color: @gray900; }

// тип линий — этот класс и вызывает рисование линий
.bor-solid    { border-style: solid; }
.bor-solid-t  { border-top-style: solid; }
.bor-solid-r  { border-right-style: solid; }
.bor-solid-b  { border-bottom-style: solid; }
.bor-solid-l  { border-left-style: solid; }
.bor-solid-tb { border-top-style: solid; border-bottom-style: solid; }
.bor-solid-rl { border-right-style: solid; border-left-style: solid; }

.bor-dotted   { border-style: dotted; }
.bor-dotted-t { border-top-style: dotted; }
.bor-dotted-r { border-right-style: dotted; }
.bor-dotted-b { border-bottom-style: dotted; }
.bor-dotted-l { border-left-style: dotted; }
.bor-dotted-tb { border-top-style: dotted; border-bottom-style: dotted; }
.bor-dotted-rl { border-right-style: dotted; border-left-style: dotted; }

.bor-dashed   { border-style: dashed; }
.bor-dashed-t { border-top-style: dashed; }
.bor-dashed-r { border-right-style: dashed; }
.bor-dashed-b { border-bottom-style: dashed; }
.bor-dashed-l { border-left-style: dashed; }
.bor-dashed-tb { border-top-style: dashed; border-bottom-style: dashed; }
.bor-dashed-rl { border-right-style: dashed; border-left-style: dashed; }

.bor-double   { border-style: double; }
.bor-double-t { border-top-style: double; }
.bor-double-r { border-right-style: double; }
.bor-double-b { border-bottom-style: double; }
.bor-double-l { border-left-style: double; }
.bor-double-tb { border-top-style: double; border-bottom-style: double; }
.bor-double-rl { border-right-style: double; border-left-style: double; }

// толщина линий
// цикл border-width на основе @border_list из variables.less
.border_loop(@counter) when (@counter > 0) {
        .border_loop((@counter - 1));
        
        @val: extract(@border_list, @counter);
        
        .bor@{val} {
                border-width: ~"@{val}px";
        }
}

.border_loop(length(@border_list));

// спрятать ненужные линии
// h4(bor-gray bor-dashed bor2px bor-none-r bor-none-l pad6-tb t-center) Пример
.bor-none   { border-style: none !important; }
.bor-none-t { border-top-style: none !important; }
.bor-none-r { border-right-style: none !important; }
.bor-none-b { border-bottom-style: none !important; }
.bor-none-l { border-left-style: none !important; }
// .UniCSS -> http://unicss.maxsite.com.ua/

// кнопки

// типовой вариант
.button {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        white-space: nowrap;
        border: none; // для <button> 
        
        background: @button_bg_color;
        color: @button_text_color;
        padding: @button_padding;
        
        &:hover {
                text-decoration: none;
                background: @button_hover_bg_color;
                color: @button_hover_text_color;
        }
        
        &:active, 
        &:focus 
        {
                // background: @button_active_bg_color;
                // color: @button_active_text_color;
        }
        
        &.disabled,
        &:disabled
        {
                background: @button_disabled_bg_color;
                color: @button_disabled_text_color;
                cursor: not-allowed;
        }

}
// .UniCSS -> http://unicss.maxsite.com.ua/

// цвета

// основные
.colors_state(~"color1", @color1);
.colors_state(~"color2", @color2);
.colors_state(~"color3", @color3);
.colors_state(~"color4", @color4);
.colors_state(~"color5", @color5);

// дополнительные
.colors_state(~"colorA1", @colorA1);
.colors_state(~"colorA2", @colorA2);
.colors_state(~"colorA3", @colorA3);
.colors_state(~"colorA4", @colorA4);
.colors_state(~"colorA5", @colorA5);

// предопределенные
.colors_state(~"white", @white);
.colors_state(~"black", @black);

.colors_state(~"red", @red);
.colors_state(~"red900",  darken(@red, 40%));
.colors_state(~"red800",  darken(@red, 30%));
.colors_state(~"red700",  darken(@red, 20%));
.colors_state(~"red600",  darken(@red, 10%));
.colors_state(~"red500",         @red);
.colors_state(~"red400", lighten(@red, 10%));
.colors_state(~"red300", lighten(@red, 20%));
.colors_state(~"red200", lighten(@red, 30%));
.colors_state(~"red100", lighten(@red, 40%));
.colors_state(~"red50",  lighten(@red, 45%));

.colors_state(~"green", @green);
.colors_state(~"green900",  darken(@green, 40%));
.colors_state(~"green800",  darken(@green, 30%));
.colors_state(~"green700",  darken(@green, 20%));
.colors_state(~"green600",  darken(@green, 10%));
.colors_state(~"green500",         @green);
.colors_state(~"green400", lighten(@green, 10%));
.colors_state(~"green300", lighten(@green, 20%));
.colors_state(~"green200", lighten(@green, 30%));
.colors_state(~"green100", lighten(@green, 40%));
.colors_state(~"green50",  lighten(@green, 45%));

.colors_state(~"blue", @blue);
.colors_state(~"blue900",  darken(@blue, 40%));
.colors_state(~"blue800",  darken(@blue, 30%));
.colors_state(~"blue700",  darken(@blue, 20%));
.colors_state(~"blue600",  darken(@blue, 10%));
.colors_state(~"blue500",         @blue);
.colors_state(~"blue400", lighten(@blue, 10%));
.colors_state(~"blue300", lighten(@blue, 20%));
.colors_state(~"blue200", lighten(@blue, 30%));
.colors_state(~"blue100", lighten(@blue, 40%));
.colors_state(~"blue50",  lighten(@blue, 45%));

.colors_state(~"yellow", @yellow);
.colors_state(~"yellow900",  darken(@yellow, 40%));
.colors_state(~"yellow800",  darken(@yellow, 30%));
.colors_state(~"yellow700",  darken(@yellow, 20%));
.colors_state(~"yellow600",  darken(@yellow, 10%));
.colors_state(~"yellow500",         @yellow);
.colors_state(~"yellow400", lighten(@yellow, 10%));
.colors_state(~"yellow300", lighten(@yellow, 20%));
.colors_state(~"yellow200", lighten(@yellow, 30%));
.colors_state(~"yellow100", lighten(@yellow, 40%));
.colors_state(~"yellow50",  lighten(@yellow, 45%));

.colors_state(~"orange", @orange);
.colors_state(~"orange900",  darken(@orange, 40%));
.colors_state(~"orange800",  darken(@orange, 30%));
.colors_state(~"orange700",  darken(@orange, 20%));
.colors_state(~"orange600",  darken(@orange, 10%));
.colors_state(~"orange500",         @orange);
.colors_state(~"orange400", lighten(@orange, 10%));
.colors_state(~"orange300", lighten(@orange, 20%));
.colors_state(~"orange200", lighten(@orange, 30%));
.colors_state(~"orange100", lighten(@orange, 40%));
.colors_state(~"orange50",  lighten(@orange, 45%));

.colors_state(~"olive", @olive);
.colors_state(~"olive900",  darken(@olive, 40%));
.colors_state(~"olive800",  darken(@olive, 30%));
.colors_state(~"olive700",  darken(@olive, 20%));
.colors_state(~"olive600",  darken(@olive, 10%));
.colors_state(~"olive500",         @olive);
.colors_state(~"olive400", lighten(@olive, 10%));
.colors_state(~"olive300", lighten(@olive, 20%));
.colors_state(~"olive200", lighten(@olive, 30%));
.colors_state(~"olive100", lighten(@olive, 40%));
.colors_state(~"olive50",  lighten(@olive, 45%));

.colors_state(~"teal", @teal);
.colors_state(~"teal900",  darken(@teal, 40%));
.colors_state(~"teal800",  darken(@teal, 30%));
.colors_state(~"teal700",  darken(@teal, 20%));
.colors_state(~"teal600",  darken(@teal, 10%));
.colors_state(~"teal500",         @teal);
.colors_state(~"teal400", lighten(@teal, 10%));
.colors_state(~"teal300", lighten(@teal, 20%));
.colors_state(~"teal200", lighten(@teal, 30%));
.colors_state(~"teal100", lighten(@teal, 40%));
.colors_state(~"teal50",  lighten(@teal, 45%));

.colors_state(~"violet", @violet);
.colors_state(~"violet900",  darken(@violet, 40%));
.colors_state(~"violet800",  darken(@violet, 30%));
.colors_state(~"violet700",  darken(@violet, 20%));
.colors_state(~"violet600",  darken(@violet, 10%));
.colors_state(~"violet500",         @violet);
.colors_state(~"violet400", lighten(@violet, 10%));
.colors_state(~"violet300", lighten(@violet, 20%));
.colors_state(~"violet200", lighten(@violet, 30%));
.colors_state(~"violet100", lighten(@violet, 40%));
.colors_state(~"violet50",  lighten(@violet, 45%));

.colors_state(~"purple", @purple);
.colors_state(~"purple900",  darken(@purple, 40%));
.colors_state(~"purple800",  darken(@purple, 30%));
.colors_state(~"purple700",  darken(@purple, 20%));
.colors_state(~"purple600",  darken(@purple, 10%));
.colors_state(~"purple500",         @purple);
.colors_state(~"purple400", lighten(@purple, 10%));
.colors_state(~"purple300", lighten(@purple, 20%));
.colors_state(~"purple200", lighten(@purple, 30%));
.colors_state(~"purple100", lighten(@purple, 40%));
.colors_state(~"purple50",  lighten(@purple, 45%));

.colors_state(~"pink", @pink);
.colors_state(~"pink900",  darken(@pink, 40%));
.colors_state(~"pink800",  darken(@pink, 30%));
.colors_state(~"pink700",  darken(@pink, 20%));
.colors_state(~"pink600",  darken(@pink, 10%));
.colors_state(~"pink500",         @pink);
.colors_state(~"pink400", lighten(@pink, 10%));
.colors_state(~"pink300", lighten(@pink, 20%));
.colors_state(~"pink200", lighten(@pink, 30%));
.colors_state(~"pink100", lighten(@pink, 40%));
.colors_state(~"pink50",  lighten(@pink, 45%));

.colors_state(~"brown", @brown);
.colors_state(~"brown900",  darken(@brown, 40%));
.colors_state(~"brown800",  darken(@brown, 30%));
.colors_state(~"brown700",  darken(@brown, 20%));
.colors_state(~"brown600",  darken(@brown, 10%));
.colors_state(~"brown500",         @brown);
.colors_state(~"brown400", lighten(@brown, 10%));
.colors_state(~"brown300", lighten(@brown, 20%));
.colors_state(~"brown200", lighten(@brown, 30%));
.colors_state(~"brown100", lighten(@brown, 40%));
.colors_state(~"brown50",  lighten(@brown, 45%));

// оттенки серого заданы отдельными переменными
.colors_state(~"gray",    @gray);
.colors_state(~"gray50",  @gray50);
.colors_state(~"gray100", @gray100);
.colors_state(~"gray200", @gray200);
.colors_state(~"gray300", @gray300);
.colors_state(~"gray400", @gray400);
.colors_state(~"gray500", @gray500);
.colors_state(~"gray600", @gray600);
.colors_state(~"gray700", @gray700);
.colors_state(~"gray800", @gray800);
.colors_state(~"gray900", @gray900);

// прозрачность
.bg-op10, .hover-bg-op10:hover { background-color: rgba(0,0,0,0.1); }
.bg-op20, .hover-bg-op20:hover { background-color: rgba(0,0,0,0.2); }
.bg-op30, .hover-bg-op30:hover { background-color: rgba(0,0,0,0.3); }
.bg-op40, .hover-bg-op40:hover { background-color: rgba(0,0,0,0.4); }
.bg-op50, .hover-bg-op50:hover { background-color: rgba(0,0,0,0.5); }
.bg-op60, .hover-bg-op60:hover { background-color: rgba(0,0,0,0.6); }
.bg-op70, .hover-bg-op70:hover { background-color: rgba(0,0,0,0.7); }
.bg-op80, .hover-bg-op80:hover { background-color: rgba(0,0,0,0.8); }
.bg-op90, .hover-bg-op90:hover { background-color: rgba(0,0,0,0.9); }
// .UniCSS -> http://unicss.maxsite.com.ua/


// http://the-echoplex.net/flexyboxes/ — построитель
// http://html5.by/blog/flexbox/
// http://frontender.info/a-guide-to-flexbox/
// http://www.w3.org/TR/css3-flexbox/

.flex {
        .grid_flex > .container(space-between, stretch);
        
        &.flex-vcenter {
                .grid_flex > .align_items(center);
        }
        
        &.flex-hcenter {
                .grid_flex > .justify_content(center);
        }
}

.flex-grow0 { .grid_flex > .grow(0); }
.flex-grow1 { .grid_flex > .grow(1); }
.flex-grow2 { .grid_flex > .grow(2); }
.flex-grow3 { .grid_flex > .grow(3); }

.flex-order0 { .grid_flex > .order(0); }
.flex-order1 { .grid_flex > .order(1); }
.flex-order2 { .grid_flex > .order(2); }
.flex-order3 { .grid_flex > .order(3); }
.flex-order4 { .grid_flex > .order(4); }
.flex-order5 { .grid_flex > .order(5); }

.flex-wrap {
        .grid_flex > .wrap(wrap);
}

// миксы формрующие произвольные классы с @media
.flex_media(@m; @postfix; @a_postfix)
{
        @media @m {
                .flex-wrap-@{postfix},
                .flex-wrap-@{a_postfix}
                {
                        .grid_flex > .wrap(wrap);
                }
                
                .flex-@{postfix},
                .flex-@{a_postfix}
                {
                        .flex;
                }
                
                .flex-reverse-@{postfix} {
                        .grid_flex > .direction(row-reverse);
                }
                
                .flex-order0-@{postfix} { .grid_flex > .order(0); }
                .flex-order1-@{postfix} { .grid_flex > .order(1); }
                .flex-order2-@{postfix} { .grid_flex > .order(2); }
                .flex-order3-@{postfix} { .grid_flex > .order(3); }
                .flex-order4-@{postfix} { .grid_flex > .order(4); }
                .flex-order5-@{postfix} { .grid_flex > .order(5); }
                
                &.flex-vcenter-@{postfix} {
                        .grid_flex > .align_items(center);
                }
                
                &.flex-hcenter-@{postfix} {
                        .grid_flex > .justify_content(center);
                }
        }
        
}

// тот же микс, только с двумя параметрами
.flex_media(@m; @postfix)
{
        @media @m {
                .flex-wrap-@{postfix}
                {
                        .grid_flex > .wrap(wrap);
                }
                
                .flex-@{postfix}
                {
                        .flex;
                }
                
                .flex-reverse-@{postfix} {
                        .grid_flex > .direction(row-reverse);
                }
                
                .flex-order0-@{postfix} { .grid_flex > .order(0); }
                .flex-order1-@{postfix} { .grid_flex > .order(1); }
                .flex-order2-@{postfix} { .grid_flex > .order(2); }
                .flex-order3-@{postfix} { .grid_flex > .order(3); }
                .flex-order4-@{postfix} { .grid_flex > .order(4); }
                .flex-order5-@{postfix} { .grid_flex > .order(5); }
                
                &.flex-vcenter-@{postfix} {
                        .grid_flex > .align_items(center);
                }
                
                &.flex-hcenter-@{postfix} {
                        .grid_flex > .justify_content(center);
                }
        }
}

// выполняем
.flex_media(@SCREEN_TABLET, tablet, tablet-phone);
.flex_media(@SCREEN_PHONE, phone, tablet-phone);
.flex_media(@SCREEN_SMALL, small);
.flex_media(@SCREEN_MEDIUM, medium);
.flex_media(@SCREEN_LARGE, large);
// .UniCSS -> http://unicss.maxsite.com.ua/

// градиенты

// серый
.gr-gray400-100 {
  background-color: #f5f5f5;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#bdbdbd), to(#f5f5f5));
  background-image: -webkit-linear-gradient(top, #bdbdbd, 0%, #f5f5f5, 100%);
  background-image: -moz-linear-gradient(top, #bdbdbd 0%, #f5f5f5 100%);
  background-image: linear-gradient(to bottom, #bdbdbd 0%, #f5f5f5 100%);
  background-repeat: repeat-x;
}

.gr-gray100-400 {
  background-color: #bdbdbd;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f5f5f5), to(#bdbdbd));
  background-image: -webkit-linear-gradient(top, #f5f5f5, 0%, #bdbdbd, 100%);
  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #bdbdbd 100%);
  background-image: linear-gradient(to bottom, #f5f5f5 0%, #bdbdbd 100%);
  background-repeat: repeat-x;
}
// .UniCSS -> http://unicss.maxsite.com.ua/

// высота

// цикл height и min-height на основе @height_list из variables.less
.height_loop(@counter) when (@counter > 0) {
        .height_loop((@counter - 1));
        
        @val: extract(@height_list, @counter);
        
        .h@{val}px {
                height: ~"@{val}px";
        }
        
        .h@{val}px-min {
                min-height: ~"@{val}px" !important;
        }
        
        .h@{val}px-max {
                max-height: ~"@{val}px" !important;
        }
 }

.height_loop(length(@height_list));
// .UniCSS -> http://unicss.maxsite.com.ua/

// Иконки

// классы для размеров иконок
.t-icon        { font-size: @icon_size; }
.t-icon-small  { font-size: @icon_size_small; }
.t-icon-medium { font-size: @icon_size_medium; }
.t-icon-large  { font-size: @icon_size_large; }

// класс где убирается правый отступ иконок
.icon0:before {
        margin-right: 0 !important;
}

// круглая иконка с базовым размером
// <a href="#" class="i-car icon-circle"></a>
.icon-circle,
.icon-circle-small,
.icon-circle-medium,
.icon-circle-large
{ 
        display: inline-block;
        text-align: center;
        
        .border_radius(50%);
        
        // сброс отступа для иконки
        &:before {
                margin: 0 !important;
        }
}

.icon-circle
{ 
        width: @icon_circle_size; 
        height: @icon_circle_size; 
        line-height: @icon_circle_size; 
}

.icon-circle-small { 
        width: @icon_size_small; 
        height: @icon_size_small; 
        line-height: @icon_size_small; 
}

.icon-circle-medium { 
        width: @icon_size_medium; 
        height: @icon_size_medium; 
        line-height: @icon_size_medium; 
}

.icon-circle-large { 
        width: @icon_size_large; 
        height: @icon_size_large; 
        line-height: @icon_size_large; 
}

// квадратная иконка
.icon-square, 
.icon-square-small, 
.icon-square-medium, 
.icon-square-large
{ 
        display: inline-block;
        text-align: center;

        // сброс отступа для иконки
        &:before {
                margin: 0 !important;
        }
}

.icon-square { 
        width: @icon_square_size; 
        height: @icon_square_size; 
        line-height: @icon_square_size; 
}

.icon-square-small { 
        width: @icon_size_small; 
        height: @icon_size_small; 
        line-height: @icon_size_small; 
}

.icon-square-medium { 
        width: @icon_size_medium; 
        height: @icon_size_medium; 
        line-height: @icon_size_medium; 
}

.icon-square-large { 
        width: @icon_size_large; 
        height: @icon_size_large; 
        line-height: @icon_size_large; 
}
// .UniCSS -> http://unicss.maxsite.com.ua/

// МОДУЛЬНАЯ СЕТКА

.layout-center {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        max-width: @layout_max_width;
}

// если есть внутренний wrap заданной ширины
.layout-center-wrap {
        width: 100%;
        
        // будет удалён
        > .wrap {
                width: 100%;
                margin-right: auto;
                margin-left: auto;
                max-width: @layout_max_width;
        }
        
        > .layout-wrap {
                width: 100%;
                margin-right: auto;
                margin-left: auto;
                max-width: @layout_max_width;
        }
        
}
// .UniCSS -> http://unicss.maxsite.com.ua/

// ссылки

a {
        // сбрасываем цвет :hover
        &.hover-no-color {
                &:hover {
                        color: inherit;
                }
        }
        
        // сбрасываем подчеркивание :hover
        &.hover-no-underline {
                &:hover {
                        text-decoration: none;
                }
        }
}

// для дочерних тэгов
.hover-no-color {
        a:hover {
                color: inherit;
        }
}

.hover-no-underline {
        a:hover {
                text-decoration: none;
        }
}

.links-no-color {
        
        a:not([class^="t-"]):not([class*=" t-"])
        {
                color: inherit;
        }
}

// жесткий !important — экспериметральный вариант!
.links-no-color-imp {
        a {
                color: inherit !important;
        }
}
// .UniCSS -> http://unicss.maxsite.com.ua/

// разное без четкой тематики


// скругление
.rounded, .rounded10 { .border_radius(10px); }
.rounded5 { .border_radius(5px); }

// круг
.b-circle { .border_radius(50%); }

// курсор
.cursor-pointer { cursor: pointer; }

// буквица для абзца
.drop-cap { 
        &:first-letter {
                float: left;
                font-size: 3em;
                font-weight: bold;
                margin-right: 0.75rem;
                text-transform: uppercase;
                line-height: 1;
        }
}
// .UniCSS -> http://unicss.maxsite.com.ua/

// отступы

.box > .set_padding(@padding, pad) !important;
.box > .set_margin(@margin, mar) !important;


// цикл padding на основе @padding_list из variables.less
.padding_loop(@counter) when (@counter > 0) {
        .padding_loop((@counter - 1));
        
        @val: extract(@padding_list, @counter);
        
        .box > .set_padding(~"@{val}px", ~"pad@{val}") !important;
}

.padding_loop(length(@padding_list));

// аналогично margin
// цикл margin на основе @margin_list из variables.less
.margin_loop(@counter) when (@counter > 0) {
        .margin_loop((@counter - 1));
        
        @val: extract(@margin_list, @counter);
        
        .box > .set_margin(~"@{val}px", ~"mar@{val}") !important;
}

.margin_loop(length(@margin_list));

// для адаптивного дизайна сбросы
@media @SCREEN_TABLET {
        .box > .set_padding(0, pad0, tablet) !important;
        .box > .set_margin(0, mar0, tablet) !important;
}

@media @SCREEN_PHONE {
        .box > .set_padding(0, pad0, phone) !important;
        .box > .set_margin(0, mar0, phone) !important;
}

@media @SCREEN_SMALL {
        .box > .set_padding(0, pad0, small) !important;
        .box > .set_margin(0, mar0, small) !important;
}

@media @SCREEN_MEDIUM {
        .box > .set_padding(0, pad0, medium) !important;
        .box > .set_margin(0, mar0, medium) !important;
}

@media @SCREEN_LARGE {
        .box > .set_padding(0, pad0, large) !important;
        .box > .set_margin(0, mar0, large) !important;
}
// .UniCSS -> http://unicss.maxsite.com.ua/

// position

.pos-fixed    { position: fixed; }
.pos-absolute { position: absolute; }
.pos-relative { position: relative; }

// цикл top right bottom left на основе @position_list из variables.less
.position_loop(@counter) when (@counter > 0) {
        .position_loop((@counter - 1));
        
        @val: extract(@position_list, @counter);

        .pos@{val}-t    { top: ~"@{val}px"; }
        .pos@{val}-r    { right: ~"@{val}px"; }
        .pos@{val}-b    { bottom: ~"@{val}px"; }
        .pos@{val}-l    { left: ~"@{val}px"; }
}

.position_loop(length(@position_list));

// z-index

// цикл z-index на основе @zindex_list из variables.less
.zindex_loop(@counter) when (@counter > 0) {
        .zindex_loop((@counter - 1));
        
        @val: extract(@zindex_list, @counter);
        
        .z-index@{val} {
                z-index: @val;
        }
 }

.zindex_loop(length(@zindex_list));
// .UniCSS -> http://unicss.maxsite.com.ua/

// тени

.shadow {
        -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}
// .UniCSS -> http://unicss.maxsite.com.ua/

// текст

// сброс текста и отступов
.normal
{
        font-weight: normal;
        font-style: normal;
        text-decoration: none;
        margin: 0;
        padding: 0;
        line-height: 1em;
}

// форматирование текста
.bold       { font-weight: bold; }
.italic     { font-style: italic; }
.underline  { text-decoration: underline; }
.strike     { text-decoration: line-through; }
.small-caps { font-variant: small-caps; }
.capitalize { text-transform: capitalize; }
.upper      { text-transform: uppercase; }
.lower      { text-transform: lowercase; }

// выравнивание текста
.t-right   { text-align: right; }
.t-left    { text-align: left; }
.t-center  { text-align: center; }
.t-justify { text-align: justify; }

// микс для @media
.text_media(@m; @postfix)
{
        @media @m {
                .t-right-@{postfix}   { text-align: right; }
                .t-left-@{postfix}    { text-align: left; }
                .t-center-@{postfix}  { text-align: center; }
                .t-justify-@{postfix} { text-align: justify; }  
        }
}

.text_media(@SCREEN_TABLET, tablet);
.text_media(@SCREEN_PHONE, phone);
.text_media(@SCREEN_SMALL, small);
.text_media(@SCREEN_MEDIUM, medium);
.text_media(@SCREEN_LARGE, large);

// запрет переноса
.t-nowrap { white-space: nowrap; }
.t-wrap   { white-space: normal; }
.t-pre-wrap  { white-space: pre-wrap; }
.t-break-word  { word-wrap: break-word; }


// гарнитура
.t-georgia { font-family: Georgia, Times New Roman, serif; }
.t-times   { font-family: Times New Roman, serif; }
.t-arial   { font-family: Arial, Helvetica, Verdana, sans-serif; }
.t-verdana { font-family: Verdana, Arial, Helvetica, sans-serif; }
.t-mono    { font-family: PT Mono, Monaco, Menlo, Consolas, Courier New, monospace; }

// размеры REM
// цикл font-size REM на основе @text_rem из variables.less
.text_rem_loop(@counter) when (@counter > 0) {
        .text_rem_loop((@counter - 1));
        
        @val: extract(@text_rem, @counter);
        @val1: @val * 100;
        
        .t@{val1} {
                font-size: ~"@{val}rem";
        }
}

.text_rem_loop(length(@text_rem));


// размеры EM
// цикл font-size EM на основе @text_em из variables.less
.text_em_loop(@counter) when (@counter > 0) {
        .text_em_loop((@counter - 1));
        
        @val: extract(@text_em, @counter);
        @val1: @val * 100;
        
        .t@{val1}em {
                font-size: ~"@{val}em";
        }
}

.text_em_loop(length(@text_em));

// размеры PX
// цикл font-size PX на основе @text_px из variables.less
.text_px_loop(@counter) when (@counter > 0) {
        .text_px_loop((@counter - 1));
        
        @val: extract(@text_px, @counter);
        
        .t@{val}px {
                font-size: ~"@{val}px";
        }
}

.text_px_loop(length(@text_px));
// .UniCSS -> http://unicss.maxsite.com.ua/

// видимоcть блоков для разных @media
// .visible-X только для display: block

// дефолт для desktop
.visible-desktop, 
.visible-desktop-tablet { 
        display: block !important; 
}

.visible-tablet,
.visible-phone,
.visible-tablet-phone, 
.hide-desktop,
.hide-desktop-tablet { 
        display: none !important; 
}

@media @SCREEN_TABLET {
        .visible-tablet,
        .visible-tablet-phone,
        .visible-desktop-tablet  { 
                display: block !important; 
        }
        
        .visible-desktop,
        .visible-phone,
        .hide-tablet,
        .hide-tablet-phone { 
                display: none !important; 
        }
}

@media @SCREEN_PHONE {
        .visible-phone,
        .visible-tablet-phone { 
                display: block !important; 
        }
        
        .visible-desktop,
        .visible-desktop-tablet,
        .visible-tablet,
        .hide-phone,
        .hide-tablet-phone {
                display: none !important; 
        }
}

// для small medium large только одиночные классы
.visible-small, 
.visible-medium,
.visible-large { 
        display: block !important; 
}

.hide-small,
.hide-medium,
.hide-large { 
        display: none !important; 
}

@media @SCREEN_SMALL {
        .visible-small { display: block !important; }
        .hide-small { display: none !important; }
}

@media @SCREEN_MEDIUM {
        .visible-medium { display: block !important; }
        .hide-medium { display: none !important; }
}

@media @SCREEN_LARGE {
        .visible-large { display: block !important; }
        .hide-large { display: none !important; }
}
// .UniCSS -> http://unicss.maxsite.com.ua/

// максимальная ширина модульной сетки
.w-max-layout {
        width: 100%;
        max-width: @layout_max_width;
}

.w100-max {
        max-width: 100%;
}

.w-hide { display: none; }
.w-auto { width: auto; }

// цикл width и max-width на основе @width_list из variables.less
.width_loop(@counter) when (@counter > 0) {
        .width_loop((@counter - 1));
        
        @val: extract(@width_list, @counter);
        
        .w@{val}px {
                width: ~"@{val}px";
        }
        
        .w@{val}px-min {
                min-width: ~"@{val}px";
        }
        
        .w@{val}px-max {
                max-width: ~"@{val}px";
        }
 }

.width_loop(length(@width_list));


// ВАЖНО! @media от больших экранов к маленьким!


// цикл width на основе @width_list_percent из variables.less
.width_loop_percent(@counter) when (@counter > 0) {
        .width_loop_percent((@counter - 1));
        
        @val: extract(@width_list_percent, @counter);
        
        .w@{val} {
                width: ~"@{val}%";
        }
 }

.width_loop_percent(length(@width_list_percent));


.width_loop_percent_postfix(@counter; @postfix) when (@counter > 0) {
        .width_loop_percent_postfix((@counter - 1), @postfix);
        
        @val: extract(@width_list_percent, @counter);
        
        .w@{val}@{postfix} {
                width: ~"@{val}%";
        }
 }

// .wXX-tablet
@media @SCREEN_TABLET {
        .w-hide-tablet { display: none; }
        .w-auto-tablet { width: auto; }
        .w100-max-tablet { max-width: 100%; }
        .width_loop_percent_postfix(length(@width_list_percent), ~"-tablet");
}

// .wXX-phone
@media @SCREEN_PHONE {
        .w-hide-phone { display: none; }
        .w-auto-phone { width: auto; }
        .w100-max-phone { max-width: 100%; }
        .width_loop_percent_postfix(length(@width_list_percent), ~"-phone");
}

// .wXX-small
@media @SCREEN_SMALL {
        .w-hide-small { display: none; }
        .w-auto-small { width: auto; }
        .w100-max-small { max-width: 100%; }
        .width_loop_percent_postfix(length(@width_list_percent), ~"-small");
}

// .wXX-medium
@media @SCREEN_MEDIUM {
        .w-hide-medium { display: none; }
        .w-auto-medium { width: auto; }
        .w100-max-medium { max-width: 100%; }
        .width_loop_percent_postfix(length(@width_list_percent), ~"-medium");
}

// .wXX-large
@media @SCREEN_LARGE {
        .w-hide-large { display: none; }
        .w-auto-large { width: auto; }
        .w100-max-large { max-width: 100%; }
        .width_loop_percent_postfix(length(@width_list_percent), ~"-large");
}
