Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
    <div id="account-bar">
    <div class="customerInfo">Welcome, John Doe!<span>John Doe</span></div>
    </div>    <div class="page-wrap">
        <header id="masthead" class="masthead" role="banner">
            <div class="container-fluid">
                <h1 class="logo">
        	        <a href="/">
                        <img src="https://github.com/brianlellis/Gorilla-Interview/blob/master/src/assets/images/logo.gif?raw=true" alt="" />
                    </a>
                </h1>
        	    <nav role="navigation">
        	    	<a href="#">Browse</a>
        	    	<a href="#">About</a>
        	    	<a href="#">Contact Us</a>
        	    </nav>
        	    <div id="minicart">adasd</div>
        	    <input id="searchInput" type="text" name="search" placeholder="Search">
            </div>
        </header>
        <div id="breadcrumbs">
        <span class="crumb">Home</span><span class="crumb">Category Name</span><span class="lastCrumb">Subcategory Name</span>
        </div>
        <h1>Subcategory Name</div>
        <div id="content" class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="sidebar" role="complementary">
                        <aside>
                        <h2>Shop By</h2>
                        <ul id="selectedAttr">
                        	<h3>Applied:</h3>
                        </ul>
                        <ul id="attrList">
                        </ul>
                        </aside>                    </div>
                    <div class="main" role="main">
                        <ul id="gridViewSel">
                        	<li href="#" id="gidView" class="spriteGrid selected"></li>
                        	<li href="#" id="rowsView" class="spriteRows"></li>
                        </ul>
                        
                        <div id="positionDropdown">
                        </div>
                        <div id="viewDropdown">
                        </div>
                        <div id="gridViewAmount">1-15 of 22</div>
                        <div id="gridPageCount">1 of 2</div>
                        </div>
                        <ul id="productGrid" class="prodLimit15">
                        </ul>                    </div>
                </div>
            </div>
        </div>
        <footer id="footer" class="footer" role="contentinfo">
        	<div  class="topFooter">
        		<div class="col1">
        			<h4>About Us</h4>
        			<a href="#">Our Story</a>
        			<a href="#">Offers</a>
        			<a href="#">Blog</a>
        		</div>
        		<div class="col2">
        			<h4>Help</h4>
        			<a href="#">Contact Us</a>
        			<a href="#">Shipping Info</a>
        			<a href="#">Privacy Policy</a>
        			<a href="#">Sitemap</a>
        		</div>
        		<div class="col3">
        			<h4>Connect</h4>
        			<a href="#" class="spriteYoutube social"></a>
        			<a href="#" class="spriteInstagram social"></a>
        			<a href="#" class="spritePinterest social"></a>
        			<a href="#" class="spriteFacebook social"></a>
        			<a href="#" class="spriteTwitter social"></a>
        		</div>
        		<div class="col4">
        			<h4>Newsletter Signup</h4>
        			<input type="text" id="newsletterInput" name="newsletter" placeholder="Enter Email">
        			<button id="newsletterButton">Sign Up</button>
        		</div>
        	</div>
            <div class="bottomFooter">
        
                <p class="copyright">
                    Copyright &copy; 2017 Gorilla
                </p>
                <address>
                    111 W Jackson Blvd # 300, Chicago, IL 60604
                </address>
                <a href="#account-bar" id="backToTop" class="scroll" data-speed="400" href="#top">Back to top</a>
            </div>
        </footer>    </div>
 

              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,500,700,900");
a, p, span, h1, h2, h3, h4, h5, h6, strong, b, i {
  font-family: 'Roboto', sans-serif; }

/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block; }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address styling not present in IE 8/9.
 */
[hidden] {
  display: none; }

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em; }

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre-wrap; }

