title: Jquery Featherlight js. Customized CSS radio button not working in modal window
body: <p>I am trying to use customized radio/option button. It is working fine with html page. When i try to use same thing in modal window (Feather light js modal window). Not able to click customized radio button.
  Plain html radio button is working in modal window.</p>
  
  <p>Any suggestion/idea will be great help<br>
  please check my 
  <a href="http://jsfiddle.net/dsriniudt/JNsu6/264/" rel="nofollow">code here, or below</a>
  Click inline link in result window to analyze the issue...</p>
  
  <pre><code>&lt;a href="http://farm5.staticflickr.com/4069/4563624740_93430bb907_b.jpg" data-featherlight&gt;Nice image&lt;/a&gt;
  
  &lt;hr&gt;
  
  &lt;a href=".inline" data-featherlight&gt;Inline&lt;/a&gt;
  
  &lt;div class="inline"&gt;Hello, world&lt;br&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;input type="radio" id="f-option" name="selector"&gt;
      &lt;label for="f-option"&gt;Pizza&lt;/label&gt;
  
      &lt;div class="check"&gt;&lt;/div&gt;
    &lt;/li&gt;
  
    &lt;li&gt;
      &lt;input type="radio" id="s-option" name="selector"&gt;
      &lt;label for="s-option"&gt;Boyfriend&lt;/label&gt;
  
      &lt;div class="check"&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;/li&gt;
  
    &lt;li&gt;
      &lt;input type="radio" id="t-option" name="selector"&gt;
      &lt;label for="t-option"&gt;Cats&lt;/label&gt;
  
      &lt;div class="check"&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;hr&gt;
  
  &lt;h3&gt;Gallery&lt;/h3&gt;
  &lt;div data-featherlight-gallery data-featherlight-filter="a"&gt;
    &lt;a href="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_b.jpg"&gt;&lt;img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" /&gt;&lt;/a&gt;
    &lt;a href="http://farm5.staticflickr.com/4005/4400559493_3403152632_o.jpg"&gt;&lt;img src="http://farm5.staticflickr.com/4005/4400559493_f652202d1b_q.jpg" /&gt;&lt;/a&gt;
    &lt;a href="http://farm1.staticflickr.com/174/396673914_be9d1312b1_o.jpg"&gt;&lt;img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_q.jpg" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.inline { display: none }
  
  ul li{
    color: #AAAAAA;
    display: block;
    position: relative;
    float: left;
    width: 100%;
    height: 100px;
      border-bottom: 1px solid #111111;
  }
  
  ul li input[type=radio]{
    position: absolute;
    visibility: hidden;
  }
  
  ul li label{
    display: block;
    position: relative;
    font-weight: 300;
    font-size: 1.35em;
    padding: 25px 25px 25px 80px;
    margin: 10px auto;
    height: 30px;
    z-index: 9;
    cursor: pointer;
    -webkit-transition: all 0.25s linear;
  }
  
  ul li:hover label{
      color: #ddd;
  }
  
  ul li .check{
    display: block;
    position: absolute;
    border: 5px solid #AAAAAA;
    border-radius: 100%;
    height: 25px;
    width: 25px;
    top: 30px;
    left: 20px;
      z-index: 5;
      transition: border .25s linear;
      -webkit-transition: border .25s linear;
  }
  
  ul li:hover .check {
    border: 5px solid #ddd;
  }
  
  ul li .check::before {
    display: block;
    position: absolute;
      content: '';
    border-radius: 100%;
    height: 15px;
    width: 15px;
    top: 5px;
      left: 5px;
    margin: auto;
      transition: background 0.25s linear;
      -webkit-transition: background 0.25s linear;
  }
  
  input[type=radio]:checked ~ .check {
    border: 5px solid #0DFF92;
  }
  
  input[type=radio]:checked ~ .check::before{
    background: #0DFF92;
  }
  
  input[type=radio]:checked ~ label{
    color: #0DFF92;
  }
  </code></pre>