@charset "UTF-8";
@font-face {
  font-family: "proxima-nova";
  src: url("../fonts/proxima-nova-black.otf");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "proxima-nova";
  src: url("../fonts/proxima-bold.woff2") format("woff2"), url("../fonts/proxima-bold.woff") format("woff"), url("../fonts/proxima-bold.ttf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "proxima-nova";
  src: url("../fonts/proxima-reg.woff2") format("woff2"), url("../fonts/proxima-reg.woff") format("woff"), url("../fonts/proxima-reg.ttf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
body {
  font-family: "proxima-nova", sans-serif;
  color: #514F4D;
}

.purple {
  color: #8267B4;
}

p {
  font-family: "proxima-nova", sans-serif;
  color: #514F4D;
  font-size: 1.3rem;
  font-weight: 400;
}
p strong {
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration: underline;
}
a:hover {
  color: inherit;
}

h1 {
  font-family: "proxima-nova", sans-serif;
  font-size: 4rem;
  color: #35C491;
  font-weight: 800;
  line-height: 1;
}
h1.header {
  font-size: 5rem;
}
h1 + p {
  font-family: "proxima-nova", sans-serif;
  color: #514F4D;
  font-size: 1.3rem;
}

h2 {
  font-family: "proxima-nova", sans-serif;
  font-size: 2.5rem;
  line-height: 1;
  color: #514F4D;
  margin-bottom: 20px;
  font-weight: 600;
}
h2 + p {
  font-family: "proxima-nova", sans-serif;
  color: #514F4D;
  font-size: 1.3rem;
}

h3 {
  font-family: "proxima-nova", sans-serif;
  font-size: 1.3rem;
  line-height: 1;
  color: #514F4D;
  letter-spacing: 1px;
}
h3 i {
  margin-right: 10px;
}
h3.white {
  color: white;
}

@media (max-width: 992px) {
  p {
    font-size: 1.1rem;
  }

  h1 {
    font-size: 2rem;
  }
  h1 + p {
    font-size: 1.1rem;
  }

  h2 {
    font-size: 1.5rem;
  }
  h2 + p {
    font-size: 1.1rem;
  }

  h3 {
    font-size: 1.2rem;
  }
}
.menu-left {
  height: 100%;
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  transform: translate(250px);
  width: 250px;
  overflow-x: hidden;
  font-family: "Archivo Black", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: #FFFFFF;
  border-left: 3px solid #35C491;
  padding: 30px 10px;
}
.menu-left ul {
  padding: 0;
  margin: 0;
  list-style: none;
  background: #FFFFFF;
}
.menu-left .metismenu {
  background: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.menu-left .metismenu li + li {
  margin-top: 0;
}
.menu-left .metismenu li:first-child {
  margin-top: 0;
}
.menu-left .metismenu li:last-child {
  margin-bottom: 0;
}
.menu-left .metismenu > li {
  /*-webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
}
.menu-left a {
  position: relative;
  display: block;
  color: #514F4D;
  outline-width: 0;
  transition: all 0.3s ease-out;
  margin: 5px;
  text-decoration: none;
}
.menu-left a.has-arrow:after {
  right: 0;
  border-width: 2px 0 0 2px;
  border-color: #35C491;
}
.menu-left .mm-active .has-arrow {
  color: #35C491;
}
.menu-left ul a {
  padding: 10px;
}
.menu-left ul a.active {
  color: #35C491;
}
.menu-left ul a:after {
  right: 0;
}
.menu-left ul ul a {
  padding: 5px 20px;
  color: #514F4D;
  font-family: "Roboto", sans-serif;
  text-transform: none;
}
.menu-left ul ul a:active, .menu-left ul ul a:focus, .menu-left ul ul a:hover {
  border: 0;
  text-decoration: underline;
}
.menu-left ul ul a:active:last-child, .menu-left ul ul a:focus:last-child, .menu-left ul ul a:hover:last-child {
  border: 0;
}
.menu-left a:hover,
.menu-left a:focus,
.menu-left a:active,
.menu-left a.active {
  text-decoration: none;
}

@media (max-width: 600px) {
  .menu-left {
    margin-top: 0;
  }
}
body .gradient {
  display: none;
}
body main {
  margin-top: 100px;
}

/*body  #main-canvas {
  margin-top: $nav_height;
}*/
.gradient {
  display: block;
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  transition: opacity 0.4s;
  background: rgba(255, 255, 255, 0.9);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0));
}
.gradient.dark {
  background: rgba(0, 0, 0, 0.9);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0));
}

.navbar {
  font-family: "proxima-nova", sans-serif;
  letter-spacing: 1.2px;
  transition: background-color 0.4s;
  color: #373737;
  background: white;
  padding: 0;
}
.navbar .container-fluid {
  position: relative;
  padding: 20px;
  transition: background-color 0.4s;
}
.navbar .navbar-brand {
  padding: 0;
  text-decoration: none !important;
}
.navbar .toggle_rightmenu {
  cursor: pointer;
}
.navbar .logo_circle {
  width: 55px;
  height: 55px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  border: 8px solid #35C491;
  margin: 0 15px;
}
.navbar .logo_top {
  position: relative;
  opacity: 1;
  height: 45px;
  display: inline-block;
  vertical-align: middle;
}
.navbar.white-bg, .navbar.white-bg-solid, .navbar.solid-nav {
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid #dcdcdc;
}
.navbar.white-bg .container-fluid, .navbar.white-bg-solid .container-fluid, .navbar.solid-nav .container-fluid {
  background-color: rgba(255, 255, 255, 0.8);
}
.navbar li.icon {
  color: #373737;
  cursor: pointer;
  display: inline;
  padding: 0 10px;
}
.navbar li.icon a {
  text-decoration: none;
}
.navbar li.icon:hover {
  color: #8267B4;
}
.navbar li.icon i {
  vertical-align: middle;
  font-size: 40px;
}
.navbar li.icon img {
  height: 40px;
}
.navbar li.link {
  cursor: pointer;
  display: inline-block;
  text-transform: uppercase;
  margin-right: 3px;
  font-size: 0.8rem;
  border: none;
  text-align: center;
  padding: 0 20px;
  margin-top: -5px;
}
.navbar li.link.active a {
  text-decoration: none;
}
.navbar li.link.active a.btn-navbar {
  background: none;
  color: white;
}
.navbar li.link a {
  text-decoration: none;
  height: 100%;
  width: 100%;
  padding-bottom: 10px;
  display: block;
  color: inherit;
  margin-top: 5px;
  font-weight: 500;
  position: relative;
}
.navbar li.link a:after {
  content: "";
  width: 0;
  height: 7px;
  background-color: #8267B4;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  transition: width 0.4s;
}
.navbar li.link a i {
  margin-right: 5px;
}
.navbar li.link a:hover, .navbar li.link a.active {
  text-decoration: none;
}
.navbar li.link a:hover:after, .navbar li.link a.active:after {
  width: 100%;
}
.navbar li.link a.btn-navbar {
  border: 2px solid #8267B4;
  background: none;
  color: #373737;
  border-radius: 30px;
  display: block;
  padding: 11px 20px 8px 20px;
  margin-left: 0;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s linear;
}
.navbar li.link a.btn-navbar:after {
  display: none;
}
.navbar li.link a.btn-navbar:hover {
  background: #8267B4;
  color: white;
}
.navbar .desktop-submenu {
  position: absolute;
  z-index: 1033;
  opacity: 0;
  visibility: hidden;
  top: calc(100px - 22px);
  background: #fbfbfb;
  display: block;
  width: auto;
  clear: both;
  padding: 0;
  transition: opacity 0.5s;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%);
  border-radius: 3px;
}
.navbar .desktop-submenu.active {
  opacity: 1;
  visibility: visible;
}
.navbar .desktop-submenu ul {
  list-style: none;
  margin: 0;
  padding: 0 20px;
  position: relative;
  z-index: 9999;
  border-top: 8px solid #35C491;
  border-radius: 5px;
}
.navbar .desktop-submenu ul li {
  white-space: nowrap;
  font-size: 0.85rem;
  text-transform: uppercase;
  margin: 20px 0;
  letter-spacing: 1px;
  background-color: #fbfbfb;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: 600;
}
.navbar .desktop-submenu ul li:first-of-type {
  padding-top: 25px;
  margin-top: 0;
}
.navbar .desktop-submenu ul li.last {
  padding-bottom: 5px;
}
.navbar .desktop-submenu ul li a {
  text-decoration: none;
}
.navbar .desktop-submenu ul li a:hover {
  color: #35C491;
}
.navbar .desktop-submenu ul li a img {
  margin-right: 5px;
  width: 20px;
  vertical-align: middle;
}
.navbar .desktop-submenu:before {
  content: "";
  position: absolute;
  background-color: #35C491;
  transform: rotate(45deg);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  left: 50%;
  margin-left: -4px;
  top: -4px;
  z-index: 1031;
}

@media (max-width: 1240px) {
  .navbar li.link {
    padding: 0 12px;
  }
  .navbar li.link a {
    font-size: 0.8rem;
  }
}
@media (max-width: 1000px) {
  .navbar .menu-top {
    padding: 0;
  }
  .navbar.darkmode {
    color: inherit !important;
  }
  .navbar.darkmode .logo_top.white {
    opacity: 1;
  }
  .navbar.darkmode .toggle_menu {
    color: white !important;
  }
  .navbar.white-bg, .navbar.white-bg-solid {
    background-color: white;
    color: #514F4D !important;
    border-bottom: 1px solid #dcdcdc;
  }
  .navbar.white-bg .logo_top.white, .navbar.white-bg-solid .logo_top.white {
    opacity: 0;
  }
  .navbar .navbar-brand {
    margin: auto;
    vertical-align: middle;
    text-align: center;
    margin-left: 0;
  }
  .navbar .logo_circle {
    margin: 0 15px 0 0;
  }
  .navbar .toggle_menu {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
    float: right;
    padding: 0;
    display: block;
    background: none;
    color: #35C491;
  }
  .navbar .toggle_menu i {
    vertical-align: middle;
    font-size: 40px;
  }
}
@media (max-width: 600px) {
  body .gradient {
    display: none;
  }
  body main {
    margin-top: 95px;
  }

  body.solid-nav main {
    margin-top: 95px;
  }

  .navbar {
    padding: 10px 0;
  }
  .navbar .container-fluid {
    transition: background-color 0.4s;
    padding: 10px;
  }
  .navbar.solid-nav .container-fluid .logo_big {
    left: -49px;
    top: 13px;
  }
  .navbar .toggle_menu {
    margin-right: 15px;
    margin-top: 7px;
  }
}
@media (max-width: 340px) {
  .navbar .logo_top {
    max-width: 220px !important;
  }
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.bt {
  display: inline-block;
  padding: 10px 40px;
  border-radius: 30px;
  font-size: 1.1rem;
  text-decoration: none !important;
  cursor: pointer;
  text-align: center;
}
.bt i {
  margin-left: 15px;
}
.bt:disabled {
  background-color: #514F4D;
  cursor: no-drop;
  position: relative;
}
.bt:disabled:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 30px;
}
.bt:disabled:after {
  color: white;
  content: "";
  font-family: "Font Awesome 5 Free";
  width: 25px;
  height: 25px;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12px;
  margin-top: -12px;
  animation: spin 3s linear infinite;
}
.bt:disabled:hover {
  box-shadow: none;
}
.bt:disabled:hover i {
  margin-left: 10px;
}

.btn-wide {
  padding: 15px 60px;
}

.bt-sm {
  font-size: 0.9rem;
  padding: 10px 30px;
}
.bt-sm i {
  margin-left: 10px;
}

.bt-xs {
  font-size: 0.8rem;
  padding: 4px 10px;
  border-width: 1px !important;
}
.bt-xs i {
  margin-left: 10px;
}

.bt-outline-purple {
  border: 2px solid #8267B4;
  background: none;
  color: #514F4D;
  margin-left: 0;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s linear;
}
.bt-outline-purple:after {
  display: none;
}
.bt-outline-purple:hover {
  background: #8267B4;
  color: white;
}
.bt-outline-purple:disabled {
  opacity: 0.3;
  pointer-events: inherit;
  background-color: white;
  cursor: no-drop;
  position: relative;
  color: #514F4D !important;
}
.bt-outline-purple:disabled:after {
  display: none;
}
.bt-outline-purple:disabled:before {
  display: none;
}

.bt-outline-purple-white {
  border: 2px solid #8267B4;
  background: white;
  color: #514F4D;
  margin-left: 0;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s linear;
}
.bt-outline-purple-white:after {
  display: none;
}
.bt-outline-purple-white:hover {
  background: #8267B4;
  color: white;
}
.bt-outline-purple-white:disabled {
  opacity: 0.3;
  pointer-events: inherit;
  background-color: white;
  cursor: no-drop;
  position: relative;
  color: #514F4D !important;
}
.bt-outline-purple-white:disabled:after {
  display: none;
}
.bt-outline-purple-white:disabled:before {
  display: none;
}

.bt-purple {
  border: 2px solid #8267B4;
  background: #8267B4;
  color: white;
  margin-left: 0;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s linear;
}
.bt-purple:after {
  display: none;
}
.bt-purple:hover {
  background: white;
  color: #8267B4;
}

#footer {
  background-color: white;
  width: 100%;
  color: #868686;
  padding: 10px 0 20px 0;
  border-top: 1px solid #eee;
}
#footer a {
  color: #868686;
}
#footer a:hover {
  text-decoration: underline;
}
#footer .title {
  margin-top: 10px;
  color: white !important;
  display: none;
}
#footer ul {
  overflow: hidden;
  font-size: 13pt;
  color: #FFF;
  padding: 0;
  margin: 10px 0;
}
#footer ul li {
  display: block;
  padding: 0;
  color: #CCC;
  font-size: 9pt;
  text-align: left;
  width: auto;
  line-height: 140%;
}

#loader-quick {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: none;
  background-color: rgba(255, 255, 255, 0.8);
}
#loader-quick .img {
  position: relative;
  top: 50%;
  left: 50%;
  width: 100px;
  height: auto;
  margin: -60px 0 0 -50px;
  text-align: center;
  font-size: 0.8rem;
  text-transform: uppercase;
  line-height: 1;
}
#loader-quick .img img {
  width: 100%;
}
.loader_logo {
  width: 60%;
  max-width: 300px;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1102;
}

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  margin: -20px 0 0 -35px;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: #8267B4;
  -webkit-animation: spin 2s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 2s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
  z-index: 1101;
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: #35C491;
  -webkit-animation: spin 3s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 3s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: #373737;
  -webkit-animation: spin 1.5s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 1.5s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}
#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #FFFFFF;
  z-index: 1000;
  -webkit-transform: translateX(0);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(0);
  /* IE 9 */
  transform: translateX(0);
  /* Firefox 16+, IE 10+, Opera */
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(-100%);
  /* IE 9 */
  transform: translateX(-100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(100%);
  /* IE 9 */
  transform: translateX(100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader, .loaded .loader_logo {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateY(-100%);
  /* IE 9 */
  transform: translateY(-100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}

/* JavaScript Turned Off */
.no-js #loader-wrapper {
  display: none;
}

.no-js h1 {
  color: #222222;
}

.transition-fade {
  transition: 0.4s;
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
}

main#home {
  margin-top: 0;
}

#start-mobile {
  position: fixed;
  bottom: 37px;
  left: 14px;
  z-index: 1100;
  transition: opacity 0.4s;
}

.scrolldown {
  text-align: center;
}
.scrolldown div {
  color: #8267B4;
}
.scrolldown div.dots img {
  width: 7px;
  display: block;
  margin: 3px auto;
}
.scrolldown div.arrow {
  margin-top: -5px;
}
.scrolldown div.arrow i {
  font-size: 1.8rem;
}

.scrollmagic-pin-spacer {
  z-index: 1029;
}

section.hero {
  height: 100vh;
  position: relative;
}
section.hero .content {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-60%);
  width: 50%;
}
section.hero .content h2 {
  font-weight: 800;
}
section.hero .content p {
  color: #7A7A7A;
  font-weight: 600;
  font-size: 1.7rem;
  margin-top: -10px;
  text-align: left;
  vertical-align: middle;
}
section.hero .content p .dots {
  font-size: 60px;
  letter-spacing: 2px;
  color: #ECEDEE;
  vertical-align: middle;
  line-height: 0;
  margin-top: -4px;
  display: inline-block;
}
section.hero img.hand {
  position: absolute;
  height: 100%;
  right: 0;
  bottom: -150px;
}
section.hero .scrolldown {
  position: absolute;
  bottom: 20px;
  left: 70px;
}

section.why-diennet {
  padding: 0;
  position: relative;
  display: flex;
}
section.why-diennet .list {
  padding: 0;
  text-align: left;
  position: relative;
  flex: 0 0 50%;
  max-width: 50%;
  width: 50%;
  margin-left: 67px;
}
section.why-diennet .list .progress {
  position: absolute;
  width: 3px;
  background-color: #D8D8D8;
  top: 70px;
  left: 48px;
  height: calc(100% - 250px);
}
section.why-diennet .list .item {
  display: inline-block;
  margin-bottom: 100px;
  text-align: center;
  vertical-align: top;
  position: relative;
}
section.why-diennet .list .item .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border: 3px solid #D8D8D8;
  background-color: white;
  border-radius: 50%;
}
section.why-diennet .list .item .img .pic {
  display: none;
}
section.why-diennet .list .item .img img {
  height: 50px;
  opacity: 1;
  margin-top: 20px;
}
section.why-diennet .list .item .description {
  margin-left: 130px;
  font-weight: 300;
  font-size: 1.2rem;
  text-align: left;
  color: #717073;
}
section.why-diennet .list .item .description h3 {
  color: #514F4D;
  letter-spacing: 1px;
  font-size: 1.5rem;
  font-weight: 600;
}
section.why-diennet .scrolldown {
  display: inline-block;
  margin-left: -12px;
}
section.why-diennet .pictures {
  flex: 0 0 40%;
  max-width: 40%;
  width: 40%;
  margin-left: 5%;
  position: relative;
}
section.why-diennet .pictures .polaroid_holder {
  position: absolute;
}
section.why-diennet .pictures .polaroid_holder.one {
  top: -100px;
  left: 50px;
  transform: rotate(-20deg);
  z-index: 0;
}
section.why-diennet .pictures .polaroid_holder.two {
  z-index: 1;
  left: 30%;
  transform: rotate(20deg);
  top: 100px;
}
section.why-diennet .pictures .polaroid_holder.three {
  top: 450px;
  left: 50px;
  transform: rotate(-5deg);
  z-index: 0;
}
section.why-diennet .pictures .polaroid_holder.four {
  z-index: 1;
  left: 30%;
  transform: rotate(15deg);
  top: 730px;
}
section.why-diennet .polaroid {
  width: 230px;
  height: 400px;
  position: relative;
  border-radius: 5px;
  background-color: white;
  border: 1px solid #eee;
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.23);
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.23);
}
section.why-diennet .polaroid .picture {
  position: absolute;
  width: 190px;
  height: 300px;
  top: 30px;
  left: 20px;
  -webkit-box-shadow: inset 1px 1px 5px 0px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: inset 1px 1px 5px 0px rgba(0, 0, 0, 0.23);
  box-shadow: inset 1px 1px 5px 0px rgba(0, 0, 0, 0.23);
  background-size: cover;
  background-position: top center;
}
section.why-diennet .polaroid.before:after, section.why-diennet .polaroid.after:after {
  content: "Before";
  position: absolute;
  width: 100%;
  bottom: 20px;
  text-align: center;
}
section.why-diennet .polaroid.after:after {
  content: "After";
}

section.questionnaire {
  position: relative;
  height: 90vh;
  max-height: 600px;
}
section.questionnaire .computer {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
}
section.questionnaire .computer .screen {
  position: relative;
}
section.questionnaire .computer .screen img.screen {
  width: 100%;
}
section.questionnaire .computer .screen #answer_1, section.questionnaire .computer .screen #answer_2, section.questionnaire .computer .screen #answer_3 {
  position: absolute;
  z-index: 90;
  width: 5%;
}
section.questionnaire .computer .screen #answer_1 {
  right: 28.5%;
  top: 35%;
}
section.questionnaire .computer .screen #answer_2 {
  right: 39%;
  top: 51%;
}
section.questionnaire .computer .screen #answer_3 {
  right: 28.5%;
  top: 68%;
}
section.questionnaire .content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  width: 500px;
}

.message {
  border: 1px solid #D8D8D8;
  border-radius: 30px;
  padding: 22px 35px;
  font-size: 0.9rem;
  background: white;
  width: 320px;
  text-align: left;
  -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.11);
  -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.11);
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.11);
}
.message .from {
  font-size: 1rem;
  font-weight: 600;
}
.message .body {
  font-weight: 400;
}

section.telemedicine {
  position: relative;
  height: 80vh;
  min-height: 600px;
  margin: 30px 0 550px 0;
}
section.telemedicine .phone_holder {
  position: relative;
  width: 50%;
  height: 90%;
}
section.telemedicine .phone_holder img.phone {
  position: absolute;
  height: 100%;
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}
section.telemedicine .phone_holder .message {
  position: absolute;
  left: 50%;
  transform: translateX(-65%);
  top: -40px;
  z-index: 1;
}
section.telemedicine .content {
  position: absolute;
  left: 50%;
  width: 500px;
  top: 40%;
  transform: translateY(-50%);
}

section.formula {
  position: relative;
  height: 90vh;
}
section.formula .paper_holder {
  position: absolute;
  left: 7.5%;
  top: 50%;
  transform: translateY(-50%);
  width: 35%;
}
section.formula .paper_holder .paper {
  position: relative;
}
section.formula .paper_holder .paper img.prescription {
  width: 100%;
}
section.formula .paper_holder .paper #signature {
  position: absolute;
  right: 15%;
  bottom: 15%;
  width: 45%;
  height: auto;
}
section.formula .content {
  position: absolute;
  left: 50%;
  width: 40%;
  top: 50%;
  transform: translateY(-50%);
}

#bottle_animation_trigger {
  width: 100%;
  height: 1px;
  margin-bottom: 200px;
  background: black;
}

