body {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

.angle-page-body,
.dawn-page-body,
.start-page-body {
  background-color: rgb(31, 31, 31);
  color: rgb(220, 220, 157);
}

.artist-page-body {
  color: rgb(220, 220, 157);
  background-color: black;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.right {
  display: flex;
  justify-content: center;
  align-items: end;
}

.main-div {
  width: 100%;
  height: 100%;
}

.main-div-start-page {
  width: 100%;
  height: 100%;
}

.main-div-artist-page {
  width: 100%;
  height: 100%;
}


.black-background {
  background-color: black;
}

.friend-img {
  max-width: 400px;
  width: 100%;
  padding-top: 10%;
}

.angle-logo-mainpage-div {
  top: 360;
}

.angle-div-start-page {
  position: absolute;
  top: 0px;
}

.angle-img-start-page {
  position: absolute;
  top: 40px;
  left: -119px;
  margin-left: 2px;
  width: 265px;
}

.angle-div {
  position: absolute;
  top: 0px;
}

.angle-img {
  position: absolute;
  margin-bottom: 20px;
  top: 44px;
  left: -115px;
  width: 265px;
}

.angle-cream-img {
  position: absolute;
  top: 40px;
  left: -119px;
  z-index: 400;
  width: 265px;
}

.thespian-artist {
  font-family: monospace;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: #ffd5c2;
  color: #ffd5c2;
}

.absolute {
  position: absolute;
}

.michael-angle-oh-div {
  top: 520px;
}

.michael-link {
  font-family: monospace;
  color: lightskyblue;
}

.freak-show-div {
  position: absolute;
  top: 570px;
}

.freak-show-link {
  font-family: monospace;
  color: #f1d710;
  /* text-decoration: none; */
}

.video-angle-link {
  font-family: monospace;
  color: rgb(206, 145, 120);
}

.oh-link {
  font-family: monospace;
  color: #d7ba7d;
}

.agent-div {
  top: 670px;
}

.agent-link {
  font-family: monospace;
  color: #ce70b3;
}

.shop-div {
  top: 720px;
}

.shop-link {
  font-family: monospace;
  color: orangered;
}

.spasticambush-div {
  top: 620px;
}

.spasticambush-link {
  font-family: monospace;
  color: #ffffff;
}

.social-media-links {
  top: 796px;
}

.upcoming-exhibition-text {
  color: orangered;
}

.perfect-blend-div {
  margin-top: 40px;
  text-align: center;
}

.social-media-links > a > img {
  width: 30px;
  margin: 5px;
}

.signature-img {
  width: 250px;
}

.invisible-box {
  width: 10px;
  height: 100px;
}

.com-div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 84px;
  z-index: 1000;
}

.com-link {
  /* width: 100%;
  height: 100%; */
}

/* Code styling */

.bracket {
  color: rgb(173, 173, 173);
}

.tagname {
  color: rgb(63, 156, 203);
}

.commented-out {
  color: green;
}

.attribute {
  color: lightskyblue;
}

.attribute-value {
  color: rgb(206, 145, 120);
}

.commented-out {
  color: rgb(94, 153, 62);
}

.michael-angle-oh-photo-img {
  padding-top: 227px;
  /* max-width: 300px; */
  width: 100%;
}

.michael-angle-oh-video {
  padding-top: 274px;
  width: 100%;
  object-fit: fill;
}

.michael-angle-oh-video-text {
  padding-bottom: 80px;
  padding-left: 5%;
  padding-right: 5%;
  text-align: center;
  font-family: monospace;
  padding-top: 39px;
}

.freedom-text {
  /* position: absolute; */
  /* top: 261px; */
  /* padding-top: 39px; */
  padding-bottom: 49px;
  padding-left: 5%;
  padding-right: 5%;
  text-align: center;
  font-family: monospace;
}

.artist-text {
  font-family: monospace;
  text-align: center;
  padding: 6px;
}

.mon-dernier-espoir {
  /* padding-top: 100px; */
  width: 100%;
}

.artist-img-and-text {
  margin-top: 72px;
  /* margin-bottom: 250px; */
  max-width: 1200px;
  text-align: center;
}

.paws {
  position: relative;
}

.paw0 {
  text-align: center;
  visibility: hidden;
  width: 122px;
  margin: auto;
  margin-top: 24%;
}

.paw1 {
  display: none;
  width: 200px;
  position: absolute;
  bottom: 9px;
  left: 12px;
  transform: rotate(10deg);
}

.paw2 {
  display: none;
  width: 200px;
  position: absolute;
  bottom: 160px;
  left: 170px;
  transform: rotate(9deg);
}

.paw3 {
  display: none;
  width: 200px;
  position: absolute;
  bottom: 360px;
  left: 77px;
  transform: rotate(11deg);
}

.paw4 {
  display: none;
  width: 200px;
  position: absolute;
  bottom: 501px;
  left: 224px;
  transform: rotate(10deg);
}

.paw5 {
  display: none;
  width: 200px;
  position: absolute;
  bottom: 714px;
  left: 150px;
  transform: rotate(9deg);
}

.t-minus-storm {
  width: 100%;
  text-align: left;
  position: fixed;
  padding-left: 35px;
  top: 3px;
  z-index: 100000;
}

@font-face {
  font-family: 'T-Minus-Storm';
  /*a name to be used later*/
  src: url('../fonts/alarm\ clock.ttf');
  /*URL to font*/
}

.t-minus-storm {
  font-family: 'T-Minus-Storm';
}

.presentation-text {
  font-family: monospace;
}

.footer {
  /* width: 100%;
  position: relative;
  bottom: 5px; */
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;
}

.footer-index-page {
  top: 740px;
  margin-top: 100px;
}

.web-design-info {
  font-family: monospace;
  /* padding-top: 42px; */
  /* color: darkseagreen; */

  /* color: #63953b; */
  color: #7cbb49;

  text-decoration: none;
  padding-bottom: 20px;
  text-align: center;
  line-height: 1.5;
}

.web-design-email-link {
  font-family: monospace;
  /* padding-bottom: 42px; */
  /* color: darkseagreen; */

  /* color: #63953b; */
  color: #7cbb49;

  /* text-decoration: none; */
}

.copyright-start-page {
  font-family: monospace;
  padding-bottom: 5px;
  /* padding-top: 29px; */
}

.copyright {
  font-family: monospace;
  padding-top: 20px;
  padding-bottom: 20px;
}

.all-rights {
  /* padding-top: 42px; */
  font-family: monospace;
}

.agent-email-link,
.agent-name {
  color: yellow;
}

.paw-logo-img {
  width: 79px;
  /* padding-right: 50px; */
}

.michael-angle-oh-logo-img {
  max-width: 602px;
  width: 97%;
  padding-left: 0px;
  /* padding-top: 138px; */
}

.break {
  flex-basis: 100%;
  height: 0;
}

.empty {
  width: 10px;
  height: 10px;
}

.furious-mother-nature-div {
  /* position: absolute; */
  /* top: 700px; */
  /* padding-bottom: 50px; */
}

.agent-contact-text {
  position: absolute;
  top: 261px;
  padding: 50px;
  text-align: center;
  font-family: monospace;
}

.text {
  color: rgb(236, 227, 227);
}

/* End Code Styling */

.something-timeless-div {
  position: absolute;
  top: 1118px;
}

.something-timeless-mainpage-div {
  position: absolute;
  top: 222px;
}

.something-timeless-img {
  position: relative;
}

.black-angles-div {
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: space-between;

  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.white-angles-div {
  width: 100%;
  z-index: -100;
  display: flex;
  justify-content: space-between;

  filter: invert(100%);

  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.black-angle-div-right {}

.black-angle-div-left {}

.browser-div {
  position: absolute;
  top: 1337px;
}

.browser-img {
  position: absolute;
  top: -317px;
  left: -1900px;
  margin-left: 2px;
  width: 665px;
}

.im-alive-div {
  position: absolute;
  top: 1337px;
  width: 300px;
}

.im-alive-img {
  position: absolute;
  top: -40px;
  left: 82px;
  margin-left: 2px;
  width: 171px;
  transform: rotate(1deg);
  display: none;
}

.get-off-my-property-div {
  position: absolute;
  top: 1936px;
}

.get-off-my-property-img {
  position: absolute;
  top: -317px;
  left: -1900px;
  margin-left: 2px;
  width: 665px;
}

.paraply-div {
  position: absolute;
  width: 100%;
}

.paraply-img {
  top: -600px;
  position: absolute;
  width: 400px;
}

.spin {
  animation-name: spin;
  animation-duration: 3000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.gomp-div {
  position: absolute;
  width: 100%;
  top: 350px;
  z-index: 256;
}

.gomp-img {
  position: relative;
  margin-left: 2px;
  width: 375px;
}

.hearts-div {
  position: absolute;
  top: 1780px;
  width: 100%;
  z-index: 387;
}

#heartsImg {
  width: 460px;
  margin-left: -6%;
  animation: pulse 4s linear infinite;
  display: none;
}

@-webkit-keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  50% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }

  100% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  50% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }

  100% {
    -webkit-transform: scale(0);
    transform: scale(1.1);
  }
}






