@charset "UTF-8";
/**
 * Переключаемая боковая панель навигации
 * выдвигающаяся по клику слева
 */
/* line 8, left-nav-style.scss */
.nav {
  /*  ширна произвольная, не стесняйтесь экспериментировать */
  width: 320px;
  min-width: 320px;
  /* фиксируем и выставляем высоту панели на максимум */
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  margin: 0;
  /* сдвигаем (прячем) панель относительно левого края страницы */
  left: -320px;
  /* внутренние отступы */
  padding: 15px 20px;
  /* плавный переход смещения панели */
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  transition: left 0.3s;
  /* определяем цвет фона панели */
  background: #4A4A4C;
  /* поверх других элементов */
  z-index: 2000; }

/**
 * Кнопка переключения панели
 * тег <label>
 */
/* line 38, left-nav-style.scss */
.nav-toggle {
  /* абсолютно позиционируем */
  position: absolute;
  /* относительно левого края панели */
  left: 280px;
  /* отступ от верхнего края панели */
  top: 1em;
  /* внутренние отступы */
  padding: 0.5em;
  /* определяем цвет фона переключателя
   * чаще вчего в соответствии с цветом фона панели
  */
  background: inherit;
  /* цвет текста */
  color: #dadada;
  /* вид курсора */
  cursor: pointer;
  /* размер шрифта */
  font-size: 1.2em;
  line-height: 1;
  /* всегда поверх других элементов страницы */
  z-index: 2001;
  /* анимируем цвет текста при наведении */
  -webkit-transition: color .25s ease-in-out;
  -moz-transition: color .25s ease-in-out;
  transition: color .25s ease-in-out; }

/* определяем текст кнопки
 * символ Unicode (TRIGRAM FOR HEAVEN)
*/
/* line 71, left-nav-style.scss */
.nav-toggle:after {
  content: '\2630';
  text-decoration: none; }

/* цвет текста при наведении */
/* line 79, left-nav-style.scss */
.nav-toggle:hover {
  color: #f4f4f4; }

/**
 * Скрытый чекбокс (флажок)
 * невидим и недоступен :)
 * имя селектора атрибут флажка
 */
/* line 90, left-nav-style.scss */
[id='nav-toggle'] {
  position: absolute;
  display: none; }

/**
 * изменение положения переключателя
 * при просмотре на мобильных устройствах
 * когда навигация раскрыта, распологаем внутри панели
*/
/* line 102, left-nav-style.scss */
[id='nav-toggle']:checked ~ .nav > .nav-toggle {
  left: auto;
  right: 2px;
  top: 1em; }

/**
 * Когда флажок установлен, открывается панель
 * используем псевдокласс:checked
 */
/* line 114, left-nav-style.scss */
[id='nav-toggle']:checked ~ .nav {
  left: 0;
  box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5);
  overflow-y: auto; }

/*
 * смещение контента страницы
 * на размер ширины панели,
 * фишка необязательная, на любителя
*/
/* line 129, left-nav-style.scss */
[id='nav-toggle']:checked ~ main > article {
  -webkit-transform: translateX(320px);
  -moz-transform: translateX(320px);
  transform: translateX(320px); }

/*
 * изменение символа переключателя,
 * привычный крестик (MULTIPLICATION X),
 * вы можете испльзовать любой другой значок
*/
/* line 142, left-nav-style.scss */
[id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
  content: '\2715'; }

/**
 * профиксим баг в Android <= 4.1.2
 * см: http://timpietrusky.com/advanced-checkbox-hack
 */
