/*--------------------GENERAL STYLING--------------------*/
/* COLORS */
@font-face {
  font-family: "BagossStandard-Medium";
  src: url(data:font/woff2;base64,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) format("woff2");
}
.ff--bagossstandard-medium {
  font-family: "BagossStandard-Medium", sans-serif;
}

/*--------------------COLOR CONFIG--------------------*/
:root {
  --color--neutrals-0: #fff;
  --color--neutrals-1: #EBEBEB;
  --color--neutrals-2: #cccccc;
  --color--neutrals-3: rgb(181, 181, 181);
  --color--neutrals-4: #8c8c8c;
  --color--neutrals-5: #737373;
  --color--neutrals-6: #595959;
  --color--neutrals-7: #404040;
  --color--neutrals-8: #262626;
  --color--neutrals-9: #000;
  --color--brand-0: #D7FFD0;
  --color--brand-1: #00192F;
  --color--brand-2: #9DB4F6;
  --color--brand-3: #76C893;
  --color--brand-4: #52B69A;
  --color--brand-5: #34A0A4;
  --color--brand-6: #168AAD;
  --color--brand-7: #1A759F;
  --color--brand-8: #1E6091;
  --color--brand-9: #184E77;
}

.fc--neutrals-0 {
  color: #fff;
}

.bg--neutrals-0 {
  background-color: #fff;
}

.fill--neutrals-0 {
  fill: #fff;
}

.fc--neutrals-1 {
  color: #EBEBEB;
}

.bg--neutrals-1 {
  background-color: #EBEBEB;
}

.fill--neutrals-1 {
  fill: #EBEBEB;
}

.fc--neutrals-2 {
  color: #cccccc;
}

.bg--neutrals-2 {
  background-color: #cccccc;
}

.fill--neutrals-2 {
  fill: #cccccc;
}

.fc--neutrals-3 {
  color: rgb(181, 181, 181);
}

.bg--neutrals-3 {
  background-color: rgb(181, 181, 181);
}

.fill--neutrals-3 {
  fill: rgb(181, 181, 181);
}

.fc--neutrals-4 {
  color: #8c8c8c;
}

.bg--neutrals-4 {
  background-color: #8c8c8c;
}

.fill--neutrals-4 {
  fill: #8c8c8c;
}

.fc--neutrals-5 {
  color: #737373;
}

.bg--neutrals-5 {
  background-color: #737373;
}

.fill--neutrals-5 {
  fill: #737373;
}

.fc--neutrals-6 {
  color: #595959;
}

.bg--neutrals-6 {
  background-color: #595959;
}

.fill--neutrals-6 {
  fill: #595959;
}

.fc--neutrals-7 {
  color: #404040;
}

.bg--neutrals-7 {
  background-color: #404040;
}

.fill--neutrals-7 {
  fill: #404040;
}

.fc--neutrals-8 {
  color: #262626;
}

.bg--neutrals-8 {
  background-color: #262626;
}

.fill--neutrals-8 {
  fill: #262626;
}

.fc--neutrals-9 {
  color: #000;
}

.bg--neutrals-9 {
  background-color: #000;
}

.fill--neutrals-9 {
  fill: #000;
}

.fc--brand-0 {
  color: #D7FFD0;
}

.bg--brand-0 {
  background-color: #D7FFD0;
}

.fill--brand-0 {
  fill: #D7FFD0;
}

.fc--brand-1 {
  color: #00192F;
}

.bg--brand-1 {
  background-color: #00192F;
}

.fill--brand-1 {
  fill: #00192F;
}

.fc--brand-2 {
  color: #9DB4F6;
}

.bg--brand-2 {
  background-color: #9DB4F6;
}

.fill--brand-2 {
  fill: #9DB4F6;
}

.fc--brand-3 {
  color: #76C893;
}

.bg--brand-3 {
  background-color: #76C893;
}

.fill--brand-3 {
  fill: #76C893;
}

.fc--brand-4 {
  color: #52B69A;
}

.bg--brand-4 {
  background-color: #52B69A;
}

.fill--brand-4 {
  fill: #52B69A;
}

.fc--brand-5 {
  color: #34A0A4;
}

.bg--brand-5 {
  background-color: #34A0A4;
}

.fill--brand-5 {
  fill: #34A0A4;
}

.fc--brand-6 {
  color: #168AAD;
}

.bg--brand-6 {
  background-color: #168AAD;
}

.fill--brand-6 {
  fill: #168AAD;
}

.fc--brand-7 {
  color: #1A759F;
}

.bg--brand-7 {
  background-color: #1A759F;
}

.fill--brand-7 {
  fill: #1A759F;
}

.fc--brand-8 {
  color: #1E6091;
}

.bg--brand-8 {
  background-color: #1E6091;
}

.fill--brand-8 {
  fill: #1E6091;
}

.fc--brand-9 {
  color: #184E77;
}

.bg--brand-9 {
  background-color: #184E77;
}

.fill--brand-9 {
  fill: #184E77;
}

/*--------------------GENERAL STYLING--------------------*/
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
}

strong {
  font-weight: 500;
}

.border {
  border: 1px solid var(--color--neutrals-9);
  box-sizing: border-box;
}

#banner {
  position: relative;
  overflow: hidden;
  display: block;
  width: 300px;
  height: 250px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

#content {
  position: relative;
  top: 12px;
  left: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
}

.visual {
  width: 300px;
  height: 250px;
}

#preload {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: var(--color--neutrals-0);
}

/*-------------------- HELPERS --------------------*/
.frame {
  position: absolute;
  width: 100%;
  height: 100%;
}

#content {
  top: 12px;
  left: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  font-size: 20px;
}

.txt__frame {
  bottom: 52%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 60%;
}
.txt__frame.frame--1, .txt__frame.frame--2 {
  color: var(--color--brand-2);
  bottom: 70%;
  font-size: 1.2em;
  width: 80%;
}

.logo {
  width: 120px;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.shape {
  width: 75%;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#banner {
  font-size: 18px;
  color: var(--color--brand-1);
  background-color: var(--color--brand-1);
}

#content {
  text-align: left;
  pointer-events: none;
  z-index: 1;
}

.text-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#banner-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.txt__frame {
  position: absolute;
  text-align: center;
}

.logo {
  position: absolute;
  color: var(--color--brand-2);
}

.shape {
  position: absolute;
  color: var(--color--brand-2);
}