* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

html {
  height: 100%;
  font-size: 62.5%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Open Sans Regular", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.5rem;
  background-color: #f5f6fa;
  color: #E0D2E5;
}

h1 {
  font-family: "Hemi Head", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 3.2rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 3rem;
}

h1:first-child {
  margin-top: 0;
}

h2, h3, h4, h5, h6, .h4 {
  font-family: "Hemi Head", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 1rem;
}

h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, .h4:first-child {
  margin-top: 0;
}

h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .h4 + p {
  margin-top: -1.4rem;
}

h3 {
  font-size: 2rem;
}

h4, .h4 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

h5 {
  font-size: 1.5rem;
  color: #E0D2E5;
  margin-bottom: .4rem;
}

h6 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

p {
  font-size: 1.5rem;
  margin-top: 0;
  line-height: 1.5;
}

p.large {
  font-size: 116%;
}

@font-face {
  font-family: 'Hemi Head';
  src: url("../fonts/hemihead.ttf") format("truetype"), url("../fonts/hemihead.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans Regular';
  src: url("../fonts/OpenSans-Regular.ttf") format("truetype"), url("../fonts/OpenSans-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans Semibold';
  src: url("../fonts/OpenSans-SemiBold.ttf") format("truetype"), url("../fonts/OpenSans-SemiBold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans Bold';
  src: url("../fonts/OpenSans-Bold.ttf") format("truetype"), url("../fonts/OpenSans-Bold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local("Material Icons"), local("MaterialIcons-Regular"), url("../fonts/MaterialIcons-Regular.woff2") format("woff2");
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
}

footer {
  width: 100%;
  height: 7.8rem;
  background-color: #000;
}

.container {
  position: relative;
  width: 100%;
  max-width: 1180px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.container:before {
  content: " ";
  display: table;
}

.container:after {
  content: " ";
  display: table;
  clear: both;
}

.row {
  position: relative;
  margin-left: -15px;
  margin-right: -15px;
}

.row:before {
  content: " ";
  display: table;
}

.row:after {
  content: " ";
  display: table;
  clear: both;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  float: left;
  min-height: 0.1rem;
  width: 8.3333%;
  padding-left: 15px;
  padding-right: 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33333%;
}

.col-5 {
  width: 41.66667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33333%;
}

.col-8 {
  width: 66.66667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33333%;
}

.col-11 {
  width: 91.66667%;
}

.col-12 {
  width: 100%;
}

.col-offset-1 {
  margin-left: 8.33333%;
}

.col-offset-2 {
  margin-left: 16.66667%;
}

.col-offset-3 {
  margin-left: 25%;
}

.col-offset-4 {
  margin-left: 33.33333%;
}

.col-offset-5 {
  margin-left: 41.66667%;
}

.col-offset-6 {
  margin-left: 50%;
}

.col-offset-7 {
  margin-left: 58.33333%;
}

.col-offset-8 {
  margin-left: 66.66667%;
}

.col-offset-9 {
  margin-left: 75%;
}

.col-offset-10 {
  margin-left: 83.33333%;
}

.col-offset-11 {
  margin-left: 91.66667%;
}

.col-offset-12 {
  margin-left: 100%;
}

header {
  width: 100%;
  height: 9rem;
  padding: 2rem 3rem;
  background-color: #181821;
  text-align: center;
  overflow: hidden;
}

.logo {
  float: left;
  margin-top: -.1rem;
  margin-left: -.5rem;
  margin-right: 6.8rem;
  cursor: pointer;
}

.logo-text {
  position: absolute;
  left: 8.2rem;
  top: 5.3rem;
  font-size: 2rem;
  font-family: "Hemi Head", Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #fff;
  text-shadow: 0 0.2rem 0.6rem black;
}

.header-settings {
  float: right;
  margin-top: 1.4rem;
  margin-right: 3rem;
}

.header-settings .material-icons {
  color: #fff;
  font-size: 2.4rem;
  margin: 0 .6rem;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  cursor: pointer;
}

.header-settings .material-icons.active {
  color: #f15b25;
}

.header-settings .material-icons:hover {
  color: #f15b25;
}

.pc-number {
  float: right;
  margin-top: .3rem;
  font-family: "Hemi Head", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 3.8rem;
  color: #fff;
}

.pc-number span {
  color: #f15b25;
}

.top-border, .bottom-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: .4rem;
  background-color: #f15b25;
}

.top-border .border-notch, .bottom-border .border-notch {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -7rem;
  width: 14rem;
  height: .8rem;
  background-color: #f15b25;
}

.top-border .border-notch:before, .top-border .border-notch:after, .bottom-border .border-notch:before, .bottom-border .border-notch:after {
  content: "";
  position: absolute;
  top: 0;
  left: -.8rem;
  width: 0;
  height: 0;
  border-left: .8rem solid transparent;
  border-right: .8rem solid transparent;
  border-top: 0.8rem solid #f15b25;
}

.top-border .border-notch:after, .bottom-border .border-notch:after {
  left: auto;
  right: -.8rem;
}

.bottom-border {
  top: auto;
  bottom: 0;
  background-color: #824fb3;
}

.bottom-border .border-notch {
  top: auto;
  bottom: 0;
  background-color: #824fb3;
}

.bottom-border .border-notch:before, .bottom-border .border-notch:after {
  content: "";
  border-top: 0;
  border-bottom: 0.8rem solid #824fb3;
}

.main-wrapper {
  position: relative;
  width: 100%;
  height: calc(100vh - 16.8rem);
  overflow: hidden;
}

.main-wrapper:before, .main-wrapper:after {
  content: "";
  display: table;
}

.main-wrapper:after {
  clear: both;
}

.content {
  float: left;
  width: calc(100% - 34rem);
  height: 100%;
  background-color: #3d2f53;
  background-image: url("../img/bg.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  overflow: hidden;
}

.subpage-frame {
  float: left;
  width: 100%;
  height: 100%;
  background-color: #3d2f53;
  background-image: url("../img/bg.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  overflow: hidden;
}

.main-content {
  position: relative;
  float: left;
  width: calc(100% - 34rem);
  height: 100%;
  padding: 3rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.main-content::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0.4rem rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 0 0.4rem rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.3);
}

.main-content::-webkit-scrollbar {
  width: .6rem;
}

.main-content::-webkit-scrollbar-thumb {
  border-radius: 0.3rem;
  background-color: #824fb3;
}

nav {
  display: inline-block;
  width: 100rem;
}

nav .nav-item {
  position: relative;
  float: left;
  width: 20%;
  height: 5.2rem;
  padding: .8rem 1rem;
  padding-left: .2rem;
  border: .2rem solid #824FB3;
  border-right-width: 0;
  background-color: rgba(130, 79, 179, 0.14);
  color: #fff;
  font-family: "Hemi Head", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 2.2rem;
  text-align: center;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  cursor: pointer;
}

nav .nav-item .material-icons {
  position: relative;
  top: .4rem;
  margin-right: .2rem;
}

nav .nav-item:first-child {
  border-radius: 0.3rem 0 0 0.3rem;
}

nav .nav-item:last-child {
  border-right-width: .2rem;
  border-radius: 0 0.3rem 0.3rem 0;
}

nav .nav-item:hover {
  background-color: rgba(130, 79, 179, 0.3);
}

nav .nav-item.active {
  border-color: #f15b25;
  background-color: rgba(241, 91, 37, 0.14);
  -webkit-box-shadow: 0.2rem 0 0 #f15b25;
          box-shadow: 0.2rem 0 0 #f15b25;
  z-index: 2;
}

iframe {
  display: none;
  width: 100%;
  height: 100%;
  border: none;
  overflow-x: hidden;
  overflow-y: auto;
}

iframe.on {
  display: block;
}

@-webkit-keyframes iframe {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes iframe {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

a {
  color: #fff;
  text-decoration: none;
  -webkit-transition: color .2s ease;
  transition: color .2s ease;
  cursor: pointer;
}

a:hover {
  color: #f15b25;
  text-decoration: none;
}

a:focus {
  text-decoration: none;
  outline: none;
}

.advertise-bar {
  float: right;
  width: 34rem;
  height: 100vh;
  padding: 0;
  border-left: .1rem solid #271D36;
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(1.2rem);
          backdrop-filter: blur(1.2rem);
}

.advertise-bar .video-overlay-wrapper {
  position: absolute;
  bottom: 8rem;
  padding: 0 3rem;
  text-align: center;
  z-index: 2;
}

.advertise-bar .video-overlay-wrapper .button {
  position: relative;
  width: 100%;
  margin-bottom: 3rem;
}

.advertise-bar .video-overlay-wrapper .price-box {
  position: relative;
  display: inline-block;
  width: 23rem;
  height: 12rem;
  padding-top: .6rem;
  margin-bottom: 1.6rem;
  background-color: #f15b25;
  font-family: "Hemi Head", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 9rem;
  color: #fff;
  text-align: center;
}

.advertise-bar .video-overlay-wrapper .price-box span {
  color: #fec7b2;
  font-size: 6.8rem;
}

.advertise-bar .video-overlay-wrapper .price-box:before, .advertise-bar .video-overlay-wrapper .price-box:after {
  content: "";
  position: absolute;
  top: 0;
  left: -2rem;
  width: 0;
  height: 0;
  border-left: 2rem solid transparent;
  border-right: 2rem solid transparent;
  border-bottom: 12rem solid #f15b25;
}

.advertise-bar .video-overlay-wrapper .price-box:after {
  left: auto;
  right: -2rem;
  border-bottom: none;
  border-top: 12rem solid #f15b25;
}

.advertise-bar .video-overlay-wrapper .save-text {
  font-family: "Open Sans Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.8rem;
}

.fade-in {
  -webkit-animation: fade-in 1.2s;
          animation: fade-in 1.2s;
}

@-webkit-keyframes fade-in {
  0% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  10% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  10% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

.fade-in-2 {
  -webkit-animation: fade-in-2 1.4s;
          animation: fade-in-2 1.4s;
}

@-webkit-keyframes fade-in-2 {
  0% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in-2 {
  0% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

.fade-in-3 {
  -webkit-animation: fade-in-3 1.6s;
          animation: fade-in-3 1.6s;
}

@-webkit-keyframes fade-in-3 {
  0% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  30% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in-3 {
  0% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  30% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

.fade-in-4 {
  -webkit-animation: fade-in-4 1.8s;
          animation: fade-in-4 1.8s;
}

@-webkit-keyframes fade-in-4 {
  0% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  45% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in-4 {
  0% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  45% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

.fade-in-5 {
  -webkit-animation: fade-in-5 1.8s;
          animation: fade-in-5 1.8s;
}

@-webkit-keyframes fade-in-5 {
  0% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in-5 {
  0% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateY(-0.8rem);
            transform: translateY(-0.8rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

.app-cover-wrapper {
  margin: 3rem -1.3rem;
}

.app-box {
  position: relative;
  float: left;
  width: calc(20% - 2.6rem);
  border-radius: 0.3rem;
  margin: 0 1.3rem;
  margin-bottom: 3rem;
  background-color: #3D3D54;
  -webkit-box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.2);
  overflow: hidden;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  cursor: pointer;
}

.app-box:hover {
  -webkit-transform: translateY(-0.6rem);
          transform: translateY(-0.6rem);
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
          box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
}

.app-box .app-box-cover {
  width: 100%;
  height: 21rem;
  background-color: rgba(0, 0, 0, 0.12);
  background-size: 76%;
  background-position: center;
  background-repeat: no-repeat;
}

.app-box .app-box-info {
  padding: 1rem 1.4rem;
}

.app-box .app-box-info .app-box-name {
  margin-bottom: .2rem;
  font-size: 1.4rem;
  font-family: "Open Sans Bold", Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-category {
  position: relative;
  display: inline-block;
  width: 100%;
  padding-left: 1.5rem;
}

.app-category h3 {
  margin-bottom: 1rem;
}

.button, .button-small, .button-large, .button-mega, .button-header, input[type="button"], input[type="submit"], button[type="button"] {
  position: relative;
  display: inline-block;
  height: 5.6rem;
  min-width: 8.4rem;
  padding: 1.3rem 2rem;
  border: 0.2rem solid #f15b25;
  border-radius: 0.3rem;
  background-color: rgba(241, 91, 37, 0.14);
  font-family: "Hemi Head", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: #fff;
  text-align: center;
  text-decoration: none;
  vertical-align: top;
  margin-right: 2rem;
  margin-bottom: 2rem;
  -webkit-box-shadow: 0 0.8rem 1.4rem rgba(241, 91, 37, 0.08);
          box-shadow: 0 0.8rem 1.4rem rgba(241, 91, 37, 0.08);
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  cursor: pointer;
}

.button:hover, .button-small:hover, .button-large:hover, .button-mega:hover, .button-header:hover, input[type="button"]:hover, input[type="submit"]:hover, button[type="button"]:hover {
  background-color: rgba(241, 91, 37, 0.5);
  -webkit-box-shadow: 0 0.8rem 3rem rgba(241, 91, 37, 0.2);
          box-shadow: 0 0.8rem 3rem rgba(241, 91, 37, 0.2);
}

.button:active, .button:focus, .button-small:active, .button-small:focus, .button-large:active, .button-large:focus, .button-mega:active, .button-mega:focus, .button-header:active, .button-header:focus, input[type="button"]:active, input[type="button"]:focus, input[type="submit"]:active, input[type="submit"]:focus, button[type="button"]:active, button[type="button"]:focus {
  background-color: #f15b25;
  -webkit-transition: all 0ms ease;
  transition: all 0ms ease;
}

.button.button-icon, .button-small.button-icon, .button-large.button-icon, .button-mega.button-icon, .button-header.button-icon, input[type="button"].button-icon, input[type="submit"].button-icon, button[type="button"].button-icon {
  padding-left: 7.2rem;
}

.button.button-icon:before, .button-small.button-icon:before, .button-large.button-icon:before, .button-mega.button-icon:before, .button-header.button-icon:before, input[type="button"].button-icon:before, input[type="submit"].button-icon:before, button[type="button"].button-icon:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5.2rem;
  height: 5.2rem;
  background-color: #f15b25;
  z-index: 2;
}

.button.button-icon:after, .button-small.button-icon:after, .button-large.button-icon:after, .button-mega.button-icon:after, .button-header.button-icon:after, input[type="button"].button-icon:after, input[type="submit"].button-icon:after, button[type="button"].button-icon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 4.2rem;
  width: 0;
  height: 0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: 5.2rem solid #f15b25;
}

.button.button-icon .material-icons, .button-small.button-icon .material-icons, .button-large.button-icon .material-icons, .button-mega.button-icon .material-icons, .button-header.button-icon .material-icons, input[type="button"].button-icon .material-icons, input[type="submit"].button-icon .material-icons, button[type="button"].button-icon .material-icons {
  position: absolute;
  top: 1.1rem;
  left: 1.2rem;
  font-size: 3.1rem;
  z-index: 4;
}

.button.button-strong, .button-small.button-strong, .button-large.button-strong, .button-mega.button-strong, .button-header.button-strong, input[type="button"].button-strong, input[type="submit"].button-strong, button[type="button"].button-strong {
  background-color: rgba(241, 91, 37, 0.7);
  text-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.6);
}

.button.button-strong .material-icons, .button-small.button-strong .material-icons, .button-large.button-strong .material-icons, .button-mega.button-strong .material-icons, .button-header.button-strong .material-icons, input[type="button"].button-strong .material-icons, input[type="submit"].button-strong .material-icons, button[type="button"].button-strong .material-icons {
  text-shadow: none;
}

.button.button-strong:active, .button-small.button-strong:active, .button-large.button-strong:active, .button-mega.button-strong:active, .button-header.button-strong:active, input[type="button"].button-strong:active, input[type="submit"].button-strong:active, button[type="button"].button-strong:active {
  background-color: #f15b25;
}

.button.disabled, .button[disabled], .button-small.disabled, .button-small[disabled], .button-large.disabled, .button-large[disabled], .button-mega.disabled, .button-mega[disabled], .button-header.disabled, .button-header[disabled], input[type="button"].disabled, input[type="button"][disabled], input[type="submit"].disabled, input[type="submit"][disabled], button[type="button"].disabled, button[type="button"][disabled] {
  opacity: 0.5;
  cursor: default;
  filter: grayscale(30%);
  -webkit-filter: grayscale(30%);
}

.button.disabled:hover, .button[disabled]:hover, .button-small.disabled:hover, .button-small[disabled]:hover, .button-large.disabled:hover, .button-large[disabled]:hover, .button-mega.disabled:hover, .button-mega[disabled]:hover, .button-header.disabled:hover, .button-header[disabled]:hover, input[type="button"].disabled:hover, input[type="button"][disabled]:hover, input[type="submit"].disabled:hover, input[type="submit"][disabled]:hover, button[type="button"].disabled:hover, button[type="button"][disabled]:hover {
  background-color: #2E3740;
  border-color: #2E3740;
}

.button.button-secondary, .button-small.button-secondary, .button-large.button-secondary, .button-mega.button-secondary, .button-header.button-secondary, input[type="button"].button-secondary, input[type="submit"].button-secondary, button[type="button"].button-secondary {
  border-color: #824fb3;
  background-color: rgba(130, 79, 179, 0.14);
  -webkit-box-shadow: 0 0.8rem 1.4rem rgba(130, 79, 179, 0.08);
          box-shadow: 0 0.8rem 1.4rem rgba(130, 79, 179, 0.08);
}

.button.button-secondary:hover, .button-small.button-secondary:hover, .button-large.button-secondary:hover, .button-mega.button-secondary:hover, .button-header.button-secondary:hover, input[type="button"].button-secondary:hover, input[type="submit"].button-secondary:hover, button[type="button"].button-secondary:hover {
  background-color: rgba(130, 79, 179, 0.5);
  -webkit-box-shadow: 0 0.8rem 3rem rgba(130, 79, 179, 0.2);
          box-shadow: 0 0.8rem 3rem rgba(130, 79, 179, 0.2);
}

.button.button-secondary:active, .button.button-secondary:focus, .button-small.button-secondary:active, .button-small.button-secondary:focus, .button-large.button-secondary:active, .button-large.button-secondary:focus, .button-mega.button-secondary:active, .button-mega.button-secondary:focus, .button-header.button-secondary:active, .button-header.button-secondary:focus, input[type="button"].button-secondary:active, input[type="button"].button-secondary:focus, input[type="submit"].button-secondary:active, input[type="submit"].button-secondary:focus, button[type="button"].button-secondary:active, button[type="button"].button-secondary:focus {
  background-color: #824fb3;
}

.button.button-secondary.button-icon:before, .button-small.button-secondary.button-icon:before, .button-large.button-secondary.button-icon:before, .button-mega.button-secondary.button-icon:before, .button-header.button-secondary.button-icon:before, input[type="button"].button-secondary.button-icon:before, input[type="submit"].button-secondary.button-icon:before, button[type="button"].button-secondary.button-icon:before {
  background-color: #824fb3;
}

.button.button-secondary.button-icon:after, .button-small.button-secondary.button-icon:after, .button-large.button-secondary.button-icon:after, .button-mega.button-secondary.button-icon:after, .button-header.button-secondary.button-icon:after, input[type="button"].button-secondary.button-icon:after, input[type="submit"].button-secondary.button-icon:after, button[type="button"].button-secondary.button-icon:after {
  border-top: 5.2rem solid #824fb3;
}

.button.button-secondary.button-large.button-icon:after, .button-small.button-secondary.button-large.button-icon:after, .button-large.button-secondary.button-large.button-icon:after, .button-mega.button-secondary.button-large.button-icon:after, .button-header.button-secondary.button-large.button-icon:after, input[type="button"].button-secondary.button-large.button-icon:after, input[type="submit"].button-secondary.button-large.button-icon:after, button[type="button"].button-secondary.button-large.button-icon:after {
  border-top: 6.4rem solid #824fb3;
}

.button.success, .button-small.success, .button-large.success, .button-mega.success, .button-header.success, input[type="button"].success, input[type="submit"].success, button[type="button"].success {
  border-color: #39C38D;
  color: #FFF;
  background-color: #39C38D;
}

.button.success:hover, .button-small.success:hover, .button-large.success:hover, .button-mega.success:hover, .button-header.success:hover, input[type="button"].success:hover, input[type="submit"].success:hover, button[type="button"].success:hover {
  border-color: #3CCB93;
  background-color: #3CCB93;
}

.button.warning, .button-small.warning, .button-large.warning, .button-mega.warning, .button-header.warning, input[type="button"].warning, input[type="submit"].warning, button[type="button"].warning {
  border-color: #FFA700;
  color: #FFF;
  background-color: #FFA700;
}

.button.warning:hover, .button-small.warning:hover, .button-large.warning:hover, .button-mega.warning:hover, .button-header.warning:hover, input[type="button"].warning:hover, input[type="submit"].warning:hover, button[type="button"].warning:hover {
  border-color: #FFB220;
  background-color: #FFB220;
}

.button.danger, .button-small.danger, .button-large.danger, .button-mega.danger, .button-header.danger, input[type="button"].danger, input[type="submit"].danger, button[type="button"].danger {
  border-color: #ff4b46;
  background-color: rgba(255, 75, 70, 0.14);
  -webkit-box-shadow: 0 0.8rem 1.4rem rgba(255, 75, 70, 0.08);
          box-shadow: 0 0.8rem 1.4rem rgba(255, 75, 70, 0.08);
}

.button.danger:hover, .button-small.danger:hover, .button-large.danger:hover, .button-mega.danger:hover, .button-header.danger:hover, input[type="button"].danger:hover, input[type="submit"].danger:hover, button[type="button"].danger:hover {
  background-color: rgba(255, 75, 70, 0.5);
  -webkit-box-shadow: 0 0.8rem 3rem rgba(255, 75, 70, 0.2);
          box-shadow: 0 0.8rem 3rem rgba(255, 75, 70, 0.2);
}

.button.danger:active, .button.danger:focus, .button-small.danger:active, .button-small.danger:focus, .button-large.danger:active, .button-large.danger:focus, .button-mega.danger:active, .button-mega.danger:focus, .button-header.danger:active, .button-header.danger:focus, input[type="button"].danger:active, input[type="button"].danger:focus, input[type="submit"].danger:active, input[type="submit"].danger:focus, button[type="button"].danger:active, button[type="button"].danger:focus {
  background-color: #ff4b46;
}

.button.danger.button-icon:before, .button-small.danger.button-icon:before, .button-large.danger.button-icon:before, .button-mega.danger.button-icon:before, .button-header.danger.button-icon:before, input[type="button"].danger.button-icon:before, input[type="submit"].danger.button-icon:before, button[type="button"].danger.button-icon:before {
  background-color: #ff4b46;
}

.button.danger.button-icon:after, .button-small.danger.button-icon:after, .button-large.danger.button-icon:after, .button-mega.danger.button-icon:after, .button-header.danger.button-icon:after, input[type="button"].danger.button-icon:after, input[type="submit"].danger.button-icon:after, button[type="button"].danger.button-icon:after {
  border-top: 5.2rem solid #ff4b46;
}

.button::-moz-selection, .button-small::-moz-selection, .button-large::-moz-selection, .button-mega::-moz-selection, .button-header::-moz-selection, input[type="button"]::-moz-selection, input[type="submit"]::-moz-selection, button[type="button"]::-moz-selection {
  background: rgba(0, 0, 0, 0);
}

.button::selection, .button-small::selection, .button-large::selection, .button-mega::selection, .button-header::selection, input[type="button"]::selection, input[type="submit"]::selection, button[type="button"]::selection {
  background: rgba(0, 0, 0, 0);
}

.button.button-small, .button-small.button-small, .button-large.button-small, .button-mega.button-small, .button-header.button-small, input[type="button"].button-small, input[type="submit"].button-small, button[type="button"].button-small {
  height: 4.6rem;
  padding: 1rem 1.8rem;
  font-size: 1.8rem;
}

.button.button-small.button-icon, .button-small.button-small.button-icon, .button-large.button-small.button-icon, .button-mega.button-small.button-icon, .button-header.button-small.button-icon, input[type="button"].button-small.button-icon, input[type="submit"].button-small.button-icon, button[type="button"].button-small.button-icon {
  padding-left: 6.2rem;
}

.button.button-small.button-icon:before, .button-small.button-small.button-icon:before, .button-large.button-small.button-icon:before, .button-mega.button-small.button-icon:before, .button-header.button-small.button-icon:before, input[type="button"].button-small.button-icon:before, input[type="submit"].button-small.button-icon:before, button[type="button"].button-small.button-icon:before {
  width: 4.2rem;
  height: 4.2rem;
}

.button.button-small.button-icon:after, .button-small.button-small.button-icon:after, .button-large.button-small.button-icon:after, .button-mega.button-small.button-icon:after, .button-header.button-small.button-icon:after, input[type="button"].button-small.button-icon:after, input[type="submit"].button-small.button-icon:after, button[type="button"].button-small.button-icon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 3.2rem;
  width: 0;
  height: 0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: 4.2rem solid #f15b25;
}

.button.button-small.button-icon .material-icons, .button-small.button-small.button-icon .material-icons, .button-large.button-small.button-icon .material-icons, .button-mega.button-small.button-icon .material-icons, .button-header.button-small.button-icon .material-icons, input[type="button"].button-small.button-icon .material-icons, input[type="submit"].button-small.button-icon .material-icons, button[type="button"].button-small.button-icon .material-icons {
  position: absolute;
  top: .8rem;
  left: 1rem;
  font-size: 2.6rem;
  z-index: 4;
}

.button.button-small.button-secondary.button-icon:after, .button-small.button-small.button-secondary.button-icon:after, .button-large.button-small.button-secondary.button-icon:after, .button-mega.button-small.button-secondary.button-icon:after, .button-header.button-small.button-secondary.button-icon:after, input[type="button"].button-small.button-secondary.button-icon:after, input[type="submit"].button-small.button-secondary.button-icon:after, button[type="button"].button-small.button-secondary.button-icon:after {
  border-top: 4.2rem solid #824fb3;
}

.button.button-large, .button-small.button-large, .button-large.button-large, .button-mega.button-large, .button-header.button-large, input[type="button"].button-large, input[type="submit"].button-large, button[type="button"].button-large {
  height: 6.6rem;
  min-width: 8.4rem;
  padding: 1.6rem 4rem;
  font-size: 2.6rem;
}

.button.button-large.button-icon, .button-small.button-large.button-icon, .button-large.button-large.button-icon, .button-mega.button-large.button-icon, .button-header.button-large.button-icon, input[type="button"].button-large.button-icon, input[type="submit"].button-large.button-icon, button[type="button"].button-large.button-icon {
  padding-left: 9.8rem;
}

.button.button-large.button-icon:before, .button-small.button-large.button-icon:before, .button-large.button-large.button-icon:before, .button-mega.button-large.button-icon:before, .button-header.button-large.button-icon:before, input[type="button"].button-large.button-icon:before, input[type="submit"].button-large.button-icon:before, button[type="button"].button-large.button-icon:before {
  width: 6.2rem;
  height: 6.2rem;
}

.button.button-large.button-icon:after, .button-small.button-large.button-icon:after, .button-large.button-large.button-icon:after, .button-mega.button-large.button-icon:after, .button-header.button-large.button-icon:after, input[type="button"].button-large.button-icon:after, input[type="submit"].button-large.button-icon:after, button[type="button"].button-large.button-icon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 4.8rem;
  width: 0;
  height: 0;
  border-left: 1.4rem solid transparent;
  border-right: 1.4rem solid transparent;
  border-top: 6.4rem solid #f15b25;
}

.button.button-large.button-icon .material-icons, .button-small.button-large.button-icon .material-icons, .button-large.button-large.button-icon .material-icons, .button-mega.button-large.button-icon .material-icons, .button-header.button-large.button-icon .material-icons, input[type="button"].button-large.button-icon .material-icons, input[type="submit"].button-large.button-icon .material-icons, button[type="button"].button-large.button-icon .material-icons {
  position: absolute;
  top: 1rem;
  left: 1.2rem;
  font-size: 4.2rem;
  z-index: 4;
}

.button.button-large.danger:after, .button-small.button-large.danger:after, .button-large.button-large.danger:after, .button-mega.button-large.danger:after, .button-header.button-large.danger:after, input[type="button"].button-large.danger:after, input[type="submit"].button-large.danger:after, button[type="button"].button-large.danger:after {
  border-top: 6.4rem solid #ff4b46;
}

.button.button-logout, .button-small.button-logout, .button-large.button-logout, .button-mega.button-logout, .button-header.button-logout, input[type="button"].button-logout, input[type="submit"].button-logout, button[type="button"].button-logout {
  position: absolute;
  bottom: 3.2rem;
  left: 3rem;
  right: 1rem;
}

.bottom-button-wrapper {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0rem;
  padding-top: 3rem;
  margin-left: -3rem;
  margin-right: -3rem;
  padding-left: 3rem;
  padding-right: 3rem;
  padding-bottom: 3rem;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(46, 36, 60, 0)), color-stop(22%, #2e243c), color-stop(74%, #2e243c), to(rgba(46, 36, 60, 0)));
  background-image: linear-gradient(0deg, rgba(46, 36, 60, 0) 0%, #2e243c 22%, #2e243c 74%, rgba(46, 36, 60, 0) 100%);
}

.bottom-button-wrapper .button {
  margin-bottom: 0;
}

.data, .data-header {
  margin-bottom: .4rem;
}

.data:before, .data:after, .data-header:before, .data-header:after {
  content: "";
  display: table;
}

.data:after, .data-header:after {
  clear: both;
}

.data .data-first, .data-header .data-first {
  float: left;
  max-width: 22.6rem;
  padding-right: .7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data .data-last, .data-header .data-last {
  float: right;
  padding-left: .7rem;
  color: #fff;
}

.data .data-unit, .data-header .data-unit {
  float: right;
  padding-left: .4rem;
}

.data .material-icons, .data-header .material-icons {
  position: relative;
  top: -.2rem;
  vertical-align: top;
}

.data-header {
  font-family: "Open Sans Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #fff;
}

.data-seperator {
  position: relative;
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-bottom: 0.1rem solid rgba(0, 0, 0, 0.22);
}

.order-scroll-wrapper {
  margin-left: -3rem;
  margin-right: -3rem;
  padding: 0 3rem;
  max-height: calc(100% - 33rem);
  overflow-x: hidden;
  overflow-y: auto;
}

.order-scroll-wrapper::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0.4rem rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 0 0.4rem rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.3);
}

.order-scroll-wrapper::-webkit-scrollbar {
  width: .6rem;
}

.order-scroll-wrapper::-webkit-scrollbar-thumb {
  border-radius: 0.3rem;
  background-color: #824fb3;
}

#secretBox {
  height: 0;
  overflow: hidden;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

#secretBox.active {
  height: 864px;
}

#secretBox2 {
  height: 0;
  overflow: hidden;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

#secretBox2.active {
  height: 236px;
}

.main-carousel {
  cursor: -webkit-grab;
  cursor: grab;
}

.main-carousel:focus {
  outline: none;
  border: none;
}

.event {
  position: relative;
  width: 34rem;
  height: 40rem;
  margin-bottom: 3rem;
  margin-right: 3rem;
  border-radius: 0.3rem;
  color: #fff;
  background-color: #824fb3;
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.event.news {
  background-color: #f15b25;
}

.event.news .event-content .event-title {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  margin-bottom: 1.4rem;
}

.event.news .event-content .event-text {
  position: relative;
  color: #FFE5DB;
  line-height: 1.5;
}

.event.news .event-bg {
  opacity: .6;
}

.event.news .event-radial-overlay {
  background-image: radial-gradient(circle, rgba(241, 92, 34, 0) 0%, #f15c22 100%);
}

.event.news .event-overlay {
  bottom: auto;
  top: 0;
  height: 100%;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f15c22), to(rgba(241, 92, 255, 0)));
  background-image: linear-gradient(180deg, #f15c22 0%, rgba(241, 92, 255, 0) 100%);
}

.event .event-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 2.4rem;
  z-index: 4;
  text-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.6);
}

.event .event-content .event-date {
  position: absolute;
  top: 1rem;
  left: 2.2rem;
  font-family: "Open Sans Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 6rem;
  text-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.4);
}

.event .event-content .event-date span {
  display: block;
  padding-left: .2rem;
  margin-top: -1.5rem;
  font-size: 1.9rem;
  color: #E0D2E5;
}

.event .event-content .event-title {
  position: absolute;
  top: 67%;
  left: 2.4rem;
  width: calc(100% - 4.8rem);
  max-height: 8.1rem;
  font-size: 2rem;
  font-weight: 500;
  overflow: hidden;
}

.event .event-content .event-time {
  position: absolute;
  bottom: 2rem;
  left: 2.4rem;
}

.event .event-content .event-time span {
  color: #E0D2E5;
}

.event .event-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.3rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: .8;
  z-index: 1;
}

.event .event-radial-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.3rem;
  background-image: radial-gradient(circle, rgba(130, 79, 179, 0) 0%, #824fb3 100%);
  z-index: 2;
}

.event .event-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  border-radius: 0.3rem;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#824fb3), to(rgba(130, 79, 179, 0)));
  background-image: linear-gradient(0deg, #824fb3 0%, rgba(130, 79, 179, 0) 100%);
  opacity: .8;
  z-index: 3;
}

.advertisement {
  width: 100%;
  height: 35.2rem;
  padding: 3rem;
  border-radius: 0.3rem;
  background-color: #b08fcf;
  background-size: cover;
  font-family: "Hemi Head", Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #fff;
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.faq-category-wrapper {
  position: relative;
}

.faq-category-wrapper .faq-category {
  position: relative;
  float: left;
  width: 20%;
  height: 14rem;
  padding: 2.8rem 1rem;
  border: 0.2rem solid #f15b25;
  border-right-width: 0;
  margin-bottom: 2rem;
  background-color: rgba(241, 91, 37, 0.14);
  color: #fff;
  font-size: 1.8rem;
  font-family: "Open Sans Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
  text-align: center;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  -webkit-backdrop-filter: blur(1rem);
          backdrop-filter: blur(1rem);
  cursor: pointer;
}

.faq-category-wrapper .faq-category:hover {
  background-color: rgba(241, 91, 37, 0.5);
}

.faq-category-wrapper .faq-category.active {
  background-color: rgba(241, 91, 37, 0.7);
}

.faq-category-wrapper .faq-category:first-child {
  border-radius: 0.3rem 0 0 0.3rem;
}

.faq-category-wrapper .faq-category:last-child {
  border-radius: 0 0.3rem 0.3rem 0;
  border-right-width: .2rem;
}

.faq-category-wrapper .faq-category .material-icons {
  display: block;
  font-size: 4.4rem;
  margin-bottom: 1rem;
}

.faq-item {
  position: relative;
  width: 100%;
  max-height: 6.6rem;
  border: .2rem solid #824FB3;
  border-radius: 0.3rem;
  margin-bottom: 1rem;
  background-color: rgba(130, 79, 179, 0.14);
  overflow: hidden;
  -webkit-transition: max-height 200ms ease;
  transition: max-height 200ms ease;
  -webkit-backdrop-filter: blur(1rem);
          backdrop-filter: blur(1rem);
}

.faq-item.active {
  max-height: 30rem;
}

.faq-item.active .faq-header .down {
  display: none;
}

.faq-item.active .faq-header .up {
  display: block;
}

.faq-item .faq-header {
  position: relative;
  height: 6.4rem;
  padding: 1.7rem 2rem;
  border-bottom: .2rem solid #824FB3;
  font-family: "Hemi Head", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 2.2rem;
  color: #fff;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  cursor: pointer;
}

.faq-item .faq-header:hover {
  background-color: rgba(130, 79, 179, 0.5);
}

.faq-item .faq-header .material-icons {
  position: absolute;
  top: 1.6rem;
  right: 2rem;
  font-size: 3.1rem;
}

.faq-item .faq-header .down {
  display: block;
}

.faq-item .faq-header .up {
  display: none;
}

.faq-item .faq-content {
  padding: 2rem;
  padding-bottom: 1rem;
}

.game-cover-wrapper {
  margin: 3rem -1.3rem;
}

.game-box, .game-box-large {
  position: relative;
  float: left;
  width: calc(25% - 2.6rem);
  border-radius: 0.3rem;
  margin: 0 1.3rem;
  margin-bottom: 3rem;
  background-color: #3D3D54;
  -webkit-box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.2);
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.game-box:hover, .game-box-large:hover {
  -webkit-transform: translateY(-0.6rem);
          transform: translateY(-0.6rem);
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
          box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
}

.game-box:hover .game-box-cover, .game-box-large:hover .game-box-cover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}

.game-box .game-box-cover, .game-box-large .game-box-cover {
  width: 100%;
  height: 12.8rem;
  background-color: rgba(0, 0, 0, 0.2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.game-box .game-box-info, .game-box-large .game-box-info {
  padding: 1rem 1.4rem;
}

.game-box .game-box-info .game-box-name, .game-box-large .game-box-info .game-box-name {
  margin-bottom: .4rem;
  font-size: 1.4rem;
  font-family: "Open Sans Bold", Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-box .game-box-info .game-box-tags, .game-box-large .game-box-info .game-box-tags {
  margin-bottom: .3rem;
  font-size: 1.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-box-large {
  width: 100%;
  float: none;
  margin: 0;
}

.game-box-large .game-box-cover {
  height: 25rem;
}

.game-box-large .game-box-info {
  padding: 1.2rem 2rem;
}

.game-box-large .game-box-info .game-box-name {
  margin-bottom: .2rem;
  font-size: 1.7rem;
  font-family: "Open Sans Bold", Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #fff;
}

.game-box-large .game-box-info .game-box-tags {
  margin-bottom: .3rem;
  font-size: 1.4rem;
}

.order-bar {
  float: right;
  width: 34rem;
  height: 100vh;
  padding: 3rem;
  padding-bottom: 10rem;
  border-left: .1rem solid #271D36;
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(1.2rem);
          backdrop-filter: blur(1.2rem);
}

.order-scroll-wrapper {
  margin-left: -3rem;
  margin-right: -3rem;
  padding: 0 3rem;
  max-height: calc(100% - 33rem);
  overflow-x: hidden;
  overflow-y: auto;
}

.order-scroll-wrapper::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0.4rem rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 0 0.4rem rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.3);
}

.order-scroll-wrapper::-webkit-scrollbar {
  width: .6rem;
}

.order-scroll-wrapper::-webkit-scrollbar-thumb {
  border-radius: 0.3rem;
  background-color: #824fb3;
}

#secretBox {
  height: 0;
  overflow: hidden;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

#secretBox.active {
  height: 864px;
}

.menu-wrapper {
  position: absolute;
  bottom: 3rem;
  width: calc(100% - 5rem);
  margin-top: 1rem;
  margin-left: -.5rem;
  margin-right: -.5rem;
}

.menu-wrapper:before, .menu-wrapper:after {
  content: "";
  display: table;
}

.menu-wrapper:after {
  clear: both;
}

.menu-wrapper .menu-item {
  float: left;
  width: calc(33.3333% - 1rem);
  height: 8.2rem;
  padding-top: 1.1rem;
  padding-right: .1rem;
  border: 0.2rem solid rgba(255, 255, 255, 0.4);
  border-radius: 0.3rem;
  margin: 0 .5rem;
  margin-top: 1rem;
  background-color: rgba(255, 255, 255, 0.2);
  text-align: center;
  font-family: "Hemi Head", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.6rem;
  opacity: .4;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.menu-wrapper .menu-item.active {
  border-color: #824fb3;
  background-color: rgba(130, 79, 179, 0.14);
  color: #E0D2E5;
  opacity: 1;
  cursor: pointer;
}

.menu-wrapper .menu-item.active:hover {
  background-color: rgba(130, 79, 179, 0.5);
}

.menu-wrapper .menu-item .material-icons {
  font-size: 3.4rem;
  color: #fff;
}

.overlay, .game-overlay {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(16, 16, 21, 0.88);
  -webkit-backdrop-filter: blur(0.8rem);
          backdrop-filter: blur(0.8rem);
  z-index: 100;
  text-align: center;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.overlay.active, .game-overlay.active {
  opacity: 1;
  visibility: visible;
}

.overlay.active .vertical-align, .game-overlay.active .vertical-align {
  -webkit-animation: scale-in .4s ease;
          animation: scale-in .4s ease;
}

.overlay .close-overlay, .game-overlay .close-overlay {
  position: absolute;
  top: 3rem;
  right: 3rem;
  cursor: pointer;
  z-index: 10;
}

.overlay .close-overlay .material-icons, .game-overlay .close-overlay .material-icons {
  font-size: 7rem;
  color: #fff;
  opacity: .5;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.overlay .close-overlay .material-icons:hover, .game-overlay .close-overlay .material-icons:hover {
  opacity: 1;
  color: #ff4b46;
  -webkit-transform: rotate(180deg) scale(1.2);
          transform: rotate(180deg) scale(1.2);
}

.overlay .star-rating, .game-overlay .star-rating {
  position: relative;
  margin-bottom: 4rem;
}

.overlay .star-rating .material-icons, .game-overlay .star-rating .material-icons {
  font-size: 10rem;
  color: #f1ad15;
}

.overlay .star-rating-commentary, .game-overlay .star-rating-commentary {
  position: relative;
  width: 49.8rem;
  display: inline-block;
}

.overlay .star-rating-commentary textarea, .game-overlay .star-rating-commentary textarea {
  height: 12.6rem;
  width: 100%;
  padding: .6rem 1rem;
  padding-bottom: .4rem;
  border: 0.2rem solid rgba(255, 255, 255, 0.2);
  border-radius: 0.3rem;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-family: "Open Sans Regular", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.6rem;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  resize: none;
  cursor: text;
}

.overlay .star-rating-commentary textarea::-webkit-input-placeholder, .game-overlay .star-rating-commentary textarea::-webkit-input-placeholder {
  color: #E0D2E5;
}

.overlay .star-rating-commentary textarea:-ms-input-placeholder, .game-overlay .star-rating-commentary textarea:-ms-input-placeholder {
  color: #E0D2E5;
}

.overlay .star-rating-commentary textarea::-ms-input-placeholder, .game-overlay .star-rating-commentary textarea::-ms-input-placeholder {
  color: #E0D2E5;
}

.overlay .star-rating-commentary textarea::placeholder, .game-overlay .star-rating-commentary textarea::placeholder {
  color: #E0D2E5;
}

.overlay .star-rating-commentary textarea:focus, .game-overlay .star-rating-commentary textarea:focus {
  border-color: #f15b25;
  outline: none;
}

.game-overlay {
  width: calc(100vw - 34rem);
  padding: 3rem;
  z-index: 100;
  text-align: left;
}

.game-overlay.active .vertical-align {
  -webkit-animation: opacity-in 1.8s ease;
          animation: opacity-in 1.8s ease;
}

.game-overlay .game-overlay-content {
  position: relative;
  width: 100%;
  max-height: 100%;
  padding: 3rem;
  border-radius: 0.3rem;
  background-color: #271D36;
  overflow-x: hidden;
  overflow-y: auto;
}

.game-overlay .game-overlay-content::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0.4rem rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 0 0.4rem rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.3);
}

.game-overlay .game-overlay-content::-webkit-scrollbar {
  width: .6rem;
}

.game-overlay .game-overlay-content::-webkit-scrollbar-thumb {
  border-radius: 0.3rem;
  background-color: #824fb3;
}

.game-overlay .game-overlay-content .top-game-bg-wrapper {
  position: relative;
  height: 50rem;
  margin-top: -3rem;
  margin-left: -3rem;
  margin-right: -3rem;
  margin-bottom: 3rem;
  overflow: hidden;
}

.game-overlay .game-overlay-content .top-game-bg-wrapper .top-game-bg-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 3rem;
  z-index: 3;
}

.game-overlay .game-overlay-content .top-game-bg-wrapper .top-game-bg-content img {
  border-radius: 0.3rem;
  max-width: 100%;
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
          box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
}

.game-overlay .game-overlay-content .top-game-bg-wrapper .top-game-bg-content .button {
  min-width: 37.8rem;
}

.game-overlay .game-overlay-content .top-game-bg-wrapper .top-game-bg-content .button:last-child {
  margin-bottom: .8rem;
}

.game-overlay .game-overlay-content .top-game-bg-wrapper .top-game-bg-content .button.button-small {
  min-width: auto;
}

.game-overlay .game-overlay-content .top-game-bg-wrapper .top-game-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #824fb3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .2;
  z-index: 1;
  -webkit-filter: blur(0.6rem) grayscale(70%);
          filter: blur(0.6rem) grayscale(70%);
}

.game-overlay .game-overlay-content .top-game-bg-wrapper .top-game-bg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0), #52416b);
  opacity: .82;
}

.game-overlay .close-overlay {
  position: absolute;
  top: 4rem;
  right: 5rem;
  cursor: pointer;
}

@-webkit-keyframes scale-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50%) scale(0.94);
            transform: translateY(-50%) scale(0.94);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(-50%) scale(0.94);
            transform: translateY(-50%) scale(0.94);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1);
  }
}

@keyframes scale-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50%) scale(0.94);
            transform: translateY(-50%) scale(0.94);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(-50%) scale(0.94);
            transform: translateY(-50%) scale(0.94);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1);
  }
}