/* line 152, left-nav-style.scss */
body {
  -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix {
  to {
    padding: 0; } }
/**
 * позаботьтимся о средних и маленьких экранах
 * мобильных устройств
 */
@media screen and (min-width: 320px) {
  /* line 169, left-nav-style.scss */
  .all-wrap {
    margin: 0;
    overflow-x: hidden; } }
@media screen and (max-width: 320px) {
  /* line 176, left-nav-style.scss */
  .all-wrap {
    margin: 0;
    overflow-x: hidden; }

  /* line 180, left-nav-style.scss */
  .nav {
    width: 100%;
    box-shadow: none; } }
/**
 * Формируем стиль заголовка (логотип) панели
*/
/* line 191, left-nav-style.scss */
.nav h2 {
  width: 90%;
  padding: 0;
  margin: 10px 0;
  text-align: center;
  text-shadow: rgba(255, 255, 255, 0.1) -1px -1px 1px, rgba(0, 0, 0, 0.5) 1px 1px 1px;
  font-size: 1.3em;
  line-height: 1.3em;
  opacity: 0;
  transform: scale(0.1, 0.1);
  -ms-transform: scale(0.1, 0.1);
  -moz-transform: scale(0.1, 0.1);
  -webkit-transform: scale(0.1, 0.1);
  transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  transition: opacity 0.8s, transform 0.8s;
  -ms-transition: opacity 0.8s, -ms-transform 0.8s;
  -moz-transition: opacity 0.8s, -moz-transform 0.8s;
  -webkit-transition: opacity 0.8s, -webkit-transform 0.8s; }

/* line 214, left-nav-style.scss */
.nav h2 a {
  color: #dadada;
  text-decoration: none;
  text-transform: uppercase; }

/*плавное появление заголовка (логотипа) при раскрытии панели */
/* line 223, left-nav-style.scss */
[id='nav-toggle']:checked ~ .nav h2 {
  opacity: 1;
  transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -webkit-transform: scale(1, 1); }

/**
 * формируем непосредственно само меню
 * используем неупорядоченный список для пунктов меню
 * прикрутим трансфомации и плавные переходы
 */
/* line 238, left-nav-style.scss */
.nav > ul {
  display: block;
  margin: 0;
  padding: 40px 0 0;
  list-style: none; }

/* line 245, left-nav-style.scss */
.nav > ul > li {
  line-height: 2.5;
  opacity: 0;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%); }

/* line 258, left-nav-style.scss */
[id='nav-toggle']:checked ~ .nav > ul > li {
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0); }

/* определяем интервалы появления пунктов меню */
/*.nav > ul > li:nth-child(2) {*/
/*-webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;*/
/*transition: opacity .5s .2s, transform .5s .2s;*/
/*}*/
/*.nav > ul > li:nth-child(3) {*/
/*-webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;*/
/*transition: opacity .5s .3s, transform .5s .3s;*/
/*}*/
/*.nav > ul > li:nth-child(4) {*/
/*-webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;*/
/*transition: opacity .5s .4s, transform .5s .4s;*/
/*}*/
/*.nav > ul > li:nth-child(5) {*/
/*-webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;*/
/*transition: opacity .5s .5s, transform .5s .5s;*/
/*}*/
/*.nav > ul > li:nth-child(6) {*/
/*-webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;*/
/*transition: opacity .5s .6s, transform .5s .6s;*/
/*}*/
/*.nav > ul > li:nth-child(7) {*/
/*-webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;*/
/*transition: opacity .5s .7s, transform .5s .7s;*/
/*}*/
/**
 * оформление ссылок пунктов меню
 */
/* line 304, left-nav-style.scss */
.nav > ul > li > a {
  display: inline-block;
  position: relative;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 1.2em;
  color: #dadada;
  width: 100%;
  text-decoration: none;
  /* плавный переход */
  -webkit-transition: color .5s ease, padding .5s ease;
  -moz-transition: color .5s ease, padding .5s ease;
  transition: color .5s ease, padding .5s ease; }

/**
 * состояние ссылок меню при наведении
 */
/**
 * линия подчеркивания ссылок меню
 */
/* line 336, left-nav-style.scss */
.nav > ul > li > a:before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  -webkit-transition: width 0s ease;
  transition: width 0s ease; }

/* line 348, left-nav-style.scss */
.nav > ul > li > a:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: #dadada;
  -webkit-transition: width .5s ease;
  transition: width .5s ease; }

/**
 * анимируем линию подчеркивания
 * ссылок при наведении
 */
/* фон затемнения на основной контент
 * при этом элементы блокируютя
 * спорная такая фича, если оно вам надо
 * просто раскомментируйте
*/
/* line 389, left-nav-style.scss */
.mask-content {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  visibility: hidden;
  opacity: 0; }

/* line 402, left-nav-style.scss */
[id='nav-toggle']:checked ~ .mask-content {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity .5s, visibility .5s;
  transition: opacity .5s, visibility .5s; }