#zimage {height:auto;}
.buttons a {padding:0.6em 1em; min-width:2rem; font-size:0.8rem !important;}
.hero img {max-width:100%; transition:transform 11s !important;}

@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:0.9em;}
.content-wrapper {padding-top:1px;}
.hero img {max-width:fit-content;}
}

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

@media (max-width: 480px) {
header {font-size:1.2em;}
.buttons {flex-direction:unset; width:10em;}
.buttons a {width:90%; text-align:center;}
.highlight {font-size:0.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 {font-size:0.9em;}
.overlay-text {font-size:1.2em;}
}

@media (min-height: 860px) {
.buttons a {min-width:2rem !important;}
}

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

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

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

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

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

@media (min-width: 1900px) and (orientation:landscape) {
html, html:root {zoom:1; overflow:hidden; height:100%; width:100%; max-height:100vh;}
}

@media (min-width: 2400px) and (min-height:1100px) and (orientation:landscape) {
html, html:root {zoom:1 !important;}
}