@charset "utf-8";
/* CSS Document */

body{
	margin: 0;
	min-width: 980px;
	padding: 0;
	background: #fafafa;
}

p{
	margin: 0 0 20px 0;
}

p, ul{
	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size-adjust:0.488;
	font-weight: 200;
	font-style:normal;
	letter-spacing: 1.5px;
	line-height: 1.5;
}

a{
	text-decoration: none;
	color: black;
	cursor: pointer;
}

a:hover{
	color: orange;
}

a:active{
	color: red;
}

.navbtn{
	color: black;
	text-decoration: none;
	font-size: 10px;
}

img{
	border: 0;
}

h1, #pixels{
	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 5em;
	font-weight:100;
	font-style:normal;
	letter-spacing: 1.5px;
	margin: 120px 0 20px 0;
}

h2{
	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size-adjust:0.531;
	font-weight:100;
	font-style:normal;
	letter-spacing: 1px;
	margin: 0 0 1vh 0;
	font-size: 2.8em;
}

#header h1, #pixels{
	color: black;
}

.float-left{
	float: left;
	margin: 0 0 0 20px;
	z-index: 200;
}

.float-right{
	float: right;
	margin: 0 20px 0 0;
	z-index: 200;
}

.center{
	font-size: 2.5em;
	padding: 80px 0 0 0;
	text-align: center;
}

#nav{
	list-style: none;
	position: fixed;
	right: 20px;
	text-align: right;
	z-index: 500;
}

#nav li{
	margin: 0 0 5px 0;
}

.navbtnbg{
	height: 20px;
}

.navbtnbg:hover{
	color: orange;
}

.navbtnbg:active{
	color: red;
}

#header, #intro, #second{
	width: 100%;
}

/* INTRO SECTION */

#intro{
	background: #fafafa;
	color: black;
	height: 880px;
	margin: 0 auto;
	padding: 0;
}

#archi, .downloads{
	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: .7em;
	font-style:normal;
	letter-spacing: 1.5px;
	line-height: 25px;
}

/* SECOND SECTION */

#second{
	background: white url(images/screen.jpg) 50% 0 no-repeat fixed;
	background-size:100%;
	color: black;
	height: 1500px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
}

.second-cont h2{
	margin-top: 100px;
	z-index: 300;
}

#second .bg{
	transform: scale(0.5, 0.5);
	background: url(images/iphone.gif) 50% 0 no-repeat fixed;
	height: 1867px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 1500px;
	z-index: 250;
	margin-top: 100px;
	pointer-events:none;
}

#floatphone{
	transform: scale(0.5,0.5);
	position: absolute;
	top: 1150px;
	pointer-events:none;
}

.more{
	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: .8em;
	font-weight:200;
	font-style:normal;
	letter-spacing: 1.5px;
	cursor: pointer;
}

/* THIRD SECTION */

#third{
	background: #fafafa url(images/wanders.jpg) 50% 0 no-repeat fixed;
	background-size:100%;
	color: black;
	height: 750px;
	padding: 100px 0 0 0;
}

/* FOURTH SECTION */

#fourth{
	background: white url(images/pique.jpg) 50% 0 no-repeat fixed;
	background-size: 100%;
	/*color: white;*/
	color: black;
	height: 1300px;
	margin: 0 auto;
	overflow: hidden;
	padding: 80px 0 0 0;
}

#badge{
	transform: scale(0.5,0.5);
	float: left;
	margin: -50px 0 0 -150px;
}

/* FIFTH SECTION */

#fifth{
	background: #fafafa;
	color: black;
	height: 750px;
	padding: 0;
}

#blurb{
	margin-top: 50px;
}

/* SIXTH SECTION */

#sixth{
	background: #eaeaea;
	height: 3.4vh;
	margin: 0 auto;
	width: 100vw;
	position: fixed;
	bottom: 0px;
	z-index: 200;
}

.footer p{
	padding: 0 3vw 0 2vw;
	font-weight: 200;
	font-size: 11px;
	line-height: 3.4vh;
}



/* SHARED */

.story{
	margin: 0 auto;
	overflow: auto;
	width: 980px;
}

.story .float-left, .story .float-right{
	padding: 100px 0 0 0;
	position: relative;
	width: 390px;
}

.fleft{
	float: left;
	display: inline-block;
}

.fright{
	float: right;
}

#invis{
	display: none;
}

/* MODALS */

.float{
	position: fixed;
	background: rgba(0,0,0,.5);
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 500;
	cursor: pointer;
}

.ftwo, .fthree, .ffour{
	display: none;
}

/*#intwo, #inthree, #infour{
	color: gray;
	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight:200;
	font-style:normal;
	letter-spacing: 1.5px;
}*/

.close{
	background: red;
	width: 20px;
	height: 20px;
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 500;
	transition: .2s ease-in-out;
}

.close:hover{
	background: black;
	transform: scale(1.3);
}

/* SLIDESHOW */

.slidecont{
	width: 80vw;
	height: 77vh;
	position: fixed;
	top: 0;
	left: 0;
	margin: 10vh 10vw 13vh 10vw;
	overflow:hidden;
	vertical-align: middle;
	background: white;
}

.slidecont ul{
	list-style:none outside none;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	width: auto;
	height: auto;
	position: fixed;
	top: 10vh;
}

.slidecont img{
	width: 80vw;
	height: 100%;
}

.slidecont li:first-child{
	display:list-item;
	position:absolute;
}

.slidecont li{
	position:absolute;
	display:none;
}

.slidecont .nextButton{
	height:72px;
	width:68px;
	position:absolute;
	background:url('images/buttons.png') no-repeat;
	top:50%;
	margin-top:-36px;
	cursor:pointer;
	z-index:2000;
	background-position:right top;
	right:0
}

.slidecont .nextButton:hover{
	background-position:right
	bottom;right:0;
}

.slidecont .prevButton{
	height:72px;
	width:68px;
	position:absolute;
	background:url('images/buttons.png') no-repeat;
	top:50%;
	margin-top:-36px;
	cursor:pointer;
	z-index:2000;
	background-position:left top;
	left:0
}

.slidecont .prevButton:hover{
	background-position:left
	bottom;left:0;
}

/* SOURCES:
http://codecall.net/2014/01/26/10-awesome-parallax-scrolling-tutorials-with-code/
http://andyshora.com/parallax.html
http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
http://www.franckmaurin.com/the-parallax-effects-with-jquery/
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website-part-2/
http://www.ianlunn.co.uk/
*/