html, body{margin:0; height:100%; color: #00535E;}
body{background:url(../img/img_fondo.png)#fff8f0; background-repeat: no-repeat;  font:16px sovba-1,sovba-2,sans-serif;}

h1, h2{margin:0; padding:12px 0;}
h1{font-size:29px; line-height: 60px; /*text-shadow:0.5px 0.5px 0.5px #000014;*/}
h2{ font-size:24px; line-height: 40px;}


select{
	background:#002921;
	border:none; -webkit-appearance:none;
	color:#00BB96;
	position: relative;
}

select:hover{color:#00BB96;}
select:focus{outline:none;}
option{
	border-bottom:1px solid #004D3D;
	background:none;
	font-weight:normal;
	font-size:16px;
	color:#00BB96;
}
option:selected{font-weight:bold; color:#00BB96;background:#002921;}
option:hover{color:#008066; background:#002921;}
option:disabled{color:#00614E; background:#002921;}

button{
	background-color:#002921;
	background-image:-webkit-linear-gradient(top, #008066, #00614E);
	background-image:-moz-linear-gradient(top, #008066, #00614E);
	background-image:-ms-linear-gradient(top, #7008066, #00614E);
	border: 1px solid #002921;
	border-bottom: 1px solid #002921;
	border-radius: 6px;
	-webkit-box-shadow:inset 0 1px 0 0 #001A14;
	box-shadow:inset 0 1px 0 0 #001A14;
	color: #00614E;
	font:18px/12px sovba-1,sovba-2,sans-serif;
	letter-spacing: 2px;
	width: 128px;
	padding: 6px 0;
	text-align: center;
	/*text-shadow: 0 -1px 0 #001A14;*/
	cursor: pointer;
}
button:hover{
    background-color:#background:#002921;;
    background-image:-webkit-linear-gradient(top, #008066, #00614E);
    background-image:-moz-linear-gradient(top, #008066, #00614E);
    background-image:-ms-linear-gradient(top, #008066, #00614E);
    -webkit-box-shadow:inset 0 1px 0 0 #001A14;
    box-shadow:inset 0 1px 0 0 #001A14;
    color: #008066;
}
button:active{
    border: 1px solid #008066;
    border-bottom: 1px solid #008066;
    -webkit-box-shadow:inset 0 0 8px 4px #008066, 0 1px 0 0 #00614E;
    box-shadow:inset 0 0 8px 4px #008066, 0 1px 0 0 #00614E;
    color: #00BB96;
}

#game-area{overflow:hidden; margin: 0 auto;}
#cards {
	display: block;
}

article{width:170px; height:240px; float:left; position:relative;}
.done{opacity:0.33; -moz-transition:opacity 0.4s ease-in-out; -webkit-transition:opacity 0.4s ease-in-out; -ms-transition:opacity 0.4s ease-in-out;}

div{
	margin:auto;
	border:8px solid #00BB96;
	position:absolute; top:0;
	bottom:0;
	left:0;
	right:0;
	background:url(../img/f.png) center center repeat #00BB96;
	border-radius:8px;
	-webkit-box-shadow:0px 0px 2px 2px rgba(0, 26, 20, 0.6);
	box-shadow:0px 0px 2px 2px rgba(0, 26, 20, 0.6);
	-moz-transition:width 0.2s ease-out;
	-webkit-transition:width 0.2s ease-out;
	-ms-transition:width 0.2s ease-out; cursor:pointer;
}
.done div, .used div, .hold div{cursor:default;}
.flipped{
	-moz-transition:width 0.2s ease-in; -webkit-transition:width 0.2s ease-in; -ms-transition:width 0.2s ease-in;
}

.button-txt{
	background-color:#00D9A1;
	background-image:-webkit-linear-gradient(top, #00D9A1, #00445C);
	background-image:-moz-linear-gradient(top, #00D9A1, #00445C);
	background-image:-ms-linear-gradient(top, #00D9A1, #00445C);
	border: 3px solid #00D9A1;
	border-radius: 1em;
	box-shadow: 0 1px 4px 0 #001A14;
	color: #FFF;
	display: inline-block;
	margin: 10px 10px 20px 10px !important;
	padding: 4px 20px !important;
	text-align: center;
	vertical-align: middle;
}

.button-txt:hover{
	background-color:#00445C;
	background-image:-webkit-linear-gradient(top, #00445C, #00D9A1;
	background-image:-moz-linear-gradient(top, #00445C, #00D9A1);
	background-image:-ms-linear-gradient(top, #00445C, #00D9A1;
}

/*@media screen and (-webkit-min-device-pixel-ratio:0){
	div{-webkit-transition:-webkit-transform 0.2s ease-out;}
	.flipped{width:80px; -webkit-transition:-webkit-transform 0.2s ease-in; -webkit-transform:rotateY(90deg);}
}*/

@media (max-aspect-ratio:1/1){
	h1, h2{float:left; padding:12px 1%; width:31%;}
	h1{line-height:48px;}
	h2{line-height:36px;}

	#levels{width: 142px;}
	#levels:before{left:79px; top:19px;}
	#levels:after{left:133px; top:26px;}

	#game-area{clear: both;}
}
@media (min-aspect-ratio:1/1){
	#best{
		margin: 0 0 0 90px;
	}
}
@media (max-width:479px){
	h1, h2{padding-top:8px; padding-bottom:8px;}
	h1{line-height:32px; font-size:18px;}
	h2{line-height:24px; font-size:16px;}

	button{padding:4px; width:96px; margin:0; font-size:16px; line-height:10px;}

	#levels:before{left:54px; top:8px; height:18px; width:64px;}
	#levels:after{left:96px; top:13px;}
	select{font-weight:normal; font-size:16px; line-height:12px; width: 64px;}
}