html, body {width:100%; height:100%; background:var(--body-background);}
div#frame {width:100%; min-height:100vh; position:relative;}
div#frame section {max-width:calc(100% - 20px); margin:100px auto 10px; padding:0 10px; color:#ffffff; background:rgba(5, 160, 129, 0.7); font:italic 15px/40px open_sans_regular, sans-serif; text-align:center; border-radius:5px; box-sizing:border-box; user-select:none; clear:both;}
div#frame section span {font-style:normal; font-weight:bold; font-family:open_sans_bold;}
div#frame div.contacts {max-width:calc(100% - 20px); margin:100px auto 10px; display:grid; grid-template-columns:100%; gap:10px 0; clear:both;}
div#frame div.contacts div {padding:0 10px; background:rgba(5, 160, 129, 0.7); border-top:1px solid #05a081; border-right:1px solid rgba(0, 0, 0, 0); border-bottom:1px solid rgba(0, 0, 0, 0); border-left:1px solid #05a081; border-radius:5px 0; box-sizing:border-box;}
div#frame div.contacts div h1 {color:#ffffff; font:20px/40px open_sans_medium, sans-serif; text-align:left; border-bottom:1px solid rgba(255, 255, 255, 0.3);}
div#frame div.contacts div h2>a {color:#ffffff; font:14px/30px open_sans_bold, sans-serif; text-align:left;}
header {width:100%; height:60px; box-sizing:border-box;}
header>nav {width:100%; float:left;}
header>nav:first-child {margin:0; cursor:pointer;}
header>nav:first-child>li {width:48px; height:4px; margin:12px 0 12px 12px; background:#05a081; -webkit-transition:0.2s; transition:0.2s; display:block;}
header>nav:last-child {width:100%; min-width:320px; height:auto; margin:0 0 10px; background:#ffffff; border:1px solid #05a081; border-right:0; border-left:0; display:none; grid-template-columns:100%; row-gap:1px; clear:both;}
header>nav:last-child>li {position:relative;}
header>nav:last-child>li>a {padding:0 0 0 12px; color:#ffffff; background:#05a081; font:small-caps bold 14px/30px open_sans_medium, sans-serif; display:block;}
header>nav:last-child>li>a:hover, header>nav:last-child>li>a.active {color:#05a081; background:#ffffff;}
header>nav:last-child>li>ul {display:none;}
footer {width:inherit; height:50px; position:fixed; bottom:0; background:rgba(5, 160, 129, 0.7);}
div.copyright {color:#ffffff; font:12px/50px open_sans_medium, sans-serif; text-align:center; cursor:default;}
* {transition:background-color 300ms ease, color 300ms ease;}
@media only screen and (min-width:768px)
{
div#frame {background:linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, #05a081), url('/img/home.jpg') no-repeat 0 60%; background-size:100%, cover; clear:both;}
div#frame section {width:600px;}
div#frame div.contacts {width:700px; grid-template-columns:50% 50%; gap:0 10px;}
header {height:100px; padding:20px;}
header>nav:first-child {display:none!important;}
header>nav:last-child {height:60px; background:none; border:0; display:grid!important; grid-template-columns:repeat(7, auto); column-gap:1px;}
header>nav:last-child>li>a {padding:0; background:rgba(5, 160, 129, 0.7); font-size:13px; line-height:60px; text-align:center; display:block;}
header>nav:last-child>li>a.admin {background:linear-gradient(to right, #3399ff, #0033cc);}
header>nav:last-child>li>a.admin:hover {color:#ffffff; background:linear-gradient(to right, #0033cc, #3399ff);}
header>nav:last-child>li:first-child>a {border-radius:5px 0 0 5px;}
header>nav:last-child>li:last-child>a {border-radius:0 5px 5px 0;}
header>nav:last-child>li>a:hover, header>nav:last-child>li>a.active {color:#05a081; background:rgba(255, 255, 255, 0.7);}
header>nav:last-child>li>ul {width:200px; height:auto; position:absolute; top:60px; border:1px solid rgba(5, 160, 129, 0.7); display:none; z-index:1;}
header>nav:last-child>li>ul.left {left:0; border-radius:0 3px 3px 3px;}
header>nav:last-child>li>ul.right {right:0; border-radius:3px 0 3px 3px;}
header>nav:last-child>li>ul>a {padding:0 0 0 10px; color:#05a081; background:#ffffff; font:13px/30px open_sans_medium, sans-serif; text-align:left; display:block;}
header>nav:last-child>li>ul>a:hover {color:#ffffff; background:rgba(5, 160, 129, 0.7);}
header>nav:last-child>li:hover>ul {display:grid; grid-template-columns:100%; gap:0;}
}
@media only screen and (min-width:1200px)
{
header>nav:last-child>li>a {font-size:18px;}
}