/*==---BROWSER RESET CODE TO HELP ELIMINATE INCONSISTENCIES BETWEEN BROWSERS---===*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
/*==---END BROWSER RESET CODE---===*/


html{
       height: 100%;
       min-height: 100%;
       -webkit-transition: .6s ease-in-out;
		-moz-transition: .6s ease-in-out;
		-ms-transition: .6s ease-in-out;
		transition: .6s ease-in-out;
		}
	
BODY {	
		height: 100%;
		min-height: 100%;
		margin:0;
		padding:0;
		font-family: "Open Sans", sans-serif; 
		font-size: 16px;
		background:rgb(255,255,255) url() repeat-y center center;
		background-size: 100%;
		background-attachment: fixed;
		-webkit-backface-visibility: hidden;
		-webkit-transition: .6s ease-in-out;
		-moz-transition: .6s ease-in-out;
		-ms-transition: .6s ease-in-out;
		transition: .6s ease-in-out;
		}




/*TYPOGRAPHY*/

H1 {
		margin: 0 auto; 
		padding: 0;
		padding-bottom: 40px; 
		font-family: "Open Sans", sans-serif;
		font-size: 400%; 
		font-weight: 300;
		text-align:center;
		color: rgb(30,30,30); 
		}
 
h2{ 
		margin: 0 auto;  
		padding: 3em 0;
		padding-bottom: 1em;
		font-size: 300%;
		letter-spacing: 0; 
		text-align:center;
		color: rgb(50,50,50); 
		}

H3 {
		font-size:200% ;
		font-weight: bold;
		text-align: center;
		color: rgb(100,100,100)
		}
H4 {		
		display: block;
		font-size: 180%;
		}

H5 {		
		display: block;
		font-size: 160%;
		}

H6 {		
		display: block;
		font-size: 140%;
		}

p {		
		position: relative;
		margin: 1em auto;
		padding: 0;
		font-size: 120%; 
		font-weight: 400;
		text-align: left;
		line-height: 130%; 
		letter-spacing: 0px; 
 		color: #161616; 
 		}

h1,h2,h3,h4,p {		
		position: relative;
		z-index: 15;
		}


	
/*===============--LINKS--===============*/

a {
		font-weight: 400;
		color: rgb(0, 150,120);
		-webkit-transition: .6s ease-in-out;
		-moz-transition: .6s ease-in-out;
		-ms-transition: .6s ease-in-out;
 		transition: .6s ease-in-out;
 		text-decoration: none;
		}


a:hover {
		color: rgb(50,50,50);
		-webkit-transition: .6s ease-in-out;
		-moz-transition: .6s ease-in-out;
		-ms-transition: .6s ease-in-out;
		transition: .6s ease-in-out;
		}



/*============--MAIN CONTENT--============*/

	
#topmenu {
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		height: 60px;
		border-bottom: dotted 3px;
		border-color: rgba(255,255,255,0.3);
		background:  rgba(255,255,255,.75);
		z-index: 50000;
		}

.content{
		position: relative;
		width: 90%;
		max-width: 1200px;
		margin: 0 auto;
		}

#topmenu h1 {
		position: absolute;
		left: 0;
		top: 0;
		text-align: left;
		color: rgb(80,80,80);
		font-size: 3em;
		z-index: 0;
		}

.socialmedia{
		position: relative;
		top: 0;
		float: right;
		width: auto;
		margin:  0 auto;
		padding:  0;
		background: rgba(255,255,255, 0);
		}

 .socialmedia img{
		padding:  0;
		max-width: 50px;
		}
	
nav a {
		display: block;
		color: transparent;
		width: 20px;
		height: 20px;
		outline: none;
		margin: 25px 0;
		border-radius: 50%;
		border: solid 1px rgba(255,255,255,1); 
		background: rgba(255,255,255, .5);
		text-indent: 2em;
		}

nav a:hover{
		color: rgb(255,255,255);
}

.scroller  nav {
		position: fixed;
		left: 15%;
		top: 40%;
		width: 20px;
		height: 20px;         
		white-space: nowrap;
		-webkit-transform: translateY(-40%);
		-moz-transform: translateY(-40%);
		-ms-transform: translateY(-50%);
		transform: translateY(-40%);
		z-index: 4000;
		}

.scroller nav a {
		background: rgba(255,255,255,.2);
		}

.scroller > nav a.current {
		background: rgba(255,255,255,1);
		}

/* background-attachment does the trick */
.scroller section {
		position: relative;
		background-position: top center;
		background-repeat: no-repeat;
		background-size: cover;
		}

.no-touch .scroller section {
		background-attachment: fixed;
		}

 #section0, #section1, #section2, #section3, #section4 {
  		height: 100%;
  		min-height: 900px;
  		border-bottom: dotted 3px;
  		border-color: rgba(255,255,255,.2);
  		background-position: 50% 50%;
  		background-repeat: no-repeat;
  		background-attachment: fixed;
  		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;
  		}

 #section2,  #section4 {

		border-bottom: dotted 3px;
		border-color: rgba(50,50,50,.2);
		}
	
#section0 {
  		background-image: url(../images/Parallax1.jpg);
		}
#section1 {
  		background-image: url(../images/Parallax2.jpg);
		}
#section2 {
  		background-image: url(../images/Parallax3.jpg);
		}
#section3{
  		background-image: url(../images/Parallax4.jpg);
		}
#section4 {
  		background-image: url(../images/Parallax5.jpg);
		}


#section0 h1{
		position: relative;
		top: 3em;
		font-size: 6em;
		color: rgb(255,255,255);
		}

article{
		top: 10em;
		background: rgba(255,255,255,.4);
		border-radius: 1%;
		}
		
article h2{
		text-align: center;
		font-size: 1.5em;
		}
		
article p{
		text-align: left;
		}

.narrow{
		position: relative;;
		width: 40%;
		max-width: 500px;
		margin:  0 auto;
		padding: 2em ;
		}

.wide{
		position: relative;
		width: 75%;
		max-width: 600px;
		margin: 0 auto;
		padding: 2em ;
		}

.left{
		float: left;
		font-size: 1.5em;
		text-align: left;
		}

.right{
		float: right;
		font-size: 1.6em;
		font-family: "helvetica neue", sans-serif;
		text-transform: uppercase;
		padding-left: 3em;
		text-align: right;
		}



/*===============--MEDIA QUERIES--===============*/

@media screen and (min-width: 2200px) {
.scroller  nav {
		left: 25%;
		}
	}


@media screen and (max-width: 1020px) {

body {
		font-size: 80%;
		}
	}


@media screen and (max-width: 900px) {

body {
		font-size: 70%;
		}
		
#topmenu {
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		height: 90px;
		z-index: 500;
		}

.content{
		width: 100%;
		}

.socialmedia{
		right: 0;
		top: 0;
		width: 160px;
		padding: 0;
		background: rgba(200,20,50,0);
		}

 .socialmedia img{
		max-width: 40px; 
		float: right;
		}

nav a {
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0 10px;
	background: transparent;
	text-indent:0;
	}

.scroller  nav {
	position: fixed;
	left: 10px;
	top: 70px;
	}

.scroller nav a {
	border: 0;
	background: transparent;
	font-size: 2em;
	color: rgb(255,255,255);
	}

.scroller > nav a.current {
	background: transparent;
	}

article{
		top: 20em;
		}
	}



@media screen and (max-width: 600px) {


#section0, #section1, #section2, #section3, #section4 {
  		height: 100%;
  		min-height: 800px;
		}

.narrow, .wide{
		min-width: 90%;
		max-width: 480px;
		margin: 0 auto;
		padding: 30px;
		}
	}