/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/****************************************************** THEME SPEED RACE *********************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/

@font-face {
  font-family: "Helvetica Neue";
    font-display: swap;
  src: url("../font/helvetica-neue-bold.ttf") format("truetype");
  font-weight: 700;
}

html {
  scroll-behavior: smooth;
}

body {
  padding: 0;
  margin: 0;
  font-family: "transducer", "Helvetica Neue", "Roboto", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
}

a {
  text-decoration: none;
}

* {
  transition: 0.2s;
}

section {
  height: 100vh;
  width: 100%;
  padding: 8rem 0;
  box-sizing: border-box;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (max-width: 1440px) {
  html {
    font-size: 14.5px;
  }
}

@media screen and (max-width: 1366px) {
  html {
    font-size: 14px;
  }
}

@media screen and (max-width: 1280px) {
  html {
    font-size: 13.5px;
  }
}

@media screen and (max-width: 1080px) {
  html {
    scroll-padding-top: 3rem;
    font-size: 13px;
  }
    section {
        padding: 2rem 0;
    }
}

@media screen and (max-width: 992px) {
  section {
    height: unset;
    font-size: 12.5px;
  }
}

@media screen and (max-width: 600px) {
  html {
    scroll-padding-top: 3.5rem;
    font-size: 13px;
  }
}

@media screen and (min-width: 1921px) {
  html {
    font-size: 24px;
  }
}

@media screen and (min-width: 2881px) {
  html {
    font-size: 34px;
  }
}

h2 {
  color: #ffffff;
  font-size: 3.5rem;
  z-index: 1;
  line-height: 1;
  text-align: center;
  margin: 0 0 1rem;
}
h2 span {
  display: block;
  font-size: 2.25rem;
}

/******* MENU *******/

header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 3;
  background-color: rgb(0, 0, 0, 0.75);
}

.header-top {
  border-bottom: 2px solid #ff7900;
  margin: 0 0 0 1rem;
}

.header-top-logo {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 9rem;
}
.header-top-logo:hover {
  opacity: 0.9;
}

.nav-bar > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-bar li > a {
  color: white;
  font-size: 1.25rem;
  display: block;
  position: relative;
  padding: 1.675rem 1.5rem;
}
.nav-bar li > a.active:after {
  content: "";
  width: 40%;
  position: absolute;
  bottom: -5px;
  height: 10px;
  background: transparent;
  left: 50%;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-color: #ff7900;
}

.nav-bar li > a.active,
.nav-bar li > a:not(.active):hover {
  color: #ff7900;
  text-shadow: 0 0 10px rgba(254, 118, 0, 0.8);
}

/******* MENU MOBILE *******/

.menu-mobile {
  display: none;
}

.menu-mobile-switch {
  display: block;
  position: absolute;
  left: 1.5rem;
  top: 1.25rem;
  cursor: pointer;
}

.menu-mobile-switch > svg {
  fill: white;
  width: 2.5rem;
  height: 2.5rem;
}

.menu-panel {
  display: none;
  padding: 4rem 0;
  background: black;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: calc(100vh - 8rem);
  z-index: 3;
}

.menu-panel nav > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.menu-panel nav > ul > li {
  border-top: 2px solid #ff931e;
  width: 100%;
}
.menu-panel nav > ul > li:last-child {
  border-bottom: 2px solid #ff931e;
}
.menu-panel nav > ul > li > a {
  color: white;
  font-size: 2rem;
  font-weight: 500;
  display: block;
  text-align: center;
  padding: 1.25rem 0;
  margin: 0.5rem 0;
  line-height: 1;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
}

