.no-space-none{margin:0;}
.no-space-small{margin: 0; margin-top: 10px; margin-bottom: 10px;}
.no-space-large{margin: 0; margin-top: 30px; margin-bottom: 30px;}

.letter-space-small{letter-spacing: 10px;}
.letter-space-medium{letter-spacing: 15px;}
.letter-space-large{letter-spacing: 20px;}

.navigation-links .large-dropdown{width: 500px;}
.navigation-links .large-dropdown > li{width: 300px;}

.light-header{font-weight: lighter;}
.bold-header{font-weight: bold;}

.centered{text-align: center;}

.rounded-stroke-btn{border:2px solid black; width: 150px; height: 40px; border-radius: 30px;
display: flex; justify-content: center; align-items: center; font-weight: bold; cursor: pointer;}

.rounded-fill-btn{width: 150px; height: 40px; border-radius: 30px;
display: flex; justify-content: center; align-items: center; font-weight: bold; cursor: pointer;}

.solid-fill-btn{width: 150px; height: 50px;
display: flex; justify-content: center; align-items: center; font-weight: bold; cursor: pointer;}

.filled-badge{color: black; background-color: white; padding: 5px; font-size: var(--medium); width: 150px;}
.banner-header{font-weight: bold;}

.stroke-overlay-btn{padding: 10px; border:1px solid white; color: white; font-size: var(--medium); cursor: pointer;}

.container-effect-button{
	position: relative; overflow: hidden;
}
.container-effect-button span{
	
	position: absolute; left: 0; width: 100px; height: 100px; background-color: rgba(0,0,0,0.6);
	border-radius: 50%; transition: 0.1s; transform: scale(0,0);
}

.round-fill-effect-btn{
	position: relative; overflow: hidden;
}
.round-fill-effect-btn > .span{width: 300px; height: 300px; background-color: black;
position: absolute; border-radius: 50%; transition: 0.3s; margin-left: -500px; margin-top: 100px;}
.round-fill-effect-btn > .txt{z-index: 10;}

.round-fill-effect-btn:hover > .span{margin-left: 0px; margin-top: 0px;}
.round-fill-effect-btn:hover > .txt{color: white;}



.rect-fill-effect-btn{
	position: relative; overflow: hidden;
}
.rect-fill-effect-btn > .span{width: 100%; height: 100%; background-color: black;
position: absolute; transition: 0.3s; margin-top: 200px;}
.rect-fill-effect-btn > .txt{z-index: 10;}

.rect-fill-effect-btn:hover > .span{margin-left: 0px; margin-top: 0px;}
.rect-fill-effect-btn:hover > .txt{color: white;}


.page-header{
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	padding: 20px;
}
.header-line{width: 100px; height: 2px; background-color: black; position: relative; margin-top: 10px; transition: 0.2s ease-out;}
.header-line::before{content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border:5px solid white;
left: 50%; top: 0; background-color: black; margin-top: -10px; transform: translate(-50%,0);}
.page-header:hover > .header-line{width: 200px; }

.sub-header{text-align: start;}
.sub-header-line{width: 100px; text-align: left;}


@keyframes customSlideLeft{
	from{
		transform: translate(0,-10px);
		filter: opacity(100%);
	}
	to{ transform: translate(0,0px);
		filter: opacity(0%);
	}
}

@keyframes customSlideRight{
	from{
		transform: translate(20px,0);
	}
	to{ transform: translate(0,0px);}
}

@keyframes newstrip{
	from{
		transform: translate(1000px,0);
	}
	to{ transform: translate(-100%,0);}
}