* {
	margin:0;
	padding:0;
}

@font-face {
    font-family: 'ciutadella_runbold_italic';
    src: url('../fonts/ciutadella_run-bold_italic-webfont.eot');
    src: url('../fonts/ciutadella_run-bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ciutadella_run-bold_italic-webfont.woff2') format('woff2'),
         url('../fonts/ciutadella_run-bold_italic-webfont.woff') format('woff'),
         url('../fonts/ciutadella_run-bold_italic-webfont.ttf') format('truetype'),
         url('../fonts/ciutadella_run-bold_italic-webfont.svg#ciutadella_runbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*body {
	overflow:hidden;
}*/
body {
	font:12px 'ciutadella_runbold_italic';
}
#container {
	width:940px;
	position:relative;
}
.absolute {
	position:absolute;
}
.button {
	width:230px;
	height:40px;
	background:url("../img/bg/trans.png");
}
#startButtonTime,
#startButtonClicks {
	height: 55px;
    left: 45px;
    top: 340px;
    width: 310px;
}
#startButtonClicks {
    top: 409px;
}
#share_home {
	bottom:33px;
}
#memory #share_home,
#feedback #share_home {
	right:0;
}
#feedbackText {
	bottom:623px;
	position:absolute;
	left:0;
	padding:0 80px;
	font-size:40px;
	color:#FFF;
	text-align:center;
}
#restart,
#stop {
	width:277px;
	height:60px;
	left:177px;
	top:627px;
}
#stop {
	left:488px;
}
#timeText,
#clicksText {
	position:absolute;
	top:66px;
	left:700px;
	width:190px;
	font-size:50px;
	text-align:center;
	color:#FFF;
}
#timeText {
	padding-left:37px;
	text-align:left;
}
.game {
	left: 50px;
    position: absolute;
    top: 240px;
}

.information {
	padding: 40px 20px 20px;
	z-index: 20;
}

.gameboard {
	width: 730px;
	height: 730px;
}

.gameboard {
	position: relative;
}

	.gameboard-reset {
		right: -730px;
	}
	
	.gameboard ul {
		width: 730px;
		height: 730px;
		
		-webkit-transition-property: all;
		-webkit-transition-duration: 0.5s;
	}
	





/* @group Game Elements */


.card {

	cursor:pointer;
	position: relative;

	width: 161px;
	height: 161px;
	
	margin: 0 20px 20px 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: 157px;
		height: 157px;
		
		-webkit-transition-property: transform;
		-webkit-transition-duration: 0.3s;
		-webkit-transition-timing-function: ease-out;
		
		-webkit-backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;
		
	}
	.card span {
		-webkit-transform: rotateY(0deg);
		
		background: url(../img/memory/empty.jpg) no-repeat 50% 50%;
		-webkit-background-size: 131px 131px;
		
		z-index: 900;
	}
	
		.epic-win .card span {
			background:yellow;
		}
	
	.card span.back {
		-webkit-transform: rotateY(-180deg);
		
		background: url(../img/memory/1.jpg) no-repeat 50% 50%;
		
		z-index: 800;
	}

	.card-selected span {
		-webkit-transform: rotateY(180deg);
		
		height: 157px;
		width: 157px;
		
		top: 0px;
		left: 0px;
		
		-webkit-background-size: 157px 157px;

	}
	
	.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(../img/memory/1.jpg); }
	.card-2 span.back { 	background-image: url(../img/memory/2.jpg); }
	.card-3 span.back { 	background-image: url(../img/memory/3.jpg); }
	.card-4 span.back { 	background-image: url(../img/memory/4.jpg); }
	.card-5 span.back { 	background-image: url(../img/memory/5.jpg); }
	.card-6 span.back { 	background-image: url(../img/memory/6.jpg); }
	.card-7 span.back { 	background-image: url(../img/memory/7.jpg); }
	.card-8 span.back { 	background-image: url(../img/memory/8.jpg); }
	
	.gameboard-alt1 ul {
		-webkit-transform: rotate(90deg);
	}
	
		.gameboard-alt1 ul .card {
			-webkit-transform: rotate(-90deg);
		}
	
	.gameboard-alt2 ul {
		-webkit-transform: rotate(-90deg);
	}
		
		.gameboard-alt2 ul .card {
			-webkit-transform: rotate(90deg);
		}
		
	.gameboard .win {
		width: 300px;
		height: 40px;
		
		position: absolute;
		top: 50%;
		right: 0;
		
		display: none;
		
		-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 */

#manager .box {
	width:29%;
	margin:2%;
	background:#f9f9f9;
	border:1px solid #EEE;
	border-radius:4px;
	font-size:12px;
	padding:30px;
	box-sizing:border-box;
	text-align:center;
	float:left;
}
#manager .error {
	padding:10px;
	background:#F00;
	color:#FFF;
	margin:20px 0;
}
#manager .info {
	padding:10px;
	background:green;
	color:#FFF;
	margin:20px 0;
}
#manager .box .file {
	padding:10px;
	background:#F5F5F5;
	border-bottom:1px solid #F0F0F0;
	text-align:left;
	overflow:hidden;
	margin:10px 0 0;
}
#manager .box .submit {
	margin:10px 0 0;
	display:block;
	padding:10px;
}
#manager .box h1 {
	font-size:16px;
	margin:0 0 20px;
	padding:0;
}
#manager .box h2 {
	font-size:16px;
	font-weight:normal;
	margin:20px 0 10px;
}

.card span.back {
    background-size: 100% 100%;
}












.gameboard {
	width: 900px;
	height: 900px;
}

	.gameboard-reset {
		right: -900px;
	}
	
	.gameboard ul {
		width: 900px;
		height: 900px;
	}


.card {

	width: 200px;
	height: 200px;
	
	margin: 0 17px 17px 0;
	
}

	.card span {
		
		width: 192px;
		height: 194px;
		overflow:hidden;
		border-radius:10px;
		
	}
	.card span {
		
		background: url(../img/memory/empty.wide.png) no-repeat 50% 50%;
		-webkit-background-size: 195px 194px;

	}

	.card-selected span {
	
		height: 195px;
		width: 195px;
	
		-webkit-background-size: 195px 195px;

	}

		
	.gameboard .win {
		width: 300px;
		height: 40px;
		
		position: absolute;
		top: 50%;
		right: 0;
		
		display: none;
		
		-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;
	}
	
@media (max-width:600px) {
	.iframebody {
		zoom:.33;
	}
}
@media (max-width:700px) {
	.iframebody {
		zoom:.38;
	}
}