/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*https://github.com/GoldenMaximo/CSS-Realistic-Water*/
/*https://stackoverflow.com/questions/13953053/animate-bubbles-upwards-continuously-with-css3*/
/*https://codepen.io/monchito/pen/RPEqvo*/
/*<a href="https://www.freepik.com/free-vector/fish-silhouettes-black-white-set-marine-animals-monochrome-style-illustration_13031932.htm#fromView=keyword&page=1&position=3&uuid=4325e175-9005-4767-be86-1150040881c9&query=Fish+svg">Image by macrovector on Freepik</a>*/
/*<a href="https://www.freepik.com/free-vector/dolphin-silhouette-pack-fish-silhouettes_23885935.htm#fromView=search&page=1&position=1&uuid=8f6b2c87-5969-4050-9df0-bbc3b70ed3f6&query=dolphin+silhouette">Image by NACreative on Freepik</a>*/
/*<a href="https://www.freepik.com/free-vector/hand-drawn-animals-silhouette-set_29975629.htm#fromView=search&page=1&position=20&uuid=4412bc07-c30a-46b1-b892-9d46c0f06e34&query=fish+silhouette">Image by freepik</a>*/
/*https://codepen.io/piut0/pen/dyaezEN*/
/*https://codepen.io/elchiconube/pen/naxOWv*/

html, body {
	margin: 0;
	padding: 0;
	top:0;
	bottom:0;
	right:0;
	left:0;
	font-family: "Manrope", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	color:black;		
	/*background: rgb(36,31,31);*/
	/*background-color: rgb(70, 60, 50);*/
	/*background-color:white;*/
	
}

html
{
  scroll-padding-top: 9vw; /* height of sticky header */
}

h1{
	width:100%;
	text-align:center;
	margin:0;
	padding:0;
	position: relative;
}

hr{
	clear: both;
	border: 0;
	height: 1px;
	background-image: -webkit-gradient(linear,left top, right top,from(rgba(0,0,0,0)),color-stop(rgba(255,255,255,.75)),to(rgba(0,0,0,0)));
	background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(255,255,255,.75),rgba(0,0,0,0));
	background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(255,255,255,.75),rgba(0,0,0,0));
	width:50%;
}

body input, select{
	cursor:pointer;
}

a {
	-webkit-box-sizing:border-box;
	        box-sizing:border-box;
}

a:link {text-decoration: underline; font-weight:bold; color:white;}
a:visited {text-decoration: underline; font-weight:bold; color:white;}
a:active {text-decoration: underline; font-weight:bold; color:white;}
a:hover {text-decoration: none; font-weight:bold; color:white;}

div {
	-webkit-box-sizing:border-box;
	        box-sizing:border-box;
}

strong {
	font-weight:800;
}

button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

img{
	max-width:100%;
	border:0;
	padding:0;
	margin:0;
}

.page-numbers {
	-webkit-box-sizing:border-box;
	        box-sizing:border-box;
	padding:5px;
}

/*
#safari {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#safari::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/lelantia_boundary.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: url("#turbulenceb");
}   
*/

/* wordpress ish */

.error-404 {
	margin-left: auto;
	margin-right: auto;
	width: 60%;
	background-color: rgba(0,0,0,0.2);
	box-sizing: border-box;
	padding: 20px;
	color: white;
}

.latest_title{
	width: 100%;
	text-align: center;
	font-size: 50px;
	font-weight: 800;
	margin-bottom: 50px;	
}

.latest_block_title {
	text-align:center;
	width:100%;
	font-size:30px;	
}

.latest_post_date {
	text-align:center;
	width:100%;
	font-size:30px;
}

article, #blog {
	width:100%;
	z-index: 20;
	position: relative;	
	font-size:18px;
	margin-top: 100px;
}

.entry-content, #blog_wrap, #practice{
	width:80%;
	background-color:rgba(0,0,0,0.2);
	margin-left:auto;
	margin-right:auto;
	-webkit-box-sizing:border-box;
	        box-sizing:border-box;
	border-radius:99px;
	padding:40px;
	font-size:20px;
	z-index:10;
	position:relative;
	color:white;
}

