/* css du dosier final*/
@font-face {
	font-family: "Roboto";
	src: url('fonts/Roboto-Medium.woff');
}

html {
  scroll-behavior: smooth;
}

main {
border: 1px;
margin: 1rem;
padding: 1rem;
text-align: center;
font-family: 'Roboto', sans-serif;
color: #FF6C00;
}

p {
background-color: none;
margin: 1rem;
padding: 1rem;
text-align: center;
font-size: 30px;
line-height: 1.2;
}

.b {
border: 3px;
margin: 1rem;
padding: 1rem;
text-align: center;
font-size: 17px;
}

.scene {
  width: 500px;
  height: 100vh;
  perspective: 600px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cube__face {
  position: absolute;
  width: 100%;
  height: 100vh;
  pointer-events: all;
  overflow: auto;
}

.cube__face-content {
  transform: rotateY(180deg);
  font-size: 1vw;
  pointer-events: initial;
  overflow: hidden;
  border: 1px;
  margin: 1rem;
  padding: 1rem;
  text-align: center;
  /*background-image: url("../images/wax3.png");*/

}

.cube__face--front  {
  background-color: blue;

}
.cube__face--right  {
/*  background-color: black;*/
background-image: url("../images/wax3.png");

}
.cube__face--back   {
  /*background-color: white;*/
  background-image: url("../images/wax3.png");

}
.cube__face--left   {
  /*background-color: black;*/
  background-image: url("../images/wax3.png");

}

.cube__face--front {
  transform: rotateY(0deg) translateZ(250px);
}
.cube__face--right {
  transform: rotateY( 90deg) translateZ(250px);
}
.cube__face--back {
  transform: rotateY(180deg) translateZ(250px);
}
.cube__face--left {
  transform: rotateY(-90deg) translateZ(250px);
}
.cube__face--top {
  transform: rotateX( 90deg) translateZ(250px);
}
.cube__face--bottom{
  transform: rotateX(-90deg) translateZ(250px);
}

.cube {
  animation-name: rotation;
  animation-duration: 2s; /* TODO change in js too */

  transition: transform 1s ease-in-out;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 500px) rotateY(0deg);
    width: 100%;
    height:100vh;

    transform-style: preserve-3d;
    pointer-events: none;

  }


@keyframes rotation {
  0% {
    transform: translate3d(-50%, -50%, 500px) rotateY(0deg);
  }

  100% {
    transform: translate3d(-50%, -50%, 500px) rotateY(360deg);
  }
}

#photos {
  /* Prevent vertical gaps */
  line-height: 1;

  -webkit-column-count: 3;
  -webkit-column-gap:   10px;
  -moz-column-count:    3;
  -moz-column-gap:      10px;
  column-count:         3;
  column-gap:           10px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

/* grille responsive
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 30px;
}

.column {
  flex: 30%;
  max-width: 30%;
  padding: 0 30px
/*  align-content:stretch;
}

.column img {
  margin-top: 8px;
  vertical-align: center;
  width: 100%;
  padding: 0 2px;
}*/

@media screen and (max-width: 200px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}
@media screen and (max-width: 500px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

.button-rotate {

  position: fixed;
  top: 0;
  z-index: 100000;

  background-color: none;
  font-family: 'Roboto', sans-serif;
  font-size: 2em;
  color: #FF6C00;
  transition: transform .5s ease-in-out;
}


.button-rotate.previous {
  left: 0;
  transform: translate(-100%);
}
.button-rotate.next {
  right: 0;
  transform: translate(100%);
}
.button-rotate.previous.switch-on,
.button-rotate.next.switch-on {
  transform: translate(0%);
}