@charset "utf-8";

/* =========================================================
   PMI maintenance page stylesheet
   ========================================================= */

/* ---------------------------------------------------------
   Fonts
   --------------------------------------------------------- */

@font-face {
    font-family: "Agrandir";
    src: url("https://cdn.pmi.org/dsm/fonts/Agrandir/Agrandir-Medium.eot");
    src:
        url("https://cdn.pmi.org/dsm/fonts/Agrandir/Agrandir-Medium.eot?#iefix")
            format("embedded-opentype"),
        url("https://cdn.pmi.org/dsm/fonts/Agrandir/Agrandir-Medium.woff2")
            format("woff2"),
        url("https://cdn.pmi.org/dsm/fonts/Agrandir/Agrandir-Medium.woff")
            format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------
   Global box sizing
   --------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   Page
   --------------------------------------------------------- */

html {
    width: 100%;
    min-height: 100%;
}

body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    background-color: #ffffff;
    color: #575757;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
}

/* ---------------------------------------------------------
   Header and logo
   --------------------------------------------------------- */

.heading {
    width: 100%;
    padding: 25px 0;
    background-color: #ffffff;
}

.heading img {
    display: block;
    width: 200px;
    max-width: calc(100% - 40px);
    height: auto;
    margin-left: 5.6%;
    padding: 5px 0;
}

/* ---------------------------------------------------------
   Main content and columns
   --------------------------------------------------------- */

.content {
    width: 100%;
}

.row {
    width: 100%;
}

.row::after {
    display: table;
    clear: both;
    content: "";
}

.column {
    float: left;
    width: 65%;
    padding-bottom: 24px;
}

.column2 {
    float: left;
    width: 35%;
    padding-bottom: 24px;
}

/* ---------------------------------------------------------
   Left-column typography
   --------------------------------------------------------- */

.column h1 {
    width: auto;
    margin-top: 0;
    margin-bottom: 30px;
    padding-left: 8.5%;
    padding-right: 8.5%;
    color: #575757;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 45px;
    font-weight: 300;
    line-height: 1;
}

.column h2 {
    width: auto;
    margin-top: -8px;
    margin-bottom: 10px;
    padding: 25px 8.5% 5px;
    color: #212121;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 31px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.1;
}

.column h3 {
    width: auto;
    margin-top: 28px;
    margin-bottom: 6px;
    padding-left: 8.5%;
    padding-right: 8.5%;
    color: #575757;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 27px;
    font-weight: 300;
    letter-spacing: 0.8px;
    line-height: 1.1;
}

.column p {
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 8.5% 10px;
    color: #575757;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.42857143;
}

/* ---------------------------------------------------------
   Maintenance site list

   The list container begins at the same 8.5% position as
   the paragraphs. Only the bullets receive extra indentation.
   --------------------------------------------------------- */

.column .maintenance-sites {
    width: auto;
    margin: 0 8.5% 25px;
    padding: 0 0 0 24px;
    color: #575757;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.42857143;
    list-style-position: outside;
    list-style-type: disc;
}

.column .maintenance-sites li {
    margin: 0 0 6px;
    padding: 0;
    color: #575757;
}

/* ---------------------------------------------------------
   Links
   --------------------------------------------------------- */

a {
    color: #4f17a7;
    text-decoration: none;
}

a:active,
a:focus,
a:hover {
    color: #2f0e65;
}

a:hover {
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid #4f17a7;
    outline-offset: 3px;
}

/* ---------------------------------------------------------
   Right column
   --------------------------------------------------------- */

.column2 > h3 {
    width: auto;
    margin-top: 0;
    margin-right: 8.5%;
    margin-bottom: 70px;
    margin-left: 12px;
    padding: 0;
    color: #575757;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 27px;
    font-weight: 300;
    letter-spacing: 0.8px;
    line-height: 1.1;
}

/* ---------------------------------------------------------
   Customer Care cards
   --------------------------------------------------------- */

.img-caption {
    width: auto;
    max-width: 314px;
    padding-left: 8.5%;
    padding-right: 2%;
}

.img-caption:not(:last-child) {
    margin-bottom: 50px;
}

.img-caption__img {
    width: 100%;
}

.img-caption img {
    display: block;
    width: 100%;
    max-width: 314px;
    height: auto;
    margin: 0;
    padding: 0;
}

