
body{
    margin:0;
    padding: 0;
    /* font-family:DINPro,Helvetica,Arial,Sans-Serif; */
}
  
  #page-content {
      overflow-x: hidden;
  }
  
  #raytracing .container, #staticTheme .container, #animateTheme .container {
      max-width: 100%;
  }

  .slider-brand-green {
      color: #76b900;
  }
  
  .slider-dark-neutral {
      color: #666;
  }
  
  .no-wrap {
      white-space: nowrap;
  }
  
  #ray-tracing {
      position: relative;
      width: 100%;
      height: auto;
      top: 0px;
      z-index: 1;
  }
  
  #ray-tracing-content {
      pointer-events: none;
      z-index: 6000;
  }
  
  #ray-tracing-headline {
      pointer-events: none; 
color: #fff;
  }

  #ray-tracing-body {
      pointer-events: none;
    color: #fff;
  }
  
  #comparison-slider {
      overflow: inherit;
  }
  
  
  
  #videoBg1 {
      z-index: 2 !important;
  }
  
  #videoBg2 {
      z-index: 1 !important;
  }
  
  #ray-tracing-headline {
      font-family: GeForce;
      font-weight: bold;
  }
  
  #comparison-img1 {
      position: absolute;
      opacity: 1;
      display: block;
      left: 0px;
      top: 0px;
      z-index: 1;
  }
  
  #comparison-img2 {
      position: absolute;
      opacity: 1;
      display: block;
      left: 0px;
      top: 0px;
      z-index: 0;
  }
  
  .gf-compare-left {
      position: absolute;
      left: 0px;
      top: 0px;
      margin: 0;
      padding: 0;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
  }
  
  .gf-compare-right {
      position: absolute;
      left: 0px;
      top: 0px;
      margin: 0;
      padding: 0;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
  }
  
  .gf-compare-caption-left {
      position: absolute;
      left: 60px;
      z-index: 1000;
      color: #eee;
      cursor: pointer;
      font-family: GeForce;
      font-weight: bold;
      font-size: 24px;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
  }
  
  .gf-compare-caption-right {
      position: absolute;
      right: 60px;
      z-index: 1001;
      color: #ccc;
      cursor: pointer;
      font-family: GeForce;
      font-weight: bold;
      font-size: 36px;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
  }
  
  .gf-compare-divider {
      position: absolute;
      top: 0px;
      width: 2px;
      height: 100%;
      background-color: #fff;
      cursor: ew-resize;
      z-index: 1502;
      opacity: 0;
  }
  
  #game-logo {
      background-image: url('https://images.nvidia.com/aem-dam/Solutions/geforce/ces/rtx-slider/geforce-rtx-cp2077-yellow-logotype.svg');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
  }
  
  
  /* MOBILE BREAKPOINT */
  
  @media only screen and (max-width: 639px) {
      
      #ray-tracing {
          top: 0px;
          background-color: rgb(0, 0, 0, 1);
          max-height: 740px;
          padding-top: 30px;
      }
                
      #ray-tracing-content {
          position: relative;
          width: 100%;
          height: auto;
          min-height: 134px;
          text-align: center;
          margin: 0px auto;
          margin-bottom: 115px;
          float: left;
          top: 100%;
      }

      #ray-tracing-headline {
          position: relative;
          top: 30px;
          max-width: 300px;
          margin: 0 auto;
          padding: 0;
      }

      #ray-tracing-body {
        position: relative;
        top: 46px;
        margin: 0 auto;
        line-height: 1.5em;
        max-width: unset;
        width: 90%;
      }
      
      #comparison-slider {
          position: relative;
          width: 298px;
          height: 123px;
          margin: 0 auto;
          overflow: hidden;
      }
      
      #videoBg1 {
          position: absolute;
          width: 100%;
          min-width: 300px;
          top: 0px;
          left: 50%;
          transform: translate(-50%, 0px);
          margin: 0 auto;
      }

      #videoBg2 {
          position: absolute;
          width: 100%;
          min-width: 300px;
          top: 0px;
          left: 50%;
          transform: translate(-50%, 0px);
          margin: 0 auto;
      }
      
      .gf-compare-dragger {
          position: relative;
          width: 24px;
          height: 24px;
          border-radius: 12px;
          background-color: #76b900;
          margin-left: -12px;
          cursor: ew-resize;
          z-index: 1800;
      }
      
      .gf-compare-arrows {
          position: relative;
          width: 20px;
          height: 24px;
          background-image: url('https://www.nvidia.com/content/dam/en-zz/Solutions/geforce/ampere/rtx-3080/images/rtx-slider/ic_dragger_arrows_horiz_white_24px.svg');
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          margin: 0px auto;
      }
      
      .gf-compare-caption-left {
          left: 15px;
          bottom: 10px;
          font-size: 16px;
      }
      
      .gf-compare-caption-right {
          right: 15px;
          bottom: 10px;
          font-size: 16px;
      }
      
      #game-logo {
          position: relative;
          width: 100%;
          height: 65px;
          left: 0px;
          top: 76px;
          float: left;
          z-index: 10;
      }
      
      #comparision-vignette-top {
          position: absolute;
          width: 100%;
          height: 90px;
          background: linear-gradient(to bottom, rgba(0,0,0,0.95) 10%, rgba(0,0,0,0) 40%);
          top: 0px;
          left: 0px;
          z-index: 100;
      }
  }
  
  
  /* TABLET BREAKPOINT */
  
  @media only screen and (min-width: 640px) and (max-width: 1023px) {
      
      #ray-tracing {
  /*        min-height: 1024px;  */
          background-color: #000;
          padding-bottom: 60px;
      }
    
      #ray-tracing-content {
          position: relative;
          width: 100%;
          height: auto;
          min-height: 330px;
          text-align: center;
          margin: 0px auto;
          margin-bottom: 60px;
          float: left;
          top: 100%;
          
      }

      #ray-tracing-headline {
          position: relative;
          top: 40px;
          text-shadow: 0 0 15px rgba(0,0,0,0.35);
          z-index: 1500;
          margin: 0 auto;
          padding-top: 30px;
          padding-bottom: 30px;
      }

      #ray-tracing-body {
          position: relative;
          top: 37px;
          width: 90%;
          width: calc(100vw - 60px);
          max-width: 620px;
          margin: 0 auto;
          text-align: center;
          line-height: 1.5em;
          text-shadow: 0 0 15px rgba(0,0,0,0.35);
          z-index: 1501;
      }
      
      #comparison-slider {
          position: relative;
          width: 625px;
          height: 257px;
          margin: 60px auto 0;
  overflow: hidden;
      }
      
      #videoBg1 {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          margin: 0 auto;
      }

      #videoBg2 {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          margin: 0 auto;
      }
      
      .gf-compare-dragger {
          position: relative;
          width: 48px;
          height: 48px;
          border-radius: 24px;
          background-color: #76b900;
          margin-left: -24px;
          cursor: ew-resize;
      }
      
      .gf-compare-arrows {
          position: relative;
          width: 24px;
          height: 48px;
          background-image: url('https://www.nvidia.com/content/dam/en-zz/Solutions/geforce/ampere/rtx-3080/images/rtx-slider/ic_dragger_arrows_horiz_white_24px.svg');
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          margin: 0px auto;
      }
      
      .gf-compare-caption-left {
          left: 20px;
          top: auto;
          bottom: 20px;
          font-size: 16px;
      }
      
      .gf-compare-caption-right {
          right: 20px;
          top: auto;
          bottom: 20px;
          font-size: 16px;
      }
      
      #game-logo {
          position: relative;
          width: 100%;
          height: 88px;
          left: 0px;
          top: 65px;
          float: left;
          z-index: 10;
      }
      
      #comparision-vignette-top {
          position: absolute;
          width: 100%;
          height: 120px;
          background: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 70%);
          top: 0px;
          left: 0px;
          z-index: 100;
      }
  }
  
  
  /* LAPTOP BREAKPOINT */
  
  @media only screen and (min-width: 1024px) and (max-width: 1349px) {
      
      #ray-tracing {
          min-height: 568px;
          max-height: 750px;
          background-color: rgb(0, 0, 0, 1);
      }
                 
      #ray-tracing-content {
          position: absolute;
          width: 100%;
          height: 100%;
          text-align: center;
          margin: 0px auto;
          top: 0px;
      }

      #ray-tracing-headline {
          position: relative;
          text-align: center;
          margin: 0 auto;
          padding-top: 60px;
          padding-bottom: 20px;
          text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
          z-index: 1500;
      }

      #ray-tracing-body {
          position: relative;
          width: 620px;
          margin: 0 auto;
          text-align: center;
          line-height: 1.5em;
          text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
          z-index: 1501;
      }
      
      #comparison-slider {
          position: relative;
          width: 954px;
          height: 393px;
          margin: 0;
          overflow: hidden;
      }
      
      #videoBg1 {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          margin: 0 auto;
      }

      #videoBg2 {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          margin: 0 auto;
      }
      
      .gf-compare-dragger {
          position: relative;
          width: 48px;
          height: 48px;
          border-radius: 24px;
          background-color: #76b900;
          margin-left: -24px;
          cursor: ew-resize;
      }
      
      .gf-compare-arrows {
          position: relative;
          width: 24px;
          height: 48px;
          background-image: url('https://www.nvidia.com/content/dam/en-zz/Solutions/geforce/ampere/rtx-3080/images/rtx-slider/ic_dragger_arrows_horiz_white_24px.svg');
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          margin: 0px auto;
      }
      
    .gf-compare-caption-left {
          left: 15px;
          top: auto;
          bottom: 20px;
          font-size: 16px;
      }
      
      .gf-compare-caption-right {
          right: 15px;
          top: auto;
          bottom: 20px;
          font-size: 16px;
      }
      
      #game-logo {
          position: absolute;
          width: 192px;
          height: 80px;
          right: 60px;
          bottom: 90px;
          z-index: 500;
      }
      
      #comparision-vignette-top {
          position: absolute;
          width: 100%;
          height: 320px;
          background: linear-gradient(to bottom, rgba(0,0,0,0.95) 60px, rgba(0,0,0,0) 100%);
          top: 0px;
          left: 0px;
          z-index: 100;
      }
  }
  
  
  /* ULTRA-WIDE DESKTOP BREAKPOINT */
  
  @media only screen and (min-width: 1350px) {
      
      #ray-tracing {
          background-color: rgb(0, 0, 0, 1);
      }
      
      #ray-tracing-content {
          position: absolute;
          width: 100%;
          height: auto;
          top: 0px;
          left: 0px;
          bottom: 0px;
          right: 0px;
          max-width: 2560px;
          text-align: center;
          margin: 0 auto;
      }
      
      #ray-tracing-headline {
          position: relative;
          padding-top: 60px;
          padding-bottom: 20px;
          margin: 15px auto 0px;
          max-width: 1290px;
          text-shadow: 0 1px 8px rgba(0,0,0,1);
          z-index: 1500;
      }

      #ray-tracing-body {
          position: relative;
          width: 810px;
          margin: 0 auto;
          line-height: 1.5em;
          text-shadow: 0 0 4px rgba(0,0,0,1);
          z-index: 1501;
      }
      
      #comparison-slider {
          position: relative;
          width: 1350px;
          height: auto;
          margin: 0;
          overflow: hidden;
      }
      
      #videoBg1 {
          position: relative;
          width: 100%;
          height: 1440px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          margin: 0 auto;
      }

      #videoBg2 {
          position: relative;
          width: 100%;
          height: 1440px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          margin: 0 auto;
      }
      
      .gf-compare-dragger {
          position: relative;
          width: 48px;
          height: 48px;
          border-radius: 24px;
          background-color: #76b900;
          margin-left: -24px;
          cursor: ew-resize;
      }
      
      .gf-compare-arrows {
          position: relative;
          width: 24px;
          height: 48px;
          background-image: url('https://www.nvidia.com/content/dam/en-zz/Solutions/geforce/ampere/rtx-3080/images/rtx-slider/ic_dragger_arrows_horiz_white_24px.svg');
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          margin: 0px auto;
      }
      
      .gf-compare-caption-left {
          left: 30px;
          bottom: 30px;
          font-size: 22px;
      }
      
      .gf-compare-caption-right {
          right: 30px;
          bottom: 30px;
          font-size: 22px;
      }
      
      #game-logo {
          position: absolute;
          width: 326px;
          height: 150px;
          right: 30px;
          bottom: 75px;
          z-index: 500;
      }
      
      #comparision-vignette-top {
          position: absolute;
          width: 100%;
          height: 320px;
          background: linear-gradient(to bottom, rgba(0,0,0,0.95) 120px, rgba(0,0,0,0) 100%);
          top: 0px;
          left: 0px;
          z-index: 100;
      }
  }
@font-face {
font-family: "GeForce";
src: url("https://images.nvidia.cn/etc/designs/nvidiaGDC/clientlibs_base/fonts/geforce_bold-webfont.eot");
src: url("https://images.nvidia.cn/etc/designs/nvidiaGDC/clientlibs_base/fonts/geforce_bold-webfont.eot?#iefix") format("embedded-opentype"), url("https://images.nvidia.cn/etc/designs/nvidiaGDC/clientlibs_base/fonts/geforce_bold-webfont.woff") format("woff");
font-style: normal;
font-weight: bold;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@font-face {
font-family: "DINPro";
src: url("https://images.nvidia.cn/etc/designs/nvidiaGDC/clientlibs_base/fonts/DINWebPro.eot");
src: url("https://images.nvidia.cn/etc/designs/nvidiaGDC/clientlibs_base/fonts/DINWebPro.eot?#iefix") format("embedded-opentype"), url("https://images.nvidia.cn/etc/designs/nvidiaGDC/clientlibs_base/fonts/DINWebPro.woff") format("woff");
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
