/**
 * Foundation for Sites
 * Version 6.7.5
 * https://get.foundation
 * Licensed under MIT Open Source
 */
/* 
 * makes ul/ol as a dropdown select (normaly in mobile)
 * Structure: div > title > list > li > a
*/
/**==================================================================================================================================
BREAKPOINT
 ==================================================================================================================================*/
/**==================================================================================================================================
BREAKPOINT ENDS
==================================================================================================================================*/
span.edit-link {
  display: inline-block;
  background-color: yellow;
  font-weight: 700;
  position: fixed;
  left: 0;
  bottom: 3.125rem;
  transform: translateX(-45px);
  transition: all 0.2s;
}

span.edit-link a {
  display: block;
  padding: 0.9375rem;
}

span.edit-link:hover {
  transform: translateX(0);
}

.block-section.hero {
  display: flex;
  width: 100%;
  min-height: 70vh;
  transform: translateY(-70px);
  position: relative;
  background-size: cover;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}

@media print, screen and (min-width: 48em) {
  .block-section.hero {
    background-position: center;
  }
}
.block-section.hero #hero-title-wrapper h1 {
  font-size: 3.125rem;
  font-weight: 600;
  line-height: 1.3;
}

@media screen and (min-width: 64em) and (max-width: 74.99875em) {
  .block-section.hero #hero-title-wrapper h1 {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.3;
  }
}
@media screen and (min-width: 48em) and (max-width: 63.99875em) {
  .block-section.hero #hero-title-wrapper h1 {
    font-size: 2.1875rem;
    font-weight: 600;
    line-height: 1.3;
  }
}
.block-section.hero #hero-title-wrapper .arrow-button {
  margin-right: 1.875rem;
}

.block-section.hero #hero-title-wrapper .arrow-button:before {
  top: 0.625rem;
}

.block-section.hero #hero-title-wrapper .arrow-button:after {
  top: 0.8125rem;
}

@media screen and (max-width: 47.99875em) {
  .block-section.hero #hero-title-wrapper {
    top: 45%;
  }

  .block-section.hero #hero-title-wrapper h1 {
    font-size: 1.875rem;
    line-height: 1.3;
  }
}
.hero-nav-wrapper {
  display: block;
  position: relative;
  margin: 0 auto;
  height: 100%;
  margin-bottom: 6.25rem;
  margin-top: -9.375rem;
}

@media screen and (max-width: 47.99875em) {
  .hero-nav-wrapper {
    margin-top: auto;
  }
}
#hero-nav {
  display: flex;
  width: 100%;
  max-width: inherit;
  height: auto;
  transition: transform 0.4s ease-in-out;
  z-index: 3;
  padding: 4% 0;
  margin-top: -13%;
}

#hero-nav .row {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  align-content: flex-start;
  justify-content: space-between;
}

#hero-nav .column {
  gap: 20px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
}

#hero-nav .hero-section {
  display: flex;
  flex-direction: column;
  padding: 2.125rem 2.75rem;
  background: rgba(26, 32, 109, 0.8);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 0.625rem;
}

#hero-nav .section-1 {
  height: 100%;
  color: #ffffff;
}

#hero-nav .section-1 nav {
  justify-content: center;
  gap: 10%;
}

#hero-nav .section-2 {
  background-color: #ff6d42;
}

#hero-nav .section-2 span {
  background-color: #1a206d;
}

#hero-nav .section-2 a:before {
  border-color: #1a206d;
}

#hero-nav .section-3 {
  height: 100%;
  color: #ffffff;
}

#hero-nav h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.9375rem;
}

#hero-nav nav {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

#hero-nav nav a {
  font-size: 1rem;
  margin-right: 2.5rem;
  text-decoration: none;
  color: inherit;
}

#hero-nav nav a span {
  background-color: #ffffff;
}

#hero-nav nav a:after {
  top: 0.8125rem;
  color: inherit;
}

#hero-nav nav a:before {
  border-color: #ffffff;
}

#hero-nav nav a:last-of-type {
  margin-right: 0;
}

@media screen and (max-width: 47.99875em) {
  #hero-nav {
    left: 0;
    padding: 1.375rem 0;
    margin-top: 0;
  }

  #hero-nav .row {
    gap: 20px;
    margin-bottom: 1.875rem;
  }

  #hero-nav .hero-section {
    width: 100%;
    padding: 1.875rem;
  }

  #hero-nav nav a::before {
    opacity: 0;
  }

  #hero-nav nav a::after {
    opacity: 0;
  }

  #hero-nav .section-1, #hero-nav .section-3 {
    background: rgba(26, 32, 109, 0.9);
  }
}
#waves {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 92.5rem;
  z-index: 1;
}