.entry-content{
	font-size:20px;
	color:white;
}

#practice{
	font-size:20px;
	text-align:center;
}

.entry-footer, .entry-header{
	-webkit-box-sizing:border-box;
	        box-sizing:border-box;
	padding:20px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	font-size: 30px;
}

.entry-meta {
	text-align:center;
}

.navigation a:link {text-decoration: underline; font-weight:bold; color:#87D7C4;}
.navigation a:visited {text-decoration: underline; font-weight:bold; color:#87D7C4;}
.navigation a:active {text-decoration: underline; font-weight:bold; color:#87D7C4;}
.navigation a:hover {text-decoration: none; font-weight:bold; color:#87D7C4;}

.navigation {
	padding:40px;	
}

.navigation .current {
	color:white;
	border:2px solid white;
	border-radius:99px;
	font-weight:bold;
}

.readmore_block {
	font-size:30px;
	text-align: right;
	padding-right: 30px;
}

.post-categories {
	display: inline-block;
	list-style: none;
	padding: 0;
}

.entry-header {
	text-align:center;
}

.updated {
	padding:10px;
	-webkit-box-sizing:border-box;
	        box-sizing:border-box;
}

.updated:before {
	content:"(updated ";
}

.updated:after {
	content:")";
}

.comments-link{
	display:block;
	margin-top:5px;
}

.comments-area {
	width: 80%;
	background-color: rgba(0,0,0,0.2);
	margin-left: auto;
	margin-right: auto;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-radius: 99px;
	padding: 30px;
	color:white;
	font-size:20px;
}

.comments-area label {
	display:block;
}

.nav-links {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	font-size:50px;	
	-webkit-box-sizing:border-box;	
	        box-sizing:border-box;
}

.nav-links div {
	padding:20px;
}

.next {
	display:none;
}

.prev {
	display:none;
}

/* --- */

#content {
	position: relative;
	width:100%;
	margin-top: 300px;
	z-index:10;
}

.latest_page{
	margin-top: 0px;
}

#fishes {
	padding: 1px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

/* sections */

#master {
	background: #ebfff9;	
	background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 224, 71, 0.5) 500px, rgba(135, 215, 196, 1) 700px, rgba(78, 136, 247, 1) 50%, rgba(36, 31, 31, 1) 100%);	
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 224, 71, 0.5) 500px, rgba(135, 215, 196, 1) 700px, rgba(78, 136, 247, 1) 50%, rgba(36, 31, 31, 1) 100%);
	overflow:hidden;
	z-index:0;
}

#sky{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;	
	z-index:20;
	position:relative;
}

#sky img {
	width: 400px;
}

#boundary_top {
	width: 100%;  
	overflow: hidden;
	position:absolute;
	/*clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);	*/
	-webkit-clip-path: polygon(100% 0, 100% 50%, 80% 40%, 60% 35%, 40% 35%, 20% 40%, 0 50%, 0 0);
	        clip-path: polygon(100% 0, 100% 50%, 80% 40%, 60% 35%, 40% 35%, 20% 40%, 0 50%, 0 0);
	z-index:20;
	pointer-events: none;

}

#boundary_top img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center; /* Optional: align crop */  
}


#boundary {
  width: 100%;  
  overflow: hidden;
  position:absolute;
  -webkit-filter: url("#turbulenceb");
          filter: url("#turbulenceb");	
  z-index:20;
  pointer-events: none;
}

#boundary img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center; /* Optional: align crop */
}

/* Target iPad/iPhone in Safari only */
@supports (-webkit-touch-callout: none) {
  @media only screen and (max-device-width: 480px),
         only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	#boundary-top {
		display:none;
	}
    #boundary {
		-webkit-filter:none;
		        filter:none;
	}
  }
}   

.category-spacetop {
	text-align:center;
}

