@import url("https://fonts.googleapis.com/css?family=Quicksand:400,500,700");
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
/*-- Inspiration taken from abdo steif -->
/* --> https://codepen.io/abdosteif/pen/bRoyMb?editors=1100*/
/* Navbar section */
.nav {
  font-family: "Quicksand", sans-serif;
}

.nav {
  width: 100%;
  height: 70px;
  position: fixed;
  text-align: center;
}

.nav div.logo {
  float: left;
  width: auto;
  height: auto;
  padding-left: 3rem;
}

.nav div.logo a {
  text-decoration: none;
  color: #fff;
  font-size: 2.5rem;
}

.nav div.logo a:hover {
  color: #333333;
}

.nav div.main_list {
  height: 65px;
  float: right;
}

.nav div.main_list ul {
  width: 100%;
  height: 65px;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav div.main_list ul li {
  width: auto;
  height: 65px;
  padding: 0;
  padding-right: 3rem;
  display: table;
}

.nav div.main_list ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 1.4rem;
  transition-duration: 0.2s;
  display: table-cell;
  vertical-align: middle;
}

.nav div.main_list ul li a:hover {
  transition-duration: 0.3s;
  color: rgb(21, 100, 218);
}

/* Home section */
.home {
  width: 100%;
  height: 100vh;
  background-color: white;
}

.navTrigger {
  display: none;
}

.nav {
  padding-top: 20px;
  padding-bottom: 20px;
  transition: all 0.4s ease;
}

/* Media qurey section */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    margin: 0;
  }
}
@media screen and (max-width: 1010px) {
  .nav {
    z-index: 909999;
  }
  .button {
    margin-right: 7em;
  }
  .navTrigger {
    display: block;
  }
  .nav div.logo {
    margin-left: 15px;
  }
  .nav div.main_list {
    width: 100%;
    height: 0;
    overflow: hidden;
  }
  .nav div.show_list {
    height: auto;
    display: none;
    position: absolute;
    right: 0;
    width: 77%;
  }
  .nav div.main_list ul {
    flex-direction: column;
    width: 100%;
    height: 100vh;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(127, 156, 199, 0.55);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    /*same background color of navbar*/
    background-position: center top;
    padding-top: 30%;
  }
  .nav div.main_list ul li {
    width: 100%;
    text-align: center;
  }
  .nav div.main_list ul li a {
    text-align: center;
    width: 100%;
    font-size: 3rem;
    padding: 20px;
  }
  .nav div.media_button {
    display: block;
  }
  .nav-logo {
    display: none;
  }
}
/* Animation */
/* Inspiration taken from Dicson https://codemyui.com/simple-hamburger-menu-x-mark-animation/ */
.navTrigger {
  cursor: pointer;
  width: 30px;
  height: 25px;
  margin: auto;
  position: absolute;
  right: 30px;
  top: 0;
  bottom: 0;
}

.navTrigger i {
  background-color: #000000;
  border-radius: 2px;
  content: "";
  display: block;
  width: 100%;
  height: 4px;
}

.navTrigger i:nth-child(1) {
  animation: outT 0.8s backwards;
  animation-direction: reverse;
}

.navTrigger i:nth-child(2) {
  margin: 5px 0;
  animation: outM 0.8s backwards;
  animation-direction: reverse;
}

.navTrigger i:nth-child(3) {
  animation: outBtm 0.8s backwards;
  animation-direction: reverse;
}

.navTrigger.active i:nth-child(1) {
  animation: inT 0.8s forwards;
}

.navTrigger.active i:nth-child(2) {
  animation: inM 0.8s forwards;
}

.navTrigger.active i:nth-child(3) {
  animation: inBtm 0.8s forwards;
}
@keyframes inM {
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(45deg);
  }
}
@keyframes outM {
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(45deg);
  }
}
@keyframes inT {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(9px) rotate(0deg);
  }
  100% {
    transform: translateY(9px) rotate(135deg);
  }
}
@keyframes outT {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(9px) rotate(0deg);
  }
  100% {
    transform: translateY(9px) rotate(135deg);
  }
}
@keyframes inBtm {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-9px) rotate(0deg);
  }
  100% {
    transform: translateY(-9px) rotate(135deg);
  }
}
@keyframes outBtm {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-9px) rotate(0deg);
  }
  100% {
    transform: translateY(-9px) rotate(135deg);
  }
}
nav {
  z-index: 999;
}

.affix {
  padding: 4px 0;
  background-color: rgba(33, 134, 217, 0.2);
  transition-duration: 0.2;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  opacity: 1;
}

.nav-logo {
  height: 65px;
}