.header-result {
  position: absolute;
  top: 0rem;
  right: 0rem;
  cursor: pointer;
  gap: 1rem;
  display: flex;
  font-size: 1.25rem;
  align-items: center;
  color: white;
  background: radial-gradient(#ff931e 0%, #ff931e 50%, #fe7600 100%);
  height: max-content;
  padding: 1.675rem 2rem;
}
.header-result:hover {
  color: black;
}

.burger-close {
  position: absolute;
  top: 2rem;
  cursor: pointer;
  width: 3rem;
  height: 3rem;
  right: 2rem;
  filter: grayscale(1) brightness(10);
}

@media screen and (min-width: 1921px) {
  .nav-bar li > a {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 1440px) {
  .nav-bar li > a {
    font-size: 1.25rem;
    padding: 1.65rem 1.25rem;
  }
}

@media screen and (max-width: 1080px) {
  .nav-bar li > a {
    font-size: 1.15rem;
    padding: 1.675rem 0.875rem;
  }
  .header-result {
    font-size: 1.25rem;
    padding: 1.675rem 1.5rem;
  }
}

@media screen and (max-width: 992px) {
  .menu-panel .header-logo {
    margin: 0 auto 3rem;
    display: flex;
  }
  .menu-panel .header-logo > img {
    max-width: unset;
    width: 13rem;
    margin: 0 auto;
  }
  .menu-mobile {
    display: block;
  }
  .nav-bar {
    display: none;
  }
  h2 span {
    display: block;
    font-size: 1.75rem;
  }
  .header-top {
    border-bottom: 0px solid #ff7900;
    margin: 0 0 0 1rem;
  }
  header {
  background-color: rgb(0, 0, 0, 0.9);
          height: 65px;
}
}

@media screen and (max-width: 768px) {
  .menu-panel nav > ul > li > a {
    font-size: 1.75rem;
  }
      header {
        height: 57px;
    }
    .menu-mobile-switch {
      top: 1rem;
  }
      .header-top-logo {
        top: 1.25rem;
    }
}
@media screen and (max-width: 480px) {
  .menu-panel nav > ul > li > a {
    font-size: 1.5rem;
  }
  .menu-panel .header-logo > img {
    width: 8rem;
  }
}

.wrapper {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 2rem;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 1680px) {
  .wrapper {
    max-width: 1440px !important;
  }
}
@media screen and (max-width: 1440px) {
  .wrapper {
    width: 100%;
    max-width: 1280px !important;
  }
}
@media screen and (max-width: 1280px) {
  .wrapper {
    width: 100%;
    max-width: 1024px !important;
  }
  section {
    padding: 4rem 0;
  }
}

@media screen and (max-width: 1120px) {
  .wrapper {
    max-width: calc(100% - 6rem) !important;
    padding: 0 3rem;
  }
}

@media screen and (max-width: 992px) {
  .wrapper {
    max-width: calc(100% - 4rem);
    padding: 0rem 2rem;
    min-height: unset;
  }
  section {
    padding: 3rem 0;
  }
  .header-top-logo {
    position: absolute;
    top: 1.5rem;
    left: 5.25rem;
    width: 6rem;
  }
  h2 {
    font-size: 2.5rem !important;
  }
  h1 {
    font-size: 3rem !important;
  }
}

@media screen and (max-width: 604px) {
  .wrapper {
    padding: 0 1rem;
    max-width: calc(100% - 2rem);
    margin: 0 auto;
  }
  h1,
  h2 {
    font-size: 2rem !important;
  }
  section {
    padding: 2rem 0;
  }
  .header-result {
    font-size: 1.125rem;
    padding: 1.5rem 1.375rem;
  }
}
@media screen and (max-width: 420px) {
  h2 {
    font-size: 1.875rem !important;
  }
  .header-result {
    font-size: 1rem;
    padding: 1.5rem 1.125rem;
  }
  .header-top-logo {
    display: none;
  }
}

@media screen and (min-width: 1921px) {
  .wrapper {
    width: 2200px;
    max-width: unset;
  }
  section {
    padding: 7rem 0;
  }
  h2 {
    font-size: 3.5rem !important;
  }

  .header-result {
    width: auto;
  }
}

@media screen and (min-width: 2881px) {
  .wrapper {
    width: 2560px;
  }
}

.orange {
  color: #fe7600;
}

/*********************************************************************************************************************************/
/********************************************************** HOME *****************************************************************/
/*********************************************************************************************************************************/

#home {
  background-image: url("../img/home-bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  background-position: right 40% center;
}

#home .wrapper {
  width: 100%;
  max-width: 1680px;
  align-items: end;
  padding: 6rem 0 2rem;
}
.top-score {
  position: absolute;
  z-index: 0;
  top: 0;
}

h1 {
  color: white;
  font-style: normal;
  font-size: 2.5rem;
}

/**** Footer de home ****/

.home-footer {
  position: absolute;
  bottom: 0rem;
  width: 100%;
  padding: 0 2rem;
  box-sizing: border-box;
  left: 0;
}

.main-logo {
  max-width: 26vw;
  margin-top: 8vh;
}

/**** Home right ****/

.home-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  gap: 1rem;
  margin-top: 0rem;
  position: relative;
}

.home-right h1 {
  text-align: center;
  margin: 0;
}

.submit-score {
  position: relative;
  cursor: pointer;
}

.submit-score span {
  position: absolute;
  color: white;
  text-align: center;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  width: max-content;
  z-index: 2;
}
.submit-score:hover span {
  text-shadow: 0 0 10px rgba(254, 118, 0, 0.8);
  color: black;
}

.available-on {
  text-align: center;
  color: white;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.25rem;
  gap: 0rem;
  width: fit-content;
}

.available-on-mobile {
  display: none;
}
.created-in {
  position: absolute;
  left: 0rem;
  bottom: 2rem;
  max-width: 100%;
}

@media screen and (max-width: 1440px) {
  .available-on-desktop {
    display: none;
  }

  .available-on-mobile {
    display: block;
    max-width: 125%;
  }
}

@media screen and (max-width: 1120px) {
  h1 {
    font-size: 1.5rem !important;
  }
  .main-logo {
    max-width: 18vw;
    margin-top: 0vh;
  }
  #home .wrapper {
    padding: 8rem 0 2rem;
  }
}

@media screen and (min-width: 1921px) {
  .main-logo {
    transform: scale(1.5);
    margin-bottom: 5rem;
    margin-top: 6rem;
  }

  .available-on img {
    transform: scale(1.5);
  }
}

/**** MEnu left ****/

.left-menu {
  position: fixed;
  left: 0;
  top: 20vh;
  z-index: 1;
}

.left-menu_content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-repeat: no-repeat;
}

.left-menu_content > svg {
  position: absolute;
}

.left-menu_dots {
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
}

.top-arrow,
.bottom-arrow {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 1rem 0.75rem;
}
.top-arrow {
  border-top-right-radius: 20px;
}
.bottom-arrow {
  border-bottom-right-radius: 20px;
}

.menu-dot {
  width: 24px;
  height: 24px;
  border: 2px solid #ff8008;
  background-color: #2f0609;
}

.menu-dot.active,
.menu-dot:hover {
  background-color: #ff8008;
  width: 16px;
  height: 16px;
  margin: 4px;
}
.top-arrow:hover {
  transform: translateY(-2px);
  transition: 0.2s;
}
.bottom-arrow:hover {
  transform: translateY(2px);
  transition: 0.2s;
}

/* Code de la carte */

.copy-code {
  position: relative;
  cursor: pointer;
  width: max-content;
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 8rem;
  left: 0;
}

