"wix web site builder"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/igorsheg/pen/VKJroX" /> <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600|Source+Sans+Pro:300,400,600" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css'> <style class="cp-pen-styles">html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .noSpace, html, body, .bossWrapp, .wixMenu, .selector { padding: 0 !important; margin: 0 !important; } html { font-size: 1.063em; box-sizing: border-box; height: 100%; overflow-x: hidden; } body { background-color: white; font-weight: 400; line-height: 1.45; padding: 0; } p { margin-bottom: 1.3em; } a { text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 1.414em 0 0.5em; font-weight: inherit; line-height: 1.2; } h1 { margin-top: 0; font-size: 3.998em; } h2 { font-size: 2.827em; } h3 { font-size: 1.999em; } h4 { font-size: 1.414em; } small, .font_small { font-size: 0.707em; } sup { vertical-align: super; font-size: 40%; } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; box-sizing: border-box; } button:focus { outline: none; } .ease, .addBar ul li, .addBar ul li:hover, .pBox, .pBox:hover, .selector span, .hMenu ul li, .hMenu ul li:hover, .hMenu ul li:active, .sideBar .header svg, .sideBar .header svg:hover { -webkit-transition: all 400ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 400ms cubic-bezier(0.19, 1, 0.22, 1); } .wixMenu { height: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; position: fixed; background: #fff; width: 100vw; z-index: 9999999991; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1); border-bottom: 1px solid #D8D8D8; } .wixLogo { max-width: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; -webkit-box-pack: flex-center; -ms-flex-pack: flex-center; justify-content: flex-center; } .wixLogo img { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; -o-object-fit: contain; object-fit: contain; display: block; height: 80%; width: auto; } .addBar { position: fixed; top: 78px; left: 20px; z-index: 9991; } .addBar ul { list-style: none; padding: 0; margin: 0; } .addBar ul li { padding: 0; margin: 10px 0 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; width: 50px; height: 50px; border-radius: 30em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #F3F3F3; border: 1px solid #D8D8D8; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1); color: #6D6D6D; } .addBar ul li:hover { color: #545454; cursor: pointer; -webkit-transform: translateY(-1px); transform: translateY(-1px); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2); } .addBar ul li svg { vertical-align: middle; margin: 0; fill: currentColor; stroke: currentColor; padding: 0; } .pageNav { max-width: 200px; background: #F3F3F3; border-right: 1px solid #D8D8D8; border-left: 1px solid #D8D8D8; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; padding: 0 0 0 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .pageNav:hover > p { color: #878787; } .pageNav:hover > span { color: #878787; } .pageNav:hover > p > i { color: #878787; } .pageNav span { position: absolute; display: block; right: 15px; color: #6D6D6D; } .pageNav span svg { fill: currentColor; } .pageNav p { margin: 0; font-weight: 400; padding: 0; font-size: 14px; color: #6D6D6D; } .pageNav p i { vertical-align: middle; margin: 0 5px 0 0; display: inline-block; height: 18px; width: 18px; color: #6D6D6D; } .pageNav p i svg { fill: currentColor; } .wixNav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 0 0 30px; } .wixNav ul { list-style: none; padding: 0; margin: 0; } .wixNav ul li { cursor: pointer; color: #6D6D6D; margin: 0; padding: 0 25px 0 0; font-weight: 400; font-size: 14px; display: inline-block; } .wixNav ul li:hover { color: #878787; } .wixBtns ul { list-style: none; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; margin: 0; } .wixBtns ul li:first-child { margin: 0 0 0 0px; } .wixBtns ul li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin: 0 0 0 -1px; height: 100%; color: #6D6D6D; min-width: 54px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-right: 1px solid #D8D8D8; border-left: 1px solid #D8D8D8; } .wixBtns ul li svg { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; fill: currentColor; } .wixBtns ul li:hover { cursor: pointer; color: #3a3a3a; } .padd { width: auto; padding: 0 19px; } .padd:hover > p { color: #3a3a3a; } .padd p { font-size: 14px; color: #7A7A7A; } .padd:last-child { background: #6D6D6D; border-right: none; } .padd:last-child:hover { background: #878787; } .padd:last-child p { color: white; } .menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 77px; position: relative; padding: 0; margin: 0; } .menu:after { border-bottom: dashed 1px #333; position: absolute; content: ''; height: 2px; left: -50vw; bottom: 0; width: 200vw; } .menu svg { vertical-align: middle; } .menu:hover > object { opacity: 1; } .menu object { top: 0; left: 0; opacity: 0; padding: 5px; color: #6D6D6D; background: #D8D8D8; position: absolute; font-size: 13px; } .gridGallery object { top: 0; left: 0; opacity: 0; padding: 5px; color: #6D6D6D; z-index: 99999991; background: #D8D8D8; position: absolute; font-size: 13px; } .selector:hover > .gridGallery object { opacity: 1; } .nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .nav ul { padding: 0; margin: 0; list-style: none; } .nav ul li { font-family: 'Source Sans Pro', sans-serif; font-size: 14px; font-weight: 600; color: #6D6D6D; text-transform: uppercase; padding: 0 15px; margin: 0; vertical-align: middle; display: inline-block; } .nav ul li:hover { cursor: pointer; color: #545454; } .nav ul li:last-child { padding: 0 0 0 15px; } .nav ul li svg { fill: currentColor; } .prodWrapp { border-right: 1px dashed #333; border-left: 1px dashed #333; padding: 48px 0 200px 0; -webkit-transition: all 320ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 320ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .title h1 { font-family: 'Raleway', sans-serif; font-weight: 600; color: #6D6D6D; margin: 100px 0 0 0; font-size: 46px; } .gridGallery { margin: 0px 0 0 0; padding: 0; } .gridGallery:last-child { margin: 25px 0 0 0; } .pBox { margin: 0 25px 0 0 !important; border: 1px solid #D8D8D8; border-radius: 2px; height: 330px; padding: 0; box-shadow: 0px 6px 10px 0px transparent; } .pBox:nth-child(n+3) { margin: 0 0px 0 0 !important; } .pBox .img { height: 200px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #FCFCFC; border-bottom: 1px solid #D8D8D8; } .pBox:hover { cursor: pointer; -webkit-transform: translateY(-1px); transform: translateY(-1px); box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.1); } .pDesc { padding: 15px 0 0 15px; } .pDesc h3 { display: block; clear: both; margin: 0; font-family: 'Raleway', sans-serif; font-size: 23px; color: #6D6D6D; } .pDesc p { display: block; font-family: 'Source Sans Pro', sans-serif; margin: 5px 0 0 0; color: #6D6D6D; } .selector { position: relative; margin: 50px 0 0 0 !important; } .selector span { position: absolute; content: ''; top: 0; left: 0; cursor: move; right: 0; bottom: 0; opacity: 0; border: 1px solid #252525; } .selector i { opacity: 0; position: absolute; height: 10px; width: 10px; background: #ffffff; z-index: 9991; border: 1px solid #252525; border-radius: 30em; } .selector i:nth-child(1) { left: -4px !important; top: -4px; } .selector i:nth-child(2) { right: -4px !important; top: -4px; } .selector i:nth-child(3) { left: auto; right: auto; top: -4px; } .selector i:nth-child(4) { left: -4px !important; bottom: -4px; } .selector i:nth-child(5) { right: -4px !important; bottom: -4px !important; } .selector i:nth-child(6) { left: auto; right: auto; bottom: -4px; } .hMenu { position: absolute; z-index: 99991; display: none; } .hMenu ul { list-style: none; } .hMenu ul li { padding: 10px 19px; background: #F3F3F3; border-radius: 30em; box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.1); font-size: 14px; border: 1px solid #D8D8D8; color: #6D6D6D; vertical-align: middle; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .hMenu ul li:hover { color: #545454; cursor: pointer; } .hMenu ul li:active { -webkit-transform: translateY(1px); transform: translateY(1px); } .hMenu ul li svg { fill: currentColor; vertical-align: middle; display: block; margin: auto; } .hMenu ul li:last-child { padding: 0; width: 42px; height: 42px; } .sideBar { position: fixed; height: 100vh; overflow: hidden; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 400px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: start; align-content: flex-start; opacity: 1; z-index: 99991; box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.1); left: 0; -webkit-transition: all 320ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 320ms cubic-bezier(0.19, 1, 0.22, 1); padding: 0 0 !important; margin: 0 !important; -webkit-transform: translateX(-400px); transform: translateX(-400px); top: 48px; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: #fff; border-right: 1px solid #D8D8D8; } .sideBar .header { padding: 0 20px 0 20px; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #D8D8D8; height: 55px; } .sideBar .header h3 { font-size: 16px; padding: 0; margin: 0; } .sideBar .header svg { opacity: 0.8; fill: currentColor; cursor: pointer; } .sideBar .header svg:hover { opacity: 1; } .sideBar-inner { margin: 0; padding: 0 20px !important; } .footerBorder { position: absolute; bottom: -300px; left: -50px; height: 50px; right: -50px; border-top: 1px dashed #333; } .collection { -ms-flex-item-align: start; align-self: flex-start; margin: 20px 0 0px 0; height: 94px; padding: 15px 10px; border-radius: 4px; background: #F3F3F3; } .collection p { font-size: 14px; color: #252525; padding: 0; margin: 0; } .collection select { -webkit-appearance: none; padding: 10px 15px; position: relative; border: 1px solid #6D6D6D; border-radius: 2px; margin: 10px 0 0 0; width: 100%; cursor: pointer; font-size: 14px; color: #252525; outline: none; } .selectWrapp { position: relative; } .selectWrapp span { vertical-align: middle; position: absolute; right: 20px; height: 5px; width: 5px; top: 15px; bottom: auto; z-index: 9991; } .ticker { margin: 0; padding: 30px 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .ticker p { padding: 0; margin: 0; font-weight: 300; vertical-align: middle; display: inline-block; } .tick { width: 44px; height: 28px; vertical-align: middle; position: relative; border-radius: 50em; cursor: pointer; background: #D8D8D8; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 10px 0 0; } .tick span { /* Oval: */ position: absolute; height: 22px; width: 22px; border-radius: 33em; left: 2px; right: auto; bottom: auto; top: auto; background: #FFFFFF; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.23); } .firstUl { padding: 0; margin: 0; list-style: none; width: 400px; } .firstUl li { padding: 20px 20px; margin: -1px 0 0 0; font-weight: 300; border-top: 1px solid #D8D8D8; border-bottom: 1px solid #D8D8D8; min-width: 100%; display: block; display: -webkit-box; display: -ms-flexbox; display: flex; background: #fff; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .firstUl li:hover { background: #F3F3F3; cursor: pointer; } .firstUl li:active { background: #D8D8D8; } .firstUl li svg { vertical-align: middle; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .firstUl li:nth-child(3), .firstUl li:nth-child(4) { display: none; opacity: 0; } .dynCon { padding: 0; width: 800px; position: relative; margin: 0; } .secondUl { position: absolute; top: 30px; background: #fff; right: -400px; width: 400px; height: 500px; display: none; padding: 0; margin: 0; list-style: none; width: 400px; } .secondUl img { margin: 30px 0 0 0; } .secondUl li { padding: 20px 20px; margin: -1px 0 0 0; text-align: center !important; font-weight: 300; border-top: 1px solid #D8D8D8; border-bottom: 1px solid #D8D8D8; min-width: 100%; display: block; display: -webkit-box; display: -ms-flexbox; display: flex; background: #fff; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .secondUl li:hover { background: #F3F3F3; cursor: pointer; } .secondUl li:active { background: #D8D8D8; } .secondUl li svg { position: absolute; left: 20px; vertical-align: middle; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } </style></head><body> <div class="bossWrapp col-xs-12 center-xs row "> <!-- Wix Menu --> <div class="wixMenu col-xs-12 row start-xs"> <!-- Wix Logo --> <div class="wixLogo col-xs-1"> <img src="http://oi67.tinypic.com/2drcvhe.jpg"> </div> <!-- /Wix Logo --> <!-- Page Nav --> <div class="pageNav col-xs"> <p><i><svg viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <path d="M12.9485357,17 L7.5905,17 C6.35699571,16.9973221 5.35836754,15.9967929 5.35803571,14.7632857 L5.35803571,14.3158214 L4.91117857,14.3158214 C3.67767428,14.3131436 2.67904612,13.3126143 2.67871429,12.0791071 L2.67871429,11.6316429 L2.23246429,11.6316429 C0.998959996,11.628965 0.00033183065,10.6284357 0,9.39492857 L0,2.23671429 C0.00033183065,1.00320713 0.998959996,0.0026778543 2.23246429,0 L7.5905,0 C8.82400429,0.0026778543 9.82263246,1.00320713 9.82296429,2.23671429 L9.82296429,2.68417857 L10.2692143,2.68417857 C11.5027186,2.68685643 12.5013467,3.68738571 12.5016786,4.92089286 L12.5016786,5.36835714 L12.9485357,5.36835714 C14.18204,5.371035 15.1806682,6.37156428 15.181,7.60507143 L15.181,14.7632857 C15.1806682,15.9967929 14.18204,16.9973221 12.9485357,17 L12.9485357,17 Z M8.92985714,2.23671429 C8.92985836,1.49661388 8.33059919,0.89626812 7.5905,0.894928571 L2.23246429,0.894928571 C1.49236509,0.89626812 0.893105931,1.49661388 0.893107143,2.23671429 L0.893107143,9.39492857 C0.893105931,10.135029 1.49236509,10.7353747 2.23246429,10.7367143 L2.67871429,10.7367143 L2.67871429,4.92089286 C2.67904612,3.68738571 3.67767428,2.68685643 4.91117857,2.68417857 L8.92985714,2.68417857 L8.92985714,2.23671429 L8.92985714,2.23671429 Z M11.6091786,4.92089286 C11.6091793,4.1805558 11.0095507,3.58011213 10.2692143,3.57910714 L4.91117857,3.57910714 C4.17107938,3.58044669 3.57182022,4.18079245 3.57182143,4.92089286 L3.57182143,12.0791071 C3.57182143,12.8192143 4.91360714,13.4184643 4.91360714,12.0791071 L5.36046429,12.0791071 L5.36046429,6.26328571 C5.36079612,5.02977856 6.35942428,4.02924928 7.59292857,4.02657143 L11.6116071,4.02657143 L11.6116071,3.57910714 L11.6091786,4.92089286 Z M14.2878929,7.60507143 C14.2878941,6.86497102 13.6886349,6.26462526 12.9485357,6.26328571 L12.5016786,6.26328571 L11.6091786,6.26328571 L7.5905,6.26328571 C6.85040081,6.26462526 6.25114164,6.86497102 6.25114286,7.60507143 L6.25114286,14.7632857 C6.25114286,15.5033929 7.59292857,16.1026429 7.59292857,14.7632857 L12.9509643,14.7632857 C13.6910635,14.7619462 14.2903226,14.1616004 14.2903214,13.4215 L14.2903214,6.26328571 L14.2878929,7.60507143 Z M8.03675,10.7367143 L12.5016786,10.7367143 L12.5016786,11.6316429 L8.03675,11.6316429 L8.03675,10.7367143 L8.03675,10.7367143 Z M8.03675,8.94746429 L12.5016786,8.94746429 L12.5016786,9.84178571 L8.03675,9.84178571 L8.03675,8.94746429 L8.03675,8.94746429 Z" id="Shape" stroke="none" fill-rule="evenodd"></path> </svg></i>pages: STORE</p> <span> <svg width="9px" height="7px" viewBox="173 22 9 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <path d="M176.7377,27.9936699 L173.585,24.6927699 C173.284811,24.4957909 173.107776,24.1576288 173.116937,23.7986991 C173.126099,23.4397695 173.320153,23.1110788 173.63,22.9296699 C174.046838,22.5204131 174.714662,22.5204131 175.1315,22.9296699 L177.5111,25.4205699 L179.8904,22.9296699 C180.295213,22.5078896 180.963335,22.4882704 181.3922,22.8855699 C181.597275,23.074662 181.717585,23.3383556 181.725995,23.6171761 C181.734405,23.8959966 181.630206,24.1664618 181.4369,24.3675699 L178.2845,27.9936699 C178.082721,28.2048348 177.80317,28.3240075 177.5111,28.3233699 C177.2183,28.3233699 176.9381,28.2045699 176.7377,27.9936699 Z" id="Shape" stroke="none" fill-rule="evenodd"></path> </svg></span> </div><!-- /Page Nav --> <!-- Wix Nav --> <div class="col-xs start-xs row wixNav"> <ul> <li>Site</li> <li>Tools</li> <li>Help</li> <li>Upgrade</li> </ul> </div><!-- /Wix Nav --> <div class="col-xs row wixBtns end-xs"> <ul> <li> <svg width="17px" height="16px" viewBox="0 0 17 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <path d="M7.5,1 C3.91197652,1.0044079 1.0044079,3.91197652 1,7.5 C1,11.084 3.916,14 7.5,14 C11.084,14 14,11.084 14,7.5 C14,3.916 11.084,1 7.5,1 L7.5,1 Z M13.563,11.91 C14.4984233,10.630034 15.0017599,9.08534752 15,7.5 C15,3.364 11.636,0 7.5,0 C3.364,0 0,3.364 0,7.5 C0,11.636 3.364,15 7.5,15 C9.54774854,15.0010297 11.5063821,14.1624931 12.919,12.68 L16.328,16 L17,15.328 L13.563,11.91 L13.563,11.91 Z M10,7 L5,7 L5,8 L10,8 L10,7 L10,7 Z" id="Combined-Shape" stroke="none" fill-rule="evenodd"></path> </svg></li> <li> <svg width="12px" height="17px" viewBox="0 -1 12 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <path d="M1.59710746,11.6081311 L4.80209836,8.82780328 C4.96629508,8.68537705 4.98386885,8.43698361 4.84144262,8.27304918 C4.69954098,8.10859016 4.45088525,8.09101639 4.28668852,8.23370492 L0.311606557,11.6818361 C0.225311475,11.7563279 0.175737705,11.864918 0.175737705,11.9790164 C0.175737705,12.0931148 0.225311475,12.2014426 0.311344262,12.2761967 L4.28642623,15.7261639 C4.36091803,15.7906885 4.45272131,15.8224262 4.5442623,15.8224262 C4.65442623,15.8224262 4.76380328,15.7767869 4.84144262,15.687082 C4.98386885,15.5228852 4.96629508,15.2744918 4.80236066,15.1320656 L1.64886834,12.3950164 L5.42898361,12.3950164 C8.78714754,12.3950164 11.5192131,9.61468852 11.5192131,6.1975082 C11.5192131,2.78032787 8.77167213,0 5.39409836,0 C5.17691803,0 5.00065574,0.176262295 5.00065574,0.393442623 C5.00065574,0.610622951 5.17691803,0.786885246 5.39409836,0.786885246 C8.33783607,0.786885246 10.7323279,3.21416393 10.7323279,6.1975082 C10.7323279,9.18085246 8.35331148,11.6081311 5.42898361,11.6081311 L1.59710746,11.6081311 Z" id="Combined-Shape" stroke="none" fill-rule="evenodd" transform="translate(5.847475, 7.911213) scale(1, -1) translate(-5.847475, -7.911213) "></path> </svg></li> <li> <svg width="12px" height="17px" viewBox="0 -1 12 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <path d="M1.59710746,11.6081311 L4.80209836,8.82780328 C4.96629508,8.68537705 4.98386885,8.43698361 4.84144262,8.27304918 C4.69954098,8.10859016 4.45088525,8.09101639 4.28668852,8.23370492 L0.311606557,11.6818361 C0.225311475,11.7563279 0.175737705,11.864918 0.175737705,11.9790164 C0.175737705,12.0931148 0.225311475,12.2014426 0.311344262,12.2761967 L4.28642623,15.7261639 C4.36091803,15.7906885 4.45272131,15.8224262 4.5442623,15.8224262 C4.65442623,15.8224262 4.76380328,15.7767869 4.84144262,15.687082 C4.98386885,15.5228852 4.96629508,15.2744918 4.80236066,15.1320656 L1.64886834,12.3950164 L5.42898361,12.3950164 C8.78714754,12.3950164 11.5192131,9.61468852 11.5192131,6.1975082 C11.5192131,2.78032787 8.77167213,0 5.39409836,0 C5.17691803,0 5.00065574,0.176262295 5.00065574,0.393442623 C5.00065574,0.610622951 5.17691803,0.786885246 5.39409836,0.786885246 C8.33783607,0.786885246 10.7323279,3.21416393 10.7323279,6.1975082 C10.7323279,9.18085246 8.35331148,11.6081311 5.42898361,11.6081311 L1.59710746,11.6081311 Z" id="Combined-Shape" stroke="none" fill-rule="evenodd" transform="translate(5.847475, 7.911213) scale(-1, -1) translate(-5.847475, -7.911213) "></path> </svg></li> <li> <svg width="14px" height="24px" viewBox="0 -1 14 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <path d="M11.7722865,3.55271368e-15 L2.31521354,3.55271368e-15 C1.41126562,3.55271368e-15 0.680895833,0.733723958 0.680895833,1.63683333 L0.680895833,20.838599 C0.680895833,21.7408698 1.41126562,22.4745937 2.31521354,22.4745937 L11.7714479,22.4745937 C12.6753958,22.4745937 13.4074427,21.7408698 13.4074427,20.838599 L13.4074427,1.63683333 C13.4082812,0.733723958 12.6770729,3.55271368e-15 11.7722865,3.55271368e-15 L11.7722865,3.55271368e-15 Z M4.71008854,0.994510417 L9.37908854,0.994510417 C9.49732292,0.994510417 9.59207812,1.17060417 9.59207812,1.38946354 C9.59207812,1.60748438 9.49732292,1.78441667 9.37908854,1.78441667 L4.71008854,1.78441667 C4.59185417,1.78441667 4.4979375,1.60748438 4.4979375,1.38946354 C4.4979375,1.17060417 4.59185417,0.994510417 4.71008854,0.994510417 L4.71008854,0.994510417 Z M7.04458854,20.858724 C6.46851042,20.858724 5.99976562,20.3908177 5.99976562,19.813901 C5.99976562,19.2369844 6.46934896,18.7707552 7.04458854,18.7707552 C7.61982812,18.7707552 8.08857292,19.2378229 8.08857292,19.813901 C8.08857292,20.3908177 7.61898958,20.858724 7.04458854,20.858724 L7.04458854,20.858724 Z M12.1823333,17.2798281 L1.90684375,17.2798281 L1.90684375,2.76215625 L12.1823333,2.76215625 L12.1823333,17.2798281 L12.1823333,17.2798281 Z" id="Shape" stroke="#6D6D6D" stroke-width="1" fill="none"></path> </svg></li> <li class="padd"><p>Save</p></li> <li class="padd"><p>Preview</p></li> <li class="padd"><p>Publish</p></li> </ul> </div> </div><!-- /Wix Menu --> <!-- Add a Component --> <div class="addBar"> <ul> <li> <svg width="23px" height="23px" viewBox="14 14 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs> <rect id="path-1" x="14" y="14" width="23" height="23" rx="6"></rect> <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="23" height="23" fill="white"> <use xlink:href="#path-1"></use> </mask> </defs> <use id="Rectangle-7" mask="url(#mask-2)" stroke-width="8" fill="none" xlink:href="#path-1"></use> </svg></li> <li> <svg width="27px" height="27px" viewBox="11 11 27 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <g id="Group-3" stroke="none" stroke-width="1" fill-rule="evenodd" transform="translate(12.000000, 12.000000)"> <rect id="Rectangle-7" x="-1.77635684e-15" y="-1.77635684e-15" width="26" height="26" rx="13"></rect> <g id="Group-2" transform="translate(7.000000, 7.000000)" fill="#FFFFFF"> <rect id="Rectangle-8" x="0" y="4.875" width="12.1875" height="3.25" rx="1.625"></rect> <rect id="Rectangle-8" transform="translate(6.093750, 6.500000) rotate(-270.000000) translate(-6.093750, -6.500000) " x="0" y="4.875" width="12.1875" height="3.25" rx="1.625"></rect> </g> </g> </svg></li> <li> <svg width="22px" height="21px" viewBox="0 0 22 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <path d="M2.2826087,0 L19.6304348,0 L21.9130435,5.47826087 L0,5.47826087 L2.2826087,0 L2.2826087,0 Z M19.173913,9.13043478 C17.661,9.13043478 16.4347826,8.2173913 16.4347826,6.39130435 L21.9130435,6.39130435 C21.9130435,8.2173913 20.6868261,9.13043478 19.173913,9.13043478 L19.173913,9.13043478 Z M13.6956522,9.13043478 C12.1827391,9.13043478 10.9565217,8.2173913 10.9565217,6.39130435 L16.4347826,6.39130435 C16.4347826,8.2173913 15.2085652,9.13043478 13.6956522,9.13043478 L13.6956522,9.13043478 Z M8.2173913,9.13043478 C6.70447826,9.13043478 5.47826087,8.2173913 5.47826087,6.39130435 L10.9565217,6.39130435 C10.9565217,8.2173913 9.73030435,9.13043478 8.2173913,9.13043478 L8.2173913,9.13043478 Z M2.73913043,9.13043478 C1.22621739,9.13043478 0,8.2173913 0,6.39130435 L5.47826087,6.39130435 C5.47826087,8.2173913 4.25204348,9.13043478 2.73913043,9.13043478 L2.73913043,9.13043478 Z M5.02173913,15.5217391 L16.8913043,15.5217391 L16.8913043,10.0434783 L20.5434783,10.0434783 L20.5434783,18.2608696 C20.5434783,19.7736495 19.3171278,21 17.8043478,21 L4.10869565,21 C2.59591569,21 1.36956522,19.7736495 1.36956522,18.2608696 L1.36956522,10.0434783 L5.02173913,10.0434783 L5.02173913,15.5217391 L5.02173913,15.5217391 Z" id="Shape" stroke="none" fill-rule="evenodd"></path> </svg></li> <li> <svg width="24px" height="17px" viewBox="0 0 24 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <path d="M19.0277708,5.76419536 C18.7201577,2.53189205 15.9942328,0 12.6767444,0 C10.1211898,0 7.92057334,1.49547269 6.90308401,3.65822908 C6.5623434,3.53045135 6.19320773,3.46419623 5.81460705,3.46419623 C4.05411389,3.46419623 2.62962883,4.88868129 2.62962883,6.64917445 C2.62962883,7.03250764 2.69588395,7.4016433 2.82366168,7.74238392 C1.43703668,8.55164287 0.5,10.0613131 0.5,11.7839462 C0.5,14.2827107 2.46399103,16.5874423 4.92962796,16.7246851 L9.2362107,16.7246851 L10.2395025,16.7246851 L10.2395025,11.7366211 L7.95843341,11.7366211 C7.49464757,11.7366211 7.25802215,11.1781851 7.57983273,10.8469095 L11.621395,6.68703452 C11.8296254,6.47407164 12.170366,6.47407164 12.3738638,6.68703452 L16.4154261,10.8469095 C16.7372367,11.1781851 16.5053438,11.7366211 16.0368254,11.7366211 L13.7557563,11.7366211 L13.7557563,16.7341501 L14.7543156,16.7341501 L18.4740673,16.7341501 C21.2804449,16.5353847 23.4999913,14.0697478 23.4999913,11.2207777 C23.5047238,8.55637538 21.5691279,6.19958614 19.0277708,5.76419536 L19.0277708,5.76419536 Z" id="Shape" stroke="none" fill-rule="evenodd"></path> </svg></li> <li> <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <g id="Blog" stroke="none" stroke-width="1" fill-rule="evenodd"> <path d="M16.7142857,18.8571429 L16.7142857,23.1428571 L10.9997143,18.8571429 L7.28571429,18.8571429 C3.49861886,18.8571429 0.428571429,15.7870954 0.428571429,12 L0.428571429,6.85714286 C0.428571429,3.07004743 3.49861886,6.95678144e-16 7.28571429,0 L16.7142857,0 C20.5013811,2.31892715e-16 23.5714286,3.07004743 23.5714286,6.85714286 L23.5714286,12 C23.5714286,15.7870954 20.5013811,18.8571429 16.7142857,18.8571429 L16.7142857,18.8571429 Z" id="Shape" ></path> <path d="M15.4662857,11.5182857 C15.4662857,11.8782875 15.3942864,12.1942844 15.2502857,12.4662857 C15.106285,12.7382871 14.908287,12.9662848 14.6562857,13.1502857 C14.4042845,13.3342866 14.1122874,13.4742852 13.7802857,13.5702857 C13.4482841,13.6662862 13.0942876,13.7142857 12.7182857,13.7142857 L8.60228571,13.7142857 L8.60228571,5.19428571 L13.1622857,5.19428571 C13.4582872,5.19428571 13.7262845,5.25828507 13.9662857,5.38628571 C14.2062869,5.51428635 14.4102849,5.68028469 14.5782857,5.88428571 C14.7462866,6.08828673 14.8762853,6.32028441 14.9682857,6.58028571 C15.0602862,6.84028701 15.1062857,7.10228439 15.1062857,7.36628571 C15.1062857,7.78228779 15.0022868,8.17228389 14.7942857,8.53628571 C14.5862847,8.90028753 14.2822877,9.17028483 13.8822857,9.34628571 C14.3702882,9.49028643 14.7562843,9.74828385 15.0402857,10.1202857 C15.3242871,10.4922876 15.4662857,10.9582829 15.4662857,11.5182857 L15.4662857,11.5182857 Z M13.7982857,11.2062857 C13.7982857,11.054285 13.772286,10.9082864 13.7202857,10.7682857 C13.6682855,10.628285 13.5982862,10.5062862 13.5102857,10.4022857 C13.4222853,10.2982852 13.3182863,10.216286 13.1982857,10.1562857 C13.0782851,10.0962854 12.9462864,10.0662857 12.8022857,10.0662857 L10.2582857,10.0662857 L10.2582857,12.3102857 L12.7182857,12.3102857 C12.8702865,12.3102857 13.0122851,12.282286 13.1442857,12.2262857 C13.2762864,12.1702854 13.3902852,12.0922862 13.4862857,11.9922857 C13.5822862,11.8922852 13.6582854,11.7742864 13.7142857,11.6382857 C13.770286,11.502285 13.7982857,11.3582865 13.7982857,11.2062857 L13.7982857,11.2062857 Z M10.2582857,6.61028571 L10.2582857,8.75828571 L12.4662857,8.75828571 C12.7462871,8.75828571 12.9842847,8.66228667 13.1802857,8.47028571 C13.3762867,8.27828475 13.4742857,8.01428739 13.4742857,7.67828571 C13.4742857,7.35028407 13.3842866,7.09028667 13.2042857,6.89828571 C13.0242848,6.70628475 12.802287,6.61028571 12.5382857,6.61028571 L10.2582857,6.61028571 Z" id="B" fill="#FFFFFF"></path> </g> </svg></li> <li> <svg width="20px" height="24px" viewBox="0 0 20 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <path d="M14.893123,5.11483449 C14.893123,2.29505517 12.6345418,0 9.85957557,0 C7.08460937,0 4.82602818,2.29505517 4.82602818,5.11483449 L4.82602818,5.92398856 L1.16789882,5.92398856 L3.55271368e-15,24 L19.7191511,24 L18.5512523,5.92398856 L14.893123,5.92398856 L14.893123,5.11483449 Z M4.99976519,8.60645689 C4.99976519,8.00817327 5.47754198,7.52268083 6.06631742,7.52268083 C6.65509286,7.52268083 7.13286965,8.00817327 7.13286965,8.60645689 C7.13286965,9.20964446 6.65509286,9.69023294 6.06631742,9.69023294 C5.47754198,9.69023294 4.99976519,9.2047405 4.99976519,8.60645689 Z M7.14734773,5.92398856 L7.14734773,5.11483449 C7.14734773,3.59460564 8.36350683,2.3588067 9.85957557,2.3588067 C11.3556443,2.3588067 12.5718034,3.59460564 12.5718034,5.11483449 L12.5718034,5.92398856 L7.14734773,5.92398856 Z M12.5862815,8.60645689 C12.5862815,8.00817327 13.0640583,7.52268083 13.6528337,7.52268083 C14.2416092,7.52268083 14.7193859,8.00817327 14.7193859,8.60645689 C14.7145599,9.20964446 14.2416092,9.69023294 13.6528337,9.69023294 C13.0640583,9.69023294 12.5862815,9.2047405 12.5862815,8.60645689 Z" id="Shape" stroke="none" fill-rule="evenodd"></path> </svg></li> </ul> </div> <!-- /Add a Component --> <!-- Production Wrapp --> <div class="col-xs-8 center-xs row prodWrapp"> <!-- Navigation --> <div class="col-xs-12 center-xs menu"> <object>Header</object> <!-- Logo --> <div class="col-xs start-xs logo"> <svg width="130px" height="26px" viewBox="20 26 130 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(20.000000, 26.000000)"> <path d="M42,23.88 L42,1.16 L47.248,1.16 L47.248,19.272 L58.256,19.272 L58.256,23.88 L42,23.88 Z M69.4986667,24.072 C67.8133249,24.072 66.2773403,23.7413366 64.8906667,23.08 C63.5039931,22.4186634 62.3200049,21.5493387 61.3386667,20.472 C60.3573284,19.3946613 59.5946694,18.1626736 59.0506667,16.776 C58.5066639,15.3893264 58.2346667,13.9600074 58.2346667,12.488 C58.2346667,10.9946592 58.5173305,9.5546736 59.0826667,8.168 C59.6480028,6.7813264 60.4373283,5.56000528 61.4506667,4.504 C62.4640051,3.44799472 63.6639931,2.60533648 65.0506667,1.976 C66.4373403,1.34666352 67.9519918,1.032 69.5946667,1.032 C71.2800084,1.032 72.8159931,1.36266336 74.2026667,2.024 C75.5893403,2.68533664 76.7733284,3.55999456 77.7546667,4.648 C78.7360049,5.73600544 79.4933307,6.9733264 80.0266667,8.36 C80.5600027,9.7466736 80.8266667,11.1546595 80.8266667,12.584 C80.8266667,14.0773408 80.5440028,15.5173264 79.9786667,16.904 C79.4133305,18.2906736 78.6293383,19.5119947 77.6266667,20.568 C76.623995,21.6240053 75.4293403,22.4719968 74.0426667,23.112 C72.6559931,23.7520032 71.1413415,24.072 69.4986667,24.072 L69.4986667,24.072 Z M63.5786667,12.552 C63.5786667,13.426671 63.7066654,14.2746626 63.9626667,15.096 C64.2186679,15.9173374 64.5973308,16.6479968 65.0986667,17.288 C65.6000025,17.9280032 66.2239963,18.4399981 66.9706667,18.824 C67.7173371,19.2080019 68.5706619,19.4 69.5306667,19.4 C70.5333383,19.4 71.4079963,19.1973354 72.1546667,18.792 C72.9013371,18.3866646 73.5199975,17.8586699 74.0106667,17.208 C74.5013358,16.5573301 74.8693321,15.8213374 75.1146667,15 C75.3600012,14.1786626 75.4826667,13.3413376 75.4826667,12.488 C75.4826667,11.613329 75.3546679,10.7653374 75.0986667,9.944 C74.8426654,9.12266256 74.4586692,8.39733648 73.9466667,7.768 C73.4346641,7.13866352 72.8106703,6.6373352 72.0746667,6.264 C71.338663,5.8906648 70.4906715,5.704 69.5306667,5.704 C68.527995,5.704 67.6586703,5.90133136 66.9226667,6.296 C66.186663,6.69066864 65.5680025,7.2079968 65.0666667,7.848 C64.5653308,8.4880032 64.1920012,9.21866256 63.9466667,10.04 C63.7013321,10.8613374 63.5786667,11.6986624 63.5786667,12.552 L63.5786667,12.552 Z M99.7493333,21.64 C98.0213247,23.240008 96.0266779,24.04 93.7653333,24.04 C92.2719925,24.04 90.8640066,23.7573362 89.5413333,23.192 C88.21866,22.6266638 87.0613383,21.8320051 86.0693333,20.808 C85.0773283,19.7839949 84.2933362,18.5520072 83.7173333,17.112 C83.1413304,15.6719928 82.8533333,14.0880086 82.8533333,12.36 C82.8533333,10.8026589 83.1413304,9.3306736 83.7173333,7.944 C84.2933362,6.5573264 85.0879949,5.35200512 86.1013333,4.328 C87.1146717,3.30399488 88.3146597,2.49333632 89.7013333,1.896 C91.0880069,1.29866368 92.5813253,1 94.1813333,1 C96.2933439,1 98.1386587,1.44266224 99.7173333,2.328 C101.296008,3.21333776 102.479996,4.42399232 103.269333,5.96 L99.3653333,8.904 C98.8533307,7.87999488 98.1120048,7.08533616 97.1413333,6.52 C96.1706618,5.95466384 95.1200056,5.672 93.9893333,5.672 C93.1146623,5.672 92.3200035,5.84799824 91.6053333,6.2 C90.8906631,6.55200176 90.2773359,7.04266352 89.7653333,7.672 C89.2533307,8.30133648 88.858668,9.03199584 88.5813333,9.864 C88.3039986,10.6960042 88.1653333,11.5919952 88.1653333,12.552 C88.1653333,13.5333382 88.3146651,14.4399958 88.6133333,15.272 C88.9120015,16.1040042 89.3279973,16.823997 89.8613333,17.432 C90.3946693,18.040003 91.0293296,18.514665 91.7653333,18.856 C92.501337,19.197335 93.3173288,19.368 94.2133333,19.368 C96.2613435,19.368 98.1066584,18.4186762 99.7493333,16.52 L99.7493333,15.816 L95.3333333,15.816 L95.3333333,12.008 L104.101333,12.008 L104.101333,23.88 L99.7493333,23.88 L99.7493333,21.64 Z M117.776,24.072 C116.090658,24.072 114.554674,23.7413366 113.168,23.08 C111.781326,22.4186634 110.597338,21.5493387 109.616,20.472 C108.634662,19.3946613 107.872003,18.1626736 107.328,16.776 C106.783997,15.3893264 106.512,13.9600074 106.512,12.488 C106.512,10.9946592 106.794664,9.5546736 107.36,8.168 C107.925336,6.7813264 108.714662,5.56000528 109.728,4.504 C110.741338,3.44799472 111.941326,2.60533648 113.328,1.976 C114.714674,1.34666352 116.229325,1.032 117.872,1.032 C119.557342,1.032 121.093326,1.36266336 122.48,2.024 C123.866674,2.68533664 125.050662,3.55999456 126.032,4.648 C127.013338,5.73600544 127.770664,6.9733264 128.304,8.36 C128.837336,9.7466736 129.104,11.1546595 129.104,12.584 C129.104,14.0773408 128.821336,15.5173264 128.256,16.904 C127.690664,18.2906736 126.906672,19.5119947 125.904,20.568 C124.901328,21.6240053 123.706674,22.4719968 122.32,23.112 C120.933326,23.7520032 119.418675,24.072 117.776,24.072 L117.776,24.072 Z M111.856,12.552 C111.856,13.426671 111.983999,14.2746626 112.24,15.096 C112.496001,15.9173374 112.874664,16.6479968 113.376,17.288 C113.877336,17.9280032 114.50133,18.4399981 115.248,18.824 C115.99467,19.2080019 116.847995,19.4 117.808,19.4 C118.810672,19.4 119.68533,19.1973354 120.432,18.792 C121.17867,18.3866646 121.797331,17.8586699 122.288,17.208 C122.778669,16.5573301 123.146665,15.8213374 123.392,15 C123.637335,14.1786626 123.76,13.3413376 123.76,12.488 C123.76,11.613329 123.632001,10.7653374 123.376,9.944 C123.119999,9.12266256 122.736003,8.39733648 122.224,7.768 C121.711997,7.13866352 121.088004,6.6373352 120.352,6.264 C119.615996,5.8906648 118.768005,5.704 117.808,5.704 C116.805328,5.704 115.936004,5.90133136 115.2,6.296 C114.463996,6.69066864 113.845336,7.2079968 113.344,7.848 C112.842664,8.4880032 112.469335,9.21866256 112.224,10.04 C111.978665,10.8613374 111.856,11.6986624 111.856,12.552 L111.856,12.552 Z" id="LOGO" fill="#6D6D6D"></path> <g id="uranus"> <g id="Capa_1"> <g id="Group"> <path d="M4.54578486,18.7515112 C4.512,18.6820698 4.47878884,18.6123042 4.44621514,18.5421496 C4.43646215,18.521207 4.42696414,18.5001995 4.41733865,18.479192 C4.38610359,18.4109825 4.355251,18.3425137 4.32516335,18.2736559 C4.31515538,18.2507032 4.30533865,18.2275561 4.29545817,18.2045387 C4.26626295,18.1366534 4.23732271,18.0687032 4.2092749,18.0002344 C4.19945817,17.9763741 4.1900239,17.9522544 4.18039841,17.9283292 C4.15279681,17.8598603 4.12538645,17.7913267 4.09886853,17.7223392 C4.09026295,17.6998404 4.08203984,17.6770823 4.07356175,17.6545187 C4.04666135,17.5832618 4.01995219,17.5119401 3.99426295,17.4400998 C3.98967331,17.427197 3.98540239,17.4141646 3.98081275,17.4012618 C3.90501992,17.1869077 3.83483665,16.9698304 3.77000797,16.750419 C3.0745498,17.4381546 2.76143426,18.0163142 2.9241753,18.4227182 C3.08691633,18.8290574 3.70881275,19.019616 4.67869323,19.0172818 C4.64242231,18.946803 4.60685259,18.876 4.57179283,18.804808 C4.56305976,18.7871072 4.55445418,18.7692768 4.54578486,18.7515112 L4.54578486,18.7515112 Z" id="Shape"></path> <path d="M29.036494,7.60198504 C28.8736892,7.19551621 28.2521753,7.00456858 27.2817849,7.00703242 C27.6516335,7.72569576 27.9570996,8.48391022 28.1905976,9.27389526 C28.8856733,8.58635411 29.1992351,8.00819451 29.036494,7.60198504 L29.036494,7.60198504 Z" id="Shape"></path> <path d="M23.2047809,3.50280299 C18.8645737,3.50280299 15.0315857,5.70936658 12.7291155,9.07918703 C13.1977689,8.870798 13.6742629,8.66565087 14.1588526,8.46484788 C18.6265498,6.61346633 22.8743267,5.4699202 26.0998884,5.12543641 C24.4301514,2.91225935 22.0749004,1.26284788 19.3566853,0.505346633 C21.4048765,1.07715212 23.2467251,2.15624938 24.7451155,3.6003192 C24.2398088,3.538399 23.7265339,3.50280299 23.2047809,3.50280299 L23.2047809,3.50280299 Z" id="Shape" fill="#D8D8D8"></path> <path d="M5.82960801,20.7853388 C5.76369305,20.7201853 5.69914657,20.6542772 5.63448606,20.5883691 C5.69891849,20.6543611 5.76380709,20.7201015 5.82960801,20.7853388 L5.82960801,20.7853388 Z" id="Shape" fill="#708AFF"></path> <path d="M18.179251,0.237566085 C18.2773639,0.278732751 18.3750687,0.323050933 18.4726102,0.368550933 C18.3750687,0.323247903 18.2773639,0.278732751 18.179251,0.237566085 L18.179251,0.237566085 Z" id="Shape" fill="#708AFF"></path> <path d="M18.4799363,0.294623441 C18.5844975,0.344850714 18.688569,0.398032532 18.7923141,0.453184047 C18.6884874,0.398229502 18.5844975,0.344850714 18.4799363,0.294623441 L18.4799363,0.294623441 Z" id="Shape" fill="#708AFF"></path> <path d="M19.068749,0.428773067 C19.18686,0.49175452 19.3044812,0.557352932 19.421531,0.625742764 C19.3043996,0.557352932 19.18686,0.491580057 19.068749,0.428773067 L19.068749,0.428773067 Z" id="Shape" fill="#708AFF"></path> <path d="M28.1874741,9.27707232 C28.1885578,9.27603491 28.1895139,9.27499751 28.1905976,9.27389526 C27.9570996,8.48384539 27.6516335,7.72563092 27.2817849,7.00703242 C24.8195697,7.0133217 20.1098964,8.26573067 14.9376255,10.4090773 C13.6237131,10.9535212 12.3710598,11.5179352 11.203761,12.085591 C10.72,13.4552269 10.4557769,14.9313267 10.4557769,16.470384 C10.4557769,20.1776858 11.987761,23.5190424 14.4399681,25.882384 C10.8945339,25.4477107 7.79684462,23.53402 5.76178486,20.7654414 C5.78830279,20.8016209 5.81462948,20.8379302 5.84152988,20.8737855 C8.1709004,23.9771222 11.8453546,25.9799651 15.9803028,25.9799651 C23.0213865,25.9799651 28.7293068,20.1741845 28.7293068,13.012384 C28.7293068,12.4865486 28.6976892,11.9682993 28.6378964,11.4588678 C28.6373865,11.4592569 28.6369402,11.4596459 28.6364303,11.4600349 C28.5482709,10.7105087 28.3959203,9.981601 28.1874741,9.27707232 L28.1874741,9.27707232 Z" id="Shape" fill="#D8D8D8"></path> <path d="M4.44621514,18.5422145 C4.51004825,18.6315022 4.57513054,18.7202947 4.64133709,18.8086747 C4.57513054,18.7202122 4.51004825,18.6314196 4.44621514,18.5422145 L4.44621514,18.5422145 Z" id="Shape" fill="#708AFF"></path> <path d="M4.2092749,18.0002993 C4.27277613,18.0874414 4.33829785,18.1739234 4.40439685,18.2603228 C4.33829785,18.1739234 4.27277613,18.0873589 4.2092749,18.0002993 L4.2092749,18.0002993 Z" id="Shape" fill="#708AFF"></path> <path d="M4.09886853,17.7223392 C4.16218018,17.810224 4.22793277,17.8974487 4.29399048,17.9845083 C4.22793277,17.8974487 4.16218018,17.810224 4.09886853,17.7223392 L4.09886853,17.7223392 Z" id="Shape" fill="#708AFF"></path> <path d="M3.99426295,17.4401646 C4.05747368,17.5315978 4.12335086,17.6223709 4.1893849,17.7130614 C4.12319401,17.6223709 4.05731683,17.5315978 3.99426295,17.4401646 L3.99426295,17.4401646 Z" id="Shape" fill="#708AFF"></path> <path d="M5.57379846,20.5023591 C5.55877407,20.4808894 5.54413993,20.4592228 5.52911554,20.4375561 C5.54413993,20.4592228 5.5589692,20.4808894 5.57379846,20.5023591 L5.57379846,20.5023591 Z" id="Shape" fill="#708AFF"></path> <path d="M4.32516335,18.2737207 C4.38885461,18.361358 4.45416513,18.4484176 4.5202853,18.5353122 C4.45416513,18.4484176 4.38885461,18.361358 4.32516335,18.2737207 L4.32516335,18.2737207 Z" id="Shape" fill="#708AFF"></path> <path d="M3.77008959,16.7503541 L3.77000797,16.750419 C3.85302031,16.9698304 3.94288913,17.1869077 4.03994092,17.4012618 C3.9428075,17.1869726 3.85318356,16.9697656 3.77008959,16.7503541 L3.77008959,16.7503541 Z" id="Shape" fill="#708AFF"></path> <path d="M18.7763506,0.35842394 C18.8875235,0.418499698 18.9982882,0.48172697 19.1086448,0.54731788 C18.9982882,0.48172697 18.8876051,0.418499698 18.7763506,0.35842394 L18.7763506,0.35842394 Z" id="Shape" fill="#708AFF"></path> <path d="M3.30005092,14.1718724 C3.28853872,14.1062784 3.27644116,14.0406844 3.26629482,13.9749027 C3.27644116,14.0406844 3.28853872,14.1062784 3.30005092,14.1718724 L3.30005092,14.1718724 Z" id="Shape" fill="#708AFF"></path> <path d="M16.9413227,0.0813067332 C17.014132,0.0945037029 17.0866147,0.111049157 17.1591791,0.126412794 C17.0866147,0.111049157 17.0142136,0.0943067332 16.9413227,0.0813067332 L16.9413227,0.0813067332 Z" id="Shape" fill="#708AFF"></path> <path d="M3.24669556,13.532052 C3.24318336,13.4663954 3.23791507,13.4009767 3.23537849,13.3350823 C3.23791507,13.4009767 3.24318336,13.4663954 3.24669556,13.532052 L3.24669556,13.532052 Z" id="Shape" fill="#708AFF"></path> <path d="M16.6236813,0.0611421446 C16.6889141,0.0688239628 16.7537351,0.0800512355 16.8188032,0.0897027507 C16.7537351,0.0802482052 16.6889141,0.0690209325 16.6236813,0.0611421446 L16.6236813,0.0611421446 Z" id="Shape" fill="#708AFF"></path> <path d="M16.3033625,0.0489526185 C16.3686438,0.0521041336 16.4334095,0.0584071639 16.4984845,0.0627404972 C16.4333063,0.0584071639 16.3685407,0.0519071639 16.3033625,0.0489526185 L16.3033625,0.0489526185 Z" id="Shape" fill="#708AFF"></path> <path d="M4.76691478,19.0752292 L4.76691478,19.0752292 C4.70082696,18.9856114 4.63578631,18.895416 4.57179283,18.804808 C4.63578631,18.895416 4.70071061,18.9856114 4.76691478,19.0752292 L4.76691478,19.0752292 Z" id="Shape" fill="#708AFF"></path> <path d="M17.8749323,0.187511222 C17.967005,0.220602131 18.0586695,0.257041525 18.1503341,0.293874858 C18.0586695,0.257041525 17.967005,0.220602131 17.8749323,0.187511222 L17.8749323,0.187511222 Z" id="Shape" fill="#708AFF"></path> <path d="M3.33794578,14.4883463 C3.32253114,14.4227199 3.30692139,14.3571842 3.29306773,14.2913766 C3.30692139,14.3571842 3.32253114,14.4227199 3.33794578,14.4883463 L3.33794578,14.4883463 Z" id="Shape" fill="#708AFF"></path> <path d="M17.5670438,0.144653367 C17.6529947,0.170456397 17.7384557,0.199410942 17.8239984,0.228562457 C17.7384557,0.199607912 17.6529947,0.170456397 17.5670438,0.144653367 L17.5670438,0.144653367 Z" id="Shape" fill="#708AFF"></path> <path d="M17.2557769,0.109187032 C17.3354426,0.128293093 17.4147818,0.150747638 17.4941211,0.172808245 C17.4147002,0.150944608 17.3354426,0.128293093 17.2557769,0.109187032 L17.2557769,0.109187032 Z" id="Shape" fill="#708AFF"></path> <path d="M3.26948285,13.8530645 C3.26206821,13.7874413 3.25328773,13.7219183 3.24704382,13.6560948 C3.25328773,13.7219183 3.26206821,13.7874413 3.26948285,13.8530645 L3.26948285,13.8530645 Z" id="Shape" fill="#708AFF"></path> <path d="M14.4399681,25.882384 C11.987761,23.5190424 10.4557769,20.1776858 10.4557769,16.470384 C10.4557769,14.9313267 10.72,13.4552269 11.203761,12.085591 C7.77549004,13.7527681 5.08691633,15.4480848 3.77007171,16.7503541 C3.83496414,16.9697656 3.90495618,17.1869726 3.98081275,17.4013267 C3.98540239,17.4142294 3.98967331,17.4272618 3.99426295,17.4401646 C4.01995219,17.512005 4.04666135,17.5833267 4.07356175,17.6545835 C4.08210359,17.6771471 4.09026295,17.6998404 4.09886853,17.722404 C4.12532271,17.7914564 4.15273307,17.85999 4.18039841,17.928394 C4.1900239,17.9523192 4.19945817,17.9764389 4.2092749,18.0002993 C4.23738645,18.0687681 4.26626295,18.1367182 4.29545817,18.2046035 C4.30540239,18.2276209 4.31515538,18.2507681 4.32516335,18.2737207 C4.355251,18.3425786 4.38610359,18.4110474 4.41733865,18.4792569 C4.42696414,18.5002643 4.4365259,18.5212718 4.44621514,18.5422145 C4.47878884,18.6123691 4.512,18.6821347 4.54578486,18.7515761 C4.55445418,18.7693416 4.56305976,18.7871072 4.57179283,18.8048728 C4.60678884,18.8760648 4.64242231,18.9469327 4.67869323,19.0173466 C4.68124303,19.0173466 4.68360159,19.0174115 4.68608765,19.0174115 C4.93941036,19.5093367 5.21969721,19.9844688 5.52911554,20.4376858 C5.5340239,20.4447531 5.53880478,20.4519501 5.54371315,20.4590175 C5.57354582,20.5025237 5.60414343,20.5453815 5.63448606,20.5884988 C5.67062948,20.6394613 5.70670916,20.6904239 5.74355378,20.740803 C5.74960956,20.7491022 5.75572908,20.7573367 5.76178486,20.7655711 C7.79684462,23.53402 10.8945339,25.4477107 14.4399681,25.882384 L14.4399681,25.882384 Z" id="Shape" fill="#6D6D6D"></path> <path d="M12.7291155,9.07918703 C15.0315857,5.70936658 18.86451,3.50280299 23.2047809,3.50280299 C23.7265339,3.50280299 24.2398088,3.538399 24.7451793,3.60038404 C23.2467888,2.15631421 21.4049402,1.07721696 19.356749,0.505411471 C19.3526056,0.504244389 19.3484622,0.503142145 19.3443187,0.501975062 C19.2529084,0.476558603 19.1610518,0.452179551 19.0688127,0.428773067 C19.0578486,0.425985037 19.0468845,0.423391521 19.0359841,0.420603491 C18.9498008,0.399012469 18.8633625,0.378199501 18.7764781,0.35842394 C18.759012,0.35440399 18.7414821,0.350708229 18.7240159,0.346817955 C18.6429323,0.328663342 18.5616574,0.311157107 18.4800637,0.294623441 C18.4562869,0.289825436 18.4323187,0.285351621 18.4084781,0.280683292 C18.3323028,0.265705736 18.256,0.251117207 18.1793785,0.237566085 C18.1497371,0.232314214 18.1198406,0.227581047 18.0901355,0.222523691 C18.0186135,0.210399002 17.9470279,0.19840399 17.8750598,0.187511222 C17.8394263,0.182129676 17.8036016,0.177396509 17.7678406,0.172274314 C17.7010996,0.162743142 17.6342948,0.153147132 17.5671713,0.144653367 C17.5255458,0.139401496 17.4837291,0.134927681 17.4419761,0.130064838 C17.3800159,0.12286783 17.3181195,0.115476309 17.2558406,0.109122195 C17.2079044,0.104259352 17.1596494,0.100369077 17.1115857,0.0960897756 C17.0549163,0.091032419 16.9983108,0.0855860349 16.9414502,0.0812418953 C16.8860558,0.0770274314 16.8304064,0.0739800499 16.7748207,0.070478803 C16.7245259,0.0673017456 16.6742948,0.063605985 16.6238088,0.0610773067 C16.5574502,0.0577057357 16.4907092,0.0556957606 16.4240319,0.053361596 C16.3838088,0.052 16.3437769,0.0498603491 16.3034263,0.0488229426 C16.1960797,0.0460997506 16.0884143,0.0446733167 15.9804303,0.0446733167 C8.93934661,0.0446733167 3.23142629,5.85045387 3.23142629,13.0122544 C3.23142629,13.1201446 3.23282869,13.2277107 3.23544223,13.3350175 C3.23627092,13.3708728 3.23799203,13.4065337 3.23913944,13.442389 C3.24143426,13.5137107 3.24372908,13.5850324 3.24710757,13.6560299 C3.24914741,13.6986284 3.25201594,13.7410324 3.25443825,13.7835012 C3.25813546,13.8473666 3.26176892,13.9112319 3.26635857,13.9748379 C3.26967331,14.0202893 3.2736255,14.065611 3.27738645,14.1109327 C3.28235857,14.1711671 3.28733068,14.2313367 3.29313147,14.2913117 C3.29765737,14.338384 3.30275697,14.3852618 3.30779283,14.4322045 C3.31250996,14.4764239 3.31690837,14.5207082 3.32207171,14.564798 C5.59005578,12.7401945 8.87636653,10.7924638 12.7291155,9.07918703 L12.7291155,9.07918703 Z" id="Shape" fill="#6D6D6D"></path> <path d="M31.8551076,6.43399501 C31.3617849,5.20226933 29.2042072,4.79385536 26.0999522,5.12543641 C22.8743904,5.4699202 18.6266135,6.61346633 14.1589163,8.46484788 C13.6743267,8.66565087 13.1978327,8.870798 12.7291793,9.07918703 C8.87643028,10.7924638 5.59011952,12.7401945 3.32207171,14.5648628 C0.874581673,16.5338603 -0.387633466,18.3592419 0.105625498,19.5907082 C0.598820717,20.82198 2.75697211,21.2291621 5.85956972,20.8982294 C5.85351394,20.8901895 5.8476494,20.8818903 5.84159363,20.8737855 C5.81469323,20.8379302 5.78836653,20.8016209 5.76184861,20.7654414 C5.75579283,20.7571421 5.74960956,20.7489726 5.74361753,20.7406733 C5.70683665,20.6902294 5.67056574,20.6394613 5.6345498,20.5883691 C5.60420717,20.5453167 5.57360956,20.502394 5.54377689,20.4588878 C5.53893227,20.4518204 5.53408765,20.4446883 5.52917928,20.4375561 C5.21976096,19.984404 4.9394741,19.509207 4.68615139,19.0172818 C4.68360159,19.0172818 4.68124303,19.017217 4.67875697,19.017217 C4.67875697,19.017217 4.67875697,19.017217 4.67869323,19.017217 C3.70881275,19.0195511 3.08691633,18.8289925 2.9241753,18.4226534 C2.76143426,18.0163142 3.0745498,17.4381546 3.77000797,16.7503541 L3.77007171,16.7502893 C5.08691633,15.44802 7.77549004,13.7527032 11.203761,12.0855262 C12.3710598,11.5178703 13.6237131,10.9534564 14.9376255,10.4090125 C20.1098964,8.26566584 24.8195697,7.01325686 27.2817849,7.00696758 C28.2521753,7.00450374 28.8736892,7.19545137 29.036494,7.6019202 C29.1992351,8.00819451 28.8856733,8.58628928 28.1905976,9.27383042 C28.1895139,9.27486783 28.1885578,9.27590524 28.1874741,9.27700748 C28.3959841,9.98153616 28.5482709,10.7104439 28.636494,11.4599052 C28.637004,11.4595162 28.6374502,11.4591272 28.6379602,11.4587382 C31.0843665,9.49032419 32.348239,7.665202 31.8551076,6.43399501 L31.8551076,6.43399501 Z" id="Shape" fill="#000000"></path> </g> </g> </g> </g> </svg> </div><!-- /Logo --> <div class="col-xs-10 flex-end row nav"> <ul> <li>home</li> <li>press</li> <li>product</li> <li>store</li> <li>contact</li> <li> <svg width="24px" height="28px" viewBox="329 0 24 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <g id="Shopping-bag" stroke="none" stroke-width="1" fill-rule="evenodd" transform="translate(329.000000, 0.000000)"> <path d="M17.3765281,5.96 C17.3765281,2.67428571 14.7447433,0 11.5112469,0 C8.27775061,0 5.64596577,2.67428571 5.64596577,5.96 L5.64596577,6.90285714 L1.38337408,6.90285714 L0.0224938875,27.9657143 L23,27.9657143 L21.6391198,6.90285714 L17.3765281,6.90285714 L17.3765281,5.96 Z M5.84841076,10.0285714 C5.84841076,9.33142857 6.40513447,8.76571429 7.09119804,8.76571429 C7.77726161,8.76571429 8.33398533,9.33142857 8.33398533,10.0285714 C8.33398533,10.7314286 7.77726161,11.2914286 7.09119804,11.2914286 C6.40513447,11.2914286 5.84841076,10.7257143 5.84841076,10.0285714 Z M8.35085575,6.90285714 L8.35085575,5.96 C8.35085575,4.18857143 9.76797066,2.74857143 11.5112469,2.74857143 C13.2545232,2.74857143 14.6716381,4.18857143 14.6716381,5.96 L14.6716381,6.90285714 L8.35085575,6.90285714 Z M14.6885086,10.0285714 C14.6885086,9.33142857 15.2452323,8.76571429 15.9312958,8.76571429 C16.6173594,8.76571429 17.1740831,9.33142857 17.1740831,10.0285714 C17.1684597,10.7314286 16.6173594,11.2914286 15.9312958,11.2914286 C15.2452323,11.2914286 14.6885086,10.7257143 14.6885086,10.0285714 Z" id="Shape" ></path> <text id="0" font-family="SourceSansPro-Semibold, Source Sans Pro" font-size="14" font-weight="500" fill="#FFFFFF"> <tspan x="7.59997559" y="23">0</tspan> </text> </g> </svg></li> </ul> </div> </div><!-- /Navigation --> <!-- Title --> <div class="title col-xs-12 start-xs"> <h1>Products</h1> </div> <!-- /Title --> <div class="selector col-xs-12 cener-xs"> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <span></span> <!-- Grid gallery --> <div class="col-xs-12 row center-xs gridGallery"> <!-- Single--> <div class="col-xs pBox"> <div class="col-xs-12 img"> <svg width="125px" height="97px" viewBox="88 52 125 97" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <g id="Group-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(88.000000, 52.000000)"> <polygon id="Triangle" fill="#D8D8D8" points="46 0 92 76 0 76"></polygon> <rect id="Rectangle-10" fill="#F0F0F0" x="64" y="15" width="61" height="61"></rect> <circle id="Oval" fill="#989898" cx="63" cy="66" r="31"></circle> </g> </svg> </div> <div class="col-xs-12 start-xs pDesc"> <h3>I'm a product</h3> <p>$123.30</p> </div> </div><!-- Single--> <!-- Single--> <div class="col-xs pBox"> <div class="col-xs-12 img"> <svg width="125px" height="97px" viewBox="88 52 125 97" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <g id="Group-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(88.000000, 52.000000)"> <polygon id="Triangle" fill="#D8D8D8" points="46 0 92 76 0 76"></polygon> <rect id="Rectangle-10" fill="#F0F0F0" x="64" y="15" width="61" height="61"></rect> <circle id="Oval" fill="#989898" cx="63" cy="66" r="31"></circle> </g> </svg> </div> <div class="col-xs-12 start-xs pDesc"> <h3>I'm a product</h3> <p>$123.30</p> </div> </div><!-- Single--> <!-- Single--> <div class="col-xs pBox"> <div class="col-xs-12 img"> <svg width="125px" height="97px" viewBox="88 52 125 97" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <g id="Group-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(88.000000, 52.000000)"> <polygon id="Triangle" fill="#D8D8D8" points="46 0 92 76 0 76"></polygon> <rect id="Rectangle-10" fill="#F0F0F0" x="64" y="15" width="61" height="61"></rect> <circle id="Oval" fill="#989898" cx="63" cy="66" r="31"></circle> </g> </svg> </div> <div class="col-xs-12 start-xs pDesc"> <h3>I'm a product</h3> <p>$123.30</p> </div> </div><!-- Single--> </div><!-- /Grid gallery --> <!-- Grid gallery --> <div class="col-xs-12 row center-xs gridGallery"> <!-- Single--> <div class="col-xs pBox"> <div class="col-xs-12 img"> <svg width="125px" height="97px" viewBox="88 52 125 97" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <g id="Group-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(88.000000, 52.000000)"> <polygon id="Triangle" fill="#D8D8D8" points="46 0 92 76 0 76"></polygon> <rect id="Rectangle-10" fill="#F0F0F0" x="64" y="15" width="61" height="61"></rect> <circle id="Oval" fill="#989898" cx="63" cy="66" r="31"></circle> </g> </svg> </div> <div class="col-xs-12 start-xs pDesc"> <h3>I'm a product</h3> <p>$123.30</p> </div> </div><!-- Single--> <!-- Single--> <div class="col-xs pBox"> <div class="col-xs-12 img"> <svg width="125px" height="97px" viewBox="88 52 125 97" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <g id="Group-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(88.000000, 52.000000)"> <polygon id="Triangle" fill="#D8D8D8" points="46 0 92 76 0 76"></polygon> <rect id="Rectangle-10" fill="#F0F0F0" x="64" y="15" width="61" height="61"></rect> <circle id="Oval" fill="#989898" cx="63" cy="66" r="31"></circle> </g> </svg> </div> <div class="col-xs-12 start-xs pDesc"> <h3>I'm a product</h3> <p>$123.30</p> </div> </div><!-- Single--> <!-- Single--> <div class="col-xs pBox"> <div class="col-xs-12 img"> <svg width="125px" height="97px" viewBox="88 52 125 97" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <g id="Group-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(88.000000, 52.000000)"> <polygon id="Triangle" fill="#D8D8D8" points="46 0 92 76 0 76"></polygon> <rect id="Rectangle-10" fill="#F0F0F0" x="64" y="15" width="61" height="61"></rect> <circle id="Oval" fill="#989898" cx="63" cy="66" r="31"></circle> </g> </svg> </div> <div class="col-xs-12 start-xs pDesc"> <h3>I'm a product</h3> <p>$123.30</p> </div> </div><!-- Single--> </div><!-- /Grid gallery --> </div> <!-- Hovering Menu--> <div class="hMenu"> <ul> <li>Manage Products</li> <li class="sideBar-btn">Settings</li> <li>Store Pages</li> <li> <svg width="20px" height="20px" viewBox="8 8 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <g id="Group-22" stroke="none" stroke-width="1" fill-rule="evenodd" transform="translate(8.000000, 8.000000)"> <rect id="Rectangle-17" x="0" y="0" width="20" height="20" rx="10"></rect> <path d="M8.82,12.5854545 L8.82,14.5454545 L10.8181818,14.5454545 L10.8181818,12.5854545 L8.82,12.5854545 Z M6.77090909,8.38545455 L8.64181818,8.38545455 C8.64181818,8.15636249 8.66727247,7.94212221 8.71818182,7.74272727 C8.76909116,7.54333234 8.84757523,7.36939468 8.95363636,7.22090909 C9.0596975,7.0724235 9.19545372,6.95363681 9.36090909,6.86454545 C9.52636446,6.7754541 9.72363522,6.73090909 9.95272727,6.73090909 C10.2921229,6.73090909 10.5572718,6.82424149 10.7481818,7.01090909 C10.9390919,7.19757669 11.0345455,7.48605865 11.0345455,7.87636364 C11.0430303,8.10545569 11.0027277,8.29636287 10.9136364,8.44909091 C10.824545,8.60181895 10.7078795,8.74181755 10.5636364,8.86909091 C10.4193932,8.99636427 10.2624251,9.12363573 10.0927273,9.25090909 C9.92302945,9.37818245 9.76181895,9.52878701 9.60909091,9.70272727 C9.45636287,9.87666754 9.32272785,10.0866654 9.20818182,10.3327273 C9.09363579,10.5787891 9.02363649,10.8842406 8.99818182,11.2490909 L8.99818182,11.8218182 L10.7163636,11.8218182 L10.7163636,11.3381818 C10.7503032,11.0836351 10.8330296,10.871516 10.9645455,10.7018182 C11.0960613,10.5321204 11.2466658,10.3815158 11.4163636,10.25 C11.5860615,10.1184842 11.7663627,9.98697035 11.9572727,9.85545455 C12.1481828,9.72393874 12.3221204,9.56484942 12.4790909,9.37818182 C12.6360614,9.19151422 12.7675752,8.96666798 12.8736364,8.70363636 C12.9796975,8.44060475 13.0327273,8.10545658 13.0327273,7.69818182 C13.0327273,7.45211998 12.9796975,7.18697112 12.8736364,6.90272727 C12.7675752,6.61848343 12.5915164,6.35333456 12.3454545,6.10727273 C12.0993927,5.86121089 11.7748505,5.65545537 11.3718182,5.49 C10.9687859,5.32454463 10.4660636,5.24181818 9.86363636,5.24181818 C9.39696736,5.24181818 8.97485037,5.32030225 8.59727273,5.47727273 C8.21969508,5.63424321 7.89727406,5.85272587 7.63,6.13272727 C7.36272594,6.41272867 7.15484923,6.74363445 7.00636364,7.12545455 C6.85787805,7.50727464 6.77939398,7.92727044 6.77090909,8.38545455 L6.77090909,8.38545455 Z" id="?" fill="#FFFFFF"></path> </g> </svg></li> </ul> </div ><!-- /Hovering Menu--> <div class="footerBorder"> </div> </div><!-- /Production Wrapp --> <!-- Side Bar --> <div class="sideBar col-xs-12 row start-xs"> <!-- Header --> <div class="header col-xs-12 row start-xs"> <h3>Grid Gallery Settings</h3> <svg width="21px" height="21px" viewBox="120 37 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs></defs> <g id="Close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(120.000000, 37.000000)"> <circle id="Oval-2" fill-opacity="0.44310462" fill="#C1C1C1" cx="10.5" cy="10.5" r="10.5"></circle> <g id="Group-2" transform="translate(11.047419, 10.836876) rotate(-315.000000) translate(-11.047419, -10.836876) translate(5.547419, 5.336876)" fill="#6D6D6D"> <rect id="Rectangle-8" x="-4.47641924e-13" y="4.95150502" width="10.2717391" height="1.68561873" rx="0.842809365"></rect> <path d="M5.13586957,0.658444816 C5.60134032,0.658444816 5.97867893,1.03620341 5.97867893,1.49902434 L5.97867893,10.0896044 C5.97867893,10.5538437 5.6045855,10.9301839 5.13586957,10.9301839 L5.13586957,10.9301839 C4.67039881,10.9301839 4.2930602,10.5524254 4.2930602,10.0896044 L4.2930602,1.49902434 C4.2930602,1.03478509 4.66715363,0.658444816 5.13586957,0.658444816 L5.13586957,0.658444816" id="Rectangle-8"></path> </g> </g> </svg> </div><!-- /Header --> <!-- Side Bar - Inner --> <div class="sideBar-inner col-xs-12 row start-xs"> <!-- Collection --> <div class="collection col-xs-12 start-xs"> <p>Displaying Collection</p> <div class="selectWrapp"> <span> <svg width="12px" height="6px" viewBox="314 17 12 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <path d="M319.392379,17.3149289 C319.75495,16.8952454 320.342409,16.894802 320.705363,17.3149289 L324.575865,21.7951206 C324.938436,22.2148041 324.786901,22.5550248 324.238328,22.5550248 L315.859414,22.5550248 C315.310427,22.5550248 315.158923,22.2152475 315.521877,21.7951206 L319.392379,17.3149289 Z" id="Triangle-2" stroke="none" fill="#6D6D6D" fill-rule="evenodd" transform="translate(320.048733, 19.777512) scale(1, -1) translate(-320.048733, -19.777512) "></path> </svg></span> <select> <option checked>Products Collection</option> </select> </div><!-- /Select Wrapp --> </div><!-- Collection --> </div> <!-- /Side Bar-Inner --> <!-- Dynamic Container --> <div class="dynCon col-xs-12 "> <div class="firstPanel"> <!-- Ticker --> <div class="col-xs-12 row start-xs ticker"> <object class="tick"><span></span></object> <p>Display Categories Panel</p> </div><!-- /Ticker --> <!-- First List --> <ul class="firstUl"> <li>Grid Gallery Layout <svg width="9px" height="13px" viewBox="371 23 9 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <path d="M374.637006,32.9273261 L370.242932,28.3266984 C369.824543,28.0521591 369.577802,27.5808458 369.59057,27.0805878 C369.603339,26.5803297 369.873802,26.1222172 370.305651,25.8693787 C370.886619,25.2989773 371.817398,25.2989773 372.398366,25.8693787 L375.714932,29.3410693 L379.03108,25.8693787 C379.595288,25.2815227 380.526483,25.2541784 381.124213,25.8079143 C381.410037,26.0714614 381.577719,26.4389841 381.58944,26.8275901 C381.601161,27.2161961 381.455934,27.5931568 381.186514,27.8734511 L376.792858,32.9273261 C376.511629,33.2216371 376.122004,33.3877339 375.714932,33.3868453 C375.306842,33.3868453 374.916314,33.2212678 374.637006,32.9273261 Z" id="Shape" stroke="none" fill="#6D6D6D" fill-rule="evenodd" transform="translate(375.590098, 29.398375) rotate(-90.000000) translate(-375.590098, -29.398375) "></path> </svg></li> <li>Grid Gallery Style & Color <svg width="9px" height="13px" viewBox="371 23 9 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <path d="M374.637006,32.9273261 L370.242932,28.3266984 C369.824543,28.0521591 369.577802,27.5808458 369.59057,27.0805878 C369.603339,26.5803297 369.873802,26.1222172 370.305651,25.8693787 C370.886619,25.2989773 371.817398,25.2989773 372.398366,25.8693787 L375.714932,29.3410693 L379.03108,25.8693787 C379.595288,25.2815227 380.526483,25.2541784 381.124213,25.8079143 C381.410037,26.0714614 381.577719,26.4389841 381.58944,26.8275901 C381.601161,27.2161961 381.455934,27.5931568 381.186514,27.8734511 L376.792858,32.9273261 C376.511629,33.2216371 376.122004,33.3877339 375.714932,33.3868453 C375.306842,33.3868453 374.916314,33.2212678 374.637006,32.9273261 Z" id="Shape" stroke="none" fill="#6D6D6D" fill-rule="evenodd" transform="translate(375.590098, 29.398375) rotate(-90.000000) translate(-375.590098, -29.398375) "></path> </svg></li> <li>Categories Layout <svg width="9px" height="13px" viewBox="371 23 9 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <path d="M374.637006,32.9273261 L370.242932,28.3266984 C369.824543,28.0521591 369.577802,27.5808458 369.59057,27.0805878 C369.603339,26.5803297 369.873802,26.1222172 370.305651,25.8693787 C370.886619,25.2989773 371.817398,25.2989773 372.398366,25.8693787 L375.714932,29.3410693 L379.03108,25.8693787 C379.595288,25.2815227 380.526483,25.2541784 381.124213,25.8079143 C381.410037,26.0714614 381.577719,26.4389841 381.58944,26.8275901 C381.601161,27.2161961 381.455934,27.5931568 381.186514,27.8734511 L376.792858,32.9273261 C376.511629,33.2216371 376.122004,33.3877339 375.714932,33.3868453 C375.306842,33.3868453 374.916314,33.2212678 374.637006,32.9273261 Z" id="Shape" stroke="none" fill="#6D6D6D" fill-rule="evenodd" transform="translate(375.590098, 29.398375) rotate(-90.000000) translate(-375.590098, -29.398375) "></path> </svg></li> <li>Categories Style & Color <svg width="9px" height="13px" viewBox="371 23 9 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <path d="M374.637006,32.9273261 L370.242932,28.3266984 C369.824543,28.0521591 369.577802,27.5808458 369.59057,27.0805878 C369.603339,26.5803297 369.873802,26.1222172 370.305651,25.8693787 C370.886619,25.2989773 371.817398,25.2989773 372.398366,25.8693787 L375.714932,29.3410693 L379.03108,25.8693787 C379.595288,25.2815227 380.526483,25.2541784 381.124213,25.8079143 C381.410037,26.0714614 381.577719,26.4389841 381.58944,26.8275901 C381.601161,27.2161961 381.455934,27.5931568 381.186514,27.8734511 L376.792858,32.9273261 C376.511629,33.2216371 376.122004,33.3877339 375.714932,33.3868453 C375.306842,33.3868453 374.916314,33.2212678 374.637006,32.9273261 Z" id="Shape" stroke="none" fill="#6D6D6D" fill-rule="evenodd" transform="translate(375.590098, 29.398375) rotate(-90.000000) translate(-375.590098, -29.398375) "></path> </svg></li> </ul> <!-- /First List --> </div> <ul class="secondUl"> <li> <svg width="9px" height="13px" viewBox="0 3 9 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <path d="M3.63700634,12.9273261 L-0.757067653,8.32669841 C-1.17545658,8.05215905 -1.42219773,7.58084584 -1.40942953,7.08058778 C-1.39666133,6.58032972 -1.12619824,6.12221723 -0.694348926,5.8693787 C-0.113381015,5.29897732 0.817398009,5.29897732 1.39836592,5.8693787 L4.71493219,9.34106928 L8.03108033,5.8693787 C8.59528827,5.28152272 9.52648278,5.25417841 10.1242133,5.80791435 C10.4100366,6.07146137 10.5777187,6.43898414 10.5894398,6.82759013 C10.6011609,7.21619612 10.4559339,7.59315684 10.1865139,7.87345108 L5.79285803,12.9273261 C5.51162922,13.2216371 5.12200445,13.3877339 4.71493219,13.3868453 C4.30684234,13.3868453 3.91631373,13.2212678 3.63700634,12.9273261 Z" id="Shape" stroke="none" fill="#6D6D6D" fill-rule="evenodd" transform="translate(4.590098, 9.398375) scale(-1, 1) rotate(-90.000000) translate(-4.590098, -9.398375) "></path> </svg> Grid Gallery Layout</li> <img src="http://oi68.tinypic.com/2dtunpf.jpg"> </ul> </div><!-- /Dynamic Container --> </div> <!-- /Side Bar --> </div><!-- /Boss Wrapp --> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.3.1/velocity.min.js'></script> <script > // Selecting Component $(".selector").click(function() { $(".selector i").velocity({ opacity: "1" }, { duration:"50", delay:"0", easing: "easeOutExpo" } ); $(".gridGallery object").velocity({ opacity: "0" }, { duration:"0", delay:"0", easing: "easeOutExpo" } ); $('.gridGallery object').off('click'); $(".selector span").velocity({ opacity: "1" }, { duration:"50", delay:"0", easing: "easeOutExpo" } ); }); // Closing Selection $(document).mouseup(function (e) { var container = $(".selector , .hMenu , .sideBar"); if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0) // ... nor a descendant of the container { $(".selector i").velocity({ opacity: "0" }, { duration:"50", delay:"0", easing: "easeOutExpo" } ); $(".selector span").velocity({ opacity: "0" }, { duration:"50", delay:"0", easing: "easeOutExpo" } ); $(".hMenu").velocity({ opacity: "0" , translateY: ["-80px", "-100px"] }, { duration:"400", display:"none", delay:"0", easing: "easeOutExpo" } ); } }); // Hovering Menu $('.selector').on('click', function(e) { e.preventDefault(); $('.hMenu').css( 'position', 'absolute' ); $('.hMenu').css( 'top', e.pageY ); $('.hMenu').css( 'left', e.pageX ); $(".hMenu").velocity({ opacity: "1" , translateY: ["-100px", "-80px"] }, { duration:"400", display:"block", delay:"0", easing: "easeOutExpo" } ) }); /////// Side Bar $(".sideBar-btn").click(function() { $(".sideBar").velocity({ opacity: "1" , translateX:"0"}, { display: "flex", duration:"320", delay:"0", easing: "easeOutExpo" } ); $(".prodWrapp").velocity({ opacity: "1" , translateX:"180px"}, { duration:"320", delay:"20", easing: "easeOutExpo" } ); }); $(".sideBar .header svg").click(function() { $(".sideBar").velocity({ opacity: "1" , translateX:"-400px"}, { duration:"320", delay:"10", easing: "easeOutExpo" } ); $(".prodWrapp").velocity({ opacity: "1" , translateX:"0"}, { duration:"320", delay:"0", easing: "easeOutExpo" } ); }); // Ticker Functions $(".tick").click(function() { if ($(this).css('background-color') == 'rgb(216, 216, 216)') { $(".tick span").velocity({ left: "auto" , translateX: "19px" }, { duration:"200", delay:"0", easing: "easeOutExpo" } ); $(".tick").velocity({ backgroundColor: "#252525" }, { duration:"200", delay:"0", easing: "easeOutExpo" } ); $( ".tick span" ).stop(); $( ".tick" ).stop(); $(".firstUl li:nth-child(3) ").velocity({translateX:["0", "-20px"], opacity: "1" }, { duration:"320", delay:"0", display: "flex", easing: "easeOutExpo" } ); $(".firstUl li:nth-child(4) ").velocity({ translateX:["0", "-20px"], opacity: "1" }, { duration:"320", delay:"30", display: "flex", easing: "easeOutExpo" } ); $( ".firstUl li" ).stop(); } }); $('.tick').click(function() { if ($(this).css('background-color') == 'rgb(37, 37, 37)') { $(".tick span").velocity({ left: "2px" , translateX: "0px" }, { duration:"200", delay:"0", easing: "easeOutExpo" } ); $(".tick").velocity({ backgroundColor: "#D8D8D8" }, { duration:"200", delay:"0", easing: "easeOutExpo" } ); // List $(".firstUl li:nth-child(3) ").velocity({ translateX:["-20px", "0"], opacity: "0" }, { duration:"320", delay:"30", display: "none", easing: "easeOutExpo" } ); $(".firstUl li:nth-child(4) ").velocity({ translateX:["-20px", "0"], opacity: "0" }, { duration:"320", delay:"0", display: "none", easing: "easeOutExpo" } ); } }); // Sliding Menu $('.firstUl li:nth-child(1)').click(function() { $(".secondUl").velocity({ translateX:"-400px" }, { duration:"320", delay:"0", display: "block", easing: "easeOutExpo" } ); $(".firstPanel").velocity({ translateX:"-400px" }, { duration:"420", delay:"0", easing: "easeOutExpo" } ); }); // Back $('.secondUl li').click(function() { $(".secondUl").velocity({ translateX:"0" }, { duration:"420", display: "none", delay:"0", easing: "easeOutExpo" } ); $(".firstPanel").velocity({ translateX:"0" }, { duration:"320", delay:"0", easing: "easeOutExpo" } ); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: