/* friedrichelias font */
@font-face { 
    font-family: 'friedricheliasfont';
    src: url('fonts/source-sans-pro/SourceSansPro-Regular.otf') format('opentype'); 
}
@font-face { 
    font-family: 'friedricheliasfont';
    src: url('fonts/source-sans-pro/SourceSansPro-It.otf') format('opentype');
    font-style: italic;
}
@font-face {
    font-family: 'friedricheliasfont';
    src: url('fonts/source-sans-pro/SourceSansPro-Black.otf') format('opentype');
    font-weight: bold;
}
@font-face {
    font-family: 'friedricheliasfont';
    src: url('fonts/source-sans-pro/SourceSansPro-BlackIt.otf') format('opentype');
    font-weight: bold;
    font-style: italic; 
}
@font-face {
    font-family: 'friedricheliasfontLight';
    src: url('fonts/source-sans-pro/SourceSansPro-ExtraLight.otf') format('opentype');
}
@font-face {
    font-family: 'friedricheliasfontLight';
    src: url('fonts/source-sans-pro/SourceSansPro-Light.otf') format('opentype');
    font-weight: bold; 
}

/* body */
html, body{
    height: 100%;
    margin: 0;
   /* font-family: friedricheliasfont, arial, sans-serif;*/
    font-family: friedricheliasfont, "times new roman", serif;
}


#header{
background-image: url(img/stimmung1.jpg);
background-size: cover;
}

.changeHeightStart{
    height: 50%;
}
.changeHeight {
    height: 25%;
    -webkit-transition: height 3s;
    -moz-transition: height 3s;
    -o-transition: height 3s;
    -ms-transition: height 3s;
    transition: height 3s;
}

div.logo {
    background-image: url(img/logo.png);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: bottom;
    width: 35%;
    height: 13%;
    left: 15%;
    top: 0;
    position:absolute;
}

/* navi */
ul#navi {
    font-family: friedricheliasfontlight;
    font-weight: bold;
    background-color:rgba(255,255,255,0.6);
    padding: 0.2em 0.2em 0.2em 15%;
    top: 15%;
    width: 100%;
    position: absolute;
  }
ul#navi li {
    list-style: none;
    display: inline;
    width:400px;
  }

ul#navi a, ul#navi span {
    padding: 0.0em 1.0em 0.0em 0.0em;
    min-width: 400px;
    text-decoration: none;
    color: darkslategray;
  }

ul#navi a:hover, ul#navi span {
    text-shadow: 0px 0px 1px white,0px 0px 1px white,0px 0px 1px white, 0px 0px 6px #ffaa55,0px 0px 6px #ffaa55,0px 0px 6px #ffaa55;
}

/* main */
.main {
    text-align: center;
    margin: 4em 15% 4em 15%;
    color: darkslategray;
    
}

.main h1
{
    font-family: friedricheliasfontlight;
    font-weight: 100;
    font-size: 300%;
}

.main img
{
   width: 10cm; 
}

.main p
{
    text-align: justify;
}

.main p.intro
{
    text-align: center;
    font-size: 110%;
    font-family: friedricheliasfontlight;
    margin-bottom: 3em;
}


.info {
    font-size: 100%;
    background-color: white;
    padding: 0px;
}

.info ul {
    font-family: friedricheliasfontlight;
    font-weight: bold;
    text-align: left;
    background-color:rgba(255,255,255,0.6);
    width: 100%;
    padding: 0;
  }
.info ul li {
    list-style: circle;
    display: inline;
    padding: 0.0em 1.0em 0.0em 0.5em;
    
  }

div.hoverImage{
 background-color: blue;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    width: 8cm;
    position: relative;
}

.hoverImage img {
    position: absolute;
    left: 0%;
    width: 8cm;
    transition: opacity 300ms;
}

.hoverImage img.second  {
    opacity: 0.0;
}

.hoverImage img:hover.second {
    opacity: 1.0;
}