/*Variables*/
.bg-color {
  background-image: linear-gradient(#ffc107 0%, #ffa21a 100%);
}

/*Import menu*/
:root {
  --header-height: 3rem;
  --nav-width: 68px;
  --first-color: #4723d9;
  --first-color-light: #afa5d9;
  --white-color: #f7f6fb;
  --body-font: "Nunito", sans-serif;
  --normal-font-size: 1rem;
  --z-fixed: 100;
}

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  position: relative;
  /*    margin: var(--header-height) 0 0 0;
      padding: 0 1rem;*/
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  transition: 0.5s;
}

a {
  text-decoration: none;
}

.header {
  width: 100%;
  height: var(--header-height);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  background-color: var(--white-color);
  z-index: var(--z-fixed);
  transition: 0.5s;
}

.header_toggle {
  color: var(--first-color);
  font-size: 1.5rem;
  cursor: pointer;
}

.header_img {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
}

.header_img img {
  width: 40px;
}

.l-navbar {
  position: fixed;
  top: 0;
  left: -30%;
  width: var(--nav-width);
  height: 100vh;
  background-color: #222;
  padding: 0.5rem 1rem 0 0;
  transition: 0.5s;
  z-index: var(--z-fixed);
}

.nav {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.nav_logo,
.nav_link {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  column-gap: 1rem;
  padding: 0.5rem 0 0.5rem 1.5rem;
}

.nav_logo {
  margin-bottom: 2rem;
}

.nav_logo-icon {
  font-size: 1.25rem;
  color: var(--white-color);
}

.nav_logo-name {
  color: var(--white-color);
  font-weight: 700;
}

.nav_link {
  position: relative;
  color: var(--first-color-light);
  margin-bottom: 1.5rem;
  transition: 0.3s;
}

.nav_link:hover {
  color: var(--white-color);
}

.nav_icon {
  font-size: 1.25rem;
}

.show {
  left: 0;
}

.content {
  padding-left: calc(var(--nav-width) + 1rem);
}

.active {
  color: var(--white-color);
}

.active::before {
  content: "";
  position: absolute;
  left: 0;
  width: 2px;
  height: 32px;
  background-color: var(--white-color);
}

.height-100 {
  height: 100vh;
}

@media screen and (min-width: 768px) {
  body {
    /*        margin: calc(var(--header-height) + 1rem) 0 0 0;*/
    padding-left: calc(var(--nav-width));
  }
  .header {
    height: calc(var(--header-height) + 1rem);
    padding: 0 2rem 0 calc(var(--nav-width) + 2rem);
  }
  .header_img {
    width: 40px;
    height: 40px;
  }
  .header_img img {
    width: 45px;
  }
  .l-navbar {
    left: 0;
    padding: 1rem 1rem 0 0;
  }
  .show {
    width: calc(var(--nav-width) + 156px);
  }
  .body-pd {
    padding-left: calc(var(--nav-width) + 188px);
  }
}
/**/
.svg-wrapper {
  max-height: 800px;
  max-width: 1000px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  vertical-align: middle;
  display: block;
  /*    position: fixed;*/
  /*    top: 30%;
      left: 50%;
      margin-top: -36px;
      margin-left: -136px;*/
}

#carpenter-white {
  fill: #fff;
  opacity: 0;
  -webkit-animation: fadeIn 2s ease;
  -moz-animation: fadeIn 2s ease;
  animation: fadeIn 2s ease;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  height: 100%;
  width: 100%;
}

#carpenter-logo {
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.25px;
  -webkit-animation: fadeOut 1s ease;
  -moz-animation: fadeOut 1s ease;
  animation: fadeOut 1s ease;
  -webkit-animation-delay: 2.75s;
  -moz-animation-delay: 2.75s;
  animation-delay: 2.75s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  height: 100%;
  width: 100%;
}

@-webkit-keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOutIn {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeOutIn {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOutIn {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-moz-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/**/
#game-interface {
  height: 100vh;
  background: url(../images/test-2.jpeg) center top no-repeat;
  background-size: cover;
  max-width: 100%;
  overflow: auto;
}

#game-interface .container-fluid {
  height: 100%;
  overflow: auto;
}

.row {
  display: flex;
}

.screen-1 {
  justify-content: center;
  align-items: center;
}

.screen-2 {
  justify-content: center;
}

#affichage-princ {
  width: 100%;
}

#affichage-princ img {
  width: 100%;
}

.screen-1 .relative {
  border: 1px #ffc107 solid;
}

.min-vh-75 {
  /*    min-height: 75vh;*/
}

.min-vh-25 {
  overflow: auto;
  /*    height: 25vh;*/
}

.min-vh-25 .col-7 {
  vertical-align: top;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

/*@media (max-device-width:1000px) and (orientation: landscape) {
    .mobile-affichage1{
        width: 85%;
        float: none;
        margin: 0 auto;
    }
    .mobile-affichage2{
        width: 30%;
        position: absolute;
        right: 0%;
    }
    .boutons-haut{
        display: inline !important;
    }
}

body{
    background-color: #222;
}
p{
    color: #fff;
}
.affichage-1{
    border: 1px #fff solid;
    border-radius: 5px;
    background-color: #eee;
    min-height: 80vh;
}
.affichage-2{
    border: 1px #fff solid;
    border-radius: 5px;
    background-color: #eee;
    min-height: 600px;
}
.affichage-3{
    border: 1px #fff solid;
    border-radius: 5px;
    background: url("fond-background.jpg");
    min-height: 250px;
}
.affichage-4{
    border: 1px #fff solid;
    border-radius: 5px;
    background: url("fond-background.jpg");
    min-height: 250px;
}


.interface-img0,.interface-img1,.interface-img2,.interface-img3{
    max-width : 100%;
    heigth: auto;
    display: block;
}
img.interface-image{
    position: absolute;
    padding-bottom: 56%;
}

p.absolute {
    z-index:1;
}*/
/*
      #allplan{
        position: relative;
        border: 2px grey solid;
        background: url("fond-background.jpg");
      }

      #allplan::after {
        content: '';
        display: block;
        padding-bottom: 100%;
      }
      #plan1{
        width: 100%;
        height: 100%;
        background-image: url("background-0.png");
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        border: 1px red solid;
        z-index:1;
      }
      #plan2{
        width: 100%;
        height: 100%;
        position: absolute;
        border: 1px green solid;
        background-image: url("background-1.png");
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        z-index:2;
      }
      #plan3{
        width: 100%;
        height: 100%;
        background-image: url("background-2.png");
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        z-index:3;
      }
*/
/*##########*/
/*
https://www.eprojet.fr/cours/bootstrap/02-bootstrap-systeme-de-grille
SmartPhone = col-xs-* < 768 px
Tablette = col-sm-* >= 768 px < 992 px
Ordinateur Portable = col-md-* >= 992 px < 1200 px
Ordinateur de bureau = col-lg-* >= 1200 px
*/
/*##########*/

/*# sourceMappingURL=game-intro.css.map */