Backup

CHECK OUT OUR DEALS!!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />

<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>Selected Product</h1>
</div>

<div class="container tabs-btn">

<button class="myanchor tablink w3-red" id="step_1" onclick="openCity(event,'helmets')">Helmets</button>
<button class="myanchor tablink" id="step_2" onclick="openCity(event,'gloves')">Gloves</button>
<button class="myanchor tablink" id="step_3" onclick="openCity(event,'gerseys')">Gerseys</button>

<button class="myanchor tablink" id="step_4" onclick="openCity(event,'googles')">Googles</button>
<button class="myanchor tablink" id="step_5" onclick="openCity(event,'pents')">Pents</button>
<button class="myanchor tablink" id="step_6" onclick="openCity(event,'boots')">Boots</button>



</div>

<div id="helmets" class="w3-container w3-border city">
<br>
<h3 class="head3"> Product Type</h3>

{% assign count = 0 %}

{% for product in collections.Helmets.products %}

{% if count == 0 %}

<div class="box-area">

{% endif %}

{% if count == 3 or count == 6 or count == 9 or count == 12 or count == 15 or count == 18 or count == 21 or count == 24 or count == 27 or count == 30 %}

<div class="box-area disabled">

{% endif %}

{% include 'bundle-product', sidebar: sidebar %}

{% if count == 2 or count == 5 or count == 8 or count == 11 or count == 14 or count == 17 or count == 20 or count == 23 or count == 26 or count == 29 or count == 32 %}

</div>

{% endif %}

{% assign count = count | plus: 1 %}

{% endfor %}

<br>

</div>
</div> 

<div id="gloves" class="w3-container w3-border city" style="display:none">

<h3 class="head3"> Product Type</h3>
<br>

<div class="box-area disabled">

<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text 4</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>

<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text 5</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>

<div class="single-box">
<div class="img-area">
</div>

<div class="img-text">
<span class="my-text"><strong>Text 6</strong></span>

</div>

<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>

</div>
<br>

</div> 

<div id="gerseys" class="w3-container w3-border city" style="display:none">

<h3 class="head3"> Product Type</h3>
<br>

<div class="box-area">
<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text 1</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>
<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text 2</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>

<div class="single-box">
<div class="img-area">
</div>

<div class="img-text">
<span class="my-text"><strong>Text 3</strong></span>

</div>

<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>
</div>
<div class="box-area disabled">
<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text 4</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>
<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text 5</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>

<div class="single-box">
<div class="img-area">
</div>

<div class="img-text">
<span class="my-text"><strong>Text 6</strong></span>

</div>

<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>
</div>
<br>

</div> 

<div id="googles" class="w3-container w3-border city" style="display:none">

<h3 class="head3"> Product Type</h3>
<br>

<div class="box-area">
<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>

<div class="single-box">
<div class="img-area">
</div>

<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>

<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>

<div class="single-box">
<div class="img-area">
</div>

<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>

<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>

</div>
<div class="box-area disabled">
<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>
<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>

<div class="single-box">
<div class="img-area">
</div>

<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>

<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>
</div>
<br>

</div> 

<div id="pents" class="w3-container w3-border city" style="display:none">

<h3 class="head3"> Product Type</h3>
<br>

<div class="box-area">
<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>
<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>

<div class="single-box">
<div class="img-area">
</div>

<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>

<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>
</div>
<div class="box-area disabled">
<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>
<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>

<div class="single-box">
<div class="img-area">
</div>

<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>

<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>
</div>
<br>

</div> 

<div id="boots" class="w3-container w3-border city" style="display:none">

<h3 class="head3"> Product Type</h3>
<br>

<div class="testslider owl-carousel owl-theme">

<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>

<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>

<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>
<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>
<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>
<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>
<div class="single-box">
<div class="img-area">
</div>
<div class="img-text">
<span class="my-text"><strong>Text</strong></span>

</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>

</div>

<br>

</div> 

<div class="con-button">

<button type="button" class="btn btn-info previous ">Previous</button>
<button type="button" class="btn btn-info next">Next</button>
<button type="button" class="btn btn-success">View Bundle</button>

</div>

<h3 class="head3"> Selected Product <h3>

<div class"selected-section">

<div class="box-area">

<div class="single-box">
<div class="img-area">
</div>

<div class="img-text">
<span class="my-text"><strong>Text</strong></span>


</div>
<div class="box-button">
<button type="button" class="btn btn-light">Select</button>
</div>
</div>