.nav .container {
  display: flex;
  justify-content: space-evenly;
}

.button {
  margin-top: 5%;
  font-family: "Poppins";
  position: relative;
  padding: 14px 12px;
  border-radius: 100vw;
  background-color: transparent;
  font-family: "Playfair Display", serif;
  font-family: "Montserrat", sans-serif;
  color: #000000;
  border: solid 1px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.button .button-text {
  position: relative;
  z-index: 2;
}
.button .fill-container {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  padding-bottom: 100%;
  transform: translateY(-50%) rotate(180deg);
}
.button .fill-container::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(21, 100, 218);
  border-radius: 50%;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(-100%);
}
.button:hover {
  color: #ffffff;
  border: solid 1px rgba(255, 255, 255, 0.3);
  border-color: rgb(102, 203, 196);
}
.button:hover .fill-container {
  transform: translateY(-50%) rotate(0);
}
.button:hover .fill-container::after {
  transform: translateY(0);
}

body {
  margin: 0;
}

.containerBG {
  width: 100%;
  height: 100vh;
  display: block;
  position: fixed;
  overflow: hidden;
  filter: blur(4px);
  z-index: -99999;
}
.containerBG .inner-container {
  width: 90%;
  margin: 0 auto;
}

.shape {
  margin: 0 auto;
  position: relative;
  opacity: 0.7;
}

.random-shape:after {
  font-family: FontAwesome;
  content: "\f04d";
}

