.hovicon {
	display: inline-block;
	font-size: 45px;
	line-height: 90px;
	cursor: pointer;
	margin: 20px;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	text-align: center;
	position: relative;
	text-decoration: none;
	z-index: 1;
}

.hovicon.small {
	font-size: 20px;
	line-height: 45px;
	width: 45px;
	height: 45px;
	margin: 7px;
}

.hovicon.mini {
	font-size: 15px;
	line-height: 32px;
	width: 30px;
	height: 30px;
	margin: 7px;
}

.hovicon.auto-width {
	width: auto;
	height: auto;
	padding: 15px;
}

.hovicon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.hovicon:before {
	speak: none;
	font-size: 48px;
	line-height: 90px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	display: block;
	-webkit-font-smoothing: antialiased;
}


/* Effect 1 */

.hovicon.effect-1 {
	background: rgba(255, 255, 255, 0.1);
	-webkit-transition: background 0.2s, color 0.2s;
	-moz-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
}

.hovicon.effect-1:after {
	top: -7px;
	left: -7px;
	padding: 7px;
	box-shadow: 0 0 0 4px #fff;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	-webkit-transform: scale(.8);
	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
	-moz-transform: scale(.8);
	-ms-transform: scale(.8);
	transition: transform 0.2s, opacity 0.2s;
	transform: scale(.8);
	opacity: 0;
}


/* Effect 1a */

.hovicon.effect-1.sub-a:hover {
	background: grey;
	color: #41ab6b;
}

.hovicon.effect-1.sub-a:hover i {
	color: #41ab6b;
}

.hovicon.effect-1.sub-a:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}


/* Effect 1b */

.hovicon.effect-1.sub-b:hover {
	background: rgba(255, 255, 255, 1);
	color: #41ab6b;
}

.hovicon.effect-1.sub-b:hover i {
	color: #41ab6b;
}

.hovicon.effect-1.sub-b:after {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

.hovicon.effect-1.sub-b:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}


/* Effect 2 */

.hovicon.effect-2 {
	color: #eea303;
	box-shadow: 0 0 0 3px #fff;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.hovicon.effect-2:after {
	top: -2px;
	left: -2px;
	padding: 2px;
	z-index: -1;
	background: #fff;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
	transition: transform 0.2s, opacity 0.2s;
}


/* Effect 2a */

.hovicon.effect-2.sub-a:hover,
.hovicon.effect-2.sub-a:hover i {
	color: #eea303;
}

.hovicon.effect-2.sub-a:hover:after {
	-webkit-transform: scale(0.85);
	-moz-transform: scale(0.85);
	-ms-transform: scale(0.85);
	transform: scale(0.85);
}


/* Effect 2b */

.hovicon.effect-2.sub-b:hover:after {
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	opacity: 0;
	-webkit-transition: -webkit-transform 0.4s, opacity 0.2s;
	-moz-transition: -moz-transform 0.4s, opacity 0.2s;
	transition: transform 0.4s, opacity 0.2s;
}

.hovicon.effect-2.sub-b:hover,
.hovicon.effect-2.sub-b:hover i {
	color: #fff;
}


/* Effect 3 */

.hovicon.effect-3 {
	box-shadow: 0 0 0 4px #fff;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.hovicon.effect-3:after {
	top: -2px;
	left: -2px;
	padding: 2px;
	z-index: -1;
	background: #fff;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
	-moz-transition: -moz-transform 0.2s, opacity 0.3s;
	transition: transform 0.2s, opacity 0.3s;
}


/* Effect 3a */

.hovicon.effect-3.sub-a,
.hovicon.effect-3.sub-a i {
	color: #f06060;
}

.hovicon.effect-3.sub-a:hover,
.hovicon.effect-3.sub-a:hover i {
	color: #fff;
}

.hovicon.effect-3.sub-a:hover:after {
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
	opacity: 0;
}


/* Effect 3b */

