
.fancybox__container {
    z-index: 9999;
}
.fancybox__content {
    width: 100% !important;
    height: 100% !important;
}

section#available-now {
    background-image: url('https://cdn.cloudflare.steamstatic.com/steamdeck/images/hero_availableNow_bg.jpg');
    background-repeat: no-repeat;
    background-color: #f0f0f0;
    background-size: auto 100%;
    background-position: top center;
    padding-bottom: 0;
}
section#available-now .content {
    padding-bottom: 2em;
    background-image: url('https://cdn.cloudflare.steamstatic.com/steamdeck/images/ver2/overview_dock_back.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: auto 14em;
}
section#available-now .gridrow.head div {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: 4em;
}
section#available-now h1 {
    margin-bottom: 0;
    margin-left: 0;
}
section#available-now .gridrow.head button {
    margin-bottom: 0.3em;
}
section#available-now .deck-video-frame {
    background-image: url('https://cdn.cloudflare.steamstatic.com/steamdeck/images/hero_availableNow_deck.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
    overflow: hidden;
    width: 88vw;
    max-width: 73.45em;
    height: 24.47796vw;
    max-height: 20.4307518em;
    margin-bottom: 6em;
}

section#available-now .deck-video-frame .videocontainer {
    position: absolute;
    background: transparent;
    width: 30.65vw;
    top: 2.45vw;
    left: 29.2vw;
}
section#available-now .deck-video-frame .videocontainer video {
    background: transparent;
}

@media screen and (min-width: 1420px) {
    section#available-now .deck-video-frame .videocontainer {
        width: 25.6em;
        top: 2.05em;
        left: 24.4em;
    }
}

@media screen and (max-width: 700px) {
    section#available-now {
        background-position: top center;
        background-size: 110% 80%;
    }
    section#available-now .content {
        padding-bottom: 1em;
    }
    section#available-now h1 {
        font-size: 4em;
    }
    section#available-now .gridrow.head div {
        margin-bottom: 2em;
        display: block;
    }
    section#available-now .deck-video-frame {
        left: 50%;
        transform: translateX(-50.5%);
        width: 43em;
        height: 12em;
        margin-bottom: 3em;
    }
    section#available-now .deck-video-frame .videocontainer {
        width: 14.76em;
        top: 1.26em;
        left: 14.4em;
    }
    section#available-now .gridrow.dock .copy {
        margin-bottom: 10em;
    }
}

section#available-now .gridrow .cta {
    display: flex;
    align-items: center;
}

section#topfeature .button-container {
    margin-top: 1em;
}

.ver2 section#topfeature {
    padding-top: 1em;
    padding-bottom: 1.5em;
}

.ver2 #topfeature h1 {
    margin-left: 0;
    margin-top: 0.4em;
    margin-bottom: 0.3em;
    font-size: 2.5em;
}

@media screen and ( min-width: 700px ) {
    .ver2 #topfeature h1 {
        font-size: 6em;
    }
    .ver2.en #topfeature h1 {
        font-size: 6.8em;
    }
    .ver2 #topfeature p.large {
        line-height: 1.2em;
        font-size: 1.8em;
    }
}


.ver2 #topfeature p {
    margin-bottom: 0.8em;
}
.ver2 #topfeature p.large {
    font-weight: 800;
}

.ver2 #topfeature .videocontainer {
    overflow: visible;
}

.ver2 #topfeature .feature-video {
    background-color: var(--bg-dark);
    padding: 1em 1em 0.5em 1em;
    width: 20em;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-start;
}

.ver2 #topfeature .feature-video.hide-desktop {
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
}

.ver2 #topfeature .feature-video.hide-mobile {
    position: absolute;
    z-index: 9999;
    right: 2em;
    bottom: -1em;
}
.ver2 #topfeature .feature-video p {
    color: var(--bg-light);
    font-weight: 400;
    text-align: left;
    padding-bottom: 0;
    margin-bottom: 0;
}

.ver2 #topfeature .feature-video .thumbnail img {
    width: 100%;
    margin-right: 0;
}

#pillars h1 {
    font-size: 4.7em;
}

.ver2 #pillars .selected h1 {
    color: #1b1b1b;
}

#yourlibrary2.image-backdrop {
    background-image: url('https://cdn.cloudflare.steamstatic.com/steamdeck/images/ver2/laptop_deck_english.png'), url('https://cdn.cloudflare.steamstatic.com/steamdeck/images/ver2/overview_laptopanddeck_bg.jpg');
    background-color: #110c16;
}
#experience.image-backdrop {
    background-image: url('https://cdn.cloudflare.steamstatic.com/steamdeck/images/ver2/overview_deathloop_device_english.png'), url('https://cdn.cloudflare.steamstatic.com/steamdeck/images/ver2/overview_deathloop_bg.jpg');
    background-color: #efefef;
}

@media screen and ( max-width: 700px ) {
    #experience.image-backdrop {
        background-size: auto 107%;
    }   
    section.image-backdrop .spacer {
        height: 45vw;
    }
}

@media screen and ( max-width: 1280px ) {
    #yourlibrary2 h2 br {
        display: none;
    }
    #experience p.large br {
        display: none;
    }
}

#yourlibrary2 .copy {
    margin-top: 2em;
}

@media screen and ( max-width: 700px ) {
    #yourlibrary2 h2 {
        margin-bottom: 1em;
    }
}

#feature-hollow-knight {
    background-image: url('https://cdn.cloudflare.steamstatic.com/steamdeck/images/ver2/overview_playing_hollowKnight.jpg');
}

#feature-hades {
    background-image: url('https://cdn.cloudflare.steamstatic.com/steamdeck/images/ver2/overview_hades.jpg');
}