.copy-code > div {
  position: absolute;
  left: 43px;
  top: 1.5rem;
}
.mapcode_text {
  font-size: 1.125rem;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  color: #fe7600;
  text-align: left;
  text-shadow: 0 0 10px rgba(254, 118, 0, 0.8);
}
.mapcode_numbers {
  color: white;
  font-size: 1.5rem;
  line-height: 1;
  display: block;
  font-style: normal;
  width: max-content;
  text-align: left;
}
.copy-code:hover .mapcode_numbers {
  color: black;
}

#countdown,
#countdown2 {
  margin: 0;
}

.copy-code:hover .mapcode_numbers {
  color: white;
}

.map_code_copy {
  position: absolute;
  top: -1.75rem;
  font-weight: 600;
  color: white;
  font-size: 1rem;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: none;
}

#map-code-copied2 {
  bottom: -1rem;
  top: unset;
}

@media screen and (max-width: 1366px) {
  #home .wrapper {
    max-width: 1180px;
  }
  .copy-code > div {
    top: 2rem;
  }
}

@media screen and (max-width: 1280px) {
  .playable-on-mobile {
    display: block;
  }
}

@media screen and (max-width: 1080px) {
  .map_code_copy {
    top: -1.25rem;
  }
  .nav-bar > ul {
    margin: 0 0 0 9.75rem;
    justify-content: flex-start;
  }
  .left-menu {
    left: -0.5rem;
    transform: scale(0.75);
  }
  .submit-score img {
    width: 340px;
  }
}

@media screen and (max-width: 992px) {
  #home .wrapper {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .copy-code {
    margin-top: 2rem;
    bottom: unset;
    top: unset;
    position: relative;
  }
  .main-logo {
    max-width: 38vw;
    height: auto;
  }

  .playable-on {
    gap: 1rem;
    width: fit-content;
    align-items: center;
  }
  .created-in {
    position: relative;
    right: unset;
    left: unset;
    bottom: unset;
  }
  #home {
    padding: 6rem 0 4rem;
  }
  #home .wrapper {
    padding: 0;
  }
}

@media screen and (max-width: 800px) {
  .left-menu {
    display: none;
  }
  .main-logo {
    max-width: 50vw;
  }
  .home-left {
    margin: 4rem 0 0;
  }
}
@media screen and (max-width: 600px) {
  .home-left {
    margin: 0rem 0 0;
  }

  .home-left-button {
    font-size: 1.375rem;
  }
  h1 span br {
    display: none;
  }
  .main-logo {
    max-width: 40vw;
    height: auto;
  }
  #home {
    background-position: right 37% center;
  }
}

@media screen and (max-width: 480px) {
  .map_code_bg {
    width: 24rem;
  }
}

@media screen and (min-width: 1921px) {
  .left-menu_content {
    transform: scale(1.125) translateX(0.125rem);
  }
  #home .wrapper {
    max-width: 1920px;
  }
  .playable-on {
    transform: scale(1.25);
  }
  .home-left-bottom {
    left: 8.75rem;
  }
  .created-in {
    transform: translateX(3rem);
  }
  .submit-score img {
    transform: scale(1.5);
  }

  .map_code_bg {
    transform: scale(1.75);
    z-index: 0;
  }
  .copy-code > div {
    left: 29px;
    top: 1.125rem;
    z-index: 2;
  }
}

@media screen and (min-width: 2561px) {
  .main-logo {
    transform: scale(2.5);
    margin-bottom: 8rem;
            margin-top: 12rem;
  }
  .map_code_bg {
    transform: scale(3);
  }

  .playable-on {
    transform: scale(1.5);
  }
  #home .wrapper {
    max-width: 2560px;
  }
  .created-in {
    transform: scale(2) translateX(3rem);
  }
  .submit-score img {
    transform: scale(2.15);
  }
  .available-on img {
    transform: scale(2);
  }
  .mapcode_text {
    margin-bottom: 0.5rem;
  }
  .copy-code > div {
    top: 0;
  }
}

/*********************************************************************************************************************************/
/********************************************************* RECOMPENSE ************************************************************/
/*********************************************************************************************************************************/

#recompense {
  background-image: url("../img/recompense-bg.webp");
  position: relative;
  overflow: hidden;
}

.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  width: 100%;
}

.subtitle {
  width: 100%;
  background-image: url("../img/subtitle.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 8px;
  background-position: center;
  margin-bottom: 4rem;
}

.recompense-subtitle {
  font-family: "Helvetica Neue", sans-serif;
  text-align: center;
  font-size: 1.75rem;
  color: white;
  line-height: 1.25;
  margin: 0 0 1rem;
}

.prize-mobile {
  display: none;
}

.prize-desktop {
  max-width: 28vw;
  margin: 3rem auto;
}



@media screen and (max-width: 768px) {
  .prize-desktop {
    display: none;
  }
  .prize-mobile {
    display: block;
  }
}

@media screen and (max-width: 1440px) {
  .subtitle {
    margin-bottom: 3rem;
  }
  .prize-desktop {
    max-width: 32vw;
  }  
}

@media screen and (max-width: 1080px) {
  .subtitle {
    margin-bottom: 2rem;
  }
}

@media screen and (min-width: 2561px){
  .prize-desktop {
      margin: 3rem auto;
      transform: scale(1.5) translateY(13%);
  }
}


/*********************************************************************************************************************************/
/*********************************************************** trailer **************************************************************/
/*********************************************************************************************************************************/

#trailer {
  padding: 0;
  background-color: black;
      display: flex
;
    align-items: center;
}

.video-box {
  width: fit-content;
  overflow: hidden;
  cursor: pointer;
  width: 100%;
}

