/***************
 * Intro Panel *
 ***************/
#story-header {
	color : #666;
	background : #004225;
	padding-top : 60px;
	padding-left : 60px;
}

#story-header img{
	position : absolute;
	left :20px;
	top : 80px;
}


#story-header h2 {
	font-family : "Caecilia-RomanSC", Verdana, sans-serif;
	text-align :  right;
	font-size   : 42px; 
	font-weight : lighter;
	line-height : 80px;
	color: #cccccc;
		padding-top : 650px;
}

#story-header .story {
	width         : 90%;
	padding-right : 440px;

}

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

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

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

/***************
 * DESIGN Panel *
 ***************/
#story-design {
	color      : #FFF;
	background : #022639;
}

#story-design h2 {
	font-family : "Caecilia-RomanSC", Verdana, sans-serif;
	text-align :  right;
	padding-top : 100px;
	font-size   : 42px; 
	font-weight : lighter;
	line-height : 80px;
	color: #cccccc;
}

/*********************
 * COMMUNICATION panel*
 *********************/
#story-comm {
	color      : #CCC;
	background : #420A01;
}

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

#story-comm h2 {
	font-family : "Caecilia-RomanSC", Verdana, sans-serif;
	text-align :  left;
	padding-left : 60px;
	padding-top : 100px;
	font-size   : 42px; 
	font-weight : lighter;
	line-height : 80px;
	color: #cccccc;
}
/**************
 * proto Panel *
 **************/
#story-proto {
	color       : #FFF;
	background  : #022639;
}

#story-proto .logo {
	position : absolute;
	right    : 20%;
	bottom   : 50%;
}
#story-proto h2 {
	font-family : "Caecilia-RomanSC", Verdana, sans-serif;
	text-align :  right;
	padding-top : 100px;
	font-size   : 42px; 
	font-weight : lighter;
	line-height : 80px;
	color: #cccccc;
}

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

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

/**************
 * folio Panel *
 **************/
#story-folio {
	color      : #CCC;
	background : #420A01;
}


#story-folio h2 {
	font-family : "Caecilia-RomanSC", Verdana, sans-serif;
	text-align :  left;
	padding-left : 60px;
	padding-top : 100px;
	font-size   : 42px; 
	font-weight : lighter;
	line-height : 80px;
	color: #cccccc;
}

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

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

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

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

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

#story-folio ul.slide.start {
	left : -1520px;
}

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

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

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

#story-folio ul.slide-2{
	bottom : 172px;	
}

#story-folio ul.slide-3 {
	bottom : 344px;
}

#story-folio ul.slide-1.to{
	left : -1520px;	
}

#story-folio ul.slide-2.to {
	left   : -1480px;
}

#story-folio ul.slide-3.to {
	left : -1520px;
}


#story-folio ul.slide-2.start {
	left : -1480px;
}



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

#story-folio ul.slide-2.end {
	right : 0px;
	left : 200px;
}

#story-folio ul.slide-3.end {
	right : 0px;
	left  : 800px;
}


/*#story-folio ul.slide-2.to {
	right : 0px;
}*/



/**************
 * CONTACT Panel *
 **************/
#story-contact {
	color       : #FFF;
	background  : #004225;
}
#story-contact h2 {
	font-family : "Caecilia-RomanSC", Verdana, sans-serif;
	text-align :  right;
	padding-top : 100px;
	font-size   : 42px; 
	font-weight : lighter;
	line-height : 80px;
	color: #cccccc;
}

#story-contact p {
	font-family : "Caecilia-RomanSC", Verdana, sans-serif;
	text-align :  right;
	padding-top : 400px;
	font-size   : 24px; 
	font-weight : lighter;
	line-height : 48px;
	color: #cccccc;
}