@charset "utf-8";

/*
@font-face {
	font-family: 'bpreplaybold';
	src: url('../fonts/bpreplayextendedbold-webfont.eot');
	src: url('../fonts/bpreplayextendedbold-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/bpreplayextendedbold-webfont.woff') format('woff'),
		url('../fonts/bpreplayextendedbold-webfont.ttf') format('truetype'),
		url('../fonts/bpreplayextendedbold-webfont.svg#bpreplaybold') format('svg');
	font-weight: normal;
	font-style: normal;
}
*/

@import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900');

/*
thin 100
extra-light 200
light 300
regular 400
medium 500
semi-bold 600
bold 700
extra-bold 800
black 900
*/

html,
body {
	font-family: 'Catamaran', sans-serif;
	background-color: black;
	margin: 0;
	padding: 0;
}

div {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

h1,
h2,
p {
	margin: 0;
	padding: 0;
}

#content,
#imageSequence,
#backgroundImages,
#intro,
#introImage,
#dragbox,
#interactives,
#galleries,
#parallax {
	width: 1024px;
	height: 576px;
}

#controls,
#imageSequence,
#backgroundImages,
#intro,
#introImage,
#dragbox,
#interactives,
#galleries,
#parallax,
.parallaxPlane {
	position: absolute;
}

#parallax {
	top: 11px;
	height: 448px;
	overflow: hidden;
}

img,
#imageSequence {
	position: absolute;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	pointer-events: none;
}


/*MAIN CONTENT HOLDER*/

#content {
	position: relative;
	background-color: #fdd15e;
	/*	background-image: url(../images_liberty/background.jpg);*/
	margin: auto;
	overflow: hidden;
	/*
	-webkit-transform: scale(1.87);
	-moz-transform: scale(1.87);
	-ms-transform: scale(1.87);
	-o-transform: scale(1.87);
	transform: scale(1.87);
*/
}


/*INTRO SCREEN*/

#intro {
	overflow: hidden;
}

#introImage {
	background-size: 100% 100%;
	background-repeat: no-repeat;
}


/*the color bar that holds the content*/

#introBar {
	position: absolute;
	top: 184px;
	height: 275px;
	width: 100%;
	background-color: #fdd15e;
	/*	background-image: url(../images_liberty/background.jpg);*/
	padding: 43px 70px 0px 70px;
}

#introHeader {
	font-weight: 300;
	/*Catamaran Light*/
	font-size: 27px;
	line-height: 27px;
}

#introTitle {
	font-weight: 700;
	/*Catamaran Bold*/
	font-size: 65px;
	line-height: 65px;
}

#introBody {
	font-weight: 400;
	/*Catamaran Regular*/
	font-size: 19px;
}


/*transition out animation*/

.introBarAnimation {
	top: 461px !important;
	/*	opacity: 0;*/
	/*transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];*/
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.introBarAnimationIn {
	top: 184px !important;
	opacity: 1;
	/*transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];*/
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}


/* IMAGE SEQUENCE */


/*the container that holds the image sequence*/

#imageSequence {
	top: 11px;
	width: 1024px;
	background-repeat: no-repeat;
	overflow: hidden;
	pointer-events: none;
}


/*
#imageSequence img {
	top: 0px;
	left: 0px;
}
*/

#backgroundImages {
	top: 11px;
	width: 1024px;
	overflow: hidden;
	pointer-events: none;
}

#backgroundImages img {
	position: absolute;
}


/* SCRUBBER */

#controls {
	/*	display: none;*/
}

#scrubberLine {
	position: absolute;
	top: 458px;
	width: 1024px;
	height: 6px;
	background-color: #221e1f;
	padding-left: 50px;
	padding-right: 50px;
}

#handle {
	position: absolute;
	width: 0px;
	background-color: red;
	pointer-events: all;
	cursor: pointer;
	display: none;
}

#handleShape {
	height: 30px;
	margin-top: -12px;
	background-color: #fdd15e;
	border: 4px solid #221e1f;
	font-size: 19px;
	font-weight: 800;
	/*Catamaran Extra-Bold*/
	line-height: 26px;
	text-align: center;
	color: #221e1f;
}

#handleShape:after {
	position: absolute;
	content: "";
	display: block;
	width: 54px;
	height: 50px;
	top: -22px;
	left: -27px;
	background-color: rgba(255, 0, 0, 0);
}


/*for font-awesome > added by js*/

#handleShape i {
	padding-left: 2px;
}

.handleIntro {
	width: 80px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	margin-left: -40px;
}

.handleRound {
	width: 30px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	margin-left: -15px;
}

#tics {
	position: absolute;
	top: -1px;
	display: none;
}


/*the area on the scrubber line where an interactive is up*/

.interactiveZone {
	position: absolute !important;
	top: 6px;
	/*height of scrubber line*/
	/*	background-color: red;*/
	height: 10px;
	width: 20px;
}


/*the tick within interactiveZone (100% would take up full width)*/

.interactiveTic {
	position: relative;
	background-color: #221e1f;
	height: 10px;
	width: 6px;
	margin: 0 auto;
}


/*parallax based tic*/

.ticCentered {
	position: relative;
	background-color: #221e1f;
	height: 10px;
	width: 6px;
	margin-left: -3px;
}


/*INTERACTIVE ELEMENTS*/


