CodePen

HTML

            
              <div class="container">
    <div class="padding">
      <div class="row">
        <div class="col-lg-12">
          <h1>Responsive Flat UI</h1>
          <p class="lead hidden-xs hidden-sm">I've built these UI elements to both integrate and sit side by side with the latest version of Bootstrap. Everything is my own except for the custom select boxes, written by <a href="http://codepen.io/catalinred">Catalin Rosu</a>.</p>
          <hr>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">

          <!-- Basket -->
          <div class="basket-wrap">
            <div class="basket-control">
              <span class="basket-block"><span class="icon-basket"></span></span>
              <span class="basket-trigger">
                <a href="#" id="basket-controller">
                  <span class="basket-title">Basket</span>
                  <span class="basket-content">&pound;89.99</span>
                  <span class="basket-items">(1)</span>
                </a>
                <!-- Basket Preview -->
                <div class="basket-preview">
                  
                  <!-- Product Carousel -->
                  <div class="pslider-wrapper">
                    <div class="pslider-inside">
                      <ul id="pslider" class="pslider">
                        <li id="pslide1" data-slide="1" class="pslide active">Slide 1</li>
                        <li id="pslide2" data-slide="2" class="pslide">Slide 2</li>
                        <li id="pslide3" data-slide="3" class="pslide">Slide 3</li>
                        <li id="pslide4" data-slide="4" class="pslide">Slide 4</li>
                        <li id="pslide5" data-slide="5" class="pslide">Slide 5</li>
                        <li id="pslide6" data-slide="6" class="pslide">Slide 6</li>
                        <li id="pslide7" data-slide="7" class="pslide">Slide 7</li>
                      </ul>
                    </div>
                    <div class="pslider-controls">
                      <span class="pslide-prev">
                        <a href="#" class="prev btn btn-icon">
                          <span class="icon-arrow-left"></span>
                        </a>
                      </span>
                      <span class="pslide-label">Label</span>
                      <span class="pslide-next">
                        <a href="#" class="next btn btn-icon">
                          <span class="icon-arrow-right"></span>
                        </a>
                      </span>
                    </div>
                  </div>

                  <!-- Basket Summary -->
                  <div class="basket-summary">
                    <span class="total"><b>Total</b> &pound;89.99</span>
                  </div>

                  <!-- Basket Actions -->
                  <div class="basket-actions">
                    <div class="row">
                      <div class="col-xs-6">
                        <a href="#" class="btn btn-primary">Bag</a>
                      </div>
                      <div class="col-xs-6">
                        <a href="#" class="btn btn-warning">Pay Now</a>
                      </div>
                    </div>
                  </div>

                </div>
              </span>
            </div>
              
            <!-- Prompt -->
            <span class="basket-prompt">What's in your basket <span class="icon-arrow-right2"></span></span>
          </div>

        </div>
      </div>
      <div class="row">
        <hr>
      </div>
      <div class="row">
        <div class="col-xs-6">
          
          <form role="form">
            <input type="checkbox" id="check-black" class="black" />
            <label for="check-black"><span></span></label>

            <input type="checkbox" id="check-blue" class="blue" />
            <label for="check-blue"><span></span></label>

            <input type="checkbox" id="check-orange" class="orange" />
            <label for="check-orange"><span></span></label>

            <input type="checkbox" id="check-pink" class="pink" />
            <label for="check-pink"><span></span></label>

            <input type="checkbox" id="check-red" class="red" />
            <label for="check-red"><span></span></label>

            <input type="checkbox" id="check-yellow" class="yellow" />
            <label for="check-yellow"><span></span></label>
          </form>

        </div>
        <div class="col-xs-6">

          <form role="form">
            <input type="checkbox" id="check-size-s" class="size" disabled />
            <label for="check-size-s"><span>S</span></label>

            <input type="checkbox" id="check-size-m" class="size" />
            <label for="check-size-m"><span>M</span></label>

            <input type="checkbox" id="check-size-l" class="size" />
            <label for="check-size-l"><span>L</span></label>

            <input type="checkbox" id="check-size-xl" class="size" />
            <label for="check-size-xl"><span>XL</span></label>
          </form>

        </div>
      </div>
      <div class="row">

        <hr />

        <div class="col-xs-6">
          
          <div class="menu-group">
            <form id="form1" role="form" class="radio-colors">
              <span class="menu-block radio-display" data-color="black"></span>
              <a href="" class="menu-trigger"><span class="icon-arrow-down"></span></a>
              <nav class="menu-dropdown menu-dropdown1 closed" role="navigation">
                <ul class="menu-colors">
                  <li><span class="dropdown-label">Colours</span></li>
                  <li class="divider"></li>
                  <li class="menu-sub-color">
                    <ul>
                      <li class="color-black">
                        <input type="radio" data-set="radio-color-set" name="radio-color-set1" id="radio-color-set1-black" class="black" />
                        <label for="radio-color-set1-black"><span>Black</span></label>
                      </li>
                      
                      <li class="color-blue">
                        <input type="radio" data-set="radio-color-set" name="radio-color-set1" id="radio-color-set1-blue" class="blue" />
                        <label for="radio-color-set1-blue"><span>Blue</span></label>
                      </li>

                      <li class="color-orange">
                        <input type="radio" data-set="radio-color-set" name="radio-color-set1" id="radio-color-set1-orange" class="orange" />
                        <label for="radio-color-set1-orange"><span>Orange</span></label>
                      </li>

                      <li class="color-pink">
                        <input type="radio" data-set="radio-color-set" name="radio-color-set1" id="radio-color-set1-pink" class="pink" />
                        <label for="radio-color-set1-pink"><span>Pink</span></label>
                      </li>

                      <li class="color-red">
                        <input type="radio" data-set="radio-color-set" name="radio-color-set1" id="radio-color-set1-red" class="red" />
                        <label for="radio-color-set1-red"><span>Red</span></label>
                      </li>

                      <li class="color-yellow">
                        <input type="radio" data-set="radio-color-set" name="radio-color-set1" id="radio-color-set1-yellow" class="yellow" />
                        <label for="radio-color-set1-yellow"><span>Yellow</span></label>
                      </li>
                    </ul>
                  </li>
                </ul>
              </nav>
            </form>
          </div>

        </div>
        <div class="col-xs-6">
          
          <div class="menu-group">
            <form id="form2" role="form" class="radio-sizes">
              <span class="menu-block radio-display" data-size="medium"></span>
              <a href="" class="menu-trigger"><span class="icon-arrow-down"></span></a>
              <nav class="menu-dropdown menu-dropdown1 closed" role="navigation">
                <ul class="menu-sizes">
                  <li>Sizes</li>
                  <li class="divider"></li>
                  <li>
                    <input type="radio" data-set="radio-size-set" name="radio-size-set1" id="radio-size-set1-small" class="small" />
                    <label for="radio-size-set1-small"><span>Small</span></label>
                  </li>
                  <li>
                    <input type="radio" data-set="radio-size-set" name="radio-size-set1" id="radio-size-set1-medium" class="medium" />
                    <label for="radio-size-set1-medium"><span>Medium</span></label>
                  </li>
                  <li>
                    <input type="radio" data-set="radio-size-set" name="radio-size-set1" id="radio-size-set1-large" class="large" />
                    <label for="radio-size-set1-large"><span>Large</span></label>
                  </li>
                  <li>
                    <input type="radio" data-set="radio-size-set" name="radio-size-set1" id="radio-size-set1-extra-large" class="extra-large" />
                    <label for="radio-size-set1-extra-large"><span>Extra Large</span></label>
                  </li>
                </ul>
              </nav>
            </form>
          </div>

        </div>
      </div>
      <div class="row">
        <hr />
        <div class="col-md-12">

          <p>
            <a href="" class="btn btn-primary btn-lg">Default button</a>
            <a href="" class="btn btn-default btn-lg">Default button</a>
            <a href="" class="btn btn-success btn-lg">Default button</a>
          </p>
          <p>
            <a href="" class="btn btn-primary">Default button</a>
            <a href="" class="btn btn-default">Default button</a>
            <a href="" class="btn btn-success">Default button</a>
          </p>

        </div>
      </div>
      <div class="row">
        <hr />
        <div class="col-xs-6">

          <div class="wishlist-container">
            <span class="wishlist toggled"><span class="icon-heart"></span></span>
            <span class="wish-add"><a href="#">Wishlist</a></span>            
          </div>
        </div>

        <div class="col-xs-6">
          <!-- Empty -->
        </div>
      </div>
      <div class="row">
        <hr />
        <div class="col-lg-12">
          <a href="#" class="btn btn-icon"><span class="icon-tags"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-clock"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-bubble"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-spinner"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-user"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-spinner2"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-settings"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-stats-down"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-earth"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-star"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-star2"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-star3"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-heart"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-arrow-up"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-arrow-right"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-arrow-down"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-arrow-left"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-checkmark"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-share"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-spin"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-bicycle"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-motorcycle"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-outdoor"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-running"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-horse"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-child"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-proviz"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-tag"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-basket"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-cancel"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-checkmark2"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-chronometer"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-alarm-clock"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-list"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-grid"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-grid2"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-truck"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-male"></span></a>
          <a href="#" class="btn btn-icon"><span class="icon-female"></span></a>
        </div>
      </div>
      <div class="row">
        <hr />
        <div class="col-lg-12">
          <a href="#" class="btn btn-icon btn-lg" title="Cycling"><span class="icon-bicycle"></span></a>
          <a href="#" class="btn btn-icon btn-lg" title="Motor Cycling"><span class="icon-motorcycle"></span></a>
          <a href="#" class="btn btn-icon btn-lg" title="Outdoors"><span class="icon-outdoor"></span></a>
          <a href="#" class="btn btn-icon btn-lg" title="Running"><span class="icon-running"></span></a>
          <a href="#" class="btn btn-icon btn-lg" title="Horse Riding"><span class="icon-horse"></span></a>
          <a href="#" class="btn btn-icon btn-lg" title="Child"><span class="icon-child"></span></a>
          <a href="#" class="btn btn-icon btn-lg" title="Proviz"><span class="icon-proviz"></span></a>
        </div>
      </div>
      <div class="row">
        <hr />
        <div class="col-lg-12">

          <span class="cti-dropdown">
              <select class="cti-dropdown-select">
                  <option>Proviz Select</option>
                  <option>Option 1</option>
                  <option>Option 2</option>
                  <option>Option 3</option>
                  <option>Option 4</option>
              </select>
          </span>

        </div>
      </div>
      <div class="row">
        <hr />
        <div class="col-lg-12">
          
          <article class="module">
            <div class="inside-module">
              <div class="bar-full">
                <span class="bar"></span>
                <div class="bar-box">
                  <span class="bar-flip"><span class="icon-star"></span> Awesome Flip!</span>
                </div> 
              </div>
          
              <div class="pad">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
              </div>
            </div>
          </article>

          <article class="module">
            <div class="inside-module">
              <div class="bar-full">
                <span class="bar"></span>
                <div class="bar-box">
                  <span class="bar-flip"><span class="icon-star"></span> Awesome Flip!</span>
                </div> 
              </div>
          
              <div class="pad">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
              </div>
            </div>
          </article>

          <article class="module">
            <div class="inside-module">
              <div class="bar-full">
                <span class="bar"></span>
                <div class="bar-box">
                  <span class="bar-flip"><span class="icon-star"></span> Awesome Flip!</span>
                </div> 
              </div>
          
              <div class="pad">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
              </div>
            </div>
          </article>

        </div>
      </div>
      <div class="row">
        <hr />
        <div class="col-lg-12">
          <ul class="pagination">
            <li class="disabled"><a href="#">&laquo;</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
          </ul>
        </div>
      </div>
      <div class="row">
        <hr />
      </div>
    </div>
  </div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /*
  Presentation Styles
*/
html, body {
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;}

