.c-card{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open {
    display: none;
  }

  .card-front {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open:checked ~ .card-front {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open:checked ~ .card-front:before {
    z-index:5;
  }

  .card-front:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }
  .text {
    position: absolute;
    color: white;
    font-family: brush script mt;
    top:260px;
    width:200px;
    text-align: center;
    font-size:15px;
  }
  .text1 {
    position: absolute;
    width:80px;
    font-family: brush script mt;
    color: #333;
    text-align: center;
    font-size:30px;
    top:100px;
    left:61px;
  }
  .text2 {
    position: absolute;
    color: black;
    font-family: brush script mt;
    top:260px;
    width:200px;
    text-align: center;
    font-size:15px;
  }

  .card-inside:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    top: 10px;
    left: 10px;
  }

  .title {
    position: absolute;
    color: #333;
    font-size:30px;
    font-family: brush script mt;
    line-height: 25px;
    text-align: center;
    top:45px;
    width:200px;
  }

  .wishes {
    position: absolute;
    width: 150px;
    text-align: center;
    font-family: brush script mt;
    line-height:15px;
    font-size: 20px;
    color: #333;
    height: 300px;
    top: 40%;
    left:25px;
  }

  /*card 2*/

.c-card2{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card2 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open2 {
    display: none;
  }

  .card-front2 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside2 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open2 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open2:checked ~ .card-front2 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open2:checked ~ .card-front2:before {
    z-index:5;
  }

  .card-front2:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside2:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  /*card 3*/

  .c-card3{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card3 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open3 {
    display: none;
  }

  .card-front3 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside3 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open3 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open3:checked ~ .card-front3 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open3:checked ~ .card-front3:before {
    z-index:5;
  }

  .card-front3:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside3:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    top: 10px;
    left: 10px;
  }

  /*card 4*/

  .c-card4{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card4 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open4 {
    display: none;
  }

  .card-front4 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside4 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open4 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open4:checked ~ .card-front4 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open4:checked ~ .card-front4:before {
    z-index:5;
  }

  .card-front4:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside4:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  /*card 5*/

  .c-card5{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card5 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open5 {
    display: none;
  }

  .card-front5 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside5 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open5 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open5:checked ~ .card-front5 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open5:checked ~ .card-front5:before {
    z-index:5;
  }

  .card-front5:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside5:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    top: 10px;
    left: 10px;
  }

  /*card 6*/

  .c-card6{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card6 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open6 {
    display: none;
  }

  .card-front6 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside6 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open6 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open6:checked ~ .card-front6 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open6:checked ~ .card-front6:before {
    z-index:5;
  }

  .card-front6:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside6:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  /*card 7*/

  .c-card7{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card7 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open7 {
    display: none;
  }

  .card-front7 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside7 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open7 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open7:checked ~ .card-front7 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open7:checked ~ .card-front7:before {
    z-index:5;
  }

  .card-front7:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside7:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    top: 10px;
    left: 10px;
  }

  /*card 8*/

  .c-card8{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card8 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open8 {
    display: none;
  }

  .card-front8 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside8 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open8 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open8:checked ~ .card-front8 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open8:checked ~ .card-front8:before {
    z-index:5;
  }

  .card-front8:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside8:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  /*card 9*/

  .c-card9{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card9 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open9 {
    display: none;
  }

  .card-front9 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside9 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open9 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open9:checked ~ .card-front9 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open9:checked ~ .card-front9:before {
    z-index:5;
  }

  .card-front9:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside9:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  /*card 10*/

  .c-card10{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card10 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open10 {
    display: none;
  }

  .card-front10 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside10 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open10 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open10:checked ~ .card-front10 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open10:checked ~ .card-front10:before {
    z-index:5;
  }

  .card-front10:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside10:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  /*card 11*/

  .c-card11{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card11 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open11 {
    display: none;
  }

  .card-front11 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside11 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open11 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open11:checked ~ .card-front11 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open11:checked ~ .card-front11:before {
    z-index:5;
  }

  .card-front11:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside11:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    top: 10px;
    left: 10px;
  }

  /*card 12*/

  .c-card12{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card12 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open12 {
    display: none;
  }

  .card-front12 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside12 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open12 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open12:checked ~ .card-front12 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open12:checked ~ .card-front12:before {
    z-index:5;
  }

  .card-front12:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside12:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  /*card 13*/

  .c-card13{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card13 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open13 {
    display: none;
  }

  .card-front13 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside13 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open13 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open13:checked ~ .card-front13 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open13:checked ~ .card-front13:before {
    z-index:5;
  }

  .card-front13:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside13:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    top: 10px;
    left: 10px;
  }

  /*card 14*/

  .c-card14{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card14 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open14 {
    display: none;
  }

  .card-front14 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside14 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open14 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open14:checked ~ .card-front14 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open14:checked ~ .card-front14:before {
    z-index:5;
  }

  .card-front14:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside14:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  /*card 15*/

  .c-card15{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card15 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open15 {
    display: none;
  }

  .card-front15 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside15 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open15 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open15:checked ~ .card-front15 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open15:checked ~ .card-front15:before {
    z-index:5;
  }

  .card-front15:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside15:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    top: 10px;
    left: 10px;
  }

  /*card 16*/

  .c-card16{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card16 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open16 {
    display: none;
  }

  .card-front16 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside16 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open16 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open16:checked ~ .card-front16 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open16:checked ~ .card-front16:before {
    z-index:5;
  }

  .card-front16:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside16:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  /*card 17*/

  .c-card17{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card17 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open17 {
    display: none;
  }

  .card-front17 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside17 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open17 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open17:checked ~ .card-front17 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open17:checked ~ .card-front17:before {
    z-index:5;
  }

  .card-front17:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside17:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    top: 10px;
    left: 10px;
  }

  /*card 18*/

  .c-card18{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card18 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open18 {
    display: none;
  }

  .card-front18 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside18 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open18 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open18:checked ~ .card-front18 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open18:checked ~ .card-front18:before {
    z-index:5;
  }

  .card-front18:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside18:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  /*card 19*/

  .c-card19{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card19 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open19 {
    display: none;
  }

  .card-front19 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside19 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open19 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open19:checked ~ .card-front19 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open19:checked ~ .card-front19:before {
    z-index:5;
  }

  .card-front19:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside19:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    top: 10px;
    left: 10px;
  }

  /*card 20*/

  .c-card20{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card20 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open20 {
    display: none;
  }

  .card-front20 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside20 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open20 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open20:checked ~ .card-front20 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open20:checked ~ .card-front20:before {
    z-index:5;
  }

  .card-front20:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside20:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  /*card 21*/

  .c-card21{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card21 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open21 {
    display: none;
  }

  .card-front21 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside21 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open21 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open21:checked ~ .card-front21 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open21:checked ~ .card-front21:before {
    z-index:5;
  }

  .card-front21:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside21:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    top: 10px;
    left: 10px;
  }

  /*card 22*/

  .c-card22{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card22 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open22 {
    display: none;
  }

  .card-front22 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside22 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open22 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open22:checked ~ .card-front22 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open22:checked ~ .card-front22:before {
    z-index:5;
  }

  .card-front22:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside22:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  /*card 23*/

  .c-card23{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card23 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open23 {
    display: none;
  }

  .card-front23 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside23 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open23 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open23:checked ~ .card-front23 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open23:checked ~ .card-front23:before {
    z-index:5;
  }

  .card-front23:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside23:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    top: 10px;
    left: 10px;
  }

  /*card 24*/

  .c-card24{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card24 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open24 {
    display: none;
  }

  .card-front24 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside24 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open24 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open24:checked ~ .card-front24 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open24:checked ~ .card-front24:before {
    z-index:5;
  }

  .card-front24:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside24:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  /*card 25*/

  .c-card25{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card25 {
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open25 {
    display: none;
  }

  .card-front25 {
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside25 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open25 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open25:checked ~ .card-front25 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open25:checked ~ .card-front25:before {
    z-index:5;
  }

  .card-front25:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside25:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    top: 10px;
    left: 10px;
  }

  /*card 26*/

  .c-card26{
    width: 400px;
    display: flex;
    justify-content: right;
    align-items: right;
    position: relative;
    margin-top:5px;
}
.christmas-card26{
    position: relative;
    width: 200px;
    height:300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
  }
  input#open26{
    display: none;
  }

  .card-front26{
    position: relative;
    background-color: #fff;
    width: 200px;
    height:300px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
    transition: .3s;
  }

  .card-inside26 {
    position: absolute;
    background-color: #fff;
    width: 200px;
    height:300px;
    z-index:-1;
    left:0;
    top:0;
    box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  }

  .open26 {
    position: absolute;
    width: 200px;
    height:300px;
    left:0;
    top:0;
    background-color: transparent;
    z-index:6;
    cursor: pointer;
  }

  #open26:checked ~ .card-front26 {
    transform: rotateY(-155deg);
    box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  }

  #open26:checked ~ .card-front26:before {
    z-index:5;
  }

  .card-front26:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }

  .card-inside26:before {
    content:"";
    position: absolute;
    width: 180px;
    height: 280px;
    background-color: #c94038;
    top: 10px;
    left: 10px;
  }