/* Global navigation CSS */

/* Sprite sheet and positions generated by http://responsive-css.spritegen.com Responsive CSS Sprite Generator */

.navigation img {
    z-index: 2;
}

.nav-close-active, .nav-close, .nav-down-active, .nav-down, .nav-left-active,
.nav-left, .nav-logo-active, .nav-logo, .nav-right-active, .nav-right,
.nav-up-active, .nav-up, .close-success
{ max-width: 100%; background-size: 100%; background-image: url('../img/nav/nav.png'); cursor: pointer; }

.nav-up, .nav-down {
    position: fixed;
    width: 9%;
    right: 3%;
}

.nav-up { background-position: 0 100%; background-size: 100%;
    top: 13%;
}
.nav-up:hover { background-position: 0 90.909091%; background-size: 100%; }


.nav-down { background-position: 0 27.272727%; background-size: 100%;
    bottom: 13%;
}
.nav-down:hover { background-position: 0 18.181818%; background-size: 100%; }

.nav-left, .nav-right {
    position: fixed;
    width: 9%;
    top: 45%;
}

.nav-left { background-position: 0 45.454545%; background-size: 100%;
    left: 0.1%;
}
.nav-left:hover { background-position: 0 36.363636%; background-size: 100%; }

.nav-right { background-position: 0 81.818182%; background-size: 100%;
    right: 0.1%;
}
.nav-right:hover { background-position: 0 72.727273%; background-size: 100%; }


.nav-logo { background-position: 0 54.545455%; background-size: 100%;
    height: 100%;
    margin-left: 3vw;
    margin-right: 3vw;
    cursor: pointer;
}
.nav-logo:hover { cursor: pointer; }


.nav-close { background-position: 0 9.090909%; background-size: 100%;
    width: 40px;
}
.nav-close:hover { background-position: 0 0%; background-size: 100%; }
img.nav-close {
    margin-top: 0.5rem;
  }


.disabled {
    opacity: 0.33;
    transition: none;
}

.disabled:hover {
    transition: none;
}

#menu {
    position: absolute;
    margin: auto;
    top: 82%;
    bottom: 54px;
    left: 0;
    right: 0;
    width: 80vw;
    height: 18%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #menu .button {
    font-family: "Trajan Pro";
    font-size: 2.5vw;
    width: 21vw;
    text-shadow: 0px 0px 5px #000000;
    color: #d2d2d2;
    background-color: transparent;
    border: 1px #dedede solid;
    border-radius: 20px;
    /* padding: 1.7% 1% 0.7% 1%; */
    height: 43px;
    line-height: 41px;
    padding: 0;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.4s;
  }
  @media screen and (max-width: 768px) {
    #menu {top: 95%;}
    #menu .button {
        height: 28px;
        line-height: 27px;
    }
  }
#menu #plan {
    background: linear-gradient(to bottom, rgba(170,170,170,0.5),transparent);
}
#menu #plan:hover {
    /* background: rgba(0,100,104, 1); */
    background: linear-gradient(to top, rgba(0,0,0,1),rgba(0,100,104, .8));
}
#menu #inventaire {
    background: linear-gradient(to bottom, rgba(170,170,170,0.5),transparent);
}
#menu #inventaire:hover {
    /* background: rgba(248,136,0, 1); */
    background: linear-gradient(to top, rgba(0,0,0,1),rgba(248,136,0, .8));
}

  #menu .button:hover {
    color: #e8e8e8;
    transition: background-color 0.4s;
  }

  #menu .disabled.button:hover {
    background-color: transparent;
    color: #d2d2d2;
    cursor: default;
    transition: none;
  }


  @media only screen and (min-width: 1024px) {
    .nav-logo {
      margin-left: 10%;
      margin-right: 10%;
    }

    #menu {
      width: 50%;
    }
    #menu .button {
      font-size: 130%;
      width: 30%;
    }
  }

/**
*
* Bouton Fullscreen
*
**/

div.fs-desktop {
  display: block;
}
div.fs-mobile {
  display: none;
}


div.fs {
    font-family: "Oxanium_regular";
    position: absolute;
    width: 100%;
    text-align: center;
    top: 80px;
}
p.fs-btn {
    /* background: rgba(255, 255, 255, .8); */
    /* border-radius: 10px; */
    display: inline-block !important;
    font-size: 92%;
    cursor: pointer;
    color: #e8e8e8;
    z-index: 2;
    /* padding: 3px 15px 1px; */
    transition: all .2s;
    margin-bottom: 0;
}
p.fs-btn:hover {color: #fff;}
@media screen and (max-width: 768px) {
    div.fs-desktop {
      display: none;
    }
    div.fs-mobile {
      display: block;
    }
    div.fs {top: 45% !important;}
    div.fs span {
      background: white;
      color:rgba(0,100,104, .8);
      padding: 0.5rem 0.7rem;
      border-radius: 0.2rem;
    }
}

/* .nav-logo-fade { background-position: 0 63.636364%; background-size: 100%; } */