.advent-calendar-card {
    width: 150px;
    height: 150px;
    margin: 20px auto;
}

.advent-calendar-card input {
  display: none;
}

.advent-calendar-title {
  position: absolute;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */

  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  color: #333333;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.7);
  padding:5px 10px;
}

.advent-calendar-back-title {
  position: absolute;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */

  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);

  color: #333333;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.7);
  padding:5px 10px;
}


.advent-calendar-front {
  /*background: #d9534f;*/
  position: relative;
}

.advent-calendar-front {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.advent-calendar-back {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

/* the magic begins  */

.advent-calendar-card label {
  perspective: 1000px;
  -webkit-perspective: 1000px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  cursor: pointer;

  display: flex;
  min-height: 100%;
  width: 100%;
  height: 120px;
}

.advent-calendar-card .door {
  width: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  transition: all 300ms;
  -webkit-transition: all 300ms;

}
.advent-calendar-card .door .advent-calendar-front,
.advent-calendar-card .door .advent-calendar-back {
   position: absolute;
   height: 150px;
   width: 150px;
   backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

   display: flex;
   align-items: center;
   justify-content: center;
     border: 2px dashed transparent;
 }

.advent-calendar-card .door .advent-calendar-back {
   background-color: #2e313d;
   transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
 }

 .advent-calendar-card .door .advent-calendar-front:hover {
  border-color: #385052;
}

:checked + .door {
  transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.card-back-link {
  position: absolute;
    width: 100%;
    height: 100%;
}



.active .advent-calendar-front::before {
content: "";

top: 0;
/* left: 0; */
bottom: 0;
right: 0;
position: absolute;
width: 0px;
height: 0px;
border-top: 0px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid #333;

backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

.active .advent-calendar-front::after {
content: url("img/checked.png");

top: 0;
bottom: 0;
right: 0;
position: absolute;

backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}


/* adjust  */