#waves.waves-inverted {
  transform: scaleX(-1);
}

#waves .wave:nth-child(1) {
  transform: translate(322px, 242px);
  transform-origin: center center;
  animation: lightwaves-1 9s infinite ease-in-out;
}

#waves .wave:nth-child(2) {
  transform: translate(416px, 242px);
  transform-origin: center center;
  animation: lightwaves-2 9s infinite ease-in-out;
}

#waves .wave:nth-child(3) {
  transform: translate(201px, 254px);
  transform-origin: center center;
  animation: lightwaves-3 9s infinite ease-in-out;
}

#waves .wave:nth-child(4) {
  transform: translate(997px, 9px);
  transform-origin: center center;
  animation: lightwaves-4 9s infinite ease-in-out;
}

#waves .wave:nth-child(5) {
  transform: translate(1092px, 8px);
  transform-origin: center center;
  animation: lightwaves-5 9s infinite ease-in-out;
}

#waves .wave:nth-child(6) {
  transform: translate(730px, 202px);
  transform-origin: center center;
  animation: lightwaves-6 9s infinite ease-in-out;
}

#waves .wave:nth-child(7) {
  transform: translate(916px, 237px);
  transform-origin: center center;
  animation: lightwaves-7 9s infinite ease-in-out;
}

#waves .wave:nth-child(8) {
  transform: translate(1069px, 69px);
  transform-origin: center center;
  animation: lightwaves-8 9s infinite ease-in-out;
}

#waves .wave:nth-child(9) {
  transform: translate(902px, 175px);
  transform-origin: center center;
  animation: lightwaves-9 9s infinite ease-in-out;
}

#waves .wave:nth-child(10) {
  transform: translate(705px, 260px);
  transform-origin: center center;
  animation: lightwaves-10 9s infinite ease-in-out;
}

#waves .wave:nth-child(11) {
  transform: translate(556px, 240px);
  transform-origin: center center;
  animation: lightwaves-11 9s infinite ease-in-out;
}

#waves .wave:nth-child(12) {
  transform: translate(1235px, 25px);
  transform-origin: center center;
  animation: lightwaves-12 9s infinite ease-in-out;
}

#waves .wave:nth-child(13) {
  transform: translate(1036px, 205px);
  transform-origin: center center;
  animation: lightwaves-13 9s infinite ease-in-out;
}

