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

/***
	dark blue 34678C
	light blue B8D1E0
***/



body {
	-webkit-font-smoothing: antialiased; 
	 -moz-osx-font-smoothing: grayscale;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica,  "sans-serif";
	margin: 0;
	height: auto;


}
.clearfix {
	clear: both;}

#wrapper {
	max-width: 1256px;
	margin-left: auto;
	margin-right: auto;
}
img {
	height: auto;
}
/**type***/
h1, h2, h3 {
	font-weight: normal;}

h1 {
	font-size: 65px;
	color: white;}
h2 {
	color: #34678C;
	font-size: 42px}
h3 {
	font-family: Georgia, Constantia, "Lucida Bright", "DejaVu Serif",  "serif";
	font-size: 36px;
	letter-spacing: 4px;
	color: white;}

label {
	font-family: Georgia, Constantia, "Lucida Bright", "DejaVu Serif",  "serif";}

#wrap p {
	font-size: 1.3em;
	line-height: 1.4;
}


/****links and buttons **/

a:link {
	color: #34678C;
	text-decoration: none;
}
ul {
	list-style-type: none;
	padding: 0px;
}
li {
	font-size: 23px;
}

a.button, .button {
	background-color: #34678C;
	font-size: 18px;
	color: white;
	padding: 5px 25px;
	border-radius: 8px;
	border: none;
}
a.book {
	background-color: #2F332C;
	color: white;
	font-size: 15px;
	padding: 5px 25px;
	border-radius: 8px;
	border: none;}

/**** header ****/

header {
	margin-bottom: 10px;
}
#logo {
	float: left;
	margin-left: 40px;
	margin-top: 15px;
	
}
#header {
	float: right;
	margin-top: 27px;
	
}
header li {
	display: inline-block;
	margin-right: 40px;
}

a.burger {
	display: none;}


/***banner*******/

#valprop {
	background-image: url("images/banner.jpg");
	height: 595px;
	background-size: cover;
	position: relative;
}
.val {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translateY(-55%) translateX(-50%);	
}
.val h1 {
	margin-left:0%;
	margin-bottom: 15px;
}

/***mission*******/

#mission {
	background-color: #B8D1E0;
	max-width: 1183px;
	width: 94.187898089171975%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	margin-bottom: 70px;
	display: flex;
}

#smile {
	background-image: url("images/mission.jpg");
	background-position: center;
	max-width: 514px;
	width: 43.448858833474218%;
	
	
}


#wrap {
	max-width: 500px;
	width: 39.808917197452229%;
	margin-left:auto;
	margin-right: auto;

}





/** activities*****/

#activities {
	margin-top: 100px;
}

#activities h2 {
	text-align: center;
}
#sections img {
	width: 100%;
}

.raft, .swim, .ballon {
	display: inline-block;
	position: relative;
	max-width: 400px;
	height: 360px;
	width: 31.847133757961783%;
}


.raft, .swim {
	margin-right: 23px;
	margin-right: 1.831210191082802%;
} 


.raft h3, .swim h3, .ballon h3{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);}




/** events ******/

#events {
	max-width: 1157px;
	width: 92.117834394904459%;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	
}

.events {
	display: inline-block;
	position: relative;
	width: 536px;
}


.events a {
	position: absolute;
	top: 53%;
	left: 50%;
	transform: translateY(-53%) translateX(-50%);
}

/** form ****/
.reservation {
	max-width: 522px;
	width: 41.560509554140127%;
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);

}
.form-title {
	background-color: #B8D1E0;
	font-family: Arial, "Helvetica Neue", Helvetica, "sans-serif";
	text-align: center;
	margin: 0px;
	padding: 10px;
	
	
}
form {
	
	max-width: 522px;
	height: 356px;
	border-color: #B8D1E0;
	border-style: solid;
	font-family: Georgia, Constantia, "Lucida Bright", "DejaVu Serif", "serif";
	position: relative;
	
}

