*,
*::before,
*::after { box-sizing: border-box; } 

 
.card {
  position: relative; 
  width: 100%;
  height: 85vh; 
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  background-color: #171f18;
}

.card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
} 

.card_part {
  position: absolute;
  z-index: 7;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  width: 100%;
  height: 85vh;  
  transform: translateX( 100% ); 
  background-image: url( "../img/IMG2.jpg" );
  animation: opaqTransition 20s cubic-bezier(0, 0, 0, 0.98) infinite;
}


.card_part.card_part-two {
 /*  z-index: 6; */
  background-image: url( "../img/03-boxed.jpg" );
  animation-delay: 5s;
}

.card_part.card_part-three {
  /* z-index: 5; */
  background-image: url("../img/01-boxed.jpg");
  animation-delay: 10s;
}

.card_part.card_part-four {
 /*  z-index: 4; */
  background-image: url("../img/02-boxed.jpg");
  animation-delay: 15s;
}

.card_part.card_part-five {
    /* z-index: 3; */
    background-image: url("../img/05-boxed.jpg");
    animation-delay: 20s;
}

@keyframes opaqTransition {
  3% { transform: translateX( 0 ); }
  25% { transform: translateX( 0 ); }
  28% { transform: translateX( -100% ); }
  31% { transform: translateX( -100% ); }
  100% { transform: translateX( -100% ); }
}

/* RADIO BUTTON */
[type="radio"]:checked,
[type="radio"]:not(:checked){
  position: absolute;
  left: -9999px;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
  position: relative;
  cursor: pointer;
  margin: 0 auto;
  text-align: right;
  margin-right: 6px;
  margin-left: 6px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #171f18;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-image: url("../img/IMG2.jpg");
  animation: border-transform 6s linear infinite alternate forwards;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
.checkbox.scnd + label{
  background-image: url("../img/03-boxed.jpg");
}
.checkbox.thrd + label{
  background-image: url("../img/01-boxed.jpg");
}
.checkbox.foth + label{
  background-image: url("../img/02-boxed.jpg");
}
.checkbox.five + label{
  background-image: url("../img/05-boxed.jpg");
}
.checkbox:checked + label{
  box-shadow: 0 8px 25px 0 rgba(16,39,112,.3);
  transform: scale(1.3);
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
} 
@keyframes border-transform{
  0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
  14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
  28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
  42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
  56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
  70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
  84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}


.checkbox.frst:checked  {
  opacity: 1;
  pointer-events: auto;
  border-radius: 16px;
}
.checkbox.scnd:checked  {
  opacity: 1;
  pointer-events: auto;
  border-radius: 16px;
}
.checkbox.thrd:checked  {
  opacity: 1;
  pointer-events: auto;
  border-radius: 16px;
}
.checkbox.foth:checked  {
  opacity: 1;
  pointer-events: auto;
  border-radius: 16px;
}
.checkbox.five:checked  {
  opacity: 1;
  pointer-events: auto;
  border-radius: 16px;
}

/* RADIO BUTTON */