#loader {
	width: 100%;
	padding-top: 32%;
	background: url(/wp-content/uploads/2015/04/loader.gif) center center no-repeat;
}

.custom-homepage .inner-page-wrap {
	margin: 0;
}
.custom-homepage .tiny-text {
	width: 250px;
	margin: 0 auto;
}



.custom-homepage .subtitle {
	font-style: italic;
	font-size: 32px;
	line-height: 44px;
	padding-bottom: 20px;

	border-bottom: 2px #26C0CC solid;
}
.custom-homepage h3 {
	font-size: 21px;
}


.custom-homepage .row.fw-row,
.custom-homepage .fullbackground,
.custom-homepage .section {
	margin: 0;
	padding: 90px 0 50px 0;
}


/* header */
.custom-homepage .headerjumbotron .page-heading.fancy-heading {
	background-image: url('/wp-content/uploads/2015/04/homepage_spacebg.jpg');
	background-color: #000000;
}
.custom-homepage .headerjumbotron h1.entry-title {
	color: #ffffff !important;
	font-size: 88px;
	letter-spacing: 2.14px;
	line-height: 1.05 !important;
	margin-bottom: 36px !important;
}
.custom-homepage .headerjumbotron img {
	margin-bottom: 30px;
	width: 123px;
}

.custom-homepage .headerjumbotron .subtitle {
	font-size: 25px;
	margin-bottom: 0;
}





/* illustrated spread - graphic / details */
.custom-homepage h2 {
	color: #ffffff;
	font-size: 56px;
	letter-spacing: 1.38px;
	line-height: 1.15;
	margin-bottom: 40px;
}

.custom-homepage .illustrated-spread .subtitle {
	padding-bottom: 20px;
	line-height: 1.25;
	font-size: 32px;
}
.custom-homepage .illustrated-spread .p1 {
	color: #818181;
}
.custom-homepage .illustrated-spread .illustration {
	width: 95%;
}

.custom-homepage #different .illustration {
	background: url('/wp-content/uploads/2015/04/radicallydifferent_fishbowl.png') no-repeat top left;
	background-size: contain;
	height: 0;
	padding-bottom: 110%;
	position: relative;
}
.custom-homepage #different .illustration svg {
	width: 58%;
	position: absolute;
	top: 0;
	right: 0;
}



.custom-homepage #eliminatewaste .illustration {
	background: url('/wp-content/uploads/2015/04/eliminatewaste_barrel.jpg') no-repeat top left;
	background-size: contain;
	height: 0;
	padding-bottom: 100%;
	position: relative;
}
.custom-homepage #eliminatewaste .illustration svg {
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
}


/* blue highlighted pullout */
.custom-homepage .highlighted-blue {
	background: #26C0CC;
	text-align: center;
	color: #000000;
}
.video_display .video_button_container {
	transition: height 0s linear, opacity .3s linear;
	opacity: 1;
	height: auto;
}
.video_display.displayed .video_button_container {

	height: 0;
	opacity: 0;
}

.video_display.displayed .video_container {
	
	transition: all .3s linear .3s;
	opacity: 1;
}

.video_display.displayed .video_container .video_wrapper {
	
	padding-bottom: 56.25%; /* 16:9 */
}


.video_display .video_container {
	
	opacity: 0;
}

.video_wrapper {
	position: relative;
	margin-top: 24px;
	padding-top: 25px;
	padding-bottom: 0;
	height: 0;
}
#video {
	border: 22px black solid;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.custom-homepage .highlighted-blue.row.fw-row {
	padding: 0;
}
.custom-homepage .highlighted-blue .spb_text_column {
	margin: 0;
}
.custom-homepage .highlighted-blue .col-sm-4{
	float: none;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
}
.custom-homepage .highlighted-blue .subtitle {
	font-size: 25px;
}


.custom-homepage .highlighted-blue .tiny-text,
.custom-homepage .logocta .tiny-text {
	margin-top: 24px;
}
.custom-homepage .highlighted-blue .sf-button.accent,
.custom-homepage .logocta .sf-button.accent
{
	color: #000000 !important;
}
.custom-homepage .highlighted-blue .tiny-text:hover,
.custom-homepage .logocta .tiny-text:hover,
 {

	background: #000000;
}
.custom-homepage .highlighted-blue .sf-button.accent:hover,
.custom-homepage .logocta .sf-button.accent:hover
{
	color: #26C0CC !important;
	background: #000000 !important;
}
.custom-homepage .highlighted-blue a.sf-button,
.custom-homepage .logocta a.sf-button  {
	border: 2px #000000 solid;
	margin: 0 !important;
}
.custom-homepage .highlighted-blue > div {
	border: 2px #000000 solid;
	margin: 18px;
	padding: 60px 0;
}
.custom-homepage .highlighted-blue p {
	margin: 0;
	padding-bottom: 0;
}
/* wee arrow*/
.custom-homepage .arrow {

	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: relative;
	left: 50%;
	pointer-events: none;
	border-color: rgba(38, 192, 204, 0);
	border-top-color: #26C0CC;
	border-width: 22px;
	margin-left: -22px;
}


/* graph */
.custom-homepage .graph-image {
	position: relative;

	padding-bottom: 61%;;
}
.custom-homepage .graph-image img {
	z-index: 100;
	position: absolute;
	width: 100%;
	height: 100%;
}

.custom-homepage .graph-image .highlight {
	position: absolute;
	z-index: 10;
	right: 0;
	top: 1.5%;
	height: 85.5%;
	width: 15%;
	background-color: #333333;
}



