.compare-header-parsys,
.compare-table-parsys{
    background: #fff;
}
.link-product-category {
    font: normal 12px/14px "PNC Brand Medium", Arial, sans-serif;
    padding: 11px 20px 13px;
    padding-top: 16px;
}
.link-product-category a {
    color: #484848;
}
.compare-header{position: relative;padding-bottom:10px}
.compare-header nav,
.js .compare-details,
.compare-filter {display: none;}

.compare-header .title{
    color: #F58025;
    font: 20px/1em "PNC Brand Bold", Arial, sans-serif;
    text-align: center;
    padding: 20px 0 17px 0;
    margin: 0;
    background: url(../img/header-shadow.png) bottom center no-repeat;  
}
.compare-header .title h1 {
    font: 20px/1em "PNC Brand Bold", Arial, sans-serif;
    margin: 0;
}

.js .compare-header nav {
    display: block;
    padding: 15px 0 20px 0;
    text-align: center;
    font: normal 14px/1em "PNC Brand Medium", Arial, sans-serif;
}
.compare-header nav a {
    text-transform: uppercase;
    display: inline-block;
    padding: 0 15px;
    color: #b7b7b7;
}
.compare-header nav a:first-child {
    border-right: 1px solid #afafaf;
}
.compare-header nav a.active {
    color: #0067a8;
}
 
