#slider {
	width: 97%; /* important to be same as image width */
	height: 300px; /* important to be same as image height */
	position: relative; /* important */
	overflow: hidden; /* important */
	margin: 0 0 1.25em;
	background: #eee url(../../styles/images/loading.gif) no-repeat center center;
}
#slider ul {
  list-style: none;
}

#sliderContent {
    width:100%; /* important to be same as image width or wider */
    height: 300px;
    position: absolute;
	top: 0;
	margin-left: 0;
}
.sliderImage {
    float: left;
    position: relative;
	display: none;
    width:100%;
}
.sliderImage img {
  width:100% !important;
  height:auto;
  max-width: 100%;
}
.sliderImage h1 {
  font-size: 2.25em;
  margin: 0 0 0.6em;
  line-height: 1.2em;
}
.sliderImage p {
  font-size: 1.135em;
  line-height: 1.6em;
  color: #ddd;
}

.sliderImage span {
    position: absolute;
	font-size: 1em;
    padding: 2em;

    color: #fff;
    display: none;

    	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 32, 64);
	/* RGBa with 0.6 opacity */
	background: rgba(0, 32, 64, 0.8);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

.clear {
	clear: both;
}

#slider .top {
	top: 0;
	left: 0;
}
#slider .bottom {
	bottom: 0px;
    left: 0;
}
#slider .left {
	top: 0;
    left: 0;
	width: 30%;
	height: 100%;
}
#slider .right {
	right: 0;
	bottom: 0;
   	width: 30%;
	height: 100%;
}

#slider .right h1 {
  margin-top: 2em;
}