.video-box-resp {
  padding-bottom: calc(56.125%);
  padding-top: 0px;
  height: 0;
  overflow: hidden;
}

#trailer .video-box-resp {
  padding-bottom: calc(56.125%);
}

.video-box-resp > video {
  width: 100%;
  height: auto;
}

#course .scroll-down > span {
  color: white;
}

video {
  background-color: transparent !important;
}

@media screen and (max-width: 800px) {
  #course h2 {
    left: 5%;
    top: 13%;
    font-size: 26px;
  }
}

#course video::-webkit-media-controls-timeline {
  background-color: #ff7900;
  padding-bottom: 0;
  margin-bottom: 20px;
  max-width: 90%;
  transform: translateX(2.5%);
}

/*********************************************************************************************************************************/
/*********************************************************** ghid ****************************************************************/
/*********************************************************************************************************************************/

#ghid {
  background-color: black;
  background-image: url(../img/ghid-bg.jpg);
  background-size: cover;
  background-position: center;
}

.ghid-main {
  display: flex;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  gap: 2rem;
}

#ghid .wrapper {
  display: flex;
  flex-direction: column;
}

/* Left block */

.ghid-nav {
  display: flex;
  flex-direction: column;
  width: 244px;
  position: relative;
}
.ghid-nav:after {
  content: "";
  display: block;
  position: absolute;
  right: 10px;
  height: 100%;
  margin-top: 1.25rem;
  background: linear-gradient(
    to bottom,
    #3b3b3b 0%,
    #3b3b3b 80%,
    rgba(59, 59, 59, 0)
  );
  width: 2px;
}

.ghid-nav_block {
    display: flex;
    flex-direction: column;
    color: white;
    cursor: pointer;
    padding: 0 1.375rem;
    height: 113px;
}

.ghid-nav_block.active {
  background-image: url(../img/active_step.png);
  background-repeat: no-repeat;
  z-index: 1;
  background-size: cover;
}

.ghid-nav_block_title {
  font-size: 1.375rem;
  max-width: 180px;
  line-height: 1;
  font-family: "Helvetica Neue";
}

.ghid-nav_block_number {
  color: #ff7900;
  font-size: 1.375rem;
  position: relative;
  padding-bottom: 0.25rem;
  margin-top: 1.25rem;
}
.ghid-nav_block.active .ghid-nav_block_number {
  color: white;
}

.ghid-nav_block.active .ghid-nav_block_number:after {
    content: "";
    background-image: url(../img/active-box.png);
    display: block;
    position: absolute;
    width: 2.75rem;
    height: 2.15rem;
    top: -0.25rem;
    left: -0.275rem;
    background-size: cover;
}

/* Right block */
.ghid-steps_content {
  position: relative;
}
.ghid-steps_content_text {
  position: absolute;
  bottom: 5rem;
  left: 13rem;
}
.ghid-steps_content_text p {
  color: white;
  font-family: "Helvetica Neue";
  font-size: 1.5rem;
  margin: 0.5rem 0;
  padding-right: 3rem;
}

.ghid-steps_content:not(.active) {
  display: none;
}

#ghid-result {
  text-align: center;
}

#ghid-steps_content_4 .ghid-steps_content_text {
  bottom: 1rem;
  left: 13rem;
}

@media screen and (max-width: 1366px) {
  .ghid-main {
    max-width: 100%;
  }
  .ghid-steps_content {
    position: relative;
    max-width: calc(100% - 92px);
  }
  .ghid-steps_content img {
    max-width: calc(100%);
  }
}

@media screen and (max-width: 1080px) {
  .ghid-nav_block {
    height: 80px;
  }
  .ghid-nav:after {
    right: 11px;
  }
  .ghid-nav_block_title {
    font-size: 1.25rem;
  }
  .ghid-nav_block_number {
    margin-top: 1rem;
    font-size: 1.25rem;
  }
  .ghid-nav_block.active {
    background-size: 100%;
    background-position: center;
  }
  .ghid-nav {
    width: 240px;
    position: relative;
  }
  .ghid-steps {
    width: calc(100% - 240px);
  }
}

@media screen and (max-width: 768px) {
  .ghid-steps_content_text {
    position: relative!important;
    bottom: unset!important;
    left: unset!important;
  }
  .ghid-steps_content {
    max-width: calc(100%);
  }
  .ghid-steps_content_text p {
    font-size: 1.125rem;
  }
}

@media screen and (max-width: 600px) {
  .ghid-main {
    max-width: 100%;
    flex-direction: column;
  }
  .ghid-nav_block {
    height: 82px;
    width: 40%;
    justify-content: center;
    flex-direction: column;
  }
  .ghid-nav_block.active .ghid-nav_block_number:after{
    top: -0.375rem;
  }
  .ghid-nav {
    width: 100%;
    position: relative;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .ghid-nav:after {
    display: none;
  }
  .ghid-nav_block.active {
    background-size: cover;
    background-position: top 0px center;
  }
  .ghid-steps {
    width: 100%;
  }
}

@media screen and (max-width: 420px) {
  .ghid-nav_block {
    padding: 0 1rem;
  }
  .ghid-nav_block_title {
    font-size: 1rem;
  }
  .ghid-nav_block_number {
    font-size: 1.125rem;
    margin-top: 0.5rem;
  }
}

@media screen and (min-width: 1921px) {
  .ghid-main {
    max-width: 1920px;
  }
  .ghid-nav {
    width: 500px;
  }
  .ghid-nav_block {
        height: 192px;
  }
  .ghid-nav_block_title {
    max-width: 277px;
    margin-top: 2px;
  }
  .ghid-steps_content_text {
    bottom: 1rem;
  }
  .ghid-nav_block {
    padding: 0 3rem;
  }
  .ghid-nav_block_number {
    margin-top: 1.75rem;
  }
  .ghid-nav_block.active {
      background-size: contain;
  }
  .ghid-nav:after {
      right: 103px;
  }
}

@media screen and (min-width: 2561px) {
  .ghid-steps_content > img {
    width: 1680px;
  }
  .ghid-main {
    max-width: 2360px;
  }
  .ghid-nav_block_title {
    max-width: 340px;
  }
  .ghid-nav {
    width: 625px;
  }
   .ghid-nav_block {
        height: 244px;
        padding: 1rem 3rem;
    }
        .ghid-nav_block_number {
        margin-top: 0.25rem;
    }
        .ghid-nav:after {
        right: 34px;
    }
}


/*********************************************************************************************************************************/
/********************************************************** ORANGE ***************************************************************/
/*********************************************************************************************************************************/

#orange {
  background-color: black;
}

