.hardware-cover {
    width: 100%;
    background-color: #111
}

.hardware-cover-container {
    width: 100%;
    display: grid;
    grid-template-columns: 27.5% 47.5% 25%;
    grid-auto-flow: row;
}

.hardware-title {
    display: flex;
    background-color: #333;
    grid-column: 1 / span 3;
    font-size: 32px;
    height: 42px;
    padding: 5px;
    font-family: 'Raleway', sans-serif;
}
.hardware-title-text {
    position: relative;
    left: 25px;
}
.hardware-run-game-container {
    background-color: #333;
    margin: 7px 7px 7px 0;
}

.gd-rating-container {
    height: 96%;
    width: 96%;
    margin: 7px;
    display: grid;
    grid-template-rows: 20% 60% 20%;
    background-color: #333;
}

.gd-rating-score {
    height: 100%;
    background-color: #333;
    text-align: center;
}

.gd-rating-score h1 {
    font-size: 70px;
    padding: 50px;
    margin: 4px;
    text-decoration: none;
    font-weight: 300;
}

.gd-rating-text {
    height: 44px;
    background-color: #660000;
    text-align: center;
}

.gd-rating-text h3 {
    font-size: 20px;
    text-decoration: none;
    font-weight: 300;
    margin: 5px;
    padding: 5px;
}

.select2.select2-container.select2-container--default {
    width: 300px !important;
}

.gd-rating-btn {
    width: 100%;
    height: 100%;
    border: 0;
    background-color: #660000;
    cursor: pointer;
    color: white;
}
.gd-rating-btn:hover {
    background-color: #990000;
}
.gd-rating-btn:active {
    background-color: #440000;
}


.gd-form-wrapper {
    background: none !important;
}

.hardware-links-container {
    grid-row: 2 / span 3;
    grid-column: 3 / 3;
    margin: 5px 5px;
    position: relative;
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: 55px 55px auto;
}

.hardware-links {
    background-color: #333;
    grid-row: auto / span 3;
}

.hardware-links-container a {
    color: #fff;
}

