html, body{
	height: 100%;
	font-size: 10px;
}
h1{
	font-size: 10em;
	color: #17434f;
	font-family: "calluna", serif;
}
h1 span.light, h2 span.light, .light{
	font-weight: 400;
}
h1 span.brown, h2 span.brown, .brown{
	color:#b39866;
}
h2{
	font-size: 6.6em;
    font-family: "calluna", serif;
    color: #17434f;
    margin-bottom: 70px;
}
p{
	font-family: "calluna", serif;
	color: #17434f;
	font-size: 3.8em;
	border-top: 1px solid #b39866;
    padding-top: 28px;
}
a{
	text-decoration: none;
}
#top{
	background: #17434f;
	position: fixed;
	left: 0;
	right: 0;
	height: 25px;
	top: 0;
	width: 100%;
}
.content{
	width: 700px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 100%;
}
@media screen and (max-width: 767px){
	html, body{
		font-size: 50%;
	}
	.content{
		width: 80%;
	}
}
@media screen and (min-width: 320px) and (max-width: 430px){
	html, body{
		font-size: 50%;
	}
	.content{
		width: 80%;
	}
}
@media screen and (min-width: 431px) and (max-width: 530px){
	html, body{
		font-size: 55%;
	}
	.content{
		width: 70%;
	}
}
@media screen and (min-width: 531px) and (max-width: 650px){
	html, body{
		font-size: 55%;
	}
	.content{
		width: 60%;
	}
}
@media screen and (min-width: 651px) and (max-width: 766px){
	html, body{
		font-size: 55%;
	}
	.content{
		width: 50%;
	}
}

