/*#region Variables 
--------------------------  */

:root {
    /* Fluid Font Sizes - Calculate the sizes based on the viewport width. 
        This will change the fonts based on the viewport size. The min and max set the font at those sizes. 
        They do not stop the font size changing above and below those sizes so we still need to put those in the media queries
    */
    /* Latest Events */
    --event-h2-fw-min-v: 22;
    --event-h2-fw-max-v: 38;
    --event-h2-fw-min: 22px;
    --event-h2-fw-max: 38px;
    --event-h2-fw: calc(var(--event-h2-fw-min) + (var(--event-h2-fw-max-v) - var(--event-h2-fw-min-v)) * ((100vw - var(--viewport-min)) / (var(--viewport-max-v) - var(--viewport-min-v))));
}

/*#endregion */

/*#region Common 
--------------------------  */

main {
    background-color: #fff;
}

main .inner > section {
    position: relative;
    background-color: #fff;
}

    main .inner > section:first-child {
        padding-top: var(--spc-vertical-quarter);
    }

section .loader {
    display: block;
}

main .inner > section header h1 a:hover {
    color: #000;
    box-shadow: inset 0 -2px 0 0 #000;
}

main .inner > section > header button {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}

@media screen and (min-width: 800px) {
    main .inner > section:first-child {
        padding-top: var(--spc-vertical-half);
    }
}

/* Spacing between sections - not on first item */
body > main > .inner > .separation:first-child {
    margin-top: 0;
}

body > main > .inner > .separation:first-child:before {
    display: none;
}

@media screen and (min-width: 1080px) {

    body > main > .inner > .separation:first-child {
        margin-top: 0;
    }

}


/*#endregion */

/*#region Banner 
--------------------------  */

