/* Bounce To Right */
.btn_bounce_right{
	transition: 0.5s;
	-webkit-transition: 0.5s;
}

.btn_bounce_right::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	background: #f6e607;
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition:transform 0.5s ease-out;
	transition:transform 0.5s ease-out;
}

.btn_bounce_right:hover{
	color: #000;
}

.btn_bounce_right:hover:before{
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.51, 1.65, 0.36, 0.65);
  transition-timing-function: cubic-bezier(0.51, 1.65, 0.36, 0.65);
}



/* Bounce To Left */
.btn_bounce_left{
	transition: 0.5s;
	-webkit-transition: 0.5s;
}

.btn_bounce_left::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	background: #f6e607;
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition:transform 0.5s ease-out;
	transition:transform 0.5s ease-out;
}

.btn_bounce_left:hover{
	color: #000;
}

.btn_bounce_left:hover:before{
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.51, 1.65, 0.36, 0.65);
  transition-timing-function: cubic-bezier(0.51, 1.65, 0.36, 0.65);
}



/* Bounce To Bottom */
.btn_bounce_bottom{
	transition: 0.5s;
	-webkit-transition: 0.5s;
}

.btn_bounce_bottom::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	background: #f6e607;
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transition:transform 0.5s ease-out;
	transition:transform 0.5s ease-out;
}

.btn_bounce_bottom:hover{
	color: #000;
}

.btn_bounce_bottom:hover:before{
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition-timing-function: cubic-bezier(0.51, 1.65, 0.36, 0.65);
  transition-timing-function: cubic-bezier(0.51, 1.65, 0.36, 0.65);
}


/* Bounce To Top */
.btn_bounce_top{
	transition: 0.5s;
	-webkit-transition: 0.5s;
}

.btn_bounce_top::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	background: #f6e607;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transition:transform 0.5s ease-out;
	transition:transform 0.5s ease-out;
}

.btn_bounce_top:hover{
	color: #000;
}

.btn_bounce_top:hover:before{
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition-timing-function: cubic-bezier(0.51, 1.65, 0.36, 0.65);
  transition-timing-function: cubic-bezier(0.51, 1.65, 0.36, 0.65);
}


/* Round Out */
.btn_round_out{
	transition: 0.5s;
	-webkit-transition: 0.5s;
}

.btn_round_out:before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #f6e607;
	border-radius: 100%;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-transition:transform 0.3s ease-out;
	transition:transform 0.3s ease-out;

}

.btn_round_out:hover{
	color: #000;
}
.btn_round_out:hover:before{
  -webkit-transform: scale(2);
  transform: scale(2);
}



/* 17 Round In */
.btn_round_in{
	transition: 0.5s;
	-webkit-transition: 0.5s;
	background: #f6e607;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
}

.btn_round_in:before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	border-radius: 100%;
	-webkit-transform: scale(2);
	transform: scale(2);
	-webkit-transition:transform 0.3s ease-out;
	transition:transform 0.3s ease-out;

}

.btn_round_in:hover{
	color: #000;
}
.btn_round_in:hover:before{
  -webkit-transform: scale(0);
  transform: scale(0);
}


/* Rectangle Out */
.btn_rectangle_out{
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
}

.btn_rectangle_out:before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #f6e607;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-transition:transform 0.3s ease-out;
	transition:transform 0.3s ease-out;

}

.btn_rectangle_out:hover{
	color: #000;
}
.btn_rectangle_out:hover:before{
  -webkit-transform: scale(1);
  transform: scale(1);
}



/* Rectangle In */
.btn_rectangle_in{
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	background: #f6e607;
}

.btn_rectangle_in:before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition:transform 0.3s ease-out;
	transition:transform 0.3s ease-out;

}

.btn_rectangle_in:hover{
	color: #000;
}
.btn_rectangle_in:hover:before{
  -webkit-transform: scale(0);
  transform: scale(0);
}


/* Door In Horizontal */
.btn_door_in_horizontal{
	transition: 0.5s;
	-webkit-transition: 0.5s;
	background-color: #f6e607;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
}

