// Core variables and mixins
@import "sub-stylesheet/_variables";
@import "sub-stylesheet/_mixins";



.button-effect1 {
	position: relative;
	overflow: hidden;
	&:after {
		content: '';
		position: absolute;
		left: 150%;
		top: 40%;
		width: 200%;
		height: 20%;
		background-color: rgba($white, 0.2);
		@include transform(rotate(45deg));
	}
	&:before {
		content: '';
		position: absolute;
		left: 100%;
		top: 40%;
		width: 200%;
		height: 20%;
		background-color: rgba($white, 0.2);
		@include transform(rotate(45deg));
	}
	&:hover {
		@include transform(translateY(-5px));
		&:after {
			left: -150%;
			@include transition(0.6s);
			transition-delay: 0.3s;
		}
		&:before {
			left: -200%;
			@include transition(0.6s);
			transition-delay: 0.3s;
		}
	}
}

.video-button {
	width: 70px;
	height: 70px;
	@include border-radius(100%);
	text-align: center;
	line-height: 78px;
	color: $title-color;
	background-color: $white;
	display: inline-block;
	i {
		font-size: 20px;

	}
	@include transition(0.3s);
	@include breakpoint(sm){
		width: 100px;
		height: 100px;
		line-height: 98px;
		font-size: 35px;
		i {
			font-size: 26px;
	
		}
	}
	
	&:hover {
		color: $white;
		background-color: #ff6360;
	}
}