﻿/* CUSTOM CSS FOR ORONITE.COM */
/* ========================== */

/* Utilities */
pre {
    background: #EDEDEE;
    border: 1px solid #DBDCDD;
    color: #0066B2;
    font-size: 14px !important;
    line-height: 20px;
    font-family: 'Courier New';
    padding: 20px;
    margin: 20px 0 !important;
}

header {
    z-index: 9; /* Prevent customer drop-down menu from being unclickable and overlapped by menu nav */
}

.small {
    font-size: 1em;
}

.no-bottom-margin {
    margin-bottom:0;
}

.press-headline {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.text-center {
    text-align: center !important;
}

.centered-image {
    display: block;
    margin: 0 auto;
}

a.right-arrow:after {
    content: '›';
    display: inline-block;
    margin-left: 8px;
}

/* Fix for extra long-content drawers */
.drawers .panel-heading.active+.panel-content {
    max-height: 2000px;
}

/* Leadership page */
#leadership-team .multi-column-tiles h4 {
    margin-top: 10px;
}

/* Fix for keeping background images centered on smaller screens for content modules */
.related-content-promo .related-content-promo-image, .home-hero .home-hero-image {
    background-position: 50% 0;
}

/* Responsive logos/graphics inside gray promo box module */
.centered-img-block {
    position: relative;
}

    .centered-img-block img {
        position: absolute;
        top: 50%;
        left: 50%;
        max-width: 90%;
        max-height: 90%;
        transform: translate(-50%, -50%);
    }

/* Change needed to link treatment inside 'promo-content' panels 
(add 'right chevron' for other elements that are not p > a tags) @DFKY */
.related-content-promo .related-content-promo-content a:hover {
    color: #fff;
}

.related-content-promo .related-content-promo-content a:visited {
    color: #fff;
}

.related-content-promo .related-content-promo-content a:after {
    content: '›';
    display: inline-block;
    margin-left: 8px;
}

/* Same size columns for flexbox rows (add a 'equal-width' class to container) */
.multi-column.equal-width > div {
    width: 100%;
}

/* Fixing a minimum width for sub-titles on video 'component' to prevent width collapse on IE  */
.video .video-details h3 {
    min-width: 33%;
}

/* Internal anchor links padding to prevent section heading to be covered by sticky nav */
.internal-anchor-section {
    display: block;
    position: relative;
    top: -130px;
    visibility: hidden;
}

/* New customer portal login dropdown and chevron global menu items */
#customer-portal {
    float: left;
    height: 60px;
    padding: 7px 10px;
    margin-top: 8px;
}

#customer-portal a {
    color: #000;
}

#customer-portal a:visited {
    color: #000;
}

#customer-portal > img {
    margin: 0 auto 2px;
    display: block;
    width: 21px;
}

#customer-portal ul {
    height: 23px;
    overflow: hidden;
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

#customer-portal ul:hover {
    background: #F4F4F4;
}

#customer-portal ul:hover {
    height: auto;
    cursor: pointer;
}

#customer-portal ul li {
    line-height: 23px;
    text-align: center;
    position: relative;
    padding: 0 20px 0 13px;
}

#customer-portal ul li:not(.selected):hover {
    background:#E6E6E6;
    cursor: pointer;
}

#customer-portal ul li.selected:after {
    content: '\e601';
    color: #000;
    font-size: 14px;
    right: 6px;
    line-height: 8px;
    position: absolute;
    height: 7px;
    margin-top: -3px;
    top: 50%;
    font-family: 'cvx-icon' !important;
}

#customer-portal ul:hover li.selected:after {
    content: '\e604';
}

#customer-portal li, #customer-portal li.selected {
    font-family: "Gotham Medium",Arial,sans-serif;
}

#customer-portal li, #customer-portal li a {
    font-family: "Gotham",Arial,sans-serif;
    font-style: normal;
    font-size: 12px;
    margin: 0 auto;
}

 /* Modified icon size and position on investing future page - FG */
 #supply-trading {
    position: relative;
    top: -10px;
    left: -35px;
    width: 100%;
    min-width: 200px; 
    height: 100%;
 }

 /* "adding up" promo centered background image on all devices  */
 .full-width-promo .full-width-promo-image {
     background-position: center center;
 }

 /* Core.css style override for headlines not being centered */
.multi-column>div h4 {
     margin: 0 auto 10px auto;
 }

/* MEDIA QUERIES */
/* ============= */
@media screen and (max-width: 766px) {
    .small-centered h3 {
        text-align: center !important;
    }
}

@media screen and (min-width: 767px) {
    .press-headline {
        font-size: 2.63em;
        line-height: 1.2em;
    }
}

/* Home hero fix for iPhone SE and other mobile devices */
@media screen and (max-width: 767px) {
    .home-hero .home-hero-image h1 {
        padding: 0;
        margin: 0;
    }
}

@media screen and (min-width: 768px) {
    .home-hero .home-hero-image h1 {
        padding: 0 40px;
        margin: 0;
    }
}

/* Hide customer icon on small devices */
@media screen and (max-width: 991px) {
    #customer-portal {
        display: none;
    }
}

/* Hide customer link from main menu navigation (but keep it in mobile) */
@media screen and (min-width: 992px) {
    #topnav-inner > ul > li:nth-child(5) {
        display: none;
    }
}