/* fancy animated underline */
.custom-homepage .graph .graph-info h3 {
	position: relative;
	padding-bottom: 50px;
	margin-bottom:  50px;
}
.custom-homepage .graph .graph-info h3:before {
	/*border-bottom: 2px #26C0CC solid;*/
  content: "";
  position: absolute;
  width: 30%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #26C0CC;
  /*
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  */
}
/* animated lines - eventually add a 'scrolled' class with scrollmagic 
.custom-homepage .graph .graph-info.scrolled h3:before,
.custom-homepage .graph .graph-info h3:hover:before  {
  
  width: 100%;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
*/
.custom-homepage .graph .explanation {
	font-style: italic;
	color: #818181;
	letter-spacing: 0.31px;
	line-height: 36px;
	margin-bottom: 42px;
}
.custom-homepage .graph ul {
    font-family: 'Code-Pro-LC', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
.custom-homepage .graph ul li {

    background-repeat: no-repeat;
    background-position: 0px 8px; 
    padding-left: 28px; 
    margin-bottom: 8px;
}
.custom-homepage .graph ul li.upfront {
    background-image: url(/wp-content/uploads/2015/04/graph_legend_upfront.svg);
} 
.custom-homepage .graph ul li.annual {
    background-image: url(/wp-content/uploads/2015/04/graph_legend_annual.svg);
} 



/* 3 columns */
.custom-homepage .cta-detail {
	background: #222222;
}
.custom-homepage .cta-detail h3 {
	color: #ffffff;
	border-bottom: 2px #26C0CC solid;
	padding-bottom: 17px;
	margin-bottom: 0;
	margin-top: 105px;
}
.custom-homepage .cta-detail .subtitle {
	font-style: italic;
	font-size: 21px;
	border-bottom: 2px #26C0CC solid;
	padding: 36px 0;
	margin: 0 0 36px 0;
	line-height: 1.7;
}

.custom-homepage .cta-detail .diagram {
	margin: 0 auto;
	width: 80%;
	max-width: 300px;
	max-height: 265px;
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.custom-homepage .cta-detail .diagram img.aligncenter {
	padding-top: 56%;
	max-width: 80%;
}





.custom-homepage .overlay {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

}


/* full background */
/* todo - make this without the blue line and then shoot that blue line on in bro */
.custom-homepage .fullbackground {
	background: url(/wp-content/uploads/2015/04/lab_bg_nostripe.jpg) no-repeat;
	background-size: cover;
	position: relative;
}


.custom-homepage .fullbackground .overlay {
	opacity: 0;

	background: url(/wp-content/uploads/2015/04/lab_bg_stripe.jpg) no-repeat top center;
	background-size: cover;
	
}







/* logocta */

.custom-homepage .logocta {
	text-align: center;
	width: auto;
	color: #ffffff;
	position: relative;
}

.custom-homepage .logocta .overlay {
	opacity: 0;

	background: url(/wp-content/uploads/2015/04/homepage-architecture.jpg) no-repeat;
	background-size: cover;
	
}



.custom-homepage .logocta .tiny-text {
	width: 214px;
}
.custom-homepage .circled-logo {
	position: relative;
	margin: 0 auto 36px auto;
	background: #222222;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}
.custom-homepage .circled-logo img {
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);

}

.black {
	background: #000000;
}
.right {
	float: right;
}

h1 {
	line-height: 50px;
}





@media only screen and (min-width: 1200px) {

	.custom-homepage .headerjumbotron h1.entry-title {
		font-size: 90px;
	}

}
@media only screen and (min-width: 1024px) {

	.custom-homepage .headerjumbotron h1.entry-title {
		font-size: 80px;
	}

}


@media only screen and (max-width: 1024px) {

	h2 {
		font-size: 30px !important;
	}
	h3 {
		font-size: 18px !important;
	}
	.subtitle {
		font-size: 24px !important;
		line-height: 36px !important;
	}
	.highlighted-blue .subtitle,
	.jumbotron .subtitle{
		font-size: 18px !important;
		line-height: 26px !important;
	}

	.cta-detail .subtitle {
		font-size: 18px !important;
		line-height: 30px !important;
		padding: 28px 0;
	}
	p {
		font-size: 18px;
	}


}
/*
@media only screen and (min-width: 768px) {

	.custom-homepage .illustrated-spread .illustration.tucked-in {
		position: absolute;
		padding-top: 43px;
	}

}
*/
@media only screen and (max-width:  979px) {

	.custom-homepage .cta-detail .diagram {
		height: 215px;
	}
	.custom-homepage .cta-detail .diagram img.aligncenter {
		
	}
	.custom-homepage .cta-detail h3 {
		margin-top: 70px;
	}

}
@media only screen and (max-width: 767px){
	.custom-homepage .headerjumbotron h1.entry-title {
		font-size: 36px !important;
	}
	.custom-homepage .spb_text_column {
		margin-bottom: 42px;
	}
	.custom-homepage .illustrated-spread .subtitle {
		font-size: 21px;
		line-height: 1.7;
	}


	.custom-homepage .cta-detail .diagram {
		margin: 0 auto;
		width: 80%;
		max-width: 300px;
		height: 300px;
		max-height: 300px;
		background-position: top left;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	.custom-homepage .cta-detail .diagram img.aligncenter {
		padding-top: 59% !important;
		max-width: 80%;
	}


}
@media only screen and (max-width: 480px) {

	.custom-homepage .headerjumbotron h1.entry-title {
		font-size: 28px !important;
	}
	.custom-homepage .headerjumbotron img {
		width: 80px;
	}
	.custom-homepage h2 {
		font-size: 24px !important;
	}

}