/*the container that holds all of the interactives*/

#interactives {
	top: 11px;
	/*should always be the same as #imageSequence?*/
	pointer-events: none;
	overflow: hidden;
}


/*ROUNDED CORNER TEXT BOX*/

.textbox {
	position: absolute;
	background: rgba(255, 255, 255, 0.5);
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 2px solid #999999;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 20px;
	font-size: 20px;
	line-height: 25px;
	display: none;
}

.textbox h1 {
	font-size: 30px;
	margin: 0px;
	padding: 0px 0px 10px 0px;
}


/*ROUND FACTOID*/

.factoid {
	position: absolute;
	background: rgba(255, 255, 255, 0.5);
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 2px solid #999999;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	padding: 125px 0px 0px 65px;
	display: none;
}

.factoid h1 {
	font-size: 20px;
	margin: 0px;
	padding: 0px 0px 5px 0px;
}


/*ILLUSTRATION WITH TEXT AT BOTTOM*/

.illustration {
	display: none;
}

.illustration img {
	position: absolute;
}

.illustrationText {
	position: absolute;
	top: 480px;
	padding: 0px 75px 0px 50px;
/*	font-size: 19px;*/
	font-size: 14px !important;
	font-weight: 400;
/*	line-height: 25px;*/
	line-height: 22px !important;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
/*	height: 66px;*/
/*	background-color: red;*/
	overflow: hidden;
}

/*PARRALAX TEXT AT BOTTOM*/

.bottomText {
	position: absolute;
	top: 480px;
	width: 1024px;
	overflow: hidden;
}

.bottomTextContent {
	position: absolute;
	padding: 0px 75px 0px 50px;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*title*/
.illustrationText span,
.bottomText span {
/*	font-size: 27px;*/
	font-size: 21px !important;
	font-weight: 700;
	padding-right: 10px !important;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.bottomTextToggle {
	position: absolute;
	background-color: #fdd15e;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 4px solid #221e1f;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	width: 30px;
	height: 30px;
/*
	top: 526px;
*/
	left: 984px;
	top: 35px;
	font-size: 20px;
	line-height: 28px !important;
	text-align: center !important;
	color: #221e1f;
/*	display: none;*/
	pointer-events: all;
	cursor: pointer;
}

/*VIDEO TOGGLE*/

.videoToggle {
	position: absolute;
	left: 13px;
	width: 28px;
	height: 28px;
	background-color: #fdd15e;
	pointer-events: all;
	cursor: pointer;
	display: none;
}

.videoToggle .fa {
	display: inline-block;
	width: 28px;
	font-size: 20px;
	color: #221e1f;
	line-height: 28px;
	text-align: center;
}

/*PHOTO GALLERY*/

#galleries {
	display: none;
}

.gallery {
	position: absolute;
	width: 1024px;
	height: 576px;
	display: none;
}

.gallerySlide {
	position: absolute;
	width: 1024px;
	height: 576px;
}

.galleryImage {
	position: absolute;
	top: 20px;
	width: 1024px;
	height: 576px;
}

.galleryText {
	position: absolute;
	top: 625px;
	padding: 0px 50px;
	font-size: 19px;
	font-weight: 400;
	line-height: 30px;
}


/*title*/

.galleryText span {
	font-size: 27px;
	font-weight: 700;
	padding-right: 20px;
}

.galleryNav {
	position: absolute;
	top: 569px;
	left: 830px;
}

.galleryNavBox {
	position: relative;
	width: 18px;
	height: 14px;
	margin-right: 8px;
	float: left;
	box-shadow: 2px 2px 5px #000000;
	cursor: pointer;
}

.galleryNavBoxUnselected {
	border: 4px solid white;
}

.galleryNavBoxSelected {
	background-color: white;
}

.galleryCloseButton {
	position: absolute;
	top: 38px;
	left: 974px;
	font-size: 30px !important;
	color: white;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
	cursor: pointer;
}


/*VIDEO*/

video {
	display: block;
}

.video {
	position: absolute;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/*	border: 2px solid #999999;*/
	/*	padding: 20px;*/
	/*	display: none;*/
	pointer-events: all !important;
}

.video h1 {
	font-size: 30px;
	margin: 0px;
	padding: 0px 0px 10px 0px;
}

/*currently used in parallax interactives*/
.videoDisposable {
	background: #221e1f;
	border: 4px solid #221e1f;
}


/*PARALLAX*/

.parallaxCaption {
	position: absolute !important;
	width: 213px;
	background-color: #171717;
	font-size: 12px;
	line-height: 15px;
	color: white;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
}

.parallaxCaption .fa {
	display: none !important;
}

.parallaxCaption img {
	position: relative;
}

.parallaxCaption div {
	position: relative;
	padding: 10px;
}

/*caption toggle icon*/
.parrallaxCaptionToggle {
	width: 20px !important;
	height: 20px !important;
	padding: 0px !important;
	pointer-events: all !important;
	cursor: pointer !important;
}
.parrallaxCaptionToggle .fa {
	display: inline-block !important;
	font-size: 15px;
	color: #fdd15e;
	line-height: 22px;
	text-align: center;
	width: 19px;
}

.parrallaxCaptionToggle img {
	display: none;
}

.parrallaxCaptionToggle div {
	display: none;
}


.clickableImage {
	pointer-events: all !important;
	cursor: pointer;
}