body, html {
	background: #FFF;
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-family: 'Roboto Condensed', sans-serif;
}

.sectionTitle {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	color: #9B9B9B;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-left: 12%;
	position: absolute;
	top: 12%;
	z-index: 21;
	font-weight: 300;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="sectionTitle"] {
		left: 4%;
    }
}

.sectionTitleWhite {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	color: #FFF;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-left: 12%;
	position: absolute;
	top: 12%;
	z-index: 21;
	font-weight: 300;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="sectionTitleWhite"] {
		margin-left: 10%;
    }
}

/*#headerBG {
	position: absolute;
	margin-top: 10px;
	margin-left: 10px;
	background: lightgreen;
	height: 110px;
	width: 100%;
	z-index: 19;
}*/

#blankFooter {
	height: 10%;
	width: 100%;
	top: 60%;
	position: relative;
	
}

.highlight {
	height: 70%;
}


.contentHighlight-5line {
	font-family: 'Roboto Condensed', sans-serif;
	color: #FFF;
	text-transform: uppercase;
	font-size: 48px;
	letter-spacing: 5px;
	margin-left: 12%;
	width: 10%;
	height: 300px;
	position: relative;
	top: 28%;
	font-weight: 700;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="contentHighlight-5line"] {
		font-size: 2.6em;
    }
}


.contentHighlight-4line {
	font-family: 'Roboto Condensed', sans-serif;
	color: #FFF;
	text-transform: uppercase;
	font-size: 48px;
	letter-spacing: 5px;
	margin-left: 12%;
	width: 10%;
	height: 300px;
	position: relative;
	top: 32%;
	font-weight: 700;
}

.contentHighlight-3line {
	font-family: 'Roboto Condensed', sans-serif;
	color: #FFF;
	text-transform: uppercase;
	font-size: 48px;
	letter-spacing: 5px;
	margin-left: 12%;
	width: 11%;
	height: 300px;
	position: relative;
	top: 37%;
	font-weight: 700;
}

.readTime {
	font-family: 'Roboto Condensed', sans-serif;
	color: #FFF;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	padding-left: 12.3%;
	height: 50px;
	margin-bottom: 0px;
	line-height: 50px;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="readTime"] {
		padding-left: 0;
		margin-left: 12%;
    }
}

/*.textUnderline {
	width: 3%;
	background: #000;
	height: 1px;
	top: 24.5%;
	margin-left: 12%;
	position: relative;	
}*/



#content {
	height: 95%;
	width: 100%;
}

#content-black {
	height: 95%;
	width: 100%;
}

a.contentLink, a.contentLink:visited, a.contentLink:active {
	font-family: 'Roboto Condensed', sans-serif;
	text-decoration: underline;
	color: #4A4A4A;
}

a.contentLink:hover {
	color: #0003FF;
	text-decoration: none;
}

a.contentLinkContacts, a.contentLinkContacts:active, a.contentLinkContacts:visited {
	font-size: 13px;
	font-weight: 500;
	color: #0003FF;
	margin-right: 15px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

a.contentLinkContacts:hover {
	color: #0003FF;
	text-decoration: none;
}

.contentRegular {
	font-family: 'Roboto Condensed', sans-serif;
	color: #4A4A4A;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 1.5px;
	line-height: 40px;
	width: 50%;
	margin-left: 12%;
	position: relative;
	top: 47%;
	
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="contentRegular"] {
		padding-top: 45%;
		width: 69%;
		display: inline-block;
		font-size: 0.8em;
		margin-left: 16%;
		line-height: 25px;

    }
}

.contentRegular-Pure {
	font-family: 'Roboto Condensed', sans-serif;
	color: #9C9C9C;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 1.5px;
	line-height: 35px;
}

.contentRegular-Pure14 {
	font-family: 'Roboto Condensed', sans-serif;
	color: #9C9C9C;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 1.5px;
}

.contentRegular-PureSmall {
	font-family: 'Roboto Condensed', sans-serif;
	color: #9C9C9C;
	font-size: 13px;
	text-transform: none;
	letter-spacing: 1.5px;
	line-height: 21px;
}

