.no-scroll {
    margin: 0;
    height: 100%;
    overflow: hidden
}

.header-container {
    background-image: url("/img/main/header/gb_keyart_latest.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;

}


.header-container .border-gradient {
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 20%, rgba(255,255,255,0) 100%);
    height: 20px;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    display: block;
}



.header-container .site-logo h1, .header-container .site-logo h2 {
    color: rgb(11, 184, 79);
}

.gallery-item-wrapper {
    padding: 0;
    overflow: hidden;

}

.gallery-item {
    height: 380px;
    width: 100%;
    background-position: center;
    background-size: cover;
    outline: 1px solid black;
    transition-property: all;
    transition-timing-function: ease;
    transition-duration: 0.3s;
    transition-delay: 0s;
    color: aliceblue;
}

.gallery-item-text {
    position: absolute;
    color: aliceblue;
    bottom: 1em;
    left: 1em;
    display: none;
    pointer-events: none;
}

.gallery-item-wrapper .gallery-item-play {
    color: aliceblue;
    opacity: 0.3;
    position: absolute;
    top: 50%;
    left: 47%;
    pointer-events: none;
}

.gallery-item-wrapper:hover .gallery-item-play {
    opacity: 1;
    color: white;
    position: absolute;
    top: 50%;
    left: 47%;
    pointer-events: none;
}

.gallery-item:before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition-property: all;
    transition-timing-function: ease;
    transition-duration: 0.3s;
    transition-delay: 0s;
    cursor: pointer;
    background-color: transparent;
}

.gallery-item-wrapper:hover .gallery-item:before,
.gallery-item-wrapper:focus .gallery-item:before {
    background-color: rgba(92, 255, 83, 0);
}

.gallery-item-wrapper:hover .gallery-item-text,
.gallery-item-wrapper:focus .gallery-item-text {
    display: block;
}

.gallery-item:hover, .gallery-item:focus {
    transform: scale(1.1);
}

.gallery-item-video {

}

.site-navbar-hidden {
    transform: matrix(1, 0, 0, 1, 0, -85);
}

/* Navbar Container*/
.site-navbar {
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), transparent);
    height: 82px;
    width: 100%;
    position: fixed;
    transition-property: all;
    transition-timing-function: ease;
    transition-duration: 0.5s;
    transition-delay: 0s;
    color: aliceblue;
    z-index: 10 !important;
}

.site-navbar-mobile {

}

.site-navbar-desktop {

}
/* Navbat Container*/

/* <Sidebar Toggle Button> */
.btn-sidebar-toggle {

    cursor: pointer;
    width: 50px;
    height: 50px;
    z-index: 20;
    display: inline-block;
}

.btn-sidebar-toggle span, .btn-sidebar-toggle span:before, .btn-sidebar-toggle span:after {
    border-radius: 1px;
    height: 3px;
    width: 35px;
    background: white;
    position: absolute;
    display: block;
    content: '';
}

.btn-sidebar-toggle span:before {
    width: 45px;
    top: -10px;
}

.btn-sidebar-toggle span:after {
    width: 20px;
    bottom: -10px;
}

.btn-sidebar-toggle span, .btn-sidebar-toggle span:before, .btn-sidebar-toggle span:after {
    transition: all 500ms ease-in-out;
}

.btn-sidebar-toggle.active span {
    background-color: transparent;
}

.btn-sidebar-toggle.active span:before, .btn-sidebar-toggle.active span:after {
    top: 50%;
}

.btn-sidebar-toggle.active span:before {
    width: 35px;
    transform: rotate(45deg);
}

.btn-sidebar-toggle.active span:after {
    width: 35px;
    transform: rotate(-45deg);
}
/* </Sidebar Toggle Button> */


/* Sidebar */
.sidebar-container {
    height: 100vh;
    position: absolute;
    z-index: 3;
    display: none;
}

.sidebar-container .sidebar {
    height: 100vh;
    background-color: #262626;
}

.sidebar-container .sidebar-background {
    background-color: #343434;
    opacity: 0.7;
}

.mobile-menu {
    color: white;
    margin-top: 100px;
    list-style: none;
    padding: 0;
}

.mobile-menu li {
    text-align: center;

    font-size: 2em;
}

.mobile-menu a{
    color: white;
}

.mobile-menu a:hover {
    text-decoration: none;

}

.mobile-menu a.menu-btn-buy {
    font-size: 1em !important;
    margin-top: .3em;
}
/* Sidebar */


/*Desktop menu*/
.desktop-menu {
    color: white;
    position: absolute;
    display: block;
    bottom: 5em;
    right: 1em;

}

