@charset "UTF-8"; 

@font-face {
  font-family: 'Bowlby One SC';
  src: url('../fonts/bowlbyonesc-regular.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RACE Stock';
  src: url('../fonts/race-stock.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/worksans-variablefont_wght.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrainsmono-variablefont_wght.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
	--content-width:90rem;
	--padding:50px;
	--padding-sm: calc(var(--padding)/2);
	--ui-pad: 30px;
	--lightgray:#e3e3e3; 
	--gutters:20px;
	--green:#33cc00;
	--greenbright:#1fb058;
	--dark-green: #0A120C;
	--footer-green: #333300;
	--faded-green: #666633;
	--brighter-green: #03CA2D;
	--another-green: #99FE00;
	--ttgreen: var(--green);
	--lime:#d5de40;
	--yellow:#d5de40;
	--white:#ffffff;
	--coolgray:#808084;
	--coolbasic:#bdbec1;
	--dark:#0A120C;
	--color-text:#0b0b15;
	--text-font: 'Sonny Gothic';
	--bold-font:  'Sonny Condensed';
	--condensed-font: 'DIN Cond'; 
	
	--header-font: 'Bowlby One SC';
	--custom-font: 'RACE Stock';
	--alternate-font: 'JetBrains Mono';

	/* finder-filter vars */
	--color-filters-text: #fff;
	--color-hover-filter-text: var(--dark);
	--color-sub-filter: var(--coolgray);
	--color-filter: #ffffff56; 
	--color-slide-filter-chip: var(--coolgray);
	--color-categories-btn: var(--another-green);
	--color-filters-h3: var(--green);
	--color-tire-finder-cta-text: #fff;
	--color-hover-filters-h3: #fff;
	--color-hover-tire-finder-cta: var(--another-green);
	--color-bg-tire-finder-cta:transparent;
	--color-tire-finder-cta: var(--color-categories-btn);
	
	--beige: #F4EFD8;
	--fg-faint: #7A7C7A;
	--primary: 5 85% 52%;
}
@media (min-width: 1400px) {
    body .container {
        max-width: 1400px;
    }
}
.custom-font{font-family: var(--custom-font)!important;}
.alternate-font{font-family: var(--alternate-font)!important;}
.header-font{font-family: var(--header-font)!important;}
.beige{color: var(--beige);}
.primary{color: hsl(var(--primary));}

h1,h2{font-family: 'Bowlby One SC';}
blockquote{
	font-family: var(--custom-font);
	text-align: center;
	color: var(--beige);
	font-size: 2.25rem;
    /*text-transform: uppercase;*/
	border-top: 4px solid hsl(var(--primary));
    border-bottom: 4px solid hsl(var(--primary));
    text-align: center;
    padding: 40px 60px;
    margin: 56px 0;
}
blockquote:before{
	content: "\201C";
    font-family: var(--header-font);
    line-height: 1;
    color: hsl(var(--primary));
    position: relative;
    display: block;
    text-align: center;
    font-size: 80px;
    margin-bottom: -32px;
}
blockquote footer{
	font-family: var(--alternate-font);
	font-size: 14px;
    padding-top: 28px;
}
blockquote footer:before{
	content: '—';
}

.text-section ul{
	margin: 0 0 2rem;
	list-style: disc;
	padding-left: 1rem;
}
.text-section ul li{
	padding-bottom: .8rem;
}
.text-section ul li::marker{
	color: hsl(var(--primary));
}
.text-section p{
	margin-bottom: 1.5rem;
}
.directAnswer p::first-letter{
	font-size: 5rem;
    line-height: 1;
    float: left;
    margin-right: 0.5rem;
    margin-top: -0.8rem;
    font-weight: bold;
	color: hsl(var(--primary));
}
.checkboxes p .first-letter{
	font-size: 4rem;
    font-weight: 900;
    position: absolute;
    left: 0;
    line-height: 1;
    top: -7px;
}
.checkboxes ul{
	list-style: none;
	padding-left: 0;
}
.checkboxes ul li{
	display: flex;
	align-items: center;
	gap: 8px;
}
.checkboxes ul li:before{
	content: "";
	display: block;
	min-width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ed2e1d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}
.checkboxes.square ul li{
	align-items: start;
	gap: 14px;
}
.checkboxes.square ul li:before{
	content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 2px solid hsl(var(--primary));
    background: hsl(var(--primary));
    margin-top: 2px;
    position: relative;
}
.checkboxes.square ul li:after{
	content: "";
    position: absolute;
    margin-left: 5px;
    margin-top: 6px;
    width: 12px;
    height: 6px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
}
.absolute {position: absolute;}
.inset-0 {top: 0;right: 0;bottom: 0;left: 0;}
.z-0 {z-index: 0;}
.star-pattern{
	background-color: rgb(255,102,0,.1);
    -webkit-mask-image: url(../../media/pages/home/6ac66092cc-1779073419/icon_star_pattern.svg);
    mask-image: url(../../media/pages/home/6ac66092cc-1779073419/icon_star_pattern.svg);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 120px;
    mask-size: 120px;
    -webkit-mask-position: center;
    mask-position: center;
}
.prose p{
	margin-bottom: 1rem;
}
.message-container .incoming,chat-message{
	background-color: #FAF1CF;
}
.text-section ol{
	font-family: var(--custom-font);
    list-style: decimal;
	list-style-position: outside;
    padding-left: 18px;
}
.text-section ol li strong{
	font-family: var(--custom-font);
    text-transform: uppercase;
    font-size: 1.2em;
    margin-bottom: .1rem;
    display: block;
	padding-left: 6px;
}


html{
	/*width:100vw;
	max-width:100vw;
	overflow-x:hidden;*/

    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
}
body,body p{
	font-family: 'Work Sans';
	/*font:20px/1.3em var(--text-font);
	font-weight:400;
	font-style:normal;
	color:var(--color-text);
	min-height:100vh;
	width:100vw;
	max-width:100vw;
	overflow-x:hidden;*/
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-webkit-tap-highlight-color:transparent;
	-webkit-background-size:cover;
	background-size:cover;
	background-repeat:no-repeat;
	/*height:100%;
	text-align:left;*/
	transition:none 0s;
	background-attachment:fixed;
}

p{  line-height:1.4em; margin-bottom: 1em; font-family: 'DIN Cond'; }
 
h1{text-transform:uppercase; }

h2, h3, h4{margin-bottom: 1em}

time{font-size:.8em;color:#000!important}
a{color:var(--green); text-decoration:none; }


.white-tint,.white-tint-landing{-webkit-filter:brightness(0) grayscale(100%) contrast(200%) invert(100%);filter:brightness(0) grayscale(100%) contrast(200%) invert(100%)}
.no-margins{ margin:0!important; }

main{ 
    position:relative; 
    /*min-height:100vh; 
    padding-top:120px; 
    width:100vw;*/
    z-index:1; 
    background-size:cover!important
}
.about-tpl main{
	padding-top:0;
	z-index: -1;
}
#mast{ display:block; position: relative; height:0px; z-index: 5;}
 
#primary-identity { color: #000; width:200px; height: auto; position:absolute; display:block;  top:var(--padding); left:var(--padding); display:block; }
#primary-identity a{ color: #000;  width: 100%; height: 100%; position: relative;display: block;transition: all 200ms; }
#primary-identity a:hover{ color:var(--green); }
#primary-identity a svg{ display: block; width: 100%; height: 100%; max-width: 100%; position: relative; }
 
#nav-panel { display:block; position: fixed; top: 0; left: -300px; width: 300px; height: 100%; 
	overflow-x: hidden; transition: 0.4s; overflow-y:scroll;max-height:none; 
	padding : calc(var(--ui-pad) ); background-color: #000000; z-index:99999; }
#nav-panel .identity:hover { opacity: 1; }
#nav-panel .identity{ margin-top:var(--padding); margin-bottom:var(--ui-pad);}
#nav-panel .identity a { color:#fff; opacity:.5; display: block; width: 140px; height: auto; position: relative; transition: all 300ms;}
#nav-panel .identity img { filter: brightness(0) invert(1); }
#nav-panel .identity a:hover{color:#fff; opacity:1}
#nav-panel li a{ font-size:1.2rem; }



/* ***************************************/

#menu-toggle { width: 25px; height: 40px; top: 20px; text-align: left; transform: rotate(0); transition: .5s ease-in-out; cursor: pointer; margin: 0; z-index: 99999999; left: 16px; position: fixed; }
#menu-toggle span { display: block; position: absolute; height: 3px; width: 100%; background: var(--green); opacity: .9; left: 0; transform: rotate(0); transition: .3s ease-in-out; }
#menu-toggle span:nth-child(1) { top: 0; }
#menu-toggle span:nth-child(2) { top: 10px; }
#menu-toggle.active span { opacity: 1; }
#menu-toggle.active span:nth-child(1) { top: 5px; transform: rotate(45deg); }
#menu-toggle.active span:nth-child(2) { top: 5px; width: 100%; transform: rotate(-45deg); }

.menu{position:relative;display:block;padding:0;margin-bottom:var(--ui-pad); }
.menu li{ text-transform:uppercase; position:relative;padding: 5px 8px; font-size:1rem;list-style:none;display:block;color:#fff}
.menu li a{ opacity:1; font-family:var(--bold-font); position:relative;display:block;margin:0;color:#000; line-height:1em;position:relative;margin:0;color:#fff; transition:color .3s }
.menu li.active a,.menu li.is-active a,.menu li:hover a{color:var(--another-green)}
.menu-title{ font-size:.5em; margin-left:8px;display:block; text-transform:uppercase; font-weight: 900; letter-spacing:.12em; opacity: .3; color: #fff; }
.menu:not(1) li a{ opacity: .4; }
.menu-item span{display:inline-block}

.language-switch{position: fixed; right: 10px;}
.language-switch ul{margin: 0; padding: 0; display: flex; list-style: none; gap: 4px;}
.language-switch ul li.icon{margin-bottom: 2px; opacity: .5;}
.language-switch ul li a{border: 2px solid #99FE00; border-radius: 999px; padding: 2px 10px; 
	font-family: 'Sonny Condensed'; text-transform: uppercase; line-height: 1em; font-size: 12px; 
	color: #ccc;
	mix-blend-mode:exclusion;
}
.language-switch ul li a:hover,.language-switch ul li.active a{background:#99FE00; color: #000;}

#nav-panel #secondary-nav a,
#nav-panel #tertiary-nav a{ 
	font-size: 1rem;
	font-family: 'Sonny Gothic';
}
#nav-panel #secondary-nav a{ opacity: .7; }
#nav-panel #tertiary-nav a{ opacity: .5; }
#nav-panel #secondary-nav a:hover,
#nav-panel #tertiary-nav a:hover{
	opacity: 1;
}
/* ***************************************/

.overlay-panel { position: fixed; cursor: pointer; display: block;  transition: .5s ease-in-out; }
.overlay-panel { background-color: #000; color: #fff; top: 0; left: 0; width: 100vw; transition: all .3s ease; overflow-x: hidden; overflow-y: scroll; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 1; opacity: 0; visibility: hidden; height: 100vh; }
.overlay-panel.enabled { visibility: visible; opacity: 1; z-index: 9999999999; }
.overlay-panel>.container { position: relative; background: rgba(24, 24, 24, .8); max-width: 480px; }

.overlay-panel .close, 
.closebutton {
  display: flex;
  transform: rotate(0);
  margin: 0;
  position: fixed;
  top: var(--padding-sm);
  right: var(--padding-sm);
  z-index: 88889;
}

.closebutton {
  display: flex;
  justify-content: center; 
  align-items: center; 
  width: 60px;
  height: 60px;
 
  z-index: 88899;
  animation: 1s ease 0s normal forwards 1 fadein;
}
.closebutton span, .overlay-panel .close span { position: absolute; background: #fff; transition: .3s ease-in-out; }
.closebutton span { height: 2px; width: 50px; }
.closebutton span:nth-child(1) { transform: rotate(45deg); }
.closebutton span:nth-child(2) { transform: rotate(-45deg); }

/* ***************************************/

.page-category-menu { padding: 0; margin-top:1em; position: relative; display: flex; flex-wrap: wrap; list-style: none; font-size: 0.8em; column-gap: 1rem; font-family:"Sonny Condensed"; line-height:1.1em }
.page-category-menu li { display: flex; color: var(--coolgray); text-transform: uppercase; font-weight: 800; cursor: pointer; }
.page-category-menu li:hover, .page-category-menu li.active { color: var(--green); }

 
.page-header h1{color:var(--green);font-size:2.3em;line-height:.9em; } 

.articles .article{padding-bottom:40px;border-bottom: solid 2px #e2e2e236}
.articles .article .thumb{width:140px;height:140px;overflow:hidden;background:var(--green);float:left;z-index:0;margin-right:20px;border:3px solid var(--lime);margin-bottom:20px;text-align:center;position:relative}
.article .pagination{color:var(--coolbasic);width:100%;margin-top:40px;margin-bottom:40px}
 
.articles .article .thumb img{position:absolute;width:100%;height:auto!important;top:50%;left:50%;transform:translate(-50%,-50%)}
.articles .article{margin-bottom:40px!important;display:block;width:100%}
.articles .article h2{padding-top:10px;margin-bottom:10px}
 
.article h2{ text-transform: uppercase; }
 
.bgvid{width:100vw;height:100vh;
	position:absolute;
	display:block;overflow:hidden;
	min-width:100%;min-height:100%;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}
 
.no-mobile{display:none!important;}
.mobile-only{display:block!important;}

.checklist-section {
	border: 2px solid var(--green);
	border-radius: .75rem;
	padding: 1.5rem;
	color: var(--green);
	font-size: 1.2rem;
	width: 100% !important;
}
.checklist-section .title {
	font-size: 1.1em;
	margin-bottom: 1em;
	font-family: 'Sonny Condensed';
	color: vaR(--green);
}
.checklist-section li {
	display: flex;
	align-items: start;
	gap: 0.75rem;
	list-style: none;
	margin-bottom: 0.5rem;
	transition: color 0.2s;
	-webkit-user-select: none;
	user-select: none;
	max-width: 80ch;
}
.checklist-section li:hover {
	color: #000;
}
.checklist-section li:before {
	content: '';
	flex-shrink: 0;
	width: 1.2em;
	height: 1.2em;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2333cc00'%3e%3cpath d='M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z'/%3e%3c/svg%3e");
	background-size: contain;
	background-repeat: no-repeat;
	margin-top: .2em;
}

@media (min-width:48rem){ 
	.no-mobile{display:block!important;}
	.mobile-only{display:none!important;}
}
 
#site-footer{ background-color: var(--footer-green); color:#fff; position:relative;margin:0;  }
#site-footer a{color:var(--faded-green);  font-size: .8em;}
#site-footer a:hover{color:var(--another-green); }
#site-footer .menus{ display: flex; flex-direction: column; }
#site-footer .social{ text-align: right; z-index: 1; display: flex; justify-content: flex-end; column-gap: 12px; }
#site-footer .social svg:hover path{ fill: var(--another-green); }

@media (min-width:500px){ 
	#site-footer .menus{ display: flex; gap: var(--ui-pad); flex-direction: row; }
}
 

/* ***************************************/
 
#size-select ul,
#wheelsize-search-btn ul{list-style:none;margin:0!important;padding:0!important}
#wheelsize-search-btn ul{margin-bottom:30px!important}
#wheelsize-search-btn strong{font-size:.5em!important;line-height:1em}
#wheelsize-search-btn li,#wheelsize-search-btn strong{padding:2px 8px!important}
#wheelsize-search-btn .foundtires{margin-right:5px;margin-left:5px;margin-bottom:40px}

.feature figure,.feature figure img,.panel,.panel .bg img{margin:0;padding:0;width:100%;position:relative;display:block}
.feature figure figcaption,.panel .overcontent{display:block;position:absolute;top:0;left:0;z-index:20;float:left;height:100%}
 
.panel{padding-bottom:30px}
.panel header h1,.panel header h2{font-weight:400;font-style:normal;font-variant:normal;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}

#tires-panel .tire figure img{padding:0;margin:0;position:relative;height:35vw ;overflow:hidden}

.button{background:var(--green) }
.centered{display:table;margin:0 auto}
.footerimg img{width:100%;max-width:100%}
.footerimg{position:relative;margin:-150px 0 0;display:block;padding:0;z-index:999}
#product-detail{margin-bottom:80px}

#sizes-tab table{font-size:.8em;color:#000;width:100%; max-width:100%;font-family:'DIN Cond Bold';margin-top:10px}
#sizes-tab td,#sizes-tab th{padding:12px}
#sizes-tab th{padding-bottom:20px;padding-top:25px}
#sizes-tab thead th{background-color:var(--green);text-align:center;line-height:1em;color:#000;font-size:.9em}
#sizes-tab tr,.sizeitem{border-bottom:1px solid rgba(0,0,0,.2)}
#sizes-tab td,.sizeitem td{text-align:center;border-right:1px solid rgba(0,0,0,.2)}
#sizes-tab td:last-child,.sizeitem td:last-child{border-right:none}

.sizes-toggle{color:var(--green);font-size:3em;border-bottom:2px solid var(--green);letter-spacing:-.04em;padding-bottom:10px;margin-bottom:10px}
.sizeitem input{text-align:center;font-size:.9em}
.sizeitem button{margin:0;padding-top:10px;padding-bottom:10px;font-size:1em;font-weight:700}
.sizeitem td{background-color:#fff}



.white{color:var(--white)!important}

 
.idrive{margin-right:auto;margin-left:auto;max-width:250px;text-transform:uppercase}
.hero-image{z-index:2;padding:40px 40px 0;margin-bottom:0}
.hero-box{background-color:#000;color:#fff;padding:10px 10px 10px 150px;position:relative;display:block;margin-top:80px;margin-bottom:40px;margin-left:-150px;max-width:300px;min-height:220px}

#product-header{transform:scale(.65);transform-origin:top left;margin:0;margin-left: 1em;position:relative;display:block;padding:0}
#product-header figure{max-width:30vw;z-index:10;display:block;opacity:.8;margin:0;padding:0;position:relative}
#product-header .title-tag{display:block;z-index:400;color:#222;font-size:4em;text-transform:uppercase;line-height:.8em;margin-bottom:-60px;max-width:500px;min-height:160px;max-height:160px;right:0;left:0;transform-origin:top left}

.title-tag .tiny{font-family:"Sonny Gothic";font-size:.7em;margin-left:-.4em}
.title-tag .tiny.empty{margin-left:0}
.title-tag .tiny.align-left{margin-left:0}

#DealerMap{min-height:50vh}
#DealerMap .inner{padding-top:0;padding-bottom:0;margin:0}


.locator-form input,.locator-form select{border:1px solid #333!important;color:var(--green)!important}
.locator-form #searchButton{background-color:var(--green)!important;border:none!important;width:100%;color:#fff!important;border:none!important;border-top-style:none;border-right-style:none;border-left-style:none;font-size:20px;padding:10px;border-radius:0!important}
.hscroll{overflow-x:scroll;overflow-y:hidden}

#primary-menu{padding-top:20px} 
#search-menu a:hover{ color: var(--green)}
.page-header{margin-bottom:40px}
 

.hscrollwrapper{overflow-y:hidden;overflow-x:scroll}
.search-item{margin:0;padding:5px 0;clear:both;min-height:38px;border-top:1px solid rgba(255,255,255,.2);line-height:38px}
.search-item:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
.search-item figure{position:relative;display:block;height:38px}
#nav-panel .search-item-title{display:block;line-height:38px}
#finder-results .inner{padding-top:0}

 

.article-header h2{margin-top:0}
time{font-size:.8em;color:#000!important;opacity:.5}
 


.default-tpl main{margin-top:0!important;padding:0;height:100%;max-height:100%}
.default-tpl .page-header{padding-top:120px}
a.phone{font:2em/1em ;color:var(--green);margin-bottom:0}



.tire-entry.inactive{opacity:.3;pointer-events:none}
.tire-entry{margin-bottom:30px;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out}
 

.about-tpl .main,.about-tpl main,.default-tpl .main,.default-tpl main, 
.about-tpl .panel,.default-tpl .panel {min-height:100vh}

.default-tpl .panel p {max-width:48rem}

.default-tpl .panel:first-child,.tire-sponsorship .panel:first-child{padding-top:120px;background:rgba(255,255,255,.98);height:100%}



form.mailchimpform{text-align:center;padding:2rem}


.gallery-entry h2{max-width:none!important}
.gallery-table-display figure{max-height:100vh;max-width:100vw}
.gallery-table-display figure img{margin:0 auto;padding:0;position:relative}
.overlay-slider{width:100vw;height:100vh;margin:0;padding:0}
 


.default-tpl .panel:first-child{padding-top:0}
.icon{position:relative;display:inline-block;margin-right:5px;margin-bottom:5px;max-width:34px}
.slides iframe{margin-top:40px;max-width:100%}

.video-container{position:relative; aspect-ratio: 16 / 9 ; height:0;overflow:hidden;width: 100%; max-width:100%; max-height: 80vh;}
.video-container embed,.video-container iframe,.video-container object{position:absolute;top:0;left:0;width:100%;height:100%; max-height: 80vh;}
.iframe{height:100vh;max-height:100vh;width:auto;min-width:100vw}
.video {
    display: block;
    width: 100%;
    margin: 0;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hpanel figcaption{display:block;position:absolute;left:0;bottom:0;float:left;z-index:1;font-size:.8em;color:#fff;padding:10px 10px 10px 15px;margin:0;line-height:1em}


.menu a{font-size:.8em;line-height:1em}


#tertiary-menu .menu a{font-size:.7em ;line-height:1em;opacity:.8;border:0;background:0 0;color:#fff;text-transform:uppercase;font-weight:400;padding-top:0}


.footer-content{font-size:.8em;line-height:1em;margin-top:60px;opacity:.6;max-width:400px}
.footer-content p{margin-bottom:5px}

hr{border-style:none;border-bottom:1px solid rgba(34,34,34,.17);margin-top:40px;margin-bottom:40px}
.bordered img{border:3px solid var(--green)}
.panel h1,.panel h2,.panel h3,.panel p{max-width:48rem}
.panel h3{line-height:1.1em}
#brand-influencer-list{min-height:30vh}
#brand-influencer-list li,#brand-influencer-list ul{margin:0;padding:0;list-style:none;display:block;position:relative}
#brand-influencer-list li{display:block;position:relative;color:#fff;padding:20px;height:100px;margin-bottom:2px;background-color:var(--green);text-transform:uppercase}
#brand-influencer-list li a{color:#fff;display:block}
#brand-influencer-list li figure{margin:0;padding:0;display:block;position:absolute;top:0;right:0;float:right}
#brand-influencer-list li figure img{display:block;margin:0;padding:0}
#brand-influencer-list li:hover{background-color:var(--dark)}
.influencers-tpl{-webkit-background-size:cover!important;-moz-background-size:cover!important;-o-background-size:cover!important;background-size:cover!important;background-repeat:no-repeat}
#overlaycontent h4{font-size:1.4em;text-align:center;line-height:1.2em;margin:0 0 16px;text-transform:uppercase;color:var(--green);font-family:"Sonny Gothic"}
#overlaycontent label{color:#fff;font-size:1em}
#overlaycontent input[type=submit],#overlaycontent input[type=submit].button{margin-top:0;font-size:16px;letter-spacing:1px;padding:10px 20px 8px;font-family:"Sonny Gothic";font-weight:600;border:0;width:100%}
#overlaycontent input[type=email]{margin-bottom:6px;font-family:"Sonny Gothic";font-size:14px;width:100%;padding:8px 10px}
#js-subscribe-response{text-align:center;font-family:"Sonny Condensed";text-transform:uppercase;font-size:1.2em}
.pony-cars header,.socal-tires-x-delinte header{display:none}
.yt-embed-container{position:relative;padding-bottom:28.6%;height:0;overflow:hidden;max-width:1080px}
.yt-embed-container embed,.yt-embed-container iframe,.yt-embed-container object{position:absolute;top:0;left:0;width:100%;height:100%}
.size-section table thead tr th span{text-transform:lowercase}
.landing-bandit-tpl main{background:url(/media/pages/dx20-bandit-cuv-suv/6b5f9a341e-1664978799/bandit-crossover-background-1.webp) no-repeat}
.landing-bandit-tpl #callout{position:absolute;right:0;font-family:'DIN Cond Bold';color:#9f3;background:#000;padding:8px 36px 8px 12px}
.landing-bandit-tpl .row .panel{padding:15% 10%}
.landing-bandit-tpl img.bandit-logo{max-width:90%}
.landing-bandit-tpl .row.made-for-this{max-width:80%;margin:24% auto 120%;color:#fff}
.landing-bandit-tpl .btn.green{width:94%;text-align:center;display:inline-block;background:#9f3;color:#000;font-family:'DIN Cond Bold';padding:18px;font-size:1.4em;letter-spacing:1px;margin:30px auto}
.landing-bandit-tpl .btn.green:hover{opacity:.8}
.landing-bandit-tpl .btn-wrapper{padding-top:4%;max-width:90%;margin:0 auto}
.landing-bandit-tpl .btn-wrapper p{margin-bottom:1.4em}
.landing-bandit-tpl .btn-wrapper a{border:2px solid #e3e3e5;width:90%;display:block;text-align:center;padding:20px;font-size:1.3em;background:rgb(12 11 15 / 50%);transition:opacity .3s}
.landing-bandit-tpl .btn-wrapper a:hover{background:rgb(12 11 15 / 70%)}
.landing-bandit-tpl .cta-green{background:rgba(144,255,45,.7);width:90%;margin:20% auto;text-align:center;padding:5%}
.landing-bandit-tpl .cta-green p.subtitle{font-family:'DIN Cond Bold';font-size:1.4em;margin-top:10px;border-bottom:1px solid;display:inline-block;line-height:normal}
.landing-bandit-tpl .panel h2,.landing-bandit-tpl .panel p{max-width:none}
.landing-bandit-tpl .panel h2{font-size:3em;margin-bottom:1%;margin-top:3%}
.landing-bandit-tpl .panel p.subtitle{font-family:'DIN Cond Bold';font-size:1.4em;margin-top:10px;border-bottom:1px solid;display:inline-block;line-height:normal;display:none}
.landing-bandit-tpl .panel p.subtitle:hover{border-bottom:2px solid}
.landing-bandit-tpl .panel p.subtitle a{color:#000}
.mt-0{margin-top:0}
.mb-15{margin-bottom:1.5em}
a.btn-white{background:#000;color:#fff;font-family:'DIN Cond Bold';padding:12px 36px;margin-top:16px;display:inline-block;border:2px solid #000}
a.btn-white:hover{background:0 0;color:#000}
.landing-bandit-tpl .mobile-only{display:none}
.blog-article-tpl blockquote{font-size:3.4em;line-height:1.3em;margin-top:0;margin-bottom:0;font-family:"Sonny Gothic"}
.blog-article-tpl blockquote footer{font-style:italic;font-size:.6em;padding-left:10px}
 
a.btn{color:#fff!important;background-color:var(--green);padding:8px 20px 6px;max-width:400px}
a.center{display:block;margin:auto;text-align:center}

a.btn.btn--primary.merch{font-family: 'Sonny Gothic';font-weight: 900;padding: 0.75rem var(--space-sm);color: #000;font-size: 1em;background-color: var(--green);text-transform: uppercase;border: 0;line-height: normal;}
a.btn.btn--primary.merch:hover {background: #000;color: #fff;}


@media (max-width:980px){
.blog-article-tpl blockquote{font-size:1.4em}
.blog-article-tpl .sections .inner{padding:40px 10px}
.landing-bandit-tpl main{background:url(/media/pages/dx20-bandit-cuv-suv/ec0ce1c6d2-1665080191/bandit-mobile-background.webp) no-repeat;background-position-x:50%}
.yt-embed-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:1080px}
.inner.video{padding:10px}
.landing-bandit-tpl .row .panel{padding:15% 0}
.landing-bandit-tpl .row.made-for-this{max-width:none;margin:24% auto 40%}
.landing-bandit-tpl .row.made-for-this img{max-width:86%;margin:0 auto}
.landing-bandit-tpl .panel h2{font-size:2.4em}
.landing-bandit-tpl .btn-wrapper a{width:100%;padding:20px 0;font-size:1em}
.landing-bandit-tpl .mobile-only{display:block;max-width:96%;margin:40% auto 40%}
blockquote{padding: 40px 20px;}
#site-footer .social{justify-content: flex-start;margin-top: 12px;}
}
 

@media (min-width:48rem){
	.event-name{display:flex;align-items:center}
	.event-name span{margin-bottom:20px;padding-right:12px}
	.panel-one,.panel-two{height:100vh;width:50vw;position:relative;display:block;margin:0;padding:0;-webkit-background-size:cover!important;-moz-background-size:cover!important;-o-background-size:cover!important;background-size:cover!important}

	#product-header{transform:scale(.7)}
	.home .panel li a{font-size:2em}
	.home .panel ul,.idrive{max-width:300px}
	.hpanel iframe{height:100vh;max-height:100vh;width:auto;min-width:50vw}
	.menu a{font-size:1em;line-height:1em}
 
}


.tire-features a{position:relative;display:block}


#search-widget iframe{width:100%;height:100vh;border:none}


#nav-panel-extender::-webkit-scrollbar,#nav-panel::-webkit-scrollbar,#search-widget iframe::-webkit-scrollbar{display:none}
#nav-panel-extender,#search-widget,#search-widget iframe{-ms-overflow-style:none}



.dealer-entry{font-size:.8em;line-height:1.1em}
.location-directions{padding:4px 0;display:block}
.dealer-entry a{margin:0}
.dealer-entry h3{font-size:1.1em}
.article-tpl .sections figure,.article-tpl .sections img,.article-tpl .thumb,.article-tpl .thumb img{width:100%;height:auto;max-width:200%;text-align:center;display:block;margin:0}
.article-tpl .sections .inset figure{display:inline-block;width:auto}
.article-tpl .sections .inset{width:auto;display:inline}
.article-tpl .sections .inset figure img{max-width:60%;display:-block;margin-left:auto;margin-right:0}
@media (max-width:48rem){
.article-tpl .sections .inset figure img{display:block;margin-left:auto;margin-right:auto}
}


 
.tooltip{box-shadow:var(--shadow-md);border-radius: var(--radius-md);position:fixed;background:var(--ttgreen);max-width:200px;line-height:1.5;padding:15px;font-family:'DIN Cond';font-size:1rem; line-height: 1.3em; display:block;color:#fff;transition:transform .2s ease-out;transform:translateY(-100%) scale(0);transform-origin:bottom left;z-index:999999999}
.tooltip:before{content:" ";width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--ttgreen);position:absolute;bottom:-5px;left:25px}
.tooltip span{font-weight:900; display: block;}
.is-inactive{opacity:.2}
.pagination{font-size:2em}
.back-cta,.back-cta a{text-transform:uppercase}




.location-address a{display:block;margin-top:12px!important;margin-bottom:-12px!important}
.gm-style-iw-d .location-address a{margin-bottom:-16px!important}



 
.tire-filter-finder .text-with-shadow{text-shadow:1px 1px 2px rgba(0,0,0,.3)}
.tire-filter-finder .tire-categories{display:flex; margin-bottom:var(--space-sm)}
.tire-filter-finder .tire-categories button{ 
	display:flex;
	text-transform:uppercase;
	font-size:1.6em; 
	font-family: var(--bold-font);
	color: var(--color-categories-btn);
	transition:all .2s;
	letter-spacing:.04em;background-color:transparent;
	border:0;outline:0;cursor:pointer;
	justify-content:space-around;
}

.tire-filter-finder .tire-categories button.active,.tire-filter-finder .tire-categories button:hover{
	color:var(--color-hover-categories-btn)
}
.tire-filter-finder .tab-content{display:none;transition:all .3s;margin-bottom:var(--space-sm)}
.tire-filter-finder .tab-content.active{display:block}
.tireSwiper{min-height:30vh;display:flex}
.tireSwiper h3{ font-size:1.2em; white-space: break-space; line-height: 1em; color:var(--color-filters-h3); text-transform: uppercase;}
.tireSwiper .slide{margin:0;display:flex;flex-direction:column;height:100%;min-height:30vh}
.tireSwiper .slide img{user-select:none}
.filters li{width:20%}

 

.tireSwiper .slide:hover h3{
color: var(--color-hover-filters-h3)
}
.slide-content{min-height:100px;user-select:none}

.slide:hover .chip{
	color:var(--color-hover-filter-text); 
	line-height: 1em;
	opacity:1;
	background-color:var(--color-hover-tire-finder-cta)
}
.slide:hover .tire-cta{
	color:var(--color-hover-filter-text); 
	outline-color: var(--color-hover-tire-finder-cta);
	box-shadow: 0 0 0 2px var(--color-hover-tire-finder-cta);
}

.tire-cta{
	font-family: 'Sonny Condensed';
	text-transform: uppercase;
	line-height: 1em;
	color: var(--color-tire-finder-cta-text)
}


.disabled{opacity:.3;pointer-events:none}
 
.mobile-filters {
box-shadow: 0 0 0 2px var(--color-filter);
  border-radius: 999rem;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: .5em 2em;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  background-color: var(--color-filter);
  transition: all .3s;
  color: #fff;
  margin-bottom: 1em;
  position: relative;
  text-align: center;
  font-family: 'Sonny Condensed';
  
}

.mobile-filters::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #fff;
  pointer-events: none;
  z-index: 1;
}

.mobile-filters:hover {
 	box-shadow: 0 0 0 2px var(--color-categories-btn);
}

.mobile-filters::-ms-expand {
  display: none;
}

.mobile-filters option {
  background-color: var(--dark);
}

.mobile-filters option:hover {
  color: var(--dark);
  background-color: var(--another-green);
}

.mobile-filters {
  display: none;
}

@media (max-width:64rem){
.slide-content{min-height:0;user-select:none;margin-bottom:1em}
.tire-filter-chip{font-size:.6em}
.filters,.sub-filters{flex-wrap:wrap}
.filters li,.sub-filters li{display:flex;width:calc(33.333% - var(--space-xxxs))}
}

@media (max-width:48rem){

.tire-filter-finder .tire-categories{gap:1em}
.tire-filter-finder .tire-categories button{font-size:.8em;line-height:1em}

.desktop-filters{display:none}
.mobile-filters{display:block;position:relative}
.desktop-filters{display:none!important}
 
.filters{flex-wrap:wrap; }
.filters li{display:flex;width:calc(50% - var(--space-xxxs))}

.tire-cta{
	font-size: var(--text-xs);
	line-height: 1em;
}
.tire-cta .chip__label{
	font-size: var(--text-xs);
	line-height: 1em;
}
}

@media (max-width:34rem){
.tire-filter-finder .tire-categories{gap:1em; display: block; margin-bottom: 2rem;}
.tire-filter-finder .tire-categories button{
	font-size:1rem;line-height:1em;
	display: block;margin-bottom: .5rem;
	text-align: center;
	width: 100%;
	box-shadow: 0 0 0 2px  var(--another-green);
	border-radius: 9999rem;
	padding: 10px;
}}

.chip__label{
	width: 100%; text-align: center;
} 
.tire-filter-finder .chip{
	box-shadow: 0 0 0 2px var(--color-tire-finder-cta);
	border-radius: 9999rem
	
} 
.slide .chip__label{
	line-height: 1em;
}  
.slide .chip{
	background-color: var(--color-bg-tire-finder-cta);
}
.tire-filter-finder .filters .chip{
	box-shadow: 0 0 0 2px var(--color-filter); 
}
.filter-btn{margin:0;width:100%;overflow:hidden;cursor:pointer;color:var(--color-text);background-color:transparent;
	box-shadow: 0 0 0 2px var(--color-filter);text-transform:uppercase;font-weight:400;margin-bottom:5px}
.filter-btn .chip__label{font-size:.7rem;line-height:1em;white-space:nowrap;text-align:center;margin:auto;padding:.3em;font-family:'Sonny Condensed';
	 text-transform:uppercase;  color:var(--color-text)}
.filter-btn input[type=checkbox]{position:absolute;width:1px!important;height:1px!important;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.filter-btn.active,.filter-btn:hover{background-color:var(--color-filter);	box-shadow: 0 0 0 2px var(--color-filter)}
.filter-btn.active .chip__label,.filter-btn:hover .chip__label{color:var(--color-filters-text)}

.filter-btn.sub{background-color:transparent; 	box-shadow: 0 0 0 2px var(--color-sub-filter)}
.filter-btn.sub.active,.filter-btn.sub:hover{color: var(--color-hover-filter-text); background-color:var(--color-sub-filter)}
.filter-btn.sub:hover,.sub-filters .chip:active{background-color:var(--color-sub-filter); 
	color:var(--color-hover-filter-text)}
 
.filter-bg{background-color:var(--color-filter)}

.sub-filter-bg{ background-color:var(--color-sub-filter)}
.tireSwiper .smartway{ opacity:.4; filter: invert(1); max-width:90px;margin-top:0;margin-left:auto;margin-right:auto; }
 

 
.tiny-text{
	display: block;
	font-size: .7em; 
	opacity: .5;
	font-family: 'Sonny Condensed';
}


input, .map-controls input[type='text']{
	font-size: 1rem;
  	padding: 0;
  	line-height: 1em;
  	padding: calc(var(--padding)/2) calc(var(--padding)/2);
 	background-color: transparent;
  	outline: 0;
  	border-bottom: 2px solid #000;
}

 
select{
    background-color:rgba(0,0,0,0); 
	border:0;border-radius:0;color:inherit;line-height:inherit;
    line-height:1.1;
	box-shadow: 0;
	transition:all .2s ease; 
	min-height:calc(1.2em + 1rem); 
	 	padding:calc(var(--padding)/4)  calc(var(--padding)/4)  ;
	border-bottom: 2px solid #000000 ; 
    cursor: pointer; 
	font-size: 1rem;
} 

input[type=text], 
.map-controls select, 
.map-controls input{
	font-size: 1rem;
  	padding: 0;
  	line-height: 1em;
 	padding:calc(var(--padding)/4)  calc(var(--padding)/4)  ;
  	background-color: transparent;
 	outline: 0;
  	border: 0 !important;
  	border-bottom: 2px solid #000!important;
}

input[type="range"]{
	border-bottom:0!important;
}
textarea {
	border: 2px solid var(--dark);
	padding: calc(var(--padding)/3);
	
} 
.btn--primary{
	background-color: var(--green);
	border: 3px solid var(--green);
	border-radius: 9999em;
	color: #fff !important;
    font-family: var(--bold-font);
    letter-spacing: .05em;
    padding-left: calc(var(--size) * 4)!important;
    padding-right: calc(var(--size) * 4)!important;
	text-transform: uppercase;
}
.btn--primary:hover{
	background: #fff;
    
    color: var(--green)!important;
}

.form-section {
	position: relative;
	max-width: 100%;
        margin-bottom: 1rem;
        gap: var(--space-xxs);
    }
.form-section .flex{
    width: 100%;
}
.form-section label{
	display: block;
	margin-bottom:0; 
	opacity: .5;
}
    @media (max-width: 48rem) {
        .form-section {
            flex-direction: column;
        }
    }
.form-section .btn{
	position: relative;
	display: block;
}


.mce_inline_error{
	position: absolute;
	font-family: 'Sonny Condensed';
	margin-top: .5em;
	color: tomato!important;
}

/* mailchimp -- oof */
#mc-embedded-subscribe-form .mce_inline_error,
#mc-embedded-subscribe-form h4{ font-family:"Sonny Gothic"; font-weight:100;font-size:.7em; line-height: 1.3em;}
#mc-embedded-subscribe-form h4{color:var(--another-green)!important}
#mc-embedded-subscribe-form input[type=email]{
	padding: calc(var(--ui-pad)/4);
	font-size: 1rem;
	color: #fff;
	background-color: transparent;
	border-bottom: 2px solid var(--another-green) ;
	position: relative;
	display: flex;
	margin:0;
}

#mc-embedded-subscribe-form  .email-underlined{
		border-bottom: 2px solid var(--another-green) ;
	
}
 
#mc-embedded-subscribe-form .btn{ 
	padding: calc(var(--ui-pad)/4);
	font-size:.8rem;
	background-color: transparent;
	color: var(--another-green) ;
	margin-left: auto;
	display: flex;
	align-self: flex-start;
	margin:0;
	text-transform: uppercase;
	font-family:"Sonny Condensed"; 
}
 #mc-embedded-subscribe-form .btn:hover{
	color:#fff;
 }
#mce-success-response{font-family:"Sonny Gothic";font-size:.7em!important;line-height:1.3em;opacity:.8;padding-right:8px;padding-left:8px;color:var(--green);text-transform:uppercase;margin-top:10px}

#site-footer ul{
	display: flex;
	flex-direction: column;
	min-width: 140px;
	margin-bottom: 1rem;
}

#site-footer .tagline{
	color: var(--another-green);
	font-size: 4vw;
	line-height: .8em;
	user-select: none;
}

@media (max-width:48rem) {
	#site-footer .tagline{ 
	font-size: 9vw;
	line-height: .8em;
	user-select: none;
	margin-bottom: 1em;
	display: block;
	}
}

#site-footer .tagline span{
	font-family: 'Sonny Condensed';
	display: block;
	margin:0;
}

#site-footer input::placeholder {
    color: var(--faded-green); 
    opacity: 1;font-family: 'Sonny Condensed';
	text-transform: uppercase;
	font-size: .8em;
}

#site-footer  input:-ms-input-placeholder {
    color: var(--faded-green); font-family: 'Sonny Condensed';
	text-transform: uppercase;
	font-size: .8em;
}

section{
	z-index: 2;
	position: relative;
}

.overlay-lines{
	background-repeat: no-repeat;
	background-image: url(../images/lines-overlay.png);
	background-position: right;
	background-size: 50%;
	user-select: none;
	right:0;
	width:100vw;
	pointer-events: none;
	height: 200%;
	position: fixed; 
	top:-150vh; 
	z-index: 1;
	opacity: .4;

}
.full-width,
.full-width img{
	width: 100%;
}


.tire-filter-chip{
	font-size:var(--text-xs);
 	font-family: 'Sonny Condensed';
	text-transform: uppercase;
	line-height:1.3em;
	color:#fff;
	padding:.5em .3em; 
	text-align:center;
	display:block;
	border-radius:99999rem;
	margin-bottom:.5em; 
}


.responsive-iframe-container {
  width: 100%;
  aspect-ratio: 16 / 9; 
    display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ui-pad);
	margin-top: 4vh;
}
 
.responsive-iframe {
  width: 100%;
  height: 100%;
}

/*.hidden{
	opacity:0;
}*/
.video-section {
    width: 100%;
    height: 100%;
    display: flex;
    justify-items: center;
    justify-content: center;
    margin: 0;
    position: relative;
	cursor: pointer;
}
 
.video-section img{
	display: block;
	width: 100%;
	height: 100%;
}
.overlay-action{
		display: flex;
	z-index: 1;
	position: absolute; 
	right: var(--space-md);
	bottom: var(--space-md);
}
.play-arrow{ 
	display: flex;
	position: relative;
	color: var(--another-green);
	width: 100%;
	height: 100%;
 	max-width: 14vw;
	max-height: 14vw;
	min-width: 80px;
	min-height: 80px;  
}
.play-arrow #inner{
	opacity: 0;
}

.play-arrow:hover #inner{
	opacity: 1;
	color: var(--another-green);
}

 
.play-arrow svg{
	display: block;
 	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}

.pagination-item {
 opacity:.5;
}
.pagination-item:hover  {
 opacity: 1;
}