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

html {
	font-size: 62.5%;
	background: url("background.jpg") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
  	background-size: cover;
}

@font-face {
    font-family: norwester;
    src: url(norwester.otf);
}
 
@font-face {
    font-family: ChaparralRegular;
    src: url(ChaparralRegular.otf);
}
 

body {
  	font-size: 1.6rem;
  	font-family: "norwester", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  	color: #383838;
}


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


.topbar ul {
    list-style-type: none;
    margin: 0;
    padding-top: 50px;
    overflow: hidden;
    top: 0;
    z-index: 3;
}


li {
    float: left;
}


.menu li a {
    display: block;
    color: #383838;
    text-align: center;
    padding: 14px 12px;
    text-decoration: none;
}


.menu li a:hover {
    background-color: #ffffff;
}


.logo {
	float: left;
	margin-top: 10px;
	margin-left:20px;
}
 
 
.footer {
    margin-right: 20px;
    margin-bottom: 20px;
    float: right;
    font-size: .75em;
}
 
 
p {
 	font-family: ChaparralRegular,'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
 	font-size: 1.4rem;
 	color: #383838;
 	line-height: 130%;
}


h1 {
  	line-height: 120%;
	font-size: 2.9rem;
}


#story {
     max-width: 400px;
     display: none;
}


#about {
     max-width: 400px;
     display: none;
}


#extras {
     max-width: 800px;
     display: none;
}


.lightboxpics {
     width: 100%;
}



span.icon {
    display: inline-block;
    vertical-align: middle;
    height: 78px;
    width: 80px;
    background-image: url('../img/star.png');
    background-repeat: no-repeat;
    float: left;
}


span.icon {
    display: inline-block;
    vertical-align: middle;
 	height: 78px;
    width: 80px;
    background-repeat: no-repeat;
    float: left;
}

/* unvisited link */
.paragraphlinks:link {
    color: #7e0a2b;
}

/* visited link */
.paragraphlinks:visited {
    color: #959595;
}

/* mouse over link */
.paragraphlinks:hover {
    color: #ffc203;
}

/* selected link */
.paragraphlinks:active {
    color: #7e0a2b;
}

.tinywords {
font-size: .5em;
}

@media only screen and (max-width: 768px) {

	span.icon {
    	height: 50px;
    	width: 51px;
    	background-image: url('../img/star_smaller.png');
	}
}




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

Timeline

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


.cd-horizontal-timeline {
  	opacity: 0;
  	margin: 2em auto;
  	-webkit-transition: opacity 0.2s;
  	-moz-transition: opacity 0.2s;
  	transition: opacity 0.2s;
  	margin-top: 60px;
}

