.hero-image {
height: 100%;
text-align: center;
width:100%;
text-size-adjust: 150%;
display: block;
position: relative;
color: #fff;
margin: 0 0 0 0;
scroll-snap-align: start;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.hero-image a, .hero-image table {
color: #fff;
}
.hero-image .hero-image-center{
text-size-adjust: 250%;
width: 100%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
box-sizing: border-box;
padding: 40pt;
max-height: 60%;
overflow-y: auto;
z-index: 0;
}
.hero-image .hero-image-top{
text-size-adjust: 250%;
min-width: 100%;
position: absolute;
left: 0;
top: 0;
}
.hero-image .hero-image-bottom{
text-size-adjust: 250%;
min-width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.navigation {
display: block;
text-align: center;
margin: 0 0 0 0;
white-space: wrap;
color: #fff;
text-transform: uppercase;
font-weight: 600;
max-height: 200%;
}
.navigation li {
list-style-type: none;
width: 33.333%;
width: calc (100% / 3);
overflow-x: hidden;
display: inline-block;
text-align: center;
margin: 0 0 0 0;
padding-left: 0;
padding-right: 0;
font-size: 0.8rem;
}
.navigation li:hover {
background-color: rgba(255,255,255,0.2);
}
.navigation ul {
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center;
width: 100%;
font-size: 0;
}

.navigation li:nth-child(3n+1):nth-last-child(1), .navigation li:nth-child(3n+1):nth-last-child(1) ~ li{
width: 100%;
}
.navigation li:nth-child(3n+1):nth-last-child(2), .navigation li:nth-child(3n+1):nth-last-child(2) ~ li{
width: 50%;
}
.navigation a {
color: inherit;
text-decoration:none;
display: block;
padding-top: 1em;
padding-bottom: 1em;
}
.header {
max-width: 100%;
padding-left: 40pt;
padding-right: 40pt;
text-align: center;
padding-top: 20pt;
padding-bottom: 20pt;
font-family: Cormorant Unicase,Comfortaa, Montserrat, sans-serif;
font-size: 3em;
text-align: center;
background-color: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
color: #fff; 
}
.header a {
text-decoration: none;
color: #fff;
}
@media only screen and (orientation: landscape) {
.hero-image {text-size-adjust: 100% !important;}
.hero-image * {text-size-adjust: 100% !important;}
body { text-size-adjust: 100% !important; }
}
body {
margin: 0 0 0 0;
font-family: "Noto Sans";
scroll-snap-type: y mandatory;
text-size-adjust: 250%;
}
.fixed-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0));
z-index: 1;
max-height: 20%;
}
.fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
z-index: 1;
}
.align-left {
text-align: left;
}
.navigation li.active {
background-color: rgba(255,255,255,0.1);
}
.navigation li.active:hover {
background-color: rgba(255,255,255,0.2);
}