.contentBoldBlue {
	font-family: 'Roboto Condensed', sans-serif;
	color: #0003FF;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	width: 17%;
	margin-left: 70%;
	top: 44.7%;
	position: absolute;
	font-weight: 700;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="contentBoldBlue"] {
		width: 69%;
		top: -10%;
		margin-left: 16%;
		padding-bottom: 5%;
		position: relative;
    }
}


.failureSentence {
	width: 70%;
	position: relative;
	top: 35%;
	margin-left: 12%;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="failureSentence"] {
		margin-left: 17%;
    }
}

.failureSentTitle {
	font-family: 'Roboto Condensed', sans-serif;
	color: #0003FF;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 700;	
}

.failureSentContent {
	font-family: 'Roboto Condensed', sans-serif;
	color: #4A4A4A;
	font-size: 37px;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	line-height: 70px;
}


@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="failureSentContent"] {
		font-size: 2em;
		line-height: 1.5em;
    }
}


.FailureReflect {
	width: 97%;
	height: 95%;
	background: #3CE7CD;
	position: absolute;
	top: 2.5%;
	left: 1.5%;
	z-index: 31;
}

.failureReflectContent {
	color: #0003FF;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 70px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	line-height: 70px;
	width: 45%;
	top: 31%;
	position: relative;
	left: 11%;
	font-weight: 700;
}


@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="failureReflectContent"] {
		font-size: 2em;
		line-height: 1em;
		width: 75%;
		top: 34%;
    }
}

.failureReflectContent-3line {
	color: #0003FF;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 70px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	line-height: 70px;
	width: 45%;
	top: 31%;
	position: relative;
	left: 11%;
	font-weight: 700;
}


@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="failureReflectContent-3line"] {
		font-size: 2em;
		line-height: 1em;
		width: 75%;
		top: 37%;
    }
}
.failureReflectContent-4line {
	color: #0003FF;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 70px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	line-height: 70px;
	width: 45%;
	top: 31%;
	position: relative;
	left: 11%;
	font-weight: 700;
}


@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="failureReflectContent-4line"] {
		font-size: 2em;
		line-height: 1em;
		width: 75%;
		top: 27%;
    }
}


.failureReflectContent-2line {
	color: #0003FF;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 70px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	line-height: 70px;
	width: 45%;
	top: 36%;
	position: relative;
	left: 11%;
	font-weight: 700;
}

/*.learning {
	height: 100%;
	position: absolute;

}*/

.learningTitle {
	font-family: 'Roboto Condensed', sans-serif;
	color: #0003FF;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	top: 30%;
	left: 12%;
	position: relative;
	background: #FFF;
	width: 80%;
	font-weight: 700;
}


@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="learningTitle"] {
		left: 17%;
    }
}

.learningContent {
	font-family: 'Roboto Condensed', sans-serif;
	color: #4A4A4A;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 1.5px;
	line-height: 40px;
	width: 70%;
	margin-left: 12%;
	position: relative;
	top: 35%;
}


@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="learningContent"] {
		margin-left: 17%;
		font-size: 0.8em;
		line-height: 25px;
    }
}


.decorationBar {
	width: 10%;
	background: #0507FF;
	height: 5px;
	position: relative;
	top: 40%;
	left: 12%;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="decorationBar"] {
		left: 17%;
    }
}

.shareLearning {
	font-family: 'Roboto Condensed', sans-serif;
	color: #6a6a6a;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	top: 45%;
	left: 12%;
	position: relative;	
	height: 20%;
	width: 80%;
}


@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="shareLearning"] {
		left: 17%;
    }
}


a.shareLearningLink, a.shareLearningLink:visited, a.shareLearningLink:active {
	font-weight: 700;
	text-decoration: underline;
	color: #0002FF;
}

a.shareLearningLink:hover {
	text-decoration: none;
}


