@charset "utf-8";
/*INDEX.PHP ----------------------------------------*/
#intro {
	float:left;
	width:545px;
	margin-top:15px;
	margin-left:15px;
	}
	
#stick {
	margin-top:35px;
	float:right;
	width:412px;
	margin-right:15px;
	}
	
.pocket {
	border:1px solid #CCC;
	text-align:center;
	}
	
.pocket h3 {
	background-color:#999;
	padding:15px 10px;
	color:#FFF;
	text-align:left;
	margin-bottom:10px;
	font-weight:bolder;
	}
	
.pocket p {

	padding:10px;
	}
#cubes {

	}
#cubes h1 {
		margin-left:15px;
		}
.box {
	background-color:#EEE;
	text-align:center;
	width:304px;
	height:153px;
	float:left;
	margin:15px;
	position:relative;
	overflow:hidden;
	cursor:pointer;
	}
	
.box img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100px;
   height: 100px;
   margin-top: -50px; /* Half the height */
   margin-left: -50px; /* Half the width */
   
   opacity:.2;
   transition:all 0.8s ease-in-out;
}
.mask  {
	background-color:rgba(238, 41, 48, 0.8);
	padding:10px;
	width:100%;
	position:absolute;
	bottom:-125px;
	z-index:1;
	
	transition:all 0.2s ease-in-out;
	}
	
.box h4 {
	text-align:left;
	color:#FFF;
	margin-bottom:10px;
	font-size:24px;
	
	opacity:0;
	transition:all 0.6s ease-in-out;
	}
	
.box p {
	text-align:left;
	line-height:16px;
	color:#FFF;
	
	opacity:0;
	transition:opacity 0.8s linear;
	}
	
.box:hover .mask{
	bottom:0px;
	}
.box:hover img {
	opacity:1;
	}
.box:hover h4 {
	opacity:9;
	}
.box:hover p {
	opacity:8;
	}
@charset "utf-8";
/* CSS Document */

#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}