@keyframes shape-1 {
  0% {
    transform: translate3d(0, 0, 0) rotate(2deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(362deg);
  }
}
.shape-container--1 {
  animation: shape-1 64s linear infinite;
}
.shape-container--1 .random-shape:after {
  margin: 9.7rem;
  color: #9300c9;
  font-size: 1.94rem;
  content: "\f22d";
}

@keyframes shape-2 {
  0% {
    transform: translate3d(0, 0, 0) rotate(356deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(716deg);
  }
}
.shape-container--2 {
  animation: shape-2 65s linear infinite;
}
.shape-container--2 .random-shape:after {
  margin: 6.7rem;
  color: #9300c9;
  font-size: 1.34rem;
  content: "\f068";
}

@keyframes shape-3 {
  0% {
    transform: translate3d(0, 0, 0) rotate(212deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(572deg);
  }
}
.shape-container--3 {
  animation: shape-3 49s linear infinite;
}
.shape-container--3 .random-shape:after {
  margin: 8.7rem;
  color: #ff94a1;
  font-size: 1.74rem;
  content: "\f04b";
}

@keyframes shape-4 {
  0% {
    transform: translate3d(0, 0, 0) rotate(227deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(587deg);
  }
}
.shape-container--4 {
  animation: shape-4 60s linear infinite;
}
.shape-container--4 .random-shape:after {
  margin: 10.7rem;
  color: #4800c0;
  font-size: 2.14rem;
  content: "\f111";
}

@keyframes shape-5 {
  0% {
    transform: translate3d(0, 0, 0) rotate(325deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(685deg);
  }
}
.shape-container--5 {
  animation: shape-5 49s linear infinite;
}
.shape-container--5 .random-shape:after {
  margin: 5.7rem;
  color: #cda1ff;
  font-size: 1.14rem;
  content: "\f04d";
}

@keyframes shape-6 {
  0% {
    transform: translate3d(0, 0, 0) rotate(203deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(563deg);
  }
}
.shape-container--6 {
  animation: shape-6 50s linear infinite;
}
.shape-container--6 .random-shape:after {
  margin: 7.7rem;
  color: #ffef96;
  font-size: 1.54rem;
  content: "\f04d";
}

@keyframes shape-7 {
  0% {
    transform: translate3d(0, 0, 0) rotate(29deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(389deg);
  }
}
.shape-container--7 {
  animation: shape-7 61s linear infinite;
}
.shape-container--7 .random-shape:after {
  margin: 6.7rem;
  color: #45ffdc;
  font-size: 1.34rem;
  content: "\f067";
}

@keyframes shape-8 {
  0% {
    transform: translate3d(0, 0, 0) rotate(285deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(645deg);
  }
}
.shape-container--8 {
  animation: shape-8 42s linear infinite;
}
.shape-container--8 .random-shape:after {
  margin: 2.7rem;
  color: #ff94a1;
  font-size: 0.54rem;
  content: "\f068";
}

@keyframes shape-9 {
  0% {
    transform: translate3d(0, 0, 0) rotate(113deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(473deg);
  }
}
.shape-container--9 {
  animation: shape-9 60s linear infinite;
}
.shape-container--9 .random-shape:after {
  margin: 5.7rem;
  color: #4800c0;
  font-size: 1.14rem;
  content: "\f22d";
}

@keyframes shape-10 {
  0% {
    transform: translate3d(0, 0, 0) rotate(122deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(482deg);
  }
}
.shape-container--10 {
  animation: shape-10 62s linear infinite;
}
.shape-container--10 .random-shape:after {
  margin: 5.7rem;
  color: #9300c9;
  font-size: 1.14rem;
  content: "\f10c";
}

@keyframes shape-11 {
  0% {
    transform: translate3d(0, 0, 0) rotate(205deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(565deg);
  }
}
.shape-container--11 {
  animation: shape-11 47s linear infinite;
}
.shape-container--11 .random-shape:after {
  margin: 5.7rem;
  color: #cda1ff;
  font-size: 1.14rem;
  content: "\f04b";
}

@keyframes shape-12 {
  0% {
    transform: translate3d(0, 0, 0) rotate(127deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(487deg);
  }
}
.shape-container--12 {
  animation: shape-12 58s linear infinite;
}
.shape-container--12 .random-shape:after {
  margin: 3.7rem;
  color: #cda1ff;
  font-size: 0.74rem;
  content: "\f10c";
}

@keyframes shape-13 {
  0% {
    transform: translate3d(0, 0, 0) rotate(27deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(387deg);
  }
}
.shape-container--13 {
  animation: shape-13 70s linear infinite;
}
.shape-container--13 .random-shape:after {
  margin: 5.7rem;
  color: #ff94a1;
  font-size: 1.14rem;
  content: "\f10c";
}

@keyframes shape-14 {
  0% {
    transform: translate3d(0, 0, 0) rotate(264deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(624deg);
  }
}
.shape-container--14 {
  animation: shape-14 48s linear infinite;
}
.shape-container--14 .random-shape:after {
  margin: 3.7rem;
  color: #ff94a1;
  font-size: 0.74rem;
  content: "\f067";
}

@keyframes shape-15 {
  0% {
    transform: translate3d(0, 0, 0) rotate(164deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(524deg);
  }
}
.shape-container--15 {
  animation: shape-15 42s linear infinite;
}
.shape-container--15 .random-shape:after {
  margin: 3.7rem;
  color: #ffef96;
  font-size: 0.74rem;
  content: "\f111";
}

@keyframes shape-16 {
  0% {
    transform: translate3d(0, 0, 0) rotate(218deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(578deg);
  }
}
.shape-container--16 {
  animation: shape-16 42s linear infinite;
}
.shape-container--16 .random-shape:after {
  margin: 2.7rem;
  color: #cda1ff;
  font-size: 0.54rem;
  content: "\f22d";
}

@keyframes shape-17 {
  0% {
    transform: translate3d(0, 0, 0) rotate(358deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(718deg);
  }
}
.shape-container--17 {
  animation: shape-17 57s linear infinite;
}
.shape-container--17 .random-shape:after {
  margin: 3.7rem;
  color: #9300c9;
  font-size: 0.74rem;
  content: "\f22d";
}

@keyframes shape-18 {
  0% {
    transform: translate3d(0, 0, 0) rotate(49deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(409deg);
  }
}
.shape-container--18 {
  animation: shape-18 62s linear infinite;
}
.shape-container--18 .random-shape:after {
  margin: 2.7rem;
  color: #31b4ff;
  font-size: 0.54rem;
  content: "\f077";
}

@keyframes shape-19 {
  0% {
    transform: translate3d(0, 0, 0) rotate(310deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(670deg);
  }
}
.shape-container--19 {
  animation: shape-19 68s linear infinite;
}
.shape-container--19 .random-shape:after {
  margin: 6.7rem;
  color: #45ffdc;
  font-size: 1.34rem;
  content: "\f04d";
}

@keyframes shape-20 {
  0% {
    transform: translate3d(0, 0, 0) rotate(324deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(684deg);
  }
}
.shape-container--20 {
  animation: shape-20 63s linear infinite;
}
.shape-container--20 .random-shape:after {
  margin: 7.7rem;
  color: #ffef96;
  font-size: 1.54rem;
  content: "\f04d";
}

@keyframes shape-21 {
  0% {
    transform: translate3d(0, 0, 0) rotate(134deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(494deg);
  }
}
.shape-container--21 {
  animation: shape-21 61s linear infinite;
}
.shape-container--21 .random-shape:after {
  margin: 1.7rem;
  color: #4800c0;
  font-size: 0.34rem;
  content: "\f04b";
}

@keyframes shape-22 {
  0% {
    transform: translate3d(0, 0, 0) rotate(4deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(364deg);
  }
}
.shape-container--22 {
  animation: shape-22 45s linear infinite;
}
.shape-container--22 .random-shape:after {
  margin: 1.7rem;
  color: #cda1ff;
  font-size: 0.34rem;
  content: "\f10c";
}

@keyframes shape-23 {
  0% {
    transform: translate3d(0, 0, 0) rotate(291deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(651deg);
  }
}
.shape-container--23 {
  animation: shape-23 42s linear infinite;
}
.shape-container--23 .random-shape:after {
  margin: 9.7rem;
  color: #ffef96;
  font-size: 1.94rem;
  content: "\f068";
}

@keyframes shape-24 {
  0% {
    transform: translate3d(0, 0, 0) rotate(139deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(499deg);
  }
}
.shape-container--24 {
  animation: shape-24 52s linear infinite;
}
.shape-container--24 .random-shape:after {
  margin: 9.7rem;
  color: #31b4ff;
  font-size: 1.94rem;
  content: "\f111";
}

@keyframes shape-25 {
  0% {
    transform: translate3d(0, 0, 0) rotate(301deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(661deg);
  }
}
.shape-container--25 {
  animation: shape-25 48s linear infinite;
}
.shape-container--25 .random-shape:after {
  margin: 6.7rem;
  color: #ffef96;
  font-size: 1.34rem;
  content: "\f077";
}

@keyframes shape-26 {
  0% {
    transform: translate3d(0, 0, 0) rotate(300deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(660deg);
  }
}
.shape-container--26 {
  animation: shape-26 63s linear infinite;
}
.shape-container--26 .random-shape:after {
  margin: 1.7rem;
  color: #ffef96;
  font-size: 0.34rem;
  content: "\f10c";
}

@keyframes shape-27 {
  0% {
    transform: translate3d(0, 0, 0) rotate(181deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(541deg);
  }
}
.shape-container--27 {
  animation: shape-27 61s linear infinite;
}
.shape-container--27 .random-shape:after {
  margin: 3.7rem;
  color: #45ffdc;
  font-size: 0.74rem;
  content: "\f077";
}

@keyframes shape-28 {
  0% {
    transform: translate3d(0, 0, 0) rotate(50deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(410deg);
  }
}
.shape-container--28 {
  animation: shape-28 50s linear infinite;
}
.shape-container--28 .random-shape:after {
  margin: 10.7rem;
  color: #9300c9;
  font-size: 2.14rem;
  content: "\f111";
}

@keyframes shape-29 {
  0% {
    transform: translate3d(0, 0, 0) rotate(125deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(485deg);
  }
}
.shape-container--29 {
  animation: shape-29 45s linear infinite;
}
.shape-container--29 .random-shape:after {
  margin: 1.7rem;
  color: #ff94a1;
  font-size: 0.34rem;
  content: "\f111";
}

@keyframes shape-30 {
  0% {
    transform: translate3d(0, 0, 0) rotate(315deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(675deg);
  }
}
.shape-container--30 {
  animation: shape-30 62s linear infinite;
}
.shape-container--30 .random-shape:after {
  margin: 9.7rem;
  color: #45ffdc;
  font-size: 1.94rem;
  content: "\f068";
}

@keyframes shape-31 {
  0% {
    transform: translate3d(0, 0, 0) rotate(214deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(574deg);
  }
}
.shape-container--31 {
  animation: shape-31 70s linear infinite;
}
.shape-container--31 .random-shape:after {
  margin: 1.7rem;
  color: #9300c9;
  font-size: 0.34rem;
  content: "\f04d";
}

@keyframes shape-32 {
  0% {
    transform: translate3d(0, 0, 0) rotate(338deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(698deg);
  }
}
.shape-container--32 {
  animation: shape-32 48s linear infinite;
}
.shape-container--32 .random-shape:after {
  margin: 7.7rem;
  color: #9300c9;
  font-size: 1.54rem;
  content: "\f04d";
}

@keyframes shape-33 {
  0% {
    transform: translate3d(0, 0, 0) rotate(272deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(632deg);
  }
}
.shape-container--33 {
  animation: shape-33 47s linear infinite;
}
.shape-container--33 .random-shape:after {
  margin: 3.7rem;
  color: #4800c0;
  font-size: 0.74rem;
  content: "\f04b";
}

@keyframes shape-34 {
  0% {
    transform: translate3d(0, 0, 0) rotate(298deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(658deg);
  }
}
.shape-container--34 {
  animation: shape-34 41s linear infinite;
}
.shape-container--34 .random-shape:after {
  margin: 1.7rem;
  color: #31b4ff;
  font-size: 0.34rem;
  content: "\f111";
}

@keyframes shape-35 {
  0% {
    transform: translate3d(0, 0, 0) rotate(234deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(594deg);
  }
}
.shape-container--35 {
  animation: shape-35 43s linear infinite;
}
.shape-container--35 .random-shape:after {
  margin: 8.7rem;
  color: #ff94a1;
  font-size: 1.74rem;
  content: "\f067";
}

@keyframes shape-36 {
  0% {
    transform: translate3d(0, 0, 0) rotate(99deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(459deg);
  }
}
.shape-container--36 {
  animation: shape-36 60s linear infinite;
}
.shape-container--36 .random-shape:after {
  margin: 1.7rem;
  color: #9300c9;
  font-size: 0.34rem;
  content: "\f111";
}

@keyframes shape-37 {
  0% {
    transform: translate3d(0, 0, 0) rotate(273deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(633deg);
  }
}
.shape-container--37 {
  animation: shape-37 64s linear infinite;
}
.shape-container--37 .random-shape:after {
  margin: 8.7rem;
  color: #cda1ff;
  font-size: 1.74rem;
  content: "\f077";
}

@keyframes shape-38 {
  0% {
    transform: translate3d(0, 0, 0) rotate(225deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(585deg);
  }
}
.shape-container--38 {
  animation: shape-38 61s linear infinite;
}
.shape-container--38 .random-shape:after {
  margin: 7.7rem;
  color: #4800c0;
  font-size: 1.54rem;
  content: "\f22d";
}

@keyframes shape-39 {
  0% {
    transform: translate3d(0, 0, 0) rotate(280deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(640deg);
  }
}
.shape-container--39 {
  animation: shape-39 61s linear infinite;
}
.shape-container--39 .random-shape:after {
  margin: 3.7rem;
  color: #45ffdc;
  font-size: 0.74rem;
  content: "\f077";
}

@keyframes shape-40 {
  0% {
    transform: translate3d(0, 0, 0) rotate(133deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(493deg);
  }
}
.shape-container--40 {
  animation: shape-40 65s linear infinite;
}
.shape-container--40 .random-shape:after {
  margin: 7.7rem;
  color: #45ffdc;
  font-size: 1.54rem;
  content: "\f111";
}

@keyframes shape-41 {
  0% {
    transform: translate3d(0, 0, 0) rotate(277deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(637deg);
  }
}
.shape-container--41 {
  animation: shape-41 62s linear infinite;
}
.shape-container--41 .random-shape:after {
  margin: 3.7rem;
  color: #45ffdc;
  font-size: 0.74rem;
  content: "\f04b";
}

@keyframes shape-42 {
  0% {
    transform: translate3d(0, 0, 0) rotate(257deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(617deg);
  }
}
.shape-container--42 {
  animation: shape-42 67s linear infinite;
}
.shape-container--42 .random-shape:after {
  margin: 10.7rem;
  color: #cda1ff;
  font-size: 2.14rem;
  content: "\f077";
}

@keyframes shape-43 {
  0% {
    transform: translate3d(0, 0, 0) rotate(203deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(563deg);
  }
}
.shape-container--43 {
  animation: shape-43 42s linear infinite;
}
.shape-container--43 .random-shape:after {
  margin: 9.7rem;
  color: #4800c0;
  font-size: 1.94rem;
  content: "\f04b";
}

@keyframes shape-44 {
  0% {
    transform: translate3d(0, 0, 0) rotate(304deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(664deg);
  }
}
.shape-container--44 {
  animation: shape-44 47s linear infinite;
}
.shape-container--44 .random-shape:after {
  margin: 1.7rem;
  color: #ff94a1;
  font-size: 0.34rem;
  content: "\f077";
}

@keyframes shape-45 {
  0% {
    transform: translate3d(0, 0, 0) rotate(225deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(585deg);
  }
}
.shape-container--45 {
  animation: shape-45 46s linear infinite;
}
.shape-container--45 .random-shape:after {
  margin: 3.7rem;
  color: #ff94a1;
  font-size: 0.74rem;
  content: "\f04d";
}

@keyframes shape-46 {
  0% {
    transform: translate3d(0, 0, 0) rotate(124deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(484deg);
  }
}
.shape-container--46 {
  animation: shape-46 67s linear infinite;
}
.shape-container--46 .random-shape:after {
  margin: 3.7rem;
  color: #ffef96;
  font-size: 0.74rem;
  content: "\f077";
}

@keyframes shape-47 {
  0% {
    transform: translate3d(0, 0, 0) rotate(350deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(710deg);
  }
}
.shape-container--47 {
  animation: shape-47 58s linear infinite;
}
.shape-container--47 .random-shape:after {
  margin: 7.7rem;
  color: #31b4ff;
  font-size: 1.54rem;
  content: "\f04d";
}

@keyframes shape-48 {
  0% {
    transform: translate3d(0, 0, 0) rotate(333deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(693deg);
  }
}
.shape-container--48 {
  animation: shape-48 68s linear infinite;
}
.shape-container--48 .random-shape:after {
  margin: 3.7rem;
  color: #45ffdc;
  font-size: 0.74rem;
  content: "\f10c";
}

@keyframes shape-49 {
  0% {
    transform: translate3d(0, 0, 0) rotate(297deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(657deg);
  }
}
.shape-container--49 {
  animation: shape-49 57s linear infinite;
}
.shape-container--49 .random-shape:after {
  margin: 9.7rem;
  color: #ff94a1;
  font-size: 1.94rem;
  content: "\f111";
}

@keyframes shape-50 {
  0% {
    transform: translate3d(0, 0, 0) rotate(13deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(373deg);
  }
}
.shape-container--50 {
  animation: shape-50 41s linear infinite;
}
.shape-container--50 .random-shape:after {
  margin: 2.7rem;
  color: #4800c0;
  font-size: 0.54rem;
  content: "\f22d";
}

@keyframes shape-51 {
  0% {
    transform: translate3d(0, 0, 0) rotate(225deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(585deg);
  }
}
.shape-container--51 {
  animation: shape-51 65s linear infinite;
}
.shape-container--51 .random-shape:after {
  margin: 3.7rem;
  color: #cda1ff;
  font-size: 0.74rem;
  content: "\f111";
}

@keyframes shape-52 {
  0% {
    transform: translate3d(0, 0, 0) rotate(293deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(653deg);
  }
}
.shape-container--52 {
  animation: shape-52 41s linear infinite;
}
.shape-container--52 .random-shape:after {
  margin: 1.7rem;
  color: #31b4ff;
  font-size: 0.34rem;
  content: "\f068";
}

@keyframes shape-53 {
  0% {
    transform: translate3d(0, 0, 0) rotate(136deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(496deg);
  }
}
.shape-container--53 {
  animation: shape-53 51s linear infinite;
}
.shape-container--53 .random-shape:after {
  margin: 4.7rem;
  color: #ffef96;
  font-size: 0.94rem;
  content: "\f10c";
}

@keyframes shape-54 {
  0% {
    transform: translate3d(0, 0, 0) rotate(173deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(533deg);
  }
}
.shape-container--54 {
  animation: shape-54 63s linear infinite;
}
.shape-container--54 .random-shape:after {
  margin: 1.7rem;
  color: #ffef96;
  font-size: 0.34rem;
  content: "\f04d";
}

@keyframes shape-55 {
  0% {
    transform: translate3d(0, 0, 0) rotate(134deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(494deg);
  }
}
.shape-container--55 {
  animation: shape-55 50s linear infinite;
}
.shape-container--55 .random-shape:after {
  margin: 3.7rem;
  color: #ff94a1;
  font-size: 0.74rem;
  content: "\f04d";
}

@keyframes shape-56 {
  0% {
    transform: translate3d(0, 0, 0) rotate(47deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(407deg);
  }
}
.shape-container--56 {
  animation: shape-56 47s linear infinite;
}
.shape-container--56 .random-shape:after {
  margin: 10.7rem;
  color: #45ffdc;
  font-size: 2.14rem;
  content: "\f077";
}

@keyframes shape-57 {
  0% {
    transform: translate3d(0, 0, 0) rotate(248deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(608deg);
  }
}
.shape-container--57 {
  animation: shape-57 53s linear infinite;
}
.shape-container--57 .random-shape:after {
  margin: 7.7rem;
  color: #4800c0;
  font-size: 1.54rem;
  content: "\f067";
}

@keyframes shape-58 {
  0% {
    transform: translate3d(0, 0, 0) rotate(119deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(479deg);
  }
}
.shape-container--58 {
  animation: shape-58 63s linear infinite;
}
.shape-container--58 .random-shape:after {
  margin: 2.7rem;
  color: #ffef96;
  font-size: 0.54rem;
  content: "\f10c";
}

@keyframes shape-59 {
  0% {
    transform: translate3d(0, 0, 0) rotate(41deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(401deg);
  }
}
.shape-container--59 {
  animation: shape-59 41s linear infinite;
}
.shape-container--59 .random-shape:after {
  margin: 7.7rem;
  color: #ffef96;
  font-size: 1.54rem;
  content: "\f067";
}

@keyframes shape-60 {
  0% {
    transform: translate3d(0, 0, 0) rotate(249deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(609deg);
  }
}
.shape-container--60 {
  animation: shape-60 55s linear infinite;
}
.shape-container--60 .random-shape:after {
  margin: 8.7rem;
  color: #45ffdc;
  font-size: 1.74rem;
  content: "\f04d";
}

@keyframes shape-61 {
  0% {
    transform: translate3d(0, 0, 0) rotate(159deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(519deg);
  }
}
.shape-container--61 {
  animation: shape-61 64s linear infinite;
}
.shape-container--61 .random-shape:after {
  margin: 5.7rem;
  color: #cda1ff;
  font-size: 1.14rem;
  content: "\f068";
}

@keyframes shape-62 {
  0% {
    transform: translate3d(0, 0, 0) rotate(339deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(699deg);
  }
}
.shape-container--62 {
  animation: shape-62 57s linear infinite;
}
.shape-container--62 .random-shape:after {
  margin: 2.7rem;
  color: #31b4ff;
  font-size: 0.54rem;
  content: "\f111";
}

@keyframes shape-63 {
  0% {
    transform: translate3d(0, 0, 0) rotate(254deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(614deg);
  }
}
.shape-container--63 {
  animation: shape-63 50s linear infinite;
}
.shape-container--63 .random-shape:after {
  margin: 1.7rem;
  color: #9300c9;
  font-size: 0.34rem;
  content: "\f077";
}

@keyframes shape-64 {
  0% {
    transform: translate3d(0, 0, 0) rotate(26deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(386deg);
  }
}
.shape-container--64 {
  animation: shape-64 62s linear infinite;
}
.shape-container--64 .random-shape:after {
  margin: 4.7rem;
  color: #cda1ff;
  font-size: 0.94rem;
  content: "\f067";
}

@keyframes shape-65 {
  0% {
    transform: translate3d(0, 0, 0) rotate(193deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(553deg);
  }
}
.shape-container--65 {
  animation: shape-65 65s linear infinite;
}
.shape-container--65 .random-shape:after {
  margin: 3.7rem;
  color: #ff94a1;
  font-size: 0.74rem;
  content: "\f22d";
}

@keyframes shape-66 {
  0% {
    transform: translate3d(0, 0, 0) rotate(14deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(374deg);
  }
}
.shape-container--66 {
  animation: shape-66 70s linear infinite;
}
.shape-container--66 .random-shape:after {
  margin: 10.7rem;
  color: #45ffdc;
  font-size: 2.14rem;
  content: "\f22d";
}

@keyframes shape-67 {
  0% {
    transform: translate3d(0, 0, 0) rotate(128deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(488deg);
  }
}
.shape-container--67 {
  animation: shape-67 45s linear infinite;
}
.shape-container--67 .random-shape:after {
  margin: 7.7rem;
  color: #31b4ff;
  font-size: 1.54rem;
  content: "\f077";
}

@keyframes shape-68 {
  0% {
    transform: translate3d(0, 0, 0) rotate(161deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(521deg);
  }
}
.shape-container--68 {
  animation: shape-68 61s linear infinite;
}
.shape-container--68 .random-shape:after {
  margin: 8.7rem;
  color: #cda1ff;
  font-size: 1.74rem;
  content: "\f068";
}

@keyframes shape-69 {
  0% {
    transform: translate3d(0, 0, 0) rotate(340deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(700deg);
  }
}
.shape-container--69 {
  animation: shape-69 47s linear infinite;
}
.shape-container--69 .random-shape:after {
  margin: 4.7rem;
  color: #9300c9;
  font-size: 0.94rem;
  content: "\f22d";
}

@keyframes shape-70 {
  0% {
    transform: translate3d(0, 0, 0) rotate(209deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(569deg);
  }
}
.shape-container--70 {
  animation: shape-70 68s linear infinite;
}
.shape-container--70 .random-shape:after {
  margin: 2.7rem;
  color: #ff94a1;
  font-size: 0.54rem;
  content: "\f077";
}

@keyframes shape-71 {
  0% {
    transform: translate3d(0, 0, 0) rotate(314deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(674deg);
  }
}
.shape-container--71 {
  animation: shape-71 54s linear infinite;
}
.shape-container--71 .random-shape:after {
  margin: 7.7rem;
  color: #4800c0;
  font-size: 1.54rem;
  content: "\f111";
}

@keyframes shape-72 {
  0% {
    transform: translate3d(0, 0, 0) rotate(298deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(658deg);
  }
}
.shape-container--72 {
  animation: shape-72 44s linear infinite;
}
.shape-container--72 .random-shape:after {
  margin: 1.7rem;
  color: #45ffdc;
  font-size: 0.34rem;
  content: "\f067";
}

@keyframes shape-73 {
  0% {
    transform: translate3d(0, 0, 0) rotate(181deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(541deg);
  }
}
.shape-container--73 {
  animation: shape-73 68s linear infinite;
}
.shape-container--73 .random-shape:after {
  margin: 2.7rem;
  color: #31b4ff;
  font-size: 0.54rem;
  content: "\f068";
}

@keyframes shape-74 {
  0% {
    transform: translate3d(0, 0, 0) rotate(352deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(712deg);
  }
}
.shape-container--74 {
  animation: shape-74 59s linear infinite;
}
.shape-container--74 .random-shape:after {
  margin: 8.7rem;
  color: #cda1ff;
  font-size: 1.74rem;
  content: "\f04d";
}

@keyframes shape-75 {
  0% {
    transform: translate3d(0, 0, 0) rotate(39deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(399deg);
  }
}
.shape-container--75 {
  animation: shape-75 55s linear infinite;
}
.shape-container--75 .random-shape:after {
  margin: 10.7rem;
  color: #4800c0;
  font-size: 2.14rem;
  content: "\f04b";
}

@keyframes shape-76 {
  0% {
    transform: translate3d(0, 0, 0) rotate(21deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(381deg);
  }
}
.shape-container--76 {
  animation: shape-76 50s linear infinite;
}
.shape-container--76 .random-shape:after {
  margin: 1.7rem;
  color: #31b4ff;
  font-size: 0.34rem;
  content: "\f04b";
}

@keyframes shape-77 {
  0% {
    transform: translate3d(0, 0, 0) rotate(180deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(540deg);
  }
}
.shape-container--77 {
  animation: shape-77 43s linear infinite;
}
.shape-container--77 .random-shape:after {
  margin: 1.7rem;
  color: #31b4ff;
  font-size: 0.34rem;
  content: "\f10c";
}

@keyframes shape-78 {
  0% {
    transform: translate3d(0, 0, 0) rotate(219deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(579deg);
  }
}
.shape-container--78 {
  animation: shape-78 43s linear infinite;
}
.shape-container--78 .random-shape:after {
  margin: 2.7rem;
  color: #ffef96;
  font-size: 0.54rem;
  content: "\f077";
}

@keyframes shape-79 {
  0% {
    transform: translate3d(0, 0, 0) rotate(264deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(624deg);
  }
}
.shape-container--79 {
  animation: shape-79 69s linear infinite;
}
.shape-container--79 .random-shape:after {
  margin: 6.7rem;
  color: #31b4ff;
  font-size: 1.34rem;
  content: "\f04d";
}

@keyframes shape-80 {
  0% {
    transform: translate3d(0, 0, 0) rotate(55deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(415deg);
  }
}
.shape-container--80 {
  animation: shape-80 67s linear infinite;
}
.shape-container--80 .random-shape:after {
  margin: 3.7rem;
  color: #9300c9;
  font-size: 0.74rem;
  content: "\f068";
}

.footer {
  height: 15vh;
  background-color: #3a4753;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.footer p {
  color: white;
  font-size: 1.2rem;
  font-family: "Poppins";
  margin: 0 auto;
  width: 100%;
  background-color: transparent;
  box-shadow: none;
}
.footer p:hover {
  box-shadow: none;
  transform: none;
}

.whats-float {
  position: fixed;
  transform: translate(108px, 0px);
  top: 25%;
  right: 0;
  width: 150px;
  overflow: hidden;
  background-color: #25d366;
  color: #FFF;
  border-radius: 2px 0 0 2px;
  z-index: 10;
  transition: all 0.5s ease-in-out;
  vertical-align: middle;
}

.whats-float a span {
  color: white;
  font-size: 15px;
  padding-top: 8px;
  padding-bottom: 10px;
  position: absolute;
  line-height: 16px;
  font-weight: bolder;
}

.whats-float i {
  font-size: 30px;
  color: white;
  line-height: 30px;
  padding: 10px;
  transform: rotate(0deg);
  transition: all 0.5s ease-in-out;
  text-align: center;
}

.whats-float:hover {
  color: #FFFFFF;
  transform: translate(0px, 0px);
}

.whats-float:hover i {
  transform: rotate(360deg);
}

.alert-box {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  z-index: 999;
  width: 50%;
  height: 50%;
  border-radius: 10px;
}/*# sourceMappingURL=gco.css.map */