* {
  font-family: "Gemunu Libre", sans-serif;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background-image: url("../img/bg.webp");
  background-color: #27260b;
  height: 100%;
  background-blend-mode: multiply;
  background-size: contain;
  background-repeat: repeat;
  font-family: "Gemunu Libre", sans-serif;
  /* background-size: 100%; */
}

h1 {
  text-align: center;
  color: #fff;
}

a:hover {
  text-decoration: none;
}

.adv {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

img {
  vertical-align: middle;
  border-style: none;
}

.btn-provider:hover {
  background-color: #ffe856;
}

.btn-provider {
  text-align: center;
  display: block;
}

#logo {
  display: -ms-grid;
  display: grid;
  place-items: center;
  margin-top: 28px;
  margin-bottom: 28px;
}

#logo img {
  max-width: 320px;
}

#banner-slide {
  margin-top: 28px;
}

.link-action {
  margin-top: 28px;
}

.link-action a {
  margin: 0;
}

.link-action a:hover {
  color: white;
}

.provider-list {
  margin-top: 28px;
  margin-bottom: 28px;
}

#provider-item a {
  border: 1px solid #eee;
  display: block;
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
  background-color: #0f0f0f;
  border: 3px solid;
  -o-border-image: linear-gradient(45deg, rgb(238, 228, 120), #ffc21b) 1;
     border-image: linear-gradient(45deg, rgb(238, 228, 120), #ffc21b) 1;
}
#provider-item a img {
  max-height: 100%;
  max-width: 75%;
}

#provider-item a:hover {
  background-color: rgba(255, 237, 41, 0.3);
}

.enter {
  display: none;
}

.btn-provider span {
  position: unset;
}

.active {
  background-color: #0092b1;
}

.content {
  background-color: rgba(38, 38, 38, 0.8);
  padding-top: 24px;
  border-radius: 3px;
  padding-bottom: 24px;
}

.slot .content {
  float: right;
  width: 80%;
  padding: 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 80%;
          flex: 0 0 80%;
  max-width: 80%;
}

.wrapper {
  width: 100%;
  padding: 18px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.card {
  float: left;
  width: 20%;
  background: transparent;
  border: none;
  text-align: center;
}

.card-content {
  margin: 4px;
  color: #fff;
  font-size: 12px;
  border: none;
  overflow: hidden;
  position: relative;
}

.percent {
  height: 27px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  line-height: 0;
  font-size: 0.75rem;
  background-color: #e9ecef;
  /* border-radius: .25rem; */
  position: relative;
  z-index: 1;
}

.percent p {
  z-index: 15;
  position: absolute;
  text-align: center;
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  -webkit-transform: translateY(14px);
          transform: translateY(14px);
  color: black;
}

.percent-bar {
  /* background-color: #ffc107; */
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
          justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  /* background-color: #007bff; */
  -webkit-transition: width 0.6s ease;
  transition: width 0.6s ease;
  -webkit-animation: progress-bar-stripes 1s linear infinite;
  animation: progress-bar-stripes 1s linear infinite;
  /* animation: ; */
  z-index: 10;
}

.yellow {
  background-color: #ffc107;
}

.green {
  background-color: #28a745;
}

.red {
  background-color: #dc3545;
}

.hover-btn {
  position: absolute;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.65);
  -webkit-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
  z-index: 10;
  width: 100%;
}

.img-zoom {
  -webkit-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
  height: 120px;
}

.hover-btn:hover {
  opacity: 100%;
}

.hover-btn:hover ~ .img-zoom {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  position: relative;
}

.mySlides {
  display: none;
}