.compare-tout-container {background: #f58c34;margin-top:10px}

.compare-tout span a {color:unset;}

/* .compare-tout a was overriding button colors */
.compare-tout .btn-gray a {
      color: #006699;
}

.compare-tout {
    color: #fff;
    font: normal 12px/16px "PNC Brand", Arial, sans-serif;
}

.compare-tout  a { color: #fff; }

.compare-details {margin: 0 auto; padding: 0;}
.cq-wcm-edit .compare-details,
.cq-wcm-preview .compare-details {display: block;}
.cq-wcm-edit table.compare-details,
.cq-wcm-preview table.compare-details {display: table;}
.compare-details th {vertical-align: top;}


.js .compare-detail {display: none;}

.compare-detail-list {
    text-align: center;
    padding: 0;
}

.compare-details .heading {
    font: bold 22px/26px "PNC Brand Bold", Arial, sans-serif;
    color: #484848;
    margin: 0;
    padding: 16px 0 14px;
    text-align: left;
}
.compare-details .feature {
    text-align: left;
    text-transform: uppercase;
    background: #eae9e9 url(../img/compare-shadow.png) top center no-repeat;
    font: bold 12px/16px "PNC Brand Bold", Arial, sans-serif;
    color: #6a6969;
    padding: 8px 10px;
}
.compare-detail-element-wrapper {padding: 20px;}
.compare-detail-element p { margin: 0; color: #565656; font-size: 14px;line-height: 1.2em;text-align:left;padding:10px}
.compare-detail-element ul {color: #565656; font-size: 14px;line-height: 1.2em;text-align:left;padding-right:10px}
.compare-detail-element a {text-decoration: underline; font-size: 14px; }
.compare-detail-element img {border: 0px !important;}

.compare-detail-na {font: italic 22px "PNC Brand", Arial, sans-serif; color: #c6c5c5;}
.compare-detail-check {display: block; margin: 0 auto; background: url(../img/compare-detail-check.png) center center no-repeat; width: 29px; height: 34px; text-indent: 30px; overflow: hidden;}
.compare-detail-money {font: bold 32px "PNC Brand Bold", Arial, sans-serif;display:block;text-align:center}
.compare-detail-addl {font-size: 12px; color: #484848; font-style: italic;}
.compare-detail-rate-callout{color: #0069aa;font-size: 16px;}

.product {display:none}


.accordion.compare-details {
    display: block;
}

.js .compare-filter, .js table.compare-details {
    display: none;
}

@media only screen and (min-width: 320px){

    .js .compare-header nav {
        display: none;
    }

    .compare-tout img {
        display: none;
    }
    .compare-tout p{
        margin: 10px 0;
        font-size: 12px;
    }
    .compare-tout-title {
        padding: 15px 49px 14px 15px;
        text-transform: uppercase;
        font-weight: normal;
    }
    .compare-tout-title p {
        margin: 0;
        font-size: 14px;
        text-transform: uppercase;
        display: inline;
    }
    .compare-cta {padding: 30px 0 28px; border-top: 1px solid #d1d1d1; background: url(../img/compare-shadow.png) top center no-repeat;}
}

@media only screen and (min-width: 600px) {

    .accordion.compare-details {
        display: none;
    }

    .js .compare-filter {
        display: block;
    }

    .js table.compare-details {
        display: table;
    }

    .js .compare-header nav {
        display: block;
    }

    .compare-header{width: 600px;margin-left: auto;margin-right: auto;}

    .compare-tout-container{  background: #f4c149; /* Old browsers */
      background-image: -webkit-linear-gradient(#f58025 25%, #cc6633 75%);
      background-image: -moz-linear-gradient(#f58025 25%, #cc6633 75%);
      background-image: -o-linear-gradient(#f58025 25%, #cc6633 75%);
      background-image: -ms-linear-gradient(#f58025 25%, #cc6633 75%);
      background: linear-gradient(#f58025 25%, #cc6633 75%); /* W3C */
    }
    .compare-tout-container.fixed{position:fixed;top:-10px;z-index:100;width:100%}
    

    .compare-tout {
        margin-top: 30px;
        padding: 0 10px 10px;
        border-left: 1px solid #f9bb76;
        text-align: center;
        position: relative;
    }

    .compare-tout img {
        display: block;
        margin: 0 auto;
        position: absolute;
        left: 0;
        right: 0;
    }

    .compare-tout-title {
        padding: 50px 10px 10px 10px;
    }

    .compare-tout-title p {
        display: inline-block;
        padding: 0 10px;
    }

    .compare-details .feature,
    .compare-detail-element-wrapper {border: 1px solid #dfdede;}
    .compare-detail-element-wrapper {background: #fbf9fa;}
    
    .compare-details .heading {padding-left:10px}
    
    .compare-details th{width:33%}
    .compare-details th.two-column-width{width:50%}

    .js .compare-filter {
        display: block;
        background: #d9712c;
        text-align: right;
        font: normal 14px/19px "PNC Brand", Arial, sans-serif;
    }
    .compare-filter p {
        margin: 0;
    }
    .compare-filter .heading {
        padding-left: 25px;
        background: url(../img/select-accounts.png) no-repeat;
    }
    .compare-filter .heading p {
        color: #fff;
    }
    .compare-filter .heading:hover p {
        text-decoration: underline;
    }
    .compare-filter .heading.no-filter {
        display: none;
    }
    .compare-filter .flyout-wrapper {
        position: relative;
        padding: 10px;
        display: inline-block;
    }
    .compare-filter .flyout-wrapper.no-filter {
        padding: 20px;
    }
    .compare-filter .flyout {
        display: none;
        position: absolute;
        z-index: 1;
        top: 44px;
        left: -100px;
        box-shadow: 0 0 8px rgba(0,0,0,.23);
        background: #f1f1f1;
        padding: 0 25px 21px 25px;
        text-align: left;
    }
    .compare-filter .flyout.open {
        display: block;
    }
    .compare-filter .flyout-inner {
        margin-top: -18px;
        padding-top: 39px;
        background: url(../img/flyout-arrow.png) 76px 0 no-repeat;
    }

    .compare-filter .description {
        margin-bottom: 10px;
    }

    .compare-filter label {
        display: block;
        padding: 11px 0;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .compare-filter .submit {
        text-align: center;
        margin-top: 12px;
    }
    
    .compare-filter .submit .no-submit {
        background: #c2c2c2;
        border: 1px solid #c2c2c2;
    }
    
    .compare-filter input[type="checkbox"] {
        margin-right: 23px;
    }

    .compare-filter .disabled {
        color: #c2c2c2;
    }
    
    .compare-details .feature-detail{display:none}

}

@media screen and (min-width: 980px) {
    .compare-header{width: 940px;}
    .compare-filter {
        max-width: 903px;
        margin: 0 auto;
    }
    .compare-tout-container.fixed{position:fixed;top:-10px;z-index:100;width:auto}

    .compare-tout {
        width: 280px;
    }
    
    th.two-column-width .compare-tout {
        width: 430px;
    }
    
    .compare-details th,
    .compare-details td {
        width: 300px;
    }
    
    .compare-details th.two-column-width,
    .compare-details td.two-column-width {
        width: 450px;
    }
    
    .compare-details th.left {
        width: 452px;
    }
    
    .compare-details .feature-detail{display:none}
    .compare-detail-element-wrapper {height: 65px; padding: 5px 0;}
}