.cube__side,
.no-js .cube {
  border: 0.2vw solid #fff;
  outline: 1.5px solid #fff;
  background: #f0f0f0 url(../img/case_1.png) no-repeat center center;
  background-size: cover;
}

.cube:nth-child(2) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(2) {
  background: #f0f0f0 url(../img/case_2.png) center no-repeat;
  background-size: cover;
}

.cube:nth-child(3) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(3) {
  background: #f0f0f0 url(../img/case_3.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(4) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(4) {
  background: #f0f0f0 url(../img/case_4.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(5) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(5) {
  background: #f0f0f0 url(../img/case_5.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(6) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(6) {
  background: #f0f0f0 url(../img/case_6.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(7) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(7) {
  background: #f0f0f0 url(../img/case_7.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(8) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(8) {
  background: #f0f0f0 url(../img/case_8.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(9) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(9) {
  background: #f0f0f0 url(../img/case_9.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(10) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(10) {
  background: #f0f0f0 url(../img/case_10.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(11) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(11) {
  background: #f0f0f0 url(../img/case_11.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(12) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(12) {
  background: #f0f0f0 url(../img/case_12.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(13) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(13) {
  background: #f0f0f0 url(../img/case_13.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(14) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(14) {
  background: #f0f0f0 url(../img/case_14.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(15) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(15) {
  background: #f0f0f0 url(../img/case_15.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(16) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(16) {
  background: #f0f0f0 url(../img/case_16.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(17) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(17) {
  background: #f0f0f0 url(../img/case_17.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(18) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(18) {
  background: #f0f0f0 url(../img/case_18.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(19) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(19) {
  background: #f0f0f0 url(../img/case_19.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(20) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(20) {
  background: #f0f0f0 url(../img/case_20.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(21) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(21) {
  background: #f0f0f0 url(../img/case_21.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(22) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(22) {
  background: #f0f0f0 url(../img/case_22.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(23) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(23) {
  background: #f0f0f0 url(../img/case_23.png) center no-repeat;
  background-size: cover;
}
.cube:nth-child(24) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(24) {
  background: #f0f0f0 url(../img/case_24.png) center no-repeat;
  background-size: cover;
}

.cube--inactive .cube__side,
.no-js .cube--inactive {
  /* background: #e1e0e0; */
  filter: blur(3px) grayscale(70%);
  opacity: 0.6;
}

/* With JS we insert a number span into the cube */

.cube__number,
.no-js .cube::after {
  font-family: "Museo-300", roboto, sans-serif;
  font-weight: 700;
  line-height: 2.5;
  width: 2em;
  height: 2em;
  padding: 0 0 0 0.25em;
  text-align: center;
  letter-spacing: -0.05em;
  color: #fff;
  border-radius: 100% 0 0 0;
  background: #008762;
}
/*couleur-numero-2*/
.cube:nth-child(2n):not(.cube--inactive) .cube__number,
.no-js .cube:nth-child(2n):not(.cube--inactive)::after {
  background: #c65550;
}

.cube:nth-child(3n):not(.cube--inactive) .cube__number,
.no-js .cube:nth-child(3n):not(.cube--inactive)::after {
  background: #1b4b76;
}

.cube--inactive .cube__number,
.no-js .cube--inactive::after {
  background: #aaa;
}

.js .content__block {
  text-align: right;
}

.content__number {
  font-family: "Museo-300", roboto, sans-serif;
  font-size: 40vw;
  font-weight: bold;
  line-height: 0.5;
  right: 0;
  bottom: 30vh;
  text-indent: -0.175em;
  letter-spacing: -0.175em;
  color: #fff;
}