.btn_door_in_horizontal:before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	-webkit-transition:transform 0.3s ease-out;
	transition:transform 0.3s ease-out;

}

.btn_door_in_horizontal:hover{
	color: #000;
}
.btn_door_in_horizontal:hover:before{
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}



/* Door Out Horizontal */
.btn_door_out_horizontal{
	transition: 0.5s;
	-webkit-transition: 0.5s;
	background-color: #ca173f;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
}

.btn_door_out_horizontal:before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	-webkit-transition:transform 0.3s ease-out;
	transition:transform 0.3s ease-out;

}

.btn_door_out_horizontal:hover{
	color: #ca173f;
}
.btn_door_out_horizontal:hover:before{
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}


/* Door In Vertical */
.btn_door_in_vertical{
	transition: 0.5s;
	-webkit-transition: 0.5s;
	background-color: #f6e607;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
}

.btn_door_in_vertical:before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	-webkit-transition:transform 0.3s ease-out;
	transition:transform 0.3s ease-out;

}

.btn_door_in_vertical:hover{
	color: #000;
}
.btn_door_in_vertical:hover:before{
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
}


/* Door Out Vertical */
.btn_door_out_vertical{
	transition: 0.5s;
	-webkit-transition: 0.5s;
	background-color: #000;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
}

.btn_door_out_vertical:before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #f6e607;
	  -webkit-transform: scaleY(0);
	  transform: scaleY(0);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	-webkit-transition:transform 0.3s ease-out;
	transition:transform 0.3s ease-out;

}

.btn_door_out_vertical:hover{
	color: #000;
}
.btn_door_out_vertical:hover:before{
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
}



/* POSITION AWARE */

.btn_position_aware {
  color: #fff;
}
.btn_position_aware span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #f6e607;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: -1;
}
.btn_position_aware:hover {
  color: #000;
}
.btn_position_aware:hover span {
  width: 225%;
  height: 562.5px;
}
.btn_position_aware:active {
  background-color: #f6e607;
}



/* DIAGONAL SWIPE */

.btn_diagonal_swipe {
	color: #fff;
}
.btn_diagonal_swipe:before {
	content: '';
	position: absolute;
	top: 0;
	right: -50px;
	bottom: 0;
	left: 0;
	border-right: 50px solid transparent;
	border-bottom: 80px solid #f6e607;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	z-index: -1;
	transition: 0.5s ease-in-out;
}
.btn_diagonal_swipe:hover {
	color: #000;
}
.btn_diagonal_swipe:hover:before {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}


/* Alternate */
.btn_alternate {
	color: #fff;
}
.btn_alternate span{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}

.btn_alternate:before,
.btn_alternate:after,
.btn_alternate span:before,
.btn_alternate span:after {
	content: '';
	position: absolute;
	top: 0;
	width: 25.25%;
	height: 0;
	background-color: #f6e607;
	z-index: -1;
}
.btn_alternate:before {
	left: 0;
	z-index: -1;
	transition: 0.5s ease-in-out;
}
.btn_alternate:after {
	left: 50%;
	z-index: -1;
	transition: 0.5s ease-in-out;
}
.btn_alternate span:before,
.btn_alternate span:after {
	top: auto;
	bottom: 0;
	z-index: -1;
	transition: 0.5s ease-in-out;
}
.btn_alternate span:before {
	left: 25%;
}
.btn_alternate span:after {
	left: 75%;
}
.btn_alternate:hover{
	cursor: pointer;
}
.btn_alternate:hover .menu_btn{
	color: #000;
}
.btn_alternate:hover:before,
.btn_alternate:hover:after,
.btn_alternate:hover span:before,
.btn_alternate:hover span:after {
	height: 100%;
}


/* DOUBLE SWIPE */

.btn_double_swipe {
/*  color: #c8bdb5;*/
}
.btn_double_swipe:before, .btn_double_swipe:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-bottom: 80px solid #f6e607;
	transition: 0.5s ease-in-out;
	z-index: -1;
}
.btn_double_swipe:before {
	right: -50px;
	border-right: 50px solid transparent;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}