@media screen and (min-width: 800px) {
    .mainbanner.slidecontainer.textover nav {
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
    }
    .mainbanner.slidecontainer.textover ul {
        position: absolute;
        top: calc(((85vh - var(--header-height-lge)) / 2) - 2em);
        -ms-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    .mainbanner.slidecontainer.textover nav a.prev, .mainbanner.slidecontainer.textover nav a.next {
        position: absolute;
    }
    .mainbanner.slidecontainer.textover nav a.prev {
        left: 20%;
    }
    .mainbanner.slidecontainer.textover nav a.next {
        right: 20%;
    }
}

@media screen and (min-width: 1200px) {
    .mainbanner.slidecontainer.textover ul {
        top: calc(((80vh - var(--header-height-lge)) / 2) - 2em);
    }
}

@media screen and (min-width: 1600px) {
    .mainbanner.slidecontainer.textover ul {
        top: 15.1875em;
    }

    .mainbanner.slidecontainer.textover nav a.prev {
        left: 25%;
    }

    .mainbanner.slidecontainer.textover nav a.next {
        right: 25%;
    }

}

/* Home banner */

.homebanner {
    position: relative;
    padding: 0;
    margin: 0 auto;
    max-width: 87.5em;
    display: block;
    height: 15em;
}

    .homebanner[onclick] {
        cursor: pointer;
    }

    .homebanner img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .homebanner figcaption {
        position: absolute !important;
        top: 55%;
        left: 0;
        right: 0;
        padding: 0.5em;
        color: #fff;
        text-align: center;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

        .homebanner figcaption:before {
            content: url(/_resources/files/template/ief-white.svg);
            display: block;
            width: 2.5em;
            position: absolute;
            left: 50%;
            bottom: 100%;
            -moz-transform: translate(-50%, -0.5em);
            -ms-transform: translate(-50%, -0.5em);
            -o-transform: translate(-50%, -0.5em);
            -webkit-transform: translate(-50%, -0.5em);
            transform: translate(-50%, -0.5em);
        }

        .homebanner figcaption.multiply:after {
            background-color: var(--very-dark-grey-50);
        }

    .homebanner span {
        display: block;
    }

        .homebanner span strong {
            display: block;
            font-size: 1.25em;
            line-height: 0.65em;
            margin-bottom: 0.75em;
        }

    .homebanner ul.flex {
        list-style-type: none;
        padding: 0;
        margin: 0;
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .homebanner ul li {
        display: block;
        font-size: 0.95em;
        flex: 0 0 100%;
    }

@media screen and (min-width: 500px) {
    .homebanner span strong {
        font-size: var(--font-p);
    }

    .homebanner figcaption:before {
        width: 3em;
        -moz-transform: translate(-50%, -0.5em);
        -ms-transform: translate(-50%, -0.5em);
        -o-transform: translate(-50%, -0.5em);
        -webkit-transform: translate(-50%, -0.5em);
        transform: translate(-50%, -0.5em);
    }

    .homebanner ul li {
        font-size: var(--font-p-small);
    }
}

@media screen and (min-width: 650px) {
    .homebanner {
        height: auto;
    }

    .homebanner figcaption {
        padding: 2em;
        top: 50%;
    }

        .homebanner figcaption:before {
            width: 4em;
            -moz-transform: translate(-50%, -0.75em);
            -ms-transform: translate(-50%, -0.75em);
            -o-transform: translate(-50%, -0.75em);
            -webkit-transform: translate(-50%, -0.75em);
            transform: translate(-50%, -0.75em);
        }

        .homebanner span strong {
            font-size: var(--font-h3);
            line-height: 1em;
            margin-bottom: 0.25em;
        }

    .homebanner span strong span {
        display: none;
    }

    .homebanner ul li {
        font-size: var(--font-p);
        flex-basis: auto;
    }

        .homebanner ul li:not(:first-child) {
            position: relative;
            padding-left: 0.5em;
            margin-left: 0.5em;
        }

            .homebanner ul li:not(:first-child):before {
                display: block;
                content: "";
                position: absolute;
                top: 57%;
                left: 0;
                height: 0.85em;
                border-left: solid 1px #fff;
                -moz-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
            }

}

@media screen and (min-width: 880px) {
    .homebanner figcaption:before {
        width: 6em;
        -moz-transform: translate(-50%, -1.5em);
        -ms-transform: translate(-50%, -1.5em);
        -o-transform: translate(-50%, -1.5em);
        -webkit-transform: translate(-50%, -1.5em);
        transform: translate(-50%, -1.5em);
    }

    .homebanner span strong {
        font-size: var(--font-h2);
    }

    .homebanner ul li {
        font-size: var(--font-h3);
    }
}


/*#endregion */

/*#region Intro 
--------------------------  */

.two-column.intro > .col.col-two {
    position: relative;
    cursor: pointer;
    padding: 3em 1.5em 0 1.5em;
}

    .two-column.intro > .col.col-two:after {
        display: block;
        content: var(--icons-arrow-right-long);
        -moz-filter: var(--svg-aqua);
        -ms-filter: var(--svg-aqua);
        -webkit-filter: var(--svg-aqua);
        filter: var(--svg-aqua);
        width: 4.5rem;
        left: 1.5em;
        bottom: 0;
        -moz-transition: all var(--trn-linear-long);
        -o-transition: all var(--trn-linear-long);
        -webkit-transition: all var(--trn-linear-long);
        transition: all var(--trn-linear-long);
    }
    .two-column.intro > .col.col-two:hover:after {
        margin-left: 0.75em;
    }

.two-column.intro .col-two h1 {
    margin-bottom: 0.5em;
}
.two-column.intro .col-two p {
    margin-bottom: 1em;
}
.two-column.intro > .col.col-two:hover {
    text-decoration: underline;
}

.two-column.intro > .col img {
    max-width: 100%;
}

.intro.separation {
    margin-top: 0;
    border-top: none;
}
.intro.separation:before {
    display: none;
}
.intro.separation img {
    min-height: initial;
}


@media screen and (min-width: 800px) {

    .intro.separation {
        margin-bottom: -3em;
    }

    .two-column.intro > .col.col-one {
        order: 1;
    }

    .two-column.intro > .col.col-two {
        order: 2;
        padding: 3em;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        align-items: center;
    }

        .two-column.intro > .col.col-two:after {
            left: 3em;
            bottom: 3em;
            position: absolute;
        }

    .two-column.intro > .col img {
        margin-left: 50%;
        transform: translateX(-50%);
        max-width: none;
    }
}

/*@media screen and (min-width: 1024px) and (min-height: 600px) {
    .two-column.intro {
        position: -webkit-sticky;
        position: -moz-sticky;
        position: -ms-sticky;
        position: -o-sticky;
        position: sticky;
        top: var(--header-height);
    }
}
*/
/*#endregion */

/*#region Spotlight Events 
--------------------------  */

    section.spotlightevent article {
        cursor: pointer;
    }

    section.spotlightevent figure {
        margin: 0 0 var(--spc-vertical-quarter) 0;
    }

    section.spotlightevent figure img {
        width: 100%;
    }

section.spotlightevent h2 {
    font-family: var(--font-text);
    font-size: 1.375em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.25em;
}

    section.spotlightevent h3 {
        font-family: var(--font-text);
        font-size: 1.375em;
        font-weight: 300;
        margin-top: 0;
        margin-bottom: 0.5em;
    }

    section.spotlightevent:hover h2 {
        text-decoration: underline;
    }

section.spotlightevent div {
    position: relative;
}

section.spotlightevent div:after {
    display: block;
    content: var(--icons-arrow-right-long);
    -moz-filter: var(--svg-aqua);
    -ms-filter: var(--svg-aqua);
    -webkit-filter: var(--svg-aqua);
    filter: var(--svg-aqua);
    width: 4.5rem;
    margin-top: var(--spc-vertical-quarter);
    position: absolute;
    right: 0;
    bottom: -5px;
    -moz-transition: all var(--trn-linear-long);
    -o-transition: all var(--trn-linear-long);
    -webkit-transition: all var(--trn-linear-long);
    transition: all var(--trn-linear-long);
}

    section.spotlightevent article:hover div:after {
        right: -1em;
    }


@media screen and (min-width: 350px) {
    section.spotlightevent h2, section.spotlightevent h3 {
        font-size: var(--tile-h3-fw);
    }
}

@media screen and (max-width: 450px) {
    section.spotlightevent article div {
        padding-left: 2em;
        padding-right: 2em;
    }
}

@media screen and (min-width: 800px) {
    section.spotlightevent article > div {
        margin-left: 15%;
        margin-right: 15%;
    }

    section.spotlightevent h2, section.spotlightevent h3 {
        font-size: var(--tile-h3-hw);
    }
}

@media screen and (min-width: 1024px) {
    section.spotlightevent h2, section.spotlightevent h3 {
        font-size: calc(20px + (42 - 20) * ((100vw - 1024px) / (var(--viewport-max-v) - 1024)));
    }
}

@media screen and (min-width: 1400px) {
    section.spotlightevent h2, section.spotlightevent h3 {
        font-size: 2em;
    }
}

/*#endregion */

/*#region Reports (COVID)
--------------------------  */

section.reports ul.flex {
    margin: 0;
    padding: 0;
    align-items: stretch;
    list-style-type: none;
    list-style-image: none;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-content: stretch;
}

    section.reports ul.flex li {
        padding: 0;
        margin: 0 0 2em 0;
        background-image: none;
        cursor: pointer;
        -ms-flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    section.reports ul.flex li:last-child {
        margin-bottom: 0;
    }

        section.reports ul.flex li.flex > * {
            flex: 0 0 auto;
            justify-content: flex-start;
        }


        section.reports ul.flex li figure {
            flex: 0 0 100%;
            padding: 40% 0 0 0;
            margin: 0 0 1rem 0;
            position: relative;
        }

            section.reports ul.flex li figure img {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                min-width: 100%;
                min-height: 100%;
                object-fit: cover;
            }


        section.reports ul.flex li div {
            padding-left: 1.5em;
            padding-right: 1.5em;
        }

        section.reports ul.flex li > div > strong {
            color: var(--aqua);
            font-size: var(--font-small);
        }

        section.reports ul.flex li h2 {
            font-size: var(--font-p);
            margin-bottom: 1rem;
            margin-top: 0;
            padding-left: 0;
            padding-right: 0;
        }
        section.reports ul.flex li h2 a {
            border-bottom: none;
        }

        section.reports ul.flex li p {
            font-size: var(--font-small);
            padding-left: 0;
            padding-right: 0;
        }

        section.reports ul.flex li p strong {
            color: var(--aqua);
            display: inline-block;
            margin-right: 1rem;
        }
            section.reports ul.flex li p strong:after {
                content: "|";
                color: var(--very-dark-grey);
                font-weight: 300;
                margin-left: 1rem;
            }

        section.reports ul.flex li:hover div:not(:last-child) p, section.reports ul.flex li:hover a {
            text-decoration: underline;
        }


@media screen and (min-width: 450px) {
    section.reports ul.flex li div {
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (min-width: 800px) {
    section.reports ul.flex li {
        flex: 0 0 48%;
    }
        section.reports ul.flex li:nth-last-child(-n+2) {
            margin-bottom: 0;
        }
}

@media screen and (min-width: 1080px) {
    section.reports ul.flex li {
        flex: 0 0 32%;
    }

        section.reports ul.flex li:nth-last-child(-n+3) {
            margin-bottom: 0;
        }
}

/*#endregion */

/*#region Analysis 
--------------------------  */

section.analysis .tile:after {
    position: absolute;
    bottom: 1.75em;
    margin-bottom: 0;
}

section.analysis .tile.flex {
    justify-content: flex-start;
}

section.analysis .tile h2 {
    font-family: var(--font-heading);
    padding-top: 0;
    margin-top: 8%;
    margin-bottom: 2.5rem;
    line-height: 1.1em;
    flex: 0 0 auto;
}

section.analysis .tile h3 {
    flex: 0 0 auto;
}

section.analysis .tile p span {
    color: var(--aqua);
}

section.analysis ul.flex {
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

section.analysis ul.flex li.slide {
    margin-bottom: 2em;
}

    section.analysis ul.flex li.slide:last-child {
        margin-bottom: 0;
    }

@media screen and (min-width: 800px) {
        section.analysis ul.flex li.slide {
            flex: 0 0 calc(50% - 1em);
        }

            section.analysis ul.flex li.slide:nth-last-child(-n+2) {
                margin-bottom: 0;
            }

}

/*#endregion */

/*#region IBMC 
--------------------------  */

section.ibmc ul li {
    cursor: pointer;
    position: relative;
}

    section.ibmc ul li:after {
        content: "";
        background-color: transparent;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        mix-blend-mode: multiply;
        z-index: 1;
        -moz-transition: background-color var(--trn-linear-long);
        -o-transition: background-color var(--trn-linear-long);
        -webkit-transition: background-color var(--trn-linear-long);
        transition: background-color var(--trn-linear-long);
    }
    section.ibmc ul li:hover:after {
        background-color: var(--aqua);
    }

section.ibmc ul li img {
    width: 100%;
    display: block;
}

@media screen and (min-width: 800px) {
    section.ibmc.tilelist ul {
        justify-content: space-between;
    }
    section.ibmc.tilelist ul li {
        flex-basis: 30%;
    }
        section.ibmc.tilelist ul li:not(:last-child) {
            margin-bottom: 0;
        }
}


/*#endregion */

/*#region Latest Events 
--------------------------  */

    section.latestevents div.slidecontainer {
        position: relative;
        padding-bottom: 3em;
    }

    section.latestevents .touch:after {
        margin-right: calc(50% - 3em);
        bottom: 0;
        z-index: 2;
    }

    section.latestevents > div > div.flex {
        position: relative;
        left: 0;
    }

        section.latestevents > div > div.flex article {
            flex: 0 0 100%;
            overflow: hidden;
            color: #fff;
            position: relative;
        }

            section.latestevents > div > div.flex article figure {
                display: block;
                overflow: hidden;
                padding: 0;
                margin: 0;
                position: relative;
            }

            section.latestevents > div > div.flex article figure.click {
                cursor: pointer;
            }

                section.latestevents > div > div.flex article figure img {
                    display: block;
                }

            section.latestevents > div > div.flex article figcaption h2 {
                position: relative;
                font-family: var(--font-heading);
                font-size: var(--event-h2-fw);
                min-width: 100%;
                margin: 0 0 1.5rem 0;
                padding-bottom: 2rem;
                z-index: 2;
                border-bottom: solid 1px var(--aqua);
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                -ms-flex: 0 0 100%;
                -webkit-flex: 0 0 100%;
                flex: 0 0 100%;
            }

            section.latestevents > div > div.flex article figcaption time {
                font-size: var(--font-p);
            }

    section.latestevents .slidecontainer.textover nav {
        bottom: 50%;
    }

    section.latestevents.items1 .slidecontainer.textover nav ul,
    section.latestevents.items1 .slidecontainer.textover nav.charms > a.next,
    section.latestevents.items1 .slidecontainer.textover nav.charms > a.prev {
        display: none;
    }

    @media screen and (max-width: 799px) {
        section.latestevents .slidecontainer .slider {
            align-items: stretch;
        }

        section.latestevents > div > div.flex article figure {
            -ms-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            padding-top: 0;
            background-color: transparent;
        }

            section.latestevents > div > div.flex article figure.multiply:after {
                display: none;
            }

            section.latestevents > div > div.flex article figure img {
                position: static;
                top: auto;
                left: auto;
                -o-object-fit: cover;
                object-fit: cover;
                -moz-transform: none;
                -ms-transform: none;
                -o-transform: none;
                -webkit-transform: none;
                transform: none;
                -ms-flex: 0 0 100%;
                -webkit-flex: 0 0 100%;
                flex: 0 0 100%;
            }

            section.latestevents > div > div.flex article figure figcaption {
                color: #000;
                padding: 1em 2em;
                position: static;
                top: auto;
                left: auto;
                height: auto;
                -moz-transform: none;
                -ms-transform: none;
                -o-transform: none;
                -webkit-transform: none;
                transform: none;
                -ms-flex: 0 0 100%;
                -webkit-flex: 0 0 100%;
                flex: 0 0 100%;
                max-width: 100%;
                width: 100%;
                background-color: transparent;
            }

                section.latestevents > div > div.flex article figure figcaption.link:hover {
                    background-color: transparent;
                }

                section.latestevents > div > div.flex article figure figcaption h2 {
                    padding-bottom: 0;
                    border-bottom: none;
                    font-size: 1.25em;
                }

                section.latestevents > div > div.flex article figure figcaption time {
                    display: inline;
                }

                section.latestevents > div > div.flex article figure figcaption p {
                    display: inline;
                    margin-left: 0.5em;
                }
    }

    @media screen and (min-width: 800px) {
        section .latestevents > div > div.flex article figure {
            padding-top: 55%;
        }

        body.loaded section.latestevents .slidecontainer.textover figure figcaption {
            font-size: var(--font-large);
            width: 100%;
            height: 100%;
            opacity: 0;
            -moz-transition: opacity var(--trn-ease-xlong), background var(--trn-linear-medium);
            -o-transition: opacity var(--trn-ease-xlong), background var(--trn-linear-medium);
            -webkit-transition: opacity var(--trn-ease-xlong), background var(--trn-linear-medium);
            transition: opacity var(--trn-ease-xlong), background var(--trn-linear-medium);
        }
        body.loaded section.latestevents .slidecontainer.textover figure.active figcaption {
            opacity: 0;
        }
        body.loaded section.latestevents .slidecontainer.textover figure.active:hover figcaption {
            opacity: 1;
        }

        section.latestevents .slidecontainer.textover nav.charms {
            position: static;
            margin-top: 0;
        }

            section.latestevents .slidecontainer.textover nav.charms > a {
                position: absolute;
                bottom: 50%;
                z-index: 2;
                -ms-transform: translateY(50%);
                -moz-transform: translateY(50%);
                -o-transform: translateY(50%);
                -webkit-transform: translateY(50%);
                transform: translateY(50%);
            }
            section.latestevents .slidecontainer.textover nav.charms > a.prev {
                left: calc(15% - 3em);
            }
                section.latestevents .slidecontainer.textover nav.charms > a.next {
                    left: calc(85% + 1em);
                }

            section.latestevents .slidecontainer.textover nav.charms ul {
                position: absolute;
                bottom: 1.25em;
                left: 50%;
                -ms-transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -o-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
            }
    }

    @media screen and (min-width: 1024px) {

        section.latestevents header {
            background-color: #fff;
        }

        section.latestevents > div > div.flex {
            justify-content: flex-start;
            align-items: stretch;
        }

            section.latestevents > div > div.flex article {
                overflow: hidden;
            }
    }

/*#endregion */

/*#region IEF TV 
--------------------------  */

    section.ieftv header a {
        flex: 0 0 3em;
    }

        section.ieftv header a.hovers img {
            -moz-filter: var(--svg-dark-grey);
            -ms-filter: var(--svg-dark-grey);
            -webkit-filter: var(--svg-dark-grey);
            filter: var(--svg-dark-grey);
            height: 2em;
            display: block;
        }

        section.ieftv header a.hovers picture.hover img {
            -moz-filter: var(--svg-aqua);
            -ms-filter: var(--svg-aqua);
            -webkit-filter: var(--svg-aqua);
            filter: var(--svg-aqua);
        }

    section.ieftv ul.flex {
        align-items: stretch;
    }

        section.ieftv ul.flex li.flex {
            -ms-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            align-items: flex-start;
            overflow: hidden;
            position: relative;
        }

            section.ieftv ul.flex li.flex:hover .multiply:after {
                background-color: var(--aqua);
            }

            section.ieftv ul.flex li.flex img {
                max-width: none;
                width: 100%;
                height: auto;
                display: block;
                margin-left: 50%;
                -ms-transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -o-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
            }

            section.ieftv ul.flex li.flex > div.yt {
                -ms-flex: 0 0 100%;
                -webkit-flex: 0 0 100%;
                flex: 0 0 100%;
                position: relative;
                padding-top: 56.25%;
            }
            section.ieftv ul.flex li.flex > div.im {
                -ms-flex: 0 0 100%;
                -webkit-flex: 0 0 100%;
                flex: 0 0 100%;
            }

                section.ieftv ul.flex li.flex > div.yt iframe {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                section.ieftv ul.flex li.flex > div.flex {
                    display: -ms-flexbox;
                    display: -webkit-flex;
                    display: flex;
                    -ms-flex: 0 0 100%;
                    -webkit-flex: 0 0 100%;
                    flex: 0 0 100%;
                    -ms-flex-wrap: wrap;
                    -webkit-flex-wrap: wrap;
                    flex-wrap: wrap;
                    padding: 1.5em 1.5em 0 1.5em;
                    -moz-box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    text-align: center;
                }

                    section.ieftv ul.flex li.flex > div.flex > * {
                        flex: 0 0 100%;
                    }

        section.ieftv ul.flex li h2 {
            margin-top: 0;
            font-family: var(--font-text);
            font-size: 1.25rem;
        }

        section.ieftv ul.flex li p {
            display: none;
        }

        section.ieftv ul.flex li time {
            font-size: var(--font-small);
        }

    @media screen and (min-width: 600px) {
        section.ieftv ul.flex li.flex div.multiply {
            flex: 0 0 100%;
        }

        section.ieftv ul.flex li.flex img {
            width: 100%;
            height: auto;
            max-width: 100%;
        }

        section.ieftv ul.flex li h2 {
            margin-bottom: 0.5em;
            font-size: var(--font-h1);
        }

        section.ieftv ul.flex li time {
            display: block;
        }
    }

    @media screen and (min-width: 800px) {

        section.ieftv ul.flex {
            justify-content: space-between;
            -ms-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
        }

            section.ieftv ul.flex li.flex {
                background-color: transparent;
                margin-bottom: 0;
            }

                section.ieftv ul.flex li.flex {
                    flex: 0 0 32%;
                    -moz-transition: transform linear .2s;
                    -o-transition: transform linear .2s;
                    -webkit-transition: transform linear .2s;
                    transition: transform linear .2s;
                }

                    section.ieftv ul.flex li.flex h2 {
                        font-size: var(--font-p);
                    }

                    section.ieftv ul.flex li.flex:hover {
                        -moz-transform: scale(1.1);
                        -ms-transform: scale(1.1);
                        -o-transform: scale(1.1);
                        -webkit-transform: scale(1.1);
                        transform: scale(1.1);
                    }

                    section.ieftv ul.flex li.flex:after {
                        top: 15%;
                    }
    }

/*#endregion */

/*#region Podcasts & In the news 
---------------------------------  */

    /* Common */
    .podinit.two-column .col > header button {
        flex: 0 0 auto;
    }

    .podinit .podcasts, .podinit .inthemedia {
        position: relative;
    }

    .podinit.two-column .col header h1 {
        font-size: var(--font-h1);
    }

    .podinit .col {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
        .podinit .col > header {
            -ms-flex: 0 0 auto;
            -webkit-flex: 0 0 auto;
            flex: 0 0 auto;
        }

        .podinit .col > div {
            -ms-flex: 1 1 auto;
            -webkit-flex: 1 1 auto;
            flex: 1 1 auto;
        }

        .podinit .col > div ul {
            height: 100%;
        }


    .podinit ul.flex {
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        .podinit ul.slider li.slide, .podinit ul.flex li.slide {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin-bottom: var(--spc-vertical-half);
            font-size: 1rem;
        }

            .podinit ul.slider li.slide:last-child, .podinit ul.flex li.slide:last-child {
                margin-bottom: 0;
            }

        .podinit ul.flex li .tile {
            justify-content: space-evenly;
        }

        .podinit ul.flex li div.flex h3 {
            font-family: var(--font-text);
            font-weight: 600;
            padding: 0;
            margin: 0 0 1.5rem 0;
            flex-basis: 2em;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border-top: 0;
        }
        .podinit ul.flex li div.flex h3 span span {
            display: block;
        }

        .podinit ul.flex li div.flex p {
            margin: 0;
            padding: 1.25rem;
            -ms-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            flex: 0 1 auto;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

.podinit ul li div {
    padding: 0;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex: 0 1 60%;
    -webkit-flex: 0 1 60%;
    flex: 0 1 100%;
    -webkit-justify-content: space-evenly;
    justify-content: space-evenly;
}

    .podinit ul li div h3 {
        font-family: var(--font-text);
        font-size: var(--font-p);
        font-weight: 600;
        letter-spacing: -0.05rem;
        margin-top: 0;
        -ms-flex: 0 0 auto;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    @media screen and (min-width: 1024px) {
        .podinit .col > div ul {
            align-items: stretch;
        }
        .podinit .col > div ul li > div {
            height: 100%;
        }
    }

/* Pad when no image */
.podinit ul.flex li.pad {
    position: relative;
}

    .podinit ul.flex li.pad:after {
        display: block;
        content: "";
        padding-top: 100%;
        background: url(/_resources/files/icons/arrows/right-long.svg);
        background-repeat: no-repeat;
        background-size: 4em;
        background-position: left 2em bottom 2em;
        -moz-filter: var(--svg-orange);
        -ms-filter: var(--svg-orange);
        -webkit-filter: var(--svg-orange);
        filter: var(--svg-orange);
    }

    .podinit ul.flex li.pad div.flex {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }


/* Podcasts */

.podinit.divider:after {
    border-bottom: none;
}

.podinit .tile:after {
    display: none;
}

.podinit .podfull ul.flex {
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;
}

    .podinit .podfull ul.flex li.slide {
        -webkit-align-items: stretch;
        align-items: stretch;
        margin-bottom: 0;
    }

    .podinit .podfull ul.flex li > div {
        -webkit-justify-content: space-between;
        justify-content: space-between;
        padding: 1.5rem;
        border-bottom: solid 1px var(--grey);
    }

    .podinit .podfull ul.flex li:first-child div {
        border-top: solid 1px var(--grey);
    }

.podinit div.podcasts iframe {
    max-width: 100% !important;
    -ms-flex: 0 0 52px;
    -webkit-flex: 0 0 52px;
    flex: 0 0 52px;
}

@media screen and (min-width: 750px) {
    .podinit .col.col-one > div ul li, .podinit .col.col-two > div ul li {
        flex: 0 0 47%;
        margin-bottom: 0;
    }

    .podinit .col.col-one > div ul, .podinit .col.col-two > div ul {
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    .podinit .podfull ul.flex li:nth-child(2) div {
        border-top: solid 1px var(--grey);
    }
}


@media screen and (min-width: 800px) {
    .podinit .col.col-one:after {
        display: none;
    }
}

/* In the news */
    .podinit .col.col-one > div.inthenews div.inthenews {
        height: 100%;
    }

        .podinit .col.col-one > div.inthenews div.inthenews ul li {
            -webkit-justify-content: space-between;
            justify-content: space-between;
            border-right: solid 1px #fff;
            cursor: pointer;
            cursor: pointer;
        }

    .podinit .inthenews ul li div p {
        font-size: var(--font-small);
        flex: 0 0 auto;
    }

    .podinit .inthenews ul li div p span {
        display: block;
        color: var(--aqua);
        font-weight: 600;
    }

    .podinit .inthenews ul li div p:after {
        display: block;
        float: right;
        content: var(--icons-arrow-right-long);
        -moz-filter: var(--svg-aqua);
        -ms-filter: var(--svg-aqua);
        -webkit-filter: var(--svg-aqua);
        filter: var(--svg-aqua);
        width: 4.5rem;
        margin: 0;
        -moz-transition: all var(--trn-linear-long);
        -o-transition: all var(--trn-linear-long);
        -webkit-transition: all var(--trn-linear-long);
        transition: all var(--trn-linear-long);
    }

    .podinit .inthenews ul li:hover h3, .podinit .inthenews ul li:hover p span {
        text-decoration: underline;
    }
    .podinit .inthenews ul li:hover div p:after {
        margin-right: -3%;
    }

.podinit .itnfull ul.flex {
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;
}

.podinit .itnfull ul li.slide {
    margin-bottom: 0;
}

.podinit .itnfull ul li:first-child div {
    border-top: solid 1px var(--grey);
}

.podinit .itnfull ul li div {
    padding: 1.5rem;
    border-bottom: solid 1px var(--grey);
}

.podinit .itnfull ul.flex li div.flex.column {
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.podinit .itnfull ul.flex li div.flex h3 {
    flex-basis: auto;
}

.podinit .itnfull ul.flex li div.flex p {
    padding: 0;
}

    @media screen and (min-width: 750px) {
        .podinit .col.col-one > div.inthenews div.inthenews ul {
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -ms-flex-wrap: nowrap;
            -webkit-flex-wrap: nowrap;
            flex-wrap: nowrap;
        }

        .podinit ul.flex li.slide {
            border-right: solid 1px #fff;
            border-bottom: solid 1px #fff;
            -ms-flex: 0 0 50%;
            -webkit-flex: 0 0 50%;
            flex: 0 0 50%;
        }

        .podinit .podfull ul.flex li.slide, .podinit .itnfull ul.flex li.slide {
            flex: 0 0 47%;
        }

        .podinit .tile h3xx {
            font-size: var(--tile-h2-hw);
        }

        .podinit .tile p {
            font-size: var(--tile-p-hw);
        }

        .podinit .itnfull ul.flex li:nth-child(2) div {
            border-top: solid 1px var(--grey);
        }
    }

    @media screen and (min-width: 800px) {
        /* Override change in layout.css */
        .podinit.two-column.flex {
            -ms-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
        }

        .podinit.two-column > .col {
            -ms-flex: 0 0 100%;
            -webkit-flex: 0 0 100%;
            flex: 0 0 100%;
        }

            .podinit.two-column > .col.col-two {
                margin-top: var(--spc-vertical-half);
            }
    }

    @media screen and (min-width: 1024px) {

        .podinit.e2ef header {
            padding: 0 2em;
        }

        .podinit ul.flex {
            -ms-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
        }

        .podinit.two-column > .col {
            -ms-flex: 0 0 47%;
            -webkit-flex: 0 0 47%;
            flex: 0 0 47%;
        }

            .podinit.two-column > .col.col-two {
                margin-top: 0;
            }

        .podinit .tile h3xx {
            font-size: calc(20px + (46 - 20) * ((100vw - 1024px) / (var(--viewport-max-v) - 1024)));
        }

        .podinit .podcasts button {
            margin-right: 1rem;
        }

        .podinit ul.flex li div.flex p {
            display: none;
        }
        .podinit .itnfull ul.flex li div.flex p {
            display: block;
        }

        .podinit .col.col-one > div.inthenews div.inthenews ul {
            display: block;
        }

            .podinit .col.col-one > div.inthenews div.inthenews ul li {
                height: 50%;
            }

        .podinit .podcasts:not(.podfull) ul.flex li.slide {
            -ms-flex: 0 0 100%;
            -webkit-flex: 0 0 100%;
            flex: 0 0 100%;
        }

        .podinit .podcasts ul.flex li.pad:after {
            padding-top: 50%;
        }


        .podinit ul li:first-child div {
            border-top: solid 1px var(--grey);
        }

        .podinit ul li div {
            padding: 1.5rem;
            border-bottom: solid 1px var(--grey);
        }

    }

    @media screen and (min-width: 1300px) {

        .podinit ul li div, .podinit ul.flex li .tile {
            padding: 2rem;
        }

        .podinit ul.flex li div.flex p {
            display: block;
            padding: 0 1.25rem;
        }

            .podinit ul.flex li div.flex p.multiply:after {
                display: none;
            }

        .podinit ul li div h3 {
            font-size: 2rem;
        }

        .podinit .inthenews ul li div p {
            font-size: var(--font-p-small);
        }

        .podinit .tile h3xx {
            font-size: 2.75em;
        }
    }

/*#endregion */

/*#region Newsroom & Twitter 
---------------------------------  */

.newsroom.two-column .col > header button {
    flex: 0 0 auto;
}

section.newsroom.flex {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

    section.newsroom.flex > * {
        -ms-flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
    }

section.newsroom.two-column .col header h1 {
    font-size: var(--font-h1);
}

/* Col-one has the 2 divs with the news articles in */
section.newsroom div.col-one div.newsroom.flex {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

    section.newsroom div.col-one div.newsroom.flex > * {
        -ms-flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
    }

    section.newsroom div.col-one div.newsroom article {
        background-color: var(--light-grey);
        margin-bottom: var(--spc-vertical-half);
        cursor: pointer;
    }

        section.newsroom div.col-one div.newsroom > div:last-child article:last-child {
            margin-bottom: 0;
        }

        section.newsroom div.col-one div.newsroom article div {
            padding: 8%;
        }

        section.newsroom div.col-one div.newsroom article span.category {
            display: block;
            font-size: var(--font-small);
            font-weight: 400;
            color: var(--orange);
            margin-bottom: 1.5rem;
        }

        section.newsroom div.col-one div.newsroom article.article span.category {
            color: var(--blue);
        }

        section.newsroom div.col-one div.newsroom article h2 {
            font-family: var(--font-text);
            font-size: var(--font-p);
            margin-top: 0;
        }

            section.newsroom div.col-one div.newsroom article h2 span {
                font-weight: 300;
            }

        section.newsroom div.col-one div.newsroom article:hover h2 {
            text-decoration: underline;
        }

        section.newsroom div.col-one div.newsroom article time {
            font-size: var(--font-small);
        }

        section.newsroom div.col-one div.newsroom article.flex {
            align-items: stretch;
        }

        section.newsroom div.col-one div.newsroom article div.flex {
            -ms-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            -ms-flex: 0 0 100%;
            -webkit-flex: 0 0 100%;
            flex: 0 0 100%;
            box-sizing: border-box;
        }

            section.newsroom div.col-one div.newsroom article div.flex > * {
                -ms-flex: 0 0 100%;
                -webkit-flex: 0 0 100%;
                flex: 0 0 100%;
            }

        section.newsroom div.col-one div.newsroom article div time:after {
            display: block;
            float: right;
            content: var(--icons-arrow-right-long);
            -moz-filter: var(--svg-orange);
            -ms-filter: var(--svg-orange);
            -webkit-filter: var(--svg-orange);
            filter: var(--svg-orange);
            width: 4.5rem;
            margin: 0;
            -moz-transition: all var(--trn-linear-long);
            -o-transition: all var(--trn-linear-long);
            -webkit-transition: all var(--trn-linear-long);
            transition: all var(--trn-linear-long);
        }

        section.newsroom div.col-one div.newsroom article.article div time:after {
            -moz-filter: var(--svg-blue);
            -ms-filter: var(--svg-blue);
            -webkit-filter: var(--svg-blue);
            filter: var(--svg-blue);
        }

        section.newsroom div.col-one div.newsroom article:hover div time:after {
            margin-right: -5%;
        }

/* Col-two has the twitter feed */
        section.newsroom div.col-two {
            text-align: center;
        }

        section.newsroom div.col-two header {
            text-align: left;
        }

            section.newsroom div.col-two header img {
                display: inline-block;
                width: 3.5rem;
                min-width: 3.5rem;
                vertical-align: middle;
                margin-right: 0.75rem;
            }

            section.newsroom div.col-two iframe {
                max-width: 80% !important;
            }

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

    section.newsroom div.col-one div.newsroom article {
        margin-bottom: 6%;
    }

    section.newsroom div.col-two iframe {
        max-width: 60% !important;
    }

}

@media screen and (min-width: 750px) {

    section.newsroom div.col-one div.newsroom.flex {
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: stretch;
        align-items: stretch;
    }

        section.newsroom div.col-one div.newsroom.flex > * {
            -ms-flex: 0 0 47%;
            -webkit-flex: 0 0 47%;
            flex: 0 0 47%;
        }

    section.newsroom div.col-one div.newsroom article.flex {
        -ms-flex: 0 0 calc((100% / 3) - 2em);
        -webkit-flex: 0 0 calc((100% / 3) - 2em);
        flex: 0 0 calc((100% / 3) - 2em);
        margin-bottom: 3em;
    }

    section.newsroom div.col-one div.newsroom > div article:last-child {
        margin-bottom: 0;
    }
    section.newsroom div.col-one div.newsroom article.flex div.flex {
        justify-content: space-between;
    }

}

@media screen and (min-width: 800px) {
    section.newsroom.two-column > .col.col-two {
        margin-top: var(--spc-vertical-half);
    }
}

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

    section.newsroom div.col-one {
        flex: 0 0 66%;
    }

    section.newsroom div.col-two {
        flex: 0 0 30%;
        text-align: left;
    }

    section.newsroom.two-column > .col.col-two {
        margin-top: 0;
    }

    section.newsroom div.col-two div.twitter-timeline {
        max-width: 100% !important;
        height: calc(100% - var(--font-h1) - var(--spc-vertical-quarter)) !important;
    }
    section.newsroom div.col-two iframe {
        max-width: 100% !important;
        height: 100% !important;
    }

    section.newsroom.two-column .col.col-two header h1 {
        font-size: var(--tile-h3-fw);
    }

}

@media screen and (min-width: 1080px) {
    section.newsroom div.col-two div.twitter-timeline {
        height: calc(100% - var(--font-h1) - var(--spc-vertical-half)) !important;
    }
}

@media screen and (min-width: 1320px) {
    section.newsroom.two-column .col.col-two header h1 {
        font-size: var(--font-h1);
    }
}

/* iOS 10 doesn't like the nested flexboxes with percentage height. Fix some heights here*/

section.newsroom.ios10 div.col-one {
    min-height: 1200px;
    height: 1200px;
}

section.newsroom.ios10 div.col-two {
    min-height: 1200px;
    height: 1200px;
}

/*#endregion */

/*#region Bottom 
---------------------------------  */

section.bottom ul.flex {
    list-style-type: none;
    list-style-image: none;
    margin: 0;
    padding: 4em 2em;
    background-color: var(--light-grey);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-align-items: stretch;
    align-items: stretch;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
    section.bottom ul.flex li {
        background-image: none;
        padding-left: 0;
        margin-left: 0;
    }

        section.bottom ul.flex li.flex {
            flex: 0 0 100%;
            padding: 0 1em;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            -ms-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-align-items: flex-start;
            align-items: flex-start;
            margin-bottom: 3em;
            cursor: pointer;
            position: relative;
        }

        section.bottom ul.flex li picture {
            flex-basis: 100%;
        }

            section.bottom ul.flex li picture.hover {
                position: absolute;
                top: 0;
                left: 2em;
                right: 2em;
            }

        section.bottom ul.flex li img {
            display: block;
            flex-basis: auto;
            height: 3em;
            margin: 0 auto 2em auto;
            -moz-filter: var(--svg-grey);
            -ms-filter: var(--svg-grey);
            -webkit-filter: var(--svg-grey);
            filter: var(--svg-grey);
            -moz-transition: opacity var(--trn-linear-long);
            -o-transition: opacity var(--trn-linear-long);
            -webkit-transition: opacity var(--trn-linear-long);
            transition: opacity var(--trn-linear-long);
            opacity: 1;
        }
        section.bottom ul.flex li.smartenergy img {
            height: 2.5em;
        }
        section.bottom ul.flex li.smartenergy a {
            align-self: flex-end;
        }

        section.bottom ul.flex li picture.hover img {
            opacity: 0;
            -moz-filter: var(--svg-aqua);
            -ms-filter: var(--svg-aqua);
            -webkit-filter: var(--svg-aqua);
            filter: var(--svg-aqua);
        }

        section.bottom ul.flex li:hover picture.hover img {
            opacity: 1;
        }

        section.bottom ul.flex li:hover picture:not(.hover) img {
            opacity: 0;
        }

        section.bottom ul.flex li a {
            display: block;
            flex-basis: 100%;
            font-size: var(--font-small);
            border-bottom: none;
        }

            section.bottom ul.flex li a:after {
                width: 1em;
            }

        section.bottom ul.flex li:hover a {
            text-decoration: underline;
        }

            section.bottom ul.flex li:hover a:after {
                transform: translateX(0.5em);
            }


@media screen and (min-width: 450px) {

    section.bottom ul.flex li.flex {
        flex: 0 0 50%;
        border-left: solid 1px #fff;
    }

    section.bottom ul.flex li:nth-child(2n+1) {
        border-left: none;
    }
}

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

    section.bottom ul.flex li.flex {
        flex: 0 0 33%;
    }

    section.bottom ul.flex li:nth-child(2n+1) {
        border-left: solid 1px #fff;
    }

    section.bottom ul.flex li:nth-child(3n+1) {
        border-left: none;
    }

    section.bottom ul.flex li:nth-child(n+4) {
        margin-bottom: 0;
    }
}

@media screen and (min-width: 1024px) {

    section.bottom ul.flex {
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

        section.bottom ul.flex li.flex {
            flex: 0 0 20%;
            margin-bottom: 0;
        }

        section.bottom ul.flex li:nth-child(4n+0) {
            border-left: solid 1px #fff;
        }

}

/*#endregion */

/*#region Scroll Show 
---------------------------------  */

.scrollshow {
    -moz-transition: all var(--trn-ease-xlong);
    -o-transition: all var(--trn-ease-xlong);
    -webkit-transition: all var(--trn-ease-xlong);
    transition: all var(--trn-ease-xlong);
}

    .scrollshow.outview {
        opacity: 0;
    }

    .scrollshow.inview {
        opacity: 1;
        transition-delay: .2s;
    }

/*#endregion */

/*#region Video 
---------------------------------  */

/* Video with text over */
.videobanner figure {
    overflow: hidden;
    margin: 0;
    padding: 0;
    position: relative;
}

.videobanner figcaption {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 28em;
    padding: 3rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 3;
}

    .videobanner figcaption p:first-child {
        padding-bottom: 0;
        border-bottom: 0;
        font-size: 3.5em;
        line-height: 1em;
        font-family: var(--font-heading);
        font-weight: 600;
    }

        .videobanner figcaption p:first-child br:first-of-type {
            display: none;
        }

    .videobanner figcaption button {
        background-color: transparent;
        border: 0;
        border-radius: 1rem;
        color: #fff;
        cursor: pointer;
        padding: 0.25rem 0.5rem;
    }

        .videobanner figcaption button:hover {
            background-color: var(--aqua-25);
        }

        .videobanner figcaption button.play:before {
            display: block;
            float: left;
            content: var(--icons-play);
            width: 1.65rem;
            height: 1.65rem;
            margin: 0 0.75rem 0 0;
            -moz-transition: all var(--trn-linear-long);
            -o-transition: all var(--trn-linear-long);
            -webkit-transition: all var(--trn-linear-long);
            transition: all var(--trn-linear-long);
        }

@media screen and (min-width: 400px) {
    .videobanner figcaption p:first-child {
        font-size: 4em;
    }
}

@media screen and (min-width: 600px) {
    .videobanner figcaption p:first-child {
        font-size: 4.5em;
    }
}

@media screen and (min-width: 800px) {
    .videobanner figcaption {
        top: 50%;
        left: 50%;
        text-align: center;
        max-width: 100%;
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

        .videobanner figcaption p:first-child {
            margin-bottom: 2.5rem;
        }

            .videobanner figcaption p:first-child br {
                display: none;
            }

                .videobanner figcaption p:first-child br:first-of-type {
                    display: inline;
                }
}

/*#endregion */

/*#region Video animation
---------------------------------  */

/* video animation section */
.animbanner figure video {
    flex-basis: 100%;
    width: 100%;
    display: block;
    margin: 0 auto;
}

@media screen and (min-width: 800px) {
    .animbanner figure video {
        flex-basis: 100%;
    }
}

/*#endregion */

/*#region Climate Change Carousel
---------------------------------  */

section.climatechange .touch:after {
    margin-right: calc(50% - 3em);
    bottom: 0;
    z-index: 2;
}

section.climatechange .slidecontainer .slider {
    padding-top: 90%;
}

section.climatechange .slidecontainer.slideinfinite .slide {
    top: 0;
}

section.climatechange .slidecontainer.slideinfinite .slide > * {
    flex-basis: 100%;
}

@media screen and (min-width: 600px) {
    section.climatechange .slidecontainer .slider {
        padding-top: 45%;
    }

    section.climatechange .slidecontainer.slideinfinite .slide > * {
        flex-basis: 50%;
    }
}

@media screen and (min-width: 800px) {
    section.climatechange .slidecontainer .slider {
        padding-top: 35%;
    }
}

/*#endregion */

/*#region Climate Change Static
---------------------------------  */

section.climate-change ul.flex {
    margin: 0;
    padding: 0;
    align-items: stretch;
    list-style-type: none;
    list-style-image: none;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-content: stretch;
}

    section.climate-change ul.flex li {
        padding: 0;
        margin: 0 0 var(--spc-vertical-half) 0;
        background-image: none;
        cursor: pointer;
        -ms-flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

        section.climate-change ul.flex li:last-child {
            margin-bottom: 0;
        }

        section.climate-change ul.flex li.flex > * {
            flex: 0 0 auto;
            justify-content: flex-start;
        }


        section.climate-change ul.flex li figure {
            margin: 0;
        }

            section.climate-change ul.flex li figure img {
                display: block;
                min-width: 100%;
                min-height: 100%;
                object-fit: cover;
            }

@media screen and (min-width: 800px) {
    section.climate-change ul.flex li {
        flex: 0 0 48%;
    }

        section.climate-change ul.flex li:nth-last-child(-n+2) {
            margin-bottom: 0;
        }
}

/*#endregion */

/*#region Featured 
--------------------------  */

section.featured {
    color: #fff;
}

    section.featured .multiply:after {
        background-color: transparent;
    }

    section.featured ul.grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        column-gap: 0.75em;
        row-gap: 0.75em;
    }

        section.featured ul.grid li.flex {
            align-items: stretch;
            margin-bottom: 0;
            min-height: 10em;
        }

        section.featured ul.grid li img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            max-height: 100%;
            display: block;
            overflow: hidden;
            object-fit: cover;
            object-position: bottom;
        }

        section.featured ul.grid li.flex > div {
            flex-basis: 100%;
        }

        section.featured ul.grid li div.flex {
            padding: 1em;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-justify-content: space-between;
            justify-content: space-between;
        }

            section.featured ul.grid li div.flex > * {
                flex-basis: auto;
            }

            section.featured ul.grid li div.flex > h2 {
                margin: 0;
                font-family: var(--font-text2);
                font-size: var(--font-h3);
                font-weight: 800;
                line-height: 1em;
                max-width: 65%;
            }

        section.featured ul.grid li:not(:first-child) div.flex > h2 {
            max-width: 7em;
        }

                section.featured ul.grid li div.flex > h2 span {
                    display: block;
                    font-weight: 400;
                    font-size: var(--font-p-small);
                }

        section.featured ul.grid li div.flex > h2 strong {
            white-space: nowrap;
            font-weight: 800;
        }

            section.featured ul.grid li div.flex > div {
                text-align: right;
                margin-bottom: 1em;
            }

                section.featured ul.grid li div.flex > div span {
                    font-size: 0.65em;
                    line-height: 1rem;
                    display: block;
                    float: right;
                    padding: 0.15em 0.5em 0.25em 0.5em;
                    border-radius: 1em;
                    color: var(--aqua);
                    background-color: #fff;
                }

                section.featured ul.grid li div.flex > div img {
                    height: 1em;
                    width: auto;
                    display: block;
                    top: 1em;
                    left: 1em;
                }

        section.featured ul.grid li div.flex > picture > img {
            height: 1em;
            width: auto;
            display: block;
            bottom: 1em;
            right: 1em;
            top: auto;
            left: auto;
        }

        section.featured ul.grid li.iefoutlookscomparisonreport div.flex > div span {
            background-color: var(--aqua);
            color: #fff;
        }
        section.featured ul.grid li.monthlycomparativeanalysis {
            background-color: var(--dark-green);
        }
            section.featured ul.grid li.monthlycomparativeanalysis > img {
                width: 75%;
                height: auto;
                top: 50%;
                left: 12.5%;
                right: auto;
                bottom: auto;
                object-fit: contain;
                -ms-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
            }
        section.featured ul.grid li.trilateralworkprogram {
            background-color: var(--mid-blue);
        }
            section.featured ul.grid li.trilateralworkprogram div.flex > div img {
                height: 1.25em;
            }

        section.featured ul.grid li.energysecurity {
            background-color: var(--mid-blue3);
        }
        section.featured ul.grid li.markettransparency {
            background-color: var(--mid-green);
        }
        section.featured ul.grid li.oilgasdatareview {
            background-color: var(--aqua);
        }
            section.featured ul.grid li.oilgasdatareview div.flex > h2 {
                margin-bottom: 0.75em;
            }
            section.featured ul.grid li.oilgasdatareview > img {
                max-width: 40%;
                top: auto;
                left: auto;
                right: 1em;
                bottom: 2.5em;
                object-fit: contain;
            }
            section.featured ul.grid li.oilgasdatareview > div.flex > picture > img {
                width: auto;
                height: auto;
                left: 1em;
                right: 1em;
                bottom: 1em;
            }

        section.featured ul.grid li.energysecurity.flex, section.featured ul.grid li.markettransparency.flex {
            min-height: auto;
            max-height: 7em;
        }

@media screen and (min-width: 500px) {
    section.featured ul.grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr auto;
    }
}

@media screen and (min-width: 800px) {
    main .inner > section.featured:first-child {
        padding-top: var(--spc-vertical-quarter);
    }

    section.featured ul.grid li:first-child div.flex > h2 {
        font-size: var(--font-h2);
    }

    section.featured ul.grid {
        justify-content: space-between;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr auto;
    }

        section.featured ul.grid li:first-child {
            grid-column: 1 / 3;
            grid-row: 1 / 3;
        }

        section.featured ul.grid li:nth-child(2) {
            grid-row: 1 / 2;
        }

        section.featured ul.grid li:nth-child(3) {
            grid-row: 2 / 3;
        }

        section.featured ul.grid li div.flex {
            padding-bottom: 2em;
        }

        section.featured ul.grid li:first-child div.flex > h2 {
            max-width: 75%;
        }

        section.featured ul.grid li.oilgasdatareview > img {
            bottom: 3em;
        }

        section.featured ul.grid li.trilateralworkprogram.flex {
            min-height: auto;
            max-height: 7em;
        }
}

@media screen and (min-width: 1200px) {
    section.featured ul.grid li:first-child div.flex > h2 {
        font-size: var(--font-h1);
    }

    section.featured ul.grid li.oilgasdatareview div.flex > h2 {
        margin-bottom: 0;
    }

    section.featured ul.grid li.flex {
        min-height: 11em;
    }

    section.featured ul.grid li.trilateralworkprogram.flex, section.featured ul.grid li.energysecurity.flex, section.featured ul.grid li.markettransparency.flex {
        min-height: 7em;
    }
}

/*#endregion */

/*#region File Slider Banner 
--------------------------  */

main .inner > section.filesliderbanner {
    margin-bottom: 0.75em;
    position: sticky;
    top: 4.25em;
    z-index: 99;
}

    main .inner > section.filesliderbanner:first-child {
        padding-top: 0;
        margin-top: var(--spc-vertical-quarter);
    }

    main .inner > section.filesliderbanner div.fileslider {
        overflow: hidden;
        position: relative;
    }

    main .inner > section.filesliderbanner figure.flex {
        margin: 0;
        justify-content: flex-start;
        position: relative;
        left: 0;
        -moz-transition: all var(--trn-ease-long);
        -o-transition: all var(--trn-ease-long);
        -webkit-transition: all var(--trn-ease-long);
        transition: all var(--trn-ease-long);
    }

        main .inner > section.filesliderbanner figure.flex a {
            flex-basis: 100%;
        }

        main .inner > section.filesliderbanner figure.flex img {
            position: relative;
            z-index: 1;
            display: block;
        }

main .inner > section.filesliderbanner button {
    position: absolute;
    top: 0;
    bottom: 0;
    border: 0;
    background-color: transparent;
    padding: 0 0.65em;
    z-index: 2;
}

    main .inner > section.filesliderbanner button:disabled {
        opacity: 0.25;
    }

    main .inner > section.filesliderbanner button img {
        width: 0.75em;
    }

    main .inner > section.filesliderbanner button.attr-slider-button-left {
        left: 0;
        border-right: solid 1px #fff;
    }

    main .inner > section.filesliderbanner button.attr-slider-button-right {
        right: 0;
        border-left: solid 1px #fff;
    }

        main .inner > section.filesliderbanner button.attr-slider-button-right img {
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

@media screen and (min-width: 500px) {
    main .inner > section.filesliderbanner {
        position: relative;
        top: auto;
    }

    main .inner > section.filesliderbanner button img {
        width: 1em;
    }
}

@media screen and (min-width: 600px) {
    main .inner > section.filesliderbanner button {
        padding: 0 1em;
    }
}

@media screen and (min-width: 800px) {
    main .inner > section.filesliderbanner:first-child {
        padding-top: 0;
        margin-top: var(--spc-vertical-quarter);
    }

    main .inner > section.filesliderbanner button img {
        width: 1.25em;
    }
}

@media screen and (min-width: 1080px) {
    main .inner > section.filesliderbanner button img {
        width: 1.75em;
    }
}

@media screen and (min-width: 1500px) {
    main .inner > section.filesliderbanner button {
        padding: 0 1.75em;
    }
}

/*#endregion */