/* Some general rules */
body
{
	padding:0px;
	margin:0px;
	font-family: "HelveticaLT", Helvetica, Arial, sans-serif;
	font-weight: light;
	font-size: 17px;
	min-width: 957px;
	outline: none;

}

body>div.background
{
	background: #8e8e8e url("images/video_transparent_img_background.png") no-repeat center center fixed; 
	overflow: hidden;
	width: 100%;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

#header
{
	background: url("images/header_bcgr.png") no-repeat center bottom;
	background-size: auto;
	position:fixed;
	left: 0px;
	top: 0px;
	z-index: 5000;
	width: 100%;
	height: 180px;
}

#header>div 
{
	width: 937px;
	padding-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

.text_rotated
{
	-webkit-transform: rotate(-5deg); 
	-moz-transform: rotate(-5deg); 
	-ms-transform: rotate(-5deg); 
	-o-transform: rotate(-5deg);	
	transform: rotate(-5deg);	
	text-align: center; 
}

.text_condensed
{
	font-family: "HelveticaCond", Helvetica, Arial, sans-serif;
	font-stretch: condensed;
}

.text_bold_condensed
{
	font-family: "HelveticaCond", Helvetica, Arial, sans-serif;
	font-stretch: condensed;
	font-weight: bold;
}

#logo_shaicle
{
	display: inline-block;
	position: relative;
	
	-webkit-transform-origin: left top;
	-o-transform-origin: left top;
	-moz-transform-origin: left top;
	transform-origin: left top;
}

.logos_social
{
	position: relative;
	float:right;
	margin-right:15px;

	-webkit-transform-origin: right top;
	-o-transform-origin: right top;
	-moz-transform-origin: right top;
	transform-origin: right top;
}

.logos_social.inner
{
	-webkit-transform-origin: 225% top;
	-o-transform-origin: 225% top;
	-moz-transform-origin: 225% top;
	transform-origin: 225% top;
}

.content
{
	position:relative;
	margin-left: auto;
    margin-right: auto;
	width: 937px;	
}

#intro
{
	margin-top: 155px;
	background-color:none;
	overflow: hidden;
}

#video
{
	display:inline;
	width:527px; 
	height:350px;
}

#intro_text_container
{
	display:inline; 
	width:40%; 
	float: right;
	color: white;
	font-size: 15px;
}

.heading
{
	font-size: 30px;
	margin-top:0px;
	margin-bottom:0px;
}

#interested
{
	float: right;
	margin-top:20px;
	line-height:140%;
	font-size: 16px;
}

#menu
{
	width: 100%;
	height: 28px;
	margin-top: 30px;
	padding-top: 36px;
	padding-bottom: 18px;
	background-color: white;
	color: #808080;
	white-space: nowrap;
	text-align:center;
	vertical-align: middle;
}

#menu>div.menu_floater
{
	position: relative;
	z-index: 5050;
	-webkit-transform-origin: 25% top;
	-o-transform-origin: 25% top;
	-moz-transform-origin: 25% top;
	transform-origin: 25% top;
}

#menu a 
{
	display: inline-block;
	font-weight: bold;
	font-stretch: condensed;
	padding-left: 15px;
	padding-right: 15px;
	color: #808080;
	text-decoration: none;
}

#how
{
	position: relative; 
	height: 530px; 
}

#map
{
	position: relative; 
	border:0;
	width: 100%;
	height: 570px;
	pointer-events: none;
}

#phone_background
{
	pointer-events: none;
	position: relative;  
	margin-top: -500px;
}

#phone
{
	position: relative; 
	margin-top: -410px; 
	margin-left:40px;
}

#location
{
	position:relative;
	margin-top: -200px; 
	margin-left: 180px;
}

#vertical_text
{
	position: relative; 
	margin-top: -890px; 
	margin-left:-995px;
	color: white;
	font-size: 28;
	-webkit-transform: rotate(265deg); 
    -moz-transform:    rotate(265deg); 
    -ms-transform:     rotate(265deg); 
    -o-transform:      rotate(265deg);
    transform: 		   rotate(265deg);
}

#popup
{
	position: relative; 
	margin-top: 795px; 
	margin-left: 217px;
	z-index:3000;
}

#popup_text_heading
{
	font-size: 17px;
	margin-bottom: 0px;
}

#popup_text
{
	color: #4F7B09; 
	font-size: 14px; 
	width:40%; 
	height: 40%; 
    margin-top: -130px; 
	margin-left: 50px;
}

#how_background
{
	margin-top: -400px; 
	margin-left: -500px;
}

/* Why related stuff */
#why
{
	position: relative;	
	height: 814px;
	padding-top:25px;
}

#why_background
{
	position: relative;
	margin-top: -180px; 
	margin-left: -500px; 
	z-index: 2000;
}

#why_header
{
	background-image: url('images/why_white_header.png');
	height: 330px;
	position: relative;
	z-index: 3000;
	margin-top:-155px;

}

#why_heading
{

	position: relative;
	font-size: 32px;
	padding-left: 40px;
	color: #4F7B09;
	z-index: 4000;
	padding-top: 210px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#grey_shadows
{
	position: relative;
	margin-left: -500px;
	z-index: 2000;
	pointer-events: none;
}

#bullets_container
{
	position: relative; 
	margin-top: -408px; 
	line-height: 130%;	
	z-index: 4000;
	padding-top: 10px;
	height: 380px;
	text-shadow:1px 1px 3px black;
}

#bullets_container>div
{
	background: url("images/white_bullet.png") no-repeat 0px 6px;
	padding-left: 40px;
	margin-top: -20px;
	padding-bottom: 20px;
	color: white;
}

/* When-related styles */
#when
{
	position: relative;
	z-index: 1000;
	background-color: white;
	padding-bottom: 125px;
	color: #4F7B09; 	
}

#when_header
{
	width: 100%;
	margin-top: -210px;
	background-image:url('images/when_header_background.png');
	height: 365px;
}

#big_when
{
	color: white; 
	padding-top: 200px; 
    font-size: 92px; 
}

#small_when
{
	color: #4F7B09; 
	margin-top: -80px; 
	margin-left: 50%; 
	font-size: 32px;

}

#big_logo
{
	position: relative;
	display: block; 
	margin-left: auto; 
	margin-right: auto; 
	margin-top: -75px;
}

#when_axis
{
	display: block; 
	margin-left: auto; 
	margin-right: auto; 
	margin-top: 75px;
}

#timeline
{
	background: url("images/when_green_axis_no_bullets.png") repeat-y center top;
	position: relative;
	margin-top: -6px; 
	margin-left: auto; 
	margin-right: auto; 
	padding-top: 25px;
}

#timeline>div
{
	background: url("images/timeline_milestone_left.png") no-repeat left top;
	line-height: 130%;
  	word-wrap:break-word;
  	width: 52.5%;
	margin-left: 47.5%;
	padding-top: 12px;
	padding-bottom: 0px;
	padding-left: 60px;
}

#timeline>div:nth-child(2n+1) 
{
	background: url("images/timeline_milestone_right.png") no-repeat right top;
	text-align: right;
	margin-left: -60px;
	padding-right: 60px;
	padding-left: 0px;
}

/* Who section related stuff */
	
#who
{
	position: relative; 
	margin-top: -50px;
}

#grey_photo_background
{
	position: absolute;
 	margin-top: -250px; 
	margin-left: -500px;
}

#who_header
{
	position: relative; 
	margin-left: -50px;
	margin-right: -55px;
	display:inline-block;
	z-index:1000;
}

#who_heading
{
	position: relative;
	font-size: 32px;
	margin-top:-170px;
	margin-bottom:70px;
	text-align:center;
	color: white;
	z-index:2000;
}

#who_background
{
	position: relative;
	margin-top:-60px;
}

#bios
{
	position: relative; 
	margin: -130px auto 50px auto;
	text-align: left;
	padding-top: 150px;
	color: white;
}

#bios>div
{
	display: inline-block;

	/* dont include the padding in the box width */
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	
	padding: 65px 35px 5px 45px;
	margin-left:25px;
	margin-top: -30px;
	line-height: 130%;
	width: 442px;
	vertical-align: top;
	background: #6b6b6b;
	min-height: 580px;

}

#bios>div:nth-child(1)
{
	margin-right:25px;
	margin-left:0px;
}

#bios h2
{
	margin-bottom: -15px;
}

#footer_background
{
	overflow: hidden;
	position: relative; 
	padding:0px;
	margin:0px;
	width: 100%; 
	height: 250px; 
	background-color: #323232;
}

#footer_content
{
	position:relative;
	margin-left: auto;
    margin-right: auto;
	width: 937px;
	color: white;
}

#footer_logo
{
	display:inline-block;
	padding-top: 30px;
	padding-left: 30px;
	vertical-align:top;
}

#footer_axis
{
	display:inline;
	padding-left: 30px;
}

#footer_menu
{
	width: 100%;
	margin-top: -180px;
	margin-left: 170px;
	color: white;
	white-space: nowrap;
	font-size: 13px;
	font-weight:bold;

}

#footer_menu a 
{
	position: relative;
	padding-left: 15px;
	padding-right: 15px;
}

#copyrights
{
	margin-top: 10px;
	margin-left: 185px;
	font-size: 13px;
	line-height: 230%;
}

#footer_social
{
	position:relative;
	margin-top: 15px;
	margin-left: 185px;
}

a
{
	text-decoration:none;
	color:white;
}

.how_wrapper{
	width: 100%;
	background-image:url('images/how_and_why_green_background.png')	
}

.why_wrapper{
	background-image:url('images/why_darkgreen_background.png');
	margin-top: -375px;
    position: relative;
    z-index: 2500;
    pointer-events: none;
}

.when_wrapper{
	background-image:url('images/when_header_background.png');
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
#when_header{
	background-image:url('images/when_header_background.png');
	height: 365px;
}
/* Phone styles */
#phone{
	background:url('images/iphone_6.png');
	width:265px; 
	height:455px;
	z-index: 1001;
	padding: 72px 47px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	pointer-events: none;
}

.phone_slider{
	background: white;
	width:175px;
	height:311px;
	position: absolute;
	top: 95px;
	left:85px;
	z-index: 1000;
	-webkit-transform: rotate(-5deg); 
	-moz-transform: rotate(-5deg); 
	-ms-transform: rotate(-5deg); 
	-o-transform: rotate(-5deg);	
	transform: rotate(-5deg);	
	pointer-events: all;

}

.slide{
	width: 100%;
	height: 311px;
}