/**
 * Set consistent quote types.
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* ==========================================================================
   Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
  border: 0; }

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden; }

/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

.page-wrap,
.content,
.topFooter,
.bottomFooter {
  max-width: 1170px;
  margin: 0 auto; }

.page-wrap {
  max-width: 1400px; }
  .page-wrap > h1 {
    padding-left: 8.25%; }

#content {
  margin-bottom: 165px; }

.spriteUpArrow,
#backToTop:after {
  background: url("https://github.com/brianlellis/Gorilla-Interview/blob/master/src/assets/images/spritesheet.png?raw=true") no-repeat -242px -1px;
  background-size: 262px 23px;
  width: 20px;
  height: 20px; }

.spriteHorizArrow,
.customerInfo span::after,
#gridPageCount::before,
#gridPageCount::after {
  background: url("https://github.com/brianlellis/Gorilla-Interview/blob/master/src/assets/images/spritesheet.png?raw=true") no-repeat -210px -1px;
  background-size: 262px 23px;
  width: 11px;
  height: 20px; }

.spriteX,
.attrSel::after {
  background: url("https://github.com/brianlellis/Gorilla-Interview/blob/master/src/assets/images/spritesheet.png?raw=true") no-repeat -183px -1px;
  background-size: 262px 23px;
  width: 20px;
  height: 24px; }

.spriteMagnify {
  background: url("https://github.com/brianlellis/Gorilla-Interview/blob/master/src/assets/images/spritesheet.png?raw=true") no-repeat -179px -1px;
  background-size: 262px 23px;
  width: 20px;
  height: 20px; }

.spriteYoutube {
  background: url("https://github.com/brianlellis/Gorilla-Interview/blob/master/src/assets/images/spritesheet.png?raw=true") no-repeat -138px -1px;
  background-size: 262px 23px;
  width: 26px;
  height: 20px; }

.spriteInstagram {
  background: url("https://github.com/brianlellis/Gorilla-Interview/blob/master/src/assets/images/spritesheet.png?raw=true") no-repeat -115px -1px;
  background-size: 262px 23px;
  width: 21px;
  height: 20px; }

.spritePinterest {
  background: url("https://github.com/brianlellis/Gorilla-Interview/blob/master/src/assets/images/spritesheet.png?raw=true") no-repeat -246px -1px;
  background-size: 262px 23px;
  width: 13px;
  height: 20px; }

.spriteFacebook {
  background: url("https://github.com/brianlellis/Gorilla-Interview/blob/master/src/assets/images/spritesheet.png?raw=true") no-repeat -98px -1px;
  background-size: 262px 23px;
  width: 10px;
  height: 20px; }

.spriteTwitter {
  background: url("https://github.com/brianlellis/Gorilla-Interview/blob/master/src/assets/images/spritesheet.png?raw=true") no-repeat -70px -1px;
  background-size: 262px 23px;
  width: 25px;
  height: 20px; }

.spriteGrid {
  background: url("https://github.com/brianlellis/Gorilla-Interview/blob/master/src/assets/images/spritesheet.png?raw=true") no-repeat -46px -1px;
  background-size: 270px 23px;
  width: 23px;
  height: 22px; }

.spriteRows {
  background: url("https://github.com/brianlellis/Gorilla-Interview/blob/master/src/assets/images/spritesheet.png?raw=true") no-repeat -24px -1px;
  background-size: 270px 23px;
  width: 24px;
  height: 22px; }

.spriteCart,
#minicart::before {
  background: url("https://github.com/brianlellis/Gorilla-Interview/blob/master/src/assets/images/spritesheet.png?raw=true") no-repeat 0 -1px;
  background-size: 262px 20px;
  width: 23px;
  height: 22px; }

#account-bar {
  width: 100%;
  background-color: #252525;
  height: 42px;
  margin-bottom: 40px; }
  #account-bar .customerInfo {
    float: right;
    color: #FFF;
    line-height: 40px;
    margin-right: 40px;
    width: 260px; }
    #account-bar .customerInfo span {
      margin-left: 10%; }
      #account-bar .customerInfo span::after {
        content: '';
        background: url("https://github.com/brianlellis/Gorilla-Interview/blob/master/src/assets/images/whiteArrow.png?raw=true") no-repeat 0 0;
        transform: rotate(90deg);
        background-size: 6px 11px;
        width: 6px;
        height: 11px;
        float: right;
        margin-top: 14px; }

#masthead {
  height: 120px;
  border-bottom: 1px solid #e1e1e1;
  margin-bottom: 30px;
  padding: 0 8.25%;
  position: relative; }
  #masthead .logo {
    float: left;
    margin: 0;
    margin-right: 75px;
    line-height: 120px; }
    #masthead .logo img {
      max-width: 160px; }
  #masthead nav {
    float: left; }
    #masthead nav a {
      line-height: 90px;
      display: inline-block;
      color: black;
      text-decoration: none;
      font-weight: 700;
      font-size: 18px;
      font-family: sans-serif;
      margin-right: 65px;
      cursor: pointer; }
      #masthead nav a:hover {
        opacity: 0.7; }
  #masthead #minicart {
    float: right;
    position: absolute;
    background: #000;
    color: #FFF;
    z-index: 99;
    height: 0;
    right: -60px;
    width: 150px;
    top: 62px;
    text-align: center;
    height: 0;
    transition: height 300ms;
    cursor: pointer; }
    #masthead #minicart.active {
      height: 130px;
      opacity: 1; }
      #masthead #minicart.active::before {
        right: 74px; }
    #masthead #minicart::before {
      content: '';
      position: absolute;
      top: -30px; }

#searchInput {
  margin-top: 20px;
  margin-right: -4%;
  width: 285px;
  box-sizing: border-box;
  border: 1px solid #CCC;
  border-radius: 2px;
  font-size: 16px;
  background-color: #FFF;
  padding: 15px 20px 15px 15px;
  font-weight: 300;
  float: right;
  background-size: 11px 10px;
  background: url("https://github.com/brianlellis/Gorilla-Interview/blob/master/src/assets/images/maginfy.png?raw=true") no-repeat 246px 12px; }

/*
 * AUTOCOMPLETE
 */
.autocomplete-suggestions {
  text-align: left;
  cursor: default;
  border: 1px solid #CCC;
  border-top: 0;
  background: #CCC;
  box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
  /* core styles should not be changed */
  position: absolute;
  display: none;
  z-index: 9999;
  max-height: 254px;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box; }

.autocomplete-suggestion {
  position: relative;
  padding: 0 .6em;
  line-height: 23px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.02em;
  color: #333; }
  .autocomplete-suggestion.selected {
    background: #f0f0f0; }
  .autocomplete-suggestion b {
    font-weight: normal;
    color: #1f8dd6; }

#breadcrumbs {
  font-size: 12px;
  padding-left: 115px; }
  #breadcrumbs .crumb {
    margin-right: 10px; }
    #breadcrumbs .crumb::after {
      content: "/";
      margin-left: 10px; }
  #breadcrumbs .lastCrumb {
    color: #CCC; }

.sidebar {
  width: 20%;
  margin-right: 5.5%;
  float: left;
  margin-top: 5px; }
  .sidebar h2 {
    padding-bottom: 40px;
    border-bottom: 1px solid #e1e1e1; }
  .sidebar ul {
    list-style: none;
    padding: 0; }
  .sidebar #selectedAttr {
    margin-top: 40px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #e1e1e1;
    display: none; }
    .sidebar #selectedAttr.active {
      display: block; }
    .sidebar #selectedAttr .attrSel {
      cursor: pointer;
      background: #e1e1e1;
      font-weight: 100;
      font-size: 14px;
      line-height: 40px;
      padding: 0 10px;
      margin-bottom: 10px;
      display: none;
      position: relative; }
      .sidebar #selectedAttr .attrSel::after {
        content: '';
        position: absolute;
        right: 12px;
        top: 9px; }
      .sidebar #selectedAttr .attrSel.active {
        display: block; }
  .sidebar .attrSection {
    margin-bottom: 25px; }
    .sidebar .attrSection h3 {
      margin-bottom: 15px; }
    .sidebar .attrSection .attrItem {
      line-height: 1.5;
      cursor: pointer; }
    .sidebar .attrSection .results {
      margin-left: 10px;
      font-weight: 300; }

.select__box {
  position: relative;
  display: inline-block; }