.orange-row {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
}
.orange-row-left {
  width: 32%;
}
.orange-row-left img {
    width: 9rem;
}
.orange-row-links {
  width: 64%;
  display: flex;
  gap: 2rem;
}

.orange-row_link {
    border: 1px solid white;
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    padding: 1.5rem;
    width: 50%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.orange-row_link p {
  display: flex;
  color: white;
  font-size: 1.25rem;
  font-family: "Helvetica Neue";
  padding-top: 80%;
}
.orange-row_link a {
  background-color: #ff7900;
  color: white;
  font-size: 1.25rem;
  padding: 0.675rem 2.25rem;
  font-family: "Helvetica Neue";
  float: right;
}
.orange-row_link a:hover {
  color: black;
}
.orange-row-left {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.orange-row-left h3 {
  font-size: 2rem;
  color: #ff7900;
  font-family: "Helvetica Neue";
  text-align: center;
  margin: 1rem 0 0 0;
}
.orange-row-left p {
  font-size: 1.125rem;
  color: white;
  font-family: "Helvetica Neue";
  text-align: center;
  margin: 0.375rem 0;
}

.orange-row-center {
  background-image: url("../img/orange-row-center.webp");
}

.orange-row-right {
  background-image: url("../img/orange-row-right.webp");
}

@media screen and (max-width: 1080px) {
  .orange-row-left p {
    font-size: 1.25rem;
  }
  .orange-row-links {
    max-height: 310px;
  }
  .orange-row-left h3 {
      font-size: 1.75rem;
  }
}

@media screen and (max-width: 768px) {
  .orange-row {
    flex-direction: column;
  }
  .orange-row-left,
  .orange-row-links {
    width: 100%;
  }
  .orange-row-left {
    gap: 2rem;
  }
    .orange-row-links {
    max-height: unset;
  }
}



@media screen and (max-width: 992px) {
  .orange-row-links {
    flex-direction: column;
  }
  .orange-row_link {
        width: 340px;
        margin: 0 auto;
        box-sizing: border-box;
        min-height: 270px;
  }
  .orange-row-left p {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 380px){
  .orange-row_link {
    width: auto;
  }
}

@media screen and (min-width: 2561px) {
  #orange .wrapper {
    width: 2560px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (min-width: 2861px) {
  #orange .wrapper {
    width: 2860px;
  }
}
/*********************************************************************************************************************************/
/********************************************************** FOOTER ***************************************************************/
/*********************************************************************************************************************************/

footer {
  background-color: black;
  display: flex;
  flex-direction: column;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  position: relative;
  border-top: 2px solid #fe7600;
}

.footer-links {
  display: flex;
  gap: 0.75rem;
}

.footer-links > * {
  text-transform: uppercase;
  color: white;
  font-size: 1.375rem;
  cursor: pointer;
}

.footer-links > *:hover {
  color: #ff7900;
}

.divider {
  padding: 0 4px;
}

.mentions-epic {
  color: #ff7900;
  font-size: 0.75rem;
  text-align: center;
  padding: 0.5rem 4rem;
  font-family: "Arial";
  border-top: 2px solid #ff7900;
}

.mentions-epic a {
  color: #5d718f;
}
.mentions-epic a:hover {
  color: white;
}

.to-top {
  margin-left: 9rem;
  position: relative;
  transform: translateX(1rem);
}

.to-top:hover > svg > path:first-child {
  fill: white;
}
.to-top:hover > svg path:last-child {
  fill: #ff7900;
}

.arrow-to-top {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.to-top:hover .arrow-to-top > svg path {
  fill: black;
}

.footer-left {
  display: flex;
  gap: 3rem;
  align-items: center;
  margin-right: 5rem;
}

.social-bar {
  display: flex;
  justify-content: center;
  gap: 1rem;
  height: 2rem;
}
.social-bar a {
  display: flex;
  height: 2rem;
  width: 2rem;
}
.social-bar svg path {
  fill: white;
}
.social-bar svg:hover path {
  fill: #ff7900;
}

@media screen and (max-width: 1080px) {
  .footer-left {
    gap: 2rem;
  }
  .to-top {
    margin-left: 1rem;
  }
}

@media screen and (max-width: 992px) {
  .to-top {
    margin-left: 0rem;
  }
}

@media screen and (max-width: 800px) {
  .footer-top,
  .footer-left {
    flex-direction: column;
    gap: 3rem;
  }

  .to-top {
    position: absolute;
    right: 1rem;
  }

  .footer-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .mentions-epic {
    font-size: 0.75rem;
    padding: 0.5rem 2rem;
  }
  .to-top svg {
    transform: scale(1);
  }

  .divider {
    display: none;
  }
  .footer-top {
    padding: 3rem 2rem;
  }
}

@media screen and (max-width: 480px) {
  .to-top {
    right: -2rem;
    top: 0rem;
    transform: scale(0.875);
    display: none;
  }
  .to-top svg {
    transform: scale(0.75) translateX(-1rem);
  }
}

@media screen and (min-width: 2561px) {
  .footer-left img {
    transform: scale(1.75);
  }
  .to-top {
    transform: translateX(1rem) scale(1.5);
    margin-left: 12rem;
  }
}

/********************************************************************************/
/******************************* OVERLAY INSCRIPTION ****************************/
/********************************************************************************/

/* Général */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  right: 50%;
  bottom: 50%;
  height: 100%;
  width: 100vw;
  transform: translate(-50%, -50%);
  z-index: 9;
  display: none;
}
.popup .main-overlay {
  background-color: rgba(19, 26, 60, 0.75);
  width: 100%;
  height: 100%;
}

.popup .popup-step {
  padding: 2rem 7rem;
  margin: auto;
  text-align: center;
  position: relative;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-image: url(../img/popup.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 605px;
  height: 529px;
}

#step2 p {
  color: white;
  font-size: 0.75rem;
  margin: 0.5rem 0;
  text-align: justify;
  padding: 0 0.875rem;
}
#step2 p a {
  color: #fe7600 !important;
}
#step2 p a:hover {
  color: white !important;
}
.step_number {
  color: #fe7600 !important;
  text-align: center;
  font-size: 2.25rem !important;
  margin: 1.5rem 0 0 0 !important;
}

/* Step 1 */

.step1-left {
  position: relative;
  position: relative;
  width: 572px;
  height: 336px;
  background-image: url(../img/zone.png);
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  margin: 0 auto 3rem;
}

.step1-left:hover {
  opacity: 0.7;
}
.step1-left label {
  width: 100%;
  cursor: pointer;
}

input#fakeInput {
  height: 100%;
  width: 100%;
  border-radius: 8px;
  display: block;
  padding: 11px 0;
  box-sizing: border-box;
  border: initial;
  background-color: transparent;
}

