@charset "UTF-8";.nav {    width: 220px;    min-width: 220px;    height: 100%;    position: fixed;    top: 0;    bottom: 0;    margin: 0;    right: -220px;    /* внутренние отступы */    padding: 15px 20px;    -webkit-transition: right 0.3s;    -moz-transition: right 0.3s;    transition: right 0.3s;    background: #99c45a;    z-index: 2000;}.nav-toggle {    position: absolute;    right: 220px;    top: 1em;    padding: 0.5em;    background: #99c45a;    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;}.nav-toggle:after {    content: '\2630';    text-decoration: none;}.nav-toggle:hover {    color: #f4f4f4;}[id='nav-toggle'] {    position: absolute;    display: none;}[id='nav-toggle']:checked ~ .nav > .nav-toggle {    left: auto;    right: 2px;    top: 1em;}[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);}[id='nav-toggle']:checked ~ .nav > .nav-toggle:after {    content: '\2715';}body {    -webkit-animation: bugfix infinite 1s;}@-webkit-keyframes bugfix {    to {        padding: 0;    }}@media screen and (min-width: 319px) {    html,    body {        margin: 0;        overflow-x: hidden;    }}@media screen and (max-width: 319px) {    html,    body {        margin: 0;        overflow-x: hidden;    }    .nav {        width: 100%;        box-shadow: none    }}.nav h2 {    width: 90%;    padding: 0;    margin: 10px 0;    text-align: center;    text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(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;}.nav h2 a {    color: #dadada;    text-decoration: none;    text-transform: uppercase;}[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);}.nav > ul {    width: 100%;    display: block;    margin: 0;    padding: 0;    list-style: none;}.nav > ul > li {    line-height: 2;    opacity: 0;    -webkit-transform: translateX(50%);    -moz-transform: translateX(50%);    -ms-transform: translateX(50%);    transform: translateX(50%);    -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;    -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;    -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;    transition: opacity .5s .1s, transform .5s .1s;}[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 > 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;}.nav > ul > li > a:hover,.nav > ul > li > a:focus {    color: white;    padding-left: 15px;}.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;}.nav > ul > li > a:after {    content: '';    display: block;    position: absolute;    left: 0;    bottom: 0;    height: 1px;    width: 100%;    background: #3bc1a0;    -webkit-transition: width .5s ease;    transition: width .5s ease;}/*.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;}[id='nav-toggle']:checked ~ .mask-content {    visibility: visible;    opacity: 1;    -webkit-transition: opacity .5s, visibility .5s;    transition: opacity .5s, visibility .5s;}*/