body {
  background: #1c2630;
  color: #fff;
  overflow-x: hidden;

  font-family: "Lato", Arial, Helvetica, sans-serif;
  background-image: linear-gradient(to bottom, #1c2630, #444c53);
}

a {
  text-decoration: none;
}

.pub {
  width: 100%;
}

.content {
  max-width: 1280px;
  width: 90%;
  margin: 0 auto;
}

h2 {
  font-family: "Saira";
  font-size: 25px;
  font-weight: 600;
  margin: 40px 0 50px;
}

.car {
  overflow-x: hidden;
  min-height: 37vw;
}

.carousel {
  text-align: center;
  position: absolute;

  opacity: 0;
  display: none;
  cursor: pointer;
}
.carousel img,
.caroussel-images {
  width: 60%;
  margin: 0 auto;
}

.caroussel-images {
  z-index: 4;
  transform: translateY(-50%);
  clip-path: inset(-100% 0 calc(50% + 2px) 0);
}
.caroussel-images::before {
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  position: absolute;
  z-index: -2;

  background: -moz-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, rgba(0, 0, 0, 0)),
    color-stop(100%, rgba(0, 0, 0, 1))
  );
  background: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
}
.caroussel-images img {
  width: calc(25% - 24px);
  padding: 10px;
  transition: all 0.35s ease;
}
.caroussel-images img:hover {
  transform: translateY(-30%);

  -webkit-box-shadow: 0px 4px 19px -16px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 4px 19px -16px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 4px 19px -16px rgba(0, 0, 0, 0.75);
}
.carousel-active {
  z-index: 2;
}
.carousel-active,
.carousel-before,
.carousel-after {
  opacity: 1;
  display: inherit;

  transition: all 1s ease;
}
.carousel-before {
  transform: translateX(-62%) scale(0.8);
  opacity: 0.6;
}
.carousel-after {
  transform: translateX(62%) scale(0.8);
  opacity: 0.6;
}

.carousel-after.carousel-in {
  animation: in1 1s ease;
}
@keyframes in1 {
  0% {
    transform: translateX(90%) scale(0.8);
  }
  100% {
    transform: translateX(62%) scale(0.8);
  }
}

.carousel-before.carousel-in {
  animation: in2 1s ease;
}

@keyframes in2 {
  0% {
    transform: translateX(-90%) scale(0.8);
  }
  100% {
    transform: translateX(-62%) scale(0.8);
  }
}

#prev,
#next {
  width: 16%;
  min-height: 32vw;
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;

  transition: all 0.3s ease;
}
#prev {
  left: 0;
  justify-content: flex-end;
  margin-left: 250px;

  background: linear-gradient(
    to right,
    rgba(29, 39, 49, 1) 0%,
    rgba(29, 39, 49, 0) 50%,
    rgba(29, 39, 49, 0) 100%
  );
}
#next {
  right: 0;
  justify-content: start;

  background: linear-gradient(
    to right,
    rgba(29, 39, 49, 0) 0%,
    rgba(29, 39, 49, 0) 50%,
    rgba(29, 39, 49, 1) 100%
  );
}
#prev img,
#next img {
  margin: 20px;
}
.not {
  transition: opacity 0.5s ease;
  opacity: 0;
}
.content-global-2 #prev,
.content-global-2 #next {
  width: 18%;
  min-height: 34vw;
}
.content-global-2 #prev {
  margin-left: 80px;
}
.barbaAnimated #prev,
.barbaAnimated .content-global-2 #prev {
  margin-left: 0;
}

.game {
  display: flex;
}
.title-game {
  flex: 1;
  text-align: left;
  margin-left: 20%;
  margin-top: -8%;
}
.price-game {
  flex: 1;
  text-align: right;
  margin-right: 20%;
  margin-top: -8%;
}
.title-game,
.price-game {
  font-family: "Saira";
  font-size: 1.4em;
  font-weight: 600;
}

.special-offer {
  display: flex;
  padding: 0 10%;
}
.special-offer p {
  color: #fff;
  margin-top: 10px;
}
.game-img {
  background-size: cover !important;
  background-position: center !important;
}
.game-prez,
.game-2 {
  flex: 1;
  margin: 10px;
}
.game-2 {
  margin: 0 10px;
}

.game-img {
  background: red;
  height: 400px;
  display: flex;
  align-items: flex-end;
}
.promo {
  float: left;
  margin-bottom: 0;
}

