@charset "UTF-8";

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.html, body {
	width: 100%;
	height: 100%;
	background-color: #000000;
	font-family: 'Roboto', sans-serif;
}
#preload {
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: black;
	z-index: 11;
}
.wbe-set{
	height: 150px;
	width: 300px;
	position: absolute;
	top: 20px;
	margin: auto;
	z-index: 9;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0;
}
.anchor-nav {
	width: 100%;
	position: fixed;
	bottom: 0px;
	right: 0px;
	left: 0px;
	z-index: 10;
	height: 115px;
	overflow-x: scroll;
	background-color: rgb(29, 29, 29);
}
.anchor-wrapper {
	width: 2900px;
}
.anchor-wrapper a {
	font-family: 'Roboto', sans-serif;
	color: white;
	text-decoration: none;
	font-size: 32px;
	line-height: 100px;
	width: 100px;
	float: left;
	height: 100px;
	text-align: center;
	transition: all .5s;
}
.anchor-wrapper a:hover {
	color: rgb(8,98,194);
}
#credits {
	font-size: 27px;
}
.anchor-wrapper a.active, .anchor-wrapper a.active:hover {
	color: white;
  background-color: rgb(8,98,194);
}
.sidebar-links {
	text-decoration: underline;
	font-size: 25px;
	color: rgb(101, 204, 255);
}
.section {
	text-align: center;
}
.date, .desc, .intro-title, .intro-desc {
	padding: 0 100px;
}
.date, .intro-title {
	position: relative;
	font-family: 'Alfa Slab One', cursive;
	font-size: 5em;
	color: #ffffff;
	text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
}

.desc, .intro-desc {
	position: relative;
	color: #ffffff;
	font-family: 'Roboto', sans-serif;
	font-size: 25px;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
	/* shadowed text */
/*	text-shadow: 0px 0px 5px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 0.5), 0px 0px 15px rgba(0, 0, 0, 1);
*/}
.desc, .date {
	opacity: 0;
}
.desc:before, .intro-desc:before {
	content: "";
	border-top: 1px solid #ffffff;
	display: block;
	margin-top: 0;
	margin-bottom: 25px;
	opacity: .15;
}
.blue {
	background-color: #3883d8;
}
.red {
	background-color: #cf3535;
}
.orange {
	background-color: #ea6300;
}
.white {
	background-color: #ffffff;
}


.cssload-fond{
	position:relative;
	margin: auto;
	top: 50%;
}

.cssload-container-general
{
	animation:cssload-animball_two 1.15s infinite;
		-o-animation:cssload-animball_two 1.15s infinite;
		-ms-animation:cssload-animball_two 1.15s infinite;
		-webkit-animation:cssload-animball_two 1.15s infinite;
		-moz-animation:cssload-animball_two 1.15s infinite;
	width:43px;
	height:43px;
}
.cssload-internal
{
	width:43px;
	height:43px;
	position:absolute;
}
.cssload-ballcolor
{
	width: 19px;
	height: 19px;
	border-radius: 50%;
}
.cssload-ball_1, .cssload-ball_2, .cssload-ball_3, .cssload-ball_4
{
	position: absolute;
	animation:cssload-animball_one 1.15s infinite ease;
		-o-animation:cssload-animball_one 1.15s infinite ease;
		-ms-animation:cssload-animball_one 1.15s infinite ease;
		-webkit-animation:cssload-animball_one 1.15s infinite ease;
		-moz-animation:cssload-animball_one 1.15s infinite ease;
}
.cssload-ball_1
{
	background-color:rgb(8,98,194);
	top:0; left:0;
}
.cssload-ball_2
{
	background-color:rgb(54,115,207);
	top:0; left:23px;
}
.cssload-ball_3
{
	background-color:rgb(104,157,237);
	top:23px; left:0;
}
.cssload-ball_4
{
	background-color:rgb(178,209,255);
	top:23px; left:23px;
}