.btn_double_swipe:after {
	left: -50px;
	border-left: 50px solid transparent;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}
.btn_double_swipe:hover {
	color: #000;
}
.btn_double_swipe:hover:before {
	-webkit-transform: translateX(-25%);
	transform: translateX(-25%);
}
.btn_double_swipe:hover:after {
	-webkit-transform: translateX(25%);
	transform: translateX(25%);
}



/* DIAGONAL CLOSE */

.btn_diagonal_close {
/*  color: #948991;*/
}
.btn_diagonal_close:before, .btn_diagonal_close:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: 0.5s ease-in-out;
	z-index: -1;
}
.btn_diagonal_close:before {
	right: -50px;
	border-right: 50px solid transparent;
	border-bottom: 80px solid #f6e607;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}
.btn_diagonal_close:after {
	left: -50px;
	border-left: 50px solid transparent;
	border-top: 80px solid #f6e607;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}
.btn_diagonal_close:hover {
	color: #000;
}
.btn_diagonal_close:hover:before {
	-webkit-transform: translateX(-49%);
	transform: translateX(-49%);
}
.btn_diagonal_close:hover:after {
	-webkit-transform: translateX(49%);
	transform: translateX(49%);
}


/* VERTICAL OVERLAP */

.btn_vertical_overlap {
	overflow: hidden;
}

.btn_vertical_overlap span{
	width: 100%;
	display: inline-block;
}
.btn_vertical_overlap:before, .btn_vertical_overlap:after,
.btn_vertical_overlap span:before,
.btn_vertical_overlap span:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background-color: rgba(246, 230, 7, 0.45);
	transition: 0.4s ease-in-out;
	z-index: -1;
}
.btn_vertical_overlap:after,
.btn_vertical_overlap span:before {
	top: auto;
	bottom: 0;
}
.btn_vertical_overlap span:before,
.btn_vertical_overlap span:after {
	transition-delay: 0.4s;
}
.btn_vertical_overlap:hover .menu_btn{
  color: #000;
}
.btn_vertical_overlap:hover:before, .btn_vertical_overlap:hover:after,
.btn_vertical_overlap:hover span:before,
.btn_vertical_overlap:hover span:after {
	height: 100%;
}
.btn_vertical_overlap:active .menu_btn{
	background-color: #f6e607;
}


/* HORIZONTAL OVERLAP */

.btn_horizontal_overlap {
	overflow: hidden;
/*  color: #895f2b;*/
}
.btn_horizontal_overlap span{
	width: 100%;
	display: inline-block;
}

.btn_horizontal_overlap:before, .btn_horizontal_overlap:after,
.btn_horizontal_overlap span:before,
.btn_horizontal_overlap span:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 80px;
  background-color: rgba(246, 230, 7, 0.45);
  transition: 0.4s;
	z-index: -1;
}
.btn_horizontal_overlap:after,
.btn_horizontal_overlap span:before {
  left: auto;
  right: 0;
}
.btn_horizontal_overlap span:before,
.btn_horizontal_overlap span:after {
  transition-delay: 0.4s;
}
.btn_horizontal_overlap:hover  .menu_btn{
  color: #000;
}
.btn_horizontal_overlap:hover:before, .btn_horizontal_overlap:hover:after,
.btn_horizontal_overlap:hover span:before,
.btn_horizontal_overlap:hover span:after {
  width: 100%;
}
.btn_horizontal_overlap:active .menu_btn{
  background-color: #f6e607;
}


/* CROSS OVERLAP */
.btn_cross_overlap{
	-webkit-transition: 0.7s;
	-moz-transition: 0.7s;
}

.btn_cross_overlap > .layer {
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.btn_cross_overlap > .layer::before,
.btn_cross_overlap > .layer::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: 0.7s;
	-webkit-transition: 0.7s;
	-moz-transition: 0.7s;
}