.btn-common {
    color: white;

    background-color: #25935e;
}

.btn-buy {

}

.desktop-menu .buttons {

    overflow: hidden;
}
/*Desktop menu*/

.about-switch-container {
    background-color: #343434;
    color: aliceblue;
}

/* About container */

.about-container {
    background-color: #000000;
    color: aliceblue;
}

/* About container */


/* Features container */

.features-container {
    background-color: #000000;
    color: aliceblue;
}

.color-ghostbusters {
    color: #25935e
}

/* Features container */

/* Footer */
.footer-container {
    background-color: #000000;
    color: aliceblue;
}
/* Footer */


/* Navbar */
.btn-navbar {
    margin: 0 0.5em;
    background-color: rgba(100, 108, 102, 0.3);
}
/* Navbar */


/* Lang switcher */
.lang {
    position: relative;
    text-align: center;
}

.lang-selector {

}

.lang__current {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    position: relative;
    text-align: right;
    color: #fff;
    cursor: pointer;

}

.lang__current:hover {
    color: #eee;
}

.lang__current img {
    margin-left: 9px;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 100;
}

.lang.shown .lang__list {
    display: block;
}

.lang__list {
    position: absolute;
    display: none;
    width: 214px;
    top: -webkit-calc(100% + 15px);
    top: calc(100% + 15px);
    padding: 7px 0;
    right: -4px;
    -webkit-box-shadow: 0 10px 14px rgba(1, 45, 21, 0.12);
    box-shadow: 0 10px 14px rgba(1, 45, 21, 0.12);
    background: #191919;
}

.lang__item {
    padding: 8px 22px 14px 31px;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    font-family: "Segoe UI", Arial, sans-serif;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.lang__item:hover {
    background: #0a0a0a;
}

.lang__item.current {
    display: none;
}

.flag-icon-wwz {
    height: 1.5em;
    width: 2.5em;
}
/* Lang switcher */


/* Footer */
.social-link {
    color: rgb(11, 184, 79);
}

.social-link:hover {
    color: #ffffff
}

.footer-container a{
    color: rgb(11, 184, 79);
}



.esrb img {
    max-width: 130px;
}

.pegi img {
    max-width: 80px;
}

.rating-long img {
    max-width: 200px;
}

.rating-esrb img {
    max-width: 180px;
}

.rating-sm img {
    max-width: 80px;
}

.platforms-wrapper {

}

.platform-item {

}
/* Footer */


/* Gallery modal */
.gallery-modal {
    width: 100%;
    height: 100vh;
    background-color: #343434;
    position: fixed;
    z-index: 99;
    display: block;
    top: 0;
    padding: 1em;
    color: aliceblue;
    display: none;
}

.gallery-modal .content-wrapper {
    height: 95vh;

}

.gallery-modal .content {
    width: 90%;
    height: 90vh;
    overflow: auto;

}

.gallery-modal .content .embed-responsive {
    height: 90%;
}

.gallery-modal .content .embed-img {
    height: 90%;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
}

.gallery-modal .content .embed-img img {

}

.close-btn {
    position: absolute;
    display: inline-block;
    top: 1em;
    right: 2em;
    z-index: 100;
    cursor: pointer;
}
/* Gallery modal */

.header-container .site-logo {
    width: 100%;
    height: 200px;
    bottom: 40px;
    position: absolute;
    margin-left: -15px;
}

@media (min-width: 576px) {
    .header-container .site-logo {
        width: 100%;
        height: 200px;
        bottom: 100px;
        position: absolute;
        margin-left: -15px;
    }
}

@media (min-width: 768px) {
    .header-container .site-logo {
        width: 100%;
        height: 200px;
        bottom: 40px;
        position: absolute;
        margin-left: -15px;
    }
}

@media (min-width: 992px) {
    .header-container .site-logo {
        width: 100%;
        height: 200px;
        bottom: 100px;
        position: absolute;
        margin-left: -15px;
    }
    .gallery-item:before {
        background-color: rgba(125, 133, 128, 0.66);
    }
    .gallery-modal .content {
        width: 90%;
        padding-top: 0;
    }
}

@media (min-width: 1200px) {
    .header-container .site-logo {
        width: 100%;
        height: 200px;
        bottom: 180px;
        position: absolute;
        margin-left: -15px;
    }
    .gallery-item:before {
        background-color: rgba(125, 133, 128, 0.51);
    }

    .gallery-modal .content {
        width: 90%;
        padding-top: 0;

    }
}