@charset "utf-8";
/* CSS Document */

header {
	width: 100%;
	height: 120px;
	padding-bottom: 10px;
	background-color: #cbc096;
}

#header-content {
	width: 100%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

#header-content img {
	padding-top: 10px;
	padding-left: 20px;
}

nav {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 85px;
	font-size: 20px;
	padding-left: 75px;
	padding-top: -50px;
}

nav ul {
	padding-left: 31.25%; /* 300px / 960 x 100 */
	padding-bottom: 30px;
}

nav ul li{
	display: inline-block;
	padding-left: 1.04166667%; /* 10px / 960 x 100 */
	padding-right: 1.04166667%; /* 10px / 960 x 100 */
}

nav ul li a {
	text-decoration: none;
	display: block;
	height: 30px;
	padding-top: 15px;
}

nav ul li:hover {
	background-color: #003d4c;
}

nav ul li a:hover {
	color: white;
}

nav a:link {
	color: black;
	text-decoration: none;
}

#slideshow-wrapper {
	width: 100%;
	height: 330px;
}

#slideshow {
	width: 100%;
	height: 300px;
	overflow: hidden;
	white-space: nowrap;
}

#slideshow img {
	width: 100%;
	height: 100%;
	display: inline-block;
}

#circle-nav {
	margin-top: -50px;
	text-align: center;
}

.circle {
	display: inline-block;
	background-color: lightgrey;
	width: 12px; /* 12px / 960 x 100 = 1.25% */
	height: 12px;
	border-radius: 50%;
	margin-right: 1.5625%; /* 15px / 960 x 100 */
}

#index-content {
	width: 100%;
	height: 100px;
}

#index-content h1 {
	color: #003d4c;
	font-size: 30px;
	text-align: center;
}

#wrapper-index {
	width: 100%;
	height: 400px;
	text-align: center;
}

#3-column-layout {
	column-count: 3;
	width: 100%;
}

.column-box {
	text-align: center;
	display: inline-grid;
	padding: 30px;
	background-color: #cbc096;
	border: 2px black solid;
	height: 250px;
	width: 250px;
	margin: 20px;
}

.column-box h3 {
	font-size: 28px;
	text-transform: uppercase;
	text-align: center;
	color: #003d4c;
	padding-top: 10px;
	padding-bottom: 10px;
}

.column-box p {
	font-size: 14px;
	text-align: center;
	padding-bottom: 30px;
	line-height: 25px;
	width: 250px;
}

.column-box a {
	background-color: #003d4c;
	color: white;
	padding: 10px;
	text-decoration: none;
	width: 50%;
	margin: auto;
}

#wrapper-white {
	width: 960px;
	height: 300px;
	background-color: #fff;
	display: flex;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 100px;
}

#wrapper-white h1 {
	font-size: 36px;
	padding-bottom: 30px;
	text-transform: capitalize;
}

#wrapper-white p {
	font-size: 20px;
}

section {
	width: 580px;
	padding-right: 100px;
	margin-top: auto;
	margin-bottom: auto;
}

h1 {
	font-size: 36px;
	color: #003d4c;
	text-align: center;
	padding: 30px;
}

aside {
	width: 400px;
	height: 250px;
	text-align: center;
	border: solid 3px black;
	position: relative;
	background-color: #cbc096;
}

aside h2 {
	color: #003d4c;
	padding: 25px;
	font-size: 25px;
}

aside p {
	font-size: 30px;
}

#wrapper-booking {
	width: 100%;
}

#wrapper-booking h1 {
	font-size: 36px;
	color: #003d4c;
	text-align: center;
	padding: 30px;
}

#wrapper-booking h3 {
	font-size: 20px;
	color: black;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 30px;
}

form {
	padding-top: 20px;
	padding-bottom: 20px;
	width: 60%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}

fieldset {
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 15px;
}

#booking-form {
	border: #003d4c 2px solid;
}

fieldset input {
	margin-bottom: 20px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

fieldset label {
	width: 100%;
	text-align: right;
}






footer{
	width: 100%;
	background-color: #16325a;
	display: inline;
}

#footer-content{
	position: absolute;
	width: 100%;
	background-color: #003d4c;
}