</div>

</div>

</div>

</div>

<div class="rte">
{{ page.content }}
</div>
</div>
</div>
</div>

<style>

.container{

width:100%;
display:flex;
position:relative;

}

.myanchor{

width:100%;
display:inline-block;
margin: 1% 5px;
padding: 10px 0px;
text-align:center;
font-size:16px;
font-weight:normal;
color:#525252;
position:relative;
text-decoration:none;
letter-spacing:1px;
background-color:#fbfbfb;
border-radius:30px 0 30px 0;
/*border:1px solid #0b500b; */
font-size:14px;

}

.myanchor:hover{
background: #ec7a50;
color: white !important;
font-weight: 600;
}

.head3{
text-align:center;
}

.box-area{
display:flex;
flex-wrap:wrap;
justify-content;center;
align-items:center;
}

.single-box{
position:relative;
display:flex;
flex-direction:column;
justify-content;center;
align-items:center;
/* width:245px; */
height:auto;
border-radius:4px;
background-color:#ffffff;
text-align:center;
margin:20px;
padding:20px;
transition:.3s;
border-radius:30px 0 30px 0;
border:1px solid #f5f5f5

}

.img-area{

display:flex;
justify-content;center;
align-items:center;
width:100%;
height:170px;
border:2px solid #ddd;
margin-bottom:10px;
padding:20px;
-webkit-background-size:cover;
background-size:cover;
background-position:center center;

}

.testslider .owl-next,
.testslider .owl-prev {
position:absolute;
content:"";
top:50%;

}
.testslider .owl-next {
right:23px;

}

.testslider .owl-prev {
left:23px;

}

.owl-nav{

font-size: 57px;

}

.my-text{
font-size:24px;
font-weight:400;
line-height:36px;
}

.img-text{

padding-top:0px;

}

.img-text p{

font-size:14px;
font-weight:500;
line-height:42px;
color:black;

}

.single-box:hover{

/* background:#e84393; */
/* color:#fff; */
box-shadow: 14px 22px 37px -30px #80808045;

}

.con-button{

width:100%;
height:auto;
background:#f3f3e3;
margin-top:20px;
margin-bottom:20px;
position:relative;

}

.btn-info{

left: 37%;
position: relative;
width: 107px;
}

.btn-success{

float:right;
position: relative;
width: 148px;
}

.btn-light
{width: 87px;
font-size: 11px;}

.box-button button.btn.btn-light {
background: #fbfbfb;
color: #000000;
width: 99px;
border-radius: 2px;
}
.box-button button.btn.btn-light:hover {
background: #3a3a3a;
color: white;
}
.con-button {
margin-bottom: 80px;
}
.con-button button.btn.btn-info {
background: #fbfbfb;
color: #484848;
font-weight: 500;
}
.con-button button.btn.btn-info:hover {
background: #e4825d;
color: #ffffff;
font-weight: 600;
}
.con-button button.btn.btn-success {
background: #ec7a50;
}

.myanchor:active {
background: #ec7a50;
color: white !important;
font-weight: 600;
}

button.myanchor.tablink.w3-red {
background: #ec7a50;
color: white !important;
font-weight: 600;
}
.container.tabs-btn button.myanchor.tablink {
border: none;
}
.container.tabs-btn button.myanchor.tablink:focus {
outline: none;
}

.activated {
display: block;
}

.disabled {
display: none;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script>
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-red";
}

$(document).ready(function() {

$('.testslider').owlCarousel({
loop:true,
margin:5,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:4
}

}
})
// next button

$('.next').click(function() {

if($('#helmets').css('display') == 'block') {

$('#helmets').find('.box-area:first').next().removeClass('disabled');
$('#helmets').find('.box-area').prev().closest('.box-area').addClass('disabled');
}

if($('#gloves').css('display') == 'block') {

$('#gloves').find('div.box-area').removeClass('disabled');
$('#gloves').find('div.box-area').prev().closest('.box-area').addClass('disabled');
}

if($('#gerseys').css('display') == 'block') {

$('#gerseys').find('div.box-area').removeClass('disabled');
$('#gerseys').find('div.box-area').prev().closest('.box-area').addClass('disabled');
}

if($('#googles').css('display') == 'block') {

$('#googles').find('div.box-area').removeClass('disabled');
$('#googles').find('div.box-area').prev().closest('.box-area').addClass('disabled');
}

if($('#pents').css('display') == 'block') {

$('#pents').find('div.box-area').removeClass('disabled');
$('#pents').find('div.box-area').prev().closest('.box-area').addClass('disabled');
}

if($('#boots').css('display') == 'block') {

$('#boots').find('div.box-area').removeClass('disabled');
$('#boots').find('div.box-area').prev().closest('.box-area').addClass('disabled');
}

})