#spacetop .next {
	position: fixed;
	z-index: 19;
	top: 50%;
	right: 0;
	padding-right: 5%;
	-webkit-box-shadow: 0px 0px 20px aqua;
	        box-shadow: 0px 0px 20px aqua;
	padding: 20px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;	
	background-color:white;
}

#spacetop .prev {
	position: fixed;
	z-index: 19;
	top: 50%;
	left: 0;
	padding-left: 5%;
	-webkit-box-shadow: 0px 0px 20px aqua;
	        box-shadow: 0px 0px 20px aqua;
	padding: 20px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;	
	background-color:white;

}

#spacetop_wrap .latest_block_title {
	padding-top:50px;
	font-size:50px;
}


#spacetop{
	width:100%;
	text-align:center;
	z-index: 10;
	position: relative;	
}

#gallery {
	z-index: 20;
	position: relative;
}

#gallery_wrap {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr;
	grid-template-columns: repeat(5, 1fr);
	-ms-grid-rows: auto 0px auto;
	grid-template-rows: repeat(2, auto);
	gap: 0px;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding:0;
	/*flex-wrap: wrap;*/
}

#gallery_wrap > *:nth-child(1) {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}

#gallery_wrap > *:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}

#gallery_wrap > *:nth-child(3) {
	-ms-grid-row: 1;
	-ms-grid-column: 5;
}

#gallery_wrap > *:nth-child(4) {
	-ms-grid-row: 1;
	-ms-grid-column: 7;
}

#gallery_wrap > *:nth-child(5) {
	-ms-grid-row: 1;
	-ms-grid-column: 9;
}

#gallery_wrap > *:nth-child(6) {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
}

#gallery_wrap > *:nth-child(7) {
	-ms-grid-row: 3;
	-ms-grid-column: 3;
}

#gallery_wrap > *:nth-child(8) {
	-ms-grid-row: 3;
	-ms-grid-column: 5;
}

#gallery_wrap > *:nth-child(9) {
	-ms-grid-row: 3;
	-ms-grid-column: 7;
}

#gallery_wrap > *:nth-child(10) {
	-ms-grid-row: 3;
	-ms-grid-column: 9;
}

#gallery_wrap div {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	padding: 5px;
	margin:0;
	white-space: nowrap;
	max-height: 300px;
	min-height: 300px;
	max-width: 100%;
	overflow: hidden;
	position:relative;	
}

#gallery figure img {
	height:100%;
	-o-object-fit:cover;
	   object-fit:cover;
	-o-object-position:bottom;
	   object-position:bottom;
	min-width: 100%;
	max-width:none;	
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	display: block;
	-webkit-transition: -webkit-transform .5s;
	transition: -webkit-transform .5s;
	-o-transition: transform .5s;
	transition: transform .5s;
	transition: transform .5s, -webkit-transform .5s;	
}

#gallery img:hover {
	-webkit-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	        transform: scale(1.1);
	-webkit-transform: translate(-50%, -50%) scale(1.1);
	    -ms-transform: translate(-50%, -50%) scale(1.1);
	        transform: translate(-50%, -50%) scale(1.1);
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	cursor: pointer;
}

#gallery figure { 
	margin: 0; 
}

#secondary{
	display:none;
}

/* footer */

#seabed {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	/*filter: url("#turbulence");	*/
	max-height:600px;
	pointer-events:none;
	z-index:-1;
}

#seabed svg {
	position:absolute;
}

#city {
	width:100%;
	height:400px;
}

#city img {
	max-width:100%;	
	max-height: 400px;
	margin-top:100px;
}

#footer{
	position:absolute;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	    -ms-flex-flow:column wrap;
	        flex-flow:column wrap;
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	width:100%;
	z-index:20;
}

#footer_wrap {
	text-align:center;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

/* begin form css */

input::-webkit-input-placeholder{
	color:#649197;
	font-size:16px;
}

input::-moz-placeholder{
	color:#649197;
	font-size:16px;
}

input:-ms-input-placeholder{
	color:#649197;
	font-size:16px;
}

input::-ms-input-placeholder{
	color:#649197;
	font-size:16px;
}