.step1-left input#step1-screenshot {
  height: 100%;
  width: 100%;
  position: absolute;
  top: -0;
  left: 0;
  cursor: pointer;
  opacity: 0;
}

.step1-left_text_1 {
  color: white;
  font-size: 1.5rem;
  line-height: 1;
}

.step1-left_text_2 {
  color: #fe7600;
  font-size: 1rem;
}
.step1-left_text {
  bottom: 1.25rem;
  position: absolute;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 85%;
  display: flex;
  flex-direction: column;
}

.close-popup {
  position: absolute;
  top: -0.5rem;
  right: -1.5rem;
  cursor: pointer;
  padding: 0.25rem;
}
.close-popup img {
  width: 3rem;
  height: 3rem;
}
.close-popup:hover {
  opacity: 0.8;
}
.popup h3 {
  font-size: 1.5rem;
  color: white;
  text-transform: uppercase;
  margin-bottom: 1rem;
  line-height: 1.15;
  margin-top: 0.5rem;
}

#step-confirmation {
  display: none;
}

@media screen and (max-width: 1366px) {
  .step1-left {
    width: 518px;
    height: 304px;
  }
}

@media screen and (max-width: 1080px) {
  .step1-left {
    width: 408px;
    height: 240px;
    margin: 0 auto 2rem;
  }
  .popup .popup-step {
    width: 488px;
    height: 408px;
  }
}

@media screen and (max-width: 800px) {
  .step1-left {
    width: 469px;
    height: 276px;
  }
  #step1 h3 {
    font-size: 1.5rem;
  }
  #step1 h3 + p {
    font-size: 1.125rem;
  }
  .popup h3 {
    font-size: 1.75rem;
  }
  .popup h3 + p {
    margin: 0px 0 1rem;
  }
  .popup .popup-step {
    width: 484px;
    height: 428px;
  }
}

@media screen and (max-width: 600px) {
  .step1-left {
    width: 410px;
    height: 241px;
    margin: 0 auto;
  }
  .popup .popup-step {
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .row-checkbox {
    max-width: 76%;
  }
  .close-popup {
    top: 1rem;
    right: 1rem;
  }
  .popup .popup-step {
    background-image: url(../img/popup-mobile.png);
    height: 504px !important;
    width: 435px !important;
  }
}

@media screen and (max-width: 480px) {
  .popup h3 {
    font-size: 1.125rem !important;
    margin: 0 0 0.25rem;
  }
  .popup .popup-step {
    width: 94%;
    height: auto;
    box-sizing: border-box;
  }
  .step1-left_text_1 {
    font-size: 1rem;
  }
  .step1-left {
    width: 278px;
    height: 163px;
    margin: 0 auto;
  }
  #step1 h3 {
    font-size: 1.375rem;
    margin: 0 0 1rem;
  }
  .close-popup {
    top: -1rem;
    right: -2rem;
  }
  .row-checkbox {
    max-width: 74%;
    transform: translatex(2rem);
  }
  .step1-left_text_2 {
    font-size: 0.75rem;
  }
  .step_number {
    font-size: 1.75rem;
  }
}

@media screen and (max-width: 420px) {
  .step1-left {
    width: 252px;
    height: 148px;
  }
  .popup h3 {
    font-size: 1rem !important;
  }
  .close-popup {
    top: -3rem;
    right: -1rem;
  }
  .step_number {
    font-size: 1.5rem;
    margin: 0;
  }
}