#footer-left{
	text-align: left;
	float: left;
	padding-left: 10%;
	padding-top: 50px;
	padding-bottom: 50px;
}

#footer-right{
	text-align: right;
	float: right;
	padding-right: 10%;
	padding-top: 50px;
	padding-bottom: 50px;
}

footer h3{
	color: white;
	font-size: 1em; /* 16px / 16 */
	text-transform: uppercase;
	font-family: 'Lato', sans-serif;
}

footer p{
	font-size: 1em; /* 16px / 16 */
	color: white;
	opacity: 0.7;
	font-family: 'Lato', sans-serif;
}


@media only screen and (max-width: 1024px) {
	
	#header-content {
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		position: relative;
	}
	
	#header-content img {
		display: inherit;
	}
	
	nav ul {
		position: inline;
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
	
	nav ul li:hover {
		background-color: #003d4c;
		color: white;
	}
	
	#slideshow {
		width: 100%;
		height: 300px;
		margin-bottom: -30px;
	}
	
	#circle-nav {
		display: inline-block;
		margin-right: auto;
		margin-left: auto;
		width: 100%;
	}
	
	.circle {
		width: 9px;
		height: 9px;
	}
	
	section {
		margin-left: 30px;
	}
	
	section h1 {
		font-size: 1.25em; /* 20px / 16px */
	}
	
	#index-content {
		height: 100%;
	}
	
	#index-content h1 {
		font-size: 1.375em;
	}
	
	#wrapper-index {
		height: 100%;
	}
	
	#3-column-layout {
		column-count: 1;
		position: relative;
		margin-right: auto;
		margin-left: auto;
	}
	
	#wrapper-white {
	width: 100%;
	height: 100%;;
	background-color: #fff;
	padding-bottom: 100px;
	display: block; 
}

#wrapper-white h1 {
	font-size: 36px;
	padding-bottom: 30px;
	text-transform: capitalize;
}

#wrapper-white p {
	font-size: 20px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

section {
	width: 70%;
	padding-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

aside {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	height: 200px;
	text-align: center;
	border: solid 3px black;
	background-color: #cbc096;
}
	
	#wrapper-booking {
		text-align: center;
		margin-right: auto;
		margin-left: auto;
	}
	
	footer {
		width: 100%;
		background-color: #003d4c;
		display: inline;
	}
	
	#footer-content {
		position: absolute;
		width: 100%;
		background-color: #003d4c;
	}
	
}


@media only all and (max-width:480px) {
	
	#header-content img {
		position: inherit;
		margin-right: auto;
		margin-left: auto;
	}
	
	nav {
		
	}
	
	nav ul {
		display: contents;
	}
	
	nav ul li {
		
	}
	
	nav ul li a {
		text-align: center;
		width: 100%;
		background-color: #003d4c;
		color: white;
		margin-top: 1px;
	}
	
	#slideshow {
		height: 200px;
		padding-top: 150px;
		margin-bottom: -30px;
	}
	
	#circle-nav {
		display: inline-block;
		margin-right: auto;
		margin-left: auto;
		width: 100%;
		padding-bottom: -30px;
	}
	
	#wrapper-index {
		display: inherit;
		padding-top: 20px;
		margin-right: auto;
		margin-left: auto;
		align-content: center;
		width: 100%;
		margin-top: 400px;
	}
	
	section {
		width: 100%;
		float: none;
	}
	
	aside {
		width: 90%;
		height: 70%;
		margin-top: 80px;
		margin-right: auto;
		margin-left: auto;
	}
	
	#3-column-layout {
		column-count: 1;
		position: relative;
		margin-left: auto;
		margin-right: auto;
	}
	
	.column-box {
		padding-bottom: 10px;
	}
	
	#wrapper-booking {
		text-align: center;
		margin-right: auto;
		margin-left: auto;
	}
	
	aside {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	height: 300px;
	text-align: center;
	border: solid 3px black;
	background-color: #cbc096;
}
	
	footer {
		width: 100%;
		background-color: #003d4c;
		display: inline;
	}
	
	#footer-content {
		position: absolute;
		width: 100%;
		background-color: #003d4c;
	}
	
}