@charset "UTF-8";

/**
 * Переключаемая боковая панель навигации
 * выдвигающаяся по клику слева
 */

.nav {
    /*  ширна произвольная, не стесняйтесь экспериментировать */
    width: 40vw;
    min-width: 30vw;
    /* фиксируем и выставляем высоту панели на максимум */
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    margin: 0;
    /* сдвигаем (прячем) панель относительно левого края страницы */
    right: -50vw;
    /* внутренние отступы */
    padding: 15px 20px;
    /* плавный переход смещения панели */
    -webkit-transition: right 0.3s;
    -moz-transition: right 0.3s;
    transition: right 0.3s;
    /* определяем цвет фона панели */
    background: white;
    /* поверх других элементов */
    z-index: 2000;
}


/**
 * Кнопка переключения панели
 * тег <label>
 */

.nav-toggle {
    /* абсолютно позиционируем */
    position: absolute;
    /* относительно левого края панели */
    right: calc(50vw + 50px);
    /* отступ от верхнего края панели */
    top: 30px;
    /* внутренние отступы */
    padding: 0.5em;
    /* определяем цвет фона переключателя
     * чаще вчего в соответствии с цветом фона панели
    */
    /*background: inherit;*/
    background: none;
    /* цвет текста */
    color: #202730;
    /* вид курсора */
    cursor: pointer;
    /* размер шрифта */
    font-size: 29pt;
    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;
    background: url("/files/cart.png") no-repeat center;
    font-family:"Open Sans";
}


/* определяем текст кнопки 
 * символ Unicode (TRIGRAM FOR HEAVEN)
*/

.nav-toggle:after {
    /*content: '\2630';*/
    text-decoration: none;
}


/* цвет текста при наведении */

.nav-toggle:hover {
    color: #202730;
}


/**
 * Скрытый чекбокс (флажок)
 * невидим и недоступен :)
 * имя селектора атрибут флажка
 */

[id='nav-toggle'] {
    position: absolute;
    display: none;
}


/**
 * изменение положения переключателя 
 * при просмотре на мобильных устройствах
 * когда навигация раскрыта, распологаем внутри панели
*/

[id='nav-toggle']:checked ~ .nav > .nav-toggle {
    right: auto;
    right: 2px;
    top: 1em;
    background: none;
    color: white;
}


/**
 * Когда флажок установлен, открывается панель
 * используем псевдокласс:checked
 */

[id='nav-toggle']:checked ~ .nav {
    right: 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;
}


/* 
 * смещение контента страницы
 * на размер ширины панели,
 * фишка необязательная, на любителя
*/

/*[id='nav-toggle']:checked ~ main > article {*/
    /*-webkit-transform: translateX(320px);*/
    /*-moz-transform: translateX(320px);*/
    /*transform: translateX(320px);*/
/*}*/


/*
 * изменение символа переключателя,
 * привычный крестик (MULTIPLICATION X), 
 * вы можете испльзовать любой другой значок
*/

[id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
    content: '\2715';
    color: #202730;
    font-size: 24pt;
    background: none;
}
[id='nav-toggle']:checked ~ .nav > .nav-toggle:after :hover {
    color: #1f1f1f;
    font-size: 26pt;
}


/**
 * профиксим баг в Android <= 4.1.2
 * см: http://timpietrusky.com/advanced-checkbox-hack
 */

body {
    -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
    to {
      padding: 0;
    }
}


/**
 * позаботьтимся о средних и маленьких экранах
 * мобильных устройств
 */

@media screen and (min-width: 320px) {
    html,
    body {
      margin: 0;
      overflow-x: hidden;
    }
}

@media screen and (max-width: 320px) {
    html,
    body {
      margin: 0;
      overflow-x: hidden;
    }
    .nav {
      width: 100%;
      box-shadow: none
    }
}



/* фон затемнения на основной контент 
 * при этом элементы блокируютя
 * спорная такая фича, если оно вам надо
 * просто раскомментируйте
*/
@media screen and (max-width: 767px) {
    .nav {
        /*  ширна произвольная, не стесняйтесь экспериментировать */
        width: 100vw;
        min-width: 100vw;
        /* фиксируем и выставляем высоту панели на максимум */
        height: 100%;
        position: fixed;
        top: 0;
        bottom: 0;
        margin: 0;
        /* сдвигаем (прячем) панель относительно левого края страницы */
        right: -100vw;
        /* внутренние отступы */
        padding: 15px 20px;
        /* плавный переход смещения панели */
        -webkit-transition: right 0.3s;
        -moz-transition: right 0.3s;
        transition: right 0.3s;
        /* определяем цвет фона панели */
        background: white;
        /* поверх других элементов */
        z-index: 2000;
    }


    /**
     * Кнопка переключения панели
     * тег <label>
     */

    .nav-toggle {
        /* абсолютно позиционируем */
       position: absolute;
        /* относительно левого края панели */
        right: calc(100vw + 10px);
        /* отступ от верхнего края панели */
        top: 135px;
        /* внутренние отступы */
        padding: 0.5em;
        /* определяем цвет фона переключателя
         * чаще вчего в соответствии с цветом фона панели
        */
        /*background: inherit;*/
        background: none;
        /* цвет текста */
        color: #202730;
        /* вид курсора */
        cursor: pointer;
        /* размер шрифта */
        font-size: 29pt;
        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;
        background: url("/files/cart.png") no-repeat center;
        font-family:"Open Sans";
    }

}

.mask-content {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
}

[id='nav-toggle']:checked ~ .mask-content {
    z-index: 1000;
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .5s, visibility .5s;
    transition: opacity .5s, visibility .5s;
}