.u-gfColors-navy {
    color:var(--gfColors-navy) ! important;
}
p.alphabet {
    background-color: var(--gfColors-slate45);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    line-height: 2.5;
    text-align: center;
}
#boxList .u-grid2Columns {
    column-gap:3rem;
}
#boxList table tr td:first-child {
    width:5rem;
}

@media (max-width: 767.98px) {
    .h6 {
        font-size: 1.2rem;
    }
}
.alpha-list a {
    margin-right: 1rem;
}
.alpha-list a:last-child {
    margin-right: 0;
}

@media (min-width:768px) {
    #newService {
        position:relative;
    }
    #newService::before {
        content:"";
        background-image:url('/offices/mail_services/_assets-mail-prep/images/stamp-pennington.png');
        background-repeat: no-repeat;
        width: 256px;
        height: 315px;
        position: absolute;
        top: -3rem;
        right: 2rem;
        display: block;
        z-index:-1;
    }
}

.bg-circle {
    position:relative;
}
.bg-circle::before {
    content: "";
    height: 25rem;
    width: 25rem;
    display: block;
    background-color: var(--gfColors-slate15);
    border-radius: 50%;
    position: absolute;
    top: -5rem;
    left: -11rem;
    z-index: -1;
}

@media (min-width:992px) {
    #overview.sideBySide--lightSlateFullWidth .sideBySide-content {
        padding:3rem 4rem;
    }
}

.add-gold-hearts {
    position:relative;
}
.add-gold-hearts::after {
    content: "";
    background-image: url(/__template/t1/images/doodle-illustrations/gold-hearts.svg);
    background-repeat: no-repeat;
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: -2rem;
    left: 19rem;
    transform: rotate(24deg);
}

@media (min-width:768px) {
    .add-gold-hearts::after {
        left: 22rem;
    }
}
@media (max-width:479.98px) {
    .add-gold-hearts::after {
        left: unset;
        right: 2rem;
        top: -3rem;
    }
}


.add-asterisk {
    position:relative;
}
.add-asterisk::before {
    content:url(/__template/t1/images/gold-asterisk.svg);
    width: 30px;
    height: 30px;
    position: absolute;
    left: -.5rem;
    top: -1.25rem;
    display: block;
}

#passportCost {
    position:relative;
}
#passportCost::before {
    content:"";
    background-image:url(/offices/mail_services/_assets-passport/images/passport.svg);
    background-repeat:no-repeat;
    width: 45%;
    height: 45%;
    background-size: contain;
    opacity: .6;
    position: absolute;
    top: -4rem;
    right: 1rem;
    display: block;
    z-index: -1;
}



#mailResources .u-grid3Columns div {
    background-color: var(--gfColors-slate45);
    width: 100%;
    height: 200px;
    display: grid;
    align-content: center;
    justify-content: stretch;
}
#mailResources .u-grid3Columns div p {
    margin:0;
}
#mailResources .button {
    height: 200px;
    width: 100%;
}
.bg-tiles {
    padding:1rem;
    background-image: url(/__template/t1/images/navy-on-navy-tiles.jpg);
}
.bg-tiles img {
    justify-self: center;
    transition: all .5s cubic-bezier(0.79, 0.14, 0.15, 0.86);
}
.bg-tiles.bigger:hover img {
    transform:scale(1.2);
}
.bg-tiles.shake:hover img {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}
.bg-tiles.slide img {
    opacity: 1;
    transition: all .7s ease-in;
}
/*
.bg-tiles.slide:hover img {
    transform: translate(120px,0px);
    opacity:0;
}
*/
.bg-tiles.slide:hover img {
    animation: slide-out .7s;
    animation-fill-mode: forwards;
}




@media (min-width:768px) and (max-width:991.98px) {
    .bg-tiles img {
        margin-top: 1.25rem;
    }
}


@media (max-width:767.98px) {
    #mailResources .u-grid3Columns div {
        height:100px;
    }
    #mailResources .button {
        height: 100px;
    }
}

#generalInfo {
    position:relative;
}
#generalInfo::after {
    content:"";
    background-image:url(/offices/mail_services/resources/_assets-index/images/paper-plane1.svg);
    background-repeat:no-repeat;
    width:165px;
    height:60px;
    position:absolute;
    bottom: -1rem;
    left: 6rem;
    display:block;
    background-size:contain;
}



#generalInfo .bg-circle::before {
    top:-3rem;
}

@media (max-width:575.98px) {
    #generalInfo .bg-circle::before {
        height: 15rem;
        width: 15rem;
        left: -6rem;
    }
}



@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes slide-out {
    0% { transform: translateX(0%);opacity:1; }
    80% { transform: translateX(60%);opacity:0; }
    81% { transform: translateX(-150%);opacity:0; }
    100% { transform: translateX(0%);opacity:1; }
}

@-webkit-keyframes slide-out {
    0% { transform: translateX(0%);opacity:1; }
    80% { transform: translateX(60%);opacity:0; }
    81% { transform: translateX(-150%);opacity:0; }
    100% { transform: translateX(0%);opacity:1; }
}