/*! normalize.css v2.1.3 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */

[hidden],
template {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
    background: transparent;
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: 0;
    -moz-outline-style: none;
}



/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
    -moz-outline-style: none;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9.
 */

img {
    border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari 5.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*
 * Base styles
 */
html {overflow-y: scroll; -ms-overflow-style: auto}
body {min-height: 100%; background: #fff; color: #212121; font: 16px/1.5 /* 24px */ 'Lato', 'Arial', 'Helvetica', sans-serif; cursor: default}
body * {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; text-overflow: ellipsis; list-style: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important}
section {position: relative}
body.viewport-480,
body.viewport-320 {font-size: 13px}

a {color: inherit; text-decoration: none}

/* Disable scrollbar and scrolling */
.clip {overflow: hidden}

/* Make container extend to full height, even when containing floated elements. */
.clear:after {content: ''; clear: both; display: block}

/* For backend developers: mark elements as not finished (when integrating templates with backend). */
._placeholder {outline: 2px dashed rgba(255, 0, 255, .33) !important}

h1, h2, h3, h4 {color: #212121; font-family: 'Montserrat', 'Lato', 'Arial', 'Helvetica', sans-serif; line-height: 1; word-wrap: break-word}
h1.light, h2.light, h3.light, h4.light, p.light {color: #fff}

h1 {font-size: 35px; line-height: 64px; text-transform: uppercase}
h2 {font-size: 25px; text-transform: uppercase}
h3 {font-size: 20px; text-transform: uppercase}
h4 {font-size: 16px; text-transform: uppercase}
 @media screen and (max-width: 719px){
     h1 {font-size: 24px; line-height: 24px}
     h2 {font-size: 20px}
 }

/* Float */
.float-left {float: left}
.float-right {float: right}
.float-none {float: none}

/* Table */
.table {display: table}
.table>* {display: table-cell}

/* Text style */
.text-uppercase {text-transform: uppercase}
.text-normal {text-transform: none}
.text-left {text-align: left}
.text-center {text-align: center}
.text-right {text-align: right}
.text-italic {font-style: italic}
.text-padding {display: inline-block; padding: 5px 0}
.text-mute {color: #acacac; font-size: 9px; font-weight: 600}

/* Margin class */
.margin       {margin: 20px 0}
.margin.tiny {margin: 5px 0}
.margin.small {margin: 10px 0}
.margin.big   {margin: 30px 0}
.margin.large   {margin: 60px 0}
.margin.extra-large   {margin: 120px 0}

.margin.top       {margin: 20px 0 0}
.margin.top.tiny  {margin: 5px 0 0}
.margin.top.small {margin: 10px 0 0}
.margin.top.big   {margin: 30px 0 0}
.margin.top.large   {margin: 60px 0 0}
.margin.top.extra-large   {margin: 120px 0 0}

.margin.bottom       {margin: 0 0 20px}
.margin.bottom.tiny  {margin: 0 0 5px}
.margin.bottom.small {margin: 0 0 10px}
.margin.bottom.big   {margin: 0 0 30px}
.margin.bottom.large   {margin: 0 0 60px}
.margin.bottom.extra-large   {margin: 0 0 120px}

.viewport-480 .margin,
.viewport-320 .margin {margin: 10px 0}
.viewport-480 .margin.tiny,
.viewport-320 .margin.tiny  {margin: 2px 0}
.viewport-480 .margin.small,
.viewport-320 .margin.small {margin: 5px 0}
.viewport-480 .margin.big,
.viewport-320 .margin.big {margin: 15px 0}
.viewport-480 .margin.large,
.viewport-320 .margin.large   {margin: 30px 0}

.viewport-480 .margin.top,
.viewport-320 .margin.top {margin: 10px 0 0}
.viewport-480 .margin.top.tiny,
.viewport-320 .margin.top.tiny  {margin: 2px 0 0}
.viewport-480 .margin.top.small,
.viewport-320 .margin.top.small {margin: 5px 0 0}
.viewport-480 .margin.top.big,
.viewport-320 .margin.top.big {margin: 15px 0 0}
.viewport-480 .margin.top.large,
.viewport-320 .margin.top.large   {margin: 30px 0 0}

.viewport-480 .margin.bottom,
.viewport-320 .margin.bottom {margin: 0 0 10px}
.viewport-480 .margin.bottom.tiny,
.viewport-320 .margin.bottom.tiny  {margin: 0 0 2px}
.viewport-480 .margin.bottom.small,
.viewport-320 .margin.bottom.small {margin: 0 0 5px}
.viewport-480 .margin.bottom.big,
.viewport-320 .margin.bottom.big {margin: 0 0 15px}
.viewport-480 .margin.bottom.large,
.viewport-320 .margin.bottom.large   {margin: 0 0 30px}

.margin.bottom.extra-large   {margin: 0 0 120px}

.no-margin {margin: 0 !important}
.no-margin-top {margin-top: 0 !important}
.no-margin-bottom {margin-bottom: 0 !important}

.padding-vertical {padding: 20px 0 !important}

.padding-outline {padding: 20px}

.no-padding-right {padding-right: 0 !important}
.no-padding-left {padding-left: 0 !important}

.hide {display: none !important}

.nowrap {white-space: nowrap}

.center {margin: 0 auto}

.block {display: block}

:invalid,
:-moz-submit-invalid,
:-moz-ui-invalid {
  box-shadow: none;
}

.ellip {
  display: block;
  height: 100%;
}

.ellip-line {
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  max-width: 100%;
}

.ellip,
.ellip-line {
  position: relative;
  overflow: hidden;
}

/*
 * Percentage-based responsive column classes. Hard-coded breakpoints (also configured in scripts/settings.js):
 *
 *     viewport width  settings alias  body class
 *                                     (added automatically by the viewport.js script)
 *     =============== =============== ================================================
 *     0 - 479         '320'           viewport-320
 *     480 - 719       '480'           viewport-480
 *     720 - 959       '720'           viewport-720
 *     960 - 1279      '960'           viewport-960
 *     1280 - 1599     '1280'          viewport-1280
 *     1600 - 1919     '1600'          viewport-1600
 *     1920+           '1920'          viewport-1920
 *
 */
.columns:after {content: ''; clear: both; display: block}
.columns>* {float: left}


@media (min-width: 320px) and (max-width: 479px) {
    .v320-hide {display: none !important}

    .v320-no-padding-top    {padding-top:    0 !important}
    .v320-no-padding-left   {padding-left:   0 !important}
    .v320-no-padding-right  {padding-right:  0 !important}
    .v320-no-padding-bottom {padding-bottom: 0 !important}
}

@media (min-width: 320px) {
    .grid.v320-bottom>* {vertical-align: bottom}
    .grid.v320-middle>* {vertical-align: middle}

    .v320-1 {width: 100%}

    .v320-1-of-2 {width: 50%}

    .v320-1-of-3 {width: 33.33333333333333%}
    .v320-2-of-3 {width: 66.66666666666666%}

    .v320-1-of-4 {width: 25%}
    .v320-2-of-4 {width: 50%}
    .v320-3-of-4 {width: 75%}

    .v320-1-of-5 {width: 20%}
    .v320-2-of-5 {width: 40%}
    .v320-3-of-5 {width: 60%}
    .v320-4-of-5 {width: 80%}

    .v320-1-of-6 {width: 16.666666666666664%}
    .v320-2-of-6 {width: 33.33333333333333%}
    .v320-3-of-6 {width: 50%}
    .v320-4-of-6 {width: 66.66666666666666%}
    .v320-5-of-6 {width: 83.33333333333334%}

    .v320-1-of-7 {width: 14.285714285714285%}
    .v320-2-of-7 {width: 28.57142857142857%}
    .v320-3-of-7 {width: 42.857142857142854%}
    .v320-4-of-7 {width: 57.14285714285714%}
    .v320-5-of-7 {width: 71.42857142857143%}
    .v320-6-of-7 {width: 85.71428571428571%}

    .v320-1-of-8 {width: 12.5%}
    .v320-2-of-8 {width: 25%}
    .v320-3-of-8 {width: 37.5%}
    .v320-4-of-8 {width: 50%}
    .v320-5-of-8 {width: 62.5%}
    .v320-6-of-8 {width: 75%}
    .v320-7-of-8 {width: 87.5%}

    .v320-1-of-9 {width: 11.11111111111111%}
    .v320-2-of-9 {width: 22.22222222222222%}
    .v320-3-of-9 {width: 33.33333333333333%}
    .v320-4-of-9 {width: 44.44444444444444%}
    .v320-5-of-9 {width: 55.55555555555556%}
    .v320-6-of-9 {width: 66.66666666666666%}
    .v320-7-of-9 {width: 77.77777777777779%}
    .v320-8-of-9 {width: 88.88888888888889%}

    .v320-1-of-10 {width: 10%}
    .v320-2-of-10 {width: 20%}
    .v320-3-of-10 {width: 30%}
    .v320-4-of-10 {width: 40%}
    .v320-5-of-10 {width: 50%}
    .v320-6-of-10 {width: 60%}
    .v320-7-of-10 {width: 70%}
    .v320-8-of-10 {width: 80%}
    .v320-9-of-10 {width: 90%}

    .v320-1-of-11 {width: 9.090909090909092%}
    .v320-2-of-11 {width: 18.181818181818183%}
    .v320-3-of-11 {width: 27.27272727272727%}
    .v320-4-of-11 {width: 36.36363636363637%}
    .v320-5-of-11 {width: 45.45454545454545%}
    .v320-6-of-11 {width: 54.54545454545454%}
    .v320-7-of-11 {width: 63.63636363636363%}
    .v320-8-of-11 {width: 72.72727272727273%}
    .v320-9-of-11 {width: 81.81818181818183%}
    .v320-10-of-11 {width: 90.9090909090909%}

    .v320-1-of-12 {width: 8.333333333333332%}
    .v320-2-of-12 {width: 16.666666666666664%}
    .v320-3-of-12 {width: 25%}
    .v320-4-of-12 {width: 33.33333333333333%}
    .v320-5-of-12 {width: 41.66666666666667%}
    .v320-6-of-12 {width: 50%}
    .v320-7-of-12 {width: 58.333333333333336%}
    .v320-8-of-12 {width: 66.66666666666666%}
    .v320-9-of-12 {width: 75%}
    .v320-10-of-12 {width: 83.33333333333334%}
    .v320-11-of-12 {width: 91.66666666666666%}


    .v320-padding           {padding:        10px}
    .v320-padding-top       {padding-top:    10px}
    .v320-padding-left      {padding-left:   10px}
    .v320-padding-right     {padding-right:  10px}
    .v320-padding-bottom    {padding-bottom: 10px}


    .v320-text-left   {text-align: left}
    .v320-text-center {text-align: center}
    .v320-text-right  {text-align: right}


    .v320-float-left  {float: left}
    .v320-float-right {float: right}
    .v320-float-none {float: none}
}

@media (min-width: 480px) and (max-width: 719px) {
    .v480-hide {display: none !important}

    .v480-no-padding-top    {padding-top:    0 !important}
    .v480-no-padding-left   {padding-left:   0 !important}
    .v480-no-padding-right  {padding-right:  0 !important}
    .v480-no-padding-bottom {padding-bottom: 0 !important}
}

@media (min-width: 480px) {
    .grid.v480-bottom>* {vertical-align: bottom}
    .grid.v480-middle>* {vertical-align: middle}

    .v480-1 {width: 100%}

    .v480-1-of-2 {width: 50%}

    .v480-1-of-3 {width: 33.33333333333333%}
    .v480-2-of-3 {width: 66.66666666666666%}

    .v480-1-of-4 {width: 25%}
    .v480-2-of-4 {width: 50%}
    .v480-3-of-4 {width: 75%}

    .v480-1-of-5 {width: 20%}
    .v480-2-of-5 {width: 40%}
    .v480-3-of-5 {width: 60%}
    .v480-4-of-5 {width: 80%}

    .v480-1-of-6 {width: 16.666666666666664%}
    .v480-2-of-6 {width: 33.33333333333333%}
    .v480-3-of-6 {width: 50%}
    .v480-4-of-6 {width: 66.66666666666666%}
    .v480-5-of-6 {width: 83.33333333333334%}

    .v480-1-of-7 {width: 14.285714285714285%}
    .v480-2-of-7 {width: 28.57142857142857%}
    .v480-3-of-7 {width: 42.857142857142854%}
    .v480-4-of-7 {width: 57.14285714285714%}
    .v480-5-of-7 {width: 71.42857142857143%}
    .v480-6-of-7 {width: 85.71428571428571%}

    .v480-1-of-8 {width: 12.5%}
    .v480-2-of-8 {width: 25%}
    .v480-3-of-8 {width: 37.5%}
    .v480-4-of-8 {width: 50%}
    .v480-5-of-8 {width: 62.5%}
    .v480-6-of-8 {width: 75%}
    .v480-7-of-8 {width: 87.5%}

    .v480-1-of-9 {width: 11.11111111111111%}
    .v480-2-of-9 {width: 22.22222222222222%}
    .v480-3-of-9 {width: 33.33333333333333%}
    .v480-4-of-9 {width: 44.44444444444444%}
    .v480-5-of-9 {width: 55.55555555555556%}
    .v480-6-of-9 {width: 66.66666666666666%}
    .v480-7-of-9 {width: 77.77777777777779%}
    .v480-8-of-9 {width: 88.88888888888889%}

    .v480-1-of-10 {width: 10%}
    .v480-2-of-10 {width: 20%}
    .v480-3-of-10 {width: 30%}
    .v480-4-of-10 {width: 40%}
    .v480-5-of-10 {width: 50%}
    .v480-6-of-10 {width: 60%}
    .v480-7-of-10 {width: 70%}
    .v480-8-of-10 {width: 80%}
    .v480-9-of-10 {width: 90%}

    .v480-1-of-11 {width: 9.090909090909092%}
    .v480-2-of-11 {width: 18.181818181818183%}
    .v480-3-of-11 {width: 27.27272727272727%}
    .v480-4-of-11 {width: 36.36363636363637%}
    .v480-5-of-11 {width: 45.45454545454545%}
    .v480-6-of-11 {width: 54.54545454545454%}
    .v480-7-of-11 {width: 63.63636363636363%}
    .v480-8-of-11 {width: 72.72727272727273%}
    .v480-9-of-11 {width: 81.81818181818183%}
    .v480-10-of-11 {width: 90.9090909090909%}

    .v480-1-of-12 {width: 8.333333333333332%}
    .v480-2-of-12 {width: 16.666666666666664%}
    .v480-3-of-12 {width: 25%}
    .v480-4-of-12 {width: 33.33333333333333%}
    .v480-5-of-12 {width: 41.66666666666667%}
    .v480-6-of-12 {width: 50%}
    .v480-7-of-12 {width: 58.333333333333336%}
    .v480-8-of-12 {width: 66.66666666666666%}
    .v480-9-of-12 {width: 75%}
    .v480-10-of-12 {width: 83.33333333333334%}
    .v480-11-of-12 {width: 91.66666666666666%}


    .v480-padding           {padding:        10px}
    .v480-padding-top       {padding-top:    10px}
    .v480-padding-left      {padding-left:   10px}
    .v480-padding-right     {padding-right:  10px}
    .v480-padding-bottom    {padding-bottom: 10px}


    .v480-text-left   {text-align: left}
    .v480-text-center {text-align: center}
    .v480-text-right  {text-align: right}


    .v480-float-left  {float: left}
    .v480-float-right {float: right}
    .v480-float-none {float: none}
}

@media (min-width: 720px) and (max-width: 959px) {
    .v720-hide {display: none !important}

    .v720-no-padding-top    {padding-top:    0 !important}
    .v720-no-padding-left   {padding-left:   0 !important}
    .v720-no-padding-right  {padding-right:  0 !important}
    .v720-no-padding-bottom {padding-bottom: 0 !important}
}

@media (min-width: 720px) {
    .grid.v720-bottom>* {vertical-align: bottom}
    .grid.v720-middle>* {vertical-align: middle}

    .v720-1 {width: 100%}

    .v720-1-of-2 {width: 50%}

    .v720-1-of-3 {width: 33.33333333333333%}
    .v720-2-of-3 {width: 66.66666666666666%}

    .v720-1-of-4 {width: 25%}
    .v720-2-of-4 {width: 50%}
    .v720-3-of-4 {width: 75%}

    .v720-1-of-5 {width: 20%}
    .v720-2-of-5 {width: 40%}
    .v720-3-of-5 {width: 60%}
    .v720-4-of-5 {width: 80%}

    .v720-1-of-6 {width: 16.666666666666664%}
    .v720-2-of-6 {width: 33.33333333333333%}
    .v720-3-of-6 {width: 50%}
    .v720-4-of-6 {width: 66.66666666666666%}
    .v720-5-of-6 {width: 83.33333333333334%}

    .v720-1-of-7 {width: 14.285714285714285%}
    .v720-2-of-7 {width: 28.57142857142857%}
    .v720-3-of-7 {width: 42.857142857142854%}
    .v720-4-of-7 {width: 57.14285714285714%}
    .v720-5-of-7 {width: 71.42857142857143%}
    .v720-6-of-7 {width: 85.71428571428571%}

    .v720-1-of-8 {width: 12.5%}
    .v720-2-of-8 {width: 25%}
    .v720-3-of-8 {width: 37.5%}
    .v720-4-of-8 {width: 50%}
    .v720-5-of-8 {width: 62.5%}
    .v720-6-of-8 {width: 75%}
    .v720-7-of-8 {width: 87.5%}

    .v720-1-of-9 {width: 11.11111111111111%}
    .v720-2-of-9 {width: 22.22222222222222%}
    .v720-3-of-9 {width: 33.33333333333333%}
    .v720-4-of-9 {width: 44.44444444444444%}
    .v720-5-of-9 {width: 55.55555555555556%}
    .v720-6-of-9 {width: 66.66666666666666%}
    .v720-7-of-9 {width: 77.77777777777779%}
    .v720-8-of-9 {width: 88.88888888888889%}

    .v720-1-of-10 {width: 10%}
    .v720-2-of-10 {width: 20%}
    .v720-3-of-10 {width: 30%}
    .v720-4-of-10 {width: 40%}
    .v720-5-of-10 {width: 50%}
    .v720-6-of-10 {width: 60%}
    .v720-7-of-10 {width: 70%}
    .v720-8-of-10 {width: 80%}
    .v720-9-of-10 {width: 90%}

    .v720-1-of-11 {width: 9.090909090909092%}
    .v720-2-of-11 {width: 18.181818181818183%}
    .v720-3-of-11 {width: 27.27272727272727%}
    .v720-4-of-11 {width: 36.36363636363637%}
    .v720-5-of-11 {width: 45.45454545454545%}
    .v720-6-of-11 {width: 54.54545454545454%}
    .v720-7-of-11 {width: 63.63636363636363%}
    .v720-8-of-11 {width: 72.72727272727273%}
    .v720-9-of-11 {width: 81.81818181818183%}
    .v720-10-of-11 {width: 90.9090909090909%}

    .v720-1-of-12 {width: 8.333333333333332%}
    .v720-2-of-12 {width: 16.666666666666664%}
    .v720-3-of-12 {width: 25%}
    .v720-4-of-12 {width: 33.33333333333333%}
    .v720-5-of-12 {width: 41.66666666666667%}
    .v720-6-of-12 {width: 50%}
    .v720-7-of-12 {width: 58.333333333333336%}
    .v720-8-of-12 {width: 66.66666666666666%}
    .v720-9-of-12 {width: 75%}
    .v720-10-of-12 {width: 83.33333333333334%}
    .v720-11-of-12 {width: 91.66666666666666%}


    .v720-padding           {padding:        10px}
    .v720-padding-top       {padding-top:    10px}
    .v720-padding-left      {padding-left:   10px}
    .v720-padding-right     {padding-right:  10px}
    .v720-padding-bottom    {padding-bottom: 10px}


    .v720-text-left   {text-align: left}
    .v720-text-center {text-align: center}
    .v720-text-right  {text-align: right}


    .v720-float-left  {float: left}
    .v720-float-right {float: right}
    .v720-float-none {float: none}
}

@media (min-width: 960px) and (max-width: 1319px) {
    .v960-hide {display: none !important}

    .v960-no-padding-top    {padding-top:    0 !important}
    .v960-no-padding-left   {padding-left:   0 !important}
    .v960-no-padding-right  {padding-right:  0 !important}
    .v960-no-padding-bottom {padding-bottom: 0 !important}
}

@media (min-width: 960px) {
    .grid.v960-bottom>* {vertical-align: bottom}
    .grid.v960-middle>* {vertical-align: middle}

    .v960-1 {width: 100%}

    .v960-1-of-2 {width: 50%}

    .v960-1-of-3 {width: 33.33333333333333%}
    .v960-2-of-3 {width: 66.66666666666666%}

    .v960-1-of-4 {width: 25%}
    .v960-2-of-4 {width: 50%}
    .v960-3-of-4 {width: 75%}

    .v960-1-of-5 {width: 20%}
    .v960-2-of-5 {width: 40%}
    .v960-3-of-5 {width: 60%}
    .v960-4-of-5 {width: 80%}

    .v960-1-of-6 {width: 16.666666666666664%}
    .v960-2-of-6 {width: 33.33333333333333%}
    .v960-3-of-6 {width: 50%}
    .v960-4-of-6 {width: 66.66666666666666%}
    .v960-5-of-6 {width: 83.33333333333334%}

    .v960-1-of-7 {width: 14.285714285714285%}
    .v960-2-of-7 {width: 28.57142857142857%}
    .v960-3-of-7 {width: 42.857142857142854%}
    .v960-4-of-7 {width: 57.14285714285714%}
    .v960-5-of-7 {width: 71.42857142857143%}
    .v960-6-of-7 {width: 85.71428571428571%}

    .v960-1-of-8 {width: 12.5%}
    .v960-2-of-8 {width: 25%}
    .v960-3-of-8 {width: 37.5%}
    .v960-4-of-8 {width: 50%}
    .v960-5-of-8 {width: 62.5%}
    .v960-6-of-8 {width: 75%}
    .v960-7-of-8 {width: 87.5%}

    .v960-1-of-9 {width: 11.11111111111111%}
    .v960-2-of-9 {width: 22.22222222222222%}
    .v960-3-of-9 {width: 33.33333333333333%}
    .v960-4-of-9 {width: 44.44444444444444%}
    .v960-5-of-9 {width: 55.55555555555556%}
    .v960-6-of-9 {width: 66.66666666666666%}
    .v960-7-of-9 {width: 77.77777777777779%}
    .v960-8-of-9 {width: 88.88888888888889%}

    .v960-1-of-10 {width: 10%}
    .v960-2-of-10 {width: 20%}
    .v960-3-of-10 {width: 30%}
    .v960-4-of-10 {width: 40%}
    .v960-5-of-10 {width: 50%}
    .v960-6-of-10 {width: 60%}
    .v960-7-of-10 {width: 70%}
    .v960-8-of-10 {width: 80%}
    .v960-9-of-10 {width: 90%}

    .v960-1-of-11 {width: 9.090909090909092%}
    .v960-2-of-11 {width: 18.181818181818183%}
    .v960-3-of-11 {width: 27.27272727272727%}
    .v960-4-of-11 {width: 36.36363636363637%}
    .v960-5-of-11 {width: 45.45454545454545%}
    .v960-6-of-11 {width: 54.54545454545454%}
    .v960-7-of-11 {width: 63.63636363636363%}
    .v960-8-of-11 {width: 72.72727272727273%}
    .v960-9-of-11 {width: 81.81818181818183%}
    .v960-10-of-11 {width: 90.9090909090909%}

    .v960-1-of-12 {width: 8.333333333333332%}
    .v960-2-of-12 {width: 16.666666666666664%}
    .v960-3-of-12 {width: 25%}
    .v960-4-of-12 {width: 33.33333333333333%}
    .v960-5-of-12 {width: 41.66666666666667%}
    .v960-6-of-12 {width: 50%}
    .v960-7-of-12 {width: 58.333333333333336%}
    .v960-8-of-12 {width: 66.66666666666666%}
    .v960-9-of-12 {width: 75%}
    .v960-10-of-12 {width: 83.33333333333334%}
    .v960-11-of-12 {width: 91.66666666666666%}


    .v960-padding           {padding:        10px}
    .v960-padding-top       {padding-top:    10px}
    .v960-padding-left      {padding-left:   10px}
    .v960-padding-right     {padding-right:  10px}
    .v960-padding-bottom    {padding-bottom: 10px}


    .v960-text-left   {text-align: left}
    .v960-text-center {text-align: center}
    .v960-text-right  {text-align: right}


    .v960-float-left  {float: left}
    .v960-float-right {float: right}
    .v960-float-none {float: none}
}

@media (min-width: 1280px) and (max-width: 1599px) {
    .v1280-hide {display: none !important}

    .v1280-no-padding-top    {padding-top:    0 !important}
    .v1280-no-padding-left   {padding-left:   0 !important}
    .v1280-no-padding-right  {padding-right:  0 !important}
    .v1280-no-padding-bottom {padding-bottom: 0 !important}
}

@media (min-width: 1280px) {
    .grid.v1280-bottom>* {vertical-align: bottom}
    .grid.v1280-middle>* {vertical-align: middle}

    .v1280-1 {width: 100%}

    .v1280-1-of-2 {width: 50%}

    .v1280-1-of-3 {width: 33.33333333333333%}
    .v1280-2-of-3 {width: 66.66666666666666%}

    .v1280-1-of-4 {width: 25%}
    .v1280-2-of-4 {width: 50%}
    .v1280-3-of-4 {width: 75%}

    .v1280-1-of-5 {width: 20%}
    .v1280-2-of-5 {width: 40%}
    .v1280-3-of-5 {width: 60%}
    .v1280-4-of-5 {width: 80%}

    .v1280-1-of-6 {width: 16.666666666666664%}
    .v1280-2-of-6 {width: 33.33333333333333%}
    .v1280-3-of-6 {width: 50%}
    .v1280-4-of-6 {width: 66.66666666666666%}
    .v1280-5-of-6 {width: 83.33333333333334%}

    .v1280-1-of-7 {width: 14.285714285714285%}
    .v1280-2-of-7 {width: 28.57142857142857%}
    .v1280-3-of-7 {width: 42.857142857142854%}
    .v1280-4-of-7 {width: 57.14285714285714%}
    .v1280-5-of-7 {width: 71.42857142857143%}
    .v1280-6-of-7 {width: 85.71428571428571%}

    .v1280-1-of-8 {width: 12.5%}
    .v1280-2-of-8 {width: 25%}
    .v1280-3-of-8 {width: 37.5%}
    .v1280-4-of-8 {width: 50%}
    .v1280-5-of-8 {width: 62.5%}
    .v1280-6-of-8 {width: 75%}
    .v1280-7-of-8 {width: 87.5%}

    .v1280-1-of-9 {width: 11.11111111111111%}
    .v1280-2-of-9 {width: 22.22222222222222%}
    .v1280-3-of-9 {width: 33.33333333333333%}
    .v1280-4-of-9 {width: 44.44444444444444%}
    .v1280-5-of-9 {width: 55.55555555555556%}
    .v1280-6-of-9 {width: 66.66666666666666%}
    .v1280-7-of-9 {width: 77.77777777777779%}
    .v1280-8-of-9 {width: 88.88888888888889%}

    .v1280-1-of-10 {width: 10%}
    .v1280-2-of-10 {width: 20%}
    .v1280-3-of-10 {width: 30%}
    .v1280-4-of-10 {width: 40%}
    .v1280-5-of-10 {width: 50%}
    .v1280-6-of-10 {width: 60%}
    .v1280-7-of-10 {width: 70%}
    .v1280-8-of-10 {width: 80%}
    .v1280-9-of-10 {width: 90%}

    .v1280-1-of-11 {width: 9.090909090909092%}
    .v1280-2-of-11 {width: 18.181818181818183%}
    .v1280-3-of-11 {width: 27.27272727272727%}
    .v1280-4-of-11 {width: 36.36363636363637%}
    .v1280-5-of-11 {width: 45.45454545454545%}
    .v1280-6-of-11 {width: 54.54545454545454%}
    .v1280-7-of-11 {width: 63.63636363636363%}
    .v1280-8-of-11 {width: 72.72727272727273%}
    .v1280-9-of-11 {width: 81.81818181818183%}
    .v1280-10-of-11 {width: 90.9090909090909%}

    .v1280-1-of-12 {width: 8.333333333333332%}
    .v1280-2-of-12 {width: 16.666666666666664%}
    .v1280-3-of-12 {width: 25%}
    .v1280-4-of-12 {width: 33.33333333333333%}
    .v1280-5-of-12 {width: 41.66666666666667%}
    .v1280-6-of-12 {width: 50%}
    .v1280-7-of-12 {width: 58.333333333333336%}
    .v1280-8-of-12 {width: 66.66666666666666%}
    .v1280-9-of-12 {width: 75%}
    .v1280-10-of-12 {width: 83.33333333333334%}
    .v1280-11-of-12 {width: 91.66666666666666%}


    .v1280-padding           {padding:        10px}
    .v1280-padding-top       {padding-top:    10px}
    .v1280-padding-left      {padding-left:   10px}
    .v1280-padding-right     {padding-right:  10px}
    .v1280-padding-bottom    {padding-bottom: 10px}


    .v1280-text-left   {text-align: left}
    .v1280-text-center {text-align: center}
    .v1280-text-right  {text-align: right}


    .v1280-float-left  {float: left}
    .v1280-float-right {float: right}
    .v1280-float-none {float: none}
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .v1600-hide {display: none !important}

    .v1600-no-padding-top    {padding-top:    0 !important}
    .v1600-no-padding-left   {padding-left:   0 !important}
    .v1600-no-padding-right  {padding-right:  0 !important}
    .v1600-no-padding-bottom {padding-bottom: 0 !important}
}

@media (min-width: 1600px) {
    .grid.v1600-bottom>* {vertical-align: bottom}
    .grid.v1600-middle>* {vertical-align: middle}

    .v1600-1 {width: 100%}

    .v1600-1-of-2 {width: 50%}

    .v1600-1-of-3 {width: 33.33333333333333%}
    .v1600-2-of-3 {width: 66.66666666666666%}

    .v1600-1-of-4 {width: 25%}
    .v1600-2-of-4 {width: 50%}
    .v1600-3-of-4 {width: 75%}

    .v1600-1-of-5 {width: 20%}
    .v1600-2-of-5 {width: 40%}
    .v1600-3-of-5 {width: 60%}
    .v1600-4-of-5 {width: 80%}

    .v1600-1-of-6 {width: 16.666666666666664%}
    .v1600-2-of-6 {width: 33.33333333333333%}
    .v1600-3-of-6 {width: 50%}
    .v1600-4-of-6 {width: 66.66666666666666%}
    .v1600-5-of-6 {width: 83.33333333333334%}

    .v1600-1-of-7 {width: 14.285714285714285%}
    .v1600-2-of-7 {width: 28.57142857142857%}
    .v1600-3-of-7 {width: 42.857142857142854%}
    .v1600-4-of-7 {width: 57.14285714285714%}
    .v1600-5-of-7 {width: 71.42857142857143%}
    .v1600-6-of-7 {width: 85.71428571428571%}

    .v1600-1-of-8 {width: 12.5%}
    .v1600-2-of-8 {width: 25%}
    .v1600-3-of-8 {width: 37.5%}
    .v1600-4-of-8 {width: 50%}
    .v1600-5-of-8 {width: 62.5%}
    .v1600-6-of-8 {width: 75%}
    .v1600-7-of-8 {width: 87.5%}

    .v1600-1-of-9 {width: 11.11111111111111%}
    .v1600-2-of-9 {width: 22.22222222222222%}
    .v1600-3-of-9 {width: 33.33333333333333%}
    .v1600-4-of-9 {width: 44.44444444444444%}
    .v1600-5-of-9 {width: 55.55555555555556%}
    .v1600-6-of-9 {width: 66.66666666666666%}
    .v1600-7-of-9 {width: 77.77777777777779%}
    .v1600-8-of-9 {width: 88.88888888888889%}

    .v1600-1-of-10 {width: 10%}
    .v1600-2-of-10 {width: 20%}
    .v1600-3-of-10 {width: 30%}
    .v1600-4-of-10 {width: 40%}
    .v1600-5-of-10 {width: 50%}
    .v1600-6-of-10 {width: 60%}
    .v1600-7-of-10 {width: 70%}
    .v1600-8-of-10 {width: 80%}
    .v1600-9-of-10 {width: 90%}

    .v1600-1-of-11 {width: 9.090909090909092%}
    .v1600-2-of-11 {width: 18.181818181818183%}
    .v1600-3-of-11 {width: 27.27272727272727%}
    .v1600-4-of-11 {width: 36.36363636363637%}
    .v1600-5-of-11 {width: 45.45454545454545%}
    .v1600-6-of-11 {width: 54.54545454545454%}
    .v1600-7-of-11 {width: 63.63636363636363%}
    .v1600-8-of-11 {width: 72.72727272727273%}
    .v1600-9-of-11 {width: 81.81818181818183%}
    .v1600-10-of-11 {width: 90.9090909090909%}

    .v1600-1-of-12 {width: 8.333333333333332%}
    .v1600-2-of-12 {width: 16.666666666666664%}
    .v1600-3-of-12 {width: 25%}
    .v1600-4-of-12 {width: 33.33333333333333%}
    .v1600-5-of-12 {width: 41.66666666666667%}
    .v1600-6-of-12 {width: 50%}
    .v1600-7-of-12 {width: 58.333333333333336%}
    .v1600-8-of-12 {width: 66.66666666666666%}
    .v1600-9-of-12 {width: 75%}
    .v1600-10-of-12 {width: 83.33333333333334%}
    .v1600-11-of-12 {width: 91.66666666666666%}


    .v1600-padding           {padding:        10px}
    .v1600-padding-top       {padding-top:    10px}
    .v1600-padding-left      {padding-left:   10px}
    .v1600-padding-right     {padding-right:  10px}
    .v1600-padding-bottom    {padding-bottom: 10px}


    .v1600-text-left   {text-align: left}
    .v1600-text-center {text-align: center}
    .v1600-text-right  {text-align: right}


    .v1600-float-left  {float: left}
    .v1600-float-right {float: right}
    .v1600-float-none {float: none}
}

@media (min-width: 1920px) {
    .v1920-hide {display: none !important}
}

@media (min-width: 1920px) {
    .grid.v1920-bottom>* {vertical-align: bottom}
    .grid.v1920-middle>* {vertical-align: middle}

    .v1920-1 {width: 100%}

    .v1920-1-of-2 {width: 50%}

    .v1920-1-of-3 {width: 33.33333333333333%}
    .v1920-2-of-3 {width: 66.66666666666666%}

    .v1920-1-of-4 {width: 25%}
    .v1920-2-of-4 {width: 50%}
    .v1920-3-of-4 {width: 75%}

    .v1920-1-of-5 {width: 20%}
    .v1920-2-of-5 {width: 40%}
    .v1920-3-of-5 {width: 60%}
    .v1920-4-of-5 {width: 80%}

    .v1920-1-of-6 {width: 16.666666666666664%}
    .v1920-2-of-6 {width: 33.33333333333333%}
    .v1920-3-of-6 {width: 50%}
    .v1920-4-of-6 {width: 66.66666666666666%}
    .v1920-5-of-6 {width: 83.33333333333334%}

    .v1920-1-of-7 {width: 14.285714285714285%}
    .v1920-2-of-7 {width: 28.57142857142857%}
    .v1920-3-of-7 {width: 42.857142857142854%}
    .v1920-4-of-7 {width: 57.14285714285714%}
    .v1920-5-of-7 {width: 71.42857142857143%}
    .v1920-6-of-7 {width: 85.71428571428571%}

    .v1920-1-of-8 {width: 12.5%}
    .v1920-2-of-8 {width: 25%}
    .v1920-3-of-8 {width: 37.5%}
    .v1920-4-of-8 {width: 50%}
    .v1920-5-of-8 {width: 62.5%}
    .v1920-6-of-8 {width: 75%}
    .v1920-7-of-8 {width: 87.5%}

    .v1920-1-of-9 {width: 11.11111111111111%}
    .v1920-2-of-9 {width: 22.22222222222222%}
    .v1920-3-of-9 {width: 33.33333333333333%}
    .v1920-4-of-9 {width: 44.44444444444444%}
    .v1920-5-of-9 {width: 55.55555555555556%}
    .v1920-6-of-9 {width: 66.66666666666666%}
    .v1920-7-of-9 {width: 77.77777777777779%}
    .v1920-8-of-9 {width: 88.88888888888889%}

    .v1920-1-of-10 {width: 10%}
    .v1920-2-of-10 {width: 20%}
    .v1920-3-of-10 {width: 30%}
    .v1920-4-of-10 {width: 40%}
    .v1920-5-of-10 {width: 50%}
    .v1920-6-of-10 {width: 60%}
    .v1920-7-of-10 {width: 70%}
    .v1920-8-of-10 {width: 80%}
    .v1920-9-of-10 {width: 90%}

    .v1920-1-of-11 {width: 9.090909090909092%}
    .v1920-2-of-11 {width: 18.181818181818183%}
    .v1920-3-of-11 {width: 27.27272727272727%}
    .v1920-4-of-11 {width: 36.36363636363637%}
    .v1920-5-of-11 {width: 45.45454545454545%}
    .v1920-6-of-11 {width: 54.54545454545454%}
    .v1920-7-of-11 {width: 63.63636363636363%}
    .v1920-8-of-11 {width: 72.72727272727273%}
    .v1920-9-of-11 {width: 81.81818181818183%}
    .v1920-10-of-11 {width: 90.9090909090909%}

    .v1920-1-of-12 {width: 8.333333333333332%}
    .v1920-2-of-12 {width: 16.666666666666664%}
    .v1920-3-of-12 {width: 25%}
    .v1920-4-of-12 {width: 33.33333333333333%}
    .v1920-5-of-12 {width: 41.66666666666667%}
    .v1920-6-of-12 {width: 50%}
    .v1920-7-of-12 {width: 58.333333333333336%}
    .v1920-8-of-12 {width: 66.66666666666666%}
    .v1920-9-of-12 {width: 75%}
    .v1920-10-of-12 {width: 83.33333333333334%}
    .v1920-11-of-12 {width: 91.66666666666666%}


    .v1920-padding           {padding:        10px}
    .v1920-padding-top       {padding-top:    10px}
    .v1920-padding-left      {padding-left:   10px}
    .v1920-padding-right     {padding-right:  10px}
    .v1920-padding-bottom    {padding-bottom: 10px}
    .v1920-no-padding-top    {padding-top:    0 !important}
    .v1920-no-padding-left   {padding-left:   0 !important}
    .v1920-no-padding-right  {padding-right:  0 !important}
    .v1920-no-padding-bottom {padding-bottom: 0 !important}


    .v1920-text-left   {text-align: left}
    .v1920-text-center {text-align: center}
    .v1920-text-right  {text-align: right}


    .v1920-float-left  {float: left}
    .v1920-float-right {float: right}
    .v1920-float-none {float: none}
}

/*
 * Zerospace
 */
@font-face {
    font-family: 'Zerospace';
    src: url('../frontend/fonts/zerospace.eot');
    src:
         url('../frontend/fonts/zerospace.eot') format('embedded-opentype'),
         url('../frontend/fonts/zerospace.ttf') format('truetype');
}


/*
 * Lato
 */
@font-face {
    font-family: 'Lato';
    src: url('../frontend/fonts/lato_regular.eot');
    src:
         url('../frontend/fonts/lato_regular.eot') format('embedded-opentype'),
         url('../frontend/fonts/lato_regular.svg') format('svg'),
         url('../frontend/fonts/lato_regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    src: url('../frontend/fonts/lato_italic.eot');
    src:
         url('../frontend/fonts/lato_italic.eot') format('embedded-opentype'),
         url('../frontend/fonts/lato_italic.svg') format('svg'),
         url('../frontend/fonts/lato_italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 300;
    src: url('../frontend/fonts/lato_light.eot');
    src:
         url('../frontend/fonts/lato_light.eot') format('embedded-opentype'),
         url('../frontend/fonts/lato_light.svg') format('svg'),
         url('../frontend/fonts/lato_light.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 700;
    src: url('../frontend/fonts/lato_bold.eot');
    src:
         url('../frontend/fonts/lato_bold.eot') format('embedded-opentype'),
         url('../frontend/fonts/lato_bold.svg') format('svg'),
         url('../frontend/fonts/lato_bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: url('../frontend/fonts/lato_black.eot');
    src:
         url('../frontend/fonts/lato_black.eot') format('embedded-opentype'),
         url('../frontend/fonts/lato_black.svg') format('svg'),
         url('../frontend/fonts/lato_black.ttf') format('truetype');
}


/*
 * Montserrat
 */
@font-face {
    font-family: 'Montserrat';
    src: url('../frontend/fonts/montserrat_regular.eot');
    src:
         url('../frontend/fonts/montserrat_regular.eot') format('embedded-opentype'),
         url('../frontend/fonts/montserrat_regular.svg') format('svg'),
         url('../frontend/fonts/montserrat_regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 700;
    src: url('../frontend/fonts/montserrat_bold.eot');
    src:
         url('../frontend/fonts/montserrat_bold.eot') format('embedded-opentype'),
         url('../frontend/fonts/montserrat_bold.svg') format('svg'),
         url('../frontend/fonts/montserrat_bold.ttf') format('truetype');
}


/*
 * Icons
 */
@font-face {
    font-family: 'Icons';
    src: url('../frontend/fonts/icons.eot');
    src:
         url('../frontend/fonts/icons.eot') format('embedded-opentype'),
         url('../frontend/fonts/icons.svg') format('svg'),
         url('../frontend/fonts/icons.ttf') format('truetype');
}

/*
 * Forms and form fields
 */
input,
button,
select {vertical-align: middle; outline: none}
textarea {vertical-align: top; outline: none}

button,
select,
label[for],
input[type="reset"],
input[type="radio"],
input[type="button"],
input[type="submit"],
input[type="checkbox"] {cursor: pointer}

button[disabled],
select[disabled],
label[disabled][for],
input[disabled][type="reset"],
input[disabled][type="radio"],
input[disabled][type="button"],
input[disabled][type="submit"],
input[disabled][type="checkbox"] {cursor: default}

input[type="file"] {display: none}
input[type="file"] + span {color: #ccb423; font-weight: 700; -webkit-transition: color 0.25s ease; transition: color 0.25s ease}
input[type="file"] + span:before {margin-right: 5px; color: #212121; font-size: 12px; -webkit-transition: color 0.25s ease; transition: color 0.25s ease}
input[type="file"] + span:hover {color: #212121}
input[type="file"] + span:hover:before {color: #ccb423}

label {cursor: pointer}

input::-ms-clear {display: none}

/* IE9 fixes in separate file */
.button {overflow: hidden; display: inline-block; padding: 14px 25px; border: none; background: #e6c918; color: transparent; font-family: 'Montserrat', 'Lato', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-weight: 700; line-height: 1; text-align: left; text-transform: uppercase; text-shadow: 0 0 0 #212121, 0 40px 0 #e6c918; vertical-align: middle; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; white-space: nowrap}
.button.block {display: block; width: 100%}
.button.big {padding: 19px 36px; font-size: 18px}
.viewport-320 .button.big,
.viewport-480 .button.big {padding: 14px 18px; font-size: 14px}
.viewport-320 .button {padding: 14px 10px; font-size: 10px}
.viewport-320 .button.big {font-size: 12px}
.viewport-480 table .button {padding: 14px 15px}

.button[disabled],
.button.disabled {background: #dacb6f; color: #afa043; text-shadow: none; cursor: default; -webkit-transition: none; transition: none}
.button[disabled]:before,
.button.disabled:before {color: #afa043}
.button[disabled]:hover,
.button.disabled:hover {background: #dacb6f; color: #afa043; text-shadow: none}

.button:before {float: right; color: #fff; margin-left: 25px; text-indent: 0; text-shadow: none}
.button>span {display: inline-block}
.button>span:before {float: left; color: #fff; margin-right: 25px; text-indent: 0; text-shadow: none}
.button.big:before {margin-left: 36px}
.button.big>span:before {margin-right: 36px}

.button.hide-text {width: 40px; padding-left: 0; padding-right: 0; text-indent: -999em}
.button.hide-text.big {width: 64px}
.button.hide-text[class*="icon-"]:before {float: right; width: 100%; margin: auto; text-align: center}
.viewport-320 .button.v320-hide-text {width: 40px; padding-left: 0; padding-right: 0; text-indent: -999em}
.viewport-320 .button.v320-hide-text.big {width: 64px}
.viewport-320 .button.v320-hide-text[class*="icon-"]:before {float: right; width: 100%; margin: auto; text-align: center}
.viewport-320 .button.mobile:before {margin-left: 5px}

.button:hover,
.button.active {background: #212121; text-shadow: 0 -40px 0 #212121, 0 0 0 #e6c918}

.button.dark {background: #2c2c2c; text-shadow: 0 0 0 #dedede, 0 40px 0 #2c2c2c; font-family: 'Lato', 'Arial', 'Helvetica', sans-serif; font-weight: 700}
.button.dark:before,
.button.dark>span:before {color: #696969}
.button.dark:hover,
.button.dark.active {background: #dedede; text-shadow: 0 -40px 0 #dedede, 0 0 0 #2c2c2c}

.button.light {background: #dad9da; text-shadow: 0 0 0 #928f8f, 0 40px 0 #fff; font-family: 'Lato', 'Arial', 'Helvetica', sans-serif; font-weight: 700}
.button.light:before,
.button.light>span:before {color: #212121}
.button.light:hover,
.button.light.active {background: #928f8f; text-shadow: 0 -40px 0 #928f8f, 0 0 0 #fff}

.button.small-padding {padding-left: 17px; padding-right: 17px}

.button[data-hover] {position: relative; margin-top: 0; text-shadow: 0 0 0 #212121; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
.button[data-hover]:after {content: attr(data-hover); display: block; position: absolute; width: 100%; left: 0; top: 50px; color: #fff; font-weight: 400; text-shadow: none; text-align: center; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
.button[data-hover].active,
.button[data-hover]:hover {text-shadow: 0 -50px 0 #212121}
.button[data-hover].active:after,
.button[data-hover]:hover:after {top: 18px}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="date"],
input[type="password"] {width: 100%; height: 40px; padding: 0 12px; border: 1px solid #dcdcdc; background: #fff; color: #212121; font-family: 'Lato', 'Arial', 'Helvetica', sans-serif}

input[type="text"].big,
input[type="email"].big,
input[type="search"].big,
input[type="date"].big,
input[type="password"].big {height: 56px; padding: 0 25px}

input[type="checkbox"] {position: absolute; visibility: hidden}
input[type="checkbox"]+span {overflow: hidden; display: inline-block; width: 20px; height: 20px; margin: -2px 5px 0 0; border: 1px solid #dcdcdc; background: #fff; text-indent: -99em; vertical-align: middle; white-space: nowrap; cursor: pointer}
input[type="checkbox"]+span:before {float: left; width: 100%; height: 100%; text-indent: 0; color: transparent; font-size: 12px; text-align: center; line-height: 18px; -webkit-transition: color 0.25s ease; transition: color 0.25s ease}
input[type="checkbox"]:checked+span:before {color: #e6c918}

input[type="radio"] {position: absolute; visibility: hidden}
input[type="radio"]+span {position: relative; overflow: hidden; display: inline-block; width: 20px; height: 20px; border: 1px solid #dcdcdc; border-radius: 20px; background: #fff; text-indent: -99em; vertical-align: middle; white-space: nowrap; cursor: pointer}
input[type="radio"]+span:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 10px; height: 10px; margin: auto; border-radius: 10px; background: transparent; -webkit-transition: background 0.25s ease; transition: background 0.25s ease}
input[type="radio"]:checked+span:before {background: #e6c918}

input.placeholdr {color: #878787}

.fake-select {overflow: hidden; position: relative; display: block; width: 100%; height: 40px; padding: 0 25px; border: 1px solid #dcdcdc; background: #fff; color: #928f8f; line-height: 38px; white-space: nowrap; cursor: pointer}
.fake-select:before {float: right; margin-left: 10px; color: #212121; font-size: 12px; line-height: 38px !important}
.fake-select .value {overflow: hidden; display: block}
.fake-select .value:first-letter {text-transform: uppercase}
.fake-select.big {height: 56px; line-height: 54px}
.fake-select.big:before {line-height: 54px !important}
.text-right .fake-select {text-align: left}

.desktop .fake-select select {left: -100%; width: 100%}
.android .fake-select select {display: block; width: 100%; margin-left: -25px; height: 100%}
.ie.phone .fake-select select {left: 0; width: 100%; height: 100%}

.fake-dropdown {position: absolute; z-index: 12; margin-top: -1px; background: #fff; border: 1px solid #dcdcdc; border-radius: 0 0 3px 3px}
.fake-dropdown .scrollable {max-height: 168px}
.fake-dropdown a {overflow: hidden; display: block; padding: 8px 25px; color: #212121; line-height: 35px; text-decoration: none; white-space: nowrap}
.fake-dropdown a:hover {background: #fafafa}
.fake-dropdown li+li {border-top: 1px solid #eee}
.fake-dropdown li:last-child {border-bottom: 1px solid #eee}
.fake-dropdown.no-border {border-top: 1px solid #EFEFEF; border-left: 0; border-right: 0; border-bottom: 0}
.fake-dropdown.no-border a {padding-top: 10px; padding-bottom: 10px}

textarea {width: 100%; border: 0; background: transparent; resize: none}
.textarea-wrapper {padding: 14px 25px; border: 1px solid #dcdcdc; background: #fff}

.search-form input[type="search"] {display: inline-block; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); height: 50px; border: 0; background: #ededed; line-height: 50px; text-transform: uppercase}
.search-form .button {display: inline-block; float: right; width: 50px; font-size: 22px}
.android .search-form {background: #ededed}
.android .search-form input[type="search"] {width: 80%; line-height: 52px}
.android .search-form input[type="search"]::-webkit-input-placeholder {color: #ededed}

.search-field {position: relative}
.search-field .button {position: absolute; top: 0; right: 0; width: auto; padding: 12px 12px; background: none; color: #212121}
.search-field .button:before {color: #928f8f; font-size: 18px}

/* Autocomplete */
.autocomplete-suggestions { border: 1px solid #dcdcdc; border-top: 0; background: #FFF; overflow: auto; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;}
.autocomplete-suggestion { padding: 5px 25px; white-space: nowrap; overflow: hidden; cursor: pointer}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: 700; color: #ccb423; }

.ac_results {overflow: hidden; z-index: 20; margin: 0; padding: 0}
.ac_results ul {margin: 0; padding: 0; background: #fff; border: 1px solid #dcdcdc; border-top: 0; list-style-position: outside; list-style: none}
.ac_results li {display: block; overflow: auto; margin: 0; padding: 0; border-top: 1px solid #dcdcdc; cursor: pointer}
.ac_results li:first-child {border: 0}
.ac_loading {background-image: url(../frontend/images/loading.gif); background-position: 97% center; background-repeat: no-repeat}
.ac_over {background-color: #FFFFF0; color: #fb0}
.ac_over a:hover {color: #000}
.ac_results li p,
.ac_results li a {display: block; overflow: auto; padding: 10px; color: #2c2c2c; line-height: 40px}
.ac_results li p img,
.ac_results li a img {width: 40px; height: auto; max-height: 40px; float: left; margin-right: 15px}

/* Datepicker */
.Zebra_DatePicker { position: absolute; background: #666; border: 1px solid #fff; z-index: 100; font-family: 'Lato', Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; }
.Zebra_DatePicker * { margin: 0; padding: 0; color: #000; background: transparent; border: none }

.Zebra_DatePicker table { border-collapse: collapse; border-spacing: 0; width: auto; table-layout: auto; }
.Zebra_DatePicker td,
.Zebra_DatePicker th { text-align: center; padding: 5px 0; font-size: 12px }
.Zebra_DatePicker td { cursor: pointer }

.Zebra_DatePicker .dp_header,
.Zebra_DatePicker .dp_daypicker {width: 100%}
.Zebra_DatePicker .dp_daypicker td,
.Zebra_DatePicker .dp_daypicker th,
.Zebra_DatePicker .dp_monthpicker td,
.Zebra_DatePicker .dp_yearpicker td { background: #E8E8E8; width: 30px}

.Zebra_DatePicker.dp_visible {display: block; visibility: visible; filter: alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out }
.Zebra_DatePicker.dp_hidden {display: none; visibility: hidden; filter: alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0; opacity: 0}

.Zebra_DatePicker .dp_daypicker th { background: #353535; color: #fff; font-family: 'Lato'; font-weight: 400 }
.Zebra_DatePicker td.dp_not_in_month { background: #F3F3F3; color: #CDCDCD; cursor: default }
.Zebra_DatePicker td.dp_not_in_month_selectable { background: #F3F3F3; color: #CDCDCD; cursor: pointer }
.Zebra_DatePicker td.dp_weekend { background: #D8D8D8 }
.Zebra_DatePicker td.dp_weekend_disabled { color: #CCC; cursor: default }
.Zebra_DatePicker td.dp_selected { background: #e6c918; color: #212121 !important; font-weight: 700 }
.Zebra_DatePicker td.dp_week_number { background: #FFCC33; color: #555; cursor: text; font-style: italic }

.Zebra_DatePicker .dp_monthpicker td { width: 33% }
.Zebra_DatePicker .dp_yearpicker td { width: 33% }

.Zebra_DatePicker .dp_header .dp_next.dp_hover,
.Zebra_DatePicker .dp_header .dp_previous.dp_hover,
.Zebra_DatePicker .dp_header .dp_hover,
.Zebra_DatePicker .dp_footer .dp_hover {background: #212121; text-shadow: 0 -40px 0 #212121, 0 0 0 #e6c918}
.Zebra_DatePicker .dp_header td,
.Zebra_DatePicker .dp_header .dp_previous,
.Zebra_DatePicker .dp_header .dp_next,
.Zebra_DatePicker .dp_today,
.Zebra_DatePicker .dp_clear {overflow: hidden; display: inline-block; padding: 14px 25px; border: none; background: #e6c918; color: transparent !important; font-family: 'Montserrat', 'Lato', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-weight: 700; line-height: 1; text-align: center; text-transform: uppercase; text-shadow: 0 0 0 #212121, 0 40px 0 #e6c918; vertical-align: middle; -webkit-transition: text-shadow 0.25s ease, background 0.25s ease; transition: text-shadow 0.25s ease, background 0.25s ease; white-space: nowrap}

.Zebra_DatePicker .dp_header .dp_caption { width: 80%; font-weight: bold; text-align: center }
.Zebra_DatePicker .dp_header .dp_previous,
.Zebra_DatePicker .dp_header .dp_next { width: 10%; padding-left: 0; padding-right: 0; text-align: center}

.Zebra_DatePicker td.dp_current { color: #ccb423; font-weight: 700 }
.Zebra_DatePicker td.dp_disabled_current { color: #E38585 }
.Zebra_DatePicker td.dp_disabled { background: #F3F3F3; color: #CDCDCD; cursor: default }
.Zebra_DatePicker td.dp_hover { background: #928F8F; color: #FFF }

button.Zebra_DatePicker_Icon {content: '\e616'; display: block; position: absolute; top: 0; right: 0; width: 40px; height: 40px; border: 0; background: none; text-indent: -9999px}
button.Zebra_DatePicker_Icon:after {content: '\e616'; display: block; position: relative; top: -9px; width: 40px; font-family: 'Icons'; text-indent: 0; vertical-align: top}
button.Zebra_DatePicker_Icon_Disabled { background-image: url('../frontend/styles/calendar-disabled.png') }
button.Zebra_DatePicker_Icon { margin: 0 0 0 3px }

.viewport-320 .Zebra_DatePicker {left: 0 !important; width: 310px !important}

.Zebra_DatePicker_Icon_Wrapper {display: block !important; width: 100% !important}

.ios input {-webkit-box-shadow: none !important;box-shadow: none !important; -webkit-appearance: none; border-radius: 0}

/* Default custom select styles */
div.cs-select {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	text-align: left;
	background: #fff;
	z-index: 100;
	width: 100%;
	max-width: 500px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

div.cs-select:focus {
	outline: none; /* For better accessibility add a style for this in your skin */
}

.cs-select select {
	display: none;
}

.cs-select span {
	display: block;
	position: relative;
	cursor: pointer;
	padding: 14px 25px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Placeholder and selected option */
.cs-select > span {
	padding-right: 3em;
}

.cs-select > span::after,
.cs-select .cs-selected span::after {
	speak: none;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.cs-select > span::after {
        font-family: 'Icons';
	content: '\e629';
	right: 1em;
}

.cs-select .cs-selected span::after {
	content: '\2713';
	margin-left: 1em;
}

.cs-select.cs-active > span::after {
	-webkit-transform: translateY(-50%) rotate(180deg);
	-ms-transform: translateY(-50%) rotate(180deg);
	transform: translateY(-50%) rotate(180deg);
}

/* Options */
.cs-select .cs-options {
	position: absolute;
	overflow: hidden;
	width: 100%;
	background: #fff;
	visibility: hidden;
}

.cs-select.cs-active .cs-options {
	visibility: visible;
}

.cs-select ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.cs-select ul span {
	padding: 1em;
}

.cs-select ul li.cs-focus span {
	background-color: #ddd;
}

/* Optgroup and optgroup label */
.cs-select li.cs-optgroup ul {
	padding-left: 1em;
}

.cs-select li.cs-optgroup > span {
	cursor: default;
}

div.cs-skin-slide {
	width: 240px;
	color: #212121;
        font-family: 'Montserrat', 'Lato', 'Arial', 'Helvetica', sans-serif;
	font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
}

@media screen and (max-width: 30em) {
	div.cs-skin-slide { width: 250px; }
}

div.cs-skin-slide::before {
	content: '';
	background: #E6C918;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.cs-skin-slide.cs-active::before {
	-webkit-transform: scale3d(1.1,3.5,1);
	transform: scale3d(1.1,3.5,1);
}

.cs-skin-slide > span {
	height: 40px;
        line-height: 15px;
        color: transparent;
        background: #e6c918;
	text-shadow: 0 0 0 #212121, 0 40px 0 #e6c918;
        -webkit-transition: all 0.25s ease;
        transition: all 0.25s ease;
}

.cs-skin-slide > span:hover {
    background: #212121;
    text-shadow: 0 -40px 0 #212121, 0 0 0 #e6c918;
}

.cs-skin-slide.cs-active > span {
	text-indent: -290px;
	opacity: 0;
}

.cs-skin-slide > span::after,
.cs-skin-slide.cs-active > span::after {
/*	font-family: 'icomoon';
	content: '\e00f';*/
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.cs-skin-slide.cs-active > span::after {
	-webkit-transform: translate3d(0,-50%,0);
	transform: translate3d(0,-50%,0);
}

.cs-skin-slide .cs-options {
	background: transparent;
	width: 100%;
	padding: 25px 10px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

@media screen and (max-width: 30em) {
	.cs-skin-slide .cs-options { padding-top: 3em; }
}

.cs-skin-slide .cs-options li {
	opacity: 0;
	-webkit-transform: translate3d(30%,0,0);
	transform: translate3d(30%,0,0);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.cs-skin-slide.cs-active .cs-options li {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	opacity: 1;
}

.cs-skin-slide.cs-active .cs-options li:first-child {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

.cs-skin-slide.cs-active .cs-options li:nth-child(2) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.cs-skin-slide.cs-active .cs-options li:nth-child(3) {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

.cs-skin-slide.cs-active .cs-options li:nth-child(4) {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.cs-skin-slide.cs-active .cs-options li:nth-child(5) {
	-webkit-transition-delay: 0.25s;
	transition-delay: 0.25s;
} /* more options need more delay declaration */

.cs-skin-slide .cs-options li span {
	text-transform: uppercase;
	padding: 7px 7px 7px 45px;
}

.cs-skin-slide .cs-options li span:hover,
.cs-skin-slide .cs-options li.cs-focus span,
.cs-skin-slide .cs-options li.cs-selected span {
	color: #ac9614;
	background: transparent;
}

.cs-skin-slide .cs-selected span::after {
	content: '';
}

.cs-skin-slide .cs-options li[class*="icon-"]:before {content: ''; position: absolute; display: block; width: 26px; height: 26px; margin-top: 2px; background: url(../frontend/images/payment_icons.png)}
.cs-skin-slide .cs-options li.icon-bitcash:before {background-position: 0 -26px}
.cs-skin-slide .cs-options li.icon-webmoney:before {background-position: 0 -52px}
.cs-skin-slide .cs-options li.hidden {display: none}
.wysiwyg ul>li:before,
[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: 'Icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"].square:before,
[class*=" icon-"].square:before {display: inline-block; width: 109px; height: 109px; margin-right: 20px; border: 2px solid #c1bfc0; color: #c1bfc0; text-align: center; line-height: 109px; vertical-align: middle}
.viewport-320 [class^="icon-"].square:before,
.viewport-320 [class*=" icon-"].square:before {display: block; margin: 0 auto 20px}


[class^="icon-"].icon-big:before,
[class*=" icon-"].icon-big:before {
	font-size: 18px;
	margin-top: -4px !important;
	margin-bottom: -2px !important;
}
/*
 * Same as icon-arrow-right
 */
.wysiwyg ul>li:before {content: "\e612"}

/*
 * Icon definitions
 */
.icon-download-2:before {
	content: "\e63e";
}
.icon-heart:before {
	content: "\e63d";
}
.icon-error:before {
	content: "\e63b";
}
.icon-info:before {
	content: "\e63c";
}
.icon-img:before {
	content: "\e63a";
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}
.icon-delete:before {
	content: "\e627";
}
.icon-plus:before {
	content: "\e628";
}
.icon-diamond:before {
    content: "\e622";
}
.icon-clock2:before {
    content: "\e623";
}
.icon-bars:before {
    content: "\e624";
}
.icon-promotions-big:before {
    content: "\e61f";
    font-size: 40px;
}
.icon-bell-big:before {
    content: "\e61d";
    font-size: 40px;
}
.icon-debug-big:before {
    content: "\e61e";
}
.icon-globe-big:before {
    content: "\e61f";
    font-size: 40px;
}
.icon-key-big:before {
    content: "\e620";
}
.icon-wtf:before {
    content: "\e600";
}
.icon-star:before {
    content: "\e601";
}
.icon-star-fill:before {
    content: "\e615";
}
.icon-share:before {
    content: "\e602";
}
.icon-search:before {
    content: "\e603";
}
.icon-rank:before {
    content: "\e604";
}
.icon-play:before {
    content: "\e605";
}
.icon-play2:before {
    content: "\e625";
}
.icon-lock:before {
    content: "\e606";
}
.icon-file:before {
    content: "\e607";
}
.icon-eye:before {
    content: "\e608";
}
.icon-cart-add:before {
    content: "\e609";
}
.icon-cart:before {
    content: "\e60a";
}
.icon-bulb:before {
    content: "\e60b";
}
.icon-calendar:before {
    content: "\e615";
}
.icon-user:before {
    content: "\e617";
}
.icon-googleplus:before {
    content: "\e60c";
}
.icon-facebook:before {
    content: "\e60d";
}
.icon-twitter:before {
    content: "\e60e";
}
.icon-youtube:before {
    content: "\e626";
}
.icon-checkmark:before {
    content: "\e60f";
}
.icon-checkmark-thin:before {
    content: "\e614";
}
.icon-clock:before {
    content: "\e618";
}
.icon-comment:before {
    content: "\e619";
}
.icon-download:before {
    content: "\e61a";
}
.icon-reply:before {
    content: "\e61b";
}
.icon-close:before {
    content: "\e61c";
}
.icon-bell:before {
    content: "\e61d";
}
.icon-debug:before {
    content: "\e61e";
}
.icon-globe:before {
    content: "\e61f";
}
.icon-key:before {
    content: "\e620";
}
.icon-promotions:before {
    content: "\e621";
}
.icon-menu:before {
    content: "\e629";
}
.icon-list:before {
    content: "\e62b";
}
.icon-grid:before {
    content: "\e62a";
}
.icon-arrow-down:before {
    content: "\e610";
}
.icon-arrow-left:before {
    content: "\e611";
}
.icon-arrow-right:before {
    content: "\e612";
}
.icon-arrow-up:before {
    content: "\e613";
}
.icon-topic-closed:before {
    content: "\e62d";
}
.icon-topic-sticky:before {
    content: "\e62c";
}
.icon-topic-delete:before {
    content: "\e632"
}
.icon-topic-edit:before {
    content: "\e633"
}
.icon-achievements:before {
    content: "\e62f";
}
.icon-topic-announcement:before {
    content: "\e630"
}
.icon-bio:before {
    content: "\e631"
}
.icon-forums:before {
    content: "\e634"
}
.icon-friends:before {
    content: "\e635"
}
.icon-games:before {
    content: "\e636"
}
.icon-messages:before {
    content: "\e637"
}
.icon-reviews:before {
    content: "\e638"
}
.icon-wishlist:before {
    content: "\e639"
}
.icon-link:before {
    content: "\e62e"; font-size: 6px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);
}
.icon-bold:before {
    content: "B"; font-family: 'Lato'; font-size: 16px; line-height: 12px; font-weight: 700;
}
.icon-italic:before {
    content: "I"; font-family: 'Lato'; font-size: 16px; line-height: 12px; font-style: italic;
}
.icon-underline:before {
    content: "U"; font-family: 'Lato'; font-size: 16px; line-height: 12px; text-decoration: underline
}


.hide-text {text-indent: -999em}
.hide-text:before {text-indent: 0}

/*
 * Grid
 */
.grid {font-family: 'Zerospace'; font-size: 0}
.grid>* {display: inline-block; font-family: 'Lato', 'Arial', 'Helvetica', sans-serif; font-size: 16px; vertical-align: top}
.grid.bottom>* {vertical-align: bottom}
.grid.middle>* {vertical-align: middle}
.grid.no-wrap {white-space: nowrap}
.grid.no-wrap>* {white-space: normal}

.grid.rtl {direction: rtl}
.grid.rtl>* {direction: ltr}

.grid.padding {margin: -30px 0 0 -30px}
.grid.padding>* {padding: 30px 0 0 30px}

.grid.padding.tiny {margin: -4px 0 0 -4px}
.grid.padding.tiny>* {padding: 4px 0 0 4px}

.grid.padding.small {margin: -10px 0 0 -10px}
.grid.padding.small>* {padding: 10px 0 0 10px}

.grid.padding.medium {margin: -20px 0 0 -20px}
.grid.padding.medium>* {padding: 20px 0 0 20px}

.grid.padding.big {margin: -40px 0 0 -40px}
.grid.padding.big>* {padding: 40px 0 0 40px}

.grid.padding.large {margin: -50px 0 0 -50px}
.grid.padding.large>* {padding: 50px 0 0 50px}

.grid.padding.larger {margin: -80px 0 0 -80px}
.grid.padding.larger>* {padding: 80px 0 0 80px}

.grid.padding.extra-large {margin: -120px 0 0 -120px}
.grid.padding.extra-large>* {padding: 120px 0 0 120px}

.grid.padding.extra-large.horizontal {margin: -30px 0 0 -120px}
.grid.padding.extra-large.horizontal>* {padding: 30px 0 0 120px}

.grid.margin.multiline {margin: 43px 0 25px}
.viewport-480 .grid.margin.multiline {margin: 35px 0 20px}
.viewport-320 .grid.margin.multiline {margin: 15px 0 15px}

.viewport-480 .grid>*,
.viewport-320 .grid>* {font-size: 13px}

.viewport-480 .grid.padding,
.viewport-320 .grid.padding {margin: -15px 0 0 -15px}
.viewport-480 .grid.padding>*,
.viewport-320 .grid.padding>* {padding: 15px 0 0 15px}

.viewport-480 .grid.padding.tiny,
.viewport-320 .grid.padding.tiny {margin: -2px 0 0 -2px}
.viewport-480 .grid.padding.tiny>*,
.viewport-320 .grid.padding.tiny>* {padding: 2px 0 0 2px}

.viewport-480 .grid.padding.small,
.viewport-320 .grid.padding.small {margin: -5px 0 0 -5px}
.viewport-480 .grid.padding.small>*,
.viewport-320 .grid.padding.small>* {padding: 5px 0 0 5px}

.viewport-480 .grid.padding.big,
.viewport-320 .grid.padding.big {margin: -20px 0 0 -20px}
.viewport-480 .grid.padding.big>*,
.viewport-320 .grid.padding.big>* {padding: 20px 0 0 20px}

.viewport-480 .grid.padding.large,
.viewport-320 .grid.padding.large {margin: -25px 0 0 -25px}
.viewport-480 .grid.padding.large>*,
.viewport-320 .grid.padding.large>* {padding: 25px 0 0 25px}

.viewport-480 .grid.v480-bottom>*,
.viewport-320 .grid.v320-bottom>* {vertical-align: bottom}
.viewport-480 .grid.v480-middle>*,
.viewport-320 .grid.v320-middle>* {vertical-align: middle}
.viewport-480 .grid.v480-top>*,
.viewport-320 .grid.v320-top>* {vertical-align: top}

/*
 * Styles for WYSIWYG editors like TinyMCE or CKEditor
 */
.wysiwyg *+p,
.wysiwyg *+dl,
.wysiwyg *+h1,
.wysiwyg *+h2,
.wysiwyg *+h3,
.wysiwyg *+h4,
.wysiwyg *+h5,
.wysiwyg *+h6,
.wysiwyg *+ol,
.wysiwyg *+ul,
.wysiwyg *+blockquote,
.wysiwyg *+table,
.wysiwyg *+figure {margin-top: 1.5em}

.wysiwyg li {position: relative; padding-left: 40px}
.wysiwyg li:before {position: absolute; top: -3px; left: 0; width: 28px; padding: 9px 0; color: #212121; font-size: 10px; font-weight: 700; text-align: center; line-height: 1}
.wysiwyg li+li {margin-top: 10px}

.wysiwyg ol>li {counter-increment: ordered-list}
.wysiwyg ol>li:before {content: counter(ordered-list); padding: 7px 0; background: #dad9da; color: #928f8f; font-size: 14px}

.wysiwyg li ol,
.wysiwyg li ul {margin-top: 0; margin-bottom: 0}

.wysiwyg dt {font-weight: 700}

.wysiwyg a {color: #ccb423; font-weight: 700; -webkit-transition: color 0.25s ease; transition: color 0.25s ease}
.wysiwyg a:hover {color: #212121}

.wysiwyg img {display: inline-block; max-width: 100%; height: auto; margin: 0 auto; vertical-align: middle}
.wysiwyg figure {margin-bottom: 1em}
.wysiwyg figure img {display: block; width: 100%; height: auto}
.wysiwyg figure figcaption {display: inline-block; width: 100%; padding: 20px 30px; color: #000; background-color: #dad9da}

.wysiwyg.big-line-height {line-height: 30px}
/*article.wysiwyg {padding-top: 85px}*/

.logo {max-width: 328px; line-height: 100px; -webkit-transition: max-width 0.25s ease; transition: max-width 0.25s ease}
.logo a {display: inline-block; vertical-align: middle}
.logo img {width: 235px; height: 58px}

.viewport-320.ie .logo img {width: auto; height: auto; max-width: 238px; max-height: 59px}
@media screen and (max-width: 479px){
    .logo {max-width: 210px}
    .ie .logo img {max-width: 195px; max-height: 48px}
}

/*
 * Top menu
 */
.top-menu {position: relative; z-index: 100; width: 100%; background: #353535; color: #dedede}
.top-menu a.dark {margin-left: 1px}

.top-menu .submenu,
.top-menu .cart {position: relative}
.top-menu .user-menu {display: none; position: absolute; right: 0; z-index: 11; width: 250px; background: #353535; text-align: left}
.top-menu .user-menu li {margin-bottom: 1px; font-size: 12px; text-transform: uppercase}
.top-menu .user-menu li:last-child {margin-bottom: 0}
.top-menu .user-menu li a {display: block; padding: 16px; border-left: 0 solid #f4dc48; background: #3e3e3e; -webkit-transition: border 0.15s ease; transition: border 0.15s ease}
.top-menu .user-menu li a:hover {border-width: 7px}
.top-menu .user-menu li .notice-count {float: right; padding: 0 7px}
.top-menu .submenu .button.dark:before {margin-left: 10px; color: #fff; -webkit-transition: color 0.25s ease; transition: color 0.25s ease}
.top-menu .submenu .button.dark:hover:before {color: #212121}
.top-menu .button {padding: 24px 25px}
.top-menu .button[data-hover]:after {top: 60px}
.top-menu .button[data-hover].active,
.top-menu .button[data-hover]:hover {text-shadow: 0 -50px 0 #212121}
.top-menu .button[data-hover].active:after,
.top-menu .button[data-hover]:hover:after {top: 24px}
.top-menu-banner {display: block; height: 100%; max-height: 60px; padding-top: 0 !important; text-align: center; background: white;}
.top-menu-banner img {display: inline-block}
a:hover.top-menu-banner img {opacity: 0.7;}

.top-menu a.button .icon-cart:before {margin-top: -2px !important; color: #b29c14}
.top-menu .cart {display: none; position: absolute; right: 0; z-index: 1010; width: 460px; padding: 25px 30px 30px; background: #3e3e3e; text-align: left}
.top-menu .cart-price {padding: 22px 25px}
.top-menu .cart-price:before {margin-top: 2px}
.top-menu .cart-price > span > span {font-size: 16px}

.page-header .cart strong {display: inline-block; margin-bottom: 10px; color: #f5e161; font-size: 16px; text-transform: uppercase}
.page-header .cart ol {counter-reset: item}
.page-header .cart ol li {border-top: 1px solid #353535; padding: 14px 0; font-weight: 700}
.page-header .cart ol li:last-child {border-bottom: 1px solid #353535; margin-bottom: 30px}
.page-header .cart ol li:before {content: counter(item); counter-increment: item; display: inline-block; width: 22px; height: 22px; margin-right: 10px; background: #fff; color: #3e3e3e; text-align: center}
.page-header .cart ol li a {-webkit-transition: color 0.25s ease;transition: color 0.25s ease}
.page-header .cart ol li a:hover {color: #f5e161}
.page-header .cart ol li span {float: right; color: #f5e161}
.page-header .cart ol li .icon-delete {position: relative; top: 2px; display: inline-block; width: 22px; height: 22px}
.page-header .cart ol li .icon-delete:before {float: left; display: inline-block; margin-left: 5px; color: #e74c3c; font-size: 22px; line-height: 18px}

.page-header .search-form {height: 113px; padding: 31px 0}

.page-header.mobile .page-column > .grid {margin-top: 0}
.page-header.mobile .page-column > .grid .logo {padding-top: 0}

/* Fixed top bar mod */
@media screen and (min-width: 960px) {
    .top-menu {position: fixed; margin-top:0px}
    .top-menu-logo {top: -60px;  position: absolute;}
    .top-bar {padding-top: 60px;}
}

/*
 * Main menu
 */
.main-menu > ul > li > a {overflow: hidden; position: relative; display: block; color: #2c2c2c; font-family: 'Lato', 'Arial', 'Helvetica', sans-serif; font-weight: 700; text-transform: uppercase; line-height: 102px; white-space: nowrap}
.main-menu > ul > li > a:not(.icon-search):before {content: ''; position: absolute; bottom: 26px; left: 0; right: 100%; height: 4px; background: #f4dc48; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
.main-menu > ul > li > a:not(.icon-search):after {content: ''; position: absolute; bottom: 22px; left: 100%; height: 4px; width: 4px; background: #b5b4b5; -webkit-box-shadow: 0 -4px 0 1px #fff; box-shadow: 0 -4px 0 1px #fff; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
.main-menu > ul > li.submenu.active > a:not(.icon-search):before,
.main-menu > ul > li > a:not(.icon-search):hover:before {right: 0}
.main-menu > ul > li.submenu.active > a:not(.icon-search):after,
.main-menu > ul > li > a:not(.icon-search):hover:after {left: 0}
.main-menu > ul > li > a.icon-search {width: 26px; padding-left: 1px; font-size: 22px; text-align: left; outline: 0}
.main-menu > ul > li > a.icon-search:before {position: absolute; left: 1px; top: -webkit-calc(50% - 12px); top: calc(50% - 12px)}
.main-menu > ul > li {position: relative}
.main-menu > ul > li > ul {position: relative; display: block; width: 540px; position: absolute; top: 150px; left: -1000px; right: -1050px; z-index: 1010; margin-left: auto; margin-right: auto; padding: 20px; background: #3e3e3e; color: #fff; text-align: left; text-transform: uppercase}
.main-menu > ul > li > ul:before {content: ''; position: absolute; top: -70px; left: 55px; display: inline-block; width: 45px; height: 70px;}
.main-menu > ul > li > ul:after {content: ''; position: absolute; top: -30px; left: 0; display: inline-block; width: 150px; height: 30px;}
.main-menu > ul > li > ul.no-visible {visibility: hidden}
.main-menu > ul > li > ul li > a {display: inline-block; width: 100%; padding: 9px 0; color: #fff; -webkit-transition: color 0.25s ease; transition: color 0.25s ease}
.main-menu > ul > li > ul li > a:hover {color: #F5DD50}
.main-menu > ul > li > ul .column {padding: 0 20px; border-right: 1px solid #353535}
.main-menu > ul > li > ul .last.column {border-right: 0}
.main-menu .search-form {display: none; position: absolute; top: 45px; right: -11px; width: 440px}
.main-menu .search-form input[type="search"] {width: -webkit-calc(100% - 90px);width: calc(100% - 90px)}
.viewport-960 .main-menu .grid li {padding-left: 30px}
.android:not(.chrome) .main-menu > ul > li > a.icon-search {line-height: 23px}


/*
 * Breadcrumbs
 */
.breadcrumbs {position: relative; padding: 20px 0; background: #dad9da; font-size: 13px; text-transform: uppercase}
.breadcrumbs:before {content: ''; position: absolute; top: -2px; display: block; width: 100%; border-top: 1px solid #dad9da}
.breadcrumbs a {display: inline-block; color: #353535; line-height: 1; vertical-align: middle}
.breadcrumbs a:before {position: relative; top: 1px; float: right; margin: 0 10px; color: #928f8f; font-size: 10px}
.breadcrumbs a:hover {text-decoration: underline}
.breadcrumbs span {vertical-align: middle}

/*
 * Mobile
 */
.mobile-menu-icon,
.mobile-menu {display: none}
.mobile-menu {position: absolute; top: 100px; z-index: 1005; width: 100%}

@media screen and (max-width: 959px){
    header .main-menu,
    header .top-menu {display: none}
    header .mobile-menu-icon {display: block; position: absolute; top: 30px; right: 20px; width: 36px; height: 36px; cursor: pointer}
    header .mobile-menu-icon span {display: block; width: 36px; height: 5px; margin-top: 15px; border-radius: 5px; background: rgb(245, 219, 72); text-indent: -999em; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
    header .mobile-menu-icon span:before,
    header .mobile-menu-icon span:after {content: ''; position: absolute; top: 0; display: block; width: 36px; height: 5px; margin-top: 15px; border-radius: 5px; background: #f5db48; text-indent: -999em; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
    header .mobile-menu-icon span:before {-webkit-transform: translateY(-10px) rotate(0deg);-ms-transform: translateY(-10px) rotate(0deg);transform: translateY(-10px) rotate(0deg)}
    header .mobile-menu-icon span:after {-webkit-transform: translateY(10px) rotate(0deg);-ms-transform: translateY(10px) rotate(0deg);transform: translateY(10px) rotate(0deg)}
    header .mobile-menu-icon.open span {background: rgb(255, 255, 255)}
    header .mobile-menu-icon.open span:before {-webkit-transform: translateY(0px) rotate(45deg);-ms-transform: translateY(0px) rotate(45deg);transform: translateY(0px) rotate(45deg)}
    header .mobile-menu-icon.open span:after {-webkit-transform: translateY(0px) rotate(-45deg);-ms-transform: translateY(0px) rotate(-45deg);transform: translateY(0px) rotate(-45deg)}
    header .mobile-menu > ul > li > a {display: block; overflow: hidden; width: 100%; height: 52px; padding: 15px 20%; border-bottom: 1px solid #ededed; text-align: center; text-transform: uppercase}
    header .mobile-menu > ul > li [class*="icon-"]:before,
    header .mobile-menu > ul > li [class*="icon-"]:after {font-size: 16px; margin-top: 0 !important; margin-bottom: 0 !important}
    header .mobile-menu > ul > li:nth-last-child(2) > a {border-bottom: 0}
    header .mobile-menu > ul > li > a:not(.dark):not([data-hover]) {background: #fff; text-shadow: 0 0px 0 #222, 0 40px 0 #fff; color: transparent; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
    header .mobile-menu > ul > li > a:not(.dark):not([data-hover]):hover {background: #e6c918; text-shadow: 0 -40px 0 #222, 0 0 0 #fff; color: transparent}
    header .mobile-menu > ul > li > a + * > li a {display: block; width: 100%; height: 52px; padding: 15px 20%; border-bottom: 1px solid #fff; background: #ededed; text-align: center; text-transform: uppercase; -webkit-transition: color 0.25s ease; transition: color 0.25s ease}
    header .mobile-menu > ul > li > a + * > li a:hover {color: #ac9614}
    header .mobile-menu > ul > li > a.button.dark {padding: 20px 20%; border-bottom-color: #353535}
    header .mobile-menu > ul > li > a.button.dark:after {color: #fff !important; font-size: 16px; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
    header .mobile-menu > ul > li > a.button.dark:hover {border-bottom-color: #dedede}
    header .mobile-menu > ul > li > a.button.dark:hover:after {color: #696969 !important}
    header .mobile-menu > ul > li > a.button.dark + * .notice-count {margin-left: 10px}
    header .mobile-menu > ul > li > a.button.dark + * > li a {border-bottom-color: #2C2C2C; background: #353535}
    header .mobile-menu > ul > li > a.button.dark + * > li a:hover {color: #F5DD50}
    header .mobile-menu > ul > li > .button[data-hover] {padding: 18px 20%; font-size: 18px; border-bottom-color: #E6C918}
    header .mobile-menu > ul > li > .button[data-hover]:after {top: 55px}
    header .mobile-menu > ul > li > .button[data-hover]:hover {border-bottom-color: #212121}
    header .mobile-menu > ul > li > .button[data-hover]:hover:after {top: 18px}
    header .mobile-menu > ul > li.submenu > a:not([data-hover]):after {content: '\e610'; display: inline-block; position: absolute; right: 20%; color: #212121; font-family: 'Icons'; text-shadow: none; -webkit-transition: color 0.25s ease; transition: color 0.25s ease}
    header .mobile-menu > ul > li.submenu > a:not([data-hover]):hover:after {color: #fff}
    header .mobile-menu > ul > li.submenu > ul,
    header .mobile-menu > ul > li.submenu > div,
    header .mobile-menu > ul > li > a.icon-search {display: none}
    header .mobile-menu > ul > li > .cart {background: #353535; padding: 20px 20%;}
    header .mobile-menu > ul > li a.cart-price:before {color: transparent}
    header .mobile-menu > ul > li .icon-play,
    header .mobile-menu > ul > li .icon-lock {position: relative}
    header .mobile-menu > ul > li .icon-play:before,
    header .mobile-menu > ul > li .icon-lock:before {position: absolute; top: -3px; left: -26px}
    header .mobile-menu > ul > li > .search-form {display: block !important; height:52px; padding: 0; background: #ededed}
    header .mobile-menu > ul > li > .search-form input[type="search"] {width: -webkit-calc(100% - 60px);width: calc(100% - 60px); height: 52px; border: 0; border-radius: 0; -webkit-border-radius: 0; -webkit-appearance: none; background: #ededed}
    header .mobile-menu > ul > li > .search-form button {float: right; width: 52px; height: 52px}
    header .mobile-menu > ul > li > .search-form button:before {color: #222; font-size: 24px}
    .android header .mobile-menu > ul > li > .search-form input[type="search"] {width: 80%; line-height: 52px}
    .android header .mobile-menu > ul > li > .search-form input[type="search"]::-webkit-input-placeholder {color: #ededed}
}

@media screen and (max-width: 719px){
    .breadcrumbs {display: none}
    .page-header {border-bottom: 2px solid #dad9da}
}

.follow-us {width: 100%; height: auto; padding: 33px; border-top: 1px solid #dad9da}
.follow-us > div > * {margin: 0 10px; line-height: 10px; vertical-align: top}
.follow-us p {display: inline-block; color: #2c2c2c; font-size: 18px; line-height: 20px; font-family: 'Montserrat', 'Lato', sans-serif; text-align: center; letter-spacing: 2px}

.page-footer {position: relative; width: 100%; min-height: 280px; background: #353535}
.page-footer a {color: #e6c918;
    -webkit-transition: color 0.25s ease;
            transition: color 0.25s ease}
.page-footer a:hover {text-decoration: underline}

.page-footer p {color: #b5b4b5; font-size: 13px; line-height: 22px}

.page-footer ul {padding: 30px 0}

.page-footer .footer-menu {width: 100%; border-bottom: 1px solid #5e5e5e}
.page-footer .footer-menu a {display: inline-block; margin: 12px 18px; color: #b5b4b5; font-size: 14px; line-height: 14px; font-weight: 700; text-transform: uppercase}
.page-footer .footer-menu a:hover {color: #e6c918; text-decoration: none}

.page-footer .logo {width: 155px; line-height: 82px}
.page-footer .logo img {width: 155px; height: 38px}
.ie .page-footer .logo img,
.android .page-footer .logo img {max-width: 155px; max-height: 38px}

.page-footer .credits {padding: 15px 0}

@media only screen and (min-device-width: 480px), (min-device-height: 719px) {
    @-ms-viewport {width: 480;}
}

fieldset {position: relative; border: none}
fieldset legend {position: absolute; left: -140px; width: 120px}
fieldset legend:after {content: ':'}

figure img {display: block; max-width: 100%; height: auto}
figure.left {float: left; margin-right: 25px}

main {padding: 0}

a.link {position: relative; display: inline-block; color: #ccb423; font-weight: 700; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; word-break: break-word}
a.link.dark {color: #ac9614}
a.link:hover {color: #212121}

hr {border: 0; border-bottom: 1px solid #c1bfc0}

.text-right {text-align: right}

.page-column {width: 100%; max-width: 1320px; margin: auto; padding: 0 20px}

.page-section {}
*+.page-section {margin-top: 70px}

.loading-overlay {display: none; position: fixed; top: 0; left: 0; z-index: 1020; width: 100%; height: 100%; background-color: rgba(0,0,0,.7)}
.loading-overlay .content {position: absolute; top: 50%; left: 0; width: 100%; margin: -100px 0 0 0; text-align: center}
.loading-overlay .content figure {display: inline-block; width: 200px; height: 200px; background-color: #fff; border: 1px solid #c1bfc0; text-align: center}
.loading-overlay .content figure .loading-logo {position: relative}
.loading-overlay .content figure .loading-logo:before {content: ''; position: absolute; bottom: 34px; left: 54px; display: inline-block; width: 15px; height: 15px; background-color: #b7b6b7; -webkit-animation: spin 3s infinite linear; animation: spin 3s infinite linear}
.loading-overlay .content figure .loading-logo img {display: inline-block; margin: 30px 0; border-radius: 100%}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes pulse {
    from { background-color: #b7b6b7; box-shadow: 0 0 9px #b7b6b7}
    50% { background-color: #f8de77; box-shadow: 0 0 50px #f8de77}
    to { background-color: #b7b6b7; box-shadow: 0 0 9px #b7b6b7}
}

@keyframes pulse {
    from { background-color: #b7b6b7; box-shadow: 0 0 9px #b7b6b7}
    50% { background-color: #f8de77; box-shadow: 0 0 50px #f8de77}
    to { background-color: #b7b6b7; box-shadow: 0 0 9px #b7b6b7}
}

header.multiline {margin: 43px 0 25px}
header.multiline h1 {line-height: 1em}
header.multiline span,
header.multiline strong {color: #e6c918}
header.multiline h1 small {font-size: 28px; font-weight: 300}
.viewport-480 header.multiline h1 small,
.viewport-320 header.multiline h1 small {display: block; padding: 10px 0 20px}

.viewport-480 .mobile-inline,
.viewport-320 .mobile-inline {display: inline-block; width: auto}

blockquote {position: relative; padding-left: 40px; font-style: italic}
blockquote:before {content: '“'; position: absolute; top: 0; left: -13px; color: #928f8f; font-size: 72px; font-weight: 700; line-height: 1; -ms-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg)}

ul.list {background: #dad9da}
ul.list li {min-height: 62px; padding: 18px 15px; border-bottom: 1px solid #c1bfc0; font-weight: 700}
ul.list li:last-child {border-bottom: 0}
ul.list li span {display: block; float: left; height: 25px; margin-right: 5px; font-weight: 400}
ul.list li p {color: #212121; font-weight: 400}
ul.list .rating-vote {margin: -4px 0 -2px;}

table {width: 100%; border-spacing: 10px; color: #212121; font-size: 13px}
table tr {background: #f0f0f0}
table tr>* {padding: 15px 30px; text-align: left}
table tr:nth-child(2n+1) {background: #dad9da}
table tr+tr>* {border-top: 1px solid #fff}
table tr>* {border-left: 1px solid #fff}
table tr>*:first-child {border-left: none}
table th,
table.big-text td {font-family: 'Montserrat', 'Lato', 'Arial', 'Helvetica', sans-serif; font-size: 18px; text-transform: uppercase}
table.collapse {}
table.collapse tr>*+* {border-left: 0}
table .title {width: 55%}
table .cart {width: 245px}
table .nested-table {padding: 0 !important}
table .nested-table td {border-left: none}
table .nested-table tr+tr {background-color: #dad9da}
table .nested-table tr+tr td {padding: 20px; border-top-color: #c1bfc0; font-size: 14px; font-family: 'Lato'; text-transform: none; text-align: center}
table.no-padding tr > * {padding: 0}
.viewport-320 table tr>* {padding: 5px 10px; word-break: break-word}
.viewport-320 table.no-padding tr>* {padding: 0}

.black {color: #212121}
.white {color: #fff}
.yellow {color: #e6c918}
.dark-yellow {color: #afa043}
.background-grey {background: #dad9da}
.background-grey-light {background: #f1f1f1}
.background-black {background: #353535}
/* DO NOT CHANGE GRAYSCALE FILTER ORDER OR JAVASCRIPT GRAYSCALE WONT WORK */
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%); -webkit-filter: gray; filter: gray; filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale"); -webkit-filter: grayscale(100%)}
.error.e404 {max-height: 804px; padding: 12% 0; background: url(../frontend/images/404_background_1920x804.jpg) 0 0 no-repeat; background-size: cover}
.error .content {max-width: 600px; margin: 0 auto; padding: 0 20px;text-align: center}
.error .content .error-code {font-family: 'Montserrat', 'Lato', 'Arial', 'Helvetica', sans-serif; font-size: 72px}
.error .content h1 {position: relative; margin-bottom: 30px; color: #fff}
.error .content p {color: #fff}
.error.e500 {position: absolute; width: 100%; height: 100%; padding: 15% 0 ;background: url(../frontend/images/500_background_1920x1080.jpg) 0 0 no-repeat; background-size: cover; background-position: center}
.error.maintenance {position: absolute; width: 100%; height: 100%; padding: 19% 0 ;background: url(../frontend/images/maintenance_background_1920x1080.jpg) 0 0 no-repeat; background-size: cover; background-position: center}
.error.update {position: absolute; width: 100%; height: 100%; padding: 19% 0 ;background: url(../frontend/images/update_background_1920x1080.jpg) 0 0 no-repeat; background-size: cover; background-position: center}
.error.update .content {max-width: 1280px; text-align: center}
.error.update .content p {display: inline-block; max-width: 800px; font-family: 'Montserrat'; font-size: 18px; text-transform: uppercase}
.error.update .content p+p {margin-top: 30px}
.error.update .content p a {color: #e6c918}
.error.update .content p a:hover {text-decoration: underline}
.error.update .content h1:before,
.error.update .content h1:after {display: none}
.error h1:before {content: ''; position: absolute; bottom: -10px; left: 5px; right: 0; height: 4px; background: #f4dc48}
.error h1:after {content: ''; position: absolute; bottom: -15px; left: 0; height: 4px; width: 4px; background: #b5b4b5}
.viewport-320 .error h1,
.viewport-480 .error h1 {font-size: 25px}
.section-header {position: relative; padding-left: 100px; border-bottom: 1px solid #ccb423}
.viewport-320 .section-header {padding-left: 90px}
.section-header:before {position: absolute; top: -12px; left: 0; z-index: 1; width: 76px; height: 76px; background: #ccb423; color: #fff; font-size: 28px; text-align: center; line-height: 76px}
.section-header h2 {display: table-cell; vertical-align: middle; height: 63px}
.section-header .button.big {padding: 23px 36px}

.border-top {margin-top: 20px; padding-top: 20px; border-top: 1px solid #dad9da}

.scrollable {overflow-y: scroll !important; overflow-x: hidden}
.scrollbar-wrapper {position: relative; display: block}
.scrollbar-clip {overflow: hidden; display: block}
.scrollbar-offset {display: block}

.scrollbar {position: absolute; right: 5px; top: 5px; bottom: 5px; width: 5px; background: rgba(33, 33, 33, 0.05)}
.scrollbar .handle {position: absolute; width: 100%; background: #212121}
.scrollbar.hidden {display: none}

.ie .scrollbar-offset {margin: 0 !important}
.ie .textarea-wrapper {padding: 0}
.ie .textarea-wrapper textarea {overflow-y: auto !important; padding: 10px}
.ie .scrollbar {display: none}

[class*="-label"] {display: inline-block; padding: 0 10px; font-family: 'Montserrat', 'Lato', 'Arial', 'Helvetica', sans-serif; font-size: 15px; font-weight: 700; text-transform: uppercase; line-height: 30px; vertical-align: middle}
.sale-label {background: #6ecce7; color: #fff}
.demo-label {background: #ffffff; color: #212121}
.free-label {color:#ffffff; box-shadow: inset 0 0 0 2px #928f8f}
.viewport-480 .free-label,
.viewport-320 .free-label {color: #212121; font-size: 12px}

.rating {display: inline-block; padding: 0 10px 0 0; background: #f1f1f1; color: #b5b4b5; font-family: 'Montserrat', 'Lato', 'Arial', 'Helvetica', sans-serif; font-size: 12px; line-height: 40px}
.rating .button {margin-right: 10px; vertical-align: top}
.rating b {color: #212121; font-size: 15px; font-weight: 700; line-height: 1}
.viewport-320 .rating b,
.viewport-480 .rating b {font-size: 13px}
.viewport-480 .rating,
.viewport-320 .rating {font-size: 10px}

.notification {position: relative; display: inline-block; width: 100%; margin: 10px 0; padding: 15px 45px 15px}
.notification.hidden {display: none}
.notification:before {content: ''; position: absolute; top: 19px; left: 15px; display: inline-block; width: 20px; font-family: 'Icons'; line-height: 1; text-align: center}
.notification.error {border: 1px solid #e1342a; color: #e1342a}
.notification.info {border: 1px solid #64adca; color: #64adca}
.notification.fos_user_success,
.notification.success {border: 1px solid #7cc033; color: #7cc033}
.notification.error:before {content: "\e63b"}
.notification.info:before {content: "\e63c"}
.notification.success:before {content: "\e614"; top: 22px; font-size: 12px}

.form-validation-error {display: block}
.form-validation-error p {position: relative; display: inline-block; margin: 10px 0; padding: 15px 45px 15px; border: 1px solid #e1342a; color: #e1342a}
.form-validation-error p:before {content: "\e63b"; position: absolute; top: 19px; left: 15px; display: inline-block; width: 20px; font-family: 'Icons'; line-height: 1; text-align: center}
.form-validation-error+p input {border-color: red}
.simple-form-validation-error p {position: relative; display: inline-block; color: #e1342a}
.simple-form-validation-error+p input {border-color: red}

.price {display: inline-block; font-size: 26px; vertical-align: middle; text-align: center; color:#fff}
.price.old {font-size: 16px; text-decoration: line-through}
.viewport-480 .price,
.viewport-320 .price {color: #212121; font-size: 18px}

.viewport-320 .hitlist .price,
.viewport-320 .hitlist [class*='-label'] {margin: 10px 0}

.input-loading {position: relative}
.input-loading:after {content: "\e61f"; display: none; position: absolute; top: 10%; right: 20px; font-family: 'icons'; font-size: 30px}
.input-loading.active:after {display: block; -webkit-animation: spin 3s linear 0s infinite; animation: spin 3s linear 0s infinite; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%}

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

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

.count {color: #b29c14; font-size: 12px; text-shadow: none}
.count:before {content: '('}
.count:after {content: ')'}

.notice-count {padding: 3px 7px; border-radius: 2px; background: #ff0000; color: #fff; font-size: 12px; font-weight: 700; text-shadow: none}
.button .notice-count {margin-left: 7px}

.votes {display: inline-block; width: 100px; color: #212121; font-size: 18px; text-align: center}
.votes span {display: block; color: #ac9614; font-size: 24px; line-height: 24px}
.votes + p {display: inline-block}
.votes + p .button {vertical-align: baseline}

.share {display: inline-block; width: 100%; margin: 70px 0; background-color: #f0f0f0}
.share p {display: inline-block; padding: 15px 20px; color: #2c2c2c; font-family: 'Montserrat'; font-size: 18px}
.share button {margin-left: 25px}
.viewport-320 .share p > *,
.viewport-480 .share p > * {display: block}
.viewport-320 .share button,
.viewport-480 .share button {margin-left: 0; margin-right: 10px}

.box.featured {background: #f5e161}
.box.featured.dark {background: #353030}
.box.related {background: #dad9da}
.box.related .media-object {background: #dad9da !important}

.box.hit-list {overflow: hidden; display: block; margin-bottom: 1px; padding: 15px 30px; background-color: #303030}
.box.hit-list h3 {font-size: 18px; line-height: 24px}
.box.hit-list p {overflow: hidden; white-space: nowrap}

.box.review {padding: 25px; background: #D9D9D9}
.box.review .yes,
.box.review .no {padding: 15px 20px; border: 0; background: #e6c918; text-shadow: 0 0 0 #212121, 0 40px 0 #fff}
.box.review .yes:hover:not([disabled]):not(.disabled),
.box.review .yes.voted {background: #a3c02d; text-shadow: 0 -40px 0 #212121, 0 0 0 #fff}
.box.review .no:hover:not([disabled]):not(.disabled),
.box.review .no.voted {background: #ee3921; text-shadow: 0 -40px 0 #212121, 0 0 0 #fff}
.box.review .yes.disabled,
.box.review .yes[disabled],
.box.review .no.disabled,
.box.review .no[disabled] {background: #e5d98a; color: #000}
.box.review .yes.disabled.voted,
.box.review .yes[disabled].voted,
.box.review .no.disabled.voted,
.box.review .no[disabled].voted {color: #fff}
.box.review .yes[disabled].voted,
.box.review .yes.disabled.voted {background: #a3c02d}
.box.review .no[disabled].voted,
.box.review .no.disabled.voted {background: #ee3921}
.box.review .yes.disabled:before,
.box.review .yes[disabled]:before,
.box.review .no.disabled:before,
.box.review .no[disabled]:before {color: #fff}

.accordion>.clip {position: relative; -webkit-transition: height 0.25s ease; transition: height 0.25s ease}
.accordion>.clip.closed {height: 0 !important}

.accordion.menu.profile.big>.clip {min-height: 125px !important}
.accordion.menu.profile .accordion-content {padding-top: 0px}

.accordion-content {position: absolute; bottom: 0; width: 100%; padding-top: 10px}
.accordion.menu header {display: none}
.accordion.menu header.show {display: block}

.tabs {position: relative; overflow: hidden; height: 64px; background: #dad9da; -webkit-transition: height 0.25s ease; transition: height 0.25s ease}
.tabs ul {font-size: 0}
.tabs ul>li {display: inline-block; border-right: 1px solid #c1bfc0}
.tabs.mobile ul>li {border-right: none}
.tabs ul>li .button {padding: 25px 31px; text-shadow: 0 0 0 #212121, 0 64px 0 #fff; font-size: 14px}
.tabs ul>li .button:after {content: ''; display: block; position: relative; top: 17px; left: calc(50% - 7px); z-index: 1; width: 0; height: 0; border-style: solid; border-width: 7px 7px 0 7px; border-color: #DAD9DA transparent transparent transparent; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
.tabs ul>li.active>.button {background: #928f8f; text-shadow: 0 -64px 0 #928f8f, 0 0 0 #fff}
.tabs ul>li.active>.button:after,
.tabs ul>li .button:hover:after {top: 25px; border-color: #928f8f transparent transparent transparent}
.tabs.filters ul>li:last-child {border: none}
.tabs.filters ul>li:last-child .button {padding: 0 !important; margin-left: 10px; margin-top: -7px; color: #000; text-shadow: none}
.tabs.filters ul>li:last-child .button:before {float: none; padding-right: 10px; margin-left: 0; color: #a50000; vertical-align: top}
.tabs.filters ul>li:last-child .button:hover {background: #dad9da; text-shadow: none; text-decoration: underline}
.tabs.filters ul>li:last-child .button:after {display: none}
.tabs.filters .clear-filter {visibility: hidden}
.tabs ul>li>ul {display: none; position: absolute; left: 0; top: 64px; width: 1280px; background: #efefef}
.tabs ul>li.active>ul {display: block}
.tabs ul>li>ul>li {display: inline-block; padding: 0 25px; border: 0; font-size: 16px; font-weight: 700; line-height: 54px}
.tabs ul>li>ul>li a {-webkit-transition: color 0.25s ease;transition: color 0.25s ease}
.tabs ul>li>ul>li.active,
.tabs ul>li>ul>li a:hover {color: #ccb423; text-decoration: none}
.tabs ul>li>ul>li.active a:before {position: absolute; content: '\e614'; font-family: 'Icons'; margin-left: -22px; font-size: 12px; font-style: 400}
.tabs .fake-select {float: right; max-width: 394px; height: 54px; margin-top: -6px; margin-right: 5px; border: 1px solid #fff; line-height: 52px}
.tabs .fake-select:before {line-height: 52px !important}
.viewport-320 .tabs ul>li:last-child .button,
.viewport-480 .tabs ul>li:last-child .button,
.viewport-720 .tabs ul>li:last-child .button {display: none}
.viewport-960 .tabs ul>li .button {padding: 25px 20px}
.viewport-960 .tabs ul>li>ul>li {padding: 0 20px}
.android .tabs ul>li .button:after {left: 49%}

.mobile-filters {display: none; width: 100%; background: #212121; color: #fff; font-size: 14px; text-align: center; text-transform: uppercase; cursor: pointer}
.mobile-filters p {position: relative; display: block; width: 100%; padding: 15px 31px}
.mobile-filters p:after {content: ''; display: block; position: absolute; top: 40px; left: 50%; z-index: 11; width: 0; height: 0; margin-left: -7px; border-style: solid; border-width: 7px 7px 0 7px; border-color: #212121 transparent transparent transparent; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
.viewport-320 .mobile-filters p:before,
.viewport-480 .mobile-filters p:before,
.viewport-720 .mobile-filters p:before {content: ""; display: block; position: absolute; top: 15px; right: 28px; font-family: "Icons"}
.mobile-filters.open p:after {top: 49px}
.mobile-filters a {display: inline-block; padding-right: 25px; color: #a50000}
.mobile-filters p span {display: inline-block; padding-right: 35px}
.mobile.tabs {overflow: visible; height: auto}
.mobile.tabs ul,
.mobile.tabs ul li,
.mobile.tabs ul li a {display: block; width: 100%; text-align: center}
.mobile.tabs ul>li {position: relative}
.mobile.tabs ul>li .button:after {position: absolute; top: 57px}
.mobile.tabs ul>li.active>.button:after {top: 64px}
.mobile.tabs ul li ul {position: relative; top: auto; left: auto}
.mobile.tabs ul li ul li {overflow: hidden; height: 0px; border-bottom: 0px solid #fff; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
.mobile.tabs ul li ul li a:before {display: none}
.mobile.tabs ul li.active ul li {height: 65px; border-bottom-width: 1px}
.mobile.tabs .fake-select {float: none; margin: 5px auto}
.viewport-720 .mobile-filters ~ div,
.viewport-720 .mobile-filters ~ ul,
.viewport-480 .mobile-filters ~ div,
.viewport-480 .mobile-filters ~ ul,
.viewport-320 .mobile-filters ~ div,
.viewport-320 .mobile-filters ~ ul {display: none}
.viewport-720 .mobile-filters ~ ul,
.viewport-480 .mobile-filters ~ ul,
.viewport-320 .mobile-filters ~ ul {position: absolute; top: 49px; z-index: 10}
.viewport-720 .with-sort .mobile-filters ~ ul,
.viewport-480 .with-sort .mobile-filters ~ ul,
.viewport-320 .with-sort .mobile-filters ~ ul {padding-top: 63px}
.viewport-720 .mobile-filters ~ div,
.viewport-480 .mobile-filters ~ div,
.viewport-320 .mobile-filters ~ div {position: absolute; top: 49px; z-index: 10; background: #DAD9DA}
.viewport-720 .mobile-filters,
.viewport-480 .mobile-filters,
.viewport-320 .mobile-filters {display: block}
.android .mobile-filters a:after {left: 49%}

/*.viewport-320 .search-news .media-object {padding: 20px 20px 20px 120px}
.viewport-320 .search-news .media-object figure {width: 100px; margin-left: -120px}
.viewport-320 .search-news .media-object h3 {font-size: 14px}
.viewport-320 .search-news .media-object:not(.game):not(.hitlist) footer {left: 115px}*/

.pagination {margin: 35px 0 45px}
.pagination a.button {width: 48px; height: 48px; padding: 18px 10px; font-size: 15px; text-align: center}
.pagination a.button:before {line-height: 14px}
.viewport-320 .pagination {text-align: center}
.ios .pagination a.button:hover {background: #dad9da; text-shadow: 0 0 0 #928f8f, 0 40px 0 #fff}

.rating-vote {display: inline-block}
.rating-vote p {display: inline-block; height: 30px; margin-left: -2px; font-size: 24px; vertical-align: top}
.rating-vote p span {overflow: hidden; position: relative; display: inline-block; width: 30px; height: 30px; background: none; border: 0; border-radius: 0; vertical-align: top; color: #212121; text-indent: -99px; white-space: nowrap; cursor: pointer;}
.rating-vote p span:before {content: '\e601'; display: block; width: 30px; height: 30px; font-family: 'Icons'; line-height: 28px; text-indent: 0}
.rating-vote input[type="radio"]:checked+span:before {content: '\e615'; background: none}
.rating-vote .active span,
.rating-vote .hover span {color: #ccb423}
.rating-vote .active span:before {content: '\e615'}
.rating-vote:hover .active:not(.hover) span {color: #212121}

.rating-vote.review {width: auto; max-height: 30px; padding: 8px; background: #ccb423; font-family: 'ZeroSpace'; font-size: 14px; line-height: 14px}
.rating-vote.review > span {display: inline-block; width: 16px; margin: 0 2px; color: #fff}
.rating-vote.review > span:before {float: left}
.rating-vote.review input[type="radio"]+span {width: 18px; height: 18px; margin: 0; color: #fff}
.rating-vote.review input[type="radio"]+span:before {width: 18px; height: 18px; line-height: 14px}
.rating-vote.review:not(.edit) input[type="radio"]+span,
.rating-vote.review .active input[type="radio"]+span,
.rating-vote.review .hover input[type="radio"]+span,
.rating-vote.review:hover .active:not(.hover) input[type="radio"]+span {color: #fff}
.rating-vote.review .active input[type="radio"]+span:before {content: '\e601'}

.user-profile {overflow: hidden; height: auto; padding: 20px; background-color: #dad9da}
.user-profile figure {position: absolute; float: left}
.user-profile h3 {margin-bottom: 30px}
.user-profile h4 {margin-bottom: 10px; line-height: 25px}
.user-profile a[href^="mailto"] {display: inline-block; min-height: 38px; color: #ccb423; font-family: 'Lato'; font-weight: 700}
.user-profile a[href^="mailto"]:hover {text-decoration: underline}
.user-profile .user-information {min-height: 183px; margin-left: 184px}
.user-profile .wysiwyg {color: #212121}
.viewport-320 .user-profile {padding: 10px}
.viewport-720 .user-profile h3,
.viewport-480 .user-profile h3,
.viewport-320 .user-profile h3 {margin-bottom: 10px}
/*.viewport-320 .user-profile figure {position: static; width: 100%}*/
.viewport-320 .user-profile figure img {width: 60px}
.viewport-320 .user-profile .user-information {min-height: 0; margin: 0 0 10px 70px; padding-right: 80px !important}

.tiles {width: 100%}
.tiles li {border-top: 1px solid #fff; border-left: 1px solid #fff}
.tiles li a {position: relative; display: inline-block; width: 100%; height: 125px; padding: 70px 5px 5px; background-color: #e6c918; color: #000; font-family: 'Montserrat'; font-weight: 700; font-size: 12px; text-transform: uppercase}
.tiles li a:hover,
.tiles li a.active {background-color: #dad9da}
.tiles li a.disabled {background-color: #dacb6f; color: #afa043; cursor: not-allowed}
.tiles li a:before {position: absolute; display: inline-block; width: 100%; height: 100%; top: 0; left: 0; color: #fff; line-height: 85px; font-size: 16px; text-align: center}
.tiles li a.disabled:before {color: #afa043}
.tiles li a.icon-wishlist:before,
.tiles li a.icon-achievements:before,
.tiles li a.icon-forums:before {font-size: 18px}
.tiles li a span {display: inline-block; width: 100%; text-align: center}
.tiles li a span.number {color: #b29c14}
.tiles li a span.notifications {position: absolute; top: 15%; left: 52%; width: auto; min-width: 22px; height: 22px; padding: 2px; background-color: #ff0000; border-radius: 3px; color: #fff}
.viewport-320 .tiles li:nth-child(odd),
.viewport-480 .tiles li:nth-child(odd) {border-left: none}

.user-catalog figure {position: relative}
.user-catalog figure span {position: relative; z-index: 2; overflow: hidden; display: block; margin: 10px 0 5px; color: #212121; font-family: 'Montserrat', 'Lato'; font-size: 15px; text-transform: uppercase; white-space: nowrap}
.user-catalog figure img {width: 100%}
.user-catalog figure>a {position: relative; display: block; z-index: 1}
.user-catalog figure figcaption {overflow: hidden; height: 1.5em}
.user-catalog figure>a:before {position: absolute; top: 0; left: 0; right: 0; bottom: 32px; z-index: 2; width: 50px; height: 50px; margin: auto; color: transparent; font-size: 100px; text-align: center; text-shadow: 0 0 50px rgba(0, 0, 0, 0); line-height: 50px; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
.user-catalog figure>a:after {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: rgba(255, 255, 255, 0.85); opacity: 0; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease}
.user-catalog figure>a:hover:before {font-size: 50px; text-shadow: 0 0 0 #000}
.user-catalog figure>a:hover:after {opacity: 1}
.user-catalog .request {font-size: 15px}
.user-catalog .request a {display: block; color: #ccb423; font-family: 'Lato'; font-weight: 700;-webkit-transition: color 0.25s ease;transition: color 0.25s ease}
.user-catalog .request a:before {position: relative; top: -1px; margin-right: 10px; color: #212121; font-size: 10px; -webkit-transition: color 0.25s ease; transition: color 0.25s ease}
.user-catalog .request.confirmation a:before {margin: 0 5px; font-size: 12px}
.user-catalog .request.confirmation a.icon-checkmark:before {color: #0e8a11}
.user-catalog .request.confirmation a.icon-topic-delete:before {color: #a50000}
.user-catalog .request.message a:before {display: inline-block; min-width: 14px;}
.user-catalog .request a:hover {color: #212121}
.viewport-720 .user-catalog .request {font-size: 13px}
.viewport-480 .user-catalog .request,
.viewport-320 .user-catalog .request {font-size: 12px}

.vote {color: #212121; text-align: center}
.vote strong {display: block; font-size: 24px; color: #ccb423; line-height: 20px;}
.viewport-480 .vote + p,
.viewport-320 .vote + p {margin-top: 20px}

.home-background {width: 100%; margin: -50px 0 0; padding: 50px 0 0; background: #dedede; border-top: 3px solid #fff}
.home-label {position: relative; width: 320px; height: 62px; margin: 60px 0; padding-left: 45px; color: #212121; border: 2px solid #b5b4b5; font-size: 18px; line-height: 62px; letter-spacing: 1px; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
.home-label:before {float: right; line-height: 60px; margin-right: 20px; -webkit-transition: color 0.25s ease; transition: color 0.25s ease}
.home-label:after {content: ''; display: block; position: absolute; top: -10px; left: -32px; width: 76px; height: 82px; background: url('../frontend/images/button_home.svg') top left no-repeat; background-size: 100%;}
.home-label:hover {border-color: #212121; color: #b5b4b5}
.home-label:hover:before {color: #f4dc48}
.games {position: relative; height: auto}
.viewport-320 .home-label {width:250px; font-size: 14px}
.viewport-320 .home-label:before {margin-right: 0}
.viewport-320 .home-label:after {left: -17px}

.home-slider .media-slider {height: 450px; touch-action: pan-y; -ms-touch-action: pan-y;}
.home-slider .media-slider ul,
.home-slider .media-slider ul li,
.home-slider .media-slider ul li>div{height: 100%}

.home-slider {position: relative}
.home-slider .box {position: absolute; right: 0; top: 0; width: 425px}
.home-slider .box.wide-offer {display: none}
.home-slider .box header {overflow: hidden}
.home-slider .box header:before {top: -5px}
.home-slider .slider-wrap {display: inline-block; width: 100%; padding-right: 440px}
.home-slider .box.small-offer .media-object {padding-bottom: 0 !important}
.home-slider .box.small-offer .slider a span {font-size: 36px; line-height: 36px}
.home-slider .slider button:before {margin-top: 1px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}

/*.home-slider .media-object figure {height: 100%}*/
.home-slider .box:not(.wide-offer) .media-object .clip {background-color: rgba(245, 225, 97, 0.8) !important}
.home-slider .box:not(.wide-offer) .media-object .clip h3 {color: #212121 !important}
.home-slider .media-slider>.button {width: 30px; background-color: transparent}
.home-slider .media-slider>.button::before {-webkit-transition: all .3s ease;transition: all .3s ease}
.home-slider .media-slider>.button:hover:before {color: #fff}
.home-slider .media-slider>.button.slider-prev {right: 40px}
.home-slider .media-slider .media-object.game figure img {height: 387px}
.home-slider .section-header {border-bottom: none}
@media screen and (max-width: 959px) {
    .home-slider .box.wide-offer,
    .home-slider .box {position: relative; top: initial; right: initial; display: inline-block; width: 100%}
    .home-slider .slider-wrap {padding-right: 0}
    .home-slider .box.small-offer {display: none}
    .home-slider .box.wide-offer .media-slider {height: auto}
}
.viewport-320 .home-slider .media-object.game figure>a:before {bottom: 0 !important}
.viewport-320 .home-slider .media-object.game .rating {bottom: 129px}

.home-slider .slider figure img:hover {opacity: 0.7;cursor: pointer;}

.slider,
.slider .slick-slide {position: relative; overflow: hidden; height: 450px}
.slider.small,
.slider.small .slick-slide {position: relative; overflow: hidden; height: 300px}
.slider.small a {padding: 80px 60px 0}
.slider.small a span {font-size: 24px; line-height: 24px}
.slick-slider {overflow: hidden; width: 100%}
.slick-slide {display: inline-block}
.slick-slide div {position: relative}
.slider figure {position: relative; width: 100%; height: 100%}
.slider figure img {position: absolute; left: 50%; top: 0; display: inline-block; width: auto; height: 100%; max-width: none; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%)}
.slider.small figure img {/*left: -300px;*/}
.slider .slider-subtitle {background: rgba(0,0,0, 0.6);  position: absolute; bottom: 0px; left: 0; z-index: 1; width: 100%; padding: 0px 0px 0px 10px; color: #fff; font-size: 20px; text-align: left; font-size: 20px; line-height: 30px;}
.slider .slider-title {background: rgba(0,0,0, 0.6);  position: absolute; top: 0px; left: 0; z-index: 1; width: 100%; padding: 0px 0px 0px 10px; color: #fff; font-size: 20px; text-align: left; font-size: 20px; line-height: 30px; }



.slider a button.hide-text.big {display: block; margin-top: 30px; width: 76px; height: 76px; font-size: 30px}
.slider .slick-prev,
.slider .slick-next {position: absolute; top: calc(50% - 20px); left: 20px; width: 70px; height: 41px; background: none; border: 0; color: transparent; text-indent: -999em; -webkit-transition: margin 1s ease; transition: margin 1s ease}
.slider.small .slick-prev {left: 10px}
.slider.small .slick-next {left: auto; right: 10px}
.slider.small .slick-prev:before,
.slider.small .slick-next:before {font-size: 24px}
.slider .slick-prev:hover:before {-webkit-animation: slider-arrow-left 1s infinite ease;animation: slider-arrow-left 1s infinite ease}
.slider .slick-prev:before,
.slider .slick-next:before {content: '\e611'; display: block; color: #fff; font-family: 'Icons'; font-size: 38px; text-indent: 0}
.slider .slick-next {left: auto; right: 20px}
.slider .slick-next:hover:before {-webkit-animation: slider-arrow-right 1s infinite ease;animation: slider-arrow-right 1s infinite ease}
.slider .slick-next:before {content: '\e612'}
.slider.old,
.slider.old .slick-slide {position: relative; overflow: hidden; height: 615px}
.slider.old figure img  {left: -960px}

.game-slider {position: relative; overflow: hidden; z-index: 1; height: 330px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y}
.game-slider button {display: none}
.game-slider figure {position: relative; z-index: 5; display: block; margin: 0 auto; width: auto; height: 320px; background-color: #000}
/*.game-slider figure:after {content: ''; position: absolute; top: -100px; left: 0; z-index: 5; display: inline-block; width: 100%; height: 200%; background-color: #fff}*/
/*.game-slider figure img {position: relative; z-index: 6; display: block; margin: 0 auto; height: 100%; width: auto}*/
.game-slider figure img {position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 6; display: block; margin: 0 auto; height: 100%; width: auto}
.game-slider figure.horizontal img {position: absolute; left: 0; top: 50%; z-index: 6; display: block; width: 100%; height: auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%)}
.game-slider .slick-list {position: relative; overflow: hidden; height: 100%; outline: none}
.game-slider iframe {display: none}
.game-slider .video:before {content: '\e625'; position: absolute; top: 50%; left: 50%; z-index: 905; display: inline-block; width: 60px; height: 60px; margin: -37px 0 0 -37px; border-radius: 100%; border: 7px solid #e6c918; color: #e6c918; font-family: 'Icons'; font-size: 24px; text-align: center; line-height: 60px; cursor: pointer}
.game-slider .video:after {content: ''; position: absolute; top: 0; left: 0; z-index: 6; display: inline-block; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); cursor: pointer}
.game-slider-navigation {position: relative; overflow: hidden; position: relative; max-height: 114px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0)}
.game-slider-navigation figure {-webkit-tap-highlight-color: rgba(0, 0, 0, 0)}
.game-slider-navigation figure img {margin: 0 auto; cursor: pointer}
.game-slider-navigation .slick-list.draggable {overflow: hidden; margin: 0 60px; outline: none}
.game-slider-navigation .video {position: relative}
.game-slider-navigation .video:before {content: '\e625'; position: absolute; top: 50%; left: 50%; z-index: 2; display: inline-block; width: 37px; height: 40px; margin: -25px 0 0 -25px; padding-left: 3px; border-radius: 100%; border: 3px solid #e6c918; color: #e6c918; font-family: 'Icons'; font-size: 18px; text-align: center; line-height: 40px; cursor: pointer}
.game-slider .video:after {content: ''; position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; background-color: rgba(0,0,0,.3)}
.page-product .slick-prev,
.page-product .slick-next {overflow: hidden; display: inline-block; position: absolute; top: 35px; width: 48px; height: 48px; padding: 18px 0; border: none; background: #D9D9D9; color: transparent !important; font-family: 'Montserrat', 'Lato', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-weight: 700; line-height: 1; text-align: center; text-transform: uppercase; text-indent: -999em; vertical-align: middle; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; white-space: nowrap}
.page-product .slick-next {right: 0}
.page-product .slick-prev:before,
.page-product .slick-next:before {content: '\e611'; display: block; color: #212121; font-family: 'Icons'; text-indent: 0; text-shadow: none}
.page-product .slick-next:before {content: '\e612'}
.page-product .slick-prev:hover,
.page-product .slick-next:hover {background: #928f8f}
.page-product .slick-prev:hover:before,
.page-product .slick-next:hover:before {color: #fff}
.game-slider-navigation .slick-slide img {border: 2px solid transparent}
.game-slider-navigation .slick-center img {border: 2px solid #e6c918}
.android .slider .slick-prev,
.android .slider .slick-next {top: 48%}
/*.viewport-320 .game-slider {height: 190px}*/
.viewport-320 .game-slider button,
.viewport-480 .game-slider button {display: inline-block}
.viewport-320 .game-slider-navigation,
.viewport-480 .game-slider-navigation {display: none}
.viewport-720 .game-slider-navigation {margin-top: 10px}
.viewport-320 .game-slider figure:not(.video) img,
.viewport-480 .game-slider figure:not(.video) img,
.viewport-720 .game-slider figure:not(.video) img {cursor: auto}

.viewport-480 .game-slider-navigation,
.viewport-320 .game-slider-navigation {height: 55px}
.viewport-480 .game-slider-navigation .slick-list,
.viewport-320 .game-slider-navigation .slick-list {display: none}
.viewport-480 .game-slider-navigation .slick-prev,
.viewport-320 .game-slider-navigation .slick-prev,
.viewport-480 .game-slider-navigation .slick-next,
.viewport-320 .game-slider-navigation .slick-next {opacity: 0}
.viewport-480 .game-slider .slick-prev,
.viewport-320 .game-slider .slick-prev {position: absolute; left: 10px; top: 50%; z-index: 1001; margin-top: -24px;}
.viewport-480 .game-slider .slick-next,
.viewport-320 .game-slider .slick-next {position: absolute; right: 10px; top: 50%; z-index: 1001; margin-top: -24px;}

.media-slider {position: relative; width: calc(100% - 4px); margin: -63px auto 0; padding-top: 63px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y}
.media-slider h3 {height: 52px}
.media-slider ul {width: 1280px; touch-action: pan-y; -ms-touch-action: pan-y;}
.media-slider .slider-next {position: absolute; top: 3px; z-index: 2; right: 4px}
.media-slider .slider-prev {position: absolute; top: 3px; z-index: 2; right: 72px}
.background-grey .slider-next,
.background-grey .slider-prev {background: #E6C918}
.background-grey .slider-next:hover,
.background-grey .slider-prev:hover {background: #212121}
.background-grey .slider-next:before,
.background-grey .slider-prev:before {color: #fff}

.media-slider.small .slider-next,
.media-slider.small .slider-prev {/*display: none*/}
.viewport-480 .media-slider .media-object .price.old {font-size: 12px;}
.viewport-320 .media-slider .media-object {width: 260px; padding: 10px !important}
.viewport-320 .media-slider .media-object {width: 260px; padding: 10px !important}
.viewport-320 .media-slider .media-object h3 {height: 35px; font-size: 14px; line-height: 18px}
.viewport-320 .media-slider .media-object h3+p.margin.top.tiny {margin: 2px 0 4px}
.viewport-320 .media-slider .media-object .price {display: block; font-size: 14px; line-height: 15px; text-align: left}
.viewport-320 .media-slider .media-object .price.old {font-size: 12px}
.viewport-320 .media-slider .media-object.offer .sale-label {top: inherit; bottom: 0;}
.viewport-320 .media-slider .media-object.offer .sale-label {top: inherit; bottom: 0;}
.viewport-320 .media-slider .media-object.offer .demo-label {display: none}
.viewport-320 .media-slider .media-object.offer .rating {display: none}
.viewport-320 .media-slider .media-object.offer .icon-cart-add.big:before,
.viewport-320 .media-slider .media-object.offer .icon-cart-add:before {margin: -4px 1px -2px 5px; font-size: 14px}
.viewport-320 .media-slider .media-object.offer .icon-cart-add.big,
.viewport-320 .media-slider .media-object.offer .icon-cart-add {padding: 14px 6px; font-size: 10px}

.subheader {padding: 20px 0; height: 68px}

.social-share {text-align: right}
.social-share.center {text-align: center}
.social-share .button {position: static; display: inline-block; width: 32px; height: 32px; margin: 2px 0 2px 20px; border: 1px solid #b5b4b5; background-color: #fff; -webkit-transition: all .3s ease; transition: all .3s ease}
.social-share.counter .button {width: auto; min-width: 160px; padding: 7px 25px; text-indent: 0; text-align: center}
.social-share .button:hover {border-color: #2c2c2c}
.social-share .button:before,
.social-share .button span:before {float: none; display: inline-block; color: #b5b4b5; font-size: 16px; line-height: 3px; vertical-align: middle; -webkit-transition: all .3s ease; transition: all .3s ease}
.social-share .button span:before {line-height: 10px}
.social-share .button span {font-size: 14px}
.social-share .button:hover span:before,
.social-share .button:hover:before {color: #2c2c2c}
.viewport-320 .social-share,
.viewport-480 .social-share {text-align: center}
.viewport-320 .social-share p,
.viewport-480 .social-share p,
.viewport-720 .social-share p {display: block; margin-bottom: 10px}
@media screen and (max-width: 719px){
    .social-share .button {display: block; margin: 5px auto}
}

dt {float: left; clear: left; padding: 18px 0 0 15px; color: #212121}
dd {padding: 18px 15px 15px; border-bottom: 1px solid #c1bfc0}
dd:last-child {border-bottom: 0}
dd .rating-vote {position: relative; top: -4px; margin-left: 5px}
dd .list {display: inline-block}
.viewport-320 dd .rating-vote {margin-top: 0}

.social-widgets .float-right {margin-bottom: 20px}

.social-widgets .fb_iframe_widget,
.social-widgets .fb_iframe_widget span,
.social-widgets .fb_iframe_widget iframe,
.social-widgets .fb_iframe_widget span iframe[style] {
    width: 100% !important;
    max-width: 520px;
}
.vievport-320 .social-widgets .fb_iframe_widget,
.vievport-320 .social-widgets .fb_iframe_widget span,
.vievport-320 .social-widgets .fb_iframe_widget span iframe[style] {
    max-width: none;
}

.viewport-720 .social-widgets .grid .v960-3-of-10,
.viewport-480 .social-widgets .grid .v960-3-of-10,
.viewport-320 .social-widgets .grid .v960-3-of-10 {margin: 20px auto; text-align: center}

@-webkit-keyframes slider-arrow-left {
    0%   { margin-left: 0px; }
    50%  { margin-left: 30px; }
    100% { margin-left: 0px; }
}

@keyframes slider-arrow-left {
    0%   { margin-left: 0px; }
    50%  { margin-left: 30px; }
    100% { margin-left: 0px; }
}
@-webkit-keyframes slider-arrow-right {
    0%   { margin-right: 0px; }
    50%  { margin-right: 30px; }
    100% { margin-right: 0px; }
}
@keyframes slider-arrow-right {
    0%   { margin-right: 0px; }
    50%  { margin-right: 30px; }
    100% { margin-right: 0px; }
}

.page-login {margin-top: 10px; margin-bottom: 80px}
.page-login header {margin: 73px 0 58px}
.page-login header h2 {margin-bottom: 10px}
.page-login .separator > div {position: relative; padding: 0 58px}
.page-login .separator > div:before {content: ''; position: absolute; right: 0; height: 100%; border-right: 1px solid #dad9da}
.page-login .separator > div:last-child:before {padding-left: 58px; border: 0}
.page-login .separator > div:after {content: attr(data-separate); display: block; position: absolute; top: 164px; right: -30px; width: 60px; height: 56px; background: #fff; line-height: 56px; text-align: center}
.page-login .separator > div:last-child:after {display: none}
.page-login .buttons {padding-top: 63px}
.page-login .buttons button {max-width: 330px; text-align: center}
html[lang="ja"] .page-login .buttons button {max-width: 375px}

.viewport-480 .page-login header,
.viewport-320 .page-login header {margin: 0 0 20px 0}
.viewport-480 .page-login .separator > div,
.viewport-320 .page-login .separator > div {padding: 40px 0}
.viewport-480 .page-login .separator > div:before,
.viewport-320 .page-login .separator > div:before {bottom: 0; width: 100%; height: 0; border-right: 0; border-bottom: 1px solid #dad9da}
.viewport-480 .page-login .separator > div:last-child:before,
.viewport-320 .page-login .separator > div:last-child:before {border-bottom: 0}
.viewport-480 .page-login .separator > div:after,
.viewport-320 .page-login .separator > div:after {top: auto; right: calc(50% - 15px); bottom: -27px}
.viewport-480 .page-login .buttons,
.viewport-320 .page-login .buttons {padding-top: 20px}
.viewport-720 .page-login .buttons .button {width: 300px; padding: 14px 20px}
.viewport-480 .page-login .button,
.viewport-320 .page-login .button {min-width: 255px; font-size: 12px}
.viewport-480 .page-login > div > div:not(:first-child) header,
.viewport-320 .page-login > div > div:not(:first-child) header {margin: 0}

.checkout {counter-reset: item}
.checkout tr {counter-increment: item}
.checkout tr + tr > * {border-top-width: 1px}
.checkout .title {width: 100%; padding-left: 50px; font-size: 18px}
.checkout .title:before {content: counter(item) '.'; position: absolute; top: 0; left: 0; display: table-cell; width: 70px; font-family: 'Montserrat'; line-height: 83px; text-align: center; vertical-align: middle}
.checkout .title strong {margin-right: 10px; font-family: 'Montserrat'; text-transform: uppercase}
.checkout .price {display: block; padding-right: 15px; font-family: 'Montserrat'; font-size: 18px; text-align: right}
.checkout .gift {margin-top: 5px; font-size: 14px}
.checkout .gift a {display: none; position: relative; top: 2px; margin-left: 10px; -webkit-transform: all .3s ease; -ms-transform: all .3s ease; transform: all .3s ease}
.checkout tr:hover .gift a {display: inline-block}
.checkout .gift a:hover {text-decoration: underline}
.checkout .gift a:before {position: relative; top: 1px; display: inline-block; margin-right: 5px; color: #a50000}
.checkout .gift > .label-game {position: relative; top: 1px}
.checkout label {margin-right: 5px}
.checkout .gift-game {display: none; border-top: 1px solid #b7b7b7; border-bottom: 9px solid #fff}
.checkout .gift-game input[type="email"] {width: auto}
.checkout .gift-game .or {padding: 0 15px; color: #928f8f; font-size: 14px}
.checkout .gift-game label {display: inline-block; padding-bottom: 10px; color: #928f8f}
.checkout .gift-game .textarea-wrapper {width: 100%}
.checkout .gift-game textarea {width: 100%; height: 85px}
.checkout .grid {position: relative; background-clip: padding-box}
.checkout .grid > * {padding: 15px}
.checkout .info-bar {box-sizing: content-box; padding: 15px; margin: 15px -15px -15px -15px; background: #e6c918}
.checkout .info-bar p {background: #e6c918; text-align: center}
.checkout .sale-label {display: inline-block; margin-right: 10px; line-height: 24px}
.checkout .button.remove-user {background: #6d6d6d}
.checkout .button.remove-user:before {color: #f5f5f5}
.checkout .chosen {display: none}
.checkout .chosen p {display: inline-block}
.checkout .chosen .avatar {height: 40px; vertical-align: middle}
.checkout .chosen strong {text-transform: uppercase}
.price-total {display: block; color: #212121; font-family: 'Montserrat'; font-size: 20px; font-weight: 700; text-transform: uppercase}
.price-total span {font-size: 25px}
.price-saved {display: block; color: #212121; margin-top: -15px; font-family: 'Montserrat'; font-size: 16px; font-weight: 700; text-transform: uppercase}
.price-saved span {font-size: 20px}
.wishlist h2 {margin: 21px 0}
.wishlist td {padding-left: 20px}
.wishlist form {display: inline-block !important}
.wishlist .title {width: 100%; text-transform: uppercase}
.wishlist .title:before {line-height: 70px}
.wishlist .price {display: inline-block; padding-right: 0; font-size: 18px}
.wishlist .price.old {margin-right: 5px}
.wishlist:not(.media-object) .button {margin-left: 10px}
.wishlist .button span {min-width: 100px; text-align: center}
.wishlist .button.big {font-size: 12px; padding: 14px 25px}
.wishlist .button.big:before {margin-left: 15px}
.viewport-320 .checkout .grid > * {padding: 5px}
.viewport-320 .checkout .info-bar {margin: 5px -5px -5px -5px}
.viewport-320 .checkout .title:before {width: 60px; line-height: 62px}
.viewport-320 .checkout .price,
.viewport-480 .checkout .price,
.viewport-320 .checkout .title p,
.viewport-480 .checkout .title p {font-size: 16px}
.viewport-320 .checkout .title,
.viewport-480 .checkout .title {padding-left: 30px}
.viewport-320 .checkout .title:before,
.viewport-480 .checkout .title:before {width: 39px}
.viewport-320 .wishlist .checkout .button,
.viewport-480 .wishlist .checkout .button,
.viewport-720 .wishlist .checkout .button {width: 40px; padding-left: 0; padding-right: 0; text-indent: -999em}
.viewport-320 .wishlist .checkout .button:before,
.viewport-480 .wishlist .checkout .button:before,
.viewport-720 .wishlist .checkout .button:before {float: right; width: 100%; margin: auto; text-align: center}
.viewport-320 .checkout .gift {margin-top: 0}
.viewport-480 .checkout .gift-game .choose .or,
.viewport-320 .checkout .gift-game .choose .or {display: block; margin: 10px 0; text-align: center}
.viewport-480 .checkout .gift-game .choose .button,
.viewport-320 .checkout .gift-game .choose .button {display: block; margin: 10px 0; text-align: center}
.viewport-480 .checkout .gift-game input[type="email"],
.viewport-320 .checkout .gift-game input[type="email"] {width: 100%}
.viewport-480 .checkout .gift-game .choose .gift-game .button,
.viewport-320 .checkout .gift-game .choose .button {text-align: center}
.viewport-480 .checkout .gift-game .chosen .user,
.viewport-320 .checkout .gift-game .chosen .user {display: inline-block; margin-top: 5px; white-space: nowrap}
.viewport-480 .checkout .gift-game .chosen .user .avatar,
.viewport-320 .checkout .gift-game .chosen .user .avatar {margin-right: 15px}
.viewport-320 .wishlist tr > * {padding: 5px}
.viewport-320 .checkout .gift a,
.viewport-480 .checkout .gift a,
.viewport-720 .checkout .gift a {display: inline-block; margin: 10px 0 0}
.viewport-320 .checkout .gift *,
.viewport-480 .checkout .gift *,
.viewport-720 .checkout .gift * {display: inline-block}
.viewport-320 .checkout .gift a,
.viewport-480 .checkout .gift a,
.viewport-720 .checkout .gift a {display: inline-block}
.android .checkout input[type="email"] {width: 200px}

.messages .load-more {position: relative; display: inline-block; width: 100%; margin: 10px 0 20px; font-size: 18px; text-align: center; -webkit-transition: all .3s ease; transition: all .3s ease}
.messages .load-more:hover {color: #ccb423}
.messages .load-more:before {position: absolute; left: 50%; bottom: -20px; margin-left: -9px; vertical-align: middle}
.messages .toggle-conversation-list {display: none}
.messages .toggle-conversation-list p {cursor: pointer}
.messages .toggle-conversation-list p:hover {color: #ccb423}
.messages .toggle-conversation-list p:before {margin-right: 10px}
.conversations {overflow: hidden; position: relative; float: left; display: inline-block; width: 100%}
.conversations .scrollable {max-height: 1125px}
.conversations .box {position: relative; display: block; margin-right: 17px; padding: 20px; border: 1px solid #dad9da; color: #212121; -webkit-transition: background .3s ease; transition: background .3s ease}
.conversations .box+.box,
.conversations .box+div,
.conversations div+div {margin-top: 10px}
.conversations .box h4 {padding-right: 10px; word-break: break-all}
.conversations .box .content {padding-left: 20px; font-size: 14px}
.conversations .box .content .date {padding: 0 0 5px 0; color: #ccb423; line-height: 24px; text-transform: none; text-align: left}
.conversations .box .delete {opacity: 0; display: inline-block; position: absolute; top: 15px; right: 15px; -webkit-transition: all .3s ease; transition: all .3s ease}
.conversations .box:hover .delete {opacity: 1}
.conversations .box .delete .button {width: 22px; padding: 0; background: none; font-size: 22px}
.conversations .box .delete .button:before {color: #e74c3c; -webkit-transition: color 0.25s ease; transition: color 0.25s ease}
.conversations .box .delete .button:hover:before {color: #ccb423}
.conversations .box figure {max-width: 100px; max-height: 100px}
.conversations .box.active {background: #f4dc48}
.conversations .box.unread {background: #dad9da}
.conversations .box:before {content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0px; background-color: #f4dc48; -webkit-transition: all .3s ease; transition: all .3s ease}
.conversations .box:hover:before {width: 8px}
.conversations-content {overflow: hidden; float: right; display: none; width: 0}
.conversations-content .box {position: relative}
.conversations-content .messages-content {max-height: 800px; padding-right: 20px}
.conversations .delete-overlay p {text-align: center}
.conversations .delete-overlay p:first-child {margin-bottom: 10px}
.conversations .delete-overlay {position: absolute; left: -100%; top: 0; z-index: 10; display: none; width: 100%; height: 100%; padding: 20px; background-color: #fff}
.conversations .delete-overlay p>span {font-family: 'Montserrat'; font-size: 16px; text-transform: uppercase}
.conversations .delete-overlay .yes {margin-right: 3px}
.conversations .delete-overlay .yes,
.conversations .delete-overlay .no {padding: 15px 20px; border: 0; background: #e6c918; text-shadow: 0 0 0 #212121, 0 40px 0 #fff}
.conversations .delete-overlay .yes:hover {background: #a3c02d; text-shadow: 0 -40px 0 #212121, 0 0 0 #fff}
.conversations .delete-overlay .no:hover {background: #ee3921; text-shadow: 0 -40px 0 #212121, 0 0 0 #fff}

.messages .go-back,
.new-message-trigger {display: inline-block; padding: 12px 0;font-family: 'Montserrat'; font-weight: 700; text-transform: uppercase; -webkit-transition: color 0.25s ease; transition: color 0.25s ease}
.messages .go-back:hover,
.new-message-trigger:hover {color: #e6c918}
.messages .go-back:before,
.new-message-trigger:before {position: relative; top: 3px; margin-right: 10px; color: #e6c918; font-size: 20px}

.new-message {position: relative; z-index: 1; padding: 20px}
.new-message:before {position: absolute; top: 37px; right: 40px; font-family: 'Icons';}
.new-message.not-valid:before {content: "\e61c"; color: #ff0000}
.new-message.valid:before {content: "\e60f"; color: #289b0c}
.new-message .error {display: none; color: #e74c3c; margin: 8px 0}
.new-message label.send-enter {margin: 0 10px; color: #212121; font-family: 'Montserrat'; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase}
.new-message input.send-enter + span {border: 1px solid #212121; background: none}
.new-message input.send-enter:checked + span:before {color: #212121}
.viewport-320 .new-message button {margin-top: 20px}

.messages .date-row {display: block; width: 100%; border-top: 1px solid #DAD9DA; text-align: center}
.messages .avatar {max-width: 100px; max-height: 100px}
.messages .content h4 {float: left; line-height: 24px}
.messages .content .date {width: auto; border: 0; color: #ccb423; line-height: 24px; text-align: right; text-transform: none}
.viewport-480 .messages .avatar,
.viewport-320 .messages .avatar {position: absolute}
.viewport-480 .messages header,
.viewport-320 .messages header {min-height: 85px; padding-left: 90px}
.viewport-480 .messages .content h4,
.viewport-320 .messages .content h4 {float: none}
.viewport-480 .messages .date,
.viewport-320 .messages .content .date {text-align: left}

.page-product {position: relative}
.viewport-320 .page-product .price+p .button span,
.viewport-480 .page-product .price+p .button span {position: relative; top: 5px}
.viewport-320 .page-product .price form .button span,
.viewport-480 .page-product .price form .button span {position: relative; top: 5px}
.page-product .sidebar-wrapper {position: absolute; top: 510px; right: 0; width: 31%}
.page-product .sidebar-wrapper hr {display: none}
.page-product .sidebar-wrapper dd,
.page-product .sidebar-wrapper dt {min-height: 58px}
.page-product table tr > * {width: auto; padding: 15px 10px}
.page-product table .title {width: 50%}
.page-product table .cost {width: 20%}
.page-product table .cost strong {font-size: 22px;}
.page-product table .cost span {text-decoration: line-through;}
.page-product table .cart {width: 30%}
.page-product table .cart {text-align: right}
.page-product table .addons-description {text-align: left}
.page-product table tr tr {background: inherit}
.viewport-720 .page-product h1 {width: 50%; min-height: 63px; line-height: 1em}
.viewport-320 .page-product table,
.viewport-320 .page-product table tbody,
.viewport-320 .page-product table tr,
.viewport-320 .page-product table th,
.viewport-320 .page-product table td {display: block; width: 100%}
.viewport-320 .page-product table tr:after {content: ''; display: table; clear: both}
.viewport-320 .page-product table tr + tr {border-top: 1px solid #fff}
.viewport-320 .page-product table tr + tr > * {border: 0}
.viewport-320 .page-product table .cost,
.viewport-320 .page-product table .cart {float: left; width: 60%}
.viewport-320 .page-product table .cost {width: 39%; white-space: nowrap}
.viewport-480 .page-product .float-right + h2 {margin: 13px 0}
.viewport-720 .page-product .sidebar-wrapper,
.viewport-480 .page-product .sidebar-wrapper,
.viewport-320 .page-product .sidebar-wrapper {position: relative; top: 0; right: 0; width: 100%}
.viewport-720 .page-product .sidebar-wrapper hr,
.viewport-480 .page-product .sidebar-wrapper hr,
.viewport-320 .page-product .sidebar-wrapper hr {display: block; margin-bottom: 0}
.viewport-480 .page-product table .title {width: 40%}
.viewport-480 .page-product table .cost {width: 20%}
.viewport-480 .page-product table .cart {width: 40%}

.time-left-wrapper {position: absolute; top: 99px; right: 0; float: right; width: 31%}
.time-left {height: 63px; margin-bottom: 5px; padding: 16px 20px; background: #353535; color: #928f8f; font-size: 18px;  font-family: 'Montserrat', 'Lato'; text-transform: uppercase}
.time-left p {line-height: 30px; vertical-align: top}
.time-left p:before {display: inline-block; margin-right: 10px; color: #e6c918; font-size: 30px}
.time-left span {vertical-align: top}
.time-left span.time {color: #fff}
.viewport-960 .page-product .time-left {padding: 16px; font-size: 1.2vw}
.viewport-960 .page-product .time-left .icon-clock:before {margin-right: 10px}

.sale-details {position: absolute; top: 174px; right: 0; width: 31%; padding: 30px 0 15px; background: #353535; text-align: center}
.sale-details .sale-label {position: absolute; top: 0; right: 0}
.sale-details .price {margin-bottom: 25px; font-size: 22px; text-transform: uppercase}
.sale-details .price strong {color: #fff; font-size: 26px}
.sale-details .price strong input {width: 110px; padding: 0 10px; text-align: center}
.sale-details .price span {text-decoration: line-through}
.sale-details .price span {text-decoration: line-through}
.sale-details .price .description {display: block; width: 100%; margin: 10px 0 -20px; font-size: 15px; text-decoration: none; text-transform: none}
.sale-details .price .warning {display: none;  width: 100%; margin: 10px 0 -20px; font-size: 15px; color: red; text-decoration: none; text-transform: none}
.sale-details .icon-cart-add:before {font-size: 22px}
.sale-details a:not(.button) {display: inline-block; margin-top: 5px; color: #ccb423; font-weight: 700; font-size: 16px; line-height: 20px}
.sale-details a:not(.button):before {position: relative; top: 1px; float: left; display: inline-block; padding-bottom: 10px; vertical-align: middle; font-size: 20px}
.sale-details ul {margin: 20px 17% 0; text-align: left}
.sale-details ul li {line-height: 28px}
.sale-details ul li a:before {display: inline-block; width: 24px;  margin-right: 20px; color: #dad9da; text-align: center}
.sale-details .pre-release {display: inline-block; width: 100%; min-height: 50px; margin: 0 auto; padding: 0 50px}
.sale-details .pre-release p {position: relative; display: inline-block; width: 100%; max-width: 300px; padding: 10px 30px 10px 60px; border: 1px solid #fff; color: #ccb423; text-align: left}
.sale-details .pre-release p:before {position: absolute; top: 15px; left: 10px; color: #fff; font-size: 36px}
.sale-details .pre-release p span {display: inline-block; width: 100%; font-weight: 700; font-size: 13px; line-height: 13px; text-align: right}
.sale-details .pre-release p span.date {color: #f0f0f0; font-size: 18px; line-height: 20px; vertical-align: top; text-align: right}
.sale-details .pre-release p span.date span {display: inline-block; width: auto; color: #b1b1b1; font-size: 20px}

@media screen and (max-width: 1179px) and (min-width: 960px){
    .sale-details .pre-release p {padding: 10px}
    .sale-details .pre-release p:before {display: none}
}

@media screen and (max-width: 959px){
    .page-product .time-left-wrapper {position: absolute; top: 0; right: 0; width: 320px; padding: 0}
    .page-product .time-left {margin-bottom: 0; font-size: 12px}

    .sale-details {position: relative; top: 0; right: 0; width: 100%; margin: 10px 0 20px; padding: 20px; text-align: left}
    .sale-details form,
    .sale-details p {display: inline-block}
    .sale-details .price {margin-bottom: 0; margin-right: 20px}
    .sale-details ul {display: table; width: 100%; margin: 20px 0 0}
    /*.sale-details ul {margin: 20px 14% 0}*/
    .sale-details .pre-release {width: auto; text-align: right}
}
@media screen and (min-width: 480px) and (max-width: 959px) {
    .sale-details ul li {display: table-cell}
}
@media screen and (max-width: 719px){
    .page-product .time-left-wrapper {top: 95px; float: none; width: 100%}

    .sale-details ul li a:before {width: 20px}
}
@media screen and (max-width: 479px){
    .page-product .time-left-wrapper {top: 115px}

    .sale-details {text-align: center}
    .sale-details .price {margin-bottom: 10px}
    .sale-details .button {font-size: 12px}
    .sale-details ul {margin: 20px 10% 0}

    .time-left {padding: 15px; font-size: 12px}
    .time-left p:before {margin-right: 10px}

    .sale-details .pre-release {padding: 0 30px}
    .sale-details .pre-release p {padding: 10px}
    .sale-details .pre-release p:before {display: none}
}

.search-input {position: relative}
.search-input input {padding-right: 40px !important}
.search-input span {position: absolute; top: 0px; right: 0px; display: inline-block; height: 100%; text-indent: -9999px; cursor: pointer}
.search-input span:after {content: '\e603'; font-family: 'Icons'; position: absolute; top: 12px; right: 15px; display: inline-block; color: #000; font-size: 22px; text-indent: 0}
.tags-list {display: inline-block; width: 100%; margin: 0; padding: 20px; background-color: #efefef; vertical-align: middle}
.tags-list p {float: left; display: inline-block; color: #928f8f; padding: 5px 5px 10px 10px}
.tags-list li {display: inline-block; margin: 0 5px 5px;}
.tags-list li a {overflow: hidden; display: inline-block; width: 100%; height: 100%; margin: 0 5px 5px; padding: 10px; background-color: #dad9da; color: transparent; text-shadow: 0 0 0 #212121, 0 40px 0 #fff; font-family: 'Montserrat'; font-weight: 700; font-size: 12px; text-transform: uppercase; text-align: center; -webkit-transition: all .3s ease; transition: all .3s ease}
.tags-list li a:hover {background-color: #928f8f; text-shadow: 0 -40px 0 #212121, 0 0 0 #fff}

.search-results .error-message {display: none; padding: 1px 0; color: #e74c3c}

.responsive-video {position: relative; overflow: hidden; width: 100%; padding-bottom: 56.25%}
.responsive-video iframe {position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%}

.avatar-preview {overflow: hidden; position: relative; display: inline-block; width: 163px; height: 163px}
.avatar-preview img {position: absolute; top: 0; left: 0; display: inline-block; width: auto; max-width: none; height: 100%}

.article-banner {overflow: hidden; max-height: 364px}

.privacy-settings .public,
.privacy-settings .friends,
.privacy-settings .private {display: none}
.privacy-settings table td,
.privacy-settings table th {width: 33%; text-align: center}
.privacy-settings table td {font-size: 18px; line-height: 16px}
.privacy-settings table td p {font-size: 14px; overflow: hidden}
.privacy-settings table td p span {display: none}

@media screen and (max-width: 719px) {
    .privacy-settings table td,
    .privacy-settings table th {width: 20%;}
    .privacy-settings table th {padding: 5px 0; font-size: 12px}
    .privacy-settings table td {font-size: 12px; line-height: 10px}
    .privacy-settings table th:first-child {width: 60%}
}

.scrollbar-measure {overflow: scroll; position: absolute; top: -9999px; width: 100px; height: 100px}

.teaser-box {padding: 35px 40px 70px; background-color: #dad9da}
.teaser-box h3 {display: block; min-height: 185px; max-width: 400px; margin: 30px auto}
.teaser-box h3:before {display: block; width: 90px; height: 90px; margin: 0 auto 55px; background-color: #ccb423; color: #fff; font-size: 42px; line-height: 90px; text-align: center}
.teaser-box p {display: inline-block; max-width: 400px; color: #212121}

.playism-login-notification {display: none}
.other-hitlists header {margin-bottom: 22px !important}

.media-object {position: relative; overflow: hidden; padding: 20px 20px 20px 210px; -webkit-transition: background 0.25s ease; transition: background 0.25s ease}
.media-object h3 {overflow: hidden; max-height: 48px; line-height: 22px}
.media-object .article-slider-header {height: 130px;}
.media-object .article-slider-header h3 {max-height: none;  height: auto;}
.media-object header.article-slider-header h3 a {  font-size: 16px;  }
.media-object figure {position: relative; float: left; margin-left: -190px; line-height: 0}
.media-object figure>a {position: relative; display: block}
.media-object figure>a:before {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; width: 50px; height: 50px; margin: auto; color: transparent; font-size: 100px; text-align: center; text-shadow: 0 0 50px rgba(0, 0, 0, 0); line-height: 50px; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
.media-object figure>a:after {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background: rgba(255, 255, 255, 0.85); opacity: 0; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease}
.media-object figure:hover>a:before {font-size: 50px; text-shadow: 0 0 0 #000}
.media-object figure:hover>a:after {opacity: 1}
.media-object .sale-label {position: absolute; top: 0; left: 0; z-index: 2}
.media-object .demo-label {position: absolute; top: 0; left: 0; z-index: 2}
.media-object .sale-label+.demo-label {top: 31px}
.media-object .rating {position: absolute; left: 0; bottom: 0; z-index: 2}
.media-object .rating .button {background: #ccb423}
.media-object .date {position: absolute; left: 0; bottom: 0; z-index: 2; display: inline-block; padding: 0 10px 0; background: #f1f1f1; color: #b5b4b5; font-family: 'Montserrat', 'Lato', 'Arial', 'Helvetica', sans-serif; font-size: 12px; line-height: 40px; text-transform: uppercase}
.media-object .made-by {position: relative; bottom: 45%; display: inline-block; margin: 0 auto; z-index: 2}
.media-object .links {display: inline-block; width: 100%; height: 15px; margin: 5px 0; text-align: left}
.media-object.wishlist .links {height: auto}
.media-object .links>* {border: none; background-color: transparent; ;color: #b5b4b5; font-family: 'Montserrat'; font-weight: 700; font-size: 14px; vertical-align: top; -webkit-transition: all .3s ease; transition: all .3s ease}
.media-object .links>*:hover {color: #000}
.media-object .links>*:before {float: left; display: inline-block; width: 24px; margin-right: 10px; padding-bottom: 10px; color: #e6c918; font-size: 18px; font-weight: 400; text-align: center; vertical-align: middle}
.media-object:not(.game):not(.hitlist):not(.past-work) footer {position: absolute; bottom: 20px; left: 200px; width: 205px}
.media-object.collapse:not(.game):not(.hitlist) footer {position: absolute; bottom: 0; left: 180px; width: 205px}
.media-object.collapse,
.box .media-object.collapse {padding: 0 0 0 190px}
.featured .media-object:hover {background: #ffef86}
.featured.dark .media-object:hover {background: #353535}
.ie .media-object figure>a:before {width: 60px; height: 60px; opacity: 0; text-shadow: 0 0 0 #000}
.ie .media-object figure:hover>a:before {opacity: 1}
.android .media-object.game .made-by,
.android .media-object figure:hover>a:before,
.android .media-object figure:hover>a:after {display: none}
.box.featured.dark  .media-object h3 {color: #fff}
.viewport-960 .media-object.game h3 a {width: 100%; white-space: normal}
.media-object header h3 a {display: inline-block; width: 100%; height: 100%; font-size: 18px}

.media-object.wishlist h3 {height: 48px}
.media-object.game {position: relative; padding: 0}
.media-object.game figure {float: none; margin: 0; text-align: center}
.media-object.game figure img {width: 100%; height: auto}
.media-object.game figure>a:before {bottom: 130px}
.media-object.game .rating {bottom: 130px}
.addons .button.big,
.media-object.game .button.big,
.media-object.hitlist .button.big,
.media-object.offer .button.big {-ms-text-overflow: clip; padding: 14px 14px; font-size: 12px}
.addons .button.big,
.media-object.game .button,
.media-object.hitlist .button,
.media-object.offer .button {-ms-text-overflow: clip}
.viewport-320 .addons .button.big,
.viewport-320 .media-object.game .button.big,
.viewport-320 .media-object.hitlist .button.big,
.viewport-320 .media-object.offer .button.big {padding: 14px 15px}
.media-object.game>.clip {position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; height: 117px; padding: 7px 8px; background: rgba(0, 0, 0, 0.5)}
.media-object.game h3 {overflow: hidden; height: 45px}
.media-object.game h3.one-line {height: 24px}
.media-object.game h3 a {display: table; height: auto !important}
.media-object.game .made-by {display: inline; position: absolute; left: 0; opacity: 0; width: 100%; color: #000; font-weight: 700; line-height: 24px; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; pointer-events: none}
.games:not(.list) .media-object.game figure:hover>.made-by {opacity: 1}
.media-slider .media-object.game figure:hover>.made-by {display: none}
.media-object.game .made-by span+span {display: inline-block; opacity: 0; color: #ac9614; font-weight: 700; line-height: 24px; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease}
.media-object.game figure:hover>.made-by span+span {opacity: 1; -webkit-transition: color 0.25s ease; transition: color 0.25s ease}
/*.media-object.game figure .made-by a:hover {color: #212121}*/
.media-object.game .price.old {display: inline-block; margin-left: 5px}
.media-object.game footer .button:before {margin-left: 20px; font-size: 18px}
.media-object.game footer .button span {min-width: 99px; line-height: 18px}
.viewport-960 .media-object.game h3 {white-space: nowrap}
.viewport-720 .media-object.game .price,
.viewport-960 .media-object.game .price {font-size: 20px}
.viewport-720 .media-object.game .price.old,
.viewport-960 .media-object.game .price.old {font-size: 12px}
.viewport-480 .media-object.game footer .button,
.viewport-320 .media-object.game footer .button {font-size: 12px}
.viewport-720 .media-object.game footer .button span,
.viewport-480 .media-object.game footer .button span,
.viewport-320 .media-object.game footer .button span {min-width: 0; font-size: 0px}
.viewport-720 .media-object.game footer .button:before,
.viewport-480 .media-object.game footer .button:before,
.viewport-320 .media-object.game footer .button:before {margin-left: 0}

.list .media-object.game {background: #f1f1f1}
.games.list > div > * {width: 100%}
.list .media-object.game figure {position: static; width: 100px; height: 100%}
.list .media-object.game figure a {z-index: 9}
.list .media-object.game figure a:before {bottom: 0}
.list .media-object.game figure figcaption {position: absolute; top: 37px; right: 580px; width: 155px; height: 40px}
.list .media-object.game figure figcaption .demo-label {position: absolute; top: 0; left: 0}
.list .media-object.game figure figcaption .sale-label {position: absolute; top: 0; left: 80px}
.list .media-object.game figure figcaption .rating {display: none}
.list .media-object.game .clip {height: 100px; padding: 15px 10px;  background: none}
.list .media-object.game header {overflow: hidden; display: inline-block; width: 40%; max-height: 85px; padding-left: 110px}
.list .media-object.game header a {word-break: break-all}
.list .media-object.game footer {display: inline-block; width: 60%}
.list .media-object.game footer > div {height: 86px; padding-top: 10px; text-align: right}
.list .media-object.game footer > div > div {width: auto}
.list .media-object.game footer .free-label {color:#000; margin: 0 32px}
.list .media-object.game footer .grid .grid p+p {float: left}

.list .media-object.game footer .price {color:#000; width: 125px; font-size: 24px}
.list .media-object.game h3 {display: table-cell; height: 64px; color: #212121; font-size: 16px; vertical-align: middle}
.viewport-960 .list .media-object.game header,
.viewport-720 .list .media-object.game header {width: 100%; padding-top: 0; padding-left: 105px}
.viewport-480 .list .media-object.game header,
.viewport-320 .list .media-object.game header {width: 100%; padding-top: 0; padding-left: 100px}
.viewport-960 .list .media-object.game footer,
.viewport-720 .list .media-object.game footer,
.viewport-480 .list .media-object.game footer,
.viewport-320 .list .media-object.game footer {position: absolute; bottom: 0; right: 10px; width: 50%; padding-top: 0}
.viewport-960 .list .media-object.game footer > div,
.viewport-720 .list .media-object.game footer > div,
.viewport-480 .list .media-object.game footer > div {height: 60px; padding-top: 0}
.viewport-720 .list .media-object.game footer .free-label {margin-right: 28px}
.viewport-480 .list .media-object.game footer .free-label,
.viewport-320 .list .media-object.game footer .free-label {margin-right: 15px}
.viewport-960 .list .media-object.game h3,
.viewport-720 .list .media-object.game h3,
.viewport-480 .list .media-object.game h3 {width: 100%; height: 38px; line-height: 20px; white-space: normal}
.viewport-480 .list .media-object.game h3 a,
.viewport-320 .list .media-object.game h3 a {display: inline}
.viewport-960 .list .media-object.game figure figcaption,
.viewport-720 .list .media-object.game figure figcaption {top: 57px; left: 109px; right: auto; width: 307px; text-align: left}

.viewport-720 .list .media-object.game figure figcaption {top: 55px}
.viewport-720 .list .media-object.game [class*="-label"] {font-size: 12px}
.viewport-960 .media-object.game footer .button,
.viewport-720 .media-object.game footer .button,
.viewport-480 .media-object.game footer .button,
.viewport-320 .media-object.game footer .button {padding: 10px 12px}
.viewport-960 .media-object.game footer .button:before,
.viewport-720 .media-object.game footer .button:before,
.viewport-480 .media-object.game footer .button:before,
.viewport-320 .media-object.game footer .button:before {margin-top: -1px !important}
.viewport-960 .media-object.game footer .button:before {margin-left: 15px}
/*
.viewport-960 .media-object.game footer .button {padding: 14px 10px}
.viewport-960 .list .media-object.game footer .button {padding: 14px 25px}*/
.viewport-720 .list .media-object.game footer .price,
.viewport-480 .list .media-object.game footer .price,
.viewport-320 .list .media-object.game footer .price {width: 105px; margin-right: 10px; font-size: 20px}
.viewport-720 .list .media-object.game footer .free-label,
.viewport-480 .list .media-object.game footer .free-label {margin: 0 33px}
.viewport-320 .list .media-object.game footer .free-label {margin: 0 15px}
.viewport-320 .list .media-object.game footer .price {font-size: 18px}
.viewport-960 .list .media-object.game footer .price.old,
.viewport-720 .list .media-object.game footer .price.old,
.viewport-480 .list .media-object.game footer .price.old {width: 90px; margin: 0; font-size: 16px; line-height: 28px}
.viewport-320 .list .media-object.game footer .price.old {display: none}

.viewport-480 .list .media-object.game h3,
.viewport-320 .list .media-object.game h3 {display: inline-block; width: 100%; line-height: 30px; white-space: nowrap}
.viewport-480 .list .media-object.game figure figcaption,
.viewport-320 .list .media-object.game figure figcaption {top: 0; left: 0; right: 0}
.viewport-480 .list .media-object.game figure figcaption > *,
.viewport-320 .list .media-object.game figure figcaption > * {position: absolute; top: 0; left: 0; margin-left: 0; padding: 0 5px; font-size: 10px; line-height: 17px}
.viewport-480 .list .media-object.game figure figcaption .sale-label + .demo-label,
.viewport-320 .list .media-object.game figure figcaption .sale-label + .demo-label {top: 17px}
.viewport-480 .list .media-object.game figure figcaption .rating,
.viewport-320 .list .media-object.game figure figcaption .rating {display: none}
.viewport-480 .list .media-object.game footer,
.viewport-320 .list .media-object.game footer {width: 100%}
.viewport-480 .list .media-object.game footer > div {height: 55px}

.viewport-320 .list .media-object.game .clip {height: 75px}
.viewport-320 .list .media-object.game figure {width: 75px; height: 75px}
.viewport-320 .list .media-object.game header {margin-top: -8px; padding-left: 75px}
.viewport-320 .list .media-object.game h3 {height: 30px; font-size: 12px}
.viewport-320 .list .media-object.game footer {right: 5px; bottom: 5px; height: 34px; padding-left: 75px}
.viewport-320 .list .media-object.game footer .button {padding: 8px}
.viewport-320 .list .media-object.game footer .button:before {margin: 0 !important}
.viewport-320 .list .media-object.game footer > div {padding-top: 0}
.viewport-320 .list .media-object.game footer .price {width: auto; padding: 0 5px}

.viewport-1600 .media-slider .media-object,
.viewport-1320 .media-slider .media-object,
.viewport-1280 .media-slider .media-object,
.viewport-960 .media-slider .media-object {padding-top: 39px}
.viewport-1600 .media-slider .media-object,
.viewport-1320 .media-slider .media-object,
.viewport-1280 .media-slider .media-object,
.viewport-960 .media-slider .media-object {padding-bottom: 29px}
.viewport-1600 .media-object:not(.game):not(.hitlist) footer,
.viewport-1320 .media-object:not(.game):not(.hitlist) footer,
.viewport-1280 .media-object:not(.game):not(.hitlist) footer,
.viewport-960 .media-object:not(.game):not(.hitlist) footer {bottom: 29px}
.media-slider .media-object footer {bottom: 28px}
.home-slider .media-object.game {padding-top: 0}

.hitlists > div:first-child .hitlist .button.icon-arrow-up {display: none}
.hitlists > div .hitlist .button:not(.delete) {text-shadow: 0 0 0 #ccb423, 0 40px 0 #fff; font-weight: 700; background-color: #f1f1f1}
.hitlists > div .hitlist .button:not(.delete):hover {text-shadow: 0 -40px 0 #ccb423, 0 0 0 #fff; background-color: #928f8f}
.hitlists > div .hitlist .button:not(.delete):before {float: none; margin: 0 10px 0 0; color: #212121}
.hitlists > div .hitlist .button.delete {background-color: #6d6d6d}
.hitlists > div .hitlist .button.delete:hover {background-color: #212121}
.hitlists > div .hitlist .button.icon-arrow-down {display: inline-block}
.hitlists > div:last-child .hitlist .button.icon-arrow-down {display: none}
.media-object.hitlist {padding: 20px 20px 20px 210px; background-color: #dad9da}
.media-object.hitlist .rating-wrap {margin: 10px 0}
.media-object.hitlist .rating {position: relative; margin-left: 15px}
.media-object.hitlist .rating-vote {position: relative; margin-left: 15px}
.media-object.hitlist .wysiwyg {color: #212121}
.media-object.hitlist .button.delete:before {color: #fff}
.media-object.hitlist.edit textarea {height: 130px; padding: 0 10px}
.media-object.hitlist.edit .textarea-wrapper {background: #f1f0f1}
.media-object.hitlist .buttons.smaller .button {font-size: 10px; padding: 14px}
.media-object.hitlist .buttons.smaller .button:before {margin-left: 8px}
.media-object.hitlist .buttons.block p {display: block}
.media-object.offer header > p {white-space: nowrap}

.media-object .past-work {overflow: hidden; height: 60px; color:#928f8f; font-size: 15px; line-height: 20px}

.viewport-480 .media-object.hitlist,
.viewport-320 .media-object.hitlist {padding: 20px 20px 20px 20px}
.viewport-480 .media-object.hitlist header,
.viewport-320 .media-object.hitlist header {width: -webkit-calc(100% - 120px);width: calc(100% - 120px); margin-left: 120px; min-height: 162px}
.viewport-480 .media-object.hitlist figure,
.viewport-320 .media-object.hitlist figure {position: absolute; width: 100px; margin-left: 0; margin-right: 20px}
.viewport-320 .media-object.hitlist .rating {margin-top: 10px; margin-left: 0}
.viewport-320 .media-object.hitlist.edit .rating-wrap {margin: 0}
.viewport-320 .media-object.hitlist.edit .rating-vote {height: 22px; margin: 0}
.viewport-320 .media-object.hitlist.edit .rating-vote input[type="radio"]+span {width: 17px; height: 24px; font-size: 16px}
.viewport-320 .media-object.hitlist.edit button.move-up,
.viewport-320 .media-object.hitlist.edit button.move-down,
.viewport-320 .media-object.hitlist.edit button.delete {padding: 14px}
.viewport-320 .media-object.hitlist.edit button.move-up:before,
.viewport-320 .media-object.hitlist.edit button.move-down:before {margin-left: 12px}
.viewport-480 .media-object.hitlist.edit .free-label,
.viewport-320 .media-object.hitlist.edit .price {margin: 0}

.viewport-320 .articles .media-object h3 {max-height: 28px; font-size: 12px; line-height: 14px}
.viewport-320 .articles .media-object.collapse,
.viewport-320 .articles .box .media-object.collapse {padding: 0 0 0 110px}
.viewport-320 .articles .media-object.collapse:not(.game):not(.hitlist) footer {left: 75px; bottom: -10px; -webkit-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75)}
.viewport-320 .articles .box .media-object.collapse {padding: 0 0 0 110px}
.viewport-320 .articles .media-object figcaption * {font-size: 9px}
.viewport-320 .articles .media-object figcaption [class*="-label"] {font-size: 9px; line-height: 16px}
.viewport-320 .articles .media-object figcaption .demo-label {top: 16px}
.viewport-320 .articles .media-object figcaption .rating {line-height: 35px}
.viewport-320 .articles .media-object figcaption .rating .button {width: 36px; height: 36px}
.viewport-320 .articles .media-object figcaption .rating .button:before {font-size: 12px; line-height: 16px}
.viewport-320 .articles .media-object figcaption .rating b {font-size: 12px; line-height: 36px}

.media-object.offer {background-color: #f5e161}
.media-object.news {min-height: 282px}
.media-object.news.responsive {min-height: 0}
.media-object.vote,
.media-object.news {text-align: left}
.media-slider .media-object {border-right: 2px solid #f4dc48}
.media-slider .media-object.vote {background-color: #353030; border-right: 2px solid #2c2c2c}
.media-slider .media-object.vote p {color: #fff}
.media-slider .media-object.news,
.background-grey .media-slider .media-object.offer {border-right: 0}
.media-object.news p {color: #212121}
.media-object.vote,
.media-object.news {background-color: #dad9da}
.media-object.responsive footer,
.media-object.vote footer,
.media-object.news footer {position: relative !important; top: 0 !important; right: 20px !important; bottom: 0 !important;left: 0 !important; width: auto !important}
.media-object.responsive {min-height: 182px; padding: 20px 20px 20px 20px}
.media-object.responsive header,
.media-object.responsive footer {width: -webkit-calc(100% - 120px);width: calc(100% - 120px); margin-left: 120px}
.media-object.responsive figure {position: absolute; width: 100px; margin-left: 0; margin-right: 20px}
.media-object.responsive .button.hide-text {width: 35px; margin-right: 5px}
.media-object.responsive .rating {padding-right: 5px}
.viewport-320 .media-object.responsive {padding: 20px 0 20px 0}
.viewport-320 .media-object.responsive.news.responsive,
.viewport-320 .media-object.responsive.vote.responsive {padding: 20px}

.media-object.owned-game .purchase-date span {margin-top: 20px; color: #e6c918}
.media-object.owned-game form {position: relative; margin-top: 20px; padding-top: 20px}
.media-object.owned-game form:before {content: ''; position: absolute; top: 0; left: 0; display: inline-block; width: 33%; height: 1px; background-color: #d9d9d9}
.media-object.owned-game form label {display: block; margin-bottom: 20px; color: #928f8f; font-family: 'Montserrat'; font-weight: 700; font-size: 14px; text-transform: uppercase}
.media-object.owned-game form label span {float: left; display: inline-block; margin-right: 10px; margin-bottom: 10px}
.media-object.owned-game p.purchase-date {margin-bottom: 10px}
.media-object.owned-game .links {height: auto; line-height: 16px}

.media-object.past-work .platforms-links li {display: inline-block; margin-right: 10px; vertical-align: middle}
.media-object.past-work .platforms-links li:hover img {opacity: .7}
.media-object.past-work .platforms-links img {height: 28px; width: auto}
.media-object.past-work footer {position: static}

@media screen and (max-width: 960px) {
    .media-object figure:hover p.made-by,
    .media-object figure:hover>a:before,
    .media-object figure:hover>a:after {display: none !important}
}

/* Modal window */
html.no-scroll {overflow-y: hidden !important}
.box-modal hr {border: 0; border-bottom: 1px solid #e6e6e6}

.overlay {position: fixed; top: 0; left: 0; bottom: 0; z-index: 1005; width: 100%; height: 100vh; height: 100%}
.overlay .overlay-content {overflow-x: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; overflow-y: scroll; padding: 100px 0; -webkit-overflow-scrolling: touch}
.overlay .overlay-background {position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9)}
.overlay-content .close {position: absolute; top: 0; right: 0; z-index: 1; width: 48px; height: 48px; background: #e6c918; color: #fff; cursor: pointer; -webkit-transition: all .3s ease; transition: all .3s ease}
.overlay-content .close:hover {background: #212121;}
.overlay-content .close:before {float: left; padding: 16px}

.box-modal {display: none; position: relative; overflow: visible; width: 100%; max-width: 830px; margin: 0 auto; background: #fff}
.box-modal.wide {max-width: 570px}
.box-modal.extra-wide {max-width: 920px}
.box-modal .modal-title {display: table; width: 100%; height: 55px; background: #dad9da}
.box-modal:not(.game-details) .modal-title span {display: block; font-family: 'Open Sans'; font-weight: 700; font-size: 9px}
.box-modal .modal-title form {max-width: 330px; padding: 37px 50px; font-size: 14px}
.box-modal .modal-content .scrollable {padding: 20px; max-height: 600px}
.box-modal .modal-content .scrollbar {top: 1px; right: 1px; bottom: 1px}
.viewport-480 .box-modal .modal-content .scrollable,
.viewport-320 .box-modal .modal-content .scrollable {max-height: none}

.box-modal.game-details .modal-title {display: inline-block; width: 100%; padding: 40px 40px 70px; background: #fff}
.box-modal.game-details .modal-title h3 {margin-bottom: 5px}
.box-modal.game-details .purchase-date span {color: #e6c918}
.box-modal.game-details .modal-content {padding: 0 40px 70px}
.box-modal.game-details .modal-content p {position: relative; margin-bottom: 20px; padding-bottom: 20px; color: #212121; font-family: 'Montserrat'; font-weight: 700; font-size: 16px}
.box-modal.game-details .modal-content p:before {content: ''; position: absolute; bottom: 0; left: 0; display: inline-block; width: 33%; height: 1px; background-color: #d9d9d9}
.box-modal.game-details .modal-content form {display: block; width: 100%; position: relative; padding-top: 5px}
.box-modal.game-details .modal-content form label {display: block; margin-bottom: 20px; color: #928f8f; font-family: 'Montserrat'; font-weight: 700; font-size: 14px; text-transform: uppercase}
.box-modal.game-details .modal-content form label span {margin-right: 10px}
.box-modal.game-details .modal-content a {float: left; display: inline-block; width: 100%; margin-bottom: 20px; color: #928f8f; font-family: 'Montserrat'; font-weight: 700; font-size: 14px; text-transform: uppercase; -webkit-transition: all .3s ease; transition: all .3s ease}
.box-modal.game-details .modal-content a:hover {color: #000}
.box-modal.game-details .modal-content a:before {position: relative; float: left; display: inline-block; width: 24px; margin-right: 10px; padding-bottom: 10px; color: #e6c918; font-size: 18px; font-weight: 400; text-align: center; vertical-align: middle}
.box-modal.game-details .game-serial {margin-top: -40px}
.box-modal.game-details .game-serial input {display: block; margin: 20px auto; text-align: center}

.viewport-320 .box-modal.game-details .modal-content a:before,
.viewport-480 .box-modal.game-details .modal-content a:before {float: none}
.viewport-320 .box-modal.game-details .modal-content p:before,
.viewport-480 .box-modal.game-details .modal-content p:before {width: 100%}
.viewport-480 .box-modal.game-details .modal-content,
.viewport-320 .box-modal.game-details .modal-content {text-align: center}

.overlay-content .image-modal {position: relative; max-width: 90%; max-height: 100%; margin: 0 auto; text-align: center}
.overlay-content .image-modal figure {position: relative; display: inline-block; width: auto; max-width: 100%}
.overlay-content .image-modal figure img {display: inline-block; width: 100%}
.overlay-content .image-modal .video {position: relative; width: 100%; max-width: 960px; max-height: 565px; padding-bottom: 56.25%}
.overlay-content .image-modal .video img {display: none}
.overlay-content .image-modal .video iframe {position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; max-height: 565px}
.viewport-320 .overlay-content .image-modal,
.viewport-480 .overlay-content .image-modal {max-width: 100%}

.box-modal.demo {max-width: 500px}
.box-modal.game-details.demo .modal-content p {margin-bottom: 0}
.box-modal.game-details.demo .modal-content p:before {display: none}
.box-modal.game-details.demo .modal-content form {padding-left: 70px}
.box-modal.game-details.demo .modal-content form .label-group {display: inline-block; width: 100%; max-width: 250px; margin: 0 auto; text-align: left}

.box-modal.welcome {overflow-x: hidden; max-width: 1280px; background: transparent}
/*.box-modal.welcome {overflow-x: hidden; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width: 1280px; background: transparent}*/
.box-modal.welcome .modal-content {position: relative; margin-left: 260px; padding: 80px 140px 80px 300px; background-color: #fff}
.box-modal.welcome .modal-content p {margin: 30px 0 45px; color: #000}
.box-modal.welcome .modal-content figure img {position: absolute; top: 48px; left: -260px}
@media screen and (max-width: 1279px){
    .overlay .overlay-content {padding: 50px 0}
    .box-modal.welcome .modal-content {margin: 0; padding: 40px 70px}
    .box-modal.welcome .modal-content p {display: block; max-width: 650px; margin: 30px auto}
    .box-modal.welcome .modal-content h1 {display: inline-block; width: 60%; margin-left: 20px; vertical-align: middle}
    .box-modal.welcome .modal-content figure {display: inline-block; width: 30%; text-align: center; vertical-align: middle}
    .box-modal.welcome .modal-content figure img {position: relative; top: auto; left: auto; display: inline-block; max-height: 250px}
}
@media screen and (max-width: 719px){
    .box-modal.game-details .game-serial {margin-top: 0}
}
@media screen and (max-width: 480px){
    .box-modal.welcome .modal-content {margin: 0; padding: 20px 50px 20px 20px }
}

.box-modal.creators {overflow-x: hidden; max-width: 1280px; background: transparent}
.box-modal.creators .modal-content {position: relative; margin-left: 260px; padding: 80px 140px 80px 300px; background-color: #fff}
.box-modal.creators .modal-content p {margin: 20px 0; color: #000; text-align: left}
.box-modal.creators .modal-content figure img {position: absolute; top: 48px; left: -260px}
.box-modal.creators .modal-content h1 {line-height:40px; margin-bottom: 20px; text-align:center;}

.box-modal.creators .modal-content {text-align: center; color: #000000;}
.box-modal.creators .body {position: relative; min-height: 283px; width: 550px; margin: 0px auto;}
.box-modal.creators .body .left{text-align: left;padding-left: 30px;}
.box-modal.creators .body img.gdc_logo {padding-bottom:60px;}
.box-modal.creators .body img.igf_logo {margin-left:10px;}
.box-modal.creators .body ul {list-style-type: circle; }
.box-modal.creators .body ul li {display: list-item}
.box-modal.creators .modal-content .creators-enter,.box-modal.creators .modal-content .creators-contact {margin-left: 5px}

@media screen and (max-width: 1279px){
    .overlay .overlay-content {padding: 50px 0}
    .box-modal.creators .modal-content {margin: 0; padding: 40px 70px}
    .box-modal.creators .modal-content p {display: block; max-width: auto; margin: 20px auto}
    .box-modal.creators .modal-content h1 {display: inline-block; width: 60%; margin-left: 20px; vertical-align: middle;}
    .box-modal.creators .modal-content figure {display: inline-block; width: 30%; text-align: center; vertical-align: middle}
    .box-modal.creators .modal-content figure img {position: relative; top: auto; left: auto; display: inline-block; max-height: 250px}
}
@media screen and (max-width: 719px){
    .box-modal.creators .game-serial {margin-top: 0}
    .box-modal.creators .body .left{padding-left: 75px;}
}
@media screen and (max-width: 480px){
    .box-modal.creators .modal-content {margin: 0; padding: 20px 50px 20px 20px }
    .box-modal.creators .body {width: 410px;}
    .box-modal.creators .body .left{padding-left: 10px;}
}



.section-banner {width: 100%}
.section-banner h1 {color: #fff; font-size: 71px}
.section-banner p {font-weight: 300}
.viewport-320 .section-banner h1 {font-size: 45px; line-height: 45px}
.viewport-480 .section-banner h1 {font-size: 58px; line-height: 51px}
.section-banner .subtitle {color: #fff; font-size: 34px}
.sub-header strong {font-size: 18px}
.sub-header span {color: #928f8f; font-size: 18px}
.viewport-320 .section-banner .subtitle {font-size: 28px}
.viewport-480 .section-banner .subtitle {font-size: 24px}
.full-width-background img {position: absolute; top: 0; display: inline-block; width: 1920px; height: 100%; max-width: none; z-index: -1; background-color: #f1f1f1}
.full-width-background.center img {left: 50%; margin-left: -960px}
.full-width-background.left img {left: 0}
.full-width-background.right img {right: 0; width: auto}
.full-width-background.white img {background-color: #fff}

.active-gaming-logo {display: inline-block; width: 131px; font-weight: 700; text-align: right}

.fixed-menu {width: 100%; background-color: #dad9da}
.fixed-menu ul {height: 64px; white-space: nowrap}
.fixed-menu nav {overflow: hidden}
.fixed-menu.active {position: fixed; top: 0; z-index: 3}
.fixed-menu .tabs {text-align: center}
.fixed-menu .tabs ul li:first-child a {border-left: 1px solid #c1bfc0}
.fixed-menu .tabs ul li a.no-hover:hover {background-color: inherit; text-shadow: 0 0 0 #212121, 0 64px 0 #fff}
.fixed-menu .tabs ul li a:after {display: none}

.circle-logo:before {content: ''; display: inline-block; width: 80px; height: 83px; margin-right: 25px; background: url('../frontend/images/circle_logo.svg'); -webkit-background-size: 100%; background-size: 100%; vertical-align: middle}
.viewport-320 .circle-logo {text-align: center}
.viewport-320 .circle-logo:before {display: block; margin: 10px auto}

.platform {min-height: 310px}
.platform.border {border: 2px solid #c1bfc0}
.platform figure {display: table; width: 100%}
.platform figure img {display: table-cell; max-width: none}
.platform.border figure img {border-bottom: 2px solid #c1bfc0; border-right: 2px solid #c1bfc0}
.platform figure figcaption {display: table-cell; padding: 0 25px; vertical-align: top}
.platform figure figcaption p {color: #928f8f}
.platform figure figcaption a {display: inline-block}
.platform>p {clear: both; padding: 40px; line-height: 30px}

.viewport-320 .platform:not(.border) figure img,
.viewport-480 .platform:not(.border) figure img {float: none; margin: 0 auto 20px}
.viewport-320 .platform:not(.border) figure figcaption,
.viewport-480 .platform:not(.border) figure figcaption {display: inline-block; width: 100%; padding: 0; text-align: center}

.big-tabs nav {margin: 50px 0; border-bottom: 2px solid #c1bfc0}
/*.viewport-960 .big-tabs nav,
.viewport-1320 .big-tabs nav,
.viewport-1600 .big-tabs nav {overflow: hidden}*/
.big-tabs [data-content] {display: none}
.big-tabs [data-content]:first-child {display: block}
.big-tabs nav ul {min-width: 960px; position: relative; margin-bottom: -2px; text-align: center}
.big-tabs nav ul li {width: 20%; padding: 10px 0; background-color: #dad9da; border-top: 2px solid #c1bfc0; border-right: 2px solid #c1bfc0; cursor: pointer; vertical-align: middle}
.big-tabs nav ul li:first-child {border-left: 2px solid #c1bfc0;}
.big-tabs nav ul li+li {margin-left: 1px}
.big-tabs nav ul li.active {background-color: #fff}
.big-tabs nav ul li.active img {opacity: 1; -webkit-filter: none; filter: none}
.big-tabs nav ul li.active p {background-position: 0 0 }
.big-tabs nav ul li>img {opacity: .4}
.big-tabs.games nav {margin: 20px 0 0}
.big-tabs.games ul {width: auto; min-width: initial}
.big-tabs.games li {max-width:250px; color: #000; font-weight: 700; text-transform: uppercase}

.platforms ul {min-width: 960px; width: 100%; position: relative; margin-bottom: -2px; text-align: center}
.platforms ul li {width: 16%; background-color: #dad9da; border-top: 2px solid #c1bfc0; border-right: 2px solid #c1bfc0; border-bottom: 2px solid #c1bfc0; vertical-align: middle}
.platforms ul li:first-child {border-left: 2px solid #c1bfc0;}
.platforms ul li+li {margin-left: 1px}
.platforms ul li:hover {background-color: #fff}
.platforms ul li:hover img {opacity: 1; -webkit-filter: none; filter: none}
.platforms ul li:hover p {background-position: 0 0 }
.platforms ul li img {opacity: .4; vertical-align: middle}
.platforms nav {margin: 20px 0 0}
.platforms a {display: inline-block; width: 100%; min-height: 130px; padding: 10px 0; line-height: 130px;}
.platforms li {max-width: 250px; color: #000; font-weight: 700; text-transform: uppercase}
.platforms nav {max-width: 100%}

.circles {width: 100%; text-align: center}
.circles .steps {width: 100%}
.circles .circle {position: relative; display: inline-block; width: 200px; height: 200px; border-radius: 100%; background-color: #f4dc48; border: 10px solid #b5b4b5; vertical-align: middle}
.circles .circle.active {border-color: #f4dc48; background-color: transparent; -webkit-transition: all .5s ease; transition: all .5s ease}
.circles .circle p {display: table-cell; width: 180px; height: 180px; vertical-align: middle; color: #000; font-family: 'Montserrat'; font-size: 18px; text-transform: uppercase;}
.circles .circle.active p {color: #fff}
.circles .circle+.circle {margin-left: 40px}
.circles .circle+.circle:before {content: '\e612'; position: absolute; top: 75px; left: -35px; display: inline-block; color: #b5b4b5; font-family: 'icons'; font-size: 20px}
.circles .circle-descriptions {padding: 30px 250px}
.circles .circle-descriptions h3 {display: none}
.circles .circle-descriptions p {height: 100px; display: none}
.circles .circle-descriptions p:nth-child(2) {display: block}

.custom-checkboxes p:nth-child(2n) {display: none}

.playism-tv {padding: 20px 0 200px}
.playism-tv p {color: #fff; font-size: 16px}
.playism-tv h1 {line-height: 35px}
.playism-tv .sub-header {color: #d4d4d4; font-size: 20px}
.playism-tv .sub-header strong {color: #f4dc48}
.viewport-320 .playism-tv {padding-bottom: 80px;}
.viewport-480 .playism-tv {padding-bottom: 40px}
.viewport-720 .playism-tv {padding-bottom: 0px}

@media (max-width: 1250px) {
    .circles .steps {padding: 0 15%}
    .circles .steps .circle:nth-child(4) {margin: 0}
}

@media (max-width: 1050px) {
    .circles .steps {padding: 0 10%}
}

@media (max-width: 959px) {
    .full-width-background img {left: 0 !important; width: 100%; margin: 0 !important}
    .section-banner h1,
    .section-banner p.subtitle,
    .circle-logo,
    .white strong {color: #000}
    .big-tabs:not(.games) nav,
    .platforms nav,
    .fixed-menu nav {overflow-y: hidden; overflow-x: scroll}
    .fixed-menu.smaller nav {overflow-x: hidden}
    .circles .steps {display: none}
    .circles .circle-descriptions {padding: 0}
    .circles .circle-descriptions h3 {display: block !important; margin: 20px 0 10px}
    .circles .circle-descriptions p {display: block !important; height: auto}
    .playism-tv h1 {color: #000; text-align: center}
    .playism-tv p {color: #928f8f}
}

@media (max-width: 480px) {
    .fixed-menu.smaller nav {overflow-y: hidden; overflow-x: scroll}
}

table.forum:not(.topic) {table-layout: fixed}
table.forum tr>* {padding: 20px}
table.forum tr th,
table.forum tr td {word-wrap: break-word}
table.forum tr th:first-child {width: 17%}
table.forum tr th:nth-child(2) {width: 54%}
table.forum tr th:nth-child(3) {width: 10%}
table.forum tr th:nth-child(4) {width: 19%}
table.forum.admin tr th:first-child {width: 15%}
table.forum.admin tr th:nth-child(2) {width: 35%}
table.forum.admin tr th:nth-child(3) {width: 15%}
table.forum.admin tr th:nth-child(4) {width: 18%}
table.forum.admin tr th:nth-child(5) {width: 18%; text-align: center}
table.forum.admin tr td:nth-child(5) {padding: 15px; text-align: center}
table.forum.admin tr td:nth-child(5) div {display: inline-block}
table.forum.admin tr td:nth-child(5) button {margin: 2px 1px}
table.forum.profile tr th:first-child {width: 13%}
table.forum.profile tr th:nth-child(2) {width: 37%}
table.forum.profile tr th:nth-child(3) {width: 13%}
table.forum.profile tr th:nth-child(4) {width: 18%}
table.forum.profile tr th:nth-child(5) {width: 10%; text-align: center}
table.forum.profile tr td:nth-child(5) {text-align: center}
table.forum.addons {overflow: hidden; margin: 30px 0 0}
table.forum.addons tr th,
table.forum.addons tr td {text-align: left}
table.forum.addons tr th:first-child {width: 20%; text-align: center}
table.forum.addons tr th:nth-child(2) {width: 55%; text-align: left !important}
table.forum.addons tr th:nth-child(3) {width: 25%; text-align: center !important}
@media (max-width: 1170px) {
    table.forum.admin tr td:nth-child(5) div {display: block}
}

table.forum tr+tr td {font-size: 15px}
table.forum tr+tr td a {display: inline-block; width: 100%}
table.forum tr+tr td a:hover{color: #b29c14}
table.forum tr+tr td:first-child,
table.forum tr+tr td:nth-child(3) {color: #928f8f; font-weight: 700; text-transform: none}
table.forum tr+tr td:nth-child(4) {color: #212121; font-family: 'Montserrat'; font-weight: 700; font-size: 14px; text-transform: uppercase}
table.forum tr+tr td:nth-child(4) a {min-height: 44px; padding-left: 50px}
table.forum tr+tr td figure {display: inline-block; vertical-align: middle}
table.forum:not(.topic) tr+tr td a {position: relative}
table.forum:not(.topic) tr+tr td a figure {position: absolute; top: auto; left: 0}

table.forum tr+tr td [class^="icon-topic"] {display: inline-block; margin: 0 15px 5px 0; padding: 5px 15px; color: #fff; font-size: 12px}
table.forum tr+tr td [class^="icon-topic"]:before {margin-right: 5px}
table.forum tr+tr td p.icon-topic-closed {background-color: #928f8f}
table.forum tr+tr td p.icon-topic-sticky {background-color: #59975a}
table.forum tr+tr td p.icon-topic-announcement {background-color: #7076bf}
table.forum:not(.topic) tr th:nth-child(1),
table.forum:not(.topic) tr th:nth-child(3),
table.forum:not(.topic) tr th:nth-child(4),
table.forum:not(.topic) tr td:nth-child(1),
table.forum:not(.topic) tr td:nth-child(3) {text-align: center}
table.forum:not(.topic) tr {border: 1px solid transparent; border-left-color: #DAD9DA; border-right-color: #DAD9DA}
table.forum:not(.topic) tr:nth-child(2n) {border-left-color: #f0f0f0; border-right-color: #f0f0f0}
table.forum:not(.topic) tr:hover td {border-top: 1px solid #b3b3b3; border-bottom: 1px solid #b3b3b3}
table.forum:not(.topic) tr:hover td:first-child {border-left: 1px solid #b3b3b3}
table.forum:not(.topic) tr:hover td:last-child {border-right: 1px solid #b3b3b3}

table.forum.topic {margin-top: 1px}
table.forum button:before {font-size: 16px}
.forum-grid div:nth-child(n) table tr>* {background-color: #dad9da}
.forum-grid div:nth-child(2n) table tr>* {background-color: #f0f0f0}
table.forum.topic tr th {position: relative; width: 270px; max-width: 270px; padding-left: 80px; vertical-align: top; -webkit-background-clip: padding-box; background-clip: padding-box}
.viewport-720 table.forum.topic tr th {width: 240px}
.viewport-320 table.forum.topic tr th,
.viewport-480 table.forum.topic tr th,
.viewport-320 table.forum.topic tr th+td,
.viewport-480 table.forum.topic tr th+td {display: inline-block; width: 100%; border-top: 1px solid #fff}
.viewport-320 table.forum.topic tr td,
.viewport-480 table.forum.topic tr td {display: inline-block; width: 100%}
table.forum.topic tr>* {border-left: none}
table.forum.topic tr th:first-child {border-right: 1px solid #fff}
.firefox table.forum.topic tr td.post {border-top: 2px solid #fff}
table.forum.topic tr:first-child td:last-child label p {position: absolute; top: 0; left: 0}
table.forum.topic tr th figure {position: absolute; top: 20px; left: 30px; display: inline-block}
table.forum.topic tr th p {display: inline-block; width: 100%; vertical-align: top}
table.forum.topic tr th p.range,
table.forum.topic tr th p.replies {display: inline-block; width: 100%; color: #928f8f; font-family: 'Lato'; font-size: 15px; font-weight: 700; text-transform: none}
table.forum.topic tr th p.replies span,
table.forum.topic tr th p.replies span {color: #212121}
table.forum.topic tr th+td {position: relative; color: #928f8f; font-size: 15px; font-weight: 700; text-transform: none}
table.forum.topic tr th+td a {padding: 16px 25px}
.viewport-320 table.forum.topic tr th+td a {padding: 17px 25px}
table.forum.topic tr th+td .buttons {float: right; display: inline-block; height: 100%; margin: -10px 0;opacity: 0; -webkit-transition: all .4s ease; transition: all .4s ease; text-align: right}
table.forum.topic tbody:hover tr th+td .buttons {opacity: 1}

.viewport-720 table.forum.topic tr th+td .buttons,
.viewport-480 table.forum.topic tr th+td .buttons {opacity: 1}
.viewport-320 table.forum.topic tr th+td .buttons {opacity: 1; margin: 10px 0}
table.forum.topic tr th+td button:before {margin-left: 10px}
table.forum.topic tr td.post {color: #212121; font-weight: 400}
table.forum.topic tr td.post img {/*width: 100%*/}
table.forum.topic tr td.post a {display: inline}
table.forum.topic tr td.post>figure {display: inline-block; width: 100%; margin: 0; padding: 40px 15%}
table.forum.topic tr td.post>figure figcaption {display: inline-block; width: 100%; margin: 0; padding: 10px 0 0; color: #928f8f; font-style: italic;}
table.forum.topic tr td .quote {display: inline-block; width: 100%; margin-bottom: 15px; padding-left: 10px; border-left: 1px solid #999797}
table.forum.topic tr td .quote .content {position: relative; display: inline-block; width: 100%; min-height: 44px; padding-left: 55px}
table.forum.topic tr td .quote .no-author-content {position: relative; display: inline-block; width: 100%; padding-left: 0}
table.forum.topic tr td .quote .content>* {display: inline-block;}
table.forum.topic tr td .quote figure {position: absolute; top: 0; left: 0; display: inline-block}
table.forum.topic tr td .quote p {color: #928f8f}
table.forum.topic tr td .quote p.name {color: #212121; font-family: 'Montserrat'; font-weight: 700; font-size: 14px; font-style: normal; text-transform: uppercase}
table.forum.topic tr td .quote .post {display: inline; color: #212121; font-family: 'Lato'; font-size: 14px; font-style: italic}

table.forum.addons a:hover {color: transparent}
table.forum.addons tr td:nth-child(3) {text-align: center}
table.forum.addons tr td:nth-child(3) .button {max-width: 140px}

form.new-post {display: none}

.toggle-favourite {position: relative; cursor: pointer}
.toggle-favourite span.error {position: absolute; bottom: -22px; right: 0; display: none; width: 500%; color: red; text-align: right; cursor: default}

@media (max-width: 800px) {
    .forum-scroll {overflow-x: scroll}
    .forum-scroll>* {overflow: hidden; min-width: 768px}
    table.forum tr th {text-align: center}
}
@media (max-width: 1220px) {
    table.forum tr th,
    table.forum tr td {padding: 10px 15px}
    table.forum tr th+td {padding: 15px 15px}
    table.forum tr+tr td figure img {margin: 5px auto;}
    table.forum tr th:first-child {width: 13%}
    table.forum tr th:nth-child(2) {width: 54%}
    table.forum tr th:nth-child(3) {width: 14%}
    table.forum tr th:nth-child(4) {width: 19%}
}
@media (max-width: 960px) {
    table.forum tr th,
    table.forum tr td {padding: 10px 15px}
    table.forum tr th+td {padding: 15px 15px}
    table.forum tr+tr td figure {display: block; margin: 0 0}
    table.forum tr+tr td figure img {margin: 0 auto;}
    table.forum tr th:first-child {width: 15%}
    table.forum tr th:nth-child(2) {width: 50%}
    table.forum tr th:nth-child(3) {width: 16%}
    table.forum tr th:nth-child(4) {width: 19%}
    table.forum:not(.addons) .button span {display: none}
    table.forum a:before,
    table.forum button:before {margin: 0 !important}
    table.forum.topic tr th+td a.edit {right: 105px}
    table.forum.topic tr th+td a.remove {right: 172px}
}