/* ==========================================================================
     Project:     Sunoco Race Jugs
     Date:        11/19/2025 - File created	
     Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

:root{
	--yellow: #ffff00;
	--light-blue: rgb(0, 160, 252);
	--dark-blue: #0041a3;
	--white: #fff;
	--black: #000;
}

/* ==========================================================================
     Typograpy
========================================================================== */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 500;}
body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
h1


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

html {scroll-behavior: smooth;}
html, body {height: 100%;margin: 0;display: flex;flex-direction: column;}
main{flex: 1;}

/* Header */
.header-wrapper, .footer-wrapper {background-image: linear-gradient(90deg, var(--light-blue), var(--dark-blue));}

/* Header Menu */
.mainmenu li a, .mobile-menu li a {color: var(--yellow); font-family: 'Times New Roman', Times, serif;font-size: 1.25rem;font-weight: bold; padding: 0px 8px 0px 8px}
.mobile-menu li {padding: 8px 0px 8px 0px;}

/* Footer */
footer {color: var(--white);}
footer .copyright {font-size: 0.875rem;}

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

/* Images */
img {max-width: 100%; height: auto}
.img-fit {object-fit: cover; object-position: center center; width: 100%; height: 100%;}

/* Off Canvas Toggle */
.navbar-toggler i{color: var(--yellow);}

/* Slideshows */
.hero-slideshow {max-height: 325px; overflow: hidden; position: relative;}
.hero-slideshow .slick-slide {display: flex; justify-content: center; align-items: center;}
.hero-slideshow .item img {width: auto; height: auto; max-height: 100%; max-width: 100%; object-fit: contain ; object-position: center center; display: block;}

.slick-dots { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); list-style: none; padding: 0; margin: 0; text-align: center; z-index: 2; }
.slick-dots li { display: inline-block; margin: 0 8px; }
.slick-dots button { border: none; background: rgba(0,160,252,.33); width: 10px; height: 10px; border-radius: 50%; padding: 0; }
.slick-dots .slick-active button { background: var(--dark-blue); }
.slick-prev, .slick-next { z-index: 1; background: none; padding: 0px; border: none; width: 35px; height: 35px; overflow:hidden; position: absolute; top: 50%; transform: translateY(-50%)}
.slick-controls .angle {display:none !important;}
.slick-prev::after, .slick-next::after {content:""; border: 1px solid var(--dark-blue); border-width: 0px 0px 6px 6px; width: 20px; height:20px; display:block; opacity: .6;}
.slick-prev:hover::after, .slick-next:hover::after {opacity: 1;}
.slick-prev::after {-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);transform: rotate(45deg);margin-left: 12px;}
.slick-next::after {-webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg);transform: rotate(-135deg);margin-left: 3px;}

/* Cookie Banner */
.cookie-wrapper {position: fixed; bottom: 0px; left: 0px; right: 0px; margin: auto; width: 100%; color: var(--white); z-index: 9999;}
.cookie-wrapper .btn-sm{padding: .25rem .5rem; font-size: .875rem; line-height: 1.5; border-radius: 0rem;}
.cookie-privacy {font-size: .875rem;}
.cookie-choice a {font-size: .875rem;}
.cookie-choice .list-inline-item, .cookie-choice-expand .list-inline-item {margin-right: 0px !important;}
.cookie-choice-expand {height: 575px; max-height: 575px; font-size: .875rem;}
.cookie-choice-expand.show {overflow-y: auto; overflow-x: hidden;}
.btn-close-cookie {text-decoration: none;}
.form-check-input[disabled]~.form-check-label {color:var(--grey)}
.form-check-input {position: absolute;margin-top: .3rem !important;margin-left: -1.25rem !important;}

/* Classes */
.bg-blue {background-color: var(--dark-blue);}

.text-white {color: var(--white);}

.btn-white { border:none; text-decoration:none; border: none; border-radius: 0px; text-align:center; font-weight:700;  text-transform: uppercase; background:none; box-shadow: none;}

.btn-white {background:var(--white); color: var(--dark-blue)}
	.btn-white:hover, .btn-white:focus, .btn-white.active {background:var(--light-blue); color: var(--white);}


@media (min-width: 0px) {
	.slick-prev {left: 5%; z-index: 1;}
	.slick-next {right: 5%; z-index: 0;}
}

@media (min-width: 768px) {
}


@media (min-width: 992px) {
	.slick-prev {left: 25%; z-index: 1;}
	.slick-next {right: 25%; z-index: 0;}
}