/*header
-----------------------------------------------------------*/
#univers-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  height: auto;
  min-height: 100vh;
  width: 100%;
  margin: 0px;
  background-color: #c1ebf6;
  z-index: 0;
  overflow: hidden;
}
#univers-header::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 36vh;
  background-image: url(../../images/univers-illu-bg-1.svg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

@media (max-width: 991.98px) {
  #univers-header {
    align-items: flex-start;
    min-height: 900px;
  }
}
@media (max-width: 767.98px) {
  #univers-header {
    min-height: 700px;
  }
  #univers-header::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 26vh;
    background-image: url(../../images/univers-illu-bg-1.svg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
  }
}

#univers-header .univers-header-wrapper {
  /* position: relative; */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  /* min-height: 100vh; */
  margin: 0px;
  /* margin-top: 10rem; */
  overflow: hidden;
}
@media (max-width: 767.98px) {
  #univers-header .univers-header-wrapper {
    width: 100%;
    max-width: 100%;
  }
}

#univers-header .univers-header-wrapper .caption-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  padding: 1rem;
  margin: 8rem 0px 1rem;
  z-index: 2;
}
@media (max-width: 991.98px) {
  #univers-header .univers-header-wrapper .caption-wrapper {
    padding: 1rem 0;
    margin: 8rem 0px 3rem;
  }
}
@media (max-width: 767.98px) {
  #univers-header .univers-header-wrapper .caption-wrapper {
    margin: 7rem 0px 5rem;
  }
}
#univers-header .univers-header-wrapper .caption-wrapper .head_title {
  font-size: var(--display1-size);
  color: var(--secondary);
  text-transform: none;
  padding-bottom: 0;
  margin-bottom: 0.5rem;
}
#univers-header .univers-header-wrapper .caption-wrapper .head_title::after {
  display: none;
}
@media (max-width: 991.98px) {
  #univers-header .univers-header-wrapper .caption-wrapper .head_title {
    font-size: var(--display3-size);
  }
}
@media (max-width: 768.98px) {
  #univers-header .univers-header-wrapper .caption-wrapper .head_title {
    font-size: var(--display4-size);
  }
}
@media (max-width: 575.98px) {
  #univers-header .univers-header-wrapper .caption-wrapper .head_title {
    font-size: var(--display5-size);
  }
}
#univers-header .univers-header-wrapper .caption-wrapper .txt-caption {
  height: auto;
  margin-top: 0;
  margin-bottom: auto;
  z-index: 1;
}
@media (max-width: 768.98px) {
  #univers-header .univers-header-wrapper .caption-wrapper .txt-caption > p {
    font-size: var(--font-size-sm);
    line-height: 1.3;
  }
}
#univers-header .univer-illu-container {
  position: relative;
  width: 100%;
  max-width: 1350px;
  z-index: 0;
}
@media (max-width: 991.98px) {
  #univers-header .univer-illu-container {
    width: 130vw;
    position: absolute;
    bottom: 0;
  }
}
@media (max-width: 575.98px) {
  #univers-header .univer-illu-container {
    min-width: 700px;
    position: absolute;
    bottom: 0;
  }
}
#univers-header .univer-illu-container .btn-trefle {
  position: absolute;
  top: 4.7%;
  right: 37.7%;
  height: 40px;
  width: 35px;
  border: 0;
  background-color: transparent;
  background-image: url(../../images/illu-trefle.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 1;
  transition: all 0.3s ease;
}
#univers-header .univer-illu-container .btn-trefle:hover {
  outline: 0;
  transform: translateY(-10%) rotate(-15deg) scale(1.1);
}
#univers-header .univer-illu-container .btn-trefle:focus {
  outline: 0;
}
@media (max-width: 768.98px) {
  #univers-header .univer-illu-container .btn-trefle {
    top: 4.7%;
    right: 37.7%;
    height: 30px;
    width: 25px;
  }
  .popover {
    max-width: 176px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    font-size: var(--font-size-s);
  }
}
/*---header univers ---------*/
#product_list .head_title {
  font-size: var(--display2-size);
}
@media (max-width: 991.98px) {
  #product_list .head_title {
    font-size: var(--display3-size);
  }
}
@media (max-width: 768.98px) {
  #product_list .head_title {
    font-size: var(--display4-size);
  }
}
@media (max-width: 575.98px) {
  #product_list .head_title {
    font-size: var(--display5-size);
  }
}

/* page category (games) ----------*/
#category-header {
  position: relative;
  height: auto;
  width: 100%;
  margin: 0px;
  padding-top: 1rem;
  background-color: var(--primary);
  z-index: 0;
	background-size: cover;
}

@media (max-width: 575.98px) {
  #category-header::before,
  #category-header::after {
    background-size: auto 130%;
    width: 45%;
  }
}
#category-header .category-header-wrapper {
  position: relative;
  z-index: 1;
	margin-top: 7rem;
}
@media (max-width: 768.98px) {
  #category-header .category-header-wrapper {
    max-width: 100%;
  }
}
#category-header .category-header-wrapper .row {
  align-items: flex-end;
  justify-content: center;
}
@media (max-width: 575.98px) {
  #category-header .category-header-wrapper .row {
    justify-content: flex-end;
  }
}
#category-header .category-header-wrapper .txt-caption {
  margin: 5rem 0;
}
#category-header .category-header-wrapper .txt-caption p {color: #fff}
@media (max-width: 575.98px) {
  #category-header .category-header-wrapper .category-img-container {
    flex-wrap: wrap;
    order: 2;
    margin-bottom: -15%;
  }
  #category-header .category-header-wrapper .category-img-container img {
    transform: translateY(-15%);
  }
/*  #category-header .category-header-wrapper .txt-caption {
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    order: 1;
  }*/
}

#category-header .category-header-wrapper .txt-caption .head_title {
  padding: 0;
  font-size: var(--display1-size);
}
#category-header .category-header-wrapper .txt-caption .head_title::after {
  display: none;
}
@media (max-width: 1200.98px) {
  #category-header .category-header-wrapper .txt-caption .head_title {
    font-size: var(--display2-size);
  }
}
@media (max-width: 768.98px) {
  #category-header .category-header-wrapper .txt-caption .head_title {
    font-size: var(--display3-size);
  }
}
@media (max-width: 575.98px) {
  #category-header .category-header-wrapper .txt-caption .head_title {
    font-size: var(--display4-size);
  }
}

#category-family .head_title {
  font-size: var(--display2-size); color: var(--maron);
}
@media (max-width: 991.98px) {
  #category-family .head_title,
  #category-timeline .head_title {
    font-size: var(--display3-size);
  }
}
@media (max-width: 768.98px) {
  #category-family .head_title,
  #category-timeline .head_title {
    font-size: var(--display4-size);
  }
}
@media (max-width: 575.98px) {
  #category-family .head_title,
  #category-timeline .head_title {
    font-size: var(--display5-size);
  }
}
#category-timeline {
  position: relative;
}
#category-timeline::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  background-image: url(../../images/category-timeline-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: 1s 0.5s ease all;
}
#category-timeline.in-view::before {
  opacity: 1;
}
#category-timeline .section-header .head_title {
  margin-top: 2rem;
  padding-bottom: 0;
  font-size: var(--display3-size);
}
#category-timeline .section-header .head_title::after {
  display: none;
}
#category-timeline .section-header p {
  font-weight: 600;
  font-size: var(--font-size-md);
  margin-bottom: 2rem;
}