html{ background:url(strips-green-pink-and-blue-stripes-desktop-backgrounds.jpg)}  

h1{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
font-size:48px;
font-weight:bold;
color:#FF0033;
}

#mainwrapper {  
  font: 10pt normal Arial, sans-serif;  
  height: auto;
  width:80%;  
  margin-top:80px;
  padding-left:10%;
  text-align: left;
}  
#mainwrapper .box {  
    border: 5px solid #FF0033 ;  
    cursor: pointer;  
    height: 200px;  
    float: left;  
    margin: 20px;  
    position: relative;  
    overflow: hidden;  
    width: 28%; 
}  
  
#mainwrapper .box img {
	position: absolute;
	left: 0;
	-webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
	transition: all 300ms ease-out;
	width: 331px;
}  
#mainwrapper .box .caption {  
    background-color: rgba(0,0,0,0.9);  
    position: absolute;  
    color:#FFFFFF;  
    z-index: 90%;
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
    left: 0;  
}  

#mainwrapper .box .fade-caption{  
    opacity: 0;  
    width: 100%;  
    height: 100%;  
    text-align: left;
	padding-right:10px;
	padding-left:10px;  
    padding: 15px;  
}  

#mainwrapper .box:hover .fade-caption {  
    opacity: 1;  
}