input::placeholder{
	color:#649197;
	font-size:16px;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color:#649197;
	font-size:16px;
}

input::-ms-input-placeholder { /* Microsoft Edge */
	color:#649197;
	font-size:16px;
}


#contact_title {
	width:100%;
	text-align:center;
}

#name {
	grid-area:fname;
}

#email {
	-ms-grid-row:3;
	-ms-grid-column:1;
	grid-area:email;
}

#message {
	-ms-grid-row:5;
	-ms-grid-column:1;
	grid-area:message;
}

#contact {
	width:50%;
	height:100%;
	padding:25px;
	border:0;	
	margin-left:auto;
	margin-right:auto;
	z-index:20;
	position:relative;
	color: white;
}

#contact form {	
	display: -ms-grid;	
	display: grid;
	-webkit-column-gap: 0px;
	   -moz-column-gap: 0px;
	        column-gap: 0px;
	row-gap: 0px;		
	-ms-grid-columns: 100%;		
	grid-template-columns: 100%;
	-ms-grid-rows: auto;
	grid-template-rows: auto;
	    grid-template-areas:
	  "name"
	  "email"
	  "message"
	  "submit";
}

#contact p {
	margin:5px;
}

#name, #email {
	width:100%;
	padding:0;
	margin:0;
	border:0;
	display:block;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	padding:10px;	
    padding-block: 0px;
    padding-inline: 0px;	
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:25px;
	border-radius:5px;
	/*grid-column: 1/2;*/
}

#message::-webkit-input-placeholder {
	color: #649197;
	font-size: 16px;
}

#message::-moz-placeholder {
	color: #649197;
	font-size: 16px;
}

#message:-ms-input-placeholder {
	color: #649197;
	font-size: 16px;
}

#message::-ms-input-placeholder {
	color: #649197;
	font-size: 16px;
}

#message::placeholder {
	color: #649197;
	font-size: 16px;
}

#message {
	-ms-grid-row: 5;
	-ms-grid-column: 1;
	width:100%;
	display:block;
	-webkit-box-sizing:border-box;
	        box-sizing:border-box;
	padding:0;
	margin:0;
	border:0;	
	grid-area: message;
	grid-column: 0;
    padding-block: 0px;
    padding-inline: 0px;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:100px;
	border-radius:5px;	
}

.wpcf7-submit {
	-ms-grid-row: 7;
	-ms-grid-column: 1;
	width:250px;
	height:50px;
	display:block;
	padding:0;
	margin:0;
	border:0;	
	grid-area: submit;
	grid-column: 0;
	margin-left:auto;
	margin-right:auto;
	font-size:20px;
	text-transform:uppercase;
	border-radius:5px;
	font-weight:400;
	background-color:#649197;
}

.submit_div {
	display: contents;
}

/* end form css */

#attributions{
	width:100%;
	text-align:center;
	padding:30px;	
	color:white;
}

#toggle{
	display:none;	
}

#toggle:checked + #reveal {
	display:block;
}

#reveal {
	padding:25px;
    display:none;
}

#attributions label {
    background: #bf807c;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
	display:block;
	width:300px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	cursor:pointer;
}

#powered{
	padding:15px;
	color:white;
}

/* ANIMATIONS */

/* film grain */

.grain {	
	position: fixed;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background-image: url('../img/noise.jpg');
	-webkit-animation: grain 8s steps(10) infinite;
	        animation: grain 8s steps(10) infinite;
	pointer-events: none;
	opacity: 0.03;
	z-index: 0;
}

@-webkit-keyframes grain {
  0%, 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  10% { -webkit-transform: translate(-5%, -10%); transform: translate(-5%, -10%); }
  20% { -webkit-transform: translate(-8%, 5%); transform: translate(-8%, 5%); }
  30% { -webkit-transform: translate(7%, -16%); transform: translate(7%, -16%); }
  40% { -webkit-transform: translate(-5%, 18%); transform: translate(-5%, 18%); }
  50% { -webkit-transform: translate(-9%, 10%); transform: translate(-9%, 10%); }
  60% { -webkit-transform: translate(8%, 0%); transform: translate(8%, 0%); }
  70% { -webkit-transform: translate(0%, 8%); transform: translate(0%, 8%); }
  80% { -webkit-transform: translate(3%, 12%); transform: translate(3%, 12%); }
  90% { -webkit-transform: translate(-3%, 6%); transform: translate(-3%, 6%); }
}

