/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
	background-color:#3349bb;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
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;
}
.city{
	background:url(../images/world-1-2.jpg);
	background-color:#262fa7;
	height:800px;
	width:100%;
}
.levels{
	position: relative;
}
.logo{
	width:100%;
	height:321px;
	margin:10px auto 0;
	background:url(../images/logo-medium.png) no-repeat center center;
	text-indent: -9999px;
	position:relative;
	z-index:9;
}
.logo-min{
	width:150px;
	height:116px;
	margin:0 auto;
	background:url(../images/logo-small.png);
	display:block;
	text-indent: -9999px;
}
.min-nav{
	height:40px;
	line-height:40px;
	position:fixed;
	z-index:300;
	top:-116px;
	left:0;
	right:0;
	background-color:#300200;
	text-align: center;
}
.centered-nav{
	width:315px;
	margin:0 auto;
	overflow: hidden;
	padding: 0 0 0 14px;
}
.centered-nav .item{
	float:left;
}
.centered-nav .item, .centered-nav .item a,.left-content,.right-content,.special-footer,.character-message{
	font-family: 'Annie Use Your Telescope', cursive;
}
.left-content,.right-content{
	font-size: 18px;
	line-height:22px;
	
}
.left-content{
	padding-left:20px;
}
.right-content{
	padding-right:20px;
}
.character-message{
	color:#fff;
	font-size:16px;
	max-width:150px;
	line-height:18px;
	position:absolute;
}
.character-message h1{
	color:#fff;
	font-size:20px;
	margin-bottom: 8px;
	border-bottom:2px dashed #fff;
	padding-bottom:4px;
}
a{
	color:#ea232d;
	font-weight: bold;
	text-decoration: none;
}
.highlight
{
	color:#ea232d;
	font-weight: bold;
	text-decoration: none;
}

a:hover{
	text-shadow: 0px 0px 2px #3b0402;
}
.centered-nav .item, .centered-nav .item a{
	font-size:21px;
	color:#bfbebe;
	text-decoration:none;
	font-weight:100;
	text-transform:capitalize;
	font-weight: bold;
}
.centered-nav .item:hover, .centered-nav .item a:hover{
	color:#ea232d;
}
.levels{
	position: relative;
}
.parallax-1,.parallax-2,.parallax-3{
	width:100%;
	position:absolute;
	bottom:0;
}
.parallax-1{
	height:336px;
	background:url(../images/floor.png) bottom repeat-x;
}
.parallax-1 .houses{
	height:336px;
	background:url(../images/houses1.png) right no-repeat;
}
.parallax-2{
	height:521px;
	background:url(../images/more-houses.png) right bottom no-repeat; 
	bottom:500px;
	right:445px;
}
.parallax-3{
	height:325px;
	background:url(../images/avila.png) right bottom repeat-x; 
	position:fixed;
}
.stick-parallax .parallax-2{
	position:fixed;
	bottom:0;
}
body.stick-footer .parallax-1,
body.stick-footer .parallax-2,
body.stick-footer .parallax-3,
body.stick-footer.stick-parallax .parallax-2 {
	position:absolute;
	bottom:0;
}
.intro{
	margin-bottom:80px;
}
.levels section{
	width:100%;
	position: relative;
	z-index:10;
}
.video-area{
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	padding:0 20px 80px;
	max-width:680px;
	margin: 0 auto;
	
}
.video{
	margin: 0 auto;
	z-index:250;
	position:relative;
	padding-bottom: 56.25%;
    padding-top:45px;
    
    overflow: hidden;
    height: 0;
}
.gallery{
	width:100%;
    height: 440px;
    margin-top:80px;
}
.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.intro article, .content{
	width:960px;
	margin:0 auto;
}
.intro article{
	overflow: hidden;
	margin-bottom:90px;
}
.left-content, .right-content{
	width:35%;
	color:#fff;
}
.left-content{
	float:left;
}
.right-content{
	float:right;
}
footer{
	min-height:50px;
	background-color:#251c3f;
	
}
.sky{
	position: fixed;
	top:0;
	left:0;
	right:0;
	height: 321px;
	background:url(../images/sky.png);	
}

.cat{
	width:133.6px;
	height:212px;
	background:url(../images/cat-medium.png);
	position:absolute;
	top:10px;
	left:-67px;
    background-position:0px; 
}
.bubble{
	background:url(../images/bubble-medium.png) no-repeat;
	width:174px;
	height:174px;
	position:absolute;
	top:47px;
	left:-87px;
	
}
.cat-tail{
	width:90.5px;
	height:94px;
	position:absolute;
	top:205px;
	left:-48px;
	background:url(../images/cat-tail-medium.png);
	-webkit-animation: play-tail .8s steps(4) infinite;
       -moz-animation: play-tail .8s steps(4) infinite;
        -ms-animation: play-tail .8s steps(4) infinite;
         -o-animation: play-tail .8s steps(4) infinite;
            animation: play-tail .8s steps(4) infinite;
}
@-webkit-keyframes play-tail {
   from { background-position:    0px; }
     to { background-position: -362px; }
}

