
* {    
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #fff;
    color: #000000;
    font-family: 'Raleway';
    font-size: 20px;
    text-rendering: optimizeLegibility;
    
}

.row {
    max-width: 1140px;
    margin: 0 auto 0 auto;
}


.logo {
    height: 50px;
    width: auto;
    float: left;
    margin-top: 20px;
    margin-left: 0;
}

.main-nav {
    float: left;
    list-style: none;
    margin-top: 40px;
    margin-bottom: 40px;
}

.main-nav li {
    display: inline-block;
    margin-left: 20px;
    font-size: 100%;
    color: #8d8d8d;
}

.medal-picture {
    margin-left: 30%;
    margin-right: 50%;
    width: 40%;
    height: auto;
    padding-top: 1%;
    padding-right: 3%;
    padding-left: 1%;
    padding-bottom: 1%;
}

.row-navigate {
    max-width: 1140px;
    margin: 0 auto 0 auto;
}

.Links {
    text-align: center;
    list-style: none;
    margin-top: 1%;
    margin-bottom: 3%;
    margin-left: auto;
    margin-right: auto;
    color: #000000;
}

.Links li {
    display: inline-block;
    margin-left: 20px;
}

.Links li a:link,
.Links li a:visited {
    color: #000000;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 100%;
    transition: color 0.2s;
}

.Links li a:hover,
.Links li a:active {
    color: #1c2dfc;
}








@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }


.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
 
.fade-in.two {
-webkit-animation-delay: 1.5s;
-moz-animation-delay:1.5s;
animation-delay: 1.5s;
}
 
.fade-in.three {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
}

.fade-in.four {
    -webkit-animation-delay: 2.5s;
    -moz-animation-delay: 2.5s;
    animation-delay: 2.5s;
}

.fade-in.five {
     -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    animation-delay: 3s;
}

.fade-in.six {
     -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

.fade-in.seven {
     -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    animation-delay: 4s;
}

.fade-in.eight {
     -webkit-animation-delay: 4.5s;
    -moz-animation-delay: 4.5s;
    animation-delay: 4.5s;
}
