.stky-zip {
    top: 50%;
    right: 1em;
    transform: translate(0,-50%);
}

.stky-zip.lcl {
	right: 3.4998em;
}

.stky-zip.psu-bfr {
    position: fixed;
    z-index: 2;
}

.stky-zip > img {
	position: absolute;
	right: -3.4998em;
	width: 6.8rem;
	max-width: initial;
	bottom: calc(100% + 1em);
	z-index: -2;
	pointer-events: none;
}

.stky-zip a {
	color: #A91F24;
    background-color: #FFFFFF;
    border-radius: 2.389rem;
    opacity: 1;
    z-index: 1;
    box-shadow: 0 0 0 1px #cacfdb;
    line-height: 1;
    transition: width .5s ease 0s;
    padding: 0.8em;
    width: 4.7778rem;
    height: 4.7778rem;
}

.stky-zip.lcl a {
	color: #FFFFFF;
	background-color: #0E55A7;
}

.stky-zip::before {
    width: 4.7778rem;
    height: 4.7778rem;
    box-shadow: 0 0 0 0 #FFFFFF;
    border-radius: 100%;
    display: block;
    right: 0;
    left: initial;
	transition: box-shadow .5s ease 0s;
}

.stky-zip.lcl::before {
    box-shadow: 0 0 0 0 #FFFFFF;
}

.stky-zip a svg {
	font-size: 3rem;
}

.stky-zip a strong {
	text-transform: none;
	line-height: 1;
	position: absolute;
	top: 50%;
	right: 4.5rem;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity 0s ease 0s;
}

@media screen and (min-width: 1025px) {
	.stky-zip a:hover,
	.stky-zip a:focus {
		width: 16.56rem;
	}
	
	.stky-zip:hover::before,
	.stky-zip:focus-within::before {
		box-shadow: 0 0 0 7px #FFFFFF;
		display: none;
	}
	
	.stky-zip.lcl:hover::before,
	.stky-zip.lcl:focus-within::before {
		box-shadow: 0 0 0 7px #FFFFFF;
	}
	
	.stky-zip a:hover strong,
	.stky-zip a:focus strong {
		opacity: 1;
		transition: opacity .25s ease .5s;
	}
}