/* to still do: 
-> change the 'top' of nav+main so they rely on the same value as the title. 
*/

html {
    background-color: #FFF;
    font-family: Futura, Trebuchet MS, Arial, sans-serif;
}

a {
    text-decoration: none;
    color: #000000;
}

a#alt {
    color: #EE0000;
}

li {
    list-style-type: none;
    padding-bottom: 3.5vw;
}

#title {
    position: fixed;
    top: 0rem;
    left: 15%;
    width: 67%;
    font-size: 7vw;
    font-style: italic;
    letter-spacing: 0.7vw;
    color: #EE0000;
    background-color: #FFFFFF;
    z-index: 2;
}

#nav {
    position: fixed;
    font-size: 1.7vw;
    font-style: italic;
    line-height: 1.5rem;
    text-transform: uppercase;
    max-width: 16%;
}

#nav.left {
    top: 18%;
    left: 1rem;
    text-align: left;
    width: 15%;
}

#nav.right {
    bottom: 1rem;
    right: 1em;
    text-align: right;
}

#nav.languages {
    bottom: 1rem;
    left: 1em;
    text-align: left;
}

#nav a {
    padding-bottom: 6vw;
}

.small {
    font-size: 1.3vw;
}

.nav_title {
            line-height: 3vw; 
            padding-bottom: 1.5vw;
        }

.wie_nav {
    font-size: 1.5vw; 
    font-weight: bold; 
    text-transform: uppercase; 
    font-style: italic;
}

.hidden {
    display: none;
    text-align: right;
}

.icon {
    display: none;
    font-style: normal;
    font-size: 15vw;
    z-index: 1;
}

#content {
    position: absolute;
    left: 15%;
    top: 17%;
    width: 67%;
    font-size: 1em;
    text-align: left;
    hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
    padding-bottom: 2rem;
    overflow: hidden;
}

#portrait {
    width: 44%;
    position: relative;
    float: left;
    padding-bottom: 3.5vw;
}

#resume {
    width: 55%;
    position: relative;
    float: right;
    padding-bottom: 3.5vw;
}

#portrait_narrow {
    width: 34%;
    position: relative;
    float: left;
    padding-bottom: 3.5vw;
}

#resume_narrow {
    width: 65%;
    position: relative;
    float: right;
    padding-bottom: 3.5vw;
}

#portrait_wide {
    width: 55%;
    position: relative;
    float: left;
    padding-bottom: 3.5vw;
}

#resume_wide {
    width: 44%;
    position: relative;
    float: right;
    padding-bottom: 3.5vw;
}

#container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: auto;    
}

#vid_container {
    position: relative;
	padding-top: 56.33%;
	height: 0;
}
#vid_container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#logos {
    width: 25%;
}

    @media only screen and (max-width: 750px) {
        .left li {
            display: none;
        }
        
        .left a.icon {
            float: left;
            display: block;
        }
        .left.responsive {
            position: relative;
        }
        .left.responsive a.icon {
            position: absolute;
            margin-right: 0;
            margin-top: 0;
        }
        .left.responsive a {
            float: none;
            display: block;
            text-align: left;
        }
        
        
        #title {
            font-size: 13vw;
            position: relative;
            left: 0;
            width: 100%;
            padding-bottom: 2vw;
        }
        
        #nav {
            position: static;
            top: 0;
            max-width: 100%;
            width: 100%;
            font-size: 2rem;     /* 6vw */
            line-height: 3.5rem;  /* 12vw */
        }
        
        .right {
            display: none;
        }
        
        .languages {
            display: none;
        }
        
        .hidden {
            display: block;
        }
        
        .small {
            font-size: 1.5rem;
            line-height: 2rem;  /* 12vw */
        }
        
        .wie_nav {
            font-size: 2rem;
        }
        
        .nav_title {
            font-size: 1.7rem;
            line-height: 2.5rem; 
            padding-bottom: 1vw;
        }
        
        #content {
            position: static;
            left: 0;
            margin-top: 0;
            width: 100%;
        }
        
        #portrait {
            position: static;
            width: 100%;
        }
        
        #resume {
            position: static;
            width: 100%;
            padding-bottom: 15vw;
        }
        
        #portrait_wide {
            position: static;
            width: 100%;
        }
        
        #resume_wide {
            position: static;
            width: 100%;
            padding-bottom: 15vw;
        }
        
        #logos {
            width: 100%;    
        }
    }

body#index a#index, 
body#team a#team, 
body#kontakt a#kontakt, 
body#impressum a#impressum, 
body#schulz a#schulz, 
body#medias a#medias, 
body#mitwirkende a#mitwirkende, 
body#termine a#termine,
body#ps a#ps,
body#kreuzer a#kreuzer,

body#index a#de, 
body#team a#de, 
body#kontakt a#de, 
body#impressum a#de, 
body#schulz a#de, 
body#medias a#de, 
body#mitwirkende a#de, 
body#termine a#de,
body#ps a#de,
body#kreuzer a#de,


body#enindex a#index, 
body#enteam a#team, 
body#enkontakt a#kontakt, 
body#enimpressum a#impressum, 
body#enschulz a#schulz, 
body#enmedias a#medias, 
body#enmitwirkende a#mitwirkende, 
body#entermine a#termine, 
body#enps a#ps,
body#enkreuzer a#kreuzer,

body#enindex a#en, 
body#enteam a#en, 
body#enkontakt a#en, 
body#enimpressum a#en, 
body#enschulz a#en, 
body#enmedias a#en, 
body#enmitwirkende a#en, 
body#entermine a#en, 
body#enps a#en,
body#enkreuzer a#en,


body#frindex a#index, 
body#frteam a#team, 
body#frkontakt a#kontakt, 
body#frimpressum a#impressum, 
body#frschulz a#schulz, 
body#frmedias a#medias, 
body#frmitwirkende a#mitwirkende, 
body#frtermine a#termine,
body#frps a#ps,
body#frkreuzer a#kreuzer,

body#frindex a#fr, 
body#frteam a#fr, 
body#frkontakt a#fr, 
body#frimpressum a#fr, 
body#frschulz a#fr, 
body#frmedias a#fr, 
body#frmitwirkende a#fr, 
body#frtermine a#fr, 
body#frps a#fr,
body#frkreuzer a#fr {
    font-style: normal;
    text-decoration: italic;
    text-decoration-color: #EE0000;
    color: #EE0000;
}