/* --- Button FX Shine --- */

.btn-fx-shine 
{
	box-sizing: border-box;
	position: relative;
	vertical-align: middle;
	display: block;
	max-width:300px;
	line-height:1.5;
	background-color:var(--bs-primary);
	font-family: 'Open Sans', sans-serif;
	color:#FFFFFF !important;
	font-size:1.5rem;
	font-weight:400;
	padding:1.3rem 0.5rem;
	border-radius:0px;
	border:2px solid transparent;
	text-align:center;
	text-decoration:none;
	outline:0;
	cursor:pointer;
	
	margin: 0 auto;
	
	-webkit-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;
	-webkit-animation-name:ShineAnimation;
	-webkit-animation-duration:7s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:cubic-bezier(.1,.9,1,.5);
}

@-webkit-keyframes ShineAnimation 
{
	from {
		background-repeat:no-repeat;
		background-image:-webkit-linear-gradient(top left,rgba(255,255,255,0.0) 0%,rgba(255,255,255,0.0) 45%,rgba(255,255,255,0.1) 48%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.1) 52%,rgba(255,255,255,0.0) 57%,rgba(255,255,255,0.0) 100%);
		background-position:-250px -250px;
		background-size:400px 400px
	}
	to {
		background-repeat:no-repeat;
		background-position:250px 250px;
	}
}

.btn-fx-shine:hover,
.btn-fx-shine:focus 
{
	background-color:#FFFFFF;
	color:var(--bs-primary) !important;
	border:2px solid var(--bs-primary);
	text-decoration:none;
	cursor:pointer;
}


/* --- Button FX Outline --- */

.btn-fx-outline
{
	box-sizing: border-box;
	position: relative;
	vertical-align: middle;
	display: block;
	max-width:300px;
	background-color:transparent;
	color:var(--bs-primary) !important;
	font-size:1.5rem;
	font-weight:400;
	padding:1.5rem 0.5rem;
	border-radius:0px;
	border: 0px solid var(--bs-primary);
	box-shadow: inset 0 0 0 2px var(--bs-primary);
	text-decoration:none;
	text-align:center;
	outline:0;
	
	margin: 0 auto;
	
	-webkit-transition: color 0.25s;
	transition: color 0.25s;
}

.btn-fx-outline::before, 
.btn-fx-outline::after 
{
	box-sizing: inherit;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	border: 2px solid transparent;
	width: 0;
	height: 0;
}

