/***************
 * Intro Panel *
 ***************/
#story-header {
	color : #666;
}

#story-header #logo {
	margin : 20px 0 50px 0;
}

#story-header h2 {
	font-family: "Caecilia-Roman", Verdana, sans-serif;
}

#story-header .story {
	width         : 850px;
	padding-right : 0px;
}

#story-header p {
	width     : 800px;
	font-size : 16px;
}

#story-header ul li {
	font-size : 16px;
	margin    : 16px 0;
}

#story-header ul {
	padding : 0px;
}

/***************
 * Intel Panel *
 ***************/
#story-Hotel {
	color      : #FFF;
	background : #022639;
}

#story-Hotel .box {
	background    : #000;
	opacity       : .1;
	border-radius : 10px;
	position      : absolute;
	top           : -10px;
	right         : 340px;
	bottom        : -10px;
	left          : -10px;
	z-index       : -1;
}

/*********************
 * Ultrabook Project *
 *********************/
#story-Parque {
	color      : #CCC;
	background : #000;
}

#story-Parque .bg {
	left  : auto;
	right : 0px;
}

#story-Parque .box {
	background    : #000;
	opacity       : .2;
	border-radius : 10px;
	position      : absolute;
	top           : -10px;
	right         : 340px;
	bottom        : -10px;
	left          : -10px;
	z-index       : -1;
}

/**************
 * Bing Panel *
 **************/
#story-Contamos {
	color       : #FFF;
	text-shadow : 1px 1px 1px #000;
	background  : #C9BC33;
}

#story-Contamos .logo {
	position : absolute;
	right    : 20%;
	bottom   : 50%;
}

#story-Contamos .logo.start {
	bottom : 190%;
}

#story-Contamos .logo.end {
	bottom : -90%;
}

#story-Contamos .box {
	background    : #000;
	opacity       : .3;
	border-radius : 10px;
	position      : absolute;
	top           : -10px;
	right         : 600px;
	bottom        : -10px;
	left          : -10px;
	z-index       : -1;
}
/**************
 * Areas Panel *
 **************/
#story-Areas {
	color      : #CCC;
	background : #000;
}

#story-Areas .logo {
	position : absolute;
	right    : 0%;
	bottom   : 30%;
}

#story-Areas .logo.start {
	bottom : 170%;
}

#story-Areas .logo.end {
	bottom : -210%;
}

#story-Areas .box {
	background    : #000;
	opacity       : .7;
	border-radius : 10px;
	position      : absolute;
	top           : -10px;
	right         : 440px;
	bottom        : -10px;
	left          : -10px;
	z-index       : -1;
}

#story-Areas ul.slide {
	display     : block;
	position    : absolute;
	white-space : nowrap;
	left        : -1426px;
}

#story-Areas ul.slide.start {
	left : -1425px;
}

#story-Areas ul.slide li {
	display : inline;
}

#story-Areas ul.slide-1.start { opacity : 0; }
#story-Areas ul.slide-2.start { opacity : 0; }
#story-Areas ul.slide-3.start { opacity : 0; }

#story-Areas ul.slide-1 {
	bottom : 0px;
}

#story-Areas ul.slide-2, #story-Areas ul.slide-2.to {
	bottom : 176px;
	left   : -1425px;
}

#story-Areas ul.slide-2.start {
	left : -1426px;
}

#story-Areas ul.slide-3 {
	bottom : 352px;
}


#story-Areas ul.slide-1.to, #story-Areas ul.slide-3.to {
	left : -1425px;
}

#story-Areas ul.slide-1.end {
	right : 0px;
	left  : auto;
}

#story-Areas ul.slide-3.end {
	right : 1200px;
	left  : auto;
}


#story-Areas ul.slide-2.to {
	right : 0px;
}

#story-Areas ul.slide-2.end {
	left : 200px;
}