css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Muli:300' rel='stylesheet' type='text/css'>

<div class="middlecontent2">
  <div class="container">
    <div class="greyshadowbox" style="margin-top:0px">
      <div class="productboxheader">
        COMPATIBILITY CHECK
      </div>
      <div class="productdescription" style="padding:10px">
        <p class="center">This tool will help you make sure your bike is compatible with Revolights. There's a few easy tricks to help with the fit check via our <a class="youtube" href="https://www.youtube.com/embed/DJHtEW5SDbA">Fit Check Video</a>.</p>
        <p class="center">You can also reach us in the chat box at the bottom of your browser window anytime you need help.</p>
        <p class="center">If you still have questions after answering the questions, please send an email to <a href="mailto:fit@revolights.com">fit@revolights.com</a> to get an answer from one of our product experts.</p>

      </div>
    </div>

    <div class="greyshadowbox fit-container" id="step1" style="margin-top:20px">
      <div class="productdescription row-fluid">
        <h2 class="center">Step 1: What is your wheel diameter?</h2>
      </div>
      <div class="center">
        <img src="https://cdn.shopify.com/s/files/1/0122/8442/t/14/assets/fit-chart-wheel-size.png?4095066619218953520" />
      </div>
      <div class="productdescription fit-instructions">
        <p class="center">Choose your wheel size below. You should be able to find the wheel size on your tire or rim.</p>
      </div>
      <div class="row-fluid fit-buttons">
        <div class="span2"></div>
        <div class="span2">
          <button id="btn-700c">
            700c/27"<br/>
            Road/Hybrid
          </button>
        </div>
        <div class="span2">
          <button id="btn-26in">
            559c/26"/27.5"<br/>
            Hybrid/Cruiser
          </button>
        </div>
        <div class="span2">
          <button id="btn-26in-mtb">
            559c/26"/27.5"<br/>
            Mountain Bike
          </button>
        </div>
        <div class="span2">
          <button id="btn-othersize">
            Other Wheel Size
          </button>
        </div>
        <div class="span2"></div>
      </div>
    </div>

    <div class="greyshadowbox fit-container" id="step2a" style="margin-top:20px">
      <div class="productdescription row-fluid">
        <h2 class="center">Step 2: Is your spoke pattern a multiple of 4?</h2>
      </div>
      <div class="center">
        <img src="https://cdn.shopify.com/s/files/1/0122/8442/t/14/assets/fit-chart-spoke-count.png?4095066619218953520" />
      </div>
      <div class="productdescription fit-instructions">
        <p class="center">Revolights is compatible with your wheel diameter, but we still need to check a few more things.</p>
        <p class="center">Check your front and back rims to make sure the number of spokes is a multiple of 4. The Revolights rings attach to the spokes at 4 points.</p>
      </div>
      <div class="row-fluid fit-buttons">
        <div class="span6 center">
          <button id="btn-700c-mult4">
            My wheels have a spoke count<br/>
            that is a multiple of four
          </button>
        </div>
        <div class="span6 center">
          <button id="btn-700c-notmult4">
            My wheels do not have a<br/> spoke count that is a multiple of four
          </button>
        </div>
      </div>
    </div>

    <div class="greyshadowbox fit-container" id="step2b" style="margin-top:20px">
      <div class="productdescription row-fluid">
        <h2 class="center">Step 2: Is your spoke pattern a multiple of 4?</h2>
      </div>
      <div class="center">
        <img src="https://cdn.shopify.com/s/files/1/0122/8442/t/14/assets/fit-chart-spoke-count.png?4095066619218953520" />
      </div>
      <div class="productdescription fit-instructions" style="padding:20px">
        <p class="center">Revolights is compatible with your wheel diameter, but we still need to check a few more things.</p>
        <p class="center">Check your front and back rims to make sure the number of spokes is a multiple of 4. The Revolights rings attach to the spokes at 4 points.</p>
      </div>
      <div class="row-fluid fit-buttons">
        <div class="span6 center">
          <button id="btn-26in-mult4">
            My wheels have a spoke count<br/>
            that is a multiple of four
          </button>
        </div>
        <div class="span6 center">
          <button id="btn-26in-notmult4">
            My wheels do not have a<br/> spoke count that is a multiple of four
          </button>
        </div>
      </div>
    </div>

    <div class="greyshadowbox fit-container" id="mtbwarning" style="margin-top:20px">
      <div class="productdescription row-fluid">
        <h2 class="center">A Note About Mountain Bikes</h2>
      </div>
      <div class="center" style="height:100px">

      </div>
      <div class="productdescription" style="padding:20px">
        <p class="center">The new Revolights Skyline 26" version is compatible with most mountain bikes, but we don't recommend it for heavy offroad use.</p>
        <p class="center">Seriously rocky trails or harder than normal impacts could damage your Revolights.
          <p>
            <p class="center">If you are just commuting or riding around town on your mountain bike, the new 26" version should work great for you!</p>
      </div>
      <div class="row-fluid fit-buttons">
        <div class="span12 center">
          <button id="btn-mtb-warn">
            I understand, let's continue!
          </button>
        </div>
      </div>
    </div>

    <div class="greyshadowbox fit-container" id="contactsupport" style="margin-top:20px">
      <div class="productdescription row-fluid">
        <h2 class="center">Next Step: Contact Revolights Customer Support</h2>
      </div>

      <div class="center">
        <p>Your wheels may be compatible, but we'd like to check a couple things with you before you purchase.</p>
        <p>You can reach us:</p>
      </div>
      <div class="flexcontainer">
        <ul>
          <li>By email at <a href="mailto:fit@revolights.com">fit@revolights.com</a></li>
          <li>By phone at 415 881 REVO (7386)</li>
          <li>Or simply open the chat box at the bottom right on any of our webpages.</li>
        </ul>
      </div>

      <div class="flexcontainer" style="margin-top:40px">

        <button id="btn-start-over">
            I'd like to start over
          </button>

      </div>
    </div>

    <div class="greyshadowbox fit-container" id="step3a" style="margin-top:20px">
      <div class="productdescription row-fluid">
        <h2 class="center">Step 3: How wide are your tires?</h2>
      </div>
      <div class="center">
        <img src="https://cdn.shopify.com/s/files/1/0122/8442/t/14/assets/fit-chart-tire-size-700c.png?4095066619218953520" />
      </div>
      <div class="productdescription fit-instructions">
        <p class="center">Revolights is compatible with your wheels, but we still need to check a few more things.</p>
        <p class="center">Your tire size is printed on the size of the tire. Please check your tire size and choose an option below:</p>
      </div>
      <div class="row-fluid fit-buttons">
        <div class="span6 center">
          <button id="btn-700c-tiresfit">
            My tires are under 38mm wide
          </button>
        </div>
        <div class="span6 center">
          <button id="btn-700c-tireswide">
            My tires are over 38mm wide
          </button>
        </div>
      </div>
    </div>

    <div class="greyshadowbox fit-container" id="step3b" style="margin-top:20px">
      <div class="productdescription row-fluid">
        <h2 class="center">Step 3: How wide are your tires?</h2>
      </div>
      <div class="row-fluid center">
        <img src="https://cdn.shopify.com/s/files/1/0122/8442/t/14/assets/fit-chart-tire-size-26in.png?4095066619218953520" />
      </div>
      <div class="productdescription fit-instructions">
        <p class="center">Revolights is compatible with your wheels, but we still need to check a few more things.</p>
        <p class="center">Your tire size is printed on the size of the tire. Please check your tire size and choose an option below:</p>
      </div>
      <div class="row-fluid fit-buttons">
        <div class="span6 center">
          <button id="btn-26in-tiresfit">
            My tires are 2.125" (54mm) or narrower
          </button>
        </div>
        <div class="span6 center">
          <button id="btn-26in-tireswide">
             My tires are over 2.125" (54mm) wide
          </button>
        </div>
      </div>
    </div>

    <div class="greyshadowbox fit-container" id="tireswide700c" style="margin-top:20px">
      <div class="productdescription row-fluid">
        <h2 class="center">Revolights recommends you change to a narrower tire</h2>
      </div>
      <div class="row-fluid center">
        <img src="https://cdn.shopify.com/s/files/1/0122/8442/t/14/assets/fit-chart-tire-change-700c.png?4095066619218953520" />
      </div>
      <div class="productdescription fit-instructions">
        <p class="center">Your rims are compatible with Revolights, but your tires are a little wide. We recommend using a narrower slick or road tire with Revolights to maximize the forward and rearward visibility of the lights.</p>
      </div>
      <div class="row-fluid fit-buttons">
        <div class="span12 center">
          <button id="btn-700c-tirewarn">
            I understand, let's continue
          </button>
        </div>
      </div>
    </div>

    <div class="greyshadowbox fit-container" id="tireswide26in" style="margin-top:20px">
      <div class="productdescription row-fluid">
        <h2 class="center">Revolights recommends you change to a narrower tire</h2>
      </div>
      <div class="center">
        <img src="https://cdn.shopify.com/s/files/1/0122/8442/t/14/assets/fit-chart-tire-change-26in.png?4095066619218953520" />
      </div>
      <div class="productdescription fit-instructions">
        <p class="center">Your rims are compatible with Revolights, but your tire is a little wide. We recommend using a narrower slick or road tire with Revolights to maximize the forward and rearward visibility of the lights.</p>
      </div>
      <div class="row-fluid fit-buttons">
        <div class="span12 center">
          <button id="btn-26in-tirewarn">
            I understand, let's continue
          </button>
        </div>
      </div>
    </div>

    <div class="greyshadowbox fit-container" id="step4a" style="margin-top:20px">
      <div class="productdescription row-fluid">
        <h2 class="center">Step 4: How deep are your rims?</h2>
      </div>
      <div class="center">
        <img src="https://cdn.shopify.com/s/files/1/0122/8442/t/14/assets/fit-chart-nipple-measure.png?4095066619218953520" />
      </div>
      <div class="productdescription fit-instructions">
        <p class="center">Revolights is compatible with your wheel diameter and tire, we just need to check the rim depth.</p>
        <p class="center">Measure the depth of your rim as shown. Deeper 700c rims may require using the 26in kit.</p>
      </div>
      <div class="row-fluid fit-buttons">
        <div class="span6 center">
          <button id="btn-700c-rimheightgood">
            My rim-to-spoke-nipple<br/>
            measurement is under 42mm
          </button>
        </div>
        <div class="span6 center">
          <button id="btn-700c-rimtoodeep">
            My rim-to-spoke-nipple<br/>
            measurement is over 42mm
          </button>
        </div>
      </div>
    </div>

    <div class="greyshadowbox fit-container" id="step5a" style="margin-top:20px">
      <div class="productdescription row-fluid">
        <h2 class="center">Step 5: Checking your frame</h2>
      </div>
      <div class="center">
        <img src="https://cdn.shopify.com/s/files/1/0122/8442/t/14/assets/fit-chart-frame-measurement.png?4095066619218953520" />
      </div>
      <div class="productdescription fit-instructions">
        <p class="center">Revolights is compatible with your wheels and tires, we just have to check your bike frame for compatibility.</p>
        <p class="center">Measure your fork, chainstay and seat stay to ensure they will clear the rings.</p>
      </div>
      <div class="row-fluid fit-buttons">
        <div class="span6 center">
          <button id="btn-700c-framegood">
            My fork, chainstay and seatstay<br/>
            opening is over 40mm
          </button>
        </div>
        <div class="span6 center">
          <button id="btn-700c-framenarrow">
            My fork, chainstay or seatstay<br/>
            opening is under 40mm
          </button>
        </div>
      </div>
    </div>

    <div class="greyshadowbox fit-container" id="step5b" style="margin-top:20px">
      <div class="productdescription row-fluid">
        <h2 class="center">Step 4: Checking your frame</h2>
      </div>
      <div class="center">
        <img src="https://cdn.shopify.com/s/files/1/0122/8442/t/14/assets/fit-chart-frame-measurement.png?4095066619218953520" />
      </div>
      <div class="productdescription fit-instructions">
        <p class="center"> Revolights is compatible with your wheels and tires, we just have to check your bike frame for compatibility.</p>
        <p class="center">Measure your fork, chainstay and seat stay to ensure they will clear the rings.</p>
      </div>
      <div class="row-fluid fit-buttons">
        <div class="span6 center">
          <button id="btn-26in-framegood">
            My fork, chainstay and seatstay<br/>
            opening is over 40mm
          </button>
        </div>
        <div class="span6 center">
          <button id="btn-26in-framenarrow">
            My fork, chainstay or seatstay<br/>
            opening is under 40mm
          </button>
        </div>
      </div>
    </div>

    <div class="greyshadowbox fit-container" id="step5c" style="margin-top:20px">
      <div class="productdescription row-fluid">
        <h2 class="center">Step 4: Checking your frame</h2>
      </div>
      <div class="center">
        <img src="https://cdn.shopify.com/s/files/1/0122/8442/t/14/assets/fit-chart-frame-measurement.png?4095066619218953520" />
      </div>
      <div class="productdescription fit-instructions">
        <p class="center"> Revolights is compatible with your wheels and tires, we just have to check your bike frame for compatibility.</p>
        <p class="center">Measure your fork, chainstay and seat stay to ensure they will clear the rings.</p>
      </div>
      <div class="row-fluid fit-buttons">
        <div class="span6 center">
          <button id="btn-deepv-framegood">
            My fork, chainstay and seatstay<br/>
            opening is over 40mm
          </button>
        </div>
        <div class="span6 center">
          <button id="btn-deepv-framenarrow">
            My fork, chainstay or seatstay<br/>
            opening is under 40mm
          </button>
        </div>
      </div>
    </div>


    <div class="greyshadowbox fit-container" id="buy700c" style="margin-top:20px">
      <div class="productdescription row-fluid">
        <h3 class="center">Congratulations! Your bike is compatible with Revolights!</h3>
      </div>


      <div class="flexcontainer">
        <p class="center">Your bike is compatible with Eclipse+ and Eclipse!</p>
      </div>

    </div>


    <div class="greyshadowbox fit-container" id="buy700cv" style="margin-top:20px">
      <div class="productdescription row-fluid">
        <h3 class="center">Congratulations! Your bike is compatible with Revolights!</h3>
      </div>
     



      <div class="flexcontainer">
        <p class="center">Your bike is compatible with Eclipse+ and Eclipse!</p>
      </div>
    </div>

    <div class="greyshadowbox fit-container" id="buy26in" style="margin-top:20px">
      <div class="productdescription row-fluid">
        <h3 class="center">Congratulations! Your bike is compatible with Revolights!</h3>
      </div>
      <div class="flexcontainer">

        <div class="five columns alpha thumbnail odd">
        

          

        
        </div>
      </div>
      <div class="flexontainer">
        <p class="center">Your bike is compatible with Revolights Skyline!</p>
      </div>
    </div>
  </div>
