h2 {
  margin-top   : 20px;
  margin-bottom: 10px;
  font-size    : 32px;
  line-height  : 36px;
  font-weight  : bold;
}

.body {
  background-color: #333;
  font-family     : Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.intro {
  position               : fixed;
  top                    : 0px;
  z-index                : 100;
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  width                  : 100%;
  height                 : 100vh;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  opacity                : 1;
}

.intro-logo {
  width: 10vw;
}

.intro-wrapper {
  position               : absolute;
  z-index                : 10;
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  -webkit-box-orient     : vertical;
  -webkit-box-direction  : normal;
  -webkit-flex-direction : column;
  -ms-flex-direction     : column;
  flex-direction         : column;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  -webkit-transition     : opacity 1000ms ease-in-out;
  transition             : opacity 1000ms ease-in-out;
}

.intro-wrapper.hide {
  z-index: 5;
  opacity: 0;
}

.intro-present {
  margin-top             : 3vw;
  font-family            : Bureauveritas, sans-serif;
  color                  : #fff;
  font-size              : 1.2vw;
  line-height            : 1.2vw;
  font-weight            : 100;
  text-transform         : uppercase;
  background-clip        : border-box;
  -webkit-text-fill-color: inherit;
}

.intro-shapping {
  font-family            : Bureauveritas, sans-serif;
  color                  : #fff;
  font-size              : 2.9vw;
  line-height            : 2.7vw;
  font-weight            : 100;
  text-align             : center;
  text-transform         : uppercase;
  background-clip        : border-box;
  -webkit-text-fill-color: inherit;
}

.intro-maritime {
  margin-top             : 5px;
  font-family            : "Bureauveritas extbdultracond", sans-serif;
  color                  : #fff;
  font-size              : 5.4vw;
  line-height            : 4.8vw;
  font-weight            : 400;
  text-align             : center;
  letter-spacing         : -3.7px;
  text-transform         : uppercase;
  background-clip        : border-box;
  -webkit-text-fill-color: inherit;
}

.main {
  position               : relative;
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  width                  : 100%;
  height                 : 100vh;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  -webkit-transition     : -webkit-transform 1000ms ease;
  transition             : -webkit-transform 1000ms ease;
  transition             : transform 1000ms ease;
  transition             : transform 1000ms ease, -webkit-transform 1000ms ease;
}

.page {
  -webkit-transition: all 10000ms cubic-bezier(0.42, 0, 0.404, 1.007);
  transition        : all 10000ms cubic-bezier(0.42, 0, 0.404, 1.007);
}

.page.move {
  -webkit-transform: translate(0px, -150vh);
  -ms-transform    : translate(0px, -150vh);
  transform        : translate(0px, -150vh);
}

.logo-wrapper {
  position               : fixed;
  left                   : 5vw;
  top                    : 0px;
  z-index                : 502;
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  width                  : 7.5vw;
  height                 : 10vw;
  -webkit-box-orient     : vertical;
  -webkit-box-direction  : normal;
  -webkit-flex-direction : column;
  -ms-flex-direction     : column;
  flex-direction         : column;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  background-color       : #fff;
  text-decoration        : none !important;
  color                  : black !important;
  -webkit-transition     : -webkit-transform 1500ms ease-in-out;
  transition             : -webkit-transform 1500ms ease-in-out;
  transition             : transform 1500ms ease-in-out;
  transition             : transform 1500ms ease-in-out, -webkit-transform 1500ms ease-in-out;
}

.logo-wrapper.hide {
  -webkit-transform: translate(0px, -100%);
  -ms-transform    : translate(0px, -100%);
  transform        : translate(0px, -100%);
}

.logo {
  width        : 66%;
  margin-bottom: 0.5vw;
}

.footer {
  position               : fixed;
  bottom                 : 0px;
  z-index                : 501;
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  padding                : 0.4vw 1vw 0.35vw;
  -webkit-box-pack       : start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack          : start;
  justify-content        : flex-start;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  background-color       : #333;
  -webkit-transition     : -webkit-transform 1000ms ease-in-out;
  transition             : -webkit-transform 1000ms ease-in-out;
  transition             : transform 1000ms ease-in-out;
  transition             : transform 1000ms ease-in-out, -webkit-transform 1000ms ease-in-out;
  font-family            : "Source Sans Pro", sans-serif;
  color                  : #fff;
  font-size              : 0.8vw;
  font-weight            : 600;
}

.footer.hide {
  -webkit-transform: translate(0px, 100%);
  -ms-transform    : translate(0px, 100%);
  transform        : translate(0px, 100%);
}

.footer-text {
  color      : hsla(0, 0%, 100%, 0.6);
  font-size  : 0.8vw;
  line-height: 0.7vw;
  font-weight: 400;
}

.footer-text.sep {
  margin-right: 0.4vw;
  margin-left : 0.4vw;
  font-size   : 0.7vw;
  line-height : 1.25vw;
}

.content {
  position               : fixed;
  top                    : 0px;
  right                  : 0px;
  z-index                : 200;
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  width                  : 33.333333333333336%;
  height                 : 100vh;
  padding                : 9vw 5.5vw 4.5vw;
  -webkit-box-orient     : vertical;
  -webkit-box-direction  : normal;
  -webkit-flex-direction : column;
  -ms-flex-direction     : column;
  flex-direction         : column;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : start;
  -webkit-align-items    : flex-start;
  -ms-flex-align         : start;
  align-items            : flex-start;
  background-color       : rgba(0, 0, 0, 0.7);
  -webkit-transform      : translate(100%, 0px);
  -ms-transform          : translate(100%, 0px);
  transform              : translate(100%, 0px);
  -webkit-transition     : -webkit-transform 1000ms ease-in-out;
  transition             : -webkit-transform 1000ms ease-in-out;
  transition             : transform 1000ms ease-in-out;
  transition             : transform 1000ms ease-in-out, -webkit-transform 1000ms ease-in-out;
}

.content.open {
  -webkit-transform: translate(0%, 0px);
  -ms-transform    : translate(0%, 0px);
  transform        : translate(0%, 0px);
}

.content-title {
  margin-top    : 2vw;
  margin-bottom : 1.5vw;
  padding-top   : 0.4vw;
  font-family   : "Bureauveritas extbdultracond", sans-serif;
  color         : #fff;
  font-size     : 2.7vw;
  line-height   : 2.6vw;
  font-weight   : 400;
  text-transform: uppercase;
}

.paragraph {
  margin-bottom : 2vw;
  color         : hsla(0, 0%, 100%, 0.7);
  font-size     : 0.8vw;
  line-height   : 1.25vw;
  letter-spacing: 0.05vw;
}

.paragraph.center {
  margin-bottom: 2vw;
  font-size    : 0.8vw;
  line-height  : 1.25vw;
  text-align   : center;
}

.content-nav {
  position        : absolute;
  top             : 0px;
  right           : 0px;
  display         : -webkit-box;
  display         : -webkit-flex;
  display         : -ms-flexbox;
  display         : flex;
  background-color: #434343;
}

.close-btn {
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  width                  : 4.5vw;
  height                 : 4.5vw;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  background-color       : #434343;
  -webkit-transition     : background-color 400ms ease-in-out;
  transition             : background-color 400ms ease-in-out;
  cursor                 : pointer;
}

.close-btn:hover {
  background-color: #fb3650;
}

.close-btn.legals {
  position: fixed;
  top     : 0px;
  right   : 0px;
}

.arrow-btn {
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  width                  : 4.5vw;
  height                 : 4.5vw;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  border-right           : 1px solid hsla(0, 0%, 100%, 0.2);
  background-color       : #00b3c4;
  -webkit-transition     : background-color 400ms ease-in-out;
  transition             : background-color 400ms ease-in-out;
  cursor                 : pointer;
}

.arrow-btn:hover {
  background-color: #fb3650;
}

.prev-btn {
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  width                  : 4.5vw;
  height                 : 4.5vw;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  border-right           : 1px solid hsla(0, 0%, 100%, 0.2);
  background-color       : #00b3c4;
}

.svg-close {
  width : 0.8vw;
  height: 1vw;
}

.image-2 {
  width: 1.2vw;
}

.arrow {
  width: 1.2vw;
}

.bold-text {
  color: hsla(0, 0%, 100%, 0.6);
}

.footer-link {
  -webkit-transition: color 400ms ease-in-out;
  transition        : color 400ms ease-in-out;
  color             : #fff;
  font-size         : 0.8vw;
  line-height       : 0.7vw;
  text-decoration   : none;
}

.footer-link:hover {
  color: #fb3650;
}

.footer-link.margin-left {
  margin-left: 0.25vw;
}

.cta {
  position               : relative;
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  padding                : 1.5vw 1.5vw 1.2vw;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  border-style           : solid;
  border-width           : 1px;
  border-color           : #fb3650;
  -webkit-transition     : opacity 200ms ease, border-color 1000ms ease;
  transition             : opacity 200ms ease, border-color 1000ms ease;
  font-family            : "Bureauveritas extbdultracond", sans-serif;
  color                  : #fb3650;
  font-size              : 1vw;
  line-height            : 1vw;
  letter-spacing         : 0vw;
  text-decoration        : none;
  text-transform         : uppercase;
  cursor                 : pointer;
}

.cta:hover {
  border-color: rgba(251, 54, 80, 0);
}

.cta:active {
  opacity: 0.5;
}

.cta.hide {
  display: none;
}

.arrow-red {
  margin-left: 1.5vw;
}

.debug {
  -webkit-transform: translate(-300px, 24px) scale(2);
  -ms-transform    : translate(-300px, 24px) scale(2);
  transform        : translate(-300px, 24px) scale(2);
}

.kpi-wrapper {
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  width                  : 100%;
  margin-bottom          : 3vw;
  -webkit-box-pack       : justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack          : justify;
  justify-content        : space-between;
  -webkit-flex-wrap      : wrap;
  -ms-flex-wrap          : wrap;
  flex-wrap              : wrap;
  -webkit-box-align      : start;
  -webkit-align-items    : flex-start;
  -ms-flex-align         : start;
  align-items            : flex-start;
}

.kpi-wrapper.hide {
  display      : none;
  margin-bottom: 1vw;
}

.kpi-block {
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  min-width              : 50%;
  margin-bottom          : 1.5vw;
  -webkit-box-orient     : vertical;
  -webkit-box-direction  : normal;
  -webkit-flex-direction : column;
  -ms-flex-direction     : column;
  flex-direction         : column;
  -webkit-box-pack       : start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack          : start;
  justify-content        : flex-start;
  -webkit-box-align      : start;
  -webkit-align-items    : flex-start;
  -ms-flex-align         : start;
  align-items            : flex-start;
}

.kpi-main {
  margin-bottom          : 0.2vw;
  font-family            : "Bureauveritas extbdultracond", sans-serif;
  color                  : #fff;
  font-size              : 2.4vw;
  line-height            : 2.6vw;
  font-weight            : 400;
  white-space            : nowrap;
  background-clip        : border-box;
  -webkit-text-fill-color: inherit;
}

.kpi-text {
  max-width     : 10vw;
  font-family   : Arial, "Helvetica Neue", Helvetica, sans-serif;
  color         : hsla(0, 0%, 100%, 0.6);
  font-size     : 0.8vw;
  line-height   : 1vw;
  font-weight   : 400;
  text-transform: uppercase;
}

.bold-text-2 {
  font-size  : 1vw;
  line-height: 1vw;
}

.section-launch {
  position               : fixed;
  left                   : 0px;
  top                    : 0px;
  z-index                : 500;
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  /* display             : flex; */
  width                  : 100%;
  height                 : 100%;
  -webkit-box-orient     : vertical;
  -webkit-box-direction  : normal;
  -webkit-flex-direction : column;
  -ms-flex-direction     : column;
  flex-direction         : column;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  padding                : 10% 0;
  align-items            : center;
  background-color       : rgba(0, 0, 0, 0.7);
  -webkit-transition     : all 1500ms ease;
  transition             : all 1500ms ease;
}

.section-launch.hide {
  opacity: 0;
}

.launch-title {
  margin-top    : 0px;
  margin-bottom : 3vw;
  font-family   : "Bureauveritas extbdultracond", sans-serif;
  color         : #fff;
  font-size     : 3.4vw;
  line-height   : 3.2vw;
  text-align    : center;
  text-transform: uppercase;
}

.launch-wrapper {
  display               : -webkit-box;
  display               : -webkit-flex;
  display               : -ms-flexbox;
  display               : flex;
  width                 : 39vw;
  -webkit-box-orient    : vertical;
  -webkit-box-direction : normal;
  -webkit-flex-direction: column;
  -ms-flex-direction    : column;
  flex-direction        : column;
  -webkit-box-align     : center;
  -webkit-align-items   : center;
  -ms-flex-align        : center;
  align-items           : center;
}

.launch-paragraph {
  color     : #fff;
  text-align: center;
}

.launch-text {
  margin-bottom : 3vw;
  color         : hsla(0, 0%, 100%, 0.7);
  font-size     : 0.8vw;
  line-height   : 1.25vw;
  font-weight   : 400;
  text-align    : center;
  letter-spacing: 0.05vw;
}

.debug-cta {
  position               : absolute;
  left                   : 50vw;
  top                    : 50vh;
  z-index                : 100;
  display                : none;
  width                  : 2.5vw;
  height                 : 2.5vw;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  -webkit-transform      : translate(-50%, -50%);
  -ms-transform          : translate(-50%, -50%);
  transform              : translate(-50%, -50%);
  cursor                 : pointer;
}

.image-3 {
  position: relative;
  z-index : 1;
}

.debug-cta-center {
  width           : 0.3vw;
  height          : 0.3vw;
  border-radius   : 3vw;
  background-color: #fff;
}

.hover-info {
  position               : absolute;
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  padding                : 14px 20px 12px;
  -webkit-box-orient     : vertical;
  -webkit-box-direction  : normal;
  -webkit-flex-direction : column;
  -ms-flex-direction     : column;
  flex-direction         : column;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  background-color       : rgba(0, 0, 0, 0.7);
  -webkit-transform      : translate(-50%, -120%);
  -ms-transform          : translate(-50%, -120%);
  transform              : translate(-50%, -120%);
  -webkit-transition     : opacity 400ms ease-in-out, -webkit-transform 400ms ease;
  transition             : opacity 400ms ease-in-out, -webkit-transform 400ms ease;
  transition             : transform 400ms ease, opacity 400ms ease-in-out;
  transition             : transform 400ms ease, opacity 400ms ease-in-out,
    -webkit-transform 400ms ease;
}

.hover-info.hide {
  opacity          : 0;
  -webkit-transform: translate(-50%, -100%);
  -ms-transform    : translate(-50%, -100%);
  transform        : translate(-50%, -100%);
}

.text-block-2 {
  font-family: "Bureauveritas extbdultracond", sans-serif;
}

.hover-text {
  opacity       : 0.6;
  font-family   : "Bureauveritas extbdultracond", sans-serif;
  color         : #fff;
  font-size     : 11px;
  line-height   : 11px;
  letter-spacing: 0.021vw;
  text-transform: uppercase;
  white-space   : nowrap;
}

.hover-triangle {
  position        : absolute;
  width           : 1vw;
  height          : 1vw;
  background-color: #000;
}

.triangle {
  position         : absolute;
  bottom           : 0px;
  width            : 1.5vw;
  -webkit-transform: translate(0px, 100%);
  -ms-transform    : translate(0px, 100%);
  transform        : translate(0px, 100%);
}

.embed-canvas {
  position        : absolute;
  left            : 0px;
  top             : 0px;
  z-index         : 2;
  width           : 100%;
  height          : 100%;
  background-color: rgba(0, 0, 0, 0.1);
}

.embed-video {
  position        : relative;
  top             : 0px;
  z-index         : 0;
  width           : 100%;
  background-color: #000;
}

.btn-sound {
  position               : fixed;
  right                  : 0px;
  bottom                 : 0px;
  z-index                : 30;
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  width                  : 4vw;
  height                 : 4vw;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  background-color       : #333;
  -webkit-transition     : background-color 400ms ease-in-out,
    -webkit-transform 1000ms ease-in-out;
  transition: background-color 400ms ease-in-out,
    -webkit-transform 1000ms ease-in-out;
  transition: transform 1000ms ease-in-out, background-color 400ms ease-in-out;
  transition: transform 1000ms ease-in-out, background-color 400ms ease-in-out,
    -webkit-transform 1000ms ease-in-out;
  cursor: pointer;
}

.btn-sound:hover {
  background-color: #fb3650;
}

.btn-sound.hide {
  -webkit-transform: translate(100%, 100%);
  -ms-transform    : translate(100%, 100%);
  transform        : translate(100%, 100%);
}

.html-embed {
  width : 1.25vw;
  height: 1.25vw;
}

.btn-manifesto {
  position               : fixed;
  bottom                 : 50px;
  left                   : 0px;
  z-index                : 100;
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  height                 : 5vw;
  margin-top             : 2vw;
  margin-right           : 2vw;
  padding-right          : 1.5vw;
  padding-left           : 1.5vw;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  background-color       : #fb3650;
  -webkit-transition     : opacity 500ms ease-in-out, -webkit-transform 500ms ease;
  transition             : opacity 500ms ease-in-out, -webkit-transform 500ms ease;
  transition             : opacity 500ms ease-in-out, transform 500ms ease;
  transition             : opacity 500ms ease-in-out, transform 500ms ease,
    -webkit-transform 500ms ease;
  cursor: pointer;
}

.btn-manifesto:hover {
  -webkit-transform: scale(0.95);
  -ms-transform    : scale(0.95);
  transform        : scale(0.95);
}

.btn-manifesto.hide {
  opacity: 0;
}


.manifesto-text {
  position      : relative;
  z-index       : 1;
  margin-top    : 0.4vw;
  margin-left   : 1vw;
  font-family   : "Bureauveritas extbdultracond", sans-serif;
  color         : #fff;
  font-size     : 0.9vw;
  line-height   : 1.1vw;
  text-align    : left;
  text-transform: uppercase;
}

.intro-bkg {
  position               : relative;
  top                    : 0px;
  z-index                : 1;
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  width                  : 100%;
  height                 : 100vh;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  background-color       : #032339;
  background-image       : radial-gradient(circle farthest-side at 50% 50%,
      #96acc1,
      #517194);
}

.intro-sky {
  position               : relative;
  top                    : 0px;
  z-index                : 10;
  width                  : 100%;
  height                 : 170vh;
  margin-top             : -100vh;
  margin-bottom          : -20vh;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  background-image       : -webkit-gradient(linear,
      left top,
      left bottom,
      from(#5d7c9c),
      color-stop(47%, #6f8dad),
      color-stop(88%, #bdced1),
      color-stop(97%, #ddd4c7),
      to(rgba(131, 144, 156, 0)));
  background-image: linear-gradient(180deg,
      #5d7c9c,
      #6f8dad 47%,
      #bdced1 88%,
      #ddd4c7 97%,
      rgba(131, 144, 156, 0));
  opacity           : 1;
  -webkit-transition: opacity 3000ms ease-in-out;
  transition        : opacity 3000ms ease-in-out;
}

.intro-sky.hide {
  opacity: 0;
}

.btn-manifesto-deco {
  position          : absolute;
  left              : 0px;
  z-index           : 0;
  width             : 3vw;
  height            : 100%;
  background-color  : #fb3650;
  -webkit-transform : translate(-50%, 0px) skew(-7deg, 0deg);
  -ms-transform     : translate(-50%, 0px) skew(-7deg, 0deg);
  transform         : translate(-50%, 0px) skew(-7deg, 0deg);
  -webkit-transition: background-color 500ms ease-in-out;
  transition        : background-color 500ms ease-in-out;
}

.section-hover {
  position               : fixed;
  top                    : 0px;
  z-index                : 100;
  display                : none;
  width                  : 100%;
  height                 : 100vh;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
}

.content-form {
  position               : fixed;
  top                    : 0px;
  right                  : 0px;
  z-index                : 200;
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  width                  : 36%;
  height                 : 100vh;
  padding                : 4.5vw;
  -webkit-box-orient     : vertical;
  -webkit-box-direction  : normal;
  -webkit-flex-direction : column;
  -ms-flex-direction     : column;
  flex-direction         : column;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  background-color       : rgba(0, 0, 0, 0.7);
  -webkit-transform      : translate(100%, 0px);
  -ms-transform          : translate(100%, 0px);
  transform              : translate(100%, 0px);
  -webkit-transition     : -webkit-transform 1000ms ease-in-out;
  transition             : -webkit-transform 1000ms ease-in-out;
  transition             : transform 1000ms ease-in-out;
  transition             : transform 1000ms ease-in-out, -webkit-transform 1000ms ease-in-out;
}

.content-form.open {
  width            : 36%;
  padding          : 4.5vw;
  -webkit-transform: translate(0%, 0px);
  -ms-transform    : translate(0%, 0px);
  transform        : translate(0%, 0px);
}

.contact-btn {
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  height                 : 4.5vw;
  padding-right          : 2vw;
  padding-left           : 2vw;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  border-right           : 1px none hsla(0, 0%, 100%, 0.2);
  background-color       : #fb3650;
  -webkit-transition     : background-color 400ms ease-in-out;
  transition             : background-color 400ms ease-in-out;
  font-family            : "Bureauveritas extbdultracond", sans-serif;
  color                  : #fff;
  font-size              : 1.1vw;
  line-height            : 1.1vw;
  font-weight            : 400;
  text-decoration        : none;
  text-transform         : uppercase;
  cursor                 : pointer;
}

.contact-btn:hover {
  background-color: #00b3c4;
}

.contact-icon {
  width       : 1.4vw;
  margin-right: 1vw;
}

.text-block-3 {
  font-size  : 1vw;
  line-height: 1vw;
}

.text-block-4 {
  padding-top: 0.2vw;
  font-size  : 1vw;
  line-height: 1vw;
}
.book-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.book-title{
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.21px;
  line-height: 19px;
  font-weight: 700;
  text-align: center;
  margin: 12px 0;
}
.book{
  padding: 1vw 2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.book_one::after,.book_three::after{
  content: '';
  position: absolute;
  right: 0;
  top: 40%;
  height: 50%;
  opacity: 0.3;
  width: 1px;
  background-color: #D8D8D8;
  transform: translateY(-50%);
}
.book .book-cover{
  width: 100%;
  padding: 0 2vw;
}
.book .checkbox{
  height: 24px;
  width: 24px;
  position: relative;
}
.book .checkbox input{
  display: none;
}
.book .checkbox label{
  height: 24px;
  width: 24px;
  min-height: 24px;
  min-width: 24px;
  border: 1px solid #ffffff61;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 400ms ease-in-out, background-color 400ms ease-in-out,
  -webkit-transform 400ms ease-in-out;
}
.book .checkbox label img{
  transform: scale(0);
  transition: transform 400ms ease-in-out, background-color 400ms ease-in-out,
    -webkit-transform 400ms ease-in-out;
  pointer-events: none;
}
.book .checkbox input:checked + label{
  background-color: #fb3650;
  border-color: #fb3650;
}
.book .checkbox input:checked + label img{
  transform: scale(1);
}
.form-title {
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  margin-bottom          : 1vw;
  -webkit-box-orient     : vertical;
  -webkit-box-direction  : normal;
  -webkit-flex-direction : column;
  -ms-flex-direction     : column;
  flex-direction         : column;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  color                  : #fff;
}

.form-title-top {
  padding-top   : 0.2vw;
  font-family   : Bureauveritas, sans-serif;
  font-size     : 2vw;
  line-height   : 2vw;
  text-transform: uppercase;
}

.form-title-bottom {
  margin-bottom : 0vw;
  padding-top   : 0.1vw;
  font-family   : "Bureauveritas extbdultracond", sans-serif;
  color         : #fff;
  font-size     : 3vw;
  line-height   : 2.8vw;
  font-weight   : 400;
  text-transform: uppercase;
}

.icon-download {
  margin-right: 1vw;
}

.book {
  width        : 45%;
  font-size    : 0px;
}

.content-left {
  position               : fixed;
  left                   : 0px;
  top                    : 0px;
  z-index                : 200;
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  width                  : 33.333333333333336%;
  height                 : 100vh;
  padding                : 9vw 5.5vw 4.5vw;
  -webkit-box-orient     : vertical;
  -webkit-box-direction  : normal;
  -webkit-flex-direction : column;
  -ms-flex-direction     : column;
  flex-direction         : column;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : start;
  -webkit-align-items    : flex-start;
  -ms-flex-align         : start;
  align-items            : flex-start;
  background-color       : rgba(0, 0, 0, 0.7);
  -webkit-transform      : translate(-100%, 0px);
  -ms-transform          : translate(-100%, 0px);
  transform              : translate(-100%, 0px);
  -webkit-transition     : -webkit-transform 1000ms ease-in-out;
  transition             : -webkit-transform 1000ms ease-in-out;
  transition             : transform 1000ms ease-in-out;
  transition             : transform 1000ms ease-in-out, -webkit-transform 1000ms ease-in-out;
}

.content-left.open {
  -webkit-transform: translate(0%, 0px);
  -ms-transform    : translate(0%, 0px);
  transform        : translate(0%, 0px);
}

.section-legals {
  position               : fixed;
  left                   : 0px;
  top                    : 0px;
  z-index                : 501;
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  width                  : 100%;
  height                 : 100%;
  -webkit-box-orient     : vertical;
  -webkit-box-direction  : normal;
  -webkit-flex-direction : column;
  -ms-flex-direction     : column;
  flex-direction         : column;
  -webkit-box-pack       : start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack          : start;
  justify-content        : flex-start;
  -webkit-box-align      : center;
  -webkit-align-items    : center;
  -ms-flex-align         : center;
  align-items            : center;
  background-color       : rgba(0, 0, 0, 0.7);
  -webkit-transition     : all 1500ms ease;
  transition             : all 1500ms ease;
}

.section-legals.hide {
  opacity: 0;
}

.legals-wrapper {
  display               : -webkit-box;
  display               : -webkit-flex;
  display               : -ms-flexbox;
  display               : flex;
  width                 : 39vw;
  padding-top           : 12vw;
  -webkit-box-orient    : vertical;
  -webkit-box-direction : normal;
  -webkit-flex-direction: column;
  -ms-flex-direction    : column;
  flex-direction        : column;
  -webkit-box-align     : start;
  -webkit-align-items   : flex-start;
  -ms-flex-align        : start;
  align-items           : flex-start;
  text-align            : left;
}

.legals-text {
  margin-bottom : 4vw;
  color         : hsla(0, 0%, 100%, 0.7);
  font-size     : 1vw;
  line-height   : 1.25vw;
  font-weight   : 400;
  text-align    : left;
  letter-spacing: 0.05vw;
}

.legals-text h2 {
  margin-top    : 1vw;
  margin-bottom : 1vw;
  color         : #fb3650;
  font-size     : 1vw;
  line-height   : 2vw;
  text-transform: uppercase;
}

.logo-overtitle {
  margin-bottom : 0.5vw;
  font-family   : "Source Sans Pro", sans-serif;
  font-size     : 0.7vw;
  text-transform: uppercase;
}

.map {
  position          : absolute;
  width             : 4000px;
  height            : 2828px;
  -webkit-transform : scale(0.5);
  -ms-transform     : scale(0.5);
  transform         : scale(0.5);
  -webkit-transition: -webkit-transform 1000ms cubic-bezier(0.538, 0.001, 0.316, 0.995);
  transition        : -webkit-transform 1000ms cubic-bezier(0.538, 0.001, 0.316, 0.995);
  transition        : transform 1000ms cubic-bezier(0.538, 0.001, 0.316, 0.995);
  transition        : transform 1000ms cubic-bezier(0.538, 0.001, 0.316, 0.995),
    -webkit-transform 1000ms cubic-bezier(0.538, 0.001, 0.316, 0.995);
}

.pointarea {
  position        : absolute;
  z-index         : 10;
  width           : 100%;
  height          : 100%;
  background-color: rgba(0, 0, 0, 0.1);
}

.drag {
  position: absolute;
  width   : 4000px;
  height  : 2828px;
}

.legals-page {
  display               : -webkit-box;
  display               : -webkit-flex;
  display               : -ms-flexbox;
  display               : flex;
  width                 : 100%;
  height                : 100%;
  -webkit-box-orient    : vertical;
  -webkit-box-direction : normal;
  -webkit-flex-direction: column;
  -ms-flex-direction    : column;
  flex-direction        : column;
  -webkit-box-align     : center;
  -webkit-align-items   : center;
  -ms-flex-align        : center;
  align-items           : center;
}

.kpi-sep {
  width: 1vw;
}

.content-mobile {
  position               : fixed;
  top                    : 0px;
  right                  : 0px;
  z-index                : 200;
  display                : -webkit-box;
  display                : -webkit-flex;
  display                : -ms-flexbox;
  display                : flex;
  width                  : 33.333333333333336%;
  height                 : 100vh;
  padding                : 9vw 5.5vw 4.5vw;
  -webkit-box-orient     : vertical;
  -webkit-box-direction  : normal;
  -webkit-flex-direction : column;
  -ms-flex-direction     : column;
  flex-direction         : column;
  -webkit-box-pack       : center;
  -webkit-justify-content: center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -webkit-box-align      : start;
  -webkit-align-items    : flex-start;
  -ms-flex-align         : start;
  align-items            : flex-start;
  background-color       : rgba(0, 0, 0, 0.7);
  -webkit-transform      : translate(100%, 0px);
  -ms-transform          : translate(100%, 0px);
  transform              : translate(100%, 0px);
  -webkit-transition     : -webkit-transform 1000ms ease-in-out;
  transition             : -webkit-transform 1000ms ease-in-out;
  transition             : transform 1000ms ease-in-out;
  transition             : transform 1000ms ease-in-out, -webkit-transform 1000ms ease-in-out;
}

.content-mobile.open {
  -webkit-transform: translate(0%, 0px);
  -ms-transform    : translate(0%, 0px);
  transform        : translate(0%, 0px);
}

.manifesto-img {
  width: 3.2vw;
}

@media (orientation: portrait) {
  .intro-logo {
    width: 20vw;
  }
  .book_one::after,.book_three::after{
    display: none;
  }
  .intro-present {
    margin-top : 6vw;
    font-size  : 2.4vw;
    line-height: 2.4vw;
  }
  .wpcf7-form-control.wpcf7-submit{
    min-width: 100px;
    min-height: 46px;
  }
  .content-form{
    z-index: 503;
  }
  .intro-shapping {
    font-size  : 5.6vw;
    line-height: 5.6vw;
  }

  .intro-maritime {
    font-size  : 10vw;
    line-height: 8.5vw;
  }

  .logo-wrapper {
    z-index: 502;
    width  : 12vw;
    height : 16vw;
  }

  .footer {
    padding: 0.6vw 1.6vw 0.5vw;
  }

  .footer-text {
    font-size  : 1.5vw;
    line-height: 2vw;
  }

  .footer-text.sep {
    margin-right: 1vw;
    margin-left : 1vw;
    font-size   : 1.5vw;
  }

  .footer-text.sep.first {
    margin-right: 1vw;
    margin-left : 1vw;
    font-size   : 1.5vw;
  }

  .footer-text.copyright {
    font-size: 1.5vw;
  }

  .content {
    display: none;
  }

  .content.open {
    width : 100%;
    height: 50vh;
  }

  .content-title {
    font-size  : 5vw;
    line-height: 5vw;
  }

  .paragraph {
    font-size  : 2vw;
    line-height: 2vw;
  }

  .paragraph.center {
    font-size  : 2vw;
    line-height: 2vw;
  }

  .close-btn {
    width : 8vw;
    height: 8vw;
  }

  .arrow-btn {
    width : 8vw;
    height: 8vw;
  }

  .svg-close {
    width : 1.6vw;
    height: 3vw;
  }

  .arrow {
    width: 2.2vw;
  }

  .footer-link {
    font-size  : 1.5vw;
    line-height: 2vw;
  }

  .footer-link.margin-left {
    margin-left: 0.6vw;
  }

  .cta {
    padding    : 3vw 4vw 2.6vw;
    font-size  : 2vw;
    line-height: 2vw;
  }

  .kpi-wrapper {
    margin-top   : 5vw;
    margin-bottom: 3vw;
  }

  .kpi-main {
    margin-bottom: 1vw;
    font-size    : 4vw;
  }

  .kpi-text {
    max-width  : 25vw;
    font-size  : 1.8vw;
    line-height: 2vw;
  }

  .launch-title {
    font-size  : 7vw;
    line-height: 7vw;
  }

  .launch-wrapper {
    width: 70vw;
  }

  .launch-text {
    font-size  : 2vw;
    line-height: 3vw;
  }

  .btn-sound {
    width : 8vw;
    height: 8vw;
  }

  .html-embed {
    width : 3vw;
    height: 3vw;
  }

  .btn-manifesto {
    height       : 8vw;
    margin-right : 2vw;
    padding-right: 2vw;
    padding-left : 2vw;
  }

  .manifesto-text {
    margin-left: 1.5vw;
    font-size  : 1.6vw;
    line-height: 1.8vw;
  }

  .content-form {
    z-index                    : 500;
    width                      : 100%;
    padding-right              : 10vw;
    padding-left               : 10vw;
    opacity                    : 0;
    -webkit-transform          : translate(0%, 0px);
    -ms-transform              : translate(0%, 0px);
    transform                  : translate(0%, 0px);
    -webkit-transition-property: all;
    transition-property        : all;
  }

  .content-form.open {
    width  : 100%;
    opacity: 1;
  }

  .contact-btn {
    height       : 8vw;
    padding-right: 3vw;
    padding-left : 3vw;
  }

  .contact-icon {
    width       : 3vw;
    margin-right: 2vw;
  }

  .text-block-4 {
    padding-top: 0.6vw;
    font-size  : 2vw;
    line-height: 2vw;
    font-weight: 400;
  }

  .form-title-top {
    font-size  : 4vw;
    line-height: 4vw;
  }

  .form-title-bottom {
    font-size  : 6vw;
    line-height: 5vw;
  }

  .icon-download {
    width       : 2vw;
    margin-right: 3vw;
  }

  .book {
    width        : 45%;
    margin-top   : 2vw;
    margin-bottom: 4vw;
  }
  .content-left {
    display: none;
  }

  .legals-wrapper {
    width      : 80vw;
    padding-top: 30vw;
  }

  .legals-text {
    font-size  : 2vw;
    line-height: 3vw;
  }

  .legals-text h2 {
    font-size  : 2vw;
    line-height: 4vw;
  }

  .logo-overtitle {
    font-size: 1.1vw;
  }

  .content-mobile {
    width                      : 100%;
    padding                    : 0vw;
    background-color           : transparent;
    opacity                    : 0;
    -webkit-transform          : translate(0%, 0px);
    -ms-transform              : translate(0%, 0px);
    transform                  : translate(0%, 0px);
    -webkit-transition-property: opacity;
    transition-property        : opacity;
  }

  .content-mobile.open {
    width  : 100%;
    opacity: 1;
  }

  .content-wrapper {
    position              : absolute;
    bottom                : 0px;
    display               : -webkit-box;
    display               : -webkit-flex;
    display               : -ms-flexbox;
    display               : flex;
    overflow              : auto;
    width                 : 100%;
    height                : 60vh;
    padding               : 5vw 10vw;
    -webkit-box-orient    : vertical;
    -webkit-box-direction : normal;
    -webkit-flex-direction: column;
    -ms-flex-direction    : column;
    flex-direction        : column;
    -webkit-box-align     : start;
    -webkit-align-items   : flex-start;
    -ms-flex-align        : start;
    align-items           : flex-start;
    background-color      : rgba(0, 0, 0, 0.7);
  }

  .manifesto-img {
    width: 5vw;
  }
}

@media screen and (max-width: 479px) {
  .intro-logo {
    width: 30vw;
  }

  .intro-present {
    margin-top : 10vw;
    font-size  : 4vw;
    line-height: 4vw;
  }

  .intro-shapping {
    font-size  : 6vw;
    line-height: 6vw;
  }

  .intro-maritime {
    margin-top : 0vw;
    padding-top: 1vw;
    font-size  : 12vw;
    line-height: 10vw;
  }

  .logo-wrapper {
    width : 18vw;
    height: 24vw;
  }

  .logo {
    object-fit: contain;
    height: 70%;
  }

  .footer {
    padding: 2vw 4vw;
  }

  .footer-text {
    font-size  : 2.6vw;
    line-height: 3vw;
  }

  .footer-text.sep {
    margin-right: 2vw;
    margin-left : 2vw;
    font-size   : 2.6vw;
    line-height : 3vw;
  }

  .footer-text.sep.first {
    display: none;
  }

  .footer-text.copyright {
    display: none;
  }

  .content-title {
    font-size  : 7vw;
    line-height: 6.5vw;
  }

  .paragraph {
    font-size     : 3.2vw;
    line-height   : 4vw;
    letter-spacing: 0.2vw;
  }

  .paragraph.center {
    font-size  : 3.2vw;
    line-height: 4vw;
  }

  .close-btn {
    width : 16vw;
    height: 16vw;
  }

  .arrow-btn {
    width : 16vw;
    height: 16vw;
  }

  .svg-close {
    width: 3vw;
  }

  .arrow {
    width: 4vw;
  }

  .footer-link {
    font-size  : 2.6vw;
    line-height: 3vw;
  }

  .footer-link.margin-left {
    line-height: 3vw;
  }

  .cta {
    padding-top   : 4vw;
    padding-bottom: 3vw;
    padding-left  : 4vw;
    font-size     : 3.2vw;
    line-height   : 4vw;
  }

  .arrow-red {
    margin-left: 3vw;
  }

  .kpi-main {
    font-size  : 6vw;
    line-height: 6vw;
  }

  .kpi-text {
    max-width  : 40vw;
    font-size  : 2.4vw;
    line-height: 3vw;
  }

  .launch-title {
    margin-bottom: 5vw;
    font-size    : 10vw;
    line-height  : 10vw;
  }

  .launch-wrapper {
    width: 81vw;
  }

  .launch-text {
    margin-bottom: 8vw;
    font-size    : 3.2vw;
    line-height  : 4vw;
  }

  .btn-sound {
    width : 16vw;
    height: 16vw;
  }

  .html-embed {
    width : 5vw;
    height: 5vw;
  }

  .btn-manifesto {
    height       : 11vw;
    margin-right : 2vw;
    padding-right: 3vw;
    padding-left : 2vw;
  }

  .manifesto-text {
    margin-top : 1vw;
    margin-left: 2vw;
    font-size  : 3vw;
    line-height: 3.4vw;
  }

  .content-form {
    opacity: 0;
  }

  .content-form.open {
    opacity: 1;
  }

  .contact-btn {
    height       : 16vw;
    padding-right: 6vw;
    padding-left : 6vw;
  }

  .contact-icon {
    width       : 5vw;
    margin-right: 3vw;
  }

  .text-block-4 {
    padding-top: 1vw;
    font-size  : 3.2vw;
    line-height: 4vw;
  }

  .form-title-top {
    padding-top: 0.5vw;
    font-size  : 7vw;
    line-height: 6vw;
  }

  .form-title-bottom {
    padding-top: 1vw;
    font-size  : 9vw;
    line-height: 8vw;
  }

  .icon-download {
    width: 4vw;
  }

  .book {
    width        : 45%;
    padding: 2vw 2vw;
  }
  .book .book-cover{
    padding: 0 4vw;
  }
  .legals-wrapper {
    width: 90vw;
  }

  .legals-text {
    font-size  : 3.2vw;
    line-height: 4vw;
  }

  .legals-text h2 {
    font-size  : 3.2vw;
    line-height: 6vw;
  }

  .logo-overtitle {
    margin-bottom: 0vw;
    font-size    : 1.6vw;
  }

  .content-mobile {
    opacity                    : 0;
    -webkit-transform          : translate(0%, 0%);
    -ms-transform              : translate(0%, 0%);
    transform                  : translate(0%, 0%);
    -webkit-transition-property: opacity;
    transition-property        : opacity;
  }

  .content-mobile.open {
    height                     : 100vh;
    opacity                    : 1;
    -webkit-transition-property: opacity;
    transition-property        : opacity;
  }

  .content-wrapper {
    height       : 60vh;
    padding-right: 8vw;
    padding-left : 8vw;
  }

  .text-block-5 {
    font-size  : 3.2vw;
    line-height: 3.2vw;
  }

  .manifesto-img {
    width: 9vw;
  }

  .nav__wrapper {
    display: none;
  }
}

@font-face {
  font-family : "Bureauveritas extbdultracond";
  src         : url("../fonts/BureauVeritas-ExtBdUltraCond.woff2") format("woff2");
  font-weight : 400;
  font-style  : normal;
  font-display: swap;
}

@font-face {
  font-family : "Bureauveritas";
  src         : url("../fonts/BureauVeritas-ThinUltraCond.woff2") format("woff2");
  font-weight : 100;
  font-style  : normal;
  font-display: swap;
}

/* NAVBAR */
.nav {
  width          : 100%;
  height         : 18vh;
  overflow       : hidden;
  background-size: cover;

  position: absolute;
  top     : 0;
  left    : 0;
  padding-left: 18rem;
  display        : flex;
  align-items    : center;
  /* z-index: 501; */
  -webkit-transition: -webkit-transform 1700ms ease-in-out;
  transition        : -webkit-transform 1700ms ease-in-out;
  transition        : transform 1700ms ease-in-out;
  transition        : transform 1700ms ease-in-out, -webkit-transform 1700ms ease-in-out;
}

.nav.hide {
  -webkit-transform: translate(0px, -100%);
  -ms-transform    : translate(0px, -100%);
  transform        : translate(0px, -100%);
}

.nav__wrapper {
  width         : 56vw;
  height        : 3.1vh;
  /* font-size  : 1.4rem; */
  font-family   : "Bureauveritas extbdultracond", sans-serif;
  color         : #fff;
  font-size     : 0.9vw;
  line-height   : 1.1vw;
  text-align    : left;
  text-transform: uppercase;

  /* opacity        : 0; */
  display        : flex;
  justify-content: space-between;
  align-items    : center;

  /* margin: 5.5rem 10rem 1.9rem 33rem; */
}

.nav__link {
  display        : inline-block;
  text-decoration: none;
  color          : white;
  position       : relative;
  transition     : .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__link::after {
  content         : "";
  position        : absolute;
  bottom          : -1px;
  left            : 0;
  right           : 0;
  height          : 1px;
  background-color: white;
  transition      : all .3s cubic-bezier(0.4, 0, 0.2, 1);
  width           : 100%;
  visibility      : hidden;
}

.nav__link:hover::after {
  bottom    : -0.8rem;
  visibility: visible;
}

.nav__link__second::after {
  bottom    : -0.8rem !important;
  visibility: visible !important;
}

.nav__v {
  border-left: 1px solid rgb(255 249 249 / 7%);
  height     : 9.9px;
}

.nav__wrapper__mob {
  display: none;
}

.menu {
  width    : 100%;
  height: 0;
  position : fixed;
  top      : 0;
  left     : 0;
  z-index  : 3;

  background: black;

  padding-top       : 12.7rem;
  display        : none;
  justify-content   : center;
}

.menu__wrapper {
  width : 80%;
  margin: auto;
}
@media screen and (max-width: 1200px) {
  .nav {
    padding-left: 11rem;
  }
}
@media screen and (max-width: 800px) {
  .open.nav__mob__link{
      opacity: 1;
      transform: translateY(0);
  }
  .open.menu{
    height: 100vh;
    padding-top: 0;
  }
  .menu{
    transition: all 0.6s ease-in-out;
    z-index: 31;
    height: 0px;
    display: flex;
    padding-top: 0px ;
    overflow: hidden;
    background-image: url("../images/bgmenu.webp");
  }
  .logo-wrapper {
    width: 9vw;
    padding: 0 0.9vw;
    height: 9vw;
  }
  .nav {
    justify-content: end;
    height         : 10vh;
    padding-right  : 6px;
    z-index: 32;
  }

  .hamburg {
    background: none;
    padding   : 0;
  }
  .nav__wrapper {
    display: none;
  }

  .nav__wrapper__mob {
    display: block;
  }

  .nav__hamburger {
    width: 30px;
  }

  .nav__wrapper {
    background-color: #032339;
  }

  .nav__mob__link {
    width : 100%;
    height: 22vw;
    text-align: center;
    line-height: 1.4;
    font-family   : "Bureauveritas extbdultracond", sans-serif;
    font-size      : 3.6vw;
    text-transform : uppercase;
    color          : white;
    border-bottom  : solid .1px #ffffff3c;
    display        : flex;
    justify-content: center;
    align-items    : center;

    text-decoration: none;
  }
}