body{
	font-family: Tahoma, helvetica;
	font-size:15px;
	line-height:1.5;
	padding:0;
	margin:0;
	background-color:#f4f4f4
}

.container{
	width:80%;
	margin:auto;
	overflow:hidden;
}

@font-face { font-family: Poetsen; src: url('../PoetsenOne-Regular.ttf'); }

ul{
	margin:0;
	padding:0;
}

header{
	background:url('../img/header.jpg');
	color:#ffffff;
	padding-top:30px;
	min-height:70px;
	border-bottom:#000000 3px solid;
}

header a{
	font-family: Poetsen;
	color:#ffffff;
	text-decoration:none;
	font-size:20px;
}

header li{
	float:left;
	display:inline;
	padding: 0 20px 0 20px;
}

header #branding{
	float:left;
}	

header #branding img{
	width:450px;
}

header nav{
	float:right;
	margin-top:50px;
}

header .highlight, header .current a{
	color:#000000;
}

header a:hover{
	color:#000000;
}

#showcase{
	min-height:800px;
	background:url('../img/bg.jpg') no-repeat 0 -300px;
	background-color:#000000;
	background-position:center;
	text-align:right;
	color:#ffffff;
	border-bottom:#000000 3px solid;
}

#showcase h1{
	margin-top:400px;
	font-size:55px;
	margin-bottom:10px;
	text-shadow: 2px 2px #000000;
}

#showcase p{
	font-size:20px;
	text-shadow: 2px 2px #000000
}

#showcase2{
	min-height:800px;
	background:url('../img/bg2.jpg') no-repeat 0 -300px;
	background-color:#000000;
	background-position:center;
	text-align:right;
	color:#ffffff;
	border-bottom:#000000 3px solid;
}

#showcase2 h1{
	margin-top:400px;
	font-size:55px;
	margin-bottom:10px;
	text-shadow: 2px 2px #000000;
}

#showcase2 p{
	font-size:20px;
	text-shadow: 2px 2px #000000
}

#showcase3{
	min-height:800px;
	background:url('../img/bg3.jpg') no-repeat 0 -300px;
	background-color:#000000;
	background-position:center;
	text-align:right;
	color:#ffffff;
	border-bottom:#000000 3px solid;
}

#showcase3 h1{
	margin-top:400px;
	font-size:55px;
	margin-bottom:10px;
	text-shadow: 2px 2px #000000;
}

#showcase3 p{
	font-size:20px;
	text-shadow: 2px 2px #000000
}

#boxes{
	margin-top:20px;
}

#boxes h3{
	font-family: Poetsen;
}

#boxes .box{
	float: left;
	text-align:center;
	width:30%;
	padding:10px;
}

#boxes .box img{
	width:300px;
}

#boxes .boximg1 {
	float: left;
	text-align:center;
	width:30%;
	padding:10px;
	transition: .3s background ease;
    background: url('../img/pic-01.png');
	background-position:center;
	height:300px;
    background-size: cover;
}

#boxes .boximg1:hover{
    background: url('../img/pic-01h.jpg');
    background-size: cover;
}

#boxes .boximg1:active{
    background: url('../img/pic-01h.jpg');
    background-size: cover;
}

#boxes .boximg2 {
	float: left;
	text-align:center;
	width:30%;
	padding:10px;
	transition: .3s background ease;
    background: url('../img/pic-02.png');
	background-position:center;
	height:300px;
    background-size: cover;
}

#boxes .boximg2:hover{
    background: url('../img/pic-02h.jpg');
    background-size: cover;
}

#boxes .boximg2:active{
    background: url('../img/pic-02h.jpg');
    background-size: cover;
}

#boxes .boximg3 {
	float: left;
	text-align:center;
	width:30%;
	padding:10px;
	transition: .3s background ease;
    background: url('../img/pic-03.png');
	background-position:center;
	height:300px;
    background-size: cover;
}

