html.cidade{
width: 100%;
height: 100%;
}
html.cidade body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
body.dia{
background: #5e204b;
}
body.manha{
background: #f7c02c;
}
body.noite{
background: #43096c;
} .pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
display: table;
z-index: 2000;
}
.pace.pace-inactive .pace-progress {
display: none;
}
.pace .pace-progress {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
-webkit-transform: translate3d(0, 0, 0) !important;
-ms-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
}
.pace .pace-progress:after {
display: block;
content: attr(data-progress-text);
font-weight: 400;
font-style: italic;
font-size: 100px;
line-height: 1;
text-align: center;
color: #efab1e;
}
body.manha .pace .pace-progress:after{
color: #272126;
}
body > *:not(.pace),
body:before,
body:after {
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out
}
body:not(.pace-done) > *:not(.pace),
body:not(.pace-done):before,
body:not(.pace-done):after {
opacity: 0
} #social{
position: fixed;
bottom: 20px;
left: 20px;
z-index: 999999;
}
#social li{
display: inline-block;
}
#social li a.social-link{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
#social li a.social-link:hover{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
#social li a img{
width: 35px;
height: auto;
}
#loading{
width: 100%;
height: 100%;
background-image: url(//www.storyland.com.br/wp-content/themes/storyland2015/images/loading.gif);
background-repeat: no-repeat;
background-position: center center;
background-color: #272126;
position: fixed;
z-index: 99999;
} #cidade{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#cidade .cidade-layer{
position: absolute;
} #cidade #cidade-layer-1{
}
body.tall #cidade #cidade-layer-1,
body.normal #cidade #cidade-layer-1{
height: 100%;
width: auto;
overflow: hidden;	
}
body.wide #cidade #cidade-layer-1,
body.ultra-wide #cidade #cidade-layer-1{
height: 100%;
width: 120%;
}
body.tall #cidade #cidade-layer-1 img#cidade-layer-1-img,
body.normal #cidade #cidade-layer-1 img#cidade-layer-1-img{
height: 100%;
width: auto;
position: relative;
bottom: -6%;
}
body.wide #cidade #cidade-layer-1 img#cidade-layer-1-img,
body.ultra-wide #cidade #cidade-layer-1 img#cidade-layer-1-img{
position: absolute;
bottom: -6%;
left: 0;
width: 100%;
height: auto;
} #cidade #cidade-layer-2{
bottom: -50px;
}
body.tall #cidade #cidade-layer-2{
width: auto;
height: 96%;
}
body.normal #cidade #cidade-layer-2{
width: auto;
height: 96%;
}
body.wide #cidade #cidade-layer-2{
height: auto;
width: 115%;
}
body.ultra-wide #cidade #cidade-layer-2{
height: auto;
width: 115%;
} #cidade #cidade-layer-3{
bottom: -30px;
}
body.tall #cidade #cidade-layer-3{
width: auto;
height: 90%;
}
body.normal #cidade #cidade-layer-3{
width: auto;
height: 90%;
}
body.wide #cidade #cidade-layer-3{
height: auto;
width: 110%;
}
body.ultra-wide #cidade #cidade-layer-3{
height: auto;
width: 110%;
} #cidade #cidade-layer-4{
bottom: 0px;
}
body.tall #cidade #cidade-layer-4{
width: auto;
height: 86%;
}
body.normal #cidade #cidade-layer-4{
width: auto;
height: 86%;
}
body.wide #cidade #cidade-layer-4{
height: auto;
width: 105%;
}
body.ultra-wide #cidade #cidade-layer-4{
height: auto;
width: 105%;
bottom: auto;
top: -100px;
}  .animacao{
height: auto;
position: absolute;
z-index: 9999;
}
#balao{
width: 10%;
bottom: 40%;
left: 20%;
}
#superrapaz{
width: 6%;
top: 25%;
right: 20%;
}
#aviao{
width: 10%;
top: 15%;
left: 20%;
}
#delorean{
width: 10%;
bottom: 0%;
right: 10%;
} #pombomovel{
width: 17%;
bottom: 0%;
right: 10%;
}
#motoca{
width: 10%;
bottom: 0%;
right: 30%;
}
#ovni{
width: 8%;
top: 20%;
left: 20%;
} #pipa{
width: 4.5%;
bottom: 25%;
left: 40%;
}
#radical{
width: 3%;
bottom: 0%;
left: 30%;
}
#zeppelin{
width: 21%;
top: 20%;
right: 20%;
}
#onibus{
width: 19%;
bottom: 0%;
right: 20%;
} #map-pin{
width: 11%;
height: auto;
position: absolute;
bottom: 100%;
left: 55.5%;
z-index: 5;
}
#cidade-mobile #map-pin{
width: 30%;
padding-bottom: 10%;
}
#efeitos{
position: absolute;
width: 11%;
top: 0;
left: 55.5%;
z-index: 6;
display: none;
}
#cidade-mobile #efeitos{
width: 30%;
}
#efeitos img#fumaca{
width: 100%;
height: auto;
position: absolute;
top: -125px;
}
#efeitos img#luz{
width: 100%;
height: auto;
position: absolute;
top: 0;
} #contato{
width: 260px;
position: absolute;
bottom: 5%;
left: 45%;
z-index: 4;
color: #fff;
padding: 20px;
display: none;
}
#cidade-mobile #contato{
left: 50%;
margin-left: -150px;
bottom: 15%;
}
body.manha #contato{
background: #791a01;
}
body.dia #contato{
background: #330b4c;	
}
body.noite #contato{
background: #42096b;
}
#contato h3{
font-size: 12px;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 900;
}
body.manha #contato h3{
color: #d08c73;	
}
body.dia #contato h3{
color: #a876bd;	
}
body.noite #contato h3{
color: #7c519a;	
}
#contato a{
color: #fff;
text-decoration: none;
-webkit-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); }
#contato #contato-info{
margin-top: 20px;
}
#contato #contato-info a{
line-height: 24px;
font-size: 18px;
}
#contato #contato-info a:hover{
color: #efab1e;
}
#contato #contato-info a span{
font-size: 12px;
}
#contato #redes-sociais{
margin-top: 20px;
}
#contato #redes-sociais a{
line-height: 14px;
text-transform: uppercase;	font-size: 10px;
letter-spacing: 1px;
font-weight: 900;
}
#contato #redes-sociais a:hover{
color: #efab1e;
} #cidade-mobile{
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
min-height: 600px;
}
@media (orientation: landscape){
#cidade-mobile{
overflow: visible;
}
}
#cidade-mobile #cidade-mobile-layer{
width: 1300px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -650px;
} html.cidade footer{
display: none;
}