/*
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////  Base HTML and Containers  ////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
*/


html, body { 
	width: 100%; 
	height: auto;
	margin: 0;
    padding: 0;
	color:#000000;
	background-color: #fff;
}

.introText { 
	font-family:  "Bebas Neue", sans-serif;
	font-size: 65px;
	line-height:60px;
	font-weight:400;
	padding-top:0px;
	letter-spacing: -1px;
	color:#fff;
	background-color: #000;
	margin-right: auto;
	display: inline;
}

.projectText { 
	font-family: "Barlow Condensed", sans-serif;
	font-size: 24px;
	line-height:26px;
	font-weight:300;
	letter-spacing: 0px;
	color:#aaa;
	background-color: #fff;
	margin-right: auto;
	display: table;
	margin-top: -40px;
}

.redText { 
	padding-right:30px;
	padding-top:80px;
	text-align: right;
	float:right;
	font-family: "Bebas Neue", sans-serif;
	font-size: 25px;
	font-style:normal;
	line-height:35px;
	font-weight:400;
	color:#f92f4b;
}

.redText a:hover  { 
	color:#f92f4b;
}

.redText a:active { 
	color:#f92f4b;
}

.redText a:visited  { 
	color:#f92f4b;
}

.redText a:link  { 
	color:#f92f4b;
}


h1 { 
	font-family: "Bebas Neue", sans-serif;
	font-size: 95px;
	line-height:95px;
	font-weight:400;
	padding-top: 10px;
	letter-spacing: -3px;
	color:#fff;
	background-color: #000;
	margin-right: auto;
	display: table;
}

h2 { 
	font-family: "Bebas Neue", sans-serif;
	font-size: 70px;
	line-height:60px;
	padding-top: 10px;
	font-weight:400;
	color:#000;
	background-color: #fff;
	margin-right: auto;
	display: table;
}

hr {
	margin-top:15px;
	margin-bottom:10px;
	border-top: 1px solid #ccc;
}





.indexContainerOutside { 
	width: 100%;
	height: auto;
	padding-top:0px;
	margin-top: 0px;
	margin-left: 0px;
	padding-left: 0px;
	background-color: #000;
}

.containerOutside { 
	width: 100%;
	height: auto;
	padding-top:0px;
	margin-top: 0px;
	margin-left: 0px;
	padding-left: 0px;
	background-color: #000;
}

.mobileContainerOutside { 
	width: 100%;
	height: auto;
	padding-top:0px;
	margin-top: 0px;
	margin-left: 0px;
	padding-left: 0px;
	background-color: #ff9900;
	display: none;
}


.containerInside { 
	width: 80%;
	height: auto;
	background-color: #fff;
	padding-top:0px;
	margin-top: 0px;
	margin-left:15%;
	margin-right:15%;
	max-width: 1100px;
	overflow:hidden;
}


.logoContainer { 
	padding-top:20px;
	width: 120px; 
	height: 120px;
	margin-left:5%;
}

.buttonContainer { 
	margin-top:10px;
	padding-top:10px;
	width: 222px; 
	height: 72px;
	margin-left:40px;
	padding-left:10px;
	background-color: rgba(255, 255, 255, 0.8);
	z-index:505;
	border-radius:10px;
	overflow:hidden;
	position:fixed;
}


.legalTxt { 
	font-family: "Barlow Condensed", sans-serif;
	font-weight:400;
	letter-spacing: 0px;
	color:#aaa;
	font-size: 15px;
	text-align: center;
}


.textContainer { 
	width: 65%;
	height: auto;
	margin-left:5%;
	margin-top:200px;
	margin-bottom:80px;
    margin-right: auto;
}


.workTextContainer { 
	width: 60%;
	height: auto;
	margin-left:5%;
	margin-top:200px;
	margin-bottom:80px;
    margin-right: auto;
}

/*
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////  THUMB - Base  ///////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
*/


.thumbContainer { 
	width: 100%; 
	position: relative; 
	text-align: center;
	margin-bottom:0px;
	padding-bottom:0px;
	margin-top:0px;
	padding-top:0px;
}



.thumbText { 
	font-family:"Bebas Neue", sans-serif;
	font-style:normal;
	text-align:left;
	font-weight:100;
	line-height:35px;
	font-size: 25px;
	color:#99A3B0;
	background-color: #fff;
	display: table;
}


