@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Noto Serif"), local("NotoSerif"), url(/fonts/NotoSerif-Light.ttf); }

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Noto Serif"), local("NotoSerif"), url(/fonts/NotoSerif-Regular.ttf); }

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Noto Serif"), local("NotoSerif"), url(/fonts/NotoSerif-Medium.ttf); }

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Noto Serif"), local("NotoSerif"), url(/fonts/NotoSerif-SemiBold.ttf); }

.header {
  height: 71px;
  width: 100%;
  border: solid 1px rgba(0, 0, 0, 0.5);
  background-color: #2d3645;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 13px 15px; }
  .header .menuButton {
    display: none;
    padding: 12px 10px;
    cursor: pointer; }
    .header .menuButton .menuIcon {
      width: 25px;
      height: 19px;
      position: relative;
      border-top: 1px solid #ffffff;
      border-bottom: 1px solid #ffffff; }
      .header .menuButton .menuIcon:before {
        content: '';
        position: absolute;
        left: 0px;
        top: 8px;
        right: 0px;
        border-top: 1px solid #ffffff; }
  .header .logo {
    width: 130px;
    height: 40px;
    background-image: url(/img/logo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; }
  .header .headerNavigation {
    display: flex;
    flex-direction: row;
    padding: 3px 24px 0px 0px; }
    .header .headerNavigation a {
      cursor: pointer;
      text-decoration: none; }
      .header .headerNavigation a .icon {
        margin: 0px 7px;
        width: 40px;
        height: 40px;
        background-position: center;
        background-repeat: no-repeat; }
        .header .headerNavigation a .icon.discord {
          background-image: url(/img/discrod.png);
          background-size: 26px; }
        .header .headerNavigation a .icon.twitter {
          background-image: url(/img/twitter.png);
          background-size: 28px; }
        .header .headerNavigation a .icon.facebook {
          background-image: url(/img/facebook.png);
          background-size: 24px; }
      .header .headerNavigation a .text {
        margin-left: 42px;
        line-height: 42px;
        font-size: 16px;
        font-weight: bold;
        color: #ffffff;
        text-transform: uppercase; }

.menuOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9994;
  background: rgba(0, 0, 0, 0.3); }
  .menuOverlay .menu {
    background-color: #1c212a;
    position: absolute;
    transition: left .3s ease;
    z-index: 9996;
    height: 100%;
    width: 70%;
    left: -70%;
    padding: 0px 0px 20px;
    box-shadow: 10px 0 84px 0 rgba(0, 0, 0, 0.5); }
    .menuOverlay .menu.show {
      left: 0px; }
    .menuOverlay .menu .logo {
      width: 130px;
      height: 40px;
      background-image: url(/img/logo.png);
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      margin: 20px auto 30px; }
    .menuOverlay .menu a {
      text-decoration: none; }
      .menuOverlay .menu a .icon, .menuOverlay .menu a .text {
        color: #ffffff;
        font-size: 18px;
        font-weight: bold;
        line-height: 40px;
        padding: 3px 40px;
        opacity: 0.75; }
      .menuOverlay .menu a .icon {
        padding-left: 80px;
        background-position: 40px center;
        background-repeat: no-repeat; }
        .menuOverlay .menu a .icon.discord {
          background-image: url(/img/discrod.png);
          background-size: 26px; }
        .menuOverlay .menu a .icon.twitter {
          background-image: url(/img/twitter.png);
          background-size: 28px; }
        .menuOverlay .menu a .icon.facebook {
          background-image: url(/img/facebook.png);
          background-size: 24px; }

@media all and (max-width: 1024px) {
  .header .menuButton {
    display: block; }
  .header .headerNavigation {
    display: none; }
  .header::after {
    content: '';
    width: 45px; } }

.content.index {
  width: 100%;
  overflow: hidden; }
  .content.index h1, .content.index h2, .content.index h3, .content.index h4, .content.index h5, .content.index h6, .content.index p, .content.index ul {
    margin: 0px;
    padding: 0px; }
  .content.index .storeButtons {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    width: 350px;
    max-width: 100%;
    margin: 15px 0px; }
    .content.index .storeButtons .appstore, .content.index .storeButtons .googleplay {
      font-size: 0px; }
      .content.index .storeButtons .appstore img, .content.index .storeButtons .googleplay img {
        width: 100%; }
    .content.index .storeButtons .appstore {
      width: 170px;
      max-width: calc(50% - 3px); }
    .content.index .storeButtons .googleplay {
      width: 166px;
      max-width: calc(50% - 5px); }
  .content.index .container {
    background-color: #272f3d;
    width: 100%; }
    .content.index .container.dark {
      background-color: #1c2129; }
    .content.index .container.intro {
      padding: 85px 0px 75px calc(50% + 80px);
      background-image: url(/img/screenshot_dice.png);
      background-size: 790px;
      background-repeat: no-repeat;
      background-position: calc(50% - 290px) bottom; }
      .content.index .container.intro .card {
        max-width: 400px;
        padding: 35px 25px 45px;
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.3); }
        .content.index .container.intro .card a {
          text-decoration: none;
          cursor: pointer; }
        .content.index .container.intro .card label {
          display: block;
          font-size: 14px;
          font-weight: bold;
          text-align: center;
          color: #8b98ae;
          cursor: inherit; }
        .content.index .container.intro .card h2 {
          margin-top: 8px;
          font-family: "Noto Serif", serif;
          font-size: 30px;
          font-weight: 500;
          line-height: 1.2;
          text-align: center;
          color: #ffffff; }
        .content.index .container.intro .card p {
          margin: 11px 0px 15px;
          font-family: "Noto Serif", serif;
          font-size: 14px;
          line-height: 1.43;
          text-align: center;
          color: #ffffff; }
        .content.index .container.intro .card .raisedButton {
          width: 100%;
          margin-bottom: 30px; }
        .content.index .container.intro .card .kickstarter {
          width: 100%; }
          .content.index .container.intro .card .kickstarter img {
            margin: 14px auto 0px;
            width: 214px;
            height: auto; }
    .content.index .container.featured {
      padding: 45px 0px 90px; }
      .content.index .container.featured h2 {
        font-size: 18px;
        font-weight: bold;
        line-height: 1.61;
        text-align: center;
        color: #8b98ae; }
      .content.index .container.featured .feedbacks {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        max-width: 1080px;
        margin: 0px auto;
        padding-bottom: 40px; }
        .content.index .container.featured .feedbacks .feedbackItem {
          font-family: "Noto Serif", serif;
          font-size: 14px;
          line-height: 1.43;
          text-align: center;
          color: #8b98ae;
          background-repeat: no-repeat;
          padding-top: 88px; }
          .content.index .container.featured .feedbacks .feedbackItem.geekTyrant {
            width: 240px;
            background-image: url(/img/geek_tyrant.png);
            background-size: 228px;
            background-position: center 28px; }
          .content.index .container.featured .feedbacks .feedbackItem.bols {
            width: 210px;
            background-image: url(/img/bols.png);
            background-position: center 19px;
            background-size: 130px; }
          .content.index .container.featured .feedbacks .feedbackItem.tribality {
            width: 240px;
            background-image: url(/img/tribality.png);
            background-position: center 19px;
            background-size: 168px; }
          .content.index .container.featured .feedbacks .feedbackItem.beastOfWar {
            width: 210px;
            background-image: url(/img/beasts_of_war.png);
            background-position: center 0px;
            background-size: 122px; }
      .content.index .container.featured .mainImage {
        width: 100%;
        height: 472px;
        background-image: url(/img/main_image.png);
        background-size: 1285px;
        background-position: center;
        background-repeat: no-repeat; }
      .content.index .container.featured .counter {
        padding-top: 30px; }
        .content.index .container.featured .counter .digits .digit {
          display: inline-block;
          width: 60px;
          height: 85px;
          line-height: 85px;
          font-size: 60px;
          font-weight: bold;
          text-align: center;
          color: #ffffff;
          border-radius: 8px;
          background-color: rgba(0, 0, 0, 0.5); }
          .content.index .container.featured .counter .digits .digit + .digit {
            margin-left: 5px; }
        .content.index .container.featured .counter label {
          margin-top: 10px;
          display: block;
          font-size: 14px;
          font-weight: bold;
          line-height: 2.07;
          text-align: center;
          color: #ffffff; }
    .content.index .container.customize, .content.index .container.stats {
      text-align: left;
      font-family: "Noto Serif", serif;
      color: #ffffff; }
      .content.index .container.customize h2, .content.index .container.stats h2 {
        font-size: 30px;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 8px; }
      .content.index .container.customize p, .content.index .container.stats p {
        font-size: 14px;
        line-height: 1.71; }
      .content.index .container.customize ul, .content.index .container.stats ul {
        list-style: none; }
        .content.index .container.customize ul li, .content.index .container.stats ul li {
          font-size: 14px;
          line-height: 1.71; }
          .content.index .container.customize ul li::before, .content.index .container.stats ul li::before {
            content: '- ';
            user-select: none; }
    .content.index .container.customize {
      padding: 100px calc(50% - 500px) 100px calc(50% + 100px);
      background-image: url(/img/screenshot_customize.png);
      background-size: 463px;
      background-repeat: no-repeat;
      background-position: calc(50% - 225px) bottom; }
    .content.index .container.stats {
      padding: 155px calc(50% + 50px) 120px calc(50% - 370px);
      background-image: url(/img/screenshot_stats.png);
      background-size: 463px;
      background-repeat: no-repeat;
      background-position: calc(50% + 295px) bottom; }
    .content.index .container.ending {
      padding: 115px 0px 75px calc(50% + 100px);
      background-image: url(/img/heroes.png);
      background-size: 647px;
      background-repeat: no-repeat;
      background-position: calc(50% - 270px) calc(100% - 75px); }
      .content.index .container.ending .card {
        max-width: 400px;
        padding: 21px 25px 22px;
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.3); }
        .content.index .container.ending .card .logo {
          width: 100%;
          height: 53px;
          background-image: url(/img/logo.png);
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          margin-bottom: 20px; }
        .content.index .container.ending .card h2 {
          margin-top: 5px;
          font-family: "Noto Serif", serif;
          font-size: 30px;
          font-weight: 500;
          line-height: 1.2;
          text-align: center;
          color: #ffffff; }
        .content.index .container.ending .card p {
          margin: 11px 0px 16px;
          font-family: "Noto Serif", serif;
          font-size: 14px;
          line-height: 1.43;
          text-align: center;
          color: #ffffff; }
        .content.index .container.ending .card .raisedButton {
          width: 100%; }
    .content.index .container.footer {
      padding: 30px 25px 50px; }
      .content.index .container.footer .footerNavigation {
        font-size: 0px; }
        .content.index .container.footer .footerNavigation a {
          text-decoration: none;
          cursor: pointer; }
          .content.index .container.footer .footerNavigation a .icon {
            display: inline-block;
            font-size: 14px;
            font-weight: bold;
            color: #ffffff;
            text-transform: uppercase;
            padding: 12px 18px 12px 48px;
            border-radius: 10px;
            background-color: rgba(0, 0, 0, 0.3);
            background-position: 10px center;
            background-repeat: no-repeat; }
            .content.index .container.footer .footerNavigation a .icon.discord {
              background-image: url(/img/discrod.png);
              background-size: 26px; }
            .content.index .container.footer .footerNavigation a .icon.twitter {
              background-image: url(/img/twitter.png);
              background-size: 28px; }
            .content.index .container.footer .footerNavigation a .icon.facebook {
              background-image: url(/img/facebook.png);
              background-size: 24px; }
          .content.index .container.footer .footerNavigation a + a .icon {
            margin-left: 11px; }
      .content.index .container.footer .copyright {
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.71;
        text-align: center;
        color: #8b98ae; }
  .content.index .raisedButton, .content.index .plainButton {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 3px;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(1, 1, 1, 0.5); }
  .content.index .raisedButton {
    padding: 10px 32px;
    background-color: #3db598;
    color: #ffffff;
    border: none; }
    .content.index .raisedButton:hover:not(.disabled) {
      background-color: #68c99a; }
  .content.index .plainButton {
    padding: 8px 30px;
    background-color: transparent;
    color: #06bebd;
    border: 2px solid #06bebd; }

@media all and (max-width: 1024px) {
  .content.index .container.intro {
    padding: 33px 24px 400px;
    background-size: 480px;
    background-position: center bottom; }
    .content.index .container.intro .card {
      margin: 0px auto; }
  .content.index .container.featured {
    padding: 30px 0px 80px; }
    .content.index .container.featured .feedbacks {
      flex-direction: column;
      padding: 0px 32px; }
      .content.index .container.featured .feedbacks .feedbackItem {
        padding-bottom: 45px; }
        .content.index .container.featured .feedbacks .feedbackItem.geekTyrant, .content.index .container.featured .feedbacks .feedbackItem.bols, .content.index .container.featured .feedbacks .feedbackItem.tribality, .content.index .container.featured .feedbacks .feedbackItem.beastOfWar {
          width: 100%; }
    .content.index .container.featured .mainImage {
      height: 354px;
      background-size: 964px; }
    .content.index .container.featured .counter .digits .digit {
      width: 48px;
      height: 68px;
      line-height: 68px;
      font-size: 48px; }
  .content.index .container.customize, .content.index .container.stats {
    padding: 40px 0px 425px;
    background-position: center bottom; }
    .content.index .container.customize h2, .content.index .container.customize p, .content.index .container.customize ul, .content.index .container.stats h2, .content.index .container.stats p, .content.index .container.stats ul {
      padding: 0px 40px; }
  .content.index .container.ending {
    padding: 40px 24px 285px;
    background-size: 480px;
    background-position: center bottom; }
    .content.index .container.ending .card {
      margin: 0px auto; }
  .content.index .container.footer {
    padding: 15px 15px 40px; }
    .content.index .container.footer .footerNavigation a .icon {
      margin-top: 11px; } }

html {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #272f3d; }

body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #272f3d;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
 "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch; }
  body::-webkit-scrollbar {
    width: 8px; }
  body::-webkit-scrollbar-track {
    background-color: #2d3645; }
  body::-webkit-scrollbar-thumb {
    background-color: #dde4ea;
    border-radius: 4px; }
  body::-webkit-scrollbar-thumb:hover {
    background-color: #dde4ea; }
  body.overlay {
    position: fixed; }

* {
  box-sizing: border-box; }

.clickable {
  cursor: pointer; }

.hidden {
  display: none !important; }

.content {
  text-align: center;
  background-color: #2d3645; }

.loaderContainer {
  display: none;
  z-index: 101;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0px;
  background: rgba(0, 0, 0, 0.35); }

.loader {
  margin: 35vh auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #3db598;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear; }

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em; }

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.shake-horizontal {
  animation: shake-horizontal 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s both; }

@keyframes shake-horizontal {
  0%, 100% {
    transform: translateX(0); }
  10%, 30%, 50%, 70% {
    transform: translateX(-10px); }
  20%, 40%, 60% {
    transform: translateX(10px); }
  80% {
    transform: translateX(8px); }
  90% {
    transform: translateX(-8px); } }