@charset "UTF-8";


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


body {
    font-family: 'PT Sans', sans-serif;
	width:100%; height:100%;

    background: rgb(215, 215, 215);
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
    background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    background:    -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    background:     -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    background:      -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    background:         radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
}

b, strong { font-weight: bold }
i, em { font-style: italic }



/*
    Because the main point behind the impress.js demo is to demo impress.js
    we display a fallback message for users with browsers that don't support
    all the features required by it.

    All of the content will be still fully accessible for them, but I want
    them to know that they are missing something - that's what the demo is
    about, isn't it?

    And then we hide the message, when support is detected in the browser.
*/

.fallback-message {
    font-family: sans-serif;
    line-height: 1.3;

    width: 780px;
    padding: 10px 10px 0;
    margin: 20px auto;

    border: 1px solid #E4C652;
    border-radius: 10px;
    background: #EEDC94;
}

.fallback-message p {
    margin-bottom: 10px;
}

.impress-supported .fallback-message {
    display: none;
}

/* container */
#tmnt-comic {
	margin: 0;
    width: 100%;
    height: 100%;
	background: #FFF;
	overflow: hidden;
	position: relative;
}

/* map */
#tmnt-map {
	position: absolute;
	top:-100%;
	left:50%;
	margin-left:-45%;
	z-index: 200;
	width:90%;
	
    -webkit-transition: top .5s;
    -moz-transition:    top .5s;
    -ms-transition:     top .5s;
    -o-transition:      top .5s;
    transition:         top .5s;
}
#tmnt-map.active {
	top:31%;
}


#tmnt-map canvas { width:100% !important; height:auto !important; }

