* {
  box-sizing: border-box;
}
body {
  font-family: "Klavika", sans-serif;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  background-color: #000000;
}
/* OGDEV */
.where01,
.where02,
.where03,
.where07,
.where08,
.where09 {
  border-width: 1px;
  border-style: solid;
}
.where01 {
  border-color: #ff0000;
}
.where02 {
  border-color: #00ff00;
}
.where03 {
  border-color: #0000ff;
}
.where04 {
  border-color: #ff00ff;
}
.where05 {
  border-color: #00ffff;
}
.where06 {
  border-color: #ffff00;
}
.where07 {
  background-color: #ff0000;
}
.where08 {
  background-color: #00ff00;
}
.where09 {
  background-color: #0000ff;
}
.where10 {
  background-color: #ff00ff;
}
.where11 {
  background-color: #00ffff;
}
.where12 {
  background-color: #ffff00;
}
.color-red500 {
  color: #c1372d;
}
.color-red900 {
  color: #e40000;
}
.color-blue500 {
  color: #224155;
}
.bg-blue500 {
  background-color: #224155;
}
.color-yellow500 {
  color: #ebb020;
}
.bg-yellow500 {
  background-color: #ebb020;
}
.color-grey000 {
  color: #ffffff;
}
.bg-grey000 {
  background-color: #ffffff;
}
.color-grey100 {
  color: #f5f5f5;
}
.bg-grey100 {
  background-color: #f5f5f5;
}
.color-grey200 {
  color: #737373;
}
.bg-grey200 {
  background-color: #737373;
}
.color-grey500 {
  color: #454545;
}
.bg-grey500 {
  background-color: #454545;
}
.color-grey900 {
  color: #000000;
}
.bg-grey900 {
  background-color: #000000;
}
.shadowed {
  text-shadow:
    1px 1px 3px rgba(0, 0, 0, 1),
    1px 1px 3px rgba(0, 0, 0, 1);
}
/* special display formatting */
.fleft {
  float: left;
}
.fright {
  float: right;
}
.fclear {
  clear: both;
}
.fcenter {
  clear: both;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.posrel,
.prel {
  position: relative;
}
.posabs,
.pabs {
  position: absolute;
}
.possta,
.pstat {
  position: static;
}
.panchor {
  position: relative;
  height: 1px;
}
/* Standard FONT Sizing */
.text-48 {
  font-size: 48px;
}
.lh53 {
  line-height: 53px;
}
.text-36 {
  font-size: 36px;
}
.lh41 {
  line-height: 41px;
}
.text-30 {
  font-size: 30px;
  line-height: 30px;
}
.lh30 {
  line-height: 30px !important;
}
.text-28 {
  font-size: 36px;
}
.lh32 {
  line-height: 32px;
}
.text-24 {
  font-size: 24px;
}
.lh29 {
  line-height: 29px;
}
.text-22 {
  font-size: 22px;
}
.lh25 {
  line-height: 24px;
}
.text-20 {
  font-size: 20px;
}
.lh25 {
  line-height: 25px;
}
.text-18 {
  font-size: 18px;
}
.lh20 {
  line-height: 20px;
}
.text-16 {
  font-size: 16px;
}
.lh18 {
  line-height: 18px;
}
.text-15 {
  font-size: 15px;
}
.lh15 {
  line-height: 16.78px;
}
.text-14 {
  font-size: 14px;
}
.lh16 {
  line-height: 16px;
} /* DEFAULT BODY SIZE */
.text-12 {
  font-size: 12px;
}
.lh14 {
  line-height: 14px;
}
.text-10 {
  font-size: 10px;
}
.lh12 {
  line-height: 12px;
}
.text-9 {
  font-size: 9px;
}
.lh10 {
  line-height: 10px;
}
.weight-300 {
  font-weight: 300;
  font-style: normal;
}
.weight-600 {
  font-weight: 600;
}
.weight-700 {
  font-weight: 700;
}
.weight-400 {
  font-weight: 400;
  font-style: normal !important;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-top {
  vertical-align: text-top;
}
.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}
.normal {
  font-weight: normal;
}
.allcaps {
  text-transform: uppercase;
}
.titlecase {
  text-transform: capitalize;
}
.mblock,
.mobile-img {
  display: none;
}
/* Padding */
/* Standard padding */
.pad0 {
  padding: 0px;
}
.pad1 {
  padding: 1px;
}
.pad2 {
  padding: 2px;
}
.pad3 {
  padding: 3px;
}
.pad4 {
  padding: 4px;
}
.pad5 {
  padding: 5px;
}
.pad6 {
  padding: 6px;
}
.pad7 {
  padding: 7px;
}
.pad8 {
  padding: 8px;
}
.pad9 {
  padding: 9px;
}
.pad10 {
  padding: 10px;
}
.pad12 {
  padding: 12px;
}
.pad13 {
  padding: 13px;
}
.pad15 {
  padding: 15px;
}
.pad16 {
  padding: 16px;
}
.pad20 {
  padding: 20px;
}
.pad24 {
  padding: 24px;
}
.pad-left {
  padding-left: 160px;
}
.killpadl {
  padding-left: 0px;
}
.killpadr {
  padding-right: 0px;
}
.killpadt {
  padding-top: 0px;
}
.killpadb {
  padding-bottom: 0px;
}
.mar0 {
  margin: 0px !important;
}
.mar5 {
  margin: 5px !important;
}
.mar10 {
  margin: 10px !important;
}
.mar15 {
  margin: 15px !important;
}
.mar20 {
  margin: 20px !important;
}
.killmarl {
  margin-left: 0px !important;
}
.killmarr {
  margin-right: 0px !important;
}
.killmart {
  margin-top: 0px !important;
}
.killmarb {
  margin-bottom: 0px !important;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-top {
  vertical-align: text-top;
}
.flex-top {
  align-self: auto;
}
.format5,
.format10,
.format15,
.format20,
.format25,
.format30,
.format33,
.format35,
.format40,
.format45,
.format50,
.format55,
.format60,
.format65,
.format66,
.format70,
.format75,
.format80,
.format85,
.format90,
.format95,
.formatMatch33,
.formatMatch66,
.format100 {
  box-sizing: border-box;
}
.format5 {
  width: 5%;
}
.format10 {
  width: 10%;
}
.format15 {
  width: 15%;
}
.format20 {
  width: 20%;
}
.format25 {
  width: 25%;
}
.format30 {
  width: 30%;
}
.format33 {
  width: 33.3%;
}
.formatMatch33 {
  width: 34%;
}
.format35 {
  width: 35%;
}
.format40 {
  width: 40%;
}
.format45 {
  width: 45%;
}
.format50 {
  width: 50%;
}
.format55 {
  width: 55%;
}
.format60 {
  width: 60%;
}
.format65 {
  width: 65%;
}
.format66 {
  width: 66.6%;
}
.formatMatch66 {
  width: 66%;
}
.format70 {
  width: 70%;
}
.format75 {
  width: 75%;
}
.format80 {
  width: 80%;
}
.format85 {
  width: 85%;
}
.format90 {
  width: 90%;
}
.format95 {
  width: 95%;
}
.format100 {
  width: 100%;
}
.formatauto {
  width: auto;
}
.block {
  display: block;
}
.inblock {
  display: inline-block;
}
.kminh {
  min-height: auto !important;
}
/* awareness additions */
.section-contentOverlap {
  width: 100%;
  max-width: 1200px;
}
.section-wrapperOverlap {
  width: 100%;
  max-width: 1200px;
  padding: 20px;
}
/*HERO*/
.Hero-Heading {
  font-family: "Klavika", sans-serif;
  color: #fff;
  font-size: 75px;
  line-height: 85px;
  text-transform: uppercase;
}
.Hero-Subhead {
  font-family: "Klavika", sans-serif;
  color: #fff;
  font-size: 55px;
  line-height: 55px;
  text-transform: uppercase;
}
.Hero-Content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 470px;
  right: 25%;
}
.cnterIt {
  position: relative;
}
.innerCentered {
  position: absolute;
  top: 50%;
  right: 20%;
  transform: translateY(-50%);
}
.Hero-Logo {
  margin-top: 20px;
}
img {
  max-width: 100%;
  vertical-align: middle;
}
p {
  margin-top: 0px;
  margin-bottom: 10px;
  color: #fff;
}
h1 {
}
.underlined {
  border-bottom: 1px solid white;
  text-transform: capitalize;
  font-size: 26px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  color: #ffffff;
}
.body {
  background-color: #fff;
  font-family: "Klavika", sans-serif;
  color: #000;
  font-size: 26px;
  line-height: normal;
}
.heading-1 {
  margin-top: 0px;
  margin-bottom: 20px;
  color: #000;
  font-size: 52px;
  line-height: 52px;
  letter-spacing: -1px;
}
.hero-text-box {
  width: 1070px;
  margin-bottom: 40px;
  padding: 15px 20px 10px 20px;
  background-color: #fff;
}
.hero-text-box.mobile-hero-text-box {
  display: none;
}
.hero {
  width: 100%;
  background: #000;
  background-position: center;
  height: auto;
  position: relative;
}
.hero .mobile-img {
  width: 100%;
  height: auto;
}
.hero-mobile-img {
  display: none;
}
.hero .call-out {
  padding: 32px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+30,0.8+51,0.66+69,0.71+90,0.5+100 */
  /*background: linear-gradient(45deg, rgba(255,255,255,1) 16%, rgba(255,255,255,.70) 100%);*/
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-color: #ffffff;
  display: flex; /* so can put copy and image in same row */
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  line-height: 1.2;
  margin-bottom: 80px; /* must match height of amd arrow */
}
.hero .call-out .copy {
  flex: 0 1 100%;
  align-self: center;
}
.hero .call-out .copy p {
  margin-top: 10px;
  margin-bottom: 0px;
  font-size: 28px;
}
.hero .call-out .logo {
  /*  flex: 0 1 30%;*/
  align-self: left;
  padding-right: 0;
}
.hero .call-out .logo img {
  padding-top: 0px;
  vertical-align: baseline;
}
.hero .call-out-box {
  position: absolute;
  bottom: 15%;
  right: 12%;
  transform: translate(5%, 20%);
  display: flex;
  display: -ms-flexbox;
  justify-content: flex-end;
  align-items: flex-end;
  max-width: 770px;
}
.hero .call-out-box img.amd-arrow {
  flex-shrink: 0;
  width: 80px; /* controls size of amd arrow */
}
.call-out-inner-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.call-out-right {
  width: 25%;
}
.call-out-left {
  width: 75%;
  padding-right: 40px;
}
.call-out-right img {
  width: 100%;
  height: auto;
}
.mobile-img,
.fnatic-mobile-img,
.products-RyzenRadeon-mobile-img,
.Feature3-mobile-img,
.Feature2-mobile-img,
.intro-GameFeature-mobile-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.fnatic-mobile-img,
.products-RyzenRadeon-mobile-img,
.Feature3-mobile-img,
.Feature2-mobile-img,
.Feature1-mobile-img,
.Feature1b-mobile-img,
.Feature4-mobile-img,
.intro-GameFeature-mobile-img,
.Feature5-mobile-img,
.Feature6-mobile-img {
  display: none;
}
.Products .heading-2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.intro-GameFeature .section-wrapper .content-box {
  max-width: 470px;
  padding: 50px 0 50px 0;
}
.hero-info {
  display: flex;
  display: -ms-flexbox;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 310px; /* move box down below faces */
}
.hero-wrapper {
  width: 100%;
  max-width: 1100px;
}
.section-content.intro {
  padding: 50px 50px;
  min-height: 200px;
}
.intro {
  text-align: center;
}
.intro .content-box {
  width: 100%;
  max-width: 100%;
}
.intro-logos {
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}
.intro .heading-2-center {
  margin-top: 20px;
}
.paragraph-intro {
  color: #fff;
  font-size: 28px;
  line-height: 42px;
  font-weight: 500;
  text-align: left;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 0px;
  margin-left: 0px;
}
.project-sku-row {
  width: 100%;
  text-align: center;
  align-items: center;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.footer-row {
  text-align: center;
  align-items: center;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin: 0 auto;
}
.section-wrapper {
  display: flex;
  width: 100%;
  max-width: 1200px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.section-wrapper.align-right {
  align-items: flex-end;
}
.section-wrapper.align-center {
  flex-wrap: nowrap;
  align-items: center;
  flex: 0 auto;
}
.heading-2 {
  margin-top: 0px;
  margin-bottom: 10px;
  line-height: normal;
  letter-spacing: 0px;
  color: #fff;
  font-family: "Klavika", sans-serif;
}
sup {
  font-size: 60%;
}
.t1 {
  color: #fff;
  padding-bottom: 0px;
}
.section-content {
  display: flex;
  min-height: 342px;
  padding: 50px 50px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #000;
  border-width: 1px 0px 0px;
  border-style: solid;
  border-color: #333333;
}
/*FEATURES IMAGERY*/
.section-content.Feature1 {
  background-image: url("../images/1306_Header_d.webp?v=2"); /* ALTERNATE: was 3767468-Hero.jpg */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.section-content.Feature1-alt {
  background-image: url("../images-CHINA-ONLY/3767468-Hero-alt.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.section-content.Feature2 {
  background-image: url("../images/3767468_Feature-01b.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
}
.section-content.Feature3 {
  background-image: url("../images/3767468_Feature-02.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
}
.Prod-02-Logo {
  position: absolute;
  bottom: 10%;
  left: 10%;
}
.gamercopy {
  padding-left: 200px;
  max-width: 1220px;
}
.gamercopyright {
  padding-right: 150px;
  max-width: 1220px;
}
.section-content.Feature4 {
  background-image: url("../images/3767468_Feature-03b.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.section-content.Feature5 {
  background-image: url("../images/3767468_Feature-04b.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.section-content.community {
  background-image: url("../images/3767468-GamingCommunity.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.legendaryimage {
  width: 57%;
} /* 6/27/24 reduce width of image container so text moves to left to better align with psd */
.legendarycopy {
  width: 43%;
  padding-right: 20px;
} /* 6/27/24 increase width of copy container to better align the container with psd then reduce width of copy using padding */
.moregraphicscopy {
  padding-left: 70px;
  width: 89%;
} /* 6/27/24 move copy container to right to better align with psd then reduce width of container to add some space between copy and image*/
.section-content.Feature4 {
  background-color: #000000;
  background-repeat: no-repeat;
  background-position: 40% center;
  background-size: auto 100%;
  min-height: auto !important;
}
/*crop overflow to fix display slider */
.body {
  overflow-x: hidden !important;
}
.BreakPointIMG01 {
  right: -200px;
  top: -10px;
  width: 180%;
}
/*.BreakPointIMG02 { left:-270px; top:-196px; width:160%;} 6/27/24  Equipped for Every Moment image */
/*.BreakPointIMG02 { left:-40px; top:-100px; width:113%;} 11/11/24 */
.BreakPointIMG02 {
  left: -40px;
  top: -90px;
  width: 113%;
}
/* .BreakPointIMG03 { max-width:420px;} 6/27/24 Make Your Performance Legendary image */
.BreakPointIMG03 {
  right: -250px; /* ALTERNATE: was -230px, retuned for our PC render */
  top: -50px;
  width: 140%;
}
/*.BreakPointIMG04 { right:-200px; bottom:-120px; width:140%;} 6/27/24  More Graphics image */
.BreakPointIMG04 {
  right: 0px;
  top: -55px;
  width: 102%;
}
.BreakPointIMG05 {
  right: -50px;
  top: -50px;
  width: 102%;
}
@media (max-width: 1201px) {
  .section-content {
    overflow: hidden !important;
  }
  .BreakPointIMG01 {
    width: 160%;
    transition: width 0.5s ease;
  }
  .BreakPointIMG02 {
    left: -270px;
    top: -139px;
    width: 172%;
    transition: width 0.5s ease;
  }
  .BreakPointIMG03 {
    left: 0px;
    max-width: 450px;
    transition: max-width 0.5s ease;
  }
  .BreakPointIMG04REM {
    left: -270px;
    bottom: -139px;
    width: 172%;
    transition: width 0.5s ease;
  }
}
@media (max-width: 1026px) {
  .BreakPointIMG01 {
    right: -240px;
    top: -90px;
    width: 150%;
    transition: width 0.5s ease;
  }
  .BreakPointIMG02 {
    left: -232px;
    top: -100px;
    width: 172%;
    transition: width 0.5s ease;
  }
  .BreakPointIMG03 {
    max-width: 470px;
    transition: max-width 0.5s ease;
  }
  .BreakPointIMG04REM {
    left: -232px;
    bottom: -100px;
    width: 172%;
    transition: width 0.5s ease;
  }
}
.section-product {
  display: flex;
  min-height: 420px;
  padding: 40px 50px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-image:
    -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(transparent),
      to(#000)
    ),
    url("../images/section_9_bg.jpg");
  background-image:
    linear-gradient(180deg, transparent, #000),
    url("../images/section_9_bg.jpg");
  background-position:
    0px 0px,
    50% 50%;
  background-size: auto, cover;
}
.section-content.AMD-footer .section-wrapper.first {
  background-image: url("../images/gamer_first_LP-footer-Deco.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: auto, auto;
}
.line {
  width: 100%;
  height: 1px;
  margin-bottom: 30px;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
}
.heading-3 {
  margin-top: 0px;
  margin-bottom: 0px;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  letter-spacing: -0.25px;
}
.heading-3.white {
  color: #fff;
}
.heading-3b {
  margin-top: 0px;
  margin-bottom: 0px;
  color: #fff;
  font-size: 18px;
  line-height: 20px;
  text-align: center;
  letter-spacing: -0.25px;
  font-family: "Klavika", sans-serif;
}
.heading-3b.white {
  color: #fff;
}
.FX-video {
  height: auto;
  margin-left: 100px;
}
.FX-video .align-right {
}
.video {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.section-content.fidelity,
.section-content.sharpening,
.section-content.freesync {
  background-color: #000;
  border-bottom: 0;
  padding-bottom: 20px;
  min-height: unset;
}
.section-content.sharpening,
.section-content.freesync {
  padding-top: 0px;
}
.section-content.sharpening {
  padding-bottom: 50px;
}
.section-content.fidelity h1,
.section-content.freesync h1 {
  text-align: center;
  margin: 0 auto;
  padding-bottom: 20px;
}
.section-content.fidelity .t1,
.section-content.freesync .t1 {
  text-align: center;
  margin: 0 auto;
  max-width: 90%;
}
.section-content.freesync {
  border-top: 1px solid #535353;
  padding-top: 40px;
}
.section-content.FidelityFX .section-wrapper .content-box {
  max-width: 100%;
  padding-top: 40px;
}
.section-content.FidelityFX h1,
.section-content.fidelity h1,
.section-content.freesync h1 {
  text-transform: none;
  text-align: center;
  padding-bottom: 10px;
  line-height: 34px;
}
.section-content.FidelityFX p,
.section-content.fidelity p,
.section-content.freesync p {
  padding-bottom: 40px;
}
.section-content.FidelityFX video {
  max-width: 1045px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
.section-content.fidelity,
.section-content.freesync {
  padding-bottom: 50px;
  padding-top: 50px;
}
.section-content.fidelity {
  background-color: #1f2221;
}
.section-content.product-skus-footer .section-title {
  border-bottom: 1px solid #4a4b4c;
  /*opacity: 0.8;*/
  opacity: 1;
  width: 100%;
}
.section-content.product-skus-footer .section-wrapper.first {
  padding-top: 15px;
  border-bottom: 1px solid #4a4b4c;
  /*opacity: 0.8;*/
  opacity: 1;
  width: 100%;
}
.section-content.product-skus-footer .section-wrapper {
}
.section-content.product-skus-footer .section-wrapper img {
  display: block;
  margin: 0 auto;
  padding-bottom: 30px;
}
.section-content.product-skus-footer .grid {
  margin-bottom: 70px;
}
.section-content.product-skus-footer .grid .product span {
  color: #fff;
  text-align: center;
}
.section-content.product-skus-footer .grid .product span.title {
  color: #fff;
  font-weight: 700;
}
.line {
  width: 100%;
  height: 1px;
  margin-bottom: 30px;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
}
.content-box {
  max-width: 490px;
  align-self: auto;
}
.product {
  display: flex;
  max-width: 300px;
  flex-direction: column;
  align-items: center;
}
.productLine {
  border-width: 1px 0px 0px;
  border-style: solid;
  border-color: #333333;
  margin-top: 20px;
  margin-bottom: 30px;
}
.product-img {
  margin-bottom: 20px;
}
.image-7 {
  margin-bottom: 20px;
}
.button {
  margin-top: 15px;
  padding: 7px 15px 7px 15px;
  border: 2px solid #fff;
  background-color: transparent;
  color: #fff;
  font-weight: 700;
  text-transform: capitalize;
  text-decoration: none;
  max-width: 200px;
}
.buttonSub {
  margin-top: 20px !important;
  padding: 13px 18px 12px 18px;
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  font-size: 17px;
  max-width: 145px;
}
.button:hover {
  background-color: transparent;
  color: #fff;
}
.footnotes {
  margin-bottom: 15px;
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  font-weight: normal;
  font-family: "Noto Sans", sans-serif;
  text-align: left;
}
.footnotes a {
  color: #fff;
  text-decoration: none;
}
ol {
  padding-inline-start: 10px;
}
.footnotes li {
  list-style-position: outside;
  margin-bottom: 10px;
}
.heading-2-center {
  display: block;
  width: auto;
  max-width: 700px;
  margin-right: auto;
  margin-left: auto;
  float: none;
  clear: none;
  color: #fff;
  text-align: center;
}
.content-box-center {
  max-width: none;
}
.column {
  padding-left: 10px;
}
.column-2 {
  padding-left: 10px;
}
.game-pass-container {
  position: static;
  left: 0%;
  top: 0%;
  right: auto;
  bottom: auto;
  width: 490px;
  clear: none;
  align-self: flex-start;
}
.line {
  display: flex;
  min-width: 380px;
  flex-direction: column;
}
table.chart {
  width: 100%;
  border: none;
  border-collapse: collapse;
}
table.chart td {
  color: #ffffff;
  padding: 10px;
  border-left: 3px solid #000;
  border-right: 3px solid #000;
  width: 25%;
}
table.chart td:first-child {
  border-left: none;
  width: 50%;
}
table.chart td:nth-child(2),
table.chart td:nth-child(3),
table.chart td:nth-child(4) {
  width: 50%;
}
table.chart td:last-child {
  border-right: none;
}
table.chart .header-row {
  font-weight: 700;
  text-align: center;
  font-size: 25px;
  line-height: 28px;
  background-color: #212121;
}
table.chart .header-row td {
  padding-top: 35px;
  padding-bottom: 10px;
}
table.chart .chart-check {
  vertical-align: top;
}
table.chart .chart-body,
table.chart .chart-check {
  text-align: center;
  vertical-align: middle;
}
table.chart .chart-body {
  font-size: 20px;
  line-height: 40px;
}
table.chart p.chart-footnotes {
  text-align: left;
  font-size: 10px;
  line-height: 12px;
  margin-top: 5px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}
table.chart .label-row {
  border-bottom: 1px solid #333;
}
table.chart .dark-row {
  background-color: #141414;
  border-bottom: 3px solid #000000;
}
table.chart .light-row {
  background-color: #212121;
}
.chart-title {
  font-size: 20px;
  line-height: 23px;
  text-align: center;
  font-weight: 700;
  vertical-align: top;
}
td > div {
  position: relative;
  padding: 0px;
}
.chart-addition {
  position: absolute;
  top: 50%;
  right: -34px;
  padding: 0px;
}
table.chart .title-row td {
  text-align: center;
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 25px;
  border-bottom: 1px solid #333;
}
/*******CAROUSEL VIDEOS************/
.video-wrapper {
  position: relative;
  width: 372px;
  height: 210px;
  cursor: pointer;
}
.video-wrapper:hover .play-button {
  background: rgba(255, 255, 255, 1);
}
/* Play button overlay */
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55px;
  height: 45px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.play-button::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 20px solid rgba(0, 0, 0, 0.5);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 5px;
}
/* Hide play button when playing */
.video-wrapper.playing .play-button {
  display: none;
}
.LP-Card {
  padding: 0px !important;
}
/***************MEDIA INQUIRIES**************/
@media (max-width: 2400px) {
  .hero .call-out-box {
    bottom: 15%;
    right: 10%;
  }
}
@media (max-width: 2200px) {
  .hero .call-out-box {
    bottom: 13%;
    right: 11%;
  }
  .Hero-Content {
    right: 15%;
  }
  .Hero-Heading {
    font-size: 70px;
    line-height: 73px;
  }
  .Hero-Logo.SMaller {
  } /* background-color:#ffffff; */
}
@media (max-width: 1700px) {
}
@media (max-width: 1500px) {
  .Hero-Content {
    right: 10%;
  }
  .Hero-Logo.SMaller {
    width: 80%;
  } /* background-color:#ffffff; */
  .section-content.Feature2 {
    background-position: 50% 50%;
  }
  .section-content.Feature1b {
    background-position: 75% 50% !important;
  }
  .innerCentered {
    right: 10%;
  }
}
@media (max-width: 1300px) {
  .Hero-Content {
    right: 9%;
  }
  .Hero-Heading {
    font-size: 55px;
    line-height: 58px;
  }
  .Hero-Logo.SMaller {
    width: 60%;
  } /* background-color:#ffffff; */
  .hero .call-out {
    padding: 24px;
  }
  .heading-1 {
    font-size: 38px;
    line-height: 38px;
    margin-bottom: 10px;
  }
  .hero .call-out .copy p {
    font-size: 22px;
  }
  .hero .call-out-box {
    bottom: 15%;
    right: 5%;
    max-width: 560px;
  }
  .hero .call-out .logo img {
    padding-top: 15px;
    max-width: 120px;
  }
  .hero .call-out-box img.amd-arrow {
    width: 60px; /* controls size of amd arrow */
  }
  .hero .call-out {
    margin-bottom: 60px; /* must match height of amd arrow */
  }
  .section-content.Feature2 {
    background-position: 50% 50%;
  }
}
@media (max-width: 1150px) {
  .Hero-Content {
    right: 4%;
    max-width: 450px;
  }
  .Hero-Heading {
    font-size: 41px;
    line-height: 44px;
  }
  .Hero-Logo.SMaller {
    width: 60%;
  } /* background-color:#ffffff; */
  .Hero-Logo {
    margin-top: 10px !important;
  }
  .Hero-Logo {
    margin-top: 30px;
  }
  .section-content.Feature2 {
    background-position: 50% 50%;
  }
  .section-content.intro-GameFeature {
    background-position: 45% 50% !important;
  }
}
@media (max-width: 991px) {
  .Hero-Content {
    top: 0px;
  }
  .Hero-Heading {
    font-size: 65px;
    line-height: 58px;
  }
  .Hero-Logo.SMaller {
    width: 80%;
  } /* background-color:#ffffff; */
  .MobileSpecialPad {
    padding: 40px;
  }
  .innerCentered {
    right: 5%;
  }
  .product {
    max-width: 90%;
  }
  .heading-1 {
    font-size: 40px;
    line-height: 40px;
  }
  .mblock {
    display: block !important;
  }
  .minblock {
    display: inline-block !important;
  }
  .mpoof,
  .hero .mobile-img {
    display: none;
  }
  .mshift {
    right: 0px;
    top: 0px;
    width: 100%;
    padding: 0px;
    margin: 0px;
  }
  .mshift img {
    margin: 0 auto;
    display: block;
  }
  .Hero-Content {
    position: relative;
    margin-left: auto;
    margin-right: auto;
  }
  /* .hero{ max-height: 1100px; } */
  .innerCentered {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: 10px;
    left: 20%;
    bottom: 0px;
    transform: translateY(0%);
  }
  .Hero-Logo.SMaller {
    max-width: 400px;
  }
  .content-box {
  }
  .content-box-center {
  }
  .grid-4 {
    width: 100%;
    justify-items: stretch;
  }
  .section-content.intro {
    background-position: 29% 50% !important;
  }
  .section-content.Feature1b {
    background-position: 70% 50% !important;
  }
  .section-content.Feature2 {
    background-position: 65% 50%;
  }
  .gamercopy,
  .gamercopyright {
    padding-left: 0px;
    padding-right: 0px;
  } /* remove padding-left needed for desktop layout */
  .legendarycopy {
    padding-right: 0px;
  } /* removed padding-right needed for desktop layout */
  .moregraphicscopy {
    padding-left: 0px;
  } /* remove padding-left needed for desktop layout */
  .section-content.intro-GameFeature {
    background: #000;
    padding-top: 0px;
    padding-bottom: 40px;
    min-height: 30px;
    max-width: 100%;
  }
  .section-content.intro-GameFeature .content-box {
    max-width: 100%;
    margin: 0;
    padding-bottom: 0;
    padding-top: 10px;
  }
  .section-content.intro-GameFeature img.mobile-img,
  .intro-GameFeature-mobile-img {
    margin: 0 auto;
    display: block;
  }
  /* Standard position */
  .mposrel,
  .mprel {
    position: relative;
  }
  .mposabs,
  .mpabs {
    position: absolute;
  }
  .mpossta,
  .mpstat {
    position: static;
  }
  .mpanchor {
    position: relative;
    height: 1px;
  }
  .mhAuto {
    height: auto !important;
  }
  .mkillpt {
    top: 0px !important;
  }
  .mkillpr {
    right: 0px !important;
  }
  .mkillpb {
    bottom: 0px !important;
  }
  .mkillpl {
    left: 0px !important;
  }
  .mkillBStroke {
    border-width: 0px 0px 0px 0px !important;
    background-color: transparent !important;
  }
  .mcolumn1 {
    column-count: 1 !important;
  }
  .mcolumn2 {
    column-count: 2 !important;
  }
  .mcolumn3 {
    column-count: 3 !important;
  }
  /* Standard FONT Sizing */
  .mtext-48 {
    font-size: 48px;
  }
  .mtext-36 {
    font-size: 36px;
  }
  .mtext-24 {
    font-size: 24px;
  }
  .mtext-20 {
    font-size: 20px;
  }
  .mtext-18 {
    font-size: 18px;
  }
  .mtext-16 {
    font-size: 16px;
  }
  .mtext-15 {
    font-size: 15px;
  }
  .mtext-14 {
    font-size: 14px;
  } /* DEFAULT BODY SIZE */
  .mtext-12 {
    font-size: 12px;
  }
  .mtext-10 {
    font-size: 10px;
  }
  .mtext-9 {
    font-size: 9px;
  }
  .mweight-300 {
    font-weight: 300;
    font-style: normal;
  }
  .mweight-600 {
    font-weight: 600;
  }
  .mweight-700 {
    font-weight: 700;
  }
  .mweight-400 {
    font-weight: 400;
    font-style: normal !important;
  }
  /* Padding */
  /* Standard padding */
  .mpad0 {
    padding: 0px;
  }
  .mpad1 {
    padding: 1px;
  }
  .mpad2 {
    padding: 2px;
  }
  .mpad3 {
    padding: 3px;
  }
  .mpad4 {
    padding: 4px;
  }
  .mpad5 {
    padding: 5px !important;
  }
  .mpad6 {
    padding: 6px;
  }
  .mpad7 {
    padding: 7px;
  }
  .mpad8 {
    padding: 8px;
  }
  .mpad9 {
    padding: 9px;
  }
  .mpad10 {
    padding: 10px;
  }
  .mpad12 {
    padding: 12px;
  }
  .mpad13 {
    padding: 13px;
  }
  .mpad15 {
    padding: 15px;
  }
  .mpad16 {
    padding: 16px;
  }
  .mpad20 {
    padding: 20px;
  }
  .mpad24 {
    padding: 24px;
  }
  .mkillpadl {
    padding-left: 0px !important;
  }
  .mkillpadr {
    padding-right: 0px !important;
  }
  .mkillpadt {
    padding-top: 0px !important;
  }
  .mkillpadb {
    padding-bottom: 0px !important;
  }
  .mmar0 {
    margin: 0px;
  }
  .mmar5 {
    margin: 5px;
  }
  .mmar10 {
    margin: 10px;
  }
  .mmar15 {
    margin: 15px;
  }
  .mmar20 {
    margin: 20px;
  }
  .mkillmarl {
    margin-left: 0px !important;
  }
  .mkillmarr {
    margin-right: 0px !important;
  }
  .mkillmart {
    margin-top: 0px !important;
  }
  .mkillmarb {
    margin-bottom: 0px !important;
  }
  .mtext-right {
    text-align: right;
  }
  .mtext-center {
    text-align: center;
  }
  .mtext-left {
    text-align: left;
  }
  .mformat5 {
    width: 5%;
  }
  .mformat10 {
    width: 10%;
  }
  .mformat15 {
    width: 15%;
  }
  .mformat20 {
    width: 20%;
  }
  .mformat25 {
    width: 25%;
  }
  .mformat30 {
    width: 30%;
  }
  .mformat33 {
    width: 33.3%;
  }
  .mformat35 {
    width: 35%;
  }
  .mformat40 {
    width: 40%;
  }
  .mformat45 {
    width: 45%;
  }
  .mformat50 {
    width: 50%;
  }
  .mformat55 {
    width: 55%;
  }
  .mformat60 {
    width: 60%;
  }
  .mformat65 {
    width: 65%;
  }
  .mformat66 {
    width: 66.6%;
  }
  .mformat70 {
    width: 70%;
  }
  .mformat75 {
    width: 75%;
  }
  .mformat80 {
    width: 80%;
  }
  .mformat85 {
    width: 85%;
  }
  .mformat90 {
    width: 90%;
  }
  .mformat95 {
    width: 95%;
  }
  .mformat100 {
    width: 100%;
  }
  .mformatauto {
    width: auto !important;
    min-width: 0px !important;
    max-width: none !important;
  }
  .section-content {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }
  .Hero-Logo.SMaller {
    width: 80%;
  } /* background-color:#ffffff; */
  .MobileHideLogo {
    display: none !important;
  }
  /* Padding */
  /* Standard padding */
  .mspad20 {
    padding: 20px;
  }
  .section-content.Feature3,
  .section-content.Feature2,
  .section-content.Feature4,
  .section-content.Feature1,
  .section-content.Feature1b,
  .section-content.Feature1-alt,
  .section-content.video-holder,
  .section-content.Feature5,
  .section-content.Feature6 {
    background: #000;
    padding-top: 0px;
    padding-bottom: 0px;
    min-height: 30px;
    max-width: 100%;
  }
  .section-content.Feature3 .content-box,
  .section-content.Feature2 .content-box,
  .section-content.Feature4 .content-box,
  .section-content.Feature1 .content-box,
  .section-content.Feature1-alt .content-box,
  .section-content.video-holder .content-box {
    max-width: 100%;
    margin: 0;
    padding-bottom: 0;
    padding-top: 10px;
    text-align: center;
  }
  .Feature3-mobile-img,
  .Feature4-mobile-img,
  .Feature1-mobile-img,
  .Feature2-mobile-img,
  .Feature5-mobile-img,
  .Feature6.mobile-img {
    margin: 0 auto;
    display: block;
  }
  .Feature3 .section-wrapper .content-box,
  .Feature2 .section-wrapper .content-box,
  .Feature1 .section-wrapper .content-box,
  .Feature1b .section-wrapper .content-box,
  .Feature4 .section-wrapper .content-box {
    max-width: 100%;
  }
  br.hide-break {
    display: none;
  }
  .video {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 50px;
  }
  .FX-video {
    height: auto;
    margin-left: 0px;
  }
  .hero-text-box.mobile-hero-text-box {
    display: block;
    max-width: 575px;
    margin-bottom: 0px;
  }
  .hero-info {
    display: none;
  }
  .paragraph-intro {
    font-size: 20px;
    line-height: 29px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .section-content.intro {
    background-position: 23% 50% !important;
  }
  .section-wrapper.align-right {
    align-items: center;
  }
  .section-content {
    padding-right: 30px;
    padding-left: 30px;
  }
  .content-box {
    max-width: none;
  }
  .content-box-center {
    max-width: none;
  }
  .game-pass-container {
    width: 100%;
  }
  .intro-GameFeature .section-wrapper .content-box {
    max-width: 100%;
  }
  .product {
    padding-bottom: 30px;
  }
  .section-product {
    padding-right: 30px;
    padding-left: 30px;
  }
  br.line-break {
    display: none;
  }
  .section-footer {
    padding-right: 30px;
    padding-left: 30px;
  }
}
.content-box {
  max-width: 490px;
  align-self: auto;
}
@media (max-width: 600px) {
  .hero {
    max-height: 850px;
  }
  .Hero-Heading {
    font-size: 70px;
    line-height: 80px;
  }
  .Hero-Subhead {
    font-size: 40px;
    line-height: 40px;
  }
  .Hero-Logo {
    margin-top: 20px;
  }
  .call-out-left,
  .call-out-right {
    width: 100%;
  }
  .call-out-left {
    margin-top: 10px;
  }
  .call-out-right img {
    max-width: 200px;
  }
  .call-out-inner-wrapper {
    flex-direction: column-reverse;
  }
  .call-out-left {
    margin-right: 0px;
    margin-top: 50px;
  }
}
@media (max-width: 479px) {
  .Hero-Heading {
    font-size: 50px !important;
    line-height: 53px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .Hero-Logo.SMaller {
  } /* background-color:#ffffff; */
  .heading-1 {
    font-size: 36px;
    line-height: 36px;
  }
  .mfcenter {
    align-self: center;
  }
  .hero {
  }
  .Feature1 .section-wrapper {
    padding-left: 0px;
  }
  .Hero-Subhead {
    font-size: 40px;
    line-height: 40px;
  }
  .Hero-Content {
  }
  .Hero-Logo {
    margin-top: 20px;
  }
  .paragraph-intro {
    font-size: 20px;
    line-height: 29px;
    margin-bottom: 0px;
    width: 100%;
  }
  .section-content.intro {
    background-position: 18% 100% !important;
  }
  .t1 {
    overflow: visible;
    width: 100%;
    float: none;
  }
}
/*FOOTER*/
/* footer image not used in this landing page
.AMD-footer {
  background-image: url('../images/footer-bg.jpg');
  background-size: cover;
	background-position: center;
  padding-top: 30px;
}
*/
.AMD-footer .TWA-logo,
.AMD-footer .button {
  display: block;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 70px;
}
/***************FONTS**************/
@font-face {
  font-family: "Klavika";
  src: url("../fonts/KlavikaWebBasicRegular.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/KlavikaWebBasicRegular.eot?") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/KlavikaWebBasicRegular.woff") format("woff"),
    /* Pretty Modern Browsers */ url("../fonts/Klavika-Regular.ttf")
      format("truetype"); /* Safari, Android, iOS */
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Klavika";
  src: url("../fonts/KlavikaWebBasicBold.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/KlavikaWebBasicBold.eot?") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/KlavikaWebBasicBold.woff") format("woff"),
    /* Pretty Modern Browsers */ url("../fonts/Klavika-Bold.ttf")
      format("truetype"); /* Safari, Android, iOS */
  font-weight: 700;
  font-style: normal;
}

/* ==========================================================================
   ALTERNATE ADDITIONS — everything below this line is ours, not AMD-delivered.
   Keep it appended at the end so the diff against previous/ stays legible.
   ========================================================================== */

/*MODULE FOOTER*/
.ModuleFooter .section-wrapper {
  max-width: 1200px;
}
.ModuleFooter {
  padding-top: 30px;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 40px;
}

.ModuleFooter a {
  text-decoration: none;
  color: #fff;

  width: 100%;
}

.ModuleFooter .section-wrapper .content-box {
  max-width: 1200px;
  display: flex;
  flex-direction: column;
}
.ModuleFooter-logos {
  margin-bottom: 50px;
  margin-top: 50px;
  max-width: 424px;
  height: auto;
  align-self: center;
}
.ModuleFooter .content-box {
  margin-left: auto;
  width: 100%;
  margin-right: auto;
}

/*Module Chart*/
.ModuleChart {
  width: 100%;
  background-color: #181818;
  margin-bottom: 40px;
  text-align: center;
}
.ModuleChart td {
  border-right: 3px black solid;
}
.ModuleChart .chart-header {
  /* font-family: "Klavika-Bold", sans-serif; */
  font-size: 20px !important;
  line-height: 20px;
  padding: 40px;
  font-weight: 600;
}
.ModuleChart .chart-body {
  font-family: "Noto Sans", sans-serif;
  padding: 30px;
}
.ModuleChart tr:first-child {
  background: linear-gradient(to right, rgb(246, 111, 25), rgb(242, 20, 33));
}
.ModuleChart .chart-body {
  font-size: 18px !important;
  line-height: 30px;
  padding: 20px;
}
.ModuleChart .chart-header {
  font-size: 24px;
  line-height: 26px;
  padding: 20px;
}
.align-top {
  vertical-align: top;
}

/* Shared classes used */
.section-content {
  /* No direct rule, but used as base class */
}
.section-wrapper {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Mobile responsive styles */
@media (max-width: 767px) {
  .ModuleFooter {
    padding-left: 0px;
    padding-right: 0px;
  }
  .section-wrapper {
    padding-left: 30px;
    padding-right: 30px;
  }

  /* Four columns will not fit a phone: every product name wrapped onto three or
     four lines and the chart became unreadable. Stack the cells into full-width
     rows instead, so it reads top-to-bottom as
     [PC models] + [AMD products] = [game]. */
  .ModuleChart,
  .ModuleChart tbody,
  .ModuleChart tr,
  .ModuleChart td {
    display: block;
    width: 100%;
  }
  /* Stacked cells need horizontal rules, not the desktop vertical ones. */
  .ModuleChart td {
    border-right: 0;
  }
  .ModuleChart td + td {
    border-top: 3px solid #000;
  }
  .ModuleChart .chart-header {
    font-size: 20px !important;
    line-height: 24px;
    padding: 14px 16px;
  }
  .ModuleChart .chart-body {
    font-family: "Noto Sans", sans-serif;
    font-size: 16px !important;
    line-height: 26px;
    padding: 16px;
  }
  .ModuleChart tr:first-child {
    background: linear-gradient(to right, rgb(246, 111, 25), rgb(242, 20, 33));
  }
}

/* .ModuleFooter a sets width:100% so the table wrappers fill the column; that
   would also stretch our "view all products" button. Keep it intrinsically
   sized, and give it more room than AMD's 200px cap (their labels are all two
   short words) so the label stays on one line. */
.ModuleFooter .button {
  width: auto;
  max-width: 260px;
  margin-top: 0;
  margin-bottom: 50px;
}

/* AMD ships .LP-Card iframe at a fixed 370x208 (css/imageSliderLP.css). Once the
   available slide width drops below that — any phone, and even a 3-up desktop
   slide in a ~1100px container — the iframe overflows its slide box and bleeds
   over the neighbouring video, which is the "videos overlappen" report. Make it
   fluid and hold 16:9 instead.
   AMD's own commented-out fix in imageSliderLP.css used height:auto alone, which
   collapses an iframe to zero height because iframes have no intrinsic ratio;
   aspect-ratio is what actually makes it work. */
.LP-Card iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* ...but width:100% only works if the parent has a definite width, and .LP-Card
   did not. It is a flex item with an auto basis, so it sized itself to its
   content — which used to be the fixed 370px iframe. Once the iframe became
   fluid that turned into a circular percentage and the iframe fell back to its
   intrinsic 300px default, leaving the card 300px inside a wider slide. Make the
   card fill its slide so the iframe has something real to resolve against. */
.LP-Card {
  flex: 1 1 auto;
  min-width: 0;
}

/* FR desktop hero. The mobile hero is an <img> the FR page can just point
   elsewhere, but the desktop banner is a CSS background on .Feature1 and this
   stylesheet is shared by index.html and index_FR.html — so the FR page carries
   an extra .Feature1-fr class and overrides only the image here. Two classes
   beat the one-class .section-content.Feature1 rule above, so order is not
   load-bearing. */
.section-content.Feature1.Feature1-fr {
  background-image: url("../images/1306_Header_d_fr.webp?v=1");
}