/* ===============
СЕТКА на Flexbox
================*/

/* ======================================
Контейнер с фиксированной и гибкой сеткой
====================================== */
.container-fixed {
 max-width: 1140px;
 min-width: 300px;
 margin: 0 auto;
}
.container-full {
 width: 100%;
}

/* Rows (фиксированные ряды) */
.container-fixed .row-flex {
 display: flex;
 flex-flow: wrap;
 margin-left: -15px;
 margin-right: -15px;
}

/* Rows (гибкие ряды) */
.container-full .row-flex {
 display: flex;
}

/* Задаем свои отступы у рядов */
.row-flex.margin-td {
 margin-top: 25px;
 margin-bottom: 25px;
}
.row-flex.margin-lr {
 margin-left: 32px;
 margin-right: 32px;
 width: calc(100% - 64px);
}

/* Выравнивание элементов по горизонтали */
.row-flex.space-between {
 justify-content: space-between;
}
.row-flex.space-around {
 justify-content: space-around;
}
.row-flex.center {
 justify-content: center;
}
.row-flex.and {
 justify-content: flex-end;
}

/* Выравнивание элементов по вертикали */
.row-flex.vertical-start {
 align-items: flex-start;
}
.row-flex.vertical-end {
 align-items: flex-end;
}
.row-flex.vertical-center {
 align-items: center;
}
.row-flex.vertical-stretch {
 align-items: stretch;
}


/* column (колонки) */
.em {
 margin: 0 15px;
 box-sizing: border-box;
}

/* Внутренние отступы в контейнере */
.em.padding {
 padding: 16px;
}

/* Заполнение ряда */
.em-fill {
 flex-grow: 1;
}

/* Выравнивание отдельного элемента */
.em.flex-start {
 align-self: flex-start;
}
.em.flex-end {
 align-self: flex-end;
}
.em.center {
 align-self: center;
}
.em.baseline {
 align-self: baseline;
}
.em.stretch {
 align-items: stretch;
}

/* Размер колонок */
.em-1 {
 width: calc(8.333333333333333% - 30px); /* 100/12 */
}
.em-2 {
 width: calc(16.66666666666667% - 30px); /* 100/12*2 */
}
.em-3 {
 width: calc(25% - 30px); /* 100/12*3 */
}
.em-4 {
 width: calc(33.33333333333333% - 30px); /* 100/12*4 */
}
.em-5 {
 width: calc(41.66666666666667% - 30px); /* 100/12*5 */
}
.em-6 {
 width: calc(50% - 30px); /* 100/12*6 */
}
.em-7 {
 width: calc(58.33333333333333% - 30px); /* 100/12*7 */
}
.em-8 {
 width: calc(66.66666666666667% - 30px); /* 100/12*8 */
}
.em-9 {
 width: calc(75% - 30px); /* 100/12*9 */
}
.em-10 {
 width: calc(83.33333333333333% - 30px); /* 100/12*10 */
}
.em-11 {
 width: calc(91.66666666666667% - 30px); /* 100/12*11 */
}
.em-12 {
 width: calc(100% - 30px); /* 100/12*12 */
}


/* Helper classes (отображения обводки) */
.container-fixed.mark,
.container-full.mark {
 background: #ebebeb;
}
.row-flex.mark {
 border: 1px dashed #cccccc;
}
.row-flex.mark:hover {
 border: 1px dashed #0cbaec;
 background-color: #caf0ff;
}
.em.mark {
 border: 1px dashed #91055B;
 background: #ffdee7;
}
.em.mark:hover {
 border: 1px dashed #ff0606;
 background-color: #ff94dd;
}


@media only screen and (max-width : 1200px) {

 .container-fixed > .row-flex {
  margin-left: 0;
  margin-right: 0;
 }

}

@media only screen and (max-width : 992px) {

 .em-md-1 {
  width: calc(8.333333333333333% - 30px); /* 100/12 */
 }
 .em-md-2 {
  width: calc(16.66666666666667% - 30px); /* 100/12*2 */
 }
 .em-md-3 {
  width: calc(25% - 30px); /* 100/12*3 */
 }
 .em-md-4 {
  width: calc(33.33333333333333% - 30px); /* 100/12*4 */
 }
 .em-md-5 {
  width: calc(41.66666666666667% - 30px); /* 100/12*5 */
 }
 .em-md-6 {
  width: calc(50% - 30px); /* 100/12*6 */
 }
 .em-md-7 {
  width: calc(58.33333333333333% - 30px); /* 100/12*7 */
 }
 .em-md-8 {
  width: calc(66.66666666666667% - 30px); /* 100/12*8 */
 }
 .em-md-9 {
  width: calc(75% - 30px); /* 100/12*9 */
 }
 .em-md-10 {
  width: calc(83.33333333333333% - 30px); /* 100/12*10 */
 }
 .em-md-11 {
  width: calc(91.66666666666667% - 30px); /* 100/12*11 */
 }
 .em-md-12 {
  width: calc(100% - 30px); /* 100/12*12 */
 }

}


@media only screen and (max-width : 768px) {

 .em-sm-1 {
  width: calc(8.333333333333333% - 30px); /* 100/12 */
 }
 .em-sm-2 {
  width: calc(16.66666666666667% - 30px); /* 100/12*2 */
 }
 .em-sm-3 {
  width: calc(25% - 30px); /* 100/12*3 */
 }
 .em-sm-4 {
  width: calc(33.33333333333333% - 30px); /* 100/12*4 */
 }
 .em-sm-5 {
  width: calc(41.66666666666667% - 30px); /* 100/12*5 */
 }
 .em-sm-6 {
  width: calc(50% - 30px); /* 100/12*6 */
 }
 .em-sm-7 {
  width: calc(58.33333333333333% - 30px); /* 100/12*7 */
 }
 .em-sm-8 {
  width: calc(66.66666666666667% - 30px); /* 100/12*8 */
 }
 .em-sm-9 {
  width: calc(75% - 30px); /* 100/12*9 */
 }
 .em-sm-10 {
  width: calc(83.33333333333333% - 30px); /* 100/12*10 */
 }
 .em-sm-11 {
  width: calc(91.66666666666667% - 30px); /* 100/12*11 */
 }
 .em-sm-12 {
  width: calc(100% - 30px); /* 100/12*12 */
 }

}


@media only screen and (max-width : 480px) {

 .em-xm-1 {
  width: calc(8.333333333333333% - 30px); /* 100/12 */
 }
 .em-xm-2 {
  width: calc(16.66666666666667% - 30px); /* 100/12*2 */
 }
 .em-xm-3 {
  width: calc(25% - 30px); /* 100/12*3 */
 }
 .em-xm-4 {
  width: calc(33.33333333333333% - 30px); /* 100/12*4 */
 }
 .em-xm-5 {
  width: calc(41.66666666666667% - 30px); /* 100/12*5 */
 }
 .em-xm-6 {
  width: calc(50% - 30px); /* 100/12*6 */
 }
 .em-xm-7 {
  width: calc(58.33333333333333% - 30px); /* 100/12*7 */
 }
 .em-xm-8 {
  width: calc(66.66666666666667% - 30px); /* 100/12*8 */
 }
 .em-xm-9 {
  width: calc(75% - 30px); /* 100/12*9 */
 }
 .em-xm-10 {
  width: calc(83.33333333333333% - 30px); /* 100/12*10 */
 }
 .em-xm-11 {
  width: calc(91.66666666666667% - 30px); /* 100/12*11 */
 }
 .em-xm-12 {
  width: calc(100% - 30px); /* 100/12*12 */
 }


}