.btn_cross_overlap > .layer::before,
.btn_cross_overlap > .layer::after {
	background-color: rgba(246, 230, 7, 0.80);
	opacity: 0.5;
}
.btn_cross_overlap > .layer.one::before {
	-webkit-transform: translateY(-101%);
	transform: translateY(-101%);
}

.btn_cross_overlap > .layer.one::after {
	-webkit-transform: translateY(101%);
	transform: translateY(101%);
}

.btn_cross_overlap > .layer.two::before {
	-webkit-transform: translateX(-101%);
	transform: translateX(-101%);
}
.btn_cross_overlap > .layer.two::after {
	-webkit-transform: translateX(101%);
	transform: translateX(101%);
}

.btn_cross_overlap:hover > .layer.one::before, 
.btn_cross_overlap:hover > .layer.one::after, 
.btn_cross_overlap:hover > .layer.two::before, 
.btn_cross_overlap:hover > .layer.two::after {
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

.btn_cross_overlap:hover > .layer.two::before, 
.btn_cross_overlap:hover > .layer.two::after {
	transition-delay: 0.3s;
}

.btn_cross_overlap:hover{
	color:#000;
}


/* FOUR CORNERS */
.btn_four_corners {
	overflow: hidden;
}
.btn_four_corners span{
	width: 100%;
	display: inline-block;
}

.btn_four_corners:before, .btn_four_corners:after,
.btn_four_corners span:before,
.btn_four_corners span:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #f6e607;
	z-index: -1;
  transition: 0.5s ease-in-out;
}
.btn_four_corners:before {
	-webkit-transform: translate(-100%, -100%);
	transform: translate(-100%, -100%);
}
.btn_four_corners:after {
	-webkit-transform: translate(-100%, 100%);
	transform: translate(-100%, 100%);
}
.btn_four_corners span:before {
	-webkit-transform: translate(100%, -100%);
	transform: translate(100%, -100%);
}
.btn_four_corners span:after {
	-webkit-transform: translate(100%, 100%);
	transform: translate(100%, 100%);
}
.btn_four_corners:hover {
	color: #000;
}
.btn_four_corners:hover:before {
	-webkit-transform: translate(-49%, -49%);
	transform: translate(-49%, -49%);
}
.btn_four_corners:hover:after {
	-webkit-transform: translate(-49%, 49%);
	transform: translate(-49%, 49%);
}
.btn_four_corners:hover span:before {
	-webkit-transform: translate(49%, -49%);
	transform: translate(49%, -49%);
}
.btn_four_corners:hover span:after {
	-webkit-transform: translate(49%, 49%);
	transform: translate(50%, 49%);
}



/* COLLISION */
@-webkit-keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}

@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}
@-webkit-keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}
@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}
.btn_collision {
	position: relative;
}
.btn_collision:before, .btn_collision:after {
	position: absolute;
	top: 50%;
	content: '';
	width: 20px;
	height: 20px;
	background-color: #f6e607;
	border-radius: 50%;
	transition: 0.5s ease-in-out;
	z-index: -1;
}
.btn_collision:before {
	left: -20px;
	-webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
}
.btn_collision:after {
	right: -20px;
	-webkit-transform: translate(50%, -50%);
		  transform: translate(50%, -50%);
}
.btn_collision:hover {
  color: #000;
}
.btn_collision:hover:before {
	-webkit-animation: criss-cross-left 0.8s both;
		  animation: criss-cross-left 0.8s both;
	-webkit-animation-direction: alternate;
		  animation-direction: alternate;
}
.btn_collision:hover:after {
	-webkit-animation: criss-cross-right 0.8s both;
		  animation: criss-cross-right 0.8s both;
	-webkit-animation-direction: alternate;
		  animation-direction: alternate;
}


/* GIBSON ONE */
.btn_gibson_one{
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
}