.hovicon.effect-3.sub-b,
.hovicon.effect-3.sub-b i {
	color: #fff;
}

.hovicon.effect-3.sub-b:hover,
.hovicon.effect-3.sub-b:hover i {
	color: #f06060;
}

.hovicon.effect-3.sub-b:after {
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
	opacity: 0;
}

.hovicon.effect-3.sub-b:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}


/* Effect 4 */

.hovicon.effect-4 {
	width: 92px;
	height: 92px;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
}

.hovicon.effect-4.small {
	width: 45px;
	height: 45px;
}

.hovicon.effect-4.mini {
	width: 30px;
	height: 30px;
}

.hovicon.effect-4.sub-a {
	-webkit-transition: box-shadow 0.2s;
	-moz-transition: box-shadow 0.2s;
	transition: box-shadow 0.2s;
}

.hovicon.effect-4:before {
	line-height: 92px;
}

.hovicon.effect-4:after {
	top: -4px;
	left: -4px;
	padding: 0;
	z-index: 10;
	border: 4px dashed #fff;
}

.hovicon.effect-4:hover {
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	color: #fff;
}

.hovicon.effect-4:hover i {
	color: #fff;
}


/* Effect 4b */

.hovicon.effect-4.sub-b:hover {
	-webkit-transition: box-shadow 0.2s;
	-moz-transition: box-shadow 0.2s;
	transition: box-shadow 0.2s;
}

.hovicon.effect-4.sub-b:hover:after {
	-webkit-animation: spinAround 9s linear infinite;
	-moz-animation: spinAround 9s linear infinite;
	animation: spinAround 9s linear infinite;
}

@-webkit-keyframes spinAround {
	from {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes spinAround {
	from {
		-moz-transform: rotate(0deg)
	}
	to {
		-moz-transform: rotate(360deg);
	}
}

@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg);
	}
}


/* Effect 5 */