@-webkit-keyframes opacity-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes opacity-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.search-bar {
  position: -webkit-sticky;
  position: sticky;
  top: -2rem;
  padding: 1rem;
  border-radius: 0.3rem;
  margin-top: 3rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  background-color: #3D3D54;
  z-index: 33;
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
          box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
}

.input-wrapper {
  position: relative;
}

.input-wrapper input[type="text"] {
  height: 3.6rem;
  width: 100%;
  padding: .6rem 1rem;
  padding-bottom: .4rem;
  border: .2rem solid #22223E;
  border-radius: 0.3rem;
  background-color: #2C2C44;
  color: #fff;
  font-size: 1.6rem;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  cursor: text;
}

.input-wrapper input[type="text"]::-webkit-input-placeholder {
  color: #E0D2E5;
}

.input-wrapper input[type="text"]:-ms-input-placeholder {
  color: #E0D2E5;
}

.input-wrapper input[type="text"]::-ms-input-placeholder {
  color: #E0D2E5;
}

.input-wrapper input[type="text"]::placeholder {
  color: #E0D2E5;
}

.input-wrapper input[type="text"]:focus {
  border-color: #f15b25;
  outline: none;
}

.input-wrapper .material-icons {
  position: absolute;
  top: .6rem;
  left: .8rem;
}

