html {
  height: 100%;
}
 
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
 
  align-items: center;                                                                                                    
  background: url("../bolso.jpg"); 
  color:rgb(4, 1, 1);
  font-family: 'Poppins', sans-serif;
  background-size: cover;
  background-repeat: no-repeat;
  align-items: center;
/*  background-color: #2E294E;*/
  display: flex;
  font-family: -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    Roboto, 
    Oxygen-Sans, 
    Ubuntu, 
    Cantarell, 
    "Helvetica Neue", 
    sans-serif;
}
.flip-clock {
  text-align: center;
  perspective: 400px;
  margin: 20px auto;
}
.flip-clock *,
.flip-clock *:before,
.flip-clock *:after {
  box-sizing: border-box;
}
.flip-clock__piece {
  display: inline-block;
  margin: 0 5px;
}
.flip-clock__slot {
  margin-top: -20px;
  font-size: 2vw;
  font-family: -apple-system, 
  BlinkMacSystemFont, 
  "Segoe UI", 
  Roboto, 
  Oxygen-Sans, 
  Ubuntu, 
  Cantarell, 
  "Helvetica Neue", 
  sans-serif;
}
.flip-clock__card{
  background-color: #ccc!important;
  
}
.bg-primary {
  background-color: #007bff!important;
}
.card {
  display: block;
  position: relative;
  padding-bottom: 0.72em;
  font-size: 9vw;
  line-height: 0.95; 
  border:0;
  
}
/*------------------*/
.card__top,
.card__bottom,
.card__back::before,
.card__back::after {
  display: block;
  height: 0.72em;
  color: #FFF;
  background-color:rgba(30, 28, 28, 0.65);
 /* background: #222;*/
  padding: 0.25em 0.25em;
  border-radius: 0.15em 0.15em 0 0;
  backface-visiblity: hidden;
  transform-style: preserve-3d;
  width: 1.8em;
  transform: translateZ(0);
}
.card__bottom {
  color: #FFF;
  position: absolute;
  top: 50%;
  left: 0;
  border-top: solid 1px #000;
  background-color:rgba(30, 28, 28, 0.85);
  border-radius: 0 0 0.15em 0.15em;
  pointer-events: none;
  overflow: hidden;
}

.card_top{ 
  display: block;
  height: 0.72em;
  color: #FFF;
  background-color:rgba(30, 28, 28, 0.65);
 /* background: #222;*/
  padding: 0.25em 0.25em;
  border-radius: 0.15em 0.15em 0 0;
 
  transform-style: preserve-3d;
  width: 1.8em;
  transform: translateZ(0);
}
/*------------------*/
/*------------------*/
.card__top_1,
.card__bottom_1,
.card__back_1::before,
.card__back_1::after {
  display: block;
  height: 0.72em;
  color: #FFF;
  background-color:rgba(5, 101, 8, 0.65);
 /* background: #222;*/
  padding: 0.25em 0.25em;
  border-radius: 0.15em 0.15em 0 0;
  backface-visiblity: hidden;
  transform-style: preserve-3d;
  width: 1.8em;
  transform: translateZ(0);
}
.card__bottom_1 {
  color: #FFF;
  position: absolute;
  top: 50%;
  left: 0;
  border-top: solid 1px rgba(5, 101, 8, 0.65);;
  background-color:rgba(5, 101, 8, 0.65);
  border-radius: 0 0 0.15em 0.15em;
  pointer-events: none;
  overflow: hidden;
}

.card_top_1{ 
  display: block;
  height: 0.72em;
  color: #FFF;
  background-color:rgba(5, 101, 8, 0.65);
 /* background: #222;*/
  padding: 0.25em 0.25em;
  border-radius: 0.15em 0.15em 0 0;
 
  transform-style: preserve-3d;
  width: 1.8em;
  transform: translateZ(0);
}
/*------------------*/
/*------------------*/
.card__top_2,
.card__bottom_2,
.card__back_2::before,
.card__back_2::after {
  display: block;
  height: 0.72em;
  color: #FFF;
  background-color:rgba(203, 213, 8, 0.65);
 /* background: #222;*/
  padding: 0.25em 0.25em;
  border-radius: 0.15em 0.15em 0 0;
  backface-visiblity: hidden;
  transform-style: preserve-3d;
  width: 1.8em;
  transform: translateZ(0);
}
.card__bottom_2 {
  color: #FFF;
  position: absolute;
  top: 50%;
  left: 0;
  border-top: solid 1px rgba(203, 213, 8, 0.65);
  background-color:rgba(203, 213, 8, 0.65);
  border-radius: 0 0 0.15em 0.15em;
  pointer-events: none;
  overflow: hidden;
}

.card_top_2{ 
  display: block;
  height: 0.72em;
  color: #FFF;
  background-color:rgba(203, 213, 8, 0.65);
 /* background: #222;*/
  padding: 0.25em 0.25em;
  border-radius: 0.15em 0.15em 0 0;
 
  transform-style: preserve-3d;
  width: 1.8em;
  transform: translateZ(0);
}
/*------------------*/