.hovicon.effect-5 {
	box-shadow: 0 0 0 2px grey;
	overflow: hidden;
	-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
	-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
	transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.hovicon.effect-5:after {
	display: none;
}

.hovicon.effect-5:hover {
	background: rgba(128, 128, 128, 0.53);
	color: #702fa8;
	box-shadow: 0 0 0 8px #fff;
}

.hovicon.effect-5:hover i {
	color: #702fa8;
}

.hovicon.effect-5.sub-a:hover:before {
	-webkit-animation: toRightFromLeft 0.3s forwards;
	-moz-animation: toRightFromLeft 0.3s forwards;
	animation: toRightFromLeft 0.3s forwards;
}

@-webkit-keyframes toRightFromLeft {
	49% {
		-webkit-transform: translate(100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}

@-moz-keyframes toRightFromLeft {
	49% {
		-moz-transform: translate(100%);
	}
	50% {
		opacity: 0;
		-moz-transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}

@keyframes toRightFromLeft {
	49% {
		transform: translate(100%);
	}
	50% {
		opacity: 0;
		transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}

.hovicon.effect-5.sub-b:hover:before {
	-webkit-animation: toLeftFromRight 0.3s forwards;
	-moz-animation: toLeftFromRight 0.3s forwards;
	animation: toLeftFromRight 0.3s forwards;
}

@-webkit-keyframes toLeftFromRight {
	49% {
		-webkit-transform: translate(-100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translate(100%);
	}
	51% {
		opacity: 1;
	}
}

@-moz-keyframes toLeftFromRight {
	49% {
		-moz-transform: translate(-100%);
	}
	50% {
		opacity: 0;
		-moz-transform: translate(100%);
	}
	51% {
		opacity: 1;
	}
}

@keyframes toLeftFromRight {
	49% {
		transform: translate(-100%);
	}
	50% {
		opacity: 0;
		transform: translate(100%);
	}
	51% {
		opacity: 1;
	}
}

.hovicon.effect-5.sub-c:hover:before {
	-webkit-animation: toTopFromBottom 0.3s forwards;
	-moz-animation: toTopFromBottom 0.3s forwards;
	animation: toTopFromBottom 0.3s forwards;
}

@-webkit-keyframes toTopFromBottom {
	49% {
		-webkit-transform: translateY(-100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translateY(100%);
	}
	51% {
		opacity: 1;
	}
}

@-moz-keyframes toTopFromBottom {
	49% {
		-moz-transform: translateY(-100%);
	}
	50% {
		opacity: 0;
		-moz-transform: translateY(100%);
	}
	51% {
		opacity: 1;
	}
}

@keyframes toTopFromBottom {
	49% {
		transform: translateY(-100%);
	}
	50% {
		opacity: 0;
		transform: translateY(100%);
	}
	51% {
		opacity: 1;
	}
}

.hovicon.effect-5.sub-d:hover:before {
	-webkit-animation: toBottomFromTop 0.3s forwards;
	-moz-animation: toBottomFromTop 0.3s forwards;
	animation: toBottomFromTop 0.3s forwards;
}

@-webkit-keyframes toBottomFromTop {
	49% {
		-webkit-transform: translateY(100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translateY(-100%);
	}
	51% {
		opacity: 1;
	}
}

@-moz-keyframes toBottomFromTop {
	49% {
		-moz-transform: translateY(100%);
	}
	50% {
		opacity: 0;
		-moz-transform: translateY(-100%);
	}
	51% {
		opacity: 1;
	}
}

@keyframes toBottomFromTop {
	49% {
		transform: translateY(100%);
	}
	50% {
		opacity: 0;
		transform: translateY(-100%);
	}
	51% {
		opacity: 1;
	}
}


/* Effect 6 */

.hovicon.effect-6 {
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
	-webkit-transition: background 0.2s, color 0.2s;
	-moz-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
}

.hovicon.effect-6:hover {
	background: rgba(255, 255, 255, 1);
	color: #64bb5d;
}

.hovicon.effect-6:hover i {
	color: #64bb5d;
}

.hovicon.effect-6:hover:before {
	-webkit-animation: spinAround 2s linear infinite;
	-moz-animation: spinAround 2s linear infinite;
	animation: spinAround 2s linear infinite;
}


/* Effect 7 */

.hovicon.effect-7 {
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
	-webkit-transition: background 0.2s, color 0.2s;
	-moz-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
}

.hovicon.effect-7:hover,
.hovicon.effect-7:hover i {
	color: #fff;
}

.hovicon.effect-7:after {
	top: -8px;
	left: -8px;
	padding: 8px;
	z-index: -1;
	opacity: 0;
}


/* Effect 7a */

.hovicon.effect-7.sub-a:after {
	box-shadow: 0 0 0 rgba(255, 255, 255, 1);
	-webkit-transition: opacity 0.2s, box-shadow 0.2s;
	-moz-transition: opacity 0.2s, box-shadow 0.2s;
	transition: opacity 0.2s, box-shadow 0.2s;
}

.hovicon.effect-7.sub-a:hover:after {
	opacity: 1;
	box-shadow: 3px 3px 0 rgba(255, 255, 255, 1);
}

.hovicon.effect-7.sub-a:before {
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.7;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
	transition: transform 0.2s, opacity 0.2s;
}

.hovicon.effect-7.sub-a:hover:before {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}


/* Effect 7b */

.hovicon.effect-7.sub-b:after {
	box-shadow: 3px 3px rgba(255, 255, 255, 1);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
	-moz-transition: opacity 0.2s, -moz-transform 0.2s;
	transition: opacity 0.2s, transform 0.2s;
}

.hovicon.effect-7.sub-b:hover:after {
	opacity: 1;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}

.hovicon.effect-7.sub-b:before {
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.7;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
	transition: transform 0.2s, opacity 0.2s;
}

.hovicon.effect-7.sub-b:hover:before {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}


/* Effect 8 */

.hovicon.effect-8 {
	-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
	-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
	transition: transform ease-out 0.1s, background 0.2s;
	margin-left: 85px;
}

.hovicon.effect-8:after {
	top: 0;
	left: 0;
	padding: 0;
	z-index: -1;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
	opacity: 0;
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
}

.hovicon.effect-8:hover {
	background: rgba(255, 255, 255, 0.05);
	-webkit-transform: scale(0.93);
	-moz-transform: scale(0.93);
	-ms-transform: scale(0.93);
	transform: scale(0.93);
	color: #fff;
}

.hovicon.effect-8:hover i {
	color: #fff;
}

.hovicon.effect-8:hover:after {
	-webkit-animation: sonarEffect 1.3s ease-out 75ms;
	-moz-animation: sonarEffect 1.3s ease-out 75ms;
	animation: sonarEffect 1.3s ease-out 75ms;
}

@-webkit-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
		-webkit-transform: scale(1.5);
		opacity: 0;
	}
}

@-moz-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
		-moz-transform: scale(1.5);
		opacity: 0;
	}
}

@keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
		transform: scale(1.5);
		opacity: 0;
	}
}


/* Effect 9 */

.hovicon.effect-9 {
	-webkit-transition: box-shadow 0.2s;
	-moz-transition: box-shadow 0.2s;
	transition: box-shadow 0.2s;
}

.hovicon.effect-9:after {
	top: 0;
	left: 0;
	padding: 0;
	box-shadow: 0 0 0 3px #fff;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
	transition: transform 0.2s, opacity 0.2s;
}


/* Effect 9a */

.hovicon.effect-9.sub-a:hover:after {
	-webkit-transform: scale(0.85);
	-moz-transform: scale(0.85);
	-ms-transform: scale(0.85);
	transform: scale(0.85);
	opacity: 0.5;
}

.hovicon.effect-9.sub-a:hover {
	box-shadow: 0 0 0 10px rgba(255, 255, 255, 1);
	color: #fff;
}

.hovicon.effect-9.sub-a:hover i {
	color: #fff;
}


/* Effect 9b */

.hovicon.effect-9.sub-b:hover:after {
	-webkit-transform: scale(0.85);
	-moz-transform: scale(0.85);
	-ms-transform: scale(0.85);
	transform: scale(0.85);
}

.hovicon.effect-9.sub-b:hover {
	box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
	color: #fff;
}

.hovicon.effect-9.sub-b:hover i {
	color: #fff;
}


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

$red:#F44336;
@mixin transition($in) {
	transition: $in;
	-webkit-transition: $in;
	-moz-transition: $in;
	-o-transition: $in;
	-ms-transition: $in;
}

@mixin transform($in) {
	transform: $in;
	-webkit-transform: $in;
	-moz-transform: $in;
	-o-transform: $in;
	-ms-transform: $in;
}

@mixin animation($in) {
	animation: $in;
	-webkit-animation: $in;
	-moz-animation: $in;
	-o-animation: $in;
	-ms-animation: $in;
}

.myButt {
	outline: none;
	border: none;
	padding: 20px;
	display: block;
	margin: 50px auto;
	cursor: pointer;
	font-size: 20px;
	background-color: transparent;
	position: relative;
	border: 2px solid #fff;
	@include transition(all 0.5s ease);
}

.one .insider {
	background-color: #fff;
	width: 100%;
	height: 20px;
	position: absolute;
	left: -180px;
	transform: rotateZ(45deg);
	-webkit-transform: rotateZ(45deg);
	-moz-transform: rotateZ(45deg);
	-o-transform: rotateZ(45deg);
	-ms-transform: rotateZ(45deg);
}

.one {
	border-color: #fff;
	overflow: hidden;
	color: #fff;
}

.one:hover {
	background-color: #F44336;
	border-color: #fff;
	color: #fff;
}

.one:hover .insider {
	transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	left: 182px;
}

// ################ ONE
.one {
	border-color: #fff;
	overflow: hidden;
	color: #fff;
	.insider {
		background-color: #fff;
		width: 100%;
		height: 20px;
		position: absolute;
		left: -135px;
		@include transform(rotateZ(45deg));
	}
	&:hover {
		background-color: $red;
		border-color: #fff;
		color: #fff;
		.insider {
			@include transition(all 0.3s ease);
			left: 135px;
		}
	}
}

// ################ TWO
.two {
	color: #fff;
	&:hover {
		border-color: $red;
		color: $red;
		@include animation(shakeThatBooty 0.3s linear 1);
	}
}

@keyframes shakeThatBooty {
	33% {
		@include transform(rotateZ(10deg));
	}
	67% {
		@include transform(rotateZ(-10deg));
	}
	100% {
		@include transform(rotateZ(10deg));
	}
}

// ################ THREE
.three {
	color: #fff;
	border-color: transparent;
	&:before {
		width: 0;
		height: 3px;
		content: " ";
		background-color: $red;
		position: absolute;
		top: 0;
		left: 50%;
		@include transition(all 0.3s ease);
	}
	&:after {
		@extend .three: before;
		top: 100%;
	}
	&:hover {
		letter-spacing: 8px;
		color: $red;
		&:before {
			width: 100%;
			left: 0;
		}
		&:after {
			width: 100%;
			left: 0;
		}
	}
}

// ################ FOUR
.four {
	overflow: hidden;
	span {
		color: #fff;
		display: inline-block;
		@include transition(all 0.3s ease);
	}
	.icon {
		position: absolute;
		left: -60px;
		top: 0;
		color: #fff;
		padding: 20px;
		background-color: $red;
		@include transition(all 0.3s ease);
	}
	&:hover {
		.icon {
			left: 0px;
		}
		span {
			color: $red;
			margin-left: 50px;
		}
	}
}

// ################ FIVE
.five {
	overflow: hidden;
	color: #fff;
	.layer {
		color: #fff;
		position: absolute;
		top: -70px;
		width: 100%;
		left: 0;
		padding: 20px 0;
		background-color: $red;
		@include transition(all 0.3s ease);
	}
	&:hover {
		.layer {
			top: 0;
		}
	}
}


/********** send-btn **********/

.hvr-radial-out {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	position: relative;
	overflow: hidden;
	background: #e1e1e1;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hvr-radial-out:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #127d27;
	border-radius: 100%;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hvr-radial-out:hover:before,
.hvr-radial-out:focus:before,
.hvr-radial-out:active:before {
	-webkit-transform: scale(2);
	transform: scale(2);
}


/******** sign-btn *******/

/////////////////////////////
//button-5 
///////////////////////////
.btn-5 {
	border: 0 solid;
	box-shadow: inset 0 0 20px #000;
	outline: 1px solid;
	outline-color: #000;
	outline-offset: 0px;
	text-shadow: none;
	transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-5:hover {
	border: 1px solid;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 0, 0, 0.78);
	outline-color: rgba(0, 0, 0, 0.66);
	outline-offset: 15px;
}


/*********** signin_p **********/

.button_sliding_bg_2,
.button_sliding_bg_3,
.button_sliding_bg_4,
.button_sliding_bg_5,
.button_sliding_bg_6 {
	color: #31302B;
	background: #FFF;
	padding: 12px 17px;
	margin: 25px;
	border: 3px solid #31302B;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: capitalize;
	border-radius: 2px;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	box-shadow: inset 0 0 0 0 #31302B;
	-webkit-transition: all ease 0.8s;
	-moz-transition: all ease 0.8s;
	transition: all ease 0.8s;
}

.button_sliding_bg_4:hover {
	box-shadow: inset 200px 0px 0 0 rgb(18, 125, 39);
	color: #FFF !important;
}

.button14 {
	color: #fff;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	position: relative;
}

.button14::before {
	content: 'sign in';
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	z-index: 1;
	background-color: #127d27;
	color: #fff;
	padding-top: 12px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.button14::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	border: 1px solid #000;
	-webkit-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
}

.button14:hover::before {
	opacity: 0;
	-webkit-transform: scale(0.5, 0.5);
	transform: scale(0.5, 0.5);
}

.small.narrow:hover {
	top: -4px;
	left: -4px;
	box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.2);
}

.small.narrow {
	width: 20%;
}

#print {
	background-color: rgb(239, 243, 210);
}


/********** social-icon *********/

.social i {
	margin: .3em;
	cursor: pointer;
	transition: color 300ms ease, margin-top 300ms ease;
	transform: translateZ(0);
}

.social i:hover {
	margin-top: -15px;
}


/******* index-btn ******/

.button2 {
	color: rgba(255, 255, 255, 1);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.5);
	overflow: hidden;
}

