﻿/*
	--------------------------
	Oil Home Page Styles
	--------------------------
*/

/*  Resources
--------------------------  */

    section.latest div div {
        line-height: 1em;
        background-color: var(--aqua);
        color: #fff;
        font-size: 1em;
        text-align: center;
    }

        section.latest div div h2 {
            color: #fff;
            background-color: var(--oil);
            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.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%;
}
    div.jr ul li:nth-child(2n+1) {
        margin-left: 0;
    }

/*  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;
        }
}

