body {
	margin: 0 auto;
	font-family: Verdana, Geneva, sans-serif;
	background-color: rgba(220, 188, 255, 0.06);
}

.button {
	color: #ffffff;
	float: left;
	font-size: 20px;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	margin-top: -0.5em;
	margin-right: 1em;
	background: #6cb5e6;
	background-image: -webkit-linear-gradient(to bottom, #ea80f5, #4129b9);
	background-image: -moz-linear-gradient(to bottom, #ea80f5, #4129b9);
	background-image: linear-gradient(to bottom, #ea80f5, #4129b9);
	padding: 8px 20px;
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;	
	font-size: 1em;
	-moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
	cursor: pointer;
	text-shadow: 1px 1px 3px #c7c7c7;
	-webkit-box-shadow: 0px 1px 3px #666666;
	-moz-box-shadow: 0px 1px 3px #666666;
	box-shadow: 0px 1px 3px #666666;
}

.button:hover {
	background: #85c8f2;
	background-image: -webkit-linear-gradient(to bottom, #fbbeff, #cb34db);
	background-image: -moz-linear-gradient(to bottom, #fbbeff, #cb34db);
	background-image: linear-gradient(to bottom, #fbbeff, #cb34db);
	text-decoration: none;
}

#startOver {
	font-size: 0.7em;
	padding: 6px 16px;
	position: absolute;
	bottom: -8px;
	right: 60px;
}

#title {
	font-family: Riffic;
	letter-spacing: 1px;
	font-size: 23px;
}

#titleBottom {
    font-family: Riffic;
    letter-spacing: 1px;
    font-size: 23px;
    float: right;
    color: white;
    text-decoration: none;
}

.main {
	display: table;
    table-layout: fixed;
	margin-top: 8px;
	margin-bottom: 8px;
	padding: 20px;
	box-shadow: 0px 0px 1px 0px rgba(0, 255, 219, 0.65), 0px 0px 5px 0px rgba(200, 46, 122, 0.6),
		0px 0px 1px 0px rgba(0, 255, 219, 0.65), 0px 0px 5px 0px rgba(200, 46, 122, 0.6);
}

.main < div {
	display: table-cell;
}

.main h2 {
	font-family: Riffic;
}

.m-first {
	float: left;
	width: 48%;
}

.m-second {
	float: right;
	width: 48%;
}

.container {
	max-width: 960px;
	min-height: 443px;
	margin: 0 auto;
	background-color: rgba(220, 188, 255, 0.03);
}

footer {
	padding: 20px;
	background-image: -webkit-linear-gradient(to top, #3099cb, #6ed1ff);
	background-image: -moz-linear-gradient(to top, #3099cb, #6ed1ff);
	background-image: -o-linear-gradient(to top, #3099cb, #6ed1ff);
	background-image: linear-gradient(to top, #3099cb, #6ed1ff);
    clear: both;
    position: relative;
    z-index: 9;
    height: 3em;
}

@font-face {
	font-family: "Riffic";
	src: url('../webfontkit-riffic/rifficfree-bold-webfont.woff');
}

/* Puzzle */

.game {
	margin: 0 auto;
	height: 480px;
	width: 640px;
}

#canvas {
	border: 1px ridge grey;
}	

.completed {
	font-family: Riffic;
	font-size: 20px;
	position: relative;
	width: 100%;
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}

.completed p {
	position: absolute;
	text-align: center;
	width: 100%;
	bottom: 0px;
	color: rgba(200, 46, 122, 0.6);
	text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
}

.completed img {
	border: 10px solid #f0f0f0;
	border-bottom: 45px solid #f0f0f0;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 255, 219, 0.65), 0px 0px 40px 0px rgba(200, 46, 122, 0.6);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0, 255, 219, 0.65), 0px 0px 40px 0px rgba(200, 46, 122, 0.6);
	box-shadow: 0px 0px 10px 0px rgba(0, 255, 219, 0.65), 0px 0px 40px 0px rgba(200, 46, 122, 0.6);
}

.completed:hover {
	-webkit-transform: scale(1.08);
	-moz-transform: scale(1.08);
	-o-transform: scale(1.08);
	-ms-transform: scale(1.08);
	transform: scale(1.08);
}

.puzzle-img {
	display: none;
}

/* End Puzzle */


/* Contact form */

#nameErr {
	color: red;
	font-size: 0.8em;
	font-style: italic;
}

#messErr {
	color: red;
	font-size: 0.8em;
	font-style: italic;
}

#contactErr {
	color: red;
	font-size: 0.8em;
	font-style: italic;
}

form {
	width: 60%;
	background: rgba(102, 220, 255, 0.09);
}

form label {
	display: inline-block;
	width: 9em;
	vertical-align: top;
	margin-right: 10px;
}

#submitButton {
	color: #ffffff;
	font-size: 20px;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	background: #6cb5e6;
	background-image: -webkit-linear-gradient(top, #6cb5e6, #2980b9);
	background-image: -moz-linear-gradient(top, #6cb5e6, #2980b9);
	background-image: linear-gradient(to bottom, #6cb5e6, #2980b9);
	margin-bottom: 15px;
	margin-left: 40%;
	padding: 8px 20px;
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;	
	font-size: 1em;
	-moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
	cursor: pointer;
	text-shadow: 1px 1px 3px #c7c7c7;
	-webkit-box-shadow: 0px 1px 3px #666666;
	-moz-box-shadow: 0px 1px 3px #666666;
	box-shadow: 0px 1px 3px #666666;

}

#submitButton:hover {
	background: #85c8f2;
	background-image: -webkit-linear-gradient(top, #85c8f2, #3498db);
	background-image: -moz-linear-gradient(top, #85c8f2, #3498db);
	background-image: linear-gradient(to bottom, #85c8f2, #3498db);
	text-decoration: none;
}

#phone:focus {
	box-shadow: 5px 5px 5px #D9EDFF;
}

#mail:focus {
	box-shadow: 5px 5px 5px #D9EDFF;
}

/* End Contact form */


/* Video player */

#vid_frame {
	border: none;
}

.video-list-container {
	width: 92%;
	overflow: hidden;
	margin-top: 20px;
	margin-left:4%;
	padding-bottom: 20px;
}

.video-list {
	width: 1344px;
	position: relative;
	top:0;
	left: 0;
}

.video {
	display: block;
	width: 148px;
	height: 148px;
	float: left;
	margin: 0;
	padding: 10px;
}

.thumb {
	overflow:hidden;
	height: 84px;
}

.thumb img {
	width: 100%;
	position: relative;
	top: -13px;
	cursor: pointer;
}

.video .description {
	color: #21A1D2;
	font-size: 1em;
	margin-top:5px;
	cursor: pointer;

}

.video-container {
	position: relative;
	padding-bottom: 52%;
	padding-top: 30px; 
	height: 0; 
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-top: 10px;
}

.arrows {
	position:relative;
	width: 100%;
}

.arrow-left {
	color: #fff;
	position: absolute;
	background: #777;
	padding: 15px;
	left: -5px;
	top: -130px;
	z-index: 99;
	cursor: pointer;
}

.arrow-right {
	color: #fff;
	position: absolute;
	background: #777;
	padding: 15px;
	right: -5px;
	top: -130px;
	z-index:100;
	cursor: pointer;
}

/* End Video Player */


/* jssor slider bullet navigator skin 05 css */
/*
.jssorb05 div           (normal)
.jssorb05 div:hover     (normal mouseover)
.jssorb05 .av           (active)
.jssorb05 .av:hover     (active mouseover)
.jssorb05 .dn           (mousedown)
*/
.jssorb05 {
	position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
	position: absolute;
	/* size of bullet elment */
	width: 16px;
	height: 16px;
	background: url('../img/b05.png') no-repeat;
	overflow: hidden;
	cursor: pointer;
}
.jssorb05 div { background-position: -7px -7px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

/* jssor slider arrow navigator skin 22 css */
/*
.jssora22l                  (normal)
.jssora22r                  (normal)
.jssora22l:hover            (normal mouseover)
.jssora22r:hover            (normal mouseover)
.jssora22l.jssora22ldn      (mousedown)
.jssora22r.jssora22rdn      (mousedown)
*/
.jssora22l, .jssora22r {
	display: block;
	position: absolute;
	/* size of arrow element */
	width: 40px;
	height: 58px;
	cursor: pointer;
	background: url('../img/a22.png') center center no-repeat;
	overflow: hidden;
}
.jssora22l { background-position: -10px -31px; }
.jssora22r { background-position: -70px -31px; }
.jssora22l:hover { background-position: -130px -31px; }
.jssora22r:hover { background-position: -190px -31px; }
.jssora22l.jssora22ldn { background-position: -250px -31px; }
.jssora22r.jssora22rdn { background-position: -310px -31px; }

/* end jssor slider arrow navigator skin 22 css */

#map {
	width: 100%;
	height: 600px;
}