body {
  background-color: #f2ebe6;
}

.main {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  position: relative;
}
.main .home {
  position: relative;
  width: 100%;
  height: 100%;
  transition: all ease 0.3s;
  transform: translateX(0%);
  z-index: 2;
}
.main .watch {
  position: absolute;
  transition: all ease 0.3s;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  z-index: 5;
}
.main .watch h2, .main .watch h1 {
  font-family: poppins;
  font-weight: 600;
  color: #000;
}
.main.watching .home {
  transform: translateX(-100%);
}
.main.watching .watch {
  left: 0;
}

.main-logo {
  height: 19px;
}

.active-logo {
  max-height: 300px;
}

.cityscape-item {
  height: 200px;
  width: 7px;
  background-color: white;
  position: absolute;
  bottom: 0;
}

.cityscape {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  max-width: 100vw;
  width: 100%;
  height: 200px;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

.leftBar {
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.leftBar .leftBar-img {
  height: 80px;
  transform: rotate(-90deg) translate(17%, 0%);
  transform-origin: center;
  padding: 22px;
}
.leftBar .leftBar-img img {
  max-height: 100%;
}

.topBar {
  background-color: #E6231E;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topBar h2 {
  font-family: poppins;
  font-weight: 600;
  color: #fff;
}
.topBar .leftBar-img {
  height: 80px;
  padding: 22px;
}
.topBar .leftBar-img img {
  max-height: 100%;
}

/*# sourceMappingURL=index.css.map */