body {
    font-family: 'Nobile', sans-serif;
    padding: 0;
    margin: 0;
}

.page-width{
    width: 950px;
    margin: auto;
}

header a {
    text-decoration: none;
}

#navigation {
    padding: 13px 0;
    margin: auto;
    background-color: #E5E5E5;
}

#navigation a{
    text-align: center;
    display: inline-block;
    background-position: center center;
    color: #FFF;
    font-weight: bold;
    font-size: 1.2em;
    margin-right: 20px;
    line-height: 65px;
    padding: 0 30px;
    box-sizing: border-box; 
}

#navigation a span{
    vertical-align: middle;
    line-height: 1.5;
    display: inline-block;
}

#navigation a:hover span{
    display: none;
}

#navigation a:hover::after{
    content: "Visit page";
    vertical-align: middle;
    line-height: 1.5;
    display: inline-block;
}

#navigation a:first-child:nth-last-child(3),
#navigation a:first-child:nth-last-child(3) ~ a{
    width: 303.33px;
}

#navigation a:first-child:nth-last-child(4),
#navigation a:first-child:nth-last-child(4) ~ a
{
    width: 222.5px;
}

#navigation a:last-child{
    margin-right: 0;
}

#logo-container {
   max-width: 950px;
   margin: 15px auto 25px;
   position: relative;
   height: 64px;
}

#vln-logo{
    position: absolute;
    height: 89px;
    left: 0;
}

#vln-logo a{
    display: inline-block;
    height: 64px;
    width: 166px;
    background-size: 166px 64px;
    background-image: url("media/vln-logo.png");
}

#vln-logo span{
    display: inline-block;
    vertical-align: bottom;
    color: #828282;
    font-family: Georgia, serif;
    font-size: 11px;
    background-image: url("media/header_divider.png");
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 16px;
    padding-bottom: 8px;
    padding-top: 8px;
    margin-bottom: 5px;
}

#bmbf-logo{
    position: absolute;
    right: 0;
    background-image: url("media/bpmf.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 88px 48px;
    height: 48px; 
    padding-right: 109px;
    font-size: 10px;
    color: #828282;
    font-family: Georgia, serif;
    line-height: 1.5;
    margin: 25px 0 5px 0;
}

#timeline-container{
    position: relative;
    height: 400px;
}

#timeline-container section{
    height: 100%;
    width: 100%;
    background-image: url("media/slide-0.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    position: absolute;
    visibility: hidden;
}

#timeline-container article{
    line-height: 400px;
    max-width: 950px;
    margin: auto;
    color: #FFF;
}

#timeline-container h2 {
    font-size: 150px;
    margin: 0 27px 0 0;
    line-height: 1;
    display:  inline-block;
    vertical-align: middle;
}

#timeline-container p{
    margin: 0;
    border-left: solid 2px;
    padding: 10px 0 10px 30px;
    line-height: 1.5;
    font-size: 20px;
}

#timeline-container .content{
    display:  inline-block;
    vertical-align: middle;
    font-weight: bold;
}

#slide-200AD h2{
    font-size: 100px;
}

#slide-11th-century h2{
    font-size: 75px;
}

#slide-1653 h2{
    font-size: 125px;
}

#slide-1950 h2{
    font-size: 125px;
}

#slide-1958 h2{
    font-size: 125px;
}

#slide-1966 h2{
    font-size: 125px;
}

#slide-2004-2010 h2{
    font-size: 75px;
}

#slide-2010-2015 h2{
    font-size: 75px;
}

#slide-virtual-liver-network h2{
    font-size: 50px;
}

#slide-basics-and-achievements h2{
    font-size: 50px;
}

#slide-scientific-libary h2{
    font-size: 50px;
}

#slide-education h2{
    font-size: 50px;
}

#timeline-container .active{
    visibility: visible;
}

.auto #timeline-container section{
    z-index: 50;
    visibility: visible;
}

.auto #timeline-container .active ~ section{
    z-index: 0;
}

.auto #timeline-container .navigation-item {
    z-index: 0;
}

.auto #timeline-container section.active{
    z-index: 100;
    visibility: visible;
    animation: fade-in 2s ease-in 200ms 1;
    animation-fill-mode: both;
    
    -webkit-animation: fade-in 2s ease-in 200ms 1;
    -webkit-animation-fill-mode: both; 
}

.auto #timeline-container .active h2{
    animation: fade-in 2s ease-in 200ms 1;
    animation-fill-mode: both;
    
    -webkit-animation: fade-in 2s ease-in 200ms 1;
    -webkit-animation-fill-mode: both;
}

.auto #timeline-container .active .content{
    animation: fade-in 2s ease-in 200ms 1;
    animation-fill-mode: both;
    
    -webkit-animation: fade-in 2s ease-in 1200ms 1;
    -webkit-animation-fill-mode: both;
}

.auto #timeline-bar li::before{
    transition: opacity 2s;
}

#timeline-container section *{
    visibility: hidden;
}

#timeline-container section.active *{
    visibility: visible;
}

#timeline-bar{
    text-align: center;
    color: #828282;
    background-image: url("media/horizontal-divider.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

#timeline-bar ul{
    margin: 0;
}

#timeline-bar li{
    position: relative;
    display: inline-block;
    padding: 10px 0;
    margin-right: 30px;
    z-index: 200;
    cursor: pointer;
    font-weight: bold;
}

#timeline-bar li::before{
    content: "";
    display: block;
    margin: auto;
    width: 10px;
    height: 10px;
    position: absolute;
    margin-left: 50%;
    left: -5px;
    top: -5px;
    background-color: #FFF;
    opacity: 0;
    
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

#timeline-bar li.active{
    color: #656565
}

#timeline-bar li.active::before{
    opacity: 1;
}


main{
    max-width: 950px;
    margin: auto;
}

main h2 {
    color: #0077B5;
    font-family: 'Nobile', sans-serif;
    font-weight: bold;
    font-size: 1.5em;
    margin: 0;
}

main {
    font-family: Georgia, serif;
    color: #828282;
    display: block;
}

main article{
    text-align: justify;
    color: #828282;
    line-height: 1.5;
}

main section{
    margin-bottom: 50px;
    padding-bottom: 60px;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-image: url(media/horizontal-divider.png); 
}

main section:last-child{
    padding-bottom: 0;
    background-image: none;
}

footer{
    background-color: #E5E5E5;
    color: #828282;
    padding: 50px 0;
    font-family: Georgia, serif;
    font-size: 15px;
    line-height: 1.5;
}

footer section {
    width: 950px;
    background: none;
    padding-bottom: 0;
    display: block; 
}

footer::after {
    display: block;
    content: '';
    clear: both;
}

footer section > div {
    float: left;
    margin-right: 20px;
    width: 303.33333px; 
}

footer section > div:last-child {
    margin-right: 0; 
}

footer ul {
    margin: 1em 0;
    padding: 0;
    list-style: none;
}

footer li {
    margin: 0; 
}

footer li::before {
    content: '> ';
    font-weight: bold;
    color: #ff9b23;
    font-size: 0.8em;
    vertical-align: text-top; 
}

footer a:hover {
    text-decoration: underline;
    color: #ff9b23; 
}

footer #collaboration a {
    height: 89px;
    width: 100%;
    display: block;
    background-repeat: no-repeat;
    background-position: center left; 
}

footer #collaboration a[href='http://www.easl.eu/'] {
    background-image: url("media/easl.png");
    background-size: 250px auto;
}

footer #collaboration a[href='http://www.vph-institute.org/'] {
    background-image: url("media/logo_VPH_Istitute_dark.png"); 
}

footer a{
    color: #FF9B23;
    text-decoration: none;
}

footer h2{
    font-size: 1em;
    font-weight: bold;
    color: #0076B7;
    margin: 0;
}

footer section{
    width: 950px;
    margin: 0 auto 30px;
}

footer section:last-child{
    margin-bottom: 0;
}

.icon--in {
  height: 32px;
  width: 32px;
  display: inline-block;
  background-image: url("media/linkedin-icon.png"); }

.icon--tw {
  height: 32px;
  width: 32px;
  display: inline-block;
  background-image: url("media/twitter-icon.png"); }


/*@media (max-height: 700px) { 
    #timeline-container {height: 200px;}
    #timeline-container article {line-height: 200px;}
}*/

@-webkit-keyframes fade-in{
    0% {opacity: 0; visibility:  visible;}
    100% {opacity: 1; visibility:  visible;}
}

@keyframes fade-in{
    0% {opacity: 0; visibility:  visible;}
    100% {opacity: 1; visibility:  visible;}
}