.box {
  position: relative;
  display: inline-block;
  min-width: 228px;
  min-height: 215px; }
  .box:before {
    content: '';
    position: absolute;
    top: 7px;
    right: 7px;
    bottom: 5px;
    left: 7px;
    z-index: 1; }
  .box .content {
    position: relative;
    z-index: 3;
    padding: 0 45px 50px; }
    .box .content .boxHeader,
    .box .content .boxBody {
      position: relative; }
    .box .content .boxHeader {
      padding-top: 10px;
      width: 100%;
      display: table;
      table-layout: fixed; }
      .box .content .boxHeader h5,
      .box .content .boxHeader h4,
      .box .content .boxHeader h3,
      .box .content .boxHeader h2 {
        display: table-cell;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-wrap: break-word;
        text-align: center;
        vertical-align: middle;
        height: 3em;
        margin: 0;
        width: 100%; }
      .box .content .boxHeader h5 {
        margin: .5em auto; }
      .box .content .boxHeader:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 1px solid transparent;
        -o-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAAACCAYAAAC5benaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzhENzcwRDlDMDlBMTFFNjgzQkI4NERCNDg3MkJDRTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzhENzcwREFDMDlBMTFFNjgzQkI4NERCNDg3MkJDRTgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMDA1NTgyMkMwOEYxMUU2ODNCQjg0REI0ODcyQkNFOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3OEQ3NzBEOEMwOUExMUU2ODNCQjg0REI0ODcyQkNFOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoGADIgAAAI1SURBVHjafJJbbtRAEEXr0Y/xTKLJDEFBSPkLn6yJVbACVsQ6+GANREJEkAfz8Nju7qqiHH5AQrRkqWx337p1buOH9+/y1/sjikjYH4b842fPESsTGkzCBhjl4rxr11dnsl0vNQWy2++97I5VF4lwkZge95OdddE25ymWUuK3h5NFRpqmPj3sqxEFI6gEvpqSjY1tkdP45vqirM+ynncRETXd3u34/ukU9sc+ZBZkMqy+vwpZTlFjjErEcrXt4DRWHKaGACS+Z3p9uZJZ3z3xMlP6cndU/w9TqbGMh5xYEf6z1ND8ea7F69LIrrZL7TKhGEtKqawWgQ79GPphot3+yAiGjsO9219a85sqznNqCMFeblY6f6+10ONuoOizzb1mFsscrRnM3bGpQRM05qCX62yBgXZ9gcMAgsTDIoX69uaF3d33AT9/+ujUmFhLIPA+hJEBgklxYS0mTcxh1bxpGjrDNpinqTztAK35VBWUs2leI1uNqM4vLIA9CGqV3LEABwxSEspIWnqTOgxGaWzdVlreAnCiICOTVubZA0IKbgqRsJWjNgxFPSDvDcKdWMjGOjHUEayNVeLKb0dwYk4jLpnbiWaP4FfQsXSRKHvgDpj+GZqZu3Tf5pOZiYm0JpwrzJrarHrtEXl84+yJnA8TIc+cCIxc+E+xWQOkjqrqQryoxsmAIjrj3+eksIpoC67rkZEVN4bwbKCeQCmozazdL04HhOlJoRyn6eKmttUrjGUffwkwAAZtbHorrvYeAAAAAElFTkSuQmCC) 0 38 2 70 round;
           border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAAACCAYAAAC5benaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzhENzcwRDlDMDlBMTFFNjgzQkI4NERCNDg3MkJDRTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzhENzcwREFDMDlBMTFFNjgzQkI4NERCNDg3MkJDRTgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMDA1NTgyMkMwOEYxMUU2ODNCQjg0REI0ODcyQkNFOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3OEQ3NzBEOEMwOUExMUU2ODNCQjg0REI0ODcyQkNFOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoGADIgAAAI1SURBVHjafJJbbtRAEEXr0Y/xTKLJDEFBSPkLn6yJVbACVsQ6+GANREJEkAfz8Nju7qqiHH5AQrRkqWx337p1buOH9+/y1/sjikjYH4b842fPESsTGkzCBhjl4rxr11dnsl0vNQWy2++97I5VF4lwkZge95OdddE25ymWUuK3h5NFRpqmPj3sqxEFI6gEvpqSjY1tkdP45vqirM+ynncRETXd3u34/ukU9sc+ZBZkMqy+vwpZTlFjjErEcrXt4DRWHKaGACS+Z3p9uZJZ3z3xMlP6cndU/w9TqbGMh5xYEf6z1ND8ea7F69LIrrZL7TKhGEtKqawWgQ79GPphot3+yAiGjsO9219a85sqznNqCMFeblY6f6+10ONuoOizzb1mFsscrRnM3bGpQRM05qCX62yBgXZ9gcMAgsTDIoX69uaF3d33AT9/+ujUmFhLIPA+hJEBgklxYS0mTcxh1bxpGjrDNpinqTztAK35VBWUs2leI1uNqM4vLIA9CGqV3LEABwxSEspIWnqTOgxGaWzdVlreAnCiICOTVubZA0IKbgqRsJWjNgxFPSDvDcKdWMjGOjHUEayNVeLKb0dwYk4jLpnbiWaP4FfQsXSRKHvgDpj+GZqZu3Tf5pOZiYm0JpwrzJrarHrtEXl84+yJnA8TIc+cCIxc+E+xWQOkjqrqQryoxsmAIjrj3+eksIpoC67rkZEVN4bwbKCeQCmozazdL04HhOlJoRyn6eKmttUrjGUffwkwAAZtbHorrvYeAAAAAElFTkSuQmCC) 0 38 2 70 round;
        border-width: 0 38px 2px 70px; }
      .box .content .boxHeader + .boxBody {
        padding-top: 20px; }
    .box .content .boxBody {
      padding-top: 25px;
      white-space: pre-wrap;
      word-wrap: break-word;
      overflow-wrap: break-word; }
  .box:after {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    z-index: 2; }
  .box.default, .box.intro {
    color: #333333; }
    .box.default:before, .box.intro:before {
      content: '';
      border-width: 130px 94px 65px 114px;
      border-style: solid;
      border-image-source: url(/dist/c9f982f64938fe60b06dbf051c6a9bb5.png);
      border-image-slice: 130 94 65 114 fill;
      border-image-repeat: stretch;
      border-image-width: auto;
      display: block; }
      @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
        .box.default:before, .box.intro:before {
          border-image-source: url(/dist/490d4190d3bad6c8de5690d08f211747.png);
          border-image-slice: 260 188 130 228 fill;
          border-image-repeat: stretch;
          border-image-width: auto; } }
      @media only screen and (-webkit-min-device-pixel-ratio: 4), only screen and (min--moz-device-pixel-ratio: 4), only screen and (min-device-pixel-ratio: 4), only screen and (min-resolution: 384dpi), only screen and (min-resolution: 4dppx) {
        .box.default:before, .box.intro:before {
          border-image-source: url(/dist/188e79b540452675de75f81608330d9a.png);
          border-image-slice: 520 376 260 456 fill;
          border-image-repeat: stretch;
          border-image-width: auto; } }
    .box.default .boxHeader, .box.intro .boxHeader {
      color: #7D4634;
      text-shadow: 1px 1px 0 #B68363; }
    .box.default:after, .box.intro:after {
      content: '';
      border-width: 48px;
      border-style: solid;
      border-image-source: url(/dist/104a358f6e6cd79abc9ae0853d372999.png);
      border-image-slice: 48 fill;
      border-image-repeat: stretch;
      border-image-width: auto;
      display: block; }
      @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
        .box.default:after, .box.intro:after {
          border-image-source: url(/dist/935ed18c8ae96f9b700595a60a51a786.png);
          border-image-slice: 96 fill;
          border-image-repeat: stretch;
          border-image-width: auto; } }
      @media only screen and (-webkit-min-device-pixel-ratio: 4), only screen and (min--moz-device-pixel-ratio: 4), only screen and (min-device-pixel-ratio: 4), only screen and (min-resolution: 384dpi), only screen and (min-resolution: 4dppx) {
        .box.default:after, .box.intro:after {
          border-image-source: url(/dist/1871493a03fe0b44470991c6a02b447a.png);
          border-image-slice: 192 fill;
          border-image-repeat: stretch;
          border-image-width: auto; } }
      @media screen and (max-width: 600px) {
        .box.default:after, .box.intro:after {
          border: none; } }
  .box.default {
    background-color: #3C4f56; }
    @media screen and (max-width: 600px) {
      .box.default {
        background-color: transparent; } }
    .box.default .boxTitle {
      position: relative;
      left: 10px;
      z-index: 5;
      margin-right: 18px;
      margin-bottom: 50px; }
      .box.default .boxTitle > svg {
        position: absolute;
        top: 40px;
        z-index: 1;
        width: 100%;
        height: 28px;
        opacity: .4; }
      .box.default .boxTitle > h1 {
        position: absolute;
        top: -17px;
        left: 10px;
        right: 10px;
        z-index: 3;
        margin: 0;
        text-align: center;
        color: #7D4634;
        text-shadow: 1px 1px 2px rgba(254, 240, 206, 0.3), -1px 1px 2px rgba(254, 240, 206, 0.3), 1px -1px 2px rgba(254, 240, 206, 0.3), -1px -1px 2px rgba(254, 240, 206, 0.3); }
        @media screen and (max-width: 600px) {
          .box.default .boxTitle > h1 {
            position: relative;
            max-width: 95%; } }
      .box.default .boxTitle:before {
        content: '';
        position: absolute;
        z-index: 2;
        top: -31px;
        left: -33px;
        right: -31px;
        height: 0px;
        border-width: 85px 64px 0 86px;
        border-style: solid;
        border-image-source: url(data:image/png;base64,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);
        border-image-slice: 85 64 0 86 fill;
        border-image-repeat: repeat;
        border-image-width: auto; }
        @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
          .box.default .boxTitle:before {
            border-image-source: url(/dist/2bde8f0ac9f3128e2e74e39b5d073e24.png);
            border-image-slice: 170 128 0 172 fill;
            border-image-repeat: repeat;
            border-image-width: auto; } }
        @media only screen and (-webkit-min-device-pixel-ratio: 4), only screen and (min--moz-device-pixel-ratio: 4), only screen and (min-device-pixel-ratio: 4), only screen and (min-resolution: 384dpi), only screen and (min-resolution: 4dppx) {
          .box.default .boxTitle:before {
            border-image-source: url(/dist/679ead4e480bdb28a2ff6d726bac70d9.png);
            border-image-slice: 340 256 0 344 fill;
            border-image-repeat: repeat;
            border-image-width: auto; } }
  .box.intro {
    -webkit-box-shadow: inset 0 0 50px 20px rgba(0, 0, 0, 0.5);
            box-shadow: inset 0 0 50px 20px rgba(0, 0, 0, 0.5);
    background-color: transparent;
    background-repeat: repeat;
    background-image: url(/dist/943d661811648cf8c6a4262e7bce520c.png);
    background-size: auto 150px; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      .box.intro {
        background-image: url(/dist/46c88a3ea3b5ba4af97daa676af2578a.png); } }
    @media only screen and (-webkit-min-device-pixel-ratio: 4), only screen and (min--moz-device-pixel-ratio: 4), only screen and (min-device-pixel-ratio: 4), only screen and (min-resolution: 384dpi), only screen and (min-resolution: 4dppx) {
      .box.intro {
        background-image: url(/dist/04016f37e34a22a1b80856fab05a2b89.png); } }
    .box.intro img {
      position: absolute;
      z-index: 1; }
    .box.intro.portrait:before {
      top: calc(180px + 30px); }
    .box.intro.portrait .content {
      padding-top: calc(180px + 30px); }
    .box.intro.portrait img {
      top: calc(30px / 2 + 10px);
      left: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%); }
    @media (min-width: 750px) {
      .box.intro.landscape {
        min-width: 600px; }
        .box.intro.landscape:before {
          left: calc(180px - 50px + 10%); }
        .box.intro.landscape .content {
          padding-left: calc(180px + 10%); }
        .box.intro.landscape img {
          left: calc((-50px + 10%) / 2 + 10px);
          top: 50%;
          -webkit-transform: translateY(-50%);
                  transform: translateY(-50%); } }
    @media (max-width: 750px) {
      .box.intro.landscape:before {
        top: calc(180px + 30px); }
      .box.intro.landscape .content {
        padding-top: calc(180px + 30px); }
      .box.intro.landscape img {
        top: calc(30px / 2 + 10px);
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%); } }
  .box.live {
    color: #C8C7BF;
    background-color: #2C3C43; }
    @media screen and (max-width: 600px) {
      .box.live {
        background-color: transparent; } }
    .box.live .content:before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: -10px;
      height: 27px;
      background-size: contain;
      background-position: center;
      background-image: url(data:image/png;base64,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); }
      @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
        .box.live .content:before {
          background-image: url(/dist/2135fb1bf9d77ae1ffbe3efd9e815f57.png); } }
      @media only screen and (-webkit-min-device-pixel-ratio: 4), only screen and (min--moz-device-pixel-ratio: 4), only screen and (min-device-pixel-ratio: 4), only screen and (min-resolution: 384dpi), only screen and (min-resolution: 4dppx) {
        .box.live .content:before {
          background-image: url(/dist/2ee4defbd67a22cc9644fe7121eef2f1.png); } }
      @media screen and (max-width: 600px) {
        .box.live .content:before {
          display: none; } }
    .box.live .content table {
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse; }
      .box.live .content table td {
        text-align: left;
        padding: 0.5vw; }
      .box.live .content table tr:nth-of-type(even) {
        background-color: rgba(255, 255, 255, 0.05); }
      .box.live .content table tr td:last-of-type {
        text-align: right; }
    .box.live .content button {
      margin-top: 3vh; }
    .box.live:before {
      content: '';
      border-width: 130px 94px 65px 114px;
      border-style: solid;
      border-image-source: url(/dist/551797a1716a8c0ec4d708f1998f6d9c.png);
      border-image-slice: 130 94 65 114 fill;
      border-image-repeat: stretch;
      border-image-width: auto;
      display: block; }
      @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
        .box.live:before {
          border-image-source: url(/dist/f0cf77f0980ca541ad12f4dca674ea18.png);
          border-image-slice: 260 188 130 228 fill;
          border-image-repeat: stretch;
          border-image-width: auto; } }
      @media only screen and (-webkit-min-device-pixel-ratio: 4), only screen and (min--moz-device-pixel-ratio: 4), only screen and (min-device-pixel-ratio: 4), only screen and (min-resolution: 384dpi), only screen and (min-resolution: 4dppx) {
        .box.live:before {
          border-image-source: url(/dist/c03656d54a2541c38d9f0395474bfab0.png);
          border-image-slice: 520 376 260 456 fill;
          border-image-repeat: stretch;
          border-image-width: auto; } }
    .box.live:after {
      content: '';
      border-width: 48px;
      border-style: solid;
      border-image-source: url(/dist/714337b917ecb0b4337673fe24390c7d.png);
      border-image-slice: 48 fill;
      border-image-repeat: stretch;
      border-image-width: auto;
      display: block; }
      @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
        .box.live:after {
          border-image-source: url(/dist/b90dab307305c55c17037e1facb155cb.png);
          border-image-slice: 96 fill;
          border-image-repeat: stretch;
          border-image-width: auto; } }
      @media only screen and (-webkit-min-device-pixel-ratio: 4), only screen and (min--moz-device-pixel-ratio: 4), only screen and (min-device-pixel-ratio: 4), only screen and (min-resolution: 384dpi), only screen and (min-resolution: 4dppx) {
        .box.live:after {
          border-image-source: url(/dist/da230183e31a676ff990dfa59b4f2ed7.png);
          border-image-slice: 192 fill;
          border-image-repeat: stretch;
          border-image-width: auto; } }
      @media screen and (max-width: 600px) {
        .box.live:after {
          border: none; } }
*,
*:after,
*:before {
  background-repeat: no-repeat;
  background-position: top right;
  outline: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

html,
body {
  height: 100%;
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.35;
  color: #F2F2F2;
  background-color: #333333;
  margin: 0;
  direction: rtl;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto; }
  html .noOverflow,
  body .noOverflow {
    overflow: hidden; }
  html.farsi,
  body.farsi {
    font-family: 'IRAN Sans Web', sans-serif; }
    html.farsi *,
    body.farsi * {
      font-family: 'IRAN Sans Web', sans-serif !important; }

h1,
h2,
h3 {
  font-family: 'Noto Serif', serif;
  font-weight: bold; }

h1 {
  font-size: 2rem;
  text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, 0.75); }

h2 {
  font-size: 1.85rem;
  text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, 0.75); }

h3 {
  font-size: 1.5rem; }

h4 {
  font-size: 1.15rem; }

