/* ==========================================================================
   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('/skins/landingpage/css/fonts/greycliffcf-regular-webfont.woff2') format('woff2'),url('/skins/landingpage/css/fonts/greycliffcf-regular-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'greycliff_cfdemi_bold';src: url('/skins/landingpage/css/fonts/greycliffcf-demibold-webfont.woff2') format('woff2'),url('/skins/landingpage/css/fonts/greycliffcf-demibold-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'greycliff_cfbold';src: url('/skins/landingpage/css/fonts/greycliff-cf-bold-webfont.woff2') format('woff2'),url('/skins/landingpage/css/fonts/greycliff-cf-bold-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'greycliff_cfheavy';src: url('/skins/landingpage/css/fonts/greycliffcf-heavy-webfont.woff2') format('woff2'),url('/skins/landingpage/css/fonts/greycliffcf-heavy-webfont.woff') format('woff');font-weight: normal;font-style: normal;} 

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

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

html {scroll-behavior: smooth;}

img {max-width: 100%; height: auto}

a {text-decoration: underline;}

header {position: relative;height: 95px; z-index:0}

main {overflow:hidden; position: relative; z-index: 0;}
     .step {height: 55px; width: 55px; line-height: 55px;}

/* Containers */
.container-custom {margin-left: auto; margin-right: auto;padding-left: 30px; padding-right: 30px;}
     .container-wide {max-width: 864px;}
     .container-narrow {max-width: 696px;}     
     
/* Buttons */
.btn-yellow { text-decoration: none; background: #ffd100; color: #000; padding: 7.5px 35px; border-radius: 30px 0px 0px 30px; font-size: 1rem;z-index: 2; right: 0px; position:fixed;}
     .btn-yellow:hover, .btn-yellow:focus {box-shadow:none; }
     

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

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

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

@media (min-width: 0px) {	
     /* Type */
     h1, .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 */
     h1, .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}
}