html, body {
	font-family: 'cwg_sansregular', Futura, sans-serif;
	color: #948B89;
	background-color: #edeae8;
	height: 100%;
	margin: 0em;
  	overflow: hidden;
  	position: relative;
}

header {
	margin: 1em 2em;
    width: 100%;
}

h1 {
	font-size: 3.6em;
	margin: 0;
}

.logo {
	position: fixed;
	top: 1em;

}

//ANIMATION

@-webkit-keyframes pulse {
  0% { -webkit-transform: scale3d(1, 1, 1); }
  50% { -webkit-transform: scale3d(1.1, 1.1, 1.1); }
  100% { -webkit-transform: scale3d(1, 1, 1); }
}
@-moz-keyframes pulse {
  0% { -moz-transform: scale3d(1, 1, 1); }
  50% { -moz-transform: scale3d(1.1, 1.1, 1.1); }
  100% { -moz-transform: scale3d(1, 1, 1); }
}
@-o-keyframes pulse {
  0%   { -o-transform: scale3d(1, 1, 1); }
  50% { -o-transform: scale3d(1.1, 1.1, 1.1); }
  100%   { -o-transform: scale3d(1, 1, 1); }
}
@keyframes pulse {
  0% { transform: scale3d(1, 1, 1); }
  50% { transform: scale3d(1.1, 1.1, 1.1); }
  100% { transform: scale3d(1, 1, 1); }
}

.pulse-anim {
  -webkit-animation: pulse 4s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); /* Safari 4+ */
  -moz-animation:    pulse 4s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); /* Fx 5+ */
  -o-animation:      pulse 4s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); /* Opera 12+ */
  animation:         pulse 4s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); /* IE 10+, Fx 29+ */
}
// END OF ANIMATION


// COUNTDOWN ANIMATION

#stage {
    position: relative;
}

.countdown-30 {
	position: absolute;
	bottom: 1em;
	left: 0;
	width:100%;
	height: 0.25em;
	background: #F04F25;

	-webkit-animation: countdown-30 30s forwards linear; /* Safari 4+ */
  	-moz-animation:    countdown-30 30s forwards linear; /* Fx 5+ */
  	-o-animation:      countdown-30 30s forwards linear; /* Opera 12+ */
  	animation:         countdown-30 30s forwards linear; /* IE 10+, Fx 29+ */
}

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

