.btn {
	height: auto;
}

.cardbtn {
	position: relative;
	transform-style: preserve-3d;
	transition: all ease .8s;
	
	background-color: rgba(47,53,76,.7);
	border: 1.5px solid var(--white)
}
.cardbtn * {
	transition: all ease .8s;
}
.innercardbtn {
	position: relative;
	z-index: 2;
	transform-style: preserve-3d;
}

.cardbtn:hover {
    -webkit-box-shadow: -5px 1px 4px 1px rgb(0 0 0 / 25%);
    box-shadow: -5px 1px 4px 1px rgb(0 0 0 / 25%);
	background: rgba(255,255,255,.9);
}

.btn.btn-card {
  background: transparent;
  border-color: var(--yellow);
  color: var(--white);
  height: auto;
  box-shadow: inset 0 0 20px rgba(216, 168, 46, 0);
  outline-color: rgba(216, 168, 46, 0.5);
}
.btn.btn-card:focus,
.btn.btn-card:hover {
  background: transparent;
  border-color: #d8a82e;
  color: #293744;
  
  box-shadow: inset 0 0 20px rgba(216, 168, 46, 0.5), 0 0 20px rgba(216, 168, 46, 0.2);
  outline-color: rgba(216, 168, 46, 0);
}
.btn.btn-card:active,
.btn.btn-card.active {
    background: transparent;
    border-color: #d8a82e;
    color: #293744;
}

.cardbtn {
	transform: scale(0.95) perspective(1200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
	-webkit-transform: scale(0.95) perspective(1200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
	-moz-transform: scale(0.95) perspective(1200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
.cardbtn:hover {
	transform: scale(.98) perspective(1200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
	-webkit-transform: scale(.98) perspective(1200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
	-moz-transform: scale(.98) perspective(1200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
.cardicon {
	z-index: 2;
    transform: perspective(1200px) translateZ(5px);
	-webkit-transform: perspective(1200px) translateZ(5px);
	-moz-transform: perspective(1200px) translateZ(5px);
}
.cardbtn:hover .cardicon {
    transform: perspective(1200px) translateY(5px) translateZ(120px);
	-webkit-transform: perspective(1200px) translateY(5px) translateZ(120px);
	-moz-transform: perspective(1200px) translateY(5px) translateZ(120px);
	color: var(--red);
}

.innercardbtn {
    transform: scale(0.98) perspective(1200px) translateZ(0px);
	-webkit-transform: scale(0.98) perspective(1200px) translateZ(0px);
	-moz-transform: scale(0.98) perspective(1200px) translateZ(0px);
}
.cardbtn:hover .innercardbtn {
    transform: scale(1.00) perspective(1200px) translateY(2px) translateZ(0px);
	-webkit-transform: scale(1.00) perspective(1200px) translateY(2px) translateZ(0px);
	-moz-transform: scale(1.00) perspective(1200px) translateY(2px) translateZ(0px);
}
.cardbtn:hover .innercardbtn span {
	color: var(--black);
}
.cardbtn:hover .btn.btn-card {
    background: transparent;
    border-color: var(--red);
    color: var(--black);
  
    box-shadow: inset 0 0 20px rgba(216, 168, 46, 0);
    outline-color: rgba(216, 168, 46, 0.5);
}
.cardbtn:hover .btn.btn-card:focus,
.cardbtn:hover .btn.btn-card:hover {
    background: transparent;
    border-color: var(--redalt);
    color: var(--redalt);
  
    box-shadow: inset 0 0 20px rgba(185, 22, 42, 0.5), 0 0 20px rgba(185, 22, 42, 0.2);
    outline-color: rgba(185, 22, 42, 0);
}
.cardbtn:hover .btn.btn-card:active,
.cardbtn:hover .btn.btn-card.active {
    background: transparent;
    border-color: var(--redalt);
    color: var(--redalt);
}