@charset "UTF-8";

/* STYLE SHEET */

:root {
    
    /* This default value of 100vh will be replaced with value of window.innerHeight using the JavaScript below on document load: */
    
    /* document.documentElement.style.setProperty('--vh', window.innerHeight + 'px'); */
    
    --vh: 100vh;
}

* {
  box-sizing: border-box;
}

html, body {
    /*-webkit-overflow-scrolling: touch;*/ /* hack for iphone viewport overriding overflow-x when applied to body tag only */
    overflow-x: hidden;
}

/* branded selection color hack */

::selection {
  background: #76b900; /* WebKit/Blink */
}

::-moz-selection {
  background: #76b900; /* Gecko */
}

/* MINECRAFT RTX SLIDE SYSTEM */

.nowrap {
    white-space: nowrap;
}

body {
	color: #fff;
	margin: 0;
	padding: 0;
	background-color: #000;
}


/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

/* MINECRAFT RTX: ALL RESPONSIVE BREAKPOINTS :: INIT                                                                                                                        */

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

.kv-minecraft-container {
    width: 100vw;
    height: 100vh;
    background-color: #081838;
    /*cursor: ns-resize;*/
}

#minecraft-logo {
    text-shadow: 1px 1px 8px rgba(0,0,0,0.75);
}

#minecraft-availability {
    text-shadow: 1px 1px 8px rgba(0,0,0,0.3);
}

/* -------------------------------------------------------------------------------------------------*/
/* MINECRAFT RTX: IMPOSSIBLY SMALL < 320 :: ALL ORIENTATIONS                                        */
/* -------------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 319px) {
    
    .kv-minecraft-container {
        background-image: url(/content/dam/en-zz/Solutions/geforce/campaigns/minecraft-with-rtx/hero-v2/minecraft-kv-v2-bottom-parallax-0-mobile.jpg);
        text-shadow: 0px 0px 8px rgba(10, 40, 90, 1);
        /*background: -moz-linear-gradient(top, rgba(10,40,90,1) 0%, rgba(10,40,90,1) 50%, rgba(10,40,90,0) 70%, rgba(10,40,90,0) 100%), url(/content/dam/en-zz/Solutions/geforce/campaigns/minecraft-with-rtx/hero-v2/minecraft-kv-v2-bottom-parallax-0-mobile.jpg), #081838;
        background: -webkit-linear-gradient(top, rgba(10,40,90,1) 0%, rgba(10,40,90,1) 50%, rgba(10,40,90,0) 70%, rgba(10,40,90,0) 100%), url(/content/dam/en-zz/Solutions/geforce/campaigns/minecraft-with-rtx/hero-v2/minecraft-kv-v2-bottom-parallax-0-mobile.jpg), #081838;
        background: linear-gradient(to bottom, rgba(10,40,90,1) 0%, rgba(10,40,90,1) 50%, rgba(10,40,90,0) 70%, rgba(10,40,90,0) 100%), url(/content/dam/en-zz/Solutions/geforce/campaigns/minecraft-with-rtx/hero-v2/minecraft-kv-v2-bottom-parallax-0-mobile.jpg), #081838;*/
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100vw;
        min-height: 420px;
        min-height: calc(100vw * 1.33);
    }
    
    #minecraft-with-rtx {
        position: relative;
        width: 100%;
        height: auto;
        top: calc(100vw * 0.46);
    }
    
    #minecraft-logo {
        position: relative;
        width: calc(100vw - 10px);
        height: calc(100vw * 0.2433333333333333);
        margin: 0 auto;
    }
    
    #minecraft-availability {
        position: relative;
        width: 100%;
        height: auto;
        font-family: GeForce;
        font-weight: bold;
        font-size: 12px;
        font-size: 6.6vw;
        line-height: 1em;
        color: #ffffff;
        text-align: center;
        padding-top: 12px;
    }
}