.thumb {
	width: 100%;
	height: auto;
	padding-right:0px;
	padding-left:0px;
	padding-bottom:0px;
	margin-top:0px;
	padding-top:0px;
	background-color:#000000;
}



/*
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////  THUMB - Full  ///////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
*/


.thumbBoxFull {
	width: 90%;
	height:90%;
	margin-bottom:0px;
	display:inline-block;
	overflow:hidden;
	z-index: 200;
}

.thumbOverlayFull {
  position: absolute;
  top:0px;
  background-image: url("../images/coverFull.png");
  background-repeat: no-repeat;
  background-size:contain;
  width: 90%;
  height:100%;
  transition: .4s ease;
}


/*
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////  THUMB - Half  ///////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
*/


.thumbBoxHalvesLeft {
	width: 45%; 
	height: auto;
	margin-left: 10px;
	margin-bottom:20px;
	display:inline-block;
	overflow:hidden;
	z-index: 205;
}

.thumbBoxHalvesRight {
	width: 45%; 
	height: auto;
	margin-right:10px;
	margin-bottom:20px;
	display:inline-block;
	overflow:hidden;
	z-index: 205;
}

.thumbOverlayHalf {
  position: absolute;
  top:0px;
  background-image: url("../images/coverHalf.png");
  background-repeat: no-repeat;
  background-size:contain;
  width: 45%;
  height:100%;
  transition: .4s ease;
}

/*
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////  THUMB - Thirds  //////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
*/


.thumbBoxThirdsLeft {
	width: 30%; 
	height: auto;
	margin-left: 10px;
	margin-bottom:20px;
	display:inline-block;
	overflow:hidden;
	z-index: 205;
}

.thumbBoxThirdsMiddle {
	width: 30%; 
	height: auto;
	margin-left: 0px;
	margin-bottom:20px;
	display:inline-block;
	overflow:hidden;
	z-index: 205;
}

.thumbBoxThirdsRight {
	width: 30%; 
	height: auto;
	margin-right:10px;
	margin-bottom:20px;
	display:inline-block;
	overflow:hidden;
	z-index: 205;
}


.thumbOverlayThirds {
  position: absolute;
  top:0px;
  background-image: url("../images/coverThirds.png");
  background-repeat: no-repeat;
  background-size:contain;
  width: 30%;
  height:100%;
  transition: .4s ease;
}



/*
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////  THUMB - Two Thirds  ////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
*/


.thumbBoxTwoThirdsLeft {
	width: 60%; 
	height: auto;
	margin-left: 10px;
	margin-bottom:20px;
	display:inline-block;
	overflow:hidden;
	z-index: 205;
}


.thumbBoxTwoThirdsRight {
	width: 30%; 
	height: auto;
	margin-right:10px;
	margin-bottom:20px;
	display:inline-block;
	overflow:hidden;
	z-index: 205;
}



.thumbOverlayTwoThirdsLeft {
  position: absolute;
  top:0px;
  background-image: url("../images/coverTwoThirdsLeft.png");
  background-repeat: no-repeat;
  background-size:contain;
  width: 60%;
  height:100%;
  transition: .4s ease;
}


.thumbOverlayTwoThirdsRight {
  position: absolute;
  top:0px;
  background-image: url("../images/coverTwoThirdsRight.png");
  background-repeat: no-repeat;
  background-size:contain;
  width: 30%;
  height:100%;
  transition: .4s ease;
}



/*
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////  Spacer  //////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
*/


.spacer { 
	width: auto;
	height: auto;
	background-size: cover; 
	background-repeat: no-repeat;
	position: relative;
	top: 0; 
	left: 0; 
	opacity: 0;
}



/*
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////  Video  ///////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
*/



.videoContainer {
	width: 90%;
	height:90%;
	margin-bottom:20px;
	display:inline-block;
	overflow:hidden;
	z-index: 200;
}


.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}


.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}




/*
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////  Social Video  ///////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
*/



.socialVideoContainer {
	width: 90%;
	height:90%;
	margin-bottom:20px;
	display:inline;
	overflow:hidden;
	z-index: 200;
}


.socialVideo-responsiveLeft{
    width: 380px; 
	height: 380px;
	margin-left: 10px;
	margin-bottom:20px;
	display:inline-block;
	overflow:visible;
	z-index: 205;
}

