@font-face {
  font-family: "Yantramanav-Regular";
  src: url("Yantramanav-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Yantramanav-Bold";
  src: url("Yantramanavboldbold.woff2") format("woff2");
}

@font-face {
  font-family: "BarlowCondensed-SemiBold";
  src: url("BarlowCondensed-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "BarlowCondensed-Bold";
  src: url("BarlowCondensed-Bold.woff2") format("woff2");
}

/*************** MAIN ELEMENTS ***************/

body {
  margin: 0;
  padding: 0;
}

div,
svg,
img {
  position: absolute;
}

span {
  display: inline-block;
}

.o {
  opacity: 0;
}

#wrapper {
  display: block;
  top: 0;
  left: 0;
  width: 300px;
  height: 600px;
  overflow: hidden;
  background-color: #ffffff;
}

#wrect {
  width: inherit;
  height: inherit;
  background-color: #ffffff;
  pointer-events: none;
}

#border {
  border: 1px solid #282728;
  opacity: 0.3;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: inherit;
  height: inherit;
  pointer-events: none;
}

#bgexit {
  width: inherit;
  height: inherit;
  cursor: pointer;
}

/********************** LOGO **********************/

#logo {
  cursor: pointer;
  width: 85px;
  height: 85px;
  left: 21px;
  top: 20px;
  text-align: center;
  background: url("logo.svg") no-repeat;
}

/******************** BUTTON ********************/

#cta {
  width: 159px;
  height: 38px;
  border-radius: 19px;
  cursor: pointer;
  left: 50%;
  transform: translateX(-50%);
  bottom: 13px;
  font-size: 18px;
  font-family: "BarlowCondensed-SemiBold";
  text-align: center;
  line-height: 90%;
  color: #ffffff;
  background: #00aeef;
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background 0.3s ease-in-out;
}

#cta:hover {
  background-color: #108cb9;
}

/******************** TEXT ********************/

.rush {
  font-family: "BarlowCondensed-Bold";
  font-size: 48px;
  width: inherit;
  text-align: center;
  top: 407px;
}

#txtWrap {
  width: inherit;
  height: inherit;
}

#blue {
  height: 3px;
  width: 1px;
  background-color: #00aeef;
  top: 480px;
}

.frame {
  width: inherit;
  height: inherit;
}

.headline {
  width: auto;
  top: 455px;
  font-family: "BarlowCondensed-Bold";
  font-size: 22px;
  height: 20px;
  display: inline-block;
  overflow: hidden;
}

.subheadline {
  width: inherit;
  top: 490px;
  font-family: "Yantramanav-Regular";
  font-size: 14px;
  text-align: center;
  line-height: 120%;
  box-sizing: border-box;
  padding: 0 9px;
}

/******************** BACKGROUND ********************/

#imgWrap {
  width: inherit;
  height: inherit;
}

.imgDiv {
  width: inherit;
  height: inherit;
  opacity: 0;
}

#whiteBox {
  background-color: #fff;
  width: inherit;
  top: 404px;
  height: 200px;
}

#blueBox {
  background-color: #00aeef;
  width: inherit;
  height: 3px;
  top: 401px;
}

.blue {
  font-family: "Yantramanav-Bold";
  font-weight: bold;
  display: inline-block;
  color: #00aeef;
}