.contentBox {
	height: 50%;
	width: 86%;
	margin-left: 12%;
	margin-top: 14%;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="contentBox"] {
		margin-left: 16%;
		margin-top: 35%;
		width: 79%;
    }
}

#contentBox-Up {
	height: 90%;
	width: 59%;
	margin-left: 28%;
	margin-top: 50px;
}

#contentBoxFooter {
	display: inline-block;
	vertical-align: top;
	height: 80px;
	width: 400px;
	margin-top: 2%;
	line-height: 80px;
}

#contentBoxFooter-LessMargin {
	display: inline-block;
	vertical-align: top;
	height: 80px;
	width: 80%;
	line-height: 80px;
}

#contentBoxTitle {
	vertical-align: top;
	display: inline-block;
	width: 290px;
	margin-right: 9%;
	margin-top: 4.6%;
}

#contentBoxTitle-hor {
	display: inline-block;
	width: 40%;
	margin-right: 10%;
	margin-left: 0;
	margin-top: 2%;
	
}

#contentBoxTitle-horFull {
	display: inline-block;
	width: 82%;
	margin-right: 10%;
	margin-left: 0;
	margin-top: 2%;
	
}

#contentBoxTitle-horUp {
	display: inline-block;
	width: 100%;
	margin-right: 10%;
	margin-left: 0;
}

.contentBoxText-Special {
	vertical-align: top;
	display: inline-block;
	width: 320px;
	margin-top: 3.8%;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="contentBoxText-Special"] {
		width: 100%;
		
    }
}

.contentTitleGray-Small {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 13px;
	color: #4A4A4A;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	line-height: 0px;	
}

.contentTitleBlue-Small {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 13px;
	color: #0002FF;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	line-height: 0px;	
}

.contentTitleBlue-Large {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 40px;
	color: #0002FF;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	line-height: 47px;
	margin-top: 3.8%;	
}

.contentTitleBlue-Large-Why {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 40px;
	color: #0002FF;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	line-height: 47px;
	margin-top: 3.8%;	
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="contentTitleBlue-Large-Why"] {
		font-size: 2em;
    }
}

.contentTitleBlue-Large-noMargin {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 40px;
	color: #0002FF;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	line-height: 47px;
}

.contentBoxText-rightWhy {
	vertical-align: top;
	display: inline-block;
	width: 60%;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 130%;
	color: #4A4A4A;	
	text-transform: none;
	letter-spacing: 1.5px;
	line-height: 39px;
	margin-right: 5%;
	margin-top: 3.6%;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="contentBoxText-rightWhy"] {
		font-size: 0.8em;
		line-height: 2em;
    }
}

.contentBoxText-leftWhy {
	vertical-align: top;
	display: inline-block;
	width: 54%;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 130%;
	color: #4A4A4A;	
	text-transform: none;
	letter-spacing: 1.5px;
	line-height: 39px;
	margin-top: 40px;
	margin-right: 12%;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="contentBoxText-leftWhy"] {
		font-size: 0.8em;
		line-height: 2em;
		width: 95%;
		margin-left: 0%;
		margin-right: 10%;
    }
}

.contentBoxText-right {
	vertical-align: top;
	display: inline-block;
	width: 60%;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 110%;
	color: #4A4A4A;	
	text-transform: none;
	letter-spacing: 1.5px;
	line-height: 34px;
	margin-right: 5%;
	margin-top: 3.6%;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="contentBoxText-right"] {
		width: 95%;
		margin-left: 0;
		margin-right: 0;
    }
}

#contentBoxText-left {
	vertical-align: top;
	display: inline-block;
	width: 54%;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 110%;
	color: #4A4A4A;	
	text-transform: none;
	letter-spacing: 1.5px;
	line-height: 34px;
	margin-top: 40px;
	margin-right: 12%;
}

#contentBoxText-center {
	vertical-align: top;
	display: inline-block;
	width: 80%;
	font-family: 'Roboto Condensed', sans-serif;
	color: #4A4A4A;	
	text-transform: none;
	letter-spacing: 1.5px;
	line-height: 39px;
	margin-top: 20px;
	margin-right: 10%;
}

