@font-face {
    font-family: 'PatrickHandRegular';
    src: url('../fonts/patrickhand-regular.eot');
    src: url('../fonts/patrickhand-regular.eot') format('embedded-opentype'),
         url('../fonts/patrickhand-regular.woff2') format('woff2'),
         url('../fonts/patrickhand-regular.woff') format('woff'),
         url('../fonts/patrickhand-regular.ttf') format('truetype'),
         url('../fonts/patrickhand-regular.svg#PatrickHandRegular') format('svg');
}

html, body {
	margin: 0;
	padding: 0;	
}

body {
	width: 100%;
	height: 100%;
	font-family:"PatrickHandRegular", "Comic Sans MS", cursive;
	font-size: 23px;
}

.gameholder {
	width: 960px;
	height: 600px;
	background: url("../images/bkg.jpg") no-repeat top left #000000;
	margin: 0 auto;
}
.gameholder .slide {
	width: 960px;
	height: 600px;
	position: relative;
	overflow: hidden;
	display: none;
}
.gameholder .btn {
	padding: 10px 15px;
	background-color: #ffffff;
	color: #000000;
	border:3px solid #000000;
	-webkit-box-shadow: -5px 5px 0px 0px rgba(0, 0, 0, 1);
	-moz-box-shadow:    -5px 5px 0px 0px rgba(0, 0, 0, 1);
	box-shadow:         -5px 5px 0px 0px rgba(0, 0, 0, 1);
	cursor: pointer;
}
.gameholder .btn:hover {
	background-color: #efefef;	
}
.gameholder .inbetween {
	text-align: center;
}

.intro {
	background: url("../images/intro.jpg") no-repeat top left transparent;
}

.intro-btn {
	display: none;
	position: absolute;
	bottom: 30px;
	right: 100px;
}

.inbetween-text {
	padding: 10px 15px;
	background-color: #ffffff;
	color: #000000;
	border: 3px solid #000000;
	-webkit-box-shadow: -5px 5px 0px 0px rgba(0, 0, 0, 1);
	-moz-box-shadow: -5px 5px 0px 0px rgba(0, 0, 0, 1);
	box-shadow: -5px 5px 0px 0px rgba(0, 0, 0, 1);
	display: inline-block;
	margin-top: 270px;
}

.slide-text {
	color: #ffffff;
	text-align: center;
	padding: 10px 30px;
	line-height: 25px;
	height: 100px;
	width: 900px;
	display: table;
}
.slide-text a {
	color: #ffffff;
	text-decoration: none;
}
.slide-text a:hover {
	text-decoration: underline;
}
.slide-question {
	color: #ffffff;
	text-align: center;
	font-size: 36px;
	padding: 10px 30px;
	height: 70px;
	line-height: 35px;
	width: 900px;
	display: table;
}
.slide-text div, .slide-question div {
	width: 100%;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}
.slide-opts {
	
}
.slide-left {
	float: left;
	width: 478px;
	text-align: center;
}
.slide-right {
	float: right;
	width: 478px;
	text-align: center;
}

.slide-left .slide-animate, .slide-right .slide-animate {
	width: 478px;
	height: 269px;
	overflow: hidden;
	background-color: #080808;
}

.slide-left .slide-animate .slide-img, .slide-right .slide-animate .slide-img {
	width: 478px;
	height: 269px;
	opacity: 0.8;
	filter: alpha(opacity=80);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}
.slide-left .slide-animate .slide-img.hovered, .slide-right .slide-animate .slide-img.hovered {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1.1);
	transform: scale(1.1); 
}

.slide-center {
	text-align: center;
	margin: 0 auto;
}

.slide-center .slide-animate {
	width: 650px;
	height: 366px;
	overflow: hidden;
	background-color: #080808;
	position:relative;
	left: 50%;
	margin-left: -325px;
}
.slide-center .slide-animate .slide-img {
	width: 650px;
	height: 366px;
}

.slide-center-quest {
	text-align: center;
	margin: 0 auto;
}

.slide-center-quest .slide-animate {
	width: 478px;
	height: 269px;
	overflow: hidden;
	background-color: #080808;
	position:relative;
	left: 50%;
	margin-left: -239px;
}
.slide-center-quest .slide-animate .slide-img {
	width: 478px;
	height: 269px;
}

.slide-answer {
	display: inline-block;
	margin: 25px 15px 0 15px;
	padding: 10px 15px;
	background-color: #ffffff;
	color: #000000;
	border:3px solid #000000;
	-webkit-box-shadow: -5px 5px 0px 0px rgba(0, 0, 0, 1);
	-moz-box-shadow:    -5px 5px 0px 0px rgba(0, 0, 0, 1);
	box-shadow:         -5px 5px 0px 0px rgba(0, 0, 0, 1);
	cursor: pointer;
	line-height:23px;
}
.slide-answer:hover {
	background-color: #efefef;	
}
.special {
	font-size: 20px;
	line-height: 20px;	
}
.slide-share {
	text-align: center;
}