section.communication {
  position: relative;
  height: 3300px;
}
section.communication .animation_holder {
  position: absolute;
  text-align: center;
  left: 5%;
  top: 100px;
  width: 40%;
}
section.communication .animation_holder .conversation, section.communication .animation_holder .conversation-2 {
  position: relative;
  width: 400px;
  margin: auto;
}
section.communication .animation_holder .conversation .message, section.communication .animation_holder .conversation-2 .message {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
section.communication .animation_holder .conversation #msg_comm_1, section.communication .animation_holder .conversation #msg_comm_4, section.communication .animation_holder .conversation #msg_comm_5, section.communication .animation_holder .conversation-2 #msg_comm_1, section.communication .animation_holder .conversation-2 #msg_comm_4, section.communication .animation_holder .conversation-2 #msg_comm_5 {
  transform: translateX(-75%);
}
section.communication .animation_holder .conversation .dots-last, section.communication .animation_holder .conversation-2 .dots-last {
  transform: translateX(-20%);
}
section.communication .animation_holder .conversation .dot img, section.communication .animation_holder .conversation-2 .dot img {
  width: 12px;
  height: auto;
  margin: 5px;
}
section.communication .animation_holder .conversation-2 {
  margin-top: -10px;
}
section.communication .animation_holder .bottle_holder {
  position: relative;
  width: 400px;
  margin: auto;
}
section.communication .animation_holder .bottle_holder .bottle {
  position: relative;
  z-index: 2;
}
section.communication .animation_holder .bottle_holder .bottle img {
  width: 100%;
}
section.communication .animation_holder .bottle_holder .label {
  position: absolute;
  top: 192px;
  right: 48px;
  height: 273px;
  width: 259px;
  overflow: hidden;
  z-index: 3;
}
section.communication .animation_holder .bottle_holder .label img {
  height: 100%;
}
section.communication .animation_holder .bottle_holder .label_back {
  z-index: 2;
  text-align: right;
  position: absolute;
  top: 192px;
  right: 344px;
  height: 273px;
  width: auto;
  overflow: hidden;
}
section.communication .animation_holder .bottle_holder .label_back img {
  height: 100%;
}
section.communication .animation_holder .bottle_holder .shading, section.communication .animation_holder .bottle_holder .shading2 {
  position: absolute;
  top: 192px;
  right: 48px;
  height: 273px;
  z-index: 4;
}
section.communication .animation_holder .bottle_holder .shading img, section.communication .animation_holder .bottle_holder .shading2 img {
  height: 100%;
}
section.communication .animation_holder .bottle_holder .shading2 {
  z-index: 5;
}
section.communication .content {
  position: absolute;
  left: 50%;
  width: 500px;
  top: 100px;
}
section.communication #comm_content_2 {
  margin-top: 2000px;
}
section.communication .map {
  position: absolute;
  margin-top: 2500px;
  width: 70%;
  margin-left: 20%;
}
section.communication .map .map_holder {
  position: relative;
}
section.communication .map .map_holder .woman {
  position: absolute;
  left: 60%;
  bottom: 40%;
  width: 100px;
  height: 100px;
}
section.communication .map .map_holder .trail {
  position: absolute;
  right: 40%;
  width: 55%;
  top: 43%;
}
section.communication .map .map_holder .trail img {
  width: 100%;
}

@media (max-width: 1000px) {
  section.hero .content {
    position: absolute;
    left: 10%;
    top: 20%;
    transform: none;
    width: 90%;
  }
  section.hero .content h2 {
    font-weight: 800;
  }
  section.hero img.hand {
    position: absolute;
    height: 78%;
    right: 0;
    bottom: -213px;
    transform: rotate(-10deg);
  }
  section.hero .scrolldown {
    position: absolute;
    bottom: 20px;
    left: 21px;
  }

  section.why-diennet .list {
    margin-left: 20px;
  }
  section.why-diennet .list .item .img .pic {
    display: none;
  }
  section.why-diennet .scrolldown {
    display: inline-block;
    margin-left: -12px;
  }
  section.why-diennet .pictures {
    flex: 0 0 40%;
    max-width: 40%;
    width: 40%;
    margin-left: 0;
    position: relative;
  }
  section.why-diennet .pictures .polaroid_holder {
    position: absolute;
  }
  section.why-diennet .pictures .polaroid_holder.one {
    top: 0px;
    left: 50px;
    transform: rotate(-15deg);
    z-index: 0;
  }
  section.why-diennet .pictures .polaroid_holder.two {
    z-index: 1;
    left: 25%;
    transform: rotate(15deg);
    top: 300px;
  }
  section.why-diennet .pictures .polaroid_holder.three {
    top: 700px;
    left: 50px;
    transform: rotate(-5deg);
    z-index: 0;
  }
  section.why-diennet .pictures .polaroid_holder.four {
    z-index: 1;
    left: 30%;
    transform: rotate(15deg);
    top: 980px;
  }
  section.questionnaire {
    position: relative;
    height: 90vh;
    max-height: 500px;
  }
  section.questionnaire .computer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    left: auto;
    right: 44%;
  }
  section.questionnaire .computer .screen {
    position: relative;
  }
  section.questionnaire .computer .screen img.screen {
    width: auto;
    height: 500px;
  }
  section.questionnaire .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    width: 350px;
  }

  section.telemedicine {
    position: relative;
    height: 60vh;
    min-height: 400px;
    margin: 30px 0 450px 0;
  }
  section.telemedicine .phone_holder {
    position: relative;
    width: 50%;
    height: 100%;
  }
  section.telemedicine .phone_holder img.phone {
    position: absolute;
    height: auto;
    width: 80%;
    z-index: 0;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
  }
  section.telemedicine .phone_holder .message {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -40px;
    z-index: 1;
  }
  section.telemedicine .content {
    position: absolute;
    left: 50%;
    width: 350px;
    top: 50%;
    transform: translateY(-50%);
  }

  section.formula {
    position: relative;
    height: 70vh;
  }
  section.formula .paper_holder {
    position: absolute;
    left: auto;
    right: 50%;
    top: 50%;
    transform: translateY(-50%) rotate(10deg);
    width: 55%;
  }
  section.formula .paper_holder .paper {
    position: relative;
  }
  section.formula .paper_holder .paper img.prescription {
    width: 100%;
  }
  section.formula .paper_holder .paper #signature {
    position: absolute;
    right: 15%;
    bottom: 15%;
    width: 45%;
    height: auto;
  }
  section.formula .content {
    position: absolute;
    left: 50%;
    width: 40%;
    top: 50%;
    transform: translateY(-50%);
  }

  #bottle_animation_trigger {
    width: 100%;
    height: 1px;
    margin-bottom: 200px;
    background: black;
  }

  section.communication {
    position: relative;
    height: 2800px;
  }
  section.communication .animation_holder {
    position: absolute;
    text-align: center;
    left: 0;
    top: 100px;
    width: 50%;
  }
  section.communication .animation_holder .conversation, section.communication .animation_holder .conversation-2 {
    position: relative;
    width: 100%;
    margin: auto;
    padding: 0 20px;
  }
  section.communication .animation_holder .conversation .message, section.communication .animation_holder .conversation-2 .message {
    position: relative;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
  section.communication .animation_holder .conversation #msg_comm_1, section.communication .animation_holder .conversation #msg_comm_4, section.communication .animation_holder .conversation #msg_comm_5, section.communication .animation_holder .conversation-2 #msg_comm_1, section.communication .animation_holder .conversation-2 #msg_comm_4, section.communication .animation_holder .conversation-2 #msg_comm_5 {
    transform: translateX(-50%);
  }
  section.communication .animation_holder .conversation .dots-last, section.communication .animation_holder .conversation-2 .dots-last {
    transform: translateX(-10%);
  }
  section.communication .animation_holder .conversation .dot img, section.communication .animation_holder .conversation-2 .dot img {
    width: 12px;
    height: auto;
    margin: 5px;
  }
  section.communication .animation_holder .conversation-2 {
    margin-top: -10px;
  }
  section.communication .animation_holder .bottle_holder {
    position: relative;
    width: 100%;
    margin: auto;
  }
  section.communication .animation_holder .bottle_holder .bottle {
    position: relative;
    z-index: 2;
  }
  section.communication .animation_holder .bottle_holder .bottle img {
    width: 100%;
  }
  section.communication .animation_holder .bottle_holder .label {
    position: absolute;
    right: 12%;
    top: 32%;
    height: 51%;
    width: 69%;
    overflow: hidden;
    z-index: 3;
  }
  section.communication .animation_holder .bottle_holder .label img {
    height: 100%;
  }
  section.communication .animation_holder .bottle_holder .label_back {
    z-index: 2;
    text-align: right;
    position: absolute;
    right: 85.7%;
    top: 32%;
    height: 51%;
    width: 75.5%;
    overflow: hidden;
  }
  section.communication .animation_holder .bottle_holder .label_back img {
    height: 100%;
  }
  section.communication .animation_holder .bottle_holder .shading, section.communication .animation_holder .bottle_holder .shading2 {
    position: absolute;
    top: 32%;
    right: 12%;
    height: 50.7%;
    z-index: 4;
  }
  section.communication .animation_holder .bottle_holder .shading img, section.communication .animation_holder .bottle_holder .shading2 img {
    height: 100%;
  }
  section.communication .animation_holder .bottle_holder .shading2 {
    z-index: 5;
  }
  section.communication .content {
    position: absolute;
    left: 50%;
    width: 350px;
    top: 100px;
  }
  section.communication #comm_content_2 {
    margin-top: 2000px;
  }
  section.communication .map {
    position: absolute;
    width: 100%;
    margin: 2300px 10px 0 10px;
  }
  section.communication .map .map_holder {
    position: relative;
  }
  section.communication .map .map_holder .woman {
    position: absolute;
    left: 60%;
    bottom: 40%;
    width: 100px;
    height: 100px;
  }
  section.communication .map .map_holder .trail {
    position: absolute;
    right: 40%;
    width: 55%;
    top: 43%;
  }
  section.communication .map .map_holder .trail img {
    width: 100%;
  }
}
@media (max-width: 760px) {
  .message {
    padding: 16px 25px;
    border-radius: 20px;
  }
  section.hero {
    height: 100vh;
    position: relative;
  }
  section.hero .content {
    position: relative;
    transform: none;
    width: 100%;
    top: 116px;
    left: 40px;
  }
  section.hero .content h1 {
    font-size: 3rem;
  }
  section.hero img.hand {
    position: absolute;
    height: 86%;
    right: 0;
    left: 11%;
    top: 42%;
  }
  section.hero .scrolldown {
    bottom: 5px;
    left: 20px;
  }

  section.why-diennet {
    padding: 0;
    position: relative;
    display: flex;
    flex-flow: row wrap;
  }
  section.why-diennet .list {
    margin-top: 700px;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    margin-left: 20px;
    order: 2;
  }
  section.why-diennet .list .progress {
    top: 40px;
    left: 30px;
    height: calc(100% - 270px);
  }
  section.why-diennet .list .item {
    display: inline-block;
    margin-bottom: 70px;
    text-align: center;
    vertical-align: top;
    position: relative;
  }
  section.why-diennet .list .item:last-of-type {
    margin-bottom: 30px;
  }
  section.why-diennet .list .item .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border: 2px solid #D8D8D8;
  }
  section.why-diennet .list .item .img img {
    height: 36px;
    opacity: 1;
    margin-top: 10px;
  }
  section.why-diennet .list .item .description {
    margin-left: 80px;
    width: calc(100% - 120px);
  }
  section.why-diennet .scrolldown {
    display: block;
    text-align: center;
    width: 100%;
    margin: 0 0 0 -20px;
  }
  section.why-diennet .pictures {
    order: 1;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    position: relative;
  }
  section.why-diennet .pictures .polaroid_holder {
    position: absolute;
  }
  section.why-diennet .pictures .polaroid_holder.one {
    top: 0;
    left: 0;
    transform: rotate(-20deg);
    z-index: 0;
  }
  section.why-diennet .pictures .polaroid_holder.two {
    z-index: 1;
    left: 50%;
    transform: rotate(17deg);
    top: 47px;
  }
  section.why-diennet .pictures .polaroid_holder.three {
    top: 355px;
    left: 18px;
    transform: rotate(-5deg);
    z-index: 0;
  }
  section.why-diennet .pictures .polaroid_holder.four {
    z-index: 1;
    left: 50%;
    transform: rotate(13deg);
    top: 370px;
  }
  section.why-diennet .polaroid {
    width: 180px;
    height: 294px;
  }
  section.why-diennet .polaroid .picture {
    width: 148px;
    height: 233px;
    top: 15px;
    left: 15px;
  }
  section.why-diennet .polaroid.before:after, section.why-diennet .polaroid.after:after {
    bottom: 10px;
  }
  section.questionnaire {
    position: relative;
    height: auto;
    max-height: none;
    display: flex;
    flex-flow: row wrap;
  }
  section.questionnaire .computer {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    width: 95%;
    order: 2;
  }
  section.questionnaire .computer .screen {
    position: relative;
  }
  section.questionnaire .computer .screen img.screen {
    width: 100%;
  }
  section.questionnaire .computer .screen #answer_1, section.questionnaire .computer .screen #answer_2, section.questionnaire .computer .screen #answer_3 {
    position: absolute;
    z-index: 90;
    width: 5%;
  }
  section.questionnaire .computer .screen #answer_1 {
    right: 28.5%;
    top: 35%;
  }
  section.questionnaire .computer .screen #answer_2 {
    right: 39%;
    top: 51%;
  }
  section.questionnaire .computer .screen #answer_3 {
    right: 28.5%;
    top: 68%;
  }
  section.questionnaire .content {
    position: relative;
    order: 1;
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    padding: 20px;
    text-align: center;
  }

  section.telemedicine {
    position: relative;
    height: auto;
    max-height: none;
    display: flex;
    flex-flow: row wrap;
    margin: 50px 0 0 0;
  }
  section.telemedicine .phone_holder {
    position: relative;
    width: 100%;
    height: auto;
    order: 2;
    margin: auto;
  }
  section.telemedicine .phone_holder img.phone {
    position: relative;
    height: auto;
    display: block;
    width: 80%;
    margin: auto;
    top: -45px;
    z-index: 0;
    left: 0;
    transform: none;
  }
  section.telemedicine .phone_holder .message {
    width: 80%;
    position: relative;
    left: 0;
    transform: none;
    top: 0;
    z-index: 1;
    margin: auto;
  }
  section.telemedicine .content {
    position: relative;
    order: 1;
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    padding: 20px;
    text-align: center;
  }

  section.formula {
    position: relative;
    height: auto;
    max-height: none;
    display: flex;
    flex-flow: row wrap;
    margin: 0 0 20px 0;
  }
  section.formula .paper_holder {
    position: relative;
    width: 80%;
    height: auto;
    order: 2;
    margin: auto;
    left: 0;
    top: 0;
    transform: rotate(-6deg) translateY(-13px);
  }
  section.formula .paper_holder .paper {
    position: relative;
  }
  section.formula .paper_holder .paper img.prescription {
    width: 100%;
  }
  section.formula .paper_holder .paper #signature {
    position: absolute;
    right: 15%;
    bottom: 15%;
    width: 45%;
    height: auto;
  }
  section.formula .content {
    position: relative;
    order: 1;
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    padding: 20px;
    text-align: center;
  }

  #bottle_animation_trigger {
    width: 100%;
    height: 1px;
    margin-bottom: 200px;
    background: black;
  }

  section.communication {
    position: relative;
    height: auto;
    display: flex;
    flex-flow: row wrap;
  }
  section.communication .animation_holder {
    width: 90%;
    height: auto;
    order: 2;
    margin: auto;
    left: 0;
    top: 0;
    position: relative;
    margin-bottom: 20px;
  }
  section.communication .animation_holder .conversation, section.communication .animation_holder .conversation-2 {
    position: relative;
    width: 100%;
    margin: auto;
  }
  section.communication .animation_holder .conversation .message, section.communication .animation_holder .conversation-2 .message {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  section.communication .animation_holder .conversation #msg_comm_1, section.communication .animation_holder .conversation #msg_comm_4, section.communication .animation_holder .conversation #msg_comm_5, section.communication .animation_holder .conversation-2 #msg_comm_1, section.communication .animation_holder .conversation-2 #msg_comm_4, section.communication .animation_holder .conversation-2 #msg_comm_5 {
    transform: translateX(-55%);
  }
  section.communication .animation_holder .conversation .dots-last, section.communication .animation_holder .conversation-2 .dots-last {
    transform: translateX(-20%);
  }
  section.communication .animation_holder .conversation .dot img, section.communication .animation_holder .conversation-2 .dot img {
    width: 12px;
    height: auto;
    margin: 5px;
  }
  section.communication .animation_holder .conversation-2 {
    margin-top: -10px;
  }
  section.communication .animation_holder .bottle_holder {
    position: relative;
    width: 100%;
    margin: auto;
  }
  section.communication .animation_holder .bottle_holder .bottle {
    position: relative;
    z-index: 2;
  }
  section.communication .animation_holder .bottle_holder .bottle img {
    width: 100%;
  }
  section.communication .animation_holder .bottle_holder .label {
    position: absolute;
    right: 12%;
    top: 32%;
    height: 51%;
    width: 69%;
    overflow: hidden;
    z-index: 3;
  }
  section.communication .animation_holder .bottle_holder .label img {
    height: 100%;
  }
  section.communication .animation_holder .bottle_holder .label_back {
    z-index: 2;
    text-align: right;
    position: absolute;
    right: 85.7%;
    top: 32%;
    height: 51%;
    width: 75.5%;
    overflow: hidden;
  }
  section.communication .animation_holder .bottle_holder .label_back img {
    height: 100%;
  }
  section.communication .animation_holder .bottle_holder .shading, section.communication .animation_holder .bottle_holder .shading2 {
    position: absolute;
    top: 32%;
    right: 12%;
    height: 50.7%;
    z-index: 4;
  }
  section.communication .animation_holder .bottle_holder .shading img, section.communication .animation_holder .bottle_holder .shading2 img {
    height: 100%;
  }
  section.communication .animation_holder .bottle_holder .shading2 {
    z-index: 5;
  }
  section.communication .content {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    padding: 20px;
    text-align: center;
  }
  section.communication #comm_content_1 {
    order: 1;
  }
  section.communication #comm_content_2 {
    order: 3;
    margin-top: 0;
  }
  section.communication .map {
    position: relative;
    order: 4;
    width: 100%;
    margin: 0;
  }
  section.communication .map .map_holder {
    position: relative;
  }
  section.communication .map .map_holder .woman {
    position: absolute;
    left: 60%;
    bottom: 40%;
    width: 15%;
    height: 20%;
  }
  section.communication .map .map_holder .trail {
    position: absolute;
    right: 40%;
    width: 55%;
    top: 43%;
  }
  section.communication .map .map_holder .trail img {
    width: 100%;
  }
}
#about .back {
  font-size: 1.3rem;
  padding: 30px 0 0 100px;
}
#about .back a {
  text-decoration: none;
}
#about .content {
  padding: 50px 100px;
}
@media (max-width: 992px) {
  #about .back {
    font-size: 1.3rem;
    padding: 30px 0 0 20px;
  }
  #about .back a {
    text-decoration: none;
  }
  #about .content {
    padding: 20px;
  }
}
#contact {
  margin-top: 100px;
  min-height: calc(100vh - 100px);
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#contact h1 {
  color: white !important;
  display: inline-block;
  position: relative;
  letter-spacing: 1px;
  font-weight: 900;
  font-size: 2.5rem;
}
#contact .centralizer {
  position: absolute;
  top: calc(50% - 100px);
  left: 50%;
  transform: translate(-50%, -50%);
}
#contact .copyright {
  position: absolute;
  bottom: 150px;
  width: 100%;
  left: 0;
}

@media (max-width: 1000px) {
  #contact {
    margin-top: 85px;
  }
}
@media (max-width: 765px) {
  #contact {
    margin-top: 0;
    padding-top: 50px;
    z-index: 1;
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
  #contact .centralizer {
    position: static;
    top: 0;
    left: 0;
    transform: none;
  }
  #contact .copyright {
    position: static;
    margin-top: 30px;
  }
}
#start {
  height: auto;
  margin-top: 100px;
  position: relative;
}
#start h2 {
  font-family: "proxima-nova", sans-serif;
  font-size: 3rem;
  color: #35C491;
  font-weight: 800;
  line-height: 0.7;
}
#start h2 small {
  font-family: "proxima-nova", sans-serif;
  color: #514F4D;
  font-size: 1.3rem;
}
#start .bottle_holder {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 60%;
  height: 60vh;
  margin: auto;
}
#start .bottle_holder .bottle {
  position: relative;
  height: 100%;
  z-index: 2;
}
#start .bottle_holder .bottle img {
  height: 100%;
}
#start .bottle_holder .avatar img, #start .bottle_holder .avatar_holder img {
  height: 20%;
  width: auto;
  position: absolute;
  top: 40%;
  left: 28%;
  z-index: 4;
}
#start .bottle_holder .avatar {
  opacity: 0;
}
#start .bottle_holder .avatar.active {
  opacity: 1;
}
#start .bottle_holder .avatar_holder img {
  z-index: 3;
}
#start .bottle_holder .name {
  overflow-x: hidden;
  white-space: nowrap;
  font-size: 2.5rem;
  font-weight: 600;
  position: absolute;
  z-index: 3;
  width: 27%;
  top: 49%;
  left: 61%;
}
#start .info {
  position: static;
  margin-top: 300px;
  margin-left: 50%;
  width: 35%;
  transition: margin-top 0.5s;
}
#start .info p {
  font-size: 1rem;
}
#start .info p.bigger {
  font-size: 1.1rem;
}
#start .results {
  margin-left: 12px;
  margin-top: 30px;
  position: relative;
  font-size: 1.1rem;
  font-weight: 500;
}
#start .results strong {
  font-weight: 600;
}
#start .results:before {
  position: absolute;
  content: "";
  width: 3px;
  background-color: #eee;
  height: calc(100% - 100px);
  left: -1px;
  top: 30px;
}
#start .results .bullet {
  padding-left: 50px;
  position: relative;
  margin-bottom: 30px;
}
#start .results .bullet:before {
  content: "";
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #eee;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
}
#start .results .bullet .bullet_inner {
  margin-top: 30px;
}
#start .results .bullet .bullet_inner .icon {
  margin-top: 5px;
  vertical-align: top;
  display: inline-block;
  width: 70px;
  text-align: center;
}
#start .results .bullet .bullet_inner .icon img {
  height: 40px;
}
#start .results .bullet .bullet_inner .icon img.tall {
  height: 50px;
}
#start .results .bullet .bullet_inner .description {
  vertical-align: top;
  display: inline-block;
  width: calc(100% - 100px);
  margin-left: 20px;
}
#start .results .btn-holder {
  position: relative;
  display: inline-block;
  margin-top: 30px;
  z-index: 10;
  transform: translateX(-50%);
}
#start .d_progress {
  width: 1000px;
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}
#start .d_progress .line {
  width: 100%;
  height: 3px;
  background-color: #eee;
  position: relative;
  z-index: 1;
}
#start .d_progress .line .step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #eee;
  z-index: 3;
  transition: background-color 0.3s;
}
#start .d_progress .line .step.active {
  background-color: #8267B4;
}
#start .d_progress .line .step.one {
  left: 0;
}
#start .d_progress .line .step.two {
  left: 50%;
  transform: translate(-50%, -50%);
}
#start .d_progress .line .step.three {
  right: 0;
}
#start .d_progress .line .completed {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  transform: translateY(-50%);
  height: 3px;
  background-color: #8267B4;
  transition: width 0.8s;
}
#start .d_progress .line .completed.two {
  width: 50%;
}
#start .d_progress .line .completed.three {
  width: 100%;
}