@-moz-keyframes play-tail {
   from { background-position:    0px; }
     to { background-position: -362px; }
}

@-ms-keyframes play-tail {
   from { background-position:    0px; }
     to { background-position: -362px; }
}

@-o-keyframes play-tail {
   from { background-position:    0px; }
     to { background-position: -362px; }
}

@keyframes play-tail {
   from { background-position:    0px; }
     to { background-position: -362px; }
}

@-webkit-keyframes play-fall {
   from { background-position: -133.6px; }
     to { background-position: -668px; }
}

@-moz-keyframes play-fall {
   from { background-position: -133.6px; }
     to { background-position: -668px; }
}

@-ms-keyframes play-fall {
   from { background-position: -133.6px; }
     to { background-position: -668px; }
}

@-o-keyframes play-fall {
   from { background-position: -133.6px; }
     to { background-position: -668px; }
}

@keyframes play-fall {
   from { background-position: -133.6px; }
     to { background-position: -668px; }
}
.coded-by{
	color:#6a68b6;
	font-size: 14px !important;
	line-height:20px !important;
}
.cat-container{
	width:0;
	height:0;
	position:absolute;
	top:260px;
	left:50%;
	z-index:10;
}
.levels section.characters{
	position: relative;
	min-height:1200px;
	overflow: hidden;
}
.levels section.characters,
.levels section.intro{
	/*Modifique esto*/
	/*z-index:9;*/
}


body.stick-cat .cat-container{
	position:fixed;
	top:150px;
}
body.stick-cat .cat{
	background-position: -133.6px;
	-webkit-animation: play-fall .4s steps(4) infinite;
       -moz-animation: play-fall .4s steps(4) infinite;
        -ms-animation: play-fall .4s steps(4) infinite;
         -o-animation: play-fall .4s steps(4) infinite;
            animation: play-fall .4s steps(4) infinite;
}
body.stick-cat .cat-tail,
body.stick-cat .bubble
{
	display:none;
	-webkit-animation: none;
       -moz-animation: none;
        -ms-animation: none;
         -o-animation: none;
            animation: none;
}
.moon{
	width:120px;
	height:125px;
	background:url(../images/moon.png);	
	margin-top:50px;
	opacity: .4;
}
.facebook,
.twitter{
	width:60px;
	height:60px;
	background:url(../images/social.png);
	display: block;
	float: right;
	text-indent:-9999px;
	margin-left:10px;
	position: relative;
	z-index: 90;
}
.twitter{
	background-position:-60px;
}
.social{
	position: absolute;
	left:0;
	top:-72px;
}
.special-footer{
	position: relative;
	color:#42417c;
	background-color:#251c3f;
	font-size: 14px;
	line-height:20px;
	text-align: right;
	font-weight: bold;
	/*z-index:9;*/
	padding:10px 0;
}

.fluff{
	width:90px;
	height:102px;
	background:url(../images/fluff-small.png);
	
}
.cannon-fluff{
	width:102px;
	height:93px;
	background:url(../images/fluff-h-small.png);
}
.fish{
	width:77px;
	height:77px;
	background:url(../images/fish-small.png);
	float:right;
	margin-right:190px;
}
.cushion{
	width:130px;
	height:36px;
	background:url(../images/cushion-small.png);
}
.cannon{
	width:157px;
	height:130px;
	background:url(../images/cannon-small.png);
}
.platform{
	width:133px;
	height:29px;
	background:url(../images/platform-small.png);
}
.star{
	width:374px;
	height:332px;
	background:url(../images/star-small.png);	
}
.item-container{
	position:relative;
}

#container-platform-1{
	height:160px;
}
#fluff-1{
	position:absolute;
	bottom:23px;
	left:20px;
}
#platform-1{
	position:absolute;
	left:0;
	bottom:0;
}


#cannon-container-1{
	position:relative;
	height:163px;
	margin-top:90px;
}
#cannon-fluff-1{
	position:absolute;
	left:28px;
	bottom:20px;
}
#cannon-1{
	position:absolute;
	left:0;
	bottom:0;
}


#star-container{
	height:415px;
	width: 360px;
	float:right;	
}
#star{
	position:absolute;
	left:0;
	bottom:0;
}

#fluff-2{
	position:absolute;
	left:62px;
	bottom:29px;
}
#fluff-3{
	position:absolute;
	left:220px;
	bottom:305px;
}


#cushion-container-1{
	height:190px;
	margin-top:40px;
}

