.portfolio

{

    padding:30px;

}







.hovereffect {

  width: 100%;

  height: 100%;

 

  overflow: hidden;

  position: relative;

  text-align: center;

  cursor: default;

}



.hovereffect .overlay {

  width: 100%;

  height: 100%;

  position: absolute;

  overflow: hidden;

  top: 0;

  left: 0;

}



.hovereffect img {

  display: block;

  position: relative;

}



.hovereffect h2 {

  text-transform: uppercase;

  color: #fff;

  text-align: center;

  font-size: 17px;

  padding: 10px;

}



.hovereffect:hover h2 {

  opacity: 0;

  filter: alpha(opacity=0);

  -webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);

  transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);

}



.hovereffect a.info {

  display: inline-block;

  text-decoration: none;

  padding: 7px 14px;

  text-transform: uppercase;

  color: #fff;

  border: 1px solid #fff;

  margin: 50px 0 0 0;

  background-color: transparent;

}



.hovereffect a.info:hover {

  box-shadow: 0 0 5px #fff;

}



.hovereffect hr {

  width: 40%;

  opacity: 0;

  filter: alpha(opacity=0);

  border: 1px solid #FFF;

}



.hovereffect  hr:nth-child(3) {

  -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,90deg) scale3d(0,0,1);

  transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,90deg) scale3d(0,0,1);

}



.hovereffect  hr:nth-child(4) {

  -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,180deg) scale3d(0,0,1);

  transform: translate3d(-50%,-50%,0) rotate3d(0,0,1, 180deg) scale3d(0,0,1);

}



.hovereffect h2, .hovereffect hr {

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

  transition: opacity 0.35s, transform 0.35s;

  -webkit-transform: translate3d(-50%,-50%,0);

  transform: translate3d(-50%,-50%,0);

  -webkit-transform-origin: 50%;

  -ms-transform-origin: 50%;

  transform-origin: 50%;

  background-color: transparent;

  margin: 0px;

}



.set1, .set2 {

  left: 50%;

  position: absolute;

  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

  transition: opacity 0.35s, transform 0.35s;

  -webkit-transform: translate3d(-50%,-50%,0);

  transform: translate3d(-50%,-50%,0);

  -webkit-transform-origin: 50%;

  -ms-transform-origin: 50%;

  transform-origin: 50%;

  background-color: transparent;

  margin: 0px;

  padding: 0px;

}



.set1 {

  top: 40%;

}



.set2 {

  top: 60%;

}



.hovereffect p {

  width: 30%;

  text-transform: none;

  font-size: 15px;

  line-height: 2;

}



.hovereffect p a {

  color: #fff;

}



.hovereffect p a:hover,

.hovereffect p a:focus {

  opacity: 0.6;

  filter: alpha(opacity=60);

}



.hovereffect  a i {

  opacity: 0;

  filter: alpha(opacity=0);

  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

  transition: opacity 0.35s, transform 0.35s;

  padding: 10px;

  font-size: 20px;

}



.set1 a:first-child i {

  -webkit-transform: translate3d(-60px,-60px,0);

  transform: translate3d(-60px,-60px,0);

}



.set1 a:nth-child(2) i {

  -webkit-transform: translate3d(60px,-60px,0);

  transform: translate3d(60px,-60px,0);

}



.set2 a:first-child i {

  -webkit-transform: translate3d(-60px,60px,0);

  transform: translate3d(-60px,60px,0);

}



.set2 a:nth-child(2) i {

  -webkit-transform: translate3d(60px,60px,0);

  transform: translate3d(60px,60px,0);

}



.hovereffect:hover hr:nth-child(3) {

  opacity: 1;

  filter: alpha(opacity=100);

  -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-90deg) scale3d(1,1,1);

  transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-90deg) scale3d(1,1,1);

}



.hovereffect:hover hr:nth-child(4) {

  opacity: 1;

  filter: alpha(opacity=100);

  -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-180deg) scale3d(1,1,1);

  transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-180deg) scale3d(1,1,1);

}



.hovereffect:hover .set1 i:empty, .hovereffect:hover .set2 i:empty {

  -webkit-transform: translate3d(0,0,0);

  transform: translate3d(0,0,0);

  opacity: 1;

  filter: alpha(opacity=100);

}