.jamgacor {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#00ec00), to(#00b40e));
  background-image: linear-gradient(#00ec00, #00b40e);
  font-family: "Gemunu Libre", sans-serif;
  padding: 3px;
  padding-top: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom: 2px solid #e0e0e0;
  width: 100%;
}

.jamgacor h5 {
  font-size: 1.3em;
}

.progress {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.pola {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#003dfd), to(#0177cc));
  background-image: linear-gradient(#003dfd, #0177cc);
  font-family: "Gemunu Libre", sans-serif;
  padding: 3px;
  padding-top: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.jam {
  margin-bottom: 7px;
  margin-top: 12px;
  color: #000;
  font-weight: bold;
}

.jam h5 {
  font-size: 1.3em;
  font-weight: bold;
}

.jamBg {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  -webkit-transition: width 0.6s ease;
  transition: width 0.6s ease;
  -webkit-animation: progress-bar-stripes 1s linear infinite;
  animation: progress-bar-stripes 1s linear infinite;
  background-size: 1rem 1rem;
}

@media (max-width: 576px) {
  .container {
    max-width: 540px;
  }

  .card {
    max-width: 33.3% !important;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (max-width: 992px) {
  .slot-sidebar-nav {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .slot-sidebar {
    float: none !important;
    width: 100% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important;
    max-width: 100% !important;
    padding-right: 0 !important;
  }

  .content {
    float: none !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important;
  }

  .card {
    width: 33.3% !important;
  }

  .hover-btn:hover {
    opacity: 0;
  }

  .hover-btn:hover ~ .img-zoom {
    -webkit-transform: scale(1);
            transform: scale(1);
    position: relative;
  }

  #logo img {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    display: block;
    padding-top: 12px;
  }

  .btn-provider {
    text-align: center;
    display: block;
  }

  .slot-sidebar-nav > li > a {
    height: 70px;
  }

  .enter {
    display: block;
  }

  .btn-provider span {
    position: unset;
  }

  .btn-provider i {
    margin: 0;
  }

  .slot-sidebar-nav li {
    border-left: 0.2px solid #656565;
    border-right: 0.2px solid #656565;
    border-bottom: none;
  }

  .img-zoom {
    max-height: 80px;
  }

  .next-btn {
    display: block;
  }

  .res-bar {
    display: none;
  }

  .jamgacor > h5 {
    font-size: 1.4em;
  }

  .pola > p {
    font-size: 1.4em;
  }
}
@media (max-width: 576px) {
  .pola > p {
    font-size: 1.2em !important;
  }

  .provider-list img {
    max-width: 100%;
  }
}
.slot-heading {
  font-size: 28px;
  color: rgb(255, 233, 64);
  text-align: center;
  font-weight: bold;
  margin-bottom: 8px;
}

#article {
  padding: 24px;
}

#article-wrapper {
  border: 1px solid #d2c63e;
  -webkit-box-shadow: 0px 0px 16px 8px rgba(255, 227, 88, 0.34);
          box-shadow: 0px 0px 16px 8px rgba(255, 227, 88, 0.34);
  margin: 0 auto;
}

#article-content {
  font-size: 14px;
  text-align: justify;
  color: #eee;
  padding: 16px;
  margin-top: 18px;
  margin-bottom: 18px;
}

#article-content a {
  color: #d2c63e;
}

#article-content a:hover {
  color: #deac38;
}

#article-content h1,
#article-content h2,
#article-content h3,
#article-content h4,
#article-content h5,
#article-content h6 {
  text-align: center;
  color: #FFFB96;
  font-size: 28px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 10px;
}

.hover-btn > .animated-button,
.hover-btn > .animated-button2,
.hover-btn > .animated-button3,
.hover-btn > .animated-button4,
.hover-btn > .animated-button5,
.hover-btn > .animated-button6,
.hover-btn > .animated-button7,
.hover-btn > .animated-button8,
.hover-btn > .animated-button9,
.hover-btn > .animated-button10,
.hover-btn > .animated-button11,
.hover-btn > .animated-button12 {
  margin: 25%;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 15px;
  margin-top: 18%;
  padding: 12px 32px;
}

.hover-btn > .animated-button:hover,
.hover-btn > .animated-button2:hover,
.hover-btn > .animated-button3:hover,
.hover-btn > .animated-button4:hover,
.hover-btn > .animated-button5:hover,
.hover-btn > .animated-button6:hover,
.hover-btn > .animated-button7:hover,
.hover-btn > .animated-button8:hover,
.hover-btn > .animated-button9:hover,
.hover-btn > .animated-button10:hover,
.hover-btn > .animated-button11:hover,
.hover-btn > .animated-button12:hover {
  color: white;
}

footer {
  text-align: center;
  color: white;
  padding: 18px;
}

