html, body { height: 100%; }
body { 
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #cccccc 100%);
background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#cccccc 100%);
background: radial-gradient(ellipse at center,  #ffffff 0%,#cccccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=1 ); 
}
* { outline: none; margin: 0; padding: 0; text-decoration: none; }
h1 { font: 56px/56px 'Roboto Slab', serif; padding: 30px 0; text-align: center; }
h2 { font: 36px/38px 'Roboto Slab', serif; }
.container { margin: 0 auto; width: 960px; overflow: hidden; }
.grid_md_3 .col { width: 33%; float: left; }
.grid_md_3 .col > div { padding: 20px; }
.grid_md_5 { margin-top: 20px; }
.grid_md_5 .sub { width: 20%; display: inline-block; float: left; text-align: center; height: 150px; position: relative; }
.item { display: block; -webkit-box-shadow: 0 5px 30px rgba(0,0,0,0.5); -moz-box-shadow: 0 5px 30px rgba(0,0,0,0.5); box-shadow: 0 5px 30px rgba(0,0,0,0.5); cursor: pointer; height: 425px; }
.item:hover { -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.1); -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.1); box-shadow: 0 5px 5px rgba(0,0,0,0.1); }
.item { padding: 20px; text-align: center; }
.item img { max-width: 90%; margin-top: 20px; }
.sub img { max-width: 90%; position: absolute; bottom: 0; left: 50%; margin-left: -45%; margin-bottom: 20px; }
.item1 { background: #0070b1; color: #fff; }
.item2 { background: #6e00c3; color: #fff; }
.item3 { background: #ffcc1c; color: rgb(2,118,204); }
.transition { -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -ms-transition: all .3s linear; transition: all .3s linear; }
.clear { clear: both; }
@media (max-width: 800px){
h1 { font: 36px/36px 'Roboto Slab', serif; padding: 30px 0; text-align: center; }
h2 { font: 26px/28px 'Roboto Slab', serif; }
.container { width: 100%; }
.item { height: 350px; }
}
@media (max-width: 599px){
h1 { font: 36px/36px 'Roboto Slab', serif; padding: 30px 0; text-align: center; }
h2 { font: 26px/28px 'Roboto Slab', serif; }
.container { width: 100%; }
.grid_md_3 .col { width: 100%; float: none; }
.grid_md_5 .sub { width: 50%; margin: 0 auto; display: block; float: none; height: auto; }
.item { height: auto; }
.sub img { position: relative; bottom: auto; left: auto; margin: 20px 0; }
}