.btn_gibson_one:after {
	content: "";
	position: absolute;
	height: 0%;
	left: 50%;
	top: 50%;
	width: 150%;
	z-index: -1;
	-webkit-transition: all 0.75s ease 0s;
	transition: all 0.75s ease 0s;
	opacity: 0;
	background-image: -webkit-linear-gradient( transparent 50%, rgba(246, 230, 7, 0.5) 50%);
	background-image: -moz-linear-gradient(transparent 50%, rgba(246, 230, 7,0.5) 50%);
	background-size: 10px 10px;
	-moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
	transform: translateX(-50%) translateY(-50%) rotate(25deg);
}

.btn_gibson_one:hover{
/*	color: #000;*/
}

.btn_gibson_one:hover:after {
	height: 600% !important;
	opacity: 1;
	color: #FFF;
}



/* GIBSON TWO */
.btn_gibson_two{
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
}

.btn_gibson_two:after {
	content: "";
	position: absolute;
	height: 0%;
	left: 50%;
	top: 50%;
	width: 150%;
	z-index: -1;
	-webkit-transition: all 0.75s ease 0s;
	transition: all 0.75s ease 0s;
	opacity: 0;
	background-image: -webkit-linear-gradient( transparent 50%, rgba(246, 230, 7, 0.5) 50%);
	background-image: -moz-linear-gradient(transparent 50%, rgba(246, 230, 7,0.5) 50%);
	background-size: 10px 10px;
	-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}

.btn_gibson_two:hover{
/*	color: #000;*/
}

.btn_gibson_two:hover:after {
	height: 600% !important;
	opacity: 1;
	color: #FFF;
}



/* GIBSON THREE */
.btn_gibson_three{
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
}

.btn_gibson_three:after {
	content: "";
	position: absolute;
	height: 0%;
	left: 50%;
	top: 50%;
	width: 150%;
	z-index: -1;
	-webkit-transition: all 0.75s ease 0s;
	transition: all 0.75s ease 0s;
	opacity: 0;
	background-image: -webkit-linear-gradient( transparent 50%, rgba(246, 230, 7, 0.5) 50%);
	background-image: -moz-linear-gradient(transparent 50%, rgba(246, 230, 7,0.5) 50%);
	background-size: 10px 10px;
	-moz-transform: translateX(-50%) translateY(-50%) rotate(90deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(90deg);
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
	transform: translateX(-50%) translateY(-50%) rotate(90deg);
}

.btn_gibson_three:hover{
/*	color: #000;*/
}

.btn_gibson_three:hover:after {
	height: 600% !important;
	opacity: 1;
	color: #FFF;
}



/* GIBSON FOUR */
.btn_gibson_four{
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
}

.btn_gibson_four:after {
	content: "";
	position: absolute;
	height: 0%;
	left: 50%;
	top: 50%;
	width: 150%;
	z-index: -1;
	-webkit-transition: all 0.75s ease 0s;
	transition: all 0.75s ease 0s;
	opacity: 0;
	background-image: -webkit-linear-gradient( transparent 50%, rgba(246, 230, 7, 0.5) 50%);
	background-image: -moz-linear-gradient(transparent 50%, rgba(246, 230, 7,0.5) 50%);
	background-size: 10px 10px;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%));
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.btn_gibson_four:hover{
/*	color: #000;*/
}

.btn_gibson_four:hover:after {
	height: 600% !important;
	opacity: 1;
	color: #FFF;
}



/* TV EFFECT */
.tveffect .menu_btn{
	padding: 0
}

.tveffect .btn_about{
	width: 270px;
}