.input-wrapper .material-icons + input[type="text"] {
  padding-left: 3.2rem;
}

.sidebar {
  float: left;
  position: relative;
  width: 34rem;
  height: 100%;
  padding: 3rem;
  background-color: #271D36;
}

.sidebar .c4sys-version {
  position: absolute;
  bottom: 2rem;
  left: 3rem;
  font-size: 1.3rem;
  color: #6b5b71;
}

.sidebar .c4sys-version span {
  color: #96809e;
  font-family: "Open Sans Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.user-view {
  position: relative;
  height: 8.2rem;
  padding-left: 10rem;
  margin-bottom: 2rem;
}

.user-view .user-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 8.2rem;
  height: 8.2rem;
  border: .4rem solid #fff;
  border-radius: 0.3rem;
  background-image: url("../img/Xyp9x.png");
  background-size: cover;
  background-position: center;
  -webkit-box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.34);
          box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.34);
}

.user-view .user-info {
  height: 100%;
}

.user-view .user-info .user-nickname {
  position: relative;
  top: -.3rem;
  font-size: 2.2rem;
  font-family: "Open Sans Bold", Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #f15b25;
}

.user-view .user-info .user-name {
  position: relative;
  top: -.3rem;
}

.progress-bar-wrapper {
  position: relative;
  width: 100%;
  height: 4rem;
  border-radius: 0.3rem;
  margin-bottom: 2rem;
  background-color: #110721;
  overflow: hidden;
}