#contentBoxText-centerDown {
	vertical-align: top;
	display: inline-block;
	width: 80%;
	font-family: 'Roboto Condensed', sans-serif;
	color: #4A4A4A;	
	text-transform: none;
	letter-spacing: 1.5px;
	line-height: 33px;
	margin-top: 70px;
	margin-right: 10%;
}

#contentBoxText-centerDown-16 {
	font-size: 110%;
	vertical-align: top;
	display: inline-block;
	width: 80%;
	font-family: 'Roboto Condensed', sans-serif;
	color: #4A4A4A;	
	text-transform: none;
	letter-spacing: 1.5px;
	line-height: 33px;
	margin-top: 70px;
	margin-right: 10%;
	font-weight: 400;
}

.menuButtonBlue {
	border: 2px solid #0002FF;
	background: transparent;
	vertical-align: middle;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 70%;
	color: #0002FF;
	width: 100px;
	height: 23px;
	letter-spacing: 2px;

    transition-duration: 0.4s;
	text-transform: uppercase;
}

.menuButtonBlue:hover {
    border-color: #0002FF; /* Green */
	background: #0002FF;
    color: #FFF;
	cursor: pointer;
}

.menuButtonBlue-Bigger {
	border: 2px solid #0002FF;
	background: transparent;
	vertical-align: middle;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 70%;
	color: #0002FF;
	width: 190px;
	height: 23px;
	letter-spacing: 2px;
	
    transition-duration: 0.4s;
	text-transform: uppercase;
}

.menuButtonBlue-Bigger:hover {
    border-color: #0002FF; /* Green */
	background: #0002FF;
    color: #FFF;
	cursor: pointer;
}

.pag1 {
    background: #0002FF;
}

.pag1-why {
    background: #FFF;
}

.pag1-black {
	background: #000;
}

.pag1-purple {
	background: #25006A;
}

.pag2-darkPurple {
	background: #070013;
}

.pag2 {
	background: #FFF;
}

.pag2-black {
	background: #000;
}

.pag3 {
    background: #FFF;
}

.pag3-darkPurple {
	background: #070013;
}

.pag4 {
	background: #FFF;
}        

.pag4-darkPurple {
	background: #070013;
}

.pag5 {
	background: #FFF;;
}

.pag5-darkPurple {
	background: #070013;
}

.pag6-darkPurple {
	background: #070013;
}

.pag7-darkPurple {
	background: #070013;
}

/*
css for not that bad sort of projects
*/

#project-container {
    width: 80%;
    height: 40%;
    top: 52%;
    left: 10%;
	transform: translateY(-50%);
    position: relative;
}

#left {
    width: 25%;                
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.header-project-story {
	width: 100%;
	height: 20%;
	display: none;
	margin: 0;
}


#backgroundThumb-Love {                
    background-image: url("../images/iwastherewithyou.png");
    background-position: right;
    background-repeat: no-repeat;
    position: relative;
    width: 357px;                
    left: 18%;
    height: 100%;
}

#backgroundThumb-Sauer {                
    background-image: url("../images/amsterdamsauer.png");
    background-position: right;
    background-repeat: no-repeat;
    position: relative;
    width: 406px;                
    left: 18%;
    height: 100%;
}

#backgroundThumb-HI {                
    background-image: url("../images/hi.png");
    background-position: right;
    background-repeat: no-repeat;
    position: relative;
    width: 400px;                
    left: 17%;
    height: 100%;
}

#backgroundThumb-Icanbankit {                
    background-image: url("../images/icanbankit.png");
    background-position: right;
    background-repeat: no-repeat;
    position: relative;
    width: 406px;                
    left: 18%;
    height: 100%;
}

#backgroundThumb-Itau {                
    background-image: url("../images/itau.png");
    background-position: right;
    background-repeat: no-repeat;
    position: relative;
    width: 406px;                
    left: 18%;
    height: 100%;
}