a {
  color: #F0A600;
  font-weight: bold;
  font-size: .95em;
  text-decoration: none; }
  a:hover {
    background-image: linear-gradient(to top, #F0A600, #F0A600 2px, rgba(240, 166, 0, 0) 2px, rgba(240, 166, 0, 0));
    cursor: pointer; }
  a:focus {
    outline: 1px dotted #F0A600; }
  a:active {
    color: #F3B100;
    background-image: linear-gradient(to top, #F3B100, #F3B100 2px, rgba(243, 177, 0, 0) 2px, rgba(243, 177, 0, 0)); }

table th {
  text-align: left; }

table.transparent th,
table.transparent td {
  border: none;
  padding: 3px 10px; }
  table.transparent th:first-child,
  table.transparent td:first-child {
    padding-left: 0; }
  table.transparent th:last-child,
  table.transparent td:last-child {
    padding-right: 0; }

table.transparent tr:first-child th,
table.transparent tr:first-child td {
  padding-top: 0; }

table.transparent tr:last-child th,
table.transparent tr:last-child td {
  padding-bottom: 0; }

svg.filter {
  width: 0;
  height: 0;
  position: absolute; }
label.radioButton {
  position: relative;
  display: block;
  line-height: 2rem;
  cursor: pointer; }
  label.radioButton input {
    position: absolute;
    right: 0;
    visibility: hidden; }
  label.radioButton svg {
    display: inline-block;
    position: relative;
    top: 2px;
    width: 1em;
    height: 1em;
    margin-left: 5px; }
    label.radioButton svg .circle {
      fill: #F5E8C8;
      stroke: #91816D;
      stroke-width: 2; }
    label.radioButton svg .dot {
      fill: transparent;
      stroke: #91816D;
      stroke-width: 0;
      -webkit-transition: stroke-width .3s ease-out;
      transition: stroke-width .3s ease-out; }
  label.radioButton input:checked ~ svg .dot {
    stroke-width: 6;
    fill: #91816D;
    -webkit-transition: stroke-width .2s ease-in;
    transition: stroke-width .2s ease-in; }

label.checkbox {
  position: relative;
  display: block;
  line-height: 2rem; }
  label.checkbox input {
    position: absolute;
    right: -20px;
    visibility: hidden; }
  label.checkbox svg {
    display: inline-block;
    position: relative;
    top: 2px;
    width: 1em;
    height: 1em;
    margin-left: 5px; }
    label.checkbox svg.checkbox {
      fill: #F5E8C8;
      stroke: #91816D;
      stroke-width: 2; }
      @media screen and (max-width: 1024px) {
        label.checkbox svg.checkbox {
          position: absolute;
          top: 7px; } }
    label.checkbox svg.checkmark {
      position: absolute;
      top: 6px;
      right: 2px;
      fill: transparent;
      stroke: #91816D;
      stroke-width: 4;
      stroke-dasharray: 40;
      stroke-dashoffset: 40;
      -webkit-transform: translate(3px, 1px) scale(0.85, 0.85);
              transform: translate(3px, 1px) scale(0.85, 0.85);
      -webkit-transition: stroke-dashoffset .3s ease-out;
      transition: stroke-dashoffset .3s ease-out; }
      .ie label.checkbox svg.checkmark {
        -webkit-transform: translate(-3px, 1px) scale(0.85);
                transform: translate(-3px, 1px) scale(0.85);
        top: 4px; }
      .checkbox input:checked ~ svg.checkmark {
        stroke-dashoffset: 0;
        -webkit-transition: stroke-dashoffset .2s ease-in;
        transition: stroke-dashoffset .2s ease-in; }
  label.checkbox .label {
    display: inline-block;
    position: relative; }
    @media screen and (max-width: 1024px) {
      label.checkbox .label {
        padding-right: 20px; } }
    label.checkbox .label.inline {
      display: inline; }
      label.checkbox .label.inline a {
        display: inline !important; }
  label.checkbox.required .speechBubble {
    position: absolute;
    right: calc(100% + 20px);
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
    label.checkbox.required .speechBubble.inline {
      left: calc(100% + 5px); }
    @media screen and (max-width: 1024px) {
      label.checkbox.required .speechBubble {
        right: -7px;
        position: relative;
        top: 100%;
        -webkit-transform: none;
                transform: none;
        margin-top: 5px; }
        label.checkbox.required .speechBubble svg.arrow {
          right: 5px; } }
  label.checkbox.required input:checked ~ .label .speechBubble {
    display: none; }
  label.checkbox.required input:not(:checked) ~ svg .checkbox {
    stroke: #D40000; }

label.textField {
  position: relative;
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: .88rem;
  line-height: .88rem;
  margin-bottom: 10px; }
  label.textField .label {
    position: absolute;
    top: 20px;
    right: 10px;
    display: inline-block;
    pointer-events: none;
    height: 0;
    overflow: visible;
    color: #B1A19B;
    cursor: text;
    -webkit-transition-property: padding, color, font-size, font-weight, top, right;
    transition-property: padding, color, font-size, font-weight, top, right;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
    -webkit-transition-duration: .2s;
            transition-duration: .2s;
    -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out; }
  label.textField .validation {
    position: absolute;
    right: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    margin-right: 5px;
    -webkit-transition-duration: 250ms;
            transition-duration: 250ms; }
    @media screen and (max-width: 1024px) {
      label.textField .validation {
        position: relative;
        width: 100%;
        top: 30px;
        right: 0;
        margin-right: 0; } }
  label.textField svg.valid, label.textField svg.invalid {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 25px;
    height: 25px;
    stroke-width: 3;
    stroke-dasharray: 40;
    stroke-dashoffset: 0;
    fill: transparent; }
  label.textField svg.valid {
    right: -32px;
    stroke: #3DA311; }
    label.textField svg.valid path {
      -webkit-animation: validationAnimation .3s ease-in;
              animation: validationAnimation .3s ease-in; }
  label.textField svg.invalid {
    right: -34px;
    stroke: #D40000; }
    label.textField svg.invalid path {
      -webkit-animation: validationAnimation .3s ease-in;
              animation: validationAnimation .3s ease-in; }
      label.textField svg.invalid path + path {
        -webkit-animation: validationAnimation .2s ease-in;
                animation: validationAnimation .2s ease-in; }
  @media screen and (max-width: 1024px) {
    label.textField svg {
      position: absolute;
      top: -35px; }
      label.textField svg.valid {
        right: auto;
        left: 12px;
        top: -49px; }
      label.textField svg.invalid {
        right: auto;
        left: 12px;
        top: -29px; } }
  label.textField input {
    width: 100%;
    padding: 20px 10px 2px 33px;
    background: rgba(125, 70, 52, 0.05);
    border: none;
    border-bottom: 1px solid #91816D;
    font-family: 'Open Sans', sans-serif;
    font-size: .88rem;
    line-height: 1.15;
    color: #333333; }
    label.textField input.pinLabel:not(:focus) {
      background: none; }
    label.textField input:focus ~ .label, label.textField input.pinLabel ~ .label {
      top: 2px;
      right: 5px;
      font-size: .79em;
      color: #B1A19B; }
    label.textField input:focus ~ .label {
      font-weight: bold;
      color: #91816D; }
    label.textField input:focus ~ .validation .valid,
    label.textField input:focus ~ .validation .invalid {
      stroke-dashoffset: 40; }
      label.textField input:focus ~ .validation .valid path,
      label.textField input:focus ~ .validation .invalid path {
        -webkit-animation: none;
                animation: none; }
    label.textField input:focus ~ .validation .speechBubble {
      display: none; }

label.dropdown {
  position: relative;
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: .88rem;
  line-height: .88rem;
  margin-bottom: 10px; }
  label.dropdown .label {
    position: absolute;
    top: 20px;
    right: 10px;
    width: 100%;
    color: #B1A19B;
    cursor: text;
    -webkit-transition-property: padding, color, font-size, font-weight, top, right;
    transition-property: padding, color, font-size, font-weight, top, right;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
    -webkit-transition-duration: .2s;
            transition-duration: .2s;
    -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out; }
  label.dropdown .validation {
    position: absolute;
    right: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    margin-right: 5px; }
    @media screen and (max-width: 1024px) {
      label.dropdown .validation {
        position: relative;
        width: 100%;
        right: 0;
        margin-right: 0;
        margin-bottom: 8px;
        -webkit-transform: none;
                transform: none;
        top: 11px; } }
  label.dropdown select {
    position: relative;
    z-index: 2;
    width: 100%;
    border-radius: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 1px solid #91816D;
    background: rgba(125, 70, 52, 0.05);
    font-family: 'Open Sans', sans-serif;
    font-size: .88rem;
    line-height: 1.15;
    color: #333333;
    height: calc(23px + 1rem + 1px);
    padding: 15px 10px 2px;
    -moz-appearance: none;
    -webkit-appearance: none; }
    label.dropdown select option {
      background: #fff; }
    label.dropdown select.pinLabel:not(:focus) {
      background: none; }
    label.dropdown select:focus ~ .label, label.dropdown select.pinLabel ~ .label {
      top: 1px;
      right: 5px;
      font-size: .79em;
      color: #B1A19B; }
    label.dropdown select:focus ~ .label {
      font-weight: bold;
      color: #91816D; }
    label.dropdown select:focus ~ .validation .valid,
    label.dropdown select:focus ~ .validation .invalid {
      stroke-dashoffset: 40; }
      label.dropdown select:focus ~ .validation .valid path,
      label.dropdown select:focus ~ .validation .invalid path {
        -webkit-animation: none;
                animation: none; }
    label.dropdown select:focus ~ .validation .speechBubble {
      display: none; }
  label.dropdown .arrowWrapper {
    margin-top: -1.5em;
    margin-left: 2.1em;
    float: left;
    position: relative;
    height: 1.5em;
    display: inline-block; }
    @media screen and (max-width: 1024px) {
      label.dropdown .arrowWrapper {
        left: 3.7em;
        top: 3.8em;
        position: absolute;
        margin: 0; } }
    label.dropdown .arrowWrapper:after {
      clear: both;
      float: none; }
  label.dropdown svg {
    width: 1em;
    fill: #7D4634; }
    label.dropdown svg.valid, label.dropdown svg.invalid {
      position: absolute;
      top: 57%;
      -webkit-transform: translateY(50%);
              transform: translateY(50%);
      width: 25px;
      height: 25px;
      stroke-width: 3;
      stroke-dasharray: 40;
      stroke-dashoffset: 0;
      fill: transparent; }
    label.dropdown svg.valid {
      right: -32px;
      stroke: #3DA311;
      right: -35px;
      top: -25px; }
      label.dropdown svg.valid path {
        -webkit-animation: validationAnimation .3s ease-in;
                animation: validationAnimation .3s ease-in; }
    label.dropdown svg.invalid {
      right: -34px;
      stroke: #D40000;
      top: -4px; }
      label.dropdown svg.invalid path {
        -webkit-animation: validationAnimation .3s ease-in;
                animation: validationAnimation .3s ease-in; }
        label.dropdown svg.invalid path + path {
          -webkit-animation: validationAnimation .2s ease-in;
                  animation: validationAnimation .2s ease-in; }
    @media screen and (max-width: 1024px) {
      label.dropdown svg {
        position: absolute;
        top: -35px; }
        label.dropdown svg.valid {
          right: auto;
          left: 12px;
          top: -30px;
          top: -55px; }
        label.dropdown svg.invalid {
          right: auto;
          left: 12px;
          top: -29px;
          top: -54px; } }

label.textarea {
  position: relative;
  display: block;
  border: 1px solid #91816D;
  font-family: 'Open Sans', sans-serif;
  font-size: .88rem;
  line-height: .88rem;
  padding-top: 18px; }
  label.textarea .label {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 10px 0;
    width: 100%;
    color: #B1A19B;
    background: rgba(125, 70, 52, 0.05);
    cursor: text;
    -webkit-transition-property: padding, color, font-size, font-weight, top, right;
    transition-property: padding, color, font-size, font-weight, top, right;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
    -webkit-transition-duration: .2s;
            transition-duration: .2s;
    -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out; }
  label.textarea .hiddenContent,
  label.textarea textarea {
    padding: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: .88rem;
    line-height: 1.15; }
  label.textarea .hiddenContent {
    width: 100%;
    min-height: 100px;
    visibility: hidden; }
  label.textarea .validation {
    position: absolute;
    right: 100%;
    top: 20px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    margin-right: 5px; }
    @media screen and (max-width: 1024px) {
      label.textarea .validation {
        width: 100%;
        right: 0;
        margin-right: 0;
        margin-bottom: 8px;
        -webkit-transform: none;
                transform: none;
        top: calc(100% + 11px); } }
  label.textarea svg.valid, label.textarea svg.invalid {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 25px;
    height: 25px;
    stroke-width: 3;
    stroke-dasharray: 40;
    stroke-dashoffset: 0;
    fill: transparent; }
  label.textarea svg.valid {
    right: -32px;
    stroke: #3DA311; }
    label.textarea svg.valid path {
      -webkit-animation: validationAnimation .3s ease-in;
              animation: validationAnimation .3s ease-in; }
  label.textarea svg.invalid {
    right: -34px;
    stroke: #D40000; }
    label.textarea svg.invalid path {
      -webkit-animation: validationAnimation .3s ease-in;
              animation: validationAnimation .3s ease-in; }
      label.textarea svg.invalid path + path {
        -webkit-animation: validationAnimation .2s ease-in;
                animation: validationAnimation .2s ease-in; }
  @media screen and (max-width: 1024px) {
    label.textarea svg {
      position: absolute;
      top: -35px; }
      label.textarea svg.valid {
        right: auto;
        left: 12px;
        top: -30px; }
      label.textarea svg.invalid {
        right: auto;
        left: 12px;
        top: -29px; } }
  label.textarea textarea {
    position: absolute;
    width: 100%;
    height: calc(100% - 18px);
    background: green;
    background: rgba(125, 70, 52, 0.05);
    border: none;
    color: #333333;
    overflow: hidden;
    resize: none; }
    label.textarea textarea.pinLabel:not(:focus) {
      background: none; }
      label.textarea textarea.pinLabel:not(:focus) ~ .label {
        background: none; }
    label.textarea textarea:focus ~ .label, label.textarea textarea.pinLabel ~ .label {
      padding: 2px 5px;
      font-size: .79em;
      color: #B1A19B; }
    label.textarea textarea:focus ~ .label {
      font-weight: bold;
      color: #91816D; }
    label.textarea textarea:focus ~ .validation .valid,
    label.textarea textarea:focus ~ .validation .invalid {
      stroke-dashoffset: 40; }
      label.textarea textarea:focus ~ .validation .valid path,
      label.textarea textarea:focus ~ .validation .invalid path {
        -webkit-animation: none;
                animation: none; }
    label.textarea textarea:focus ~ .validation .speechBubble {
      display: none; }

.speechBubble {
  position: relative;
  z-index: 2;
  min-width: 195px;
  max-width: 215px;
  min-height: 35px;
  max-height: calc(4rem + 36px);
  padding: 10px;
  border: 2px solid #D40000;
  border-radius: 5px;
  background-color: #F2F2F2;
  color: #D40000;
  font-size: .88rem;
  line-height: 1rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word; }
  @media screen and (max-width: 1024px) {
    .speechBubble {
      width: 100%;
      max-width: none;
      margin-bottom: 8px; } }
  .speechBubble svg.arrow {
    position: absolute;
    top: 50%;
    right: -13px;
    -webkit-transform: translateY(-50%) rotate(180deg);
            transform: translateY(-50%) rotate(180deg);
    width: 13px;
    height: 24px; }
    @media screen and (max-width: 1024px) {
      .speechBubble svg.arrow {
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
        top: -18px;
        right: calc(100% - 28px); }
        .ie .speechBubble svg.arrow {
          -webkit-transform: rotate(-90deg);
                  transform: rotate(-90deg); } }
  .speechBubble svg .arrowBorder {
    fill: #F2F2F2;
    stroke: #D40000;
    stroke-width: 3; }
  .speechBubble svg .arrowCover {
    fill: #F2F2F2; }

@-webkit-keyframes validationAnimation {
  0% {
    stroke-dashoffset: 40; }
  100% {
    stroke-dashoffset: 0; } }

@keyframes validationAnimation {
  0% {
    stroke-dashoffset: 40; }
  100% {
    stroke-dashoffset: 0; } }

@media screen and (max-width: 400px) {
  #gCaptchaContainerLogin, #gCaptchaContainer {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
    -webkit-transform-origin: right;
            transform-origin: right; } }

label.captcha {
  border: none;
  top: -40px; }
  label.captcha .validation {
    right: -50%; }
    label.captcha .validation > svg {
      display: none; }
    label.captcha .validation .arrow {
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      right: auto;
      left: -13px; }
  @media screen and (max-width: 1024px) {
    label.captcha {
      top: 0; }
      label.captcha .validation {
        top: 0;
        width: 100%;
        right: 0;
        -webkit-transform: none;
                transform: none; }
        label.captcha .validation .arrow {
          right: 20px;
          -webkit-transform: rotate(90deg);
                  transform: rotate(90deg);
          top: -18px; } }
  @media screen and (max-width: 1024px) and (max-width: 400px) {
    label.captcha .validation {
      top: -12px; }
      label.captcha .validation .arrow {
        right: 15px; } }
.buttonAjaxLoader {
  width: 16px;
  height: 16px;
  background: url("/images/ajax-loader.gif");
  display: inline-block;
  position: relative;
  top: 3px;
  margin-left: 5px; }
.button {
  background-color: transparent;
  background-clip: padding-box;
  border-radius: 4px;
  font-family: 'Open Sans', sans-serif;
  font-size: .9rem;
  text-transform: uppercase;
  padding: 12px 16px; }
  .button:hover {
    cursor: pointer; }
  .button:active {
    padding: 13px 16px 11px; }
  .button.default {
    border: 1px solid rgba(218, 119, 3, 0.7);
    border-radius: 4px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F8C000), to(#F0A600));
    background-image: linear-gradient(to bottom, #F8C000, #F0A600);
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5), inset 0 -2px 0 #DA7703;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5), inset 0 -2px 0 #DA7703;
    color: #492208;
    font-weight: 600; }
    .button.default:hover {
      background-image: -webkit-gradient(linear, left top, left bottom, from(#ffd600), to(#fec600));
      background-image: linear-gradient(to bottom, #ffd600, #fec600); }
    .button.default:focus:not(:active) {
      outline: 1px dotted #F0A600; }
    .button.default:active {
      background-image: -webkit-gradient(linear, left top, left bottom, from(#F0A600), to(#F8C000));
      background-image: linear-gradient(to bottom, #F0A600, #F8C000);
      -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5), inset 0 2px 0 #DA7703;
              box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5), inset 0 2px 0 #DA7703; }
  .button.simple {
    border: 1px solid rgba(125, 70, 52, 0.7);
    border-radius: 4px;
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5), inset 0 -2px 0 #7D4634;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5), inset 0 -2px 0 #7D4634;
    color: #492208;
    font-weight: 600; }
    .button.simple:hover {
      color: #DA7703;
      border-color: #DA7703;
      -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5), inset 0 -2px 0 #DA7703;
              box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5), inset 0 -2px 0 #DA7703; }
    .button.simple:focus:not(:active) {
      outline: 1px dotted #F0A600; }
    .button.simple:active {
      -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5), inset 0 2px 0 #F0A600;
              box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5), inset 0 2px 0 #F0A600; }
.language {
  width: 32px; }
#overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background: rgba(0, 0, 0, 0.7);
  overflow: auto;
  text-align: center;
  opacity: 0;
  -webkit-animation: appear 500ms forwards;
          animation: appear 500ms forwards; }
  #overlay:before {
    content: '';
    display: inline-block;
    height: 0; }
  @media screen and (max-width: 600px) {
    #overlay > div:nth-child(2) {
      -webkit-transform: scale(0.8);
              transform: scale(0.8);
      -webkit-animation: appear 500ms forwards;
              animation: appear 500ms forwards; } }
  #overlay .mobileCloseButton {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 65px;
    height: 65px;
    z-index: 500;
    cursor: pointer;
    -webkit-animation: appear 500ms forwards;
            animation: appear 500ms forwards;
    -webkit-animation-delay: 250ms;
            animation-delay: 250ms; }
    #overlay .mobileCloseButton svg {
      fill: transparent;
      stroke-width: 3;
      stroke-dasharray: 40;
      stroke-dashoffset: 0;
      stroke: #7D4634; }
    @media screen and (max-width: 600px) {
      #overlay .mobileCloseButton {
        display: block; } }

@-webkit-keyframes appear {
  0% {
    opacity: 0; }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes appear {
  0% {
    opacity: 0; }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }
.boxGrid {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .boxGrid .box {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    -ms-flex-positive: 1;
        flex-grow: 1;
    -ms-flex-negative: 1;
        flex-shrink: 1;
    -ms-flex-preferred-size: calc(100% / 3 * 1 - (.4vw + 15px) * 2);
        flex-basis: calc(100% / 3 * 1 - (.4vw + 15px) * 2);
    margin: calc(.4vw + 15px);
    min-width: 300px; }
    @media screen and (max-width: 600px) {
      .boxGrid .box {
        margin: auto; } }
    .boxGrid .box.intro {
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
      -ms-flex-preferred-size: calc(100% / 3 * 2 - (.4vw + 15px) * 2);
          flex-basis: calc(100% / 3 * 2 - (.4vw + 15px) * 2); }
.breadcrumb .crumb {
  position: relative;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.2);
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 0;
  padding-right: 7px;
  display: inline-block; }
  .breadcrumb .crumb span {
    font-size: .9rem;
    text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, 0.75); }
  .breadcrumb .crumb svg {
    position: relative;
    top: -1px;
    height: .65rem;
    width: .65rem;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    fill: #F2F2F2;
    margin-right: 15px; }
  .breadcrumb .crumb:last-child {
    padding-left: 7px; }
    .breadcrumb .crumb:last-child svg {
      display: none; }
.cookieInfo {
  position: relative;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  text-align: center;
  font-size: .9rem;
  padding: 4px 1.5rem;
  border: 1px solid;
  border-width: 0 0 1px 0;
  -o-border-image: linear-gradient(to right, rgba(242, 242, 242, 0) 20%, rgba(242, 242, 242, 0.9), rgba(242, 242, 242, 0) 80%) 1 stretch;
     border-image: -webkit-gradient(linear, left top, right top, color-stop(20%, rgba(242, 242, 242, 0)), color-stop(rgba(242, 242, 242, 0.9)), color-stop(80%, rgba(242, 242, 242, 0))) 1 stretch;
     border-image: linear-gradient(to right, rgba(242, 242, 242, 0) 20%, rgba(242, 242, 242, 0.9), rgba(242, 242, 242, 0) 80%) 1 stretch;
  width: 100%; }
  @media screen and (max-width: 1024px) {
    .cookieInfo {
      border: none; } }
  .cookieInfo .confirm {
    display: inline-block; }
  .cookieInfo button {
    vertical-align: middle;
    margin: 0 20px;
    padding: 5px 10px; }
    .cookieInfo button:active {
      padding: 6px 10px 4px; }
  @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 600px) and (orientation: landscape) {
    .cookieInfo {
      position: fixed;
      top: 48px;
      padding: 2em 1em; }
      .cookieInfo > span:first-child {
        display: block;
        margin-bottom: 2em; }
      .cookieInfo button {
        margin-right: 0; } }
.world {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 120px;
  background-size: cover;
  margin: 0 auto;
  border: 1px solid #7D4634;
  border-radius: 8px;
  -webkit-box-shadow: 0 0 2px 1px rgba(125, 70, 52, 0.7);
          box-shadow: 0 0 2px 1px rgba(125, 70, 52, 0.7);
  padding: 8px 13px; }
  .world.default {
    background-image: url(/dist/0d5c5c92989b3c9a6ca003db91fc25a1.jpg); }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      .world.default {
        background-image: url(/dist/eb6193da9a64c6cb59865e13e3b4191a.jpg); } }
  .world.tournament {
    background-image: url(/dist/fc5974bfce9f84900850632ca8716c20.jpg); }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      .world.tournament {
        background-image: url(/dist/820f1e62c564b69ccc1c94523bc00452.jpg); } }
  .world.fireAndSand {
    background-image: url(/dist/2674c610b354ed143aabf2f355352ca3.jpg); }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      .world.fireAndSand {
        background-image: url(/dist/fb8458b607159b707740cf61e2120813.jpg); } }
  .world.pathToPandora {
    background-image: url(/dist/11ee6bb1ba218215f2cd02d7f8e26065.jpg); }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      .world.pathToPandora {
        background-image: url(/dist/7feb499013ce51753a985da4a711c698.jpg); } }
  .world .title {
    font-family: 'Noto Serif', serif;
    color: #F2F2F2;
    text-shadow: 1px 1px 2px #333333, -1px 1px 2px #333333, 1px -1px 2px #333333, -1px -1px 2px #333333;
    text-transform: uppercase;
    font-size: 1.75rem;
    font-weight: bold;
    letter-spacing: 0.1rem; }
  .world .serverTime {
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0 5px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: .8rem;
    padding: 2px 7px; }
    .world .serverTime:hover {
      background-color: rgba(0, 0, 0, 0.3); }
    .world .serverTime .clock {
      stroke: white;
      stroke-width: 10;
      width: 1em;
      height: 1em;
      vertical-align: top;
      margin-left: 5px;
      margin-top: 2px; }

.worldSelection {
  width: 100%;
  overflow: hidden;
  position: absolute; }
  .worldSelection .transformWrapper {
    position: relative;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-duration: .4s;
            transition-duration: .4s;
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    -webkit-transform: translateY(calc(-100% - 30px));
            transform: translateY(calc(-100% - 30px)); }
  .worldSelection.shown {
    position: relative; }
    .worldSelection.shown .transformWrapper {
      -webkit-transition-timing-function: ease-out;
              transition-timing-function: ease-out;
      -webkit-transform: translateY(0);
              transform: translateY(0); }
  .worldSelection .worldGroup:nth-of-type(n+2) {
    margin-top: 20px; }
  .worldSelection h4 {
    color: #7D4634;
    margin: 0 0 10px; }
  .worldSelection .world {
    cursor: pointer; }
    .worldSelection .world:nth-child(n+2) {
      margin-top: 10px; }
    .worldSelection .world:hover {
      color: #F0A600;
      -webkit-box-shadow: inset 0 0 20px 5px rgba(240, 166, 0, 0.4);
              box-shadow: inset 0 0 20px 5px rgba(240, 166, 0, 0.4); }
  .worldSelection .linkWrapper {
    text-align: center;
    margin-top: 25px; }
    .worldSelection .linkWrapper:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: ' ';
      clear: both;
      height: 0; }
  .worldSelection a {
    display: inline-block; }

.worldGroup .world {
  cursor: pointer; }
  .worldGroup .world:hover {
    color: #F0A600;
    -webkit-box-shadow: inset 0 0 20px 5px rgba(240, 166, 0, 0.4);
            box-shadow: inset 0 0 20px 5px rgba(240, 166, 0, 0.4); }
.deprecatedBrowser {
  width: 100vw;
  height: 100vh;
  background: url(/dist/e9f85679221e1ee0f8c024501d008614.jpg) no-repeat center;
  background-size: cover;
  text-align: center; }
  .deprecatedBrowser:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle; }
  .deprecatedBrowser .sign {
    width: 100vw;
    max-width: 500px;
    height: 320px;
    display: inline-block;
    background-image: url(/dist/b73428ff092e8b8ec0cc9292965085fb.png);
    background-size: contain;
    padding: 20px;
    position: relative;
    vertical-align: middle;
    text-align: left; }
    .deprecatedBrowser .sign .signContent {
      width: 100%;
      height: calc(100% - 15px);
      padding: 10px;
      -webkit-transform: rotate(-4.5deg);
              transform: rotate(-4.5deg);
      line-height: 2em;
      font-size: 140%;
      text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.8); }
      .deprecatedBrowser .sign .signContent h1 {
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
        font-size: 160%;
        text-align: center; }
#Login {
  display: inline-block;
  position: relative;
  z-index: 200; }
  @media screen and (max-width: 600px) {
    #Login {
      width: 100%;
      height: 100%; } }
  #Login .box {
    top: 17vh;
    width: 498px;
    text-align: right;
    position: relative; }
    @media screen and (max-width: 600px) {
      #Login .box {
        width: 100%;
        min-height: 100%;
        top: 0; }
        #Login .box:after {
          display: none; }
        #Login .box .boxTitle {
          margin-top: 65px;
          margin-bottom: -20px; }
          #Login .box .boxTitle > svg {
            display: none; }
          #Login .box .boxTitle:before {
            display: none; } }
    #Login .box .linkWrapper {
      text-align: center; }
      #Login .box .linkWrapper:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: ' ';
        clear: both;
        height: 0; }
    #Login .box a {
      display: inline-block; }
    #Login .box .registrationWrapper {
      position: relative;
      opacity: 1;
      -webkit-transition: opacity .2s linear;
      transition: opacity .2s linear;
      -webkit-transition-delay: .2s;
              transition-delay: .2s; }
      #Login .box .registrationWrapper.behind {
        position: absolute;
        z-index: -1;
        top: 25px;
        opacity: 0;
        -webkit-transition-delay: 0s;
                transition-delay: 0s; }
      #Login .box .registrationWrapper .change {
        margin: 3px 3px 20px;
        display: inline-block;
        float: left; }
      #Login .box .registrationWrapper .button {
        display: block;
        width: 100%; }
  @media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-height: 1024px) and (orientation: landscape) {
    #Login .lowResLabel {
      margin-right: 0; } }
  #Login .lowResLabel small {
    display: inline-block;
    line-height: 1.1em;
    margin-right: 1.65em;
    position: relative;
    top: -1em; }
    @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 600px) and (orientation: landscape) {
      #Login .lowResLabel small {
        top: -0.25em; } }