.btn_tveffect div {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.btn_tveffect div:nth-child(1) {
    color: #fff;
    background-color: #000000;
    -webkit-transition: all 0.1s ease;
/*    padding: 10px;*/
/*    border: #000000 solid 1px;*/
}

.btn_tveffect div:nth-child(2) {
    overflow: hidden;
}

.btn_tveffect div:nth-child(2) div {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
/*    padding: 10px;*/
    border: #000000 hidden 1px;
}

.btn_tveffect div:nth-child(2) div:nth-child(1) {
    color: rgba(200, 120, 120, 0.8);
    opacity: 0;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat;
}

.btn_tveffect div:nth-child(2) div:nth-child(2) {
    color: rgba(120, 200, 120, 0.8);
    opacity: 0;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat;
}

.btn_tveffect div:nth-child(2) div:nth-child(3) {
    color: rgba(120, 120, 200, 0.8);
    opacity: 0;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat;
}

.btn_tveffect:hover div:nth-child(1) {
    color: #ffffff;
    background-color: #000000;
    transition: color 0s ease;
    -webkit-transition: color 0s ease;
    -moz-transition: color 0s ease;
    transition: background-color 0.3s ease 0.2s;
    -webkit-transition: background-color 0.3s ease 0.2s;
    -moz-transition: background-color 0.3s ease 0.2s;
}

.btn_tveffect:hover div:nth-child(2) div:nth-child(1) {
    animation: btn_tveffect_red 0.25s linear;
    -webkit-animation: btn_tveffect_red 0.25s linear;
    -moz-animation: btn_tveffect_red 0.25s linear;
}

.btn_tveffect:hover div:nth-child(2) div:nth-child(2) {
    animation: btn_tveffect_green 0.25s linear;
    -webkit-animation: btn_tveffect_green 0.25s linear;
    -moz-animation: btn_tveffect_green 0.25s linear;
}

.btn_tveffect:hover div:nth-child(2) div:nth-child(3) {
    animation: btn_tveffect_blue 0.25s linear;
    -webkit-animation: btn_tveffect_blue 0.25s linear;
    -moz-animation: btn_tveffect_blue 0.25s linear;
}

@-webkit-keyframes btn_tveffect_red {
    from,
    to {
        opacity: 0;
    }
    25% {
        opacity: 1;
        -webkit-transform: scale(1.8, 1.6) translate(-10px, 3px) skewX(30deg);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.5, 1.2) translate(20px, 6px) skewX(5deg);
    }
    75% {
        opacity: 1;
        -webkit-transform: scale(0.9, 1.8) translate(-16px, -1px) skewX(-20deg);
    }
}

@-webkit-keyframes btn_tveffect_green {
    from,
    to {
        opacity: 0;
    }
    25% {
        opacity: 1;
        -webkit-transform: scale(1.3, 1.5) translate(3px, 6px) skewX(25deg);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.6, 1.1) translate(-16px, -5px) skewX(-15deg);
    }
    75% {
        opacity: 1;
        -webkit-transform: scale(1, 1.8) translate(18px, 4px) skewX(15deg);
    }
}

@-webkit-keyframes btn_tveffect_blue {
    from,
    to {
        opacity: 0;
    }
    25% {
        opacity: 1;
        -webkit-transform: scale(1.2, 1.4) translate(-10px, -3px) skewX(-25deg);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.9, 1.1) translate(16px, 3px) skewX(5deg);
    }
    75% {
        opacity: 1;
        -webkit-transform: scale(1.3, 2) translate(-30px, -3px) skewX(20deg);
    }
}

@-moz-keyframes btn_tveffect_red {
    from,
    to {
        opacity: 0;
    }
    25% {
        opacity: 1;
        transform: scale(1.8, 1.6) translate(-10px, 3px) skewX(30deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.5, 1.2) translate(20px, 6px) skewX(5deg);
    }
    75% {
        opacity: 1;
        transform: scale(0.9, 1.8) translate(-16px, -1px) skewX(-20deg);
    }
}

@-moz-keyframes btn_tveffect_green {
    from,
    to {
        opacity: 0;
    }
    25% {
        opacity: 1;
        transform: scale(1.3, 1.5) translate(3px, 6px) skewX(25deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.6, 1.1) translate(-16px, -5px) skewX(-15deg);
    }
    75% {
        opacity: 1;
        transform: scale(1, 1.8) translate(18px, 4px) skewX(15deg);
    }
}

@-moz-keyframes btn_tveffect_blue {
    from,
    to {
        opacity: 0;
    }
    25% {
        opacity: 1;
        transform: scale(1.2, 1.4) translate(-10px, -3px) skewX(-25deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.9, 1.1) translate(16px, 3px) skewX(5deg);
    }
    75% {
        opacity: 1;
        transform: scale(1.3, 2) translate(-30px, -3px) skewX(20deg);
    }
}