</div>

<style>
  #a:hover {
    cursor: pointer;
  }
  
  .youtube:hover {
    cursor: pointer;
  }
</style>

</div>


            
          
!
            
              body {
  font-family: 'Muli', sans-serif;
}

.greyshadowbox {
  box-shadow: 3px 3px 5px #DDD;
  border: 1px solid #DDD;
  margin-bottom: 20px;
  border-radius:30px
}

button {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 14px;
  background-color: rgb(197, 2,0);
  color: white;
  width: 15vw;
  height: 70px;
  border-radius:10px;
  border:none
}

.modal {
  position: absolute;
  top: 10px;
  right: 10px;
  left: 10px;
  width: auto;
  margin: 0;
}

.modal.fade.in {
  top: 30%;
}

.modal-.close {
  padding: 10px;
  margin: -10px;
}

.fit-container {
  min-height: 500px;
  width: 100%;
  display: none;
}

.fit-buttons {
  margin-bottom: 10px;
  margin-top: -20px
}

.fit-container p {
  font-size: 18px;
}

.fit-container ul {
  font-size: 16px;
}

.fit-container a {
  color: #bf0404;
}

.fit-instructions {
  height: 100px;
  padding: 20px;
}

#step1 {
  display: block;
}

.row-fluid {
  width: 100%;
  *zoom: 1;
}