@media screen and (min-width: 1921px) {
  .close-popup {
    transform: scale(1.5);
    top: 1.5rem;
    right: -1rem;
  }
  .popup-step {
    min-width: unset;
  }
  .popup .popup-step {
        width: 886px;
        height: 750px;
  }
  #row-email, #row-phone {
    margin: 0.5rem auto;
}
  .step1-left {
        width: 760px;
        height: 447px;
  }
}
@media screen and (min-width: 2881px) {
  .step1-left {
    width: 1107px;
    height: 650.5px;
  }
  .popup .popup-step {
    width: 1179px;
    height: 1041px;
  }
  .close-popup {
    transform: scale(2);
    top: 1.5rem;
    right: -0rem;
  }
  #step2-email, #step2-phone {
      padding: 1.25rem 2rem;
  }
}

/* Step 2 */

#checkboxes {
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  margin-bottom: 2rem;
}

input[type="checkbox"] {
  left: -9999px !important;
  position: absolute;
}

input[type="checkbox"] + label::before {
  content: "";
  width: 2.375rem;
  height: 2.375rem;
  background-image: url("../img/checkbox.png");
  display: block;
  background-size: contain;
  position: absolute;
  left: -3.5rem;
  top: 0rem;
  background-repeat: no-repeat;
}

input[type="checkbox"]:hover + label:after,
input[type="checkbox"]:checked + label::after {
  content: "";
  width: 1.675rem;
  height: 1.675rem;
  background-image: url(../img/checkbox-checked.png);
  display: block;
  position: absolute;
  left: -3.125rem;
  top: 0.37rem;
  background-repeat: no-repeat;
  background-size: cover;
}

.inscription-checkboxes > label {
  margin-bottom: 4px;
}

#step2-email,
#step2-phone {
  background-color: unset;
  padding: 1rem 2rem;
  color: white;
  font-size: 1.25rem;
  border: 0px;
}
#step2-email::placeholder,
#step2-phone::placeholder {
  text-align: center;
  color: white;
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1;
  transform: translateY(3px);
}

#step2 label {
  color: white;
  font-size: 0.75rem;
  position: relative;
  text-align: left;
  line-height: 1.15;
  cursor: pointer;
}

#step2 label + svg {
  position: absolute;
  z-index: -1;
  top: 0.675rem;
  transform: scale(0.675);
}

#step2 label a {
  color: #ff7900;
  font-size: 0.75rem;
  position: relative;
  text-align: left;
  line-height: 1;
}
#step2 label a:hover {
  color: white;
}
.row-checkbox {
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  width: 100%;
  max-width: 90%;
  margin: 0.5rem auto;
  transform: translatex(2.5rem);
}

:-webkit-autofill {
  transition: all 100000s ease-in-out 0s;
}

#step2 input:focus,
#step2 input:focus-visible {
  color: white;
  outline: none;
  background-color: transparent;
}

#row-email,
#row-phone {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0.75rem auto;
  width: 100%;
}
#row-email > div,
#row-phone > div {
  display: flex;
  align-items: center;
  width: 100%;
  flex-direction: column;
  position: relative;
}

#submit {
  padding: 1.5rem 3rem;
  border: 0px;
  cursor: pointer;
  width: max-content;
  background-color: transparent;
  color: white;
  font-size: 1.125rem;
  background: radial-gradient(#ff931e 0%, #ff931e 50%, #fe7600 100%);
  text-transform: uppercase;
  position: absolute;
  bottom: 0rem;
  font-family: "Transducer", "Roboto", sans-serif;
}
#submit:hover {
  color: black;
}
#submit img {
  width: 15rem;
}

@media screen and (max-width: 992px){
    #step2 label + svg {
    top: 3px;
    transform: scale(0.5);
  }
}

@media screen and (max-width: 800px) {
  #step2-email,
  #step2-phone {
    padding: 1.125rem 2rem;
  }

  #checkboxes {
    gap: 0.5rem;
    padding: 0 1.5rem;
  }

  .step_number {
    font-size: 1.75rem !important;
    margin: 2rem 0 0 0 !important;
  }
  #step2 label + svg {
    display: none;
  }
  #step2-email::placeholder,
  #step2-phone::placeholder {
    font-size: 1rem;
  }
  #step2-email,
  #step2-phone {
    padding: 0.125rem 2rem 0.5rem;
    border: 2px solid #fe7600;
  }
}

@media screen and (max-width: 480px) {
  #row-email > div,
  #row-phone > div {
    transform: unset;
    max-width: 92%;
  }
  .row-checkbox {
    width: 100%;
    max-width: 85%;
    margin: 0.75rem auto;
    transform: translatex(2rem);
  }
  #step2 label,
  #step2 label a {
    font-size: 0.75rem;
  }

  #row-email,
  #row-phone {
    margin: 0.25rem auto;
  }
  #submit {
    padding: 0.75rem 2rem;
  }
  .popup .popup-step {
    background-image: url(../img/popup-mobile.png);
    height: 473px !important;
    width: 395px !important;
  }
}

@media screen and (min-width: 1921px) {
  #step2-email::placeholder,
  #step2-phone::placeholder {
    transform: translateY(0px);
  }
  .row-checkbox {
    max-width: 90%;
  }
  #step2 label + svg {
    top: 1.125rem;
    transform: scale(0.875);
  }
  #step2-email, #step2-phone {
      font-size: 1.125rem;
      width: inherit;
  }
    #step2-email::placeholder,
  #step2-phone::placeholder {
      font-size: 1.125rem;
  }
}

