/*
 * DOW Technologies – Team Pages Supplemental Stylesheet
 * dow-teams.css
 *
 * Includes component styles from landings.css + skeleton.css grid
 * rules needed by these pages, plus utility classes replacing
 * inline styles.
 *
 * Does NOT include html/body reset or base typography —
 * those are already provided globally by the CMS.
 */


/* ============================================================
   GRID
   The float + margin rules are what make columns sit side-by-side.
   Without them, all .columns elements stack vertically regardless
   of their width setting.
   ============================================================ */

.container {
    position: relative;
    width: 1170px;
    margin: 0 auto;
    padding: 0;
}

/* This is the critical rule — float left + margins on ALL columns */
.container .column,
.container .columns {
    float: left;
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
}

.container .four1.columns  { width: 250px; }
.container .sixteen.columns { width: 1170px; }

/* Clearfix so the container expands to contain its floated children */
.container:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container                  { width: 760px; }
    .container .four1.columns   { width: 220px; }
    .container .sixteen.columns { width: 748px; }
}

/* Mobile portrait */
@media only screen and (max-width: 767px) {
    .container { width: 300px; }
    .container .columns,
    .container .column          { margin: 0; }
    .container .four1.columns,
    .container .sixteen.columns { width: 300px; }
}

/* Mobile landscape */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container { width: 420px; }
    .container .columns,
    .container .column          { margin: 0; }
    .container .four1.columns,
    .container .sixteen.columns { width: 420px; }
}


/* ============================================================
   HERO TYPOGRAPHY
   Using the element type (h5) in the selector raises specificity
   above generic CMS h5 rules that were overriding the font sizes.
   ============================================================ */

/* "Award Winning Support Team" — large red headline */
.pixfort_normal_1 h5.L9a3_style {
    color: #e51937;
    font-size: 67px;
    line-height: 70px;
    font-weight: 800;
    margin-bottom: 10px;
    padding-top: 30px;
}

/* "HERE TO SUPPORT YOU" — large black headline */
.pixfort_normal_1 h5.L9a2_style {
    color: #000;
    font-size: 70px;
    line-height: 70px;
    font-weight: 800;
    letter-spacing: -0.07em;
}


/* ============================================================
   CONTACT INFO BAND  (red gradient rounded box)
   ============================================================ */

.pixfort_corporate_2 .adv_sta1 {
    background-image: linear-gradient(180deg, #e21f3d, #be0722);
    padding-top: 10px;
    padding-bottom: 60px;
    text-align: center;
}

/*
 * The grid's float:left on .sixteen.columns collapses the container
 * height inside this band and scrunches the text. Overriding float
 * here lets the content span full width normally.
 */
.pixfort_corporate_2 .adv_sta1 .container {
    width: 100%;
    max-width: 1170px;
}

.pixfort_corporate_2 .adv_sta1 .sixteen.columns {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box;
}

/* "TWO WAYS TO CONTACT US:" */
.pixfort_corporate_2 .head_style2b2 {
    color: #fff;
    font-size: 50px;
    font-weight: 700;
    padding-top: 35px;
    padding-bottom: 5px;
}

/* Phone number */
.pixfort_corporate_2 .head_style2b1 {
    color: #fff;
    font-size: 80px;
    font-weight: 700;
    padding-top: 35px;
    padding-bottom: 5px;
}

/* Extension / descriptor lines */
.pixfort_corporate_2 .head_style2a1 {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    padding-top: 20px;
}

/* Email address */
.pixfort_corporate_2 .head_style2b3 {
    color: #fff;
    font-size: 45px;
    font-weight: 700;
    padding-top: 35px;
    padding-bottom: 5px;
}

.pixfort_corporate_2 .head_style2b3 a,
.pixfort_corporate_2 .head_style2b3 a:visited {
    color: #fff;
    text-decoration: underline;
}


/* ============================================================
   TEAM HEADSHOT GRID  (white band)
   ============================================================ */

.pixfort_corporate_2 .adv_sta2 {
    background: #ffffff;
    background-size: cover;
    text-align: center;
}

/* Headshot card */
.pixfort_normal_1 .logos_st {
    position: relative;
    display: inline-block;
}

/* No underline on headshot photo links */
.pixfort_corporate_2 .adv_sta2 .logos_st a {
    text-decoration: none;
    color: inherit;
}

/* Person name */
.pixfort_corporate_2 .head_style1 {
    font-size: 22px;
    font-weight: 700;
    padding-top: 20px;
}

/* Territory / title line */
.pixfort_corporate_2 .c1_style {
    font-size: 15px;
    font-weight: 600;
    line-height: 150%;
    padding-bottom: 40px;
}


/* ============================================================
   UTILITY CLASSES  (replace inline style="…" in HTML)
   ============================================================ */

/* Hero column bottom margin — CI page */
.section-hero-ci  { margin-bottom: 40px; }

/* Hero column bottom margin — 12V page */
.section-hero-12v { margin-bottom: 20px; }

/* Award badge image (CI page) */
.award-badge {
    width: 90%;
    padding: 25px;
}

/* "Your Go-To Team" band top margin */
.section-go-to-team { margin-top: 40px; }

/* Map and go-to-team images at natural width */
.img-auto-width { width: auto; }

/* Headshot grid container inner padding */
.pixfort_corporate_2 .adv_sta2 .container {
    padding: 40px 40px 0 40px;
}


/* ============================================================
   MOBILE OVERRIDES  (≤ 720px)
   ============================================================ */

@media screen and (max-width: 720px) {

    .pixfort_normal_1 h5.L9a3_style {
        font-size: 40px;
        line-height: 35px;
    }

    .pixfort_normal_1 h5.L9a2_style {
        font-size: 40px;
        line-height: 35px;
        letter-spacing: -0.07em;
    }

    /* Line 1: "TWO WAYS TO CONTACT US:" — larger line-height so
       the wrapped text doesn't cramp */
    .pixfort_corporate_2 .head_style2b2 {
        font-size: 35px;
        padding-top: 35px;
        line-height: 1.3;
    }

    /* Line 2: phone number — same size as the descriptor lines */
    .pixfort_corporate_2 .head_style2b1 {
        font-size: 35px;
        padding-top: 15px;
        padding-bottom: 5px;
    }

    /* Line 3: extension / descriptor — base size these pages use */
    .pixfort_corporate_2 .head_style2a1 {
        font-size: 20px;
    }

    /* Line 4: email address — same size as the descriptor lines */
    .pixfort_corporate_2 .head_style2b3 {
        font-size: 20px;
        font-weight: 700;
        padding-top: 15px;
        padding-bottom: 5px;
    }

    .pixfort_corporate_2 .adv_sta1 {
        padding: 10px 10px 40px 0;
        border-radius: 0;
        background-image: none;
        background-color: #e21f3d;
    }

    /* Headshot cards: cancel the float and center each card */
    .container .four1.columns {
        float: none;
        display: block;
        width: auto;
        margin: 0 auto;
        text-align: center;
    }
}