@font-face {
    font-family: 'lucida_brightdemibold';
    src: url('fonts/lucidabrightdemibold-webfont.woff2') format('woff2'),
         url('fonts/lucidabrightdemibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.font-lucida-demi { font-family: 'lucida_brightdemibold'; }

@font-face {
    font-family: 'lucida_brightregular';
    src: url('fonts/lucidabright-webfont.woff2') format('woff2'),
         url('fonts/lucidabright-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
.font-lucida { font-family: 'lucida_brightregular'; }


html,
body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	overflow-x: hidden;
}

#container {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	position: relative;
}

a {
	position: absolute;
	right: 50px;
	top: 50px;
	width: 169px;
	height: 42px;
	line-height: 42px;
	text-decoration: none;
	color: #fff;
	font-size: 16px;
	background-color: #CA6862;
	border: none;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 35px;
}

section#top,
section#btm {
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
}

section#top .container ,
section#btm .container {
	height: 100vh;
	width: 100%;
	max-width: 1015px;
	margin: 0 auto;
	text-align: center;
}
section#top .container {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: 1fr auto 1fr;
	grid-template-areas: ". . ." ". topmiddlecenter ." ". . .";
}
section#btm .container {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: 1fr auto 1fr;
	grid-template-areas: ". . ." ". btmmiddlecenter ." ". . .";
}

section#top .container .middle {
	width: 100%;
	max-width: 1015px;
	margin: 0 auto;
	text-align: center;
	grid-area: topmiddlecenter;
}
section#btm .container .middle {
	width: 100%;
	max-width: 1015px;
	margin: 0 auto;
	text-align: center;
	grid-area: btmmiddlecenter;
}

section#top img ,
section#btm img {
	width: 100%;
	max-width: 625px;
	clear: both;
}
section#top img {
	max-width: 625px;
}
section#btm img {
	max-width: 340px;
}

section#top {
	position: relative;
	background-color: #F8AD00;
	background-image: url(/img/sunset.jpg);
	background-size: cover;
	background-position: bottom;
	color: #fff;
}

section#top p {
	display: inline-block;
	font-size: 29.26px;
	line-height: 38.5px;
	width: 100%;
	max-width: 922px;
	margin: 30px 0 0;
	padding: 0;
}

section#top .aboutRow {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	text-align: center;
}

section#top .aboutRow #about {
	width: 62px;
	color: #E8D7A3;
	font-size: 20px;
	line-height: 20px;
	margin: 0 auto 68px;
	cursor: pointer;
}
section#top .aboutRow #about svg {
	margin-top: 34px;
}

section#btm {
	background-color: #E6E3D7;
	background-image: url(/img/dock.jpg);
	background-size: cover;
	background-position: bottom;
	color: #534B40;
}

section#btm p {
	font-size: 20px;
	line-height: 38.5px;
	width: 100%;
	max-width: 922px;
}


@media (max-width: 475px) {

	a {
		position: relative;
		margin-left: 50%;
		right: auto;
		left: auto;
		top: auto;
		transform: translateX(-50%);
	}
	section#top .container {
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: 33% auto 33%;
		grid-template-areas: "." "topmiddlecenter" ".";
	}
	section#btm .container {
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: 33% auto 33%;
		grid-template-areas: "." "btmmiddlecenter" ".";
	}
	section#top p ,
	section#btm p {
		width: 75%;
		margin-left: auto;
		margin-right: auto;
	}
	section#top img {
		width: 90%;
		max-width: 625px;
	}
	section#top p {
		font-size: 20px;		
		line-height: 30px;
		max-width: 455px;
	}
	section#btm p {
		font-size: 11px;
		line-height: 20px;
		max-width: 580px;
	}
	section#btm img {
		margin-bottom: 20px;
		width: 90%;
		max-width: 340px;
	}
	section#top .aboutRow #about {
		font-size: 22px;
		line-height: 20px;
	}
	section#top .container .middle {
		margin-top: -50px;
	}
}