/*
 * Theme Name: CMS ASTRA•GOST
 * Template: Sterile
 * URL: https://a-gost.ru/
 * Description: Theme of template for CMS
 * Author: ASTRA•GOST
 */





@charset "utf-8";





/* Выезжающая панель */

.nav {
	z-index: 9997;
	left: -600px;
	top: 0;
	bottom: 0;
	position: fixed;
	display: block;
	width: 600px;
	height: 100%;
	background: #EAEAEA url('../graphics/bg_nav.jpg') no-repeat center;
        background-size: cover;
	padding: 0;
	margin: 0;
	text-shadow: 1px 1px 0 #FFF;
	transition: left .3s;
	}





/* Бургер (три полоски) */

.nav-toggle {
	z-index: 9998;
	left: 780px;	/* Ширина самой панели .nav (600px) + отступ слева */
	top: 0;
	position: absolute;
	display: block;
	line-height: 1;
	font-size: 40px;
	font-weight: bold;
	color: #FFF;
	background: none;
	padding: 10px;
	text-shadow: 1px 1px 0 rgba(0,0,0, 0.5);
	cursor: pointer;
	}

.nav-toggle:after {
	top: -3px;
	position: relative;
	content: '\2630';
	text-decoration: none;
	}

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

.nav-toggle:active {
	color: #F00;
	}





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

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





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

[id='nav-toggle']:checked ~ .nav > .nav-toggle {
	left: auto;
	right: 20px;
	top: 10px;
	color: #344B56;
	text-shadow: 1px 1px 0 rgba(255,255,255, 0.5);
	}
[id='nav-toggle']:checked ~ .nav > .nav-toggle:hover {
	color: #D9271B;
	}
[id='nav-toggle']:checked ~ .nav > .nav-toggle:active {
	color: #F00;
	text-shadow: none;
	}





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

[id='nav-toggle']:checked ~ .nav {
	left: 0;
	overflow-y: auto;
	box-shadow: 0 0 20px rgba(0,0,0, 0.5);
	}





/* Крестик на панели */

[id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
	content: '\2715';
	}





/* Профиксим баг в Android <= 4.1.2 */

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

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





/* Логотип на панели */

.nav img {
	display: inline-block;
	width: 190px;
	height: auto;
	text-align: center;
	margin: 30px 0;
	transform: scale(0.1, 0.1);
	transform-origin: 0% 0%;
	transition: opacity 1s, transform 1s;
	}





/* Плавное появление логотипа при раскрытии панели */

[id='nav-toggle']:checked ~ .nav img {
	opacity: 1;
	transform: scale(1, 1);
	}





/* Само меню c трансформациями и плавными переходами */

.nav ul {
	display: block;
	list-style: none;
	line-height: 1.4;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 95%;
	padding: 0;
	margin: 0;
	}

.nav ul li {
	opacity: 0;
	text-align: left;
	padding: 0;
	margin: 0;
	transform: translateX(-50%);
	transition: opacity 1s .1s, transform 1s .1s;
	}

[id='nav-toggle']:checked ~ .nav ul li {
	opacity: 1;
	transform: translateX(0);
	}





/* Оформление ссылок пунктов меню */

.nav a {
	position: relative;
	display: block;
	overflow: hidden;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(0,0,0, 0.15);
	text-decoration: none;
	color: #000;
	}

.nav a:after {
	z-index: 2;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: -350px;
	content: '';
	width: 200px;
	height: 150px;
	background: linear-gradient(90deg, rgba(255,255,255, .1), rgba(255,255,255, .35));
	transform: skewX(-45deg);
	}
.nav a:hover:after {
	left: 150%;
	transition: .5s ease-in-out;
	}

.nav > ul > li > a {
	width: 100%;
	text-transform: uppercase;
	font-weight: 700;
	padding: 8px 10px 8px 20px;
	}
.nav > ul > li > ul > li > a {
	width: 100%;
	padding: 8px 10px 8px 40px;
	}

.nav > ul > li > ul > li > a:before {
	left: -10px;
	top: -2px;
	position: relative;
	display: inline-block;
	content: "\f054";
	font: normal normal normal 10px/1 FontAwesome;
	text-rendering: auto;
	}

.nav a:hover,
.nav a:focus {
	border-bottom: 1px solid #FFF;
	color: #FFF;
	background: #344B56;
	text-shadow: 1px 1px 0 rgba(0,0,0, 0.5);
	}
.nav a:active {
	border-bottom: 1px solid #FFF;
	color: #FFF;
	background: #D9271B;
	text-shadow: none;
	transition: none;
	}





/* Активный пункт меню */

.nav .active-1st,
.nav .active-1st:hover {
	border-bottom: 1px solid #FFF;
	color: #FFF;
	background: #344B56;
	text-shadow: 1px 1px 0 rgba(0,0,0, 0.5);
	}
.nav .active-1st:hover:after {
	transition: none;
	}

.nav .active-2nd,
.nav .active-2nd:hover {
	border-bottom: 1px solid #344B56;
	color: #000;
	background: #CFD8DC;
	text-shadow: 1px 1px 0 rgba(255,255,255, 0.5);
	transition: none;
	}
.nav .active-2nd:hover:after {
	transition: none;
	}





/* Фон под панелью */

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

[id='nav-toggle']:checked ~ .mask-content {	/* При клике на бургер показываем фон */
	visibility: visible;
	opacity: 1;
	transition: opacity .75s, visibility .75s;
	}





/* ============================================= */
/* =А=Д=А=П=Т=И=В=*=М=Е=Д=И=А=*=З=А=П=Р=О=С=Ы= */
/* ============================================= */





/* Медиазапросы - точка перехода 1600 */

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

.nav-toggle {
	left: 700px;
	}

	}





/* Медиазапросы - точка перехода 1366 */

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

.nav-toggle {
	left: 610px;
	}

	}





/* Медиазапросы - точка перехода 1024 */

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

.nav {
	left: -100%;
	position: absolute;
	width: 100%;
	min-width: 100%;
	height: 100vh;
	}

.nav-toggle {
	left: 100%;
	position: relative;
	display: block;
	border-bottom: 1px solid rgba(255,255,255, 0.2);
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background: #344B56;
	padding: 0;	
	}
.nav-toggle:hover {
	color: #FFF;
	background: #D9271B;
	text-shadow: 1px 1px 0 rgba(0,0,0, 0.25);
	}
.nav-toggle:active {
	color: #FFF;
	background: #F00;
	text-shadow: 1px 1px 0 rgba(0,0,0, 0.25);
	}

[id='nav-toggle']:checked ~ .nav > .nav-toggle {
	left: 0;
	right: 0;
	top: 0;
	color: #FFF;
	text-shadow: 1px 1px 0 rgba(0,0,0, 0.5);
	}
[id='nav-toggle']:checked ~ .nav > .nav-toggle:hover {
	color: #FFF;
	background: #D9271B;
	text-shadow: 1px 1px 0 rgba(0,0,0, 0.25);
	}
[id='nav-toggle']:checked ~ .nav > .nav-toggle:active {
	color: #FFF;
	background: #F00;
	text-shadow: 1px 1px 0 rgba(0,0,0, 0.25);
	}

	}