/* -------------------------------------------------------------------------------------------------*/
/* MINECRAFT RTX: SMALL MOBILE BREAKPOINT 320-639 :: ALL ORIENTATIONS                               */
/* -------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 320px) and (max-width: 639px) {
    
    .kv-minecraft-container {
        background-image: url(/content/dam/en-zz/Solutions/geforce/campaigns/minecraft-with-rtx/hero-v2/minecraft-kv-v2-bottom-parallax-0-mobile.jpg);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 768px;
        min-height: 568px;
    }
    
    #minecraft-with-rtx {
        position: relative;
        width: 100%;
        height: auto;
        top: 145px;
        transition: all 0.1s ease-out;
    }
    
    #minecraft-logo {
        position: relative;
        width: 300px;
        height: 73px;
        margin: 0 auto;
    }
    
    #minecraft-availability {
        position: relative;
        width: 100%;
        height: auto;
        font-family: GeForce;
        font-weight: bold;
        font-size: 18px;
        line-height: 1em;
        color: #ffffff;
        text-align: center;
        
        padding-top: 15px;
    }
    
    .intro-copy {
        font-family: DINPro;
        font-size: 16px;
        line-height: 1.5em;
        font-weight: 100;
        color: #eee;
    }
    
    .green-divider {
        height: 3px !important;
    }
    
}


/* -------------------------------------------------------------------------------------------------*/
/* MINECRAFT RTX: SMALL MOBILE BREAKPOINT 320-639 :: ALL ORIENTATIONS & HEIGHT > 640                */
/* -------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 320px) and (max-width: 639px) and (min-height: 640px) {
    
    .kv-minecraft-container {
        background-image: url(/content/dam/en-zz/Solutions/geforce/campaigns/minecraft-with-rtx/hero-v2/minecraft-kv-v2-bottom-parallax-0-mobile.jpg);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 768px;
        min-height: 568px;
    }
    
    #minecraft-with-rtx {
        position: relative;
        width: 100%;
        height: auto;
        top: 145px;
        top: calc(40vh - 73px);
        transition: all 0.1s ease-out;
    }
    
    #minecraft-logo {
        position: relative;
        width: 300px;
        height: 73px;
        margin: 0 auto;
    }
    
    #minecraft-availability {
        position: relative;
        width: 100%;
        height: auto;
        font-family: GeForce;
        font-weight: bold;
        font-size: 18px;
        line-height: 1em;
        color: #ffffff;
        text-align: center;
   
        padding-top: 15px;
    }
}


/* -------------------------------------------------------------------------------------------------*/
/* MINECRAFT RTX: LARGE MOBILE BREAKPOINT 640-767 :: ALL ORIENTATIONS                               */
/* -------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 640px) and (max-width: 767px) {
    
    .kv-minecraft-container {
        background-image: url(/content/dam/en-zz/Solutions/geforce/campaigns/minecraft-with-rtx/hero-v2/minecraft-kv-v2-bottom-parallax-0-mobile.jpg);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100vw;
        min-height: 568px;
    }
    
    #minecraft-with-rtx {
        position: relative;
        width: 100%;
        height: auto;
        top: 175px;
        transition: all 0.1s ease-out;
    }
    
    #minecraft-logo {
        position: relative;
        width: 300px;
        height: 73px;
        margin: 0 auto;
    }
    
    #minecraft-availability {
        position: relative;
        width: 100%;
        height: auto;
        font-family: GeForce;
        font-weight: bold;
        font-size: 18px;
        line-height: 1em;
        color: #ffffff;
        text-align: center;
        
        padding-top: 15px;
    }
}


/* -------------------------------------------------------------------------------------------------*/
/* MINECRAFT RTX: LARGE MOBILE BREAKPOINT 640-767 :: ALL ORIENTATIONS & HEIGHT > 720                */
/* -------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 640px) and (max-width: 767px) and (min-height: 720px) {
    
    #minecraft-with-rtx {
        position: relative;
        width: 100%;
        height: auto;
        top: 175px;
        top: calc(40vh - 73px);
        transition: all 0.1s ease-out;
    }
}


/* -------------------------------------------------------------------------------------------------*/
/* MINECRAFT RTX: TABLET BREAKPOINT 768-1024 :: ALL ORIENTATIONS & HEIGHT < 768                     */
/* -------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 1024px) and (max-height: 767px) {
    
    .kv-minecraft-container {
        background-image: url(/content/dam/en-zz/Solutions/geforce/campaigns/minecraft-with-rtx/hero-v2/minecraft-kv-v2-bottom-parallax-1-tablet.jpg);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100vw;
        min-height: 770px;
    }
    
    #minecraft-with-rtx {
        position: relative;
        width: 100%;
        height: auto;
        top: 180px;
        padding-top: 15px;
        transition: all 0.1s ease-out;
    }
    
    #minecraft-logo {
        position: relative;
        width: 300px;
        height: 73px;
        margin: 0 auto;
    }
    
    #minecraft-availability {
        position: relative;
        width: 100%;
        height: auto;
        font-family: GeForce;
        font-weight: bold;
        font-size: 18px;
        line-height: 1em;
        color: #ffffff;
        text-align: center;
      
        padding-top: 15px;
    }
}



/* -------------------------------------------------------------------------------------------------*/
/* MINECRAFT RTX: TABLET BREAKPOINT 768-1024 :: ALL ORIENTATIONS & HEIGHT >= 768                    */
/* -------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 768px) {
    
    .kv-minecraft-container {
        background-image: url(/content/dam/en-zz/Solutions/geforce/campaigns/minecraft-with-rtx/hero-v2/minecraft-kv-v2-bottom-parallax-1-tablet.jpg);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100vw;
        min-height: 820px;
    }
    
    #minecraft-with-rtx {
        position: relative;
        width: 100%;
        height: auto;
        top: 240px;
        transition: all 0.1s ease-out;
    }
    
    #minecraft-logo {
        position: relative;
        width: 300px;
        height: 73px;
        margin: 0 auto;
    }
    
    #minecraft-availability {
        position: relative;
        width: 100%;
        height: auto;
        font-family: GeForce;
        font-weight: bold;
        font-size: 18px;
        line-height: 1em;
        color: #ffffff;
        text-align: center;
       
        padding-top: 15px;
    }
}


/* -------------------------------------------------------------------------------------------------*/
/* MINECRAFT RTX: TABLET BREAKPOINT 768-1024 :: ALL ORIENTATIONS :: HEIGHT > 1025                   */
/* -------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 1024px) {
    
    #minecraft-with-rtx {
        position: relative;
        width: 100%;
        height: auto;
        top: 205px;
        top: calc(40vh - 73px);
        transition: all 0.1s ease-out;
    }
}


/* -------------------------------------------------------------------------------------------------*/
/* MINECRAFT RTX: LAPTOP BREAKPOINT 1025-1349 :: ALL ORIENTATIONS                                   */
/* -------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 1025px) and (max-width: 1349px) {
    
    .kv-minecraft-container {
        background-image: url(/content/dam/en-zz/Solutions/geforce/campaigns/minecraft-with-rtx/hero-v2/minecraft-kv-v2-bottom-parallax-2-laptop.jpg);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100vw;
        min-height: 990px;
    }
    
    #minecraft-with-rtx {
        position: relative;
        width: 100%;
        height: auto;
        top: 210px;
        transition: all 0.1s ease-out;
    }
    
    #minecraft-logo {
        position: relative;
        width: 400px;
        height: 98px;
        margin: 0 auto;
    }
    
    #minecraft-availability {
        position: relative;
        width: 100%;
        height: auto;
        font-family: GeForce;
        font-weight: bold;
        font-size: 28px;
        line-height: 1em;
        color: #ffffff;
        text-align: center;
       
        padding-top: 15px;
    }
}


/* -------------------------------------------------------------------------------------------------*/
/* MINECRAFT RTX: LAPTOP BREAKPOINT 1025-1349 :: ALL ORIENTATIONS :: HEIGHT > 1025                   */
/* -------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 1025px) and (max-width: 1349px) and (min-height: 1024px) {
    
    #minecraft-with-rtx {
        position: relative;
        width: 100%;
        height: auto;
        top: 205px;
        top: calc(40vh - 98px);
        transition: all 0.1s ease-out;
    }
}



/* -------------------------------------------------------------------------------------------------*/
/* MINECRAFT RTX: DESKTOP BREAKPOINT 1350-2559 :: ALL ORIENTATIONS                                  */
/* -------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 1350px) and (max-width: 2560px) {
    
    .kv-minecraft-container {
        background-image: url(/content/dam/en-zz/Solutions/geforce/campaigns/minecraft-with-rtx/hero-v2/minecraft-kv-v2-bottom-parallax-3-desktop.jpg);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100vw;
        min-height: 880px;
        min-height: calc(100vw * 0.6519);
    }
    
    #minecraft-with-rtx {
        position: relative;
        width: 100%;
        height: auto;
        top: 210px;
        transition: all 0.1s ease-out;
    }
    
    #minecraft-logo {
        position: relative;
        width: 400px;
        height: 98px;
        margin: 0 auto;
    }
    
    #minecraft-availability {
        position: relative;
        width: 100%;
        height: auto;
        font-family: GeForce;
        font-weight: bold;
        font-size: 28px;
        line-height: 1em;
        color: #ffffff;
        text-align: center;
 
        padding-top: 15px;
    }
}


/* -------------------------------------------------------------------------------------------------*/
/* MINECRAFT RTX: DESKTOP BREAKPOINT 1350-2559 :: ALL ORIENTATIONS :: HEIGHT > 1025                 */
/* -------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 1350px) and (max-width: 2560px) and (min-height: 1024px) {
    
    #minecraft-with-rtx {
        position: relative;
        width: 100%;
        height: auto;
        top: 205px;
        top: calc(35vh - 98px);
        transition: all 0.1s ease-out;
    }
}


/* -------------------------------------------------------------------------------------------------*/
/* MINECRAFT RTX: ULTRA-WIDE DESKTOP BREAKPOINT 2561+ :: ALL ORIENTATIONS                           */
/* -------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 2561px) {
    
    .kv-minecraft-container {
        background-image: url(/content/dam/en-zz/Solutions/geforce/campaigns/minecraft-with-rtx/hero-v2/minecraft-kv-v2-bottom-parallax-4-ultra.jpg);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100vw;
        min-height: 2160px;
        min-height: calc(100vw * 0.5625 + 179px);
    }
    
    #minecraft-with-rtx {
        position: relative;
        width: 100%;
        height: auto;
        top: 210px;
        transition: all 0.1s ease-out;
    }
    
    #minecraft-logo {
        position: relative;
        width: 900px;
        width: 23vw;
        height: 245px;
        height: calc(23vw * 0.272);
        margin: 0 auto;
    }
    
    #minecraft-availability {
        position: relative;
        width: 100%;
        height: auto;
        font-family: GeForce;
        font-weight: bold;
        font-size: 64px;
        font-size: 1.65vw;
        line-height: 1em;
        color: #ffffff;
        text-align: center;
     
        padding-top: 15px;
    }
}