/*------------------*/
.card__top_3,
.card__bottom_3,
.card__back_3::before,
.card__back_3::after {
  display: block;
  height: 0.72em;
  color: #FFF;
  background-color:rgba(19, 7, 150, 0.65);
 /* background: #222;*/
  padding: 0.25em 0.25em;
  border-radius: 0.15em 0.15em 0 0;
  backface-visiblity: hidden;
  transform-style: preserve-3d;
  width: 1.8em;
  transform: translateZ(0);
}
.card__bottom_3 {
  color: #FFF;
  position: absolute;
  top: 50%;
  left: 0;
  border-top: solid 1px rgba(19, 7, 150, 0.65);
  background-color:rgba(19, 7, 150, 0.65);
  border-radius: 0 0 0.15em 0.15em;
  pointer-events: none;
  overflow: hidden;
}

.card_top_3{ 
  display: block;
  height: 0.72em;
  color: #FFF;
  background-color:rgba(19, 7, 150, 0.65);
 /* background: #222;*/
  padding: 0.25em 0.25em;
  border-radius: 0.15em 0.15em 0 0;
 
  transform-style: preserve-3d;
  width: 1.8em;
  transform: translateZ(0);
}
/*------------------*/





/*------------------*/
.card__top_4,
.card__bottom_4,
.card__back_4::before,
.card__back_4::after {
  display: block;
  height: 0.72em;
  color: #FFF;
  background-color:rgba(133, 7, 7, 0.65);
 /* background: #222;*/
  padding: 0.25em 0.25em;
  border-radius: 0.15em 0.15em 0 0;
  backface-visiblity: hidden;
  transform-style: preserve-3d;
  width: 1.8em;
  transform: translateZ(0);
}
.card__bottom_4 {
  color: #FFF;
  position: absolute;
  top: 50%;
  left: 0;
  border-top: solid 1px rgba(133, 7, 7, 0.65);
  background-color:rgba(133, 7, 7, 0.65);
  border-radius: 0 0 0.15em 0.15em;
  pointer-events: none;
  overflow: hidden;
}

.card_top_4{ 
  display: block;
  height: 0.72em;
  color: #FFF;
  background-color:rgba(133, 7, 7, 0.65);
 /* background: #222;*/
  padding: 0.25em 0.25em;
  border-radius: 0.15em 0.15em 0 0;
 
  transform-style: preserve-3d;
  width: 1.8em;
  transform: translateZ(0);
}
/*------------------*/
.card__bottom_1::after,
.card__bottom_2::after,
.card__bottom_3::after,
.card__bottom_4::after,
.card__bottom::after {
  display: block;
  margin-top: -0.72em;
}
.card__back::before,.card__bottom::after,
.card__back_1::before,.card__bottom_1::after,
.card__back_2::before,.card__bottom_2::after,
.card__back_3::before,.card__bottom_3::after,
.card__back_4::before,.card__bottom_4::after
 {
  content: attr(data-value);
}
.card__back,
.card__back_1,
.card__back_2,
.card__back_3,
.card__back_4 {
  position: absolute;
  top: 0;
  height: 100%;
  left: 0%;
  pointer-events: none;
}
.card__back::before,
.card__back_1::before,
.card__back_2::before,
.card__back_3::before,
.card__back_4::before,
.card__back::before {
  position: relative;
  z-index: -1;
  overflow: hidden;
}
.flip .card__back::before,
.flip .card__back_1::before,
.flip .card__back_2::before,
.flip .card__back_4::before,
.flip .card__back_3::before {
  -webkit-animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
          animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  transform-origin: center bottom;
}
.flip .card__back .card__bottom,
.flip .card__back_1 .card__bottom_1,
.flip .card__back_2 .card__bottom_2,
.flip .card__back_3 .card__bottom_3,
.flip .card__back_4 .card__bottom_4 {
  transform-origin: center top;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
          animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
}
@-webkit-keyframes flipTop {
  0% {
    transform: rotateX(0deg);
    z-index: 2;
  }
  0%,
  99% {
    opacity: 0.99;
  }
  100% {
    transform: rotateX(-90deg);
    opacity: 0;
  }
}
@keyframes flipTop {
  0% {
    transform: rotateX(0deg);
    z-index: 2;
  }
  0%,
  99% {
    opacity: 0.99;
  }
  100% {
    transform: rotateX(-90deg);
    opacity: 0;
  }
}
@-webkit-keyframes flipBottom {
  0%,
  50% {
    z-index: -1;
    transform: rotateX(90deg);
    opacity: 0;
  }
  51% {
    opacity: 0.99;
  }
  100% {
    opacity: 0.99;
    transform: rotateX(0deg);
    z-index: 5;
  }
}
@keyframes flipBottom {
  0%,
  50% {
    z-index: -1;
    transform: rotateX(90deg);
    opacity: 0;
  }
  51% {
    opacity: 0.99;
  }
  100% {
    opacity: 0.99;
    transform: rotateX(0deg);
    z-index: 5;
  }
}
.item{
  text-align: center;

  background-color: rgba(255, 255, 255, 0.35);
  border-radius: 5px;
  margin: 0.5em 0.5em 0.5em 0.0em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	letter-spacing: 2px;
 
	text-align:center;
	 color:rgb(47, 4, 4);
	 font-size:18px;
	 font-weight:900;
}
.h11{  text-align: center;
  font-size: 38px;
  font-weight: 900;
  color: #000;
  margin-bottom: 25px;
  text-transform: uppercase;
  text-shadow: white 0.05em 0.05em 0.05em;}
  .sep{
    display: flex;justify-content: center;margin-top: 155px;
  }

  .logo {
    display: block;
    text-indent: -9999px;
    width: 100px;
    height: 82px;
    background: url(star.svg);
    background-size: 100px 82px;
  }