.gameworldDebugCookie {
  font-size: 0.9em;
  margin-bottom: 0.75em;
  margin-top: 0.5em; }
  .gameworldDebugCookie small {
    margin-left: 1em; }
    .gameworldDebugCookie small a {
      font-weight: normal; }
#ForgotGameworld {
  display: inline-block;
  position: relative;
  z-index: 200; }
  @media screen and (max-width: 600px) {
    #ForgotGameworld {
      width: 100%;
      height: 100%; } }
  #ForgotGameworld .box {
    top: 17vh;
    width: 498px;
    text-align: right;
    position: relative; }
    @media screen and (max-width: 600px) {
      #ForgotGameworld .box {
        width: 100%;
        min-height: 100%;
        top: 0; }
        #ForgotGameworld .box:after {
          display: none; }
        #ForgotGameworld .box .boxTitle {
          margin-top: 65px;
          margin-bottom: -20px; }
          #ForgotGameworld .box .boxTitle > svg {
            display: none; }
          #ForgotGameworld .box .boxTitle:before {
            display: none; } }
    #ForgotGameworld .box img {
      width: 100%;
      margin-bottom: 20px;
      border: 1px solid rgba(73, 34, 8, 0.8); }
    #ForgotGameworld .box a {
      display: inline-block; }
    #ForgotGameworld .box .gameworldInfo {
      margin-bottom: 25px; }
    #ForgotGameworld .box .button {
      display: block;
      width: 100%; }
  #ForgotGameworld .captcha {
    width: 100%;
    height: 100px;
    background: #ffff00;
    border: 1px solid black;
    font-size: 5rem;
    text-align: center; }
#ForgotPassword {
  display: inline-block;
  position: relative;
  z-index: 200; }
  @media screen and (max-width: 600px) {
    #ForgotPassword {
      width: 100%;
      height: 100%; } }
  #ForgotPassword .box {
    top: 17vh;
    width: 498px;
    text-align: right;
    position: relative; }
    @media screen and (max-width: 600px) {
      #ForgotPassword .box {
        width: 100%;
        min-height: 100%;
        top: 0; }
        #ForgotPassword .box:after {
          display: none; }
        #ForgotPassword .box .boxTitle {
          margin-top: 65px;
          margin-bottom: -20px; }
          #ForgotPassword .box .boxTitle > svg {
            display: none; }
          #ForgotPassword .box .boxTitle:before {
            display: none; } }
    #ForgotPassword .box img {
      width: 100%;
      margin-bottom: 20px;
      border: 1px solid rgba(73, 34, 8, 0.8); }
    #ForgotPassword .box a {
      display: inline-block; }
    #ForgotPassword .box .passwordInfo {
      margin-bottom: 25px; }
    #ForgotPassword .box .button {
      display: block;
      width: 100%; }
  #ForgotPassword .captcha {
    width: 100%;
    height: 100px;
    background: #ffff00;
    border: 1px solid black;
    font-size: 5rem;
    text-align: center; }
#Registration {
  display: inline-block;
  position: relative;
  z-index: 200; }
  @media screen and (max-width: 600px) {
    #Registration {
      width: 100%;
      height: 100%; } }
  #Registration .box {
    top: 17vh;
    width: 498px;
    text-align: right;
    position: relative; }
    @media screen and (max-width: 600px) {
      #Registration .box {
        width: 100%;
        min-height: 100%;
        top: 0; }
        #Registration .box:after {
          display: none; }
        #Registration .box .boxTitle {
          margin-top: 65px;
          margin-bottom: -20px; }
          #Registration .box .boxTitle > svg {
            display: none; }
          #Registration .box .boxTitle:before {
            display: none; } }
    #Registration .box a {
      display: inline-block; }
      #Registration .box a.inline {
        line-height: 1.33rem; }
    #Registration .box .linkWrapper {
      position: relative;
      text-align: center; }
      #Registration .box .linkWrapper:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: ' ';
        clear: both;
        height: 0; }
    #Registration .box .registrationWrapper {
      position: relative;
      opacity: 1;
      -webkit-transition: opacity .2s linear;
      transition: opacity .2s linear;
      -webkit-transition-delay: .2s;
              transition-delay: .2s; }
      #Registration .box .registrationWrapper.behind {
        position: absolute;
        z-index: -1;
        top: 25px;
        opacity: 0;
        -webkit-transition-delay: 0s;
                transition-delay: 0s; }
      #Registration .box .registrationWrapper .change {
        margin: 3px 3px 20px;
        display: inline-block;
        position: relative;
        float: left; }
      #Registration .box .registrationWrapper .changeInfo {
        position: absolute;
        top: -2rem;
        right: calc(100% + 13px); }
        @media screen and (max-width: 1024px) {
          #Registration .box .registrationWrapper .changeInfo {
            position: relative;
            top: 60px;
            right: 0; } }
        #Registration .box .registrationWrapper .changeInfo .speechBubble {
          display: inline-block;
          text-align: right; }
          @media screen and (max-width: 1024px) {
            #Registration .box .registrationWrapper .changeInfo .speechBubble {
              top: -4rem; } }
      #Registration .box .registrationWrapper .invitationInfo {
        margin-bottom: 20px; }
      #Registration .box .registrationWrapper .button {
        display: block;
        width: 100%; }
