/* font-family: 'Raleway', sans-serif;
font-family: 'Heebo', sans-serif; */

#wrapper {
	width: 100%;
	height: 3000px;
	margin:auto;
}

header {
	position: fixed;
	background-color:rgba(131,131,131,0.15);
	width: 100%;
	height: 65px;
	z-index: 100;
}

.icons {
	display: inline-block;
	margin-right: 20px;
	position: relative;
	left: 70%;
	top:5px;
	background-color:rgba(255,255,255,0.3);
	border-radius: 25px;

}

#logo {
	position: relative;
	float: left;
	top: 5px;
}

h1 {
	font-family: 'Raleway', sans-serif;
	font-size: 35pt;
	text-transform: capitalize;
	position: absolute;
	left: 50px;
	top:5px
}

#turtles {
	background-color: #b0d2ca;
	width: 100%;
	height:2500px;
}

.illustration {
	position: relative;
	left: -600px;
	float: right;
	opacity: 0.8;
}

.illustration2 {
	position: relative;
	left: -400px;
	top: -100px;
	float: right;
	opacity: 0.8;
}

float{
	clear: both;
}

.text1 {
	width: 540px;
	position: relative;
	left: 50%;
	top: 150px;
}

h2 {
	font-family: 'Raleway', sans-serif;
	font-size: 22pt;
	font-weight: bold;
}

h3 {
	font-family: 'Raleway', sans-serif;
	font-size: 12pt;
	line-height: 13pt;
	font-weight: 600;
}

p {
	font-family: 'Heebo', sans-serif;
	font-size: 11pt;
	line-height: 14pt;
	text-align: justify
}

#section1 {
	position: relative;
	top: 100px;
}

#section2 {
	position: relative;
	top: 700px;
	display: grid;
	grid-template-columns: 455; 
 	grid-gap: 20px; 
}

#section3 {
	position: relative;
	top: 800px;
}

.slider {
	height: 582px;
	width: 455px;
	position: absolute;
	left: 750px;
}


.text2 {
	width: 455px;
	height: 582px;
	position:relative;
	left: 150px;
}

.wrapper {
	display: grid;
	grid-template-columns: 340px 340px 340px; 
 	grid-gap: 20px;
	position: absolute;
	right: 150px;
	top: 250px;
}

#whales {
	background-color: #B0BFD2;
	width: 100%;
	height: 2500px;
}



#section4 {
	position: relative;
	top: 100px;
}

#section5 {
	position: relative;
	top: 200px;
	display: inline-block;
	margin-right: 20px;
}

#section6 {
	position: relative;
	top: 300px;
}
.slider2 {
	width: 1120px;
	height: 420px;
	float: right;
	position: relative;
	left: -100px;
	top: -100px;
	
}

.img{
	position: absolute;
}

.slider div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.text3 {
	width: 540px;
	position: relative;
	left: 670px;
	top: 150px;
}

.text4 {
	width: 540px;
	position: relative;
	left: 130px;
}

.text5 {
	width: 540px;
	float: right;
	position: relative;
	top: -150px;
	left: -100px;
}

/* LIGHT BOX */

#modal {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(58, 58, 58, 0.7);
	display: none;
}

#box {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 358px;
	width: 580px;
	background: url(../png/loading.gif) no-repeat center,white;
	padding: 10px;
	transform: translate(-50%, -50%);
}

#image {
	height: 100%;
	background: gray;
}