body {
  height: auto; // Fixes bottom padding bug
  padding: 20px;
  margin: 0;
  background: #3d3166;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3d3166), color-stop(100%,#5c2589));
  background: -webkit-linear-gradient(-45deg, #3d3166 0%,#5c2589 100%);
  background:    -moz-linear-gradient(-45deg, #3d3166 0%,#5c2589 100%);
  background:     -ms-linear-gradient(-45deg, #3d3166 0%,#5c2589 100%);
  background:      -o-linear-gradient(-45deg, #3d3166 0%,#5c2589 100%);
  background:         linear-gradient(135deg,  #3d3166 0%,#5c2589 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d3166', endColorstr='#5c2589',GradientType=1 );}

h1 {
  font-family: "Roboto", sans-serif;}

// Helpers
.padding,
.pad {
  padding: 30px 20px 20px 20px;}

.container {
  background: #fff;}

/*
  UI Color Variables
*/
$default-flat:     #b9d9f5;
$default-shadow:   #94bfe4;
$default-highlight:#7db3e1;
$default-shadow2:  #6495be;

$black-flat:       #454545;
$black-shadow:     #000000;
$black-highlight:  #404040;

$blue-flat:        #2aa9e0;
$blue-shadow:      #1a7aa4;
$blue-highlight:   #259ed2;

$orange-flat:      #eb8046;
$orange-shadow:    #d3672d;
$orange-highlight: #e4783d;

$pink-flat:        #db4286;
$pink-shadow:      #bc3671;
$pink-highlight:   #d23e80;

$red-flat:         #d94134;
$red-shadow:       #ab3329;
$red-highlight:    #cd392c;

$yellow-flat:      #f2d54c;
$yellow-shadow:    #dcb84b;
$yellow-highlight: #e8cc48;

/*
  UI Styles: Font Icons
*/
@font-face {
  font-family: 'proviz';
  src:url('http://cl.ly/3o243B2v0f35/proviz.eot');
  src:url('http://cl.ly/3o243B2v0f35/proviz.eot?#iefix') format('embedded-opentype'),
    url('http://cl.ly/371D431x1M2E/proviz.ttf') format('truetype'),
    url('http://cl.ly/0q1u101a3u1C/proviz.woff') format('woff'),
    url('http://cl.ly/29280f431m36/proviz.svg#proviz') format('svg');
  font-weight: normal;
  font-style: normal;}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'proviz';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  // Better Font Rendering
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}

.icon-globe:before        { content: "\e600";}
.icon-forrst:before       { content: "\e601";}
.icon-tags:before         { content: "\e079";}
.icon-clock:before        { content: "\e0b0";}
.icon-bubble:before       { content: "\e0e2";}
.icon-spinner:before      { content: "\e126";}
.icon-user:before         { content: "\e10a";}
.icon-spinner2:before     { content: "\e125";}
.icon-settings:before     { content: "\e140";}
.icon-stats-down:before   { content: "\e160";}
.icon-earth:before        { content: "\e1da";}
.icon-star:before         { content: "\e20b";}
.icon-star2:before        { content: "\e20a";}
.icon-star3:before        { content: "\e209";}
.icon-heart:before        { content: "\e212";}
.icon-arrow-up:before     { content: "\e29a";}
.icon-arrow-right:before  { content: "\e29b";}
.icon-arrow-right2:before { content: "\e2bd";}
.icon-arrow-down:before   { content: "\e29c";}
.icon-arrow-left:before   { content: "\e29d";}
.icon-checkmark:before    { content: "\e25a";}
.icon-share:before        { content: "\e318";}
.icon-spin:before         { content: "\e602";}
.icon-bicycle:before      { content: "\e603";}
.icon-motorcycle:before   { content: "\e604";}
.icon-outdoor:before      { content: "\e605";}
.icon-running:before      { content: "\e606";}
.icon-horse:before        { content: "\e607";}
.icon-child:before        { content: "\e608";}
.icon-proviz:before       { content: "\e609";}
.icon-tag:before          { content: "\e60a";}
.icon-basket:before       { content: "\e60b";}
.icon-cancel:before       { content: "\e60c";}
.icon-checkmark2:before   { content: "\e60d";}
.icon-chronometer:before  { content: "\e60e";}
.icon-alarm-clock:before  { content: "\e60f";}
.icon-list:before         { content: "\e610";}
.icon-grid:before         { content: "\e611";}
.icon-grid2:before        { content: "\e612";}
.icon-truck:before        { content: "\e613";}
.icon-male:before         { content: "\e614";}
.icon-female:before       { content: "\e615";}

/*
  UI Styles: Pagination
*/
.pagination > li > a,
.pagination > li > span {
  border: none;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  color: #76828f;
  &:hover {
    background: transparent;
    color: #4976a4;}
  }

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
  background-color: #f5f5f5;
  border-radius: 3px;
  box-shadow: 0 2px 0 #e3e3e3;
  color: #76828f;
  font-weight: 700;}

/*
  UI Styles: Basket
*/

.basket-wrap {
  display: block;
  position: relative;
  width: auto;
  // Demo Purposes Only
  background: #222729;
  padding: 20px;
  height: 80px;
  border-radius: 4px;}

  .basket-control {
    display: inline-block;
    float: right; 
    margin: 0;
    padding: 0 0 2px 0;
    &:hover .basket-block > span[class*="icon-"]{
      color: #fefd29;
      -webkit-transition: color 0.5s ease;
         -moz-transition: color 0.5s ease;
          -ms-transition: color 0.5s ease;
           -o-transition: color 0.5s ease;
              transition: color 0.5s ease;}
  }

  .basket-block {
    float: left;
    display: inline;
    position: relative;
    margin: 0;
    width: 40px;
    height: 40px;
    text-align: center;
    background: #3f454d;
    border-right: 1px solid #2a2d31;
    border-radius: 4px 0 0 4px;
    & > span[class*="icon-"] {
      display: block;
      width: 40px;
      height: 40px;
      text-align: center;
      color: #69727e;
      font-size: 18px;
      line-height: 40px;
      -webkit-transition: color 0.25s ease;
         -moz-transition: color 0.25s ease;
          -ms-transition: color 0.25s ease;
           -o-transition: color 0.25s ease;
              transition: color 0.25s ease;}
    }

  .basket-trigger {
    float: left;
    display: inline;
    position: relative;
    margin: 0;
    height: 40px;
    line-height: 40px;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 0 15px;
    background: #34393f;
    border-radius: 0 4px 4px 0;}

    .basket-trigger a {
      display: block;
      text-decoration: none;}

    .basket-title {
      color: #fefd29;
      margin-right: 10px;}

    .basket-content {
      color: #fff;}

    .basket-items {
      color: #6c7a8d;}

// Prompt
.basket-prompt {
  float: right;
  display: none;
  text-align: right;
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #6c7a8d;
  padding: 0;
  margin-right: 20px;
  line-height: 40px;
  &.show {
    display: inline-block;
    -webkit-animation: fly-out 0.5s 1 ease;
       -moz-animation: fly-out 0.5s 1 ease;
         -o-animation: fly-out 0.5s 1 ease;
            animation: fly-out 0.5s 1 ease;}
  span {
    font-size: 16px;
    color: #fff;}
}

@-webkit-keyframes fly-out {
  0%   {
    opacity: 0;
    -webkit-transform: translate3d(20px,0,0);}
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);}
}
@-moz-keyframes fly-out {
  0%   {
    opacity: 0;
    -moz-transform: translate3d(20px,0,0);}
  100% {
    opacity: 1;
    -moz-transform: translate3d(0,0,0);}
}
@-o-keyframes fly-out {
  0%   {
    opacity: 0;
    -o-transform: translate3d(20px,0,0);}
  100% {
    opacity: 1;
    -o-transform: translate3d(0,0,0);}
}
@keyframes fly-out {
  0%   {
    opacity: 0;
    -webkit-transform: translate3d(20px,0,0); // Chrome Fix
            transform: translate3d(20px,0,0);}
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0); // Chrome Fix
            transform: translate3d(0,0,0);}
}

// Basket Preview Styles
.basket-preview {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 2px;
  background: #fff;
  width: 245px;
  padding: 15px;
  border: 1px solid #c6c6c6;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  z-index: 2000;}

  .basket-preview.show {
    display: block;
    -webkit-animation: fly-down 0.5s 1 ease;
       -moz-animation: fly-down 0.5s 1 ease;
         -o-animation: fly-down 0.5s 1 ease;
            animation: fly-down 0.5s 1 ease;}

  @-webkit-keyframes fly-down {
  0%   {
    opacity: 0;
    -webkit-transform: translate3d(0,10px,0);}
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);}
  }
  @-moz-keyframes fly-down {
    0%   {
      opacity: 0;
      -moz-transform: translate3d(0,10px,0);}
    100% {
      opacity: 1;
      -moz-transform: translate3d(0,0,0);}
  }
  @-o-keyframes fly-down {
    0%   {
      opacity: 0;
      -o-transform: translate3d(0,10px,0);}
    100% {
      opacity: 1;
      -o-transform: translate3d(0,0,0);}
  }
  @keyframes fly-down {
    0%   {
      opacity: 0;
      -webkit-transform: translate3d(0,10px,0); // Chrome Fix
              transform: translate3d(0,10px,0);}
    100% {
      opacity: 1;
      -webkit-transform: translate3d(0,0,0); // Chrome Fix
              transform: translate3d(0,0,0);}
  }

  .basket-preview.hide {
    display: none;}

.basket-summary {
  float: left;
  clear: both;
  width: 100%;
  padding: 5px 0;
  border-bottom: 2px solid #f4f4f4;
  text-align: right;
  font-weight: bold;
  font-size: 14px;
  b {
    color: #9facba;}
}

.basket-actions {
  float: left;
  clear: both;
  width: 100%;
  padding: 10px 0 0 0;}

/*
  UI Styles: Product Slider
*/

.pslider-wrapper {
  float: left;
  width: 100%;
  overflow: hidden;}

  .pslider-controls {
    float: left;
    clear: both;
    width: 100%;
    padding: 5px 0;
    border-bottom: 2px solid #f4f4f4;}

    .pslider-controls > span {
      float: left;
      display: inline;
      width: 33%;
      &.pslide-label {
        color: #9facba;
        font-size: 13px;
        text-align: center;}
      &.pslide-next a {
        float: right;
        margin-right: 0;}
      &.pslide-prev a {
        margin-left: 0;}
    }

  .pslider-inside {
    width: 213px;
    height: 94px;
    white-space: nowrap;}

  .pslider {
    margin: 0;
    padding: 0;
    display: block;
    // overflow-x: scroll; // Fallback for IE
    overflow: hidden;

    li {
      float: left;
      display: inline;
      width: 213px;
      height: 94px;
      background: #f5f5f5;
      &:nth-child(even) {
        background: #eee;}
      }
  }

/*
  UI Styles: Checkbox Core
*/

input[type="checkbox"],
input[type="checkbox"]:active,
input[type="checkbox"]:focus,
input[type="checkbox"]:checked {
  display: none;}

input[type="checkbox"]:disabled,
input[type="checkbox"]:disabled + label span {
  cursor: not-allowed;}

input[type="checkbox"] + label span {
  display: inline-block;
  width: 32px;
  height: 30px;
  background: #454545;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  padding: 0;
  margin: 5px;
  border: none;
  -webkit-backface-visibility: hidden; // Chrome Flicker Fix
  -webkit-appearance: none;
     -moz-appearance: none;
      -ms-appearance: none;
       -o-appearance: none;
          appearance: none;
  -webkit-transition: .075s;
     -moz-transition: .075s;
      -ms-transition: .075s;
       -o-transition: .075s;
          transition: .075s;
  box-shadow: 0 2px 0 #000;}

  input[type="checkbox"]:checked + label span:after {
    cursor: pointer; // Just in case!
    display: block;
    position: absolute;
    top: -4px;
    left: -4px;
    width: 40px;
    height: 40px;
    box-shadow: inset 0 0 0 2px #d0d0d0;
    border-radius: 4px;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    font-family: "proviz";
    content: "\e25a";
    color: rgba(255,255,255,0.3);
    -webkit-backface-visibility: hidden; // Chrome Flicker Fix
    -webkit-transition: .045s;
       -moz-transition: .045s;
        -ms-transition: .075s;
         -o-transition: .045s;
            transition: .045s;}

    input[type="checkbox"]:checked + label span:active::after {
      height: 38px;}

/*
  UI Styles: Checkbox Colors
*/

input[type="checkbox"].black + label span {
  background: $black-flat;
  box-shadow: 0 2px 0 $black-shadow;
  &:active {
    top: 2px;
    box-shadow: 0 0px 0 $black-shadow;}
}

input[type="checkbox"].blue + label span {
  background: $blue-flat;
  box-shadow: 0 2px 0 $blue-shadow;
  &:active {
    top: 2px;
    box-shadow: 0 0px 0 $blue-shadow;}
}

input[type="checkbox"].orange + label span {
  background: $orange-flat;
  box-shadow: 0 2px 0 $orange-shadow;
  &:active {
    top: 2px;
    box-shadow: 0 0px 0 $orange-shadow;}
}

input[type="checkbox"].pink + label span {
  background: $pink-flat;
  box-shadow: 0 2px 0 $pink-shadow;
  &:active {
    top: 2px;
    box-shadow: 0 0px 0 $pink-shadow;}
}

input[type="checkbox"].red + label span {
  background: $red-flat;
  box-shadow: 0 2px 0 $red-shadow;
  &:active {
    top: 2px;
    box-shadow: 0 0px 0 $red-shadow;}
}

input[type="checkbox"].yellow + label span {
  background: $yellow-flat;
  box-shadow: 0 2px 0 $yellow-shadow;
  &:active {
    top: 2px;
    box-shadow: 0 0px 0 $yellow-shadow;}
}

/*
  UI Styles: Checkbox Sizes
*/

input[type="checkbox"].size + label span {
  background: #b9d9f5;
  box-shadow: 0 2px 0 #94bfe4;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  line-height: 32px;
  font-size: 16px;
  color: #fff;
  &:hover {
    background: #7db3e1;
    box-shadow: 0 2px 0 #6495be;}
  &:active {
    top: 2px;
    box-shadow: 0 0px 0 #94bfe4;}
}

  input[type="checkbox"]:checked.size + label span {
    content: "";
    color: #fff;
    background: #7db3e1;
    box-shadow: 0 2px 0 #6495be;
  }

  input[type="checkbox"]:checked.size + label span:after {
    content: "";
    color: rgba(255,255,255,0.3);
  }
  
  // Disabled
  input[type="checkbox"]:disabled.size + label span {
    opacity: 0.4;
    &:hover {
      background: #b9d9f5;
      box-shadow: 0 2px 0 #94bfe4;}
    &:active {
      top: 0;
      box-shadow: 0 2px 0 #94bfe4;}
  }

/*
  UI Styles: Menu Groups
*/

.menu-group {
  display: inline-block;
  position: relative;
  height: 30px;
  width: 65px;
  margin: 5px;}

  .menu-block,
  .menu-trigger {
    float: left;
    display: inline;
    position: relative;
    width: 32px;
    height: 30px;
    background: #454545;
    border-radius: 4px 0 0 4px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    box-shadow: 0 2px 0 #000;
    text-align: center;
    line-height: 34px;
    color: #fff;
    color: rgba(255,255,255,0.5);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;}
  
  .menu-block {
    cursor: auto;}

  .menu-trigger {
    border-radius: 0 4px 4px 0;
    box-shadow: 0 2px 0 #000, inset 1px 0 0 rgba(0,0,0,0.2);
    &:hover {
      text-decoration: none;
      color: #fff;}
    &:active,&.active {
      color: #ccc;
      background: #323232;
      height: 32px;
      box-shadow:
        0 0 0 #000, // Remove Bottom Shadow
        inset 0 2px 0 rgba(0,0,0,1),  // Add Top Shadow
        inset 1px 0 0 rgba(0,0,0,0.2); // Keep Left Shadow
      line-height: 32px;
      -webkit-backface-visibility: hidden; // Chrome Flicker Fix
      -webkit-transition: .045s;
         -moz-transition: .045s;
          -ms-transition: .045s;
           -o-transition: .045s;
              transition: .045s;}
  }

  .menu-dropdown {
    position: absolute;
    z-index: 1000;
    top: 35px;
    left: 0px;
    float: left;  
    min-width: 170px;
    padding: 0;
    border: 1px solid rgba(0,0,0,0.5);
    box-shadow: 0 5px 5px rgba(0,0,0,1);
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
            box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    background-clip: padding-box;
    &.closed {
      display: none;}
    &.open {
      display: block;}
  }

  ul.menu-colors,
  ul.menu-sizes,
  ul.menu-colors li,
  ul.menu-sizes li {
    list-style-type: none;
    margin: 0;
    padding: 0;}

  ul.menu-colors,
  ul.menu-sizes {
    padding: 5px 0;}
  
  ul.menu-colors li,
  ul.menu-sizes li {
    display: list-item;
    text-align: -webkit-match-parent;

    input[type="radio"] {
      display: none;}

    label {
      display: block;
      width: 100%;
      height: 100%;
      text-indent: -9999px;
      cursor: pointer;}
  }
  
  ul.menu-sizes li {
    padding: 3px 20px;
    &:hover {
      background: #f5f5f5;}
    label {
      text-indent: 0px;
      font-weight: normal;
      margin: 0;}
  }

  ul.menu-colors li.divider,
  ul.menu-sizes li.divider {
    height: 1px;
    margin: 9px 0;
    padding: 0;
    overflow: hidden;
    background-color: #e5e5e5;}

    ul.menu-colors li > ul,
    ul.menu-sizes li > ul {
      margin: 0;
      padding: 0 20px;}

  ul.menu-colors li > span.dropdown-label,
  ul.menu-sizes li > span.dropdown-label {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: nowrap;}

  // Color Overrides
  ul.menu-colors li[class*="color-"] {
    float: left;
    display: inline;
    position: relative;
    width: 26px;
    height: 26px;
    background: #454545;
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
    margin: 0 5px 5px 0;
    border: none;
    outline: none;}

  // Colors
  ul.menu-colors li.color-black {
    background: $black-flat;}
    
  ul.menu-colors li.color-blue {
    background: $blue-flat;}
    
  ul.menu-colors li.color-orange {
    background: $orange-flat;}
    
  ul.menu-colors li.color-pink {
    background: $pink-flat;}
    
  ul.menu-colors li.color-red {
    background: $red-flat;}
    
  ul.menu-colors li.color-yellow {
    background: $yellow-flat;}

/*
  UI Styles: Buttons
*/

.btn-default {
  color: #ffffff;
  background-color: #b9d9f5;
  border-color: transparent;
  box-shadow: 0 2px 0 #94bfe4;}

.btn-primary {
  color: #ffffff;
  background-color: #4976a4;
  border-color: transparent;
  box-shadow: 0 2px 0 #395d82;}

.btn-success {
  color: #ffffff;
  background-color: #67b96f;
  border-color: transparent;
  box-shadow: 0 2px 0 #4b9b53;}

.btn-warning {
  color: #ffffff;
  background-color: #f5b159;
  border-color: transparent;
  box-shadow: 0 2px 0 #df9c44;}

.btn {
  position: relative;
  top: 0;
  border: none;
  padding: 0 15px;
  margin: 5px;
  height: 30px;
  line-height: 30px;
  outline: none;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  -webkit-backface-visibility: hidden; // Chrome Flicker Fix
  &.btn-lg {
    border-radius: 4px;
    padding: 0 20px;
    height: 44px;
    line-height: 44px;}
  &.btn-icon {
    font-size: 18px;
    height: 29px;
    width: 32px;
    line-height: 32px;
    padding: 0;
    text-align: center;
    color: #fff;
    background: $default-flat;
    margin: 5px;
    box-shadow: 0 2px 0 $default-shadow;
    &:hover {
      background: $default-highlight;
      box-shadow: 0 2px 0 $default-shadow2;}
    &.btn-lg {
      width: auto;
      font-size: 32px;
      height: 44px;
      line-height: 44px;
      padding: 0 25px;}
  }
}

.btn:active,
.btn.active {
  top: 2px;
  outline: 0;
  -webkit-backface-visibility: hidden; // Chrome Flicker Fix
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: .075s;
     -moz-transition: .075s;
      -ms-transition: .075s;
       -o-transition: .075s;
          transition: .075s;}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.open .dropdown-toggle.btn {
  color: #ffffff;
  background-color: #b0d3f1;
  border-color: transparent;}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #ffffff;
  background-color: #406e9c;
  border-color: transparent;}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  color: #ffffff;
  background-color: #5db265;
  border-color: transparent;}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  color: #ffffff;
  background-color: #f3a643;
  border-color: transparent;}

/*
  UI Styles: Select Boxes
*/

.cti-dropdown-select{
  font-size: inherit; /* inherit size from .custom-dropdown */
  padding: .5em; /* add some space*/
  margin: 0; /* remove default margins */
  background-color: #f5f5f5;
  box-shadow: 0 2px 0 #e3e3e3;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  color: #76828f;}       

@supports (pointer-events: none) and
((-webkit-appearance: none) or
(-moz-appearance: none) or
(appearance: none)) {
  
  .cti-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;}
  
  .cti-dropdown-select {
    padding-right: 2.5em;     
    border: 0;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;}
  
  .cti-dropdown::before,
  .cti-dropdown::after {
    content: "";
    position: absolute;
    pointer-events: none;}
  
  .cti-dropdown::after { /*  Proviz dropdown arrow */
    font-family: "proviz", sans-serif;
    content: "\e29c";
    height: 1em;
    font-size: 16px;
    line-height: 1;
    right: 7px;
    top: 50%; 
    margin-top: -.5em;
    color: #76828f;}
  
  .cti-dropdown::before { /*  Proviz dropdown arrow cover */
    width: 2em;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 0 3px 3px 0;
    background-color: #f5f5f5;
    box-shadow: 0 2px 0 #e3e3e3;}
  
  .cti-dropdown-select[disabled] {
    color: rgba(0,0,0,.3);}    
  
  .cti-dropdown::after {
    color: rgba(0,0,0,.4);}
  
  /* FF only temporary & ugly fixes */
  /* the "appearance: none" applied on select still shows a dropdown arrow on Firefox */
  /* https://bugzilla.mozilla.org/show_bug.cgi?id=649849 */
  @-moz-document url-prefix() {
    .cti-dropdown-select { padding-right: .9em }
  } 
  
}

/*
  UI Styles: Add to Wishlist
*/

.wishlist-container {
  display: inline-block;
  .icon-heart {
    background: #fff;
    height: 24px;
    width: 24px;
    float: left;
    display: block;
    border-radius: 50%;
    color: #a5b2bf;
    line-height: 24px;
    text-align: center;
    padding: 0;}
}

  .wishlist.animate span.icon-heart {
    color: #fff;
    background: #ee8b94;
    -webkit-transition: all 0.25s ease;
            transition: all 0.25s ease;
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);}
  
  .wishlist.toggled span.icon-heart {
    color: #a5b2bf;
    background: #fff;
    -webkit-transition: all 0.65s ease;
            transition: all 0.65s ease;
    -webkit-transform: rotateZ(-360deg);
            transform: rotateZ(-360deg);}

.wishlist {
  display: inline-block;
  width: 24px;
  height: 24px;
  -webkit-transition: all 0.25s ease;
          transition: all 0.25s ease;}

.wishlist,
.wishlist span,
.wishlist a {
  color: #a5b2bf;}

.wish-add {
  position: relative;
  display: inline-block;
  width: auto;
  overflow: hidden;}
  
.wish-add a {
  position: relative;
  display: inline-block;
  width: 100%;
  font-family: "Open Sans", sans-serif;
  line-height: 24px;
  white-space: nowrap;
  color: #a5b2bf;
  -webkit-transition: all 0.15s ease;
          transition: all 0.15s ease;

    &.added {
      color: #ee8b94; 
      -webkit-transition: all 0.25s ease;
              transition: all 0.25s ease;}
}

.wish-add.mini a {
  width: 0%;
  -webkit-transition: all 0.25s ease;
          transition: all 0.25s ease;}

/*
  UI Styles: Radio Sizes
*/
.radio-sizes .radio-display,
.radio-sizes .menu-trigger {  
  color: #fff;
  background: $default-flat;
  box-shadow: 0 2px 0 $default-shadow;
  + .menu-trigger {
      box-shadow: 0 2px 0 $default-shadow, inset 1px 0 0 rgba(60,110,160,0.3);
      &:active,
      &.active {
        color: #fff;
        background: $default-shadow;
        box-shadow:
          0 0 0 #000,
          inset 0 2px 0 rgba(60,110,160,0.3),
          inset 1px 0 0 rgba(60,110,160,0.3)}
      &:hover {
        background: #b9d9f5;}
  }
}

.radio-sizes .radio-display {
  &[data-size]{
    text-align: center;
    text-indent: 0px;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 32px;}
  // Small
  &[data-size="small"]:before {
    content: "S";}
  // Medium
  &[data-size="medium"]:before {
    content: "M";}
  // Large
  &[data-size="large"]:before {
    content: "L";}
  // Extra Large
  &[data-size="extra-large"]:before {
    content: "XL";}
}

/*
  UI Styles: Radio Colors
*/

.radio-colors,
.radio-sizes {
  display: inline-block;
  position: relative;
  height: 30px;
  width: 65px;
  margin: 0px;}

.radio-display {
  // Black
  &[data-color="black"] {
    background: $black-flat;
    box-shadow: 0 2px 0 $black-shadow;}
  // Blue
  &[data-color="blue"] {
    background: $blue-flat;
    box-shadow: 0 2px 0 $blue-shadow;
    + .menu-trigger {
      background: $blue-flat;
      box-shadow: 0 2px 0 $blue-shadow, inset 1px 0 0 rgba(0,0,0,0.1);
      &:hover {
        color: #fff;
        background: $blue-highlight;}
      &:active,
      &.active {
        color: #fff;
        background: $blue-shadow;
        box-shadow:
          0 0 0 #000,
          inset 0 2px 0 rgba(0,0,0,0.1),
          inset 1px 0 0 rgba(0,0,0,0.2);}
    }
  }
  // Orange
  &[data-color="orange"] {
    background: $orange-flat;
    box-shadow: 0 2px 0 $orange-shadow;
    + .menu-trigger {
      background: $orange-flat;
      box-shadow: 0 2px 0 $orange-shadow, inset 1px 0 0 rgba(0,0,0,0.1);
      &:hover {
        color: #fff;
        background: $orange-highlight;}
      &:active,
      &.active {
        color: #fff;
        background: $orange-shadow;
        box-shadow:
          0 0 0 #000,
          inset 0 2px 0 rgba(0,0,0,0.1),
          inset 1px 0 0 rgba(0,0,0,0.2);}
    }
  }
  // Pink
  &[data-color="pink"] {
    background: $pink-flat;
    box-shadow: 0 2px 0 $pink-shadow;
    + .menu-trigger {
      background: $pink-flat;
      box-shadow: 0 2px 0 $pink-shadow, inset 1px 0 0 rgba(0,0,0,0.1);
      &:hover {
        color: #fff;
        background: $pink-highlight;}
      &:active,
      &.active {
        color: #fff;
        background: $pink-shadow;
        box-shadow:
          0 0 0 #000,
          inset 0 2px 0 rgba(0,0,0,0.1),
          inset 1px 0 0 rgba(0,0,0,0.2);}
    }
  }
  // Red
  &[data-color="red"] {
    background: $red-flat;
    box-shadow: 0 2px 0 $red-shadow;
    + .menu-trigger {
      background: $red-flat;
      box-shadow: 0 2px 0 $red-shadow, inset 1px 0 0 rgba(0,0,0,0.1);
      &:hover {
        color: #fff;
        background: $red-highlight;}
      &:active,
      &.active {
        color: #fff;
        background: $red-shadow;
        box-shadow:
          0 0 0 #000,
          inset 0 2px 0 rgba(0,0,0,0.1),
          inset 1px 0 0 rgba(0,0,0,0.2);}
    }
  }
  // Yellow
  &[data-color="yellow"] {
    background: $yellow-flat;
    box-shadow: 0 2px 0 $yellow-shadow;
    + .menu-trigger {
      background: $yellow-flat;
      box-shadow: 0 2px 0 $yellow-shadow, inset 1px 0 0 rgba(0,0,0,0.1);
      &:hover {
        color: #fff;
        background: $yellow-highlight;}
      &:active,
      &.active {
        color: #fff;
        background: $yellow-shadow;
        box-shadow:
          0 0 0 #000,
          inset 0 2px 0 rgba(0,0,0,0.1),
          inset 1px 0 0 rgba(0,0,0,0.2);}
    }
  }
}

/*
  UI Styles: Letterbox Load
*/
.module {
  float: left;
  position: relative;
  clear: both;
  width: 100%;
  margin-bottom: 15px;
  display: block;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0, 0.1);}

  .module p {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    color: #444;}
  
  // Safety
  .inside-module {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0,0,0);
       -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
         -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);}

// Top Bars
article .bar-full {
  float: left;
  position: relative;
  width: 100%;
  height: 10px;
  background: #f7f7f6;}

article .bar {
  display: block;
  width: 50px;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  background: #769ff4;}

article .bar-box {
  display: none;
  position: absolute;
  top: 10px;
  width: 160px;
  height: 30px;}

  article .bar-box .bar-flip {
  display: block;
  position: absolute;
  top: 0px;
  width: 160px;
  height: 30px;
  padding: 0 20px;
  background: #6589d4;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 600;
  color: #fff;
  line-height: 30px;
  
  -webkit-transform-origin: 50% 0%;
     -moz-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
       -o-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-transform: perspective(250px) rotateX(-90deg);
     -moz-transform: perspective(250px) rotateX(-90deg);
      -ms-transform: perspective(250px) rotateX(-90deg);
       -o-transform: perspective(250px) rotateX(-90deg);
          transform: perspective(250px) rotateX(-90deg);
  -webkit-transition: 0.2s linear 0.2s;
     -moz-transition: 0.2s linear 0.2s;
      -ms-transition: 0.2s linear 0.2s;
       -o-transition: 0.2s linear 0.2s;
          transition: 0.2s linear 0.2s;}

  article:hover .bar-flip {
  -webkit-transform: perspective(350px) rotateX(0deg);
     -moz-transform: perspective(350px) rotateX(0deg);
      -ms-transform: perspective(350px) rotateX(0deg);
       -o-transform: perspective(350px) rotateX(0deg);
          transform: perspective(350px) rotateX(0deg);
  -webkit-transition: 0.2s linear 0s;
     -moz-transition: 0.2s linear 0s;
      -ms-transition: 0.2s linear 0s;
       -o-transition: 0.2s linear 0s;
          transition: 0.2s linear 0s;}

.come-in .bar,
.already-visible .bar {
  width: 160px;
  -webkit-transition: width 0.35s ease-in;
     -moz-transition: width 0.35s ease-in;
      -ms-transition: width 0.35s ease-in;
       -o-transition: width 0.35s ease-in;
          transition: width 0.35s ease-in;}

.come-in .bar-box,
.already-visible .bar-box{
  display: block;} 

// Trigger Animations
.module.come-in { 
  -webkit-transform: translateY(100px);
     -moz-transform: translateY(100px);
      -ms-transform: translateY(100px);
       -o-transform: translateY(100px);
          transform: translateY(100px);
  -webkit-animation: google 0.4s ease forwards;
     -moz-animation: google 0.4s ease forwards;
       -o-animation: google 0.4s ease forwards;
          animation: google 0.4s ease forwards;}

.module,
.module.already-visible { 
  -webkit-transform: translateY(0px) perspective(200px) rotatex(0deg);
          transform: translateY(0px) perspective(200px) rotatex(0deg);
  -webkit-animation: none;
     -moz-animation: none;
       -o-animation: none;
          animation: none;}

// Animate
@-webkit-keyframes google {
  0%   { -webkit-transform: translateY(100px) perspective(200px) rotatex(30deg);}
  100% { -webkit-transform: translateY(0px) perspective(200px) rotatex(0deg);} 
}
@-moz-keyframes google {
  0%   { -moz-transform: translateY(100px) perspective(200px) rotatex(30deg);}
  100% { -moz-transform: translateY(0px) perspective(200px) rotatex(0deg);} 
}
@-o-keyframes google {
  0%   { -o-transform: translateY(100px) perspective(200px) rotatex(30deg);}
  100% { -o-transform: translateY(0px) perspective(200px) rotatex(0deg);} 
}
@keyframes google {
  0%   {
    -webkit-transform: translateY(100px) perspective(200px) rotatex(30deg); // Chrome Fix
    transform: translateY(100px) perspective(200px) rotatex(30deg);}
  100% {
    -webkit-transform: translateY(0px) perspective(200px) rotatex(0deg); // Chrome Fix
    transform: translateY(0px) perspective(200px) rotatex(0deg);}
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*
  UI Styles: Menu Groups
*/
function menuGroup(){
  $('html').click(function() {
    if ($(".menu-trigger").hasClass("active")){
      $(".menu-trigger").removeClass("active");
    }
    if ($(".menu-dropdown").hasClass("open")){
      $(".menu-dropdown").removeClass("open").addClass("closed");
    }
  });
  // Open menu
  $(".menu-trigger").click(function(event) {
    event.preventDefault();
    event.stopPropagation();
    $(this).toggleClass("active");
    if($(this).next('.menu-dropdown').hasClass("closed")){
      $(this).next(".menu-dropdown").removeClass("closed").addClass("open");
    }
    $("input[name*=radio-color-set").change(function(){
      var parent = $(this).parent(".radio-colors");
      var selected = $(" input[type=radio]:checked", parent);
      $(".radio-display", parent).attr("data-color", selected.attr("class"));
    });
  });
}

/*
  UI Styles: Bootstrap Tooltips
*/
function bsTooltips(){
  $('.btn').tooltip();
}

/*
  UI Styles: Dropdown Basket
*/
function dropBasket(){
  $(".basket-control").hover(function(event){
    event.preventDefault();
    $(".basket-prompt").toggleClass("show");
  });
  $("#basket-controller").click(function(event){
    event.preventDefault();
    $(".basket-preview").toggleClass("show");
  });
}

/*
  UI Styles: Product Slider
*/
function pSlider(){

  // Calculate Width
  var sum = 0;
  $("#pslider li.pslide").each(function(){
    sum += ($(this).width());
  });
  $("#pslider").width(sum);

  // First Slide
  var startSlide = $("#pslider li.active").next().attr("id");

  // Total Items
  var totalItems = $('#pslider li').length;

  // Settings
  $(".pslide-label").html("1 of " + totalItems);
  $(".prev").addClass("disabled");
  $(".next").removeClass("disabled");

  // Slider Control: Next
  var slide = 0;

  $(".next").click(function(event){
    event.preventDefault();

    // Enable Prev if disabled
    $(".prev").removeClass("disabled");

    // Active Slides (prev/next)
    var $targetItem = $("#pslider li.active").next();
    $targetItem.addClass("active");
    var $prevItem = $("#pslider li.active").prev("li");
    $prevItem.removeClass("active");

    // Current Item
    var $currentItem = $("#pslider li.active");
    var currentSlide = $currentItem.attr("data-slide");

    // Next Slide Number
    var nextSlide = $targetItem.attr("data-slide");

    // label
    if (currentSlide == totalItems) {
      $(".pslide-label").html(currentSlide + " of " + totalItems);
      $(this).addClass("disabled");
    }
    else {
      $(".pslide-label").html(nextSlide + " of " + totalItems);
    }

    // Slide
    if (sum !== (slide+213)) {
      slide += 213;
    }
    
    $(".pslider li").css({
      'transform': 'translate3d(-' + slide + 'px,0,0)',
      'transition': 'all 0.35s ease-out'
    });

  });

  // Slider Control: Prev
  $(".prev").click(function(event){
    event.preventDefault();

    // Active Slides (prev/next)
    var $targetItem = $("#pslider li.active").prev();
    $targetItem.addClass("active");
    var $prevItem = $("#pslider li.active").next("li");
    $prevItem.removeClass("active");

    // Current Item
    var $currentItem = $("#pslider li.active");
    var currentSlide = $currentItem.attr("data-slide");

    // Next Slide Number
    var nextSlide = $targetItem.attr("data-slide");

    // label
    if (currentSlide == "1") {
      $(".pslide-label").html(currentSlide + " of " + totalItems);
      $(this).addClass("disabled");
    }
    else {
      $(".pslide-label").html(nextSlide + " of " + totalItems);
    }

    // alert("Sum: " + sum + " - Slide Pos: " + slide);
    if (sum !== (slide+213)) {
      slide -= 213;
    }
    else if (slide == (sum-213)) {
      slide -= 213;
       $(".next").removeClass("disabled");    
    }
    else {
      slide = 0;
    }
    $(".pslider li").css({
      'transform': 'translate3d(-' + slide + 'px,0,0)',
      'transition': 'all 0.35s ease-out'
    });

  });

}

/*
  UI Styles: Wishlist
*/
function wishlist(){
  $('.wish-add').bind('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
    $('.wish-add a').toggleClass('added');
    $('.wishlist').toggleClass('toggled animate');
  });
}

/*
  UI Styles: Radio Sizes
*/
function radioSizes(){
  $("input").attr("data-set","radio-size-set").change(function(){ // Just use a data-attribute
    var parent = $(this).closest("form");
    var selected = $(" input[type=radio]:checked", parent);
    $(".radio-display", parent).attr("data-size", selected.attr("class"));
  });
}

/*
  UI Styles: Radio Colors
*/
function radioColor(){
  $("input").attr("data-set","radio-color-set").change(function(){
    var parent = $(this).closest("form");
    var selected = $(" input[type=radio]:checked", parent);
    $(".radio-display", parent).attr("data-color", selected.attr("class"));
  });
}

/*
  UI Styles: Visible Elements
*/
function visibleElements(){

  $.fn.visible = function(partial) {
    var $t            = $(this),
        $w            = $(window),
        viewTop       = $w.scrollTop(),
        viewBottom    = viewTop + $w.height(),
        _top          = $t.offset().top,
        _bottom       = _top + $t.height(),
        compareTop    = partial === true ? _bottom : _top,
        compareBottom = partial === true ? _top : _bottom;
    
    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
  };
    
}

function visibleStuff(){
  var win = $(window);
  var allMods = $(".module");

  allMods.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("already-visible"); 
    } 
  });

  win.scroll(function(event) { 
    allMods.each(function(i, el) {
      var el = $(el);
      if (el.visible(true)) {
        el.addClass("come-in"); 
      } 
    });
  }); 
}

jQuery(document).ready(function(){
  bsTooltips();
  radioSizes();
  radioColor();
  dropBasket();
  wishlist();
  pSlider();
  menuGroup();
  visibleElements();
  visibleStuff();
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................