#fluff-4{
	position:absolute;
	bottom:50px;
	left:228px;
}
#cushion-1{
	position:absolute;
	bottom:25px;
	left:210px;
}
#platform-2{
	position:absolute;
	left:210px;
	bottom:0;
}
#message-0{
	float: left;
	position: relative;
	margin:50px 0 0 170px;
}
#message-1{
	top:70px;
	left:60px;
}

#message-2{
	top:0px;
	right:0px;
}

#message-3{
	top:50px;
	left:200px;
}
.rel{
	position: relative;
	z-index:100;
}
#message-4{
	top:0px;
	left:0px;
}
.stores{
	float: right;
	margin:30px 20px 0 0;
}
.apple, .google {
	width: 138px;
	height: 41px;
	background: url(../images/stores.png);
	display: block;
	margin: 0 0 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	opacity: 0.5;
}
.google{
	background-position:0 -43px;
}
.tgs{
	width:280px;
	height:397px;
	background: url(../images/tgs.png);
	display:block;
	margin-top:10px;
	
}
.tgs-square,.ge-square,.tif-square{
	width:190px;
	height:190px;
	background-size:190px 190px;
	margin-top:20px;
	display:block;
}
.ge-square{
	background-image: url(../images/ge-square.png);
	
	
}

.tif-square{
	background-image: url(../images/tif-square.png);
	
	
}
.tgs-square{
	background-image: url(../images/tgs-square.png);

}
.gdn{
	width:246px;
	height:60px;
	background: url(../images/gdn.png);
	display:block;
	margin-top:10px;
	
}
.gdn-margin{
	margin-top:100px;
}
.press-bundle{
	max-width:200px;
	padding:5px;
	background-color:#000;
	 -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    display:block;
    margin-bottom:60px;
    text-align:center;
    font-family: Helvetica, Arial, sans-serif;
     color:#fff;
    cursor:pointer;
}
.press-bundle span{
	padding:5px;
	display:block;
	border:2px dashed #ea232d;
	 -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
	
}
.press-bundle:hover span{
	border:2px dashed #000;
}
.press-bundle:hover{
	background-color:#ea232d;
}
@media screen and (max-width: 960px) {
	.intro article, .content{
		width:100%;
	}
	.video{
		width:100%;
	}
}

