@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;
	margin: 0;
	padding: 0;
	background: #000;
	overflow: hidden;
}

#iframe_container {
	width: 1024px;
	height: 576px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

#iframe_container iframe {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 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;
	height: 448px;/* TODO may be different */
	background-repeat: no-repeat;
	overflow: hidden;
	pointer-events: none;
}


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

#backgroundImages {
	top: 11px;
	width: 1024px;
	height: 448px;/* TODO may be different */
	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?*/
	width: 1024px;
	/* height: 448px;TODO may be different */
	pointer-events: none;
	overflow: hidden;
}

#interactives img {
	display: block;
	max-height: 448px;
	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: 19px;
	line-height: 24px !important;
	text-align: center !important;
	color: #221e1f;
/*	display: none;*/
	pointer-events: all;
	cursor: pointer;
}

/*VIDEO TOGGLE*/

.videoToggle {
	position: absolute;
	/* left: calc(50% - 28px);
	top: calc(50% - 100px); center in content area, account for text area, top bar, icon height */
	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;
}
.videoToggle .fa.filmstrip-icon:before { /* add custom film icon */
	content: "";
	display: block;
	width: 16px;
	height: 20px;
	background: url(../images/film-icon.png);
	background-size: 16px 20px;
	margin: 4px 6px;
}

/*AUDIO TOGGLE*/

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

.audioToggle .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;*/
	display: inline-block !important;
	font-size: 15px;
	color: #fdd15e;
	line-height: 22px;
	text-align: center;
	width: 19px;
}

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

/*caption is open*/
.parallaxCaptionOpen {
	background-color: #171717;
	pointer-events: all !important;
	cursor: pointer !important;
}

.parallaxCaptionOpen .parrallaxCaptionToggleIcon {
	background-color: #171717;
	height: 20px !important;
}

.parallaxCaptionOpen .parallaxCaptionText {
	/*	moves text to right of toggle icon */
	margin-top: -20px;
	padding: 3px 4px 3px 20px;
}

.parallaxCaptionOpen img {
	/*	if there's an image counteract what we did above that moves text to right of toggle icon */
	margin-bottom: 20px;
}

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




/* ---------------------  CW CSS Additions -------------------------- */

#introImage {
    background-size: cover !important;
    background-position: 0 center;
}

#imageSequence {
	background-size: 100% !important;
}



.illustrationText {
    background-color: rgba(255, 213, 66, 0.5);
    box-shadow: 0px 0px 27px 13px rgba(255, 213, 66, 0.5);
}


#image_tablet {
    left: 427px !important;
}


#image_waist {
    width: 849px;
    top: 114px !important;
    left: 5px !important;
}


#image_height2 {
    left: 515px !important;
    width: 577px;
    top: 9px !important;
}


#image_she-can-move2 {
    left: 244px !important;
    height: 100%;
}



/*FOR SPECIFIC INTERACTIVES*/

/* -- Lewis and Clark */
#interactive-lewis-clark #scrubberLine {
	padding-left: 45px;
	padding-right: 45px;
}

/* -- Vietnam Decide - load in quiz.css */