@media (max-width: 760px) {
  #start {
    height: auto;
    margin-top: 0;
    position: relative;
  }
  #start h2 {
    font-family: "proxima-nova", sans-serif;
    font-size: 2.3rem;
    color: #35C491;
    font-weight: 800;
    line-height: 0.7;
  }
  #start h2 small {
    font-family: "proxima-nova", sans-serif;
    color: #514F4D;
    font-size: 1.3rem;
  }
  #start .bottle_holder {
    display: none;
  }
  #start .info {
    position: static;
    margin-top: 30px;
    padding: 30px;
    margin-left: auto;
    width: 100%;
    transition: margin-top 0.5s;
  }
  #start .info p {
    font-size: 1rem;
  }
  #start .info p.bigger {
    font-size: 1.1rem;
  }
  #start .results {
    margin-left: 12px;
    margin-top: 30px;
    position: relative;
    font-size: 1.1rem;
    font-weight: 500;
  }
  #start .results strong {
    font-weight: 600;
  }
  #start .results:before {
    position: absolute;
    content: "";
    width: 3px;
    background-color: #eee;
    height: calc(100% - 100px);
    left: -1px;
    top: 30px;
  }
  #start .results .bullet {
    padding-left: 50px;
    position: relative;
    margin-bottom: 30px;
  }
  #start .results .bullet:before {
    content: "";
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #eee;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
  }
  #start .results .bullet .bullet_inner {
    margin-top: 30px;
  }
  #start .results .bullet .bullet_inner .icon {
    margin-top: 5px;
    vertical-align: top;
    display: inline-block;
    width: 70px;
    text-align: center;
  }
  #start .results .bullet .bullet_inner .icon img {
    height: 40px;
  }
  #start .results .bullet .bullet_inner .icon img.tall {
    height: 50px;
  }
  #start .results .bullet .bullet_inner .description {
    vertical-align: top;
    display: inline-block;
    width: calc(100% - 100px);
    margin-left: 20px;
  }
  #start .results .btn-holder {
    position: relative;
    display: inline-block;
    margin-top: 30px;
    z-index: 10;
    transform: translateX(-10%);
  }
  #start .d_progress {
    width: 90%;
    left: 5%;
    position: fixed;
    bottom: auto;
    top: 113px;
    transform: none;
  }
  #start .d_progress .line .step {
    width: 20px;
    height: 20px;
  }
}
.form-centralizer {
  position: relative;
  height: calc(100vh - 100px);
  background: #fbfbfb;
}
.form-centralizer.too_tall {
  position: static;
  height: auto;
  padding-top: 50px;
  padding-bottom: 50px;
}
.form-centralizer.too_tall .form {
  margin: 0 auto 0 auto;
  position: static;
  top: 0;
  left: 0;
  transform: none;
}
.form-centralizer .form {
  border-radius: 7px;
  background: white;
  padding: 70px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.form-centralizer .form p {
  font-size: 1rem;
}
.form-centralizer .form label.haserror {
  color: #ef473e;
}

.form h2 {
  text-align: center;
  font-size: 2rem;
}
.form h2 small {
  font-size: 1.2rem;
}

.requisites {
  font-size: 0.7rem;
}

.select-css {
  display: block;
  font-size: 16px;
  line-height: 24px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 400;
  color: #444;
  padding: 15px 1.4em 15px 1.2em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #EBEBEB;
  border-radius: 15px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat, repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 0.65em auto, 100%;
}
.select-css:active, .select-css:focus {
  border-color: #35C491;
  outline: none;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
.select-css:valid ~ label {
  color: #514F4D;
}
.select-css:focus ~ label {
  color: #35C491;
}

.select-css::-ms-expand {
  display: none;
}

.select-css option {
  font-weight: normal;
}

.error {
  background-color: #ef473e;
  color: white;
  padding: 10px 10px 10px 55px;
  text-align: left;
  display: none;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 5px;
  margin: 5px 0;
  position: relative;
}
.error:before {
  content: "";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: white;
  font-size: 1.5rem;
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.code-error {
  border-radius: 10px;
}

@media (max-width: 600px) {
  .form-centralizer, .form-centralizer.too_tall {
    position: static;
    height: auto;
    padding: 40px 20px;
  }
  .form-centralizer .form, .form-centralizer.too_tall .form {
    padding: 20px;
    width: 100%;
    margin: auto;
    position: static;
    top: 0;
    left: 0;
    transform: none;
  }
}
/* form starting stylings ------------------------------- */
.group {
  position: relative;
  margin-bottom: 35px;
}

.radio-inline, .checkbox-inline {
  display: inline-block;
  padding-left: 0;
  margin-right: 25px;
}

.checkbox-success input[type=checkbox]:checked + label::before,
.checkbox-success input[type=radio]:checked + label::before {
  background-color: white;
  border-color: #35C491;
}

.checkbox-success input[type=checkbox]:checked + label::after,
.checkbox-success input[type=radio]:checked + label::after {
  color: inherit;
  background-color: white;
}

.radio label::before {
  border: 2px solid #35C491;
  background: transparent;
}

.radio.lg label {
  pointer-events: all;
  padding-left: 13px;
  padding-top: 3px;
  outline: none;
}

@media (max-width: 765px) {
  .radio-inline, .checkbox-inline {
    width: 48%;
    margin-bottom: 15px;
    margin-right: 0;
  }
}
/* LABEL ======================================= */
/*label 				 {
  color:$text_grey;
  font-size:.8rem;
  font-weight:normal;
  pointer-events:none;
}*/
/* active state */
input:focus ~ label, input:valid ~ label {
  /*top:-15px;
  font-size:12px;*/
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.form-bordered {
  /* form starting stylings ------------------------------- */
  /* LABEL ======================================= */
}
.form-bordered .group {
  position: relative;
  margin-bottom: 25px;
}
.form-bordered .group.lg input[type=text], .form-bordered .group.lg input[type=number], .form-bordered .group.lg input[type=password] {
  font-size: 22px;
}
.form-bordered .group.xl input[type=text], .form-bordered .group.xl input[type=number], .form-bordered .group.xl input[type=password] {
  font-size: 30px;
}
.form-bordered .group.withafter input[type=text], .form-bordered .group.withafter input[type=number], .form-bordered .group.withafter input[type=password] {
  padding-right: 40px;
}
.form-bordered .fake_input {
  padding: 20px !important;
}
.form-bordered .radio_holder {
  border: 1px solid #EBEBEB;
  border-radius: 20px;
  padding: 25px 30px 15px 30px;
}
.form-bordered input[type=text], .form-bordered input[type=number], .form-bordered input[type=password], .form-bordered .fake_input, .form-bordered textarea {
  border: 1px solid #EBEBEB;
  border-radius: 15px;
  padding: 15px 20px;
  font-size: 16px;
  display: block;
  width: 100%;
}
.form-bordered input[type=text]::placeholder, .form-bordered input[type=number]::placeholder, .form-bordered input[type=password]::placeholder, .form-bordered .fake_input::placeholder, .form-bordered textarea::placeholder {
  color: #f8f8f8;
}
.form-bordered input[type=text].code, .form-bordered input[type=number].code, .form-bordered input[type=password].code, .form-bordered .fake_input.code, .form-bordered textarea.code {
  font-size: 40px !important;
  text-align: center;
  letter-spacing: 10px;
  width: 200px;
  padding: 15px 10px 15px 20px;
}
.form-bordered input[type=text]:active, .form-bordered input[type=text]:focus, .form-bordered input[type=number]:active, .form-bordered input[type=number]:focus, .form-bordered input[type=password]:active, .form-bordered input[type=password]:focus, .form-bordered .fake_input:active, .form-bordered .fake_input:focus, .form-bordered textarea:active, .form-bordered textarea:focus {
  border-color: #35C491;
  outline: none;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
.form-bordered input[type=text]:valid ~ label, .form-bordered input[type=number]:valid ~ label, .form-bordered input[type=password]:valid ~ label, .form-bordered .fake_input:valid ~ label, .form-bordered textarea:valid ~ label {
  color: #514F4D;
}
.form-bordered input[type=text]:focus ~ label, .form-bordered input[type=number]:focus ~ label, .form-bordered input[type=password]:focus ~ label, .form-bordered .fake_input:focus ~ label, .form-bordered textarea:focus ~ label {
  color: #35C491;
}
.form-bordered textarea {
  min-height: 100px;
}
.form-bordered input:focus {
  outline: none;
}
.form-bordered input[type=radio] {
  display: none;
}
.form-bordered input[type=radio] + label.radio {
  pointer-events: all;
  color: #514F4D;
}
.form-bordered input[type=radio] + label.radio.lg {
  padding-left: 50px;
  position: relative;
  line-height: 36px;
  font-size: 1.1rem;
  vertical-align: middle;
  margin-bottom: 15px;
}
.form-bordered input[type=radio] + label.radio.lg:before {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #cccccc;
  left: 0;
  background: none;
  z-index: 1;
}
.form-bordered input[type=radio] + label.radio.lg:after {
  width: 26px;
  height: 26px;
  content: "";
  top: 5px;
  left: 5px;
  z-index: 2;
  position: absolute;
  border-radius: 50%;
  background-color: #37c391;
  opacity: 0;
}
.form-bordered input[type=radio] + label.radio::placeholder {
  color: #eee;
}
.form-bordered input[type=radio]:checked + label.radio.lg:after {
  opacity: 1;
}
.form-bordered label.floating {
  background-color: white;
  padding: 0 3px;
  position: absolute;
  left: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
  display: block;
  color: #514F4D;
  top: -9px;
  font-size: 13px;
}
.form-bordered span.after {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #d8d8d8;
}

.form_section:not(.page1) input[type=radio] {
  display: inline;
  position: absolute;
  z-index: -1000;
  left: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
.form_section:not(.page1) input[type=radio] + label {
  color: black;
  padding-left: 36px;
  height: 31px;
  margin-right: 10px;
  display: inline-block;
  line-height: 31px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 14px;
  vertical-align: middle;
  cursor: pointer;
  background-image: url(../img/radio.png);
}
.form_section:not(.page1) input[type=radio].small + label {
  padding-left: 27px;
  height: 25px;
  margin-right: 5px;
  display: inline-block;
  line-height: 25px;
  font-size: 13px;
  vertical-align: middle;
  cursor: pointer;
  background-image: url(../img/radio_small.png);
}
.form_section:not(.page1) input[type=radio]:checked + label {
  background-position: 0 -31px;
}
.form_section:not(.page1) input[type=radio].small:checked + label {
  background-position: 0 -25px;
}
.form_section:not(.page1) input[type=checkbox] {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
.form_section:not(.page1) input[type=checkbox] + label {
  padding-left: 40px;
  position: relative;
  display: inline-block;
  line-height: 30px;
  /*background-repeat:no-repeat;
  background-image:url(../img/checkmark_unchecked.png);
  background-position: 0 0;*/
  font-size: 15px;
  vertical-align: middle;
  cursor: pointer;
}
.form_section:not(.page1) input[type=checkbox] + label:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  left: 0;
  border: 1px solid #eeeeee;
  z-index: 1;
}
.form_section:not(.page1) input[type=checkbox]:checked + label:after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 4px;
  top: 4px;
  z-index: 2;
  background-color: #35C491;
}
.form_section:not(.page1) input[type=checkbox].large + label {
  font-size: 18px;
}

.wrapper_confetti {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  z-index: 9000;
}

.txt {
  padding: 5rem;
}

[class|=confetti] {
  position: absolute;
}

.confetti-0 {
  width: 2px;
  height: 0.8px;
  background-color: #d13447;
  top: -10%;
  left: 82%;
  opacity: 1.23817764;
  transform: rotate(75.7145604822deg);
  animation: drop-0 4.4172198242s 0.4200097305s infinite;
}

@keyframes drop-0 {
  100% {
    top: 110%;
    left: 95%;
  }
}
.confetti-1 {
  width: 1px;
  height: 0.4px;
  background-color: #d13447;
  top: -10%;
  left: 2%;
  opacity: 0.6169092526;
  transform: rotate(5.1141047726deg);
  animation: drop-1 4.5268641802s 0.8293900666s infinite;
}

@keyframes drop-1 {
  100% {
    top: 110%;
    left: 3%;
  }
}
.confetti-2 {
  width: 2px;
  height: 0.8px;
  background-color: #d13447;
  top: -10%;
  left: 83%;
  opacity: 0.9342602648;
  transform: rotate(51.5275327446deg);
  animation: drop-2 4.7784774086s 0.0444722233s infinite;
}

@keyframes drop-2 {
  100% {
    top: 110%;
    left: 92%;
  }
}
.confetti-3 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 89%;
  opacity: 1.0535475588;
  transform: rotate(196.443449406deg);
  animation: drop-3 4.7172611157s 0.6307905778s infinite;
}

@keyframes drop-3 {
  100% {
    top: 110%;
    left: 90%;
  }
}
.confetti-4 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 17%;
  opacity: 0.6611823925;
  transform: rotate(12.49849091deg);
  animation: drop-4 4.1551846308s 0.5447934841s infinite;
}

@keyframes drop-4 {
  100% {
    top: 110%;
    left: 20%;
  }
}
.confetti-5 {
  width: 6px;
  height: 2.4px;
  background-color: #d13447;
  top: -10%;
  left: 46%;
  opacity: 0.9440081999;
  transform: rotate(194.652302526deg);
  animation: drop-5 4.6926599168s 0.0032307967s infinite;
}

@keyframes drop-5 {
  100% {
    top: 110%;
    left: 55%;
  }
}
.confetti-6 {
  width: 8px;
  height: 3.2px;
  background-color: #263672;
  top: -10%;
  left: 14%;
  opacity: 1.0519156795;
  transform: rotate(164.5580993442deg);
  animation: drop-6 4.4875725906s 0.3412357562s infinite;
}

@keyframes drop-6 {
  100% {
    top: 110%;
    left: 29%;
  }
}
.confetti-7 {
  width: 7px;
  height: 2.8px;
  background-color: #263672;
  top: -10%;
  left: 82%;
  opacity: 0.8526885819;
  transform: rotate(257.936900747deg);
  animation: drop-7 4.7616721687s 0.981826648s infinite;
}

@keyframes drop-7 {
  100% {
    top: 110%;
    left: 94%;
  }
}
.confetti-8 {
  width: 8px;
  height: 3.2px;
  background-color: #263672;
  top: -10%;
  left: 72%;
  opacity: 1.1447979447;
  transform: rotate(283.9755133322deg);
  animation: drop-8 4.1641724175s 0.0086292682s infinite;
}

@keyframes drop-8 {
  100% {
    top: 110%;
    left: 86%;
  }
}
.confetti-9 {
  width: 1px;
  height: 0.4px;
  background-color: #d13447;
  top: -10%;
  left: 26%;
  opacity: 1.2097472387;
  transform: rotate(261.6547568186deg);
  animation: drop-9 4.2648895732s 0.3971850305s infinite;
}

@keyframes drop-9 {
  100% {
    top: 110%;
    left: 33%;
  }
}
.confetti-10 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 64%;
  opacity: 1.112789829;
  transform: rotate(181.6809460582deg);
  animation: drop-10 4.4504972948s 0.6575507187s infinite;
}

@keyframes drop-10 {
  100% {
    top: 110%;
    left: 71%;
  }
}
.confetti-11 {
  width: 3px;
  height: 1.2px;
  background-color: #263672;
  top: -10%;
  left: 53%;
  opacity: 1.3875965302;
  transform: rotate(17.7863953785deg);
  animation: drop-11 4.2073964208s 0.0814701747s infinite;
}

@keyframes drop-11 {
  100% {
    top: 110%;
    left: 54%;
  }
}
.confetti-12 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 84%;
  opacity: 1.0841107622;
  transform: rotate(171.7624808843deg);
  animation: drop-12 4.7993690338s 0.2426019017s infinite;
}

@keyframes drop-12 {
  100% {
    top: 110%;
    left: 95%;
  }
}
.confetti-13 {
  width: 5px;
  height: 2px;
  background-color: #ffbf00;
  top: -10%;
  left: 16%;
  opacity: 0.5024298141;
  transform: rotate(93.6741250028deg);
  animation: drop-13 4.4632952294s 0.7801407095s infinite;
}

@keyframes drop-13 {
  100% {
    top: 110%;
    left: 25%;
  }
}
.confetti-14 {
  width: 3px;
  height: 1.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 92%;
  opacity: 0.5384830746;
  transform: rotate(250.4667113616deg);
  animation: drop-14 4.4553798541s 0.1818837499s infinite;
}

@keyframes drop-14 {
  100% {
    top: 110%;
    left: 95%;
  }
}
.confetti-15 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 4%;
  opacity: 1.4538042352;
  transform: rotate(228.730497374deg);
  animation: drop-15 4.0296385272s 0.4938270281s infinite;
}

@keyframes drop-15 {
  100% {
    top: 110%;
    left: 9%;
  }
}
.confetti-16 {
  width: 4px;
  height: 1.6px;
  background-color: #263672;
  top: -10%;
  left: 62%;
  opacity: 0.5958130093;
  transform: rotate(180.2184741865deg);
  animation: drop-16 4.3718611202s 0.591976392s infinite;
}

@keyframes drop-16 {
  100% {
    top: 110%;
    left: 64%;
  }
}
.confetti-17 {
  width: 3px;
  height: 1.2px;
  background-color: #263672;
  top: -10%;
  left: 12%;
  opacity: 0.7114169706;
  transform: rotate(47.2206254343deg);
  animation: drop-17 4.8730362278s 0.0496158235s infinite;
}

@keyframes drop-17 {
  100% {
    top: 110%;
    left: 26%;
  }
}
.confetti-18 {
  width: 2px;
  height: 0.8px;
  background-color: #263672;
  top: -10%;
  left: 47%;
  opacity: 1.1836593858;
  transform: rotate(120.7713439137deg);
  animation: drop-18 4.2460973513s 0.9408951893s infinite;
}

@keyframes drop-18 {
  100% {
    top: 110%;
    left: 52%;
  }
}
.confetti-19 {
  width: 1px;
  height: 0.4px;
  background-color: #263672;
  top: -10%;
  left: 43%;
  opacity: 1.4666818248;
  transform: rotate(100.5640139155deg);
  animation: drop-19 4.8574630292s 0.1784191524s infinite;
}

@keyframes drop-19 {
  100% {
    top: 110%;
    left: 44%;
  }
}
.confetti-20 {
  width: 3px;
  height: 1.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 27%;
  opacity: 0.7705875541;
  transform: rotate(70.5210527663deg);
  animation: drop-20 4.4082838515s 0.8182610069s infinite;
}

@keyframes drop-20 {
  100% {
    top: 110%;
    left: 41%;
  }
}
.confetti-21 {
  width: 3px;
  height: 1.2px;
  background-color: #d13447;
  top: -10%;
  left: 4%;
  opacity: 0.9216908031;
  transform: rotate(190.5101926496deg);
  animation: drop-21 4.0391061023s 0.5363859554s infinite;
}

@keyframes drop-21 {
  100% {
    top: 110%;
    left: 14%;
  }
}
.confetti-22 {
  width: 7px;
  height: 2.8px;
  background-color: #263672;
  top: -10%;
  left: 21%;
  opacity: 1.0031242168;
  transform: rotate(99.4003005222deg);
  animation: drop-22 4.4875942769s 0.9228002916s infinite;
}

@keyframes drop-22 {
  100% {
    top: 110%;
    left: 29%;
  }
}
.confetti-23 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 51%;
  opacity: 1.0030089809;
  transform: rotate(122.61111096deg);
  animation: drop-23 4.7964077829s 0.7317554925s infinite;
}

@keyframes drop-23 {
  100% {
    top: 110%;
    left: 62%;
  }
}
.confetti-24 {
  width: 1px;
  height: 0.4px;
  background-color: #263672;
  top: -10%;
  left: 65%;
  opacity: 1.218561585;
  transform: rotate(120.7975468745deg);
  animation: drop-24 4.403339089s 0.320319892s infinite;
}

@keyframes drop-24 {
  100% {
    top: 110%;
    left: 73%;
  }
}
.confetti-25 {
  width: 2px;
  height: 0.8px;
  background-color: #263672;
  top: -10%;
  left: 76%;
  opacity: 0.8746250388;
  transform: rotate(129.6136603731deg);
  animation: drop-25 4.5095887049s 0.7243295474s infinite;
}

@keyframes drop-25 {
  100% {
    top: 110%;
    left: 85%;
  }
}
.confetti-26 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 69%;
  opacity: 1.0881356199;
  transform: rotate(277.5688556638deg);
  animation: drop-26 4.0926984484s 0.1293874384s infinite;
}

@keyframes drop-26 {
  100% {
    top: 110%;
    left: 71%;
  }
}
.confetti-27 {
  width: 4px;
  height: 1.6px;
  background-color: #d13447;
  top: -10%;
  left: 5%;
  opacity: 0.9232517389;
  transform: rotate(35.4179269593deg);
  animation: drop-27 4.1102285209s 0.3783091913s infinite;
}

@keyframes drop-27 {
  100% {
    top: 110%;
    left: 12%;
  }
}
.confetti-28 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 23%;
  opacity: 0.6826702849;
  transform: rotate(39.6742063583deg);
  animation: drop-28 4.6213903547s 0.8097076216s infinite;
}

@keyframes drop-28 {
  100% {
    top: 110%;
    left: 32%;
  }
}
.confetti-29 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 17%;
  opacity: 1.0699047401;
  transform: rotate(16.8473857975deg);
  animation: drop-29 4.4254577018s 0.7897442063s infinite;
}

@keyframes drop-29 {
  100% {
    top: 110%;
    left: 29%;
  }
}
.confetti-30 {
  width: 5px;
  height: 2px;
  background-color: #263672;
  top: -10%;
  left: 63%;
  opacity: 0.7807928488;
  transform: rotate(285.7177594794deg);
  animation: drop-30 4.3461741467s 0.0641231901s infinite;
}

@keyframes drop-30 {
  100% {
    top: 110%;
    left: 71%;
  }
}
.confetti-31 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 62%;
  opacity: 0.9155666027;
  transform: rotate(76.3449779768deg);
  animation: drop-31 4.6852133387s 0.3239661037s infinite;
}

@keyframes drop-31 {
  100% {
    top: 110%;
    left: 74%;
  }
}
.confetti-32 {
  width: 1px;
  height: 0.4px;
  background-color: #263672;
  top: -10%;
  left: 81%;
  opacity: 0.8251943168;
  transform: rotate(326.3361712196deg);
  animation: drop-32 4.9619613089s 0.2173797989s infinite;
}