@media screen and (min-width: 2561px) {
  #step2 label + svg {
    top: 1.875rem;
    transform: scale(1.25);
  }
    #submit {
    bottom: -1rem;
  }
}

/* Step 3 */

.end-popup {
  padding: 1.5rem 3rem;
  border: 0px;
  cursor: pointer;
  width: max-content;
  background-color: transparent;
  color: white;
  font-size: 1.125rem;
  background: radial-gradient(#ff931e 0%, #ff931e 50%, #fe7600 100%);
  text-transform: uppercase;
  position: absolute;
  bottom: 0rem;
}

#resultModalBody {
  color: white;
}

@media screen and (min-width: 1921px) {
  .end-popup {
    bottom: 0.5rem;
  }
}

@media screen and (min-width: 480px) {
  .end-popup {
    padding: 0.75rem 2rem;
  }
}

/****** COOKIES ******/

#cookies {
  border-top: 2px solid #fe7600;
  color: white;
  position: fixed;
  bottom: 0;
  z-index: 9;
  width: 100%;
}
#cookies .main-overlay {
  background-color: black;
  width: 100%;
  height: 100%;
}

#cookies {
  display: none;
}

.charte-cookies {
  color: #fe7600;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  letter-spacing: 0.05rem;
  margin: 2rem auto;
  display: block;
  width: fit-content;
}
.charte-cookies img {
  max-width: 80%;
  margin: 0 auto;
  display: block;
}

.popup-cookies-main,
.popup-cookies-choices {
  padding: 2rem 6rem;
}

.popup-cookies-main h3,
.popup-cookies-choices h3 {
  color: white;
  margin: 0 auto 1.5rem;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.5rem;
}

.popup-cookies-choices {
  display: none;
}

.cookie-buttons {
  justify-content: center;
  gap: 2rem;
  display: flex;
}

.cookie-buttons > *,
#end-cookies {
  cursor: pointer;
  background-color: #ff7900;
  line-height: 1;
  font-weight: 600;
  width: fit-content;
  padding: 0.75rem 1rem;
  line-height: 1;
  font-size: 1rem;
  width: 20rem;
  font-size: 1rem;
  color: white;
  border: 0px;
}

#end-cookies {
  margin: 2rem auto 0;
  display: block;
}

.popup-cookies-choices {
  position: relative;
  flex-direction: column;
}
.popup-cookies-choices-table {
  margin: 2rem 0 0;
}
.close-param-cookies-popup {
  position: absolute;
  right: 2rem;
  top: 2rem;
  cursor: pointer;
}
.close-param-cookies-popup:hover {
  opacity: 0.8;
}

.cookie-buttons > *:hover,
#end-cookies:hover {
  color: black;
}

.cookies-choices-consent {
  gap: 1rem;
  display: flex;
}

.popup-cookies-choices-block .give-consent_cookies,
.popup-cookies-choices-block .no-consent_cookies {
  color: white;
  font-size: 1.125rem;
  cursor: pointer;
  display: inline-block;
  background: transparent;
  line-height: 1;
  border: 1px solid white;
  margin: 0;
  padding: 0.25rem 0.5rem;
  color: white;
}
.give-consent_cookies:hover,
.give-consent_cookies:focus {
  background-color: #188600;
  color: white;
  border-color: #188600;
}
.no-consent_cookies:hover,
.no-consent_cookies:focus,
.no-consent_cookies:active {
  background-color: #f80d34;
  color: white;
  border-color: #f80d34;
}
@media screen and (max-width: 800px) {
  .popup-cookies-main,
  .popup-cookies-choices {
    padding: 2rem 4rem;
  }
}
@media screen and (max-width: 600px) {
  .popup-cookies-main,
  .popup-cookies-choices {
    padding: 2rem 2rem;
  }
  .close-param-cookies-popup {
    right: 1rem;
    top: 1rem;
  }
}
@media screen and (max-width: 480px) {
  .cookie-buttons {
    flex-direction: column;
    align-items: center;
  }
  .cookie-buttons > * {
    height: 3rem;
    width: 100%;
  }
  .popup-cookies-main,
  .popup-cookies-choices {
    padding: 1.5rem;
  }

  .popup-cookies-main h3,
  .popup-cookies-choices h3 {
    font-size: 1.25rem;
  }
}

/************* LEGAL ***************/

#legal{
  height: unset;
}

#legal h1 {
  color: white;
  text-align: center;
}

#legal h2 {
    color: white;
    text-align: left;
    color: #ff7900;
    font-size: 1.5rem !important;
    margin: 1rem 0 0.5rem;
}

#legal .wrapper{
    max-width: 992px !important;
}
#legal ul  {
  margin: 0rem 0;
}
#legal ul li {
  color: white;
  margin: 0.5rem 0;
}

#legal p a, #legal ul li a{
    color: #ff7900;
}
#legal p a:hover, #legal ul li a:hover{
    color: white;
}

#legal p {
  color: white;
  margin: 0.375rem 0;
}
#legal {
  background-image: url(../img/ghid-bg.jpg);
}

@media screen and (max-width: 992px) {
  #legal .wrapper{
  max-width: calc(100% - 4rem) !important;
  }
}

@media screen and (max-width: 768px) {
  #legal h1 {
    margin-top: 8rem;
  }
}

@media screen and (min-width: 1921px){
    #legal .wrapper{
      max-width: 1440px !important;
  }
}


/*** IPAD ***/

@media screen and (max-width: 1080px) and (min-height: 1200px) {
    section {
      height: unset;
    }
    .wrapper {
      min-height: unset;
    }
    #home .wrapper {
        padding: 8rem 0 2rem;
        min-height: unset;
    }
}