/* Particle Effects BUBBLES */

.textcontainer {
	padding: 40px 0;
	text-align: center;
	padding: 0 auto  30px;
	font-size: 48px;
}

.particletext {
	font-family: 'Roboto', sans-serif;
	font-size: 48px;
	font-weight: 700;
	text-align: center;
}

.particletext.bubbles > .particle {
  opacity: 0;
  position: absolute;
  background-color: rgba(33, 150, 243, 0.5);
  -webkit-animation: bubbles 3s ease-in infinite;
          animation: bubbles 3s ease-in infinite;
  border-radius: 100%;
}

@-webkit-keyframes bubbles {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    -webkit-transform: translate(0, -20%);
            transform: translate(0, -20%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%);
            transform: translate(0, -1000%);
  }
}

@keyframes bubbles {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    -webkit-transform: translate(0, -20%);
            transform: translate(0, -20%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%);
            transform: translate(0, -1000%);
  }
}


/* Particle Effects CONFETTI */

.particletext.confetti > .particle {
  opacity: 0;
  position: absolute;
  -webkit-animation: confetti 3s ease-in infinite;
          animation: confetti 3s ease-in infinite;
}
.particletext.confetti > .particle.c1 {
  background-color: rgba(76, 175, 80, 0.5);
}
.particletext.confetti > .particle.c2 {
  background-color: rgba(156, 39, 176, 0.5);
}

@-webkit-keyframes confetti {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0%) rotate(0deg);
            transform: translateY(0%) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  35% {
    -webkit-transform: translateY(-800%) rotate(270deg);
            transform: translateY(-800%) rotate(270deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000%) rotate(1440deg);
            transform: translateY(2000%) rotate(1440deg);
  }
}
@keyframes confetti {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0%) rotate(0deg);
            transform: translateY(0%) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  35% {
    -webkit-transform: translateY(-800%) rotate(270deg);
            transform: translateY(-800%) rotate(270deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000%) rotate(1440deg);
            transform: translateY(2000%) rotate(1440deg);
  }
}


/* Particle Effects HEARTS */

.particletext.hearts > .particle {
  opacity: 0;
  position: absolute;
  background-color: #cc2a5d;
  -webkit-animation: hearts 3s ease-in infinite;
          animation: hearts 3s ease-in infinite;
}
.particletext.hearts > .particle:before,
.particletext.hearts > .particle:after {
  position: absolute;
  content: '';
  border-radius: 100px;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #cc2a5d;
}
.particletext.hearts > .particle:before {
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.particletext.hearts > .particle:after {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@-webkit-keyframes hearts {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0%) rotate(45deg);
            transform: translate(0, 0%) rotate(45deg);
  }
  20% {
    opacity: 0.8;
    -webkit-transform: translate(0, -20%) rotate(45deg);
            transform: translate(0, -20%) rotate(45deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%) rotate(45deg);
            transform: translate(0, -1000%) rotate(45deg);
  }
}
@keyframes hearts {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0%) rotate(45deg);
            transform: translate(0, 0%) rotate(45deg);
  }
  20% {
    opacity: 0.8;
    -webkit-transform: translate(0, -20%) rotate(45deg);
            transform: translate(0, -20%) rotate(45deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%) rotate(45deg);
            transform: translate(0, -1000%) rotate(45deg);
  }
}





/* Particle Effects STARS */

.particletext.stars > .particle {
	opacity: 0;
	position: absolute;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 7px solid #cc2a5d;
	display: block;
	height: 0;
	width: 0;
	-webkit-animation: stars 3s ease-in infinite;
	animation: stars 3s ease-in infinite;
/*	-webkit-animation: starsrotate 3s ease-in infinite;*/
/*	animation: starsrotate 3s ease-in infinite;*/
}
.particletext.stars > .particle:before,
.particletext.stars > .particle:after {
	position: absolute;
	content: '';
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 7px solid #cc2a5d;
	top: 0px;
	left: -10px;
	width: 0;
	height: 0;
	display: block;
}
.particletext.stars > .particle:before {
  -webkit-transform: rotate(71deg);
          transform: rotate(71deg);
}
.particletext.stars > .particle:after {
  -webkit-transform: rotate(-71deg);
          transform: rotate(-71deg);
}