// previous button

$('.previous').click(function() {

if($('#helmets').css('display') == 'block') {

$('#helmets').find('div.box-area').prev().siblings('.box-area').addClass('disabled');
$('#helmets').find('div.box-area:first').prev().removeClass('disabled');
}

if($('#gloves').css('display') == 'block') {

$('#gloves').find('div.box-area').prev().closest('.box-area').removeClass('disabled');
$('#gloves').find('div.box-area').next().closest('.box-area').addClass('disabled');
}

if($('#gerseys').css('display') == 'block') {

$('#gerseys').find('div.box-area').prev().closest('.box-area').removeClass('disabled');
$('#gerseys').find('div.box-area').next().closest('.box-area').addClass('disabled');
}

if($('#googles').css('display') == 'block') {

$('#googles').find('div.box-area').prev().closest('.box-area').removeClass('disabled');
$('#googles').find('div.box-area').next().closest('.box-area').addClass('disabled');
}

if($('#pents').css('display') == 'block') {

$('#pents').find('div.box-area').prev().closest('.box-area').removeClass('disabled');
$('#pents').find('div.box-area').next().closest('.box-area').addClass('disabled');
}

if($('#boots').css('display') == 'block') {

$('#boots').find('div.box-area').prev().closest('.box-area').removeClass('disabled');
$('#boots').find('div.box-area').next().closest('.box-area').addClass('disabled');
}

})

// $('.next').click(function() {
// $('#gloves').find('div.box-area').removeClass('disabled');
// $('#gloves').find('div.box-area').prev().closest('.box-area').addClass('disabled');
// })

// $('.previous').click(function() {
// $('#gloves').find('div.box-area').prev().closest('.box-area').removeClass('disabled');
// $('#gloves').find('div.box-area').next().closest('.box-area').addClass('disabled');
// })

// $('.next').click(function() {
// $('#gerseys').find('div.box-area').removeClass('disabled');
// $('#gerseys').find('div.box-area').prev().closest('.box-area').addClass('disabled');
// })

// $('.previous').click(function() {
// $('#gerseys').find('div.box-area').prev().closest('.box-area').removeClass('disabled');
// $('#gerseys').find('div.box-area').next().closest('.box-area').addClass('disabled');
// })

// $('.next').click(function() {
// $('#googles').find('div.box-area').removeClass('disabled');
// $('#googles').find('div.box-area').prev().closest('.box-area').addClass('disabled');
// })

// $('.previous').click(function() {
// $('#googles').find('div.box-area').prev().closest('.box-area').removeClass('disabled');
// $('#googles').find('div.box-area').next().closest('.box-area').addClass('disabled');
// })

// $('.next').click(function() {
// $('#pents').find('div.box-area').removeClass('disabled');
// $('#pents').find('div.box-area').prev().closest('.box-area').addClass('disabled');
// })

// $('.previous').click(function() {
// $('#pents').find('div.box-area').prev().closest('.box-area').removeClass('disabled');
// $('#pents').find('div.box-area').next().closest('.box-area').addClass('disabled');
// })

// $('.next').click(function() {
// $('#boots').find('div.box-area').removeClass('disabled');
// $('#boots').find('div.box-area').prev().closest('.box-area').addClass('disabled');
// })

// $('.previous').click(function() {
// $('#boots').find('div.box-area').prev().closest('.box-area').removeClass('disabled');
// $('#boots').find('div.box-area').next().closest('.box-area').addClass('disabled');
// })

});

</script>

Newsletter

A short sentence describing what someone will receive by subscribing

Secure shopping with free shipping on orders over $20

We value your time so we offer fast shipping to ensure you get your products ASAP.

Authorized FLY Racing dealer - OEM parts at affordable prices

We are an authorized FLY Racing dealer and can provide OEM parts at the best price in the industry. Whether you need new tires or an entire engine we have you covered!

Competitive pricing with excellent customer service

We strive to be the leading online retailer of ATV, side-by-side and motorcycle parts, as well as accessories and apparel. To back that up we offer competitive pricing with excellent customer service.

Secure payments

Your order is protected with the latest in SSL technology. If you're not 100% satisfied you can return it for a full refund, no questions asked.