/*
	--------------------------
	Global Styles
	--------------------------
*/
/*#region Variables 
--------------------------  */

:root {
    /*Colours*/
    --aqua: #00a5b2;
    --blue: #2fb4e9;
    --dark-blue: #004F9F;
    --light-grey: #f5f5f5;
    --grey: #b2b2b2;
    --medium-grey: #eaeaea;
    --dark-grey: #373636;
    --dark-grey-25: rgba(60, 60, 59, .25);
    --dark-grey-50: rgba(60, 60, 59, .5);
    --very-dark-grey: #343432;
    --very-dark-grey-25: rgba(0, 0, 0, .25);
    --very-dark-grey-40: rgba(0, 0, 0, .4);
    --very-dark-grey-50: rgba(0, 0, 0, .5);
    --very-dark-grey-60: rgba(0, 0, 0, .6);
    --very-dark-grey-70: rgba(0, 0, 0, .7);
    --very-dark-grey-85: rgba(0, 0, 0, .85);
    --orange: #e94e19;
    --black: #2a2929;
    --white: #fff;
    --yellow: #ffdf43;
    --oil: #003441;
    --oil-light: #00a5b2;
    --gas: #498725;
    --gas-light: #80b262;
    /* Fonts */
    --font-heading: acumin-pro, arial, sans-serif;
    --font-compressed: acumin-pro-extra-condensed, arial, sans-serif;
    --font-text: acumin-pro, arial, sans-serif;
    /*SVG Filters*/
    --svg-aqua: url(#aqua);
    --svg-grey: url(#grey);
    --svg-black: url(#black);
    --svg-oil-light: url(#oillight);
    --svg-gas-light: url(#gaslight);
    --svg-very-dark-grey-50: url(#verydarkgrey50);
    /*Icons*/
    --icons-arrow-right: url(/_resources/files/icons/arrows/right.svg);
    --icons-arrow-left: url(/_resources/files/icons/arrows/left.svg);
    /*Transitions*/
    --trn-linear-long: linear .4s;
}

/*#endregion */

/*#region  Custom Classes 
--------------------------  */

.hidden {
    display: none;
}
.invisible {
    visibility: hidden;
}
.clear {
    clear: both;
}
.centre {
    text-align: center;
}
.left {
    float: left;
}
.right {
    float: right;
}
img.left {
    margin-right: 1em;
}
img[style*="left"] {
    margin-right: 1em;
    margin-bottom: 1em;
    max-width: 50%;
}
img[style*="right"] {
    margin-left: 1em;
    margin-bottom: 1em;
    max-width: 50%;
}

.black {
    color: var(--black);
}
.datagreen {
    color: var(--aqua);
}
.datalightgreen {
    color: #a3d7d9;
}
.datadarkgreen {
    color: #00434f;
}
.oilblue {
    color: #009fe3;
}
.oillightblue {
    color: #83d0f5;
}
.oildarkblue {
    color: #061d41;
}
.gasgreen {
    color: #80b262;
}
.gaslightgreen {
    color: #dae096;
}
.gasdarkgreen {
    color: #517516;
}
.forumorange {
    color: #f07e26;
}
.forudarkmorange {
    color: #a8541b;
}

div.greyout {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: 0px;
    padding: 0px;
    z-index: 299;
    background-color: var(--white);
    text-align: center;
}

/* Flex */
.flex {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

    .flex > * {
        -ms-flex: 0 0 50%;
        -webkit-flex: 0 0 50%;
        flex: 0 0 50%;
    }

/*#endregion */

/*#region Elements 
--------------------------  */

body {
    font-family: var(--font-text);
    font-weight: 300;
    font-size: 1em;
    width: 100%;
    color: var(--black);
    margin: 0px auto;
    background-color: var(--white);
    text-align: center;
}

article, aside, figure, footer, header, main, hgroup, nav, section {
    display: block;
}

h1 {
    font-family: var(--font-heading);
    font-size: 1.5em;
    color: var(--aqua);
    font-weight: 600;
    margin: 0px 0px 0.5em 0px;
    line-height: 1.35em;
    letter-spacing: -0.04em;
}

h2 {
    font-family: var(--font-heading);
    font-size: 1.5em;
    color: #1d1d1b;
    font-weight: 600;
    margin: 0px 0px 1em 0px;
    line-height: 1.35em;
    letter-spacing: -0.04em;
}

h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-size: 1.25em;
    color: #1d1d1b;
    font-weight: 600;
    margin: 0px;
    line-height: 1.35em;
}

p ~ h2 {
    margin-top: 1em;
}

p, li, td, dd, label, input, textarea {
    font-size: 1em;
}

    li li, li p, li input {
        font-size: 1em;
    }

strong, b {
    font-weight: 600;
}

p {
    margin: 0px 0px 1em 0px;
}

a {
    text-decoration: none;
    color: var(--aqua);
}
    a:not(.logo):not(.ief) {
        transition: all .1s ease-in-out;
    }
    a:hover {
        text-decoration: none;
        background-color: var(--aqua);
        color: var(--white);
    }

img {
    border: 0px;
}

input, select, textarea, button {
    font-family: var(--font-text);
    font-weight: 300;
}

table {
    width: 100%;
}

input[type=submit], input[type=button] {
    border-radius: 0.75em;
}

main img, main iframe, main object {
    max-width: 100%;
}

svg {
    overflow: hidden;
}

/*#endregion */

/*#region Structure 
--------------------------  */

/*#region Site Header 
--------------------------  */

body > div > header > nav {
    width: 75em;
    margin: 0px auto;
    text-align: left;
}

/*#region Spotlight Nav 
--------------------------  */

body > div > header nav.spotlight > div {
    width: 90%;
    margin: 0px 5%;
    padding: 2.5% 0px;
    float: left;
    position: relative;
}

    body > div > header nav.spotlight > div > div.right {
        padding: 0.5em 0;
    }

    body > div > header nav.spotlight > div > div > a, body > div > header nav.spotlight div > div div {
        margin-left: 1.25em;
        float: right;
        position: relative;
    }

        body > div > header nav.spotlight > div a.social img,
        body > div > header nav.spotlight div > div div img {
            float: left;
            width: 2em;
        }

    body > div > header nav.spotlight > div a.login, body > div > header nav.spotlight > div a.logout {
        color: var(--black);
        font-size: 0.75em;
        margin-bottom: 2rem;
    }
    body > div > header nav.spotlight > div a.login:hover, body > div > header nav.spotlight > div a.logout:hover {
        color: var(--aqua);
    }

        body > div > header nav.spotlight > div a.login:after {
            display: inline-block;
            content: url(/_resources/files/icons/login.svg);
            vertical-align: middle;
            width: 1em;
            margin-left: 0.25em;
            -moz-filter: var(--svg-black);
            -ms-filter: var(--svg-black);
            -webkit-filter: var(--svg-black);
            filter: var(--svg-black);
        }
        body > div > header nav.spotlight > div a.logout:after {
            display: inline-block;
            content: url(/_resources/files/icons/logout.svg);
            vertical-align: middle;
            width: 1em;
            margin-left: 0.25em;
            -moz-filter: var(--svg-black);
            -ms-filter: var(--svg-black);
            -webkit-filter: var(--svg-black);
            filter: var(--svg-black);
        }

        body > div > header nav.spotlight > div a.login:hover:after, body > div > header nav.spotlight > div a.logout:hover:after {
            -moz-filter: var(--svg-aqua);
            -ms-filter: var(--svg-aqua);
            -webkit-filter: var(--svg-aqua);
            filter: var(--svg-aqua);
        }

    body > div > header nav.spotlight > div a.social {
        position: relative;
    }

    body > div > header nav.spotlight > div a.social.li {
        clear: right;
        margin-left: 2em;
    }
        body > div > header nav.spotlight > div a.social.tw {
            margin-left: 0;
        }

    body > div > header nav.spotlight > div a.social img {
        display: block;
        opacity: 1;
        -moz-filter: var(--svg-grey);
        -ms-filter: var(--svg-grey);
        -webkit-filter: var(--svg-grey);
        filter: var(--svg-grey);
        -moz-transition: opacity ease-out .2s;
        -o-transition: opacity ease-out .2s;
        -webkit-transition: opacity ease-out .2s;
        transition: opacity ease-out .2s;
    }

    body > div > header nav.spotlight > div a.social picture.hover img {
        -moz-filter: var(--svg-aqua);
        -ms-filter: var(--svg-aqua);
        -webkit-filter: var(--svg-aqua);
        filter: var(--svg-aqua);
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

    body > div > header nav.spotlight > div a.social picture.hover img,
    body > div > header nav.spotlight > div a.social:hover picture:not(.hover) img {
        opacity: 0;
    }

        body > div > header nav.spotlight > div a.social:hover picture.hover img {
            opacity: 1;
        }

    body > div > header nav.spotlight > div a:hover, body > div > header nav.spotlight > div > div > div a:hover {
        background-color: transparent;
    }

body > div > header nav.spotlight div > div div {
    position: relative;
}

/* Jodi Logo */
body > div > header nav.spotlight a.logo {
    width: 12.4375em;
    float: left;
    padding: 1em 2em 1em 0;
    margin-left: 0px;
    margin-right: 2em;
    border-right: solid 1px var(--grey);
}

    body > div > header nav.spotlight a.logo img {
        float: left;
    }

/* IEF Logo */
body > div > header nav.spotlight a.ief {
    width: 12em;
    float: left;
    padding: 1em 0px;
}

    body > div > header nav.spotlight a.ief img {
        float: left;
    }
/* Grid Menu */
body > div > header nav.spotlight ul {
    padding: 1.25em;
    list-style-type: none;
    position: absolute;
    top: 3.575em;
    right: 0px;
    width: 18.9em;
    background: #fff;
    z-index: 199;
    border: solid 1px var(--aqua);
    transition: all .2s ease-in-out;
    filter: alpha(opacity=0);
    opacity: 0;
    visibility: hidden;
}

    body > div > header nav.spotlight ul:before {
        content: url(/_resources/files/template/menu-arrow.png);
        display: block;
        float: left;
        position: absolute;
        top: -1em;
        right: 1.15em;
    }

    body > div > header nav.spotlight ul.show {
        filter: alpha(opacity=100);
        opacity: 1;
        visibility: visible;
    }

    body > div > header nav.spotlight ul li {
        float: left;
        text-align: center;
        margin-left: 5.3%;
        margin-bottom: 5.3%;
    }

        body > div > header nav.spotlight ul li:nth-child(3n+1) {
            margin-left: 0px;
        }

        body > div > header nav.spotlight ul li a {
            display: block;
            float: left;
            color: #1d1d1b;
        }

            body > div > header nav.spotlight ul li a:hover {
                background-color: transparent;
            }

                body > div > header nav.spotlight ul li a:hover img {
                    background-color: var(--aqua);
                }

            body > div > header nav.spotlight ul li a br {
                clear: left;
            }

/* Navicon */
body > div > header nav.spotlight > div > div a.n {
    display: none;
}

/*#endregion */

/*#region Main Nav 
--------------------------  */

body > div > header nav.mn {
    margin: 0px;
    background-color: var(--medium-grey);
    clear: both;
    float: left;
    width: 100%;
    font-weight: 200;
}

    body > div > header nav.mn > div {
        width: 75em;
        margin: 0px auto;
        text-align: left;
    }

        body > div > header nav.mn > div > ul {
            list-style-type: none;
            width: 90%;
            margin: 0px 5%;
            padding: 0px;
            text-align: left;
            position: relative;
        }

            body > div > header nav.mn > div > ul > li {
                float: left;
                position: relative;
            }

                body > div > header nav.mn > div > ul > li > a {
                    font-size: 1em;
                    color: var(--black);
                    display: block;
                    float: left;
                    padding: 1em 1.1em 1.25em 1.1em;
                    -moz-transition: all .2s ease-in-out;
                    -o-transition: all .2s ease-in-out;
                    -webkit-transition: all .2s ease-in-out;
                    transition: all .2s ease-in-out;
                }
                body > div > header nav.mn > div > ul > li.s > a:after {
                    display: inline-block;
                    content: url(/_resources/files/icons/arrow-right.svg);
                    width: 0.85em;
                    margin-left: 0.25em;
                    -moz-filter: var(--svg-aqua);
                    -ms-filter: var(--svg-aqua);
                    -webkit-filter: var(--svg-aqua);
                    filter: var(--svg-aqua);
                    -moz-transform: rotate(90deg);
                    -ms-transform: rotate(90deg);
                    -o-transform: rotate(90deg);
                    -webkit-transform: rotate(90deg);
                    transform: rotate(90deg);
                }
                body > div > header nav.mn > div > ul li.e > a:after {
                    display: inline-block;
                    content: url(/_resources/files/icons/arrow-right.svg);
                    width: 0.85em;
                    margin-left: 0.25em;
                    -moz-filter: var(--svg-black);
                    -ms-filter: var(--svg-black);
                    -webkit-filter: var(--svg-black);
                    filter: var(--svg-black);
                    -moz-transform: rotate(-45deg);
                    -ms-transform: rotate(-45deg);
                    -o-transform: rotate(-45deg);
                    -webkit-transform: rotate(-45deg);
                    transform: rotate(-45deg);
                }
            body > div > header nav.mn > div > ul li li.e > a:after {
                -moz-filter: none;
                -ms-filter: none;
                -webkit-filter: none;
                filter: none;
            }

    body > div > header nav.mn > div > ul:first-child > li:first-child {
        margin-right: 9.5em;
    }
            body > div > header nav.mn > div > ul:first-child > li:nth-child(3) {
                margin-right: 10%;
            }
            body > div > header nav.mn > div > ul:first-child > li:nth-child(4) {
                margin-right: 5%;
            }

                /* Sub menus */
            body > div > header nav.mn > div > ul > li > ul {
                list-style-type: none;
                visibility: hidden;
                padding: 0;
                margin-top: 1em;
                position: absolute;
                top: 100%;
                width: 38em;
                z-index: 99;
                opacity: 0;
                background-color: var(--aqua);
                -moz-transition: all .2s ease-in-out;
                -o-transition: all .2s ease-in-out;
                -webkit-transition: all .2s ease-in-out;
                transition: all .2s ease-in-out;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -ms-flex-direction: row;
                -webkit-flex-direction: row;
                flex-direction: row;
                -ms-flex-wrap: nowrap;
                -webkit-flex-wrap: nowrap;
                flex-wrap: nowrap;
                justify-content: center;
                align-items: stretch;
            }
                    body > div > header nav.mn > div > ul > li.oil > ul {
                        background-color: var(--oil);
                    }
                    body > div > header nav.mn > div > ul > li.gas > ul {
                        background-color: var(--gas);
                    }

            body > div > header nav.mn > div > ul > li > ul > li {
                padding: 0.75em;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                -ms-flex: 0 0 33.33%;
                -webkit-flex: 0 0 33.33%;
                flex: 0 0 33.33%;
            }

                        body > div > header nav.mn > div > ul > li li a {
                            display: block;
                            padding: 0.25em 0.5em;
                            color: var(--white);
                        }
    nav ul > li li button {
        font-size: 1em;
        color: var(--white);
        background-color: transparent;
        cursor: pointer;
        border: 0;
        display: block;
        padding: 0.25em 0.5em;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

                            body > div > header nav.mn > div > ul > li > ul > li > a[href="javascript:;"], body > div > header nav.mn > div > ul > li > ul > li > button.group {
                                font-weight: 600;
                                cursor: default;
                            }

                body > div > header nav.mn > div ul li > ul > li a[href="javascript:;"] {
                    cursor: default;
                    background-color: transparent;
                }

body > div > header nav.mn > div > ul > li.o > a, body > div > header nav.mn > div > ul > li.c > a {
    background-color: var(--aqua);
    color: var(--white);
}
body > div > header nav.mn > div > ul > li.o.oil > a, body > div > header nav.mn > div > ul > li.c.oil > a {
    background-color: var(--oil);
}
body > div > header nav.mn > div > ul > li.o.gas > a, body > div > header nav.mn > div > ul > li.c.gas > a {
    background-color: var(--gas);
}
    body > div > header nav.mn > div > ul > li.o > a:after,
    body > div > header nav.mn > ul > li.s.o > a:after,
    body > div > header nav.mn > div > ul > li.s.c > a:after {
        -moz-filter: none;
        -ms-filter: none;
        -webkit-filter: none;
        filter: none;
    }

    body > div > header nav.mn > div > ul > li.o > ul {
        visibility: visible;
        opacity: 1;
        margin-top: 0px;
    }

                /* sub multi menus */
                body > div > header nav.mn > div > ul > li.m > ul > li:not(:last-child) {
                    border-right: solid 1px #fff;
                }

                body > div > header nav.mn > div > ul > li > ul > li ul {
                    list-style-type: none;
                    margin: 0px;
                    padding: 0px;
                }

                    body > div > header nav.mn > div > ul > li > ul > li ul li a {
                        display: block;
                        padding: 0.25em 0.5em;
                    }

    /* Sectional Nav */
    body > div > header nav.mn.sn div > ul {
        margin-left: 15%;
        width: 80%;
    }

/* Oil, Gas, Forum */
/* Oil */
ul#mainnav > li#oil > a {
    background-color: #009fe3;
}

ul#mainnav > li#oil > ul {
    background-color: #009fe3;
}

    ul#mainnav > li#oil > ul > li ul li a:hover {
        background-color: #061d41;
    }

    ul#mainnav > li#oil > ul > li a:not([href="javascript:;"]):hover {
        background-color: #061d41;
    }
/* Gas */
ul#mainnav > li#gas > a {
    background-color: var(--gas-light);
}

ul#mainnav > li#gas > ul {
    background-color: var(--gas-light);
}

    ul#mainnav > li#gas > ul > li ul li a:hover {
        background-color: #517516;
    }

    ul#mainnav > li#gas > ul > li a:not([href="javascript:;"]):hover {
        background-color: #517516;
    }

