.btn {
	position: relative;
	vertical-align: unset;
	transition: 0.3s;
	font-family: var(--btn-family);
	font-weight: var(--btn-weight);
	font-size: var(--btn-size);
	line-height: var(--btn-lh);
	padding: var(--btn-padding);
	border-radius: var(--btn-radius);
	
	display: inline-flex;
	align-items: center;
	text-wrap: nowrap;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.btn:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

.btn svg {
	fill: var(--white-1);
	height: 1.1rem;
	width: auto;
	margin-left: 1.5rem;
}

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

	.btn.btn-1:hover {
		color: var(--white-1);
		background-color: var(--color-1_hover);
		border: 2px solid 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) {
  
}