/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html {
	height:100%;
}

body {
	font-family:'Open Sans',sans-serif;
    height:auto;
	max-height:150%;
    min-height:100%;
	background-color:#f0f0f0;
}

p {
    font-weight:300;
	font-size:1.3em;
	line-height:1.8em;
}

.my-fluid-container {
	height:100%;
	margin-left:auto;
	margin-right:auto;
}

.journal {
	position:relative;
	display:block;
    padding-top: 5%;
    padding-bottom:5%;
	overflow:hidden;
}


.sectiontitle {
	margin-left:10%;
	margin-top:6%;
	display:block;
	position:absolute;
}

.navigation {
	position:fixed;
	z-index:1000;
	top:5%;
	left:6%;
}

.navigation li {
	list-style-type:none;
	margin:0;
	padding:0;
	font-weight:300;
	font-size:1.4em;
	line-height:1.5em;
}

.navigation a:link,a:visited {
	color:#000;
	text-decoration:none;
}

.navigation a:hover,a:active {
	color:#fff;
}

.navbar-inner {
	background-color:#fff;
	background-image:none;
	background-repeat:no-repeat;
	filter:none;
}

.navbar-inverse {
	background-image:none;
}

.navbar .brand {
}

/* I think more elegant */
/* you could comment out this block and uncomment the following block "before (mike)" */
.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
  border-width: 4px 0 0;
  border-color: black;
}
.navbar .navbar-inner .nav > li > a {
	padding-top: 13px;
	padding-bottom: 8px;
}
.navbar {
	box-shadow: 0 2px 9px rgba(0,0,0,0.3);
}
.navbar .brand {
	padding-top: 9px;
}


.change-image{
position: absolute;
top: 70%;
    left:45%;
z-index:199;
background-image:url("../img/scroll.png");
width:80px; /*image width*/
height:40px; /*image height*/
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.change-image:hover{
background-image:url("../img/scrollarrow.png");
}

.row-fluid {height:100%}

.span12 {
    height:100%;
    margin: 0px !important;
}

.fill { 
    height: 100%;
}

.landing{
padding-bottom: 5%;
color: #f07910;
}

.landingtwo{
padding-top: 5%;
color: #f07910;
}


/* ------------------------------------------
	Intro
---------------------------------------------*/
#futurestintro {
	height:100%;
	display:block;
	overflow:hidden;
	padding:0;
	margin:0;
	position:relative;
}

#futurestintro article {
	width: 50%;
	margin:0 auto;
	padding-top:20%;
}

#slogan {
/*background: #fff url(../img/boliviaoriginaltest.jpg) no-repeat fixed; */
	background:#fff url(../img/testfar.jpg) no-repeat fixed;
	height:100%;
	display:block;
	overflow:hidden;
	padding:0;
	margin:0;
	width:100%;
	position:relative;
	margin:0 auto;
}

#slogan2 {
/* background: #fff url(../img/boliviacolored.jpg) no-repeat fixed; */
	background:#fff url(../img/testclose.jpg) no-repeat fixed;
	display:block;
	padding:0;
	margin:0;
	width:100%;
	position:relative;
	margin:0 auto;
}

#quote {
	margin-top:20%;
	margin-left:auto;
	margin-right:auto;
	display:block;
	width:60%;
	color:#fff;
}

#quote h1 {
	font-size:3em;
	line-height:1.2em;
	font-weight:300;
}

h2 {
	font-size:3em;
	font-weight:300;
}

.italic {
	font-weight:400;
	font-style:italic;
}

.arrow {
	position: fixed;
	z-index:999;
	top: 200px;
	left:5%;
	width:250px;
	opacity: 0;
	-moz-transition: opacity .5s;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}

.arrow.visible {
	opacity: 1;
}

.hidden {
	display: none;
}

#services {
	height: 100%;
	display:block;
	overflow:hidden;
	background-color:rgba(255,255,255,0.5);
	border-bottom:1px solid #b9b9b9;
	width:100%;
	
}