.headlineYellow {
    font-family: 'Roboto Condensed', sans-serif;
    color: #FFE500;	
    text-transform: uppercase;
    letter-spacing: 10px;
    font-size: 280%;
    font-weight: 700;
    line-height: 45px;
}

.subtitle {
    font-family: 'Roboto Condensed', sans-serif;
    color: #4A4A4A;	
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 110%;
    color: #FFF;
}

#right {
	display: inline-block;
	min-width: 200px;
	padding: 15;
    width: 49%;
    position: absolute;
    left: 45%;
    top: 50%;                
    transform: translateY(-50%);
    background: #000; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left,rgba(7,0,19,0.8),rgba(7,0,19,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(right,rgba(7,0,19,0.8),rgba(7,0,19,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right,rgba(7,0,19,0.8),rgba(7,0,19,1)); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(7,0,19,0.8), rgba(7,0,19,1)); /*Standard*/
}

.projectContentDate {
    font-family: 'Roboto Condensed', sans-serif;
    color: #4A4A4A;	
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 90%;
    color: #FFF;
}

.projectContent {
    font-family: 'Roboto Condensed', sans-serif;
    color: #4A4A4A;	
    text-transform: none;
    letter-spacing: 1.5px;
    font-size: 0.85em;
    line-height: 30px;
    color: #FFF;
    font-weight: 300;
}

a.linkWhite {
	color: #FFF;
}

a.linkWhite:hover {
	color: #FFF;
	text-decoration: none;
}

a.linkWhite:visited, a.linkWhite:active {
	color: #FFF;
}

.keyboard {
	position: absolute;
	top: 83.5%;
	left: 47%;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="keyboard"] {
		display: none;
    }
}


/* footer internal navigation */

.arrow {
	position: fixed;
	left: 97%;
	top: 50%;
	border: none;
	background: transparent;
	font-size: 1.5em;
	color: #0507FF;
	text-decoration: none;
	cursor: pointer;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="arrow"] {
		left: 88%;
		font-size: 1em;
    }
}

.arrowWhite {
	position: fixed;
	left: 97%;
	top: 50%;
	border: none;
	background: transparent;
	font-size: 1.3em;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="arrowWhite"] {
		left: 88%;
		font-size: 1em;
    }
}

.arrowBack {
	position: fixed;
	left: 1%;
	top: 50%;
	border: none;
	background: transparent;
	font-size: 1.5em;
	color: #0507FF;
	text-decoration: none;
	cursor: pointer;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="arrowBack"] {
		left: -2%;
		font-size: 1em;
    }
}

.arrowBackWhite {
	position: fixed;
	left: 1%;
	top: 50%;
	border: none;
	background: transparent;
	font-size: 1.5em;
	color: #FFF;
	text-decoration: none;
	cursor: pointer;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="arrowBack"] {
		left: -2%;
		font-size: 1em;
    }
}

.bt-arrow {
	color: #0507FF;
	text-decoration: none;
	cursor: pointer;
}

/* not that bad previous experiences full screen background */


/* right side project description template */

.project-container-black-bg {
	background: #000;
	width: 38%;
	margin-right: 0%;
	margin-left: 62%;
	top: 0;
	position: absolute;
	height: 100%;
	vertical-align: middle;

}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="project-container-black-bg"] {
		position: relative;
		width: 100%;
		top: 35%;
		margin: auto;	
    }
}

.project-container-content {
	align-items: center;
	padding: 5%;
	padding-right: 18%;
	color: #fff;
	height: 70%;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="project-container-content"] {
		padding-left: 15%;
		transform: none;
    }
}

/* end of right side project description template */



.project-container2 {
    width: 80%;
    height: 35%;
    top: 52%;
    left: 10%;
	transform: translateY(-50%);
    position: relative;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="project-container2"] {
		width: 75%;
		top: 60%;
		left: 15%;
    }
}

.projectTitle {
	width: 30%;
	min-width: 300px;
	display: inline-block;
	vertical-align: middle;
	height: 150px;
	margin-right: 40px;
	margin-bottom: 20px;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="projectTitle"] {
		padding-bottom: 20%;
		margin-right: 0;
		width: 90%;	
    }
}