#Activation {
  display: inline-block;
  position: relative;
  z-index: 200; }
  @media screen and (max-width: 600px) {
    #Activation {
      width: 100%;
      height: 100%; } }
  #Activation .box {
    top: 17vh;
    width: 498px;
    text-align: right;
    position: relative; }
    @media screen and (max-width: 600px) {
      #Activation .box {
        width: 100%;
        min-height: 100%;
        top: 0; }
        #Activation .box:after {
          display: none; }
        #Activation .box .boxTitle {
          margin-top: 65px;
          margin-bottom: -20px; }
          #Activation .box .boxTitle > svg {
            display: none; }
          #Activation .box .boxTitle:before {
            display: none; } }
    #Activation .box a {
      display: inline-block; }
    #Activation .box .activationInfo {
      margin-bottom: 25px; }
    #Activation .box .button {
      display: block;
      width: 100%; }
    #Activation .box .linkWrapper {
      text-align: center; }
#NoMail {
  display: inline-block;
  position: relative;
  z-index: 200; }
  @media screen and (max-width: 600px) {
    #NoMail {
      width: 100%;
      height: 100%; } }
  #NoMail .box {
    top: 17vh;
    width: 498px;
    text-align: right;
    position: relative; }
    @media screen and (max-width: 600px) {
      #NoMail .box {
        width: 100%;
        min-height: 100%;
        top: 0; }
        #NoMail .box:after {
          display: none; }
        #NoMail .box .boxTitle {
          margin-top: 65px;
          margin-bottom: -20px; }
          #NoMail .box .boxTitle > svg {
            display: none; }
          #NoMail .box .boxTitle:before {
            display: none; } }
    #NoMail .box a {
      display: inline-block; }
    #NoMail .box .mailInfo {
      margin-bottom: 25px; }
    #NoMail .box .button {
      display: block;
      width: 100%; }
    #NoMail .box .linkWrapper {
      text-align: center; }
#languageSelection {
  display: inline-block;
  position: relative;
  z-index: 200; }
  @media screen and (max-width: 600px) {
    #languageSelection {
      width: 100%;
      height: 100%; } }
  #languageSelection .box {
    top: 17vh;
    width: 498px;
    text-align: right;
    position: relative;
    top: 4vh; }
    @media screen and (max-width: 600px) {
      #languageSelection .box {
        width: 100%;
        min-height: 100%;
        top: 0; }
        #languageSelection .box:after {
          display: none; }
        #languageSelection .box .boxTitle {
          margin-top: 65px;
          margin-bottom: -20px; }
          #languageSelection .box .boxTitle > svg {
            display: none; }
          #languageSelection .box .boxTitle:before {
            display: none; } }
    @media (min-width: 800px) {
      #languageSelection .box {
        width: 700px; } }
  #languageSelection .magnifier {
    position: absolute;
    width: 20px;
    right: 11px;
    top: 9px;
    fill: #7D4634;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1); }
    #languageSelection .magnifier path {
      -webkit-transform-origin: center;
              transform-origin: center; }
    #languageSelection .magnifier line {
      stroke-width: 0.4;
      stroke: #7D4634; }
  #languageSelection .textField input {
    padding-right: 40px; }
  #languageSelection .textField .label {
    right: 40px;
    width: calc(100% - 40px);
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  #languageSelection .recommended:after,
  #languageSelection .others:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ' ';
    clear: both;
    height: 0; }
  @media (min-width: 800px) {
    #languageSelection .recommended label,
    #languageSelection .others label {
      float: right;
      width: 50%; } }
  #languageSelection .recommended {
    margin-top: 30px; }
  #languageSelection .noMatch {
    margin-top: 30px;
    text-align: center;
    height: 33px; }
  #languageSelection .others {
    margin-top: 13px;
    padding-top: 20px;
    border: 1px solid;
    border-width: 1px 0 0 0;
    -o-border-image: linear-gradient(to right, rgba(182, 131, 99, 0) 0%, rgba(182, 131, 99, 0.6) 20%, #b68363 50%, rgba(182, 131, 99, 0.6) 70%, rgba(182, 131, 99, 0) 100%) 2;
       border-image: -webkit-gradient(linear, left top, right top, from(rgba(182, 131, 99, 0)), color-stop(20%, rgba(182, 131, 99, 0.6)), color-stop(50%, #b68363), color-stop(70%, rgba(182, 131, 99, 0.6)), to(rgba(182, 131, 99, 0))) 2;
       border-image: linear-gradient(to right, rgba(182, 131, 99, 0) 0%, rgba(182, 131, 99, 0.6) 20%, #b68363 50%, rgba(182, 131, 99, 0.6) 70%, rgba(182, 131, 99, 0) 100%) 2; }
  #languageSelection .radioButton {
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  #languageSelection .language {
    width: 2rem;
    margin-left: 5px;
    vertical-align: text-bottom;
    position: relative;
    top: 8px; }
    #languageSelection .language svg {
      width: 32px;
      height: 24px;
      margin-left: 0; }
  #languageSelection .addition {
    unicode-bidi: embed;
    direction: ltr;
    font-size: .9em;
    color: #91816D; }

.ie #languageSelection .radioButton {
  display: inline-block;
  width: 50%; }

.ie #languageSelection .language {
  top: 4px; }
#goldTransfer {
  display: inline-block;
  position: relative;
  z-index: 200; }
  @media screen and (max-width: 600px) {
    #goldTransfer {
      width: 100%;
      height: 100%; } }
  #goldTransfer .box {
    top: 17vh;
    width: 498px;
    text-align: right;
    position: relative; }
    @media screen and (max-width: 600px) {
      #goldTransfer .box {
        width: 100%;
        min-height: 100%;
        top: 0; }
        #goldTransfer .box:after {
          display: none; }
        #goldTransfer .box .boxTitle {
          margin-top: 65px;
          margin-bottom: -20px; }
          #goldTransfer .box .boxTitle > svg {
            display: none; }
          #goldTransfer .box .boxTitle:before {
            display: none; } }
    #goldTransfer .box a {
      display: inline-block; }
    #goldTransfer .box .transferInfo {
      margin-bottom: 25px; }
    #goldTransfer .box .confirmInfo {
      margin: 25px 0; }
    #goldTransfer .box .gold {
      font-weight: bold; }
    #goldTransfer .box .button {
      display: block;
      width: 100%; }
    #goldTransfer .box .linkWrapper {
      text-align: center; }
      #goldTransfer .box .linkWrapper:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: ' ';
        clear: both;
        height: 0; }
    #goldTransfer .box .change {
      margin: 3px 3px 0px;
      float: left; }
    #goldTransfer .box table {
      margin-top: 25px; }
    #goldTransfer .box .choosePlayer {
      margin-top: 25px;
      float: left; }
    #goldTransfer .box .closeWindow {
      width: 100%; }
    #goldTransfer .box .boxBody td {
      padding-left: 0.5em; }
/* open-sans-300 - latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese */
@font-face {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 300;
  font-display: fallback;
  /* IE9 Compatible mode */
  src: url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-300.eot);
  /* IE6-8, Super Modern Browsers, Modern Browsers, Safari&Android&iOS, Legacy iOS */
  src: local("Open Sans Light"), local("OpenSans-Light"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-300.eot?#iefix) format("embedded-opentype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-300.woff2) format("woff2"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-300.woff) format("woff"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-300.ttf) format("truetype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-300.svg#OpenSans) format("svg"); }

/* open-sans-regular - latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese */
@font-face {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-regular.eot);
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-regular.eot?#iefix) format("embedded-opentype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-regular.woff2) format("woff2"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-regular.woff) format("woff"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-regular.ttf) format("truetype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-regular.svg#OpenSans) format("svg"); }

/* open-sans-300italic - latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese */
@font-face {
  font-family: Open Sans;
  font-style: italic;
  font-weight: 300;
  font-display: fallback;
  src: url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-300italic.eot);
  src: local("Open Sans Light Italic"), local("OpenSans-LightItalic"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-300italic.eot?#iefix) format("embedded-opentype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-300italic.woff2) format("woff2"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-300italic.woff) format("woff"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-300italic.ttf) format("truetype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-300italic.svg#OpenSans) format("svg"); }

/* open-sans-italic - latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese */
@font-face {
  font-family: Open Sans;
  font-style: italic;
  font-weight: 400;
  font-display: fallback;
  src: url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-italic.eot);
  src: local("Open Sans Italic"), local("OpenSans-Italic"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-italic.eot?#iefix) format("embedded-opentype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-italic.woff2) format("woff2"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-italic.woff) format("woff"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-italic.ttf) format("truetype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-italic.svg#OpenSans) format("svg"); }

/* open-sans-600 - latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese */
@font-face {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-display: fallback;
  src: url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-600.eot);
  src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-600.eot?#iefix) format("embedded-opentype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-600.woff2) format("woff2"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-600.woff) format("woff"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-600.ttf) format("truetype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-600.svg#OpenSans) format("svg"); }

/* open-sans-600italic - latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese */
@font-face {
  font-family: Open Sans;
  font-style: italic;
  font-weight: 600;
  font-display: fallback;
  src: url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-600italic.eot);
  src: local("Open Sans SemiBold Italic"), local("OpenSans-SemiBoldItalic"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-600italic.eot?#iefix) format("embedded-opentype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-600italic.woff2) format("woff2"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-600italic.woff) format("woff"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-600italic.ttf) format("truetype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-600italic.svg#OpenSans) format("svg"); }

/* open-sans-700 - latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese */
@font-face {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-700.eot);
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-700.eot?#iefix) format("embedded-opentype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-700.woff2) format("woff2"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-700.woff) format("woff"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-700.ttf) format("truetype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-700.svg#OpenSans) format("svg"); }

/* open-sans-800 - latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese */
@font-face {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 800;
  font-display: fallback;
  src: url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-800.eot);
  src: local("Open Sans ExtraBold"), local("OpenSans-ExtraBold"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-800.eot?#iefix) format("embedded-opentype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-800.woff2) format("woff2"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-800.woff) format("woff"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-800.ttf) format("truetype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-800.svg#OpenSans) format("svg"); }

/* open-sans-800italic - latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese */
@font-face {
  font-family: Open Sans;
  font-style: italic;
  font-weight: 800;
  font-display: fallback;
  src: url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-800italic.eot);
  src: local("Open Sans ExtraBold Italic"), local("OpenSans-ExtraBoldItalic"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-800italic.eot?#iefix) format("embedded-opentype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-800italic.woff2) format("woff2"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-800italic.woff) format("woff"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-800italic.ttf) format("truetype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-800italic.svg#OpenSans) format("svg"); }

/* open-sans-700italic - latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese */
@font-face {
  font-family: Open Sans;
  font-style: italic;
  font-weight: 700;
  font-display: fallback;
  src: url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-700italic.eot);
  src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-700italic.eot?#iefix) format("embedded-opentype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-700italic.woff2) format("woff2"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-700italic.woff) format("woff"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-700italic.ttf) format("truetype"), url(/src/frontend/fonts/Open_Sans/open-sans-v14-latin-ext_latin_cyrillic-ext_greek_greek-ext_cyrillic_vietnamese-700italic.svg#OpenSans) format("svg"); }

/* Noto Serif 400 */
@font-face {
  font-family: 'Noto Serif', serif;
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url("/src/frontend/fonts/Noto_Serif/regular/NotoSerif-Regular.eot");
  src: local("Noto Serif"), local("NotoSerif"), url("/src/frontend/fonts/Noto_Serif/regular/NotoSerif-Regular.eot?#iefix") format("embedded-opentype"), url("/src/frontend/fonts/Noto_Serif/regular/NotoSerif-Regular.woff2") format("woff2"), url("/src/frontend/fonts/Noto_Serif/regular/NotoSerif-Regular.woff") format("woff"), url("/src/frontend/fonts/Noto_Serif/regular/NotoSerif-Regular.ttf") format("truetype"), url("/src/frontend/fonts/Noto_Serif/regular/NotoSerif-Regular.svg#NotoSerif") format("svg"); }

/* Noto Serif 700 */
@font-face {
  font-family: 'Noto Serif', serif;
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url("/src/frontend/fonts/Noto_Serif/bold/NotoSerif-Bold.eot");
  src: local("Noto Serif Bold"), local("NotoSerif-Bold"), url("/src/frontend/fonts/Noto_Serif/bold/NotoSerif-Bold.eot?#iefix") format("embedded-opentype"), url("/src/frontend/fonts/Noto_Serif/bold/NotoSerif-Bold.woff2") format("woff2"), url("/src/frontend/fonts/Noto_Serif/bold/NotoSerif-Bold.woff") format("woff"), url("/src/frontend/fonts/Noto_Serif/bold/NotoSerif-Bold.ttf") format("truetype"), url("/src/frontend/fonts/Noto_Serif/bold/NotoSerif-Bold.svg#NotoSerif") format("svg"); }

/* IRANSans4 */
@font-face {
  font-family: "IRAN Sans Web";
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url(/src/frontend/fonts/IranSans4/IRANSansWeb.eot);
  src: local("IRAN Sans Web Regular"), local("IRANSansWeb-Regular"), url(/src/frontend/fonts/IranSans4/IRANSansWeb.eot?#iefix) format("embedded-opentype"), url(/src/frontend/fonts/IranSans4/IRANSansWeb.woff2) format("woff2"), url(/src/frontend/fonts/IranSans4/IRANSansWeb.woff) format("woff"), url(/src/frontend/fonts/IranSans4/IRANSansWeb.ttf) format("truetype"); }

@font-face {
  font-family: "IRAN Sans Web";
  font-style: normal;
  font-weight: 300;
  font-display: fallback;
  src: url(/src/frontend/fonts/IranSans4/IRANSansWeb_Light.eot);
  src: local("IRAN Sans Web Light"), local("IRANSansWeb-Light"), url(/src/frontend/fonts/IranSans4/IRANSansWeb_Light.eot?#iefix) format("embedded-opentype"), url(/src/frontend/fonts/IranSans4/IRANSansWeb_Light.woff2) format("woff2"), url(/src/frontend/fonts/IranSans4/IRANSansWeb_Light.woff) format("woff"), url(/src/frontend/fonts/IranSans4/IRANSansWeb_Light.ttf) format("truetype"); }

@font-face {
  font-family: "IRAN Sans Web";
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url(/src/frontend/fonts/IranSans4/IRANSansWeb_Bold.eot);
  src: local("IRAN Sans Web Bold"), local("IRANSansWeb-Bold"), url(/src/frontend/fonts/IranSans4/IRANSansWeb_Bold.eot?#iefix) format("embedded-opentype"), url(/src/frontend/fonts/IranSans4/IRANSansWeb_Bold.woff2) format("woff2"), url(/src/frontend/fonts/IranSans4/IRANSansWeb_Bold.woff) format("woff"), url(/src/frontend/fonts/IranSans4/IRANSansWeb_Bold.ttf) format("truetype"); }

@font-face {
  font-family: "IRAN Sans Web";
  font-style: normal;
  font-weight: 600;
  font-display: fallback;
  src: url(/src/frontend/fonts/IranSans4/IRANSansWeb_Medium.eot);
  src: local("IRAN Sans Web SemiBold"), local("IRANSansWeb-SemiBold"), url(/src/frontend/fonts/IranSans4/IRANSansWeb_Medium.eot?#iefix) format("embedded-opentype"), url(/src/frontend/fonts/IranSans4/IRANSansWeb_Medium.woff2) format("woff2"), url(/src/frontend/fonts/IranSans4/IRANSansWeb_Medium.woff) format("woff"), url(/src/frontend/fonts/IranSans4/IRANSansWeb_Medium.ttf) format("truetype"); }
#fixedBackgrounds {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  z-index: 0; }
  #fixedBackgrounds img {
    opacity: 0;
    position: absolute; }
    #fixedBackgrounds img.playerBG {
      opacity: 1;
      z-index: 1; }
    #fixedBackgrounds img.empireBG {
      z-index: 2; }
    #fixedBackgrounds img.battleBG {
      z-index: 3; }
      #fixedBackgrounds img.battleBG.burnTheCity {
        -webkit-animation: burningCity 5s infinite linear;
                animation: burningCity 5s infinite linear;
        -webkit-animation-delay: 1500ms;
                animation-delay: 1500ms; }

@-webkit-keyframes burningCity {
  0% {
    opacity: 1; }
  20% {
    opacity: 0.8; }
  35% {
    opacity: 0.5; }
  50% {
    opacity: 0.8; }
  55% {
    opacity: 0.6; }
  60% {
    opacity: 0.5; }
  70% {
    opacity: 0.7; }
  80% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

@keyframes burningCity {
  0% {
    opacity: 1; }
  20% {
    opacity: 0.8; }
  35% {
    opacity: 0.5; }
  50% {
    opacity: 0.8; }
  55% {
    opacity: 0.6; }
  60% {
    opacity: 0.5; }
  70% {
    opacity: 0.7; }
  80% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }
#playNow .army,
#playNow .soldier {
  position: absolute;
  z-index: 1; }

#playNow .army {
  height: 60vh;
  bottom: 11vh; }
  @media (min-width: 1600px) {
    #playNow .army {
      left: 0; } }
  @media (max-width: 1600px) {
    #playNow .army {
      left: calc(0px - 20vh); } }
  @media (max-width: 900px) {
    #playNow .army {
      display: none; } }

#playNow .soldier {
  bottom: 0vh;
  height: 90vh; }
  @media (min-width: 1600px) {
    #playNow .soldier {
      left: 70px; } }
  @media (max-width: 1600px) {
    #playNow .soldier {
      right: calc(65vw - 30vh); } }
  @media (max-width: 800px) {
    #playNow .soldier {
      display: none; } }

#playNow article {
  z-index: 5;
  left: 2.5vw;
  top: 20vh; }
  @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 600px) and (orientation: landscape) {
    #playNow article {
      top: 3vh;
      margin-top: 71px;
      padding-left: 2.5vw;
      padding-right: 2.5vw;
      margin-bottom: 32px;
      left: 0;
      right: 0; } }
  #playNow article h1 {
    max-width: 100vw;
    position: relative;
    margin: 0;
    font-weight: normal;
    font-size: calc(62px + (70 - 62) * ((100vw - 1024px) / (1600 - 1024)));
    text-transform: uppercase; }
    .chrome #playNow article h1,
    .opera #playNow article h1 {
      word-wrap: break-word; }
    #playNow article h1 > span:first-child {
      display: block;
      white-space: pre-wrap;
      font-size: calc(30px + (36 - 30) * ((100vw - 1024px) / (1600 - 1024)));
      padding-right: 5.5%; }
    @media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-height: 1024px) and (orientation: landscape) {
      #playNow article h1 {
        font-size: calc(30px + (62 - 30) * ((100vw - 600px) / (1024 - 600))); }
        #playNow article h1 > span:first-child {
          font-size: calc(22px + (30 - 22) * ((100vw - 600px) / (1024 - 600))); } }
    @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 600px) and (orientation: landscape) {
      #playNow article h1 {
        font-size: 30px; }
        #playNow article h1 > span:first-child {
          padding-left: 0;
          font-size: 22px; } }
    @media (min-width: 1600px) {
      #playNow article h1 {
        font-size: 4rem; }
        #playNow article h1 > span:first-child {
          font-size: 2.25rem;
          padding-left: 76px; } }
  #playNow article h2 {
    max-width: 100vw;
    font-size: 1.2rem;
    margin-bottom: 10vh;
    font-style: italic; }
    @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 600px) and (orientation: landscape) {
      #playNow article h2 {
        padding: 0;
        margin-bottom: 8vh; } }
  #playNow article #playNowButton {
    position: relative;
    width: 100%;
    max-width: 673px;
    height: 140px;
    background-image: url(/dist/48b1809c87d64124029abba4d029ae99.png);
    background-position: center;
    color: transparent;
    border: none;
    background-color: transparent;
    background-size: contain;
    cursor: pointer;
    text-transform: uppercase; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      #playNow article #playNowButton {
        background-image: url(/dist/9a0a4a3abf7cd9488719a8c5fd01b62a.png); } }
    #playNow article #playNowButton svg {
      width: 100%;
      max-width: 622px;
      height: 140px; }
      #playNow article #playNowButton svg text {
        font-family: 'Noto Serif', serif;
        font-size: 2.4em;
        font-weight: bold;
        letter-spacing: normal; }
        #playNow article #playNowButton svg text:first-of-type {
          stroke: rgba(0, 0, 0, 0.15);
          stroke-width: 6;
          -webkit-transition-duration: 250ms;
                  transition-duration: 250ms; }
        #playNow article #playNowButton svg text:last-of-type {
          text-shadow: -1px -1px 0 #ecaf2b; }

