@-webkit-keyframes highlight {
0% { color: #999; }
50% { color: #fff; }
100% { color: #999; }
}

body, a, a:visited, a:active, a:hover {
color: #ddd;
}

.page {
font-size: 1.3em;
}

abbr {
border-bottom: 1px dotted #aaa;
}

.information p a {
color: #ff6;
}

.information p a:hover {
color: #fff;
text-decoration: none;
}

footer {
padding: 5px 5px 5px;
opacity: 0.75;
color: #ccc;
}

/*@end */

.page {
margin: 1px 0 0;
padding: 0 0 10px;
background: repeat 50% 50%;

box-shadow: rgba(0,0,0,0.5) 0 1px 0;
-webkit-box-shadow: rgba(0,0,0,0.5) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,0.5) 0 1px 0;
}

.gameboard {
width: 546px;
height: 546px;
margin: 0 auto 5px;
}

.gameboard {
position: fixed;
margin-left: -210px;
}

.gameboard-reset {
right: -546px;
}

.gameboard ul {
width: 546px;
height: 546px;

-webkit-transition-property: all;
-webkit-transition-duration: 0.5s;

padding: 3px 0 0 3px;
background: transparent;

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

border: 1px solid rgba(255,255,255,0.2);

box-shadow: rgba(0,0,0,0.6) 0 0 2px;
-webkit-box-shadow: rgba(0,0,0,0.6) 0 0 2px;
-moz-box-shadow: rgba(0,0,0,0.6) 0 0 2px;
}

/*Browsers smaller than 960 pixels wide iPad Portrait Mode*/

@media screen and (max-width: 960px) {

.information {
position: relative;
margin: 0 auto;
overflow: auto;
}

h1,
.information {
width: 360px;
text-align: left;
}

.information p {
float: left;
display: inline;
width: 260px;
margin-right: 40px;
}

.gameboard .win {
margin-top: 50%;
margin-left: 5%;
width: 300px;
height: 40px;
position: absolute;
right: 0;
display: none;
}
}

/*Browsers bigger than 960px wide _AND_ (i)Phones*/

@media screen and (min-width: 600px), screen and (max-width: 546px) {
h1 {
width: auto;
}

.information {
width: 258px;
margin: 0 auto;
}
}

/*Browsers bigger than 960px wide Watch the cascade!*/

@media screen and (min-width: 600px) {

.page {
position: relative;
top: 10px;
min-height: 640px;
min-width: 600px;
margin: 0;
}

.information {
position: absolute;
margin: 0 10px 10px;
height: 600px;

text-shadow: 0 -1px 0 rgba(0,0,0,0.9);
}

.gameboard {
padding: 10px 0 0 250px;
}
}

/*(i)Phone */

@media screen and (max-width: 546px) {

body,
.page {
margin: 0 !important;
padding: 0 !important;
}

.page {
overflow: hidden;
}

.gameboard {
width: 546px;
height: 546px;
margin: 0 auto 10px;

overflow: visible;
}

.gameboard ul {
margin: -100px -100px;

-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);

/*-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0; */
}

img {
display: none !important;
}

footer {
display: none;
}
}

/* @group Game Elements */

.card {
position: relative;
width: 86px;
height: 86px;
margin: 0 5px 5px 0;
float: left;
display: inline;

-webkit-perspective: 500;
-webkit-transition-property: all;
-webkit-transition-duration: 0.5s;
}

.card span {
position: absolute;
top: 0;
left: 0;
display: block;
width: 86px;
height: 86px;

-webkit-transition-property: transform;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;

-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;

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

box-shadow: #000 0 1px 2px;
-webkit-box-shadow: #000 0 1px 2px;
-moz-box-shadow: rgba(0,0,0,0.5) 0 1px 2px;
}
.card span {
-webkit-transform: rotateY(0deg);

background: url(../imgs/verso.png) no-repeat 50% 50%;
-webkit-background-size: 86px 86px;

z-index: 900;
}

.epic-win .card span {
background-image: url(../imgs/cartav.png);
}

.card span.back {
-webkit-transform: rotateY(-180deg);

background: url(../imgs/carta01.png) no-repeat 50% 50%;
z-index: 800;
}

.card-selected span {
-webkit-transform: rotateY(180deg);

height: 86px;
width: 86px;

-webkit-background-size: 98px 98px;

border-radius: 14px;
-webkit-border-radius: 14px;

box-shadow: #333 0 2px 4px;
-webkit-box-shadow: #333 0 2px 4px;
}

.card-selected span.back {
-webkit-transform: rotateY(0deg);

z-index: 1000;
}

.card-alt span {
-webkit-transform: rotateX(0deg);
}

.card-alt span.back {
-webkit-transform: rotateX(-180deg);
}

.card-alt.card-selected span {
-webkit-transform: rotateX(180deg);
}

.card-alt.card-selected span.back {
-webkit-transform: rotateX(0);
}

.card-1 span.back {background-image: url(../imgs/carta01.png); }
.card-2 span.back {background-image: url(../imgs/carta02.png); }
.card-3 span.back {background-image: url(../imgs/carta03.png); }
.card-4 span.back {background-image: url(../imgs/carta04.png); }
.card-5 span.back {background-image: url(../imgs/carta05.png); }
.card-6 span.back {background-image: url(../imgs/carta06.png); }
.card-7 span.back {background-image: url(../imgs/carta07.png); }
.card-8 span.back {background-image: url(../imgs/carta08.png); }
.card-9 span.back {background-image: url(../imgs/carta09.png); }
.card-10 span.back {background-image: url(../imgs/carta10.png); }
.card-11 span.back {background-image: url(../imgs/carta11.png); }
.card-12 span.back {background-image: url(../imgs/carta12.png); }
.card-13 span.back {background-image: url(../imgs/carta13.png); }
.card-14 span.back {background-image: url(../imgs/carta14.png); }
.card-15 span.back {background-image: url(../imgs/carta15.png); }
.card-16 span.back {background-image: url(../imgs/carta16.png); }
.card-17 span.back {background-image: url(../imgs/carta17.png); }
.card-18 span.back {background-image: url(../imgs/carta18.png); }

.gameboard-alt1 ul {
}
.gameboard-alt1 ul .card {
}
.gameboard-alt2 ul {
}
.gameboard-alt2 ul .card {
}

-webkit-animation-name: highlight;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;

text-shadow: rgba(0,0,0,0.5) 0 -1px 0;
-webkit-text-shadow: rgba(0,0,0,0.5) 0 -1px 0;
}
/* @end */