#pagenav {
    display: none
}
.anchor {
    width: 100px;
    display: block;
    position: relative;
}
#pagenav a {
    outline: 0;
    text-decoration: none;
}
.pagenav-link-container .description.large{
	font-size:16px;
}

.pagenav-link img{
	opacity:.3
}
.pagenav-link.active img{
	opacity:1
}
.pagenav-link .description{
	opacity:.3;
}
.pagenav-link.active .description{
	opacity:1;
}

@media only screen and (min-width: 600px) {
    #pagenav {
        display: block
    }
    .mobile-toggle span {
        color: #484848
    }
    #pagenav-links.show {
        display: block
    }
    .mobile-toggle {
        border: 1px solid #d8d8d8
    }

    #pagenav-links {
        margin: auto;
        height: 100%;
        
    }
    .pagenav-link-container .description {
        display: block;
        color: #636363;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        transition: opacity .3s ease-in-out;
        -moz-transition: opacity .3s ease-in-out;
        -webkit-transition: opacity .3s ease-in-out
    }
    .pagenav-link {
        transition: opacity .3s ease-in-out;
        -moz-transition: opacity .3s ease-in-out;
        -webkit-transition: opacity .3s ease-in-out
    }
    .pagenav-link.active {
        transition: opacity .3s ease-in-out;
        -moz-transition: opacity .3s ease-in-out;
        -webkit-transition: opacity .3s ease-in-out
    }
    .pagenav-link-container .active .description {
        transition: opacity .3s ease-in-out;
        -moz-transition: opacity .3s ease-in-out;
        -webkit-transition: opacity .3s ease-in-out
    }
    #pagenav {
        display: inline;
        text-align: center;
        display: block;
        background: white;
        width: 100%;
        z-index: 100;
        padding: 5px 0 12px 0
    }
    .fixed {
        position: fixed
    }

    .pagenav-link-container img {
        visibility: hidden
    }
    .pagenav-link-container img {
        visibility: visible;
        display: inline
    }

    .mobile-toggle {
        display: none
    }
    #pagenav {
        background-color: #f1f4f6;
        border-top: solid #484848 4px;
        -webkit-box-shadow: 0px 3px 11px 0px rgba(65, 78, 88, 0.30);
        box-shadow: 0px 3px 11px 0px rgba(65, 78, 88, 0.30)
    }
    #pagenav-links {
        display: flex;
        justify-content: space-between;
    }
    .pagenav-link-container .description {
        color: #484848;
        font-size: 14px;
        font-family: "PNC Brand Medium", Arial, sans-serif;
        font-weight: 700
    }
    .pagenav-link-container img {
        height: 64px;
    }

}
@media only screen and (min-width: 980px) {
    #pagenav-links {
        width: 940px;
    }
    .pagenav-link-container {
        position: relative
    }

}
@media only screen and (max-width: 599px) {
    #pagenav {
        margin: 0;
        position: fixed;
        width: 70px;
        overflow: hidden
    }
    .pagenav-link-container img[src*='/content/dam'] {
        display: none;
        background: #000;
        width: 100%;
        text-align: center
    }

    .pagenav a {
        width: 100%;
        display: inline-block;
        color: #fff
    }
    .pagenav a img {
        vertical-align: middle
    }
}
img.image-inactive {
    display: inline!important;
}
img.image-active{
     display:none!important;
}

a.pagenav-link.active .image-inactive {
    display: none!important;
}

a.pagenav-link.active .image-active {
    display: inline!important;
}

/* Offset internal anchor links */

.anchor.offset {top:-50px;}
