@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url('/_design/fonts/roboto.woff');
src: local('Ыть'), url('/_design/fonts/roboto.woff2') format('woff2'), url('/_design/fonts/roboto.woff') format('woff');
}

body {
cursor: default;
margin: 0px;
padding: 64px 0px 0px 0px;
height: 100%;
font: 13px Roboto;
font-family: Roboto, Tahoma, Arial, snas-serif;
font-weight: 400;
font-style: normal;
font-size: 13px;
background-color: #a3c2ff;
background: linear-gradient(315deg, #00aa00, #0000aa);
background-size: cover;
background-position: bottom;
background-attachment: fixed;
background-repeat: no-repeat;
}

header {
background-color: rgba(0, 0, 0, 0.33);
position: fixed;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 56px;
line-height: 48px;
padding: 8px;
vertical-align: medium;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#slogan{
width: 666px;
height: 36px;
display: inline-block;
margin: 0;
padding: 0;
}

h1 {
font: 26px Roboto;
text-align: left !important;
}

h2 {
font: 20px Roboto;
text-align: left !important;
}

h3 {
font: 16px Roboto;
text-align: left !important;
}

a {
color: #22c;
text-decoration: underline;
outline: none;
}

a:visited {
color: #22c;
text-decoration: underline;
outline: none;
}

a:focus {
color: #22c;
text-decoration: underline;
outline: none;
}

a:hover {
color: #22c;
text-decoration: none;
outline: none;
}

img{
border: 0;
}

video {
min-width: 33%;
max-width: 1280px;
max-height: 720px;
}

@media (min-width: 800px) /** широкая морда **/ {
video {
border-radius: 5px;
}
#sidebar-btn {
display: none;
}
#sidebar {
display: block;
position: fixed;
top: 72px;
left: 0px;
bottom: 0px;
width: 320px;
padding: 0px;
color: white !important;
background-color: rgba(0, 0, 0, 0.33);
}
#logo{
width: 128px;
height: 53px;
display: inline-block;
background-image: url('/_design/logo.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#main-container {
display: block;
position: fixed;
top: 72px;
left: 320px;
bottom: 0px;
right: 0px;
overflow: auto;
}
.main-path {
display: flex-block;
width: auto;
background-color: rgba(255, 255, 255, 0.66);
border-radius: 5px;
margin: 8px;
padding: 8px;
font-size: 9px;
}
.main-block {
display: flex-block;
width: auto;
background-color: rgba(255, 255, 255, 0.66);
border-radius: 5px;
margin: 8px;
padding: 8px 8px 32px 8px;
text-align: justify;
}
}

@media (max-width: 799.99px) /** узкая морда **/ {
#sidebar {
display: none;
position: fixed;
top: 72px;
left: 0px;
bottom: 0px;
width: 360px;
padding: 0px;
z-index: 100;
color: white !important;
background-color: rgba(0, 0, 0, 0.9);
background: linear-gradient(315deg, #008800dd, #000088dd);
}
#sidebar-btn {
width: 48px;
height: 48px;
display: inline-block;
background-image: url('/_design/btn/menu.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#sidebar-chk:checked ~ #sidebar {
display: block;
}
#logo{
width: 64px;
height: 48px;
display: none;
background-image: url('/_design/logo.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#main-container {
display: block;
position: fixed;
top: 72px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: auto;
}
.main-path {
display: block;
width: 98%;
background-color: rgba(255, 255, 255, 0.66);
border-radius: 0px;
margin: 8px 0px;
padding: 1%;
font-size: 9px;
}
.main-block {
display: block;
width: 98%;
background-color: rgba(255, 255, 255, 0.66);
border-radius: 0px;
margin: 8px 0px;
padding: 1%;
text-align: justify;
}
}