.progress-bar-wrapper .progress-bar {
  position: relative;
  height: 100%;
  border-radius: 0 0.3rem 0.3rem 0;
  background-color: #F15C25;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#cf3e27), to(#f16a38));
  background-image: linear-gradient(0deg, #cf3e27 0%, #f16a38 100%);
  overflow: hidden;
  -webkit-transition: all .8s ease;
  transition: all .8s ease;
  z-index: 2;
}

.progress-bar-wrapper .progress-bar .progress-bar-animation-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), color-stop(80%, white), color-stop(99%, white), to(rgba(255, 255, 255, 0)));
  background-image: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, white 80%, white 99%, rgba(255, 255, 255, 0) 100%);
  opacity: .2;
  z-index: 2;
  -webkit-animation: progress-bar-anim 2s infinite ease;
          animation: progress-bar-anim 2s infinite ease;
}

.progress-bar-wrapper .progress-bar .progress-bar-info {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  min-width: 5.6rem;
  color: #fff;
  font-family: "Open Sans Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
  text-align: right;
  z-index: 3;
}

.progress-bar-wrapper .progress-bar .progress-bar-info span {
  color: #FFCFBC;
  font-weight: 400;
}

.progress-bar-wrapper .progress-bar-hidden-time {
  position: absolute;
  top: 1rem;
  left: 1.6rem;
  color: #fff;
  font-family: "Open Sans Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
  z-index: 1;
}