.blocktext {
	font-weight:300;
	font-size:1.3em;
	line-height:1.8em;
	z-index:100;
	position:absolute;
	overflow:hidden;
	padding-top:5%;
	margin-left:30%;
	width:40%;
}

#below {
	padding-top:45%;
}

.accent {
	font-weight:400;
}

#howwework {
	
}

.valuechain {
	position: relative;
}

.valuechain h3 {
	font-size:1.5em;
	font-weight:400;
	font-style:italic;
}

.valuechain p {
	font-size:1.3em;
	line-height:1.5em;
	font-weight:300;
	color:#9EA2A2;
}

.accentarrow {
	position: absolute;
	left: 20%;
    top: 3%;
	padding-bottom: 2%;	
    width: 80%;
	opacity: 0;
	-moz-transition: opacity .5s;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}

.focusable-text.active .accentarrow {
	display:block;
	z-index:-1;
	opacity: 1;
}

#ourwork {
	background:#fff url(../img/ourworkcolor.jpg) no-repeat fixed;
	height:60%;
	display:block;
	overflow:hidden;
	width:100%;
	position:relative;
	margin:0 auto;
}

#ourwork2 {
	background:#fff url(../img/ourworkbw_opaque.jpg) no-repeat fixed;
	display:block;
	overflow:hidden;
	width:100%;
	position:relative;
	margin:0 auto;
	border-bottom:1px solid #b9b9b9;
}



#aboutus {
/* background: url(../img/ManuBabak.jpg) no-repeat fixed; */
	height:60%;
	overflow:hidden;
	width:100%;
	position:relative;
    padding-top:0;
	margin:0 auto;
}

#aboutustext {
	height:40%;
	display:block;
	overflow:hidden;
	width:100%;
	position:relative;
	margin:0 auto;
	border-bottom:1px solid #b9b9b9;
}

.focusable-text.active p {
	color:#000;
/* background: url(../img/arrow/accentarrow.png) no-repeat; */
}

#contactus {
	display:block;
	overflow:hidden;
	position:relative;
	margin:0 auto;
}

#map {
	display:block;
	overflow:hidden;
	width:100%;
	position:absolute;
	top:40%;
}

#fixedimage {
/* height: auto;  */
	display:block;
	overflow:hidden;
/* margin: 0 auto; 	*/
}

#aboutus video {
	position:relative;
	width:100%;
	top:0;
	left:0;
	z-index:1;
}

/* ------------------------------------------
	Body
---------------------------------------------*/
/* 

THE FOLLOWING SHOWS HOW TO CHANGE THE BACKGROUND HEIGHT FOR ELEMENTS DEPENDING ON THE SCREEN SIZE. SOLVING THE RESPONSIVE PROBLEM OF BG IMAGES

.biggie {display:none}

@media(min-width:768px)
{

.biggie {
display:block;
width:100%;
height:100px;
background-color:#e6e6e6;
background-attachment:static;
background-repeat:repeat;
background-position:top center;
background-size:100%;
background-attachment:fixed;
height:200px;
background-size:inherit}}

@media(min-width:992px)
{.biggie{height:250px}}

@media(min-width:1200px)
{.biggie{height:300px}}

*/

#learnmore {
	position:absolute;
	left:0;
	top:70%;
}

#services ul li {
	display:inline;
	padding-right:3%;
}

/* ------------------------------------------
	Footer
---------------------------------------------*/
footer {
	border-top:1px solid #b9b9b9;
    margin-bottom: 10%;
}

.footertext {
	padding-top:3%;
	font-size:80%;
}

#footerlogo {
}

/* ------------------------------------------
	Conditions
---------------------------------------------*/
.skewed {
	display:inline-block;
	position:relative;
	-webkit-transform:rotate(-10deg) skew(-10deg,0);
	-moz-transform:rotate(-10deg) skew(-10deg,0);
	-ms-transform:rotate(-10deg) skew(-10deg,0);
	-o-transform:rotate(-10deg) skew(-10deg,0);
	transform:rotate(-10deg) skew(-10deg,0);
}