@-webkit-keyframes stars {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0%) rotate(180deg);
            transform: translate(0, 0%) rotate(180deg);
  }
  20% {
    opacity: 0.8;
    -webkit-transform: translate(0, -20%) rotate(180deg);
            transform: translate(0, -20%) rotate(180deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%) rotate(180deg);
            transform: translate(0, -1000%) rotate(180deg);
  }
}
@keyframes stars {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0%) rotate(180deg);
            transform: translate(0, 0%) rotate(180deg);
  }
  20% {
    opacity: 0.8;
    -webkit-transform: translate(0, -20%) rotate(180deg);
            transform: translate(0, -20%) rotate(180deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%) rotate(180deg);
            transform: translate(0, -1000%) rotate(180deg);
  }
}


@-webkit-keyframes starsrotate {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0%) rotate(180deg);
            transform: translate(0, 0%) rotate(180deg);
  }
  20% {
    opacity: 0.8;
    -webkit-transform: translate(0, -20%) rotate(252deg);
            transform: translate(0, -20%) rotate(252deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%) rotate(540deg);
            transform: translate(0, -1000%) rotate(540deg);
  }
}
@keyframes starsrotate {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0%) rotate(180deg);
            transform: translate(0, 0%) rotate(180deg);
  }
  20% {
    opacity: 0.8;
    -webkit-transform: translate(0, -20%) rotate(252deg);
            transform: translate(0, -20%) rotate(252deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%) rotate(540deg);
            transform: translate(0, -1000%) rotate(540deg);
  }
}










/* Particle Effects fire */

.particletext.fire > .particle {
  position: absolute;
  background-color: rgba(255, 193, 7, 0.5);
  border-radius: 40px;
  border-top-right-radius: 0px;
  -webkit-animation: fires 0.8s linear infinite;
          animation: fires 0.8s linear infinite;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  opacity: 0;
}
.particletext.fire > .particle:before {
  position: absolute;
  content: '';
  top: 60%;
  left: 40%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  border-radius: 40px;
  border-top-right-radius: 0px;
  background-color: rgba(251, 140, 0, 0.5);
}

@-webkit-keyframes fires {
  0% {
    -webkit-transform: rotate(-70deg) translateY(0%);
            transform: rotate(-70deg) translateY(0%);
  }
  25% {
    -webkit-transform: rotate(-20deg) translateY(-5%);
            transform: rotate(-20deg) translateY(-5%);
    opacity: 1;
  }
  50% {
    -webkit-transform: rotate(-70deg) translateY(-10%);
            transform: rotate(-70deg) translateY(-10%);
  }
  75% {
    -webkit-transform: rotate(-20deg) translateY(-20%);
            transform: rotate(-20deg) translateY(-20%);
  }
  100% {
    -webkit-transform: rotate(-70deg) translateY(-40%);
            transform: rotate(-70deg) translateY(-40%);
    opacity: 1;
  }
}
@keyframes fires {
  0% {
    -webkit-transform: rotate(-70deg) translateY(0%);
            transform: rotate(-70deg) translateY(0%);
  }
  25% {
    -webkit-transform: rotate(-20deg) translateY(-5%);
            transform: rotate(-20deg) translateY(-5%);
    opacity: 1;
  }
  50% {
    -webkit-transform: rotate(-70deg) translateY(-10%);
            transform: rotate(-70deg) translateY(-10%);
  }
  75% {
    -webkit-transform: rotate(-20deg) translateY(-20%);
            transform: rotate(-20deg) translateY(-20%);
  }
  100% {
    -webkit-transform: rotate(-70deg) translateY(-40%);
            transform: rotate(-70deg) translateY(-40%);
    opacity: 1;
  }
}