@keyframes drop-32 {
  100% {
    top: 110%;
    left: 91%;
  }
}
.confetti-33 {
  width: 8px;
  height: 3.2px;
  background-color: #d13447;
  top: -10%;
  left: 74%;
  opacity: 1.1542298416;
  transform: rotate(106.942320553deg);
  animation: drop-33 4.2012729083s 0.9153747669s infinite;
}

@keyframes drop-33 {
  100% {
    top: 110%;
    left: 75%;
  }
}
.confetti-34 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 7%;
  opacity: 0.581470676;
  transform: rotate(303.3077056489deg);
  animation: drop-34 4.1816488225s 0.0047827675s infinite;
}

@keyframes drop-34 {
  100% {
    top: 110%;
    left: 18%;
  }
}
.confetti-35 {
  width: 5px;
  height: 2px;
  background-color: #ffbf00;
  top: -10%;
  left: 100%;
  opacity: 0.5070011025;
  transform: rotate(23.3459486234deg);
  animation: drop-35 4.7440556996s 0.9609965246s infinite;
}

@keyframes drop-35 {
  100% {
    top: 110%;
    left: 108%;
  }
}
.confetti-36 {
  width: 8px;
  height: 3.2px;
  background-color: #263672;
  top: -10%;
  left: 4%;
  opacity: 1.1504946128;
  transform: rotate(128.9662603024deg);
  animation: drop-36 4.0491780949s 0.5794894777s infinite;
}

@keyframes drop-36 {
  100% {
    top: 110%;
    left: 17%;
  }
}
.confetti-37 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 10%;
  opacity: 1.0824766461;
  transform: rotate(254.2885801762deg);
  animation: drop-37 4.2922905764s 0.0706672854s infinite;
}

@keyframes drop-37 {
  100% {
    top: 110%;
    left: 18%;
  }
}
.confetti-38 {
  width: 8px;
  height: 3.2px;
  background-color: #d13447;
  top: -10%;
  left: 16%;
  opacity: 0.9923346092;
  transform: rotate(92.4454839397deg);
  animation: drop-38 4.7330444049s 0.9409381775s infinite;
}

@keyframes drop-38 {
  100% {
    top: 110%;
    left: 23%;
  }
}
.confetti-39 {
  width: 5px;
  height: 2px;
  background-color: #ffbf00;
  top: -10%;
  left: 47%;
  opacity: 0.7523720856;
  transform: rotate(268.6312239705deg);
  animation: drop-39 4.2420722016s 0.3716459095s infinite;
}

@keyframes drop-39 {
  100% {
    top: 110%;
    left: 51%;
  }
}
.confetti-40 {
  width: 5px;
  height: 2px;
  background-color: #263672;
  top: -10%;
  left: 77%;
  opacity: 1.2866201392;
  transform: rotate(151.7113991548deg);
  animation: drop-40 4.9109512405s 0.8304264246s infinite;
}

@keyframes drop-40 {
  100% {
    top: 110%;
    left: 87%;
  }
}
.confetti-41 {
  width: 3px;
  height: 1.2px;
  background-color: #263672;
  top: -10%;
  left: 38%;
  opacity: 0.9266074553;
  transform: rotate(235.2666870389deg);
  animation: drop-41 4.3082955939s 0.5996657594s infinite;
}

@keyframes drop-41 {
  100% {
    top: 110%;
    left: 51%;
  }
}
.confetti-42 {
  width: 1px;
  height: 0.4px;
  background-color: #263672;
  top: -10%;
  left: 3%;
  opacity: 0.9289231399;
  transform: rotate(328.1723279335deg);
  animation: drop-42 4.8489359893s 0.5563131485s infinite;
}

@keyframes drop-42 {
  100% {
    top: 110%;
    left: 16%;
  }
}
.confetti-43 {
  width: 2px;
  height: 0.8px;
  background-color: #263672;
  top: -10%;
  left: 81%;
  opacity: 0.5957247517;
  transform: rotate(12.4159415792deg);
  animation: drop-43 4.020202249s 0.0682389941s infinite;
}

@keyframes drop-43 {
  100% {
    top: 110%;
    left: 83%;
  }
}
.confetti-44 {
  width: 1px;
  height: 0.4px;
  background-color: #263672;
  top: -10%;
  left: 17%;
  opacity: 1.2602606976;
  transform: rotate(254.5316069802deg);
  animation: drop-44 4.9286739084s 0.0570012857s infinite;
}

@keyframes drop-44 {
  100% {
    top: 110%;
    left: 22%;
  }
}
.confetti-45 {
  width: 1px;
  height: 0.4px;
  background-color: #d13447;
  top: -10%;
  left: 14%;
  opacity: 0.6289388302;
  transform: rotate(117.9063906145deg);
  animation: drop-45 4.2310836386s 0.0140433289s infinite;
}

@keyframes drop-45 {
  100% {
    top: 110%;
    left: 26%;
  }
}
.confetti-46 {
  width: 8px;
  height: 3.2px;
  background-color: #d13447;
  top: -10%;
  left: 58%;
  opacity: 1.3690007646;
  transform: rotate(124.5994713484deg);
  animation: drop-46 4.7019069404s 0.2720860716s infinite;
}

@keyframes drop-46 {
  100% {
    top: 110%;
    left: 64%;
  }
}
.confetti-47 {
  width: 5px;
  height: 2px;
  background-color: #ffbf00;
  top: -10%;
  left: 51%;
  opacity: 1.0925280279;
  transform: rotate(226.6849294543deg);
  animation: drop-47 4.0045135301s 0.3494445999s infinite;
}

@keyframes drop-47 {
  100% {
    top: 110%;
    left: 62%;
  }
}
.confetti-48 {
  width: 8px;
  height: 3.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 9%;
  opacity: 1.4732395469;
  transform: rotate(1.0689519813deg);
  animation: drop-48 4.2057573165s 0.2972152237s infinite;
}

@keyframes drop-48 {
  100% {
    top: 110%;
    left: 15%;
  }
}
.confetti-49 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 81%;
  opacity: 1.4869975425;
  transform: rotate(198.2841978571deg);
  animation: drop-49 4.604731745s 0.8766021528s infinite;
}

@keyframes drop-49 {
  100% {
    top: 110%;
    left: 90%;
  }
}
.confetti-50 {
  width: 8px;
  height: 3.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 13%;
  opacity: 1.4969322818;
  transform: rotate(314.0550335873deg);
  animation: drop-50 4.187236076s 0.8022424379s infinite;
}

@keyframes drop-50 {
  100% {
    top: 110%;
    left: 15%;
  }
}
.confetti-51 {
  width: 1px;
  height: 0.4px;
  background-color: #d13447;
  top: -10%;
  left: 73%;
  opacity: 0.9258675772;
  transform: rotate(134.8349514348deg);
  animation: drop-51 4.7875732654s 0.3957471615s infinite;
}

@keyframes drop-51 {
  100% {
    top: 110%;
    left: 77%;
  }
}
.confetti-52 {
  width: 1px;
  height: 0.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 19%;
  opacity: 0.5218376443;
  transform: rotate(277.3414484096deg);
  animation: drop-52 4.208059516s 0.7349144188s infinite;
}

@keyframes drop-52 {
  100% {
    top: 110%;
    left: 23%;
  }
}
.confetti-53 {
  width: 7px;
  height: 2.8px;
  background-color: #d13447;
  top: -10%;
  left: 94%;
  opacity: 1.2527177562;
  transform: rotate(137.396495602deg);
  animation: drop-53 4.3996906496s 0.1755664499s infinite;
}

@keyframes drop-53 {
  100% {
    top: 110%;
    left: 103%;
  }
}
.confetti-54 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 66%;
  opacity: 0.6863129545;
  transform: rotate(186.7363377203deg);
  animation: drop-54 4.5469109374s 0.3812157806s infinite;
}

@keyframes drop-54 {
  100% {
    top: 110%;
    left: 70%;
  }
}
.confetti-55 {
  width: 2px;
  height: 0.8px;
  background-color: #263672;
  top: -10%;
  left: 76%;
  opacity: 0.8557219005;
  transform: rotate(57.1494556713deg);
  animation: drop-55 4.690898041s 0.3800978036s infinite;
}

@keyframes drop-55 {
  100% {
    top: 110%;
    left: 84%;
  }
}
.confetti-56 {
  width: 4px;
  height: 1.6px;
  background-color: #263672;
  top: -10%;
  left: 19%;
  opacity: 1.1326513012;
  transform: rotate(136.7640176448deg);
  animation: drop-56 4.3669587692s 0.9103776099s infinite;
}

@keyframes drop-56 {
  100% {
    top: 110%;
    left: 26%;
  }
}
.confetti-57 {
  width: 5px;
  height: 2px;
  background-color: #ffbf00;
  top: -10%;
  left: 61%;
  opacity: 0.9536772027;
  transform: rotate(350.5508570761deg);
  animation: drop-57 4.3919660908s 0.9168894186s infinite;
}

@keyframes drop-57 {
  100% {
    top: 110%;
    left: 72%;
  }
}
.confetti-58 {
  width: 7px;
  height: 2.8px;
  background-color: #d13447;
  top: -10%;
  left: 1%;
  opacity: 0.8241533622;
  transform: rotate(336.4155527243deg);
  animation: drop-58 4.7812228113s 0.9569616265s infinite;
}

@keyframes drop-58 {
  100% {
    top: 110%;
    left: 3%;
  }
}
.confetti-59 {
  width: 4px;
  height: 1.6px;
  background-color: #263672;
  top: -10%;
  left: 50%;
  opacity: 1.2781584166;
  transform: rotate(226.2805243137deg);
  animation: drop-59 4.5401387363s 0.0093465445s infinite;
}

@keyframes drop-59 {
  100% {
    top: 110%;
    left: 60%;
  }
}
.confetti-60 {
  width: 3px;
  height: 1.2px;
  background-color: #d13447;
  top: -10%;
  left: 20%;
  opacity: 0.8107865838;
  transform: rotate(6.4247470114deg);
  animation: drop-60 4.4813756285s 0.5415121009s infinite;
}

@keyframes drop-60 {
  100% {
    top: 110%;
    left: 21%;
  }
}
.confetti-61 {
  width: 8px;
  height: 3.2px;
  background-color: #263672;
  top: -10%;
  left: 70%;
  opacity: 1.2425310948;
  transform: rotate(337.0881132064deg);
  animation: drop-61 4.9990491989s 0.6481744652s infinite;
}

@keyframes drop-61 {
  100% {
    top: 110%;
    left: 74%;
  }
}
.confetti-62 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 57%;
  opacity: 1.3852560927;
  transform: rotate(282.7370098516deg);
  animation: drop-62 4.846099851s 0.0068035807s infinite;
}

@keyframes drop-62 {
  100% {
    top: 110%;
    left: 70%;
  }
}
.confetti-63 {
  width: 2px;
  height: 0.8px;
  background-color: #263672;
  top: -10%;
  left: 44%;
  opacity: 0.6737008401;
  transform: rotate(314.6855871575deg);
  animation: drop-63 4.0810639387s 0.4066220708s infinite;
}

@keyframes drop-63 {
  100% {
    top: 110%;
    left: 58%;
  }
}
.confetti-64 {
  width: 6px;
  height: 2.4px;
  background-color: #d13447;
  top: -10%;
  left: 98%;
  opacity: 0.8393355526;
  transform: rotate(81.3265787595deg);
  animation: drop-64 4.7673172739s 0.2314326631s infinite;
}

@keyframes drop-64 {
  100% {
    top: 110%;
    left: 112%;
  }
}
.confetti-65 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 31%;
  opacity: 0.7244933031;
  transform: rotate(302.4885964985deg);
  animation: drop-65 4.8362042025s 0.9038044115s infinite;
}

@keyframes drop-65 {
  100% {
    top: 110%;
    left: 37%;
  }
}
.confetti-66 {
  width: 7px;
  height: 2.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 56%;
  opacity: 1.3746099275;
  transform: rotate(279.8064156683deg);
  animation: drop-66 4.5361073874s 0.974479521s infinite;
}

@keyframes drop-66 {
  100% {
    top: 110%;
    left: 69%;
  }
}
.confetti-67 {
  width: 2px;
  height: 0.8px;
  background-color: #263672;
  top: -10%;
  left: 98%;
  opacity: 0.866627485;
  transform: rotate(236.870180715deg);
  animation: drop-67 4.060849034s 0.4115891686s infinite;
}

@keyframes drop-67 {
  100% {
    top: 110%;
    left: 105%;
  }
}
.confetti-68 {
  width: 8px;
  height: 3.2px;
  background-color: #263672;
  top: -10%;
  left: 45%;
  opacity: 0.9433288726;
  transform: rotate(157.2669689109deg);
  animation: drop-68 4.9987871155s 0.4239117928s infinite;
}

@keyframes drop-68 {
  100% {
    top: 110%;
    left: 49%;
  }
}
.confetti-69 {
  width: 1px;
  height: 0.4px;
  background-color: #d13447;
  top: -10%;
  left: 37%;
  opacity: 0.7384913483;
  transform: rotate(247.6120053111deg);
  animation: drop-69 4.3091233927s 0.3897826332s infinite;
}

@keyframes drop-69 {
  100% {
    top: 110%;
    left: 51%;
  }
}
.confetti-70 {
  width: 4px;
  height: 1.6px;
  background-color: #263672;
  top: -10%;
  left: 58%;
  opacity: 1.315831336;
  transform: rotate(84.8223096426deg);
  animation: drop-70 4.7412082668s 0.6995408629s infinite;
}

@keyframes drop-70 {
  100% {
    top: 110%;
    left: 60%;
  }
}
.confetti-71 {
  width: 4px;
  height: 1.6px;
  background-color: #d13447;
  top: -10%;
  left: 23%;
  opacity: 1.2055677744;
  transform: rotate(191.3183784563deg);
  animation: drop-71 4.2065048627s 0.2572183625s infinite;
}

@keyframes drop-71 {
  100% {
    top: 110%;
    left: 35%;
  }
}
.confetti-72 {
  width: 4px;
  height: 1.6px;
  background-color: #d13447;
  top: -10%;
  left: 45%;
  opacity: 0.7696139093;
  transform: rotate(182.4220536354deg);
  animation: drop-72 4.5762827535s 0.7230207134s infinite;
}

@keyframes drop-72 {
  100% {
    top: 110%;
    left: 55%;
  }
}
.confetti-73 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 69%;
  opacity: 0.778328647;
  transform: rotate(273.5370096195deg);
  animation: drop-73 4.5398180915s 0.8229666411s infinite;
}

@keyframes drop-73 {
  100% {
    top: 110%;
    left: 82%;
  }
}
.confetti-74 {
  width: 7px;
  height: 2.8px;
  background-color: #263672;
  top: -10%;
  left: 41%;
  opacity: 0.5294996639;
  transform: rotate(238.859386258deg);
  animation: drop-74 4.0124243278s 0.0979833184s infinite;
}

@keyframes drop-74 {
  100% {
    top: 110%;
    left: 48%;
  }
}
.confetti-75 {
  width: 5px;
  height: 2px;
  background-color: #ffbf00;
  top: -10%;
  left: 77%;
  opacity: 0.9686090212;
  transform: rotate(326.7469670658deg);
  animation: drop-75 4.234660549s 0.6016982181s infinite;
}

@keyframes drop-75 {
  100% {
    top: 110%;
    left: 87%;
  }
}
.confetti-76 {
  width: 1px;
  height: 0.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 43%;
  opacity: 1.3512466778;
  transform: rotate(119.0334040669deg);
  animation: drop-76 4.0802380578s 0.0318700066s infinite;
}

@keyframes drop-76 {
  100% {
    top: 110%;
    left: 52%;
  }
}
.confetti-77 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 97%;
  opacity: 0.8760289792;
  transform: rotate(262.1636679289deg);
  animation: drop-77 4.2817146588s 0.7654196747s infinite;
}

@keyframes drop-77 {
  100% {
    top: 110%;
    left: 100%;
  }
}
.confetti-78 {
  width: 3px;
  height: 1.2px;
  background-color: #d13447;
  top: -10%;
  left: 35%;
  opacity: 0.7706353415;
  transform: rotate(245.5002330428deg);
  animation: drop-78 4.6422650902s 0.1754279408s infinite;
}

@keyframes drop-78 {
  100% {
    top: 110%;
    left: 41%;
  }
}
.confetti-79 {
  width: 2px;
  height: 0.8px;
  background-color: #263672;
  top: -10%;
  left: 89%;
  opacity: 0.6480274711;
  transform: rotate(180.0889500253deg);
  animation: drop-79 4.0270457677s 0.2128019407s infinite;
}

@keyframes drop-79 {
  100% {
    top: 110%;
    left: 91%;
  }
}
.confetti-80 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 10%;
  opacity: 1.1051361898;
  transform: rotate(166.8670071211deg);
  animation: drop-80 4.953697937s 0.1725602923s infinite;
}

@keyframes drop-80 {
  100% {
    top: 110%;
    left: 24%;
  }
}
.confetti-81 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 22%;
  opacity: 0.9127294868;
  transform: rotate(318.9471314663deg);
  animation: drop-81 4.9900964622s 0.6503410132s infinite;
}

@keyframes drop-81 {
  100% {
    top: 110%;
    left: 24%;
  }
}
.confetti-82 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 43%;
  opacity: 0.6160750833;
  transform: rotate(213.6268620595deg);
  animation: drop-82 4.5821101557s 0.1398787452s infinite;
}

@keyframes drop-82 {
  100% {
    top: 110%;
    left: 54%;
  }
}
.confetti-83 {
  width: 3px;
  height: 1.2px;
  background-color: #263672;
  top: -10%;
  left: 49%;
  opacity: 0.8170737302;
  transform: rotate(42.4073155061deg);
  animation: drop-83 4.5046994418s 0.3627606604s infinite;
}

@keyframes drop-83 {
  100% {
    top: 110%;
    left: 60%;
  }
}
.confetti-84 {
  width: 2px;
  height: 0.8px;
  background-color: #263672;
  top: -10%;
  left: 58%;
  opacity: 0.7321085342;
  transform: rotate(349.035157562deg);
  animation: drop-84 4.0578225371s 0.9363162137s infinite;
}

@keyframes drop-84 {
  100% {
    top: 110%;
    left: 65%;
  }
}
.confetti-85 {
  width: 1px;
  height: 0.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 51%;
  opacity: 0.9804106882;
  transform: rotate(55.5548997285deg);
  animation: drop-85 4.1912149358s 0.6368772945s infinite;
}

@keyframes drop-85 {
  100% {
    top: 110%;
    left: 61%;
  }
}
.confetti-86 {
  width: 3px;
  height: 1.2px;
  background-color: #263672;
  top: -10%;
  left: 82%;
  opacity: 0.9250714574;
  transform: rotate(136.3602641419deg);
  animation: drop-86 4.6245537039s 0.9202798675s infinite;
}

@keyframes drop-86 {
  100% {
    top: 110%;
    left: 92%;
  }
}
.confetti-87 {
  width: 4px;
  height: 1.6px;
  background-color: #d13447;
  top: -10%;
  left: 67%;
  opacity: 0.7487059045;
  transform: rotate(332.8964322333deg);
  animation: drop-87 4.1123491265s 0.8185935067s infinite;
}

@keyframes drop-87 {
  100% {
    top: 110%;
    left: 75%;
  }
}
.confetti-88 {
  width: 8px;
  height: 3.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 7%;
  opacity: 0.7238396094;
  transform: rotate(50.2995170517deg);
  animation: drop-88 4.9202084216s 0.3568905474s infinite;
}

@keyframes drop-88 {
  100% {
    top: 110%;
    left: 18%;
  }
}
.confetti-89 {
  width: 8px;
  height: 3.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 52%;
  opacity: 0.9685358859;
  transform: rotate(110.2765262276deg);
  animation: drop-89 4.9944209578s 0.2969548378s infinite;
}

@keyframes drop-89 {
  100% {
    top: 110%;
    left: 59%;
  }
}
.confetti-90 {
  width: 3px;
  height: 1.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 76%;
  opacity: 1.4787306246;
  transform: rotate(294.7519862376deg);
  animation: drop-90 4.6845682729s 0.5093265245s infinite;
}

@keyframes drop-90 {
  100% {
    top: 110%;
    left: 86%;
  }
}
.confetti-91 {
  width: 8px;
  height: 3.2px;
  background-color: #263672;
  top: -10%;
  left: 73%;
  opacity: 0.5974829094;
  transform: rotate(225.0563283691deg);
  animation: drop-91 4.8395063985s 0.1607367053s infinite;
}

@keyframes drop-91 {
  100% {
    top: 110%;
    left: 84%;
  }
}
.confetti-92 {
  width: 7px;
  height: 2.8px;
  background-color: #d13447;
  top: -10%;
  left: 26%;
  opacity: 0.5511377626;
  transform: rotate(210.6338317687deg);
  animation: drop-92 4.2435802099s 0.5172633722s infinite;
}

@keyframes drop-92 {
  100% {
    top: 110%;
    left: 28%;
  }
}
.confetti-93 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 29%;
  opacity: 1.4839202814;
  transform: rotate(353.0155426155deg);
  animation: drop-93 4.5920559053s 0.0524257909s infinite;
}

@keyframes drop-93 {
  100% {
    top: 110%;
    left: 33%;
  }
}
.confetti-94 {
  width: 1px;
  height: 0.4px;
  background-color: #d13447;
  top: -10%;
  left: 76%;
  opacity: 0.7998201188;
  transform: rotate(131.6645410221deg);
  animation: drop-94 4.2278565487s 0.6746978034s infinite;
}

@keyframes drop-94 {
  100% {
    top: 110%;
    left: 85%;
  }
}
.confetti-95 {
  width: 8px;
  height: 3.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 14%;
  opacity: 1.1534846873;
  transform: rotate(133.077523535deg);
  animation: drop-95 4.7652961631s 0.8948164752s infinite;
}

@keyframes drop-95 {
  100% {
    top: 110%;
    left: 23%;
  }
}
.confetti-96 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 53%;
  opacity: 0.9048854787;
  transform: rotate(23.8136976073deg);
  animation: drop-96 4.5275436356s 0.5567546643s infinite;
}

@keyframes drop-96 {
  100% {
    top: 110%;
    left: 55%;
  }
}
.confetti-97 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 24%;
  opacity: 1.4404806976;
  transform: rotate(65.8839365576deg);
  animation: drop-97 4.05029783s 0.9878779963s infinite;
}

@keyframes drop-97 {
  100% {
    top: 110%;
    left: 38%;
  }
}
.confetti-98 {
  width: 2px;
  height: 0.8px;
  background-color: #263672;
  top: -10%;
  left: 100%;
  opacity: 0.6738454054;
  transform: rotate(162.3907504735deg);
  animation: drop-98 4.0747516826s 0.5422329214s infinite;
}

