/* ==========================================================================
   Project:     Sunoco - Landing Page - Stacked Rewards
   Date:        03/01/2022 - File created	
   Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

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

@font-face {font-family: 'greycliff_cfregular';src: url('/css/fonts/greycliffcf-regular-webfont.woff2') format('woff2'),url('/css/fonts/greycliffcf-regular-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'greycliff_cfdemi_bold';src: url('/css/fonts/greycliffcf-demibold-webfont.woff2') format('woff2'),url('/css/fonts/greycliffcf-demibold-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'greycliff_cfbold';src: url('/css/fonts/greycliff-cf-bold-webfont.woff2') format('woff2'),url('/css/fonts/greycliff-cf-bold-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'greycliff_cfheavy';src: url('/css/fonts/greycliffcf-heavy-webfont.woff2') format('woff2'),url('/css/fonts/greycliffcf-heavy-webfont.woff') format('woff');font-weight: normal;font-style: normal;} 

main {font-family: 'greycliff_cfregular', Helvetica, sans-serif;color: #002d72; line-height: 1.4}
main h1, main .h1 {font-family: 'greycliff_cfheavy', Helvetica, sans-serif; color: #002d72;line-height: 1.1}
main h2,main h3,main h4,main h5,main h6,main .h2,main .h3,main .h4,main .h5,main .h6,main strong {font-family: 'greycliff_cfbold', Helvetica, sans-serif; color: #002d72;line-height: 1.3}
main .small {line-height: 1.6}
main .font-semibold {font-family: 'greycliff_cfdemi_bold', Helvetica, sans-serif;}
main .font-weight-bold, main bold, main strong {font-family: 'greycliff_cfheavy', Helvetica, sans-serif;}
main .font-heavy {font-family: 'greycliff_cfheavy', Helvetica, sans-serif;}
main .text-muted {color: #676767 !important}

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

.step {height: 55px; width: 55px; line-height: 55px;}

/* Buttons */
.btn-yellow { padding: 7.5px 35px; border-radius: 30px 0px 0px 30px; z-index: 2; right: 0px; position:fixed;}
     .btn-yellow:hover, .btn-yellow:focus {box-shadow:none; }

/* Rules */
main hr {border-top: 5px solid #002d72 !important; }

/* Backgrounds */
.bg-red {background: #e4002b}
.bg-blue {background: #002d72}

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

@media (min-width: 0px) {	
     /* Type */
     main h1, main .h1 {font-size: 2.625rem}
     .save-28 {margin: auto}

     /* Layout */
     main {background-position: center 120px }
     .btn-yellow {top: 420px}
}

@media (min-width: 576px) {	
     /* Widths */
     .w-10 {max-width: 10%; flex: 0 0 10%}
     .w-26 {max-width: 26.666%; flex: 0 0 26.666%}
}

@media (min-width: 768px) {	
     /* Type */
     main h1, main .h1 {font-size: 3.25rem}

     /* Layout */
     main {background-position: center 50px}
     .btn-yellow {top: 450px}
     .instrument-cluster {max-width: 550px}
}

@media (min-width: 992px) {
     /* Layout */
     main {background-position: center 0px}
     .btn-yellow {top: 490px}
}

@media (min-width: 1200px) {
     /* Layout */
     main {background-position: center -5vw}
}

@media (min-width: 1500px) {
     /* Layout */
     main {background-position: center -10vw}
}

@media (min-width: 2000px) {
     /* Layout */
     main {background-position: center -13vw}
}