﻿
#conteudo {width: 890px;text-align: center;margin: 0 auto;position: relative;}
.jogo{ width:890px;height:285px;background-color:#fff661;border-radius:0.8em;position:relative;}
.popup2{display:none;left: 262px;position: absolute;top: 33px;z-index: 10;}
#repetir2{cursor:pointer;}
.cartas{position:absolute;left:34px;top:30px;}
.template{display:none;}
.front{cursor:pointer;}

/* The animation code */
@keyframes nivel {
    0%   {transform: rotate(0deg);}
	33%   {transform: rotate(3deg);}
    66%  {transform: rotate(0deg);}
	100%   {transform: rotate(-3deg);}
}

@keyframes botao {
    0%   {transform: scale(1,1);}
	33%   {transform: scale(1.1,1.1);}
    66%  {transform: scale(1,1);}
	100%   {transform: scale(1.1,1.1);}
}

.panel.flip .action {
  display: none;
}

.panel {
	padding-right: 3px;
	padding-bottom: 22px;
	width: 100px;
	height: 100px;
	position: relative;
	float: left;
	perspective: 600px;
	display:none;
}

.panel .front {
  z-index: 900;
  width: inherit;
  height: inherit;
  transform: rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: all .4s ease-in-out;
}

.panel.flip .front {
  display:none;
}

.panel .back {
  display:none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 800;
  width: inherit;
  height: inherit;
  transition: all .4s ease-in-out;
}

.panel.flip .back {
  z-index: 1000;
  display:block;
}