@keyframes grain {
  0%, 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  10% { -webkit-transform: translate(-5%, -10%); transform: translate(-5%, -10%); }
  20% { -webkit-transform: translate(-8%, 5%); transform: translate(-8%, 5%); }
  30% { -webkit-transform: translate(7%, -16%); transform: translate(7%, -16%); }
  40% { -webkit-transform: translate(-5%, 18%); transform: translate(-5%, 18%); }
  50% { -webkit-transform: translate(-9%, 10%); transform: translate(-9%, 10%); }
  60% { -webkit-transform: translate(8%, 0%); transform: translate(8%, 0%); }
  70% { -webkit-transform: translate(0%, 8%); transform: translate(0%, 8%); }
  80% { -webkit-transform: translate(3%, 12%); transform: translate(3%, 12%); }
  90% { -webkit-transform: translate(-3%, 6%); transform: translate(-3%, 6%); }
}   
/* --- */


/*clouds*/

#clouds{
	position:absolute;
	width:100%;
	overflow:hidden;
	pointer-events:none;
}

/*Time to finalise the cloud shape*/
.cloud {
	width: 200px; height: 60px;
	background: darkcyan;
	margin-top:50px;
	border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
	
	position: relative; 
}

.cloud:before, .cloud:after {
	content: '';
	position: absolute; 
	background: darkcyan;
	width: 100px; height: 80px;
	position: absolute; top: -15px; left: 15px;	
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;	
	-webkit-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	    transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}

.cloud:after {
	width: 120px; height: 120px;
	top: -55px; left: auto; right: 15px;
}

/*Time to animate*/
.cx1 {
	-webkit-animation: cmoveclouds 15s linear infinite;
	-moz-animation: cmoveclouds 15s linear infinite;
	-o-animation: cmoveclouds 15s linear infinite;
	opacity:0.8;
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.cx2 {
	left: 200px;
	
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	    transform: scale(0.6);
	opacity: 0.6; /*opacity proportional to the size*/
	
	/*Speed will also be proportional to the size and opacity*/
	/*More the speed. Less the time in 's' = seconds*/
	-webkit-animation: cmoveclouds 25s linear infinite;
	-moz-animation: cmoveclouds 25s linear infinite;
	-o-animation: cmoveclouds 25s linear infinite;
}

.cx3 {
	left: -250px; top: -200px;
	
	-webkit-transform: scale(0.8);
	-ms-transform: scale(0.8);
	    transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	
	-webkit-animation: cmoveclouds 20s linear infinite;
	-moz-animation: cmoveclouds 20s linear infinite;
	-o-animation: cmoveclouds 20s linear infinite;
}

.cx4 {
	left: 220px; top: -250px;
	
	-webkit-transform: scale(0.75);
	-ms-transform: scale(0.75);
	    transform: scale(0.75);
	opacity: 0.75; /*opacity proportional to the size*/
	
	-webkit-animation: cmoveclouds 18s linear infinite;
	-moz-animation: cmoveclouds 18s linear infinite;
	-o-animation: cmoveclouds 18s linear infinite;
}

.cx5 {
	left: -150px; top: -150px;
	
	-webkit-transform: scale(0.8);
	-ms-transform: scale(0.8);
	    transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	
	-webkit-animation: cmoveclouds 20s linear infinite;
	-moz-animation: cmoveclouds 20s linear infinite;
	-o-animation: cmoveclouds 20s linear infinite;
}

@-webkit-keyframes cmoveclouds {
	0% {margin-left: 110%;}
	100% {margin-left: -600px;}
}

/*bubbles*/
/* https://jsfiddle.net/p5gpx/ */
/* ======================== */


#bubbles {	
	height: 100vh;
	width: 100%;
	padding: 100px 0;
	z-index: 99998;
	position: absolute;
	bottom:0;
	overflow:hidden;
}