@keyframes drop-98 {
  100% {
    top: 110%;
    left: 109%;
  }
}
.confetti-99 {
  width: 4px;
  height: 1.6px;
  background-color: #d13447;
  top: -10%;
  left: 11%;
  opacity: 1.315051439;
  transform: rotate(235.0602493947deg);
  animation: drop-99 4.4950444553s 0.3394689011s infinite;
}

@keyframes drop-99 {
  100% {
    top: 110%;
    left: 24%;
  }
}
.confetti-100 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 69%;
  opacity: 1.1773860954;
  transform: rotate(24.1076242481deg);
  animation: drop-100 4.1323322376s 0.2480543499s infinite;
}

@keyframes drop-100 {
  100% {
    top: 110%;
    left: 79%;
  }
}
.confetti-101 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 81%;
  opacity: 0.7023714376;
  transform: rotate(259.9488594927deg);
  animation: drop-101 4.5645069215s 0.2319931174s infinite;
}

@keyframes drop-101 {
  100% {
    top: 110%;
    left: 88%;
  }
}
.confetti-102 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 63%;
  opacity: 0.8323046207;
  transform: rotate(20.8570027143deg);
  animation: drop-102 4.6039490594s 0.1955836483s infinite;
}

@keyframes drop-102 {
  100% {
    top: 110%;
    left: 69%;
  }
}
.confetti-103 {
  width: 3px;
  height: 1.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 95%;
  opacity: 1.4879548456;
  transform: rotate(38.8808125787deg);
  animation: drop-103 4.2482344495s 0.1147882067s infinite;
}

@keyframes drop-103 {
  100% {
    top: 110%;
    left: 99%;
  }
}
.confetti-104 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 25%;
  opacity: 1.4301715921;
  transform: rotate(141.4752438753deg);
  animation: drop-104 4.7171521932s 0.0295497209s infinite;
}

@keyframes drop-104 {
  100% {
    top: 110%;
    left: 32%;
  }
}
.confetti-105 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 9%;
  opacity: 0.6676522277;
  transform: rotate(13.565484463deg);
  animation: drop-105 4.2248242341s 0.2381985099s infinite;
}

@keyframes drop-105 {
  100% {
    top: 110%;
    left: 23%;
  }
}
.confetti-106 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 39%;
  opacity: 1.0000450184;
  transform: rotate(228.923650473deg);
  animation: drop-106 4.1647655149s 0.2975762867s infinite;
}

@keyframes drop-106 {
  100% {
    top: 110%;
    left: 45%;
  }
}
.confetti-107 {
  width: 1px;
  height: 0.4px;
  background-color: #d13447;
  top: -10%;
  left: 84%;
  opacity: 1.1867287213;
  transform: rotate(173.6947110952deg);
  animation: drop-107 4.8863606406s 0.6683550659s infinite;
}

@keyframes drop-107 {
  100% {
    top: 110%;
    left: 85%;
  }
}
.confetti-108 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 32%;
  opacity: 1.494031687;
  transform: rotate(234.5090554193deg);
  animation: drop-108 4.4126089586s 0.8565970294s infinite;
}

@keyframes drop-108 {
  100% {
    top: 110%;
    left: 45%;
  }
}
.confetti-109 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 16%;
  opacity: 0.9858089628;
  transform: rotate(261.1445418035deg);
  animation: drop-109 4.4736404364s 0.5697075606s infinite;
}

@keyframes drop-109 {
  100% {
    top: 110%;
    left: 31%;
  }
}
.confetti-110 {
  width: 2px;
  height: 0.8px;
  background-color: #263672;
  top: -10%;
  left: 9%;
  opacity: 0.6870249222;
  transform: rotate(295.5960956585deg);
  animation: drop-110 4.1615645446s 0.7772730453s infinite;
}

@keyframes drop-110 {
  100% {
    top: 110%;
    left: 14%;
  }
}
.confetti-111 {
  width: 7px;
  height: 2.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 37%;
  opacity: 0.7319758638;
  transform: rotate(17.4062107597deg);
  animation: drop-111 4.6491392915s 0.6717500481s infinite;
}

@keyframes drop-111 {
  100% {
    top: 110%;
    left: 47%;
  }
}
.confetti-112 {
  width: 3px;
  height: 1.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 28%;
  opacity: 1.1913791374;
  transform: rotate(165.6365072497deg);
  animation: drop-112 4.3501530919s 0.4002851196s infinite;
}

@keyframes drop-112 {
  100% {
    top: 110%;
    left: 36%;
  }
}
.confetti-113 {
  width: 4px;
  height: 1.6px;
  background-color: #263672;
  top: -10%;
  left: 25%;
  opacity: 0.9330365574;
  transform: rotate(93.4377260208deg);
  animation: drop-113 4.0789945227s 0.0802701509s infinite;
}

@keyframes drop-113 {
  100% {
    top: 110%;
    left: 32%;
  }
}
.confetti-114 {
  width: 8px;
  height: 3.2px;
  background-color: #d13447;
  top: -10%;
  left: 54%;
  opacity: 0.9607210018;
  transform: rotate(181.7623439749deg);
  animation: drop-114 4.0241010959s 0.5618914199s infinite;
}

@keyframes drop-114 {
  100% {
    top: 110%;
    left: 63%;
  }
}
.confetti-115 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 93%;
  opacity: 0.8891429174;
  transform: rotate(232.8898755089deg);
  animation: drop-115 4.9898091252s 0.0619071552s infinite;
}

@keyframes drop-115 {
  100% {
    top: 110%;
    left: 100%;
  }
}
.confetti-116 {
  width: 8px;
  height: 3.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 56%;
  opacity: 0.5366761005;
  transform: rotate(56.9833331427deg);
  animation: drop-116 4.2021753211s 0.6626627308s infinite;
}

@keyframes drop-116 {
  100% {
    top: 110%;
    left: 64%;
  }
}
.confetti-117 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 91%;
  opacity: 1.4013388563;
  transform: rotate(304.4628432556deg);
  animation: drop-117 4.1105262693s 0.1342845295s infinite;
}

@keyframes drop-117 {
  100% {
    top: 110%;
    left: 105%;
  }
}
.confetti-118 {
  width: 3px;
  height: 1.2px;
  background-color: #263672;
  top: -10%;
  left: 44%;
  opacity: 1.2696721142;
  transform: rotate(21.6202731729deg);
  animation: drop-118 4.9543025209s 0.2927772436s infinite;
}

@keyframes drop-118 {
  100% {
    top: 110%;
    left: 50%;
  }
}
.confetti-119 {
  width: 1px;
  height: 0.4px;
  background-color: #d13447;
  top: -10%;
  left: 58%;
  opacity: 0.8056343051;
  transform: rotate(209.6848530736deg);
  animation: drop-119 4.1176050657s 0.7167140175s infinite;
}

@keyframes drop-119 {
  100% {
    top: 110%;
    left: 65%;
  }
}
.confetti-120 {
  width: 8px;
  height: 3.2px;
  background-color: #d13447;
  top: -10%;
  left: 19%;
  opacity: 1.4037525963;
  transform: rotate(65.4926214612deg);
  animation: drop-120 4.6676558617s 0.495807437s infinite;
}

@keyframes drop-120 {
  100% {
    top: 110%;
    left: 25%;
  }
}
.confetti-121 {
  width: 1px;
  height: 0.4px;
  background-color: #263672;
  top: -10%;
  left: 1%;
  opacity: 1.3738985866;
  transform: rotate(348.8633601519deg);
  animation: drop-121 4.8227749808s 0.2887941391s infinite;
}

@keyframes drop-121 {
  100% {
    top: 110%;
    left: 8%;
  }
}
.confetti-122 {
  width: 4px;
  height: 1.6px;
  background-color: #d13447;
  top: -10%;
  left: 52%;
  opacity: 0.7312456425;
  transform: rotate(251.4784508902deg);
  animation: drop-122 4.4945669534s 0.4498023523s infinite;
}

@keyframes drop-122 {
  100% {
    top: 110%;
    left: 54%;
  }
}
.confetti-123 {
  width: 1px;
  height: 0.4px;
  background-color: #263672;
  top: -10%;
  left: 87%;
  opacity: 1.1528645203;
  transform: rotate(242.1568015669deg);
  animation: drop-123 4.2934849462s 0.9094450982s infinite;
}

@keyframes drop-123 {
  100% {
    top: 110%;
    left: 102%;
  }
}
.confetti-124 {
  width: 7px;
  height: 2.8px;
  background-color: #263672;
  top: -10%;
  left: 99%;
  opacity: 0.7310966358;
  transform: rotate(169.5143234288deg);
  animation: drop-124 4.5565312838s 0.7729281441s infinite;
}

@keyframes drop-124 {
  100% {
    top: 110%;
    left: 114%;
  }
}
.confetti-125 {
  width: 6px;
  height: 2.4px;
  background-color: #d13447;
  top: -10%;
  left: 100%;
  opacity: 0.5041572357;
  transform: rotate(3.7084718403deg);
  animation: drop-125 4.3561105193s 0.5876031638s infinite;
}

@keyframes drop-125 {
  100% {
    top: 110%;
    left: 109%;
  }
}
.confetti-126 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 43%;
  opacity: 0.9675021328;
  transform: rotate(135.2900130946deg);
  animation: drop-126 4.6865535268s 0.1653636985s infinite;
}

@keyframes drop-126 {
  100% {
    top: 110%;
    left: 54%;
  }
}
.confetti-127 {
  width: 2px;
  height: 0.8px;
  background-color: #d13447;
  top: -10%;
  left: 73%;
  opacity: 0.6032053431;
  transform: rotate(40.1204189633deg);
  animation: drop-127 4.9367859002s 0.1466524581s infinite;
}

@keyframes drop-127 {
  100% {
    top: 110%;
    left: 85%;
  }
}
.confetti-128 {
  width: 6px;
  height: 2.4px;
  background-color: #d13447;
  top: -10%;
  left: 90%;
  opacity: 1.4341360488;
  transform: rotate(301.2208958036deg);
  animation: drop-128 4.5924521812s 0.7970214083s infinite;
}

@keyframes drop-128 {
  100% {
    top: 110%;
    left: 102%;
  }
}
.confetti-129 {
  width: 8px;
  height: 3.2px;
  background-color: #d13447;
  top: -10%;
  left: 85%;
  opacity: 0.5418652959;
  transform: rotate(349.5241985939deg);
  animation: drop-129 4.1270371054s 0.3418491655s infinite;
}

@keyframes drop-129 {
  100% {
    top: 110%;
    left: 87%;
  }
}
.confetti-130 {
  width: 2px;
  height: 0.8px;
  background-color: #263672;
  top: -10%;
  left: 70%;
  opacity: 0.9492249659;
  transform: rotate(73.5265407493deg);
  animation: drop-130 4.6946309973s 0.6927174307s infinite;
}

@keyframes drop-130 {
  100% {
    top: 110%;
    left: 80%;
  }
}
.confetti-131 {
  width: 1px;
  height: 0.4px;
  background-color: #d13447;
  top: -10%;
  left: 11%;
  opacity: 1.4821640217;
  transform: rotate(104.5107871442deg);
  animation: drop-131 4.5174142967s 0.3100050441s infinite;
}

@keyframes drop-131 {
  100% {
    top: 110%;
    left: 13%;
  }
}
.confetti-132 {
  width: 7px;
  height: 2.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 99%;
  opacity: 0.928443582;
  transform: rotate(349.7569044512deg);
  animation: drop-132 4.2464142067s 0.3536991961s infinite;
}

@keyframes drop-132 {
  100% {
    top: 110%;
    left: 113%;
  }
}
.confetti-133 {
  width: 2px;
  height: 0.8px;
  background-color: #d13447;
  top: -10%;
  left: 62%;
  opacity: 1.4039892299;
  transform: rotate(119.6020868475deg);
  animation: drop-133 4.9078543584s 0.6310151893s infinite;
}

@keyframes drop-133 {
  100% {
    top: 110%;
    left: 67%;
  }
}
.confetti-134 {
  width: 3px;
  height: 1.2px;
  background-color: #263672;
  top: -10%;
  left: 34%;
  opacity: 1.1952311431;
  transform: rotate(251.4560982035deg);
  animation: drop-134 4.9782848094s 0.9695219248s infinite;
}

@keyframes drop-134 {
  100% {
    top: 110%;
    left: 37%;
  }
}
.confetti-135 {
  width: 8px;
  height: 3.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 86%;
  opacity: 0.7238895282;
  transform: rotate(179.9965195332deg);
  animation: drop-135 4.3202307392s 0.1006597116s infinite;
}

@keyframes drop-135 {
  100% {
    top: 110%;
    left: 96%;
  }
}
.confetti-136 {
  width: 4px;
  height: 1.6px;
  background-color: #d13447;
  top: -10%;
  left: 88%;
  opacity: 1.130313127;
  transform: rotate(231.7152933041deg);
  animation: drop-136 4.7403945034s 0.1717262802s infinite;
}

@keyframes drop-136 {
  100% {
    top: 110%;
    left: 95%;
  }
}
.confetti-137 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 46%;
  opacity: 0.7211001905;
  transform: rotate(145.9752747036deg);
  animation: drop-137 4.9356331371s 0.1534856981s infinite;
}

@keyframes drop-137 {
  100% {
    top: 110%;
    left: 50%;
  }
}
.confetti-138 {
  width: 2px;
  height: 0.8px;
  background-color: #d13447;
  top: -10%;
  left: 17%;
  opacity: 0.5051171848;
  transform: rotate(175.1677448379deg);
  animation: drop-138 4.9748820186s 0.7928762393s infinite;
}

@keyframes drop-138 {
  100% {
    top: 110%;
    left: 19%;
  }
}
.confetti-139 {
  width: 6px;
  height: 2.4px;
  background-color: #d13447;
  top: -10%;
  left: 64%;
  opacity: 1.3032563957;
  transform: rotate(157.7591790041deg);
  animation: drop-139 4.8991445919s 0.0689671192s infinite;
}

@keyframes drop-139 {
  100% {
    top: 110%;
    left: 76%;
  }
}
.confetti-140 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 27%;
  opacity: 0.6086281705;
  transform: rotate(303.8872765731deg);
  animation: drop-140 4.7926144208s 0.8861187215s infinite;
}

@keyframes drop-140 {
  100% {
    top: 110%;
    left: 31%;
  }
}
.confetti-141 {
  width: 2px;
  height: 0.8px;
  background-color: #263672;
  top: -10%;
  left: 56%;
  opacity: 1.4251944469;
  transform: rotate(81.1425541155deg);
  animation: drop-141 4.4618978522s 0.2757618385s infinite;
}

@keyframes drop-141 {
  100% {
    top: 110%;
    left: 66%;
  }
}
.confetti-142 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 17%;
  opacity: 0.9157150235;
  transform: rotate(43.7512157493deg);
  animation: drop-142 4.5047050616s 0.6984601975s infinite;
}

@keyframes drop-142 {
  100% {
    top: 110%;
    left: 25%;
  }
}
.confetti-143 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 35%;
  opacity: 0.6133601279;
  transform: rotate(210.9282702506deg);
  animation: drop-143 4.526107378s 0.1709942603s infinite;
}

@keyframes drop-143 {
  100% {
    top: 110%;
    left: 42%;
  }
}
.confetti-144 {
  width: 7px;
  height: 2.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 91%;
  opacity: 0.8875647055;
  transform: rotate(89.3686331253deg);
  animation: drop-144 4.2920700121s 0.6014180719s infinite;
}

@keyframes drop-144 {
  100% {
    top: 110%;
    left: 96%;
  }
}
.confetti-145 {
  width: 6px;
  height: 2.4px;
  background-color: #d13447;
  top: -10%;
  left: 85%;
  opacity: 1.1056277701;
  transform: rotate(88.6173495634deg);
  animation: drop-145 4.5038971344s 0.2165519067s infinite;
}

@keyframes drop-145 {
  100% {
    top: 110%;
    left: 99%;
  }
}
.confetti-146 {
  width: 2px;
  height: 0.8px;
  background-color: #263672;
  top: -10%;
  left: 24%;
  opacity: 0.7252703231;
  transform: rotate(346.8104163795deg);
  animation: drop-146 4.4564015434s 0.7254372055s infinite;
}

@keyframes drop-146 {
  100% {
    top: 110%;
    left: 33%;
  }
}
.confetti-147 {
  width: 8px;
  height: 3.2px;
  background-color: #263672;
  top: -10%;
  left: 41%;
  opacity: 1.0839788032;
  transform: rotate(83.5564643768deg);
  animation: drop-147 4.4661750873s 0.7986663141s infinite;
}

@keyframes drop-147 {
  100% {
    top: 110%;
    left: 43%;
  }
}
.confetti-148 {
  width: 6px;
  height: 2.4px;
  background-color: #d13447;
  top: -10%;
  left: 4%;
  opacity: 1.4520447692;
  transform: rotate(357.4914988621deg);
  animation: drop-148 4.1801688506s 0.6308117541s infinite;
}

@keyframes drop-148 {
  100% {
    top: 110%;
    left: 5%;
  }
}
.confetti-149 {
  width: 4px;
  height: 1.6px;
  background-color: #d13447;
  top: -10%;
  left: 98%;
  opacity: 0.58215108;
  transform: rotate(326.0974850416deg);
  animation: drop-149 4.190344096s 0.974196528s infinite;
}

@keyframes drop-149 {
  100% {
    top: 110%;
    left: 99%;
  }
}
.confetti-150 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 56%;
  opacity: 1.3607534297;
  transform: rotate(33.4880763929deg);
  animation: drop-150 4.7985972577s 0.3050982364s infinite;
}

@keyframes drop-150 {
  100% {
    top: 110%;
    left: 59%;
  }
}
.confetti-151 {
  width: 8px;
  height: 3.2px;
  background-color: #d13447;
  top: -10%;
  left: 98%;
  opacity: 0.719038143;
  transform: rotate(14.3501937052deg);
  animation: drop-151 4.2068725869s 0.8867398382s infinite;
}

@keyframes drop-151 {
  100% {
    top: 110%;
    left: 99%;
  }
}
.confetti-152 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 52%;
  opacity: 1.0910136532;
  transform: rotate(353.7731990236deg);
  animation: drop-152 4.3523552999s 0.6702248146s infinite;
}

@keyframes drop-152 {
  100% {
    top: 110%;
    left: 57%;
  }
}
.confetti-153 {
  width: 7px;
  height: 2.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 35%;
  opacity: 0.6887745595;
  transform: rotate(6.0844857423deg);
  animation: drop-153 4.2508806398s 0.8877384935s infinite;
}

@keyframes drop-153 {
  100% {
    top: 110%;
    left: 37%;
  }
}
.confetti-154 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 74%;
  opacity: 1.1617291231;
  transform: rotate(270.149568581deg);
  animation: drop-154 4.114441395s 0.0260754518s infinite;
}

@keyframes drop-154 {
  100% {
    top: 110%;
    left: 76%;
  }
}
.confetti-155 {
  width: 6px;
  height: 2.4px;
  background-color: #d13447;
  top: -10%;
  left: 70%;
  opacity: 0.5441938215;
  transform: rotate(65.4764734966deg);
  animation: drop-155 4.4878925066s 0.8342692025s infinite;
}

@keyframes drop-155 {
  100% {
    top: 110%;
    left: 82%;
  }
}
.confetti-156 {
  width: 1px;
  height: 0.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 95%;
  opacity: 0.9471993271;
  transform: rotate(172.7052291551deg);
  animation: drop-156 4.1586321333s 0.045293907s infinite;
}

@keyframes drop-156 {
  100% {
    top: 110%;
    left: 99%;
  }
}
.confetti-157 {
  width: 6px;
  height: 2.4px;
  background-color: #d13447;
  top: -10%;
  left: 16%;
  opacity: 0.7862718726;
  transform: rotate(93.8561513455deg);
  animation: drop-157 4.5256395786s 0.9088327663s infinite;
}

@keyframes drop-157 {
  100% {
    top: 110%;
    left: 22%;
  }
}
.confetti-158 {
  width: 8px;
  height: 3.2px;
  background-color: #d13447;
  top: -10%;
  left: 3%;
  opacity: 1.158064428;
  transform: rotate(212.3695794904deg);
  animation: drop-158 4.6768141503s 0.0759611424s infinite;
}

@keyframes drop-158 {
  100% {
    top: 110%;
    left: 5%;
  }
}
.confetti-159 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 21%;
  opacity: 1.086844193;
  transform: rotate(292.0953831631deg);
  animation: drop-159 4.7073448931s 0.1904276867s infinite;
}

@keyframes drop-159 {
  100% {
    top: 110%;
    left: 30%;
  }
}
.confetti-160 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 87%;
  opacity: 0.642036241;
  transform: rotate(206.9822910176deg);
  animation: drop-160 4.9528550376s 0.3615894601s infinite;
}

@keyframes drop-160 {
  100% {
    top: 110%;
    left: 88%;
  }
}
.confetti-161 {
  width: 3px;
  height: 1.2px;
  background-color: #d13447;
  top: -10%;
  left: 3%;
  opacity: 0.7844614168;
  transform: rotate(80.7128801816deg);
  animation: drop-161 4.7264257488s 0.2630205781s infinite;
}

@keyframes drop-161 {
  100% {
    top: 110%;
    left: 15%;
  }
}
.confetti-162 {
  width: 7px;
  height: 2.8px;
  background-color: #263672;
  top: -10%;
  left: 40%;
  opacity: 1.328779267;
  transform: rotate(352.821765674deg);
  animation: drop-162 4.9083908689s 0.7039055321s infinite;
}

@keyframes drop-162 {
  100% {
    top: 110%;
    left: 51%;
  }
}
.confetti-163 {
  width: 1px;
  height: 0.4px;
  background-color: #d13447;
  top: -10%;
  left: 32%;
  opacity: 0.9234406528;
  transform: rotate(70.8306530147deg);
  animation: drop-163 4.2111583336s 0.6277016802s infinite;
}

@keyframes drop-163 {
  100% {
    top: 110%;
    left: 47%;
  }
}
.confetti-164 {
  width: 4px;
  height: 1.6px;
  background-color: #263672;
  top: -10%;
  left: 14%;
  opacity: 1.4457285113;
  transform: rotate(330.5699937941deg);
  animation: drop-164 4.8401038228s 0.2915698608s infinite;
}

@keyframes drop-164 {
  100% {
    top: 110%;
    left: 21%;
  }
}
.confetti-165 {
  width: 4px;
  height: 1.6px;
  background-color: #d13447;
  top: -10%;
  left: 14%;
  opacity: 0.9167176469;
  transform: rotate(235.4027011771deg);
  animation: drop-165 4.2257343758s 0.2579673646s infinite;
}

@keyframes drop-165 {
  100% {
    top: 110%;
    left: 16%;
  }
}
.confetti-166 {
  width: 5px;
  height: 2px;
  background-color: #263672;
  top: -10%;
  left: 65%;
  opacity: 1.3055149482;
  transform: rotate(273.8275620761deg);
  animation: drop-166 4.5070273011s 0.9203554947s infinite;
}