.progress-bar-wrapper .progress-bar-hidden-time span {
  color: #E0D2E5;
  font-weight: 400;
}

@-webkit-keyframes progress-bar-anim {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    opacity: .2;
  }
  50% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: .2;
  }
}

@keyframes progress-bar-anim {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    opacity: .2;
  }
  50% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: .2;
  }
}

.snack-box-wrapper {
  margin: 3rem -1.3rem;
}

.snack-box, .snack-box-large {
  position: relative;
  float: left;
  width: calc(25% - 2.6rem);
  border-radius: 0.3rem;
  margin: 0 1.3rem;
  margin-bottom: 3rem;
  background-color: #fff;
  -webkit-box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.2);
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.snack-box:hover, .snack-box-large:hover {
  -webkit-transform: translateY(-0.6rem);
          transform: translateY(-0.6rem);
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
          box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
}

.snack-box .snack-box-cover, .snack-box-large .snack-box-cover {
  width: 100%;
  height: 27rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
}

.snack-box .snack-box-info, .snack-box-large .snack-box-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6rem;
  padding: 0 1.4rem;
  padding-right: 10rem;
  background-color: rgba(53, 40, 72, 0.52);
  z-index: 3;
}

.snack-box .snack-box-info .snack-box-name, .snack-box-large .snack-box-info .snack-box-name {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  max-height: 3.8rem;
  margin-bottom: .2rem;
  font-size: 1.4rem;
  font-family: "Open Sans Bold", Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #fff;
  text-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.snack-box .snack-box-info .snack-box-price, .snack-box-large .snack-box-info .snack-box-price {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  width: 7.2rem;
  height: 3.1rem;
  padding-top: .1rem;
  padding-left: .2rem;
  background-color: #f15b25;
  font-family: "Hemi Head", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 2.2rem;
  color: #fff;
  text-align: center;
}

.snack-box .snack-box-info .snack-box-price span, .snack-box-large .snack-box-info .snack-box-price span {
  margin-left: .2rem;
  color: #fec7b2;
  font-size: 1.8rem;
}

.snack-box .snack-box-info .snack-box-price:before, .snack-box .snack-box-info .snack-box-price:after, .snack-box-large .snack-box-info .snack-box-price:before, .snack-box-large .snack-box-info .snack-box-price:after {
  content: "";
  position: absolute;
  top: 0;
  left: -.6rem;
  width: 0;
  height: 0;
  border-left: .6rem solid transparent;
  border-right: .6rem solid transparent;
  border-bottom: 3.1rem solid #f15b25;
}

.snack-box .snack-box-info .snack-box-price:after, .snack-box-large .snack-box-info .snack-box-price:after {
  left: auto;
  right: -.6rem;
  border-bottom: none;
  border-top: 3.1rem solid #f15b25;
}

.snack-box-large {
  width: 100%;
  float: none;
  margin: 0;
}

.snack-box-large .snack-box-cover {
  height: 26rem;
}

.snack-box-large .snack-box-info {
  padding: 0 2rem;
  padding-right: 12rem;
}

.snack-box-large .snack-box-info .snack-box-name {
  max-height: 4rem;
  font-size: 1.5rem;
}

.snack-box-large .snack-box-info .snack-box-price {
  width: 8.2rem;
}

.sort-separator {
  position: relative;
  display: inline-block;
  width: calc(100% - 2.6rem);
  height: 3.4rem;
  padding: .6rem 1.8rem;
  border-radius: 0.3rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  margin-left: 1.3rem;
  background-color: #824fb3;
  font-family: "Hemi Head", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.8rem;
  color: #fff;
}

.tag-buttons-wrapper {
  position: relative;
}

.tag-buttons-wrapper .tag-button {
  position: relative;
  float: left;
  height: 3.6rem;
  padding: .6rem 1rem;
  border: 0.2rem solid #824fb3;
  padding-right: 1.2rem;
  border-right-width: 0;
  background-color: rgba(130, 79, 179, 0.14);
  font-size: 1.5rem;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  cursor: pointer;
}

.tag-buttons-wrapper .tag-button .material-icons {
  position: relative;
  top: -.2rem;
  vertical-align: top;
}

.tag-buttons-wrapper .tag-button:first-child {
  border-radius: 0.3rem 0 0 0.3rem;
}

.tag-buttons-wrapper .tag-button:last-child {
  border-right: none;
  border-radius: 0 0.3rem 0.3rem 0;
}

.tag-buttons-wrapper .tag-button:hover {
  background-color: #523D65;
}

.tag-buttons-wrapper .tag-button.active {
  border-color: #f15b25;
  background-color: rgba(241, 91, 37, 0.14);
  -webkit-box-shadow: 0.2rem 0 0 #f15b25;
          box-shadow: 0.2rem 0 0 #f15b25;
  z-index: 2;
  color: #fff;
}

.tag-buttons-wrapper .tag-button.close {
  padding: .9rem .5rem;
  padding-right: .6rem;
  background-color: #ff4b46;
  color: #fff;
  border: none;
}

.nav-item {
  position: relative;
  float: left;
  width: 20%;
  height: 5.2rem;
  padding: .7rem 1rem;
  border: .2rem solid #824FB3;
  border-right-width: 0;
  color: #fff;
  font-family: "Hemi Head", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 2.2rem;
  text-align: center;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  cursor: pointer;
}

.nav-item .material-icons {
  position: relative;
  top: .4rem;
  margin-right: .2rem;
}

.nav-item:first-child {
  border-radius: 0.3rem 0 0 0.3rem;
}

.nav-item:last-child {
  border-right-width: .2rem;
  border-radius: 0 0.3rem 0.3rem 0;
}

.nav-item:hover {
  background-color: rgba(130, 79, 179, 0.3);
}

.nav-item.active {
  border-color: #f15b25;
  z-index: 2;
}

.badge {
  position: relative;
  display: inline-block;
  top: -.1rem;
  padding: .2rem .4rem;
  padding-top: .1rem;
  border-radius: 0.3rem;
  margin-right: .1rem;
  background-color: #824fb3;
  color: #fff;
  font-size: 1.1rem;
}

.badge.neutral {
  background-color: #2E3740;
}

.badge.success {
  background-color: #39c38d;
}

.badge.warning {
  background-color: #fdbc1d;
}

.badge.danger {
  background-color: #ff5f56;
}

.no-scroll {
  overflow: hidden;
  padding-right: 17px;
}

.relative {
  position: relative;
}

.inline {
  display: inline-block;
}

.block {
  display: block;
}

.full-width {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.pull-left {
  float: left;
  margin-left: 0;
}

.pull-right {
  float: right;
  margin-right: 0 !important;
}

.pull-bottom {
  position: absolute;
  bottom: 2rem;
}

.bold {
  font-family: "Open Sans Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.italic {
  font-style: italic;
}

sub {
  line-height: .1rem;
}

.dark {
  color: #fff;
}

.grey {
  color: #E0D2E5;
}

.align-left {
  text-align: left;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.h-100 {
  height: 100%;
}

.vertical-align {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.separator {
  position: relative;
  border-bottom: 0.1rem dotted rgba(0, 0, 50, 0.12);
  margin-top: 1.9rem;
  margin-bottom: 2rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.vertical-align {
  position: relative;
}

.vertical-align-content {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.border-radius-l-0 {
  border-radius: 0 0.3rem 0.3rem 0 !important;
}

.border-radius-r-0 {
  border-radius: 0.3rem 0 0 0.3rem !important;
}

.margin-off {
  margin: 0 !important;
}

.padding-off {
  padding: 0 !important;
}

.p-t-0 {
  padding-top: 0 !important;
}

.p-b-0 {
  padding-bottom: 0 !important;
}

.p-l-0 {
  padding-left: 0 !important;
}

.p-r-0 {
  padding-right: 0 !important;
}

.p-l-5 {
  padding-left: .5rem !important;
}

.p-r-5 {
  padding-right: .5rem !important;
}

.p-l-20 {
  padding-left: 2rem !important;
}

.p-r-20 {
  padding-right: 2rem !important;
}

.p-l-30 {
  padding-left: 3rem !important;
}

.p-r-30 {
  padding-right: 3rem !important;
}

.p-l-40 {
  padding-left: 4rem !important;
}

.p-r-40 {
  padding-right: 4rem !important;
}

.t-0 {
  margin-top: 0;
}

.t-5 {
  margin-top: 0.5rem;
}

.t-10 {
  margin-top: 1rem;
}

.t-15 {
  margin-top: 1.5rem;
}

.t-20 {
  margin-top: 2rem;
}

.t-25 {
  margin-top: 2.5rem;
}

.t-30 {
  margin-top: 3rem;
}

.t-35 {
  margin-top: 3.5rem;
}

.t-40 {
  margin-top: 4rem;
}

.t-45 {
  margin-top: 4.5rem;
}

.t-50 {
  margin-top: 5rem;
}

.t-55 {
  margin-top: 5.5rem;
}

.t-60 {
  margin-top: 6rem;
}

.t-65 {
  margin-top: 6.5rem;
}

.t-70 {
  margin-top: 7rem;
}

.t-75 {
  margin-top: 7.5rem;
}

.t-80 {
  margin-top: 8rem;
}

.t-85 {
  margin-top: 8.5rem;
}

.t-90 {
  margin-top: 9rem;
}

.t-95 {
  margin-top: 9.5rem;
}

.t-100 {
  margin-top: 10rem;
}

.b-0 {
  margin-bottom: 0;
}

.b-5 {
  margin-bottom: 0.5rem;
}

.b-10 {
  margin-bottom: 1rem;
}

.b-15 {
  margin-bottom: 1.5rem;
}

.b-20 {
  margin-bottom: 2rem;
}

.b-25 {
  margin-bottom: 2.5rem;
}

.b-30 {
  margin-bottom: 3rem;
}

.b-35 {
  margin-bottom: 3.5rem;
}

.b-40 {
  margin-bottom: 4rem;
}

.b-45 {
  margin-bottom: 4.5rem;
}

.b-50 {
  margin-bottom: 5rem;
}

.b-55 {
  margin-bottom: 5.5rem;
}

.b-60 {
  margin-bottom: 6rem;
}

.b-65 {
  margin-bottom: 6.5rem;
}

.b-70 {
  margin-bottom: 7rem;
}

.b-75 {
  margin-bottom: 7.5rem;
}

.b-80 {
  margin-bottom: 8rem;
}

.b-85 {
  margin-bottom: 8.5rem;
}

.b-90 {
  margin-bottom: 9rem;
}

.b-95 {
  margin-bottom: 9.5rem;
}

.b-100 {
  margin-bottom: 10rem;
}

.l-0 {
  margin-left: 0;
}

.l-5 {
  margin-left: 0.5rem;
}

.l-10 {
  margin-left: 1rem;
}

.l-15 {
  margin-left: 1.5rem;
}

.l-20 {
  margin-left: 2rem;
}

.l-25 {
  margin-left: 2.5rem;
}

.l-30 {
  margin-left: 3rem;
}

.l-35 {
  margin-left: 3.5rem;
}

.l-40 {
  margin-left: 4rem;
}

.l-45 {
  margin-left: 4.5rem;
}

.l-50 {
  margin-left: 5rem;
}

.l-55 {
  margin-left: 5.5rem;
}

.l-60 {
  margin-left: 6rem;
}

.l-65 {
  margin-left: 6.5rem;
}

.l-70 {
  margin-left: 7rem;
}

.l-75 {
  margin-left: 7.5rem;
}

.l-80 {
  margin-left: 8rem;
}

.l-85 {
  margin-left: 8.5rem;
}

.l-90 {
  margin-left: 9rem;
}

.l-95 {
  margin-left: 9.5rem;
}

.l-100 {
  margin-left: 10rem;
}

.r-0 {
  margin-right: 0;
}

.r-5 {
  margin-right: 0.5rem;
}

.r-10 {
  margin-right: 1rem;
}

.r-15 {
  margin-right: 1.5rem;
}

.r-20 {
  margin-right: 2rem;
}

.r-25 {
  margin-right: 2.5rem;
}

.r-30 {
  margin-right: 3rem;
}

.r-35 {
  margin-right: 3.5rem;
}

.r-40 {
  margin-right: 4rem;
}

.r-45 {
  margin-right: 4.5rem;
}

.r-50 {
  margin-right: 5rem;
}

.r-55 {
  margin-right: 5.5rem;
}

.r-60 {
  margin-right: 6rem;
}

.r-65 {
  margin-right: 6.5rem;
}

.r-70 {
  margin-right: 7rem;
}

.r-75 {
  margin-right: 7.5rem;
}

.r-80 {
  margin-right: 8rem;
}

.r-85 {
  margin-right: 8.5rem;
}

.r-90 {
  margin-right: 9rem;
}

.r-95 {
  margin-right: 9.5rem;
}

.r-100 {
  margin-right: 10rem;
}
/*# sourceMappingURL=c4sys.css.map */