.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 , #f8f8f8, rgba(248, 248, 248, 0));
  	background-image: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0));
}
.cd-horizontal-timeline .events-wrapper::after {
  	right: 0;
  	background-image: -webkit-linear-gradient( right , #f8f8f8, rgba(248, 248, 248, 0));
  	background-image: linear-gradient(to left, #f8f8f8, rgba(248, 248, 248, 0));
}*/

.cd-horizontal-timeline .events {
  	/* this is the yellow line in the timeline */
  	position: absolute;
  	z-index: 1;
  	left: 0;
  	top: 49px;
  	height: 3px;
  	/* width is set using JavaScript */
  	background: #ffc203;
  	-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 black line filling the timeline */
  	position: absolute;
  	z-index: 1;
  	left: 0;
  	top: 0;
  	height: 100%;
  	width: 100%;
  	background-color: #333333;
  	-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;
  	bottom: 0;
  	z-index: 2;
  	text-align: center;
  	font-size: 1.3rem;
  	padding-bottom: 15px;
  	color: #333333;
  	/* 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: -5px;
  	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 {
  	border-color: #333333;
}

.cd-horizontal-timeline .events a.selected {
 	background-image: url("square.png");
 	height: 22px; 
 	width: 50px;
 	line-height: 0; 
 	font-size: 0;
 	color: transparent; 
 	margin-bottom: 10px;
 	pointer-events: none;
}

.cd-horizontal-timeline .events a.selected::after {
  	border-color: transparent;
  	background-color: transparent;
}

.cd-horizontal-timeline .events a.older-event::after {
  	border-color: transparent;
}

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

.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: 3px solid #383838;
  	/* 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_black.png) 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: #ffc203;
}

.cd-timeline-navigation a.inactive {
  	cursor: not-allowed;
  	border-color: #959595;
}

.cd-timeline-navigation a.inactive::after {
  	background: url(../img/cd-arrow_grey.png) no-repeat 0 0;
  	border-color: #959595;
}

.no-touch .cd-timeline-navigation a.inactive:hover {
  	border-color: #333333;
}

.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 12%;
  	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;
}


@media only screen and (max-width: 1102px) {

.cd-horizontal-timeline .events-content li {
   	padding: 0 5%;
  }
}




.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 h2 {
  	font-weight: bold;
  	font-size: 2.6rem;
  	font-family: "norwester", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  	font-weight: 700;  
}

.cd-horizontal-timeline .events-content em {
  	display: block;
  	margin: 5px auto 20px;
}


.cd-horizontal-timeline .events-content p {
  	font-size: 1.4rem;
  	color: #383838;
  	font-family: ChaparralRegular,'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
}

.cd-horizontal-timeline .events-content em, .cd-horizontal-timeline .events-content p {
  	line-height: 120%;
}




@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;
    	line-height: 120%;
	}
	


}


@-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%);
  	}
}


@media only screen and (min-width: 904px) {
	.fluid-video {
     	width: 800px;
    	 height: 450px;
 	}
 
 
	.fluid-video > iframe {
   		width: 800px;
   		height: 450px;
 	} 
}


@media only screen and (min-width: 904px) {
	.fluid-video-intro {
     	width: 640px;
     	height: 360px;
 	}
 
 
	.fluid-video-intro > iframe {
   		width: 640px;
   		height: 360px;
 	}
}


@media only screen and (max-width: 903px) {

	.fluid-video-intro {
     	height: 0;
     	padding-bottom: 56.3%;
     	position: relative;
 	}
 
 
	.fluid-video-intro > iframe {
     	width: 100%;
     	height: 100%;
     	position: absolute;
     	top: 0;
     	left: 0;
 	}
}


@media only screen and (max-width: 903px) {

	.fluid-video {
     	height: 0;
     	padding-bottom: 56.3%;
     	position: relative;
 	}
 
	.fluid-video > iframe {
     	width: 100%;
     	height: 100%;
     	position: absolute;
     	top: 0;
     	left: 0;
 	}
} 

.events-content li > *.whitebg {
background: rgba(255, 255, 255, 0.87);
padding: 20px;
border-radius: 8px;
}



@media only screen and (min-width: 904px) {
	.embedded-video {
     	width: 750px;
    	 height: 422px;
 	}
 
 
	.embedded-video > iframe {
   		width: 761px;
   		height: 428px;
 	} 
}


@media only screen and (max-width: 903px) {

	.embedded-video {
     	height: 0;
     	padding-bottom: 56.3%;
     	position: relative;
 	}
 
	.embedded-video > iframe {
     	width: 100%;
     	height: 100%;
     	position: absolute;
     	top: 0;
     	left: 0;
 	}
} 

.navigationnote {
	font-family: ChaparralRegular,'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
	float: right;
	padding: 10px;
	opacity: 0.8;
	margin-right: 50px;
	color: #383838;	
	position: relative;
    background: #FFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    width: 225px; 
    height: 35px
}

/*.navigationnote:after {
  content: "";
position: absolute;
bottom: -10px;
left: 175px;
border-style: solid;
border-width: 10px 10px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}*/


.images > img {
float: left;
width: 32%; 
margin-right: 1%; 
margin-bottom: 0.5em;
}

p.clear {
    clear: both;
}