/* Everything */

* { margin:0; padding:0; }

a { text-decoration:none; color:inherit; }

body { font-family: 'Roboto', sans-serif; }

#wrapper { margin: 0 auto; width: 1024px; }

/* Header */

header { background:#ecf0f1; width:100%; height:125px;}

header h1 {font-family: 'Eczar', serif; float:left; padding-top:10px;   
background: -webkit-linear-gradient(#1abc9c, #8e44ad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

/* Navigation */


nav { float:right; padding-top:51px	; }

nav ul { list-style-type: none; }

nav ul li { font-weight: bolder; margin:0 0 0 7px; display:inline-block; color:white; padding:10px 10px 10px 10px; border-radius:5px; background: #1abc9c;
background: -moz-linear-gradient(-45deg,  #1abc9c 0%, #8e44ad 100%);
background: -webkit-linear-gradient(-45deg,  #1abc9c 0%,#8e44ad 100%);
background: linear-gradient(135deg,  #4bc725 0%,#00b09b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1abc9c', endColorstr='#8e44ad',GradientType=1 );
}

nav ul li:hover { background:#0f9427; }

/* Content */

section { position:relative; color:#fff; width:100%; min-height: 500px; }

section h1 {}

section p { padding-top: 30px; width:390px; }

#wallpaper { 
  position:absolute;
  top:0;
  left:0;
  width: 100%; height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
 }

/* Boxes for text */

section span { padding:25px; position:absolute; z-index:200;}

section span.orange { background:#e74c3c;  }

section span.green { background: #1abc9c;  }

section span.purple { background: #8e44ad;  }


/* Footer */

footer { font-weight:300; color:white; background:#27ae60; width:100%; height:50px; }

footer #wrapper { padding-top:15px; }