#centerDiv {
width: 100%;
text-align: left;
}

ul#portfolio { 
float: left; 
list-style: none; 
margin: 0 auto; 
width: 100%;
text-align: center;
}

ul#portfolio li { 
border: 0; 
float: left; 
margin: 0 1px 1px 0; 
padding: 3px;
width: 33%;
height: auto;
text-align: center;
}

ul#portfolio img { 
border: 0; 
padding: 0;
width: auto;
height: auto;
}

ul#portfolio li:hover { 
outline: 0 none;
}

ul#portfolio a { 
display: block; 
width: 100%;
outline: 0 none;
}

ul#portfolio a:hover { 
text-decoration: none;
outline: 0 none;
}

.view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.view-first .mask {
width: 100%;
height: 100%;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
cursor: pointer;
background: rgba(255, 255, 255, 0.5) url('../images/caption.png') repeat;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.view-first h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.view-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.view-first:hover img {
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.view-first a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.view-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

.view-first:hover h2, .view-first:hover p, .view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}

.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}

.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}

.view {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background-color: #FFFFFF;
}

.view .mask, .view .content {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.view img {
display: block;
position: relative;
}

.mask h2 {
text-transform: none;
text-align: center;
position: relative;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: normal;
line-height: 16px;
height: auto;
padding: 10px 0 10px 0;
background-color: #003366;
}

@media only screen and (max-width: 900px)
{
#centerDiv {
width: 100%;
text-align: center;
}

.view {
width: 100%;
height: auto;
}

ul#portfolio {
width: 100%;
text-align: center;
}

ul#portfolio li {
width: 50%;
height: auto;
border: 0; 
margin: 0 auto; 
padding: 2px;
text-align: center;
}

ul#portfolio img { 
border: 0; 
display: block; 
padding: 0;
width: 100%;
height: auto;
text-align: center;
}
}

@media only screen and (max-width: 540px)
{
ul#portfolio li
{ 
border: 0; 
display: block; 
padding: 2px 0 2px 0;
width: 100%;
height: auto;
text-align: center;
}
}