@keyframes drop-166 {
  100% {
    top: 110%;
    left: 75%;
  }
}
.confetti-167 {
  width: 4px;
  height: 1.6px;
  background-color: #d13447;
  top: -10%;
  left: 67%;
  opacity: 0.8372592849;
  transform: rotate(210.5847392018deg);
  animation: drop-167 4.4031060109s 0.8213518149s infinite;
}

@keyframes drop-167 {
  100% {
    top: 110%;
    left: 77%;
  }
}
.confetti-168 {
  width: 2px;
  height: 0.8px;
  background-color: #d13447;
  top: -10%;
  left: 100%;
  opacity: 0.7854663778;
  transform: rotate(285.1134755136deg);
  animation: drop-168 4.436520427s 0.7004393266s infinite;
}

@keyframes drop-168 {
  100% {
    top: 110%;
    left: 105%;
  }
}
.confetti-169 {
  width: 4px;
  height: 1.6px;
  background-color: #263672;
  top: -10%;
  left: 44%;
  opacity: 0.5399470444;
  transform: rotate(112.8149380839deg);
  animation: drop-169 4.1518410001s 0.2744374345s infinite;
}

@keyframes drop-169 {
  100% {
    top: 110%;
    left: 59%;
  }
}
.confetti-170 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 73%;
  opacity: 0.9846640501;
  transform: rotate(184.1393871935deg);
  animation: drop-170 4.8411420387s 0.7565467213s infinite;
}

@keyframes drop-170 {
  100% {
    top: 110%;
    left: 74%;
  }
}
.confetti-171 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 79%;
  opacity: 1.2609935558;
  transform: rotate(63.349789291deg);
  animation: drop-171 4.0870656578s 0.2666030609s infinite;
}

@keyframes drop-171 {
  100% {
    top: 110%;
    left: 84%;
  }
}
.confetti-172 {
  width: 7px;
  height: 2.8px;
  background-color: #263672;
  top: -10%;
  left: 25%;
  opacity: 1.3219192032;
  transform: rotate(184.5013452224deg);
  animation: drop-172 4.9256540772s 0.6980030961s infinite;
}

@keyframes drop-172 {
  100% {
    top: 110%;
    left: 30%;
  }
}
.confetti-173 {
  width: 2px;
  height: 0.8px;
  background-color: #d13447;
  top: -10%;
  left: 25%;
  opacity: 1.2708089215;
  transform: rotate(132.4749364991deg);
  animation: drop-173 4.6399494614s 0.9690925733s infinite;
}

@keyframes drop-173 {
  100% {
    top: 110%;
    left: 29%;
  }
}
.confetti-174 {
  width: 5px;
  height: 2px;
  background-color: #263672;
  top: -10%;
  left: 92%;
  opacity: 0.651926107;
  transform: rotate(301.8109603519deg);
  animation: drop-174 4.2283552016s 0.0004322169s infinite;
}

@keyframes drop-174 {
  100% {
    top: 110%;
    left: 97%;
  }
}
.confetti-175 {
  width: 8px;
  height: 3.2px;
  background-color: #263672;
  top: -10%;
  left: 67%;
  opacity: 1.1532250865;
  transform: rotate(322.7017883433deg);
  animation: drop-175 4.0336571087s 0.0979945129s infinite;
}

@keyframes drop-175 {
  100% {
    top: 110%;
    left: 82%;
  }
}
.confetti-176 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 71%;
  opacity: 1.4776753461;
  transform: rotate(31.4650929348deg);
  animation: drop-176 4.8117022842s 0.167532473s infinite;
}

@keyframes drop-176 {
  100% {
    top: 110%;
    left: 74%;
  }
}
.confetti-177 {
  width: 3px;
  height: 1.2px;
  background-color: #d13447;
  top: -10%;
  left: 21%;
  opacity: 1.3940441895;
  transform: rotate(261.4562018345deg);
  animation: drop-177 4.0869336271s 0.3513543309s infinite;
}

@keyframes drop-177 {
  100% {
    top: 110%;
    left: 24%;
  }
}
.confetti-178 {
  width: 4px;
  height: 1.6px;
  background-color: #d13447;
  top: -10%;
  left: 78%;
  opacity: 0.5606147555;
  transform: rotate(189.3226742043deg);
  animation: drop-178 4.4005791611s 0.1866883851s infinite;
}

@keyframes drop-178 {
  100% {
    top: 110%;
    left: 91%;
  }
}
.confetti-179 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 100%;
  opacity: 0.7611105132;
  transform: rotate(157.7928796144deg);
  animation: drop-179 4.6309438483s 0.5961845142s infinite;
}

@keyframes drop-179 {
  100% {
    top: 110%;
    left: 104%;
  }
}
.confetti-180 {
  width: 3px;
  height: 1.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 79%;
  opacity: 1.3694099855;
  transform: rotate(296.2329051227deg);
  animation: drop-180 4.0472314955s 0.8047774673s infinite;
}

@keyframes drop-180 {
  100% {
    top: 110%;
    left: 80%;
  }
}
.confetti-181 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 99%;
  opacity: 1.0985425932;
  transform: rotate(61.6872847065deg);
  animation: drop-181 4.0228378304s 0.2179247505s infinite;
}

@keyframes drop-181 {
  100% {
    top: 110%;
    left: 112%;
  }
}
.confetti-182 {
  width: 8px;
  height: 3.2px;
  background-color: #263672;
  top: -10%;
  left: 36%;
  opacity: 0.563606635;
  transform: rotate(19.5141434165deg);
  animation: drop-182 4.1625820782s 0.6748388095s infinite;
}

@keyframes drop-182 {
  100% {
    top: 110%;
    left: 43%;
  }
}
.confetti-183 {
  width: 1px;
  height: 0.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 17%;
  opacity: 1.1744290648;
  transform: rotate(277.153038803deg);
  animation: drop-183 4.8163614108s 0.9512390524s infinite;
}

@keyframes drop-183 {
  100% {
    top: 110%;
    left: 24%;
  }
}
.confetti-184 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 96%;
  opacity: 0.7518556297;
  transform: rotate(276.8293935024deg);
  animation: drop-184 4.4448263297s 0.9543166928s infinite;
}

@keyframes drop-184 {
  100% {
    top: 110%;
    left: 107%;
  }
}
.confetti-185 {
  width: 4px;
  height: 1.6px;
  background-color: #263672;
  top: -10%;
  left: 93%;
  opacity: 1.378437797;
  transform: rotate(170.3061268495deg);
  animation: drop-185 4.9784015876s 0.645144364s infinite;
}

@keyframes drop-185 {
  100% {
    top: 110%;
    left: 95%;
  }
}
.confetti-186 {
  width: 5px;
  height: 2px;
  background-color: #263672;
  top: -10%;
  left: 13%;
  opacity: 1.0747046259;
  transform: rotate(255.2191490081deg);
  animation: drop-186 4.0975251725s 0.6261365395s infinite;
}

@keyframes drop-186 {
  100% {
    top: 110%;
    left: 14%;
  }
}
.confetti-187 {
  width: 2px;
  height: 0.8px;
  background-color: #263672;
  top: -10%;
  left: 82%;
  opacity: 1.2123728609;
  transform: rotate(324.5511967169deg);
  animation: drop-187 4.8569245502s 0.1758014042s infinite;
}

@keyframes drop-187 {
  100% {
    top: 110%;
    left: 90%;
  }
}
.confetti-188 {
  width: 3px;
  height: 1.2px;
  background-color: #263672;
  top: -10%;
  left: 84%;
  opacity: 0.5728290429;
  transform: rotate(351.9417462436deg);
  animation: drop-188 4.4029683937s 0.5286546185s infinite;
}

@keyframes drop-188 {
  100% {
    top: 110%;
    left: 86%;
  }
}
.confetti-189 {
  width: 7px;
  height: 2.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 99%;
  opacity: 0.9910513834;
  transform: rotate(292.0050011976deg);
  animation: drop-189 4.9425916446s 0.0231935948s infinite;
}

@keyframes drop-189 {
  100% {
    top: 110%;
    left: 101%;
  }
}
.confetti-190 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 72%;
  opacity: 0.586638811;
  transform: rotate(99.6192310663deg);
  animation: drop-190 4.5566191187s 0.0403970511s infinite;
}

@keyframes drop-190 {
  100% {
    top: 110%;
    left: 77%;
  }
}
.confetti-191 {
  width: 3px;
  height: 1.2px;
  background-color: #d13447;
  top: -10%;
  left: 31%;
  opacity: 1.4682034002;
  transform: rotate(182.4507224445deg);
  animation: drop-191 4.0947481769s 0.15145244s infinite;
}

@keyframes drop-191 {
  100% {
    top: 110%;
    left: 35%;
  }
}
.confetti-192 {
  width: 8px;
  height: 3.2px;
  background-color: #d13447;
  top: -10%;
  left: 91%;
  opacity: 0.6501855485;
  transform: rotate(48.065339001deg);
  animation: drop-192 4.94043371s 0.8156761908s infinite;
}

@keyframes drop-192 {
  100% {
    top: 110%;
    left: 103%;
  }
}
.confetti-193 {
  width: 5px;
  height: 2px;
  background-color: #ffbf00;
  top: -10%;
  left: 33%;
  opacity: 0.8619392914;
  transform: rotate(15.3353666957deg);
  animation: drop-193 4.5357180431s 0.130756425s infinite;
}

@keyframes drop-193 {
  100% {
    top: 110%;
    left: 42%;
  }
}
.confetti-194 {
  width: 8px;
  height: 3.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 28%;
  opacity: 0.5752542316;
  transform: rotate(239.6284306994deg);
  animation: drop-194 4.3315604106s 0.1782047727s infinite;
}

@keyframes drop-194 {
  100% {
    top: 110%;
    left: 29%;
  }
}
.confetti-195 {
  width: 4px;
  height: 1.6px;
  background-color: #263672;
  top: -10%;
  left: 88%;
  opacity: 1.3035014745;
  transform: rotate(146.3901722725deg);
  animation: drop-195 4.9459010812s 0.5279411334s infinite;
}

@keyframes drop-195 {
  100% {
    top: 110%;
    left: 90%;
  }
}
.confetti-196 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 28%;
  opacity: 1.3282412726;
  transform: rotate(129.102050379deg);
  animation: drop-196 4.6145157263s 0.2864626324s infinite;
}

@keyframes drop-196 {
  100% {
    top: 110%;
    left: 31%;
  }
}
.confetti-197 {
  width: 2px;
  height: 0.8px;
  background-color: #d13447;
  top: -10%;
  left: 46%;
  opacity: 0.5406554931;
  transform: rotate(292.5510353449deg);
  animation: drop-197 4.3235844591s 0.1932665971s infinite;
}

@keyframes drop-197 {
  100% {
    top: 110%;
    left: 53%;
  }
}
.confetti-198 {
  width: 1px;
  height: 0.4px;
  background-color: #263672;
  top: -10%;
  left: 53%;
  opacity: 0.5049831606;
  transform: rotate(187.6692397526deg);
  animation: drop-198 4.4248426494s 0.0060491256s infinite;
}

@keyframes drop-198 {
  100% {
    top: 110%;
    left: 67%;
  }
}
.confetti-199 {
  width: 1px;
  height: 0.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 55%;
  opacity: 1.4297592581;
  transform: rotate(199.6703834081deg);
  animation: drop-199 4.6485292575s 0.2020836638s infinite;
}

@keyframes drop-199 {
  100% {
    top: 110%;
    left: 61%;
  }
}
.confetti-200 {
  width: 3px;
  height: 1.2px;
  background-color: #d13447;
  top: -10%;
  left: 82%;
  opacity: 0.8945982559;
  transform: rotate(88.2638492223deg);
  animation: drop-200 4.7401905231s 0.5784584743s infinite;
}

@keyframes drop-200 {
  100% {
    top: 110%;
    left: 86%;
  }
}
.confetti-201 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 54%;
  opacity: 0.5801692551;
  transform: rotate(12.376807157deg);
  animation: drop-201 4.3874550207s 0.6230186245s infinite;
}

@keyframes drop-201 {
  100% {
    top: 110%;
    left: 65%;
  }
}
.confetti-202 {
  width: 6px;
  height: 2.4px;
  background-color: #d13447;
  top: -10%;
  left: 4%;
  opacity: 1.1773062002;
  transform: rotate(183.2980324592deg);
  animation: drop-202 4.2151720397s 0.237171077s infinite;
}

@keyframes drop-202 {
  100% {
    top: 110%;
    left: 12%;
  }
}
.confetti-203 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 43%;
  opacity: 0.8220158921;
  transform: rotate(265.9494876263deg);
  animation: drop-203 4.042591619s 0.2113618978s infinite;
}

@keyframes drop-203 {
  100% {
    top: 110%;
    left: 58%;
  }
}
.confetti-204 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 64%;
  opacity: 1.4609181757;
  transform: rotate(297.4276345682deg);
  animation: drop-204 4.4325794514s 0.860170624s infinite;
}

@keyframes drop-204 {
  100% {
    top: 110%;
    left: 68%;
  }
}
.confetti-205 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 61%;
  opacity: 1.1199677602;
  transform: rotate(99.7001068482deg);
  animation: drop-205 4.9423183388s 0.8606281636s infinite;
}

@keyframes drop-205 {
  100% {
    top: 110%;
    left: 66%;
  }
}
.confetti-206 {
  width: 3px;
  height: 1.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 80%;
  opacity: 0.5851552117;
  transform: rotate(247.5894954778deg);
  animation: drop-206 4.4222849928s 0.8582735604s infinite;
}

@keyframes drop-206 {
  100% {
    top: 110%;
    left: 83%;
  }
}
.confetti-207 {
  width: 3px;
  height: 1.2px;
  background-color: #d13447;
  top: -10%;
  left: 57%;
  opacity: 0.7712185397;
  transform: rotate(45.694063804deg);
  animation: drop-207 4.8296193382s 0.2632627949s infinite;
}

@keyframes drop-207 {
  100% {
    top: 110%;
    left: 62%;
  }
}
.confetti-208 {
  width: 7px;
  height: 2.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 13%;
  opacity: 0.9586685534;
  transform: rotate(329.3112860341deg);
  animation: drop-208 4.0398121158s 0.9958713836s infinite;
}

@keyframes drop-208 {
  100% {
    top: 110%;
    left: 27%;
  }
}
.confetti-209 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 13%;
  opacity: 1.0723333192;
  transform: rotate(116.1912032754deg);
  animation: drop-209 4.7871744189s 0.3990889745s infinite;
}

@keyframes drop-209 {
  100% {
    top: 110%;
    left: 26%;
  }
}
.confetti-210 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 75%;
  opacity: 1.4284443959;
  transform: rotate(187.2966349693deg);
  animation: drop-210 4.0465597233s 0.7093829602s infinite;
}

@keyframes drop-210 {
  100% {
    top: 110%;
    left: 83%;
  }
}
.confetti-211 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 3%;
  opacity: 0.8306800692;
  transform: rotate(82.1225065549deg);
  animation: drop-211 4.9337684769s 0.5874273027s infinite;
}

@keyframes drop-211 {
  100% {
    top: 110%;
    left: 7%;
  }
}
.confetti-212 {
  width: 2px;
  height: 0.8px;
  background-color: #d13447;
  top: -10%;
  left: 95%;
  opacity: 1.2474124024;
  transform: rotate(287.776484288deg);
  animation: drop-212 4.2280836182s 0.4416693994s infinite;
}

@keyframes drop-212 {
  100% {
    top: 110%;
    left: 105%;
  }
}
.confetti-213 {
  width: 4px;
  height: 1.6px;
  background-color: #d13447;
  top: -10%;
  left: 68%;
  opacity: 1.2909792924;
  transform: rotate(62.6765640822deg);
  animation: drop-213 4.041121801s 0.3952217424s infinite;
}

@keyframes drop-213 {
  100% {
    top: 110%;
    left: 72%;
  }
}
.confetti-214 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 66%;
  opacity: 0.5026424035;
  transform: rotate(9.7705230336deg);
  animation: drop-214 4.3381474712s 0.1666338627s infinite;
}

@keyframes drop-214 {
  100% {
    top: 110%;
    left: 67%;
  }
}
.confetti-215 {
  width: 7px;
  height: 2.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 7%;
  opacity: 0.5269250753;
  transform: rotate(109.3025689078deg);
  animation: drop-215 4.0006478581s 0.785664002s infinite;
}

@keyframes drop-215 {
  100% {
    top: 110%;
    left: 21%;
  }
}
.confetti-216 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 74%;
  opacity: 1.0029858611;
  transform: rotate(214.3181881399deg);
  animation: drop-216 4.3004338772s 0.9314704792s infinite;
}

@keyframes drop-216 {
  100% {
    top: 110%;
    left: 80%;
  }
}
.confetti-217 {
  width: 1px;
  height: 0.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 81%;
  opacity: 1.0040491466;
  transform: rotate(354.830877751deg);
  animation: drop-217 4.6983888921s 0.6634969057s infinite;
}

@keyframes drop-217 {
  100% {
    top: 110%;
    left: 82%;
  }
}
.confetti-218 {
  width: 4px;
  height: 1.6px;
  background-color: #d13447;
  top: -10%;
  left: 92%;
  opacity: 0.7625757028;
  transform: rotate(113.1659140437deg);
  animation: drop-218 4.4347921928s 0.1449242793s infinite;
}

@keyframes drop-218 {
  100% {
    top: 110%;
    left: 98%;
  }
}
.confetti-219 {
  width: 5px;
  height: 2px;
  background-color: #ffbf00;
  top: -10%;
  left: 33%;
  opacity: 0.8788292672;
  transform: rotate(290.1294898852deg);
  animation: drop-219 4.5136297644s 0.6754956715s infinite;
}

@keyframes drop-219 {
  100% {
    top: 110%;
    left: 48%;
  }
}
.confetti-220 {
  width: 3px;
  height: 1.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 59%;
  opacity: 0.9333764751;
  transform: rotate(184.8886520109deg);
  animation: drop-220 4.4907143302s 0.5691580023s infinite;
}

@keyframes drop-220 {
  100% {
    top: 110%;
    left: 66%;
  }
}
.confetti-221 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 59%;
  opacity: 1.4035986851;
  transform: rotate(227.1655249952deg);
  animation: drop-221 4.4761879673s 0.2538331926s infinite;
}

@keyframes drop-221 {
  100% {
    top: 110%;
    left: 74%;
  }
}
.confetti-222 {
  width: 5px;
  height: 2px;
  background-color: #ffbf00;
  top: -10%;
  left: 97%;
  opacity: 0.9798319055;
  transform: rotate(327.4162027072deg);
  animation: drop-222 4.1127209683s 0.3654893133s infinite;
}

@keyframes drop-222 {
  100% {
    top: 110%;
    left: 106%;
  }
}
.confetti-223 {
  width: 7px;
  height: 2.8px;
  background-color: #d13447;
  top: -10%;
  left: 55%;
  opacity: 0.6097309912;
  transform: rotate(69.5566575064deg);
  animation: drop-223 4.8934267975s 0.8284105769s infinite;
}

@keyframes drop-223 {
  100% {
    top: 110%;
    left: 67%;
  }
}
.confetti-224 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 17%;
  opacity: 1.3593561986;
  transform: rotate(96.0053750872deg);
  animation: drop-224 4.230578895s 0.6681055865s infinite;
}

@keyframes drop-224 {
  100% {
    top: 110%;
    left: 19%;
  }
}
.confetti-225 {
  width: 8px;
  height: 3.2px;
  background-color: #263672;
  top: -10%;
  left: 79%;
  opacity: 1.1400890496;
  transform: rotate(299.5782970265deg);
  animation: drop-225 4.3555318138s 0.8922133473s infinite;
}

@keyframes drop-225 {
  100% {
    top: 110%;
    left: 86%;
  }
}
.confetti-226 {
  width: 2px;
  height: 0.8px;
  background-color: #d13447;
  top: -10%;
  left: 75%;
  opacity: 1.2703684438;
  transform: rotate(218.5126146447deg);
  animation: drop-226 4.7345244306s 0.2461822052s infinite;
}

@keyframes drop-226 {
  100% {
    top: 110%;
    left: 76%;
  }
}
.confetti-227 {
  width: 5px;
  height: 2px;
  background-color: #ffbf00;
  top: -10%;
  left: 11%;
  opacity: 1.0158846534;
  transform: rotate(201.4798028726deg);
  animation: drop-227 4.3797809278s 0.3147506186s infinite;
}

@keyframes drop-227 {
  100% {
    top: 110%;
    left: 13%;
  }
}
.confetti-228 {
  width: 7px;
  height: 2.8px;
  background-color: #263672;
  top: -10%;
  left: 27%;
  opacity: 0.8946764465;
  transform: rotate(141.7644864879deg);
  animation: drop-228 4.6826124423s 0.1776724305s infinite;
}

@keyframes drop-228 {
  100% {
    top: 110%;
    left: 32%;
  }
}
.confetti-229 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 37%;
  opacity: 1.1884970221;
  transform: rotate(176.765173014deg);
  animation: drop-229 4.6615636242s 0.1492897925s infinite;
}

@keyframes drop-229 {
  100% {
    top: 110%;
    left: 40%;
  }
}
.confetti-230 {
  width: 3px;
  height: 1.2px;
  background-color: #263672;
  top: -10%;
  left: 84%;
  opacity: 0.5676876153;
  transform: rotate(102.5785965015deg);
  animation: drop-230 4.3009075197s 0.676459891s infinite;
}

@keyframes drop-230 {
  100% {
    top: 110%;
    left: 85%;
  }
}
.confetti-231 {
  width: 4px;
  height: 1.6px;
  background-color: #263672;
  top: -10%;
  left: 20%;
  opacity: 1.3241152727;
  transform: rotate(11.5032186753deg);
  animation: drop-231 4.3460042208s 0.1768651605s infinite;
}

@keyframes drop-231 {
  100% {
    top: 110%;
    left: 33%;
  }
}
.confetti-232 {
  width: 1px;
  height: 0.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 76%;
  opacity: 1.1681719979;
  transform: rotate(220.3652852146deg);
  animation: drop-232 4.8506509026s 0.9950938949s infinite;
}

@keyframes drop-232 {
  100% {
    top: 110%;
    left: 85%;
  }
}
.confetti-233 {
  width: 3px;
  height: 1.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 19%;
  opacity: 1.2216060283;
  transform: rotate(275.6239161951deg);
  animation: drop-233 4.9793625078s 0.3415845103s infinite;
}

@keyframes drop-233 {
  100% {
    top: 110%;
    left: 25%;
  }
}
.confetti-234 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 74%;
  opacity: 0.5335181499;
  transform: rotate(84.0223568121deg);
  animation: drop-234 4.9261261118s 0.2785851994s infinite;
}