.button2 a {
	color: rgba(51, 51, 51, 1);
	text-decoration: none;
	display: block;
}

.button2 span {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.button2:hover {
	background-color: rgba(255, 255, 255, 0.13);
}

.button2:hover>span {
	opacity: 0;
	-webkit-transform: translate(0px, -40px);
	transform: translate(0px, -40px);
}

.button2::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	-webkit-transform: translate(0, 30%);
	transform: translate(0, 30%);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.button2:hover::after {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}


/********* placeholder 

.input {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: 1em;
	
	width: 100%;
	border-radius: 5px;
	vertical-align: top;
}

.input__field {
	position: relative;
	display: block;
	float: right;
	padding: 0.8em;
	width: 60%;
	border: none;
	border-radius: 0;
	background: #f0f0f0;
	color: #aaa;
	font-weight: 400;
	-webkit-appearance: none;
	
}

.input__field:focus {
	outline: none;
}

.input__label {
	display: inline-block;
	float: right;
	padding: 0 1em;
	width: 40%;
	color: #696969;
	font-weight: bold;
	font-size: 70.25%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.input__label-content {
	position: relative;
	display: block;
	padding: 1.6em 0;
	width: 100%;
}

.graphic {
	position: absolute;
	top: 0;
	left: 0;
	fill: none;
}

.icon {
	color: #ddd;
	font-size: 150%;
}*********/


/* Individual styles */


/* Kohana 

.input--kohana {
	overflow: hidden;
	background: transparent;
	border: 1px solid #313489;
	margin: 10px 0;
	padding-left: 5px;
}

.input__field--kohana {
	width: 100%;
	background: transparent;
	color: #97a0af;
	font-size: 12px;
	padding-left: 30px;
	padding-top: 20px;
}

.input__label--kohana {
	position: absolute;
	width: 100%;
	text-align: left;
	pointer-events: none;
	color: #97a0af;
	font-size: 12px;
	padding-left: 30px;
}

.input__label-content--kohana {
	display: inline-block;
	width: auto;
	-webkit-transform: translate3d(-1.75em, 0, 0);
	transform: translate3d(-1.75em, 0, 0);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.icon--kohana {
	display: inline-block;
	margin-top: 0.9em;
	margin-left: -20px;
	-webkit-transform: translate3d(-2em, 0, 0);
	transform: translate3d(-2em, 0, 0);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.input__field--kohana:focus + .input__label--kohana .input__label-content--kohana,
.input--filled .input__label-content--kohana {
	opacity: 0;
	-webkit-transform: translate3d(100px, 0, 0);
	transform: translate3d(100px, 0, 0);
}

.input__label-content--kohana,
.icon--kohana,
.input__field--kohana:focus + .input__label--kohana .input__label-content--kohana,
.input--filled .input__label-content--kohana {
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.input__field--kohana:focus + .input__label--kohana .icon--kohana,
.input--filled .icon--kohana {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}*/