@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,900");

html,
body,
div,
span,
h1,
h2,
h3,
p,
a,
img,
section {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

section {
    display: block;
}

body {
    line-height: 1;
}

body {
    -webkit-text-size-adjust: none;
}

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body.is-preload *,
body.is-preload *:before,
body.is-preload *:after {
    -moz-animation: none !important;
    -webkit-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    color: #919499;
    font-size: 14pt;
    line-height: 1.75em;
    letter-spacing: 0.025em;
}

h1,
h2,
h3 {
    font-weight: 700;
    color: #484d55;
}

h1 a,
h2 a,
h3 a {
    color: inherit;
    text-decoration: none;
}

a {
    -moz-transition: color .25s ease-in-out;
    -webkit-transition: color .25s ease-in-out;
    -ms-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
    text-decoration: underline;
    color: #717479;
}

a:hover {
    text-decoration: none;
}

.container {
    margin: 0 auto;
    max-width: 100%;
    width: 68em;
}

@media screen and (max-width: 1680px) {
    .container {
        width: 70em;
    }
}

@media screen and (max-width: 1280px) {
    .container {
        width: calc(100% - 100px);
    }
}

@media screen and (max-width: 980px) {
    .container {
        width: calc(100% - 100px);
    }
}

@media screen and (max-width: 736px) {
    .container {
        width: calc(100% - 40px);
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
}

.row>* {
    box-sizing: border-box;
}

.row.aln-center {
    justify-content: center;
}

.row>.col-6 {
    width: 50%;
}

.row {
    margin-top: -50px;
    margin-left: -50px;
}

.row>* {
    padding: 50px 0 0 50px;
}

@media screen and (max-width: 1680px) {
    .row {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        align-items: stretch;
    }

    .row>* {
        box-sizing: border-box;
    }

    .row.aln-center {
        justify-content: center;
    }

    .row {
        margin-top: -50px;
        margin-left: -50px;
    }

    .row>* {
        padding: 50px 0 0 50px;
    }
}

@media screen and (max-width: 1280px) {
    .row {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        align-items: stretch;
    }

    .row>* {
        box-sizing: border-box;
    }

    .row.aln-center {
        justify-content: center;
    }

    .row {
        margin-top: -35px;
        margin-left: -35px;
    }

    .row>* {
        padding: 35px 0 0 35px;
    }
}

@media screen and (max-width: 980px) {
    .row {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        align-items: stretch;
    }

    .row>* {
        box-sizing: border-box;
    }

    .row.aln-center {
        justify-content: center;
    }

    .row>.col-12-medium {
        width: 100%;
    }

    .row {
        margin-top: -50px;
        margin-left: -50px;
    }

    .row>* {
        padding: 50px 0 0 50px;
    }
}

@media screen and (max-width: 736px) {
    .row {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        align-items: stretch;
    }

    .row>* {
        box-sizing: border-box;
    }

    .row.aln-center {
        justify-content: center;
    }

    .row {
        margin-top: -30px;
        margin-left: -30px;
    }

    .row>* {
        padding: 30px 0 0 30px;
    }
}

section {
    margin: 0 0 4em 0;
}

section> :last-child,
section:last-child {
    margin-bottom: 0;
}

.image {
    display: inline-block;
}

.image img {
    display: block;
    width: 100%;
}

.image.featured {
    display: block;
    width: 100%;
    margin: 0 0 2em 0;
}

.feature-list {
    max-width: 58em;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 0.75em;
}

.feature-list section {
    border-top: solid 1px #eee;
    padding-top: 3em;
    padding-left: 5em;
    position: relative;
}

@media screen and (min-width: 981px) {
    .feature-list>.row> :nth-child(-n + 2)>section {
        border-top: 0;
        padding-top: 0;
    }
}

.feature-list h3 {
    color: #e97770 !important;
    margin: -0.35em 0 0.75em 0;
    font-size: 1.15em;
    letter-spacing: 0.05em;
}

.feature-list h3:before {
    display: block;
    color: #fff;
    background: #2f333b url("images/overlay.png");
    border-radius: 2.5em;
    text-align: center;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    margin-right: 0.75em;
    position: absolute;
    left: 0;
    margin-top: -0.5em;
}

.icon {
    text-decoration: none;
}

.icon:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    text-transform: none !important;
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
}

.icon:before {
    line-height: inherit;
    font-size: 1.25em;
}

.icon>.label {
    display: none;
}

.icon.solid:before {
    font-weight: 900;
}

.icon.brands:before {
    font-family: 'Font Awesome 5 Brands';
}

.wrapper {
    position: relative;
    padding: 6em 0 9em 0;
}

.wrapper .title {
    position: absolute;
    top: 0;
    left: 50%;
    text-align: center;
    text-transform: uppercase;
    display: block;
    font-weight: 700;
    letter-spacing: 0.25em;
    font-size: 1.2em;
    width: 25em;
    height: 3.25em;
    top: -3.25em;
    line-height: 3.25em;
    margin-bottom: -3.25em;
    margin-left: -12.5em;
    padding-top: 0.5em;
}

.wrapper .title:before {
    content: '';
    position: absolute;
    bottom: -38px;
    left: -35px;
    width: 35px;
    height: 38px;
    background: url("images/shadow.png");
}

.wrapper .title:after {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
    content: '';
    position: absolute;
    bottom: -38px;
    right: -35px;
    width: 35px;
    height: 38px;
    background: url("images/shadow.png");
}

.wrapper.style3 {
    background: #f3f3f3 url("images/overlay.png");
}

.wrapper.style3 .title {
    background: #f3f3f3 url("images/overlay.png");
    color: #484d55;
}

.wrapper.style3 .image {
    border: solid 10px #fff;
}

#page-wrapper>section {
    margin-bottom: 0;
}