#playNow:not(.effectsDisabled) #PlayNow_parallax_back,
#playNow:not(.effectsDisabled) #PlayNow_parallax_front {
  position: absolute;
  width: 100vw;
  bottom: 0;
  z-index: 3;
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: center bottom; }

#playNow:not(.effectsDisabled) #PlayNow_parallax_back {
  background-image: url(/dist/7d8f381b5083d192b60d561b5b888b2b.png);
  height: 29vh; }

#playNow:not(.effectsDisabled) #PlayNow_parallax_front {
  background-image: url(/dist/7a3ddc023ac0d2790d7dbde97ea35e91.png);
  height: 35vh; }

#playNow.effectsDisabled:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 32px;
  bottom: 0;
  background-color: #101010;
  background-image: url(/dist/8d085e9ddeddb49a824bfc0a0c9d5494.png);
  background-repeat: repeat-x;
  z-index: 1; }
#journey {
  position: relative;
  z-index: 1; }
  #journey section {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    height: auto;
    /* scrollMagic fix for pinned element by resizing window bug */ }
    #journey section:not(.effectsDisabled)[style*='position: fixed'] {
      top: 0 !important; }
    #journey section h1,
    #journey section h2 {
      text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, 0.75);
      text-align: right; }
  #journey .background {
    position: fixed;
    z-index: 0;
    bottom: 0;
    right: 50%;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
    min-height: 100vh;
    height: auto;
    min-width: 100vw;
    position: absolute;
    transform: translateX(50%); }
  #journey article {
    position: absolute; }
    @media (max-width: 1600px) {
      #journey article {
        right: 2.5vw; } }
    @media (min-width: 1600px) {
      #journey article {
        right: 10vw; } }
    #journey article .box {
      width: 25vw;
      min-width: 500px; }
    @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 600px) and (orientation: landscape) {
      #journey article {
        display: block;
        max-width: 100%;
        position: relative;
        margin-right: 0;
        top: 0;
        margin-top: 71px;
        right: 0; }
        #journey article .box {
          width: 95%;
          min-width: 0;
          margin-right: 2.5%; }
        #journey article h2 {
          padding-right: 5vw;
          padding-left: 5vw; } }
#journey section#news {
  min-height: 350px;
  text-align: center;
  overflow: visible; }
  #journey section#news.empty {
    min-height: 0; }
    #journey section#news.empty article {
      height: 0; }
    #journey section#news.empty + section #playstyle {
      -webkit-box-shadow: inset 0 10px 20px -10px #101010;
              box-shadow: inset 0 10px 20px -10px #101010; }
      #journey section#news.empty + section #playstyle:before {
        display: none; }
  #journey section#news article {
    position: static; }
    @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 600px) and (orientation: landscape) {
      #journey section#news article {
        margin-top: 0; } }
    #journey section#news article .box {
      width: 80%;
      min-width: 0;
      max-width: 450px; }
      @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 600px) and (orientation: landscape) {
        #journey section#news article .box {
          margin: 25px auto; }
          #journey section#news article .box:before {
            border-width: 0; } }

#news article {
  position: static;
  overflow-y: hidden;
  background: black;
  height: 350px;
  padding: 0 5vw;
  z-index: 5; }
  #news article > div {
    position: relative;
    z-index: 2;
    width: 80%;
    left: 10%; }
  #news article .box {
    width: 100%;
    display: inline-block;
    position: relative;
    z-index: 3;
    margin: 25px 25px 100px;
    text-align: right; }
    #news article .box .boxBody {
      height: 182px;
      overflow: hidden; }
      #news article .box .boxBody:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: ' ';
        clear: both;
        height: 0; }
      #news article .box .boxBody .news {
        height: calc(8.1em - 1px);
        overflow: hidden; }
      #news article .box .boxBody img {
        display: block;
        height: 8.1em; }
      #news article .box .boxBody .readMore {
        position: absolute;
        bottom: 0;
        left: 0; }
    #news article .box.newsLayout1 img {
      float: right;
      margin-left: 20px;
      width: 8.1em; }
    #news article .box.newsLayout2 img {
      float: right;
      width: 100%; }
    #news article .box.newsLayout1, #news article .box.newsLayout2, #news article .box.newsLayout3 {
      z-index: 11; }
  #news article .newsArrows {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
    #news article .newsArrows svg.back, #news article .newsArrows svg.forth {
      position: absolute;
      z-index: 2;
      top: 25%;
      height: 50%;
      width: 50%;
      fill: #F2F2F2;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
      overflow: visible; }
      #news article .newsArrows svg.back path, #news article .newsArrows svg.forth path {
        -webkit-transform-origin: 95% center;
                transform-origin: 95% center; }
        @media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-height: 1024px) and (orientation: landscape) {
          #news article .newsArrows svg.back path, #news article .newsArrows svg.forth path {
            -webkit-transform: scale(0.6);
                    transform: scale(0.6); } }
        @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 600px) and (orientation: landscape) {
          #news article .newsArrows svg.back path, #news article .newsArrows svg.forth path {
            -webkit-transform: scale(0.4);
                    transform: scale(0.4); } }
    #news article .newsArrows svg:not(:hover) g, #news article .newsArrows svg.disabled g {
      -webkit-filter: none;
              filter: none; }
    #news article .newsArrows svg:hover:not(.disabled) {
      cursor: pointer;
      fill: #F0A600; }
    #news article .newsArrows svg.disabled {
      opacity: .2; }
    #news article .newsArrows svg.back {
      -webkit-transform: scaleX(1);
              transform: scaleX(1);
      right: 0; }
    #news article .newsArrows svg.forth {
      -webkit-transform: scaleX(-1);
              transform: scaleX(-1);
      left: 0; }
#player #interaction {
  width: 100%;
  min-height: 100vh; }
  #player #interaction article {
    top: 15vh;
    z-index: 3; }
    @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 600px) and (orientation: landscape) {
      #player #interaction article {
        top: 0;
        margin-bottom: 32px; } }
  #player #interaction:not(.effectsDisabled) {
    position: absolute; }
  #player #interaction #Interaction_parallax_back,
  #player #interaction #Interaction_parallax_front {
    position: absolute;
    width: 100%;
    height: 648px;
    z-index: 1;
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: center bottom; }
  #player #interaction #Interaction_parallax_back {
    background-image: url(/dist/b057383650eb7b6d53193f93f1818c67.png);
    bottom: -180px; }
  #player #interaction #Interaction_parallax_front {
    background-image: url(/dist/d04c56d7c248897afc46d3c5211fbde1.png);
    bottom: -40px; }

#player .transition {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
  opacity: 0; }

#player.effectsDisabled #interaction {
  -webkit-box-shadow: inset 0 45px 20px -10px #101010;
          box-shadow: inset 0 45px 20px -10px #101010; }
  #player.effectsDisabled #interaction:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 32px;
    background-color: #101010;
    background-image: url(/dist/8d085e9ddeddb49a824bfc0a0c9d5494.png);
    background-repeat: repeat-x; }
  #player.effectsDisabled #interaction #Interaction_parallax_back,
  #player.effectsDisabled #interaction #Interaction_parallax_front {
    bottom: 0;
    background-size: contain; }
  #player.effectsDisabled #interaction #Interaction_parallax_back {
    bottom: -50px; }
#player #playstyle {
  width: 100%;
  min-height: 100vh;
  z-index: 2; }
  #player #playstyle:not(.effectsDisabled) {
    position: absolute; }
  #player #playstyle.effectsDisabled {
    background-image: url(/dist/ddbdaa68df8c8a98384b04ba67b5875a.jpg);
    background-size: cover;
    -webkit-box-shadow: inset 0 45px 20px -10px #101010;
            box-shadow: inset 0 45px 20px -10px #101010; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      #player #playstyle.effectsDisabled {
        background-image: url(/dist/14062b0d4f0e3e9be4d4604d5a640cc4.jpg); } }
    #player #playstyle.effectsDisabled:before {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 32px;
      background-color: #101010;
      background-image: url(/dist/8d085e9ddeddb49a824bfc0a0c9d5494.png);
      background-repeat: repeat-x; }
  #player #playstyle article {
    z-index: 3;
    top: 15vh; }
    @media screen and (max-width: 900px), screen and (max-height: 600px) and (orientation: landscape) {
      #player #playstyle article {
        position: relative;
        top: 0;
        margin-top: 71px; } }
    #player #playstyle article .box {
      position: absolute;
      opacity: 0;
      -webkit-transition: 0s opacity linear;
      transition: 0s opacity linear;
      -webkit-transition-delay: .4s;
              transition-delay: .4s;
      z-index: 1; }
      @media screen and (max-width: 900px), screen and (max-height: 600px) and (orientation: landscape) {
        #player #playstyle article .box {
          position: relative;
          display: none; } }
      #player #playstyle article .box.active {
        opacity: 1;
        z-index: 2;
        -webkit-transition-delay: 0s;
                transition-delay: 0s;
        -webkit-transition: .4s opacity linear;
        transition: .4s opacity linear; }
        @media screen and (max-width: 900px), screen and (max-height: 600px) and (orientation: landscape) {
          #player #playstyle article .box.active {
            display: block; } }
  #player #playstyle .playstyle {
    position: absolute;
    bottom: -25vh;
    width: 100%;
    height: 100%;
    z-index: 2; }
    @media screen and (max-width: 900px), screen and (max-height: 600px) and (orientation: landscape) {
      #player #playstyle .playstyle {
        bottom: 0;
        position: relative;
        height: 50vh;
        margin-top: 71px; } }
    #player #playstyle .playstyle img {
      position: absolute;
      bottom: 0;
      z-index: 1;
      -webkit-transform: translateZ(0) scale(1);
              transform: translateZ(0) scale(1);
      -webkit-transition: .3s all linear;
      transition: .3s all linear; }
      #player #playstyle .playstyle img.active {
        z-index: 4;
        -webkit-transform: scale(1.01);
                transform: scale(1.01); }
      #player #playstyle .playstyle img.ieOverlay {
        display: none; }
    #player #playstyle .playstyle svg {
      position: absolute;
      bottom: 0;
      z-index: 5;
      fill: transparent; }
      @media screen and (max-width: 900px), screen and (max-height: 600px) and (orientation: landscape) {
        #player #playstyle .playstyle svg {
          display: none; } }
      #player #playstyle .playstyle svg path {
        cursor: pointer; }
      #player #playstyle .playstyle svg.active {
        display: none; }
    @media (max-width: 1600px) {
      #player #playstyle .playstyle .defender {
        left: 36vw;
        height: 100vh; }
      #player #playstyle .playstyle .attacker {
        left: 13.5vw;
        height: 84vh; }
      #player #playstyle .playstyle .leader {
        left: 1vw;
        height: 87vh; } }
    @media (max-width: 1350px) {
      #player #playstyle .playstyle .defender {
        left: 23vw;
        height: 70vh; }
      #player #playstyle .playstyle .attacker {
        left: 5vw;
        height: 54vh; }
      #player #playstyle .playstyle .leader {
        left: -5vw;
        height: 57vh; } }
    @media (min-width: 1600px) {
      #player #playstyle .playstyle .defender {
        left: 40vw;
        height: 110vh; }
      #player #playstyle .playstyle .attacker {
        left: 16vw;
        height: 94vh; }
      #player #playstyle .playstyle .leader {
        left: 2vw;
        height: 97vh; } }
    @media screen and (max-width: 900px), screen and (max-height: 600px) and (orientation: landscape) {
      #player #playstyle .playstyle .defender,
      #player #playstyle .playstyle .attacker,
      #player #playstyle .playstyle .leader {
        opacity: 0;
        left: 0;
        right: 50%;
        -webkit-transform: translateX(50%) scale(0.8);
                transform: translateX(50%) scale(0.8);
        height: 65vh;
        bottom: -15vh; }
        #player #playstyle .playstyle .defender.active,
        #player #playstyle .playstyle .attacker.active,
        #player #playstyle .playstyle .leader.active {
          opacity: 1;
          -webkit-transform: translateX(50%) scale(0.8);
                  transform: translateX(50%) scale(0.8); } }
  #player #playstyle .mobileArrows {
    display: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
    @media screen and (max-width: 900px), screen and (max-height: 600px) and (orientation: landscape) {
      #player #playstyle .mobileArrows {
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50vh; }
        #player #playstyle .mobileArrows svg.back, #player #playstyle .mobileArrows svg.forth {
          position: absolute;
          z-index: 2;
          top: 25%;
          height: 50%;
          width: 50%;
          fill: #F2F2F2;
          -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
          #player #playstyle .mobileArrows svg.back:not(:hover) g, #player #playstyle .mobileArrows svg.forth:not(:hover) g {
            -webkit-filter: none;
                    filter: none; }
          #player #playstyle .mobileArrows svg.back:hover:not(.disabled), #player #playstyle .mobileArrows svg.forth:hover:not(.disabled) {
            cursor: pointer;
            fill: #F0A600; }
          #player #playstyle .mobileArrows svg.back.disabled, #player #playstyle .mobileArrows svg.forth.disabled {
            opacity: .2; }
        #player #playstyle .mobileArrows svg.back {
          -webkit-transform: scaleX(1);
                  transform: scaleX(1);
          right: 0; }
        #player #playstyle .mobileArrows svg.forth {
          -webkit-transform: scaleX(-1);
                  transform: scaleX(-1);
          left: 0; } }

.ie #player #playstyle .playstyle img.active,
.edge #player #playstyle .playstyle img.active {
  z-index: 4; }

.ie #player #playstyle .playstyle img.ieOverlay.inactive,
.edge #player #playstyle .playstyle img.ieOverlay.inactive {
  display: inline; }

.ie #player #playstyle .playstyle svg:first-of-type,
.edge #player #playstyle .playstyle svg:first-of-type {
  z-index: 0; }