.box {
	width: 422px;
	top: 60%;
	left: 50%;
	transform: translateY(-60%) translateX(-50%);
	position: absolute;
}

.text {
	float: left;
	width: 86px;
	font-size: 1.2em
	
}

.field {
	width: 322px;
	padding: 5px;
	border: solid thin #34678C;
	margin-bottom: 14px;

	
}
#submit {
	float: right;
	margin-top: 10px;
	padding-left: 50px;
	padding-right: 50px;
}

/*** footer*****/

footer {
	width: 100%;
	background-color: #34678C;
	color: white;
	padding: 45px 0px 30px;
	margin-top: 80px;

}
#wrappedfoot {
	max-width: 1183px;
	margin-left: auto;
	margin-right: auto;
	
}
#leftfoot {
	float: left;
}
#leftfoot a {
	color: white;
}
#leftfoot li {
	line-height: 1.6;
}
#footer {
	margin-bottom: 25px;
}
#rightfoot {
	float: right;
	text-align: right;
}
#rightfoot p {
	line-height: 1.8;
	font-size: 1.2em;
}

.socials li {
	display: inline-block;
	margin-left: 45px;
}



/****** media queries ****/

@media screen and (max-width: 1150px) {
	.raft, .swim, .ballon {
		float: left;
	}
	.raft img, .swim img, .ballon img {
		max-width: 350px;
	}
	
	form h2 {
		font-size: 36px;
	}
	.box {
		width: 350px;
	}
	.field {
		width: 250px;
	}
	#wrappedfoot {
		max-width: 1000px;
	}
	
	

	
	
}/*** 1150 ***/



@media screen and (max-width: 1024px) {
	
	
	#events {
		margin-top: 15px;
		display: block;
		text-align: center;
	}
	.reservation{
		position:inherit;
		transform: none;
		margin-top: 30px;
		margin-left: auto;
		margin-right: auto;
		width: 522px;
	}
	
	
	
}/*** 1024 ***/



@media screen and (max-width: 800px) {
	
	a.burger {
		display: inline-block;
		float: right;
		margin-top: 28px;
		margin-right: 25px;
	}
	#header {
		display: none;}
	h1 {
		font-size: 78px;}
	h2 {
		font-size: 60px;
	}
	
	#mission {
		background-color:white;
	}
	#smile {
		display: none;
	}
	#wrap {
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		
	}
	#wrap h2 {
		text-align: center;
	}
	#wrap p {
		font-size:1.5em;
		border-top: solid 4px #B8D1E0;
		border-bottom: solid 4px #B8D1E0;
		padding: 10px 0;
	}
	
	
	
	.raft, .swim, .ballon {
		float: none;
		width: 100%;
		max-height: 405px;
		background-color: darkgoldenrod;
		max-width: 800px;
		margin-bottom: 17px;
	}
	.raft {
		background-image: url("images/thrill.jpg");
		background-position:top;}
	.swim {
		background-image: url("images/swim.jpg");}
	.ballon {
		background-image: url("images/adventure.jpg");}
	
	.raft img, .swim img, .ballon img {
		display: none;}
	.raft h3, .swim h3, .ballon h3 {
	left: 10%;
		transform: translateX(-10%);
		font-size: 3em;
		letter-spacing: 7px
	}
	
	#events {
		margin-top: 70px;
	}
	
	
	#footer {
		height: auto;
		float: none;
	}
	#leftfoot {
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		text-align: center;
		margin-bottom: 10px;
	}
	#leftfoot li{
		font-size: 2.5em;
		margin-bottom: 20px;
	}
	#leftfoot ul {
		margin-bottom: 50px;
	}
	#rightfoot {

		width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	#rightfoot p {
		margin-bottom: 30px;
	}
	#rightfoot li {
		margin-left: 25px;
		margin-right: 25px;
	}
	 
}