body {
    font-family: 'Lato', 'Arial', sans-serif;
    font-weight: 300;
    font-size: 18px;
    text-rendering: optimizeLegibility;
    color: #3d3d3d;
    width: 100vw;  
    overflow-x: hidden;       /* this prevents horizontal scrolling. It's a workaround I'd like to avoid...  */
}

body, ul, h1, h2 {
    margin: 0;
    padding: 0;
}


ol {
    margin: 0;
    padding: 0;
    margin-left: 10px;
}

ol li {
    padding: 0;
    padding-bottom: 15px;
    margin-left: 10px;
}

.text{
   max-width: 900px;
   margin: auto;
}


div.personalpicture img{
    box-shadow: 0px 0px 25px black;
    border-radius: 5px;	
}





/* ----------------- Header ----------------- */


header {
    background-color: #1B98E0;
    padding: 0px 10px;
}

h1 {
    font-size: 55px;
    font-weight: 300;
    color: #142c53;
    padding-top: 15px;
    animation-name: fadein;
    animation-duration: 1.8s;
}

@keyframes fadein {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}



header h3 {
    color: #e2d8aa;
    font-size: 24px;
    font-weight: 400;
    padding-top: 87px;
    animation-name: fadein2;
    animation-duration: 1.3s;
}

@keyframes fadein2 {
    0% {
        opacity:0;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

header span {
    color: #e2d8aa;
    border-radius: 8px;
    padding: 2px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: rgba(20, 44, 83,0.6);
}



div.flags{
    margin-top: -223px;
    margin-right: 20px;
    float: right;
    animation-name: fadein;
    animation-duration: 1.8s;
}

div.flags img{
    border-radius: 3px;
    height: 25px;
    box-shadow: 0px 0px 5px #142c53;
    margin-left: 10px;
}




/* ----------------- Footer ----------------- */


footer {
    background-color: #1B98E0;
    font-size: 85%;
    padding: 11px;
    overflow: auto;
    color: #FFFFFF;
}

footer a:link {
    color: #C0C0C0;
}

footer a:visited {
    color: #D3D3D3;
}




/* ----------------- Navigation ----------------- */

nav ul {
    list-style: none;
    background-color: #1B98E0;
    width: 100vw;
/*    max-width: 100%;  */
}

nav ul li {
    float: left;
}

nav ul li a {
    display: inline-block;
    padding: 14px;
    min-width: 85px;  /* min width here affects the width of the buttons in the menu. has to be changed for mobile */
    text-align: center;
    color: #FFFFFF;
    font-size: 18px;
    text-decoration: none;
}



nav ul li a:hover {
    background-color: #28A5ED;
}

nav ul li a.active {
    background-color: #35B2FA;
}


.clearfix:after {
    content: "";
    display: table;
    clear: both;
}


.fixed {
    position: fixed;
    top: 0;
    z-index: 99999;
}



/* ----------------- Sections ----------------- */

section {
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 20px;
    padding-bottom: 60px;
    color: #FFFFFF;
}

section h2 {
    padding: 30px 0;
    font-size: 36px;
    font-weight: 300;
}


section h3 {
    font-size: 24px;
    font-weight: 300;
    padding-top: 25px;
}

section a:link {
    color: #C0C0C0;
}

section a:visited {
    color: #D3D3D3;
}

section#s4 a:link {
    color: #696969;
}

section#s4 a:visited {
    color: #2F4F4F;
}


section ul {
    margin: 0;
    padding: .5em;
}


section li {
    margin-left: .8em;
}


#s1 {
    background-color: #13293D;
}

#s2 {
    background-color: #006494;
}

#s3 {
    background-color: #247BA0;
}

#s4 {
    background-color: #E8F1F2;
    color: #3d3d3d;
}




/*  -------------- Timeline ------------   */



.container {
   float:left;
   width: 100%;
   padding: 25px 0 0 0;
   margin-bottom: 30px;
   position: relative;
   overflow: hidden;
}

.container:before {
   content: '';
   position: absolute;
   top: 0;
   left: 10px;
   margin-left: 7px;
   width: 2px;
   height: 100%;
   background: #FFFFFF;
}

.timeline-block {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
   margin-left: 10px;
}

.marker {
   box-sizing: border-box;
   width: 17px;
   height: 16px;
   border-radius: 60%;
   border: 2px solid #247BA0;
   background: #1B98E0;
   margin-top: 10px;
   z-index: 2
}

.timeline-content {
   width: 100%;
   padding: 0 20px;
}

.timeline-content h4 {
   font-size: 21px;
   font-weight: 300;
   margin-top: 5px;
   margin-bottom: -13px;
}

.timeline-content p {
   margin-bottom: 30px;
}

.timeline-content p + p { 
  margin-top: -22px; 
}







/* ---------------- Hidden text -------------- */

button {
    background:none;
    border:none;
    font-variant: small-caps;
    text-decoration: none;
    color: #C0C0C0;
    display: inline-block;
    font-size: 15px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    border-radius: 8px;
    outline: none;
}


button:hover {
    background:#13293D;  /* better ideas for the animation? maybe font-weight: 900; ? */
}

div.hiddentext {
    width: 100%;
    font-size: 15px;
    margin-left: 0px;
    margin-top: 6px;
}

#b0 {
    display: none;
}
#b1 {
    display: none;
}
#b2 {
    display: none;
}
#b3 {
    display: none;
}
#b4 {
    display: none;
}
#b5 {
    display: none;
}
#b6 {
    display: none;
}
#b7 {
    display: none;
}
#b8 {
    display: none;
}
#b9 {
    display: none;
}
#b10 {
    display: none;
}
#b11 {
    display: none;
}
#b12 {
    display: none;
}