.projectContent-closer {
	width: 65%;
	display: inline-block;
	vertical-align: middle;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="projectContent-closer"] {
		width: 100%;
    }
}


.project-TitleYellow {
	color: #EFFF00;
	font-size: 250%;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	line-height: 1em;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="project-TitleYellow"] {
		font-size: 1.8em;
    }
}

.project-TitleOrange {
    font-family: 'Roboto Condensed', sans-serif;
    color: #FF6E10;	
	font-size: 250%;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	line-height: 1em;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="project-TitleOrange"] {
		font-size: 1.8em;
    }
}

.project-TitleGreen {
    font-family: 'Roboto Condensed', sans-serif;
    color: #00FF7B;	
	font-size: 250%;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	line-height: 1em;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="project-TitleGreen"] {
		font-size: 1.8em;
    }
}

.project-TitleWhite {
    font-family: 'Roboto Condensed', sans-serif;
    color: #FFF;	
	font-size: 250%;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	line-height: 1em;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="project-TitleWhite"] {
		font-size: 1.8em;
    }
}

.project-TitlePink {
    font-family: 'Roboto Condensed', sans-serif;
    color: #FF00E0;	
	font-size: 250%;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	line-height: 1em;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="project-TitlePink"] {
		font-size: 1.8em;
    }
}

.project-TitleRed {
    font-family: 'Roboto Condensed', sans-serif;
    color: #E42A00;	
	font-size: 250%;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	line-height: 1em;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="project-TitleRed"] {
		font-size: 1.8em;
    }
}

.project-subTitle-White {
	color: #FFF;
	text-transform: uppercase;
	font-size: 140%;
	letter-spacing: 0.1em;
}

.linkYellow {
	color: #FFF;
	transition-duration: 0.4s;
}

.linkYellow:hover {
	text-decoration: none;
	
	color: #EFFF00;
}

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
	vertical-align: middle;
}

.fullscreen-bg-icanbankit {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
	vertical-align: middle;
}

.fullscreen-bg-sauer {
    width: 100%;
	height: 100%;
	background: url('../images/sauerbg.jpg') center center / cover no-repeat;
	overflow: hidden;
	position: fixed;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="fullscreen-bg-sauer"] {
		width: 100%;
		height: 100%;
		background: url('../images/sauberbg-mini.png') center center / cover no-repeat;
		overflow: hidden;
		position: fixed;
    }
}

.fullscreen-bg-itausocial {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
	vertical-align: middle;
}

.fullscreen-bg-iwastherewithyou {
    width: 100%;
	height: 100%;
	background: url('../images/iwastherewithyoubg.jpg') center center / cover no-repeat;
	overflow: hidden;
	position: fixed;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="fullscreen-bg-iwastherewithyou"] {
		width: 100%;
		height: 100%;		
		background: url('../images/iwastherewithyoubg-mini.png') center center / cover no-repeat;
		overflow: hidden;
		position: fixed;
    }
}

.fullscreen-bg-hyperisland {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
	vertical-align: middle;
}


.fullscreen-bg__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
    .fullscreen-bg {
        background: url('../images/storybg.png') center center / cover no-repeat;
    }

    .fullscreen-bg__video {
        display: none;
    }
}

.fullscreen-bg-icanbankit__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
    .fullscreen-bg-icanbankit {
        background: url('../images/icanbankitbg.png') center center / cover no-repeat;
    }

    .fullscreen-bg-icanbankit__video {
        display: none;
    }
}

.fullscreen-bg-itausocial__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
    .fullscreen-bg-itausocial {
        background: url('../images/itausocialbg.png') center center / cover no-repeat;
    }

    .fullscreen-bg-itausocial__video {
        display: none;
    }
}

.fullscreen-bg-hyperisland__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
    .fullscreen-bg-hyperisland {
        background: url('../images/hyperislandbg.png') center center / cover no-repeat;
    }

    .fullscreen-bg-hyperisland__video {
        display: none;
    }
}