#bg-panel {
	background: url(../image/bg.jpg) center center;
	height: 1536px;
	width: 2048px;
	position: absolute;
	-webkit-transform: translate(-50%, -50%) translate3d(-3000px, -2700px, -1600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(5);
	transform: translate(-50%, -50%) translate3d(-3000px, -2700px, -1600px) rotateX(0deg) rotateY(0deg) rotateZ(-0deg) scale(5);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

/*
    style the presentation steps.
*/

.step {
    position: relative;
    width: 900px;
    padding: 40px;
    margin: 20px auto;

    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    -ms-box-sizing:     border-box;
    -o-box-sizing:      border-box;
    box-sizing:         border-box;

    font-family: 'PT Serif', georgia, serif;
    font-size: 48px;
    line-height: 1.5;
}
.impress-enabled .step {
    margin: 0;
    opacity: 0.3;

    -webkit-transition: opacity 1s;
    -moz-transition:    opacity 1s;
    -ms-transition:     opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;
}

.impress-enabled .step.active { opacity: 1 }

.slide {
    display: block;
    width: 458px;
    height: 458px;
    padding: 0;
}
.slide-inner {
	
	pointer-events: none;
	position:absolute;
	top:0;
	left:0;
    width: 458px;
    height: 458px;
    padding: 0;
	
	background:url(../image/frame-bg.png) no-repeat top center;
	/*
    background-color: white;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
   	*/
	
    color: rgb(102, 102, 102);
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -1px;
}
.slide-canvas {
	
}
#pinstructions .slide-inner { background:url(../image/frame-intro.png) no-repeat top center;}

.slide q {
    display: block;
    font-size: 50px;
    line-height: 72px;

    margin-top: 100px;
}

.slide q strong {
    white-space: nowrap;
}





/* end slides */




/* navigation */
.btn-next {  display:block; background:url(../image/btn-next.png) no-repeat; width:72px; height:92px; position: absolute; top: 340px; right: 0;
    -webkit-transition: right .5s;
    -moz-transition:    right .5s;
    -ms-transition:     right .5s;
    -o-transition:      right .5s;
    transition:         right .5s;
}
.slide.active .btn-next { right:-41px; }

.btn-left {  display:block; background:url(../image/btn-up.png) no-repeat; width:91px; height:69px; position: absolute; top:5px; left: 350px;
    -webkit-transition: top .5s;
    -moz-transition:    top .5s;
    -ms-transition:     top .5s;
    -o-transition:      top .5s;
    transition:         top .5s;
}
.slide.active .btn-left { top: -40px; }

.btn-right { display:block; background:url(../image/btn-down.png) no-repeat; width:91px; height:69px; position: absolute; bottom:5px; left: 350px; 
    -webkit-transition: bottom .5s;
    -moz-transition:    bottom .5s;
    -ms-transition:     bottom .5s;
    -o-transition:      bottom .5s;
    transition:         bottom .5s;
}
.slide.active .btn-right { bottom: -30px; }

.btn-back {  display:block; background:url(../image/btn-back.png) no-repeat; width:80px; height:92px; position: absolute; top: 360px; left:0;
    -webkit-transition: left .5s;
    -moz-transition:    left .5s;
    -ms-transition:     left .5s;
    -o-transition:      left .5s;
    transition:         left .5s;
}
.slide.active .btn-back { left: -38px; }

.btn-sound {  display:block; background:url(../image/btn-sound.png) no-repeat; width:73px; height:67px; position: absolute; top: 120px; left:0; background-position:0 0;
    -webkit-transition: left .5s;
    -moz-transition:    left .5s;
    -ms-transition:     left .5s;
    -o-transition:      left .5s;
    transition:         left .5s;
}
.slide.active .btn-sound { left: -42px; }
.btn-sound.sound-off { background-position:0 -67px; }

.btn-map {  display:block; background:url(../image/btn-map.png) no-repeat; width:71px; height:65px; position: absolute; top: 50px; left:0;
    -webkit-transition: left .5s;
    -moz-transition:    left .5s;
    -ms-transition:     left .5s;
    -o-transition:      left .5s;
    transition:         left .5s;
}
.slide.active .btn-map { left: -43px; }

.btn-map-close {  display:block; background:url(../image/btn-close.png) no-repeat; width:52px; height:48px; position: absolute; top: -20px; right:-20px; }
			

/* end slide */

.btn-replay {  display:block; background:url(../image/btn-startover.png) no-repeat; width:164px; height:167px; position: absolute; top: 0; left:0; visibility:hidden; opacity: 0;
    -webkit-transition: left .5s, top .5s, visibility 0s .5s, opacity .5s linear;
    -moz-transition:    left .5s, top .5s, visibility 0s .5s, opacity .5s linear;
    -ms-transition:     left .5s, top .5s, visibility 0s .5s, opacity .5s linear;
    -o-transition:     	left .5s, top .5s, visibility 0s .5s, opacity .5s linear;
    transition:         left .5s, top .5s, visibility 0s .5s, opacity .5s linear;
	transition-delay: 4s;
	-webkit-transition-delay: 4s;
}
.slide.active .btn-replay { left: -65px; top: -30px; visibility: visible; opacity: 1; }

.btn-more {  display:block; background:url(../image/btn-more.png) no-repeat; width:174px; height:176px; position: absolute; bottom: 0; left:0; visibility:hidden; opacity: 0;
    -webkit-transition: left .5s, bottom .5s, visibility 0s .5s, opacity .5s linear;
    -moz-transition:    left .5s, bottom .5s, visibility 0s .5s, opacity .5s linear;
    -ms-transition:     left .5s, bottom .5s, visibility 0s .5s, opacity .5s linear;
    -o-transition:     	left .5s, bottom .5s, visibility 0s .5s, opacity .5s linear;
    transition:         left .5s, bottom .5s, visibility 0s .5s, opacity .5s linear;
	transition-delay: 4s;
	-webkit-transition-delay: 4s;
}
.slide.active .btn-more { left: -75px; bottom: -40px; visibility: visible; opacity: 1; }

.btn-alt {  display:block; background:url(../image/btn-alt.png) no-repeat; width:165px; height:189px; position: absolute; top: 0; right:0; visibility:hidden; opacity: 0;
    -webkit-transition: right .5s, top .5s, visibility 0s .5s, opacity .5s linear;
    -moz-transition:    right .5s, top .5s, visibility 0s .5s, opacity .5s linear;
    -ms-transition:     right .5s, top .5s, visibility 0s .5s, opacity .5s linear;
    -o-transition:     	right .5s, top .5s, visibility 0s .5s, opacity .5s linear;
    transition:         right .5s, top .5s, visibility 0s .5s, opacity .5s linear;
	transition-delay: 4s;
	-webkit-transition-delay: 4s;
}
.slide.active .btn-alt { right: -70px; top: -45px; visibility: visible; opacity: 1; }

.btn-products {  display:block; background:url(../image/btn-products.png) no-repeat; width:159px; height:169px; position: absolute; right: 50px; bottom:50px; visibility:hidden; opacity: 0;
    -webkit-transition: right .5s, bottom .5s, visibility 0s .5s, opacity .5s linear;
    -moz-transition:    right .5s, bottom .5s, visibility 0s .5s, opacity .5s linear;
    -ms-transition:     right .5s, bottom .5s, visibility 0s .5s, opacity .5s linear;
    -o-transition:     	right .5s, bottom .5s, visibility 0s .5s, opacity .5s linear;
    transition:         right .5s, bottom .5s, visibility 0s .5s, opacity .5s linear;
	transition-delay: 4s;
	-webkit-transition-delay: 4s;
}
.slide.active .btn-products { right: -60px; bottom: -40px; visibility: visible; opacity: 1; }

.tmnt-the-end { 
  display:block; background:url(../image/the-end.png) no-repeat; width:182px; height:68px; position: absolute; top: 100px; left:140px; visibility:hidden; opacity: 0;
    -webkit-transition: top .5s, visibility 0s .5s, opacity .5s linear;
    -moz-transition:    top .5s, visibility 0s .5s, opacity .5s linear;
    -ms-transition:     top .5s, visibility 0s .5s, opacity .5s linear;
    -o-transition:      top .5s, visibility 0s .5s, opacity .5s linear;
    transition:         top .5s, visibility 0s .5s, opacity .5s linear;
	transition-delay:  3.5s;
	-webkit-transition-delay: 3.5s;
}
.slide.active .tmnt-the-end { top: 200px; display:block; visibility: visible; opacity: 1;}

/* instructions - lables */

#intro-map {  display:block; background:url(../image/intro-map.png) no-repeat; width:234px; height:129px; position: absolute; top: 50px; left:0;
    -webkit-transition: left .5s, top .5s;
    -moz-transition:    left .5s, top .5s;
    -ms-transition:     left .5s, top .5s;
    -o-transition:      left .5s, top .5s;
    transition:         left .5s, top .5s;
}
.slide.active #intro-map { left:-250px; top:-0px; }