@keyframes cssload-animball_one
{
	0%{ position: absolute;}
	50%{top:12px; left:12px; position: absolute;opacity:0.5;}
	100%{ position: absolute;}
}

@-o-keyframes cssload-animball_one
{
	0%{ position: absolute;}
	50%{top:12px; left:12px; position: absolute;opacity:0.5;}
	100%{ position: absolute;}
}

@-ms-keyframes cssload-animball_one
{
	0%{ position: absolute;}
	50%{top:12px; left:12px; position: absolute;opacity:0.5;}
	100%{ position: absolute;}
}

@-webkit-keyframes cssload-animball_one
{
	0%{ position: absolute;}
	50%{top:12px; left:12px; position: absolute;opacity:0.5;}
	100%{ position: absolute;}
}

@-moz-keyframes cssload-animball_one
{
	0%{ position: absolute;}
	50%{top:12px; left:12px; position: absolute;opacity:0.5;}
	100%{ position: absolute;}
}

@keyframes cssload-animball_two
{
	0%{transform:rotate(0deg) scale(1);}
	50%{transform:rotate(360deg) scale(1.3);}
	100%{transform:rotate(720deg) scale(1);}
}

@-o-keyframes cssload-animball_two
{
	0%{-o-transform:rotate(0deg) scale(1);}
	50%{-o-transform:rotate(360deg) scale(1.3);}
	100%{-o-transform:rotate(720deg) scale(1);}
}

@-ms-keyframes cssload-animball_two
{
	0%{-ms-transform:rotate(0deg) scale(1);}
	50%{-ms-transform:rotate(360deg) scale(1.3);}
	100%{-ms-transform:rotate(720deg) scale(1);}
}

@-webkit-keyframes cssload-animball_two
{
	0%{-webkit-transform:rotate(0deg) scale(1);}
	50%{-webkit-transform:rotate(360deg) scale(1.3);}
	100%{-webkit-transform:rotate(720deg) scale(1);}
}

@-moz-keyframes cssload-animball_two
{
	0%{-moz-transform:rotate(0deg) scale(1);}
	50%{-moz-transform:rotate(360deg) scale(1.3);}
	100%{-moz-transform:rotate(720deg) scale(1);}
}
.slide {
	background-size: cover;
	background-position: 50%;
}
#slide0 {
	background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-intro.jpg);
}

#slide1 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1917.jpg);
}

#slide2 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/printer.jpg);
}
#slide3 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1933.jpg);
}
#slide4 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1934.jpg);
}
#slide5 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1937.jpg);
}
#slide6 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1945.jpg);
}
#slide7 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1947.jpg);
}
#slide8 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1952.jpg);
}
#slide9 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1959.jpg);
}
#slide10 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1960.jpg);
}
#slide11 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1961.jpg);
}
#slide12 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1962.jpg);
}
#slide13 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1966.jpg);
}
#slide14 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1969.jpg);
}
#slide15 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1972.jpg);
}
#slide16 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1977.jpg);
}
#slide17 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1978.jpg);
}
#slide18 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1988.jpg);
}
#slide19 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1990.jpg);
}
#slide20 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-1998.jpg);
}
#slide21 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-2000.jpg);
}
#slide22 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-2002.jpg);
}
#slide23 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-2008.jpg);
}
#slide24 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-2012.jpg);
}
#slide25 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-2016.jpg);
		background-position: left;
}
#slide26 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-2017-4.jpg);
		background-position: top;
}
#slide27 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-2018.jpg);
}
#slide28 {
	background-image:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
		url(../images/bg-final.jpg);
}
#final img, #intro img {
	height: 60%;
	width: auto;
	margin-top: 19px;
}
.foreground-image {
	height:100px;
	width: 150px;
	margin: 0 10px;
	display: inline-block;
	cursor: pointer;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
	overflow: hidden;
}
.foreground-image img {
	width: 100%;
	height: auto;
}
.sidebar {
	padding: 20px;
	position: fixed;
	right: -50%;
	width: 50%;
	height: 100%;
	overflow: auto;
	z-index:12;
}
.sidebar-img {
	margin-bottom: 20px;
}
.sidebar-img, .sidebar-img > img {
	width: 100%;
	height: auto;
}
.sidebar-exit {
	position: absolute;
  top: 0;
  left: 0;
  width: 75px;
  background-color: rgb(8,98,194);
	padding: 20px;
	color: #ffffff;
	cursor: pointer;
	margin-top: 50px;
}
.overlay {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index:11;
	background-color: rgba(0, 0, 0, 0.75);
	display: none;
}
.sidebar-date {
	position: relative;
	font-family: 'Alfa Slab One', cursive;
	color: #ffffff;
	font-size: 36px;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}
