body {
  height: 100%;
  overflow: hidden;
  background-color: #CDDBCC;
  text-align: center;
  background-image: none;
}
.gif-bg {
  display: none;
  opacity: 0;
  -webkit-transition: opacity .3s;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.gif-bg .float-wrapper {
  position: absolute;
}
.gif-bg .float-wrapper .float {
  max-width: 100px;
  max-height: 100px;
}
.gif-bg.yao-bg {
  background-image: url("/images/YAO/YAO_BG.gif");
}
.gif-bg.jade-bg {
  background-image: url("/images/JADE/JADE_BG.gif");
}
.gif-bg.jade-bg .float-2 {
  max-width: none;
  width: 150px;
  margin-left: -50px;
}
.gif-bg.marshall-bg {
  background-image: url("/images/MARSHALL/MARSHALL_BG.gif");
}
.gif-bg.marshall-bg .float-1 {
  max-width: none;
  max-height: none;
  width: 50px;
  margin-left: -25px;
}
.gif-bg.marshall-bg .float-2 {
  max-width: none;
  max-height: none;
  width: 80px;
  margin-left: -40px;
}
.gif-bg.clam-bg {
  background-image: url("/images/CLAMMY/CLAMMY_BG.gif");
}
.gif-bg.alex-bg {
  background-image: url("/images/ALEX/ALEX_BG.gif");
}
.gif-bg.alex-bg .float-1 {
  max-width: none;
  max-height: none;
  width: 47px;
}
.gif-bg.alex-bg .float-2 {
  max-width: none;
  max-height: none;
  width: 44px;
  margin-left: -25px;
  margin-bottom: -115px;
}
.gif-bg.dan-bg {
  background-image: url("/images/DAN/DAN_BG.gif");
}
.gif-bg.shaan-bg {
  background-image: url("/images/shaan/SHAAN_BG.gif");
}
.gif-bg.isaac-bg {
  background-image: url("/images/ISAAC/ISAAC_BG.gif");
}
.gif-bg.isaac-bg .float-2 {
  max-width: none;
  width: 150px;
  margin-left: -50px;
}
.gif-bg.jayne-bg {
  background-image: url("/images/JAYNE/JAYNE_BG.gif");
}
#logo {
  padding: 50px 0px 135px;
}
#logo,
footer {
  position: fixed;
  display: block;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.7s;
  -moz-transition: opacity 0.7s;
  -o-transition: opacity 0.7s;
  transition: opacity 0.7s;
}
.main {
  z-index: 40;
  display: none;
  margin: auto;
  position: absolute;
  top: 50%;
  white-space: nowrap;
  left: 0;
  margin-top: -126px;
  right: 0;
}
.cypha-member {
  vertical-align: bottom;
  display: inline-block;
  width: 115px;
  position: relative;
}
.cypha-member .shadow {
  visibility: hidden;
  position: absolute;
}
.cypha-member .singing {
  visibility: hidden;
  z-index: 10;
  position: relative;
  opacity: 1;
}
.cypha-member .singing .sprite {
  max-width: 100%;
  margin: auto;
  display: block;
}
.cypha-member .hover {
  top: 0px;
  left: 0px;
  z-index: 9;
  position: absolute;
  width: 200px;
  opacity: 0;
}
.cypha-member .hover img {
  pointer-events: none;
  z-index: -1;
}
.yao .hover {
  top: -91px;
  left: -95px;
}
.yao .shadow {
  position: absolute;
  bottom: -5px;
  left: 13px;
}
.jade .hover {
  top: -86px;
  left: -111px;
}
.jade .shadow {
  position: absolute;
  bottom: -11px;
  left: 7px;
}
.marshall .hover {
  top: -64px;
  left: -70px;
}
.marshall .shadow {
  position: absolute;
  bottom: -10px;
  left: 7px;
}
.clam .hover {
  zoom: 1.1;
  top: -70px;
  left: -73px;
}
.clam .hover img {
  width: 250px;
}
.clam .shadow {
  position: absolute;
  bottom: -8px;
  left: 8px;
}
.alex .hover {
  top: -74px;
  left: -32px;
}
.alex .shadow {
  position: absolute;
  bottom: -10px;
  left: 6px;
}
.dan .hover {
  top: -129px;
  left: -46px;
}
.dan .shadow {
  bottom: -8px;
  left: 3px;
}
.shaan .hover {
  top: -105px;
  left: -106px;
}
.shaan .shadow {
  bottom: -10px;
  left: 7px;
}
.isaac {
  width: initial;
}
.isaac .hover {
  top: -38px;
  left: -76px;
}
.isaac .shadow {
  bottom: -11px;
  left: 20px;
}
.jayne {
  width: initial;
}
.jayne .hover {
  top: -105px;
  left: -56px;
}
.jayne .shadow {
  position: absolute;
  bottom: -9px;
  left: -3px;
}
footer {
  padding: 0px 20px;
  color: #6e766e;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 146px;
  margin-bottom: 25px;
}
footer * {
  color: #6e766e;
}
@media (max-width: 667px) {
  .yao-bg {
    background-image: url('/images/mobile/YAO.gif');
  }
  .jade-bg {
    background-image: url('/images/mobile/JADE.gif');
  }
  .marshall-bg {
    background-image: url('/images/mobile/MARSHALL.gif');
  }
  .clam-bg {
    background-image: url('/images/mobile/CLAMMY.gif');
  }
  .alex-bg {
    background-image: url('/images/mobile/ALEX.gif');
  }
  .dan-bg {
    background-image: url('/images/mobile/DAN.gif');
  }
  .shaan-bg {
    background-image: url('/images/mobile/SHAAN.gif');
  }
  .isaac-bg {
    background-image: url('/images/mobile/ISAAC.gif');
  }
  .jayne-bg {
    background-image: url('/images/mobile/JAYNE.gif');
  }
  #logo {
    padding: 15px 0px 50px;
    position: fixed;
    z-index: 30;
    margin: auto;
    left: 0;
    right: 0;
  }
  #logo img {
    width: 68px;
  }
  .gif-bg {
    height: 100%;
    position: fixed;
  }
  .main {
    position: fixed;
    top: 42%;
  }
  .bx-viewport {
    height: 660px !important;
  }
  .cypha-member {
    text-align: center;
    vertical-align: bottom;
    display: inline-block;
    float: none;
  }
  .cypha-member .hover {
    display: block;
    left: 0;
    right: 0;
    margin: auto;
  }
  .cypha-member .shadow {
    position: relative;
  }
  .yao {
    top: -10px;
  }
  .yao .hover {
    left: -126px;
  }
  .yao .shadow {
    left: 6px;
    bottom: 33px;
  }
  .jade .hover {
    left: -139px;
  }
  .jade .shadow {
    left: 1px;
    bottom: 30px;
  }
  .marshall .hover {
    left: -70px;
  }
  .marshall .shadow {
    left: 0px;
    bottom: 32px;
  }
  .clam .hover {
    left: -67px;
  }
  .clam .shadow {
    left: 1px;
    bottom: 33px;
  }
  .alex {
    top: -10px;
  }
  .alex .hover {
    left: 18px;
  }
  .alex .shadow {
    left: -1px;
    bottom: 31px;
  }
  .dan .hover {
    left: 0px;
  }
  .dan .shadow {
    left: -4px;
    bottom: 33px;
  }
  .shaan .hover {
    left: -140px;
  }
  .shaan .shadow {
    left: 0px;
    bottom: 30px;
  }
  .isaac .hover {
    left: -90px;
  }
  .isaac .shadow {
    left: 6px;
    bottom: 30px;
  }
  .jayne .hover {
    left: -11px;
  }
  .jayne .shadow {
    left: -3px;
    bottom: 31px;
  }
  .fb_iframe_widget {
    display: block ;
    margin: auto !important;
    left: 0;
    right: 0;
    text-align: center;
  }
}
.loader {
  display: block;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -154px;
}
.loader img {
  -webkit-animation: rotate 1.4s linear infinite;
  -moz-animation: rotate 1.4s linear infinite;
  -o-animation: rotate 1.4s linear infinite;
  animation: rotate 1.4s linear infinite;
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.pace .pace-progress {
  background: #ffffff;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;
  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}
.pace-inactive {
  display: none;
}
.fb_iframe_widget {
  width: 92px;
  height: 20px;
  top: 5px;
  overflow: hidden;
  margin-left: 4px;
}
/*# sourceMappingURL=/css/main.css.map */