.bubble {
    width: 60px;
    height: 60px;
    background: #324192;
    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    position: absolute;
	z-index:1;
	bottom:0;
}

.x1 {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
        transform: scale(0.9);
    opacity: 0.2;
    -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.x2 {
    left: 10%;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
        transform: scale(0.6);
    opacity: 0.5;
    -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.x3 {
    left: 20%;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
        transform: scale(0.8);
    opacity: 0.3;
    -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x4 {
    left: 30%;
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
        transform: scale(0.75);
    opacity: 0.35;
    -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x5 {
    left: 40%;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
        transform: scale(0.5);
    opacity: 0.45; 
    -webkit-animation: moveclouds 14s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -moz-animation: moveclouds 14s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -o-animation: moveclouds 14s linear infinite, sideWays 3s ease-in-out infinite alternate;
}
.x6 {
    left: 50%;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
        transform: scale(0.6);
    opacity: 0.6; 
    -webkit-animation: moveclouds 11s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 11s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -o-animation: moveclouds 11s linear infinite, sideWays 2s ease-in-out infinite alternate;
}

.x7 {
    left: 60%;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
        transform: scale(0.3);
    opacity: 0.2; 
    -webkit-animation: moveclouds 13s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 13s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 13s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.x8 {
    left: 70%;
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
        transform: scale(0.9);
    opacity: 0.5; 
    -webkit-animation: moveclouds 7s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 7s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -o-animation: moveclouds 7s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x9 {
    left: 80%;
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
        transform: scale(0.7);
    opacity: 0.35; 
    -webkit-animation: moveclouds 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -moz-animation: moveclouds 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -o-animation: moveclouds 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
}
.x10 {
    left: 90%;
    -webkit-transform: scale(0.4);
    -ms-transform: scale(0.4);
        transform: scale(0.4);
    opacity: 0.45; 
    -webkit-animation: moveclouds 17s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 17s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 17s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.x11 {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
        transform: scale(0.9);
    opacity: 0.85;
    -webkit-animation: moveclouds 23s linear infinite, sideWays 6s ease-in-out infinite alternate;
    -moz-animation: moveclouds 23s linear infinite, sideWays 6s ease-in-out infinite alternate;
    -o-animation: moveclouds 23s linear infinite, sideWays 6s ease-in-out infinite alternate;
}

.x12 {
    left: 10%;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
        transform: scale(0.6);
    opacity: 0.45;
    -webkit-animation: moveclouds 18s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 18s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 18s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x13 {
    left: 45%;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
        transform: scale(0.3);
    opacity: 0.60;
    -webkit-animation: moveclouds 14s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -moz-animation: moveclouds 14s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -o-animation: moveclouds 14s linear infinite, sideWays 3s ease-in-out infinite alternate;
}
.x14 {
    left: 75%;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
        transform: scale(0.5);
    opacity: 0.80;
    -webkit-animation: moveclouds 15s linear infinite, sideWays 6s ease-in-out infinite alternate;
    -moz-animation: moveclouds 15s linear infinite, sideWays 6s ease-in-out infinite alternate;
    -o-animation: moveclouds 15s linear infinite, sideWays 6s ease-in-out infinite alternate;
}
.x15 {
    left: 30%;
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
        transform: scale(0.7);
    opacity: 0.20; 
    -webkit-animation: moveclouds 10s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 10s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 10s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x16 {
    left: 10%;
    -webkit-transform: scale(0.45);
    -ms-transform: scale(0.45);
        transform: scale(0.45);
    opacity: 0.30; 
    -webkit-animation: moveclouds 20s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -moz-animation: moveclouds 20s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -o-animation: moveclouds 20s linear infinite, sideWays 3s ease-in-out infinite alternate;
}

.x17 {
    left: 95%;
    -webkit-transform: scale(0.25);
    -ms-transform: scale(0.25);
        transform: scale(0.25);
    opacity: 0.10; 
    -webkit-animation: moveclouds 21s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -moz-animation: moveclouds 21s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -o-animation: moveclouds 21s linear infinite, sideWays 5s ease-in-out infinite alternate;
}

.x18 {
    left: 65%;
    -webkit-transform: scale(0.85);
    -ms-transform: scale(0.85);
        transform: scale(0.85);
    opacity: 0.75; 
    -webkit-animation: moveclouds 17s linear infinite, sideWays 9s ease-in-out infinite alternate;
    -moz-animation: moveclouds 17s linear infinite, sideWays 9s ease-in-out infinite alternate;
    -o-animation: moveclouds 17s linear infinite, sideWays 9s ease-in-out infinite alternate;
}
.x19 {
    left: 25%;
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.50);
        transform: scale(0.50);
    opacity: 0.45; 
    -webkit-animation: moveclouds 13s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 13s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 13s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x20 {
    left: 55%;
    -webkit-transform: scale(0.4);
    -ms-transform: scale(0.90);
        transform: scale(0.90);
    opacity: 0.25; 
    -webkit-animation: moveclouds 16s linear infinite, sideWays 7s ease-in-out infinite alternate;
    -moz-animation: moveclouds 16s linear infinite, sideWays 7s ease-in-out infinite alternate;
    -o-animation: moveclouds 16s linear infinite, sideWays 7s ease-in-out infinite alternate;
}

@-webkit-keyframes moveclouds { 
    0% { 
        bottom:0;
		opacity:25%;
    }
	90% {
		opacity:25%;
	}	
    100% { 
        bottom: 98%;		
		opacity:0%;
    }
}

@-webkit-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}


/* Fish Animations */

.fish{
	pointer-events:none;
}

svg.fish{
  overflow:visible;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;	  	
}

#dolphin {
	margin-top:6%;
	position:absolute;
	width:100%;
}


.fish-leftstart-slow {
	margin-left: -235px;
	position: absolute;	
	animation: swim-leftstart 30s;
	-webkit-animation: swim-leftstart 30s;
}

.fish-leftstart-fast2 {
	margin-left: -235px;
	position: absolute;	
	animation: swim-leftstart 13s;
	-webkit-animation: swim-leftstart 13s;
}


.fish-leftstart-fast {
	margin-left: -235px;
	position: absolute;	
	animation: swim-leftstart 10s;
	-webkit-animation: swim-leftstart 10s;
}

.fish-leftstart {
	margin-left: -235px;
	position: absolute;	
	animation: swim-leftstart 20s;
	-webkit-animation: swim-leftstart 20s;
}

.fish-leftstart2 {
	margin-left: -235px;
	position: absolute;	
	animation: swim-leftstart 17s;
	-webkit-animation: swim-leftstart 17s;
}

.fish-leftstart-slow2 {
	margin-left: -235px;
	position: absolute;	
	animation: swim-leftstart 25s;
	-webkit-animation: swim-leftstart 25s;
}

.fish-rightstart-slow{
	margin-left: 105%;
	position: absolute;	
	animation: swim-rightstart 30s;
	-webkit-animation: swim-rightstart 30s;
}

.fish-rightstart{
	margin-left: 105%;
	position: absolute;	
	animation: swim-rightstart 20s;
	-webkit-animation: swim-rightstart 20s;
}

.delaystart1 {
	animation-delay: 1s;
	-webkit-animation-delay: 1s;		
}

.fcolor1{
	fill:#ffb063; 
}
.fcolor2{
	fill:#de8937; 
}



.fcolor3{
	fill:#a1cde9; 
}
.fcolor4{
	fill:#6b8fa6; 
}


.fcolor5{
	fill:#d083a3; 
}
.fcolor6{
	fill:#ab577a; 
}



.fcolor7{
	fill:#e969cc; 
}
.fcolor8{
	fill:#a02885; 
}



.fcolor9{
	fill:#6bb042; 
}
.fcolor10{
	fill:#a1d780; 
}



.fcolor11{
	fill:#715e10; 
}



.fcolor12{
	fill:#33627a; 
}
.fcolor13{
	fill:#8095a0; 
}


.fcolor14{
	fill:#e5df2f; 
}


.fcolor15{
	fill:#595959;
}



.paddle1{
	-webkit-animation: bounce 2s infinite;
	animation: bounce 2s infinite;	
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;	
}

.paddle2{
	-webkit-animation: bounce 2s infinite;
	animation: bounce 2s infinite;	
	animation-delay: 0.2s;
	-webkit-animation-delay: 0.2s;	
}

.paddle3{
	-webkit-animation: bounce 2s infinite;
	animation: bounce 2s infinite;	
	animation-delay: 0.4s;
	-webkit-animation-delay: 0.4s;	
}

.paddle4{
	-webkit-animation: bounce 2s infinite;
	animation: bounce 2s infinite;	
	animation-delay: 0.1s;
	-webkit-animation-delay: 0.1s;
}

.paddle5{
	-webkit-animation: bounce 2s infinite;
	animation: bounce 2s infinite;	
	animation-delay: 0.3s;
	-webkit-animation-delay: 0.3s;	
}

.paddle6{
	-webkit-animation: bounce 1s infinite;
	animation: bounce 2s infinite;	
	animation-delay: 0.1s;
	-webkit-animation-delay: 0.1s;	
}

.pos1{	
	padding-top:2%;	
	padding-left:1%;
}

.pos2{
	padding-top:4%;
	padding-left:3%;
}

.pos3{
	padding-top:5%;
	padding-left:2%;
}

.pos4{
	padding-top:2%;
	padding-left:4%;
}

.pos5{
	padding-top:1%;
	padding-left:3%;
}

.ppos1{
	margin-top:50vh;
}

.ppos2{
	margin-top:150vh;
}

.ppos3{
	margin-top:250vh;
}

.ppos4{
	margin-top:350vh;
}

.ppos5{
	margin-top:450vh;
}

.ppos6{
	margin-top:200vh;
}

.ppos7{
	margin-top:275vh;
}

/**/

@keyframes swim-leftstart
{
	0% {margin-left: -400px}
	90% {margin-left: 100%;}
	100% {margin-left: 100%;}
}

@-webkit-keyframes swim-leftstart
{
	0% {margin-left: -400px}
	90% {margin-left: 100%;}
	100% {margin-left: 100%;}
}

@keyframes swim-rightstart
{
	0% {margin-left: 105%}
	90% {margin-left: -400px;}
	100% {margin-left: -400px;}
}

@-webkit-keyframes swim-rightstart
{
	0% {margin-left: 105%}
	90% {margin-left: -400px;}
	100% {margin-left: -400px;}
}

@-webkit-keyframes bounce {
  0%, 50%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  75% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }
}

@keyframes bounce {
  0%, 50%, 100% {
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25% {
    -ms-transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  75% {
    -ms-transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }
}

/*END Fish Animation*/


/* ========================= */

/* ---------- */

@media only screen and (min-width : 1920px) {	

	#seabed img {
		width:100%;
	}
	
	.latest_page{
		margin-top: 200px;
	}

}

@media only screen and (min-width : 0px) and (max-width : 1600px) {	
	
	#content {	
	}
}


@media only screen and (min-width : 0px) and (max-width : 1280px) {	
	
	#content {
		margin-top:50px;
	}
	
	#dolphin{
		margin-top:30%;
	}
	
	.latest_page{
		margin-top: 200px;
	}	
	
	#boundary_top {
		height:350px;
	}	
	
	#boundary {
		height:350px;
	}
	
	.entry-content, #blog_wrap{
		width:90%;
	}
	
	#contact {
		width:95%;
	}
	
	#spacetop .next {
		bottom:0;
		top:auto;
		width:100%;
	}	
	
	#spacetop .prev {
		bottom:0;
		top:auto;
		width:100%;
	}		
}