/* RICHMEDIA MOBILE */
* {
  box-sizing: border-box;
  font-family: "Roboto", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
}
body {

}

.card {
  width: 20%;
  height: auto;
  display: inline-block;
  margin: 1%;
  cursor: pointer;
  vertical-align: middle;
  padding-top: 24%;
}
.card.open {
    background: transparent;
    background-size: 100%;
}

/* Home Styles */
#home-wrapper {
  position: relative;
}
#home-wrapper .mobile-home-bg1 {
  background: url(../img/mobile-home1.jpg?v2) no-repeat;
  background-size: 100%;
  width: 100%;
  padding-top: 99.33333333%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
#home-wrapper .mobile-home-bg2 {
  background: url(../img/mobile-home2.jpg?) no-repeat;
  background-size: 100%;
  width: 100%;
  padding-top: 99.33333333%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
  transition: all .5s linear;
  visibility: hidden;
}
#home-wrapper .cards-div-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  text-align: center;
  padding: 54% 12% 0;
  pointer-events: none;
}
#home-wrapper .cards-div {
  font-size: 0;
  pointer-events: auto;
}

/* SINGLE PAGE STYLES */
#single-wrapper {
  width: 100%;
  position: relative;
}

#single-wrapper .mobile-single-bg1 {
  background: url(../img/mobile-single1.jpg?v2) no-repeat;
  background-size: 100%;
  width: 100%;
  padding-top: 107.46666667%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
#single-wrapper .mobile-single-bg2 {
  background: url(../img/mobile-single2.jpg?) no-repeat;
  background-size: 100%;
  width: 100%;
  padding-top: 107.46666667%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
  transition: all .5s linear;
  visibility: hidden;
}

#single-wrapper .cards-div-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  text-align: center;
  padding: 19% 12% 0;
  pointer-events: none;
}
#single-wrapper .cards-div {
  font-size: 0;
  pointer-events: auto;
}


/** Flip card style **/
.flip-card {
    background-color: transparent;
    perspective: 1000px;

}
.flip-card-inner {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.5s;
    -webkit-transition: transform 0.5s;


    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

}
.flip-card.hover .flip-card-inner,
.flip-card.selected .flip-card-inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flip-card-back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.flip-card.card {
    background: transparent;
}
.flip-card-inner.card{
    padding: 0;
    margin: 0;
    display: block;
}
.flip-card-front{
    background: url(../img/card.png?) no-repeat;
    background-size: 100%;
}
.card.open{
    margin: 0 !important;
    width: 100%;
    height: 100%;
}

body.game-over .mobile-home-bg2,
body.game-over .mobile-single-bg2 {
    opacity: 1 !important;
    visibility: visible !important;
}
body.game-over .cards-div{
    transition: all .5s linear;
    -webkit-transition: all .5s linear;
    opacity: 0;
    height: 0;
    visibility: hidden;
}