/*ROOT*/
:root{
  
}
/*ROOT END*/
/*FONTS*/
@font-face {
  font-family: "Graphik Regular";
  src: url(/fonts/Graphik-Regular.woff2) format('woff2'),
  url(/fonts/Graphik-Regular.woff) format('woff'),
  url(/fonts/Graphik-Regular.otf) format('otf');
}
@font-face {
  font-family: "Graphik Medium";
  src: url(/fonts/Graphik-Medium.woff2) format('woff2'),
  url(/fonts/Graphik-Medium.woff) format('woff'),
  url(/fonts/Graphik-Medium.otf) format('otf');
  font-weight: 500;
}
@font-face {
  font-family: "Graphik SemiBold";
  src: url(/fonts/Graphik-Semibold.woff2) format('woff2'),
  url(/fonts/Graphik-Semibold.woff) format('woff'),
  url(/fonts/Graphik-Semibold.ttf) format('ttf');
}
@font-face {
  font-family: "Graphik Bold";
  src: url(/fonts/Graphik-Bold.woff2) format('woff2'),
  url(/fonts/Graphik-Bold.woff) format('woff'),
  url(/fonts/Graphik-Bold.ttf) format('ttf');
}
/*FONTS END*/

html, body {
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 0;
}
body{
  height: 100vh;
  width: 100vw;
  font-size: 16px;
  font-family: "Graphik Regular", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-size: 100% 600%;
  background-position: 0 0;
  background-image: linear-gradient(to bottom, #70ceee 0,#70ceee 9%,rgba(0,35,120,1)10%,rgba(0,21,86,1)100%);
}
body.sec{
  background-position: 0 0%;
  transition:background-position 2s ease;
}
body.sec.sec2{
  background-position: 0 20%;
  transition:background-position 2s ease;
}
body.sec2{
  background-position: 0 20%;
}
body.sec2.sec3{
  background-position: 0 40%;
  transition:background-position 2s ease;
}
body.sec3{
  background-position: 0 40%;
}
body.sec3.sec4{
  background-position: 0 60%;
  transition:background-position 2s ease;
}
body.sec4{
  background-position: 0 60%;
}
body.sec4.sec5{
  background-position: 0 80%;
  transition:background-position 2s ease;
}
body.sec5{
  background-position: 0 80%;
}
body.sec5.sec6{
  background-position: 0 100%;
  transition:background-position 2s ease;
}
body.sec6{
  background-position: 0 100%;
}
body.sec6.sec{
  background-position: 0 0%;
  transition:background-position 4s ease;
}
/*PRELOADER*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #70ceee;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 2s ease, transform 2s ease;
}
.preloaderSea{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.preloaderSea img{
  width: 100%;
  object-fit: cover;
  height: 40vh;
}
#preloader.hidden {
  transform: scale(3);
  opacity: 0;
  pointer-events: none;
}
.spinner {
  background-image: url(/images/LogoPreloader.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100px;
  height: 100px;
  margin-top: -20vh;
  /* animation: spin 1s linear infinite; */
}
/* @keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} */
/*PRELOADER END*/