nav#mobnav {
    display: none;
}

/*#endregion */


/*#endregion */

/*#region Main 
--------------------------  */

body > div > main > div {
    line-height: 1.5em;
    clear: both;
    width: 75em;
    margin: 0px auto;
    text-align: left;
}

    body > div > main > div > div {
        width: 90%;
        margin: 0px 5%;
        padding: 3em 0px 0px 0px;
        float: left;
        position: relative;
    }

body > div > main header h1 {
    font-weight: 700;
    margin-bottom: 0.9em;
    color: var(--aqua);
    line-height: 1em;
}

body > div > main header h2 {
    margin-bottom: 1.3em;
    font-size: 1.75em;
    color: #58595b;
}

body > div > main header figure {
    margin: 0 -5% 1em -5%;
    margin-bottom: 2.25em;
    padding: 0;
    width: 110%;
    float: left;
}

    body > div > main header figure img {
        width: 100%;
        float: left;
    }

body > div > main header > figure figcaption {
    display: block;
    float: left;
    width: 100%;
    padding: 0.5em 5%;
    border-bottom: solid 1px #bcbec0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    body > div > main header > figure figcaption p {
        margin-bottom: 0;
    }

    body > div > main li li, body > div > main li p, body > div > main li input {
        font-size: 1em;
    }

