/*Fix page width*/
div#wrapper { min-width:580px; }

/*Fix qtext*/
.qtext { text-align:center; }

/*Fix pghome*/
.pghome { padding-bottom:0px; }
.pghome .qtext { margin-bottom:0px; padding-bottom:0px; }

/*Demo video*/
.video { text-align:center; }
.video video {
  border: 1px solid silver;
  background-color: #F2F2F2;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  cursor:pointer;
}

/*Tapis*/
#qbody_cards table.canvas {
  margin:auto;
  width:480px;
  border-spacing: 10px 10px;
  border-collapse: separate;
  visibility:hidden;
  padding:20px 50px;

  background: #176922;
  background: linear-gradient(to bottom right, #176922 0%, #289e38 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #176922), color-stop(100%, #289e38));
  background: -webkit-linear-gradient(to bottom right, #176922 0%, #289e38 100%);
  background: -moz-linear-gradient(to bottom right, #176922 0%, #289e38 100%);
  background: -o-linear-gradient(to bottom right, #176922 0%, #289e38 100%);
  background: -ms-linear-gradient(to bottom right, #176922 0%, #289e38 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#176922',endColorstr='#289e38',GradientType=0);

  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;

  box-shadow: 1px 2px 5px silver, 0 0 0 0 white inset;
  -webkit-box-shadow: 1px 2px 5px silver, 0 0 0 0 white inset;
  -moz-box-shadow: 1px 2px 5px silver, 0 0 0 0 white inset;
}

#qbody_cards td.hv {
  text-align:center;
  padding:0px;
  border:none;
  position:relative;
  height:105px;
}
#qbody_cards td.hv.checked {
  background-color:transparent;
}
#qbody_cards td.hv input {
  position:absolute;
  left:-9999px;
}


/*Labels*/
#qbody_cards td.hv label {
  font-size:40pt;
  display:block;
  padding:0px;
  width:85px;
  height:105px;
  line-height:115px;
  margin:auto;

  background-color:#F2F2F2;
  background-image: url("front.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 85px 105px;

  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  position:absolute;
  top:0px;
  left:0px;
}

#qbody_cards td.hv label.back {
  background-image: url("back.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 85px 105px;
  z-index: 99;

}

/*No animation*/
#qbody_cards td.hv[data-card=back] label.back { visibility:visible; }
#qbody_cards td.hv[data-card=back] label.front { visibility:hidden; }

#qbody_cards td.hv[data-card=front] label.back { visibility:hidden; }
#qbody_cards td.hv[data-card=front] label.front { visibility:visible; }

/*Animation*/
#qbody_cards td.hv[data-card=front][data-animation=true] label.back {
/*  visibility:visible;*/
  transform: rotateY(0deg);
  animation-duration: 0.2s;
  animation-name: flip-back-close;
  animation-fill-mode: forwards;
}

#qbody_cards td.hv[data-card=front][data-animation=true] label.front {
  transform: rotateY(-90deg);
  animation-duration: 0.2s;
  animation-delay: 0.2s;
  animation-name: flip-front-open;
  animation-fill-mode: forwards;
}

@keyframes flip-back-close {
  from {visibility:visible; transform: rotateY(0deg);}
  to {transform: rotateY(-90deg);}
}
@keyframes flip-front-open {
  from {transform: rotateY(-90dev);}
  to {transform: rotateY(0deg);}
}

/*Stats questions*/
#qtext_qhidden,
#qbody_qhidden {
  display:none;
}
.stats {
  text-align:left;
  font-size:110%;
}