/* ==========================================================================
     Project:       Sunoco - Landing Page - Partner
     Date:          05/01/25 - File created
     Created by:    Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

/* ==========================================================================
     Type
========================================================================== */
 
:root {
	--muted-blue: #3a559d;
     --light-blue: #e7f1f8;
}

h1 sup {font-size: .875rem; top: -20px}

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

.blockquote-wrapper {height: 700px;}
.blockquote-wrapper blockquote {position: absolute; right: 0px; }
.blockquote-wrapper img {object-position: top center}

.partner-form-wrapper {border-bottom: 30px solid var(--muted-blue)}
.partner-form-wrapper::after {content:""; position: absolute; left: 50%; margin-left: -30px; bottom: -60px; width: 0; height: 0; border-left: 30px solid transparent;border-right: 30px solid transparent; border-top: 30px solid var(--muted-blue);}
.partner-form-wrapper .container:first-child {margin-top: -200px}
.partner-form label {color: var(--muted-blue)}
.partner-form-wrapper .container {max-width: 1000px}

.growth-wrapper .container {max-width: 1000px}

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

/* Text */
.text-muted-blue {color: var(--muted-blue)}

/* Backgrounds */
.bg-muted-blue {background: var(--muted-blue)}
.bg-muted-blue-85 {background: rgba(58,85,157,.85)}
.bg-quote {background: url(/skins/sunoco2024/includes/partner/img/bg-lines.png) repeat; background-size:30%; border-radius: 30px; padding: 30px; display:flex; align-items: center;position: relative;}
.bg-quote::after {content:""; position: absolute; left: 50%; margin-left: -20px; bottom: -20px; width: 0; height: 0; border-left: 20px solid transparent;border-right: 20px solid transparent; border-top: 20px solid var(--light-blue);}

/* Borders */
.rounded-top-xl {border-top-left-radius: 30px; border-top-right-radius: 30px;}

/* ==========================================================================
     CMS
========================================================================== */

.admin-edit a[name="edit"] + .cms-contentmenu {padding-top: 100px;}
.interstitial-wrapper .cms-contentmenu {position: absolute; top: 50%; left: 40px}

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

@media (max-width: 767px) {	
     .blockquote-wrapper blockquote {bottom: 170px; left: 15px; right: 15px; padding: 25px; border-radius: 40px}
}

@media (min-width: 768px) {	
     .blockquote-wrapper blockquote {top: 100px; width: 300px; border-radius: 40px 0px 0px 40px; padding: 25px 25px 25px 30px}
}