#intro-prev {  display:block; background:url(../image/intro-prev.png) no-repeat; width:240px; height:145px; position: absolute; bottom: 0; left:0;
    -webkit-transition: left .5s, bottom .5s;
    -moz-transition:    left .5s, bottom .5s;
    -ms-transition:     left .5s, bottom .5s;
    -o-transition:      left .5s, bottom .5s;
    transition:         left .5s, bottom .5s;
}
.slide.active #intro-prev { left:-250px; bottom: -30px; }

#intro-choose {  display:block; background:url(../image/intro-choose.png) no-repeat; width:293px; height:123px; position: absolute; top: 0px; right:0;
   	-webkit-transition: right .5s, top .5s;
    -moz-transition:    right .5s, top .5s;
    -ms-transition:     right .5s, top .5s;
    -o-transition:      right .5s, top .5s;
    transition:         right .5s, top .5s;
}
.slide.active #intro-choose { right:-250px; top: -30px; }

#intro-next {  display:block; background:url(../image/intro-next.png) no-repeat; width:233px; height:138px; position: absolute; bottom: 0; right:0;
    -webkit-transition: right .5s, bottom .5s;
    -moz-transition:    right .5s, bottom .5s;
    -ms-transition:     right .5s, bottom .5s;
    -o-transition:      right .5s, bottom .5s;
    transition:         right .5s, bottom .5s;
}
.slide.active #intro-next { right:-250px; bottom: -30px; }

#intro-keys {  display:block; background:url(../image/intro-keys.png) no-repeat; width:201px; height:142px; position: absolute; left:130px; bottom: 50px; 
    -webkit-transition: bottom .5s;
    -moz-transition:    bottom .5s;
    -ms-transition:     bottom .5s;
    -o-transition:      bottom .5s;
    transition:         bottom .5s;
}
.slide.active #intro-keys { bottom: -20px; }

#tmnt-progress { 
	width: 110px;
	position: absolute;
	z-index: 600;
	bottom: 140px;
	left: 50%;
	margin-left: -55px;
}

progress {	
	-webkit-appearance: none;
   	appearance: none;
    border: 4px solid #bdd337;  
    height: 20px;  
    border-radius: 10px; 
	-webkit-box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.3);
box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.3);
}
progress[value]::-webkit-progress-bar {
	background-color: #321b4a;  
    border-radius: 10px; 
  	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
  	background-color:#694691;
    border-radius: 10px;  
}

/* heads */

.tmnt-head { width:40px; height:33px; background:url(../image/turtle-heads-nav.png); position:absolute; top:-33px; }
.tmnt-head.don { background-position:0 -165px; right:-15px; top:-35px; }
.tmnt-head.leo { background-position: 0 -66px; right:110px; }
.tmnt-head.mike { background-position:0 -99px; right:110px;}
.tmnt-head.raf { background-position:0 -132px; right:-15px; top:-35px;}
.tmnt-head.crok { background-position:0 -33px; right:110px;}
.tmnt-head.droid { right:110px;}
.tmnt-head.tobottom { top:inherit; bottom:-25px; }