/*  CSS Document                             */

body {
	margin: 0; padding: 0; font-size: 16px; font-family: Arial; background:#000;
	}
	
.timeline {
	position: relative; margin: 30px 0px 20px 0px;
	}
	
.timeline h1 {
	position: absolute;
	top: 15px;
	left: 20px;
	text-align: center;
	width: 100%;
	margin: 0px;
	border-bottom: 1px solid rgba(255,255,255,0);
	font-size: 2em;
	z-index: 1;
	text-transform: uppercase;
	color: rgba(30,20,15,.75);
	padding-bottom: 3px;
	letter-spacing: 4px;
	font-family: "Arial black", Gadget, sans-serif;
}

.timeline .panel_container {
	overflow: hidden;
	position:relative;
	margin: 160px 0px 0px 0px;
	width: 100%;
	height: 300px;
background: rgb(0,0,0); 


}

.timeline .background_slider {position: absolute; width: inherit; height: inherit;}
.timeline .background_slider img {position: absolute; top: 0px; left: 0px; }
.timeline .panel_slider { width: 100%; position: absolute;}
.timeline .panel {width: 340px; position:absolute;}
.timeline .panel_content { padding:85px 10px 0px 40px; position: relative;}
.timeline .panel_content h2 {font-size: 1em; color: rgba(0,0,0,.75); margin:0px 0px 8px 0px;}
.timeline .panel_content p {margin:0px 0px 0px 0px; position: relative; color: rgba(50,20,15,.75); text-align: justify; font-size: 12px; text-indent: 25px; width: 325px; text-shadow: 0px 0px 0px rgba(30,20,15,.1); background: rgba(237,232,221,.1);}
.timeline .panel_content .label {
	position:absolute;
	top: 55px; right: 0px;
	font-size:2em;
	color: rgba(175,150,130,.25);
	text-align: right;
	font-family: Georgia, "Times New Roman", Times, serif;
}

.timeline nav {position: absolute; bottom: 6px; left: 0px; text-align: center; width: inherit;}
.timeline nav a {
	color: rgba(30,20,15,.6);
	font-size: 14px;
	display: inline-block;
	padding: 2px 10px;
	background: rgba(237,232,221,.55);
	text-decoration:none;
	
}

.timeline nav a:first-child {border-left-width: 4px; border-radius: 10px 0px 0px 10px;}
.timeline nav a:last-child { border-right-width: 4px; border-radius: 0px 10px 10px 0px;}
.timeline nav a.selected { background-color: rgba(175,150,130,.75);}
.timeline nav a.hover {color: rgba(175,150,130,.55);}

.timeline .panel img.panel1 { margin: 10px 0px 10px 0px; float: left;}
.timeline .panel img.panel2 {float: left; margin: 10px 20px 0px 0px;}
.timeline .panel img.panel3 {float:left;}
.timeline .panel img.panel4 {{float: left; margin: 10px 15px 0px 0px;}
.timeline .panel img.panel5 {float: right; margin: 10px 0px 0px 10px;}
.timeline .panel img.panel6 {float: right; margin: 10px 30px 0px 10px;}

.clear_both {clear: both;}

@media screen and (max-width: 550px)
 
{
	.timeline {margin: 0px; background:#000 url(ZZZZ_skin_small.jpg) no-repeat center 0px; }
	.timeline h1 {text-align: left; padding: 10px 10px 10px 20px; }
	.timeline .panel_container { height:auto; background: none; filter: none; margin: 0px;}
	.timeline .panel_slider { position: static; height: auto;}
	.timeline .panel {
		width: auto;
		height: auto;
		position: static;
		border-top: 1px solid rgba(255,255,255,.3);
		padding-bottom: 20px;
	}
	
	.timeline nav {display: none;}
	.timeline .background_slider {display: none;}
	.timeline .panel: first-child {padding-top: 40px;}
	.timeline .panel_content {padding-top: 60px;}
	.timeline .panel_content .label {top: 10px; right: 10px; }
	.timeline .panel img.panel1 { margin: 0px 25px 0px 0px;}
	.timeline .panel img.panel2 {margin: 10px 40px 0px 20px;}
	.timeline .panel img.panel3 {float: left; margin: 10px 15px 0px 0px;}
	
	
	}