@keyframes drop-234 {
  100% {
    top: 110%;
    left: 88%;
  }
}
.confetti-235 {
  width: 1px;
  height: 0.4px;
  background-color: #263672;
  top: -10%;
  left: 20%;
  opacity: 0.945665618;
  transform: rotate(265.0918250475deg);
  animation: drop-235 4.7518762009s 0.9378810204s infinite;
}

@keyframes drop-235 {
  100% {
    top: 110%;
    left: 31%;
  }
}
.confetti-236 {
  width: 8px;
  height: 3.2px;
  background-color: #263672;
  top: -10%;
  left: 70%;
  opacity: 1.3440060787;
  transform: rotate(84.0590987836deg);
  animation: drop-236 4.3781465706s 0.5702315693s infinite;
}

@keyframes drop-236 {
  100% {
    top: 110%;
    left: 77%;
  }
}
.confetti-237 {
  width: 5px;
  height: 2px;
  background-color: #263672;
  top: -10%;
  left: 64%;
  opacity: 1.1373823261;
  transform: rotate(21.5167988492deg);
  animation: drop-237 4.9593027457s 0.8363604621s infinite;
}

@keyframes drop-237 {
  100% {
    top: 110%;
    left: 69%;
  }
}
.confetti-238 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 76%;
  opacity: 0.7250599364;
  transform: rotate(309.3878299181deg);
  animation: drop-238 4.8952558125s 0.7967741147s infinite;
}

@keyframes drop-238 {
  100% {
    top: 110%;
    left: 77%;
  }
}
.confetti-239 {
  width: 1px;
  height: 0.4px;
  background-color: #263672;
  top: -10%;
  left: 33%;
  opacity: 0.6249974992;
  transform: rotate(70.8443580961deg);
  animation: drop-239 4.1381274891s 0.0643269884s infinite;
}

@keyframes drop-239 {
  100% {
    top: 110%;
    left: 45%;
  }
}
.confetti-240 {
  width: 3px;
  height: 1.2px;
  background-color: #263672;
  top: -10%;
  left: 32%;
  opacity: 0.6811424924;
  transform: rotate(121.3140882723deg);
  animation: drop-240 4.4794297211s 0.3169995388s infinite;
}

@keyframes drop-240 {
  100% {
    top: 110%;
    left: 45%;
  }
}
.confetti-241 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 33%;
  opacity: 0.7396087648;
  transform: rotate(337.6170833243deg);
  animation: drop-241 4.619009697s 0.6598417029s infinite;
}

@keyframes drop-241 {
  100% {
    top: 110%;
    left: 44%;
  }
}
.confetti-242 {
  width: 3px;
  height: 1.2px;
  background-color: #d13447;
  top: -10%;
  left: 2%;
  opacity: 0.9182458738;
  transform: rotate(349.8388850217deg);
  animation: drop-242 4.793983049s 0.5017463162s infinite;
}

@keyframes drop-242 {
  100% {
    top: 110%;
    left: 7%;
  }
}
.confetti-243 {
  width: 7px;
  height: 2.8px;
  background-color: #263672;
  top: -10%;
  left: 74%;
  opacity: 0.9937362306;
  transform: rotate(298.2177506462deg);
  animation: drop-243 4.0778602218s 0.9276866132s infinite;
}

@keyframes drop-243 {
  100% {
    top: 110%;
    left: 75%;
  }
}
.confetti-244 {
  width: 4px;
  height: 1.6px;
  background-color: #263672;
  top: -10%;
  left: 70%;
  opacity: 1.4179748374;
  transform: rotate(32.7164048034deg);
  animation: drop-244 4.351852887s 0.5421608428s infinite;
}

@keyframes drop-244 {
  100% {
    top: 110%;
    left: 76%;
  }
}
.confetti-245 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 52%;
  opacity: 1.3229480808;
  transform: rotate(227.554833436deg);
  animation: drop-245 4.0106920374s 0.6018039733s infinite;
}

@keyframes drop-245 {
  100% {
    top: 110%;
    left: 65%;
  }
}
.confetti-246 {
  width: 7px;
  height: 2.8px;
  background-color: #263672;
  top: -10%;
  left: 86%;
  opacity: 1.2298136866;
  transform: rotate(132.0311370659deg);
  animation: drop-246 4.8784634485s 0.4871435353s infinite;
}

@keyframes drop-246 {
  100% {
    top: 110%;
    left: 101%;
  }
}
.confetti-247 {
  width: 8px;
  height: 3.2px;
  background-color: #263672;
  top: -10%;
  left: 24%;
  opacity: 1.2354963663;
  transform: rotate(295.4716610595deg);
  animation: drop-247 4.8090300543s 0.5700634308s infinite;
}

@keyframes drop-247 {
  100% {
    top: 110%;
    left: 25%;
  }
}
.confetti-248 {
  width: 7px;
  height: 2.8px;
  background-color: #263672;
  top: -10%;
  left: 48%;
  opacity: 0.9496946103;
  transform: rotate(294.3095423503deg);
  animation: drop-248 4.8296071763s 0.4210947884s infinite;
}

@keyframes drop-248 {
  100% {
    top: 110%;
    left: 57%;
  }
}
.confetti-249 {
  width: 1px;
  height: 0.4px;
  background-color: #263672;
  top: -10%;
  left: 56%;
  opacity: 0.8274074291;
  transform: rotate(147.4734465575deg);
  animation: drop-249 4.4547549053s 0.8339450394s infinite;
}

@keyframes drop-249 {
  100% {
    top: 110%;
    left: 58%;
  }
}
.confetti-250 {
  width: 3px;
  height: 1.2px;
  background-color: #d13447;
  top: -10%;
  left: 96%;
  opacity: 0.6590683905;
  transform: rotate(336.5318024989deg);
  animation: drop-250 4.7951467689s 0.1512817275s infinite;
}

@keyframes drop-250 {
  100% {
    top: 110%;
    left: 108%;
  }
}
.confetti-251 {
  width: 3px;
  height: 1.2px;
  background-color: #d13447;
  top: -10%;
  left: 6%;
  opacity: 1.2642510673;
  transform: rotate(230.2486031476deg);
  animation: drop-251 4.7122900338s 0.3278923637s infinite;
}

@keyframes drop-251 {
  100% {
    top: 110%;
    left: 10%;
  }
}
.confetti-252 {
  width: 4px;
  height: 1.6px;
  background-color: #263672;
  top: -10%;
  left: 16%;
  opacity: 1.3482016144;
  transform: rotate(79.6575026541deg);
  animation: drop-252 4.4745546138s 0.0350027305s infinite;
}

@keyframes drop-252 {
  100% {
    top: 110%;
    left: 22%;
  }
}
.confetti-253 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 71%;
  opacity: 1.3515230046;
  transform: rotate(193.0145672356deg);
  animation: drop-253 4.3493501973s 0.4900384336s infinite;
}

@keyframes drop-253 {
  100% {
    top: 110%;
    left: 81%;
  }
}
.confetti-254 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 7%;
  opacity: 1.2817836625;
  transform: rotate(43.0318184805deg);
  animation: drop-254 4.1691537248s 0.0635374687s infinite;
}

@keyframes drop-254 {
  100% {
    top: 110%;
    left: 17%;
  }
}
.confetti-255 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 25%;
  opacity: 0.5303038449;
  transform: rotate(71.5366827337deg);
  animation: drop-255 4.5307622822s 0.7879702798s infinite;
}

@keyframes drop-255 {
  100% {
    top: 110%;
    left: 39%;
  }
}
.confetti-256 {
  width: 6px;
  height: 2.4px;
  background-color: #d13447;
  top: -10%;
  left: 20%;
  opacity: 1.1061960354;
  transform: rotate(73.0157032444deg);
  animation: drop-256 4.332732593s 0.2122386738s infinite;
}

@keyframes drop-256 {
  100% {
    top: 110%;
    left: 26%;
  }
}
.confetti-257 {
  width: 6px;
  height: 2.4px;
  background-color: #d13447;
  top: -10%;
  left: 55%;
  opacity: 1.403509307;
  transform: rotate(184.0459773108deg);
  animation: drop-257 4.158653026s 0.3768414581s infinite;
}

@keyframes drop-257 {
  100% {
    top: 110%;
    left: 59%;
  }
}
.confetti-258 {
  width: 6px;
  height: 2.4px;
  background-color: #d13447;
  top: -10%;
  left: 98%;
  opacity: 1.0312575491;
  transform: rotate(311.0307364291deg);
  animation: drop-258 4.669268128s 0.6982369039s infinite;
}

@keyframes drop-258 {
  100% {
    top: 110%;
    left: 101%;
  }
}
.confetti-259 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 16%;
  opacity: 1.479144927;
  transform: rotate(93.7574776793deg);
  animation: drop-259 4.8800413052s 0.9287786966s infinite;
}

@keyframes drop-259 {
  100% {
    top: 110%;
    left: 19%;
  }
}
.confetti-260 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 89%;
  opacity: 0.7744046553;
  transform: rotate(171.7226100059deg);
  animation: drop-260 4.5849119131s 0.0424916879s infinite;
}

@keyframes drop-260 {
  100% {
    top: 110%;
    left: 102%;
  }
}
.confetti-261 {
  width: 8px;
  height: 3.2px;
  background-color: #263672;
  top: -10%;
  left: 31%;
  opacity: 0.8728818886;
  transform: rotate(253.7254152822deg);
  animation: drop-261 4.656002619s 0.0726931168s infinite;
}

@keyframes drop-261 {
  100% {
    top: 110%;
    left: 42%;
  }
}
.confetti-262 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 64%;
  opacity: 1.1154484227;
  transform: rotate(221.4796484297deg);
  animation: drop-262 4.6013166497s 0.1810542777s infinite;
}

@keyframes drop-262 {
  100% {
    top: 110%;
    left: 70%;
  }
}
.confetti-263 {
  width: 1px;
  height: 0.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 6%;
  opacity: 0.8108414636;
  transform: rotate(83.5697882127deg);
  animation: drop-263 4.1720034236s 0.4097552849s infinite;
}

@keyframes drop-263 {
  100% {
    top: 110%;
    left: 20%;
  }
}
.confetti-264 {
  width: 8px;
  height: 3.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 71%;
  opacity: 0.9731924834;
  transform: rotate(289.9050010446deg);
  animation: drop-264 4.4424035883s 0.4258250099s infinite;
}

@keyframes drop-264 {
  100% {
    top: 110%;
    left: 74%;
  }
}
.confetti-265 {
  width: 6px;
  height: 2.4px;
  background-color: #263672;
  top: -10%;
  left: 87%;
  opacity: 0.6493111005;
  transform: rotate(273.4006157793deg);
  animation: drop-265 4.5431625192s 0.9053573143s infinite;
}

@keyframes drop-265 {
  100% {
    top: 110%;
    left: 92%;
  }
}
.confetti-266 {
  width: 5px;
  height: 2px;
  background-color: #ffbf00;
  top: -10%;
  left: 21%;
  opacity: 1.2245988957;
  transform: rotate(154.5759687918deg);
  animation: drop-266 4.9537108761s 0.5125462683s infinite;
}

@keyframes drop-266 {
  100% {
    top: 110%;
    left: 35%;
  }
}
.confetti-267 {
  width: 5px;
  height: 2px;
  background-color: #ffbf00;
  top: -10%;
  left: 28%;
  opacity: 0.9470821295;
  transform: rotate(21.2999336119deg);
  animation: drop-267 4.8429889306s 0.8324329394s infinite;
}

@keyframes drop-267 {
  100% {
    top: 110%;
    left: 36%;
  }
}
.confetti-268 {
  width: 8px;
  height: 3.2px;
  background-color: #263672;
  top: -10%;
  left: 80%;
  opacity: 1.2075519636;
  transform: rotate(31.4986457904deg);
  animation: drop-268 4.30290851s 0.1305100848s infinite;
}

@keyframes drop-268 {
  100% {
    top: 110%;
    left: 81%;
  }
}
.confetti-269 {
  width: 7px;
  height: 2.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 15%;
  opacity: 0.7291409072;
  transform: rotate(188.943461694deg);
  animation: drop-269 4.0739146122s 0.733031135s infinite;
}

@keyframes drop-269 {
  100% {
    top: 110%;
    left: 29%;
  }
}
.confetti-270 {
  width: 8px;
  height: 3.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 84%;
  opacity: 1.0222856451;
  transform: rotate(4.533382147deg);
  animation: drop-270 4.4730625473s 0.4196607362s infinite;
}

@keyframes drop-270 {
  100% {
    top: 110%;
    left: 96%;
  }
}
.confetti-271 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 42%;
  opacity: 1.2462094536;
  transform: rotate(231.175437266deg);
  animation: drop-271 4.9770030481s 0.4297190886s infinite;
}

@keyframes drop-271 {
  100% {
    top: 110%;
    left: 50%;
  }
}
.confetti-272 {
  width: 7px;
  height: 2.8px;
  background-color: #263672;
  top: -10%;
  left: 22%;
  opacity: 1.2214545313;
  transform: rotate(35.6833132456deg);
  animation: drop-272 4.3463858767s 0.3348971753s infinite;
}

@keyframes drop-272 {
  100% {
    top: 110%;
    left: 28%;
  }
}
.confetti-273 {
  width: 5px;
  height: 2px;
  background-color: #ffbf00;
  top: -10%;
  left: 18%;
  opacity: 1.3477063372;
  transform: rotate(23.9866757251deg);
  animation: drop-273 4.1501111624s 0.7247699864s infinite;
}

@keyframes drop-273 {
  100% {
    top: 110%;
    left: 20%;
  }
}
.confetti-274 {
  width: 3px;
  height: 1.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 10%;
  opacity: 1.0103626382;
  transform: rotate(265.924017405deg);
  animation: drop-274 4.6488157272s 0.2603304577s infinite;
}

@keyframes drop-274 {
  100% {
    top: 110%;
    left: 17%;
  }
}
.confetti-275 {
  width: 4px;
  height: 1.6px;
  background-color: #263672;
  top: -10%;
  left: 81%;
  opacity: 0.9606350795;
  transform: rotate(176.7906837162deg);
  animation: drop-275 4.5927606917s 0.1713310346s infinite;
}

@keyframes drop-275 {
  100% {
    top: 110%;
    left: 96%;
  }
}
.confetti-276 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 93%;
  opacity: 0.9859384659;
  transform: rotate(212.5765947852deg);
  animation: drop-276 4.0967010669s 0.5708093497s infinite;
}

@keyframes drop-276 {
  100% {
    top: 110%;
    left: 98%;
  }
}
.confetti-277 {
  width: 2px;
  height: 0.8px;
  background-color: #d13447;
  top: -10%;
  left: 44%;
  opacity: 1.078166855;
  transform: rotate(226.8075485789deg);
  animation: drop-277 4.8574539111s 0.8311758471s infinite;
}

@keyframes drop-277 {
  100% {
    top: 110%;
    left: 52%;
  }
}
.confetti-278 {
  width: 7px;
  height: 2.8px;
  background-color: #263672;
  top: -10%;
  left: 2%;
  opacity: 1.4402840143;
  transform: rotate(325.3345740472deg);
  animation: drop-278 4.150779041s 0.323620137s infinite;
}

@keyframes drop-278 {
  100% {
    top: 110%;
    left: 12%;
  }
}
.confetti-279 {
  width: 5px;
  height: 2px;
  background-color: #ffbf00;
  top: -10%;
  left: 38%;
  opacity: 0.6182822444;
  transform: rotate(107.2763500998deg);
  animation: drop-279 4.5315718993s 0.1631893956s infinite;
}

@keyframes drop-279 {
  100% {
    top: 110%;
    left: 53%;
  }
}
.confetti-280 {
  width: 2px;
  height: 0.8px;
  background-color: #d13447;
  top: -10%;
  left: 41%;
  opacity: 0.8939740917;
  transform: rotate(323.0066357167deg);
  animation: drop-280 4.2092314291s 0.5775377287s infinite;
}

@keyframes drop-280 {
  100% {
    top: 110%;
    left: 50%;
  }
}
.confetti-281 {
  width: 4px;
  height: 1.6px;
  background-color: #263672;
  top: -10%;
  left: 69%;
  opacity: 0.5659612282;
  transform: rotate(56.6652870549deg);
  animation: drop-281 4.7876235145s 0.6748299699s infinite;
}

@keyframes drop-281 {
  100% {
    top: 110%;
    left: 82%;
  }
}
.confetti-282 {
  width: 3px;
  height: 1.2px;
  background-color: #263672;
  top: -10%;
  left: 9%;
  opacity: 0.5596952027;
  transform: rotate(316.48582473deg);
  animation: drop-282 4.4347388047s 0.8786116148s infinite;
}

@keyframes drop-282 {
  100% {
    top: 110%;
    left: 21%;
  }
}
.confetti-283 {
  width: 8px;
  height: 3.2px;
  background-color: #263672;
  top: -10%;
  left: 10%;
  opacity: 1.2409986497;
  transform: rotate(0.6264579738deg);
  animation: drop-283 4.8005121405s 0.2546370426s infinite;
}

@keyframes drop-283 {
  100% {
    top: 110%;
    left: 23%;
  }
}
.confetti-284 {
  width: 7px;
  height: 2.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 46%;
  opacity: 1.1383595215;
  transform: rotate(329.0770024252deg);
  animation: drop-284 4.4124622455s 0.1802685433s infinite;
}

@keyframes drop-284 {
  100% {
    top: 110%;
    left: 51%;
  }
}
.confetti-285 {
  width: 2px;
  height: 0.8px;
  background-color: #d13447;
  top: -10%;
  left: 84%;
  opacity: 1.3609285298;
  transform: rotate(331.9764409942deg);
  animation: drop-285 4.1175896484s 0.7522348588s infinite;
}

@keyframes drop-285 {
  100% {
    top: 110%;
    left: 86%;
  }
}
.confetti-286 {
  width: 1px;
  height: 0.4px;
  background-color: #d13447;
  top: -10%;
  left: 61%;
  opacity: 1.4993484426;
  transform: rotate(20.4616231713deg);
  animation: drop-286 4.7182180127s 0.3096028946s infinite;
}

@keyframes drop-286 {
  100% {
    top: 110%;
    left: 62%;
  }
}
.confetti-287 {
  width: 8px;
  height: 3.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 3%;
  opacity: 1.3737208869;
  transform: rotate(249.04741635deg);
  animation: drop-287 4.046984368s 0.0188275933s infinite;
}

@keyframes drop-287 {
  100% {
    top: 110%;
    left: 18%;
  }
}
.confetti-288 {
  width: 7px;
  height: 2.8px;
  background-color: #263672;
  top: -10%;
  left: 65%;
  opacity: 0.9441905223;
  transform: rotate(217.1347700742deg);
  animation: drop-288 4.7069190846s 0.5549316322s infinite;
}

@keyframes drop-288 {
  100% {
    top: 110%;
    left: 78%;
  }
}
.confetti-289 {
  width: 8px;
  height: 3.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 67%;
  opacity: 0.8618582695;
  transform: rotate(154.0223745636deg);
  animation: drop-289 4.610360033s 0.4274324721s infinite;
}

@keyframes drop-289 {
  100% {
    top: 110%;
    left: 69%;
  }
}
.confetti-290 {
  width: 7px;
  height: 2.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 12%;
  opacity: 0.9833320125;
  transform: rotate(274.6240146946deg);
  animation: drop-290 4.9083728573s 0.9446252615s infinite;
}

@keyframes drop-290 {
  100% {
    top: 110%;
    left: 26%;
  }
}
.confetti-291 {
  width: 8px;
  height: 3.2px;
  background-color: #263672;
  top: -10%;
  left: 61%;
  opacity: 0.5865533627;
  transform: rotate(53.6904573113deg);
  animation: drop-291 4.5580556891s 0.7718828371s infinite;
}

@keyframes drop-291 {
  100% {
    top: 110%;
    left: 70%;
  }
}
.confetti-292 {
  width: 5px;
  height: 2px;
  background-color: #263672;
  top: -10%;
  left: 31%;
  opacity: 0.742096243;
  transform: rotate(99.4080928795deg);
  animation: drop-292 4.2861606795s 0.5089980593s infinite;
}

@keyframes drop-292 {
  100% {
    top: 110%;
    left: 43%;
  }
}
.confetti-293 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 7%;
  opacity: 0.6602162595;
  transform: rotate(167.7922728147deg);
  animation: drop-293 4.2275667766s 0.088362416s infinite;
}

@keyframes drop-293 {
  100% {
    top: 110%;
    left: 22%;
  }
}
.confetti-294 {
  width: 5px;
  height: 2px;
  background-color: #d13447;
  top: -10%;
  left: 37%;
  opacity: 0.7564063915;
  transform: rotate(66.9336479394deg);
  animation: drop-294 4.0416943065s 0.1813420026s infinite;
}

@keyframes drop-294 {
  100% {
    top: 110%;
    left: 42%;
  }
}
.confetti-295 {
  width: 6px;
  height: 2.4px;
  background-color: #d13447;
  top: -10%;
  left: 49%;
  opacity: 0.7766909039;
  transform: rotate(207.3455270273deg);
  animation: drop-295 4.8496407011s 0.8911831494s infinite;
}

@keyframes drop-295 {
  100% {
    top: 110%;
    left: 51%;
  }
}
.confetti-296 {
  width: 3px;
  height: 1.2px;
  background-color: #d13447;
  top: -10%;
  left: 75%;
  opacity: 1.2519192321;
  transform: rotate(193.4595860689deg);
  animation: drop-296 4.9760695463s 0.0403595356s infinite;
}

@keyframes drop-296 {
  100% {
    top: 110%;
    left: 85%;
  }
}
.confetti-297 {
  width: 1px;
  height: 0.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 64%;
  opacity: 0.803600538;
  transform: rotate(262.0213176812deg);
  animation: drop-297 4.9095820147s 0.1868715039s infinite;
}

@keyframes drop-297 {
  100% {
    top: 110%;
    left: 79%;
  }
}
.confetti-298 {
  width: 3px;
  height: 1.2px;
  background-color: #263672;
  top: -10%;
  left: 89%;
  opacity: 1.049702323;
  transform: rotate(175.535789799deg);
  animation: drop-298 4.314344744s 0.623232305s infinite;
}

@keyframes drop-298 {
  100% {
    top: 110%;
    left: 101%;
  }
}
.confetti-299 {
  width: 3px;
  height: 1.2px;
  background-color: #d13447;
  top: -10%;
  left: 83%;
  opacity: 1.1364617269;
  transform: rotate(321.9104780185deg);
  animation: drop-299 4.7493470012s 0.8165487483s infinite;
}

@keyframes drop-299 {
  100% {
    top: 110%;
    left: 88%;
  }
}
.confetti-300 {
  width: 8px;
  height: 3.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 68%;
  opacity: 1.3361109069;
  transform: rotate(331.7206142665deg);
  animation: drop-300 4.0321059347s 0.4185558222s infinite;
}

