.btn {
	position: relative;
	line-height: 1.2;
	vertical-align: unset;
	transition: 0.2s ease-in-out;
	font-family: "Inter";
	font-weight: 700;
	font-size: 1.8rem;
	padding: 1.8rem 2.8rem;
	border-radius: 999px;
	border: unset;
	overflow: hidden;
}

	.btn:hover {
		
	}

/*Przycisk główny*/
.btn.btn-1 {
	color: var(--white-1);
	background-color: rgba(0,0,0,0)
}
.btn.btn-1:before {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(to right, var(--color-1_hover) 0%, var(--color-1) 100%);
	z-index: -1;
}

	.btn.btn-1:hover {
		color: var(--white-1);
		background-color: var(--color-1_hover);
	}

/*Przycisk główny ( pusty )*/
.btn.btn-1-empty {
	color: var(--color-1);
	background-color: unset;
	border: 2px solid var(--color-1);
}

	.btn.btn-1-empty:hover {
		background-color: var(--color-1_hover);
		border: 2px solid var(--color-1_hover);
		color: var(--white-1);
	}

/*Przycisk główny - gradient*/
.btn.btn-gradient {
	color: var(--white-1);
	background: linear-gradient(to right, var(--color-1) 0%, var(--color-2) 100%);
	border: unset;
}

	.btn.btn-gradient:hover {
		color: var(--white-3);
	}

.btn.btn-1-empty.text-font {
	color: var(--font-color-1);
}

.btn.btn-1-empty.text-white {
	color: var(--white-1);
}

.btn.btn-1-empty.text-black {
	color: var(--black-1);
}

/*Przycisk drugorzędny*/
.btn.btn-2 {
	color: var(--white-1);
	background-color: var(--color-2);
	border: 2px solid var(--color-2);
}

	.btn.btn-2:hover {
		color: var(--white-1);
		background-color: var(--color-2_hover);
		border: 2px solid var(--color-2_hover);
	}

/*Przycisk drugorzędny ( pusty )*/
.btn.btn-2-empty {
	color: var(--color-2);
	background-color: unset;
	border: 2px solid var(--color-2);
}

	.btn.btn-2-empty:hover {
		background-color: var(--color-2_hover);
		border: 2px solid var(--color-2_hover);
		color: var(--white-1);
	}

/*Przycisk biały*/
.btn.btn-white {
	color: var(--font-color-1);
	background-color: var(--white-1);
}

	.btn.btn-white:hover {
		color: var(--font-color-1);
		background-color: var(--white-3);
	}

/*Przycisk czarny*/
.btn.btn-black {
	color: var(--white-1);
	background-color: var(--black-1);
}

	.btn.btn-black:hover {
		color: var(--white-1);
		background-color: var(--black-3);
	}

@media screen and (max-width: 1200px) {
}

@media screen and (max-width: 992px) {
}

@media screen and (max-width: 768px) {	
	
}

@media screen and (max-width: 576px) {
  
}

@media screen and (max-height: 400px) {
  
}