/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: 'Titillium Web', sans-serif;
  color: #383838;
  background: url(../img/bg.jpg) top center no-repeat #E0E0E0;
}

a {
  color: #C90050;
  text-decoration: none;
}

/* -------------------------------- 

Main Components 

-------------------------------- */
.up{
	position: absolute;
	z-index: 1;
	top: 5%;
	right: 5%;
	height: 34px;
	width: 34px;
	border-radius: 50%;
	border: 2px solid #dfdfdf;
	overflow: hidden;
	text-align: center;
	line-height: 30px;
	color: #dfdfdf;
	font-size: 1em;
}

.up:hover{
	border: 2px solid #C90050;
	color: #C90050;
}


.logo{
	margin:  1em auto;
	width: 301px;
}
.instruct{
	margin:  4em auto;
	width: 228px;
}
.cd-horizontal-intro {
  margin: 2em auto;
}

.cd-horizontal-timeline {
  opacity: 0;
  margin: 2em auto;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.cd-horizontal-timeline::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
.cd-horizontal-timeline.loaded {
  /* show the timeline after events position has been set (using JavaScript) */
  opacity: 1;
}
.cd-horizontal-timeline .timeline {
  position: relative;
  height: 100px;
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}
.cd-horizontal-timeline .events-wrapper {
  position: relative;
  height: 100%;
  margin: 0 40px;
  overflow: hidden;
}
.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before {
  /* these are used to create a shadow effect at the sides of the timeline */
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  height: 100%;
  width: 20px;
}
.cd-horizontal-timeline .events-wrapper::before {
  left: 0;
  background-image: -webkit-linear-gradient( left , #c0c0c0, rgba(192, 192, 192, 0));
  background-image: linear-gradient(to right, #c0c0c0, rgba(192, 192, 192, 0));
}
.cd-horizontal-timeline .events-wrapper::after {
  right: 0;
  background-image: -webkit-linear-gradient( right , #c0c0c0, rgba(192, 192, 192, 0));
  background-image: linear-gradient(to left, #c0c0c0, rgba(192, 192, 192, 0));
}
.cd-horizontal-timeline .events {
  /* this is the grey line/timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 75px;
  height: 2px;
  /* width will be set using JavaScript */
  background: #dfdfdf;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
}
.cd-horizontal-timeline .filling-line {
  /* this is used to create the green line filling the timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #C90050;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-horizontal-timeline .events a {
  position: absolute;
  top: -75px;
  z-index: 2;
  text-align: center;
  font-size: 1.3rem;
  padding-top: 88px;
  color: #383838;
  /* fix bug on Safari - text flickering while timeline translates */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.cd-horizontal-timeline .events a::after {
  /* this is used to create the event spot */
  content: '';
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 20px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  border: 2px solid #dfdfdf;
  background-color: #f8f8f8;
  -webkit-transition: background-color 0.3s, border-color 0.3s;
  -moz-transition: background-color 0.3s, border-color 0.3s;
  transition: background-color 0.3s, border-color 0.3s;
}
.no-touch .cd-horizontal-timeline .events a:hover::after {
  background-color: #C90050;
  border-color: #C90050;
}
.cd-horizontal-timeline .events a.selected {
  pointer-events: none;
}
.cd-horizontal-timeline .events a.selected::after {
  background-color: #C90050;
  border-color: #C90050;
}
.cd-horizontal-timeline .events a.older-event::after {
  border-color: #C90050;
}

#ico01{ background: url(../img/ico1928.png) top center no-repeat }
#ico02{ background: url(../img/ico1930.png) top center no-repeat }
#ico03{ background: url(../img/ico1946.png) top center no-repeat }
#ico04{ background: url(../img/ico1954.png) top center no-repeat }
#ico05{ background: url(../img/ico1991.png) top center no-repeat }
#ico06{ background: url(../img/ico1997.png) top center no-repeat }
#ico07{ background: url(../img/ico2005.png) top center no-repeat }
#ico08{ background: url(../img/ico2007.png) top center no-repeat }
#ico09{ background: url(../img/ico2013.png) top center no-repeat }
#ico10{ background: url(../img/ico2016.png) top center no-repeat }

.cd-horizontal-timeline .events a span{ color: transparent }

.flot01{ width:382px; position:absolute; right:0; float:right; z-index:500; padding: 56px 121px 0px 121px}
.flot01 iframe{ height:122px;}
.ima01{ width:382px; position: relative; right:0; float:right;}

.flot02{ width:382px; position:absolute; right:0; float:right; z-index:500; padding: 56px 121px 0px 121px}
.flot02 iframe{ height:122px;}
.ima02{ width:382px; position: relative; right:0; float:right;}

.flot03{ width:382px; position:absolute; right:0; float:right; z-index:500; padding: 56px 121px 0px 121px}
.flot03 iframe{ height:122px;}
.ima03{ width:382px; position: relative; right:0; float:right;}
.flot04{ width:382px; position:absolute; right:0; float:right; z-index:500; padding: 46px 121px 0px 121px}
.flot04 iframe{ height:122px;}
.ima04{ width:382px; position: relative; right:0; float:right;}
.flot05{ width:382px; position:absolute; right:0; float:right; z-index:500; padding: 72px 69px 0px 69px}
.flot05 iframe{ height:139px;}
.ima05{ width:382px; position: relative; right:0; float:right;}
.flot06{ width:380px; position:absolute; right:0; float:right; z-index:500; padding: 73px 48px 0px 48px}
.flot06 iframe{ height:167px;}
.ima06{ width:382px; position: relative; right:0; float:right;}
.flot07{ width:384px; position:absolute; right:0; float:right; z-index:500; padding: 50px 22px 0px 22px}
.flot07 iframe{ height:191px;}
.ima07{ width:382px; position: relative; right:0; float:right;}
.flot08{ width:383px; position:absolute; right:0; float:right; z-index:500; padding: 38px 21px 0px 21px}
.flot08 iframe{ height:196px;}
.ima08{ width:382px; position: relative; right:0; float:right;}
.flot09{ width:378px; position:absolute; right:0; float:right; z-index:500; padding: 50px 6px 0px 6px}
.flot09 iframe{ height:208px;}
.ima09{ width:382px; position: relative; right:0; float:right;}
.flot10{ width:382px; position:absolute; right:0; float:right; z-index:500; padding: 43px 1px 0px 1px}
.flot10 iframe{ height:214px;}
.ima10{ width:382px; position: relative; right:0; float:right;}


@media only screen and (min-width: 1100px) {
  .cd-horizontal-timeline {
    margin: 2em auto;
  }
  .cd-horizontal-timeline::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
}

.cd-timeline-navigation a {
  /* these are the left/right arrows to navigate the timeline */
  position: absolute;
  z-index: 1;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 34px;
  width: 34px;
  border-radius: 50%;
  border: 2px solid #dfdfdf;
  /* replace text with an icon */
  overflow: hidden;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: border-color 0.3s;
  -moz-transition: border-color 0.3s;
  transition: border-color 0.3s;
}
.cd-timeline-navigation a::after {
  /* arrow icon */
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(../img/cd-arrow.svg) no-repeat 0 0;
}
.cd-timeline-navigation a.prev {
  left: 0;
  -webkit-transform: translateY(-50%) rotate(180deg);
  -moz-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  -o-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}
.cd-timeline-navigation a.next {
  right: 0;
}
.no-touch .cd-timeline-navigation a:hover {
  border-color: #C90050;
}
.cd-timeline-navigation a.inactive {
  cursor: not-allowed;
}
.cd-timeline-navigation a.inactive::after {
  background-position: 0 -16px;
}
.no-touch .cd-timeline-navigation a.inactive:hover {
  border-color: #dfdfdf;
}

.cd-horizontal-timeline .events-content {
  position: relative;
  width: 100%;
  margin: 2em 0;
  overflow: hidden;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
  transition: height 0.4s;
}
.cd-horizontal-timeline .events-content li {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  padding: 0 5%;
  opacity: 0;
  -webkit-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
  /* visible event content */
  position: relative;
  z-index: 2;
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
  -webkit-animation-name: cd-enter-right;
  -moz-animation-name: cd-enter-right;
  animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-name: cd-enter-left;
  -moz-animation-name: cd-enter-left;
  animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  animation-direction: reverse;
}
.cd-horizontal-timeline .events-content li > * {
  max-width: 800px;
  margin: 0 auto;
}
.cd-horizontal-timeline .events-content li .c1{ width:45%; float: left; clear:both; position:relative; margin-right:5%;}
.cd-horizontal-timeline .events-content li .c2{ width:50%; float: left; position:relative;}

.cd-horizontal-timeline .events-content h2 {  font-weight: bold; font-size: 2.6rem; font-family: 'Exo', sans-serif; font-weight: 700; line-height: 1.2;}
.cd-horizontal-timeline .events-content em {display: block; font-style: italic; margin: 10px auto;}
.cd-horizontal-timeline .events-content em::before {content: '- ';}
.cd-horizontal-timeline .events-content p {font-size: 1.4rem; color: #555555;}
.cd-horizontal-timeline .events-content em, .cd-horizontal-timeline .events-content p { line-height: 1.6;}

@media only screen and (min-width: 940px) {

}

@media only screen and (min-width: 880px) {

}

@media only screen and (min-width: 768px) {
  .cd-horizontal-timeline .events-content h2 {font-size: 7rem;}
  .cd-horizontal-timeline .events-content em {font-size: 2rem;}
  .cd-horizontal-timeline .events-content p {font-size: 1.8rem;}
  .cd-horizontal-timeline .events-content p.maxi {font-size: 1.6rem;}
}
@media only screen and (max-width: 480px) {
	.logo{width: 60%;}
	.instruct{width: 60%;}
	.flot01{ width:282px; position:absolute; left:0; float:left; z-index:500; padding: 28px 4px 0px 4px}
	.flot01 iframe{ height:157px;}
	.ima01{ width:282px; position: relative; left:0; float:left;}
	.flot02{ width:282px; position:absolute; left:0; float:left; z-index:500; padding: 28px 4px 0px 4px}
	.flot02 iframe{ height:157px;}
	.ima02{ width:282px; position: relative; left:0; float:left;}
	.flot03{ width:282px; position:absolute; left:0; float:left; z-index:500; padding: 40px 80px 0px 80px}
	.flot03 iframe{ height:88px;}
	.ima03{ width:282px; position: relative; left:0; float:left;}
	.flot04{ width:282px; position:absolute; left:0; float:left; z-index:500; padding: 24px 80px 0px 80px}
	.flot04 iframe{ height:103px;}
	.ima04{ width:282px; position: relative; left:0; float:left;}
	.flot05{ width:283px; position:absolute; left:0; float:left; z-index:500; padding: 53px 51px 0px 51px}
	.flot05 iframe{ height:103px;}
	.ima05{ width:282px; position: relative; left:0; float:left;}
	.flot06{ width:283px; position:absolute; left:0; float:left; z-index:500; padding: 55px 37px 0px 37px}
	.flot06 iframe{ height:121px;}
	.ima06{ width:282px; position: relative; left:0; float:left;}
	.flot07{ width:280px; position:absolute; left:0; float:left; z-index:500; padding: 36px 14px 0px 14px}
	.flot07 iframe{ height:142px;}
	.ima07{ width:282px; position: relative; left:0; float:left;}
	.flot08{ width:280px; position:absolute; left:0; float:left; z-index:500; padding: 28px 14px 0px 15px}
	.flot08 iframe{ height:145px;}
	.ima08{ width:282px; position: relative; left:0; float:left;}
	.flot09{ width:286px; position:absolute; left:0; float:left; z-index:500; padding: 37px 7px 0px 7px}
	.flot09 iframe{ height:160px;}
	.ima09{ width:282px; position: relative; left:0; float:left;}
	.flot10{ width:282px; position:absolute; left:0; float:left; z-index:500; padding: 32px 1px 0px 1px}
	.flot10 iframe{ height:159px;}
	.ima10{ width:282px; position: relative; left:0; float:left;}
	.cd-horizontal-timeline .events-wrapper::before {
		background-image: -webkit-linear-gradient( left , #d6d6d6, rgba(214, 214, 214, 0));
		background-image: linear-gradient(to right, #d6d6d6, rgba(214, 214, 214, 0));
	}
	.cd-horizontal-timeline .events-wrapper::after {
		background-image: -webkit-linear-gradient( right , #d6d6d6, rgba(214, 214, 214, 0));
		background-image: linear-gradient(to left, #d6d6d6, rgba(214, 214, 214, 0));
	}
}

@media only screen and (max-width: 880px) {
	.cd-horizontal-timeline .events-content li .c1, .cd-horizontal-timeline .events-content li .c2{ width:100%; float:none; clear:both;}
	.cd-horizontal-timeline .events-content li .c1 img, .cd-horizontal-timeline .events-content li .c1 iframe{ width:100%; float:none;}
}



@-webkit-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -moz-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@-webkit-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}