body > div > main label {
    width: 25%;
    display: inline-block;
    margin-bottom: 0.5em;
}

    body > div > main label.c {
        width: auto;
    }

body > div > main input, body > div > main select, body > div > main textarea {
    margin-bottom: 0.5em;
    padding: 1% 2%;
    width: 74%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    body > div > main input[type=checkbox] {
        width: auto;
    }

    body > div > main input[type=submit], body > div > main input[type=button] {
        width: auto;
        background-color: #00434f;
        color: var(--aqua);
        border: 0px;
    }

body > div > main div.buttons {
    text-align: right;
}

/* Footnotes */
body > div > main p.footnote {
    font-size: 0.9em;
}

/* Related Documents */
body > div > main nav.rd {
    border-top: solid 1px #c9cccb;
    padding-top: 1em;
    clear: both;
}

    body > div > main nav.rd h1 {
        font-size: 1.75em;
    }

    body > div > main nav.rd ul {
        float: left;
        width: 100%;
        list-style-type: none;
        margin: 0px 0px 1em 0px;
        padding: 0px;
    }

        body > div > main nav.rd ul li {
            float: left;
            width: 45%;
            margin-right: 5%;
        }

            body > div > main nav.rd ul li.f {
                float: none;
                width: 100%;
                margin-right: 0px;
            }

            body > div > main nav.rd ul li a {
                display: block;
                padding: 0.5em 0.5em 0.5em 2.375em;
                transition: all .1s ease-in-out;
                background: transparent url(/_resources/files/events/documents-60-datagreen.png) no-repeat 0.15em 0.15em;
            }

                body > div > main nav.rd ul li a:hover {
                    background-image: url(/_resources/files/events/documents-60-white.png);
                    background-color: var(--aqua);
                }

/*#endregion */

/*#region Footer 
--------------------------  */

body > div > footer {
    clear: both;
}

    body > div > footer > nav {
        margin: 0px;
        padding: 1.5em 0px;
        clear: both;
        float: left;
        width: 100%;
        font-weight: 300;
    }

        body > div > footer > nav.prtnrs > h1 {
            font-size: 1.25em;
            color: var(--black);
            margin-bottom: 2em;
            padding: 0 2.5%;
        }

        body > div > footer > nav.prtnrs > div {
            width: 75em;
            margin: 0px auto;
        }

            body > div > footer > nav.prtnrs > div > ul {
                list-style-type: none;
                padding: 0px;
                width: 90%;
                margin: 0px 5%;
                white-space: nowrap;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-between;
                align-items: center;
            }

        body > div > footer > nav.prtnrs ul li {
            margin: 0px 1.5%;
        }

            body > div > footer > nav.prtnrs ul li.ia {
                width: 10%;
            }

                body > div > footer > nav.prtnrs ul li.ia a {
                    display: block;
                }

            body > div > footer > nav.prtnrs ul li a:hover {
                background-color: transparent;
            }

            body > div > footer > nav.prtnrs ul li img {
                max-width: 100%;
            }

    body > div > footer > section {
        margin: 3em 0 0 0;
        padding: 3em 0 1em 0;
        clear: both;
        float: left;
        width: 100%;
        font-weight: 300;
        border-top: solid 1em var(--medium-grey);
    }

        body > div > footer > section > div {
            width: 75em;
            margin: 0;
            padding: 0px;
            margin: 0px auto;
        }

            body > div > footer > section > div > div {
                float: left;
                padding: 0px;
                width: 90%;
                margin: 2em 5% 0 5%;
                text-align: left;
            }

        body > div > footer > section picture.logo {
            width: 12.4375em;
            padding: 0;
            margin: 0 auto;
            display: block;

        }

        body > div > footer > section p.strap {
            font-size: 2em;
            font-weight: 600;
            color: var(--aqua);
            text-align: center;
            margin-top: 0.5em;
        }

        body > div > footer > section p.copyright {
            font-size: 0.825em;
            margin-left: 2em;
        }

        body > div > footer > section a {
            color: var(--black);
        }
            body > div > footer > section a:hover {
                color: var(--black);
                text-decoration: underline;
                background-color: transparent;
            }

        body > div > footer > section p.copyright a {
            display: inline-block;
            margin-left: 0.5em;
        }
        
        body > div > footer > section p.copyright span {
                border-left: solid 1px var(--black);
                margin-left: 0.5em;
                padding-left: 0.75em;
                display: inline-block;
                line-height: 1.25em;
            }

/*#endregion */


/*#endregion */

/*#region Content 
--------------------------  */

/* Partners */
ul.partners {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

    ul.partners li {
        margin-bottom: 3em;
    }

/*#endregion */

/*#region Responsive 
--------------------------  */

/*  From 781px  */
@media screen and (min-width: 781px) {
    /* Menu link hovers */
    body > div > header nav.mn div > ul > li:hover > a,
    body > div > header nav.mn ul > li.s:hover > a {
        background-color: var(--aqua);
        color: var(--white);
    }
    body > div > header nav.mn div > ul > li.oil:hover > a {
        background-color: var(--oil);
    }

    body > div > header nav.mn div > ul > li.gas:hover > a {
        background-color: var(--gas);
    }

    body > div > header nav.mn > div > ul > li:hover > a:after,
    body > div > header nav.mn > ul > li.s:hover > a:after {
        -moz-filter: none;
        -ms-filter: none;
        -webkit-filter: none;
        filter: none;
    }
    body > div > header nav.mn > div > ul li li.e:hover > a:after {
        -moz-filter: var(--svg-aqua);
        -ms-filter: var(--svg-aqua);
        -webkit-filter: var(--svg-aqua);
        filter: var(--svg-aqua);
    }


    body > div > header nav.mn > div ul > li > ul > li:hover > a:not([href="javascript:;"]) {
        color: var(--white);
    }

    body > div > header nav.mn > div > ul > li:hover > ul {
        visibility: visible;
        opacity: 1;
        margin-top: 0px;
    }

    ul#mainnav li li a[href="javascript:;"]:hover {
        background-color: transparent;
        cursor: default;
    }

    ul#mainnav li li a:hover, ul#mainnav li li:hover a {
        background-color: transparent;
    }

    ul#mainnav li li:hover > a:not([href="javascript:;"]) {
        background-color: transparent;
        color: var(--black);
    }

    ul#mainnav li.oil li:hover > a:not([href="javascript:;"]) {
        color: var(--aqua);
    }

    body > div > header nav.mn > div > ul > li.oil li button {
        display: block;
    }
        body > div > header nav.mn > div > ul > li.oil li button:not(.group):hover {
            color: var(--aqua);
        }

    body > div > header nav.mn > div > ul > li.gas li button:not(.group):hover {
        color: var(--black);
    }

    body > div > header nav.mn > div > ul > li li button.mobile {
        display: none;
    }

    body > div > header nav.mn > div > ul > li li button + a {
        margin-top: 1em;
    }

    body > div > header nav.mn > div > ul li.gas li.e:hover > a:after {
        -moz-filter: var(--svg-black);
        -ms-filter: var(--svg-black);
        -webkit-filter: var(--svg-black);
        filter: var(--svg-black);
    }

    ul#mainnav li:hover > ul {
        visibility: visible;
        max-height: 50em;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }


}