.row-fluid:before,
.row-fluid:after {
  display: table;
  content: "";
}

.row-fluid:after {
  clear: both;
}

.row-fluid [class*="span"] {
  display: block;
  float: left;
  width: 100%;
  min-height: 28px;
  margin-left: 2.762430939%;
  *margin-left: 2.709239449638298%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}

.row-fluid .span12 {
  width: 99.999999993%;
  *width: 99.9468085036383%;
}

.row-fluid .span11 {
  width: 91.436464082%;
  *width: 91.38327259263829%;
}

.row-fluid .span10 {
  width: 82.87292817100001%;
  *width: 82.8197366816383%;
}

.row-fluid .span9 {
  width: 74.30939226%;
  *width: 74.25620077063829%;
}

.row-fluid .span8 {
  width: 65.74585634900001%;
  *width: 65.6926648596383%;
}

.row-fluid .span7 {
  width: 57.182320438000005%;
  *width: 57.129128948638304%;
}

.row-fluid .span6 {
  width: 48.618784527%;
  *width: 48.5655930376383%;
}

.row-fluid .span5 {
  width: 40.055248616%;
  *width: 40.0020571266383%;
}

.row-fluid .span4 {
  width: 31.491712705%;
  *width: 31.4385212156383%;
}

.row-fluid .span3 {
  width: 22.928176794%;
  *width: 22.874985304638297%;
}

.row-fluid .span2 {
  width: 14.364640883%;
  *width: 14.311449393638298%;
}

.row-fluid .span1 {
  width: 5.801104972%;
  *width: 5.747913482638298%;
}

.storebigtext {
  font-size: 16px;
  line-height: 25px;
  font-family: 'Titillium Web', Helvetica, Arial, Sans-serif;
  font-weight: 100;
}

.productdescription {}

.productdescription p {
  color: black;
  font-size: 15px;
  margin-top: 8px;
  margin-bottom: 8px;
  max-width: none;
}

.productdescription ul {}

.productdescription h2 {
  color: black;
  font-weight: 500;
  font-size: 1.9em;
  min-height: 0px;
  margin-bottom: 30px;
  text-transform:uppercase
}

.productbox {
  background-color: #fff;
  box-shadow: 3px 3px 5px #DDD;
  border: 1px solid #DDD;
  height: 180px;
}

.productbox img {
  margin: 10px;
  vertical-align: inherit;
}

.productbox .center {
  display: inline-block;
  width: 48%;
}

.productboxheader {
  padding: 15px 10px 15px 10px;
  background-color: #363636;
  width=100%;
  margin=0;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  border-radius:30px 30px 0px 0px;
}

productdescription {}

productdescription p {
  color: black;
  font-size: 15px;
  margin-top: 8px;
  margin-bottom: 8px;
  max-width: none;
}