.promo-1 {
  background: #fcab26;
  padding: 10px 15px;
  text-align: center;
  font-size: 2.2em;
  font-weight: 900;
}
.promo-2 {
  flex: 1;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(1px);
  padding: 0 10px 5px;
}
.promo-2 p {
  margin: 0;
  text-align: end;
  font-weight: 900;
  font-size: 1.5em;
}
.promo-2 small {
  text-decoration: line-through;
  opacity: 0.8;
}
small {
  font-size: 65%;
}

.game-2 .game-prez {
  height: 38.4%;
  margin: 0;
}
.game-2 .game-img {
  height: inherit;
  margin-top: 10px;
}
.title {
  font-family: "Saira";
  margin-top: 10px;
}

.genres,
.categorie {
  max-width: 700px;
  width: 100%;
  margin: 0 auto 20px;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  overflow: hidden;
  clip-path: inset(1px 0 1px 0);
}
.genres p,
.categorie p {
  margin: 0;
  padding: 10px 18px;
  font-size: 1.2em;

  cursor: pointer;
}
.categorie p {
  margin: 0 14px;
}
#bar,
#bar2 {
  height: 2px;
  position: absolute;
  background: #fcab26;
  justify-self: start;

  transition: all 0.3s ease;
}

.g-invisible {
  display: none;
}
.g-visible {
  display: flex;
  align-items: center;
}
.genre-game {
  flex: 1;
  padding: 15px;

  transition: all 0.2s linear;

  cursor: pointer;
}
.genre-game:hover {
  transition: all 0.2s linear;
  transform: scale(1.06);
}
.genre-game:hover > .genre-game {
  opacity: 0;
}

.genre-game img {
  width: 100%;
}

.op {
  opacity: 0.4;
  transition: all 0.2s ease;
}

/**************
   Responsive
***************/

@media only screen and (max-width: 850px) {
  .special-offer {
    padding: 0;
  }
  .content {
    width: calc(100% - 20px);
  }
}
@media only screen and (max-width: 700px) {
  h2 {
    text-align: center;
  }
  .special-offer {
    display: inherit;
  }
  .game-prez,
  .game-2 .game-prez {
    width: calc(50% - 20px);
    margin: 10px;
    flex: inherit;
    display: inline;

    float: left;
  }
  .game-2 .game-img {
    height: 400px;
  }
  .game-2 .game-prez {
    margin-bottom: 50px;
  }

  .carousel img,
  .caroussel-images {
    width: 80%;
    margin: 0 auto;
  }
  .caroussel-images {
    display: none;
  }
  .game {
    margin-top: 39px;
  }
  .title-game {
    margin-left: 10%;
  }
  .price-game {
    margin-right: 10%;
  }
  .plus {
    margin-top: 96px;

    margin-bottom: 14px;
  }
  .carousel-after,
  .carousel-before {
    opacity: 0;
  }
  #prev img,
  #next img {
    margin: 15px;
    margin-top: 130%;
  }
  #prev,
  #next {
    width: 10%;
  }
}

/* special offers */
.special {
  width: 100%;
  background-image: url(../img/AmbitiousIllfatedBillygoat.gif);
  background-size: cover;
  background-position: center center;
  padding: 130px 0;
  margin: 50px 0 60px;

  display: inline-block;
  position: relative;
}

.special-new{
  background-image: url(../img/eastshade.gif)!important;
}

.special-new2{
  background-image: url(../img/giphy.gif)!important;
}
.special-new3{
  background-image: url(../img/70267601_403158320347546_2905101950435459072_n.gif)!important;
}

.special2 {
  padding: 15px 20px;
  width: 68%;

  background-color: rgba(200, 200, 200, 0.15);
  backdrop-filter: blur(5px);
  border: 0px #171a21 solid;
  border-radius: 7px;
}

.special::before {
  content: "";
  width: 100%;
  height: 100%;
  /* background: red; */
  /* opacity: 0.5; */
  position: absolute;
  transform: translateY(-130px);

  background: linear-gradient(
    to bottom,
    rgba(30, 40, 50, 1) 0%,
    rgba(30, 40, 50, .5) 20%,
    rgba(42, 52, 60, .5) 80%,
    rgba(42, 52, 60, 1) 100%
  );
}

.special2 h2 {
  margin-left: 24px;
  margin-bottom: 15px;
}
.special-offer {
  padding: inherit;
}