* {
	padding: 0px;
	margin: 0px;
}

body {
	font-family: "Open Sans", sans-serif;
	font-size: 62.5%;
	background-color: #EFEFEF;
	overflow-x: hidden;
}

#nav-wrapper {
	position: absolute;
	width: 100%;
}

#main-nav {
	max-width: 960px;
	margin: 15px auto
}

#main-nav ul {
	float: right;
	margin-right: 15px;
}

#main-nav li {
	display: inline-block;
}

.selected-tab {
	border: 2px solid white;
}

#main-nav li a, #main-nav li a:link {
	display: inline-block;
	width: 100px;
	padding: 10px 0px 10px 0px;
	color: white;
	text-align: center;
	text-decoration: none;
}

#main-nav li a:hover {
	text-decoration: underline;
}

#main-nav li a span {
	font-size: 1.4em;
	font-weight: bold;
	text-transform: uppercase;
}

#slide-show {
	height: 70vh;
	min-height: 600px;
	max-height: 1080px;
	background: url("../images/slide-forest.jpg") top center no-repeat fixed;
	-webkit-box-shadow: inset 0px 100px 200px -65px rgba(0,0,0,0.75);
	box-shadow: inset 0px 100px 200px -65px rgba(0,0,0,0.75);
}

#slide-show #logo {
	position: relative;
	top: 50%;
  margin: auto 15px;
	color: white;
	font-weight: 300;
	font-size: 5em;
	text-align: center;
	text-shadow: 0px 0px 30px black;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

#content-wrapper {
	max-width: 960px;
	padding: 0px 10px;
	margin: 0px auto;
}

.article {
	margin: 26px 0px 16px 0px;
	font-size: 1.5em;
	background-color: white;
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
	        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
	-webkit-border-radius: 2px;
	        border-radius: 2px;
}

.article .title-article {
	padding: 10px 16px;
	color: #4A6544;
	font-size: 1.2em;
	text-transform: uppercase;
	border-left: 5px solid #4A6544;
}

.article .hr-line {
	margin: 0px 16px 10px 10px;
	border: 0px;
	border-bottom: 1px solid #EFEFEF;
}

.article .content-article {
	color: #757575;
	padding: 16px;
}

/* responsive layout */

@media (max-width: 560px) {
	#main-nav ul {
		float: none;
	}

	#main-nav ul li {
		display: block;
		width: 80%;
		margin: 0px auto;
		text-align: center;
	}

	#slide-show #logo {
		padding: 15px;
		font-size: 3em;
	}
}

/* clones */

#products #slide-show {
	background: url("../images/slide-coffee.jpg") top center no-repeat fixed;
}

#products .article .title-article {
    color: #63473C;
    border-left: 5px solid #63473C;
}

#eshop #slide-show {
	background: url("../images/slide-underground.jpg") top center no-repeat fixed;
}

#eshop .article .title-article {
    color: #3A565D;
    border-left: 5px solid #3A565D;
}

#aboutus #slide-show {
	background: url("../images/slide-people.jpg") top center no-repeat fixed;
}

#aboutus .article .title-article {
    color: #C58747;
    border-left: 5px solid #C58747;
}

#contact #slide-show {
	background: url("../images/slide-house.jpg") top center no-repeat fixed;
}

#contact .article .title-article {
    color: #AF0D13;
    border-left: 5px solid #AF0D13;
}

#sample1 #slide-show, #sample2 #slide-show, #sample3 #slide-show {
	background: url("../images/slide-sample.jpg") top center no-repeat fixed;
}

#sample1 .article .title-article, #sample2 .article .title-article, #sample3 .article .title-article {
    color: #377197;
    border-left: 5px solid #377197;
}