/*
	--------------------------
	Oil Home Page Styles
	--------------------------
*/

/*  Resources
--------------------------  */

section.latest div div {
    line-height: 1em;
    background-color: var(--gas-light);
    color: #fff;
    font-size: 1em;
    text-align: center;
}

    section.latest div div h2 {
        color: #fff;
        background-color: var(--gas);
        margin-bottom: 1rem;
        padding: 0.5rem 1rem;
        font-size: 1.35em;
        text-transform: uppercase;
    }

    section.latest div div p {
        font-size: 1.15em;
    }

    section.latest div div a {
        color: #fff;
        display: block;
        font-weight: 400;
    }

        section.latest div div a:hover {
            background-color: transparent;
        }

        section.latest div div a.d:after {
            display: inline-block;
            content: url(/_resources/files/icons/download.svg);
            width: 0.75em;
            margin-left: 0.25em;
            -moz-filter: none;
            -ms-filter: none;
            -webkit-filter: none;
            filter: none;
        }

        section.latest div div a.e:after {
            display: inline-block;
            content: url(/_resources/files/icons/arrow-right.svg);
            width: 0.75em;
            margin-left: 0.25em;
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

    section.latest div div nav {
        font-size: 1.15em;
        line-height: 1.8em;
        padding-bottom: 1em;
    }


div.jr ul li {
    width: 48%;
    background-color: var(--gas-light);
}

    div.jr ul li:nth-child(2n+1) {
        margin-left: 0;
    }

    div.jr ul li h2 {
        background-color: var(--gas);
    }

    div.jr ul li a:hover {
        background-color: transparent;
    }

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

    div.jr ul li {
        width: 47.5%;
        margin-left: 5%;
    }

        div.jr ul li:nth-child(2n+1) {
            margin-left: 0;
        }
}

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

    div.jr ul li {
        width: 100%;
        margin-left: 0;
    }

        div.jr ul li:nth-child(3n+1) {
            margin-left: 0;
        }
}