.view-work {
    width: 100%;
    display: inline-block;
}
.thumbnail {
    display: block;
    margin:0 auto 20px auto;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
	overflow: hidden;
	-webkit-box-shadow: -1px 1px 5px 3px rgba(89, 85, 85, 0.8);
	-moz-box-shadow: -1px 1px 5px 3px rgba(89, 85, 85, 0.8);
	box-shadow: -1px 1px 5px 3px rgba(89, 85, 85, 0.8);
	width:90%;
	position: relative;
	padding: 0 !important;
}
.thumb-img {
    height: 300px;
    overflow: hidden;
    position: relative;
}

.thumb-img img {
    max-width: 100%;
    display: block;
    height: auto !important;
	ms-transform: translate(0,0);
	-webkit-transform: translate(0,0);
	transform: translate(0,0);
	-webkit-transition: -webkit-transform 1200ms ease-out;
	transition: transform 1200ms ease-out;
	position:relative;
}
 .thumbnail:hover .thumb-img  img {
    -ms-transform: translate(0,calc(-100% + 300px));
    -webkit-transform: translate(0,calc(-100% + 300px));
    transform: translate(0,calc(-100% + 300px));
    filter: alpha(opacity=70);
    zoom: 1;
    -webkit-transition: -webkit-transform 2s ease-in;
    transition: transform 2s ease-in;
}

.view {
    width:100%;
	display:inline-block;
    position: relative;
    text-align: center;
	overflow:hidden;
}
.view img {
    display: block;
    position: relative;
}
.view-work .mask {
    background-color: rgba(22, 169, 125, 0.7);
    top: -200px;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.3s ease-out 0.5s;
    -moz-transition: all 0.3s ease-out 0.5s;
    -o-transition: all 0.3s ease-out 0.5s;
    -ms-transition: all 0.3s ease-out 0.5s;
    transition: all 0.3s ease-out 0.5s;
}
.view-work h2 {
    -webkit-transform: translateY(-200px);
    -moz-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -webkit-transition: all 0.2s ease-in-out 0.1s;
    -moz-transition: all 0.2s ease-in-out 0.1s;
    -o-transition: all 0.2s ease-in-out 0.1s;
    -ms-transition: all 0.2s ease-in-out 0.1s;
    transition: all 0.2s ease-in-out 0.1s;
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
   background: rgba(21, 124, 96, 0.8);
    margin: 20px 0 0 0;
}
.view-work .mask  p {
    color: #333;
    -webkit-transform: translateY(-200px);
    -moz-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -webkit-transition: all 0.2s ease-in-out 0.2s;
    -moz-transition: all 0.2s ease-in-out 0.2s;
    -o-transition: all 0.2s ease-in-out 0.2s;
    -ms-transition: all 0.2s ease-in-out 0.2s;
    transition: all 0.2s ease-in-out 0.2s;
}
.view .mask p {
    font-size: 14px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center;
	text-shadow: -1px -1px 0 #4c4c4c,1px -1px 0 #262020,-1px 1px 0 #131111,1px 1px 0 #140b0a;
}
.view-work a.info {
    -webkit-transform: translateY(-200px);
    -moz-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -webkit-transition: all 0.2s ease-in-out 0.3s;
    -moz-transition: all 0.2s ease-in-out 0.3s;
    -o-transition: all 0.2s ease-in-out 0.3s;
    -ms-transition: all 0.2s ease-in-out 0.3s;
    transition: all 0.2s ease-in-out 0.3s;
}
.view a.info {
   display: inline-block;
	text-decoration: none;
	padding: 0 4px;
	background: #333;
	color: #fff;
	text-transform: uppercase;
	-webkit-box-shadow: 0 0 1px #000;
	-moz-box-shadow: 0 0 1px #000;
	box-shadow: 0 0 1px #000;
	border-radius: 4px;
	height: 22px;
	width: 60px;
	position: relative !important;
	
}
.thumb-img:hover {
    cursor: pointer;
}
.view-work:hover .mask {
	cursor: pointer;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    top: 0px;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-animation: bounceY 0.9s linear;
    -moz-animation: bounceY 0.9s linear;
    -ms-animation: bounceY 0.9s linear;
    animation: bounceY 0.9s linear;
}
.view .mask, .view .content {
    width: 100%;
    height: 300px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.view-work:hover h2 {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.view-work:hover .mask p {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -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-work:hover a.info {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
}
.top-title {
    text-shadow: -1px -1px 0 #fc452e,1px -1px 0 #fc452e,-1px 1px 0 #fc452e,1px 1px 0 #fc452e;
}
@keyframes bounceY {
    0% { transform: translateY(-205px);}
    40% { transform: translateY(-100px);}
    65% { transform: translateY(-52px);}
    82% { transform: translateY(-25px);}
    92% { transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
    0% { -moz-transform: translateY(-205px);}
    40% { -moz-transform: translateY(-100px);}
    65% { -moz-transform: translateY(-52px);}
    82% { -moz-transform: translateY(-25px);}
    92% { -moz-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
    0% { -webkit-transform: translateY(-205px);}
    40% { -webkit-transform: translateY(-100px);}
    65% { -webkit-transform: translateY(-52px);}
    82% { -webkit-transform: translateY(-25px);}
    92% { -webkit-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}
.cap-site-name p {
    margin: 0 !important;
    text-shadow: -1px -1px 0 #4c4c4c,1px -1px 0 #262020,-1px 1px 0 #131111,1px 1px 0 #140b0a;
    font-size: 14px;
}
.cap-site-name {
    background-color: #16a97d;
    color: #fff;
    line-height: 50px;
}

.cap-site-name a {
    color: #fff;
}
.type-site{
	background: #16a97d url(../webdesign-logo.png) no-repeat left center;
    background-size: auto auto;
	height: 40px;
	background-size: 50%;
	line-height: 40px;
	color: #fff;
	border-top: 2px solid #fcdb00;
	padding-right: 5px;
}
.name-site {
    text-align: center;
}
.url-site {
    text-align: center;
}
.level2 {
    background-color: #fff;
}
.cap-site-name:hover a {
    color: #eae1e1 !important;
}
#full_name {
    width: 100% !important;
}
.field-space-right {
    padding: 0 !important;
}