.accordion ul {
  background-image: url("http://placehold.it/1x1");
}

@media screen and (min-width:769px) {
  .accCont[data-grid~=container] {
      max-width: calc(1600px + 10%);
      margin: 0 auto;
      padding-left: 5%;
      padding-right: 5%;
      padding-bottom: 120px;
  }
}

.grey-c {
  color: #c8c8c8;
}

.accordion ul li.initial:nth-child(1) {
  background-image: url("https://compass-ssl.xbox.com/assets/a6/f4/a6f4efac-0199-488b-a974-7da27ea52b8a.jpg?n=X1X_Accordion-Closed-1084_NBA2K20_320x800.jpg");
}

.accordion ul li.initial:nth-child(2) {
  background-image: url("https://compass-ssl.xbox.com/assets/f7/d5/f7d5ce9e-4c49-4625-8bf5-5327af4223c7.jpg?n=X1X_Accordion-Closed-1084_FH4_320x800.jpg");
}

.accordion ul li.initial:nth-child(3) {
  background-image: url("https://compass-ssl.xbox.com/assets/5c/33/5c33c80b-4730-492d-9aab-27096d44f46c.jpg?n=X1X_Accordion-Closed-1084_Star-Wars-Fallen-Order_320x800.jpg");
}

.accordion ul li.initial:nth-child(4) {
  background-image: url("https://compass-ssl.xbox.com/assets/22/fc/22fc3888-8e8c-4d70-b8ac-232871e1f836.jpg?n=X1X_Accordion-Closed-1084_Gears-5_320x800.jpg");
}

.accordion ul li.initial:nth-child(5) {
  background-image: url("https://compass-ssl.xbox.com/assets/e0/d2/e0d220f7-0403-482f-be56-ff3c96c97e00.jpg?n=X1X_Accordion-Closed-1084_Cyberpunk_320x800.jpg");
}

@media screen and (max-width: 1083px) {
  .accordion ul li.initial:nth-child(1) {
      background-image: url("https://compass-ssl.xbox.com/assets/6b/6e/6b6eba8e-d726-478c-a61a-e625bebedd76.jpg?n=X1X_Accordion-Closed-0_NBA2K20_904x290.jpg");
  }
  .accordion ul li.initial:nth-child(2) {
      background-image: url("https://compass-ssl.xbox.com/assets/e6/24/e6244291-0e1c-4031-8922-466bfde7b7b5.jpg?n=X1X_Accordion-Closed-767_FH4_904x290.jpg");
  }
  .accordion ul li.initial:nth-child(3) {
      background-image: url("https://compass-ssl.xbox.com/assets/ea/99/ea99ac9e-bf01-4e1d-bf09-cbfca2a36a2a.jpg?n=X1X_Accordion-Closed-0_Star-Wars-Fallen-Order_904x290.jpg");
  }
  .accordion ul li.initial:nth-child(4) {
      background-image: url("https://compass-ssl.xbox.com/assets/35/54/3554df3a-bcd4-4062-9493-5e896d6612d6.jpg?n=X1X_Accordion-Closed-0_Gears5_904x290.jpg");
  }
  .accordion ul li.initial:nth-child(5) {
      background-image: url("https://compass-ssl.xbox.com/assets/f5/3f/f53f3a4c-e362-499a-86b7-559c4a382653.jpg?n=X1X_Accordion-Closed-0_Cyberpunk_904x290.jpg");
  }
}

@media screen and (max-width: 767px) {
  .accordion ul li.initial:nth-child(1) {
      background-image: url("https://compass-ssl.xbox.com/assets/b4/c4/b4c4ea43-6e1f-4c2b-94dc-6ee940edddd4.jpg?n=X1X_Accordion-Closed-0_NBA2K20_640x256.jpg");
  }
  .accordion ul li.initial:nth-child(2) {
      background-image: url("https://compass-ssl.xbox.com/assets/86/2f/862f98cf-7a1a-4ec8-918e-6aee455e837a.jpg?n=Xbox_767Jump_In_Accordion_Closed_ForzaHorizon.jpg");
  }
  .accordion ul li.initial:nth-child(3) {
      background-image: url("https://compass-ssl.xbox.com/assets/64/e4/64e4b6bc-b21f-401b-9424-00146b7dcb7b.jpg?n=X1X_Accordion-Closed-0_Star-Wars-Fallen-Order_640x256.jpg");
  }
  .accordion ul li.initial:nth-child(4) {
      background-image: url("https://compass-ssl.xbox.com/assets/ba/8b/ba8b0ad4-3966-4a2b-b874-b1c552f4d118.jpg?n=X1X_Accordion-Closed-0_Gears5_640x256.jpg");
  }
  .accordion ul li.initial:nth-child(5) {
      background-image: url("https://compass-ssl.xbox.com/assets/ae/3a/ae3a31ee-b10f-40ad-9b92-e5055ae59e2e.jpg?n=X1X_Accordion-Closed-0_Cyberpunk_640x256.jpg");
  }
}