.copy {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	width: 960px;
	color: #666;
	margin: 0 auto;
}

.copyleft {
	width: 400px;
	float:left;
	text-align: left;
}

.copyright {	
	float:right;
	width: 500px;
	text-align: right;
}





.slide01 .slide-left .slide-animate .slide-img { background: url("../images/1.jpg") no-repeat top left #ffffff; }
.slide01 .slide-right .slide-animate .slide-img { background: url("../images/2.jpg") no-repeat top left #ffffff; }
.slide02 .slide-center .slide-animate .slide-img { background: url("../images/3-big.jpg") no-repeat top left #ffffff; }
.slide03 .slide-center .slide-animate .slide-img { background: url("../images/5.jpg") no-repeat top left #ffffff; }
.slide04 .slide-center .slide-animate .slide-img { background: url("../images/6.jpg") no-repeat top left #ffffff; }
.slide05 .slide-center-quest .slide-animate .slide-img { background: url("../images/8.jpg") no-repeat top left #ffffff; }
.slide06 .slide-center .slide-animate .slide-img { background: url("../images/14.jpg") no-repeat top left #ffffff; }
.slide07 .slide-center .slide-animate .slide-img { background: url("../images/9-big.jpg") no-repeat top left #ffffff; }
.slide08 .slide-center-quest .slide-animate .slide-img { background: url("../images/7.jpg") no-repeat top left #ffffff; }
.slide09 .slide-center-quest .slide-animate .slide-img { background: url("../images/3.jpg") no-repeat top left #ffffff; }
.slide10 .slide-center .slide-animate .slide-img { background: url("../images/9-big.jpg") no-repeat top left #ffffff; }
.slide11 .slide-center .slide-animate .slide-img { background: url("../images/10.jpg") no-repeat top left #ffffff; }
.slide12 .slide-center .slide-animate .slide-img { background: url("../images/11a.jpg") no-repeat top left #ffffff; }
.slide13 .slide-center .slide-animate .slide-img { background: url("../images/11b.jpg") no-repeat top left #ffffff; }
.slide14 .slide-center .slide-animate .slide-img { background: url("../images/11c.jpg") no-repeat top left #ffffff; }
.slide15 .slide-center-quest .slide-animate .slide-img { background: url("../images/19.jpg") no-repeat top left #ffffff; }
.slide16 .slide-center-quest .slide-animate .slide-img { background: url("../images/13.jpg") no-repeat top left #ffffff; }
.slide17 .slide-center-quest .slide-animate .slide-img { background: url("../images/16.jpg") no-repeat top left #ffffff; }
.slide18 .slide-center .slide-animate .slide-img { background: url("../images/4.jpg") no-repeat top left #ffffff; }
.slide19 .slide-center-quest .slide-animate .slide-img { background: url("../images/18.jpg") no-repeat top left #ffffff; }
.slide20 .slide-center .slide-animate .slide-img { background: url("../images/22.jpg") no-repeat top left #ffffff; }
.slide21 .slide-left .slide-animate .slide-img { background: url("../images/23.jpg") no-repeat top left #ffffff; }
.slide21 .slide-right .slide-animate .slide-img { background: url("../images/24.jpg") no-repeat top left #ffffff; }
.slide21-1 .slide-center-quest .slide-animate .slide-img { background: url("../images/21.jpg") no-repeat top left #ffffff; }
.slide21-2 .slide-center .slide-animate .slide-img { background: url("../images/20.jpg") no-repeat top left #ffffff; }
.slide22 .slide-center-quest .slide-animate .slide-img { background: url("../images/13.jpg") no-repeat top left #ffffff; }
.slide23 .slide-left .slide-animate .slide-img { background: url("../images/9.jpg") no-repeat top left #ffffff; }
.slide23 .slide-right .slide-animate .slide-img { background: url("../images/26.jpg") no-repeat top left #ffffff; }
.slide24 .slide-center-quest .slide-animate .slide-img { background: url("../images/26.jpg") no-repeat top left #ffffff; }
.slide25 .slide-center .slide-animate .slide-img { background: url("../images/27.jpg") no-repeat top left #ffffff; }
.slide26 .slide-center-quest .slide-animate .slide-img { background: url("../images/28.jpg") no-repeat top left #ffffff; }
.slide27 .slide-center-quest .slide-animate .slide-img { background: url("../images/29.jpg") no-repeat top left #ffffff; }