/*  1220px  */
@media screen and (max-width: 1220px) {
    /* Full widths */
    body > div > header {
        background-color: #fff;
        float: left;
    }

        body > div > header, body > div > header > nav, body > div > header nav.mn > div, body > div > header section.s > div, body > div > main > div, body > div > footer > nav.smap > div, body > div > footer > nav.prtnrs > div, body > div > footer > section > div {
            width: 100%;
            min-width: 20em;
        }
}

/*  1200px  */
@media screen and (max-width: 1215px) {

    /* Main links */
    body > div > header nav.mn > div > ul:first-child > li:first-child {
        margin-right: 10.25em;
    }

    body > div > header nav.mn > div > ul > li > a {
        padding: 1em 0.85em 1.25em 0.85em;
        white-space: nowrap;
    }
}

/*  1080px  */
@media screen and (max-width: 1080px) {

    /* Main links */
    body > div > header nav.mn > div > ul:first-child > li:first-child {
        margin-right: 11rem;
    }

    body > div > header nav.mn ul:first-child li {
        font-size: 0.9em;
    }

        body > div > header nav.mn ul:first-child li li {
            font-size: 1em;
        }

}

/*  1040px  */
@media screen and (max-width: 1040px) {
    body > div > footer > nav.prtnrs ul li.ia {
        width: 12%;
    }
}