/**************************************/

.accordion ul:focus {
  outline: 1px solid #fff;
}

.accordion ul {
  width: 100%;
  display: inline-table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
  background-size: cover;
}

.accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 500ms ease;
}

.accordion ul li.initial {
  background-size: 100% 100%;
  /*-webkit-transition: background-size .25s ease-out;
            -moz-transition: background-size .25s ease-out;
             -o-transition: background-size .25s ease-out;
             -ms-transition: background-size .25s ease-out;
             transition: background-size .25s ease-out; */
}

.accordion ul li.initial:hover {
  background-size: 120% 120%;
  /* -webkit-transition: background-size .65s ease-in;      
             -moz-transition: background-size .65s ease-in;
             -o-transition: background-size .65s ease-in;
           -ms-transition: background-size .65s ease-in;      
           transition: background-size .65s ease-in; */
}

.accordion ul li:focus>.mainCont,
.accordion ul li:active>.mainCont {
  outline: 1px solid #fff;
}

.accordion ul li>.mainCont {
  display: block;
  height: 41.65vw;
  width: 100%;
  position: relative;
  z-index: 3;
  vertical-align: bottom;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  font-family: SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
  transition: all 200ms ease;
  display: block;
  overflow: hidden;
}


/**************/

.accordion ul li .mainCont .c-paragraph-3 strong {
  letter-spacing: 4px;
}

.accordion ul li.contracted .mainCont {
  background: rgba(255, 255, 255, 0.1);
}

.accordion ul li.expanded .mainCont {
  background: none;
}

.accordion ul:hover li.expanded:hover .mainCont {
  cursor: default;
}

.accordion ul:hover li:hover .mainCont {
  background: none;
  cursor: pointer;
}

.accordion .mainCont .c-heading-2 {
  padding-top: 10px;
  /*white-space: nowrap;*/
}

.accordion ul li.expanded .content {
  color: #000;
  display: block;
  margin-left: 11%;
  width: 20vw;
}

@media (min-width: 1084px) and (max-width: 1200px) {
  .accordion ul li.expanded .content {
      width: 26vw;
  }
}

.accordion ul li.expanded .content.right {
  float: right;
  margin-right: 11%;
  margin-left: 0;
}

.accordion ul li .content {
  display: none;
}

.accordion ul li span p {
  position: absolute;
  width: 30em;
  height: auto;
  bottom: 5%;
  left: 6px;
  text-indent: 1em;
  padding: 0;
  margin: 0;
  color: #fff;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.accordion ul li .expandBtn {
  width: 16px;
  position: absolute;
  bottom: 5%;
  left: 12px;
}

.accordion ul li.initial span p,
.accordion ul li.expanded span p,
.accordion ul li.initial .expandBtn,
.accordion ul li.expanded .expandBtn {
  display: none;
}

.expanded {
  width: 100%;
}

.initial {
  width: 20%;
}

.btnClose {
  width: 22px;
  position: relative;
  z-index: 100;
  left: 98%;
  margin-top: 12px;
  background-color: rgba(0, 0, 0, .6);
}

@media screen and (min-width: 1084px) {
  .contracted {
      width: 4.45%;
  }
  .btnClose {
      left: 96%;
  }
  .accordion .content {
      margin-top: 1vw;
  }
  .accordion ul li.expanded span p {
      right: -31%;
      left: auto;
  }
}

@media screen and (min-width: 1400px) {
  .contracted {
      width: 3.3%;
  }
  .btnClose {
      left: 97%;
  }
  .accordion .content {
      margin-top: 6vw;
  }
  .accordion ul li.expanded span p {
      right: -26%;
      left: auto;
  }
}

@media screen and (min-width: 1600px) {
  .contracted {
      width: 3%;
  }
  .btnClose {
      left: 98%;
  }
  .accordion .content {
      margin-top: 10vw;
  }
  .accordion ul li.expanded span p {
      right: -23%;
      left: auto;
  }
}

.initial .btnClose,
.contracted .btnClose {
  display: none;
}

.btnClose img {
  cursor: pointer;
}

.svgBorder {
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
}

