/*
 * Shroom2 theme for Metin2CMS (design only - no logic here).
 * Loaded AFTER bootstrap.min.css / style.css, every layout class is prefixed with "s2-"
 * so it never collides with Bootstrap (.card, .btn, .container ...) used by the CMS pages.
 * Design: unq_design / original HTML+CSS: zerocrazy.
 */

@font-face {
    font-family: 'Trajan Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Trajan Pro Regular'), url('../fonts/TrajanPro-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Trajan Pro Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Trajan Pro Bold'), url('../fonts/TrajanPro-Bold.otf') format('opentype');
}

:root {
    --s2-link-hover: #f4b978;
    --s2-text: #ecd6b4;
    --s2-brown: #986b50;
    --s2-dark: #1b0d04;
    --s2-darker: #170b04;
}

html {
    background-color: #5a4131;
}

body.s2-body {
    margin: 0;
    padding: 0;
    height: auto;
    min-width: 320px;
    background: transparent;
    color: var(--s2-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    overflow-x: hidden;
}

/* kill the old theme chrome that style.css adds on body / #content */
body.s2-body:before,
.s2-body #content:after {
    display: none;
}

.s2-body a {
    color: var(--s2-text);
    text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Page wrapper: top artwork + bottom artwork                          */
/* ------------------------------------------------------------------ */
.s2-wrap {
    position: relative;
    background-color: #5a4131;
    background-image: url('../images/shroom2/top-bg.png'), url('../images/shroom2/bottom-bg.png');
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center bottom;
}

.s2-container {
    width: 1186px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Navigation                                                          */
/* ------------------------------------------------------------------ */
.s2-nav-trigger {
    display: none;
    position: relative;
    z-index: 30;
    background: #351a08;
    color: #fff !important;
    text-align: center;
    font-size: 32px;
    line-height: 56px;
    border-bottom: 1px solid #a67a5d;
}

.s2-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    padding: 34px 0 0;
}

.s2-nav .s2-nav-inner {
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.s2-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.s2-nav .s2-menu-main {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    justify-content: space-around;
    padding: 0 30px;
}

.s2-nav li {
    position: relative;
}

.s2-nav li > a {
    display: block;
    color: #e2d9d6;
    text-shadow: 0 2px 0 #330202, 0 0 20px #523827;
    font-family: 'Trajan Pro Bold', 'Times New Roman', serif;
    font-size: 20px;
    text-transform: uppercase;
    padding: 10px 20px;
    transition: all .3s ease;
    white-space: nowrap;
}

.s2-nav li > a:hover,
.s2-nav li.active > a {
    color: var(--s2-link-hover);
}

.s2-nav .s2-lang > a {
    font-size: 13px;
    padding: 6px 14px;
    background-color: #2b1a0f;
    box-shadow: inset 0 1px 20px 0 hsl(31deg 85% 71% / 50%), 0 1px 0 #5a4131;
    border-radius: 20px;
}

.s2-nav .s2-signup > a {
    font-size: 16px;
    padding: 10px 28px;
    background: linear-gradient(180deg, rgba(208, 145, 51, 1) 0%, rgba(198, 67, 13, 1) 100%);
    box-shadow: inset 0 1px 20px 0 #00000087, 0 0 20px 5px rgb(0 0 0 / 50%);
    border-radius: 20px;
    text-shadow: 0 1px 0 #962c11;
    color: #fff;
}

.s2-nav .s2-signup > a:hover {
    filter: brightness(1.5);
    color: #fff;
}

.s2-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    z-index: 25;
}

.s2-dropdown:hover > .s2-dropdown-content {
    display: block;
}

.s2-dropdown-content a {
    display: block;
    margin: 3px 0;
    padding: 6px 24px;
    font-size: 14px;
    background-color: #2b1a0f;
    box-shadow: none;
    color: #e2d9d6;
    font-family: 'Trajan Pro Bold', 'Times New Roman', serif;
    text-transform: uppercase;
    white-space: nowrap;
}

.s2-dropdown-content a:hover {
    background-color: #48271a;
    color: var(--s2-link-hover);
}

/* ------------------------------------------------------------------ */
/* Hero (logo area)                                                    */
/* ------------------------------------------------------------------ */
.s2-hero {
    position: relative;
    height: 650px;
}

.s2-logo {
    position: absolute;
    top: 215px;
    left: 50%;
    margin-left: -40px;
    width: 500px;
    max-width: 90%;
    transition: 1s;
}

.s2-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.s2-logo:hover {
    filter: brightness(1.6);
}

/* ------------------------------------------------------------------ */
/* Columns                                                             */
/* ------------------------------------------------------------------ */
.s2-columns {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.s2-col-left,
.s2-col-right {
    width: 290px;
    flex: 0 0 290px;
}

.s2-col-middle {
    width: 578px;
    flex: 0 0 578px;
    min-width: 0;
}

.s2-card {
    margin-bottom: 5px;
    width: 100%;
}

.s2-card-title {
    font-family: 'Trajan Pro Regular', 'Times New Roman', serif;
    color: var(--s2-text);
    border-bottom: 2px solid #a67a5d;
    text-align: center;
    background: url('../images/shroom2/top-light-card.png') no-repeat 50% 50% #351a08;
    background-size: contain;
    font-size: 14px;
    line-height: 1.4;
    text-shadow: 0 1px 0 #962c11;
    padding: 10px 0;
    margin: 0;
    text-transform: none;
}

.s2-card-body {
    background-color: var(--s2-brown);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: inset 0 -4px 13px 0 hsl(0deg 0% 0% / 50%);
}

/* big banner buttons (Download / Trailer) */
.s2-large-href {
    display: block;
    width: 100%;
    height: 100px;
    background: url('../images/shroom2/btn-href.jpg') no-repeat;
    background-size: cover;
    border-bottom: 1px solid #4e0d0d;
    text-align: center;
    line-height: 100px;
    color: #d0a990 !important;
    text-shadow: 0 0 7px rgba(90, 65, 49, .49);
    font-size: 24px;
    font-family: 'Trajan Pro Bold', 'Times New Roman', serif;
    text-transform: uppercase;
    transition: 1s;
}

.s2-large-href .fa {
    float: left;
    line-height: 100px;
    margin-left: 30px;
    font-size: 40px;
}

.s2-large-href:hover {
    filter: brightness(1.5);
}

/* ------------------------------------------------------------------ */
/* Login / user panel                                                  */
/* ------------------------------------------------------------------ */
.s2-card-body.s2-login {
    padding: 15px 20px;
}

.s2-input-group {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}

.s2-input-group:last-of-type {
    margin-bottom: 30px;
}

.s2-input-group .fa {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #704e3a;
    text-shadow: 0 1px 0 #805b46;
}

.s2-input-group input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border: none;
    border-bottom: 2px solid #8f6751;
    border-radius: 0;
    color: #c9a48c;
    background-color: var(--s2-dark);
    font-size: 15px;
    box-sizing: border-box;
    box-shadow: 0 0 20px 13px rgb(63 42 30 / 50%);
    height: auto;
}

.s2-input-group input::placeholder {
    color: #7a5844;
}

.s2-input-group input:focus {
    outline: none;
}

.s2-input-group input:focus + .fa {
    color: #000;
}

.s2-btn,
.s2-body input.s2-btn {
    display: block;
    margin: 0 auto;
    background-color: #2e0f06;
    border: none;
    border-top: 1px solid #48271a;
    border-radius: 0;
    box-shadow: inset 0 -1px 0 0 #a7836f, 0 0 20px 13px rgb(63 42 30 / 10%);
    padding: 10px 30px;
    color: #fffbec;
    outline: none;
    font-family: 'Trajan Pro Bold', 'Times New Roman', serif;
    cursor: pointer;
    transition: all .3s ease;
}

.s2-btn:hover {
    background-color: #48271a;
}

.s2-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.s2-login .s2-btn {
    margin-bottom: 30px;
}

.s2-forgot {
    padding: 15px 10px;
    background-color: var(--s2-dark);
    text-align: center;
    color: #b38f7a;
    font-size: 12px;
}

.s2-forgot a {
    display: block;
    color: #f8f0e4;
    font-size: 14px;
}

/* logged-in account menu */
.s2-account-menu {
    padding: 10px 20px;
}

.s2-account-menu a {
    display: block;
    background-color: var(--s2-dark);
    margin-bottom: 5px;
    padding: 10px 12px;
    border-bottom: 1px solid #85604b;
    box-shadow: 0 0 20px 13px rgb(63 42 30 / 50%);
    color: var(--s2-text);
    font-family: 'Trajan Pro Bold', 'Times New Roman', serif;
    font-size: 12px;
    transition: all .3s ease;
}

.s2-account-menu a:hover {
    background-color: #48271a;
    color: var(--s2-link-hover);
}

.s2-account-menu a.s2-danger {
    color: #e24b3c;
}

.s2-account-menu a.s2-disabled {
    opacity: .5;
    pointer-events: none;
}

.s2-account-menu .tag {
    float: right;
    font-size: 10px;
    background: #c6430d;
    color: #fff;
}

/* ------------------------------------------------------------------ */
/* Ranking + statistics                                                */
/* ------------------------------------------------------------------ */
.s2-ranking {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background-color: #1b0b01;
    font-family: 'Trajan Pro Bold', 'Times New Roman', serif;
    font-size: 12px;
    color: var(--s2-text);
}

.s2-ranking th,
.s2-ranking td {
    padding: 8px;
    text-align: left;
    border: none;
    border-bottom: 2px solid var(--s2-brown);
    color: var(--s2-text);
}

.s2-ranking thead {
    background-color: var(--s2-brown);
}

.s2-ranking th {
    font-weight: bold;
    color: #fff;
}

.s2-ranking tbody tr:last-child td {
    border-bottom: none;
}

.s2-ranking tbody tr {
    transition: background-color .3s;
}

.s2-ranking tbody tr:hover {
    background-color: #2e1409;
}

.s2-ranking .s2-pos {
    width: 34px;
    background-color: #1a0300;
    text-align: center;
    font-weight: 900;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 0 1px 0 var(--s2-text);
}

.s2-ranking .s2-empire {
    text-align: center;
}

.s2-ranking thead th.s2-pos,
.s2-ranking thead th.s2-empire {
    text-align: center;
}

.s2-empire-1 { color: #e22727 !important; }  /* Shinsoo */
.s2-empire-2 { color: #dfd02d !important; }  /* Chunjo  */
.s2-empire-3 { color: #6871e7 !important; }  /* Jinno   */

.s2-ranking-more {
    padding: 8px 0 10px;
    text-align: center;
    background: #1b0b01;
    border-top: 2px solid var(--s2-brown);
}

.s2-ranking-more a {
    color: var(--s2-text);
    font-family: 'Trajan Pro Bold', 'Times New Roman', serif;
    font-size: 12px;
}

.s2-ranking-more a:hover {
    color: var(--s2-link-hover);
}

.s2-ranking-more .tag {
    display: inline-block;
    margin: 2px 0;
    padding: 3px 8px;
    border-radius: 3px;
    background: #8f1f14;
    color: #fff;
    font-size: 11px;
}

.s2-stats {
    list-style: none;
    margin: 0;
    padding: 10px 20px;
}

.s2-stats li {
    display: block;
    background-color: var(--s2-dark);
    margin-bottom: 5px;
    padding: 10px 9px;
    border-bottom: 1px solid #85604b;
    box-shadow: 0 0 20px 13px rgb(63 42 30 / 50%);
    color: var(--s2-text);
    font-family: 'Trajan Pro Bold', 'Times New Roman', serif;
    font-size: 12px;
    overflow: hidden;
}

.s2-stats li strong {
    float: right;
    font-weight: normal;
}

/* ------------------------------------------------------------------ */
/* Slider (news page)                                                  */
/* ------------------------------------------------------------------ */
.s2-slider {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    height: 282px;
    background-color: #170b04;
}

.s2-slider .s2-slide {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 282px;
    background-size: cover;
    background-position: center;
}

.s2-slider .s2-slide.active {
    display: block;
}

.s2-slide .s2-slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 20px;
    text-align: left;
    background-color: rgb(23 11 2 / 70%);
    font-family: 'Trajan Pro Bold', 'Times New Roman', serif;
}

.s2-slide .s2-slide-content h2 {
    margin: 0;
    font-size: 24px;
    color: var(--s2-text);
    font-family: 'Trajan Pro Bold', 'Times New Roman', serif;
    text-transform: uppercase;
}

.s2-slide .s2-slide-content p {
    margin: 4px 0 0;
    opacity: .7;
    color: var(--s2-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

.s2-slider .s2-slide-prev,
.s2-slider .s2-slide-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgb(46 15 6 / 30%);
    transition: .5s;
    color: #fffbec;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 2;
}

.s2-slider .s2-slide-prev { left: 10px; }
.s2-slider .s2-slide-next { right: 10px; }

.s2-slider .s2-slide-prev:hover,
.s2-slider .s2-slide-next:hover {
    background-color: #48271a;
}

/* ------------------------------------------------------------------ */
/* Middle content = news + every other CMS page                        */
/* ------------------------------------------------------------------ */
.s2-content-card .s2-card-body {
    background-color: #312218;
    padding: 5px 15px 30px;
    box-shadow: none;
    color: var(--s2-text);
    min-height: 200px;
}

/* the pages wrap themselves in these old/bootstrap wrappers - neutralise them */
.s2-content .mt2cms2-c-l,
.s2-content .container {
    float: none;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.s2-content .bd-c {
    margin: 0;
}

.s2-content .page-hd {
    background: none !important;
    padding: 0;
    margin: 15px 0 10px;
    border-bottom: 2px solid #a67a5d;
}

.s2-content .page-hd:before {
    display: none;
}

.s2-content .page-hd h2,
.s2-content h2 {
    margin: 0 0 8px;
    font-family: 'Trajan Pro Bold', 'Times New Roman', serif;
    font-size: 22px;
    color: var(--s2-text);
    text-transform: uppercase;
}

.s2-content h3,
.s2-content h4,
.s2-content h5 {
    font-family: 'Trajan Pro Bold', 'Times New Roman', serif;
    color: var(--s2-text);
}

.s2-content h3 { font-size: 20px; }
.s2-content h4 { font-size: 17px; }

.s2-content p,
.s2-content dl {
    line-height: 1.5;
}

.s2-content a {
    color: #fc6950;
}

.s2-content a:hover {
    color: var(--s2-link-hover);
}

.s2-content hr {
    border-color: #4a3425;
    background: none;
}

/* news list (class news.php outputs li.blog-post) */
.s2-content .blogroll,
.s2-content ul.blogroll {
    list-style: none;
    margin: 0;
    padding: 0;
}

.s2-content .blog-post,
.s2-content .blogroll .blog-post {
    background: var(--s2-darker);
    margin: 15px 0;
    padding: 0 0 5px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    overflow: hidden;
}

.s2-content .blog-post .hd {
    padding: 1px 20px 0;
}

.s2-content .blog-post .blog-title,
.s2-content .article .mt2cms2-c-l .blog-title {
    margin: 18px 0 4px;
    font-size: 22px;
    line-height: 1.2;
    text-transform: uppercase;
    font-family: 'Trajan Pro Bold', 'Times New Roman', serif;
}

.s2-content .blog-post .blog-title a {
    color: var(--s2-text);
}

.s2-content .blog-post .blog-title a:hover {
    color: var(--s2-link-hover);
}

.s2-content .blog-post .blog-title .fa {
    font-size: 14px;
    margin-left: 6px;
}

.s2-content .blog-post .meta {
    padding: 0 20px;
}

.s2-content p.blog-attribution {
    color: #83725e;
    font-size: 12px;
    margin: 0 0 6px;
}

.s2-content .blog-post .bd {
    padding: 0 20px 10px;
    border: 0;
    box-shadow: none;
    margin: 0;
}

.s2-content .blog-post .text {
    opacity: .85;
    font-size: 15px;
    line-height: 1.5;
}

.s2-content .blog-post .text p {
    margin: 10px 0;
}

.s2-content .blog-post .text img {
    max-width: 100%;
    height: auto;
}

.s2-content .blog-post .more {
    display: inline-block;
    margin: 0;
    background: #3f2a1e;
    border-radius: 3px;
    padding: 6px 14px;
    transition: all .3s ease;
}

.s2-content .blog-post .more:hover {
    background: #604832;
    box-shadow: 0 0 10px rgba(255, 255, 255, .2);
}

.s2-content .blog-post .more a {
    color: #f9d6b2;
    font-size: 12px;
}

.s2-content .blogroll .more a:after {
    display: none;
}

/* pagination */
.s2-content .wp-pagenavi {
    margin: 20px 0 5px;
    padding: 0;
    background: none;
    text-align: center;
}

.s2-content .wp-pagenavi a,
.s2-content .wp-pagenavi .current {
    display: inline-block;
    height: auto;
    width: auto;
    min-width: 12px;
    line-height: 1.4;
    margin: 0 3px;
    padding: 2px 6px;
    background: none;
    color: #b38f7a !important;
    font-weight: normal;
    font-size: 14px;
}

.s2-content .wp-pagenavi .current,
.s2-content .wp-pagenavi a:hover {
    color: #fff !important;
}

/* bootstrap components restyled for the dark theme */
.s2-content .table {
    width: 100%;
    color: var(--s2-text);
    background: transparent;
}

.s2-content .table th,
.s2-content .table td {
    border-top: 1px solid #4a3425;
    border-bottom: none;
}

.s2-content .table thead th,
.s2-content .thead-inverse th {
    background-color: #2e0f06;
    color: var(--s2-text);
    border-bottom: 2px solid #a67a5d;
}

.s2-content .table-hover tbody tr:hover,
.s2-content .table-striped tbody tr:nth-of-type(odd) {
    background-color: #3f2a1e;
}

.s2-content .form-control {
    background-color: var(--s2-dark);
    color: #c9a48c;
    border: 1px solid #4a3425;
    border-bottom: 2px solid #8f6751;
    border-radius: 0;
}

.s2-content .form-control:focus {
    background-color: var(--s2-dark);
    color: var(--s2-text);
    border-color: #a67a5d;
    box-shadow: none;
}

.s2-content .form-control::placeholder {
    color: #7a5844;
}

.s2-content .form-control:disabled,
.s2-content .form-control[readonly] {
    background-color: #2a1a10;
    color: #83725e;
}

.s2-content select.form-control option {
    background: var(--s2-dark);
    color: var(--s2-text);
}

.s2-content .input-group-addon {
    background: #2e0f06;
    color: var(--s2-text);
    border: 1px solid #4a3425;
}

.s2-content label,
.s2-content .control-label,
.s2-content .col-form-label {
    color: var(--s2-text);
}

.s2-content .btn {
    border-radius: 0;
    border: none;
    border-top: 1px solid #48271a;
    box-shadow: inset 0 -1px 0 0 #a7836f;
    background-color: #2e0f06;
    color: #fffbec;
    font-family: 'Trajan Pro Bold', 'Times New Roman', serif;
    transition: all .3s ease;
}

.s2-content .btn:hover,
.s2-content .btn:focus {
    background-color: #48271a;
    color: #fff;
}

.s2-content .btn-primary,
.s2-content .btn-success {
    background-color: #2e0f06;
}

.s2-content .btn-danger {
    background-color: #8f1f14;
}

.s2-content .btn-warning {
    background-color: #c6430d;
}

.s2-content .btn-info,
.s2-content .btn-secondary,
.s2-content .btn-default {
    background-color: #3f2a1e;
}

.s2-content .alert {
    border-radius: 0;
    border: none;
    border-left: 4px solid #a67a5d;
    background: #2a1a10;
    color: var(--s2-text);
}

.s2-content .alert-danger {
    border-left-color: #e22727;
}

.s2-content .alert-success {
    border-left-color: #4caf50;
}

.s2-content .alert-info {
    border-left-color: #6871e7;
}

.s2-content .alert .close {
    color: var(--s2-text);
    text-shadow: none;
}

.s2-content .list-group-item,
.s2-content .card,
.s2-content .modal-content,
.s2-content .jumbotron {
    background-color: #2a1a10;
    color: var(--s2-text);
    border-color: #4a3425;
    border-radius: 0;
}

.s2-content .card-header {
    background: #2e0f06;
    border-color: #4a3425;
}

.s2-content .nav-tabs {
    border-bottom: 1px solid #4a3425;
}

.s2-content .nav-tabs .nav-link {
    color: var(--s2-text);
    border-radius: 0;
}

.s2-content .nav-tabs .nav-link.active {
    background: #2e0f06;
    border-color: #4a3425;
    color: #fff;
}

.s2-content .text-danger { color: #e24b3c !important; }
.s2-content .text-success { color: #7bc67e !important; }
.s2-content .text-primary { color: #f4b978 !important; }

.s2-content img {
    max-width: 100%;
}

.s2-content .row {
    margin-left: -10px;
    margin-right: -10px;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.s2-footer {
    clear: both;
    margin-top: 60px;
    padding-bottom: 170px;
}

.s2-footer .s2-social {
    list-style: none;
    margin: 0 0 15px;
    padding: 0;
    text-align: center;
}

.s2-footer .s2-social li {
    display: inline-block;
    margin: 0 4px;
}

.s2-footer .s2-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.s2-footer .s2-left,
.s2-footer .s2-right {
    flex: 1 1 0;
    font-size: 14px;
    color: #c9aa79;
    font-family: 'Trajan Pro Bold', 'Times New Roman', serif;
}

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

.s2-footer .s2-left span,
.s2-footer .s2-right a {
    color: #eedfc8;
    font-weight: bold;
}

.s2-footer a:hover {
    color: var(--s2-link-hover);
}

.s2-footer .s2-center-logo {
    flex: 0 0 auto;
}

.s2-footer .s2-center-logo img {
    height: 100px;
    width: auto;
}

/* ------------------------------------------------------------------ */
/* Social icons (CMS prints <a class="youtube hide-txt"> items)        */
/* ------------------------------------------------------------------ */
.s2-footer .s2-social a {
    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    text-indent: 0;
    overflow: hidden;
    border-radius: 50%;
    background: #2b1a0f;
    color: var(--s2-text);
    font-size: 0;
    box-shadow: inset 0 1px 10px 0 hsl(31deg 85% 71% / 40%);
}

.s2-footer .s2-social a:before {
    font-family: FontAwesome;
    font-size: 16px;
    content: "\f0c1";
}

.s2-footer .s2-social a.youtube:before   { content: "\f167"; }
.s2-footer .s2-social a.facebook:before  { content: "\f09a"; }
.s2-footer .s2-social a.twitter:before   { content: "\f099"; }
.s2-footer .s2-social a.tumblr:before    { content: "\f173"; }
.s2-footer .s2-social a.flickr:before    { content: "\f16e"; }
.s2-footer .s2-social a.rss:before       { content: "\f09e"; }
.s2-footer .s2-social a.twitchtv:before  { content: "\f1e8"; }
.s2-footer .s2-social a.discord:before   { content: "\f1d7"; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media only screen and (max-width: 1280px) {
    .s2-nav li > a {
        font-size: 16px;
        padding: 10px 12px;
    }
}

@media only screen and (max-width: 1220px) {
    .s2-container {
        width: 100%;
        padding: 0 10px;
    }

    .s2-col-left,
    .s2-col-right {
        width: 24%;
        flex: 0 0 24%;
    }

    .s2-col-middle {
        width: 50%;
        flex: 0 0 50%;
    }
}

@media only screen and (max-width: 992px) {
    .s2-nav-trigger {
        display: block;
    }

    .s2-nav {
        display: none;
        position: fixed;
        height: 100%;
        background: #000;
        padding: 0;
        overflow-y: auto;
        z-index: 40;
    }

    .s2-nav.s2-open {
        display: block;
    }

    .s2-nav .s2-nav-inner,
    .s2-nav .s2-menu-main {
        display: block;
        padding: 0;
    }

    .s2-nav .s2-nav-inner {
        padding: 20px;
        box-sizing: border-box;
    }

    .s2-nav li {
        text-align: center;
        padding: 2vh 0;
    }

    .s2-dropdown-content {
        display: block;
        position: static;
    }

    .s2-nav .s2-nav-close {
        display: block;
        text-align: center;
        font-size: 32px;
        padding: 10px;
    }

    .s2-wrap {
        background-position: 30% top, center bottom;
        background-size: auto 900px, auto;
    }

    .s2-hero {
        height: 420px;
    }

    .s2-logo {
        left: 50%;
        margin-left: -150px;
        width: 300px;
        top: 70px;
    }

    .s2-columns {
        display: block;
        padding: 0 10px;
    }

    .s2-col-left,
    .s2-col-middle,
    .s2-col-right {
        width: 90%;
        margin: 0 auto;
        display: block;
    }

    .s2-footer .s2-footer-row {
        flex-direction: column;
        text-align: center;
    }

    .s2-footer .s2-right {
        text-align: center;
    }
}

@media only screen and (min-width: 993px) {
    .s2-nav .s2-nav-close {
        display: none;
    }
}