/*  980px  */
@media screen and (max-width: 980px) {

    /* Main links */
    body > div > header nav.mn ul:first-child li {
        font-size: 0.85em;
    }
}

/*  940px  */
@media screen and (max-width: 940px) {

    /* Main links */
    body > div > header nav.mn.sn > div > ul > li:first-child {
        display: block;
    }

    body > div > header nav.mn.sn div > ul {
        margin-left: 10%;
        width: 85%;
    }
}

/*  925px  */
@media screen and (max-width: 925px) {

    /* Main links */
    body > div > header nav.mn > div > ul:first-child > li:first-child {
        margin-right: 11.5rem;
    }

    body > div > header nav.mn > div > ul > li > a {
        padding: 1em 0.75em 1.25em 0.75em;
    }

    /* Main Content */
    h1 {
        font-size: 1.5em;
    }

    h2 {
        font-size: 1.25em;
    }

    h3 {
        font-size: 1.25em;
    }

    body > div > main p, body > div > main li, body > div > main time, body > div > main td, body > div > main label, body > div > main input, body > div > main select, body > div > main textarea {
        font-size: 1.15em;
    }

    body > div > main header h1 {
        font-size: 2em;
    }

    body > div > main header h2 {
        font-size: 1.35em;
    }

    body > div > main nav.rd h1 {
        font-size: 1.5em;
    }
}

