/* ===== Extracted for MOBILE (<=999px) ===== */

@media (max-height:699px) and (max-width:500px) {
body {padding-top:1px;}
footer {display:none;}
html {position:relative; top:unset; left:unset; transform:unset;}}

@media (max-height:850px) and (max-width:400px) and (orientation:portrait) {
footer {padding:1em; font-size:.9em;}
.content-wrapper {padding-top:1px;}
.hero img {max-width:fit-content;}}

@media (max-height:1345px) and (max-width:320px) and (orientation:portrait) {
html {left:unset; overflow:visible; position:relative; top:1px; transform:none; zoom:.8;}}

@media (max-width:468px) {
.buttons {justify-content:center; justify-items:center; grid-template-columns:repeat(2,1fr);}}

@media (max-width:480px) {
header {font-size:1.2em;}
.buttons {flex-direction:column; flex-direction:unset; width:10em;}
.buttons a {width:90%; text-align:center;}
.highlight {font-size:.88em;}
.logo {max-width:14.8em;}
.overlay-text {font-size:1em;}}

@media (max-width:768px) {
h2 {font-size:1rem; margin:auto;}
.buttons {width:15em;}
.buttons a {padding:.6em 1.2em; font-size:.9em;}
.hero img {max-width:90%;}
.overlay-text {font-size:1.2em;}}

@media (max-width:999px) and (min-width:100px) and (min-height:100px) and (orientation:portrait) {
body {overflow-y:visible;}
div.highlight.logo.padded-box {zoom:1.05;}
footer {bottom:1px; position:absolute; padding:1em 0; width:100%;}
nav.buttons.button-grid.noted {font-size:.95rem;}
section.hero {zoom:1.2;}
.content-wrapper {padding:1px;}}

@media (max-width:999px) and (min-width:376px) and (min-height:741px) and (orientation:portrait) {
body {padding-top:0;}
footer {bottom:1px; position:absolute; min-width:100%; padding:1em 0;}
.content-wrapper {padding:0;}}

@media (max-width:999px) and (orientation:landscape) {
.center-container {align-items:flex-start; padding-top:20px;}}

@media (max-width:999px) and (orientation:portrait) {
.content-wrapper {width:100%; max-width:1200px; padding:15px;}}

@media (min-width:2px) and (max-width:375px) and (max-height:740px) and (orientation:portrait) {
body {padding-top:0;}
footer {bottom:1px; position:absolute; min-width:100%; padding:1em 0;}
.content-wrapper {padding:0;}}

@media (min-width:2px) and (max-width:999px) and (min-height:100px) and (max-height:768px) and (orientation:landscape) {
body, html {overflow:visible; min-height:100%; zoom:1; background:gray; min-height:max-content; background:#4682b4;}}

@media (max-width:768px) {
.hero img {max-width:100%;}}

@media (max-width: 768px) {
.buttons a {padding:0.6em 1em; font-size:.8rem; min-width:2rem;}}

@media (max-height:1345px) and (max-width:320px) and (orientation:portrait) {
html:root {left:unset; overflow:visible; position:relative; top:1px; transform:none; zoom:.8;}}

@media (max-width:999px) and (min-width:100px) and (min-height:100px) and (orientation:portrait) {
html body {overflow-y:visible;}}

@media (max-width:999px) and (min-width:100px) and (min-height:100px) and (orientation:portrait) {
footer[data-x] {bottom:1px; position:absolute; padding:1em 0; width:100%;}}

@media (max-width:999px) and (min-width:100px) and (min-height:100px) and (orientation:portrait) {
nav.buttons.button-grid.noted.noted {font-size:.95rem;}}

@media (max-width:999px) and (min-width:100px) and (min-height:100px) and (orientation:portrait) {
.content-wrapper.content-wrapper {padding:1px;}}

@media (min-width:2px) and (max-width:999px) and (min-height:100px) and (max-height:768px) and (orientation:landscape) {
html body, html:root {overflow:visible; min-height:100%; zoom:1; min-height:max-content; background:#4682b4;}}

@media (max-width: 999px) {
.hero img {transition:transform 11s !important;}}

#zimage {height: auto;}
@media (max-width: 768px) {.buttons a {padding: 0.6em 1em;ont-size: .8rem!important;min-width: 1rem!important;}}