productdescription ul {}

productdescription h2 {
  color: black;
  font-weight: 500;
  font-size: 2em;
  min-height: 0px;
  margin-bottom: 20px;
}

productbox {
  background-color: #fff;
  box-shadow: 3px 3px 5px #DDD;
  border: 1px solid #DDD;
  height: 180px;
}

productbox img {
  margin: 10px;
  vertical-align: inherit;
}

productbox .center {
  display: inline-block;
  width: 48%;
}

productboxheader {
  padding: 15px 10px 15px 10px;
  background-color: #363636;
  width=100%;
  margin=0;
  text-align: center;
  color: #FFF;
  font-size: 20px;
}

.span12 {
  width: 724px;
}

.span11 {
  width: 662px;
}

.span10 {
  width: 600px;
}

.span9 {
  width: 538px;
}

.span8 {
  width: 476px;
}

.span7 {
  width: 414px;
}

.span6 {
  width: 352px;
}

.span5 {
  width: 290px;
}

.span4 {
  width: 228px;
}

.span3 {
  width: 166px;
}

.span2 {
  width: 104px;
}

.span1 {
  width: 42px;
}

.flexcontainer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  max-height: 650px;
  overflow: hidden;
}

.hidden {
  display: none;
}

.right {
  float: right;
  position: relative;
}