.select__toolbox {
  cursor: pointer;
  padding: .25em .5em;
  border-radius: 5px;
  border: 1px solid #000; }

.select__label {
  height: 25px;
  line-height: 25px;
  margin-right: 45px; }

.select__arrow {
  position: absolute;
  font-style: normal;
  cursor: pointer;
  right: 0;
  bottom: 0;
  text-align: center;
  width: 40px;
  border-radius: 0 5px 5px 0;
  color: #2d2d2d;
  border-left: 1px solid #000;
  height: 100%; }
  .select__arrow:before {
    content: '';
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #000;
    left: 10px;
    top: 14px; }

.select__dropdown {
  position: absolute;
  min-width: 100%;
  border-radius: 5px;
  border: 1px solid #000;
  transition: all .3s;
  background: #000;
  color: #CCC;
  z-index: 1;
  visibility: hidden;
  opacity: 0; }
  .select__dropdown .select__query {
    width: calc(100% - 12px);
    padding: 8px;
    margin: 6px;
    border-radius: 5px;
    background: #CCC;
    border: 1px solid #000; }
  .select__dropdown .select__query_noresult {
    padding: 0 10px 10px;
    display: block;
    font-size: 14px;
    color: #666; }
  .select__dropdown .select__list {
    width: 100%;
    padding-left: 0;
    list-style: none;
    overflow-y: auto; }
    .select__dropdown .select__list .select__item {
      cursor: pointer;
      padding: .5em; }
      .select__dropdown .select__list .select__item:hover {
        background: #397271; }
      .select__dropdown .select__list .select__item .select__item_icon {
        display: inline-block;
        margin-right: .25em; }
      .select__dropdown .select__list .select__item .select__item_text {
        font-size: 14px;
        font-weight: 300;
        letter-spacing: 1.2px; }
      .select__dropdown .select__list .select__item .select__item--selected {
        background: #46b6b4; }

.select__dropdown--show {
  visibility: visible;
  opacity: 1; }

#gridViewSel {
  list-style: none;
  margin-right: 25px;
  margin-top: 5px;
  float: left;
  padding: 0; }
  #gridViewSel li {
    float: left;
    margin-right: 10px; }
    #gridViewSel li.selected {
      opacity: 0.2; }

#positionDropdown,
#viewDropdown,
#gridViewAmount {
  display: inline-block; }

#positionDropdown {
  margin-right: 35px; }
  #positionDropdown::before {
    content: 'Sort';
    margin-right: 10px; }

#viewDropdown {
  margin-right: 10px; }
  #viewDropdown::before {
    content: 'Show';
    margin-right: 10px; }

#gridViewAmount {
  font-weight: 100;
  font-size: 14px; }

#gridPageCount {
  float: right; }
  #gridPageCount::before {
    content: '';
    float: left;
    transform: rotate(180deg);
    margin-right: 20px;
    opacity: 0.3; }
  #gridPageCount::after {
    content: '';
    float: right;
    margin-left: 20px; }

.main {
  width: 74.5%;
  float: right;
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 10px;
  margin-top: 40px; }

#productGrid {
  position: relative;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  width: 74.5%;
  margin: 0; }
  #productGrid.prodLimit12 .product:nth-child(n+13) {
    display: none; }
  #productGrid.prodLimit15 .product:nth-child(n+16) {
    display: none; }
  #productGrid.prodLimit18 .product:nth-child(n+19) {
    display: none; }
  #productGrid.prodLimit21 .product:nth-child(n+22) {
    display: none; }
  #productGrid.smallProd {
    width: 48.6%; }
    #productGrid.smallProd .product {
      width: 47.1%; }
  #productGrid .product {
    width: 30.8%;
    height: 405px;
    margin-top: 60px; }
    #productGrid .product img {
      width: 100%;
      border: 1px solid #e1e1e1; }
    #productGrid .product h3 {
      margin: 10px 0 12px 0; }
    #productGrid .product .price {
      margin-top: 22px;
      font-weight: 300; }
      #productGrid .product .price .slashed {
        text-decoration: line-through; }
      #productGrid .product .price .special {
        color: #b91919;
        margin-left: 10px; }
    #productGrid .product .colors {
      list-style: none;
      padding: 0; }
      #productGrid .product .colors .swatch {
        width: 15px;
        height: 15px;
        margin-right: 5px;
        border-radius: 50%;
        display: inline-block;
        transition-duration: 300ms;
        cursor: pointer; }
        #productGrid .product .colors .swatch:hover {
          width: 20px;
          height: 20px;
          margin-top: -10px; }

div[class^="rating"] {
  width: 90px;
  overflow: hidden;
  position: absolute;
  margin-top: -27px; }
  div[class^="rating"]::after {
    content: "\2605 \2605 \2605 \2605 \2605";
    color: #000;
    font-size: 24px; }

.product .rateOverlay::after {
  content: "\2605 \2605 \2605 \2605 \2605";
  color: #CCC;
  font-size: 24px; }

.product .rating1 {
  width: 25px; }

.product .rating15 {
  width: 36px; }

.product .rating2 {
  width: 49px; }

.product .rating25 {
  width: 60px; }

.product .rating3 {
  width: 74px; }

.product .rating35 {
  width: 84px; }

.product .rating4 {
  width: 96px; }

.product .rating45 {
  width: 108px; }

.product .rating5 {
  width: 120px; }

#footer {
  background-color: #252525; }
  #footer h4 {
    color: #e86d20;
    margin: 0;
    margin-bottom: 20px; }
  #footer a {
    display: block;
    color: #CCC;
    text-decoration: none;
    font-weight: 100;
    font-size: 14px;
    line-height: 1.75; }
  #footer .topFooter {
    padding: 60px 0; }
    #footer .topFooter div {
      width: 25.66%;
      display: inline-block;
      margin: 0;
      height: 160px;
      float: left; }
      #footer .topFooter div:last-child {
        display: inline-block;
        float: none;
        width: 23%; }
    #footer .topFooter #newsletterInput {
      background: transparent;
      margin-top: 20px;
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #FFF;
      border-radius: 2px;
      font-size: 16px;
      color: #FFF;
      background-position: 240px 10px;
      background-repeat: no-repeat;
      padding: 15px 20px 15px 15px;
      font-weight: 300; }
    #footer .topFooter #newsletterButton {
      background-color: #e86d20;
      border: 0;
      color: #FFF;
      font-weight: 300;
      text-align: center;
      width: 100%;
      line-height: 50px;
      margin-top: 20px; }
    #footer .topFooter .social {
      float: left;
      margin-right: 3%;
      opacity: 0.5;
      background-size: 270px 20px; }
  #footer .bottomFooter {
    padding: 45px 0;
    border-top: 1px solid #363636;
    margin-top: 30px; }
    #footer .bottomFooter *, #footer .bottomFooter address {
      color: #CCC;
      font-style: initial;
      font-weight: 300;
      text-decoration: none;
      font-size: 12px; }
    #footer .bottomFooter .copyright, #footer .bottomFooter address {
      width: 33.33%;
      display: inline-block;
      margin: 0; }
    #footer .bottomFooter #backToTop {
      float: right;
      position: relative; }
      #footer .bottomFooter #backToTop::after {
        position: absolute;
        content: '';
        background: url(https://github.com/brianlellis/Gorilla-Interview/blob/master/src/assets/images/spritesheet.png?raw=true) no-repeat -312px -1px;
        background-size: 375px 33px;
        width: 28px;
        height: 56px;
        right: -90px;
        margin-top: -5px; }
              
            