.ie #player #playstyle .playstyle .defender,
.edge #player #playstyle .playstyle .defender {
  z-index: 1; }
  .ie #player #playstyle .playstyle .defender.normalOverlay,
  .edge #player #playstyle .playstyle .defender.normalOverlay {
    z-index: 5; }

.ie #player #playstyle .playstyle .attacker,
.edge #player #playstyle .playstyle .attacker {
  z-index: 2; }
  .ie #player #playstyle .playstyle .attacker.normalOverlay,
  .edge #player #playstyle .playstyle .attacker.normalOverlay {
    z-index: 5; }

.ie #player #playstyle .playstyle .leader,
.edge #player #playstyle .playstyle .leader {
  z-index: 3; }
  .ie #player #playstyle .playstyle .leader.normalOverlay,
  .edge #player #playstyle .playstyle .leader.normalOverlay {
    z-index: 5; }
#player {
  min-height: 100vh;
  position: relative; }
  #player .background {
    top: 0; }
  #player:not(.effectsDisabled) #News_parallax {
    width: 100%;
    height: 22vh;
    position: absolute; }
    #player:not(.effectsDisabled) #News_parallax #News_parallax_back,
    #player:not(.effectsDisabled) #News_parallax #News_parallax_front,
    #player:not(.effectsDisabled) #News_parallax #News_parallax_left,
    #player:not(.effectsDisabled) #News_parallax #News_parallax_right {
      position: absolute;
      top: 0;
      z-index: 3;
      width: 100%; }
    #player:not(.effectsDisabled) #News_parallax #News_parallax_back,
    #player:not(.effectsDisabled) #News_parallax #News_parallax_front {
      background-size: auto 100%;
      background-repeat: repeat-x;
      background-position: center top; }
    #player:not(.effectsDisabled) #News_parallax #News_parallax_back {
      background-image: url(/dist/0099e7cdac0268d4254605f42c4ededa.png);
      height: 18vh;
      background-position: 37vw top; }
    #player:not(.effectsDisabled) #News_parallax #News_parallax_front {
      background-image: url(/dist/3fd0f8bc966a3fee95d79705d46972cf.png);
      height: 22vh; }
    #player:not(.effectsDisabled) #News_parallax #News_parallax_left,
    #player:not(.effectsDisabled) #News_parallax #News_parallax_right {
      background-size: contain;
      width: 40vw;
      height: 43vh; }
  #player #News_parallax_left {
    background-image: url(/dist/7b77f051dc58b4e27e26e6686ae3a5af.png);
    background-position: right top;
    left: -40vw;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1); }
  #player #News_parallax_right {
    background-image: url(/dist/7bafe1661ccacb9d76b286742c838a70.png);
    background-position: left top;
    right: -40vw;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1); }
#buildEmpire {
  top: -100vh; }
  #buildEmpire article {
    z-index: 0;
    top: 20vh; }
    @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 600px) and (orientation: landscape) {
      #buildEmpire article {
        top: 0;
        margin-top: 71px;
        margin-bottom: 32px; } }
  #buildEmpire.effectsDisabled {
    top: 0;
    position: relative;
    background-image: url(/dist/8eeb150315cb56013cea3d0f25c70d6b.jpg);
    background-position: right;
    background-size: cover; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      #buildEmpire.effectsDisabled {
        background-image: url(/dist/139ee9dba6ae412f0101295527c3889d.jpg); } }
    #buildEmpire.effectsDisabled:before {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 32px;
      background-color: #101010;
      background-image: url(/dist/8d085e9ddeddb49a824bfc0a0c9d5494.png);
      background-repeat: repeat-x; }
#battle {
  margin-top: -100%;
  opacity: 0; }
  #battle.effectsDisabled {
    margin-top: 0;
    opacity: 1;
    position: relative;
    background: url(/dist/6311abcb77c20b100ed8bb7f479263ef.jpg) right;
    background-size: cover;
    -webkit-box-shadow: inset 0 45px 20px -10px #101010;
            box-shadow: inset 0 45px 20px -10px #101010; }
    #battle.effectsDisabled:before {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 32px;
      background-color: #101010;
      background-image: url(/dist/8d085e9ddeddb49a824bfc0a0c9d5494.png);
      background-repeat: repeat-x; }
  #battle article {
    z-index: 5;
    top: 10vh; }
    @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 600px) and (orientation: landscape) {
      #battle article {
        top: 0;
        margin-bottom: 32px; } }
  #battle:not(.effectsDisabled) #Battle_parallax_back,
  #battle:not(.effectsDisabled) #Battle_parallax_front {
    position: absolute;
    width: 100vw;
    z-index: 3;
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: center bottom; }
  #battle:not(.effectsDisabled) #Battle_parallax_back {
    background-image: url(/dist/01ed607be8b098b9193516640e85d836.png);
    bottom: -40px;
    height: 720px; }
  #battle:not(.effectsDisabled) #Battle_parallax_front {
    background-image: url(/dist/86a87ee7b4a255285c8d8db5203605a6.png);
    bottom: -40px;
    height: 680px; }
#lateGame {
  background-image: url(/dist/3c8104b63e38e0094d2e4c9e8db4349f.jpg);
  background-size: cover;
  background-position: center; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    #lateGame {
      background-image: url(/dist/24a8c1d5c3e8e7f61bec58a33073e606.jpg); } }
  #lateGame:not(.effectsDisabled) #LateGame_parallax_back,
  #lateGame:not(.effectsDisabled) #LateGame_parallax_front,
  #lateGame:not(.effectsDisabled) #LateGame_parallax_start,
  #lateGame:not(.effectsDisabled) #LateGame_parallax_end {
    position: absolute;
    z-index: 3;
    width: 100vw; }
  #lateGame:not(.effectsDisabled) #LateGame_parallax_back,
  #lateGame:not(.effectsDisabled) #LateGame_parallax_front {
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: center top; }
  #lateGame:not(.effectsDisabled) #LateGame_parallax_back {
    background-image: url(/dist/98d2db61299ac666a0d94e556b07ed57.png);
    height: 200px;
    top: -40px;
    background-position: right top; }
  #lateGame:not(.effectsDisabled) #LateGame_parallax_front {
    background-image: url(/dist/4cfaa8e825a199dce0387ccef9cb4856.png);
    height: 170px;
    top: -40px; }
  #lateGame:not(.effectsDisabled) #LateGame_parallax_start,
  #lateGame:not(.effectsDisabled) #LateGame_parallax_end {
    background-size: contain;
    height: 600px;
    top: -30px; }
    #lateGame:not(.effectsDisabled) #LateGame_parallax_start.open,
    #lateGame:not(.effectsDisabled) #LateGame_parallax_end.open {
      height: 400px; }
  #lateGame:not(.effectsDisabled) #LateGame_parallax_start {
    background-image: url(/dist/2e723a5c3c166d4d5e8780ca72e27402.png);
    background-position: right top;
    left: 0;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1); }
  #lateGame:not(.effectsDisabled) #LateGame_parallax_end {
    background-image: url(/dist/3148ccff11bda59efaab5405d9b7f3ca.png);
    background-position: left top;
    right: 0;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1); }
  #lateGame article {
    z-index: 0;
    position: relative;
    margin-top: 15vh;
    height: 85vh;
    overflow: hidden;
    padding-right: 2vw; }
    #lateGame article.transition {
      height: auto;
      margin-bottom: 5vh; }
    @media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-height: 1024px) and (orientation: landscape) {
      #lateGame article {
        margin-top: 71px;
        top: 0;
        max-height: none;
        padding-right: 5vw;
        height: auto;
        margin-bottom: 5vh; } }
    @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 600px) and (orientation: landscape) {
      #lateGame article {
        padding-right: 0; } }
  #lateGame #artifactPreview {
    margin-top: 5vh; }
    @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 600px) and (orientation: landscape) {
      #lateGame #artifactPreview div {
        text-align: center; } }
    #lateGame #artifactPreview svg {
      position: absolute; }
    #lateGame #artifactPreview img {
      position: relative;
      z-index: 1;
      display: inline-block;
      -webkit-transform: translateZ(0);
              transform: translateZ(0); }
      #lateGame #artifactPreview img:nth-of-type(n+2) {
        margin-right: 25px; }
  #lateGame.effectsDisabled {
    -webkit-box-shadow: inset 0 45px 20px -10px #101010;
            box-shadow: inset 0 45px 20px -10px #101010; }
    #lateGame.effectsDisabled:before {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 32px;
      background-color: #101010;
      background-image: url(/dist/8d085e9ddeddb49a824bfc0a0c9d5494.png);
      background-repeat: repeat-x;
      z-index: 1; }
#mainNavigation {
  position: fixed;
  z-index: 20;
  width: 100%; }
  #mainNavigation .cookieInfo {
    background: #000000; }
  #mainNavigation nav.desktop {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.9)), color-stop(50%, rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0));
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-transition-property: min-height, padding-top;
    transition-property: min-height, padding-top;
    -webkit-transition-duration: .4s;
            transition-duration: .4s;
    -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out; }
    @media (min-width: 1024px) {
      #mainNavigation nav.desktop {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }
    @media (max-width: 1024px) {
      #mainNavigation nav.desktop {
        display: none; } }
    @media (min-width: 1440px) {
      #mainNavigation nav.desktop {
        font-size: 1.5rem;
        min-height: 111px;
        padding-top: 3vh;
        padding-bottom: 1vh; } }
    @media (max-width: 1440px) {
      #mainNavigation nav.desktop {
        font-size: 1.1rem;
        padding: 1vh; } }
    #mainNavigation nav.desktop #sectionBefore,
    #mainNavigation nav.desktop #sectionAfter {
      width: calc(22vw + 110px); }
    #mainNavigation nav.desktop #sectionBefore {
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2; }
    #mainNavigation nav.desktop #sectionAfter {
      -webkit-box-ordinal-group: 5;
          -ms-flex-order: 4;
              order: 4; }
    #mainNavigation nav.desktop .logo {
      text-align: center;
      position: relative;
      -webkit-box-ordinal-group: 4;
          -ms-flex-order: 3;
              order: 3; }
      @media (min-width: 1440px) {
        #mainNavigation nav.desktop .logo {
          width: 27vw;
          top: -25px; } }
      @media (max-width: 1440px) {
        #mainNavigation nav.desktop .logo {
          width: 20vw;
          top: -5px; }
          #mainNavigation nav.desktop .logo img {
            width: 150px; } }
    #mainNavigation nav.desktop a:hover:not(#register) {
      background-image: none; }
    #mainNavigation nav.desktop #register {
      position: relative;
      top: 2px;
      line-height: normal;
      text-shadow: none;
      -webkit-transition-property: opacity, -webkit-transform;
      transition-property: opacity, -webkit-transform;
      transition-property: transform, opacity;
      transition-property: transform, opacity, -webkit-transform;
      -webkit-transition-timing-function: ease;
              transition-timing-function: ease;
      -webkit-transition-delay: 0s;
              transition-delay: 0s;
      -webkit-transition-duration: .2s;
              transition-duration: .2s; }
      #mainNavigation nav.desktop #register.withHiddenButton {
        position: absolute;
        -webkit-transform: translateX(-10vw);
                transform: translateX(-10vw);
        opacity: 0; }
    #mainNavigation nav.desktop ul {
      width: 100%;
      list-style: none;
      padding: 0;
      margin: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; }
      #mainNavigation nav.desktop ul li {
        text-transform: uppercase;
        position: relative;
        height: 50px;
        line-height: 50px;
        color: #ffffff;
        font-family: 'Open Sans', sans-serif;
        text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, 0.75);
        border-bottom: 3px solid rgba(243, 177, 0, 0);
        -webkit-transition-duration: .3s;
                transition-duration: .3s;
        -webkit-transition-property: background-color, border;
        transition-property: background-color, border; }
        #mainNavigation nav.desktop ul li a {
          display: inline-block; }
        #mainNavigation nav.desktop ul li a:not(#register) {
          color: #ffffff;
          font-weight: normal; }
          @media (min-width: 1440px) {
            #mainNavigation nav.desktop ul li a:not(#register) {
              padding: 0 15px; } }
          @media (max-width: 1440px) {
            #mainNavigation nav.desktop ul li a:not(#register) {
              padding: 0 10px; } }
        #mainNavigation nav.desktop ul li:hover:not(.register) {
          background-color: rgba(0, 0, 0, 0.8);
          border-color: #F3B100; }
        #mainNavigation nav.desktop ul li.dropdown {
          -webkit-transition-delay: .2s;
                  transition-delay: .2s; }
          @media (min-width: 1440px) {
            #mainNavigation nav.desktop ul li.dropdown {
              padding: 0 15px;
              padding-left: 35px; } }
          @media (max-width: 1440px) {
            #mainNavigation nav.desktop ul li.dropdown {
              padding: 0 10px;
              padding-left: 25px; } }
          #mainNavigation nav.desktop ul li.dropdown svg {
            position: absolute;
            left: 7px;
            top: 50%;
            margin-top: -2px;
            width: 0.65em;
            height: 0.65em;
            fill: white; }
          #mainNavigation nav.desktop ul li.dropdown ul {
            width: auto;
            position: absolute;
            top: calc(100% + 3px);
            right: 0;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            visibility: hidden;
            opacity: 0;
            -webkit-transition-duration: .2s;
                    transition-duration: .2s;
            -webkit-transition-property: opacity, visibility;
            transition-property: opacity, visibility;
            -webkit-transition-delay: .2s;
                    transition-delay: .2s; }
            #mainNavigation nav.desktop ul li.dropdown ul li {
              margin-top: 1px;
              min-width: 200px;
              background-color: rgba(0, 0, 0, 0.8);
              border: none;
              border-right: 3px solid transparent; }
              #mainNavigation nav.desktop ul li.dropdown ul li a {
                font-size: 1.2rem;
                white-space: nowrap;
                text-transform: none;
                padding: 0 25px 0 50px;
                width: 100%; }
              #mainNavigation nav.desktop ul li.dropdown ul li:hover, #mainNavigation nav.desktop ul li.dropdown ul li.active {
                border-color: #F3B100;
                background-color: rgba(0, 0, 0, 0.9); }
          #mainNavigation nav.desktop ul li.dropdown:hover.dropdown {
            -webkit-transition-delay: 0s;
                    transition-delay: 0s;
            border-color: transparent; }
          #mainNavigation nav.desktop ul li.dropdown:hover ul {
            visibility: visible;
            opacity: 1;
            -webkit-transition-delay: 0s;
                    transition-delay: 0s; }
          #mainNavigation nav.desktop ul li.dropdown:hover svg {
            fill: #F3B100; }
        #mainNavigation nav.desktop ul li .selectedLanguage {
          position: relative;
          top: 7px;
          width: 40px;
          max-height: 30px; }
          #mainNavigation nav.desktop ul li .selectedLanguage svg {
            -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
                    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); }
          @media (min-width: 1440px) {
            #mainNavigation nav.desktop ul li .selectedLanguage {
              top: 7px; }
              #mainNavigation nav.desktop ul li .selectedLanguage svg {
                width: 40px;
                height: 30px; } }
          @media (max-width: 1440px) {
            #mainNavigation nav.desktop ul li .selectedLanguage {
              top: 4px; }
              #mainNavigation nav.desktop ul li .selectedLanguage svg {
                width: 24px;
                height: 18px; } }
        #mainNavigation nav.desktop ul li#register {
          -webkit-transition: none;
          transition: none; }
          #mainNavigation nav.desktop ul li#register:hover {
            border: none;
            background: none; }
  #mainNavigation nav.mobile {
    position: absolute;
    width: 100vw; }
    #mainNavigation nav.mobile.closed {
      background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(16, 16, 16, 0.95)), to(rgba(51, 51, 51, 0.95)));
      background-image: linear-gradient(to top, rgba(16, 16, 16, 0.95), rgba(51, 51, 51, 0.95)); }
    @media (min-width: 1024px) {
      #mainNavigation nav.mobile {
        display: none; } }
    @media (max-width: 1024px) {
      #mainNavigation nav.mobile {
        display: block; } }
    #mainNavigation nav.mobile > a:hover, #mainNavigation nav.mobile > a:active {
      background-image: none; }
    #mainNavigation nav.mobile .logo {
      display: block;
      width: 120px;
      margin: 2px auto 0; }
      #mainNavigation nav.mobile .logo img {
        width: 100%; }
    #mainNavigation nav.mobile .openMenu {
      position: absolute;
      z-index: 2;
      top: 10px;
      right: 10px; }
      #mainNavigation nav.mobile .openMenu svg {
        width: 30px;
        height: 30px;
        fill: #F2F2F2; }
    #mainNavigation nav.mobile .overlay {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      z-index: 1; }
    #mainNavigation nav.mobile.closed .overlay {
      display: none; }
    #mainNavigation nav.mobile .content {
      -webkit-transition: right 1s;
      transition: right 1s;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 3;
      height: calc(100vh - 20px);
      width: calc(100% - 50px);
      max-width: 400px;
      padding: 25px 30px; }
      #mainNavigation nav.mobile .content.closed {
        right: calc(-100% - 50px); }
      #mainNavigation nav.mobile .content.opened {
        right: 0; }
      #mainNavigation nav.mobile .content:before {
        content: '';
        position: absolute;
        top: -10px;
        right: -10px;
        bottom: 0;
        left: 0;
        z-index: 2;
        border-width: 130px 114px 65px 94px;
        border-style: solid;
        border-image-source: url(/dist/c9f982f64938fe60b06dbf051c6a9bb5.png);
        border-image-slice: 130 114 65 94 fill;
        border-image-repeat: round;
        border-image-width: auto; }
        @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
          #mainNavigation nav.mobile .content:before {
            border-image-source: url(/dist/490d4190d3bad6c8de5690d08f211747.png);
            border-image-slice: 260 228 130 188 fill;
            border-image-repeat: round;
            border-image-width: auto; } }
        @media only screen and (-webkit-min-device-pixel-ratio: 4), only screen and (min--moz-device-pixel-ratio: 4), only screen and (min-device-pixel-ratio: 4), only screen and (min-resolution: 384dpi), only screen and (min-resolution: 4dppx) {
          #mainNavigation nav.mobile .content:before {
            border-image-source: url(/dist/188e79b540452675de75f81608330d9a.png);
            border-image-slice: 520 456 260 376 fill;
            border-image-repeat: round;
            border-image-width: auto; } }
      #mainNavigation nav.mobile .content > * {
        position: relative;
        z-index: 3; }
      #mainNavigation nav.mobile .content .back {
        display: block;
        height: 38px;
        margin: 0 -20px 0 -30px;
        border-width: 38px 20px 0 200px;
        border-style: solid;
        border-image-source: url(/dist/61d0bddfb840278584eba77684cd19ae.png);
        border-image-slice: 38 20 0 200 fill;
        border-image-repeat: stretch;
        border-image-width: auto; }
        #mainNavigation nav.mobile .content .back div {
          position: relative;
          top: -38px;
          line-height: 38px;
          color: #492208;
          font-weight: normal;
          white-space: nowrap; }
      #mainNavigation nav.mobile .content .navigationContentWrapper {
        height: calc(100% - 20px);
        width: 100%;
        overflow: auto; }
        #mainNavigation nav.mobile .content .navigationContentWrapper.topOffset {
          height: calc(100% - 75px); }
      #mainNavigation nav.mobile .content ul {
        width: 100%;
        list-style: none;
        padding: 0;
        margin: 0; }
        #mainNavigation nav.mobile .content ul li,
        #mainNavigation nav.mobile .content ul a {
          color: #492208; }
          #mainNavigation nav.mobile .content ul li:hover,
          #mainNavigation nav.mobile .content ul a:hover {
            cursor: pointer;
            background-image: none; }
          #mainNavigation nav.mobile .content ul li span,
          #mainNavigation nav.mobile .content ul a span {
            vertical-align: middle; }
        #mainNavigation nav.mobile .content ul.level0, #mainNavigation nav.mobile .content ul.level1 {
          margin-top: 15px; }
          #mainNavigation nav.mobile .content ul.level0 li,
          #mainNavigation nav.mobile .content ul.level0 a, #mainNavigation nav.mobile .content ul.level1 li,
          #mainNavigation nav.mobile .content ul.level1 a {
            min-height: 46px;
            line-height: 42px;
            position: relative; }
          #mainNavigation nav.mobile .content ul.level0 li, #mainNavigation nav.mobile .content ul.level1 li {
            border-width: 0 0 1px;
            border-style: solid;
            -o-border-image: linear-gradient(to left, rgba(182, 131, 99, 0.1), rgba(182, 131, 99, 0.5), rgba(182, 131, 99, 0.1)) 0 0 1 0;
               border-image: -webkit-gradient(linear, right top, left top, from(rgba(182, 131, 99, 0.1)), color-stop(rgba(182, 131, 99, 0.5)), to(rgba(182, 131, 99, 0.1))) 0 0 1 0;
               border-image: linear-gradient(to left, rgba(182, 131, 99, 0.1), rgba(182, 131, 99, 0.5), rgba(182, 131, 99, 0.1)) 0 0 1 0; }
            #mainNavigation nav.mobile .content ul.level0 li,
            #mainNavigation nav.mobile .content ul.level0 li a, #mainNavigation nav.mobile .content ul.level1 li,
            #mainNavigation nav.mobile .content ul.level1 li a {
              font-weight: 600;
              font-size: 1.2rem; }
            #mainNavigation nav.mobile .content ul.level0 li a, #mainNavigation nav.mobile .content ul.level1 li a {
              display: block; }
            #mainNavigation nav.mobile .content ul.level0 li svg, #mainNavigation nav.mobile .content ul.level1 li svg {
              fill: #492208; }
              #mainNavigation nav.mobile .content ul.level0 li svg path, #mainNavigation nav.mobile .content ul.level1 li svg path {
                -webkit-transform-origin: center;
                        transform-origin: center; }
            #mainNavigation nav.mobile .content ul.level0 li .category,
            #mainNavigation nav.mobile .content ul.level0 li .language svg, #mainNavigation nav.mobile .content ul.level1 li .category,
            #mainNavigation nav.mobile .content ul.level1 li .language svg {
              width: 28px;
              height: 28px;
              vertical-align: middle;
              margin-left: 10px; }
            #mainNavigation nav.mobile .content ul.level0 li .language svg, #mainNavigation nav.mobile .content ul.level1 li .language svg {
              position: relative;
              top: -1px; }
            #mainNavigation nav.mobile .content ul.level0 li.media .category path, #mainNavigation nav.mobile .content ul.level1 li.media .category path {
              -webkit-transform: scale(0.85);
                      transform: scale(0.85); }
            #mainNavigation nav.mobile .content ul.level0 li.blog .category path, #mainNavigation nav.mobile .content ul.level1 li.blog .category path {
              -webkit-transform: scale(0.85);
                      transform: scale(0.85); }
        #mainNavigation nav.mobile .content ul.level0 .subMenuOpener {
          top: 0;
          left: 0.7em;
          position: absolute;
          height: 100%; }
          #mainNavigation nav.mobile .content ul.level0 .subMenuOpener .caret {
            -webkit-transform: rotate(90deg);
                    transform: rotate(90deg);
            width: 0.7em;
            height: 0.7em;
            top: calc(50% - 0.35em);
            position: absolute; }
        #mainNavigation nav.mobile .content ul.level1 li:not(.currentCategory) {
          margin-right: 40px; }
        #mainNavigation nav.mobile .content ul.level1 li.currentCategory {
          text-transform: uppercase;
          opacity: .35; }
      #mainNavigation nav.mobile .content .levelMinor {
        margin-top: 15px;
        font-size: .9rem;
        width: 100%;
        padding: 0; }
        #mainNavigation nav.mobile .content .levelMinor a {
          min-height: 42px;
          line-height: 38px;
          padding-right: 40px;
          color: #492208;
          display: block; }
          #mainNavigation nav.mobile .content .levelMinor a:hover {
            cursor: pointer;
            background-image: none; }
          #mainNavigation nav.mobile .content .levelMinor a span {
            vertical-align: middle; }
        #mainNavigation nav.mobile .content .levelMinor svg {
          display: none; }
      #mainNavigation nav.mobile .content #registerMobile {
        display: inline-block;
        text-align: center;
        width: 100%;
        margin-top: 30px; }
  #mainNavigation.collapsed .cookieInfo {
    background: rgba(51, 51, 51, 0.95); }
  #mainNavigation.collapsed nav.desktop {
    min-height: 58px;
    height: 58px;
    padding-top: 0;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(16, 16, 16, 0.95)), to(rgba(51, 51, 51, 0.95)));
    background-image: linear-gradient(to top, rgba(16, 16, 16, 0.95), rgba(51, 51, 51, 0.95)); }
    #mainNavigation.collapsed nav.desktop #sectionBefore,
    #mainNavigation.collapsed nav.desktop #sectionAfter {
      margin-top: 4px; }
    #mainNavigation.collapsed nav.desktop .logo {
      top: 4px; }
      @media (min-width: 1440px) {
        #mainNavigation.collapsed nav.desktop .logo {
          width: 21vw; } }
      @media (max-width: 1440px) {
        #mainNavigation.collapsed nav.desktop .logo {
          width: 20vw; } }
    #mainNavigation.collapsed nav.desktop #register {
      position: relative;
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-transition-delay: .2s;
              transition-delay: .2s;
      -webkit-transition-duration: .6s;
              transition-duration: .6s; }
      @media (min-width: 1440px) {
        #mainNavigation.collapsed nav.desktop #register {
          top: -4px; } }
      @media (max-width: 1440px) {
        #mainNavigation.collapsed nav.desktop #register {
          padding: 10px 14px;
          top: 0; } }
    #mainNavigation.collapsed nav.desktop ul {
      top: calc(100% + 8px); }
  #mainNavigation ul.noWrap {
    white-space: nowrap; }
