body {
  padding: 0;
  margin: 0; }

#ad {
  background: #e1e1e1;
  padding: 0;
  position: relative;
  overflow: hidden; }

.stretch-bg {
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

/* Mixins */
/*
 * Transition
 @include transition(all .2s ease);
 */
/*
 * Generic transform
 @include transform(translate(1px, 1px));
 */
/*
 * Generic Translate
 @include translate(1px, 1px);
 */
/*
 * Generic transform
 @include transform-origin(top left);
 */
/*
 * Opacity
 @include opacity(0.8);
 */
/*
 * Scale
 @include scale(0.8);
 */
/*
 * text-shadow
 @include text-shadow(1px, 1px, 1px, #000000);
 */
/*
 * Box Shadow
 @include box-shadow(1px, 1px, 1px, #e1e1e1, false);
 */
/*
 * Clearfix
.container-with-floated-children {
  @extend %clearfix;
}
 */
/* Social Bar Module */
#social-bar {
  display: block;
  width: 6%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 2; }
  #social-bar.float-left {
    left: 0;
    text-align: left; }
    #social-bar.float-left a:hover {
      padding-left: 14px; }
  #social-bar.float-right {
    right: 0;
    text-align: right; }
    #social-bar.float-right .spacer ul li, #social-bar.float-right a ul li {
      text-align: right; }
      #social-bar.float-right .spacer ul li a, #social-bar.float-right a ul li a {
        display: inline-block;
        padding-right: 14px; }
    #social-bar.float-right a:hover {
      transform: translate(-14px); }
  #social-bar .spacer {
    display: table;
    width: 100%;
    height: 100%; }
    #social-bar .spacer ul {
      padding: 0;
      margin: 0;
      width: 100%;
      display: table-cell;
      vertical-align: middle; }
      #social-bar .spacer ul li {
        width: 100%;
        list-style-type: none; }
        #social-bar .spacer ul li a {
          display: block;
          width: 100%;
          transition: 0.2s ease-in-out;
          position: relative; }
          #social-bar .spacer ul li a img {
            margin: 25% 25% 15% 25%; }
          #social-bar .spacer ul li a.link-facebook {
            background: #3B5998; }
          #social-bar .spacer ul li a.link-google {
            background: #DC4E41; }
          #social-bar .spacer ul li a.link-instagram {
            background: #125688; }
          #social-bar .spacer ul li a.link-linkedin {
            background: #0077B5; }
          #social-bar .spacer ul li a.link-twitter {
            background: #55ACEE; }
          #social-bar .spacer ul li a.link-wechat {
            background: #7BB32E; }
          #social-bar .spacer ul li a.link-weibo {
            background: #E6162D; }
          #social-bar .spacer ul li a.link-youtube {
            background: #CD201F; }
          @media (max-height: 300px) {
            #social-bar .spacer ul li a {
              width: 8px;
              height: 8px;
              padding: 4px; }
              #social-bar .spacer ul li a img {
                display: block; } }

/* Top Bar Module */
#topbar {
  position: absolute;
  top: 0;
  width: 100%;
  height: 12%;
  display: table;
  z-index: 3; }
  @media (max-height: 200px) {
    #topbar {
      height: 11%; } }
  #topbar .links-wrapper {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle; }
    #topbar .links-wrapper.float-left .social-link {
      float: left;
      margin-left: 3px; }
    #topbar .links-wrapper.float-right .social-link {
      float: right;
      margin-right: 3px; }
    #topbar .links-wrapper.float-left .share-icon {
      float: left;
      margin-right: 2px;
      margin-left: 8px; }
    #topbar .links-wrapper.float-right .share-icon {
      float: right;
      margin-right: 8px;
      margin-left: 2px; }
  #topbar .social-link {
    display: block;
    position: relative;
    width: 5%;
    height: 50%;
    float: left;
    z-index: 6;
    background-size: auto 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
    #topbar .social-link:hover {
      -moz-transform: scale(0.9);
      -o-transform: scale(0.9);
      -ms-transform: scale(0.9);
      -webkit-transform: scale(0.9);
      transform: scale(0.9); }
    #topbar .social-link img {
      display: table-cell;
      vertical-align: middle;
      height: 100%; }
  #topbar .share-icon img {
    width: 100%;
    height: auto;
    position: relative;
    top: -25%; }
  #topbar .share-icon:hover {
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1); }
  #topbar .timed-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }

/* Bottom Bar Module */
#bottombar {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 12%;
  display: table;
  z-index: 3; }
  #bottombar .links-wrapper {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle; }
    #bottombar .links-wrapper.float-left .social-link {
      float: left;
      margin-left: 3px; }
    #bottombar .links-wrapper.float-right .social-link {
      float: right;
      margin-right: 3px; }
    #bottombar .links-wrapper.float-left .share-icon {
      float: left;
      margin-right: 2px;
      margin-left: 8px; }
    #bottombar .links-wrapper.float-right .share-icon {
      float: right;
      margin-right: 8px;
      margin-left: 2px; }
  #bottombar .social-link {
    display: block;
    position: relative;
    width: 5%;
    height: 50%;
    float: left;
    z-index: 6;
    background-size: auto 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
    #bottombar .social-link:hover {
      -moz-transform: scale(0.9);
      -o-transform: scale(0.9);
      -ms-transform: scale(0.9);
      -webkit-transform: scale(0.9);
      transform: scale(0.9); }
    #bottombar .social-link img {
      display: table-cell;
      vertical-align: middle;
      height: 100%; }
  #bottombar .share-icon img {
    width: 100%;
    height: auto;
    position: relative;
    top: -25%; }
  #bottombar .share-icon:hover {
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1); }
  #bottombar .timed-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }

/* End Frame Module */
#endframe {
  visibility: hidden;
  opacity: 0;
  overflow: hidden; }
  #endframe.transition {
    transition: 0.2s ease-in-out; }
  #endframe.open {
    visibility: visible;
    opacity: 1; }

/* Gallery Module */
#gallery .nav {
  display: block;
  position: absolute;
  width: 10%;
  height: 100%;
  top: 0;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
  #gallery .nav:hover {
    background-color: #565656;
    opacity: 0.7; }
  #gallery .nav.nav-prev {
    left: 0; }
  #gallery .nav.nav-next {
    right: 0; }

#gallery .nav-wrapper {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30%;
  display: table; }
  #gallery .nav-wrapper .nav-scroll-wrapper {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle; }
    #gallery .nav-wrapper .nav-scroll-wrapper .nav-scroll {
      position: absolute;
      top: 20%;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      z-index: 2; }
  #gallery .nav-wrapper .thumbnail-wrapper {
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 5px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
    #gallery .nav-wrapper .thumbnail-wrapper.active {
      opacity: 0.8;
      -moz-transform: scale(1.1);
      -o-transform: scale(1.1);
      -ms-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
      -webkit-box-shadow: 0 0 5px #000000;
      -moz-box-shadow: 0 0 5px #000000;
      box-shadow: 0 0 5px #000000; }
    #gallery .nav-wrapper .thumbnail-wrapper img, #gallery .nav-wrapper .thumbnail-wrapper video {
      width: 100%; }
    @media (max-height: 400px) {
      #gallery .nav-wrapper .thumbnail-wrapper {
        width: 80px;
        height: 80px; } }
    @media (max-height: 300px) {
      #gallery .nav-wrapper .thumbnail-wrapper {
        width: 60px;
        height: 60px; } }

#gallery .media-wrapper {
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 70%; }
  #gallery .media-wrapper .scroll-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
  #gallery .media-wrapper .media-item {
    float: left;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    padding: 5px 0 0 0; }
    #gallery .media-wrapper .media-item img,
    #gallery .media-wrapper .media-item video {
      display: block;
      margin: 0 auto;
      align-self: center; }
    #gallery .media-wrapper .media-item img {
      height: 100%; }
    #gallery .media-wrapper .media-item video {
      width: 100%; }
      @media (max-height: 400px) {
        #gallery .media-wrapper .media-item video {
          height: 100%; } }

/* Countdown Module */
#countdown {
  position: absolute;
  bottom: 12%;
  left: 12%;
  height: 75px;
  text-shadow: 0 0 5px #000000; }
  #countdown .countdownTitle {
    float: left;
    position: relative;
    top: 5%;
    margin-right: 10px; }
  #countdown .countdownTable {
    float: right; }
  #countdown table {
    text-align: center; }