/*---------------------intro with image (careers)--------------------------*/

/* Careers-only overrides for the shared css/product/intro-with-image.css, which
   product/industry pages also load. Linked after it in template-careers.php, so
   these win on equal specificity. */

.intro-with-image .column-row .text-container h2 {
    font-size: 50px !important;
    color: #0c2340;
}

/* The shared stylesheet steps this heading down at 991px and 767px. Those rules
   load earlier, so without matching breakpoints here the 50px would carry all
   the way to mobile. Sizes follow the same scale as the 50px heading in
   css/company/intro-with-img.css. */
@media (max-width: 991px) {
    .intro-with-image .column-row .text-container h2 {
        font-size: 30px !important;
    }
}

@media (max-width: 595px) {
    .intro-with-image .column-row .text-container h2 {
        font-size: 24px !important;
    }
}
.intro-with-image .column-row .text-container p {
    /* <p> token: 45 Light, 16/24. css/company/global.css sets `p, li` to the 55
       Roman face with !important, so the family has to be restated the same way
       or this copy renders a weight heavier than the design. */
    font-family: 'Univers LT Pro' !important;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: #31445C;
    /* The body copy runs the full width of the text column here; the shared
       stylesheet caps it at 510. */
    max-width: 571px;
}
.intro-with-image .column-row .text-container h2 {
    line-height: 60px !important;
    /* The design leaves 25px between the heading and the body copy. */
    margin-bottom: 25px;
}


.intro-with-image .column-row .img-wrap a.watch-video,
.intro-with-image .column-row .img-wrap img {
    display: block;
        border-radius: 15px;
}

.intro-with-image .column-row .img-block .img-wrap,
.intro-with-image .column-row .img-block .img-wrap a.watch-video {
    line-height: 0;
}
/*---------------------intro with image (careers) end--------------------------*/