/* button
****************************************************/

.button {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  outline: none;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}


/* effect
****************************************************/

/* effect1 */
.eff_1{
  background-color: #333;
  color: #fff;
}
.eff_1:hover {
  background-color: #59b1eb;
}

/* effect2 */
.eff_2 {
  background-color: #333;
  border: 2px solid #333;
  color: #fff;
  line-height: 50px;
}
.eff_2:hover {
  background-color: #fff;
  border-color: #59b1eb;
  color: #59b1eb;
}

/* effect3 */
.eff_3 {
  position: relative;
  z-index: 2;
  background-color: #333;
  border: 2px solid #333;
  color: #fff;
  line-height: 50px;
}
.eff_3:hover {
  background-color: #fff;
  border-color: #59b1eb;
  color: #59b1eb;
}
.eff_3::before,
.eff_3::after {
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #333;
}
.eff_3::before {
  right: 0;
}
.eff_3::after {
  left: 0;
}
.eff_3:hover::before,
.eff_3:hover::after {
  width: 0;
  background-color: #59b1eb;
}

/* effect4 */
.eff_4 {
  position: relative;
  z-index: 2;
  background-color: #333;
  border: 2px solid #333;
  color: #fff;
  line-height: 50px;
}
.eff_4:hover {
  background-color: #fff;
  border-color: #59b1eb;
  color: #59b1eb;
}
.eff_4::before,
.eff_4::after {
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #333;
}
.eff_4::before {
  top: 0;
}
.eff_4::after {
  bottom: 0;
}
.eff_4:hover::before,
.eff_4:hover::after {
  height: 0;
  background-color: #59b1eb;
}

/* effect5 */
.eff_5 {
  background-color: #333;
  color: #fff;
}
.eff_5:hover {
  letter-spacing: 5px;
}

/* effect6 */
.eff_6 {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  line-height: 50px;
}
.eff_6:hover {
  background-color: rgba(255, 255, 255, .2);
}

/* effect7 */
.eff_7 {
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  line-height: 50px;
}
.eff_7:hover {
  border-style: dashed;
}

/* effect8 */
.eff_8 {
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  line-height: 48px;
}
.eff_8::after {
  top: 4px;
  left: 4px;
  width: 188px;
  height: 42px;
  border: 2px solid #333;
  opacity: 0;
}
.eff_8:hover::after {
  opacity: 1;
}

/* effect9 */
.eff_9 {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.eff_9::after {
  top: -100%;
  width: 100%;
  height: 100%;
}
.eff_9:hover::after {
  top: 0;
  background-color: #90ce23;
  opacity:0.5;
}

/* effect10 */
.eff_10 {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.eff_10:hover {
  color: #fff;
}
.eff_10::after {
  top: -100%;
  left: -100%;
  width: 100%;
  height: 100%;
}
.eff_10:hover::after {
  top: 0;
  left: 0;
  background-color: #00a358;
  opacity:.80;
}
/* effect11 */
.eff_11 {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.eff_11:hover {
  color: #fff;
}
.eff_11::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
.eff_11:hover::after {
  background: #90ce23;
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity:.5;
}

/* effect12 */
.eff_12 {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.eff_12:hover {
  color: #fff;
}
.eff_12::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.eff_12:hover::after {
  -webkit-transform: scale(2) rotate(180deg);
  transform: scale(2) rotate(180deg);
  background: #333;
}

/* effect13 */
.eff_13 {
  position: relative;
  z-index: 2;
  -webkit-perspective:300px;
  perspective:300px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.eff_13::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #90ce23;
  border-radius:50%;
  -webkit-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  opacity: 0;
}
.eff_13:hover::after {
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
  opacity: .5;
}

/* effect14 */
.eff_14 {
  position: relative;
  z-index: 2;
  border: 2px solid #333;
  color: #fff;
  line-height: 50px;
  -webkit-perspective: 300px;
  perspective: 300px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.eff_14:hover {
  color: #333;
}
.eff_14::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
}
.eff_14:hover::after {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}

/* effect15 */
.eff_15 {
  position: relative;
  -webkit-perspective: 300px;
  perspective: 300px;
}
.eff_15 span {
  display: block;
  position: absolute;
  width: 200px;
  height: 60px;
  border: 2px solid #333;
  text-align: center;
  line-height: 56px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
  pointer-events: none;
}
.eff_15 span:nth-child(1) {
  background-color: #333;
  color: #fff;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -30px;
  -moz-transform-origin: 50% 50% -30px;
  transform-origin: 50% 50% -30px;
}
.eff_15 span:nth-child(2) {
  background-color: #fff;
  color: #333;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -30px;
  -moz-transform-origin: 50% 50% -30px;
  transform-origin: 50% 50% -30px;
}
.eff_15:hover span:nth-child(1) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.eff_15:hover span:nth-child(2) {
  background-color: #333;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}



/* button2
****************************************************/

.button2 img{ transition: all 0.2s ease; }


/* effect2
****************************************************/
/* eff2no1 */
.eff2no1 img:hover {
	-webkit-transform:	scale(0.7);
	transform:		scale(0.7);
}
/* eff2no2 */
.eff2no2 img:hover {
	-webkit-transform:	scale(1.5);
	transform:		scale(1.5);
}
/* eff2no3 */
.eff2no3 {
	overflow:		hidden;
}
.eff2no3 img:hover {
	-webkit-transform:	scale(1.5);
	transform:		scale(1.5);
}
/* eff2no4 */
.eff2no4 {
	overflow:		hidden;
}
.eff2no4 img:hover {
	-webkit-transform:	scaleX(1.5);
	transform:		scaleX(1.5);
}
/* eff2no5 */
.eff2no5 {
	overflow:		hidden;
}
.eff2no5 img:hover {
	-webkit-transform:	scaleY(1.5);
	transform:		scaleY(1.5);
}
/* eff2no6 */
.eff2no6 {
	overflow:		hidden;
}
.eff2no6 img {
	transform:		rotate(0) scale(1);
	-webkit-transform:	rotate(0) scale(1);
	transition:		all 0.2s ease;
}
.eff2no6 img:hover {
	transform:		rotate(45deg) scale(1.5);
	-webkit-transform:	rotate(45deg) scale(1.5);
}
/* eff2no7 */
.eff2no7 {
	overflow:		hidden;
}
.eff2no7 img:hover {
	-webkit-transform:	rotate(360deg);
	transform:		rotate(360deg);
}
.eff2no7 img {
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
/* eff2no8 */
.eff2no8:hover img {
	-webkit-transform:	rotateY(180deg);
	transform:		rotateY(180deg);
}
.eff2no8 img, #sample8:hover img {
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
/* eff2no9 */
.eff2no9:hover img {
	-webkit-transform:	rotateX(180deg);
	transform:		rotateX(180deg);
}
.eff2no9 img, #sample9:hover img {
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}