
* {
    margin: 0;
    padding: 0;
}

*:focus {
    outline: 0;
    box-shadow: none;
}

html, body {
    width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

.aci {
    /* Fonts */
    --font-family: 'Montserrat';
    --base-font-size: 15.5px;
    --base-line-height: 26px;

    /* Colors */
    --blue: #005AD6;
    --blue-2: #cfddf5;
    --blue-hover: #e2e8f4;
    --pink: #B35BAE;
    --pink-2: #EDDFEE;
    --pink-3: #dbc5db;
    --teal: #09C7B8;
    --teal-2: #D5F3F1;
    --teal-3: #cae8e6;
    --teal-hover: #e4f7f6;
    --orange: #EB6D28;
    --orange-2: #f7e3d6;
    --orange-hover: #f9ede5;
    --white: #FFF;
    --ghost-white: #f9f9f9;
    --grey: #B9B9B9;
    --black: #0A0B09;

    /* Margins */
    --space--2: -20px;
    --space--1: -10px;
    --space-1: 10px;
    --space-2: 20px;
    --space-3: 30px;
    --space-4: 40px;
    --space-6: 60px;
    --space-8: 80px;
    --space-12: 120px;

    font-family: var(--font-family);
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
    color: var(--black);
}

    p {
        margin: 0 0 var(--space-2);
    }

    .h2 {
        font-size: 56px;
        line-height: 60px;
        font-weight: 800;
        text-transform: uppercase;
        margin: 0 0 var(--space-6);
    }

    .h3 {
        font-size: 40px;
        line-height: 48px;
        font-weight: 700;
        margin: 0 0 var(--space-2);
    }

    .big-text {
        font-size: 18px;
        line-height: 28px;
        font-weight: 600;
        margin: 0 0 var(--space-3);
    }

    @media only screen and (max-width: 768px) {
        .h2 {
            font-size: 42px;
            line-height: 46px;
            margin: 0 0 var(--space-4);
        }

        .h3 {
            font-size: 30px;
            line-height: 38px;
        }
    }

    @media only screen and (max-width: 600px) {
        .h2 {
            font-size: 32px;
            line-height: 36px;
            margin: 0 0 var(--space-4);
        }

        .h3 {
            font-size: 24px;
            line-height: 32px;
        }
    }

    .margin-top--2 {
        margin-top: var(--space-2) !important;
    }

    .margin-bottom--3 {
        margin-bottom: var(--space-3) !important;
    }

    .row {
        margin: 0 var(--space--2);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

        .column {
            display: flex;
            flex-direction: column;
            min-width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            padding: 0 var(--space-2);
        }

        .column p:last-of-type {
            margin: 0;
        }

        .column--half {
            min-width: 50%;
            max-width: 50%;
        }

    @media only screen and (max-width: 600px) {
        .column--half {
            min-width: 100%;
            max-width: 100%;
        }
    }

    .container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 var(--space-3);
    }

        @media only screen and (max-width: 600px) {
            padding: 0 var(--space-2);
        }

    .image {
        width: 100%;
    }

    .button {
        background: var(--white);
        min-height: 50px;
        line-height: 50px;
        box-sizing: border-box;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 0 var(--space-2);
        transition: background 0.15s ease-in-out;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

        .button-icon {
            width: 26px;
            height: 26px;
            display: inline-flex;
            margin-right: 4px;
        }

        .button:hover,
        .button:active,
        .button:focus {
            transition: background 0.15s ease-in-out;
        }

        .button:link,
        .button:visited,
        .button:hover,
        .button:active,
        .button:focus {
            color: var(--black);
        }

            .button--blue:link,
            .button--blue:visited,
            .button--blue:hover,
            .button--blue:active,
            .button--blue:focus {
                color: var(--blue);
            }

            .button--blue:hover,
            .button--blue:active,
            .button--blue:focus {
                background: var(--blue-hover);
            }

            .button--teal:link,
            .button--teal:visited,
            .button--teal:hover,
            .button--teal:active,
            .button--teal:focus {
                color: var(--teal);
            }

            .button--teal:hover,
            .button--teal:active,
            .button--teal:focus {
                background: var(--teal-hover);
            }

            .button--orange:link,
            .button--orange:visited,
            .button--orange:hover,
            .button--orange:active,
            .button--orange:focus {
                color: var(--orange);
            }

            .button--orange:hover,
            .button--orange:active,
            .button--orange:focus {
                background: var(--orange-hover);
            }


    .tile-plain {
        display: flex;
        flex-direction: column;
        margin: 0 0 var(--space-3);
    }

        .tile-plain p:last-of-type {
            margin: 0;
        }

    .card {
        background: rgba(255, 255, 255, 0.5);
        padding: var(--space-3);
        margin: 0 0 var(--space-3);
        box-sizing: border-box;
    }
        .card-header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .card-icon {
            width: 50px;
            height: 50px;
            margin: -2px 0 var(--space-2);
        }

            .card-icon--pink {
                color: var(--pink);
            }

            .card-icon--blue {
                color: var(--blue);
            }

            .card-icon--teal {
                color: var(--teal);
            }

            .card-icon--orange {
                color: var(--orange);
            }

        .card-content-title {
            font-weight: 700;
            margin: 0 0 var(--space-1);
        }

        .card-link {
            color: var(--black);
            font-weight: 700;
            display: inline-flex;
            margin: var(--space-1) 0 0;
        }

            .card-link:link,
            .card-link:visited,
            .card-link:hover,
            .card-link:active,
            .card-link:focus {
                color: var(--black);
            }

            .card-link .icon {
                width: 12px;
                margin-right: 4px;
            }

    @media only screen and (max-width: 600px) {
        padding: var(--space-2);
    }

    .more {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: var(--space-6) 0 0;
        padding: var(--space-6) 0 0;
        border-top: 1px solid var(--black);
    }
        .more-item {
        }

            .more  p.more-item-annotation {
                margin: 0 0 var(--space-1);
            }

            .more-item-backToTop {
                font-weight: 600;
                display: inline-flex;
                flex-direction: row;
                align-items: center;
            }

                .more-item-backToTop-icon {
                    width: 12px;
                    height: 12px;
                    display: inline-flex;
                    margin: 0 0 0 4px;
                }

            .more-item .button {
                min-width: 180px;
                text-align: center;
            }

    .more--pink {
        border-top: 1px solid var(--pink);
    }

        .more--pink .more-item-backToTop,
        .more--pink .more-item-backToTop:link,
        .more--pink .more-item-backToTop:visited {
            color: var(--pink);
        }

    .more--blue {
        border-top: 1px solid var(--blue);
    }

        .more--blue .more-item-backToTop,
        .more--blue .more-item-backToTop:link,
        .more--blue .more-item-backToTop:visited {
            color: var(--blue);
        }

    .more--teal {
        border-top: 1px solid var(--teal);
    }

        .more--teal .more-item-backToTop,
        .more--teal .more-item-backToTop:link,
        .more--teal .more-item-backToTop:visited {
            color: var(--teal);
        }

    .more--orange {
        border-top: 1px solid var(--orange);
    }

        .more--orange .more-item-backToTop,
        .more--orange .more-item-backToTop:link,
        .more--orange .more-item-backToTop:visited {
            color: var(--orange);
        }

    @media only screen and (max-width: 1024px) {
        .more {
            flex-direction: column;
            justify-content: unset;
            align-items: unset;
            margin: var(--space-4) 0 0;
            padding: var(--space-4) 0 0;
        }

        .more-item {
            margin: 0 0 var(--space-2);
        }
    }

    @media only screen and (max-width: 600px) {
        .more .button {
            width: 100%;
        }
    }

    .header {
        background: var(--blue);
        display: flex;
        align-items: center;
    }

        .nav {
            padding: var(--space-2) 0;
        }

        .nav-list {
            list-style: none;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
        }

            .nav-link {
                display: inline-block;
                font-size: 14px;
                line-height: 40px;
                height: 40px;
                font-weight: 500;
                text-decoration: none;
                padding: 0 var(--space-2);
                white-space: nowrap;
            }

            .nav-link,
            .nav-link:link,
            .nav-link:visited,
            .nav-link:hover,
            .nav-link:active,
            .nav-link:focus {
                color: var(--white);
            }

            .nav-link:hover,
            .nav-link:active,
            .nav-link:focus {
                text-decoration: underline;
            }


    @media only screen and (max-width: 600px) {
        .nav-link {
            padding: 0 var(--space-1);
        }
    }


    .section {
        padding: var(--space-8) 0;
    }

        @media only screen and (max-width: 768px) {
            .section {
                padding: var(--space-6) 0;
            }
        }

        @media only screen and (max-width: 600px) {
            .section {
                padding: var(--space-4) 0;
            }
        }

        .section-heading {
            display: flex;
            flex-direction: row;
        }
            .section-heading-left {
                height: 60px;
                display: flex;
                align-items: center;
                margin: 0 var(--space-2) 0 0;
            }

            .section-heading-icon {
                width: 40px;
                min-height: 40px;
                fill: var(--white);
                position: relative;
                top: 3px;
            }

            .section-heading-small {
                font-size: 14px;
                line-height: 18px;
                font-weight: 700;
            }

            .section-heading-description {
                font-size: 28px;
                line-height: 38px;
                font-weight: 500;
                letter-spacing: -0.5px;
            }

            .section-heading-label {
                font-size: 14px;
                line-height: 18px;
                letter-spacing: 0.5px;
                text-transform: uppercase;
                font-weight: 700;
            }

        @media only screen and (max-width: 600px) {
            .section-heading-left {
                margin: 0 var(--space-1) 0 0;
            }

            .section-heading-description {
                font-size: 20px;
                line-height: 30px;
            }
        }

    .section--intro {
        background: var(--blue);
        padding-top: var(--space-3);
        padding-bottom: 0;
        display: flex;
        min-height: 600px;
        position: relative;
    }

        .section--intro-title {
            font-size: 76px;
            line-height: 76px;
            font-weight: 800;
            letter-spacing: -1px;
            text-align: center;
            text-transform: uppercase;
            color: var(--white);
        }

            .section--intro-title-text--1 {
            }

            .section--intro-title-text--2 {
                opacity: 0.4;
            }

        .section--intro .container {
            position: relative;
            flex: 1;
        }

        .section--intro .section-background {
            background-image: url('../images/aci-home-cover-image.png');
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-size: contain;
            background-repeat: no-repeat;
            background-position-y: bottom;
        }


        .section--intro .button {
            position: absolute;
            bottom: 30px;
            right: 0px;
        }

        .section--intro .button .button-icon {
            fill: var(--teal);
            margin: 0 8px 0 0;
        }

        .section--intro .button,
        .section--intro .button:link
        .section--intro .button:visited {
            color: var(--blue);
        }

        .section--intro .button:hover,
        .section--intro .button:active
        .section--intro .button:focus {
            background: var(--blue-hover);
        }

        @media only screen and (max-width: 768px) {
            .section--intro {
                min-height: 400px;
            }

            .section--intro-title {
                font-size: 54px;
                line-height: 64px;
            }

            .section--intro .button {
                right: 30px;
            }
        }

        @media only screen and (max-width: 600px) {
            .section--intro {
                min-height: 300px;
                padding-top: var(--space-2);
            }

            .section--intro-title {
                font-size: 34px;
                line-height: 40px;
            }
        }

    .section--overview {
        background: var(--ghost-white);
    }

        .section--overview .h2 {
            font-size: 22px;
            line-height: 28px;
            font-weight: 500;
            text-transform: initial;
            margin: 0 0 var(--space-3);
        }

    .section--stats {
        background: var(--white);
    }

        .section--stats .h2 {
            color: var(--blue);
        }

            .stats-row {
                padding: var(--space-3) 0;
                display: flex;
                flex-direction: row;
            }

                .stats-column {
                    flex: 1;
                }

                .stats-column--title {
                    min-width: 300px;
                    font-size: 22px;
                    line-height: 28px;
                    font-weight: 500;
                }

                    .stats-column--title-icon {
                        width: 36px;
                        height: 36px;
                        margin: 0 0 var(--space-1);
                    }

                    .stats-column--title-text {
                        margin: 0 0 var(--space-3);
                    }

                .stats-heading {
                    font-size: 40px;
                    line-height: 48px;
                    font-weight: 700;
                    margin: 0 0 8px;
                }

            .stats-row--pink {
                border-top: 1px solid var(--pink);
            }

                .stats-row--pink .stats-column--title {
                    color: var(--pink);
                }

                .stats-row--pink .stats-heading {
                    color: var(--pink);
                }

            .stats-row--blue {
                border-top: 1px solid var(--blue);
            }

                .stats-row--blue .stats-column--title {
                    color: var(--blue);
                }

                .stats-row--blue .stats-heading {
                    color: var(--blue);
                }

            .stats-row--teal {
                border-top: 1px solid var(--teal);
            }

                .stats-row--teal .stats-column--title {
                    color: var(--teal);
                }

                .stats-row--teal .stats-heading {
                    color: var(--teal);
                }

            .stats-row--orange {
                border-top: 1px solid var(--orange);
            }

                .stats-row--orange .stats-column--title {
                    color: var(--orange);
                }

                .stats-row--orange .stats-heading {
                    color: var(--orange);
                }

        @media only screen and (max-width: 1024px) {
            .stats-row {
                flex-direction: column;
            }

            .stats-row:last-of-type .stats-column p:last-of-type {
                margin: 0;
            }
        }

    .section--contribute {
        background: var(--pink);
        color: var(--white);
        padding-bottom: 0;
        overflow: hidden;
    }

        .section--contribute .section-backgroundOuter {
            position: relative;
        }

        .section--contribute .section-background {
            margin: var(--space-8) 0 0;
            background-image: url('../images/aci-contribute-cover-image.png');
            background-size: contain;
            height: 400px;
            width: 800px;
            background-repeat: no-repeat;
            background-position-y: bottom;
            z-index: 2;
            position: relative;
        }

        .section--contribute .section-background-circle {
            width: 700px;
            height: 700px;
            position: absolute;
            left: 400px;
            bottom: -360px;
            z-index: 1;
        }

        @media only screen and (max-width: 768px) {
            .section--contribute .section-background {
                height: 300px;
                width: 600px;
                margin: var(--space-6) 0 0;
            }

            .section--contribute .section-background-circle {
                width: 400px;
                height: 400px;
                left: 300px;
                bottom: -200px;
            }
        }

    .section--contributeContent {
        background: var(--pink-2);
    }

        .section--contributeContent-globe {
            margin: var(--space-8) 0;
        }

        .goal-heading {
            font-size: 20px;
            line-height: 30px;
            font-weight: 700;
            letter-spacing: -0.5px;
            text-transform: uppercase;
            margin: 0 0 var(--space-2) calc(var(--space-3) + 66px);
        }

            .goal-heading--blue {
                color: var(--blue)
            }

            .goal-heading--teal {
                color: var(--teal)
            }

            .goal-heading--pink {
                color: var(--pink)
            }

            .goal-heading--orange {
                color: var(--orange)
            }

        .goal {
            margin: 0 0 var(--space-3);
            display: flex;
            flex-direction: row;
        }

            .goal p {
                margin: 0;
            }

            .goal-left {
                min-width: 66px;
                max-width: 66px;
                margin: 0 var(--space-3) 0 0;
            }

            .goal-right {
            }

            .goal p.goal-annotation {
                font-size: 11px;
                line-height: 14px;
                font-weight: 800;
                margin: 0 0 var(--space-2);
            }
                .goal-annotation--inner {
                    color: var(--grey);
                }

        @media only screen and (max-width: 600px) {
            .section--contributeContent-globe {
                margin: var(--space-6) 0;
            }

            .goal-heading {
                margin: 0 0 var(--space-2) calc(var(--space-2) + 40px);
            }

            .goal-left {
                min-width: 40px;
                max-width: 40px;
                margin: 0 var(--space-2) 0 0;
            }
        }

    .section--transparency {
        background: var(--blue);
        color: var(--white);
        overflow: hidden;
        padding-bottom: 0;
    }

        .section--transparency .section-backgroundOuter {
            position: relative;
            height: 500px;
        }

        .section--transparency .section-background {
            margin: var(--space-8) 0 0 0;
            background-image: url('../images/aci-transparency-cover-image.png');
            background-size: contain;
            height: 600px;
            width: 600px;
            background-repeat: no-repeat;
            background-position-y: bottom;
            z-index: 1;
            position: absolute;
            right: 100px;
            bottom: 0;
        }

        .section--transparency .section-background-circle {
            width: 600px;
            height: 600px;
            position: absolute;
            right: 400px;
            bottom: -300px;
            z-index: 2;
        }

        @media only screen and (max-width: 768px) {
            .section--transparency .section-backgroundOuter {
                height: 300px;
            }

            .section--transparency .section-background {
                height: 400px;
                width: 400px;
                margin: var(--space-6) 0 0 0;
                right: 0px;
            }

            .section--transparency .section-background-circle {
                width: 400px;
                height: 400px;
                right: 200px;
                bottom: -200px;
            }
        }

    .section--transparencyContent {
        background: var(--blue-2);
    }

    .section--nature {
        background: var(--teal);
        color: var(--white);
        position: relative;
        overflow: hidden;
        padding-bottom: 0;
    }

        .section--nature .section-backgroundOuter {
            margin: var(--space-4) 0 0;
            height: 400px;
        }

        .section--nature .section-background {
            background-image: url('../images/aci-value-nature-cover-image.png');
            background-size: contain;
            height: 400px;
            width: 800px;
            background-repeat: no-repeat;
            background-position-y: bottom;
            z-index: 1;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .section--nature .section-background-circle {
            width: 600px;
            height: 600px;
            position: absolute;
            left: 600px;
            bottom: -300px;
            z-index: 2;
        }

        @media only screen and (max-width: 768px) {
            .section--nature .section-backgroundOuter {
                margin: var(--space-4) 0 0;
                height: 300px;
            }

            .section--nature .section-background {
                height: 300px;
                width: 600px;
            }

            .section--nature .section-background-circle {
                width: 400px;
                height: 400px;
                left: 300px;
                bottom: -200px;
            }
        }

    .section--natureContent {
        background: var(--teal-2);
    }

    .section--reduceEmissions {
        background: var(--orange);
        color: var(--white);
        padding-bottom: 0;
        position: relative;
        overflow: hidden;
    }
        .section--reduceEmissions .section-background {
            background-image: url('../images/aci-reduce-cover-image.png');
            background-size: cover;
            width: 100%;
            height: 400px;
            background-position-y: bottom;
            background-repeat: no-repeat;
            margin: var(--space-8) 0 0;
        }

        .section--reduceEmissions .section-background-circle {
            position: absolute;
            width: 800px;
            bottom: -400px;
            left: 12vw;
        }

        @media only screen and (max-width: 768px) {
            .section--reduceEmissions .section-background {
                margin: var(--space-4) 0 0;
                height: 250px;
            }

            .section--reduceEmissions .section-background-circle {
                width: 400px;
                bottom: -200px;
            }
        }

    .section--reduceEmissionsContent {
        background: var(--orange-2);
    }

    .seciton--video {
        background: var(--ghost-white);
    }
        .video-container {
            width: 100%;
            padding-top: 55%;
            position: relative;
        }
            .video {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                width: 100%;
                height: 100%;
            }

    .section--quotes {
        padding: 0;
    }

        .slides {
            position: relative;
        }

        .slides-content {
            margin: 0 !important;
            overflow-x: hidden;
        }

        .slides-navigation {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: row;
        }

            .slides-navigation .slick-prev,
            .slides-navigation .slick-next {
                position: static;
                transform: unset;
                width: 24px;
                height: 24px;
                fill: var(--white);
            }

            .slides-navigation .slick-dots {
                display: flex;
                flex-direction: row;
                height: 24px;
                align-items: center;
            }

            .slides-navigation .slick-dots li {
                width: unset;
                height: unset;
                margin: 0 8px;
            }

            .slides-navigation .slick-prev:before,
            .slides-navigation .slick-next:before {
                display: none;
            }

        .slides.slick-dotted.slick-slider {
            margin: 0;
        }

            .slides .slick-dots li button {
                border: 2px solid var(--white);
                background: transparent;
                width: 6px;
                height: 6px;
                border-radius: 50%;
            }

                .slides .slick-dots li button:before {
                    display: none;
                }

                .slides .slick-dots .slick-active button {
                    background: var(--white);
                }

            .slides-content[data-index='1'] + .slides-navigation .slick-dots li button {
                border: 2px solid var(--teal);
            }

                .slides-content[data-index='1'] + .slides-navigation .slick-dots .slick-active button {
                    background: var(--teal);
                }

                .slides-content[data-index='1'] + .slides-navigation .slick-prev,
                .slides-content[data-index='1'] + .slides-navigation .slick-next {
                    fill: var(--teal);
                }

            .slides-content[data-index='2'] + .slides-navigation .slick-dots li button {
                border: 2px solid var(--pink);
            }

                .slides-content[data-index='2'] + .slides-navigation .slick-dots .slick-active button {
                    background: var(--pink);
                }

                .slides-content[data-index='2'] + .slides-navigation .slick-prev,
                .slides-content[data-index='2'] + .slides-navigation .slick-next {
                    fill: var(--pink);
                }

            .slides .slick-dots {
                position: static;
            }

            .slide {
                overflow: hidden;
            }

            .slide-content {
                height: 500px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: relative;
            }

            .slide-heading {
                font-size: 56px;
                line-height: 60px;
                margin: 0 0 var(--space-2);
                text-align: center;
                max-width: 800px;
            }

            .slide-link {
                color: var(--white);
                font-weight: 700;
                display: inline-flex;
                align-items: center;
                margin: var(--space-1) 0 0;
            }

                .slide-link:link,
                .slide-link:visited,
                .slide-link:hover,
                .slide-link:active,
                .slide-link:focus {
                    color: var(--white);
                }

                .slide-link-icon {
                    width: 14px;
                    height: 14px;
                    display: inline-flex;
                    margin: 0 0 0 4px;
                }

            .slide-background {
                position: absolute;
                height: 500px;
                pointer-events: none;
            }

            .slide--blue .slide-inner {
                background: var(--blue);
                color: var(--white);
            }

            .slide--teal .slide-inner {
                background: var(--teal-3);
                color: var(--teal);
            }

                .slide--teal .slide-link:link,
                .slide--teal .slide-link:visited,
                .slide--teal .slide-link:hover,
                .slide--teal .slide-link:active,
                .slide--teal .slide-link:focus {
                    color: var(--teal);
                }

            .slide--pink .slide-inner {
                background: var(--pink-3);
                color: var(--pink);
            }

                .slide--pink .slide-link:link,
                .slide--pink .slide-link:visited,
                .slide--pink .slide-link:hover,
                .slide--pink .slide-link:active,
                .slide--pink .slide-link:focus {
                    color: var(--pink);
                }

    @media only screen and (max-width: 768px) {
        .slide-heading {
            font-size: 46px;
            line-height: 50px;
        }
    }

    @media only screen and (max-width: 600px) {
        .slide-heading {
            font-size: 36px;
            line-height: 40px;
        }
    }