.footer {
  background: -webkit-gradient(linear, left top, left bottom, from(#101010), color-stop(30%, #101010), to(#333333));
  background: linear-gradient(#101010 0%, #101010 30%, #333333);
  padding-top: 35px;
  position: relative;
  z-index: 0; }
  .footer:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 35px;
    top: 0;
    background-color: #101010;
    background-image: url(/dist/8d085e9ddeddb49a824bfc0a0c9d5494.png);
    background-repeat: repeat-x; }
  .footer .footerInnerWrapper {
    width: 80%;
    margin: 0 auto;
    text-align: center; }
    .footer .footerInnerWrapper:last-of-type {
      width: 65%; }
      @media screen and (max-width: 1230px) {
        .footer .footerInnerWrapper:last-of-type {
          width: 95%; } }
    .footer .footerInnerWrapper .join {
      text-align: center;
      text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, 0.75);
      font-size: 1.83rem;
      font-family: 'Noto Serif', serif;
      font-weight: bold;
      margin-top: 0.83em;
      margin-bottom: 0.83em; }
    .footer .footerInnerWrapper a.button {
      display: inline-block;
      font-size: 150%;
      position: relative;
      margin-top: 2vh;
      margin-bottom: 2vh; }
      .footer .footerInnerWrapper a.button:before {
        content: '';
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        position: absolute;
        top: -0.8vw;
        right: -0.8vw;
        bottom: -0.8vw;
        left: -0.8vw;
        z-index: -1; }
  .footer .social {
    width: 100%;
    margin-top: 2vh;
    overflow: hidden; }
    .footer .social ul {
      list-style: none;
      padding: 0 10%;
      background-color: rgba(0, 0, 0, 0.5);
      margin: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      width: 100%;
      -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7) inset;
              box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7) inset; }
      .footer .social ul li {
        display: inline-block;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
        .footer .social ul li a {
          display: block;
          padding: 25px 15px;
          border-style: solid;
          border-color: rgba(0, 0, 0, 0.8);
          border-width: 0 .1em 0 .1em;
          cursor: pointer;
          -webkit-transition-duration: 200ms;
                  transition-duration: 200ms;
          outline: none;
          color: #F2F2F2;
          text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, 0.75);
          text-align: center;
          font-size: 1.5rem;
          font-weight: normal;
          -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7) inset;
                  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7) inset; }
          .footer .social ul li a img {
            height: 1.5em;
            vertical-align: text-top;
            margin-left: 0.5vw; }
          .footer .social ul li a:hover {
            background-color: rgba(0, 0, 0, 0.1); }
          .footer .social ul li a:active {
            -webkit-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.7) inset;
                    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.7) inset; }
  .footer .legal {
    display: table;
    margin: 4vh auto auto;
    padding-bottom: 4vh;
    position: relative; }
    @media screen and (max-width: 1230px) {
      .footer .legal {
        display: block; } }
    .footer .legal .travianGamesLogo {
      width: 160px;
      background-size: contain;
      background-image: url(/dist/a45dc755c9957963c7875e4458dbd0b9.png);
      display: table-cell; }
      @media screen and (max-width: 1230px) {
        .footer .legal .travianGamesLogo {
          display: block;
          margin: 0 auto;
          width: 100%;
          height: 80px;
          background-position: center; } }
    .footer .legal .rightOfLogo {
      display: table-cell;
      text-align: center; }
      @media screen and (max-width: 1230px) {
        .footer .legal .rightOfLogo {
          display: block;
          margin-top: 2vh; } }
      .footer .legal .rightOfLogo nav {
        display: inline-block; }
        .footer .legal .rightOfLogo nav .footerLinks {
          padding: 0;
          margin: 0 0 6px 0;
          width: 100%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center; }
          .footer .legal .rightOfLogo nav .footerLinks:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: ' ';
            clear: both;
            height: 0; }
          .footer .legal .rightOfLogo nav .footerLinks a {
            color: #F2F2F2;
            text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, 0.75);
            font-weight: normal;
            display: inline-block; }
          .footer .legal .rightOfLogo nav .footerLinks svg {
            width: 6px;
            height: 6px;
            margin: 2px 18px 0 18px;
            fill: #F2F2F2; }
            .farsi.chrome .footer .legal .rightOfLogo nav .footerLinks svg {
              margin: 0 18px 0 18px; }
            .farsi.opera .footer .legal .rightOfLogo nav .footerLinks svg {
              margin: 0 18px 0 18px; }
        @media (max-width: 1024px) {
          .footer .legal .rightOfLogo nav {
            display: none; } }
    .footer .legal .copyright {
      font-size: .9rem; }

@media screen and (max-width: 700px) {
  .footer .footerInnerWrapper:last-of-type {
    width: 100%; } }
div.comingSoonContainer {
  text-align: center; }
#game {
  overflow-x: hidden; }
  #game section {
    padding: 10vh 0; }
    #game section .breadcrumb,
    #game section h1 {
      position: relative;
      width: calc(80vw + .4vw + 15px);
      margin: 6vh auto 3vh; }
    #game section .breadcrumb {
      margin-top: 6vh; }
    #game section .breadcrumb.topOffset {
      margin-top: calc(6vh + 40px); }
    #game section h1 {
      margin-top: 2vh;
      right: 20px; }
  #game .boxGrid {
    width: calc(80vw + .4vw + 15px); }
    @media screen and (max-width: 600px) {
      #game .boxGrid {
        width: 100%; } }
    #game .boxGrid + .boxGrid {
      margin-top: 7vh; }
  #game .background {
    position: fixed;
    z-index: 0;
    bottom: 0;
    right: 50%;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
    min-height: 100vh;
    height: auto;
    min-width: 100vw; }
  #game .catchyQuote {
    position: relative;
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-size: 3rem;
    text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, 0.75);
    text-align: center;
    width: 80%;
    margin-top: 1vh; }
.catchyQuote {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -ms-flex-preferred-size: calc(100% / 3 * 2 - (.4vw + 15px) * 2);
      flex-basis: calc(100% / 3 * 2 - (.4vw + 15px) * 2);
  margin: calc(.4vw + 15px);
  -ms-flex-item-align: center;
      align-self: center;
  min-width: 300px; }
#contentPage {
  position: relative;
  overflow-x: hidden;
  height: auto;
  background-color: #E0D8CB; }
  #contentPage .contentPageHeader {
    position: fixed;
    z-index: 2;
    width: 100vw;
    padding: 10vh 0 0; }
    #contentPage .contentPageHeader .background {
      position: fixed;
      z-index: 0;
      bottom: 0;
      right: 50%;
      -webkit-transform: translateX(50%);
              transform: translateX(50%);
      min-height: 100vh;
      height: auto;
      min-width: 100vw;
      background-size: contain;
      position: absolute;
      min-height: 0;
      height: 35vh;
      top: 0;
      bottom: auto; }
    #contentPage .contentPageHeader .breadcrumb,
    #contentPage .contentPageHeader h1 {
      position: relative;
      width: calc(80vw + .4vw + 15px);
      margin: 6vh auto 3vh; }
    #contentPage .contentPageHeader .breadcrumb {
      margin-top: 6vh; }
    #contentPage .contentPageHeader .breadcrumb.topOffset {
      margin-top: calc(6vh + 40px); }
    #contentPage .contentPageHeader h1 {
      margin-top: 2vh;
      right: 20px; }
    #contentPage .contentPageHeader .breadcrumb {
      z-index: 2; }
    #contentPage .contentPageHeader h1 {
      margin-bottom: 0; }
    @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 600px) and (orientation: landscape) {
      #contentPage .contentPageHeader {
        position: relative;
        padding-bottom: 0;
        height: 31vh; } }
  #contentPage > .content {
    position: relative;
    width: 100vw;
    margin-top: 36vh;
    padding: 10px 15vw 100px;
    color: #333333; }
    @media (max-height: 600px) {
      #contentPage > .content {
        margin-top: 10vh; } }
    @media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-height: 1024px) and (orientation: landscape) {
      #contentPage > .content {
        width: 90vw;
        padding: 0 6.5vw 100px;
        margin-left: auto;
        margin-right: auto; } }
    @media screen and (max-width: 600px) {
      #contentPage > .content {
        margin-top: 2.5rem;
        padding-left: 0;
        padding-right: 0;
        width: 100%; } }
    @media (min-width: 1440px) {
      #contentPage > .content:before, #contentPage > .content:after {
        content: '';
        position: fixed;
        top: 30vh;
        z-index: 2;
        width: 10vw;
        height: 100vh;
        background-size: contain;
        background-image: url(/dist/5f51fc6fe7421bae2781212da222510b.png); }
      #contentPage > .content:before {
        left: 0;
        -webkit-transform: scaleX(-1);
                transform: scaleX(-1); }
      #contentPage > .content:after {
        right: 0; } }
  #contentPage .footer {
    z-index: 5; }