#header {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    position: relative;
    height: 24em;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../../images/featured_game.jpg") center center;
    background-size: cover;
    padding: 0;
}

#header:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.homepage #header {
    height: 24em;
    padding-bottom: 6em;
}

#logo {
    width: 100%;
    text-align: center;
    position: relative;
}

#logo h1 {
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    font-size: 2em;
    letter-spacing: 0.25em;
}

#logo p {
    color: #eee;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    margin: 1.25em 0 0 0;
    display: block;
    letter-spacing: 0.2em;
    font-size: 0.9em;
}

#highlights .highlight {
    text-align: center;
}

#highlights .highlight h3 {
    color: #dadde0;
    margin: 0 0 0.75em 0;
    font-size: 1.15em;
    letter-spacing: 0.05em;
}

#footer {
    background: #282b34 url("images/overlay.png");
    color: #eee;
    color: rgba(255, 255, 255, 0.5);
    padding-bottom: 24px;
}

#footer h1,
#footer h2,
#footer h3,
#footer a {
    color: #fff;
}

#footer .title {
    background: #282b34 url("images/overlay.png");
    color: #eee;
}

#footer .feature-list {
    max-width: 100%;
}

#footer .feature-list section {
    border-top-color: rgba(255, 255, 255, 0.05);
}

#footer .feature-list h3:before {
    background: #3d4249 url("images/overlay.png");
}

#copyright {
    text-align: center;
    padding-top: 2em;
    margin-top: 2em;
    border-top: solid 1px rgba(255, 255, 255, 0.05);
}

#copyright a {
    color: inherit;
}

#copyright a:hover {
    color: #fff;
}

@media screen and (max-width: 1680px) {
    body {
        font-size: 12pt;
    }
}

@media screen and (max-width: 1280px) {
    body {
        font-size: 11pt;
        line-height: 1.5em;
        letter-spacing: 0.015em;
    }

    .wrapper {
        padding: 4em 0 7em 0;
    }

    #logo {
        margin-top: -0.5em !important;
    }

    #logo h1 {
        font-size: 1.75em;
    }

    #footer {
        padding-bottom: 48px;
    }

    #copyright {
        padding-top: 4em;
        margin-top: 4em;
    }
}

#navPanel,
#titleBar {
    display: none;
}

@media screen and (max-width: 980px) {
    header br {
        display: none;
    }

    .feature-list {
        max-width: 40em;
    }

    .feature-list section {
        padding-top: 4em;
    }

    .feature-list>.row> :first-child>section {
        border-top: 0;
        padding-top: 0;
    }

    #logo {
        top: 0;
    }

    #highlights .highlight {
        max-width: 40em;
        margin-left: auto;
        margin-right: auto;
    }

    #footer .feature-list {
        border-top: solid 1px rgba(255, 255, 255, 0.05);
        padding-top: 4em;
    }
}

@media screen and (max-width: 980px) and (min-width: 737px) {
    #footer .feature-list>.row> :nth-child(2)>section {
        border-top: 0;
        padding-top: 0;
    }
}

@media screen and (max-width: 980px) {
    #page-wrapper {
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
        padding-bottom: 1px;
    }
}

@media screen and (max-width: 736px) {

    body {
        line-height: 1.5em;
        font-size: 10.5pt;
        letter-spacing: 0;
    }

        #header {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        position: relative;
        height: 14em !important;
        background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../../images/featured_game.jpg") center center;
        background-size: cover;
        padding: 0;
    }

    #logo
    {
        padding-top: 48px !important;
    }

    #header:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    h2,
    h3 {
        font-size: 1.2em;
        letter-spacing: 0.05em;
        margin: 0 0 1em 0;
    }

    section {
        clear: both;
    }

    header br {
        display: none;
    }

    .wrapper {
        padding: 3em 0 6em 0;
    }

    .wrapper .title {
        font-size: 0.9em;
        width: 18em;
        height: 2.5em;
        top: -2.5em;
        line-height: 2.5em;
        margin-bottom: -2.5em;
        margin-left: -9em;
        padding-top: 0.5em;
    }

    .wrapper .title:before,
    .wrapper .title:after {
        height: 15px;
        bottom: -15px;
        background-size: 100% 100%;
    }

    #header {
        height: 17em;
    }

    .homepage #header {
        height: 20em;
    }

    #logo {
        text-align: center;
        padding-left: 2em;
        padding-right: 2em;
    }

    #logo h1 {
        font-size: 1.5em;
        letter-spacing: 0.2em;
    }

    #logo p {
        margin: 1.25em 0 0 0;
        display: block;
        letter-spacing: 0.2em;
        font-size: 0.9em;
    }

    .feature-list section {
        padding-top: 2em;
        padding-left: 4em;
    }

    .feature-list h3:before {
        font-size: 0.9em;
    }

    #footer {
        padding-bottom: 0;
    }

    #footer .feature-list {
        border-top: 0;
        padding-top: 0;
    }

    #copyright {
        padding-top: 0;
        margin-top: 4em;
        border-top: 0;
    }

}