video {
    &::-webkit-media-controls {
        display:none !important;
    }

    &::-webkit-media-controls-start-playback-button {
        display: none!important;
        -webkit-appearance: none;
    }
}

/* menu */

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}


/*timeline*/

#pag-white-container {
    background: #FFF;
	width: 100%;
	height: 100%;
	text-align: center;
	position: absolute;
}

#section-title {
	width: 90%;
	display: inline-block;
	font-size: 100%;
	font-weight: 700;
	text-transform: uppercase;
	margin-left: auto;
	margin-right: auto;
	margin-top: 6.6%;
	position: relative;
	letter-spacing: 2.5px;
}

.text14-not-bold {
	font-size: 100%;
	font-weight: 300;
	text-transform: uppercase;
}

.timeline {
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8%;
	width: 33%;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="timeline"] {
		width: 90%;
    }
}

#timeline-start {
	border-left: 1px dotted #9B9B9B;
	height: 50px;
}

#timeline-year {
	border-left: 5px solid #0507FF;
	font-size: 200%;
	font-weight: 700;
	color: #0507FF;
	text-align: left;
	text-indent: 45px;
	width: 100%;
}

#timeline-year-companies {
	border-left: 5px solid #0507FF;
	font-size: 90%;
	font-weight: 400;
	color: #0507FF;
	text-align: left;
	padding-left: 45px;
	width: 100%;
}

.timeline-text {
	text-align: left;
	padding: 50px;
	color: #9B9B9B;
	font-size: 110%;
	letter-spacing: 2px;
	line-height: 2;
	font-weight: 300;
	border-left: 1px dotted #9B9B9B;
	width: 90%;
	min-width: 250px;
}


#timeline-text-borderless {
	text-align: left;
	padding: 50px;
	color: #9B9B9B;
	font-size: 110%;
	letter-spacing: 2px;
	line-height: 2;
	font-weight: 300;
	width: 90%;
	min-width: 250px;
}

#timeline-end {
	border-left: 1px dotted #9B9B9B;
	height: 50px;
}

#timeline-white {
	height: 85px;
}



/* NEW HEADER - RESPONSIVE - UPDATE 27/06/2017 */



.section1 {
	width: 90%;
	margin: auto;
	vertical-align: middle;
	height: 100%;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="section1"] {
		height: 130%;
    }
}

#header {
	text-transform: uppercase;
	display: inline-block;
	width: 90%;
	margin: 0;
	padding: 5%;
	vertical-align: middle;
}

#menu-area {
	display: inline-block;
	width: 14%;
}

#menu-area-internal {
	position: fixed;
	top: 9%;
	left: 5%;
}

.website-title {
	display: inline-block;
	width: 70%;
	text-align: center;
	letter-spacing: 0.2em;
	font-size: 0.8em;
	font-weight: 700;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="website-title"] {
		width: 63%;
		font-size: 0.6em;
    }
}


@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="b-side"] {
		width: 60px;
		font-size: 0.6em;
    }
}

.b-side-internal {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	color: #1100FF;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-left: 83%;
	position: fixed;
	top: 78px;
	z-index: 590;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="b-side-internal"] {
		margin-left: 65%;
		top: 45px;
    }
}

.bt-b-side-internal {
	border: 2px solid #C005FF;
	background: transparent;
	color: #C005FF;
	font-weight: 700;
	text-transform: uppercase;
	width: 100px;
	height: 30px;
	letter-spacing: 0.3em;
	font-family: 'Roboto Condensed', sans-serif;
	line-height: 24px;
	transition-duration: 0.4s;
	cursor: pointer;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="bt-b-side-internal"] {
		width: 60px;
		font-size: 0.6em;
    }
}

.bt-b-side:hover {
	border: 2px solid #4A4A4A;
	background: #fff;
	color: #4A4A4A;
	cursor: pointer;
}

