@font-face {
  font-family: Librefranklin Variablefont Wght;
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Librefranklin Variablefont Wght;
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Librefranklin Variablefont Wght;
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format("woff"), url('../fonts/LibreFranklin-VariableFont_wght.woff') format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Librefranklin Variablefont Wght;
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Librefranklin Variablefont Wght;
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Librefranklin Variablefont Wght;
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Librefranklin Variablefont Wght;
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Librefranklin Variablefont Wght;
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Librefranklin Variablefont Wght;
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --dim-gray: #5d6779;
  --width: 1728px;
  --dark-slate-gray: #262b2f;
  --light-grey: #d5d1d1;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

h1 {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 56px;
  font-weight: 700;
  line-height: 56px;
}

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

h3 {
  color: #606060;
  margin: 5px 0 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
}

h4 {
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

h5 {
  margin: 10px 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

h6 {
  margin: 10px 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

p {
  margin-top: 0;
  margin-bottom: 5px;
  font-family: Roboto Mono, sans-serif;
  line-height: 19px;
}

a {
  text-decoration: underline;
}

.navbar {
  color: #ebebeb;
  background-color: #ebebeb;
  border: 1px #000;
  border-bottom-width: 4px;
  border-radius: 0;
  width: 100%;
  min-height: 7vh;
  margin-left: 0;
  margin-right: 0;
  padding-top: 12px;
  padding-left: 0;
  display: block;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.image-2 {
  float: none;
  opacity: 1;
  object-fit: cover;
  width: auto;
  max-width: none;
  height: 5vh;
  min-height: 5vh;
  padding-top: 21px;
  position: relative;
  top: 0;
  overflow: hidden;
}

.nav {
  float: none;
  clear: none;
  color: #ebebeb;
  background-color: #ebebeb;
  border: 1px #fff;
  border-bottom: 1px solid #2b2b2b;
  justify-content: flex-start;
  align-items: baseline;
  width: auto;
  min-width: 92%;
  max-width: 97%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 10px;
  font-family: franklin-gothic-urw, sans-serif;
  display: flex;
  position: relative;
  left: 0;
  overflow: visible;
}

.button-2 {
  float: right;
  color: #5b646b;
  background-color: #fff0;
  width: 100px;
  padding-top: 36px;
  padding-left: 0;
  padding-right: 0;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  line-height: 0;
  position: static;
  overflow: hidden;
}

.body {
  float: none;
  clear: right;
  color: #ebebeb;
  text-align: center;
  object-fit: fill;
  background-color: #e3e3e3;
  flex-direction: row;
  align-items: stretch;
  display: block;
  overflow: visible;
}

.body-2 {
  background-color: #404040;
}

.footer {
  clear: none;
  text-align: center;
  background-color: #202123;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  max-height: 200px;
  display: flex;
  position: absolute;
  inset: 100% auto 0% 0%;
}

.bold-black {
  z-index: 3;
  color: #606060;
  text-align: left;
  max-width: 80%;
  padding-top: 0;
  padding-left: 0;
  font-family: Roboto, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 28px;
  position: relative;
  top: 0;
  left: 0;
}

.container-9 {
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
}

.header1 {
  color: #e5e5e5;
  background-color: #0000;
  background-image: url('../images/form_useOtk.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 960px;
  width: 100vw;
  height: 80vh;
  padding-top: 200px;
  display: block;
  position: static;
}

.header1.intro {
  color: #eee;
  background-color: #ebebeb;
  background-image: none;
  width: 90vw;
  height: 90vh;
  max-height: 90vh;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  display: block;
}

.body-3 {
  background-color: #ebebeb;
}

.navbar-black {
  color: #ebebeb;
  background-color: #414141;
  width: 100%;
  min-height: 7vh;
  margin-left: 0;
  margin-right: 0;
  padding-top: 12px;
  padding-left: 0;
  display: block;
}

.container-black {
  float: none;
  clear: none;
  color: #ebebeb;
  background-color: #414141;
  border: 1px #fff;
  min-width: 90%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  left: 0;
  overflow: visible;
}

.button-black {
  float: right;
  color: #fff;
  text-align: center;
  background-color: #fff0;
  width: 100px;
  padding-top: 36px;
  padding-left: 0;
  padding-right: 0;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  line-height: 0;
  position: static;
  overflow: hidden;
}

.comment-kleur {
  color: var(--dim-gray);
  max-width: 300px;
  padding-top: 0;
  font-family: Roboto Mono, sans-serif;
}

.magenta {
  color: #ff48ff;
}

.lightblue {
  color: #92a4ef;
}

.neutralgrey {
  color: #a4a4a4;
}

.bold-white {
  color: #e5e5e5;
  text-align: left;
  padding-top: 0;
  padding-bottom: 3px;
  font-family: Roboto, sans-serif;
  font-size: 22px;
  font-weight: 700;
}

.bold-white.listitem2 {
  margin-top: 10px;
}

.grey {
  color: #e5e5e5;
  background-color: #252424;
  background-image: none;
  background-position: 0 0;
  background-repeat: repeat;
  background-size: auto;
  background-attachment: scroll;
  width: 100vw;
  height: 80vh;
  padding-top: 0;
  display: block;
  position: static;
}

.bold-white-subtitle {
  color: #fff;
  background-color: #0000;
  padding-bottom: 40px;
  font-size: 18px;
  font-weight: 700;
}

.nominationcategory {
  color: #cfcfcf;
  font-size: 14px;
  font-weight: 100;
  text-decoration: none;
}

.nomination-name {
  color: #bbb;
  font-size: 16px;
  font-weight: 400;
}

.container-13 {
  background-color: #1e1e1e;
  padding-left: 0;
  display: block;
}

.image-5 {
  z-index: 0;
  width: 75%;
  height: 75%;
  position: relative;
  inset: 0% 0% auto 0;
}

.paragraph-white {
  float: none;
  opacity: 1;
  color: #9ca2b9;
  text-align: right;
  width: auto;
  margin-top: 0;
  margin-bottom: 10px;
  font-family: Roboto Mono, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
  position: relative;
}

.div-block-11 {
  text-align: center;
  width: 80%;
}

.section-new {
  clear: both;
  -webkit-text-fill-color: inherit;
  object-fit: fill;
  background-color: #ebebeb;
  background-image: url('../images/BG1x.png');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: scroll;
  background-clip: border-box;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 80vh;
  margin-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  display: block;
  position: relative;
  left: auto;
}

.section-new.fullwidth2 {
  float: left;
  clear: none;
  object-fit: fill;
  object-position: 50% 50%;
  background-color: #fafafa;
  background-image: none;
  flex-wrap: nowrap;
  flex: 0 auto;
  justify-content: center;
  width: 100%;
  height: auto;
  margin-left: 0;
  display: flex;
  position: static;
}

.section3 {
  clear: both;
  -webkit-text-fill-color: inherit;
  object-fit: fill;
  background-color: #ebebeb;
  background-image: url('../images/BG1x.png');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: scroll;
  background-clip: border-box;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 80vh;
  margin-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  display: block;
  position: relative;
  left: auto;
}

.section3.lottie {
  background-color: #c1c0c0;
  height: auto;
}

.sectionfari {
  clear: both;
  -webkit-text-fill-color: inherit;
  object-fit: fill;
  background-color: #1f1f1f;
  background-clip: border-box;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 80vh;
  margin-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  display: block;
  position: relative;
  left: auto;
}

.sectionfari.fullwidth1 {
  float: none;
  clear: none;
  object-fit: fill;
  object-position: 50% 50%;
  background-color: #ebebeb;
  background-image: url('../images/Rectangle-12.svg'), radial-gradient(circle at 100% 100%, #ebebeb 9%, #9b48a8);
  background-position: 0 0, 0 0;
  background-size: auto, auto;
  border: 15px solid #fff;
  flex-flow: row;
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100vw;
  height: 75vh;
  max-height: 75vh;
  margin-left: 0;
  display: flex;
  position: static;
}

.lottie-animation {
  background-color: #c2c1c1;
}

.background-video {
  z-index: 1;
  background-color: #e3e3e300;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  margin-top: 0;
  margin-left: 0;
  padding-top: 0;
  font-family: franklin-gothic-urw, sans-serif;
  display: block;
  position: absolute;
  inset: 0% 0% auto;
  overflow: hidden;
}

.boldwhite {
  z-index: 3;
  float: left;
  clear: none;
  color: #fff;
  text-align: left;
  object-fit: fill;
  width: 400px;
  max-width: 100%;
  margin-top: 98px;
  margin-bottom: 10px;
  padding-top: 0;
  padding-left: 0;
  font-family: Roboto, sans-serif;
  font-size: 32px;
  font-weight: 900;
  line-height: 28px;
  position: relative;
  top: 0;
  bottom: -1px;
  left: 0;
}

.hellocontent {
  max-width: 85%;
  margin-top: 49px;
}

.baseline {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  text-align: left;
  object-fit: fill;
  flex: 0 auto;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-self: flex-end;
  align-items: flex-start;
  max-width: 60%;
  height: auto;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  display: block;
  position: relative;
  top: 0;
  left: 75px;
}

.archcontent {
  max-width: 100%;
}

.archpic {
  padding-left: 0;
  left: 30px;
}

.textwhite {
  clear: left;
  text-align: left;
  letter-spacing: -.02em;
  font-family: Roboto Mono, sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.sectionarch2 {
  clear: both;
  -webkit-text-fill-color: inherit;
  object-fit: fill;
  background-color: #1f1f1f;
  background-clip: border-box;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 80vh;
  margin-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  display: flex;
  position: static;
  left: auto;
}

.sectionarch2.fullwidth1 {
  float: left;
  clear: none;
  opacity: 1;
  object-fit: fill;
  object-position: 50% 50%;
  background-color: #1e1e1e;
  background-image: url('../images/bgpng.png');
  background-position: 0 0;
  flex-flow: row;
  flex: none;
  justify-content: center;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  margin-left: 0;
  display: flex;
  position: static;
}

.descriptionblack {
  padding-right: 0;
  top: 50px;
  left: -120px;
}

.metronomcontent {
  float: none;
  text-align: center;
  width: 85%;
  max-width: 90%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 40px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  inset: -34px 0% 0% 6px;
}

.bold-black-left {
  z-index: 3;
  color: #606060;
  text-align: left;
  column-count: 0;
  white-space: nowrap;
  max-width: 100%;
  margin-top: 40px;
  margin-bottom: 10px;
  padding-top: 0;
  padding-left: 30px;
  padding-right: 0;
  font-family: Roboto, sans-serif;
  font-size: 32px;
  font-weight: 900;
  line-height: 32px;
  position: relative;
  top: 0;
  left: 0;
}

.textblack-left {
  clear: left;
  color: #727272;
  text-align: left;
  letter-spacing: -.02em;
  text-indent: -2px;
  padding-left: 30px;
  font-family: Roboto Mono, sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.textblack-roles-left {
  clear: none;
  color: #a0a0a0;
  text-align: left;
  margin-top: 4px;
  padding-left: 30px;
  font-family: Roboto Mono, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.column-10 {
  z-index: 1;
  margin-top: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  top: 120px;
  left: 75px;
}

.lottie-animation-2 {
  width: 525px;
  height: auto;
  padding-top: 0;
}

.textblackwhite-roles-right {
  clear: none;
  color: #5e5e5e;
  text-align: left;
  margin-top: 9px;
  font-family: Roboto Mono, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.fakecaroussel {
  background-color: #bd006b;
  background-image: linear-gradient(353deg, #e79600 15%, #ffea00 100%, #fff 100%, #ffd586);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 60vh;
  max-height: 60vh;
  display: flex;
}

.secondarycontent {
  align-self: center;
  width: 100%;
  height: 200px;
}

.colmumn-images {
  justify-content: center;
  align-items: center;
  max-height: 90px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

.image-7 {
  margin-right: -64px;
  display: inline-block;
}

.bold-black-right {
  z-index: 3;
  color: #606060;
  text-align: left;
  max-width: 100%;
  margin-top: 110px;
  margin-bottom: 10px;
  padding-top: 0;
  padding-left: 0;
  font-family: Roboto, sans-serif;
  font-size: 32px;
  font-weight: 900;
  line-height: 32px;
  position: relative;
  top: 0;
  left: 0;
}

.baseline-black {
  object-fit: fill;
  flex-direction: column;
  order: 0;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-self: auto;
  max-width: 50%;
  margin-top: 0;
  font-family: Roboto, sans-serif;
  display: flex;
  position: relative;
  top: 121px;
  bottom: 51px;
  left: 213px;
}

.txtcolor {
  object-fit: fill;
  max-width: 50%;
  margin-top: 10px;
  position: relative;
  top: 153px;
  bottom: 51px;
  left: 213px;
}

.nomination {
  color: #5d5d5d;
  position: relative;
}

.section-2 {
  color: #824d4d;
  background-color: #1f1e1e;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 75vh;
  display: flex;
}

.nominationdate {
  color: #646464;
  font-weight: 300;
}

.nominationblock {
  clear: none;
  width: 100%;
  margin-bottom: 0;
  text-decoration: none;
}

.vimeogogo {
  background-color: #0000;
  margin-bottom: 26px;
  padding-top: 3px;
  padding-left: 0;
}

.columns-7 {
  width: 40vw;
}

.column-12, .column-13 {
  padding-left: 0;
  padding-right: 0;
}

.subboldwhite {
  font-size: 17px;
  font-weight: 700;
}

.paragraph-white-title {
  color: #f8f8f8;
  text-align: right;
  font-weight: 500;
}

.boldwhite-2 {
  z-index: 3;
  float: left;
  clear: none;
  color: #fff;
  text-align: left;
  object-fit: fill;
  margin-top: 60px;
  margin-bottom: 10px;
  padding-top: 0;
  padding-left: 0;
  font-family: Roboto, sans-serif;
  font-size: 32px;
  font-weight: 900;
  line-height: 32px;
  position: relative;
  top: 0;
  bottom: -1px;
  left: 0;
}

.textwhite-2 {
  clear: left;
  color: #fff;
  text-align: left;
  letter-spacing: -.02em;
  font-family: Roboto Mono, sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
}

.metronomlink {
  max-width: 90%;
  margin-left: -125px;
  padding-top: 0;
}

.redpricelink {
  width: 50%;
}

.archlink {
  color: #ebebeb;
  max-width: 80%;
  text-decoration: none;
}

.sectionhello {
  clear: both;
  -webkit-text-fill-color: inherit;
  object-fit: fill;
  background-color: #1f1f1f;
  background-clip: border-box;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 80vh;
  margin-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  display: block;
  position: relative;
  left: auto;
}

.sectionhello.fullwidth1 {
  float: none;
  clear: none;
  object-fit: fill;
  object-position: 50% 50%;
  background-color: #ebebeb;
  background-image: url('../images/HB_bg4.png');
  background-position: 50% 100%;
  background-repeat: repeat-x;
  background-size: 676px;
  flex-flow: row;
  flex: none;
  justify-content: center;
  width: 100vw;
  height: 98vh;
  max-height: 98vh;
  margin-left: 0;
  display: flex;
  position: static;
}

.hellolink {
  margin-left: -165px;
}

.sectionmtrnom {
  clear: both;
  -webkit-text-fill-color: inherit;
  object-fit: fill;
  background-color: #1f1f1f;
  background-clip: border-box;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 80vh;
  margin-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  display: block;
  position: relative;
  left: auto;
}

.sectionmtrnom.fullwidth1 {
  float: none;
  clear: none;
  object-fit: fill;
  object-position: 50% 50%;
  background-color: #ebebeb;
  background-image: linear-gradient(31deg, #af0202, #ffbf00);
  flex-flow: row;
  flex: none;
  justify-content: center;
  width: 100%;
  height: 90vh;
  max-height: 90vh;
  margin-left: 0;
  display: flex;
  position: static;
}

.sectionmtrnom.fullwidth1.detailredprice {
  background-image: linear-gradient(13deg, #a11, #d8831c);
}

.sectionmtrnom.fullwidth1.detailredprice.sectionleftmetronom {
  background-image: linear-gradient(to top, #5c635f 7%, #ebebeb 90%);
}

.sectionmtrnom.fullwidth1.hello2 {
  background-image: linear-gradient(to top, #969693, #ebebeb 79%);
  height: 85vh;
}

.sectionmtrnom.fullwidth1.hb3 {
  background-color: #bdbfc2;
  background-image: none;
  flex-direction: row;
  height: 100vh;
  max-height: 100vh;
}

.bold-white-left {
  z-index: 3;
  clear: none;
  color: #fff;
  text-align: right;
  letter-spacing: 0;
  max-width: 160%;
  margin-top: -55px;
  margin-bottom: 10px;
  padding-top: 0%;
  padding-left: 0;
  font-family: Roboto, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 30px;
  position: relative;
  top: 0;
  left: 0;
}

.textwhite-left {
  clear: left;
  color: #fff;
  text-align: right;
  margin-top: 20px;
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.textwhite-roles-left {
  float: right;
  clear: none;
  color: #d5d1d1cc;
  text-align: right;
  max-width: 75%;
  margin-top: 15px;
  margin-right: 0;
  font-family: Roboto Mono, sans-serif;
  font-size: 14px;
  font-weight: 400;
  position: relative;
}

.button-3 {
  float: right;
  color: #5b646b;
  background-color: #fff0;
  background-image: url('../images/Button.svg');
  background-position: 0 0;
  background-size: auto;
  width: 100px;
  height: auto;
  padding-top: 36px;
  padding-left: 0;
  padding-right: 0;
  font-family: Roboto Mono, sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 0;
  position: static;
  overflow: hidden;
}

.button-3:hover {
  background-image: url('../images/Button-Hover.svg');
  background-size: auto;
}

.lottie-animation-3 {
  object-fit: fill;
  width: 80%;
  height: 80%;
  margin-top: 0;
  overflow: hidden;
}

.bold-blue-left {
  z-index: 3;
  color: #00718c;
  text-align: right;
  letter-spacing: 0;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 15px;
  padding-top: 0;
  padding-left: 0;
  font-family: Roboto, sans-serif;
  font-size: 64px;
  font-weight: 900;
  line-height: 30px;
  position: relative;
  top: 0;
  left: 0;
}

.bold-blue-left-small {
  z-index: 3;
  color: #00718c;
  text-align: right;
  letter-spacing: 0;
  max-width: 100%;
  margin-top: 71px;
  margin-bottom: 15px;
  padding-top: 0;
  padding-left: 0;
  font-family: Roboto, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 30px;
  position: relative;
  top: 0;
  left: 0;
}

.bold-blue-left-small-end {
  z-index: 3;
  color: #00718c;
  text-align: right;
  letter-spacing: 0;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 10px;
  padding-top: 0;
  padding-left: 0;
  font-family: Roboto, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 30px;
  position: relative;
  top: 0;
  left: 0;
}

.image-8 {
  width: 70%;
  height: 70%;
  padding-right: 0;
}

.column-14 {
  left: -40px;
}

.hellobankheader {
  float: none;
  text-align: center;
  width: 85%;
  max-width: 90%;
  margin-top: -122px;
  margin-bottom: 0;
  padding-bottom: 0;
  position: relative;
  inset: 0% 0% 0% 0;
}

.redpricecontent {
  float: none;
  clear: none;
  text-align: center;
  width: 95%;
  max-width: 90%;
  margin-bottom: 0;
  padding-bottom: 0;
  padding-left: 0;
  display: block;
  position: relative;
  top: 0%;
  bottom: 0%;
  right: 0%;
}

.helloheadercolimn {
  z-index: 1;
  margin-top: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  top: 0;
  left: 30px;
}

.columnredprice {
  z-index: 1;
  margin-top: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  top: 0;
  left: 50px;
}

.hellobankintro {
  z-index: 1;
  text-align: right;
  margin-top: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  top: 20px;
  left: 37px;
}

.hellobankcontent1 {
  float: none;
  text-align: center;
  width: 85%;
  max-width: 90%;
  margin-top: 0;
  margin-bottom: 0;
  padding: 80px 0 0;
  position: relative;
  inset: -34px 0% 0% -32px;
}

.image-9 {
  max-width: 80%;
  max-height: 900px;
  padding-left: 0;
  padding-right: 40px;
}

.container-14 {
  flex-wrap: wrap;
  justify-content: center;
  align-self: center;
  align-items: center;
  max-width: 90%;
  display: flex;
  position: static;
}

.bold-black-title {
  z-index: 3;
  clear: none;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  color: #e69100;
  text-align: left;
  object-fit: fill;
  --dim-gray: #5d6779;
  --width: 1728px;
  --dark-slate-gray: #262b2f;
  --light-grey: #d5d1d1;
  background-color: #ffac1100;
  background-image: none;
  border-radius: 0;
  justify-content: flex-start;
  align-items: center;
  width: 50%;
  max-width: 75%;
  height: 100px;
  padding: 16px 24px 24px;
  font-family: franklin-gothic-urw, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 38px;
  text-decoration: none;
  display: flex;
  position: static;
  inset: auto 0% 5%;
}

.sectionredprice {
  clear: both;
  -webkit-text-fill-color: inherit;
  object-fit: fill;
  background-color: #1f1f1f;
  background-clip: border-box;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 80vh;
  margin-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  display: block;
  position: relative;
  left: auto;
}

.sectionredprice.fullwidth1 {
  float: none;
  clear: none;
  object-fit: fill;
  object-position: 50% 50%;
  background-color: #ebebeb;
  background-image: linear-gradient(31deg, #af0202, #ffbf00);
  flex-flow: wrap;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  margin-left: 0;
  padding-top: 0;
  display: flex;
  position: static;
}

.column-15 {
  padding-left: 10px;
}

.columns-8 {
  clear: left;
  justify-content: center;
  width: 80%;
  max-width: 80%;
  margin-left: 0;
  margin-right: 0;
  display: block;
}

.image-12 {
  width: 130%;
  max-width: 150%;
  height: 130%;
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
}

.column-16 {
  padding-left: 0;
}

.image-13 {
  float: none;
  clear: none;
  width: 375px;
  max-width: none;
  height: 110px;
  margin-top: 57px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  inset: 0%;
}

.column-17 {
  margin-top: 40px;
  padding: 180px 0 0;
}

.image-14 {
  clear: none;
  white-space: normal;
  object-fit: fill;
  padding-bottom: 90px;
  position: static;
}

.div-block-14 {
  margin-top: 0;
  padding-top: 40px;
}

.sectionhellobank-goal {
  clear: both;
  -webkit-text-fill-color: inherit;
  object-fit: fill;
  background-color: #1f1f1f;
  background-clip: border-box;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 80vh;
  margin-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  display: block;
  position: relative;
  left: auto;
}

.sectionhellobank-goal.fullwidth1 {
  float: none;
  clear: none;
  object-fit: fill;
  object-position: 50% 50%;
  background-color: #ebebeb;
  background-image: linear-gradient(31deg, #af0202, #ffbf00);
  flex-flow: row;
  flex: none;
  justify-content: center;
  width: 100%;
  height: 90vh;
  max-height: 90vh;
  margin-left: 0;
  display: flex;
  position: static;
}

.sectionhellobank-goal.fullwidth1.hb3 {
  background-color: #bdbfc2;
  background-image: none;
  flex-direction: row;
  height: 100vh;
  max-height: 100vh;
}

.hbfat {
  color: #757575;
  letter-spacing: -.2vh;
  text-transform: none;
  white-space: nowrap;
  font-family: Roboto, sans-serif;
  font-size: 64px;
  font-weight: 900;
}

.hblesserfat {
  color: #9d9d9d;
  letter-spacing: -.2vh;
  font-family: Roboto, sans-serif;
  font-size: 56px;
  font-weight: 500;
  line-height: 70px;
}

.column-18 {
  padding-top: 45px;
}

.columns-9 {
  clear: none;
  width: 90%;
  max-height: 85%;
}

.div-block-16 {
  margin-top: 36px;
}

.sectionhellobank-goal-sreens {
  clear: both;
  -webkit-text-fill-color: inherit;
  object-fit: fill;
  background-color: #1f1f1f;
  background-clip: border-box;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 80vh;
  margin-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  display: block;
  position: relative;
  left: auto;
}

.sectionhellobank-goal-sreens.fullwidth1 {
  float: none;
  clear: none;
  object-fit: fill;
  object-position: 50% 50%;
  background-color: #ebebeb;
  background-image: linear-gradient(31deg, #af0202, #ffbf00);
  flex-flow: row;
  flex: none;
  justify-content: center;
  width: 100%;
  height: 90vh;
  max-height: 90vh;
  margin-left: 0;
  display: flex;
  position: static;
}

.sectionhellobank-goal-sreens.fullwidth1.hb4 {
  background-color: #0188a8;
  background-image: none;
  flex-direction: row;
  height: 100vh;
  max-height: 100vh;
}

.hbphonescreens {
  padding-left: 20px;
}

.div-block-17 {
  opacity: 1;
  background-color: #232323;
  border-radius: 32px;
  width: 90%;
  height: 80%;
}

.section-2-overlay {
  color: #824d4d;
  background-color: #1f1e1e;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 75vh;
  display: flex;
}

.sectionmetronom {
  clear: both;
  -webkit-text-fill-color: inherit;
  object-fit: fill;
  background-color: #1f1f1f;
  background-clip: border-box;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 80vh;
  margin-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  display: block;
  position: relative;
  left: auto;
}

.sectionmetronom.fullwidth1 {
  float: none;
  clear: none;
  object-fit: fill;
  object-position: 50% 50%;
  background-color: #ebebeb;
  background-image: linear-gradient(#fff, #eaeaea 36%, #bcbaba);
  flex-flow: row;
  flex: none;
  justify-content: center;
  width: 100vw;
  height: 90vh;
  max-height: 90vh;
  margin-left: 0;
  display: flex;
  position: static;
}

.button-sound {
  float: right;
  color: #5b646b;
  background-color: #fff0;
  width: 200px;
  padding-top: 36px;
  padding-left: 0;
  padding-right: 0;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  line-height: 0;
  position: static;
  overflow: hidden;
}

.solciallink {
  margin-top: -73px;
  display: flex;
}

.solcialcontent {
  margin-left: -20px;
}

.solcialtitle {
  margin-top: 80px;
  padding-top: 0;
  padding-left: 50px;
}

.textwhite-blue {
  float: right;
  clear: none;
  color: #01718c;
  text-align: right;
  letter-spacing: 0;
  max-width: 75%;
  margin-top: 20px;
  margin-right: 0;
  padding-right: 0;
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 300;
  position: relative;
}

.textwhite-roles-blue-left {
  float: right;
  clear: right;
  color: #5b8a96;
  text-align: right;
  max-width: 75%;
  margin-top: 15px;
  margin-right: 0;
  font-family: Roboto Mono, sans-serif;
  font-size: 14px;
  font-weight: 400;
  position: relative;
}

.columns-10 {
  width: 85%;
}

.column-19 {
  height: 100%;
  padding-left: 0;
  padding-right: 0;
}

.boldwhite-right {
  color: #fff;
  text-align: left;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 3px;
  font-family: Roboto, sans-serif;
  font-size: 36px;
  font-weight: 700;
}

.textwhite-right {
  clear: none;
  color: #fff;
  text-align: left;
  flex-wrap: nowrap;
  justify-content: center;
  width: 75%;
  margin-top: 20px;
  margin-left: 0;
  padding-left: 0;
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 300;
  display: flex;
}

.textwhite-roles-right {
  float: none;
  clear: none;
  color: #ffffff8f;
  text-align: left;
  flex-wrap: nowrap;
  place-content: flex-end center;
  align-items: stretch;
  width: 75%;
  margin-top: 20px;
  margin-bottom: 6px;
  margin-right: 0;
  padding-left: 0;
  font-family: Roboto Mono, sans-serif;
  font-size: 14px;
  font-weight: 400;
  display: block;
  position: relative;
  left: 0;
}

.column-20 {
  text-align: left;
  padding-left: 0;
  top: 108px;
}

.column-21 {
  padding-left: 0;
}

.lottiemetronom {
  width: 562px;
}

.textblack-right {
  clear: left;
  color: #727272;
  text-align: left;
  letter-spacing: -.02em;
  text-indent: -2px;
  padding-left: 0;
  font-family: Roboto Mono, sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.textblack-roles-right {
  clear: none;
  color: #a0a0a0;
  text-align: left;
  margin-top: 4px;
  padding-left: 0;
  font-family: Roboto Mono, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.logo {
  object-fit: cover;
  height: 40px;
}

.navigation-3 {
  grid-column-gap: 8px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  height: 70px;
  text-decoration: none;
  display: flex;
}

.text-3 {
  color: #4f4f4f;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 100%;
  text-decoration: none;
}

.navigation-4 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1728px;
  padding-left: 32px;
  padding-right: 32px;
  text-decoration: none;
  display: flex;
}

.logo-3 {
  object-fit: cover;
}

.commissionedon {
  grid-column-gap: 10px;
  background-color: #030303;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 10px;
  text-decoration: none;
  display: flex;
}

.wrap {
  border: 0 solid #4f4f4f;
  border-bottom-width: 1px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1664px;
  font-family: franklin-gothic-urw, sans-serif;
  text-decoration: none;
  display: flex;
}

.text-5 {
  color: #fff;
  text-transform: none;
  margin-top: 0;
  margin-bottom: 0;
  font-family: franklin-gothic-urw, sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 100%;
  text-decoration: none;
}

.subnav-6 {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 10px;
  text-decoration: none;
  display: flex;
}

.commissioned-7 {
  color: #9a9a9a;
  text-transform: capitalize;
  margin-top: 0;
  margin-bottom: 0;
  font-family: franklin-gothic-urw, sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 100%;
  text-decoration: none;
}

.commissioned-8 {
  color: #fff;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 100%;
  text-decoration: none;
}

.personalon {
  grid-column-gap: 10px;
  background-color: #030303;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 10px;
  text-decoration: none;
  display: flex;
}

.commissioned {
  color: #fff;
  text-transform: capitalize;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 100%;
  text-decoration: none;
}

.subnav {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 10px;
  text-decoration: none;
  display: flex;
}

.text {
  color: #9a9a9a;
  text-transform: none;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 100%;
  text-decoration: none;
}

.commissioned-0 {
  color: #9a9a9a;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 100%;
  text-decoration: none;
}

.commissioned-1 {
  color: #9a9a9a;
  text-transform: lowercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 100%;
  text-decoration: none;
}

.div-block-18 {
  z-index: 2;
  float: none;
  clear: none;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #42986400;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-end;
  width: 50%;
  height: 100px;
  padding-left: 21px;
  padding-right: 0;
  display: block;
  position: absolute;
  inset: 85% auto 0% 3%;
}

@media screen and (max-width: 991px) {
  .navbar {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .image-2 {
    width: auto;
    height: auto;
  }

  .nav {
    clear: none;
    left: 10px;
  }

  .button-2 {
    padding-left: 0;
    padding-right: 0;
  }

  .body {
    height: auto;
    max-height: none;
  }

  .footer {
    position: absolute;
    top: 100%;
  }

  .bold-black {
    position: relative;
    top: 0;
    left: 0;
  }

  .header1.intro {
    height: 60vh;
  }

  .navbar-black {
    margin-left: 0;
    margin-right: 0;
  }

  .container-black {
    clear: none;
    left: 0;
  }

  .button-black {
    padding-left: 0;
    padding-right: 0;
  }

  .bold-white {
    padding-bottom: 2px;
  }

  .grey {
    background-image: url('../images/glow_black.png');
    background-position: 10%;
    background-repeat: no-repeat;
    background-size: auto;
    background-attachment: fixed;
    flex-direction: column;
    display: flex;
  }

  .sectionfari {
    background-color: #1e1e1e;
    background-image: none;
  }

  .background-video {
    --dim-gray: #5d6779;
    --width: 1194px;
    --dark-slate-gray: #262b2f;
    --light-grey: #d5d1d1;
  }

  .boldwhite {
    margin-top: 55px;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .baseline {
    max-width: 80%;
    top: 271px;
    left: 91px;
  }

  .metronomcontent {
    left: -21px;
  }

  .bold-black-left {
    position: relative;
    top: 0;
    left: 0;
  }

  .column-10 {
    top: 46px;
    left: 56px;
  }

  .fakecaroussel {
    display: flex;
  }

  .secondarycontent {
    width: 80%;
    overflow: visible;
  }

  .bold-black-right {
    position: relative;
    top: 0;
    left: 0;
  }

  .baseline-black, .txtcolor {
    max-width: 80%;
    top: 100px;
    left: 91px;
  }

  .section-2 {
    flex-flow: column;
    justify-content: flex-start;
  }

  .columns-7 {
    width: 60vw;
  }

  .boldwhite-2 {
    margin-top: 55px;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .sectionhello, .sectionmtrnom {
    background-color: #1e1e1e;
    background-image: none;
  }

  .bold-white-left {
    position: relative;
    top: 0;
    left: 0;
  }

  .button-3 {
    padding-left: 0;
    padding-right: 0;
  }

  .bold-blue-left, .bold-blue-left-small, .bold-blue-left-small-end {
    position: relative;
    top: 0;
    left: 0;
  }

  .hellobankheader, .redpricecontent {
    left: -21px;
  }

  .helloheadercolimn, .columnredprice, .hellobankintro {
    top: 46px;
    left: 56px;
  }

  .hellobankcontent1 {
    left: -21px;
  }

  .bold-black-title {
    --dim-gray: #5d6779;
    --width: 1194px;
    --dark-slate-gray: #262b2f;
    --light-grey: #d5d1d1;
    max-width: 50%;
    font-size: 36px;
    font-weight: 700;
    line-height: 30px;
    display: flex;
    position: static;
    inset: auto 0% 5% 5%;
  }

  .sectionredprice, .sectionhellobank-goal, .sectionhellobank-goal-sreens {
    background-color: #1e1e1e;
    background-image: none;
  }

  .hbphonescreens {
    padding-right: 20px;
  }

  .section-2-overlay {
    flex-flow: column;
    justify-content: flex-start;
  }

  .sectionmetronom {
    background-color: #1e1e1e;
    background-image: none;
  }

  .button-sound {
    padding-left: 0;
    padding-right: 0;
  }

  .boldwhite-right {
    padding-bottom: 2px;
  }

  .column-20 {
    top: 16px;
  }

  .div-block-18 {
    z-index: 2;
    background-color: #42986400;
    border-radius: 0;
    position: absolute;
  }
}

@media screen and (max-width: 767px) {
  .navbar {
    margin-right: 0;
  }

  .image-2 {
    width: auto;
    height: auto;
    padding-left: 0;
  }

  .nav {
    clear: none;
    min-width: 90%;
    left: 20px;
  }

  .button-2 {
    margin-right: 0;
  }

  .footer {
    width: 100%;
    position: absolute;
    inset: 100% auto 0% 0%;
  }

  .bold-black {
    max-width: 95%;
    top: 0;
    left: 0;
  }

  .header1.intro {
    height: 55vh;
  }

  .navbar-black {
    margin-right: 0;
  }

  .container-black {
    clear: none;
    width: 82%;
    min-width: 0;
    left: 0;
  }

  .button-black {
    margin-right: 0;
  }

  .paragraph-white {
    text-align: right;
  }

  .section-new, .section3, .sectionfari {
    text-align: center;
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .sectionfari.fullwidth1 {
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .background-video {
    --dim-gray: #5d6779;
    --width: 393px;
    --dark-slate-gray: #262b2f;
    --light-grey: #d5d1d1;
    margin-left: 0;
  }

  .boldwhite {
    margin-top: 0;
    top: 0;
    left: 0;
  }

  .baseline {
    max-width: 80%;
    top: 265px;
    left: 73px;
  }

  .archcontent {
    max-width: 90%;
  }

  .sectionarch2 {
    text-align: center;
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .descriptionblack {
    margin-top: 13px;
    top: -69px;
  }

  .bold-black-left {
    float: none;
    clear: left;
    max-width: 100%;
    position: static;
    top: 0;
    left: 0;
  }

  .column-10 {
    left: -60px;
  }

  .lottie-animation-2 {
    width: 300px;
    height: 325px;
  }

  .secondarycontent {
    padding-left: 32px;
  }

  .colmumn-images.yposimage {
    left: 58px;
  }

  .bold-black-right {
    float: none;
    clear: left;
    max-width: 100%;
    position: static;
    top: 0;
    left: 0;
  }

  .baseline-black {
    max-width: 80%;
    top: 100px;
    left: 50px;
  }

  .txtcolor {
    max-width: 80%;
    top: 265px;
    left: 73px;
  }

  .boldwhite-2 {
    margin-top: 0;
    top: 0;
    left: 0;
  }

  .descriptionblack-2 {
    margin-top: 13px;
    top: -69px;
  }

  .sectionhello {
    text-align: center;
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .sectionhello.fullwidth1 {
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .sectionmtrnom {
    text-align: center;
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .sectionmtrnom.fullwidth1 {
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .bold-white-left {
    float: none;
    clear: left;
    max-width: 100%;
    position: static;
    top: 0;
    left: 0;
  }

  .button-3 {
    margin-right: 0;
  }

  .lottie-animation-3 {
    margin-left: 0;
  }

  .bold-blue-left, .bold-blue-left-small, .bold-blue-left-small-end {
    float: none;
    clear: left;
    max-width: 100%;
    position: static;
    top: 0;
    left: 0;
  }

  .helloheadercolimn, .columnredprice, .hellobankintro {
    left: -60px;
  }

  .bold-black-title {
    --dim-gray: #5d6779;
    --width: 1194px;
    --dark-slate-gray: #262b2f;
    --light-grey: #d5d1d1;
    width: 80%;
    max-width: 95%;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 32px;
    line-height: 24px;
    display: block;
    position: static;
    inset: auto 0% 5%;
    overflow: auto;
  }

  .sectionredprice {
    text-align: center;
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .sectionredprice.fullwidth1 {
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .sectionhellobank-goal {
    text-align: center;
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .sectionhellobank-goal.fullwidth1 {
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .sectionhellobank-goal-sreens {
    text-align: center;
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .sectionhellobank-goal-sreens.fullwidth1 {
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .sectionmetronom {
    text-align: center;
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .sectionmetronom.fullwidth1 {
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .button-sound {
    margin-right: 0;
  }

  .div-block-18 {
    z-index: 2;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background-color: #42986400;
    justify-content: flex-start;
    align-items: center;
    padding-top: 16px;
    padding-left: 16px;
    display: flex;
    position: absolute;
  }
}

@media screen and (max-width: 479px) {
  .navbar {
    width: auto;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    position: relative;
  }

  .image-2 {
    width: auto;
    height: auto;
    max-height: 85%;
    padding-left: 0;
    overflow: visible;
  }

  .nav {
    clear: none;
    object-fit: fill;
    width: 100%;
    min-width: 0;
    padding-left: 0;
    position: relative;
    left: 0;
  }

  .button-2 {
    margin-right: 12px;
  }

  .footer {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    display: flex;
    top: 95%;
  }

  .bold-black {
    max-width: 100%;
    font-size: 18px;
    top: 0;
    left: 0;
  }

  .container-9 {
    max-width: 90vw;
    font-family: Roboto, sans-serif;
    font-weight: 700;
  }

  .header1.intro {
    height: 50vh;
  }

  .navbar-black {
    width: auto;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    position: relative;
  }

  .container-black {
    clear: none;
    object-fit: fill;
    width: 100%;
    min-width: 0;
    padding-left: 0;
    position: relative;
    left: 0;
  }

  .button-black {
    margin-right: 12px;
  }

  .bold-white {
    font-size: 18px;
    font-weight: 500;
  }

  .div-block-11 {
    position: relative;
    left: -22px;
  }

  .section-new {
    clear: none;
    background-position: 50% 25%;
    background-size: 125%;
    padding-left: 0;
  }

  .section-new.fullwidth2 {
    display: block;
  }

  .section3, .sectionfari {
    clear: none;
    background-position: 50% 25%;
    background-size: 125%;
    padding-left: 0;
  }

  .sectionfari.fullwidth1 {
    align-items: center;
    height: 90vh;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .background-video {
    justify-content: center;
    align-items: stretch;
    max-height: 95%;
  }

  .boldwhite {
    max-width: 90%;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 18px;
    top: 0;
    left: 0;
  }

  .baseline {
    max-width: 90%;
    line-height: 16px;
    display: inline-block;
    top: 207px;
    left: -7px;
  }

  .archcontent {
    align-self: flex-start;
    max-width: 90%;
  }

  .sectionarch2 {
    clear: none;
    background-position: 50% 25%;
    background-size: 125%;
    padding-left: 0;
  }

  .sectionarch2.fullwidth1 {
    align-items: center;
    height: 90vh;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .metronomcontent {
    max-width: 95%;
  }

  .bold-black-left {
    max-width: 100%;
    font-size: 18px;
    position: relative;
    top: 0;
    left: 0;
  }

  .textblack-left, .textblack-roles-left {
    position: relative;
  }

  .column-10 {
    position: relative;
    left: -34px;
  }

  .lottie-animation-2 {
    margin-left: -53px;
    padding-left: 0;
  }

  .textblackwhite-roles-right {
    position: relative;
  }

  .secondarycontent {
    padding-left: 14px;
  }

  .colmumn-images.yposimage {
    padding-left: 0;
    top: -18px;
    left: -27px;
  }

  .image-7 {
    float: none;
    margin-right: -47px;
  }

  .bold-black-right {
    max-width: 100%;
    font-size: 18px;
    position: relative;
    top: 0;
    left: 0;
  }

  .baseline-black {
    top: 50px;
    left: 32px;
  }

  .txtcolor {
    top: 243px;
    left: 32px;
  }

  .subboldwhite {
    color: #e5e5e5;
  }

  .boldwhite-2 {
    max-width: 90%;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 22px;
    top: 0;
    left: 0;
  }

  .descriptionblack-2 {
    margin-top: 137px;
    padding-left: 18px;
  }

  .sectionhello {
    clear: none;
    background-position: 50% 25%;
    background-size: 125%;
    padding-left: 0;
  }

  .sectionhello.fullwidth1 {
    align-items: center;
    height: 90vh;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .sectionmtrnom {
    clear: none;
    background-position: 50% 25%;
    background-size: 125%;
    padding-left: 0;
  }

  .sectionmtrnom.fullwidth1 {
    align-items: center;
    height: 90vh;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .bold-white-left {
    max-width: 100%;
    font-size: 18px;
    position: relative;
    top: 0;
    left: 0;
  }

  .textwhite-left, .textwhite-roles-left {
    position: relative;
  }

  .button-3 {
    margin-right: 12px;
  }

  .lottie-animation-3 {
    margin-left: 0;
    display: block;
  }

  .bold-blue-left, .bold-blue-left-small, .bold-blue-left-small-end {
    max-width: 100%;
    font-size: 18px;
    position: relative;
    top: 0;
    left: 0;
  }

  .hellobankheader, .redpricecontent {
    max-width: 95%;
  }

  .helloheadercolimn, .columnredprice, .hellobankintro {
    position: relative;
    left: -34px;
  }

  .hellobankcontent1 {
    max-width: 95%;
  }

  .bold-black-title {
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    width: 75%;
    max-width: 100%;
    font-size: 24px;
    line-height: 24px;
    text-decoration: none;
    display: block;
    position: static;
    inset: auto auto 5% 0%;
  }

  .sectionredprice {
    clear: none;
    background-position: 50% 25%;
    background-size: 125%;
    padding-left: 0;
  }

  .sectionredprice.fullwidth1 {
    align-items: center;
    height: 90vh;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .sectionhellobank-goal {
    clear: none;
    background-position: 50% 25%;
    background-size: 125%;
    padding-left: 0;
  }

  .sectionhellobank-goal.fullwidth1 {
    align-items: center;
    height: 90vh;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .sectionhellobank-goal-sreens {
    clear: none;
    background-position: 50% 25%;
    background-size: 125%;
    padding-left: 0;
  }

  .sectionhellobank-goal-sreens.fullwidth1 {
    align-items: center;
    height: 90vh;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .sectionmetronom {
    clear: none;
    background-position: 50% 25%;
    background-size: 125%;
    padding-left: 0;
  }

  .sectionmetronom.fullwidth1 {
    align-items: center;
    height: 90vh;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .button-sound {
    margin-right: 12px;
  }

  .textwhite-blue, .textwhite-roles-blue-left {
    position: relative;
  }

  .boldwhite-right {
    font-size: 18px;
    font-weight: 500;
  }

  .textwhite-right, .textwhite-roles-right, .textblack-right, .textblack-roles-right {
    position: relative;
  }

  .div-block-18 {
    z-index: 2;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background-color: #42986400;
    justify-content: flex-start;
    align-items: center;
    width: 80%;
    display: flex;
    position: absolute;
    top: 80%;
    overflow: visible;
  }
}


@font-face {
  font-family: 'Librefranklin Variablefont Wght';
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Librefranklin Variablefont Wght';
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Librefranklin Variablefont Wght';
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format('woff'), url('../fonts/LibreFranklin-VariableFont_wght.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Librefranklin Variablefont Wght';
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Librefranklin Variablefont Wght';
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Librefranklin Variablefont Wght';
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Librefranklin Variablefont Wght';
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Librefranklin Variablefont Wght';
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Librefranklin Variablefont Wght';
  src: url('../fonts/LibreFranklin-VariableFont_wght.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}