/*body {
          background: url("../img/fond_calendrier_avent_2022_bloc_rouge.jpg") no-repeat top center #000;
          background-size: contain;
      }*/
@font-face {
	font-family: 'Avenir Next Condensed';
	src: url('../assets/webfonts/Avenir-Next-Condensed/Avenir%20Next%20Condensed.ttf.ttf') format('truetype')
}

        body { 
            /* Location of the image */ /*background-image: url("../img/fond_calendrier_avent_2022.jpg"); */
            /* Background image is centered vertically and horizontally at all times */ background-position: center center;
            /* Background image doesn’t tile */ background-repeat: no-repeat;
            /* Background image is fixed in the viewport so that it doesn’t move when the content’s height is greater than the image’s height */ background-attachment: fixed;
            /* This is what makes the background image rescale based on the container’s size */ background-size: cover;
            /* Set a background color that will be displayed while the background image is loading */ background-color: #8cbcbd; 
            backg round-attachment: local;
      }

      body, div, form, input, select, p { 
      padding: 0;
      margin: 0;
      outline: none;
      font-family: Avenir Next Condensed, Arial, sans-serif;
      /*font-size: 14px;*/
      font-size: 1em;
      color: white;
	  margin-left: auto;
      margin-right: auto;
      }
      h1 {
      margin: 0;
      font-weight: bold;
      color: #fff;
      }
      h3 {
      margin: 12px 0;
      color: #8ebf42;
      }
      .main-block {
      display: flex;
      justify-content: center;
      heig ht: 1000px;
      pad ding-top: 15%;
      }
      form {
      /*width: 30%;*/
      padding: 20px;
      text-align: center;
      }
      fieldset {
      border: none;
      border-top: 1px solid #8ebf42;
      }
      .account-details, .personal-details {
      disp lay: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      }
      .account-details >div, .personal-details >div >div {
      dis play: flex;
      align-items: center;
      margin-bottom: 10px;
      }
      .account-details >div, .personal-details >div, input, label {
      width: 100%;
      }
      label {
      padding: 0 5px;
      text-align: left;
      vertical-align: middle;
      color: white;
        display: block;
          float: left;
      }
      input {
      padding: 5px;
      vertical-align: middle;
      color: black;
      }
      .checkbox {
      margin-bottom: 10px;
      }
      select, .children, .gender, .bdate-block {
      /*width: calc(100% + 26px);*/
      width: calc(100%);
      padding: 5px 0;
      }
      select {
      backgr ound: transparent;
      color: black;
      }
      .gender input {
      width: auto;
      } 
      .gender label {
      padding: 0 5px 0 0;
      } 
      .bdate-block {
      display: flex;
      justify-content: space-between;
      }
      .birthdate select.day {
      width: 35px;
      }
      .birthdate select.mounth {
      width: calc(100% - 94px);
      }
      .birthdate input {
      width: 38px;
      vertical-align: unset;
      }
      .checkbox input, .children input {
      width: auto;
      margin: -2px 10px 0 0;
      }
      .checkbox a {
      color: #8ebf42;
      }
      .checkbox a:hover {
      color: #82b534;
      }
      button {
      /*width: 25%;
      padding: 10px 0;*/
      padding: 10px 15px;
      margin: 10px auto;
      border-radius: 5px; 
      border: none;
      background: #fff; 
      font-size: 20px;
      font-weight: bold;
      color: #001802;
      }
      .submit {
      /*width: 25%;
      padding: 10px 0;*/
      padding: 10px 15px;
      margin: 10px auto;
      border-radius: 5px; 
      border: none;
      background: #fff; 
      font-size: 20px;
      font-weight: bold;
      color: #001802;
      }
      button:hover {
      background: #fff;
      }
      .button {
      /*width: 25%;
      padding: 10px 0;*/
      padding: 10px 15px;
      margin: 10px auto;
      border-radius: 5px; 
      border: none;
      background: #fff; 
      font-size: 20px;
      font-weight: bold;
      color: #001802;
      }

.scene {
  display: inline-block;
  /*width: 160px;
  height: 640px;*/
	  width: 125px;
	  height: 450px;
/*   border: 1px solid #CCC; */
  /*margin: 40px 0;*/
  perspective: 600px;
}
@media screen and (max-width: 480px) {
  .scene {
	  width: 100px;
	  height: 375px;
  }
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face--front {
  /*background: crimson;*/
	background-size: contain;
	background-repeat: no-repeat;
}

.card__face--back {
  /*background: slateblue;*/
	background-size: contain;
	background-repeat: no-repeat;
  transform: rotateY(180deg);
}