/* Water waves and fire*/

.water-and-fire-div {
  position: absolute;
  /* top: 1777px; */
  top: 237%;
  padding-bottom: 444px;
  text-align: center;
  margin-left: -20%;
}

.wave-top-invisible {
  width: 300%;
  position: relative;
  top: 0%;
  z-index: -300;
  margin-left: -87%;
  transform: rotate(5deg);
}

.wave-1-img-right {
  width: 300%;
  position: relative;
  top: 0%;
  z-index: -300;
  margin-left: -87%;
  transform: rotate(2deg);
}

.wave-2-img-left {
  width: 320%;
  position: absolute;
  top: 1%;
  z-index: 0;
  margin-left: -25%;
  transform: rotate(-3deg);
}

.wave-3-img-right {
  width: 340%;
  position: absolute;
  top: 5%;
  z-index: 300;
  margin-left: -6%;
  transform: rotate(1.5deg)
}

.wave-4-img-right {
  width: 360%;
  position: absolute;
  top: 6%;
  z-index: 400;
  margin-left: -28%;
  transform: rotate(-0.5deg)
}

.wave-5-img-left {
  width: 380%;
  position: absolute;
  top: 10%;
  z-index: 500;
  margin-left: -182%;
  transform: rotate(-2deg);
}

.wave-6-img-left {
  width: 420%;
  position: absolute;
  top: 10%;
  z-index: 600;
  margin-left: -115%;
  transform: rotate(-2.5deg);
}