.img-caption .img-caption__text > h4 {
    width: 100%;
    margin: 20px 0 6px;
    padding: 0;
    color: #212121;
    font-family: Agrandir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.8px;
    line-height: 24px;
}

.img-caption .img-caption__text > p {
    width: 100%;
    margin-top: 0;
    margin-bottom: 10px;
    padding: 0;
    color: #575757;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.42857143;
}

/* ---------------------------------------------------------
   Customer Care feature lists
   --------------------------------------------------------- */

.img-caption ul {
    margin: 0 0 1rem;
    padding: 0;
    color: #575757;
    font-size: 1rem;
    list-style: none;
}

.img-caption ul li {
    position: relative;
    margin-bottom: 4px;
    margin-left: 26px;
    color: #575757;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    list-style: none;
}

.img-caption ul li::before {
    position: relative;
    top: -3px;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 15px;
    margin-left: -21px;
    border-radius: 100%;
    background-color: #05bfe0;
    background-clip: padding-box;
    content: "";
}

/* ---------------------------------------------------------
   Icons
   --------------------------------------------------------- */

.icon-nowrap {
    display: inline;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    white-space: nowrap;
}

svg.icon {
    position: relative;
    width: 15px;
    max-width: 100%;
    height: 15px;
    fill: currentColor;
    font-size: 75%;
    vertical-align: middle;
}

/* ---------------------------------------------------------
   Other retained page components
   --------------------------------------------------------- */

.header {
    width: 100%;
}

.wrapper {
    width: 65%;
    padding-top: 10px;
}

.wrapper2 {
    float: right;
    width: 35%;
    padding-top: 10px;
}

.lead {
    display: block;
    margin-top: -8px;
    margin-bottom: 7.5px;
    margin-left: -2px;
    padding-bottom: 20px;
    color: #6e8393;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: 200;
    line-height: 1.2;
}

.separator {
    display: block;
    width: 68%;
    height: 1.5px;
    margin-top: 25px;
    margin-bottom: 10px;
    margin-left: 8.5%;
    border-top: 1px solid #c2cbd2;
}

.callout {
    margin-right: 25.01%;
    margin-left: 7%;
    padding: 5px;
    background-color: #e5f5fb;
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.footer {
    width: 100%;
    padding: 25px 0;
    background-color: #f0f0f0;
    color: #333f48;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
}

.footertext {
    width: auto;
    margin: 0;
    padding: 0 6%;
    color: #333f48;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
}

/* ---------------------------------------------------------
   Responsive behavior: 900px and below
   --------------------------------------------------------- */

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

    .column h1,
    .column h2,
    .column h3,
    .column p {
        padding-right: 24px;
        padding-left: 20%;
    }

    .column .maintenance-sites {
        margin-right: 24px;
        margin-left: 20%;
        padding-left: 24px;
    }
}

/* ---------------------------------------------------------
   Responsive behavior: 776px and below
   --------------------------------------------------------- */

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

    .heading {
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 0;
    }

    .heading img {
        margin-left: 4%;
    }

    .column,
    .column2 {
        float: none;
        width: 100%;
    }

    .column2 > h3 {
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: 8.5%;
    }

    .img-caption {
        width: auto;
        max-width: 100%;
        padding-right: 8.5%;
    }

    .img-caption img {
        max-width: 100%;
    }
}

/* ---------------------------------------------------------
   Responsive behavior: 600px and below

   Reduce the large 20% mobile indentation so content remains
   readable on narrow phones.
   --------------------------------------------------------- */

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

    .column h1,
    .column h2,
    .column h3,
    .column p {
        padding-right: 24px;
        padding-left: 24px;
    }

    .column h1 {
        font-size: 36px;
        line-height: 1.05;
    }

    .column h3 {
        font-size: 24px;
    }

    .column .maintenance-sites {
        margin-right: 24px;
        margin-left: 24px;
        padding-left: 24px;
    }

    .column2 > h3 {
        margin-right: 24px;
        margin-left: 24px;
    }

    .img-caption {
        padding-right: 24px;
        padding-left: 24px;
    }
}

/* ---------------------------------------------------------
   Customer Care feature-list spacing
   --------------------------------------------------------- */

@media (min-width: 768px) {

    .img-caption ul li {
        margin-bottom: 8px;
    }
}

@media (min-width: 1200px) {

    .img-caption ul li {
        margin-bottom: 9.6px;
    }
}