/*
 * Default CSS, covers 0 to 319px
 */
 
 .carousel-hero h1 {
    font: bold 30px/30px "PNC Brand Bold", Arial,sans-serif;
    color:#0069AA;
    margin: 12px 0;
 }
.carousel-hero h2,
.carousel-hero h3 {
    font: normal 25px/26px "PNC Brand Medium", Arial,sans-serif;
}
.carousel-hero p {
    font: normal 12px/18px Arial,sans-serif;
    color: #484848;
}
/* Personal Banking - Orange  */
.theme-orange h1,
.theme-orange h2,
.theme-orange h3,
.theme-green h1,
.theme-green h2,
.theme-green h3,
.theme-sky h1,
.theme-sky h2,
.theme-sky h3,
.theme-blue h1,
.theme-blue h2,
.theme-blue h3 {
    color:#F58025;
}

.carousel-hero .slide-markers {
   margin: 0 auto 20px;
}
/* Edit Mode for hero */
.cq-wcm-edit #hero-caroursel {
    height:auto;
    overflow: visible;
}
.cq-wcm-edit #hero-caroursel .aboutus-hero {
    display:block;
    position: relative;
}

/*
 *  Mobile
 */
@media only screen and (min-width: 320px){
    .carousel-hero h1 {
        font: bold 30px/30px "PNC Brand Bold", Arial;
    }
    .carousel-hero .content-inner {
        margin: 0 auto;
        width: 330px;
        overflow: hidden;
        height: auto;
    }
    .carousel-hero .swipeable-tablet-mobile {
        width: 1200px;
        height: auto;
        padding-bottom: 10px;
        overflow: hidden;
    }
   .carousel-hero .aboutus-hero {
       float:left;
       width: 320px;
       padding-right: 10px;
    }
}

/*
 *  Tablet
 */
@media only screen and (min-width: 600px) {
    /*Alignment for hero*/
    .carousel-hero .about-hero-tout .content-wrapper{
        width: 50%;
        overflow: hidden;
        text-align: center;
        padding: 30px 20px;
    }
    .carousel-hero .pos-centered .content-wrapper{margin-left: auto;margin-right: auto;}
    .carousel-hero .pos-left .content-wrapper{float: left;}
    .carousel-hero .pos-right .content-wrapper{float: right;}

    /*
    * Set up css for swipe
    */
    .carousel-hero .about-hero-tout {
        background-position: left 12px;
        width: 100%;
        margin-left: 3px;

    }
    .carousel-hero .content-inner {
        width: 585px;
        overflow: hidden;
        margin: 0 auto;
        height:auto;
        margin-top: 20px;
    }
    .carousel-hero .swipeable-tablet-mobile {
        height: auto;
        width: 1840px;
    }
    .carousel-hero .aboutus-hero {
       float:left;
       width: 580px;
       height:236px;
    }
    .carousel-hero .aboutus-hero {
        background: url(../img/bg_aboutus_hero_tablet.png) no-repeat left center;

        height:287px;
    }
    .carousel-hero h2,
    .carousel-hero h3 {
        padding-top: 20px;
    }
    .carousel-hero .about-hero-tout {
       background-repeat: no-repeat;
    }
    .carousel-hero .about-hero-tout,
    .carousel-hero .pos-left .cta-txt-wrapperr {
       position:relative;
       height: 100%;
    }
    /*
    .carousel-hero .cta-txt-wrapper {
       width:230px;
       position: absolute;
    }*/
    .carousel-hero .cta-container,
    .carousel-hero h2,
    .carousel-hero h3 {
       text-align:center;
    }
    /* Positioning of text */
    /*
    .carousel-hero .pos-left .cta-txt-wrapper {
       left: 30px;
    }
    .carousel-hero .pos-centered .cta-txt-wrapper {
       left: 193px;
    }
    .carousel-hero .pos-right .cta-txt-wrapper {
       left: 320px;
    }*/

}

/*
 *  Desktop
 */
@media screen and (min-width: 980px) {
    .carousel-hero .about-hero-tout .content-wrapper{
        width: 33%;
        padding: 45px 75px;
    }
    .carousel-hero .about-hero-tout {
        background-position: left bottom;

    }
    .carousel-hero .cta-container{
        padding-top: 10px;
    }
    .carousel-hero .slide-markers:hover {
       cursor: pointer;
    }
    .carousel-hero .aboutus-hero {
        display:none;
        z-index:1;
    }
    .carousel-hero .hero-active {
       display:block;
        z-index: 1;
    }
    .carousel-hero h2,
    .carousel-hero h3 {
       padding-top: 0;
    }
    .carousel-hero .swipeable-tablet-mobile {
        height: 327px;
        position: relative;
        background: url(../img/bg_aboutus_hero_desktop.png) no-repeat left bottom;
    }
    .carousel-hero .content-inner {
        width: 950px;

        height: auto;
        margin-top: 20px;
    }
    .carousel-hero .aboutus-hero  {
        position: absolute;
        width: 945px;
        height: 316px;
        background: none;
    }
    .carousel-hero .pos-left .cta-txt-wrapper {
        left: 30px;
        top: 75px;
    }
    .carousel-hero .pos-centered .cta-txt-wrapper {
       left: 360px;
    }
    .carousel-hero .pos-right .cta-txt-wrapper {
       left: 675px;
    }

    .carousel-hero .swipeable-tablet-mobile {
        height: 324px;
        padding-bottom: 0;
        margin-bottom: 20px;
    }
    .carousel-hero .about-hero-tout {
        overflow: hidden;
    }
}