@font-face {
  font-family: "Rocgrotesk-black";
  src: url("Rocgrotesk-black.otf");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  font-family: "Rocgrotesk-black";
  overflow-x: hidden;
}
.bg_primary {
  background: #0067ff;
}
.fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}
h1,
h1 span {
  font-size: 40px;
  color: #fff;
  text-align: center;
}
.comingsoon {
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 5px;
  margin-bottom: 5px;
}
.comingsoon p {
  font-size: 40px;
  color: #fff;
  text-align: center;
  margin-bottom: 0;
}
.text {
  width: 600px;
  margin: 0 auto;
}
.newface {
  position: relative;
  width: 600px;
  overflow: visible !important;
}
.abs {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1;
}
.rel {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 0;
}
img#can {
  z-index: 10;
}
img#logo {
  z-index: 12;
}
img#orange {
  transition-delay: 0.3s;
  z-index: 11;
}
#pulp {
  z-index: 10;
  transition-delay: 0.6s;
  animation: rotate 5s alternate forwards infinite;
}
@keyframes rotate {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1.1, 1.1);
  }
}
@media (min-width: 767px) and (max-width: 1300px) {
  .newface {
    width: 100% !important;
  }
}
@media (min-width: 680px) and (max-width: 767px) {
  .text {
    width: 90%;
    margin-bottom: 15px;
  }
}
@media (max-width: 680px) {
  .text {
    width: 70%;
  }
  .newface {
    width: 90%;
    margin: 0 auto;
  }
  .newface img {
    width: 100%;
    margin: 0 auto;
    display: block;
  }
  #pulp {
    animation: rotate 5s alternate forwards infinite;
  }
  @keyframes rotate {
    0% {
      transform: scale(1, 1);
    }
    100% {
      transform: scale(1.05, 1.05);
    }
  }
}