.wave-7-img-right {
  width: 400%;
  position: absolute;
  top: 15%;
  z-index: 700;
  margin-left: -86%;
  transform: rotate(0.5deg);
}

.wave-8-img-left {
  width: 570%;
  position: absolute;
  top: 35%;
  z-index: 400;
  margin-left: -107%;
  transform: rotate(0deg);
}

/*
.wave-9-img-left {
  width: 460%;
  position: absolute;
  top: 25.5%;
  z-index: 900;
  margin-left: -56%;
  transform: rotate(-0.5deg);
}

.wave-10-img-right {
  width: 480%;
  position: absolute;
  top: 27%;
  z-index: 1000;
  margin-left: -93%;
  transform: rotate(-1.5deg);
}

.wave-11-img-left {
  width: 500%;
  position: absolute;
  top: 31%;
  z-index: 1100;
  margin-left: -1%;
  transform: rotate(-0.5deg);
}

.wave-12-img-right {
  width: 520%;
  position: absolute;
  top: 35%;
  z-index: 1200;
  margin-left: -73%;
  transform: rotate(0.5deg);
}

.wave-13-img-left {
  width: 540%;
  position: absolute;
  top: 37%;
  z-index: 1300;
  margin-left: -48%;
  transform: rotate(-1.5deg);
}

.wave-14-img-right {
  width: 560%;
  position: absolute;
  top: 42%;
  z-index: 1400;
  margin-left: -54%;
  transform: rotate(1.5deg);
}

.wave-15-img-right {
  width: 6000px;
  position: relative;
  top: 1000px;
  z-index: 425;
  margin-left: -54%;
  transform: rotate(1.5deg);
} */

.wave-1-animation {
  -webkit-animation: wave-1-animation 2s ease 0s;
  -webkit-animation-iteration-count: infinite;
  animation: wave-1-animation 2s ease 0s;
  animation-iteration-count: infinite;
}