.hardware-links-container a div {
    margin: 5px auto;
    padding: 5px;
    width: 90%;
    background: rgba( 103, 193, 245, 0.4);
    text-align: left;
}
.hardware-links-container a div p {
    margin: 0;
}
.thumbnail-image-container {
    width: 35px;
}
.new-button-style {
    background: rgba( 103, 193, 245, 0.4);
}
.hardware-links-container a div:hover, .new-button-style:hover {
    background: linear-gradient(90deg, #1B4F72 0%,#417a9b 100%);
}

.hardware-description-row {
    grid-column: 1 / span 2;
    background-color: #333333;
    margin: 5px;
    display: grid;
    grid-template-columns: 80% 20%;
}
.hardware-description {
    padding: 10px 0px 10px 7px;
}

.fps-figure-container {
    width: 100%;
    grid-column: 2/2;
}

.hardware-title:hover .hardware-image{
    position: relative;
    z-index: 999;
    height: 40px;
    display: table-cell;
    vertical-align: middle;
}

.hardware-image {
    z-index: 9;
    position: relative;
    height: 35px;
    top: 3px;
    left: 0;
    transform-origin: top left;
    -webkit-transition: 300ms ease-in-out;
    -moz-transition: 300ms ease-in-out;
    -ms-transition: 300ms ease-in-out;
    -o-transition: 300ms ease-in-out;
    transition: 300ms ease-in-out;
}
.hardware-title:hover .hardware-image {
    position: relative;
    z-index: 999;
    transform-origin: top left;
    box-shadow: 0 0 10px 5px #000;
    transform: scale(7,7);
    top: 90px;
    left: 20px;
    border: 3px solid #fff;
}

.slide-out-container {
    width: 500px;
    height: 400px;
    z-index: 999;
    position: absolute;
    background: linear-gradient( to bottom, #e3eaef 5%, #c7d5e0 95%);
    right: 100%;
    display: none;
    overflow: hidden;
    overflow-wrap: normal;
    transition: 200ms ease-in-out;
}
.slide-out-container:hover {
    display: block;
}

.tipsy, .tipsy-n {
    display: block !important;
    pointer-events: none;
}

.variants-btn {
    grid-row: 1;
}
.variants-btn svg {
    transform: rotate(180deg);
    fill: white;
}

.variants-container {
    color: #000;
    padding: 10px;
}

.series-container {
    color: #000;
    padding: 10px;
    margin-top: 55px;
}

.series-btn {
    grid-row: unset;
}
.series-btn svg {
    transform: rotate(180deg);
    fill: white;
}

.slide-out-inner{
    display: block;
    overflow: hidden;
}
.slide-out-inner div {
    display: block;
    margin: 5px 0;
}

.variants-container .slide-out-inner, .series-container .slide-out-inner {
    overflow-y: scroll;
    height: 100%;
}
#systemRequirementsMainTitle {
    margin: 0 0 20px 0;
    font-weight: 700;
}

.enable-opacity { opacity: 0.6;}
.enable-opacity:hover {opacity: 0.9;}

.release-date-container {
    background-color: #640202 !important;
    width: 96%;
    padding: 1% 2%;
    font-size: 16px;
}

.componentContainer {
    padding: 0 !important;
}

.variant-link {
    color: #000 !important;
}

.variant-link:hover {
    color: #0a54a5 !important;
}

.variant-link:active {
    color: #0A246A !important;
}

.gpu-fps-main-container {
    width: 100%;
}

@keyframes slidePanelIn {
    0% {width: 0;}
    75%{width: 475px;}
    100%{width: 500px;}
}
@keyframes slidePanelOut {
    0% {width: 500px; display: block;}
    75%{width: 25px;}
    100%{width: 0;display: none;}
}
@keyframes slidePanelInMobile {
    0% {height: 0;}
    75%{height: 275px;}
    100%{height: 300px;}
}
@keyframes slidePanelOutMobile {
    0% {height: 300px; display: block;}
    75%{height: 25px;}
    100%{height: 0;display: none;}
}
@keyframes growPackshot {
    0% {
        top: 0;
    }
    100% {
        top: 90px;
        transform: scale(7,7);
        transform-origin: top left;
        box-shadow: 0 0 5px 1px #000;
    }
}
.gd-header { display: none !important; }
.new-widget-header {
    width: 96.1%;
    background-color: #640202;
    padding: 1% 2%;
}

@media (min-width: 769px) {
    .new-button-style:hover + .slide-out-container {
        animation: slidePanelIn 200ms ease-in-out;
        animation-fill-mode: backwards;
        display: grid;
    }
}

@media (max-width: 768px) {

    .hardware-title-text {
        font-size: 22px;
    }

    .hardware-cover-container {
        width: 100%;
        display: grid;
        grid-template-columns: 100%;
        grid-auto-flow: row;
    }

    .hardware-links-container {
        grid-row: 2 / 2;
        grid-column: 1 / 1;
        margin: 10px 5px;
    }

    .gd-rating-container {
        grid-row: 3 / 3;
        grid-template-rows: 30px 75px;
    }

    .hardware-title {
        height: auto;
        width: calc(100% - 10px);
        text-align: center;
    }

    .hardwarePageBoxBtm {
        font-size: 14px;
    }

    .systemRequirementWidgetTbl {
        font-size: 14px;
    }

    .hardware-title-text {
        left: 0;
    }

    .hardware-run-game-container {
        grid-row: 4 / 4;
        background-color: #333;
        margin: 10px 5px;
    }

    .select2.select2-container.select2-container--default {
        width: 100% !important;
    }

    .hardware-description-row {
        -ms-grid-columns: 100%;
        grid-template-columns: 100%;
        grid-row: 5/5;
    }

    .hardware-description {
        text-align: center;
        padding: 10px 10px 10px 7px;
    }

    .hardware-description-row .fps-figure-container {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 2;
        grid-row: 2;
    }

    .thumbnail-image-container {
        display: none;
    }

    .gd-rating-text {
        grid-row: 1 / 1;
        height: 100%;
    }

    .gd-rating-text {
        font-size: 20px;
    }

    .gd-rating-score {
        grid-row: 2 / 2;
        padding: 0;
    }
    .gd-rating-score h1 {
        padding: 8px;
        font-size: 40px;
    }

    .hardware-links-container a div {
        margin: 7px auto;
        padding: 10px;
        width: 90%;
        background: rgba( 103, 193, 245, 0.4);
        text-align: left;
    }

    #gambody {
        display: block;
        width: 100%;
    }
    .g_wrapper {
        display: block;
    }
    .hardware-right-column {
        width: 100%;
        box-shadow: none;
    }

    .variants-container, .series-container {
        right:0;
        top: 50px;
        width: calc(100% - 20px);
        height: 300px;
     }

    .variants-container-open, .series-container-open {
        animation: slidePanelInMobile 200ms ease-in-out;
        animation-fill-mode: backwards;
        display: grid;
    }
}