.btn-fx-outline::before 
{
	top: 0;
	left: 0;
}
.btn-fx-outline::after 
{
	bottom: 0;
	right: 0;
}
.btn-fx-outline:hover 
{
	color: #555555 !important;
}
.btn-fx-outline:hover::before, 
.btn-fx-outline:hover::after 
{
	width: 100%;
	height: 100%;
}
.btn-fx-outline:hover::before 
{
	border-top-color: #555555;
	border-right-color: #555555;
	transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.btn-fx-outline:hover::after 
{
	border-bottom-color: #555555;
	border-left-color: #555555;
	transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}


/* --- Button FX Glow --- */

.btn-fx-glow 
{
	box-sizing: border-box;
	position: relative;
	vertical-align: middle;
	display: block;
	max-width:300px;
	font-size:1.5rem;
	font-weight:400;
	padding:1.5rem 0.5rem;
	color: #FFFFFF;
	background: #222222;
	text-align:center;
	text-decoration:none;
	cursor: pointer;
	z-index: 0;
	border: 0px;
	border-radius: 0px;

	outline:0;
	
	margin: 0 auto;

}

.btn-fx-glow:before 
{
	content: '';
	background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
	position: absolute;
	top: -2px;
	left:-2px;
	background-size: 400%;
	z-index: -1;
	filter: blur(5px);
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	animation: glowing 20s linear infinite;
	opacity: 0;
	transition: opacity .3s ease-in-out;
	border-radius: 0px;
}

.btn-fx-glow:hover, 
.btn-fx-glow:focus,
.btn-fx-glow:active 
{
	color: var(--bs-primary);
}

.btn-fx-glow:active:after 
{
	background: transparent;
}


.btn-fx-glow:hover:before 
{
	opacity: 1;
}

.btn-fx-glow:after 
{
	z-index: -1;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: #222;
	left: 0;
	top: 0;
	border-radius: 0px;
}

@keyframes glowing 
{
	0% { background-position: 0 0; }
	50% { background-position: 400% 0; }
	100% { background-position: 0 0; }
}



/* --- Button FX Swipe --- */

.btn-fx-swipe 
{
	box-sizing: border-box;
	position: relative;
	vertical-align: middle;
	display: block;
	max-width:300px;
	background-color:transparent;
	color:var(--bs-primary) !important;
	font-size:1.5rem;
	font-weight:400;
	padding:1.3rem 0.5rem;
	border-radius:0px;
	border: 2px solid var(--bs-primary);
	text-decoration:none;
	text-align:center;
	outline:0;

	margin:0 auto;

	-webkit-transition: all .35s;
	transition: all .35s;
}

.btn-fx-swipe span
{
	position: relative;
	z-index: 2;
}

.btn-fx-swipe:after
{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: var(--bs-primary);
	-webkit-transition: all .35s;
	transition: all .35s;
}

.btn-fx-swipe:hover, 
.btn-fx-swipe:hover span, 
.btn-fx-swipe:focus, 
.btn-fx-swipe:focus span,
.btn-fx-swipe:active, 
.btn-fx-swipe:active span
{
	color: #FFFFFF;
}

.btn-fx-swipe:hover:after,
.btn-fx-swipe:focus:after, 
.btn-fx-swipe:active:after
{
	width: 100%;
}


/* --- Button FX Slide Text --- */


.btn-fx-slide-text 
{
	box-sizing: border-box;
	position: relative;
	vertical-align: middle;
	display: block;
	max-width:300px;
	background: transparent; 
	color:var(--bs-primary) !important;
	font-size:1.5rem;
	font-weight:400;
	padding:1.3rem 0.5rem;
	border-radius:0px;
	border: 2px solid var(--bs-primary);
	text-decoration:none;
	text-align:center;
	outline: 0;
	overflow: hidden;
	cursor: pointer;
	
	margin:0 auto;

}

.btn-fx-slide-text:hover:before, 
.btn-fx-slide-text:focus:before, 
.btn-fx-slide-text:active:before
{
	opacity: 1;
	transform: translate(0,0);
}

.btn-fx-slide-text:before
{
	content: attr(data-hover);
	position: absolute;
	top: 1.3rem; 
	left: 0;
	width: 100%;
	font-size:1.5rem;
	font-weight:400;
	color:#222222 !important;
	opacity: 0;
	transform: translate(-100%,0);
	transition: all .3s ease-in-out;
}

.btn-fx-slide-text:hover span, 
.btn-fx-slide-text:focus span, 
.btn-fx-slide-text:active span
{
	opacity: 0;
	-webkit-transform: translate(100%,0);
	transform: translate(100%,0);
}
.btn-fx-slide-text span
{
	display:block;
	font-size:1.5rem;
	font-weight:400;
	color:var(--bs-primary) !important;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}


/* --- Button FX Neon --- */

.btn-fx-neon
{
	box-sizing: border-box;
	position: relative;
	vertical-align: middle;
	display: block;
	max-width:300px;
	line-height:1.5;
	background-color:transparent;
	color:var(--bs-primary) !important;
	font-size:1.5rem;
	font-weight:400;
	padding:1.3rem 0.5rem;
	border-radius:0px;
	border:2px solid var(--bs-primary);
	text-align:center;
	text-decoration:none;
	outline:0;
	cursor:pointer;
	
	margin: 0 auto;
}

.btn-fx-neon:hover, 
.btn-fx-neon:focus, 
.btn-fx-neon:active
{
	color: #FFFFFF !important;
	border: 0;
	background-color: var(--bs-primary);
	-webkit-box-shadow: 10px 10px 99px 6px var(--bs-hover);
	-moz-box-shadow: 10px 10px 99px 6px var(--bs-hover);
	box-shadow: 10px 10px 99px 6px var(--bs-hover);
}
.btn-fx-neon.cyan:hover, 
.btn-fx-neon.cyan:focus, 
.btn-fx-neon.cyan:active 
{
	background-color: #4CC9F0;
	-webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
	-moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
	box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
}
.btn-fx-neon.magenta:hover,
.btn-fx-neon.magenta:focus, 
.btn-fx-neon.magenta:active 
{
	background-color: #F038FF;
	-webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
	-moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
	box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
}
.btn-fx-neon.yellowgreen:hover, 
.btn-fx-neon.yellowgreen:focus, 
.btn-fx-neon.yellowgreen:active 
{
	background-color: #B9E769;
	-webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
	-moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
	box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
}



/* --- Button FX Shadow --- */

.btn-fx-shadow
{
	box-sizing: border-box;
	position: relative;
	vertical-align: middle;
	display: block;
	max-width:300px;
	line-height:1.5;
	background-color:var(--bs-primary);
	color:#FFFFFF !important;
	font-size:1.5rem;
	font-weight:400;
	padding:1.3rem 0.5rem;
	border-radius:0px;
	border:2px solid transparent;
	text-align:center;
	text-decoration:none;
	outline:0;
	cursor:pointer;
	
	margin: 0 auto;

	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}


.btn-fx-shadow:before 
{
	pointer-events: none;
	position: absolute;
	z-index: -1;
	content: '';
	top: 100%;
	left: 5%;
	height: 10px;
	width: 90%;
	opacity: 0;
	background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform, opacity;
	transition-property: transform, opacity;
}

.btn-fx-shadow:hover, 
.btn-fx-shadow:focus, 
.btn-fx-shadow:active 
{
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
}
.btn-fx-shadow:hover:before, 
.btn-fx-shadow:focus:before, 
.btn-fx-shadow:active:before 
{
	opacity: 1;
	-webkit-transform: translateY(5px);
	transform: translateY(5px);
}


/* --- Button FX Wobble --- */

@-webkit-keyframes btn-fx-wobble-horizontal 
{
	16.65% {
		-webkit-transform: translateX(8px);
		transform: translateX(8px);
	}
	33.3% {
		-webkit-transform: translateX(-6px);
		transform: translateX(-6px);
	}
	49.95% {
		-webkit-transform: translateX(4px);
		transform: translateX(4px);
	}
	66.6% {
		-webkit-transform: translateX(-2px);
		transform: translateX(-2px);
	}
	83.25% {
		-webkit-transform: translateX(1px);
		transform: translateX(1px);
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
@keyframes btn-fx-wobble-horizontal 
{
	16.65% {
		-webkit-transform: translateX(8px);
		transform: translateX(8px);
	}
	33.3% {
		-webkit-transform: translateX(-6px);
		transform: translateX(-6px);
	}
	49.95% {
		-webkit-transform: translateX(4px);
		transform: translateX(4px);
	}
	66.6% {
		-webkit-transform: translateX(-2px);
		transform: translateX(-2px);
	}
	83.25% {
		-webkit-transform: translateX(1px);
		transform: translateX(1px);
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

.btn-fx-wobble-horizontal 
{
	box-sizing: border-box;
	position: relative;
	vertical-align: middle;
	display: block;
	max-width:300px;
	line-height:1.5;
	background-color:var(--bs-primary);
	font-family: 'Open Sans', sans-serif;
	color:#FFFFFF !important;
	font-size:1.5rem;
	font-weight:400;
	padding:1.3rem 0.5rem;
	border-radius:0px;
	border:2px solid transparent;
	text-align:center;
	text-decoration:none;
	outline:0;
	cursor:pointer;
	
	margin: 0 auto;

	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.btn-fx-wobble-horizontal:hover, 
.btn-fx-wobble-horizontal:focus, 
.btn-fx-wobble-horizontal:active 
{
	-webkit-animation-name: btn-fx-wobble-horizontal;
	animation-name: btn-fx-wobble-horizontal;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}


/* --- Button FX Pulse Grow --- */

@-webkit-keyframes btn-fx-pulse-grow 
{
	to {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
}
@keyframes btn-fx-pulse-grow 
{
	to {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
}

.btn-fx-pulse-grow 
{
	box-sizing: border-box;
	position: relative;
	vertical-align: middle;
	display: block;
	max-width:300px;
	line-height:1.5;
	background-color:var(--bs-primary);
	font-family: 'Open Sans', sans-serif;
	color:#FFFFFF !important;
	font-size:1.5rem;
	font-weight:400;
	padding:1.3rem 0.5rem;
	border-radius:0px;
	border:2px solid transparent;
	text-align:center;
	text-decoration:none;
	outline:0;
	cursor:pointer;
	
	margin: 0 auto;

	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.btn-fx-pulse-grow:hover, 
.btn-fx-pulse-grow:focus, 
.btn-fx-pulse-grow:active 
{
	-webkit-animation-name: btn-fx-pulse-grow;
	animation-name: btn-fx-pulse-grow;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}


/*-----------Wenn ein button-arrow verwedet wird dann fill ändern %23 steht für #-----------*/
.btn-line {
	color: var(--bs-primary);
	position: relative;
}

.btn-line:after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='Icon_ionic-ios-arrow-round-forward' class='st0' d='M26.9,0.3c-0.4,0.4-0.4,0.9,0,1.3l4.3,4.3H0.9C0.4,5.8,0,6.2,0,6.7 c0,0.5,0.4,0.9,0.9,0.9h30.3l-4.3,4.3c-0.3,0.4-0.3,0.9,0,1.3c0.4,0.4,0.9,0.4,1.3,0c0,0,0,0,0,0L34,7.4l0,0 c0.1-0.1,0.1-0.2,0.2-0.3c0-0.1,0.1-0.2,0.1-0.4c0-0.2-0.1-0.5-0.3-0.6l-5.8-5.8C27.8-0.1,27.3-0.1,26.9,0.3 C26.9,0.3,26.9,0.3,26.9,0.3z' fill='%23AD0057' /%3E%3C/svg%3E");
    position: absolute;
    width: 36px;
    height: 15px;
    right: -46px;
    top: 7px;
}

.btn-line:hover:after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='Icon_ionic-ios-arrow-round-forward' class='st0' d='M26.9,0.3c-0.4,0.4-0.4,0.9,0,1.3l4.3,4.3H0.9C0.4,5.8,0,6.2,0,6.7 c0,0.5,0.4,0.9,0.9,0.9h30.3l-4.3,4.3c-0.3,0.4-0.3,0.9,0,1.3c0.4,0.4,0.9,0.4,1.3,0c0,0,0,0,0,0L34,7.4l0,0 c0.1-0.1,0.1-0.2,0.2-0.3c0-0.1,0.1-0.2,0.1-0.4c0-0.2-0.1-0.5-0.3-0.6l-5.8-5.8C27.8-0.1,27.3-0.1,26.9,0.3 C26.9,0.3,26.9,0.3,26.9,0.3z' fill='%23E60073' /%3E%3C/svg%3E");
}