@charset "utf-8";

/* CSS Document */

* {margin:0; padding:0;font-family: 'Roboto Condensed', sans-serif;}
html {height: 100%;}
body {margin:0; padding:0;height:100%;background-color:#611D1D;text-align:center;color:#333;font-size: 62.5%;}
div.clear {clear:both;}

#wrap {width:100%;height:100%;background-color:#611D1D;}

#sair{float:right;margin-top:1%;cursor:pointer;display:none;}

.titulo{position:relative;width:64%;height:5%;margin:0 auto;top:1%;}

#contem{position:relative;margin:0 auto;width:88.95478%;height:100%;}

.intro{height:90%;}

.inicio{position:relative;width:42%;margin:0 auto;top:20%;cursor:pointer;}	
#facil{float:left;}	
#dificil{float:right;margin-top:5%;}

.btnAjuda{position:relative;width:8%;margin:0 auto;top:30%;cursor:pointer;}
.contemAjuda{position:absolute;top:30%;bottom:0;right:0;left:0;z-index:4000;display:none;}
#fecharAjuda{float:right;cursor:pointer;z-index:5000;}
.txtAjuda{width:95%;margin:0 auto;margin-top:1%;padding:1%;background-color:#fff;color:#519d8e;font-weight:bold;font-size:18px;border:10px solid #e885b7;border-radius:0.5em;}

img{max-width:100%;height:auto;}

.jogo{position:relative;width:100%;height:50%;margin:0 auto;top:5%;display:none;}

#fundo{position:relative;width:70%;height:50%;margin:0 auto;}

.cartas{position:relative;cursor:pointer;width:100%;height:100%;}

.template{display:none;}

.panel {position:relative;float:left;width:25%;height:100%;display:none;}
.panel .front {position:relative;width:100%;height:100%;top:22%;bottom:0;margin:auto;z-index:900;backface-visibility:hidden;}
.panel.flip .front {display:none;}
.panel .back {position: absolute;width:100%;height:100%;top:21%;left:-1%;z-index:800;display:none;}
.panel.flip .back {display:block;z-index:1000;}

.popup{position:absolute;width:100%;top:15%;z-index:2000;display:none;}
.botoesContainer{width:18%;margin:0 auto;}
.novamente{float:left;width:40%;cursor:pointer;}
.voltar{float:right;width:40%;cursor:pointer;}

 @media screen and (max-width: 768px) {	
	#sair{width:10%;}
	.titulo{clear:right;width:100%;}
	.inicio{width:65%;}
	.btnAjuda{width:15%;}
	.jogo{height:100%;}
	#fundo{height:20%;}
	.panel{width:50%;}
	.novamente{width:50%;}
	.voltar{width:50%;}
}	

@media screen and (max-width: 414px) {
	.intro{height:85%;}
	.btnInicio{width:40%;}
	#ok{width:55%;}
	.botoesContainer{width:30%;}
}

@media screen and (max-width: 320px) {	
	.contemAjuda{width:90%;top:18%;}
	.txtAjuda{font-size:15px;}
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
	.titulo{clear:none;width:80%;}
}

@media screen and (max-width: 736px) and (orientation: landscape) {	
	.btnInicio{width:20%;}
	.panel{width:25%;}
	#fundo{width:100%;height:35%;}
	#sair{width:8%;}
	.popup{top:21%;}
	#ok{width:28%;}	
}

@media screen and (max-width: 568px) and (orientation: landscape) {	
	.contemAjuda{top:11%;}
	.txtAjuda{font-size:16px;}
}