@keyframes drop-300 {
  100% {
    top: 110%;
    left: 76%;
  }
}
#registration .form {
  width: 500px;
}

@media (max-width: 760px) {
  #registration .form {
    width: 100%;
  }
}
:root {
  --tagify-dd-color-primary: $d_purple;
  --tagify-dd-bg-color: white;
}

.tagify {
  --tags-border-color: #DDD;
  --tags-hover-border-color: #CCC;
  --tags-focus-border-color: #8267B4;
  --tag-bg: #E5E5E5;
  --tag-hover: #D3E2E2;
  --tag-text-color: black;
  --tag-text-color--edit: black;
  --tag-pad: 0.3em 0.5em;
  --tag-inset-shadow-size: 1.1em;
  --tag-invalid-color: #D39494;
  --tag-invalid-bg: rgba(211, 148, 148, 0.5);
  --tag-remove-bg: rgba(211, 148, 148, 0.3);
  --tag-remove-btn-color: black;
  --tag-remove-btn-bg: none;
  --tag-remove-btn-bg--hover: #c77777;
  --input-color: inherit;
  --tag--min-width: 1ch;
  --tag--max-width: auto;
  --tag-hide-transition: 0.3s;
  --placeholder-color: rgba(0, 0, 0, 0.4);
  --placeholder-color-focus: rgba(0, 0, 0, 0.25);
  --loader-size: .8em;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  border: 1px solid #DDD;
  border: 1px solid var(--tags-border-color);
  padding: 0;
  line-height: 1.1;
  cursor: text;
  outline: none;
  position: relative;
  box-sizing: border-box;
  transition: 0.1s;
  border: 0;
}
@keyframes tags--bump {
  30% {
    transform: scale(1.2);
  }
}
@keyframes rotateLoader {
  to {
    transform: rotate(1turn);
  }
}
.tagify:hover {
  border-color: #CCC;
  border-color: var(--tags-hover-border-color);
}
.tagify.tagify--focus {
  transition: 0s;
  border-color: #8267B4;
  border-color: var(--tags-focus-border-color);
}
.tagify[readonly]:not(.tagify--mix) {
  cursor: default;
}
.tagify[readonly]:not(.tagify--mix) > .tagify__input {
  visibility: hidden;
  width: 0;
  margin: 5px 0;
}
.tagify[readonly]:not(.tagify--mix) .tagify__tag > div {
  padding: 0.3em 0.5em;
  padding: var(--tag-pad);
}
.tagify[readonly]:not(.tagify--mix) .tagify__tag > div::before {
  background: linear-gradient(45deg, var(--tag-bg) 25%, transparent 25%, transparent 50%, var(--tag-bg) 50%, var(--tag-bg) 75%, transparent 75%, transparent) 0/5px 5px;
  box-shadow: none;
  filter: brightness(0.95);
}
.tagify[readonly] .tagify__tag__removeBtn {
  display: none;
}
.tagify--loading .tagify__input::before {
  content: none;
}
.tagify--loading .tagify__input::after {
  content: "";
  vertical-align: middle;
  opacity: 1;
  width: 0.7em;
  height: 0.7em;
  width: var(--loader-size);
  height: var(--loader-size);
  border: 3px solid;
  border-color: #EEE #BBB #888 transparent;
  border-radius: 50%;
  animation: rotateLoader 0.4s infinite linear;
  margin: -2px 0 -2px 0.5em;
}
.tagify--loading .tagify__input:empty::after {
  margin-left: 0;
}
.tagify + input,
.tagify + textarea {
  display: none !important;
}
.tagify__tag {
  display: inline-flex;
  align-items: center;
  margin: 5px 0 5px 5px;
  position: relative;
  z-index: 1;
  outline: none;
  cursor: default;
  transition: 0.13s ease-out;
}
.tagify__tag > div {
  vertical-align: top;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0.3em 0.5em;
  padding: var(--tag-pad, 0.3em 0.5em);
  color: black;
  color: var(--tag-text-color, black);
  line-height: inherit;
  border-radius: 3px;
  white-space: nowrap;
  transition: 0.13s ease-out;
}
.tagify__tag > div > * {
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: top;
  min-width: 1ch;
  max-width: auto;
  min-width: var(--tag--min-width, 1ch);
  max-width: var(--tag--max-width, auto);
  transition: 0.8s ease, 0.1s color;
}
.tagify__tag > div > *[contenteditable] {
  outline: none;
  user-select: text;
  cursor: text;
  margin: -2px;
  padding: 2px;
  max-width: 350px;
}
.tagify__tag > div::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  transition: 120ms ease;
  animation: tags--bump 0.3s ease-out 1;
  box-shadow: 0 0 0 1.1em #E5E5E5 inset;
  box-shadow: 0 0 0 var(--tag-inset-shadow-size, 1.1em) var(--tag-bg, #E5E5E5) inset;
}
.tagify__tag:hover:not([readonly]) div::before {
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  box-shadow: 0 0 0 1.1em #D3E2E2 inset;
  box-shadow: 0 0 0 var(--tag-inset-shadow-size, 1.1em) var(--tag-hover, #D3E2E2) inset;
}
.tagify__tag--loading {
  pointer-events: none;
}
.tagify__tag--loading .tagify__tag__removeBtn {
  display: none;
}
.tagify__tag--loading::after {
  --loader-size: .4em;
  content: "";
  vertical-align: middle;
  opacity: 1;
  width: 0.7em;
  height: 0.7em;
  width: var(--loader-size);
  height: var(--loader-size);
  border: 3px solid;
  border-color: #EEE #BBB #888 transparent;
  border-radius: 50%;
  animation: rotateLoader 0.4s infinite linear;
  margin: 0 0.5em 0 -0.1em;
}
.tagify__tag--flash div::before {
  animation: none;
}
.tagify__tag--hide {
  width: 0 !important;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  opacity: 0;
  transform: scale(0);
  transition: 0.3s;
  transition: var(--tag-hide-transition, 0.3s);
  pointer-events: none;
}
.tagify__tag--hide > div > * {
  white-space: nowrap;
}
.tagify__tag.tagify--noAnim > div::before {
  animation: none;
}
.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div > span {
  opacity: 0.5;
}
.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div::before {
  box-shadow: 0 0 0 1.1em rgba(211, 148, 148, 0.5) inset !important;
  box-shadow: 0 0 0 var(--tag-inset-shadow-size, 1.1em) var(--tag-invalid-bg, rgba(211, 148, 148, 0.5)) inset !important;
  transition: 0.2s;
}
.tagify__tag[readonly] .tagify__tag__removeBtn {
  display: none;
}
.tagify__tag[readonly] > div::before {
  background: linear-gradient(45deg, var(--tag-bg) 25%, transparent 25%, transparent 50%, var(--tag-bg) 50%, var(--tag-bg) 75%, transparent 75%, transparent) 0/5px 5px;
  box-shadow: none;
  filter: brightness(0.95);
}
.tagify__tag--editable > div {
  color: black;
  color: var(--tag-text-color--edit, black);
}
.tagify__tag--editable > div::before {
  box-shadow: 0 0 0 2px #D3E2E2 inset !important;
  box-shadow: 0 0 0 2px var(--tag-hover, #D3E2E2) inset !important;
}
.tagify__tag--editable > .tagify__tag__removeBtn {
  pointer-events: none;
}
.tagify__tag--editable > .tagify__tag__removeBtn::after {
  opacity: 0;
  transform: translateX(100%) translateX(5px);
}
.tagify__tag--editable.tagify--invalid > div::before {
  box-shadow: 0 0 0 2px #D39494 inset !important;
  box-shadow: 0 0 0 2px var(--tag-invalid-color, #D39494) inset !important;
}
.tagify__tag__removeBtn {
  order: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  cursor: pointer;
  font: 14px/1 Arial;
  background: none;
  background: var(--tag-remove-btn-bg, none);
  color: black;
  color: var(--tag-remove-btn-color, black);
  width: 14px;
  height: 14px;
  margin-right: 4.6666666667px;
  margin-left: -4.6666666667px;
  overflow: hidden;
  transition: 0.2s ease-out;
}
.tagify__tag__removeBtn::after {
  content: "×";
  transition: 0.3s, color 0s;
}
.tagify__tag__removeBtn:hover {
  color: white;
  background: #c77777;
  background: var(--tag-remove-btn-bg--hover, #c77777);
}
.tagify__tag__removeBtn:hover + div > span {
  opacity: 0.5;
}
.tagify__tag__removeBtn:hover + div::before {
  box-shadow: 0 0 0 1.1em rgba(211, 148, 148, 0.3) inset !important;
  box-shadow: 0 0 0 var(--tag-inset-shadow-size, 1.1em) var(--tag-remove-bg, rgba(211, 148, 148, 0.3)) inset !important;
  transition: box-shadow 0.2s;
}
.tagify:not(.tagify--mix) .tagify__input br {
  display: none;
}
.tagify:not(.tagify--mix) .tagify__input * {
  display: inline;
  white-space: nowrap;
}
.tagify__input {
  flex-grow: 1;
  display: inline-block;
  min-width: 110px;
  margin: 5px;
  padding: 0.3em 0.5em;
  padding: var(--tag-pad, 0.3em 0.5em);
  line-height: inherit;
  position: relative;
  white-space: pre-wrap;
  color: inherit;
  color: var(--input-color, inherit);
  box-sizing: inherit;
  /* Seems firefox newer versions don't need this any more
          @supports ( -moz-appearance:none ){
              &::before{
                  line-height: inherit;
                  position:relative;
              }
          }
  */
  /*
      in "mix mode" the tags are inside the "input" element
  */
}
@-moz-document url-prefix() {}
.tagify__input:empty::before {
  transition: 0.2s ease-out;
  opacity: 1;
  transform: none;
  display: inline-block;
  width: auto;
}
.tagify--mix .tagify__input:empty::before {
  display: inline-block;
}
.tagify__input:focus {
  outline: none;
}
.tagify__input:focus::before {
  transition: 0.2s ease-out;
  opacity: 0;
  transform: translatex(6px);
  /* ALL MS BROWSERS: hide placeholder (on focus) otherwise the caret is places after it, which is weird */
  /* IE10+ CSS styles go here */
  /* IE Edge 12+ CSS styles go here */
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .tagify__input:focus::before {
    display: none;
  }
}
@supports (-ms-ime-align: auto) {
  .tagify__input:focus::before {
    display: none;
  }
}
.tagify__input:focus:empty::before {
  transition: 0.2s ease-out;
  opacity: 1;
  transform: none;
  color: rgba(0, 0, 0, 0.25);
  color: var(--placeholder-color-focus);
}
@-moz-document url-prefix() {
  .tagify__input:focus:empty::after {
    display: none;
  }
}
.tagify__input::before {
  content: attr(data-placeholder);
  height: 1em;
  line-height: 1em;
  margin: auto 0;
  z-index: 1;
  color: rgba(0, 0, 0, 0.4);
  color: var(--placeholder-color);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  position: absolute;
}
.tagify--mix .tagify__input::before {
  display: none;
  position: static;
  line-height: inherit;
}
.tagify__input::after {
  content: attr(data-suggest);
  display: inline-block;
  white-space: pre;
  /* allows spaces at the beginning */
  color: black;
  opacity: 0.3;
  pointer-events: none;
  max-width: 100px;
}
.tagify__input .tagify__tag {
  margin: 0;
}
.tagify__input .tagify__tag > div {
  padding-top: 0;
  padding-bottom: 0;
}
.tagify--mix {
  display: block;
}
.tagify--mix .tagify__input {
  padding: 5px;
  margin: 0;
  width: 100%;
  height: 100%;
  line-height: 1.5;
}
.tagify--mix .tagify__input::before {
  height: auto;
}
.tagify--mix .tagify__input::after {
  content: none;
}
.tagify--select::after {
  content: ">";
  opacity: 0.5;
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  font: 16px monospace;
  line-height: 8px;
  height: 8px;
  pointer-events: none;
  transform: translate(-150%, -50%) scaleX(1.2) rotate(90deg);
  transition: 0.2s ease-in-out;
}
.tagify--select[aria-expanded=true]::after {
  transform: translate(-150%, -50%) rotate(270deg) scaleY(1.2);
}
.tagify--select .tagify__tag {
  position: absolute;
  top: 0;
  right: 1.8em;
  bottom: 0;
}
.tagify--select .tagify__tag div {
  display: none;
}
.tagify--select .tagify__input {
  width: 100%;
}
.tagify--invalid {
  --tags-border-color: #D39494;
}
.tagify__dropdown {
  position: absolute;
  z-index: 9999;
  transform: translateY(1px);
  overflow: hidden;
}
.tagify__dropdown[placement=top] {
  margin-top: 0;
  transform: translateY(-100%);
}
.tagify__dropdown[placement=top] .tagify__dropdown__wrapper {
  border-top-width: 1px;
  border-bottom-width: 0;
}
.tagify__dropdown[position=text] {
  box-shadow: 0 0 0 3px rgba(var(--tagify-dd-color-primary), 0.1);
  font-size: 0.9em;
}
.tagify__dropdown[position=text] .tagify__dropdown__wrapper {
  border-width: 1px;
}
.tagify__dropdown__wrapper {
  max-height: 300px;
  overflow: hidden;
  background: white;
  background: var(--tagify-dd-bg-color);
  border: 1px solid #8267B4;
  border-color: var(--tagify-dd-color-primary);
  border-top-width: 0;
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  transition: 0.25s cubic-bezier(0, 1, 0.5, 1);
}
.tagify__dropdown__wrapper:hover {
  overflow: auto;
}
.tagify__dropdown--initial .tagify__dropdown__wrapper {
  max-height: 20px;
  transform: translateY(-1em);
}
.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper {
  transform: translateY(2em);
}
.tagify__dropdown__item {
  box-sizing: inherit;
  padding: 0.3em 0.5em;
  margin: 1px;
  cursor: pointer;
  border-radius: 2px;
  position: relative;
  outline: none;
}
.tagify__dropdown__item--active {
  background: #8267B4;
  background: var(--tagify-dd-color-primary);
  color: white;
}
.tagify__dropdown__item:active {
  filter: brightness(105%);
}

#refer section.referral-hero {
  height: 100vh;
  max-height: 800px;
  position: relative;
}
#refer section.referral-hero .content {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-60%);
  width: 40%;
}
#refer section.referral-hero .content h2 {
  font-weight: 600;
  font-size: 3rem;
}
#refer section.referral-hero .content h2 strong {
  font-weight: 800;
  color: #35C491;
}
#refer section.referral-hero .content h3 {
  font-size: 1.6rem;
}
#refer section.referral-hero .content p {
  color: #514F4D;
  font-weight: 500;
  font-size: 1.3rem;
  text-align: left;
  vertical-align: middle;
}
#refer section.referral-hero .content p .dots {
  font-size: 60px;
  letter-spacing: 2px;
  color: #ECEDEE;
  vertical-align: middle;
  line-height: 0;
  margin-top: -4px;
  display: inline-block;
}
#refer section.referral-hero img.hand {
  position: absolute;
  height: 100%;
  right: 0;
  bottom: 0;
  transform: rotate(-10deg);
}
#refer section.referral-hero .scrolldown {
  position: absolute;
  bottom: 20px;
  left: 70px;
}

@media (max-width: 760px) {
  #refer section.referral-hero {
    min-height: 100vh;
    position: relative;
  }
  #refer section.referral-hero .content {
    position: relative;
    transform: none;
    width: 100%;
    top: 0;
    left: 0;
    padding: 20px;
  }
  #refer section.referral-hero img.hand {
    display: none;
  }
}
.modal {
  background: rgba(255, 255, 255, 0.97);
  z-index: 9999;
}
.modal .modal-content {
  background: none;
  border: 0;
  color: white;
}
.modal .modal-content.whitebg {
  background-color: white;
  color: #514F4D;
}
.modal .modal-content h1 {
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 2px;
  color: #35C491;
  font-size: 3rem;
  text-align: center;
}

@media (max-width: 1095px) {
  .modal {
    background: rgba(255, 255, 255, 0.97);
  }
  .modal .modal-content {
    background: none;
    border: 0;
    color: white;
  }
  .modal .modal-content h1 {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
    color: #35C491;
    font-size: 3rem;
    text-align: center;
  }
}
#questionnaire {
  background-color: #e0e0e0;
  padding: 50px;
}
#questionnaire #signature_handwritten {
  font-family: "Mr Dafoe", cursive;
  font-size: 25px;
  width: 100%;
  padding-left: 10px;
}
#questionnaire ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#questionnaire .form_section {
  opacity: 0.4;
  pointer-events: none;
  display: none;
}
#questionnaire .form_section.active {
  display: inherit;
  opacity: 1;
  pointer-events: auto;
}
#questionnaire .form_section .panel {
  background-color: white;
  border: 1px solid #eee;
  padding: 30px;
  margin-bottom: 40px;
  border-radius: 15px;
}
#questionnaire .form_section .panel .panel-heading {
  padding: 20px 0;
}
#questionnaire .form_section .panel .panel-heading h2 {
  font-size: 2rem;
  text-align: center;
  line-height: 1;
  margin-bottom: 20px;
}
#questionnaire .form_section .panel .panel-heading p {
  font-size: 1rem;
  text-transform: none;
  font-weight: 300;
  line-height: 1.3;
  text-align: center;
  padding: 0 30px;
}
#questionnaire .form_section .panel .panel-body h5 {
  margin: 20px 0;
  font-weight: 600;
}
#questionnaire .form_section .panel .panel-footer {
  padding-top: 30px;
}
#questionnaire .form_section .panel .panel-footer .alert-complete {
  text-align: center;
  font-size: 1.5rem;
}
#questionnaire .form_section .panel .panel-footer .alert-complete i {
  margin-right: 10px;
}
#questionnaire .yesno {
  position: relative;
  margin-bottom: 15px;
}
#questionnaire .yesno:after {
  content: "";
  position: absolute;
  left: 15px;
  top: 21px;
  border-bottom: 1px dotted #dedede;
  width: calc(100% - 30px);
  z-index: 100;
}
#questionnaire .yesno .lbl_yesno {
  position: relative;
  z-index: 101;
  background: white;
  margin-left: 0;
  max-width: calc(100% - 140px);
}
#questionnaire .yesno .lbl_yesno.gender {
  max-width: calc(100% - 200px);
}
#questionnaire .yesno .radios {
  padding-left: 10px;
  position: relative;
  z-index: 101;
  background: white;
}
#questionnaire .yesnodn {
  position: relative;
  margin-bottom: 15px;
}
#questionnaire .yesnodn:after {
  content: "";
  position: absolute;
  left: 15px;
  top: 21px;
  border-bottom: 1px dotted #dedede;
  width: calc(100% - 30px);
  z-index: 100;
}
#questionnaire .yesnodn .lbl_yesnodn {
  position: relative;
  z-index: 101;
  background: white;
  margin-left: 0;
  max-width: calc(100% - 200px);
}
#questionnaire .yesnodn .lbl_yesnodn.gender {
  max-width: calc(100% - 200px);
}
#questionnaire .yesnodn .radios {
  padding-left: 10px;
  position: relative;
  z-index: 101;
  background: white;
}
#questionnaire .lbl_weight {
  vertical-align: middle;
  margin-left: 0;
}
#questionnaire .input_weight {
  display: inline-block;
  margin-left: 20px;
  vertical-align: middle;
  margin-bottom: 10px;
}
#questionnaire .input_weight input {
  max-width: 100px;
  text-align: center;
  font-size: 30px;
  padding: 0;
  line-height: 1;
}
#questionnaire .input_weight input::placeholder {
  font-size: 20px;
}
#questionnaire .input_weight input::-webkit-outer-spin-button, #questionnaire .input_weight input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#questionnaire .textfield {
  padding: 0 15px;
}
#questionnaire .text-small {
  padding: 0 15px;
}
#questionnaire .measurement {
  padding: 0 15px;
  margin-bottom: 15px;
}
#questionnaire .measurement label {
  margin-bottom: 0;
}
@media (max-width: 1095px) {
  #questionnaire {
    padding: 10px;
  }
  #questionnaire .form_section .panel {
    padding: 10px;
  }
}
.invoice {
  background-color: #eee;
  font-size: 1.2rem;
  padding: 20px;
}
.invoice .invoice_line {
  margin-bottom: 30px;
}
.invoice .price {
  float: right;
  font-size: 1.2rem;
  font-weight: bold;
}

.payment {
  padding: 20px;
}
.payment .invoice_line {
  margin-bottom: 30px;
}

.visual-radios-container.active {
  color: white !important;
}
.visual-radios-container.active .visual-radio {
  background-color: #54565f;
  border-color: transparent;
  opacity: 1;
}
.visual-radios-container .visual-radio, .visual-radios-container .add-cc {
  vertical-align: middle;
  width: 100%;
  padding: 15px;
  border: 1px solid #eee;
  overflow: hidden;
  margin-bottom: 15px;
  border-radius: 15px;
  opacity: 0.6;
  cursor: pointer;
  transition: background 0.3s, opacity 0.3s, border-color 0.3s;
}
.visual-radios-container .visual-radio:hover, .visual-radios-container .add-cc:hover {
  opacity: 1;
  border-color: #fbfbfb;
}
.visual-radios-container .visual-radio .total, .visual-radios-container .add-cc .total {
  font-size: 30px;
  display: inline-block;
  vertical-align: middle;
  float: left;
}
.visual-radios-container .visual-radio .icon, .visual-radios-container .add-cc .icon {
  display: inline-block;
  vertical-align: middle;
  float: left;
}
.visual-radios-container .visual-radio .icon i, .visual-radios-container .add-cc .icon i {
  font-size: 41px;
  margin-top: 5px;
}
.visual-radios-container .visual-radio .details, .visual-radios-container .add-cc .details {
  display: inline-block;
  vertical-align: middle;
  float: right;
}
.visual-radios-container .visual-radio .details .title, .visual-radios-container .add-cc .details .title {
  font-weight: bold;
  font-size: 1.1rem;
}
.visual-radios-container .visual-radio .details .title.payment-detail, .visual-radios-container .add-cc .details .title.payment-detail {
  margin-top: 10px;
}
.visual-radios-container .visual-radio .details .price, .visual-radios-container .add-cc .details .price {
  float: right;
}
.visual-radios-container .add-cc {
  opacity: 1;
}
.visual-radios-container .add-cc:hover {
  background-color: #54565f;
  color: white;
  cursor: pointer;
}

/*@import "30/home-hero.scss";

@import "30/page-about.scss";
@import "30/q.scss";

@import "forms.scss";
*/
main {
  overflow: hidden;
}

#preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #514F4D;
  z-index: 10000;
}
#preloader img {
  width: 200px;
  position: fixed;
  z-index: 10001;
  top: 50%;
  left: 50%;
  transform: translate(-50% -50%);
}

#overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}

.grecaptcha-badge {
  display: none !important;
}