.effect {position: relative;}
.effect-line { position: absolute;  content: "";  top: 0;  right: 0;  left: 0;  bottom: 0;  z-index: 1; }
.effect-line:before {  z-index: 1;  content: "";  position: absolute;  left: 10px;  right: 10px;  top: 10px;  bottom: 10px;  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;  transform: scale(0, 1);  -moz-transform: scale(0, 1);  -webkit-transform: scale(0, 1);  -ms-transform: scale(0, 1);
  transition: all 0.4s ease-in-out 0s;  -moz-transition: all 0.4s ease-in-out 0s;  -webkit-transition: all 0.4s ease-in-out 0s; border-radius:6px;
}
.effect-line:after {  z-index: 1;  content: "";  position: absolute;  left: 10px;  right: 10px;  top: 10px;  bottom: 10px;  border-left: 1px solid #fff;
  border-right: 1px solid #fff;  transform: scale(1, 0);  -moz-transform: scale(1, 0);  -webkit-transform: scale(1, 0);  -ms-transform: scale(0, 1);
  transition: all 0.4s ease-in-out 0s;  -moz-transition: all 0.4s ease-in-out 0s;  -webkit-transition: all 0.4s ease-in-out 0s;  border-radius:6px;
}
.effect-line:hover:before, .effect-line:hover:after {  transform: scale(1, 1);  -moz-transform: scale(1, 1);  -webkit-transform: scale(1, 1);  -ms-transform: scale(1, 1);}

.effect-line-02 { position: absolute;  content: "";  top: 0;  right: 0;  left: 0;  bottom: 0;  z-index: 1;}
.effect-line-02:before {  z-index: 1;  content: "";  position: absolute;  left: 10px;  right: 10px;  top: 20px;  bottom: 20px;  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;  transform: scale(0, 1);  -moz-transform: scale(0, 1);  -webkit-transform: scale(0, 1);  -ms-transform: scale(0, 1);
  transition: all 0.4s ease-in-out 0s;  -moz-transition: all 0.4s ease-in-out 0s;  -webkit-transition: all 0.4s ease-in-out 0s;
}
.effect-line-02:after { z-index: 1;  content: "";  position: absolute;  left: 20px;  right: 20px;  top: 10px;  bottom: 10px;  border-left: 1px solid #fff;
  border-right: 1px solid #fff;  transform: scale(1, 0);  -moz-transform: scale(1, 0);  -webkit-transform: scale(1, 0);  -ms-transform: scale(0, 1);
  transition: all 0.4s ease-in-out 0s;  -moz-transition: all 0.4s ease-in-out 0s;  -webkit-transition: all 0.4s ease-in-out 0s;
}
.effect-line-02:hover:before, .effect-line-02:hover:after { transform: scale(1, 1);  -moz-transform: scale(1, 1);  -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1);}

/* Shine */
.effect-shine a {  background: #fff none repeat scroll 0 0;  margin: 0;  display: block;  overflow: hidden;  padding: 0;  position: relative;}
.effect-shine a:before { position: absolute;  top: 0;  left: -75%;  z-index: 2;  display: block;  content: '';  width: 50%;  height: 100%;  transition: all 0.4s ease-in-out 0s;  -moz-transition: all 0.4s ease-in-out 0s;  -webkit-transition: all 0.4s ease-in-out 0s;  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);  -webkit-transform: skewX(-25deg);  transform: skewX(-25deg);
}
.effect-shine a:hover:before { -webkit-animation: shine 1.75s;  animation: shine 1.75s;}

@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}


/*effect button*/
.em-effect06 {position: relative;  z-index: 1;  text-align: center;}
.em-effect06 a { position: relative;  overflow: hidden;  z-index: 0;  display: inline-block;  vertical-align: top;  max-width: 100%;}
.em-effect06 a:after { content: '';  position: absolute;  z-index: 1;  width: 100%;  height: 0;  top: 0;  left: 0;  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;  -o-transition: all 500ms ease;  transition: all 500ms ease;  -moz-backface-visibility: hidden;  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;  background: rgba(0, 0, 0, 0.18);
}
.em-effect06 .em-eff06-02:after { height: 100%;  bottom: 0;  opacity: 0;  filter: alpha(opacity=0);}
.em-effect06 .em-eff06-02:hover:after {  opacity: 1;  filter: alpha(opacity=100);}
.em-effect06 .em-eff06-03:after {  height: 100%;  bottom: 0;  -webkit-transform: scaleX(0);  transform: scaleX(0);}
.em-effect06 .em-eff06-03:hover:after { -webkit-transform: scaleX(1);  transform: scaleX(1);}
.em-effect06 .em-eff06-04:after { width: 0;  height: 0;  top: 0;  left: 0;}
.em-effect06 .em-eff06-04:before {  width: 0;  height: 0;  bottom: 0;  right: 0;  content: '';  position: absolute;  z-index: 1;  height: 0;  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;  -o-transition: all 500ms ease;  transition: all 500ms ease;  -moz-backface-visibility: hidden;  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;  background: rgba(0, 0, 0, 0.18);
}
.em-effect06 .em-eff06-04:hover:after{
  width: 100%;
  height: 100%;
}
.em-effect06 .em-eff06-04:hover:before{
  width: 100%;
  height: 100%;
}