html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: 'Segoe UI',futura,sans-serif;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

ol, ul {
list-style: none;
}


/* Extended base styles (site specific)
*****************************************************************/

html {
overflow-y: scroll; /* always force a scrollbar in non-IE */
}
body {
overflow-x: hidden;
height: 4550px;

}
h1 {
color: #008800;
}
a, a:link,
a:active,
a:visited {
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
color:#21a97e;
outline: none;
text-decoration:none;
}
a:hover {
color:#008800;
}
img {
display:block;
}


/* Common shared styles
*****************************************************************/

hr {
margin: 0;
border: none;
border-top: 2px solid #008800;
border-bottom: 2px solid #008800;
height: 5px;
}
/* Nav
*****************************************************************/

nav#primary {
z-index: 5;
position: fixed;
top: 80px;
right: 32px;
margin-top: -10px;
}
nav#primary li {
position: relative;
height: 20px;
margin: 35px 0 0 0;
}
nav#primary a {
display: block;
width: 20px;
height: 20px;
text-indent: -9999px;
background: transparent url('../images/nav-dot.png') 0px 0px no-repeat;
}
nav#primary a:hover, nav#primary a.active {
background: transparent url('../images/nav-dot.png') 4px -20px no-repeat;
}
nav#primary h1 {
position: absolute;
right: 22px;
top: -7px;
display: none;
padding: 4px 20px 4px 7px;;
color: #000000;
white-space: nowrap;
background: #ffffff;
}
nav.next-prev {
margin: 20px 0 0 0;
}
a.prev,
a.next {
display: block;
width: 22px;
height: 22px;
text-indent: -9999px;
}
a.prev {
margin: 0 auto 0 auto;
background: transparent url('../images/arrow-up.png') 0 0 no-repeat;
}
a.next {
margin: 0 auto 0 auto;
background: transparent url('../images/arrow-down.png') 0 0 no-repeat;
}

/* Parallax
*****************************************************************/

/* content */
#content {
z-index: 4;
position: relative;
max-width: 940px;
padding: 0 10px;
margin: 0 auto;
line-height: 1.7;
}
#content article {
width: 300px;
}
#me ,
#equipment,
#influences,
#eme {
padding-top: 55px;
}
#me {
position: absolute;
top: 0px;
}
#equipment {
position: absolute;
top: 1090px;
}
#influences {
position: absolute;
top: 2180px;
}
#content h1 {
margin: 0 0 25px 0;
font-size: 60px;
font-weight: normal;
line-height: 65px;
}
#eme {
position: absolute;
top: 3270px;
}
/* foreground (ballons/landscape) */
#parallax-bg3 {
z-index: 3;
position: fixed;
left: 50%; /* align left edge with center of viewport */
top: 0;
width: 940px;
margin-left: -470px; /* move left by half element's width */
}
/* balloon */
#bg3-1 {
position: absolute;
top: 50px;
left: 355px;
}
#bg3-2 {
position: absolute;
top: 922px;
left: 321px;
}
#bg3-3 {
position: absolute;
top: 2200px;
left: 603px;
}
#bg3-4 {
position: absolute;
top: 2700px;
left: 100px;
}
/* midground (clouds) */
#parallax-bg2 {
z-index: 2;
position: fixed;
left: 50%; /* align left edge with center of viewport */
top: 0;
width: 1200px;
margin-left: -600px; /* move left by half element's width */
}
#bg2-1 {
position: absolute;
top: 162px;
left: 200px;
}
#bg2-2 {
position: absolute;
top: 300px;
left: 1150px;
}
#bg2-3 {
position: absolute;
top: 543px;
left: -35px;
}
#bg2-4 {
position: absolute;
top: 1280px;
left: 430px;
}
#bg2-5 {
position: absolute;
top: 1150px;
left: 950px;
}
/* background (clouds) */
#parallax-bg1 {
z-index: 1;
position: fixed;
left: 50%; /* align left edge with center of viewport */
top: 0;
width: 1200px;
margin-left: -600px; /* move left by half element's width */
}
#bg1-1 {
position: absolute;
top: 85px;
left: -270px;
}
#bg1-2 {
position: absolute;
top: 490px;
left:820px;
}
#bg1-3 {
position: absolute;
top: 1040px;
left: -220px;
}
#bg1-4 {
position: absolute;
top: 1020px;
left: 550px;
}