This is my CSS if you need to see it:
.carousel .item {
line-height: 300px;
overflow: hidden;
max-height: 700px;
}
body {
background: none repeat scroll 0 0 #FAFAFA;
color: #4682B4;
padding-bottom: 0;
}
.carousel-inner > .active {
left: 0;
/* Fix slider in IE */
z-index: 9;
}
.carousel-caption {
background-color: transparent9;
/* IE8 and below */
background: rgba(0, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#33000000′, endColorstr=’#33000000′, GradientType=0);
/* IE6-9 */
max-width: 60%;
padding: 5%;
line-height: 14px;
vertical-align: middle;
/* fix for IE to align the grey box to center */
top: 25%;
display: inline-block;
position: relative;
margin-left: 11%;
/*display:inline; IE7 and below */
}
.btn.btn-primary.fp-button {
display: none;
}
/*Make Carousel fade. Delay between slides needs(?) to be > 7000ms for this to work well*/
.carousel-inner > .item {
-webkit-transition: 2s ease-in-out opacity;
-moz-transition: 2s ease-in-out opacity;
-ms-transition: 2s ease-in-out opacity;
-o-transition: 2s ease-in-out opacity;
transition: 2s ease-in-out opacity;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
opacity: 1;
z-index: 1;
left: 0;
}
.carousel-inner > .active.left {
opacity: 0;
z-index: 2;
left: 0/* Remove icon */
#main-wrapper .format-icon:before {
content: none;
}
/* Center Title */
.page #main-wrapper h1.format-icon:before {content: none;}
.page h1.entry-title {
text-align: center;
}