@-webkit-keyframes countdown-30 {
    0% { -webkit-transform:  translate(-100%, 0px); background: #CDC7C5; }
  100% { -webkit-transform:  translate(0px, 0px); background: #F04F25; }
}
@-moz-keyframes countdown-30 {
  0% { -moz-transform:  translate(-100%, 0px); background: #CDC7C5; }
  100% { -moz-transform:  translate(0px, 0px); background: #F04F25; }
}
@-o-keyframes countdown-30 {
  0% { -o-transform:  translate(-100%, 0px); background: #CDC7C5; }
  100% { -o-transform:  translate(0px, 0px); background: #F04F25; }
}
@keyframes countdown-30 {
  0% { transform:  translate(-100%, 0px); background: #CDC7C5; }
  100% { transform:  translate(0px, 0px); background: #F04F25; }
}

// END OF COUNTDOWN

#stats {
    width: 100%;
    bottom: 8px;
}

#credits {
    margin-bottom: 1.4em;
}

@-webkit-keyframes change-to-red {
    0% { color: #CDC7C5; }
  100% { color: #F04F25; }
}
@-moz-keyframes change-to-red {
  0% { color: #CDC7C5; }
  100% { color: #F04F25; }
}
@-o-keyframes change-to-red {
  0% { color: #CDC7C5; }
  100% { color: #F04F25; }
}
@keyframes change-to-red {
  0% { color: #CDC7C5; }
  100% { color: #F04F25; }
}

#stats p {
	font-size: 3.5em;
	display: inline-block;
	margin: 0;
	text-align: center;
	/*color: #F04F25;*/
}

.countdown-text {
    -webkit-animation: change-to-red 30s forwards linear; /* Safari 4+ */
    -moz-animation:    change-to-red 30s forwards linear; /* Fx 5+ */
    -o-animation:      change-to-red 30s forwards linear; /* Opera 12+ */
    animation:         change-to-red 30s forwards linear; /* IE 10+, Fx 29+ */
}

.container {
    position: relative;
    // display: inline-flex;
    min-height: 100%;
    vertical-align:bottom;
    margin: 1 2em;
    height:100%;
    width: 100%;
}

#board {
//	display: none;
	  margin: auto;
    top: 2em;
    min-height:100%;
    height:auto !important;
    height:100%;
    z-index: 100;
    position: relative;
    width: 1040px;
    vertical-align: middle;
}

#gameover, #start {
	display: none;
    min-height: 100%;
    vertical-align:middle;
    height:100%;
  	margin: auto;
  	text-align: center;
  	//width: 47em;
}

#start {
	display: none;
  	//width: 22.5em;
}

button {
	font-family: 'cwg_sansregular', Futura, sans-serif;
	color: #fff;
	font-size: 2.5em;
	border: 0;
	height: 7em;
	width: 7em;
  margin-top: 15%;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	background-color: #1abc9c;
	text-decoration: none;
	overflow: hidden;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

button:hover {
	opacity: 0.75;
}
button:focus {
	outline:0;
}

.socialmedia {
  position: relative;
}

a {
	text-decoration: none;
	color: #948B89;}

a:hover {
	opacity: 0.85;
}

footer {
	position: absolute;
	bottom: 0px;
  clear: both;
	margin: 0em;
  width: 100%;
  text-align: center;
  color: #aaa;
  z-index: 100;
}

#jazz {
	width: 3em;
}



// C A R D S

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

em {
	font-style: normal;
}

.slot {
	display: inline-block;
	margin-top: -1.2em;
}

.card {
display: inline-block;
margin: 0.2em 0.7em;
border-radius: 50%;
border: 0.7em solid white;
height: 9em;
width: 9em;
background: #fff;
  -moz-box-shadow:    0px 0px 0.8em rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: 0px 0px 0.8em rgba(0, 0, 0, 0.08);
  box-shadow:         0px 0px 0.8em rgba(0, 0, 0, 0.08);
}


.color1 {
	color: #8BD1C9; //light turquoise
	background-color: #8BD1C9;
}

.color2 {
	color: #26B99A; //dark-sea
}

.color3 {
color: #FCCF1B; //yellow
}

.color4 {
color: #823F98; //violet
}

.color5 {
color: #3A65B0; //dark blue
}

.color6 {
color: #F99D1C; //orange
}

.color7 {
color: #F04F25; //red
}

.color8 {
color: #7BC361; //green
}

.color9 {
color: #0DB1DB; //medium blue
}

.color10 {
color: #B04098; //pink
}

.color11 {
color: #1B8670; //dark green
}

.color12 {
color: #EB778F; //pig
}

.color13 {
color: #B92645; //bordeaux
}

.color14 {
color: #58595B; //dark grey
}

.color15 {
color: #5D4199; //dark violet
}

.card1 {
background: #8BD1C9; //light turquoise
}

.card2 {
background: #26B99A; //dark sea
}

.card3 {
background: #FCCF1B; //yellow
}

.card4 {
background: #823F98; //violet
}

.card5 {
background: #3A65B0; //dark blue
}

.card6 {
background: #F99D1C; //orange
}

.card7 {
background: #F04F25; //red
}

.card8 {
background: #7BC361; //green
}

.card9 {
background: #0DB1DB; //medium blue
}

.card10 {
background: #B04098; //pink
}

.card11 {
background: #1B8670; //dark green
}

.card12 {
background: #EB778F; //pig
}

.card13 {
background: #B92645; //bordeaux
}

.card14 {
background: #58595B; //dark grey
}

.card15 {
background: #5D4199; //dark violet
}

#p0 {
margin-left: 18em;
}
#p2 {
margin-right: 8em;
}
#p8 {
margin-left: 6em;
}

.closed {
	height: 10.4em;
	width: 10.4em;
	border: 0em;
	background: repeating-linear-gradient(
	  135deg,
	  #fff,
	  #fff 0.8em,
	  #D5D2D2 0.8em,
	  #D5D2D2 1.6em
	);
}

.found {
	visibility: hidden;
}

@font-face {
    font-family: 'cwg_sansregular';
    src: url('../fonts/cwg-webfont.eot');
    src: url('../fonts/cwg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/cwg-webfont.woff2') format('woff2'),
         url('../fonts/cwg-webfont.woff') format('woff'),
         url('../fonts/cwg-webfont.ttf') format('truetype'),
         url('../fonts/cwg-webfont.svg#cwg_sansregular') format('svg');
}

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?pjwij3');
	src:url('../fonts/icomoon.eot?#iefixpjwij3') format('embedded-opentype'),
		url('../fonts/icomoon.ttf?pjwij3') format('truetype'),
		url('../fonts/icomoon.woff?pjwij3') format('woff'),
		url('../fonts/icomoon.svg?pjwij3#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-size: 2em;
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-social-twitter:before {
	content: "\e600";
}
.icon-social-facebook:before {
	content: "\e601";
}