@media screen and (max-width: 1370px) {
    .outer-wrap {
        width: 1240px
    }

    .content {
        padding: 0 12px 0 15px
    }

    .content .left-column {
        width: 912px
    }

    .content .right-column {
        width: 286px
    }

    .three-column-content .left-column, .three-column-content .mid-column, .three-column-content .right-column {
        width: 230px
    }

    .article, .article-content-container, .inner-wrap, .main-navigation, .main-navigation .redbutton, .main-navigation .redbutton:hover, .my-uoll-content, .my-uoll-content .title-container, .my-uoll-content .title-wrapper, .my-uoll-content h1, .my-uoll-content h2, .my-uoll-content-container, .my-uoll-content-wrapper, .myuoll-container, .myuoll-container .article, .myuoll-container .article-content-container, .myuoll-search-container, .wood-button-bg {
        background-size: contain
    }

    .my-uoll-content h1, .my-uoll-content h2 {
        line-height: 56px
    }

    .slide-content img {
        width: 100%
    }

    .hero-slider {
        height: auto
    }

    .hero-slider img {
        display: block;
        width: 100%
    }

    .article-content-container img {
        max-width: 100%
    }

    .right-column-title, .right-column-title.red {
        width: 270px;
        line-height: 52px;
        font-size: 16px;
        background-size: cover
    }

    .right-column-content .right-column {
        width: 70px
    }

    .right-column-content .left-column {
        width: 150px
    }

    .wood-button-bg {
        width: 290px;
        line-height: 80px
    }

    .news-teaser-content .right-column {
        width: 560px
    }

    .right-column .green-button {
        background-size: cover;
        vertical-align: middle;
        width: 246px;
        height: 44px;
        padding-top: 20px;
        line-height: 28px;
        font-size: 17px;
        margin-bottom: 4px
    }

    .right-column .green-button img {
        top: 4px;
        left: 10px
    }

    nav .right-column {
        width: 286px
    }

    .main-navigation .redbutton {
        width: 115px;
        padding-top: 36px
    }

    .main-navigation {
        height: 65px
    }

    .inner-wrap.fixed {
        padding-top: 89px
    }

    .inner-wrap.fixed .main-navigation {
        width: 1216px
    }

    .main-navigation .redbutton .icon-home {
        top: -18px;
        right: 37px
    }

    .main-navigation .redbutton .icon-about {
        top: -10px;
        right: 34px
    }

    .main-navigation .redbutton .icon-forums {
        top: -19px;
        right: 37px
    }

    .main-navigation .redbutton .icon-irc {
        top: -18px;
        right: 36px
    }

    .main-navigation .redbutton .icon-myuo {
        top: -12px;
        right: 38px
    }

    .main-navigation .redbutton .icon-events {
        top: -14px;
        right: 39px
    }

    .main-navigation .redbutton .icon-support {
        top: -5px;
        right: 35px
    }

    .screenshot-of-day a, .screenshot-of-day a img {
        width: 246px;
        height: auto
    }

    .dropdown-container {
        top: 56px
    }

    .clientimg {
        width: 380px
    }

    .myuoll-search-container {
        width: 912px;
        height: 222px
    }

    .myuoll-search-container input[type=text] {
        width: 590px
    }

    .myuoll-search-container .search {
        left: 107px;
        width: 703px
    }

    .main-navigation .green-button {
        margin: 5px 22px
    }

    .article-content-container {
        padding: 45px 50px
    }

    .my-uoll-content {
        padding: 75px 67px
    }

    .news-teaser-content .left-column {
        width: 216px
    }

    .my-uoll-content .left-column {
        width: 275px
    }

    .my-uoll-content .right-column {
        width: 320px
    }

    .play-now .left-column {
        width: 395px
    }
}