.left {
  float: left;
}

.inline {
  display: inline;
}

.center {
  text-align: center;
}

div.container {
  margin: 0 auto;
  padding: 20px 0;
}

div.content {
  padding: {
    {
      settings.content_top_padding
    }
  }
  px 0px 0px 0px;
}

.thumbnail {
  opacity: 1;
  color: {
    {
      settings.link_hover_color
    }
  }
  ;
}

.modal {
  margin: 10px 0;
  display: none;
  background-color: {
    {
      settings.modal_background_color
    }
  }
  ;
}
            
          
!
            
              ///Video Pop-up///
$(function() {
  $("div.youtube").YouTubePopup({
    autoplay: 1,
    idAttribute: 'id',
    hideTitleBar: true
  });
});
(function(h, g) {
  var b = null;
  var f = {};
  var d = {
    init: function(i) {
      i = h.extend({}, h.fn.YouTubePopup.defaults, i);
      if (b == null) {
        b = h("<div>").css({
          display: "none",
          padding: 0
        });
        h("body").append(b);
        b.dialog({
          autoOpen: false,
          resizable: false,
          draggable: i.draggable,
          modal: i.modal,
          dialogClass: i.cssClass,
          create: function() {
            f.backgroundImage = h(".ui-dialog").css("background-image");
            f.border = h(".ui-dialog").css("border");
            f.backgroundColor = h(".ui-dialog").css("background-color")
          },
          close: function() {
            b.html("");
            h(".ui-dialog-titlebar").show();
            h(".ui-dialog").css({
              "background-image": f.backgroundImage,
              border: f.border,
              "background-color": f.backgroundColor
            })
          }
        })
      }
      return this.each(function() {
        var k = h(this);
        var j = k.data("YouTube");
        if (!j) {
          k.data("YouTube", {
            target: k
          });
          h(k).bind("click.YouTubePopup", function() {
            var o = i.youtubeId;
            if (h.trim(o) == "" && k.is("a")) {
              o = c(k.attr("href"))
            }
            if (h.trim(o) == "" || o === false) {
              o = k.attr(i.idAttribute)
            }
            var m = h.trim(i.title);
            if (m == "") {
              if (i.useYouTubeTitle) {
                a(o)
              } else {
                m = k.attr("title")
              }
            }
            var n = g.location.protocol + "//www.youtube.com/embed/" + o + "?rel=0&showsearch=0&autohide=" + i.autohide;
            n += "&autoplay=" + i.autoplay + "&controls=" + i.controls + "&fs=" + i.fs + "&loop=" + i.loop;
            n += "&showinfo=" + i.showinfo + "&color=" + i.color + "&theme=" + i.theme;
            b.html(e(n, i.width, i.height));
            b.dialog({
              width: "auto",
              height: "auto"
            });
            b.dialog({
              minWidth: i.width,
              minHeight: i.height,
              title: m
            });
            b.dialog("open");
            h(".ui-widget-overlay").fadeTo("fast", i.overlayOpacity);
            var l = h(".ui-dialog-titlebar");
            if (i.hideTitleBar && i.modal) {
              l.hide();
              h(".ui-widget-overlay").click(function() {
                b.dialog("close")
              })
            }
            if (i.clickOutsideClose && i.modal) {
              h(".ui-widget-overlay").click(function() {
                b.dialog("close")
              })
            }
            l.removeClass("ui-corner-all").addClass("ui-corner-top");
            if (!i.showBorder) {
              h(".ui-dialog").css({
                "background-image": "none",
                border: "none",
                "background-color": "transparent"
              })
            }
            return false
          })
        }
      })
    },
    destroy: function() {
      return this.each(function() {
        h(this).unbind(".YouTubePopup");
        h(this).removeData("YouTube")
      })
    }
  };

  function e(j, l, i) {
    var k = '<iframe title="YouTube video player" style="margin:0; padding:0;" width="' + l + '" ';
    k += 'height="' + i + '" src="' + j + '" frameborder="0" allowfullscreen></iframe>';
    return k
  }

  function a(j) {
    var i = "https://gdata.youtube.com/feeds/api/videos/" + j + "?v=2&alt=json";
    h.ajax({
      url: i,
      dataType: "jsonp",
      cache: true,
      success: function(k) {
        b.dialog({
          title: k.entry.title.$t
        })
      }
    })
  }

  function c(i) {
    var k = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
    var j = i.match(k);
    if (j && j[2].length == 11) {
      return j[2]
    } else {
      return false
    }
  }
  h.fn.YouTubePopup = function(i) {
    if (d[i]) {
      return d[i].apply(this, Array.prototype.slice.call(arguments, 1))
    } else {
      if (typeof i === "object" || !i) {
        return d.init.apply(this, arguments)
      } else {
        h.error("Method " + i + " does not exist on jQuery.YouTubePopup")
      }
    }
  };
  h.fn.YouTubePopup.defaults = {
    youtubeId: "",
    title: "",
    useYouTubeTitle: true,
    idAttribute: "rel",
    cssClass: "YouTubeDialog",
    draggable: false,
    modal: true,
    width: 640,
    height: 480,
    hideTitleBar: false,
    clickOutsideClose: false,
    overlayOpacity: 0.5,
    autohide: 2,
    autoplay: 1,
    color: "red",
    controls: 1,
    fs: 1,
    loop: 0,
    showinfo: 0,
    theme: "light",
    showBorder: true
  }
})(jQuery, window);

