html,body {width:100%;height: 100%; overflow:hidden; margin:0;padding:0 }
body{font-family:Arial, Helvetica, sans-serif; background-color:#000}
.show{display:block !important}
.hide{display:none !important}
.z100{z-index:100 !important;}
.z10{z-index:10 !important;}
.z60{z-index:60 !important;}
.page1{background:url(../images/1.jpg) no-repeat; background-size:cover}
.page2{background:url(../images/2.jpg) no-repeat; background-size:cover}
.page3{background:url(../images/3.jpg) no-repeat; background-size:cover}
.page4{background:url(../images/4.jpg) no-repeat; background-size:cover}
.page5{background:url(../images/5.jpg) no-repeat; background-size:cover}
.dialog_top{width:95%; height:auto; min-height:10px; background-color:rgba(0,0,0,0.6); color:#fff; border-radius:10px; display:block; position:absolute; left:0; right:0; margin:0 auto; margin-top:-200px }
.dialog_top p{text-align:justify; font-size:16px;padding:10px 25px; margin:0}
.dialog_top.movedialog{
-webkit-animation-name: dialogMove;
-webkit-animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
-moz-animation-name: dialogMove;
-moz-animation-duration: 0.3s;
-moz-animation-fill-mode: both;
}
@-webkit-keyframes dialogMove
{0% {}100% {-webkit-transform:translate3d(0px,210px,0);}}
@-moz-keyframes dialogMove
{0% {}100% {-moz-transform:translate3d(0,210px,0);}}
.slider-buttons{background: url(../images/sprite.png) no-repeat;}
.slider-buttons.disable{opacity:0.2}
#slider-home{ background-position:-50px 0px;}
#slider-play{background-position:-100px 0px;}
#slider-pause{background-position:0px 0px;}
#slider-stop{background-position:-250px 0px;}
#slider-prev{background-position:-200px 0px; }
#slider-next{background-position:-150px 0px; }
/*********HOME PAGE/******************/
#home_page{background:url(../images/back1.jpg) no-repeat; background-size:cover;}
#story_pages,#home_page,#settings_page{width:100%; height:100%; position:absolute !important; visibility:hidden}
.gen_pages_inner{max-width:800px; width:auto; height:auto; margin:0 auto; padding-top:50px; text-align:center;}
.button{background:url(../images/sprite.png) no-repeat;text-indent:-1000px; display:inline-block; width:350px; height:115px; margin-bottom:10px; margin-right:10px; margin-left:10px; }
.button.play_story{background-position:0 -395px;}
.button.settings{background-position:0 -280px;}
.button.about{background-position:0 -50px;}
.button.credits{background-position:0 -165px;}
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
z-index:0;
-webkit-transition-property: top, bottom;
transition-property: top, bottom;
-webkit-transition-duration: .2s, .2s;
transition-duration: .2s, .2s;
-webkit-transition-timing-function: linear, linear;
transition-timing-function: linear, linear;
-webkit-overflow-scrolling: touch;
}
.visible{visibility:visible !important;}
/*********HOME PAGE/******************/
/*********SETTINGS PAGE/******************/
#settings_page{z-index:60; position:relative; background:url(../images/back2.jpg) no-repeat; background-size:cover;
visibility:hidden}
#settings_page p{font-size:50px; text-shadow:1px 1px 1px #000; font-weight:bold; color:#933; display:inline-block; margin-right:100px; }
#settings_page h2{font-size:100px; text-shadow:3px 3px 2px #000; font-weight:bold; color:#39C; margin:0 auto; }
#settings_button{display:block; width:160px; height:33px; border-radius:3px; text-decoration:none;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
border:1px solid #999; margin:0 auto; color:#000; text-shadow:1px 1px 1px #999; padding-top:6px; font-weight:bold;
font-size:14px; margin-top:50px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
/*********SETTINGS PAGE/******************/
/*********************************************************************/
.flow {
-webkit-transform-origin: 50% 30%;
-moz-transform-origin: 50% 30%;
transform-origin: 50% 30%;
}
.flow.out {
-webkit-transform: translateX(-100%) scale(.5);
-webkit-animation-name: flowouttoleft;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 350ms;
-moz-transform: translateX(-100%) scale(.5);
-moz-animation-name: flowouttoleft;
-moz-animation-timing-function: ease;
-moz-animation-duration: 350ms;
transform: translateX(-100%) scale(.5);
animation-name: flowouttoleft;
animation-timing-function: ease;
animation-duration: 350ms;
}
.flow.in {
-webkit-transform: translateX(0) scale(1);
-webkit-animation-name: flowinfromright;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 350ms;
-moz-transform: translateX(0) scale(1);
-moz-animation-name: flowinfromright;
-moz-animation-timing-function: ease;
-moz-animation-duration: 350ms;
transform: translateX(0) scale(1);
animation-name: flowinfromright;
animation-timing-function: ease;
animation-duration: 350ms;
}
.flow.out.reverse {
-webkit-transform: translateX(100%);
-webkit-animation-name: flowouttoright;
-moz-transform: translateX(100%);
-moz-animation-name: flowouttoright;
transform: translateX(100%);
animation-name: flowouttoright;
}
.flow.in.reverse {
-webkit-animation-name: flowinfromleft;
-moz-animation-name: flowinfromleft;
animation-name: flowinfromleft;
}
@-webkit-keyframes flowouttoleft {
0% { -webkit-transform: translateX(0) scale(1); }
60%, 70% { -webkit-transform: translateX(0) scale(.5); }
100% { -webkit-transform: translateX(-100%) scale(.5); }
}
@-moz-keyframes flowouttoleft {
0% { -moz-transform: translateX(0) scale(1); }
60%, 70% { -moz-transform: translateX(0) scale(.5); }
100% { -moz-transform: translateX(-100%) scale(.5); }
}
@keyframes flowouttoleft {
0% { transform: translateX(0) scale(1); }
60%, 70% { transform: translateX(0) scale(.5); }
100% { transform: translateX(-100%) scale(.5); }
}
@-webkit-keyframes flowouttoright {
0% { -webkit-transform: translateX(0) scale(1); }
60%, 70% { -webkit-transform: translateX(0) scale(.5); }
100% { -webkit-transform: translateX(100%) scale(.5); }
}
@-moz-keyframes flowouttoright {
0% { -moz-transform: translateX(0) scale(1); }
60%, 70% { -moz-transform: translateX(0) scale(.5); }
100% { -moz-transform: translateX(100%) scale(.5); }
}
@keyframes flowouttoright {
0% { transform: translateX(0) scale(1); }
60%, 70% { transform: translateX(0) scale(.5); }
100% { transform: translateX(100%) scale(.5); }
}
@-webkit-keyframes flowinfromleft {
0% { -webkit-transform: translateX(-100%) scale(.7); }
30%, 40% { -webkit-transform: translateX(0) scale(.7); }
100% { -webkit-transform: translateX(0) scale(1); }
}
@-moz-keyframes flowinfromleft {
0% { -moz-transform: translateX(-100%) scale(.7); }
30%, 40% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(0) scale(1); }
}
@keyframes flowinfromleft {
0% { transform: translateX(-100%) scale(.7); }
30%, 40% { transform: translateX(0) scale(.7); }
100% { transform: translateX(0) scale(1); }
}
@-webkit-keyframes flowinfromright {
0% { -webkit-transform: translateX(100%) scale(.7); }
30%, 40% { -webkit-transform: translateX(0) scale(.7); }
100% { -webkit-transform: translateX(0) scale(1); }
}
@-moz-keyframes flowinfromright {
0% { -moz-transform: translateX(100%) scale(.7); }
30%, 40% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(0) scale(1); }
}
@keyframes flowinfromright {
0% { transform: translateX(100%) scale(.7); }
30%, 40% { transform: translateX(0) scale(.7); }
100% { transform: translateX(0) scale(1); }
}
/*********************/
.scaleDownCenter {
-webkit-animation: scaleDownCenter 350ms ease-in both;
animation: scaleDownCenter 350ms ease-in both;
}
.scaleUpCenter {
-webkit-animation: scaleUpCenter 350ms ease-out both;
animation: scaleUpCenter 350ms ease-out both;
}
@-webkit-keyframes scaleDownCenter {from { }to { opacity: 0; -webkit-transform: scale(.5); }}
@keyframes scaleDownCenter {from { }to { opacity: 0; -webkit-transform: scale(.5); transform: scale(.5); }}
@-webkit-keyframes scaleUpCenter {from { opacity: 0; -webkit-transform: scale(.5); }}
@keyframes scaleUpCenter {from { opacity: 0; -webkit-transform: scale(.5); transform: scale(.5); }}
/************************************/