@media screen and (max-width: 650px) {
    .content .left-column, .content .right-column, .intro-left-column, .intro-right-column, .left-column, .right-column {
        float: none;
        width: auto
    }

    .hero-slider, .search-container {
        display: none
    }

    .intro-right-column img {
        margin: auto
    }

    .top {
        height: auto
    }

    .outer-wrap {
        width: auto
    }

    .inner-wrap.fixed {
        padding-top: 0
    }

    .right-column-content ul .right-column {
        float: right
    }

    .right-column-content ul .left-column {
        float: left
    }

    .inner-wrap {
        background: 0 0
    }

    body {
        background-size: contain;
        background-attachment: inherit
    }

    .right-column-title, .right-column-title.red {
        margin: 10px auto
    }

    .right-column-content {
        padding: 0 40px
    }

    .wood-button-bg {
        margin: auto
    }

    .footer {
        background: #070707;
        margin-top: 20px
    }

    .featured-image {
        padding: 15px 0;
        border-top: 1px solid #C3B09C
    }

    .three-column-content .mid-column {
        width: auto
    }

    .three-column-content .left-column, .three-column-content .mid-column, .three-column-content .right-column {
        padding: 0;
        float: none
    }

    .news-teaser-content {
        margin-bottom: 10px
    }

    .inner-wrap.fixed .main-navigation {
        width: auto;
        position: static;
        padding: 0
    }

    .main-navigation {
        height: auto;
        padding: 0
    }

    .screenshot-of-day a {
        width: auto;
        margin: auto
    }

    .screenshot-of-day a img {
        width: 100%
    }

    .logo-container img {
        width: 100%;
        margin: auto;
        display: block
    }

    .logo-container {
        margin: auto;
        float: none;
        padding: 20px 15px
    }

    nav .right-column {
        margin: auto;
        width: auto;
        float: none
    }

    .play-now .play-now-content {
        padding: 24px;
        text-align: center
    }

    .step-container {
        font-size: 50px
    }

    .main-navigation li + li {
        display: none
    }

    .step-container .blue-button, .step-container .step-heading, .step-container span {
        float: none;
        display: inline-block;
        margin: 0;
        padding: 0
    }

    .article-content-container h2 {
        padding-top: 0
    }

    .main-navigation .mobile-button, .main-navigation .redbutton {
        width: auto;
        height: auto;
        border-top: 1px solid #170100;
        border-bottom: 1px solid #660604;
        border-left: 1px solid #170100;
        border-right: 1px solid #660604
    }

    .main-navigation .mobile-button {
        padding: 15px;
        background: #5F0000;
        color: #fff;
        text-align: center;
        font-size: 25px;
        display: block
    }

    .main-navigation li {
        background: 0 0;
        width: auto;
        float: none
    }

    .main-navigation .redbutton {
        background: #380302;
        padding: 15px
    }

    .main-navigation {
        background: 0 0
    }

    .main-navigation .redbutton:hover {
        background: #6a0202
    }

    .main-navigation .redbutton img {
        display: none
    }

    .main-navigation .right-column {
        clear: both;
        padding: 15px
    }

    .blue-container {
        background: #003162
    }

    .dropdown-container {
        position: static;
        width: auto;
        background: #F4E4D4;
        display: none;
        box-shadow: none;
        padding: 0
    }

    .dropdown-container .dropdown {
        width: auto;
        background: 0 0;
        padding: 6px;
        display: block
    }

    .dropdown:after, .dropdown:before {
        display: none
    }

    .dropdown ul {
        padding: 0
    }

    .main-navigation .green-button {
        margin: auto
    }

    .main-navigation li .fa-caret-down {
        display: inline-block;
        margin-left: 10px
    }

    .clientimg {
        position: static
    }

    .myuoll-search-container {
        width: auto;
        height: auto;
        background: #333;
        padding: 10px;
        margin-top: 15px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .article-content-container, .my-uoll-content, .my-uoll-content-container, .myuoll-container, .myuoll-container .article, .myuoll-container .article-content-container {
        background: 0 0
    }

    .myuoll-search-container .search {
        position: static;
        width: auto;
        margin: auto
    }

    .my-uoll-content .title-container, .my-uoll-content .title-wrapper, .my-uoll-content h1, .my-uoll-content h2 {
        background: 0 0;
        line-height: normal
    }

    .myuoll-search-container input[type=submit], .myuoll-search-container input[type=text] {
        width: 100%;
        float: none;
        margin-bottom: 5px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .article-content-container {
        padding: 0;
        border: none
    }

    .my-uoll-content {
        padding: 0;
        margin-top: 15px
    }

    .blue-container {
        display: none
    }

    .myuoll-table-nav {
        width: auto;
        display: block;
        margin-bottom: 15px
    }

    .character-portrait {
        width: auto;
        height: auto;
        border: 6px solid #2e2d2a;
        background: #000;
        margin: 20px 0 10px;
        padding-bottom: 25px
    }

    .character-portrait img {
        display: block;
        margin: auto;
        position: static
    }

    .article, .myuoll-container .article {
        background: #F4E4D4;
        padding: 20px
    }

    .myuoll-table-nav, .title-positon {
        background: #2e2d2a
    }

    .content {
        padding: 0
    }

    .myuoll-table-nav:after {
        content: '';
        clear: both;
        display: block
    }

    .myuoll-table-nav a {
        display: block;
        float: left;
        width: 10.5%
    }

    .title-positon {
        position: static;
        padding: 10px;
        width: auto
    }

    .my-uoll-content-wrapper {
        background: 0 0
    }

    .uoll-table-overflow {
        overflow-x: auto;
        max-width: 100%;
        border-right: 1px dashed #841f22
    }

    .myuoll-container .article-content-container {
        min-height: 0
    }

    .filter .left, .filter .right {
        float: none
    }

    #resultNavigation {
        padding-top: 8px
    }

    .myuoll-table.bestiary {
        display: table
    }
}