.btn-register {
  background: linear-gradient(-30deg, #898216 50%, #b5a12f 50%);
  padding: 20px 40px;
  margin: 12px;
  display: inline-block;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  overflow: hidden;
  color: #fff;
  font-size: 20px;
  letter-spacing: 2.5px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.btn-register::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #8592ad;
  opacity: 0;
  -webkit-transition: 0.2s opacity ease-in-out;
  transition: 0.2s opacity ease-in-out;
}
.btn-register:hover::before {
  opacity: 0.2;
}
.btn-register span {
  position: absolute;
}
.btn-register span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, right top, left top, from(rgba(138, 138, 31, 0)), to(#ffff5e));
  background: linear-gradient(to left, rgba(138, 138, 31, 0), #ffff5e);
  -webkit-animation: 2s animateTop linear infinite;
          animation: 2s animateTop linear infinite;
}
.btn-register span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(138, 138, 31, 0)), to(#ffff5e));
  background: linear-gradient(to top, rgba(138, 138, 31, 0), #ffff5e);
  -webkit-animation: 2s animateRight linear -1s infinite;
          animation: 2s animateRight linear -1s infinite;
}
.btn-register span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(138, 138, 31, 0)), to(#ffff5e));
  background: linear-gradient(to right, rgba(138, 138, 31, 0), #ffff5e);
  -webkit-animation: 2s animateBottom linear infinite;
          animation: 2s animateBottom linear infinite;
}
.btn-register span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(138, 138, 31, 0)), to(#ffff5e));
  background: linear-gradient(to bottom, rgba(138, 138, 31, 0), #ffff5e);
  -webkit-animation: 2s animateLeft linear -1s infinite;
          animation: 2s animateLeft linear -1s infinite;
}
@-webkit-keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@-webkit-keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@-webkit-keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}
@keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

.btn-login {
  background: linear-gradient(-30deg, #22a242 50%, #176c08 50%);
  padding: 20px 40px;
  margin: 12px;
  display: inline-block;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  overflow: hidden;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 2.5px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.btn-login::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #85ad87;
  opacity: 0;
  -webkit-transition: 0.2s opacity ease-in-out;
  transition: 0.2s opacity ease-in-out;
}
.btn-login:hover::before {
  opacity: 0.2;
}
.btn-login span {
  position: absolute;
}
.btn-login span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, right top, left top, from(rgba(10, 43, 8, 0)), to(#26d941));
  background: linear-gradient(to left, rgba(10, 43, 8, 0), #26d941);
  -webkit-animation: 2s animateTop linear infinite;
          animation: 2s animateTop linear infinite;
}
.btn-login span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(10, 43, 8, 0)), to(#26d941));
  background: linear-gradient(to top, rgba(10, 43, 8, 0), #26d941);
  -webkit-animation: 2s animateRight linear -1s infinite;
          animation: 2s animateRight linear -1s infinite;
}
.btn-login span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(10, 43, 8, 0)), to(#26d941));
  background: linear-gradient(to right, rgba(10, 43, 8, 0), #26d941);
  -webkit-animation: 2s animateBottom linear infinite;
          animation: 2s animateBottom linear infinite;
}
.btn-login span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(10, 43, 8, 0)), to(#26d941));
  background: linear-gradient(to bottom, rgba(10, 43, 8, 0), #26d941);
  -webkit-animation: 2s animateLeft linear -1s infinite;
          animation: 2s animateLeft linear -1s infinite;
}
@-webkit-keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@-webkit-keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@-webkit-keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}
@keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

.animated-button3 {
  background: linear-gradient(-30deg, #484848 50%, #838383 50%);
  padding: 20px 40px;
  margin: 12px;
  display: inline-block;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  overflow: hidden;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 2.5px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.animated-button3::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #f7e6d4;
  opacity: 0;
  -webkit-transition: 0.2s opacity ease-in-out;
  transition: 0.2s opacity ease-in-out;
}
.animated-button3:hover::before {
  opacity: 0.2;
}
.animated-button3 span {
  position: absolute;
}
.animated-button3 span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, right top, left top, from(rgba(73, 73, 73, 0)), to(#d8d8d8));
  background: linear-gradient(to left, rgba(73, 73, 73, 0), #d8d8d8);
  -webkit-animation: 2s animateTop linear infinite;
          animation: 2s animateTop linear infinite;
}
.animated-button3 span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(73, 73, 73, 0)), to(#d8d8d8));
  background: linear-gradient(to top, rgba(73, 73, 73, 0), #d8d8d8);
  -webkit-animation: 2s animateRight linear -1s infinite;
          animation: 2s animateRight linear -1s infinite;
}
.animated-button3 span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(73, 73, 73, 0)), to(#d8d8d8));
  background: linear-gradient(to right, rgba(73, 73, 73, 0), #d8d8d8);
  -webkit-animation: 2s animateBottom linear infinite;
          animation: 2s animateBottom linear infinite;
}
.animated-button3 span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(73, 73, 73, 0)), to(#d8d8d8));
  background: linear-gradient(to bottom, rgba(73, 73, 73, 0), #d8d8d8);
  -webkit-animation: 2s animateLeft linear -1s infinite;
          animation: 2s animateLeft linear -1s infinite;
}
@-webkit-keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@-webkit-keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@-webkit-keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}
@keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

.btn-apk {
  background: linear-gradient(-30deg, #3d240b 50%, #2b1a08 50%);
  padding: 20px 40px;
  margin: 12px;
  display: inline-block;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  overflow: hidden;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 2.5px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.btn-apk::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #f7e6d4;
  opacity: 0;
  -webkit-transition: 0.2s opacity ease-in-out;
  transition: 0.2s opacity ease-in-out;
}
.btn-apk:hover::before {
  opacity: 0.2;
}
.btn-apk span {
  position: absolute;
}
.btn-apk span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, right top, left top, from(rgba(43, 26, 8, 0)), to(#d98026));
  background: linear-gradient(to left, rgba(43, 26, 8, 0), #d98026);
  -webkit-animation: 2s animateTop linear infinite;
          animation: 2s animateTop linear infinite;
}
.btn-apk span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 26, 8, 0)), to(#d98026));
  background: linear-gradient(to top, rgba(43, 26, 8, 0), #d98026);
  -webkit-animation: 2s animateRight linear -1s infinite;
          animation: 2s animateRight linear -1s infinite;
}
.btn-apk span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(43, 26, 8, 0)), to(#d98026));
  background: linear-gradient(to right, rgba(43, 26, 8, 0), #d98026);
  -webkit-animation: 2s animateBottom linear infinite;
          animation: 2s animateBottom linear infinite;
}
.btn-apk span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 26, 8, 0)), to(#d98026));
  background: linear-gradient(to bottom, rgba(43, 26, 8, 0), #d98026);
  -webkit-animation: 2s animateLeft linear -1s infinite;
          animation: 2s animateLeft linear -1s infinite;
}
@-webkit-keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@-webkit-keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@-webkit-keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}
@keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}