/* ==========================================================================
     Project:       Sunoco - Landing Page - 94 Octane 
     Date:          05/12/2025 - File updated	
     Created by:    Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

/* ==========================================================================
     Type
========================================================================== */

@font-face {font-family: 'league_gothicregular';src: url('/css/fonts/leaguegothic-regular-variablefont_wdth-webfont.woff2') format('woff2'),url('/css/fonts/leaguegothic-regular-variablefont_wdth-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
main p {line-height: 1.4; color: #fff}
main h1, .main .h1, main h2, main .h2, main h3, main .h3 {font-family: 'league_gothicregular', Helvetica, sans-serif; line-height: 1; font-weight: 400}
sup {font-size: 50%;top: -.75em}

/* ==========================================================================
     Layout
========================================================================== */

body {background: #042D72;}
a {text-decoration: underline;}
p a:hover, p a:focus {color: #fff}
section {position: relative; z-index: 1}

.skip {position:absolute;top:-1000px;left:15px;width:auto;height:auto;text-align:center;overflow:hidden;transition:.25s;background:#E22E3E;; width:auto;height:auto;overflow:visible;padding:10px;color:#fff;font-weight:700;font-size:14px;z-index:9999;text-decoration:underline}
.skip:active,.skip:focus,.skip:hover{left:15px;top:15px;color: #fff; background:#ac0313}

div[role="banner"] {position: absolute; top: 15px; left: 0px; width: 100%;z-index: 2}
div[role="banner"] img {width: 100px}
.hamburger {width: 33px;height: 37px;background:none; border:none;padding:0px}
.hamburger .line {width: 33px;height: 2px;background-color: #fff;display: block;margin: 8px auto;transition: all .2s ease-in-out}
.hamburger:hover {cursor: pointer}
.hamburger.hamburger.active .line:nth-child(2) {opacity: 0;background-color: #ffdf00}
.hamburger.hamburger.active .line:first-child {-webkit-transform: translateY(10px) rotate(45deg); -ms-transform: translateY(10px) rotate(45deg);transform: translateY(10px) rotate(45deg);background-color: #ffdf00}
.hamburger.hamburger.active .line:nth-child(3) {-webkit-transform: translateY(-10px) rotate(-45deg); -ms-transform: translateY(-10px) rotate(-45deg);transform: translateY(-10px) rotate(-45deg);background-color: #ffdf00}

#hero {height: 100vh;position: relative;z-index: 1}
#hero::before {content:""; width: 100%; position: absolute; left: 0px;  background: url(/img/94-octane-lp-map.webp) center top/cover no-repeat}
#hero .logo {width: 100%;}
#hero video, #hero .hero-bg {position: absolute; top: 0px; left: 0px; z-index: -1; width: 100%; height: 100%; object-fit: cover;object-position: center bottom;}
#hero .btn-toggle-video {position: absolute;color: var(--white);  z-index: 1; bottom: 15px; right: 15px; background: rgba(0,0,0,.9);border-radius: 50%; width: 25px; height: 25px; font-size: .625rem;opacity: .5; transition: 200ms opacity ease;}
#hero .btn-toggle-video:hover, #hero  .btn-toggle-video:focus {opacity: 1}

/* ==========================================================================
     Components
========================================================================== */

/* Btns */
.btn-yellow {background: #FED130; text-transform: uppercase; font-weight: bold; transition: background 250ms ease; color: #002d72;border-radius: 0px; padding:9px 35px; border: none; }
     .btn-yellow:hover, .btn-yellow:focus {background: #ffe847;}

/* Backgrounds */
.bg-blue {background:#042D72}

/* Forms */
.form-control, .custom-select {background-color: #fff; color: #002d72;font-weight: 500;font-size: 1rem}
.form-control::-webkit-input-placeholder {color:#042D72}
.form-control::-msplaceholder {color:#042D72}
.form-control::-placeholder {color:#042D72}
.form-group-icon {position: relative;}
.form-group-icon input {padding-right: 30px}
.form-group-icon img {position: absolute; top: 50%; height: 18px; margin-top: -9px; right: 10px; z-index: 2}

/* Stacking Order */
.z-2 {z-index: 2}

/* Accordions */
.cms-accordion {}
     .cms-accordion .card-header {font-size: 1rem;color: #fff;}
     .cms-accordion .card-header:hover, .cms-accordion .card-header:focus, .cms-accordion .card-header[aria-expanded=true] {color: #FED130}
     .cms-accordion .card-header::before {background-color: #FED130}
     .cms-accordion .card-header::after {background: url(/img/icon-plus-yellow.svg) center center no-repeat}
     .cms-accordion .card {opacity: 0; transition: opacity 500ms ease;}
     .cms-accordion .card.active {opacity: 1}
     .cms-accordion .card:nth-child(1) {transition-delay: .25s}
     .cms-accordion .card:nth-child(2) {transition-delay: .5s}
     .cms-accordion .card:nth-child(3) {transition-delay: .75s}
     .cms-accordion .card:nth-child(4) {transition-delay: 1s}
     .cms-accordion .card:nth-child(5) {transition-delay: 1.25s}
     .cms-accordion .card:nth-child(6) {transition-delay: 1.5s}
     .cms-accordion .card:nth-child(7) {transition-delay: 1.75s}
     .cms-accordion .card:nth-child(8) {transition-delay: 2s;}
     .cms-accordion .card:nth-child(9) {transition-delay: 2.25s;}

/* CMS */
#hero .cms-contentmenu {position: absolute; bottom: 100px; left: 30px;}

/* ==========================================================================
     Media Queries
========================================================================== */

@media (min-width: 0px) {	
     /* Type */
     h1 {font-size: 3rem; line-height: .95}
     h2 {font-size: 2.5rem;}
          
     /* Layout */
     #hero {background-position: 70% top;background-size: cover}
     #hero::before {height: 1250px;top:40%; }
     #hero .logo { max-width: 200px}
}

@media (min-width: 390px) and (min-height: 700px) and (orientation:portrait) {
     /* Layout */
	.hero-caption {margin-bottom: 50px}
     #hero::before {height: 1350px;}
}

@media (min-width: 768px) {	
     /* Type */
     h1 {font-size: 4rem; line-height: .95}
     h2 {font-size: 3.25rem;}

     /* Layout */
     #hero {background-position: center top; background-size: cover}
     #hero::before {height: 1100px;top:50%; }
     #hero .logo { max-width: 350px}
}

@media (min-width: 900px) and (min-height:900px) and (orientation:portrait) {
     /* Layout */
     .hero-caption {-webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); margin-bottom: 100px}
}

@media (min-width: 1000px) and (max-height: 700px) {
     /* Layout */
	.hero-caption {margin-bottom: -75px}
}

@media (min-width: 1000px) and (min-height: 700px) {
     /* Layout */
	.hero-caption {-webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
}

@media (min-width: 1200px) and (min-height: 950px) {
     /* Layout */
	.hero-caption {-webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);width: 1270px }
}

@media (min-width: 1700px) and (max-height: 750px) {
     /* Layout */
     #hero::before {height: 1250px;top:38%; }
}

@media (min-width: 2000px) and (min-height: 1200px) {
     /* Layout */
	.hero-caption {-webkit-transform: scale(1.8); -ms-transform: scale(1.8); transform: scale(1.8); margin-bottom: 100px}
}