/* ******************************************************************************************** */
/* BUTTONS STYLING **************************************************************************** */
/* ******************************************************************************************** */

.btn-call-num, .btn-req-serv, .btn-banner, .btn-cta, .btn-reviews, .btn-more, .btn-cta2 {
    transition: all 0.5s ease;
    font-family: $font-second;
    font-weight: normal;
    font-size: 0.9rem;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    padding: .6rem .75rem .6rem .75rem;
    color: #FFFFFF !important;
    border: 0;
	transition:all ease .3s;
	position:relative;
    @media screen and (max-width: $breakmed) {
        font-size: 0.8rem;
    }
	.jumpout {
		position:absolute;
		top:47%;
		left:90%;
		transform:translate(-50%, -50%);
		
		opacity:0;
		transition:all ease .4s;
	}
	&:hover {
		padding:.6rem 3rem .6rem .75rem;
		.jumpout {
			transition:all ease .5s;
			opacity:1;
		}
	}
}

.btn-call-num, .btn-banner, .btn-reviews {
    background-color: $color-third;
    &:hover {
        background-color: darken($color-third, 10%);
    }
}
.btn-cta2 {
	background-color:$color-prime;
	&:hover {
		background-color:darken($color-prime, 10%);
	}
}
.btn-req-serv, .btn-cta, .btn-more {
  	background-color:  $color-third;
	&.h2 {
		font-size:1.4rem;
	}
    &:hover {
        background-color: darken($color-third, 10%);
    }
}

/* Exploding Button Styling ******************************************************************** */

@keyframes btn-explode{
	0%{
		opacity:1;
		transform:scale(1);
	}

	99%{
		opacity:0;
		transform:scale(2);
	}

	100%{
		pointer-events:none;
		opacity:0;
		transform:scale(2);
	}
}

.sp-button-explode{
	& > a{
		position:relative;
		z-index:2;
		& > .explosion-outliner{
			display:none;
			position:absolute;
			z-index:3;
			width:100%;
			height:100%;
			top:0;
			left:0;
			background:transparent;
			border:3px solid map-get($theme-colors, primary);
		}
	}

	&:hover{
		& > a{
			& > .explosion-outliner{
				display:block;
				animation:btn-explode;
				animation-duration:190ms;
				animation-fill-mode:forwards;
			}
		}
	}
}

/* ******************************************************************************************** */