/*  890px  */
@media screen and (max-width: 890px) {
    body > div > header nav.mn > div > ul > li > ul {
        width: 31.75em;
    }
    body > div > footer > nav.prtnrs ul li.ia {
        width: 15%;
    }
}

/*  850px  */
@media screen and (max-width: 850px) {

    /* Main links */
    body > div > header nav.mn.sn div > ul {
        margin-left: 7.5%;
        width: 87.5%;
    }
    /* Outer Margins */
    body > div > header nav.spotlight > div, body > div > header nav.mn > div > ul, body > div > header section.s form, body > div > main > div > div, body > div > footer > nav > div > ul, body > div > footer > section ul, body > div > footer > section > div > div {
        width: 95%;
        margin: 0;
        padding: 1.5% 2.5%;
    }

    body > div > main > div > div {
        padding-top: 2em;
        padding-bottom: 2em;
    }

    body > div > header nav.mn > div > ul {
        padding: 0 1.5%;
    }

    body > div > header nav.mn > div > ul:first-child > li:nth-child(3) {
        margin-right: 5%;
    }

    /* Search section */
    body > div > header section.s form {
        padding: 2% 0px;
        margin: 0px 2.5%;
    }
}

/*  825px  */
@media screen and (max-width: 825px) {
        body > div {
            min-width: 20em;
            position: relative;
            z-index: 1;
        }

    /* Main Content */
    h1 {
        font-size: 1.35em;
    }

    h2 {
        font-size: 1.15em;
    }

    h3, h4, h5, h6 {
        font-size: 1.15em;
    }

    body > div > main p, body > div > main li, body > div > main time, body > div > main td, body > div > main label, body > div > main input, body > div > main select, body > div > main textarea {
        font-size: 1em;
    }

    body > div > main header h1 {
        font-size: 1.75em;
    }

    body > div > main header h2 {
        font-size: 1.25em;
    }

    body > div > main nav.rd h1 {
        font-size: 1.35em;
    }

    /* Footnotes */
    body > div > main p.footnote {
        font-size: 0.75em
    }
}