.moreGames > div {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: 100%;
  min-width: 300px;
  max-width: 1500px;
  min-height: 250px;
  text-align: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  border: 1px solid rgba(73, 34, 8, 0.6); }
  .moreGames > div:not(:first-child) {
    margin-top: 50px; }
  .moreGames > div .teaser {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 250px;
            flex: 0 0 250px; }
    .moreGames > div .teaser img {
      width: 100%;
      display: block; }
  .moreGames > div .description {
    padding: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #FEF0CE;
    border: 1px solid rgba(73, 34, 8, 0.5);
    -webkit-box-shadow: inset 0 0 50px 20px rgba(175, 134, 73, 0.45);
            box-shadow: inset 0 0 50px 20px rgba(175, 134, 73, 0.45); }
    .moreGames > div .description h3 {
      margin: 0 0 15px; }
    .moreGames > div .description .cta {
      -webkit-box-flex: 1;
          -ms-flex: 1 0 200px;
              flex: 1 0 200px;
      text-align: center; }
      .moreGames > div .description .cta img {
        width: 100%; }
      .moreGames > div .description .cta a {
        position: relative;
        z-index: 20;
        border: none;
        background: none; }
  @media (min-width: 1400px) {
    .moreGames > div:nth-child(odd) .description .cta {
      padding-right: 25px; }
    .moreGames > div:nth-child(even) {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse; }
      .moreGames > div:nth-child(even) .description {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse; }
        .moreGames > div:nth-child(even) .description .cta {
          padding-left: 25px; }
    .moreGames > div .cta img,
    .moreGames > div .cta .button {
      margin-top: 25px; } }
  @media (max-width: 1400px) {
    .moreGames > div .description {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-flow: column;
              flex-flow: column;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; }
      .moreGames > div .description .cta {
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
        padding: 25px 0 0; }
        .moreGames > div .description .cta img {
          display: none; } }
  @media (max-width: 1400px) and (min-width: 900px) {
    .moreGames > div .teaser {
      -webkit-box-flex: 1;
          -ms-flex: 1 0 250px;
              flex: 1 0 250px; }
    .moreGames > div .description {
      -webkit-box-flex: 1;
          -ms-flex: 1 1 60%;
              flex: 1 1 60%; }
    .moreGames > div:nth-child(odd) .description .cta {
      text-align: left; }
    .moreGames > div:nth-child(even) {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse; }
      .moreGames > div:nth-child(even) .cta {
        text-align: right; } }
  @media (max-width: 900px) {
    .moreGames > div {
      width: calc(300px + 20vw);
      max-width: calc(100vw - 50px);
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start; }
      .moreGames > div .teaser {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto; } }
#battlePage .background {
  opacity: .6; }

#battlePage .intro {
  position: relative;
  margin: 10vh auto 150px;
  text-align: center; }
  @media (min-width: 900px) {
    #battlePage .intro {
      width: 60vw; } }
  @media (max-width: 900px) {
    #battlePage .intro {
      width: 80vw; } }

#battlePage .timeline {
  position: relative;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  #battlePage .timeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    border-width: 169px 58px 180px 0;
    border-style: solid;
    border-image-repeat: repeat;
    border-image-outset: 68px 0;
    border-image-source: url(/dist/09ea4bb2047b76f683ab57041458b646.png);
    border-image-slice: 169 58 180; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      #battlePage .timeline:before {
        border-image-source: url(/dist/043060222093c2b726daadd0eb1ff78c.png);
        border-image-slice: 338 116 360; } }
  #battlePage .timeline .event {
    height: 213px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    #battlePage .timeline .event h3 {
      margin: 0 0 .3em; }
    #battlePage .timeline .event img {
      width: auto;
      height: 75%; }
  @media (min-width: 1440px) {
    #battlePage .timeline {
      width: 72vw;
      max-width: 1550px; }
      #battlePage .timeline:before {
        left: calc(50% - 58px / 2); }
      #battlePage .timeline .event {
        width: 32vw;
        max-width: 700px; }
        #battlePage .timeline .event:nth-child(even) {
          -ms-flex-item-align: end;
              align-self: flex-end; }
        #battlePage .timeline .event:nth-child(1), #battlePage .timeline .event:nth-child(2), #battlePage .timeline .event:nth-child(5), #battlePage .timeline .event:nth-child(6) {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row; }
          #battlePage .timeline .event:nth-child(1) img, #battlePage .timeline .event:nth-child(2) img, #battlePage .timeline .event:nth-child(5) img, #battlePage .timeline .event:nth-child(6) img {
            margin-left: 20px; }
        #battlePage .timeline .event:nth-child(3), #battlePage .timeline .event:nth-child(4) {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: reverse;
              -ms-flex-direction: row-reverse;
                  flex-direction: row-reverse; }
          #battlePage .timeline .event:nth-child(3) img, #battlePage .timeline .event:nth-child(4) img {
            margin-right: 20px; } }
  @media (max-width: 1440px) and (min-width: 900px) {
    #battlePage .timeline {
      width: 80vw;
      padding-right: 10vw; }
      #battlePage .timeline:before {
        right: 0; }
      #battlePage .timeline .event {
        width: 60vw; }
        #battlePage .timeline .event:nth-child(even) {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row; }
          #battlePage .timeline .event:nth-child(even) img {
            margin-left: 20px; }
        #battlePage .timeline .event:nth-child(odd) {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: reverse;
              -ms-flex-direction: row-reverse;
                  flex-direction: row-reverse; }
          #battlePage .timeline .event:nth-child(odd) img {
            margin-right: 20px; } }
  @media (max-width: 900px) {
    #battlePage .timeline {
      width: 80vw; }
      #battlePage .timeline:before {
        display: none; }
      #battlePage .timeline .event {
        height: auto;
        margin-bottom: 60px; }
        #battlePage .timeline .event img {
          height: 100px; }
        #battlePage .timeline .event:nth-child(even) {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row; }
          #battlePage .timeline .event:nth-child(even) img {
            margin-left: 20px; }
        #battlePage .timeline .event:nth-child(odd) {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: reverse;
              -ms-flex-direction: row-reverse;
                  flex-direction: row-reverse; }
          #battlePage .timeline .event:nth-child(odd) img {
            margin-right: 20px; } }
#support {
  overflow-x: hidden; }
  #support .background {
    position: fixed;
    z-index: 0;
    bottom: 0;
    right: 50%;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
    min-height: 100vh;
    height: auto;
    min-width: 100vw; }
  #support section {
    position: relative;
    z-index: 1; }
    #support section.answers {
      min-height: 100vh;
      padding: 10vh 0; }
      #support section.answers .breadcrumb,
      #support section.answers h1 {
        position: relative;
        width: calc(80vw + .4vw + 15px);
        margin: 6vh auto 3vh; }
      #support section.answers .breadcrumb {
        margin-top: 6vh; }
      #support section.answers .breadcrumb.topOffset {
        margin-top: calc(6vh + 40px); }
      #support section.answers h1 {
        margin-top: 2vh;
        right: 20px; }
      #support section.answers h1 + h3 {
        display: block;
        width: 100%;
        text-align: center;
        text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, 0.75);
        margin: 5vh auto 0; }
      #support section.answers > .boxGrid {
        width: calc(80vw + ((.4vw + 15px) * 2));
        margin-top: 7vh; }
        @media screen and (max-width: 600px) {
          #support section.answers > .boxGrid {
            width: 100%; } }
        #support section.answers > .boxGrid .boxGrid {
          width: auto;
          -webkit-box-flex: 1;
              -ms-flex: 1 1 calc(100% / 4 * 2 - (.4vw + 15px) * 2);
                  flex: 1 1 calc(100% / 4 * 2 - (.4vw + 15px) * 2);
          -ms-flex-positive: 1;
              flex-grow: 1;
          -ms-flex-negative: 1;
              flex-shrink: 1;
          -ms-flex-preferred-size: calc(100% / 4 * 2 - (.4vw + 15px) * 2);
              flex-basis: calc(100% / 4 * 2 - (.4vw + 15px) * 2); }
        @media (max-width: 1024px) {
          #support section.answers > .boxGrid .box.intro:before {
            top: calc(180px + 30px); }
          #support section.answers > .boxGrid .box.intro .content {
            padding-top: calc(180px + 30px); }
          #support section.answers > .boxGrid .box.intro img {
            top: calc(30px / 2 + 10px);
            left: 50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%); }
          #support section.answers > .boxGrid .box.live {
            -webkit-box-flex: 1;
                -ms-flex: 1 1 100%;
                    flex: 1 1 100%; } }
        @media (min-width: 1024px) and (max-width: 1280px) {
          #support section.answers > .boxGrid .box.intro {
            min-width: 600px; }
            #support section.answers > .boxGrid .box.intro:before {
              left: calc(180px - 50px + 10%); }
            #support section.answers > .boxGrid .box.intro .content {
              padding-left: calc(180px + 10%); }
            #support section.answers > .boxGrid .box.intro img {
              left: calc((-50px + 10%) / 2 + 10px);
              top: 50%;
              -webkit-transform: translateY(-50%);
                      transform: translateY(-50%); } }
        @media (min-width: 1280px) {
          #support section.answers > .boxGrid .box.intro {
            -webkit-box-flex: 1;
                -ms-flex: 1 1 calc(100% / 4 * 2 - (.4vw + 15px) * 2);
                    flex: 1 1 calc(100% / 4 * 2 - (.4vw + 15px) * 2);
            -ms-flex-positive: 1;
                flex-grow: 1;
            -ms-flex-negative: 1;
                flex-shrink: 1;
            -ms-flex-preferred-size: calc(100% / 4 * 2 - (.4vw + 15px) * 2);
                flex-basis: calc(100% / 4 * 2 - (.4vw + 15px) * 2); }
            #support section.answers > .boxGrid .box.intro:before {
              top: calc(180px + 30px); }
            #support section.answers > .boxGrid .box.intro .content {
              padding-top: calc(180px + 30px); }
            #support section.answers > .boxGrid .box.intro img {
              top: calc(30px / 2 + 10px);
              left: 50%;
              -webkit-transform: translateX(-50%);
                      transform: translateX(-50%); }
          #support section.answers > .boxGrid .box.live {
            -webkit-box-flex: 1;
                -ms-flex: 1 1 50%;
                    flex: 1 1 50%;
            -ms-flex-positive: 1;
                flex-grow: 1;
            -ms-flex-negative: 1;
                flex-shrink: 1;
            -ms-flex-preferred-size: 50%;
                flex-basis: 50%; } }
      #support section.answers ul {
        margin: 0;
        padding-right: 20px; }
      #support section.answers li:nth-child(n + 2) {
        padding-top: .5em; }
    #support section.contactSupport {
      padding: 10vh 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      #support section.contactSupport .box {
        max-width: 80vw;
        width: calc(600px + 10vw);
        margin: 0 auto; }
        @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 600px) and (orientation: landscape) {
          #support section.contactSupport .box {
            max-width: none;
            width: 100%; } }
        #support section.contactSupport .box label {
          margin: 25px 0; }
          @media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-height: 1024px) and (orientation: landscape) {
            #support section.contactSupport .box label.textarea {
              margin-bottom: 35px; } }
        #support section.contactSupport .box textarea {
          min-height: 100px; }
        #support section.contactSupport .box .button {
          position: relative;
          right: 50%;
          -webkit-transform: translateX(50%);
                  transform: translateX(50%);
          min-width: 50%;
          margin-top: 25px; }
        #support section.contactSupport .box select::-ms-expand {
          display: none; }
        #support section.contactSupport .box select {
          -webkit-appearance: none;
             -moz-appearance: none;
                  appearance: none; }
#media {
  overflow-x: hidden; }
  #media .background {
    position: fixed;
    z-index: 0;
    bottom: 0;
    right: 50%;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
    min-height: 100vh;
    height: auto;
    min-width: 100vw; }
  #media section {
    padding: 10vh 0;
    min-height: 100vh;
    position: relative; }
    #media section .breadcrumb,
    #media section h1 {
      position: relative;
      width: calc(80vw + .4vw + 15px);
      margin: 6vh auto 3vh; }
    #media section .breadcrumb {
      margin-top: 6vh; }
    #media section .breadcrumb.topOffset {
      margin-top: calc(6vh + 40px); }
    #media section h1 {
      margin-top: 2vh;
      right: 20px; }
  #media .gallery {
    width: calc(80vw);
    margin: 8vh auto 0;
    text-align: justify; }
    #media .gallery .item {
      display: inline-block;
      border: 2px solid #F2F2F2;
      border-radius: 5px;
      -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
              box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
      margin: 0 1vw 50px 0; }
      @media (min-width: 1280px) {
        #media .gallery .item {
          width: calc(80vw / 4 - 1vw - 2px);
          height: calc(80vw / 4 * 0.5625); } }
      @media (max-width: 1280px) and (min-width: 800px) {
        #media .gallery .item {
          width: calc(80vw / 3 - 1vw - 2px);
          height: calc(80vw / 3 * 0.5625); } }
      @media (max-width: 800px) and (min-width: 600px) {
        #media .gallery .item {
          width: calc(80vw / 2 - 1vw - 2px);
          height: calc(80vw / 2 * 0.5625); } }
      @media (max-width: 600px) {
        #media .gallery .item {
          width: calc(80vw / 1 - 1vw - 2px);
          height: calc(80vw / 1 * 0.5625);
          margin-bottom: 20px; } }
      #media .gallery .item .media {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        background-size: cover;
        background-position: center;
        -webkit-box-shadow: inset 0 0 8vw 30px rgba(0, 0, 0, 0.5);
                box-shadow: inset 0 0 8vw 30px rgba(0, 0, 0, 0.5); }
        #media .gallery .item .media:after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          border-radius: 5px;
          background-color: rgba(242, 242, 242, 0.1); }
      #media .gallery .item .title {
        visibility: hidden;
        font-style: italic;
        color: #F0A600;
        text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, 0.75);
        padding: 5px; }
      #media .gallery .item:hover {
        -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5), 0 30px 20px rgba(0, 0, 0, 0.1);
                box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5), 0 30px 20px rgba(0, 0, 0, 0.1);
        border-color: #F0A600;
        cursor: pointer; }
        #media .gallery .item:hover .media {
          -webkit-box-shadow: none;
                  box-shadow: none; }
          #media .gallery .item:hover .media:after {
            display: none; }
        #media .gallery .item:hover .title {
          visibility: visible; }
  #media .lightBox {
    width: 100vw;
    height: 100vh;
    padding: 20vh 10vw 10vh;
    position: fixed;
    z-index: 10;
    top: 0;
    background-color: rgba(51, 51, 51, 0.95); }
    #media .lightBox .header {
      width: 100%;
      border-bottom: 1px solid #F2F2F2;
      padding-bottom: .5em;
      margin-bottom: 5vh;
      position: relative; }
      #media .lightBox .header h2 {
        margin: 0 0 .3em; }
        @media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-height: 1024px) and (orientation: landscape) {
          #media .lightBox .header h2 {
            padding-left: 5rem; } }
      @media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-height: 1024px) and (orientation: landscape) {
        #media .lightBox .header div {
          padding-left: 5rem; } }
      #media .lightBox .header svg {
        stroke-width: 3;
        stroke: #F2F2F2;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 5em;
        height: 5em; }
        #media .lightBox .header svg:hover {
          cursor: pointer;
          stroke: #F0A600; }
        #media .lightBox .header svg:not(:hover) g {
          -webkit-filter: none;
                  filter: none; }
    #media .lightBox .body {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -webkit-box-align: stretch;
          -ms-flex-align: stretch;
              align-items: stretch; }
      #media .lightBox .body .pagination {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 0px;
                flex: 1 1 0;
        text-align: center;
        position: relative;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none; }
        #media .lightBox .body .pagination svg {
          position: relative;
          top: 50%;
          -webkit-transform: scaleX(-1) translateY(-50%);
                  transform: scaleX(-1) translateY(-50%);
          width: 8vw;
          min-width: 32px;
          height: auto;
          fill: #F2F2F2; }
          #media .lightBox .body .pagination svg.back {
            -webkit-transform: scaleX(1) translateY(-50%);
                    transform: scaleX(1) translateY(-50%); }
        #media .lightBox .body .pagination:not(:hover) svg g, #media .lightBox .body .pagination.disabled svg g {
          -webkit-filter: none;
                  filter: none; }
        #media .lightBox .body .pagination:hover:not(.disabled) {
          cursor: pointer; }
          #media .lightBox .body .pagination:hover:not(.disabled) svg {
            fill: #F0A600; }
        #media .lightBox .body .pagination.disabled {
          opacity: .2; }
    #media .lightBox img,
    #media .lightBox .video {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      -ms-flex-item-align: center;
          align-self: center;
      border-radius: 3px;
      border: 1px solid #000000;
      -webkit-box-shadow: 3px 3px 15px 6px rgba(0, 0, 0, 0.4);
              box-shadow: 3px 3px 15px 6px rgba(0, 0, 0, 0.4); }
    #media .lightBox img {
      max-width: 60vw;
      max-height: 50vh; }
    #media .lightBox .video {
      width: 60vw;
      height: 33.75vw;
      max-height: 50vh;
      max-width: 88vh; }