!

JS

              
                let SiteCore={};
SiteCore.siteObjects = {
    "facets" : [
        {
        "category" : "By Price",
        "filters" : [{
            "name" : "Equal or Less than $50",
            "results" : 6
        },{
            "name" : "Within $51-$100",
            "results" : 13
        },{
            "name" : "More than $100",
            "results" : 3
        }]
    },{
        "category" : "By Color",
        "filters" : [
            {
                "name" : "Purple",
                "results" : 19
            },{
                "name" : "Blue",
                "results" : 14
            },{
                "name" : "Green",
                "results" : 12
            },{
                "name" : "Pink",
                "results" : 13
            },{
                "name" : "Orange",
                "results" : 19
            }
        ]
    },{
        "category" : "By Rating",
        "filters" : [{
            "name" : "5 Stars",
            "results" : 2
        },{
            "name" : "4 Stars and Above",
            "results" : 20        
        },{
            "name" : "3 Stars and Above",
            "results" : 22        
        },{
            "name" : "2 Stars and Above",
            "results" : 22        
        }]
    }],
    "topControls" : {
        "views" : [
            {"name" : "grid"},
            {"name" : "list"}
        ],
        "sorting" : [
            {"name" : "Position"},
            {"name" : "Price Asc."},
            {"name" : "Price Desc."}
        ],
        "productsShown": [12,18,24,46, 120]
    },

    "catalog": [
	    {
	        "name": "Product Title 01",
	        "id": "761",
	        "sku": "14WPN7BW",
	        "price": 75,
	        "subtotal": 75,
	        "img": "http://placehold.it/500x500",
	        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
	        "qty": 100,
	        "ribbon": "New",
	        "rating": 5,
	        "colors": [{
	            "name": "Purple",
	            "code": "#872e42"
	        },
	            {
	                "name": "Blue",
	                "code": "#16989c"
	            },
	            {
	                "name": "Green",
	                "code": "#66b99d"
	            }]
	    },
        {
            "name": "Product Title 02",
            "id": "762",
            "sku": "14WPN7BR",
            "price": {
                "regular": 82,
                "special": 49.99
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "Sale",
            "rating": 4,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                {
                    "name": "Blue",
                    "code": "#16989c"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 03",
            "id": "775",
            "sku": "13HCS7J",
            "price": {
                "regular": 93,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 4.3,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                {
                    "name": "Blue",
                    "code": "#16989c"
                },
                {
                    "name": "Green",
                    "code": "#66b99d"
                },
                {
                    "name": "Pink",
                    "code": "#fd6068"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 04",
            "id": "776",
            "sku": "13HCS7EL",
            "price": {
                "regular": 55,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 4,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                {
                    "name": "Blue",
                    "code": "#16989c"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 05",
            "id": "777",
            "sku": "13HCS7CR",
            "price": {
                "regular": 101,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 4,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                {
                    "name": "Green",
                    "code": "#66b99d"
                },
                {
                    "name": "Pink",
                    "code": "#fd6068"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 06",
            "id": "778",
            "sku": "13HCS7B",
            "price": {
                "regular": 189,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 3.5,
            "colors": [
                {
                    "name": "Green",
                    "code": "#66b99d"
                },
                {
                    "name": "Pink",
                    "code": "#fd6068"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 07",
            "id": "801",
            "sku": "14WPN7TC",
            "price": {
                "regular": 87,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 4,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                {
                    "name": "Blue",
                    "code": "#16989c"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 08",
            "id": "802",
            "sku": "14WPN7RC",
            "price": {
                "regular": 20,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 3.5,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                {
                    "name": "Blue",
                    "code": "#16989c"
                },
                {
                    "name": "Green",
                    "code": "#66b99d"
                }]
        },
        {
            "name": "Product Title 09",
            "id": "806",
            "sku": "14WPN7SV",
            "price": {
                "regular": 35,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 4,
            "colors": [
                {
                    "name": "Green",
                    "code": "#66b99d"
                },
                {
                    "name": "Pink",
                    "code": "#fd6068"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 10",
            "id": "809",
            "sku": "14WPN7PE",
            "price": {
                "regular": 54,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 4,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                {
                    "name": "Blue",
                    "code": "#16989c"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 11",
            "id": "837",
            "sku": "14WPN7BJ",
            "price": {
                "regular": 75,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 4,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                {
                    "name": "Blue",
                    "code": "#16989c"
                },
                {
                    "name": "Pink",
                    "code": "#fd6068"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 12",
            "id": "980",
            "sku": "14WPN7BW",
            "price": 97,
            "subtotal": 75,
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "New",
            "rating": 5,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                {
                    "name": "Blue",
                    "code": "#16989c"
                },
                {
                    "name": "Green",
                    "code": "#66b99d"
                },
                {
                    "name": "Pink",
                    "code": "#fd6068"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 13",
            "id": "981",
            "sku": "14WPN7BR",
            "price": {
                "regular": 36,
                "special": 49.99
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "Sale",
            "rating": 4,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                {
                    "name": "Pink",
                    "code": "#fd6068"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 14",
            "id": "982",
            "sku": "13HCS7J",
            "price": {
                "regular": 69,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 4.3,
            "colors": [
                {
                    "name": "Pink",
                    "code": "#fd6068"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 15",
            "id": "983",
            "sku": "13HCS7EL",
            "price": {
                "regular": 80,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 4,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                {
                    "name": "Blue",
                    "code": "#16989c"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 16",
            "id": "984",
            "sku": "13HCS7CR",
            "price": {
                "regular": 70,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 4,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                {
                    "name": "Green",
                    "code": "#66b99d"
                },
                {
                    "name": "Pink",
                    "code": "#fd6068"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 17",
            "id": "985",
            "sku": "13HCS7B",
            "price": {
                "regular": 160,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 3.5,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                {
                    "name": "Blue",
                    "code": "#16989c"
                },
                {
                    "name": "Green",
                    "code": "#66b99d"
                }]
        },
        {
            "name": "Product Title 18",
            "id": "986",
            "sku": "14WPN7TC",
            "price": {
                "regular": 65,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 4,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },

                {
                    "name": "Pink",
                    "code": "#fd6068"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 19",
            "id": "987",
            "sku": "14WPN7RC",
            "price": {
                "regular": 52,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 3.5,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                {
                    "name": "Blue",
                    "code": "#16989c"
                },
                {
                    "name": "Green",
                    "code": "#66b99d"
              },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 20",
            "id": "988",
            "sku": "14WPN7SV",
            "price": {
                "regular": 75,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 4,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                
                {
                    "name": "Pink",
                    "code": "#fd6068"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 21",
            "id": "989",
            "sku": "14WPN7PE",
            "price": {
                "regular": 47,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 4,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                {
                    "name": "Blue",
                    "code": "#16989c"
                },
                {
                    "name": "Green",
                    "code": "#66b99d"
                },
                {
                    "name": "Pink",
                    "code": "#fd6068"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        },
        {
            "name": "Product Title 22",
            "id": "990",
            "sku": "14WPN7BJ",
            "price": {
                "regular": 19,
                "special": null
            },
            "img": "http://placehold.it/500x500",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget eros eu felis aliquet elementum. Proin vel mauris tincidunt, condimentum nisi in, pretium sapien. Proin augue ligula, euismod eu elementum non, sagittis sed leo. Nunc interdum eros non tellus interdum laoreet.",
            "qty": 100,
            "ribbon": "",
            "rating": 4,
            "colors": [{
                "name": "Purple",
                "code": "#872e42"
            },
                {
                    "name": "Blue",
                    "code": "#16989c"
                },
                {
                    "name": "Green",
                    "code": "#66b99d"
                },
                {
                    "name": "Pink",
                    "code": "#fd6068"
                },
                {
                    "name": "Orange",
                    "code": "#e66e2b"
                }]
        }
    ]
};
SiteCore.siteObjects.facets.forEach(e => {
	let newElement = document.createElement('li'), newEle = document.createElement('li'), attrList=[], selList=[], selEle;

	// Attr Aggregator
	e.filters.forEach(v => {
		attrList.push('<li class="attrItem">'+v.name+'<span class="results">('+v.results+')</span></li>');
        selList.push('<li class="attrSel">'+v.name+'</li>');
	});

    selEle               = '<ul>'+selList.join("")+'</ul>';
    newElement.className = "attrSection"; 
    newElement.innerHTML = '<h3>'+e.category+':</h3><ul class="attrListContainer">'+attrList.join("")+'</ul>';
    newEle.innerHTML     = selEle; 
    document.getElementById('attrList').appendChild(newElement);
    document.getElementById('selectedAttr').appendChild(newEle);
});

/*
 * CATALOG GRID
 */
SiteCore.siteObjects.catalog.forEach(e => {
	let newElement = document.createElement('li'),
		regPrice,specPrice,colors=[],colorData=[];
    
    // Price Checker
	e.price.regular != undefined ? regPrice = '$'+e.price.regular+'.00' : regPrice = '$'+e.price+'.00';
	if (e.price.special != null) {
		specPrice = '<span class="special">$'+e.price.special+'.00</span>';
		regPrice = '<span class="slashed">'+regPrice+'</span>';
	} else { specPrice = '' }

	// Color Checker
	e.colors.forEach((v,i) => {
        colorData.push( v.name.toLowerCase() );
		colors.push('<li class="swatch '+v.name.toLowerCase()+'" style="background-color:'+v.code+'"></li>');
	});
    newElement.dataset.color = colorData.join(" ");

    newElement.id = e.id; 
    newElement.className = "product";

    if (e.price.regular === undefined) newElement.dataset.price = e.price;
    else if (e.price.special !== null) newElement.dataset.price = e.price.special;
    else newElement.dataset.price = e.price.regular;

    newElement.dataset.rating = e.rating;  
    newElement.innerHTML = '<img src="http://placehold.it/500x500" alt="'+e.name+' image" /><h3>'+e.name+'</h3><div class="rateOverlay"></div><div class="rating'+e.rating.toString().replace(".","")+'"></div><p class="price">'+regPrice+specPrice+'</p><ul class="colors">'+colors.join("")+'</ul>';
    newElement.setAttribute('aria-label', e.name);

    document.getElementById('productGrid').appendChild(newElement);
});

/*
 * EVENT OBSERVERS
 */
window.addEventListener('load', ()=> {
    // ATTRIBUTE SELECTION
    let attrEle = document.getElementsByClassName("attrItem"), 
    attrClick = function(e){
        let val = parseInt( this.innerHTML.split('<span')[0].replace( /^\D+/g, '') ), count=0;
        document.getElementById('productGrid').classList.remove('smallProd');

        if ( isNaN(val) ) {
            val = this.innerHTML.split('<span')[0].toLowerCase();
            Array.prototype.forEach.call(document.querySelectorAll('[data-price]'), e => {
                e.style.display = 'inline';
                if ( e.dataset.color.indexOf(val) === -1 ) { ++count; e.style.display = 'none'; }
            });
        } else if (val > 5) {
            Array.prototype.forEach.call(document.querySelectorAll('[data-price]'), e => {
                e.style.display = 'inline';
                if (val === 50 && e.dataset.price > 50) {++count; e.style.display = 'none';}
                else if (val === 100 && e.dataset.price < 100) {++count; e.style.display = 'none';}
                else if ( val === 51 && ( e.dataset.price < 50 || e.dataset.price > 100 ) ) {++count; e.style.display = 'none';}
            });
        } else {
            Array.prototype.forEach.call(document.querySelectorAll('[data-rating]'), e => {
                e.style.display = 'inline';
                if (val === 5 && e.dataset.rating < val) {++count; e.style.display = 'none';}
                else if (val === 4 && e.dataset.rating < val) {++count; e.style.display = 'none';}
                else if ( e.dataset.rating < val ) {++count; e.style.display = 'none';}
            });
        }

        if (count === 20) document.getElementById('productGrid').classList.add('smallProd');
        count=0;

        // Show attribute
        document.getElementById('selectedAttr').classList.add('active');
        document.getElementsByClassName('attrSel')[e.target.dataset.index].classList.toggle('active');
    },
    attrSelClick = function (e) {
        e.target.classList.remove('active');
        if (document.querySelectorAll('#selectedAttr .attrSel.active').length < 1) document.getElementById('selectedAttr').classList.remove('active');
    };

    // ATTRIBUTES LIST
    Array.prototype.forEach.call(attrEle, (e,i) => {
        e.dataset.index = i;
    	e.addEventListener('click', attrClick);
    });

    // ACTIVE ATTRIBUTES
    Array.prototype.forEach.call(document.getElementsByClassName("attrSel"), (e,i) => {
        e.addEventListener('click', attrSelClick);
    });

    // MINICART CLICK
    document.getElementById('minicart').addEventListener('click', e=> {
        e.target.classList.toggle('active');
    });

    // EMAIL VALIDATOR
    function validEmail () {
        if ( /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/.test( document.getElementById('newsletterInput').value )) return true
        console.log('bad email');
        return;
    }
    document.getElementById('newsletterButton').addEventListener('click', validEmail);
});
SiteCore.autoComplete = (function(){
    // "use strict";
    function autoComplete(options){
        // helpers
        function hasClass(el, className){ return el.classList ? el.classList.contains(className) : new RegExp('\\b'+ className+'\\b').test(el.className); }

        function addEvent(el, type, handler){
            if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler);
        }
        function removeEvent(el, type, handler){
            // if (el.removeEventListener) not working in IE11
            if (el.detachEvent) el.detachEvent('on'+type, handler); else el.removeEventListener(type, handler);
        }
        function live(elClass, event, cb, context){
            addEvent(context || document, event, function(e){
                var found, el = e.target || e.srcElement;
                while (el && !(found = hasClass(el, elClass))) el = el.parentElement;
                if (found) cb.call(el, e);
            });
        }

        var o = {
            selector: 0,
            source: 0,
            minChars: 3,
            delay: 150,
            offsetLeft: 0,
            offsetTop: 1,
            cache: 1,
            menuClass: '',
            renderItem: function (item, search){
                // escape special characters
                search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
                var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
                return '<div class="autocomplete-suggestion" data-val="' + item + '">' + item.replace(re, "<b>$1</b>") + '</div>';
            },
            onSelect: function(e, term, item){}
        };
        for (var k in options) { if (options.hasOwnProperty(k)) o[k] = options[k]; }

        // init
        var elems = typeof o.selector == 'object' ? [o.selector] : document.querySelectorAll(o.selector);
        for (var i=0; i<elems.length; i++) {
            var that = elems[i];

            // create suggestions container "sc"
            that.sc = document.createElement('div');
            that.sc.className = 'autocomplete-suggestions '+o.menuClass;

            that.autocompleteAttr = that.getAttribute('autocomplete');
            that.setAttribute('autocomplete', 'off');
            that.cache = {};
            that.last_val = '';

            that.updateSC = function(resize, next){
                var rect = that.getBoundingClientRect();
                that.sc.style.left = Math.round(rect.left + (window.pageXOffset || document.documentElement.scrollLeft) + o.offsetLeft) + 'px';
                that.sc.style.top = Math.round(rect.bottom + (window.pageYOffset || document.documentElement.scrollTop) + o.offsetTop) + 'px';
                that.sc.style.width = Math.round(rect.right - rect.left) + 'px'; // outerWidth
                if (!resize) {
                    that.sc.style.display = 'block';
                    if (!that.sc.maxHeight) { that.sc.maxHeight = parseInt((window.getComputedStyle ? getComputedStyle(that.sc, null) : that.sc.currentStyle).maxHeight); }
                    if (!that.sc.suggestionHeight) that.sc.suggestionHeight = that.sc.querySelector('.autocomplete-suggestion').offsetHeight;
                    if (that.sc.suggestionHeight)
                        if (!next) that.sc.scrollTop = 0;
                        else {
                            var scrTop = that.sc.scrollTop, selTop = next.getBoundingClientRect().top - that.sc.getBoundingClientRect().top;
                            if (selTop + that.sc.suggestionHeight - that.sc.maxHeight > 0)
                                that.sc.scrollTop = selTop + that.sc.suggestionHeight + scrTop - that.sc.maxHeight;
                            else if (selTop < 0)
                                that.sc.scrollTop = selTop + scrTop;
                        }
                }
            }
            addEvent(window, 'resize', that.updateSC);
            document.body.appendChild(that.sc);

            live('autocomplete-suggestion', 'mouseleave', function(e){
                var sel = that.sc.querySelector('.autocomplete-suggestion.selected');
                if (sel) setTimeout(function(){ sel.className = sel.className.replace('selected', ''); }, 20);
            }, that.sc);

            live('autocomplete-suggestion', 'mouseover', function(e){
                var sel = that.sc.querySelector('.autocomplete-suggestion.selected');
                if (sel) sel.className = sel.className.replace('selected', '');
                this.className += ' selected';
            }, that.sc);

            live('autocomplete-suggestion', 'mousedown', function(e){
                if (hasClass(this, 'autocomplete-suggestion')) { // else outside click
                    var v = this.getAttribute('data-val');
                    that.value = v;
                    o.onSelect(e, v, this);
                    that.sc.style.display = 'none';
                }
            }, that.sc);

            that.blurHandler = function(){
                try { var over_sb = document.querySelector('.autocomplete-suggestions:hover'); } catch(e){ var over_sb = 0; }
                if (!over_sb) {
                    that.last_val = that.value;
                    that.sc.style.display = 'none';
                    setTimeout(function(){ that.sc.style.display = 'none'; }, 350); // hide suggestions on fast input
                } else if (that !== document.activeElement) setTimeout(function(){ that.focus(); }, 20);
            };
            addEvent(that, 'blur', that.blurHandler);

            var suggest = function(data){
                var val = that.value;
                that.cache[val] = data;
                if (data.length && val.length >= o.minChars) {
                    var s = '';
                    for (var i=0;i<data.length;i++) s += o.renderItem(data[i], val);
                    that.sc.innerHTML = s;
                    that.updateSC(0);
                }
                else
                    that.sc.style.display = 'none';
            }

            that.keydownHandler = function(e){
                var key = window.event ? e.keyCode : e.which;
                // down (40), up (38)
                if ((key == 40 || key == 38) && that.sc.innerHTML) {
                    var next, sel = that.sc.querySelector('.autocomplete-suggestion.selected');
                    if (!sel) {
                        next = (key == 40) ? that.sc.querySelector('.autocomplete-suggestion') : that.sc.childNodes[that.sc.childNodes.length - 1]; // first : last
                        next.className += ' selected';
                        that.value = next.getAttribute('data-val');
                    } else {
                        next = (key == 40) ? sel.nextSibling : sel.previousSibling;
                        if (next) {
                            sel.className = sel.className.replace('selected', '');
                            next.className += ' selected';
                            that.value = next.getAttribute('data-val');
                        }
                        else { sel.className = sel.className.replace('selected', ''); that.value = that.last_val; next = 0; }
                    }
                    that.updateSC(0, next);
                    return false;
                }
                // esc
                else if (key == 27) { that.value = that.last_val; that.sc.style.display = 'none'; }
                // enter
                else if (key == 13 || key == 9) {
                    var sel = that.sc.querySelector('.autocomplete-suggestion.selected');
                    if (sel && that.sc.style.display != 'none') { o.onSelect(e, sel.getAttribute('data-val'), sel); setTimeout(function(){ that.sc.style.display = 'none'; }, 20); }
                }
            };
            addEvent(that, 'keydown', that.keydownHandler);

            that.keyupHandler = function(e){
                var key = window.event ? e.keyCode : e.which;
                if (!key || (key < 35 || key > 40) && key != 13 && key != 27) {
                    var val = that.value;
                    if (val.length >= o.minChars) {
                        if (val != that.last_val) {
                            that.last_val = val;
                            clearTimeout(that.timer);
                            if (o.cache) {
                                if (val in that.cache) { suggest(that.cache[val]); return; }
                                // no requests if previous suggestions were empty
                                for (var i=1; i<val.length-o.minChars; i++) {
                                    var part = val.slice(0, val.length-i);
                                    if (part in that.cache && !that.cache[part].length) { suggest([]); return; }
                                }
                            }
                            that.timer = setTimeout(function(){ o.source(val, suggest) }, o.delay);
                        }
                    } else {
                        that.last_val = val;
                        that.sc.style.display = 'none';
                    }
                }
            };
            addEvent(that, 'keyup', that.keyupHandler);

            that.focusHandler = function(e){
                that.last_val = '\n';
                that.keyupHandler(e)
            };
            if (!o.minChars) addEvent(that, 'focus', that.focusHandler);
        }

        // public destroy method
        this.destroy = function(){
            for (var i=0; i<elems.length; i++) {
                var that = elems[i];
                removeEvent(window, 'resize', that.updateSC);
                removeEvent(that, 'blur', that.blurHandler);
                removeEvent(that, 'focus', that.focusHandler);
                removeEvent(that, 'keydown', that.keydownHandler);
                removeEvent(that, 'keyup', that.keyupHandler);
                if (that.autocompleteAttr)
                    that.setAttribute('autocomplete', that.autocompleteAttr);
                else
                    that.removeAttribute('autocomplete');
                document.body.removeChild(that.sc);
                that = null;
            }
        };
    }
    return autoComplete;
})();

new SiteCore.autoComplete({
    selector: '#searchInput',
    minChars: 2,
    source: function(term, suggest){
        term = term.toLowerCase();
        var choices = SiteCore.siteObjects.catalog.map(function (v) { return v.name });
        var matches = [];
        for (i=0; i<choices.length; i++)
            if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);
        suggest(matches);
    }
});
(function() {
    if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) {
        // Function to animate the scroll
        let smoothScroll = function (anchor, duration) {
            // Calculate how far and how fast to scroll
            let startLocation = window.pageYOffset,
                endLocation = anchor.offsetTop,
                distance = endLocation - startLocation,
                increments = distance/(duration/16),
                stopAnimation;

            // Scroll the page by an increment, and check if it's time to stop
            let animateScroll = function () {
                window.scrollBy(0, increments);
                stopAnimation();
            };

            // If scrolling down
            if ( increments >= 0 ) {
                // Stop animation when you reach the anchor OR the bottom of the page
                stopAnimation = function () {
                    let travelled = window.pageYOffset;
                    if ( (travelled >= (endLocation - increments)) || ((window.innerHeight + travelled) >= document.body.offsetHeight) ) {
                        clearInterval(runAnimation);
                    }
                };
            }
            // If scrolling up
            else {
                // Stop animation when you reach the anchor OR the top of the page
                stopAnimation = function () {
                    let travelled = window.pageYOffset;
                    if ( travelled <= (endLocation || 0) ) {
                        clearInterval(runAnimation);
                    }
                };
            }
            // Loop the animation function
            let runAnimation = setInterval(animateScroll, 16);
       
        };

        // Define smooth scroll links
        let scrollToggle = document.querySelectorAll('.scroll');

        // For each smooth scroll link
        [].forEach.call(scrollToggle, function (toggle) {
            // When the smooth scroll link is clicked
            toggle.addEventListener('click', function(e) {
                e.preventDefault();

                // Get anchor link and calculate distance from the top
                let dataID = toggle.getAttribute('href'),
                    dataTarget = document.querySelector(dataID),
                    dataSpeed = toggle.getAttribute('data-speed');

                // If the anchor exists
                if (dataTarget) smoothScroll(dataTarget, dataSpeed || 500);
            }, false);
        });
    }
 })();
(function (name, definition) {
    if (typeof define === 'function') {
        define(name, definition);
    } else if (typeof module !== 'undefined' && module.exports) {
        module.exports = definition();
    } else {
        this[name] = definition();
    }
}('Select', function () {
    'use strict';

    class Component {

        constructor(props) {
            this.props = props || {};
            this.state = {};
            this.refs = {};
            this.$disposables = {
                mounted: [],
                updated: []
            };
        }

        $defer(stage, dispose) {
            this.$disposables[stage].push(dispose);
        }

        $dispose(stage) {
            this.$disposables[stage].reverse().forEach(dispose => dispose());
            this.$disposables[stage].length = 0;
        }

        componentMount(ctx) {
            this.$el && this.componentUnmount();
            this.componentWillMount();
            this.$el = (ctx && ctx.el) || document.createElement('div');
            this.$defer('mounted', () => {
                this.$el.innerHTML = '';
                this.$el = null;
            });
            this.forceUpdate();
            this.componentDidMount();
            return this;
        }

        componentWillMount() {}

        componentDidMount() {}

        componentUnmount() {
            this.componentWillUnmount();
            this.$dispose('mounted');
            this.componentDidUnmount();
            return this;
        }

        componentWillUnmount() {}

        componentDidUnmount() {}

        setState(updater, callback) {
            let prevState = this.state;
            let nextState = typeof updater == 'function' ? updater(prevState, this.props) : updater;
            this.state = Object.assign(prevState, nextState);
            if (this.shouldComponentUpdate(prevState, nextState)) {
                this.forceUpdate();
            }
            callback && callback.call(this);
            return this;
        }

        forceUpdate() {
            this.componentUpdate(this.props, this.state);
            return this;
        }

        shouldComponentUpdate(prevState, nextState) {
            return prevState !== nextState;
        }

        componentUpdate(props, state) {
            if (this.$el) {
                this.componentWillUpdate(props, state);
                this.$dispose('updated');
                this.$el.innerHTML = this.render(props, state);
                this.refs = Array.from(this.$el.querySelectorAll('[ref]')).reduce(function (refs, node) {
                    return (refs[node.getAttribute('ref')] = node), refs;
                }, {});
                this.componentDidUpdate(props, state);
            }
        }

        componentWillUpdate(props, state) {}

        render(props, state) {
            return '';
        }

        componentDidUpdate(props, state) {}
    }

    class Select extends Component {
        constructor(props) {
            super(props);
            const selected = this.props.selected;
            this.state = {
                placeholder: selected || this.props.placeholder || '',
                selected: selected || null,
                expanded: false
            };
            this.onDocumentClick = this.onDocumentClick.bind(this);
            this.onToolboxClick = this.onToolboxClick.bind(this);
            this.dropdown = new Dropdown(Object.assign({}, this.props, {
                onSelected: selected => {
                    this.props.onSelected && this.props.onSelected(selected);
                    this.setState(prevState => ({
                        placeholder: selected.text || selected.value,
                        selected: selected,
                        expanded: false
                    }));
                }
            }));
        }

        onDocumentClick(event) {
            if (!event.path.some(e => e === this.$el)) {
                 this.setState(prevState => ({
                    expanded: false
                 }));
            }
        }

        onToolboxClick(event) {
            this.setState(prevState => ({
                expanded: !prevState.expanded
            }), () => {
                if (this.props.search && this.state.expanded) {
                    this.dropdown.refs.query.focus();
                }
            });
        }

        render(props, state) {
            return `<div class="select__box">
                    <div ref="toolbox" class="select__toolbox">
                        <i class="select__arrow" aria-hidden="true"></i>
                        <div class="select__label">${state.placeholder}</div>
                    </div>
                    <div ref="dropdown" class="select__dropdown ${ state.expanded ? "select__dropdown--show" : "" }"></div>
                </div>`;
        }

        componentDidMount() {
            document.body.addEventListener('click', this.onDocumentClick);
            this.$defer('mounted', () => document.body.removeEventListener('click', this.onDocumentClick));
        }

        componentDidUnmount() {
            this.dropdown.componentUnmount();
        }

        componentDidUpdate() {
            const $toolbox = this.refs.toolbox;
            $toolbox.addEventListener('click', this.onToolboxClick);
            this.$defer('updated', () => $toolbox.removeEventListener('click', this.onToolboxClick));
            this.dropdown.componentMount({
                el: this.refs.dropdown
            });
        }
    }

    class Dropdown extends Component {
        constructor(props) {
            super(props);
            this.state = {
                query: "",
                dataset: this.props.dataset || [],
                selected: this.props.selected
            };
            this.onQueryChanged = this.onQueryChanged.bind(this);
            this.onItemClicked = this.onItemClicked.bind(this);
        }

        onQueryChanged(event) {
            const query = event.target.value;
            const match = new RegExp(query, 'gi');
            const dataset = (this.props.dataset || []).filter(item => match.test(item.text || item.value || ''));
            this.setState(prevState => ({
                query: query,
                dataset: dataset
            }));
        }

        onItemClicked(event) {
            const index = event.target.closest('li').dataset.index;
            const selected = this.state.dataset[index];
            this.props.onSelected && this.props.onSelected(selected);
            this.setState(prevState => ({
                selected: selected
            }));
        }

        render(props, state) {
            if (state.dataset.length === 0) {
                return `<input ref="query" type="text" value="${state.query}" class="select__query">
                    <span class="select__query_noresult">${props.noResults || ''}</span>`;
            }
            let search = '';
            if (props.search) {
                search = `<input ref="query" type="text" value="${state.query}" class="select__query">`;
            }
            return `${search}
                    <ul ref="list" class="select__list">
                        ${ state.dataset.map(function(item, index){
                                return `
                                    <li class="select__item ${(item === state.selected || item.value === state.selected) ? "select__item--selected" : ""}" data-index="${index}" data-value="${item.value || item.text}">
                                        <span class="select__item_text">${item.text || item.value}</span>
                                    </li>`;
                    }).join('') }
                    </ul>`;
        }

        componentDidUpdate() {
            if (this.props.search) {
                const $query = this.refs.query;
                $query.addEventListener('change', this.onQueryChanged);
                this.$defer('updated', () => $query.removeEventListener('change', this.onQueryChanged));
            }
            const $list = this.refs.list;
            if ($list) {
                $list.addEventListener('click', this.onItemClicked);
                this.$defer('updated', () => $list.removeEventListener('click', this.onItemClicked));
            }
        }
    }

    return Select;
}));

const source = [
    { value: 'Price ASC' },
    { value: 'Price DESC' },  
    { value: 'Name ASC' },
    { value: 'Name DESC' }
];

const source2 = [
    { value: '12' }, 
    { value: '15' }, 
    { value: '18' },
    { value: '21' }
];

const select1 = new Select({
      placeholder: 'Name ASC',
      dataset: source,
      noResults: 'No results found',
      onSelected: function (item) {
            if (item.value.indexOf('Price') !== -1) {
                var classname = document.getElementsByClassName('product');
                var divs = [];
                for (var i = 0; i < classname.length; ++i) {
                    divs.push(classname[i]);
                }
                divs.sort(function(a, b) {
                    if (item.value.indexOf('ASC') !== -1) return parseInt(a.dataset.price) - parseInt(b.dataset.price);
                    else return parseInt(b.dataset.price) - parseInt(a.dataset.price);
                });

                document.getElementById('productGrid').innerHTML = null;

                divs.forEach(function(el) {
                    document.getElementById('productGrid').appendChild(el);
                });
            } else {
                var classname = document.getElementsByClassName('product');
                var divs = [];
                for (var i = 0; i < classname.length; ++i) {
                    divs.push(classname[i]);
                }
                divs.sort(function(a, b) {
                    if (item.value.indexOf('ASC') !== -1) return a.getAttribute("aria-label").localeCompare(b.getAttribute("aria-label"));
                    else return b.getAttribute("aria-label").localeCompare(a.getAttribute("aria-label"));
                });

                document.getElementById('productGrid').innerHTML = null;

                divs.forEach(function(el) {
                    document.getElementById('productGrid').appendChild(el);
                });
            }
        }
        }).componentMount({
      el: document.getElementById('positionDropdown')
});

const select2 = new Select({
      placeholder: '15',
      dataset: source2,
      noResults: 'No results found',
      onSelected: function (item) {
        var ele = document.getElementById('productGrid');
            switch (item.value) {
                case '12': ele.className = 'prodLimit12'; break;
                case '15': ele.className = 'prodLimit15'; break;
                case '18': ele.className = 'prodLimit18'; break;
                case '21': ele.className = 'prodLimit21'; break;
            }
        }
        }).componentMount({
      el: document.getElementById('viewDropdown')
});

              
            
!
999px

Console