.logoImg {
  margin: 0 auto;
  position: absolute;
  /*bottom: 56px;*/
  bottom: 8%;
  margin-left: 1.8vw;
  width: 77%;
  text-align: center;
}

.logoImg img {
  width: 100%;
  display: table;
}

.logoImg .seeDetailsBtn,
.logoImg p {
  display: none;
}

.accordion ul li:hover .logoImg .seeDetailsBtn {
  display: inline-block;
  width: 20px;
  margin-right: 15px;
}

.accordion ul li .logoImg p {
  text-transform: uppercase;
}

.accordion ul li:hover .logoImg p {
  display: inline-block;
  padding-top: 32px;
  padding-top: 12.9%;
  font-weight: 400;
  letter-spacing: 0.17em;
}

.expanded .logoImg,
.contracted .logoImg {
  display: none;
}

.accordion .c-action-trigger {
  /*position: relative;
  top: -5px;*/
  padding: 10px 3px 7px 0;
}

.accordion .c-action-trigger.c-glyph::after,
.accordion .c-action-trigger.c-glyph::before {
  font-family: MWF-MDL2;
  display: inline-block;
  top: -2px;
  position: relative;
}


/********** mobile ***************/

@media screen and (max-width: 1083px) {
  .logoImg {
      margin-left: 6vw;
      width: 33%;
      bottom: 7vw;
  }
  .logoImg>div {
      position: absolute;
      right: -150%;
      bottom: 7vw;
  }
  .logoImg .seeDetailsBtn {
      display: inline-block;
      width: 20px;
      margin-right: 15px;
  }
  .logoImg p {
      display: inline-block;
      margin-right: 15px;
  }
  .accordion ul li:hover .logoImg p {
      padding-top: 3px;
  }
  .accordion {
      height: auto;
  }
  .accordion ul li {
      background-size: cover !important;
  }
  .accordion ul li,
  .accordion ul li:hover,
  .accordion ul:hover li,
  .accordion ul:hover li:hover {
      position: relative;
      display: table;
      table-layout: fixed;
      width: 100%;
      -webkit-transition: none;
      transition: none;
  }
  .accordion ul li span p {
      position: absolute;
      width: 30em;
      height: auto;
      bottom: 27%;
      left: 15%;
      text-indent: 1em;
      padding: 0;
      margin: 0;
      color: #acacac;
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
      transform: none;
  }
  .accordion ul li .expandBtn {
      bottom: 34%;
      left: 8.33%;
  }
  .accordion ul li.expanded>.mainCont {
      height: 100vw;
  }
  .accordion ul li.initial>.mainCont {
      height: 28.3vw;
  }
  .accordion ul li.initial:hover {
      background-size: cover;
  }
  .accordion ul li .mainCont {
      background: none;
  }
  .accordion ul li.contracted>.mainCont {
      height: 44px;
  }
  .accordion ul li.expanded .content {
      margin: 0 8.33%;
      width: auto;
      position: absolute;
      bottom: 9%;
  }
  .accordion ul li.expanded .content.right {
      float: none;
      margin-left: 11%;
      margin-right: 0;
  }
  .svgBorder {
      width: 1px;
      height: auto;
      max-height: 87vw;
      position: absolute;
      z-index: 99;
      top: auto;
      left: 0px;
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);
  }
  .btnClose {
      left: 85vw;
      top: 0;
  }
}

@media screen and (max-width: 767px) {
  .accCont[data-grid~=container] {
      padding-left: 5%;
      padding-right: 5%;
  }
  .accordion ul li.initial>.mainCont {
      height: 30.6vw;
  }
  .accordion ul li.expanded .content {
      bottom: 7%;
  }
  .btnClose {
      left: 80vw;
      top: 0;
  }
}

@media screen and (max-width: 540px) {
  .accordion ul li span p {
      position: absolute;
      width: 20em;
      height: auto;
      bottom: 27%;
      left: 15%;
      text-indent: 1em;
      padding: 0;
      margin: 0;
      color: #acacac;
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
      transform: none;
  }
  .accordion ul li.contracted>.mainCont {
      height: 60px;
  }
}

.accCont sup {
  font-size: 0.4em;
  top: -0.8em;
}


/* aspect ratio fix, SGM 6-2020*/

@media screen and (min-width: 1084px) and (max-width: 1799px) {
  .accordion ul li>.mainCont {
      height: 44.47vw;
  }
}

@media screen and (min-width: 1800px) {
  .accordion ul li>.mainCont {
      height: 800px
  }
}


/* END aspect ratio fix, SGM 6-2020*/