/*  780px  */
@media screen and (max-width: 780px) {
    body > div > header nav.spotlight a.logo {
        width: 25%;
    }
    body > div > header nav.spotlight a.ief {
        width: 23%;
    }
    body > div > header nav.spotlight > div a.login {
        display: none;
    }
    body > div > header nav.spotlight > div > div.right {
        margin-top: 4%;
    }
    /* Show Navicon */
    body > div > header nav.spotlight > div > div > a.n {
        display: block;
        clear: right;
        margin-top: -0.75em;
        width: 58px;
        height: 58px;
        position: relative;
        background-color: var(--grey);
        -moz-transition: background-color ease-out .2s;
        -o-transition: background-color ease-out .2s;
        -webkit-transition: background-color ease-out .2s;
        transition: background-color ease-out .2s;
    }
    body > div > header nav.spotlight > div > div > a.n:hover {
        background-color: var(--aqua);
    }

        body > div > header nav.spotlight > div > div > a.n span {
            display: block;
            width: 26px;
            height: 2px;
            background-color: #fff;
            position: absolute;
            top: 27px;
            left: 16px;
            -moz-transition: background-color .1s linear;
            -o-transition: background-color .1s linear;
            -webkit-transition: background-color .1s linear;
            transition: background-color .1s linear;
        }

            body > div > header nav.spotlight > div > div > a.n span:before {
                display: block;
                width: 26px;
                height: 2px;
                background-color: #fff;
                position: absolute;
                top: -8px;
                left: 0;
                content: "";
                -moz-transition: transform .2s ease-out, top .4s cubic-bezier(1,0,0,0.7);
                -o-transition: transform .2s ease-out, top .4s cubic-bezier(1,0,0,0.7);
                -webkit-transition: transform .2s ease-out, top .4s cubic-bezier(1,0,0,0.7);
                transition: transform .2s ease-out, top .4s cubic-bezier(1,0,0,0.7);
            }

            body > div > header nav.spotlight > div > div > a.n span:after {
                display: block;
                width: 26px;
                height: 2px;
                background-color: #fff;
                position: absolute;
                top: 8px;
                left: 0;
                content: "";
                -moz-transition: transform .2s ease-out, top .4s cubic-bezier(1,0,0,0.7);
                -o-transition: transform .2s ease-out, top .4s cubic-bezier(1,0,0,0.7);
                -webkit-transition: transform .2s ease-out, top .4s cubic-bezier(1,0,0,0.7);
                transition: transform .2s ease-out, top .4s cubic-bezier(1,0,0,0.7);
            }

        body > div > header nav.spotlight > div > div > a.n.show {
            background-color: var(--aqua);
        }

        body > div > header nav.spotlight > div > div > a.n.show span {
            background-color: transparent;
        }

            body > div > header nav.spotlight > div > div > a.n.show span:before {
                top: 0;
                -moz-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
                -moz-transition: transform .4s cubic-bezier(1,0,0,0.5), top .2s ease-out;
                -o-transition: transform .4s cubic-bezier(1,0,0,0.5), top .2s ease-out;
                -webkit-transition: transform .4s cubic-bezier(1,0,0,0.5), top .2s ease-out;
                transition: transform .4s cubic-bezier(1,0,0,0.5), top .2s ease-out;
            }

            body > div > header nav.spotlight > div > div > a.n.show span:after {
                top: 0;
                -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                -moz-transition: transform .4s cubic-bezier(1,0,0,0.5), top .2s ease-out;
                -o-transition: transform .4s cubic-bezier(1,0,0,0.5), top .2s ease-out;
                -webkit-transition: transform .4s cubic-bezier(1,0,0,0.5), top .2s ease-out;
                transition: transform .4s cubic-bezier(1,0,0,0.5), top .2s ease-out;
            }

    body > div > header nav.spotlight > div a.social.li {
        clear: none;
        margin-left: 1.25em;
    }

    body > div > header nav.spotlight ul {
        top: 130%;
        margin-top: 0px;
    }
    /* 
        Main Nav Mobile
    */
    body.show {
        overflow-x: hidden;
    }

        body.show nav#mobnav {
            display: block;
        }

    nav#mobnav {
        position: absolute;
        top: 6.5em;
        left: 100%;
        width: 100%;
        z-index: 99;
        background-color: var(--grey);
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

        nav#mobnav.show {
            left: 0;
            display: block;
        }

    ul#mainnav {
        list-style-type: none;
        padding: 1em 0px;
        margin: 0px;
        text-align: left;
        width: 100%;
    }

        ul#mainnav li {
            font-size: 1em;
            overflow: hidden;
        }

            ul#mainnav li li {
                font-size: 1em;
            }

        ul#mainnav > li a {
            font-size: 1em;
            color: #fff;
        }

        ul#mainnav > li > a {
            display: block;
            width: 90%;
            padding: 2.5% 5%;
            -moz-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
        }

        ul#mainnav ul {
            list-style-type: none;
            width: 100%;
            margin: 0px;
            padding: 0px;
        }

            ul#mainnav li > ul {
                visibility: hidden;
                max-height: 0px;
                transition: all .2s ease-in-out;
            }

        ul#mainnav li.o > ul {
            visibility: visible;
            max-height: 50em;
            -moz-transition: all .5s ease-in-out;
            -o-transition: all .5s ease-in-out;
            -webkit-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
        }

        ul#mainnav > li ul > li > a, ul#mainnav > li ul > li > button {
            display: block;
            padding: 2.5% 5% 2.5% 7.5%;
            width: 100%;
            text-align: left;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        ul#mainnav > li ul > li > button:hover {
            background-color: var(--aqua);
        }

        ul#mainnav > li ul > li ul > li > a {
            padding: 2.5% 5% 2.5% 10%;
        }

    body > div > header nav.mn ul:first-child li:first-child,
    body > div > header nav.mn ul:first-child li:nth-child(3),
    body > div > header nav.mn ul:first-child li:nth-child(4) {
        margin-right: 0;
    }

        /* Oil, Gas, Forum */
        ul#mainnav > li#oil > a {
            background-color: transparent;
            color: #009fe3;
        }

            ul#mainnav > li#oil > a:hover {
                background-color: #009fe3;
                color: #fff;
            }

    ul#mainnav > li#gas > a {
        background-color: transparent;
        color: var(--gas-light);
    }

        ul#mainnav > li#gas > a:hover {
            background-color: var(--gas-light);
            color: #fff;
        }

        ul#mainnav > li#forum > a {
            background-color: transparent;
            color: #f07e26;
        }

            ul#mainnav > li#forum > a:hover {
                background-color: #f07e26;
                color: #fff;
            }

    nav#mobnav article {
        text-align: left;
        margin: 0 5% 2em 5%;
        background-color: #f1f1f2;
        float: left;
        width: 90%;
    }

        nav#mobnav article h1 {
            float: left;
            width: 100%;
            background-color: #fff;
        }

        nav#mobnav article a {
            display: block;
            float: left;
            width: 100%;
            color: #1d1d1b;
            padding: 0.5em 1em;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

            nav#mobnav article a:hover, nav#mobnav article:hover a {
                background-color: transparent;
                color: var(--aqua);
            }

        nav#mobnav article h1 img {
            float: left;
            max-width: 100%;
        }

        nav#mobnav article div p {
            margin: 0;
            font-weight: 700;
            font-size: 1.25em;
            line-height: 1.2em;
            min-height: 5em;
        }

    ul#mainnav li.s > a {
        position: relative;
    }
        ul#mainnav li.s > a:after {
            position: absolute;
            right: 5%;
            display: inline-block;
            content: url(/_resources/files/icons/arrow-right.svg);
            width: 0.85em;
            margin-left: 0.25em;
            -moz-filter: none;
            -ms-filter: none;
            -webkit-filter: none;
            filter: none;
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }

    ul#mainnav li.e > a:after {
        position: absolute;
        right: 5%;
        display: inline-block;
        content: url(/_resources/files/icons/arrow-right.svg);
        width: 0.85em;
        margin-left: 0.25em;
        -moz-filter: none;
        -ms-filter: none;
        -webkit-filter: none;
        filter: none;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    ul#mainnav li li button.mobile {
        display: inline-block;
    }

    ul#mainnav > li li button.desktop {
        display: none;
    }

    /* Main Links */
    body > div > header nav.mn > div > ul {
        display: none;
    }

    body > div > header nav.mn.sn {
        display: none;
    }

    body > div > header nav.mn > div > ul.show {
        display: block;
        border: solid 1px #fff;
        position: absolute;
        top: 5.3em;
        margin-top: 0px;
        right: 0px;
        background-color: var(--aqua);
        width: 50%;
        z-index: 99;
    }

        body > div > header nav.mn > div > ul.show li {
            width: 100%;
            border-bottom: solid 1px #fff;
        }

    body > div > header nav.mn > div > ul > li:first-child {
        display: block;
    }

    body > div > header nav.mn > div > ul.show li:last-child {
        border-bottom: 0px;
    }

    body > div > header nav.mn > div > ul.show li a {
        display: block;
        width: 95%;
        padding: 2.5%;
    }

    body > div > header nav.mn > div > ul.show > li.s > a {
        background-position: 95% center;
    }

    body > div > header nav.mn > div > ul > li > ul {
        visibility: visible;
        display: none;
        margin: 0px;
        padding: 0px;
        width: 100%;
        float: left;
        position: static;
        top: 0px;
        background: #fff;
    }

    body > div > header nav.mn > div > ul > li.o > ul, body > div > header nav.mn > div > ul > li:hover > ul {
        display: block;
    }

    body > div > header nav.mn > div > ul.show > li > ul li a {
        float: none;
        padding-left: 5%;
        width: 92.5%;
    }

    body > div > header nav.mn > div > ul.show > li > ul li {
        border-bottom: 0px;
    }

    /* Sub links */
    body > div > header nav.mn > div > ul > li.m > ul > li {
        width: 100%;
    }

    body > div > header nav.mn > div > ul > li > ul > li a[href="javascript:;"] {
        padding-bottom: 0px;
    }
}