.wave-2-animation {
  -webkit-animation: wave-2-animation 3s ease 2s;
  -webkit-animation-iteration-count: infinite;
  animation: wave-2-animation 3s ease 2s;
  animation-iteration-count: infinite;
}

.wave-3-animation {
  -webkit-animation: wave-1-animation 4s ease 1s;
  -webkit-animation-iteration-count: infinite;
  animation: wave-1-animation 4s ease 1s;
  animation-iteration-count: infinite;
}

.wave-4-animation {
  -webkit-animation: wave-1-animation 3s ease 1s;
  -webkit-animation-iteration-count: infinite;
  animation: wave-1-animation 3s ease 1s;
  animation-iteration-count: infinite;
}

.wave-5-animation {
  -webkit-animation: wave-2-animation 4s ease 2s;
  -webkit-animation-iteration-count: infinite;
  animation: wave-2-animation 4s ease 2s;
  animation-iteration-count: infinite;
}

.wave-6-animation {
  -webkit-animation: wave-1-animation 6s ease 1s;
  -webkit-animation-iteration-count: infinite;
  animation: wave-1-animation 6s ease 1s;
  animation-iteration-count: infinite;
}

.wave-7-animation {
  -webkit-animation: wave-1-animation 5s ease 2s;
  -webkit-animation-iteration-count: infinite;
  animation: wave-1-animation 5s ease 1s;
  animation-iteration-count: infinite;
}

.wave-8-animation {
  -webkit-animation: wave-1-animation 3.5s ease 2s;
  -webkit-animation-iteration-count: infinite;
  animation: wave-1-animation 3.5s ease 2s;
  animation-iteration-count: infinite;
}

.wave-9-animation {
  -webkit-animation: wave-1-animation 2.5s ease 1s;
  -webkit-animation-iteration-count: infinite;
  animation: wave-1-animation 2.5s ease 1s;
  animation-iteration-count: infinite;
}

.wave-10-animation {
  -webkit-animation: wave-1-animation 2.5s ease 2s;
  -webkit-animation-iteration-count: infinite;
  animation: wave-1-animation 2.5s ease 2s;
  animation-iteration-count: infinite;
}

.wave-11-animation {
  -webkit-animation: wave-1-animation 4.5s ease 2.5s;
  -webkit-animation-iteration-count: infinite;
  animation: wave-1-animation 4.5s ease 2.5s;
  animation-iteration-count: infinite;
}

.wave-12-animation {
  -webkit-animation: wave-1-animation 3.5s ease 1.5s;
  -webkit-animation-iteration-count: infinite;
  animation: wave-1-animation 3.5s ease 1.5s;
  animation-iteration-count: infinite;
}

.wave-13-animation {
  -webkit-animation: wave-1-animation 5.5s ease 2s;
  -webkit-animation-iteration-count: infinite;
  animation: wave-1-animation 5.5s ease 2s;
  animation-iteration-count: infinite;
}

.wave-14-animation {
  -webkit-animation: wave-1-animation 3.5s ease 3s;
  -webkit-animation-iteration-count: infinite;
  animation: wave-1-animation 3.5s ease 3s;
  animation-iteration-count: infinite;
}

@-webkit-keyframes wave-1-animation {
  0% {
    left: 0;
  }

  70% {
    left: 10%;
  }

  100% {
    left: 0;
  }
}

@keyframes wave-1-animation {
  0% {
    left: 0;
  }

  70% {
    left: 10%;
  }

  100% {
    left: 0;
  }
}

@-webkit-keyframes wave-2-animation {
  0% {
    left: 0;
  }

  90% {
    left: 10%;
  }

  100% {
    left: 0;
  }
}

@keyframes wave-2-animation {
  0% {
    left: 0;
  }

  90% {
    left: 10%;
  }

  100% {
    left: 0;
  }
}

.fire-container {
  width: 100%;
  height: 0%;
  z-index: 9999999;
}

.fire-div {
  position: absolute;
  bottom: -45%;
  /* bottom: -200%; */
  background-color: #010212;
  width: 100%;


  height: 100%;
}