@keyframes lightwaves-1 {
  0%, 100% {
    transform: translate(322px, 242px) rotate(-0.2deg);
  }
  25% {
    transform: translate(316px, 236px) rotate(0.2deg);
  }
  50% {
    transform: translate(320px, 228px) rotate(-0.2deg);
  }
  75% {
    transform: translate(316px, 240px) rotate(0.2deg);
  }
}
@keyframes lightwaves-2 {
  0%, 100% {
    transform: translate(416px, 246px) rotate(0.12deg);
  }
  25% {
    transform: translate(410px, 250px) rotate(-0.2deg);
  }
  50% {
    transform: translate(416px, 248px) rotate(0.1deg);
  }
  75% {
    transform: translate(410px, 244px) rotate(-0.2deg);
  }
}
@keyframes lightwaves-3 {
  0%, 100% {
    transform: translate(201px, 260px) rotate(-0.7deg);
  }
  25% {
    transform: translate(220px, 270px) rotate(0.2deg);
  }
  50% {
    transform: translate(204px, 260px) rotate(-0.5deg);
  }
  75% {
    transform: translate(200px, 255px) rotate(0.2deg);
  }
}
@keyframes lightwaves-4 {
  0%, 100% {
    transform: translate(1005px, 10px) rotate(-0.225deg);
  }
  25% {
    transform: translate(1010px, 10px) rotate(-0.425deg);
  }
  50% {
    transform: translate(1005px, 15px) rotate(-0.2deg);
  }
  75% {
    transform: translate(1010px, 28px) rotate(-0.2deg);
  }
}
@keyframes lightwaves-5 {
  0%, 100% {
    transform: translate(1100px, 2px) rotate(0.2deg);
  }
  25% {
    transform: translate(1100px, 10px) rotate(-0.225deg);
  }
  50% {
    transform: translate(1120px, 8px) rotate(0.2deg);
  }
  75% {
    transform: translate(1110px, 12px) rotate(-0.425deg);
  }
}
@keyframes lightwaves-6 {
  0%, 100% {
    transform: translate(730px, 212px) rotate(0.2deg);
  }
  25% {
    transform: translate(740px, 210px) rotate(-0.2deg);
  }
  50% {
    transform: translate(730px, 212px) rotate(-0.2deg);
  }
  75% {
    transform: translate(740px, 210px) rotate(0.2deg);
  }
}
@keyframes lightwaves-7 {
  0%, 100% {
    transform: translate(916px, 237px) rotate(-0.2deg);
  }
  25% {
    transform: translate(926px, 245px) rotate(0.2deg);
  }
  50% {
    transform: translate(916px, 237px) rotate(-0.2deg);
  }
  75% {
    transform: translate(926px, 245px) rotate(0.2deg);
  }
}
@keyframes lightwaves-8 {
  0%, 100% {
    transform: translate(1069px, 69px) rotate(0.2deg);
  }
  25% {
    transform: translate(1079px, 77px) rotate(-0.2deg);
  }
  50% {
    transform: translate(1069px, 69px) rotate(0.2deg);
  }
  75% {
    transform: translate(1079px, 77px) rotate(-0.2deg);
  }
}
@keyframes lightwaves-9 {
  0%, 100% {
    transform: translate(902px, 190px) rotate(0.7deg);
  }
  25% {
    transform: translate(912px, 180px) rotate(0.8deg);
  }
  50% {
    transform: translate(902px, 185px) rotate(0.7deg);
  }
  75% {
    transform: translate(912px, 180px) rotate(0.2deg);
  }
}
@keyframes lightwaves-10 {
  0%, 100% {
    transform: translate(705px, 260px) rotate(0.2deg);
  }
  25% {
    transform: translate(718px, 268px) rotate(-0.2deg);
  }
  50% {
    transform: translate(704px, 260px) rotate(-0.2deg);
  }
  75% {
    transform: translate(710px, 268px) rotate(0.2deg);
  }
}
@keyframes lightwaves-11 {
  0%, 100% {
    transform: translate(554px, 245px) rotate(0.2deg);
  }
  25% {
    transform: translate(566px, 248px) rotate(-0.2deg);
  }
  50% {
    transform: translate(540px, 245px) rotate(-0.2deg);
  }
  75% {
    transform: translate(566px, 248px) rotate(0.2deg);
  }
}
@keyframes lightwaves-12 {
  0%, 100% {
    transform: translate(1235px, 25px) rotate(0);
  }
  25% {
    transform: translate(1245px, 33px) rotate(0);
  }
  50% {
    transform: translate(1237px, 25px) rotate(0);
  }
  75% {
    transform: translate(1242px, 33px) rotate(0);
  }
}
@keyframes lightwaves-13 {
  0%, 100% {
    transform: translate(1090px, 205px) rotate(0.1deg);
  }
  25% {
    transform: translate(1080px, 213px) rotate(-0.1deg);
  }
  50% {
    transform: translate(1090px, 205px) rotate(0.1deg);
  }
  75% {
    transform: translate(1080px, 213px) rotate(-0.1deg);
  }
}
.service-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background-color: #1a206d;
  border-radius: 10px;
  font-size: 0.875rem;
  color: #ffffff;
  padding: 2.5rem;
}

@media screen and (max-width: 47.99875em) {
  .service-message {
    width: 90%;
    top: 5rem;
    transform: translate(-50%, 0);
    font-size: 0.75rem;
  }
}
@media screen and (min-width: 48em) and (max-width: 63.99875em) {
  .service-message {
    width: 80vw;
  }
}
@media screen and (min-width: 64em) and (max-width: 74.99875em) {
  .service-message {
    width: 80vw;
  }
}
.service-message h1 {
  color: #ffffff !important;
  font-size: 2.5rem !important;
  margin-bottom: 1.25rem;
}

@media screen and (max-width: 47.99875em) {
  .service-message h1 {
    font-size: 1.5625rem !important;
  }
}
.service-message a {
  color: #ff6d42 !important;
}

.service-message--closed {
  display: none;
}

.service-message .service-message-dismiss {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1a206d;
  border: 2px solid #ff6d42;
  border-radius: 420px;
  width: 2.5rem;
  height: 2.5rem;
  right: 1.25rem;
  top: 1.25rem;
  text-decoration: none;
  transition: ease-in-out 0.3s all;
}

.service-message .service-message-dismiss .icon-cross {
  color: #ffffff;
  font-size: 1.875rem;
  line-height: 2.5rem;
}

.service-message .service-message-dismiss:hover {
  background-color: #ff6d42;
}

.service-message .service-message-dismiss:hover .icon-cross {
  color: #ffffff;
}