///Navigation///
$("#btn-700c").click(function() {
  $("#step1").hide();
  $("#step2a").show();
});

$("#btn-26in").click(function() {
  $("#step1").hide();
  $("#step2b").show();
});

$("#btn-26in-mtb").click(function() {
  $("#step1").hide();
  $("#mtbwarning").show();
});

$("#btn-mtb-warn").click(function() {
  $("#mtbwarning").hide();
  $("#step2b").show();
});

$("#btn-othersize").click(function() {
  $("#step1").hide();
  $("#contactsupport").show();
});

$("#btn-700c-mult4").click(function() {
  $("#step2a").hide();
  $("#step3a").show();
});

$("#btn-700c-notmult4").click(function() {
  $("#step2a").hide();
  $("#contactsupport").show();
});

$("#btn-26in-mult4").click(function() {
  $("#step2b").hide();
  $("#step3b").show();
});

$("#btn-26in-notmult4").click(function() {
  $("#step2b").hide();
  $("#contactsupport").show();
});

$("#btn-start-over").click(function() {
  $("#contactsupport").hide();
  $("#step1").show();
});

$("#btn-700c-tiresfit").click(function() {
  $("#step3a").hide();
  $("#step4a").show();
});

$("#btn-700c-tireswide").click(function() {
  $("#step3a").hide();
  $("#tireswide700c").show();
});

$("#btn-26in-tiresfit").click(function() {
  $("#step3b").hide();
  $("#step5b").show();
});

$("#btn-26in-tireswide").click(function() {
  $("#step3b").hide();
  $("#tireswide26in").show();
});

$("#btn-700c-tirewarn").click(function() {
  $("#tireswide700c").hide();
  $("#step4a").show();
});

$("#btn-26in-tirewarn").click(function() {
  $("#tireswide26in").hide();
  $("#step5b").show();
});

$("#btn-700c-rimheightgood").click(function() {
  $("#step4a").hide();
  $("#step5a").show();
});

$("#btn-700c-rimtoodeep").click(function() {
  $("#step4a").hide();
  $("#step5c").show();
});

$("#btn-700c-framegood").click(function() {
  $("#step5a").hide();
  $("#buy700c").show();
});

$("#btn-700c-framenarrow").click(function() {
  $("#step5a").hide();
  $("#contactsupport").show();
});

$("#btn-26in-framegood").click(function() {
  $("#step5b").hide();
  $("#buy26in").show();
});

$("#btn-26in-framenarrow").click(function() {
  $("#step5b").hide();
  $("#contactsupport").show();
});
$("#btn-deepv-framegood").click(function() {
  $("#step5c").hide();
  $("#buy700cv").show();
});

$("#btn-deepv-framenarrow").click(function() {
  $("#step5c").hide();
  $("#contactsupport").show();
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console