.sidebar-desc {
	position: relative;
	color: #ffffff;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	line-height: 1.3;
}
.section {
	padding-bottom: 115px;
}
.credit-page {
	opacity: 0;
	position: absolute;
	top: 0;
	height: 100%;
	background-color: #ffffff;
	transition: all .5s;
	z-index: -1;
	overflow-x: scroll;
}
.credit-page-active {
	opacity: 1;
	z-index: 6;
}
.credit-wrapper{
	position: relative;
	width: 50%;
  margin: 0 auto;
}
.credit-exit {
	position: absolute;
	right: 20px;
	top: 10px;
	font-size: 44px;
	cursor: pointer;
	transition: all .25s;
}
.credit-exit:hover {
	color: rgb(8,98,194);
}
.credit-btn {
	font-size: 33px;
	color: rgb(8,98,194);
  background-color: #ffffff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  margin: 0 auto;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	transition: all .25s;
}
.credit-btn:hover {
	color: #ffffff;
	background-color: rgb(8,98,194);
}
.credit-title {
	color: rgb(8,98,194);
	font-size: 40px;
	font-family: 'Alfa Slab One', cursive;
	text-align: left;
	padding: 60px;
	padding-top: 100px;
}
.credit-text {
	text-align: left;
	padding: 5px 60px;
}
.inset {
	padding-left: 75px;
	padding-bottom: 30px;
}
.credit-last {
	padding-top:60px;
	padding-bottom: 60px;
}
.credit-text-date {
	color: rgb(8,98,194);
	font-weight: bold;
}
@media all and (max-width: 900px) {
	.date, .intro-title {
		font-size: 62px;
	}
	.desc, .intro-desc {
		font-size: 22px;
	}
	.wbe-set {
		height: 150px;
		width: 300px;
	}
}
@media all and (max-width: 600px), all and (max-height: 600px) {
	.date, .intro-title, .desc, .intro-desc {
		padding: 0 60px;
	}
	.date, .intro-title {
		font-size: 45px
	}
	.desc, .intro-desc, .sidebar-links {
		font-size: 16px;
	}
	.sidebar {
		width: 100%;
		right: -100%;
	}
	.anchor-nav {
		height: 85px;
	}
	.anchor-nav a {
		height: 70px;
		line-height: 70px;
		font-size: 22px;
	}
	#final img, #intro img {
		margin-top: 15px;
	}
	.section {
		padding-bottom: 85px;
	}
	.wbe-set {
		height: 100px;
		width: 200px;
	}
	.foreground-image {
		height: 70px;
		width: 100px;
	}
	.credit-title {
		padding-bottom: 30px;
		font-size: 25px;
	}
}

@media all and (max-width: 400px), all and (max-height: 400px) {
	.date, .intro-title {
		font-size: 30px;
	}
	.date, .intro-title {
		font-size: 30px;
	}
	.desc, .intro-desc, .sidebar-links, .credit-text {
		font-size: 14px;
	}
	.sidebar {
		width: 100%;
		right: -100%;
	}
}
@media all and (orientation: landscape) {
	.wbe-set {
		left: 20px;
	}
}
@media all and (orientation: portrait) {
	.wbe-set {
		left: 0px;
		right: 0px;
	}
}
@media all and (max-height: 600px) {
	.desc {
		font-size: 12px;
	}
}