.socialVideo-responsiveLeft475{
    width: 380px; 
	height: 475px;
	margin-left: 10px;
	margin-bottom:20px;
	display:inline-block;
	overflow:visible;
	z-index: 205;
}

.socialVideo-responsiveRight{
    width: 472px; 
	height: 780px;
	margin-left: 10px;
	margin-bottom:20px;
	display:inline-block;
	overflow:hidden;
	z-index: 205;
}


.socialVideo-responsiveLeft iframe{
    width: 380px; 
	height: 380px;
	margin-left: 10px;
	margin-bottom:20px;
	display:inline-block;
	overflow:hidden;
	z-index: 205;
}

.socialVideo-responsiveLeft475 iframe{
    width: 380px; 
	height: 475px;
	margin-left: 10px;
	margin-bottom:20px;
	display:inline-block;
	overflow:hidden;
	z-index: 205;
}


.socialVideo-responsiveRight iframe{
    width: 472px; 
	height: 780px;
	margin-left: 10px;
	margin-bottom:20px;
	display:inline-block;
	overflow:hidden;
	z-index: 205;
}







@media (max-width: 1200px) {
.thumbText {line-height:17px;font-size: 14px;}
.textContainer {width: 85%;}
}


@media (max-width: 860px) {
	html, body {font-size:20px; line-height:30px;}
	h1 {font-weight:600; font-size: 75px;}
	h2 {font-weight:600; font-size: 65px;}
	.introText{font-size: 55px; line-height:50px;}
	.thumbText {line-height:15px;font-size: 12px;}
	.thumbBox {width:355px; height:251px; padding-right:3px;padding-left:3px;padding-bottom:2px;padding-top:2px;}
	.container {margin-top:50px; margin-left:10px; margin-right:10px; margin-bottom:20px;}
	.textContainer {margin-left:30px; margin-right:30px; width: 90%;}
	.workTextContainer {margin-top:150px; margin-left:30px; margin-right:30px; width: 90%;}
	.contactTextContainer { width:100%;}
	.mobileContainerOutside {display:inline; background-color: #000;}
	.containerOutside { width: 100%; height: auto; background-color: #000; padding-top:0px; margin-top: 0px; margin-left:0px; margin-right:0px; max-width: 1500px;}
}


@media (max-width: 720px) {
	.indexContainerOutside {display:none;}
	.introText{font-size: 52px; line-height:47px;}
	.redText {font-size: 18px;}
	h2 {font-weight:400; font-size: 65px;}
	.projectText {font-size: 20px; line-height:22px;}
	.containerOutside { background-color:#fff;}
	.containerInside { width: 100%;padding-top:0px;margin-top: 0px;margin-left:0px;margin-right:0px;}
	
	.buttonContainer { margin-left:19%; margin-right:15%;}
	.textContainer {margin-left:20px; margin-right:20px; width: 90%;}
	.workTextContainer {margin-top:150px; margin-left:20px; margin-right:20px; width: 90%;}
	.redText { text-align: right;float:right;}
	
	.thumbBoxHalvesLeft {width: 90%; height: auto; margin-left: 10px; margin-bottom:20px; display:inline-block; overflow:hidden; z-index: 205;}
	.thumbBoxHalvesRight {width: 90%; height: auto; margin-right:10px; margin-bottom:20px; display:inline-block; overflow:hidden; z-index: 205;}
	.thumbOverlayHalf {position: absolute; top:0px; background-image: url("../images/coverHalf.png"); background-repeat: no-repeat; background-size:contain; width: 90%; height:100%; transition: .4s ease;}
	
	.thumbBoxThirdsLeft {width: 90%; height: auto; margin-left: 10px; margin-bottom:20px; display:inline-block; overflow:hidden; z-index: 205;}
	.thumbBoxThirdsMiddle {width: 90%; height: auto; margin-left: 0px; margin-bottom:20px; display:inline-block; overflow:hidden; z-index: 205;}
	.thumbBoxThirdsRight {width: 90%; height: auto; margin-right:10px; margin-bottom:20px; display:inline-block; overflow:hidden; z-index: 205;}
	
	.thumbBox {padding-right:1px;padding-left:1px;padding-bottom:1px;padding-top:1px;}
}