/* Back Pulse */
@-webkit-keyframes hvr-back-pulse {
  50% {
    background-color: rgba(37, 149, 92, 0.75);
  }
}
@keyframes hvr-back-pulse {
  50% {
    background-color: rgba(37, 149, 92, 0.75);
  }
}
.hvr-back-pulse {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}

.hvr-back-pulse:hover, .hvr-back-pulse:focus, .hvr-back-pulse:active {
  -webkit-animation-name: hvr-back-pulse;
  animation-name: hvr-back-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-color: #2098D1;
  background-color: #2098d1;
  color: white;
}

/*https://codepen.io/alvarotrigo/pen/bGoPzMe*/
/* Component Needs */
@font-face {
  font-family: "Decoder";
  src: url(/fonts/decoder.ttf);
}
.pc-tab > input,
.pc-tab section > div {
  display: none;
}

#tab1:checked ~ section .tab1,
#tab2:checked ~ section .tab2,
#tab3:checked ~ section .tab3,
#tab4:checked ~ section .tab4 {
  display: block;
}

/* Visual Styles */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h3 {
  text-align: center;
}

h4 {
  font-style: italic;
  text-align: center;
  margin-top: 0.5em;
}

figure {
  flex-grow: 1;
  margin: 0;
  height: auto;
}

figcaption {
  text-align: center;
}

img {
  width: 80%;
  margin: auto;
  display: block;
}

iframe {
  border: 0;
}

.pc-tab {
  width: 100%;
  max-width: 90%;
  height: 500px;
  margin: 0 auto;
  display: flex;
}
.pc-tab nav {
  height: 100%;
  display: flex;
}
.pc-tab ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: inherit;
  display: flex;
  flex-direction: column;
}
.pc-tab ul li {
  flex-direction: column;
  display: flex;
  flex-grow: 1;
}
.pc-tab ul li label {
  float: left;
  padding: 5px 15px;
  border: 1px solid #004B25;
  background: #007439;
  color: #000A05;
  width: 100%;
  white-space: nowrap;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  font-family: Decoder;
  border-radius: 20px 0px 0px 20px;
}
.pc-tab ul li label:hover {
  background: #25955C;
}
.pc-tab ul li label:active {
  background: #87AC99;
}
.pc-tab section {
  clear: both;
}
.pc-tab section div {
  padding: 20px;
  border: 1px solid #004B25;
  background-color: #87AC99;
  line-height: 1.5em;
  letter-spacing: 0.3px;
  color: #000A05;
  height: 500px;
  overflow: auto;
  background-image: url("images/pixel-weave.png");
}
.pc-tab section div h2 {
  margin: 0;
  letter-spacing: 1px;
  color: #000A05;
  text-align: center;
}
.pc-tab section div .gallery {
  overflow: visible;
  border: 0px;
  display: flex;
  flex-direction: row;
  flex-grow: auto;
  margin: 0;
  padding: 0;
  height: auto;
}

#tab1:checked ~ nav .tab1 label,
#tab2:checked ~ nav .tab2 label,
#tab3:checked ~ nav .tab3 label,
#tab4:checked ~ nav .tab4 label {
  background-color: #87AC99;
  background-image: url("images/pixel-weave.png");
  color: #000A05;
  position: relative;
}
#tab1:checked ~ nav .tab1 label:after,
#tab2:checked ~ nav .tab2 label:after,
#tab3:checked ~ nav .tab3 label:after,
#tab4:checked ~ nav .tab4 label:after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  background: #87AC99;
  left: 0;
  bottom: -1px;
}

    #transindie{
        width: 50%;
        margin-bottom: 10px;
    }

@media only screen and (max-width: 800px) {
  .pc-tab {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
  }
  .pc-tab nav {
    height: auto;
  }
  .pc-tab ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .pc-tab ul li {
    flex-direction: row;
    width: 50%;
  }
  .pc-tab ul li label {
    float: left;
    padding: 15px 25px;
    border: 1px solid #004B25;
    background: #007439;
    color: #000A05;
    width: auto;
    font-family: Decoder;
    font-size: small;
    border-radius: 20px 20px 0px 0px;
  }
  .pc-tab ul li label:hover {
    background: #25955C;
  }
  .pc-tab ul li label:active {
    background: #87AC99;
  }
    #transindie{
        width: 80%;
        margin-bottom: 10px;
    }
}

/*# sourceMappingURL=games.css.map */