#boxes .boximg3:hover{
    background: url('../img/pic-03h.jpg');
    background-size: cover;
}

#boxes .boximg3:active{
    background: url('../img/pic-03h.jpg');
    background-size: cover;
}

#boxes .boximg4 {
	float: left;
	text-align:center;
	width:30%;
	padding:10px;
	transition: .3s background ease;
    background: url('../img/pic-04.png');
	background-position:center;
	height:300px;
    background-size: cover;
}

#boxes .boximg4:hover{
    background: url('../img/pic-04h.jpg');
    background-size: cover;
}

#boxes .boximg4:active{
    background: url('../img/pic-04h.jpg');
    background-size: cover;
}
	
#boxes .boximg5 {
	float: left;
	text-align:center;
	width:30%;
	padding:10px;
	transition: .3s background ease;
    background: url('../img/pic-05.png');
	background-position:center;
	height:300px;
    background-size: cover;
}

#boxes .boximg5:hover{
    background: url('../img/pic-05h.jpg');
    background-size: cover;
}

#boxes .boximg5:active{
    background: url('../img/pic-05h.jpg');
    background-size: cover;
}
	
#boxes .boximg6 {
	float: left;
	text-align:center;
	width:30%;
	padding:10px;
	transition: .3s background ease;
    background: url('../img/pic-06.png');
	background-position:center;
	height:300px;
    background-size: cover;
}

#boxes .boximg6:hover{
    background: url('../img/pic-06h.jpg');
    background-size: cover;
}

#boxes .boximg6:active{
    background: url('../img/pic-06h.jpg');
    background-size: cover;
}
	
#boxes .boximg7 {
	float: left;
	text-align:center;
	width:30%;
	padding:10px;
	transition: .3s background ease;
    background: url('../img/pic-07.png');
	background-position:center;
	height:300px;
    background-size: cover;
}

#boxes .boximg7:hover{
    background: url('../img/pic-07h.jpg');
    background-size: cover;
}

#boxes .boximg7:active{
    background: url('../img/pic-07h.jpg');
    background-size: cover;
}
	
#boxes .boximg8 {
	float: left;
	text-align:center;
	width:30%;
	padding:10px;
	transition: .3s background ease;
    background: url('../img/pic-08.png');
	background-position:center;
	height:300px;
    background-size: cover;
}

#boxes .boximg8:hover{
    background: url('../img/pic-08h.jpg');
    background-size: cover;
}

#boxes .boximg8:active{
    background: url('../img/pic-08h.jpg');
    background-size: cover;
}
	
#boxes .boximg9 {
	float: left;
	text-align:center;
	width:30%;
	padding:10px;
	transition: .3s background ease;
    background: url('../img/pic-09.png');
	background-position:center;
	height:300px;
    background-size: cover;
}

#boxes .boximg9:hover{
    background: url('../img/pic-09h.jpg');
    background-size: cover;
}

#boxes .boximg9:active{
    background: url('../img/pic-09h.jpg');
    background-size: cover;
}

footer{
	border-top:#000000 3px solid;
	padding:20px;
	margin-top:20px;
	color:#ffffff;
	background-color:#ff0000;
	text-align:center;
}

footer a{
	text-decoration:none;
	color:#000000;
}

@media(max-width: 800px){
	header #branding,
	header #branding img,
	header nav li,
	#boxes .box,
	#boxes .boximg1,
	#boxes .boximg2,
	#boxes .boximg3,
	#boxes .boximg4,
	#boxes .boximg5,
	#boxes .boximg6,
	#boxes .boximg7,
	#boxes .boximg8,
	#boxes .boximg9,
	#showcase{
		float:none;
		text-align:center;
		width:100%;
	}
	
	header nav{
		float:none;
		text-align:center;
		width:100%;
		margin-top:-10px;
	}
	
	header{
		padding-bottom:15px;
		height:100%;
	}
	

}