@media only screen and (max-width: 639px) {
	.press-bundle{
		font-size:12px;
		line-height:17px;
	}
	@-webkit-keyframes play-tail-small {
	   from { background-position:    0px; }
	     to { background-position: -226px; }
	}
	
	@-moz-keyframes play-tail-small {
	   from { background-position:    0px; }
	     to { background-position: -226px; }
	}
	
	@-ms-keyframes play-tail-small {
	   from { background-position:    0px; }
	     to { background-position: -226px; }
	}
	
	@-o-keyframes play-tail-small {
	   from { background-position:    0px; }
	     to { background-position: -226px; }
	}
	
	@keyframes play-tail-small {
	   from { background-position:    0px; }
	     to { background-position: -226px; }
	}
	
	
	
	@-webkit-keyframes play-fall-small {
	   from { background-position: -83px; }
	     to { background-position: -417.5px; }
	}
	
	@-moz-keyframes play-fall-small {
	   from { background-position: -83px; }
	     to { background-position: -417.5px; }
	}
	
	@-ms-keyframes play-fall-small {
	   from { background-position: -83px; }
	     to { background-position: -417.5px; }
	}
	
	@-o-keyframes play-fall-small {
	   from { background-position: -83px; }
	     to { background-position: -417.5px; }
	}
	
	@keyframes play-fall-small {
	   from { background-position: -83px; }
	     to { background-position: -417.5px; }
	}
	body.stick-cat .cat{
		background-position: -83px;
		-webkit-animation: play-fall-small .4s steps(4) infinite;
	       -moz-animation: play-fall-small .4s steps(4) infinite;
	        -ms-animation: play-fall-small .4s steps(4) infinite;
	         -o-animation: play-fall-small .4s steps(4) infinite;
	            animation: play-fall-small .4s steps(4) infinite;
	}
	.cat-tail{
	background:url(../images/cat-tail-medium.png);
		-webkit-animation: play-tail-small .8s steps(4) infinite;
	       -moz-animation: play-tail-small .8s steps(4) infinite;
	        -ms-animation: play-tail-small .8s steps(4) infinite;
	         -o-animation: play-tail-small .8s steps(4) infinite;
	            animation: play-tail-small .8s steps(4) infinite;
	}
	.logo{
		background-size: 235px 200px;
		height:200px;
		margin-top:60px;
	}
	.apple, .google {
		background-image: url(../images/stores-big.png);
		width: 109px;
		height: 33px;
		background-size: 109px 68.5px;
		float: left;
		margin-right: 10px;
		opacity: 0.5;
	}
	.stores{
		float:none;
		position: absolute;
		top:-70px;
		right:20px;
		left:20px;
		margin-right:0;
	}
	.google{
		background-position:0 -35px; 
		float:right;
		margin-right:0;
	}
	.logo-min{
		width:75px;
		height:58px;
		background-size:75px 58px;
	}
	.centered-nav{
		width:240px;
		padding: 0 0 0 10px;
	}
	.parallax-1{
		height:166px;
		background-size: 10.5px 16.5px;
	}
	.parallax-1 .houses{
		height:166px;
		background-size: 400.5px 166.5px;
	}
	.parallax-2{
		background-size: 150px 260.5px;
		background-position: right bottom;
		right:222.5px;
		display: none;
	}

	.parallax-3{
		height:162.5px;
		background-size: 407.5px 163px;	
	}
	.cat{
		background:url(../images/cat.png);
		width:83px;
		height:132.5px;
		background-size:417.5px 132.5px;
		left:-41.5px; 
	}
	.cat-container{
		top:190px;
		left:auto;
		right:80px;
	}
	.bubble{
		background:url(../images/big-bubble.png);
		width:108.5px;
		height:108.5px;
		background-size:108.5px 108.5px;
		top:34px;
		left:-54px;
		
	}
	.cat-tail{
		background:url(../images/cat-tail.png);
		width:56.5px;
		height:59px;
		position:absolute;
		top:130px;
		left:-30px;
		background-size:226px 59px;
	}
	.sky{
		height: 160.5px;
		background-size:640px 160.5px;
	}
	.moon{
		width:60px;
		height:62.5px;
		margin-top:25px;
		background-size:60px 62.5px;
	}
	.left-content, .right-content{
		width:auto;
		margin-right:150px;
		float:none;
		padding:0 0 0 20px;
		margin-bottom:25px;
		
	}
	.intro article{
		margin:25px 0 0;
	}
	.gdn-margin {
		margin-top: 0;
	}
	.tgs{
		background: url(../images/tgs-big.png);
		background-size:280px 397px;
	}
	
	
	
	
	.fluff{
		width:56.5px;
		height:64px;
		background:url(../images/fluff.png);
		background-size:169.5px 64px;
	}
	.cannon-fluff{
		width:64px;
		height:58px;
		background:url(../images/fluff-h.png);
		background-size:64px 58px;
	}
	.fish{
		width:48px;
		height:48px;
		background:url(../images/fish.png);
		float:right;
		background-size:48px 48px;
		margin-right:190px;
	}
	.cushion{
		width:81.5px;
		height:22.5px;
		background:url(../images/cushion.png);
		background-size:81.5px 22.5px;
	}
	.cannon{
		width:78.5px;
		height:65px;
		background:url(../images/cannon.png);
		background-size:78.5px 65px;
	}
	.platform{
		width:83px;
		height:18px;
		background:url(../images/platform.png);
		background-size:83px 18px;
	}
	.star{
		width:233.5px;
		height:207.5px;
		background:url(../images/star.png);	
		background-size:233.5px 207.5px;
	}
	#platform-1{
		left:8px;
		bottom:8px;
	}
	#message-0{
		margin:80px 0 0 100px;
	}
	#fluff-4{
		bottom:50px;
		left:20px;
	}
	#cushion-1 {
		bottom: 35px;
		left: 8px;
	}
	#platform-2 {
		left: 8px;
		bottom: 18px;
	}
	#message-1 {
		top: 35px;
		left: 100px;
	}
	#cushion-container-1{
		height: 140px;
	}
	.fish{
		float: none;
		margin:60px 0 0 25px;
		
	}
	#message-2{
		right:auto;
		left:100px;
		top:-10px;
	}
	#cannon-container-1 {
		height: 100px;
		margin-top: 80px;
	}
	#cannon-1 {
		left: 10px;
	}
	#cannon-fluff-1 {
		left: 25px;
		bottom: 5px;
	}
	#message-3 {
		top: 20px;
		left: 100px;
	}
	#star-container {
		height: 285px;
		float:none;
	}
	#message-4 {
		top: 260px;
		left: 100px;
	}
	#fluff-3 {
		left: 138px;
		bottom: 190px;
	}
	#fluff-2 {
		position: absolute;
		left: 40px;
		bottom: 19px;
	}
	.facebook,
	.twitter{
		width:40px;
		height:40px;
		background-size:80px 40px;
	}
	.twitter{
		background-position:-40px;
	}
	.social{
		position: absolute;
		left:0;
		top:-46px;
	}
	.special-footer{
		padding-right:10px;
		box-sizing:border-box;
		-moz-box-sizing:border-box;

	}

}