/* .sec .logoECA img:last-child{
  opacity: 1;
  transition: opacity .2s;
} */
.backToTop{
  position: fixed;
  bottom: 0;
  right: 0;
  margin-right: 1em;
  margin-bottom: 1em;
  z-index: 10;
  width:45px;
  height:45px;
}
.backToTop img{
  width: 100%;
  height: 100%;
}
.sec .backToTop{
  display: none;
}
header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  margin-top: .5em;
  margin-left: .5em;
  margin-right: .5em;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 10vh;
  height: 10dvh;
}
.logoECA{
  display: inline-block;
  filter: brightness(10);
  transition: filter 1s;
}
.sec .logoECA{
  filter: brightness(1);
  transition: filter .2s 2s ease-in;
}
.sec.sec2 .logoECA{
  filter: brightness(10);
  transition: filter .2s ease-in;
}
.logoECA h1{
  margin-bottom: 0;
}
.logoECA img{
  height: calc(30px + 2.5vw + 2.5vh);
  height: calc(30px + 2.5vw + 2.5dvh);
  min-height: 50px;
  transition: filter 2s ease-in;
}
.buttonHome{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .85em;
  z-index: 2;
}
.buttonHome a{
  display: block;
  /* width: 100%; */
  position: relative;
  font-size: calc(.55em + 1vw);
  line-height: 1em;
  text-align: center;
  margin-bottom: .25em;
  padding: .5em;
  text-decoration: none;
  color: white;
  background-color: #579889;
  box-shadow: .25em .25em 0 rgba(0,0,0,.2);
  filter: brightness(100%);
  transition: transform .2s, box-shadow .2s, filter .2s;
  border-radius: 1vh;
  border-radius: 1dvh;
  font-family: "Graphik Medium", sans-serif;
  font-weight: 500;
}
header .buttonHome a.downButton{
  opacity: 1;
}
header .buttonHome a.downButton::before{
  display: none;
}
.sec6 .buttonHome a.skipIntro{
  display: none;
}
.buttonHome a.viewPdf{
  background-color: #F16647;
  color: #FFD900;
}
.buttonHome a.langSwitch{
  background-color: white;
  color:#201F57;
  border-radius: 3vh;
  border-radius: 3dvh;
}
.buttonHome a.backTop{
  background-color: #F9DA49;
  color:#201F57;
  display: none;
}
.sec6 .buttonHome a.backTop{
  display: inline-block;
}
.buttonHome a:hover{
  transform: translate(.25em, .25em);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  filter: brightness(120%);
}
/* .logoECA img:last-child{
  width: calc(50px + 8vw + 5vh);
  width: calc(50px + 8vw + 5dvh);
  transition: opacity .2s;
  opacity: 0;
  min-width: 150px;
} */
/* .sec2 .logoECA img:last-child, .sec3 .logoECA img:last-child, .sec4 .logoECA img:last-child{
  opacity: 0;
} */
.mainContainer {
  height: 100vh;
  height: 100dvh;
  overflow-y: hidden;
}
.waves{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  height: 50dvh;
  overflow-x: hidden;
  transform: translate(0,0);
  transition:transform 2s ease;
}
.waves:last-child{
  z-index: 1;
}
.sec2 .waves, .sec6 .waves{
  transform: translate(0,-100vh);
  transform: translate(0,-100dvh);
  transition:transform 2s ease;
}
.waves .wave{
  position: absolute;
  left:0;
  bottom: 0;
  width: 100%;
  height: 90%;
  background-image: url(/images/wave.png);
  background-size: 100vw 100%;
  background-repeat: repeat-x;
  background-position-y: bottom;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,0) 100%);
}
.waves .wave#wave1{
  opacity: .5;
  animation: wave 30s linear infinite;
}
.waves .wave#wave2{
  opacity: .5;
  bottom: 5%;
  animation: wave 30s linear infinite reverse;
}
.waves .wave#wave3{
  opacity: .5;
  bottom: 10%;
  animation: wave2 30s linear infinite;
}
@keyframes wave{
  0%{
    background-position-x: 100vw;
  }
  100%{
    background-position-x: 0vw;
  }
}
@keyframes wave2{
  0%{
    background-position-x: 120vw;
  }
  100%{
    background-position-x: 20vw;
  }
}
.clouds{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  height: 100dvh;
  overflow-x: hidden;
  z-index: 0;
  transform: translate(0,0);
  transition:transform 2s .5s ease;
}
.sec2 .clouds, .sec6 .clouds{
  transform: translate(0,-100vh);
  transform: translate(0,-100dvh);
  transition:transform 1.5s ease-in;
}
.clouds .cloud{
  position: absolute;
  left:0;
  top: 0;
  width: 100%;
  height: 45vh;
  height: 45dvh;
  background-image: url(/images/cloud.png);
  background-size: calc(300px + 5vw)  calc(150px + 8vh );
  background-size: calc(300px + 5vw)  calc(150px + 8dvh );
  background-repeat: no-repeat;
  background-position-y: bottom;
}
.clouds .cloud#cloud1{
  opacity: .4;
  animation: cloud2 30s linear infinite;
}
.clouds .cloud#cloud2{
  background-size: calc(200px + 5vw)  calc(80px + 4vh );
  background-size: calc(200px + 5vw)  calc(80px + 4dvh );
  opacity: .4;
  top: -20vh;
  top: -20dvh;
  animation: cloud 35s linear infinite;
}
.clouds .cloud#cloud3{
  background-size: calc(80px + 5vw)  calc(40px + 2vh );
  background-size: calc(80px + 5vw)  calc(40px + 2dvh );
  opacity: .4;
  top: -30vh;
  top: -30dvh;
  animation: cloud3 40s linear infinite;
}
@keyframes cloud{
  0%{
    background-position-x: 50vw;
  }
  50%{
    background-position-x: calc(0px - (200px + 5vw));
    opacity: .4;
  }
  50.00001%{
    background-position-x: 100vw;
    opacity: 0;
  }
  51%{
    background-position-x: 100vw;
    opacity: .4;
  }
  100%{
    background-position-x: 50vw;
  }
}
@keyframes cloud2{
  0%{
    background-position-x: 105vw;
  }
  100%{
    background-position-x: calc(0px - (300px + 5vw));
  }
}
@keyframes cloud3{
  0%{
    background-position-x: 100vw;
  }
  100%{
    background-position-x: calc(0px - (80px + 5vw));
  }
}
.seaSky{
  position: fixed;
  top: 0;
  margin-top: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-size: 100% 600%;
  background-position: 0 0;
  background-image: linear-gradient(to bottom, rgba(0,35,120,0)0,rgba(0,35,120,0)9%,rgba(0,35,120,1)10%,rgba(0,21,86,1)100%);
}
.sec .seaSky{
  background-position: 0 0%;
  transition:background-position 2s ease;
}
.sec.sec2 .seaSky{
  background-position: 0 20%;
  transition:background-position 1.8s ease;
}
 .sec2 .seaSky{
  background-position: 0 20%;
 }
 .sec2.sec3 .seaSky{
  background-position: 0 40%;
  transition:background-position 2s ease;
}
.sec3 .seaSky{
  background-position: 0 40%;
}
.sec3.sec4 .seaSky{
  background-position: 0 60%;
  transition:background-position 2s ease;
}
.sec4 .seaSky{
  background-position: 0 60%;
}
.sec4.sec5 .seaSky{
  background-position: 0 80%;
  transition:background-position 2s ease;
}
.sec5 .seaSky{
  background-position: 0 80%;
}
.sec5.sec6 .seaSky{
  background-position: 0 100%;
  transition:background-position 2s ease;
}
.sec6 .seaSky{
  background-position: 0 100%;
}
.sec6.sec .seaSky{
  background-position: 0 0%;
  transition:background-position 4s ease;
}
/* .birds{
  position: absolute;
  display: flex;
  align-items: end;
  justify-content: flex-end;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 5vh;
  transform: translate(0,0);
  transition:transform 2s .5s ease;
}
.sec2 .birds, .sec6 .birds{
  transform: translate(0,-100vh);
  transition:transform 1.5s ease-in;
}
.birds img{
  display: block;
  offset: url(#birdPath) 20% auto;
  animation: bird 5s infinite reverse linear;
  width: 60px;
  height: auto;
} */
.birds {
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
  height: 30vh;
  height: 30dvh;
}
.birds img {
  position: absolute;
  width: calc(50px + 2vh);
  width: calc(50px + 2dvh);
  height: auto;
  transform-origin: center;
}
svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: auto;
}
@keyframes bird{
  0%{
    offset-distance: 0;
  }
  100%{
    offset-distance: 100%;
  }
}
/* @keyframes birds {
  0% {
    margin-left: 110%;
    margin-top: 15vh;
    transform: scale(.5);
  }
  12.5%{
    transform: scale(1);
  }
  25% {
    margin-left: -40%;
    margin-top: 30vh;
    transform: scale(.5);
    visibility: visible;
  }
  26% {
    margin-left: -40%;
    margin-top: 30vh;
    transform: scale(.5);
    visibility: hidden;
  }
  100% {
    margin-left: -40%;
    margin-top: 30vh;
    transform: scale(.5);
    visibility: hidden;
  }
} */
section {
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  transition: opacity 2s;
  height: 0;
  width: 0;
}
section.visible{
  visibility: visible;
  bottom: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: 100%;
}
.firstSectionHomeUp{
  transform: translate(0,0);
  transition:transform 2s .5s ease-in-out;
}
.sec2 .firstSectionHomeUp, .sec6 .firstSectionHomeUp{
  transform: translate(0,-100vh);
  transform: translate(0,-100dvh);
  transition:transform 1.5s ease;
}
.titleHome{
  position: relative;
  min-height: 30vh;
  min-height: 30dvh;
  z-index: 1;
  margin-top: 10vh;
}
.titleHome h2{
  position: relative;
  font-family: "Graphik SemiBold", sans-serif;
  font-weight: 600;
  font-size: calc(1.5em + 1vh);
  font-size: calc(1.5em + 1dvh);
  line-height: 1.2em;
  color: #201F57;
  text-align: center;
  z-index: 2;
}
.titleHome h2::after{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 3vh;
  margin-top: 3dvh;
  width: 10%;
  border-top:3px solid #F16647;
}
.allElement{
  height: 50vh;
  height: 50dvh;
}
.boat{
  animation: seaMove 2s infinite alternate ease-in-out;
  margin-left: -15vh;
  margin-left: -15dvh;
  position: absolute;
  margin-top: -7vh;
  margin-top: -7dvh;
}
.boat img{
  width: auto;
  height: 25vh;
  height: 25dvh;
  opacity: 1;
  transform: translate(0,0);
  transition: transform 2s 1s ease, opacity 2s 1s ease;
}
.sec2 .boat img{
  transform: translate(-500px,-100vh);
  transform: translate(-500px,-100dvh);
  opacity: 0;
  transition: transform 2s ease, opacity 2s ease;
}
.sec6 .boat img{
  transform: translate(500px,0);
  opacity: 0;
  transition: transform 2s ease, opacity 2s ease;
}
.man{
  position: relative;
  margin-top: 5vh;
  margin-top: 5dvh;
  animation: seaMove 2s infinite alternate-reverse ease-in-out;
}
.man img{
  height: 25vh;
  height: 25dvh;
  display: block;
  left: 0;
  right: 0;
  margin-right: auto;
  margin-left: auto;
  opacity: 1;
  transform-origin: right top;
  transform:scaleY(1) scaleX(1) translateY(0) rotate(0);
  transition: opacity 2s 1s, transform 2s ease-out;
}
.sec2 .man img{
  animation: manDown 2s linear;
  opacity: 0;
  transition: opacity 1.5s;
}
@keyframes manDown{
  0%{
    transform: translateY(0vh) translateX(0vh)  rotate(0deg);
    transform: translateY(0dvh) translateX(0dvh)  rotate(0deg);
  }
  25%{
    transform: translateY(0vh) translateX(5vh) rotate(180deg);
    transform: translateY(0dvh) translateX(5dvh) rotate(180deg);
  }
  100%{
    transform: translateY(50vh) translateX(25vh) rotate(135deg);
    transform: translateY(50dvh) translateX(25dvh) rotate(135deg);
  }
}
.sec6 .man img{
  transform:scaleY(1) translatey(100vh);
  transform:scaleY(1) translatey(100dvh);
  opacity: 0;
}
.pplSwimming{
  position: relative;
  margin-top: 7vh;
  margin-top: 7dvh;
  animation: seaMove 2s infinite alternate-reverse ease-in-out;
}
.pplSwimming img{
  height: 15vh;
  height: 15dvh;
  transition: opacity 2s 1s, transform 2s ease-out;
}
.sec2 .pplSwimming img, .sec6 .pplSwimming img{
  transform: translateY(-60vh);
  transform: translateY(-60dvh);
  opacity: 0;
  transition: opacity 2s, transform 2s ease-out;
}
/* .elementFadeOut img{
  position: relative;
  opacity: 1;
  transition: opacity 1.5s 2.5s, transform 1.5s 2.5s ease-out;
}
.sec2 .elementFadeOut img, .sec3 .elementFadeOut img{
  opacity: 0;
  transform: translate(0,30vh);
  transition: opacity 1.5s, transform 2s;
} */
.submarine{
  position: relative;
  margin-top: -7vh;
  margin-top: -7dvh;
  animation: seaMove 2s infinite alternate ease-in-out;
}
.submarine img{
  height: 40vh;
  height: 40dvh;
  display: block;
  left: 0;
  right: 0;
  margin-right: auto;
  margin-left: auto;
  transition: opacity 2s, transform 2s;
}
.sec2 .submarine img, .sec6 .submarine img{
  opacity: 0;
  transform: translate(-40vh,50vh) rotate(-50deg);
  transform: translate(-40dvh,50dvh) rotate(-50deg);
  transition: opacity 1.5s, transform 3s;
}
.sec6 .submarine img{
  transform: translate(0,50vh) rotate(0);
  transform: translate(0,50dvh) rotate(0);
}
.submarine::after{
  content: "";
  background-image: url(/images/bottle.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 4vh;
  width: 4dvh;
  height: 10vh;
  height: 10dvh;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  margin-right: 0;
  opacity: 1;
  transform: translate(0,0);
  transition: opacity 1.5s, transform 2s .5s ease;
  z-index: -1;
}
.sec2 .submarine::after, .sec6 .submarine::after{
  opacity: 0;
  transform: translate(0,-100vh);
  transform: translate(0,-100dvh);
  transition: opacity 1.5s, transform 2s;
}
.fishHome{
  position: relative;
  right: 0;
  margin-top: 5vh;
  margin-top: 5dvh;
  transition: opacity 2s, transform 1.5s;
}
.fishHome img{
  height: 5vh;
  height: 5dvh;
  animation: fish 8s infinite ease-in-out;
  
}
.sec2 .fishHome, .sec6 .fishHome{
  transform: translate(0,-100vh);
  transform: translate(0,-100dvh);
  transition: opacity 1.5s, transform 2s;
}
.nextSlide{
  height: 10vh;
  height: 10dvh;
}
.downButton{
  position: fixed;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  margin-bottom: 2vh;
  margin-bottom: 2dvh;
  display: block;
  width: auto;
  text-align: center;
  z-index: 2;
  opacity: 0;
  transition: opacity 1s ease;
}
.sec6 #sec .downButton{
  opacity: 0;
  transition: opacity 1s 1s ease;
}
#sec .downButton{
  opacity: 1;
}
.sec2 #sec .downButton{
  opacity: 0;
}
/*2*/
.sec #sec2 .downButton{
  opacity: 0;
}
#sec2 .downButton{
  opacity: 1;
}
.sec3 #sec2 .downButton{
  opacity: 0;
}
/*3*/
.sec2 #sec3 .downButton{
  opacity: 0;
}
#sec3 .downButton{
  opacity: 1;
}
.sec4 #sec3 .downButton{
  opacity: 0;
}
/*4*/
.sec3 #sec4 .downButton{
  opacity: 0;
}
#sec4 .downButton{
  opacity: 1;
}
.sec5 #sec4 .downButton{
  opacity: 0;
}
/*5*/
.sec4 #sec5 .downButton{
  opacity: 0;
}
#sec5 .downButton{
  opacity: 1;
}
.sec6 #sec5 .downButton{
  opacity: 0;
}
/*6*/
.sec5 #sec6 .downButton{
  opacity: 0;
}
#sec6 .downButton{
  opacity: 1;
}
.sec #sec6 .downButton{
  opacity: 0;
}
.downButton img{
  height: 4vh;
  height: 4dvh;
  width: 7vh;
  width: 7dvh;
  margin-top: 3vh;
  margin-top: 3dvh;
}
.downButton::before{
  display: block;
  margin: auto;
  position: relative;
  content: "";
  background-image: url(/images/arrowDown.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .5;
  height: 4vh;
  height: 4dvh;
  width: 7vh;
  width: 7dvh;
  animation: buttonDown 1s infinite ease-out;
}
@keyframes seaMove{
  0%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(-1.5vh);
    transform: translateY(-1.5dvh);
  }
}
@keyframes fish{
  0%{
    transform: translate(0,0) scaleX(1);
  }
  50%{
    transform: translate(30vw,0) scaleX(1);
  }
  51%{
    transform: translate(30vw,0) scaleX(-1);
  }
  99%{
    transform: translate(0,0) scaleX(-1);
  }
  100%{
    transform: translate(0,0) scaleX(1);
  }
}
@keyframes buttonDown{
  0%{
    margin-bottom: 0;
    opacity: 0;
  }
  100%{
    margin-bottom: -5vh;
    margin-bottom: -5dvh;
    opacity: .5;
  }
}
/* SECTION2 */
.rockSx{
  position: absolute;
  display: flex;
  justify-content: flex-end;
  left: 0;
  bottom: 0;
  height: 75vh;
  height: 75dvh;
  transition: margin 2s ease-out, filter 2s ease-in, opacity 2s;
  max-width: 55%;
}
#sec2 .rockSx{
  opacity: .2;
  filter: brightness(0);
  margin-left: -50%;
  margin-bottom: -50%;
}
.sec2 #sec2 .rockSx{
  margin-left: -10vh;
  margin-left: -10dvh;
  margin-bottom: -10vh;
  margin-bottom: -10dvh;
}
.sec3 #sec2 .rockSx{
  display: none;
}
#sec3 .rockSx{
  margin-left: -10vh;
  margin-left: -10dvh;
  margin-bottom: -10vh;
  margin-bottom: -10dvh;
  opacity: .2;
  filter: brightness(0);
}
.sec3 #sec3 .rockSx{
  margin-left: 0;
  margin-bottom: 0;
  opacity: .5;
  filter: brightness(0);
}
.sec4 #sec3 .rockSx{
  display: none;
}
#sec4 .rockSx{
  margin-left: 0;
  margin-bottom: 0;
  opacity: .5;
  filter: brightness(0);
}
.sec4 #sec4 .rockSx{
  margin-left: 0;
  margin-bottom: 0;
  opacity: 1;
  filter: brightness(100%);
}
.rockImgSx{
  height: 75vh;
  height: 75dvh;
}
.rockRx{
  position: absolute;
  display: flex;
  justify-content: flex-start;
  right: 0;
  bottom: 0;
  height: 60vh;
  height: 60dvh;
  transition: margin 2s ease-out, filter 2s ease-in, opacity 2s;
  max-width: 45%;
}
#sec2 .rockRx{
  margin-right: -50%;
  margin-bottom: -50%;
  opacity: .2;
  filter: brightness(0);
}
.sec2 #sec2 .rockRx{
  margin-right: -10vh;
  margin-right: -10dvh;
  margin-bottom: -10vh;
  margin-bottom: -10dvh;
  opacity: .2;
  filter: brightness(0);
}
.sec3 #sec2 .rockRx{
  display: none;
}
#sec3 .rockRx{
  margin-right: -10vh;
  margin-right: -10dvh;
  margin-bottom: -10vh;
  margin-bottom: -10dvh;
  opacity: .2;
  filter: brightness(0);
}
.sec3 #sec3 .rockRx{
  margin-right: 0;
  margin-bottom: 0;
  opacity: .5;
  filter: brightness(0);
}
.sec4 #sec3 .rockRx{
  display: none;
}
#sec4 .rockRx{
  margin-right: 0;
  margin-bottom: 0;
  opacity: .5;
  filter: brightness(0);
}
.sec4 #sec4 .rockRx{
  margin-right: 0;
  margin-bottom: 0;
  opacity: 1;
  filter: brightness(100%);
}
.rockImgRx{
  height: 60vh;
  height: 60dvh;
}
/* .manText{
  display: grid;
  grid-template-columns: auto auto;
  width: 100%;
  height: 80vh;
  justify-content: flex-end;
  align-items: center;
} */
.containerSecond{
  height: 100vh;
  height: 100dvh;
  align-items: center;
}
.manSec2{
  position: relative;
  display: inline-block;
  animation: seaMove 2s infinite alternate ease-in-out;
  opacity: 1;
}
.manSec2 img{
  display: block;
  margin: auto;
  height: calc(15vh + 3vw);
  height: calc(15dvh + 3vw);
  transform: translate(-300px,-300px);
  opacity: 0;
}
.sec2 .manSec2 img{ 
  transform: translate(0,0);
  opacity: 1;
  transition: transform 2s 1s ease-out, opacity 1s 1s;
}
.sec3 .manSec2 img{
  transform: translate(50px,300px) rotate(30deg);
  opacity: 0;
  transition: transform 2s ease-out, opacity 2s;
}
.textSec2{
  opacity: 1;
  display: inline-block;
  animation: seaMove 2s infinite alternate-reverse ease-in-out;
}
.textSec2 p{
  position: relative;
  font-family: "Graphik Medium", sans-serif;
  font-weight: 500;
  font-size: calc(1em + 1vw);
  color: white;
  padding: calc(2em + 4vh);
  padding: calc(2em + 4dvh);
  text-align: center;
  transition: opacity 1s 1s, transform 1.5s 1s;
  margin-bottom: 0;
  opacity: 0;
  transform: translate(0,200px);
  z-index: 1;
}
.textSec2 p::after{
  content: "";
  background-image: url(/images/baloon1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  opacity: .2;
}
.sec2 .textSec2 p{
  opacity: 1;
  transform: translate(0,0);
}
.sec3 .textSec2 p{
  transform: translate(0,-200px);
  opacity: 0;
  transition: opacity 1s, transform 1.5s;
}
.submarine2{
  position: relative;
  animation: seaMove 2s infinite alternate ease-in-out;
}
.submarine2 img{
  height: calc(30vh + 8vw);
  height: calc(30dvh + 8vw);
  transform: rotateZ(-10deg);
  transform:translate(300px, -300px);
  opacity: 0;
  transition: transform 2s ease-out, opacity 1s;
}
.sec2 .submarine2 img{
  transform:translate(0,0);
  opacity: 1;
  transition: transform 2s 1s ease-out, opacity 1s 1s;
}
.sec3 .submarine2 img{
  transform: translate(-50px,300px) rotate(-20deg);
  opacity: 0;
  transition: transform 2s ease-out, opacity 2s;
}
/* SECTION3 */
.containerThird{
  height: 100vh;
  height: 100dvh;
  align-items: flex-start;
}
.seahorse{
  animation: seaMove 2s infinite alternate-reverse ease-in-out;
}
.seahorse img{
  height: 15vh;
  height: 15dvh;
  transition: opacity 2s, transform 2s ease-out;
  opacity: 0;
  transform: translate(0,30vh);
  transform: translate(0,30dvh);
}
.sec3 .seahorse img{
  opacity: 1;
  transform: translate(0,0);
}
.sec4 .seahorse img{
  opacity: 0;
  transform: translate(0,-30vh);
  transform: translate(0,-30dvh);
}
.jellyFish{
  animation: seaMove 2s infinite alternate ease-in-out;
}
.jellyFish img{
  height: 15vh;
  height: 15dvh;
  opacity: 0;
  transform: translate(0,30vh);
  transform: translate(0,30dvh);
  transition: opacity 2s, transform 2s ease;
}
.sec3 .jellyFish img{
  opacity: 1;
  transform: translate(0,0);
}
.sec4 .jellyFish img{
  opacity: 0;
  transform: translate(0,-30vh);
  transform: translate(0,-30dvh);
}
.pplFish{
  margin-right: -20vh;
  margin-right: -20dvh;
  animation: seaMove 2s infinite alternate-reverse ease-in-out;
}
.pplFish img{
  height: 20vh;
  height: 20dvh;
  opacity: 0;
  transform: translate(0,30vh);
  transform: translate(0,30dvh);
  transition: opacity 2s, transform 2s ease-out;
}
.sec3 .pplFish img{
  opacity: 1;
  transform: translate(0,0);
}
.sec4 .pplFish img{
  opacity: 0;
  transform: translate(0,-30vh);
  transform: translate(0,-30dvh);
}
.pplBubble{
  margin-top: 30vh;
  margin-top: 30dvh;
  animation: seaMove 2s infinite alternate ease-in-out;
}
.pplBubble img{
  height: 45vh;
  height: 45dvh;
  opacity: 0;
  transform: translate(0,50vh);
  transform: translate(0,50dvh);
  transition: opacity 2s, transform 2s ease-out;
}
.sec3 .pplBubble img{
  opacity: 1;
  transform: translate(0,0);
}
.sec4 .pplBubble img{
  opacity: 0;
  transform: translate(0,-50vh);
  transform: translate(0,-50dvh);
}
.man3{
  align-self: center;
  animation: seaMove 2s infinite alternate-reverse ease-in-out;
}
.man3 img{
  height: 20vh;
  height: 20dvh;
  opacity: 0;
  transform: translate(-200px,-200px) rotate(-20deg);
}
.sec3 .man3 img{
  opacity: 1;
  transform: translate(0,0) rotate(-20deg);
  transition: opacity 2s 1s, transform 2s ease-out 1s;
}
.sec4 .man3 img{
  opacity: 0;
  transform: translate(100px,200px) rotate(30deg);
  transition: opacity 2s, transform 2s ease-out;
}
.textSec3 {
  font-family: "Graphik SemiBold", sans-serif;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  transform: translate(0,-10vh);
  transform: translate(0,-10dvh);
}
.textSec3 .titleSec3{
  animation: seaMove 2s infinite alternate ease-in-out;
}
.textSec3 .titleSec3 h2{
  font-size: calc(1vw + 1vh);
  font-size: calc(1vw + 1dvh);
  color: white;
  margin-bottom: 1em;
}
.textSec3 .contentSec3{
  animation: seaMove 2s infinite alternate ease-in-out;
}
.textSec3 .contentSec3 p{
  font-size: calc(1.2em + 1vh);
  font-size: calc(1.2em + 1dvh);
  color: #F7EF74;
}
.textSec3{
  transform: translate(0,30vh);
  transform: translate(0,30dvh);
  opacity: 0;
}
.sec3 .textSec3{
  opacity: 1;
  transform: translate(0,0);
  transition: opacity 2s 1s, transform 2s 1s ease-out;
}
.sec4 .textSec3{
  transform: translate(0,-30vh);
  transform: translate(0,-30dvh);
  opacity: 0;
  transition: opacity 2s, transform 2s ease-out;
}
.fishDark{
  animation: fish 6s infinite ease-in-out;
  position: absolute;
}
.fishDark img{
  height: 5vh;
  height: 5dvh;
}
.submarine3{
  align-self: center;
  animation: seaMove 2s infinite alternate ease-in-out;
}
.submarine3 img{
  height: 35vh;
  height: 35dvh;
  opacity: 0;
  transform: translate(30vh,-30vh) rotate(-20deg);
  transform: translate(30dvh,-30dvh) rotate(-20deg);
}
.sec3 .submarine3 img{
  opacity: 1;
  transform: translate(0,0) rotate(0);
  transition: opacity 2s 1s, transform 2s 1s ease-out;
}
.sec4 .submarine3 img{
  opacity: 0;
  transform: translate(-30vh,30vh) rotate(-20deg);
  transform: translate(-30dvh,30dvh) rotate(-20deg);
  transition: opacity 2s, transform 2s ease-out;
}
/* SECTION4 */
.fishermen{
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  animation: seaMove 2s infinite alternate-reverse ease-in-out;
}
.fishermen img{
  position: relative;
  height: 10vh;
  height: 10dvh;
  transform: translate(0,30vh);
  transform: translate(0,30dvh);
  opacity: 0;
  transition: transform 2s ease, opacity 2s ease;
}
.sec4 .fishermen img{
  transform: translate(0,0);
  opacity: 1;
}
.sec5 .fishermen img{
  transform: translate(0,-30vh);
  transform: translate(0,-30dvh);
  opacity: 0;
}
.redFish{
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
}
.redFish img{
  display: block;
  position: relative;
  height: 3vh;
  height: 3dvh;
  animation: fish 10s infinite ease-in-out;
  opacity: 0;
  transition: opacity 2s ease;
}
.sec4 .redFish img{
  opacity: 1;
}
.sec5 .redFish img{
  opacity: 0;
}
.containerRockSx4, .containerRockDx4{
  position: relative;
  display: flex;
  z-index: 1;
  transition: transform 2s ease, opacity 2s ease;
}
.sec5 .containerRockSx4{
  transform: translate(-100%,25%);
  opacity: 0;
}
.sec5 .containerRockDx4{
  transform: translate(100%,25%);
  opacity: 0;
}
.containerRockSx4::after,.containerRockSx4::before{
  content: "";
  position: absolute;
  background-image: url(/images/sec4/seaweed_top.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 20vh;
  height: 20dvh;
  width: 10vh;
  width: 10dvh;
  margin-top: -10vh;
  margin-top: -10dvh;
  z-index: 0;
  transform-origin: center bottom;
  animation: seaweed 5s infinite alternate ease-in-out;
  transition: opacity 2s ease;
}
.containerRockSx4::after{
  margin-top: -5vh;
  margin-top: -5dvh;
  background-image: url(/images/sec4/bottle_woman.png);
  animation: seaMove 2s infinite alternate ease-in-out;
}
.sec3 .containerRockSx4::after, .sec3 .containerRockSx4::before{
  opacity: 0;
}
.sec5 .containerRockSx4::after, .sec5 .containerRockSx4::before{
  opacity: 0;
}
.bottomRockContainer{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.bottomRock{
  position: relative;
  width: 90%;
  transform: translate(0,30vh);
  transform: translate(0,30dvh);
  opacity: 0;
  transition: transform 2s ease, opacity 2s ease;
}
.sec4 .bottomRock{
  transform: translate(0,0);
  opacity: 1;
}
.bottomRock::after,.bottomRock::before{
  content: "";
  position: absolute;
  background-image: url(/images/sec4/seaweed_center.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 20vh;
  height: 20dvh;
  width: 10vh;
  width: 10dvh;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: -13vh;
  margin-top: -13dvh;
  transform-origin: center bottom;
  animation: seaweed 5s infinite alternate ease-in-out;
}
.bottomRock::after{
  background-image: url(/images/sec4/seaweed_center2.png);
  height: 30vh;
  height: 30dvh;
  width: 15vh;
  width: 15dvh;
  margin-left: 23vh;
  margin-left: 23dvh;
  animation: seaweed 3s infinite alternate-reverse ease-in-out;
}
.containerRockDx4::after{
  content: "";
  position: absolute;
  background-image: url(/images/sec4/seaweedRx.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 10vh;
  height: 10dvh;
  width: 10vh;
  width: 10dvh;
  z-index: 0;
  bottom: 0;
  right: 0;
  margin-right: 20vh;
  margin-right: 20dvh;
  margin-bottom: -2vh;
  margin-bottom: -2dvh;
  transform-origin: center bottom;
  animation: seaweed 3s infinite alternate ease-in-out;
  transition: opacity 2s ease;
}
.sec3 .containerRockDx4::after{
  opacity: 0;
}
.shark{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  top: 0;
  justify-content: center;
  opacity: 0;
  transition: opacity 2s ease;
}
.shark img{
  height: 12vh;
  height: 12dvh;
  animation: sharks 10s infinite reverse linear;
}
.sec4 .shark{
  opacity: 1;
}
.sec5 .shark{
  opacity: 0;
}
@keyframes sharks{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
@keyframes seaweed{
  0%{
    transform: rotate(-5deg) skew(-10deg);
  }
  100%{
    transform: rotate(5deg) skew(10deg);
  }
}
.bottomRock img{
  position: relative;
  z-index: 1;
  max-width: 100%;
}
.containerFourth{
  height: 100vh;
  height: 100dvh;
  align-items: flex-start;
}
.textSec4 {
  font-family: "Graphik SemiBold", sans-serif;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  transform: translate(0,-10vh);
  transform: translate(0,-10dvh);
}
.textSec4 .titleSec4{
  animation: seaMove 2s infinite alternate ease-in-out;
}
.textSec4 .titleSec4 h2{
  font-size: calc(1vw + 1vh);
  font-size: calc(1vw + 1dvh);
  color: white;
  margin-bottom: 1em;
}
.textSec4 .contentSec4{
  animation: seaMove 2s infinite alternate ease-in-out;
}
.textSec4 .contentSec4 p{
  font-size: calc(1.2em + 1vh);
  font-size: calc(1.2em + 1dvh);
  color: #F5997F;
}
.textSec4{
  transform: translate(0,30vh);
  transform: translate(0,30dvh);
  opacity: 0;
}
.sec4 .textSec4{
  opacity: 1;
  transform: translate(0,0);
  transition: opacity 2s 1s, transform 2s 1s ease-out;
}
.sec5 .textSec4{
  transform: translate(0,-30vh);
  transform: translate(0,-30dvh);
  opacity: 0;
  transition: opacity 2s, transform 2s ease-out;
}
.man4{
  align-self: flex-start;
  z-index: 1;
  animation: seaMove 2s infinite alternate ease-in-out;
}
.man4 img{
  height: 15vh;
  height: 15dvh;
  margin-top: 0;
  scale: -1 1;
  transform: translate(-20vh,-20vh);
  transform: translate(-20dvh,-20dvh);
  opacity: 0;
}
.sec4 .man4 img{
  transform: translate(0,0);
  opacity: 1;
  transition: transform 2s 1s ease, opacity 2s 1s ease;
}
.sec5 .man4 img{
  transform: translate(20vh,20vh);
  transform: translate(20dvh,20dvh);
  opacity: 0;
  transition: transform 2s ease, opacity 2s ease;
}
.submarine4{
  z-index: 1;
  align-self: flex-start;
  animation: seaMove 2s infinite alternate-reverse ease-in-out;
}
.submarine4 img{
  height: 25vh;
  height: 25vh;
  transform: translate(20vh,-20vh);
  transform: translate(20dvh,-20dvh);
  opacity: 0;
}
.sec4 .submarine4 img{
  transform: translate(0,0);
  opacity: 1;
  transition: transform 2s 1s ease, opacity 2s 1s ease;
}
.sec5 .submarine4 img{
  transform: translate(-20vh,20vh);
  transform: translate(-20dvh,20dvh);
  opacity: 0;
  transition: transform 2s ease, opacity 2s ease;
}
/*SECTION 5*/
.rockSx5{
  position: absolute;
  display: flex;
  justify-content: flex-end;
  left: 0;
  bottom: 0;
  height: 40vh;
  height: 40dvh;
  opacity: 1;
  filter: brightness(1);
  transition: filter 2s ease-in, opacity 2s;
  max-width: 55%;
}
.rockImgSx5{
  height: 40vh;
  height: 40dvh;
}
.rockRx5{
  position: absolute;
  display: flex;
  justify-content: flex-start;
  right: 0;
  bottom: 0;
  height: 80vh;
  height: 80dvh;
  opacity: 1;
  filter: brightness(1);
  transition: filter 2s ease-in, opacity 2s;
  max-width: 100%;
}
.rockImgRx5{
  height: 80vh;
  height: 80dvh;
}
.containerRockSx5, .containerRockDx5{
  position: relative;
  display: flex;
  z-index: 1;
  transition: transform 2s ease, opacity 2s ease;
}
.containerRockSx5{
  transform: translate(-100%,100%);
  opacity: 0;
}
.containerRockDx5{
  transform: translate(100%,100%);
  opacity: 0;
}
.sec5 .containerRockSx5{
  transform: translate(0,0);
  opacity: 1;
}
.sec5 .containerRockDx5{
  transform: translate(0,0);
  opacity: 1;
}
.sec6 .containerRockSx5{
  transform: translate(-100%,100%);
  opacity: 0;
}
.sec6 .containerRockDx5{
  transform: translate(100%,100%);
  opacity: 0;
}
.containerRockSx5::before, .containerRockSx5::after{
  content: "";
  position: absolute;
  background-image: url(/images/sec5/seaweeds3Sec5.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 30vh;
  height: 30dvh;
  width: 31vh;
  width: 31dvh;
  margin-top: -20vh;
  margin-top: -20dvh;
  z-index: -1;
  transform-origin: center bottom;
  animation: seaweed 5s infinite alternate ease-in-out;
}
.containerRockSx5::after{
  background-image: url(/images/sec5/seaweedSec5.png);
  width: 12vh;
  width: 12dvh;
  margin-left: 10vh;
  margin-left: 10dvh;
  z-index: 0;
  animation: seaweed 5s infinite alternate-reverse ease-in-out;
}
.seaweed5bottom{
  position: absolute;
  bottom: 0;
  right: 0;
}
.seaweed5bottom img{
  height: 20vh;
  height: 20dvh;
  transform-origin: center bottom;
  animation: seaweed 5s infinite alternate ease-in-out;
}
.mermaids{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.mermaids::after{
  content: "";
  display: block;
  width: 5vh;
  width: 5dvh;
  height: 2vh;
  height: 2dvh;
  border-radius: 50%;
  background-color: rgba(0,0,0,.2);
  animation: shadow 2s alternate infinite ease-in-out;
}
.mermaids img{
  height: 10vh;
  height: 10dvh;
  margin-top: -5vh;
  margin-top: -5dvh;
  animation: seaMove 2s infinite alternate ease-in-out;
}
.pearl{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 1;
}
.pearl img{
  height: 10vh;
  height: 10dvh;
  margin-bottom: 8vh;
  margin-bottom: 8dvh;
  margin-right: 15vh;
  margin-right: 15dvh;
}
.textSec5 {
  font-family: "Graphik SemiBold", sans-serif;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  transform: translate(0,-10vh);
  transform: translate(0,-10dvh);
}
.textSec5 .titleSec5{
  animation: seaMove 2s infinite alternate ease-in-out;
}
.textSec5 .titleSec5 h2{
  font-size: calc(1vw + 1vh);
  font-size: calc(1vw + 1dvh);
  color: white;
  margin-bottom: 1em;
}
.textSec5 .contentSec5{
  animation: seaMove 2s infinite alternate ease-in-out;
}
.textSec5 .contentSec5 p{
  font-size: calc(1.2em + 1vh);
  font-size: calc(1.2em + 1dvh);
  color: #74D2FF;
}
.textSec5{
  transform: translate(0,30vh);
  transform: translate(0,30dvh);
  opacity: 0;
}
.sec5 .textSec5{
  opacity: 1;
  transform: translate(0,0);
  transition: opacity 2s 1s, transform 2s 1s ease-out;
}
.sec6 .textSec5{
  transform: translate(0,-30vh);
  transform: translate(0,-30dvh);
  opacity: 0;
  transition: opacity 2s, transform 2s ease-out;
}
.containerFifth{
  height: 100vh;
  height: 100dvh;
  align-items: flex-start;
}
.submarine5{
  transform: translate(-20vh,-20vh);
  transform: translate(-20dvh,-20dvh);
  opacity: 0;
}
.sec5 .submarine5{
  transform: translate(0,0);
  opacity: 1;
  transition: transform 2s 1s ease, opacity 2s 1s ease;
}
.sec6 .submarine5{
  transform: translate(20vh,20vh);
  transform: translate(20dvh,20dvh);
  opacity: 0;
  transition: transform 2s ease, opacity 2s ease;
}
.submarine5 img{
  height: 25vh;
  height: 25dvh;
  scale: -1 1;
  rotate: 15deg;
  animation: seaMove 2s infinite alternate-reverse ease-in-out;
}
.man5{
  transform: translate(20vh,-20vh);
  transform: translate(20dvh,-20dvh);
  opacity: 0;
}
.sec5 .man5{
  transform: translate(0,0);
  opacity: 1;
  transition: transform 2s 1s ease, opacity 2s 1s ease;
}
.sec6 .man5{
  transform: translate(-20vh,20vh);
  transform: translate(-20dvh,20dvh);
  opacity: 0;
  transition: transform 2s ease, opacity 2s ease;
}
.man5 img{
  height: 15vh;
  height: 15dvh;
  scale: -1 1;
  animation: seaMove 2s infinite alternate-reverse ease-in-out;
}
@keyframes shadow{
  0%{
    scale: 1;
  }
  100%{
    scale: 1.5;
  }
}
/*SECTION 6*/
#sec6::after{
  content: "";
  position: absolute;
  top: 0;
  margin-top: -3%;
  left: 0;
  width: 20%;
  height: 70%;
  background-image: url(/images/sec6/raylight.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  opacity: 0;
  overflow: visible;
  transform-origin: center top;
  animation: seaweed 8s infinite alternate ease-in-out;
  transition: opacity 2s;
}
.sec6 #sec6::after{
  opacity: 1;
}
.sec #sec6::after{
  opacity: 0;
}
.jellyFish6{
  position: absolute;
  top: 0;
  right: 0;
  width: 15%;
  height: 50%;
  transform: translate(0,30vh);
  transform: translate(0,30dvh);
  opacity: 0;
  transition: transform 2s ease, opacity 2s ease;
}
.sec6 .jellyFish6{
  transform: translate(0,0);
  opacity: 1;
}
.sec .jellyFish6{
  transform: translate(0,30vh);
  transform: translate(0,30dvh);
  opacity: 0;
}
.jellyFish6 img{
  height: 20vh;
  height: 20dvh;
  margin-top: 5vh;
  margin-top: 5dvh;
  animation: seaMove 2s infinite alternate ease-in-out;
}
.rockSx6{
  position: absolute;
  display: flex;
  justify-content: center;
  left: 0;
  bottom: 0;
  height: 70vh;
  height: 70dvh;
  max-width: 100%;
  transform: translate(0,70vh);
  transform: translate(0,70dvh);
  transition: transform 2s ease, opacity 2s ease;
}
.rockImgSx6{
  height: 70vh;
  height: 70dvh;
}
.rockRx6{
  position: absolute;
  display: flex;
  justify-content: flex-start;
  right: 0;
  bottom: 0;
  height: 55vh;
  height: 55dvh;
  max-width: 50%;
  transform: translate(0,55vh);
  transform: translate(0,55dvh);
  transition: transform 2s ease, opacity 2s ease;
}
.rockImgRx6{
  height: 55vh;
  height: 55dvh;
}
.sec6 .rockSx6, .sec6 .rockRx6{
  transform: translate(0,0);
}
.sec .rockSx6{
  transform: translate(0,70vh);
  transform: translate(0,70dvh);
  opacity: 0;
}
.sec .rockRx6{
  transform: translate(0,55vh);
  transform: translate(0,55dvh);
  opacity: 0;
}
.containerRockSx6, .containerRockDx6{
  position: relative;
  display: flex;
  z-index: 1;
}
.containerRockSx6::before, .containerRockSx6::after{
  content: "";
  position: absolute;
  background-image: url(/images/sec6/seaweedTopSx.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 15vh;
  height: 15dvh;
  width: 4vh;
  width: 4dvh;
  margin-left: 5vh;
  margin-left: 5dvh;
  transform-origin: center bottom;
  animation: seaweed 5s infinite alternate ease-in-out;
}
.containerRockSx6::after{
  background-image: url(/images/sec6/pearlSx6.png);
  height: 8vh;
  height: 8dvh;
  width: 8vh;
  width: 8dvh;
  margin-left: 10vh;
  margin-left: 10dvh;
  margin-top: 10vh;
  margin-top: 10dvh;
  animation: none;
  scale: -1 1;
}
.seaWeedSx6Bot, .seaWeedSx6Bot1{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 2;
}
.seaWeedSx6Bot1{
  left: 0;
  width: 10%;
  justify-content: flex-end;
}
.seaWeedSx6Bot1 img{
  height: 30vh;
  height: 30dvh;
  margin-bottom: -2vh;
  margin-bottom: -2dvh;
  transform-origin: center bottom;
  animation: seaweed 4s infinite alternate ease-in-out;
}
.seaWeedSx6Bot img{
  height: 30vh;
  height: 30dvh;
  margin-bottom: -2vh;
  margin-bottom: -2dvh;
  transform-origin: center bottom;
  animation: seaweed 3s infinite alternate-reverse ease-in-out;
}
.containerSixth{
  height: 100vh;
  height: 100dvh;
  align-items: flex-start;
}
.fishermen6{
  position: absolute;
  display: flex;
  justify-content: center;
  width: 50%;
  height: 100%;
  left: 0;
}
.fishermen6 img{
  position: relative;
  height: 15vh;
  height: 15dvh;
  margin-top: -20vh;
  margin-top: -20dvh;
  animation: seaMove 2s infinite alternate-reverse ease-in-out;
}
.pearlSxTop6{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: 1;
}
.pearlSxTop6 img{
  height: 10vh;
  height: 10dvh;
  margin-right: 35vh;
  margin-right: 35dvh;
  margin-bottom: 15vh;
  margin-bottom: 15dvh;
}
.redFish6{
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}
.redFish6 img{
  margin-top: 10vh;
  margin-top: 10dvh;
  display: block;
  position: relative;
  height: 2vh;
  height: 2dvh;
  animation: fish 10s infinite ease-in-out;
  z-index: -1;
}
.fishSx6{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.fishSx6 img{
  margin-top: 10vh;
  margin-top: 10dvh;
  display: block;
  position: relative;
  height: 2vh;
  height: 2dvh;
  animation: fish 8s infinite ease-in-out;
}
.bubbles{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.bubbles img{
  height: 10vh;
  height: 10dvh;
  animation: bubbles 8s infinite ease-out;
}
.seaHorse6{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.seaHorse6 img{
  height: 7vh;
  height: 7dvh;
  margin-right: 70%;
  animation: seaMove 2s infinite alternate ease-in-out;
}
.pearlBotSx6{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.pearlBotSx6 img{
  height: 13vh;
  height: 13dvh;
  margin-bottom: 5vh;
  margin-bottom: 5dvh;
  margin-right: 15vh;
  margin-right: 15dvh;
}
.fishCouple{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.fishCouple img{
  height: 3vh;
  height: 3dvh;
  animation: fish 10s infinite reverse ease-in-out;
}
.nemo{
  position: absolute;
  width: 100%;
  right: 0;
  margin-right: 25%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.nemo img{
  scale: -1 1;
  height: 3vh;
  height: 3dvh;
  animation: fish 6s infinite ease-in-out;
}
.seaWeedRx6{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.seaWeedRx6 img{
  height: 10vh;
  height: 10dvh;
  margin-right: 30vh;
  margin-right: 30dvh;
  margin-bottom: 5vh;
  margin-bottom: 5dvh;
  transform-origin: center bottom;
  animation: seaweed 3s infinite alternate-reverse ease-in-out;
}
.seaWeedRxBot6{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.seaWeedRxBot6 img{
  height: 10vh;
  height: 10dvh;
  margin-bottom: -2vh;
  margin-bottom: -2dvh;
  transform-origin: center bottom;
  animation: seaweed 2s infinite alternate ease-in-out;
}
.pearlRxBot6{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.pearlRxBot6 img{
  height: 10vh;
  height: 10dvh;
  margin-left: 80%;
  margin-bottom: 2vh;
  margin-bottom: 2dvh;
}
.pearlRxTop6{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.pearlRxTop6 img{
  height: 8vh;
  height: 8dvh;
  margin-left: 70%;
}
.seaWeedRxTop6{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.seaWeedRxTop6 img{
  height: 15vh;
  height: 15dvh;
  margin-left: 65%;
  margin-bottom: 20vh;
  margin-bottom: 20dvh;
  transform-origin: center bottom;
  animation: seaweed 3s infinite alternate-reverse ease-in-out;
}
.bottleRx6{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.bottleRx6 img{
  height: 10vh;
  height: 10dvh;
  margin-left: 60%;
  margin-bottom: 8vh;
  margin-bottom: 8dvh;
  transform-origin: center bottom;
  animation: seaMove 3s infinite alternate-reverse ease-in-out;
}
.arrived p{
  position: relative;
  font-family: "Graphik SemiBold", sans-serif;
  font-weight: 600;
  font-weight: 500;
  font-size: calc(.85vw + 1vh);
  font-size: calc(.85vw + 1dvh);
  color: white;
  text-align: center;
  margin-bottom: .5em;
  animation: seaMove 3s infinite alternate-reverse ease-in-out;
  opacity: 0;
  transition: opacity 2s 1s;
}
.sec6 .arrived p{
  opacity: 1;
  transition: opacity 2s 2s ease;
}
.sec .arrived p{
  opacity: 0;
  transition: opacity 2s ease;
}
.discover{
  position: relative;
  animation: seaMove 3s infinite alternate-reverse ease-in-out;
  transition: opacity 2s 1s;
}
.discover h2{
  font-family: "Graphik SemiBold", sans-serif;
  font-weight: 600;
  font-size: calc(1.5vw + 1.5vh);
  font-size: calc(1.5vw + 1.5dvh);
  text-align: center;
  position: relative;
  color: #FF6B51;
  z-index: 1;
  padding: 5vh 5vh 10vh;
  padding: 5dvh 5dvh 10dvh;
  width: 100%;
  opacity: 0;
  /* max-width: 700px; */
}
.sec6 .discover h2{
  opacity: 1;
  transition: opacity 2s 2s ease;
}
.sec .discover h2{
  opacity: 0;
  transition: opacity 2s ease;
}
.discover:after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url(/images/sec6/baloon.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0;
}
.sec6 .discover:after{
  opacity: 1;
  transition: opacity 2s 2s ease;
}
.sec .discover:after{
  opacity: 0;
  transition: opacity 2s ease;
}
.fadeout .arrived p, .fadeout .discover{
  opacity: 0;
  transition: opacity 1s;
}
.manSubmarine6{
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: -20vh;
  margin-top: -20dvh;
}
.man6{
  z-index: 1;
  transform: translate(-20vh,-20vh);
  transform: translate(-20dvh,-20dvh);
  opacity: 0;
}
.sec6 .man6{
  transform: translate(0,0);
  opacity: 1;
  transition: transform 2s 1.5s ease, opacity 2s 1.5s ease;
}
.fadeout .man6{
  transform: translate(30vh,10vh);
  transform: translate(30dvh,10vh);
  opacity: 0;
  transition: transform 2s ease, opacity 2s;
}
.sec .man6{
  transform: translate(20vh,-20vh) rotate(-30deg);
  transform: translate(20dvh,-20dvh) rotate(-30deg);
  opacity: 0;
  transition: transform 2s ease, opacity 2s ease;
}
.man6 img{
  height: 15vh;
  height: 15dvh;
  animation: seaMove 3s infinite alternate-reverse ease-in-out;
  margin-right: 10vw;
}
.submarine6{
  z-index: 1;
  transform: translate(20vh,-20vh);
  transform: translate(20dvh,-20dvh);
  opacity: 0;
}
.sec6 .submarine6{
  transform: translate(0,0);
  opacity: 1;
  transition: transform 2s 1.5s ease, opacity 2s 1.5s ease;
}
.sec .submarine6{
  transform: translate(-20vh,0) rotate(30deg);
  transform: translate(-20dvh,0) rotate(30deg);
  opacity: 0;
  transition: transform 2s ease, opacity 2s ease;
}
.submarine6 img{
  height: 30vh;
  height: 30dvh;
  rotate: -15deg;
  animation: seaMove 3s infinite alternate ease-in-out;
}
.discoverButton{
  position: relative;
  opacity: 0;
}
.sec6 .discoverButton{
  opacity: 1;
  transition: opacity 2s 3s ease;
}
.sec .discoverButton{
  opacity: 0;
  transition: opacity 2s ease;
}
.discoverButton a{
  position: fixed;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  margin-bottom: 3vh;
  margin-bottom: 3dvh;
  display: block;
  color: #579889;
  font-family: "Graphik Medium", sans-serif;
  font-weight: 600;
  text-decoration: none;
  background-color: white;
  font-size: calc(.65em + 2vh);
  font-size: calc(.65em + 2dvh);
  padding: .5em calc(1.5em + 5px) .5em 1em;
  z-index: 1;
  line-height: 1em;
  transition: .2s ease;
  max-width: 200px;
  border-radius: 5px;
  box-shadow: 0 0 10px black;
}
.discoverButton a::after{
  content: "";
  position: absolute;
  background-image: url(/images/sec6/discoverArrowRight.png);
  background-position: right 1em center;
  background-size: 4%;
  background-repeat: no-repeat;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: 3px;
  transition: .2s ease;
}
.discoverButton a:hover{
  filter: brightness(1.3);
}
.discoverButton a:hover::after{
  background-position:right .5em center;
}
@keyframes bubbles{
  0%{
    transform: translate(0,80vh);
    transform: translate(0,80dvh);
    opacity: 1;
  }
  50%{
    opacity: .8;
  }
  80%{
    transform: translate(0,0);
    opacity: 0;
  }
  100%{
    transform: translate(0,0);
    opacity: 0;
  }
}
/*MEDIA*/
@media (max-height:450px) and (max-width:575px) and (orientation:landscape){
  /* .buttonHome{
    flex-direction: row;
  } */
  .titleHome h2{
    margin-top: 5vh;
    margin-top: 5dvh;
  }
}
@media (max-width:350px){
  .buttonHome{
    gap: .25em;
  }
}
@media (min-width: 576px) {
}

@media (min-width: 768px) {
  .titleHome h2{
    font-size: calc(1.5em + 2vh);
    font-size: calc(1.5em + 2dvh);
  }
  .birds img{
    width: 90px;
  }
  .textSec3 .contentSec3 p, .textSec4 .contentSec4 p, .textSec5 .contentSec5 p{
    font-size: calc(2vw + 2vh);
    font-size: calc(2vw + 2dvh);
  }
  .textSec3{
    margin-top: 10vh;
    margin-top: 10dvh;
  }
  .man4 img{
    margin-top: 5vh;
    margin-top: 5dvh;
  }
  .man5 img{
    margin-top: 20vh;
    margin-top: 20dvh;
  }
  .submarine5 img{
    margin-top: 10vh;
    margin-top: 10dvh;
  }
  .man6 img{
    margin-right: 5vh;
    margin-right: 5dvh;
  }
  .submarine6 img{
    margin-left: 5vh;
    margin-left: 5dvh;
  }
  .discoverButton a{
    max-width: 220px;
  }
}
@media (min-width: 992px) {
  body{
    font-size: 18px;
  }
  .birds img{
    width: 120px;
  }
  .boat{
    margin-left: 0;
  }
  .textSec3 .contentSec3 p, .textSec4 .contentSec4 p, .textSec5 .contentSec5 p{
    font-size: calc(1.2em + 3vh);
    font-size: calc(1.2em + 3dvh);
  }
  .discover h2{
    font-size: calc(1.2vw + 1.2vh);
    font-size: calc(1.2vw + 1.2dvh);
  }
}

@media (min-width: 1200px) {
  .textSec3 .contentSec3 p, .textSec4 .contentSec4 p, .textSec5 .contentSec5 p{
    font-size: calc(1.2em + 4vh);
    font-size: calc(1.2em + 4dvh);
  }
}

@media (min-width: 1400px) {
  body{
    font-size: 20px;
  }
}
/* @supports (-webkit-touch-callout: none) {
  body{
    height: 100dvh;
  }
} */
/*MEDIA END*/