.highlight-home {
	width: 30%;
	margin: auto;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.1em;
	font-size: 2.5em;
	padding: 4%;
	color: #0507FF;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="highlight-home"] {
		font-size: 1.5em;
		padding: 0;
		margin: 0;
		width: 100%;
		padding-bottom: 20%;
		padding-top: 12%; 
    }
}

.bt-why {
	border: 2px solid #0507FF;
	background: #fff;
	color: #0507FF;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	height: 30px;
	width: 200px;
	font-size: 0.3em;
	font-family: 'Roboto Condensed', sans-serif;
	line-height: 22px;
	transition-duration: 0.4s;
}

.bt-why:hover {
	border: 2px solid #4A4A4A;
	background: #fff;
	color: #4A4A4A;
	cursor: pointer;
}

.stories {
	text-align: center;
	width: 80%;
	margin: auto;
	padding: 3%;
	position: relative;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="stories"] {
		padding: 0;
    }
}

.stories-link {
	width: 20%;
	min-width: 200px;
	vertical-align: middle;
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="stories-link"] {
        width: 100%;
		padding-bottom: 11%;
    }
}

.stories-author {
	text-transform: uppercase;
	font-weight: 300;
	text-align: left;
	font-size: 0.8em;
	letter-spacing: 0.1em;
	color: #4A4A4A;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="stories-author"] {
		text-align: center;
    }
}

.stories-title {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-align: left;
	font-weight: 400;
	color: #4A4A4A;
}

.stories-title:hover {
	text-decoration: none;
	color: #4A4A4A;
}

.stories-title:visited {
	color: #4A4A4A;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="stories-title"] {
		text-align: center;
    }
}

.bt-all-stories {
	border: 2px solid #4A4A4A;
	color: #4A4A4A;
	background: #fff;
	width: 150px;
	height: 30px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.1em;
	font-family: 'Roboto Condensed', sans-serif;
	transition-duration: 0.4s;
}

.bt-all-stories:hover {
	border: 2px solid #0507FF;
	background: #fff;
	color: #0507FF;
	cursor: pointer;
}

/* section 2 */

.section2-about {
	width: 90%;
	margin: auto;
	vertical-align: middle;
	height: 100%;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="section1"] {
		height: 130%;
    }
}

.about-greeting {
	margin: auto;
	width: 10%;
	text-align: center;
	letter-spacing: 0.1em;
	font-weight: 700;
	padding-bottom: 5%;
	padding-top: 5%;
	border-top: 0.8px solid #4A4A4A;
	color: #4A4A4A;
}

.about-title {
	text-align: center;
	width: 17%;
	font-size: 2.2em;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: auto;
	padding: 2%;
	color: #3CE7CD;
	text-transform: uppercase;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="about-title"] {
		font-size: 1.5em;
		padding: 0;
		margin: 0;
		width: 100%;
		padding-bottom: 12%;
		padding-top: 12%; 
    }
}

.about-content {
	width: 33%;
	line-height: 2em;
	letter-spacing: 0.1em;
	font-size: 1em;
	color: #4A4A4A;
	margin: auto;
	padding: 3%;
	font-weight: 400;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="about-content"] {
		font-size: 1em;
		padding: 0;
		margin: 0;
		width: 100%;
		padding-bottom: 12%;
		text-align: center;
    }
}

.timeline-button {
	width: 40%;
	margin: auto;
	text-align: center;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="timeline-button"] {
		width: 100%;
    }
}

.bt-timeline {
	border: 2px solid #3CE7CD;
	color: #3CE7CD;
	background: #fff;
	width: 230px;
	height: 30px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.2em;
	font-size: 0.7em;
	font-family: 'Roboto Condensed', sans-serif;
	line-height: 23px;
	transition-duration: 0.4s;
}

.bt-timeline:hover {
	border: 2px solid #4A4A4A;
	background: #fff;
	color: #4A4A4A;
	cursor: pointer;
}


.about-footer {
	text-align: center;
	padding-top: 7%;
	padding-bottom: 1%;
	font-size: 0.6em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #4A4A4A;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="about-footer"] {
		padding-top: 20%;
		padding-bottom: 10%;
    }
}