@charset "utf-8";

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

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.4);
	}
	100% {
		box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
	}
}

/*
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: 0px;
	height: 460px;
	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: #f8b600;
	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: #f8b600;
	padding: 43px 70px 0px 70px;
	color: #000;
}

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

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

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


/*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: 0px;
	width: 1024px;
	height: 460px;/* TODO may be different */
	background-repeat: no-repeat;
	overflow: hidden;
	pointer-events: none;
}


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

#backgroundImages {
	top: 0px;
	width: 1024px;
	height: 460px;/* 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: #000;
	padding-left: 50px;
	padding-right: 50px;
}

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

#handleShape {
	height: 30px;
	margin-top: -12px;
	background-color: #f8b600;
	border:3px solid #000;
	font-size: 19px;
	font-weight: 800;
	/*Catamaran Extra-Bold*/
	line-height: 26px;
	text-align: center;
	color: #000;
	animation: pulse 2s 3;
}

#handleShape:hover {
	background: #000;
	color: #f8b600;
}

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

#handleShape:hover:after i {
	color: #fff;
}

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

#handleShape.handleRound {
	width: 30px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	margin-left: -15px;
	font-size: 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: #000;
	height: 10px;
	width: 3px;
	margin: 0 auto;
}


/*parallax based tic*/

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


/*INTERACTIVE ELEMENTS*/


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

#interactives {
	top: 0px;
	/*should always be the same as #imageSequence?*/
	width: 1024px;
	/* height: 460px;TODO may be different */
	pointer-events: none;
	overflow: hidden;
}

#interactives img {
	display: block;
	max-height: 460px;
	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: 490px;
	width: 1024px;
	overflow: hidden;
}

.bottomTextContent {
	position: absolute;
	padding: 0px 75px 0px 50px;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #000;
}

/*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;
	color: #000;
}

.bottomTextToggle {
	position: absolute;
	background-color: #f8b600;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 3px solid #000;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	animation: pulse 2s 3;
	left: 984px;
	top: 25px;
	font-size: 15px;
	line-height: 24px !important;
	text-align: center !important;
	color: #000;
	pointer-events: all;
	cursor: pointer;
}

.bottomTextToggle:hover {
	background: #000;
	color: #f8b600;
}

/*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: 30px;
	background-color: #fff;
	pointer-events: all;
	cursor: pointer;
	display: none;
	border-radius: 5px;
}

.videoToggle .fa {
	display: inline-block;
	width: 28px;
	font-size: 20px;
	color: #000;
	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: 30px;
	height: 30px;
	background-color: #f8b600;
	pointer-events: all;
	cursor: pointer;
	display: none;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 3px solid #000;
	animation: pulse 2s 3;
	font-size: 13px;
	line-height: 28px;
	text-align: center;
	color: #000;
}
.audioToggle:hover {
	background-color: #000;
	color: #f8b600;
}


/*GALLERY*/

.parallaxGalleryButton {
	position: absolute !important;
	width: 30px;
	height: 30px;
	background-color: #f8b600;
	pointer-events: all;
	cursor: pointer;
	display: none;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 3px solid #000;
	animation: pulse 2s 3;
	font-size: 13px;
	line-height: 27px;
	text-align: center;
	color: #000;
}

.parallaxGalleryButton:hover {
	color: #f8b600;
	background-color: #000;
}

#galleries, .gallery  {
	width: 830px;
	height: 474px;
}

#galleries {
    display: none;
	z-index: 200;
}

.gallery {
	border: 15px solid #000;
    position: absolute;
	left: 97px;
	top: 63px;
	background-color: #000;
    display: none;
}

.gallerySlide {
    position: absolute;
	width: 800px;
	height: 423px;
}

.galleryImage {
    position: absolute;
    top: 0px;
	width: 800px;
	height: 352px;
}

.galleryText {
    position: absolute;
    top: 367px;
    padding: 0px 200px 0 0;
    font-size: 19px;
    font-weight: 400;
    line-height: 24px;
    color: #f8b600;
}

/*adjust padding for galleries with a single image */
#gallery3 .galleryText, #gallery5 .galleryText, #gallery7 .galleryText, #gallery9 .galleryText, #galleryEleven .galleryText {
	padding-right: 0;
}

.galleryText span {
    font-size: 24px;
    font-weight: 700;
}

.galleryNav {
    position: absolute;
    top: 370px;
    left: 600px;
	width: 200px;
	text-align: right;
}

/*hide boxes for galleries with a single image */
#gallery3 .galleryNav, #gallery5 .galleryNav, #gallery7 .galleryNav, #gallery9 .galleryNav, #galleryEleven .galleryNav {
	display: none;
}

.galleryNavBox {
    position: relative;
    width: 22px;
    height: 22px;
	border-radius: 100%;
    margin-left: 8px;
    display: inline-block;
    /*box-shadow: 2px 2px 5px #000000;*/
    cursor: pointer;
}

.galleryNavBox:hover {
	background-color: #f8b600;
}

.galleryNavBoxUnselected {
    border: 3px solid #f8b600;
}

.galleryNavBoxSelected {
    background-color: #f8b600;
}

.galleryCloseButton {
    position: absolute;
    top: -30px;
    left: 800px;
    cursor: pointer;
	width: 30px;
	height: 30px;
	padding: 0px;
	background-color: #f8b600;
	color: #000;
	border: 3px solid #000;
	border-radius: 100%;
	text-align: center;
}
.galleryCloseButton:hover {
	background-color: #000;
	color: #f8b600;
}
.galleryCloseButton .fa {
	font-size: 14px;
	vertical-align: top;
	margin-top: 5px;
	width: 100%;
}


/*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;
}


/* CAPTIONS */

/* caption box */
.parallaxCaption {
	position: absolute !important;
	background-color: #f8b600;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
}

/*caption icon*/
.parrallaxCaptionToggle {
	width: 30px !important;
	height: 30px !important;
	padding: 0px !important;
	pointer-events: all !important;
	cursor: pointer !important;
	border: 3px solid #000;
	border-radius: 100%;
	animation: pulse 2s 3;
}

.parallaxCaption .fa {
	width: 100%;
	height: 30px;
	font-size: 13px;
	color: #000;
	line-height: 24px;
	text-align: center;
	position: relative;
	z-index: 100;
}

.parallaxCaption:hover {
	background-color: #000;
	cursor: pointer !important;
}
.parallaxCaption:hover .fa {
	color: #f8b600;
}

.parallaxCaption img {
	position: relative;
}

.parallaxCaption div {
	position: relative;
}

.parrallaxCaptionToggle img {
	display: none;
}

.parrallaxCaptionToggle div {
	display: none;
}

/*caption is open*/
.parallaxCaptionOpen {
	background-color: #000;
	pointer-events: all !important;
	cursor: pointer !important;
	width: 30px !important;
	height: 30px !important;
	animation: none;
	border-radius: 100%;
}

.parallaxCaptionOpen .fa {
	animation: none;
	color: #f8b600;
}

.parallaxCaptionOpen .parallaxCaptionText {
	margin-top: -30px;
    font-family: 'Catamaran', sans-serif;
	font-size: 13px;
	line-height: 1.4;
    font-weight: 500;
	padding: 15px 15px 15px 30px;
	width: 240px;
	color: #fff;
	background: #000;
	position: absolute;
	z-index: 90;
	border-radius: 5px;
}

.parallaxCaptionOpen img {
	width: 100%;
	height: auto;
	margin-bottom: 7px;
}

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