/* ==========================================================================
     Project:     Sunoco Media Library
     Date:        07/28/2022 - File created	
     Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

/* Typography */
body {color: #4d4d4f;font-family: "Roboto",sans-serif;font-size: .875rem}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {font-family: "Roboto Condensed",sans-serif;font-weight:700;color: #4d4d4f}

/* Result Cards */
.card .card-img, .card .bg-light {z-index: 0; position: relative; height: 130px; background: #f1f1f1}
.card img {width: 100%; height: 100%; object-fit: contain; object-position: center center; position: absolute; top: 0px; left: 0px;padding: 10px; }
.card a {color: #4d4d4f; text-decoration: none;}
.card .icon {position: absolute; top: 0px; right: 0px;z-index: 1;}
.card .icon span {position: absolute; z-index:1;top: 9px; right: 7px;color: #fff}
.card .icon::before {content: " ";transition: all 250ms ease; position: absolute; display: block; width: 0px; height: 0px; border-top: 30px solid #000;border-left: 30px solid transparent; border-top-right-radius: .30rem; border-right: 30px solid #000; border-bottom: 30px solid transparent; left: -60px; top: 0px;z-index: -1;}
.card a:hover .icon::before {border-top: 30px solid #E22C3B; border-right: 30px solid #E22C3B}
.card .list-inline-item:not(:last-child) {margin-right: 0px}
.card .badge {font-size: .563rem}
.card p {font-size: .688rem}

/* Buttons */
.btn-red, .btn-yellow {font-family: "Roboto Condensed",sans-serif; font-weight: 700; font-size: 1.188rem; white-space: normal; line-height: 1; padding:13px 25px; border-radius: 0px; letter-spacing: 1px; text-transform: uppercase; color: #fff;text-decoration:none; transition: background 300ms ease-in-out}
.btn-red {background: #E22C3B; color: #fff; } /* Red darkened slightlty for WCAG AA Contrast Compliance */
.btn-yellow {background: #ffdf00; color: #185487}
.btn-red:hover, .btn-red:focus {background:#ac0313; color: #fff}
.btn-yellow:hover, .btn-yellow:focus {background: #e1c500; color:#185487}

/* Accordions */
.accordion .btn-link {position: relative; font-size: .875rem}
.accordion .btn-link::before {content:""; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f106";display:inline-block; transition: transform 250ms ease;margin-right: 10px;}
.accordion .btn-link[aria-expanded=true]::before {-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}

/* Positions */
.position-sticky {top: 30px}

/* Media Queries */
@media (min-width:768px) {	
     /* Grid */
     .container-fluid {padding-left: 30px; padding-right: 30px; max-width: 2000px;}
}