.fire-div img {
  width: 50%;
  /* width: 160px; */
  transform: rotate(180deg);
  /* border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50px; */
  position: absolute;
  bottom: 0%;
  /* left: 10%; */
  /* animation: 4s linear infinite; */
}

.fire-div img:nth-child(1) {

  left: -22%;
}

.fire-div img:nth-child(2) {
  left: -14.5%;
}

.fire-div img:nth-child(3) {
  left: -4%;
}

.fire-div img:nth-child(4) {
  left: 2.5%;
}

.fire-div img:nth-child(5) {
  left: 17%;
}

.fire-div img:nth-child(6) {
  left: 16.5%;
}

.fire-div img:nth-child(7) {
  left: 22%;
}

.fire-div img:nth-child(8) {
  left: 32.5%;
}

.fire-div img:nth-child(9) {
  left: 28%;
}

.fire-div img:nth-child(10) {
  left: 38.5%;
}

.fire-div img:nth-child(11) {
  left: 44%;
}

.fire-div img:nth-child(12) {
  left: 48.5%;
}

.fire-div img:nth-child(13) {
  left: 53%;
}

.fire-div img:nth-child(14) {
  left: 57.5%;
}

.fire-div img:nth-child(15) {
  left: 62%;
}

.fire-div img:nth-child(16) {
  left: 66.5%;
}

.fire-div img:nth-child(17) {
  left: 71%;
}

.fire-div img:nth-child(18) {
  left: 75.5%;
}

.fire-div img:nth-child(19) {
  left: 80%;
}

.fire-div img:nth-child(20) {
  left: 84.5%;
}

.fire-div img:nth-child(21) {
  left: 89%;
}


.shake {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

.fire-shake-1 {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: fire-shake 1s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

.fire-shake-2 {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: fire-shake 2s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

.fire-shake-3 {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: fire-shake 3s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

.get-off-my-property-img {
  width: 300px;
}

.copyright-div {
  height: 10%;
}

.rotate {
  animation: rotation 10s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }

  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }

  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }

  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }

  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }

  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }

  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }

  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }

  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }

  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

@keyframes fire-shake {
  0% {
    transform: translate(1px, 1px) rotate(180deg);
  }

  10% {
    transform: translate(-1px, -2px) rotate(179deg);
  }

  20% {
    transform: translate(-3px, 0px) rotate(181deg);
  }

  30% {
    transform: translate(3px, 2px) rotate(180deg);
  }

  40% {
    transform: translate(1px, -1px) rotate(181deg);
  }

  50% {
    transform: translate(-1px, 2px) rotate(179deg);
  }

  60% {
    transform: translate(-3px, 1px) rotate(180deg);
  }

  70% {
    transform: translate(3px, 1px) rotate(179deg);
  }

  80% {
    transform: translate(-1px, -1px) rotate(181deg);
  }

  90% {
    transform: translate(1px, 2px) rotate(180deg);
  }

  100% {
    transform: translate(1px, -2px) rotate(179deg);
  }
}

.fade-in-short {
  animation: fadeIn ease 3s;
  animation-fill-mode: forwards;
  -webkit-animation: fadeIn ease 3s;
  -moz-animation: fadeIn ease 3s;
  -o-animation: fadeIn ease 3s;
  -ms-animation: fadeIn ease 3s;
}

.fade-in {
  animation: fadeIn ease 7s;
  animation-fill-mode: forwards;
  -webkit-animation: fadeIn ease 7s;
  -moz-animation: fadeIn ease 7s;
  -o-animation: fadeIn ease 7s;
  -ms-animation: fadeIn ease 7s;
}

.fade-in-long {
  animation: fadeIn ease 14s;
  animation-fill-mode: forwards;
  -webkit-animation: fadeIn ease 14s;
  -moz-animation: fadeIn ease 14s;
  -o-animation: fadeIn ease 14s;
  -ms-animation: fadeIn ease 14s;
}

.fade-in-extra-long {
  animation: fadeIn ease 28s;
  animation-fill-mode: forwards;
  -webkit-animation: fadeIn ease 28s;
  -moz-animation: fadeIn ease 28s;
  -o-animation: fadeIn ease 28s;
  -ms-animation: fadeIn ease 28s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    display: block;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    display: block;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    display: block;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    display: block;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    display: block;
  }
}

