@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf") format("truetype");
}
@font-face {
    font-family: "DejaVu Sans Bold";
    src: url("fonts/DejaVuSans-Bold.ttf") format("truetype");
}
@font-face {
    font-family: "DejaVu Sans Condensed Bold";
    src: url("fonts/DejaVuSansCondensed-Bold.ttf") format("truetype");
}
body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow:hidden;   
    margin: 0;
    min-height: 640px;
}
body div { 
    font-family: "DejaVu Sans";
    margin: 0;
}
:focus { 
    outline: none !important;
}

#header {
    position:static;
/* 
    top: 0;
    left: 0;
    right: 0;
*/
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    border-bottom: 0.5em #5988BD solid;
    background-color: #f8f8f8;
}
#footer {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:80px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}
#headerLogotype {
    cursor: pointer;
    padding-left: 3vw;
}
#headerLogotype > div {
    font-family: "DejaVu Sans Condensed Bold";
    font-size: 26px;
    opacity: 100%;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#headerLogotype > div.faded {
    opacity: 0%;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    
}
#headerLogotype span {
    color: #5988BD;
}
#hamburger {
    z-index: 1;
    align-self: flex-end;
}
#menu {
    position:absolute;
    top: 80px;
    right: 0;
    width:40%;
    min-width: 250px;
    background-color: #f8f8f8;
    opacity: 100%;
    z-index: 2;
    font-size: 3vmin;
}
.menu-item {
    width: 100%;
    height: 30px;
    cursor: pointer;
    padding: 1vh 2vh;
    display: inline-table;
    border: 0px solid red;
    font-size: 2.5vh;
}
.menu-item:hover {
    background-color: #5988BD;
    opacity: 100%;
    color: white;
}
#content-container {
    position:absolute;
/*    
    position:static;
    left: 0;
    right: 0;
    bottom: 0;
*/
    width: 100%;
    height: calc(100% - 80px);
    border: 0px solid yellow;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: scroll;
}
#media-container {
    position: absolute;
    bottom: 0vh;
    right: 0vh;
    width: 8vh;
    height: 8vh;
    background-color: #CCC;
    z-index: 2;
    border-top-left-radius: 2vh;
}
#media-container.is-active {
    height: 16vh;
    width: 40vh;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}
#instagram-icon {
    
    background-image: url("grafix/instagram.svg");
    background-size: contain;
    width:50px;
    height:50px;
}
.icon {
    width:50px;
    height:50px;
    margin: 15px;
}
#media-container.is-active #instagram-icon {
    display: block;
}
.page-container {
    height: 100%;
    box-sizing: border-box;
}
#start-page {
    display: none;
    white-space : nowrap;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
#about-page {
}
.page-container:not(.full-width) {
    border: 0px solid #5988BD;
    width: 900px;
}
#about-page {
    display: none;
}
#consult-page {
    display: none;
}
#collab-page {
    display: none;
}
#contact-page {
    display: none;
}
#page-disabled {
    background-color: black;
    opacity: 50%;
    z-index: 1;
    width: 100%;
    position:absolute;
}
.content-area {
    width: 33%;
    height: 100%;
    border: 0px solid green;
    padding: 2%;
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
    box-sizing: border-box;
}
#logotype {
}
#logotype-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    height: 100%;
}
.tagline {
    font-size: max(16px, 2.5vh);
    font-weight: bold;
    margin-top: 2vh;
    margin-bottom: 3vh;
}
.intro {
    font-size: 1.8vmin;
    font-weight: normal;
    margin-bottom: 3vh;
}
.keep-narrow {
    width: 100%;
    padding: 0 2vw;
}
.tall {
    height: 100%;
}

.button {
    display: inline-block;
    color: white;
    background-color: #5988BD;
    padding: 1vh 2vh;
    cursor: pointer;
}
.intro.button, .menu-item {
    font-family: "DejaVu Sans Bold";
/*
    font-family: "DejaVu Sans Condensed Bold";
*/
}

.page-title {
    font-family: "DejaVu Sans Bold";
    font-size: max(3vh, 26px);
    margin: 1vh 2vh;
    color: #5988BD;
}

.page-container {
    scroll-snap-type: x mandatory;
}
.content-area {
    scroll-snap-align: start;
}

.hidden {
    display: none;
}
.full-width {
    width: 100%;
}
.half-width {
    width: 49%;
    display: inline-block;
}

.body-text {
    padding: 1vh;
    font-size: max(2vh, 20px);
    box-sizing: border-box;
    vertical-align: text-top;
}
.body-text.quote {
    font-size: max(1.8vh, 26px);
    font-style: italic;
    vertical-align: middle;
    text-align: center;
}


/* Menu control */

#content-container.start #start-page {
    display: block;
}
#content-container.about #about-page {
    display: block;
}
#content-container.collab #collab-page {
    display: block;
}
#content-container.consult #consult-page {
    display: block;
}
#content-container.contact #contact-page {
    display: block;
}



@media (max-width:900px) {

    /* your conditional / responsive CSS inside this condition */
    #menu {
        width: 100%;
    }
    .keep-narrow { 
        width: 65%; 
        -webkit-transition: width 1s ease-in-out;
        -moz-transition: width 1s ease-in-out;
        -o-transition: width 1s ease-in-out;
        transition: width 1s ease-in-out;
    }
    .tagline, .intro { 
        font-size: 3vh;
        -webkit-transition: font-size 1s ease-in-out;
        -moz-transition: font-size 1s ease-in-out;
        -o-transition: font-size 1s ease-in-out;
        transition: font-size 1s ease-in-out;
    }
    .content-area {
        width: 100%;
        padding: 2vmin 4vw;
        -webkit-transition: width 1s ease-in-out;
        -moz-transition: width 1s ease-in-out;
        -o-transition: width 1s ease-in-out;
        transition: width 1s ease-in-out;
    }
    .page-container:not(.full-width) {
        width: 100%;
        padding: 0 2vw;
    }

}

@media (max-width:650px) {

    /* your conditional / responsive CSS inside this condition */

    .keep-narrow { 
        width: 100%; 
        -webkit-transition: width 1s ease-in-out;
        -moz-transition: width 1s ease-in-out;
        -o-transition: width 1s ease-in-out;
        transition: width 1s ease-in-out;
    }
    .tagline, .intro { 
        font-size: 3vh; 
        -webkit-transition: font-size 1s ease-in-out;
        -moz-transition: font-size 1s ease-in-out;
        -o-transition: font-size 1s ease-in-out;
        transition: font-size 1s ease-in-out;
    }
    .logotype-container {padding: 0px 10px}
    .half-width {
        width:100%;
    }
}