@font-face {
    font-family: 'Gerstner-Programm';
    src: url('fonts/woff2/Gerstner-ProgrammRegular.woff2') format('woff2'),
    url('fonts/woff/Gerstner-ProgrammRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gerstner-Programm';
    src: url('fonts/woff2/Gerstner-ProgrammItalic.woff2') format('woff2'),
    url('fonts/woff/Gerstner-ProgrammItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

html { box-sizing: border-box; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; }
*, *:before, *:after { box-sizing: inherit; }

body { font-family: 'Gerstner-Programm',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"; font-size: 16px; line-height: 1.3; color: #000; margin: 0; padding: 0; background: #fff; cursor: pointer; }

header { display: flex; flex-wrap: wrap; padding: 1.5rem; font-size: 31.25px; cursor: pointer; background: #fff; }

@media (max-width:767px) {
    #one { flex: 0 0 100%; margin-bottom: .25em; }
    #of { flex: 0 0 100%; text-align: right; margin-bottom: .25em; }
    #atn { flex: 0 0 100%; margin-bottom: 0em; }
}

@media (min-width:768px) {
    header { justify-content: space-between; padding: 1.5rem 2.5rem; font-size: 31.25px; }
}

#main { width: 100%; height: calc(100vh - 183.625px); overflow: hidden; position: relative; }
@media (min-width:768px) {
    #main { height: calc(100vh - 88px); }
}

#about { height: calc(100vh - 183.625px); font-size: 19px; padding: 1.5rem; background: #fff; }
#caption-wrap { position: absolute; width: 100%; bottom: 0; text-align: center; padding: 1.5rem; }
#caption { display: inline-block; color: #fff; padding: 0 .2rem; }
#image { opacity: 0; transition: .3s opacity ease-out; }
#image.loaded { opacity: 1; }

@media (max-width:767px) {
    #image { width: 100vw; height: calc(100vh - 183.625px); background: #eee; position: absolute; top: 0; left: 0; transition: .2s all ease-out; background-size: cover; background-position: center; background-repeat: no-repeat; }
    #main.active #image { left: -100vw; }
    #about { width: 100vw; padding: 1.5rem 1.5rem; position: absolute; top: 0; left: 100vw; transition: .2s all ease-out; }
    #main.active #about { left: 0vw; }
}
@media (min-width:768px) {
    #image { width: 100vw; height: calc(100vh - 88px); background: #eee; position: absolute; top: 0; left: 0; transition: .2s all ease-out; background-size: cover; background-position: center; background-repeat: no-repeat; }
    #main.active #image { left: -50vw; }
    #about { height: calc(100vh - 88px); width: 50vw; padding: 1.5rem 2.5rem; position: absolute; top: 0; left: 100vw; transition: .2s all ease-out; }
    #main.active #about { left: 50vw; }
}
@media (min-width:1200px) {
    #main.active #image { left: -33.33vw; }
    #about { width: 33.33vw; }
    #main.active #about { left: 66.67vw; }
}
#about p { margin: 0 0 1em 0; }
#about p a { color: #000; }
#about p a:hover { text-decoration: underline; }
#about p:not(:first-child) { text-indent: 2em; }

@media (min-width:768px) {

}