.fade-out {
  animation: fadeOut ease 7s;
  animation-fill-mode: forwards;
  -webkit-animation: fadeOut ease 7s;
  -moz-animation: fadeOut ease 7s;
  -o-animation: fadeOut ease 7s;
  -ms-animation: fadeOut ease 7s;
}

.fade-out-long {
  animation: fadeOut ease 14s;
  animation-fill-mode: forwards;
  -webkit-animation: fadeOut ease 14s;
  -moz-animation: fadeOut ease 14s;
  -o-animation: fadeOut ease 14s;
  -ms-animation: fadeOut ease 14s;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

@-ms-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

.swing {
  animation: swing ease-in-out 1.0s infinite alternate;
  transform-origin: center -240px;
  float: left;
}

.float {
  animation: float 6s ease-in-out infinite;
}

.slide-in {
  animation: slidein 3s linear 1s infinite alternate;
}

@keyframes swing {
  0% {
    transform: rotate(3.5deg);
  }

  100% {
    transform: rotate(-3.5deg);
  }
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-20px);
  }

  100% {
    transform: translatey(0px);
  }
}
















.gomp-bubbles {
  position: absolute;
  top: 1883px;
  width: 100%;
  z-index: -100;
}

/* text */
/* .wrapper h1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  font-family: sans-serif;
  letter-spacing: 1px;
  word-spacing: 2px;
  color: #fff;
  font-size: 40px;
  font-weight: 888;
  text-transform: uppercase;
} */

/* bubble */
.gomp-bubbles img {
  height: 60px;
  width: 60px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50px;
  position: absolute;
  top: 10%;
  left: 10%;
  animation: 4s linear infinite;
}

/* reflection */
/* div .dot {
  height: 10px;
  width: 10px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 20%;
  right: 20%;
} */

.gomp-bubbles img:nth-child(1) {
  top: 60%;
  left: 60%;
  animation: animate 6s linear infinite;
}

.gomp-bubbles img:nth-child(2) {
  top: 40%;
  left: 43%;
  animation: animate-far 11.6s linear infinite;
}

.gomp-bubbles img:nth-child(3) {
  top: 66%;
  left: 37%;
  animation: animate 5s linear infinite;
}

.gomp-bubbles img:nth-child(4) {
  top: 90%;
  left: 23%;
  animation: animate 7s linear infinite;
}

.gomp-bubbles img:nth-child(5) {
  top: 30%;
  left: 50%;
  animation: animate 3.5s linear infinite;
}

.gomp-bubbles img:nth-child(6) {
  top: 70%;
  left: 24%;
  animation: animate 8s linear infinite;
}

.gomp-bubbles img:nth-child(7) {
  top: 75%;
  left: 62%;
  animation: animate-far 13s linear infinite;
}

.gomp-bubbles img:nth-child(8) {
  top: 50%;
  left: 57%;
  animation: animate 6.5s linear infinite;
}

.gomp-bubbles img:nth-child(9) {
  top: 45%;
  left: 29%;
  animation: animate 7.8s linear infinite;
}

.gomp-bubbles img:nth-child(10) {
  top: 10%;
  left: 71%;
  animation: animate 4.5s linear infinite;
}

/* .wrapper img:nth-child(12) {
  top: 20%;
  left: 70%;
  animation: animate 7s linear infinite;
}

.wrapper img:nth-child(13) {
  top: 20%;
  left: 20%;
  animation: animate 8s linear infinite;
}

.wrapper img:nth-child(14) {
  top: 60%;
  left: 5%;
  animation: animate 6s linear infinite;
}

.wrapper img:nth-child(15) {
  top: 90%;
  left: 80%;
  animation: animate 9s linear infinite;
} */

@keyframes animate {
  0% {
    transform: scale(0) translateY(0) rotate(70deg);
  }

  100% {
    transform: scale(1.3) translateY(-100px);
  }
}

@keyframes animate-far {
  0% {
    transform: scale(0) translateY(0) rotate(70deg);
  }

  100% {
    transform: scale(1.3) translateY(-800px);
  }
}