.mobile body {
  overflow: hidden;
}


#wrapper {
  position: absolute;
  z-index: 4;
  width: 100%;
}

.mobile #wrapper {
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

#scroller {
  width: 100%;
}

.mobile #scroller {
	min-height: 100%;
	padding-top:1px;
	margin-top:-1px;
}

#content {
	background-color: #7F7E83;
}

#content.aboutPage #aboutPage {
	display:block !important;
}

#content.aboutPage #projectList {
	display:none;
}

#content.aboutPage #project {
	display:none;
}

#content.aboutPage #montageVideo {
	display:none;
}

#content.montageVideo #montageVideo {
	display:block !important;
	margin-top:0;
}

#content.montageVideo #projectList {
	display:none;
}

#content.montageVideo #project {
	display:none;
}

#content.montageVideo #aboutPage {
	display:none;
}


#content.project #project {
	display:block !important;
	/*
	margin:0;
	padding:0;
	*/
	/* 1px added to force background to render across the bottom margin when needed */
	margin: 0 0 -1px 0;
	padding: 0 0 1px 0;
}


#content.project #projectList {
	display:none;
}

#content.project #montageVideo {
	display:none;
}


#content.project #aboutPage {
	display:none;
}

#content.projectList #projectList {
	display:block !important;
}

#content.projectList #project {
	display:none;
}

#content.projectList #project {
	display:none;
}

#content.projectList #aboutPage {
	display:none;
}


#content.aboutPage,
#content.montageVideo {
	background-color: white;
}


#content.aboutPage,
#content.montageVideo {
   /* min-height: 100%;*/
    /*top: 7.375em;
    top: 3.6875em;*/
}



.foreground {
	position: fixed;
	bottom: 10%;
    display: block;
    left: 20%;
    right: 20%;
    top: 10%;
    
}

.videoOverlay {
	position:absolute;
    z-index: 2;
    top:0;
    left:0;
}

.bx-clone {
animation: none !important;
}

#foregroundClicker {
	z-index: -1;
	cursor: pointer;
}

#montageVideo {
	overflow: hidden;
}

	#montageVideo .videoContainer {
		overflow: hidden;
		position:relative;
	}

	#montageVideo .box{
		height: 100%;
		top: 0;
		position: absolute;
		width: 100%;
	}

	#montageVideo .beforeBox{
		content: "";
		display: block;
		padding-top: 56.25%;
	}

	#montageVideo #montageVideoFrame {
		position:  absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}

	#scroller .playVideo {
		position:fixed;
		top:1em;
		right: 1em;
	}

.overlayContainer{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.overlayContainer li {
	position: relative;
}

.overlayContainer li iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%
}

.overlayContainer .imageContainer {
	display:block;
	width:100%;
	height:100%;
    background-color: #444;
}

.overlayContainer {
	background-color: #444;
}

	
	.videoContainer #extra1 {
		position:absolute;
		top: 0;
		left:0;
		width: 38%;
		height:100%;
	}
	
	.videoContainer #extra2 {
		position:absolute;
		top: 0;
		left:38%;
		width: 24%;
		height:37%;
	}
	
	.videoContainer #extra3 {
		position:absolute;
		top: 0;
		left:62%;
		width: 38%;
		height:100%;
	}
	
	.videoContainer #extra4 {
		position:absolute;
		top: 63%;
		left:38%;
		width: 24%;
		height: 37%;
	}

	
@media screen and (max-width: 375px) {
	
	.overlayContainer .extraOverlay {
		display:block;
		z-index:2;
	}
	
	.overlayContainer .videoOverlay {
		display:none !important;
	}
	
	.overlayContainer .prev, .overlayContainer .next {
		width: 18%;
		top:1em;

	}
	
	/*.overlayContainer .playButton {
		display:none !important;
	}*/

}

@media screen and (min-width: 376px) {
	.overlayContainer  .extraOverlay {
		display:none;
	}
	
	.overlayContainer .videoOverlay {
		display:block;
	}
	.overlayContainer .prev, .overlayContainer .next {
		width: 15%;
	}
}
	
	
@media screen and (max-width: 299px) {
	
	#montageVideo .extraOverlay {
		display:block;
		z-index:2;
	}
	
	#montageVideo .videoOverlay {
		display:none !important;
	}

}

@media screen and (min-width: 300px) {
	#montageVideo  .extraOverlay {
		display:none;
	}
	
	#montageVideo .videoOverlay {
		display:block;
	}
}
	
@media screen and (max-width: 327px) {
	
	#project .videoContainer .extraOverlay {
		display:block;
		z-index:2;
	}
	
	#project .videoContainer .videoOverlay {
		display:none !important;
	}

}

@media screen and (min-width: 328px) {
	#project .videoContainer .extraOverlay {
		display:none;
	}
	
	#project .videoContainer .videoOverlay {
		display:block;
	}
}



#content {
	padding-top: 1px;
	margin-top:-1px;
}