/*  660px  */
@media screen and (max-width: 660px) {
    main > div > div > section:last-child, main > div.bw > section:last-child {
        margin-bottom: 3em;
    }

    body > div > footer > nav.prtnrs > h1 {
        font-size: 1.5em;
    }

    body > div > footer > section p.copyright {
        margin-left: 0;
        text-align: center;
    }
}

/*  610px  */
@media screen and (max-width: 610px) {
    nav#mobnav {
        top: 6em;
    }
    /* Related Dcuments */
    body > div > main nav.rd ul li a {
        padding: 0.65em 0.5em 0.5em 2.375em;
    }

    body > div > footer > nav.prtnrs > div > ul {
        flex-wrap: wrap;
    }

    body > div > footer > nav.prtnrs ul li, body > div > footer > nav.prtnrs ul li.ia {
        width: auto;
        flex: 0 0 20%;
        margin: 3% 1.5%;
    }
}

/*  515px  */
@media screen and (max-width: 515px) {
    body > div > header nav.spotlight a.logo {
        margin-right: 0;
        padding-right: 0;
        border-right: 0;
    }
    body > div > header nav.spotlight a.ief {
        display: none;
    }
    /* Logo and Spotlight buttons */
    body > div > header nav.spotlight > div > a.logo {
        width: 30%;
    }

    body > div > header nav.spotlight ul:before {
        content: none;
    }

    body > div > header nav.spotlight div > div > div {
        position: static;
    }

    /* Grid Menu */
    body > div > header nav.spotlight ul {
        border: 0px;
        border-top: solid 5px var(--aqua);
        border-bottom: solid 1px var(--aqua);
        top: 85%;
        left: -2.5%;
        right: auto;
        padding: 2.5% 13%;
        width: 76.5%;
    }
    /* Related Dcuments */
    body > div > main nav.rd ul li {
        float: none;
        width: 100%;
        margin-right: 0px;
    }
}

/*  480px  */
@media screen and (max-width: 480px) {
    /* Grid Menu */
    body > div > header nav.spotlight ul {
        padding: 2.5% 8%;
        width: 86.5%;
    }
    /* Footer text */
    body > div > footer > section > div > div {
        font-size: 0.75em;
    }

        body > div > footer > section > div > div a, body > div > footer > section > div > div span {
            white-space: nowrap;
        }

    body > div > footer > section p.copyright span {
        display: block;
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

/*  400px  */
@media screen and (max-width: 400px) {
    body > div > header nav.spotlight > div > a.logo {
        width: 8em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    body > div > header nav.spotlight > div a.social.li {
        margin-left: 0.5em;
    }
    body > div > header nav.spotlight > div > div > a.n {
        margin-left: 0.75em;
    }

    nav#mobnav {
        top: 5em;
    }

    body {
        font-weight: 200;
    }
        /* Grid Menu */
        body > div > header nav.spotlight ul {
            padding: 2.5% 2.5%;
            width: 97.5%;
        }
}

/*#endregion */