cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

Quick-add: + add another resource

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.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

            
              <nav>
  <a class="prev">Prev</a>
  <a class="next">Next</a>
</nav>
<div id="container">
  <div class="circle">
    <ul class="products">
      <li>
        <div class="details">
          <h2>Tote Bag</h2>
          <p class="price">$25</p>
          <p>A home for your gear. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <a href="" class="button">Add to Cart</a>
        </div>
        <div class="wrapper">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152635/tote-nn.jpg" alt="" />
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2000px" height="2300px" viewBox="0 0 2000 2300" enable-background="new 0 0 2000 2300" xml:space="preserve">
<g id="Layer_1TOTE">
	<g>
		<defs>
			<path id="SVGID_1_TOTE" d="M1367.88,1143.279c-0.261-28.267-0.016-56.538,0.021-84.808c0.01-6.934-1.332-14.24,0.384-20.73
				c4.887-18.483,2.992-37.095,2.75-55.694c-0.032-2.452-1.016-6.274-2.703-7.088c-7.648-3.685-14.739-8.99-24.188-8.017
				c-8.895,0.916-17.944,1.438-26.85,0.896c-16.284-0.994-32.503-3.031-48.769-4.387c-13.203-1.101-26.438-1.84-39.172-2.706
				c-3.559,3.876-2.523,12.064-11.277,8.306c-0.165-3.258-0.522-6.854-0.502-10.446c0.156-27.663,0.547-55.326,0.534-82.989
				c-0.008-16.312-0.35-32.634-1.023-48.932c-0.866-20.969-2.712-41.904-3.263-62.876c-1.617-61.628-2.621-123.271-4.224-184.899
				c-0.982-37.731-4.604-75.176-16.012-111.428c-7.864-24.99-17.686-48.91-37.881-67.003c-11.664-10.449-22.987-21.28-34.686-31.691
				c-3.19-2.841-7.102-4.917-10.819-7.112c-17.62-10.403-37.464-11.632-57.038-12.607c-46.973-2.34-93.97-2.221-140.709,3.859
				c-30.665,3.989-57.472,16.426-78.84,39.335c-10.683,11.453-21.287,22.981-31.776,34.612
				c-11.533,12.786-19.548,27.438-25.017,43.898c-7.352,22.129-9.638,44.896-10.763,67.861c-1.614,32.948-3.323,65.914-3.823,98.89
				c-0.913,60.311-1.483,120.636-1.204,180.95c0.187,40.316,1.945,80.628-0.577,120.925c-0.562,8.972-1.408,17.933-2.461,26.859
				c-0.189,1.609-2.029,3.024-3.107,4.529c-1.418-1.135-3.182-2.032-4.166-3.464c-1.261-1.836-1.896-4.103-2.835-6.266
				c-7.023,0.573-13.611,1.205-20.213,1.633c-19.946,1.293-39.885,2.792-59.851,3.646c-12.559,0.537-25.192,1.978-37.687-1.624
				c-6.656-1.919-12.264,2.231-17.807,5.083c-4.627,2.381-4.163,7.447-4.127,11.617c0.2,23.305,0.454,46.614,1.172,69.908
				c0.585,18.969,2.387,37.907,2.702,56.874c0.833,49.971,1.222,99.948,1.653,149.925c0.455,52.655,0.744,105.312,1.13,157.968
				c0.229,31.322,0.556,62.645,0.747,93.967c0.155,25.627,0.348,51.255,0.198,76.881c-0.115,19.654-1.053,39.306-1.063,58.959
				c-0.016,32.311,0.314,64.624,0.711,96.934c0.225,18.325,0.463,36.666,1.416,54.962c1.906,36.587,4.525,73.136,6.37,109.725
				c0.528,10.486,3.661,18.583,13.034,24.11c4.454,2.627,8.409,5.194,13.865,3.271c1.8-0.634,3.959-0.293,5.955-0.319
				c18.273-0.242,36.606,1.742,54.804-1.633c2.909-0.539,5.986-0.163,8.984-0.234c21.352-0.509,42.53,1.308,63.806,3.202
				c40.807,3.634,81.747,5.877,122.661,8.177c79.574,4.474,159.233,4.431,238.896,3.834c3.993-0.03,7.988-0.356,11.976-0.635
				c21.272-1.484,42.527-3.959,63.815-4.28c33.298-0.502,66.618,0.412,99.928,0.835c3.302,0.042,6.613,0.731,9.889,1.303
				c13.586,2.372,16.276,0.581,19.266-13.016c0.215-0.977,0.479-1.951,0.582-2.941c3.049-29.137,6.951-58.218,8.865-87.429
				c1.829-27.901,1.359-55.947,2.306-83.916c1.646-48.62,3.846-97.223,5.35-145.847c1.061-34.3,1.375-68.623,1.985-102.937
				c0.782-43.973,2.117-87.947,2.129-131.92c0.012-48.98-1.144-97.961-1.891-146.939
				C1369,1201.225,1368.146,1172.255,1367.88,1143.279z M1138.251,969.633c-13.355,4.282-281.112,5.794-299.012,1.609
				c-0.409-5.515-1.257-11.396-1.216-17.272c0.348-48.643,0.288-97.299,1.467-145.924c1.461-60.287,4.387-120.539,5.897-180.826
				c0.826-32.961,0.253-65.965-0.105-98.944c-0.2-18.312-1.865-36.619-1.756-54.923c0.108-17.956,1.673-35.901,2.493-53.856
				c0.183-3.989,1.516-7.329,5.067-9.131c8.893-4.51,17.524-10.788,26.986-12.63c14.838-2.888,30.106-5.889,45.521-2.41
				c22.504,5.077,45.281,7.916,68.391,7.725c2.331-0.02,4.696,0.329,6.99,0.051c26.718-3.245,53.924-3.363,79.678-12.775
				c13.096-4.785,26.268-3.009,39.35,0.457c8.288,2.196,11.182,8.01,12.38,16.108c3.666,24.78,5.15,49.672,5.537,74.684
				c0.588,37.97,2.14,75.939,1.921,113.901c-0.188,32.628-2.956,65.236-3.334,97.867c-0.332,28.621,1.127,57.261,1.691,85.894
				c0.709,35.969,1.397,71.938,1.933,107.91c0.372,24.98,0.489,49.966,0.662,74.949
				C1138.811,964.689,1138.428,967.286,1138.251,969.633z"/>
	</defs>
		<clipPath id="SVGID_2_TOTE">
			<use xlink:href="#SVGID_1_TOTE"  overflow="visible"/>
		</clipPath>
		<g clip-path="url(#SVGID_2_TOTE)">
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="708.036" y1="60.938" x2="-179.964" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="847.645" y1="60.938" x2="-40.355" y2="2180.937"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="987.253" y1="60.938" x2="99.253" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1126.861" y1="60.938" x2="238.861" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1266.47" y1="60.938" x2="378.47" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1406.078" y1="60.938" x2="518.078" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1545.687" y1="60.938" x2="657.687" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1685.295" y1="60.938" x2="797.295" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1824.903" y1="60.938" x2="936.903" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1964.512" y1="60.938" x2="1076.512" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2104.12" y1="60.938" x2="1216.12" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2243.729" y1="60.938" x2="1355.729" y2="2180.938"/>
		</g>
	</g>
	<g>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M1367.88,1143.279
			c-0.261-28.267-0.016-56.538,0.021-84.808c0.01-6.934-1.332-14.24,0.384-20.73c4.887-18.483,2.992-37.095,2.75-55.694
			c-0.032-2.452-1.016-6.274-2.703-7.088c-7.648-3.685-14.739-8.99-24.188-8.017c-8.895,0.916-17.944,1.438-26.85,0.896
			c-16.284-0.994-32.503-3.031-48.769-4.387c-13.203-1.101-26.438-1.84-39.172-2.706c-3.559,3.876-2.523,12.064-11.277,8.306
			c-0.165-3.258-0.522-6.854-0.502-10.446c0.156-27.663,0.547-55.326,0.534-82.989c-0.008-16.312-0.35-32.634-1.023-48.932
			c-0.866-20.969-2.712-41.904-3.263-62.876c-1.617-61.628-2.621-123.271-4.224-184.899c-0.982-37.731-4.604-75.176-16.012-111.428
			c-7.864-24.99-17.686-48.91-37.881-67.003c-11.664-10.449-22.987-21.28-34.686-31.691c-3.19-2.841-7.102-4.917-10.819-7.112
			c-17.62-10.403-37.464-11.632-57.038-12.607c-46.973-2.34-93.97-2.221-140.709,3.859c-30.665,3.989-57.472,16.426-78.84,39.335
			c-10.683,11.453-21.287,22.981-31.776,34.612c-11.533,12.786-19.548,27.438-25.017,43.898
			c-7.352,22.129-9.638,44.896-10.763,67.861c-1.614,32.948-3.323,65.914-3.823,98.89c-0.913,60.311-1.483,120.636-1.204,180.95
			c0.187,40.316,1.945,80.628-0.577,120.925c-0.562,8.972-1.408,17.933-2.461,26.859c-0.189,1.609-2.029,3.024-3.107,4.529
			c-1.418-1.135-3.182-2.032-4.166-3.464c-1.261-1.836-1.896-4.103-2.835-6.266c-7.023,0.573-13.611,1.205-20.213,1.633
			c-19.946,1.293-39.885,2.792-59.851,3.646c-12.559,0.537-25.192,1.978-37.687-1.624c-6.656-1.919-12.264,2.231-17.807,5.083
			c-4.627,2.381-4.163,7.447-4.127,11.617c0.2,23.305,0.454,46.614,1.172,69.908c0.585,18.969,2.387,37.907,2.702,56.874
			c0.833,49.971,1.222,99.948,1.653,149.925c0.455,52.655,0.744,105.312,1.13,157.968c0.229,31.322,0.556,62.645,0.747,93.967
			c0.155,25.627,0.348,51.255,0.198,76.881c-0.115,19.654-1.053,39.306-1.063,58.959c-0.016,32.311,0.314,64.624,0.711,96.934
			c0.225,18.325,0.463,36.666,1.416,54.962c1.906,36.587,4.525,73.136,6.37,109.725c0.528,10.486,3.661,18.583,13.034,24.11
			c4.454,2.627,8.409,5.194,13.865,3.271c1.8-0.634,3.959-0.293,5.955-0.319c18.273-0.242,36.606,1.742,54.804-1.633
			c2.909-0.539,5.986-0.163,8.984-0.234c21.352-0.509,42.53,1.308,63.806,3.202c40.807,3.634,81.747,5.877,122.661,8.177
			c79.574,4.474,159.233,4.431,238.896,3.834c3.993-0.03,7.988-0.356,11.976-0.635c21.272-1.484,42.527-3.959,63.815-4.28
			c33.298-0.502,66.618,0.412,99.928,0.835c3.302,0.042,6.613,0.731,9.889,1.303c13.586,2.372,16.276,0.581,19.266-13.016
			c0.215-0.977,0.479-1.951,0.582-2.941c3.049-29.137,6.951-58.218,8.865-87.429c1.829-27.901,1.359-55.947,2.306-83.916
			c1.646-48.62,3.846-97.223,5.35-145.847c1.061-34.3,1.375-68.623,1.985-102.937c0.782-43.973,2.117-87.947,2.129-131.92
			c0.012-48.98-1.144-97.961-1.891-146.939C1369,1201.225,1368.146,1172.255,1367.88,1143.279z M1138.251,969.633
			c-13.355,4.282-281.112,5.794-299.012,1.609c-0.409-5.515-1.257-11.396-1.216-17.272c0.348-48.643,0.288-97.299,1.467-145.924
			c1.461-60.287,4.387-120.539,5.897-180.826c0.826-32.961,0.253-65.965-0.105-98.944c-0.2-18.312-1.865-36.619-1.756-54.923
			c0.108-17.956,1.673-35.901,2.493-53.856c0.183-3.989,1.516-7.329,5.067-9.131c8.893-4.51,17.524-10.788,26.986-12.63
			c14.838-2.888,30.106-5.889,45.521-2.41c22.504,5.077,45.281,7.916,68.391,7.725c2.331-0.02,4.696,0.329,6.99,0.051
			c26.718-3.245,53.924-3.363,79.678-12.775c13.096-4.785,26.268-3.009,39.35,0.457c8.288,2.196,11.182,8.01,12.38,16.108
			c3.666,24.78,5.15,49.672,5.537,74.684c0.588,37.97,2.14,75.939,1.921,113.901c-0.188,32.628-2.956,65.236-3.334,97.867
			c-0.332,28.621,1.127,57.261,1.691,85.894c0.709,35.969,1.397,71.938,1.933,107.91c0.372,24.98,0.489,49.966,0.662,74.949
			C1138.811,964.689,1138.428,967.286,1138.251,969.633z"/>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M780,462c0,0,74.667-62.333,104.667-65.333"/>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M1120,392c0,0,61,33,70.5,64.5"/>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M839.5,972c-9.212,0.099-19.5-1.333-19.5-1.333
			s-53.167,0-66.5,1.333s-143.167,3.167-143.167-0.833"/>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M1366.667,971.333c0,0-118.666-4-145.333-1.333
			c-14.685,1.468-32.073,1.894-64,0.667c-26.052-1.001-42.242,1.034-47.334,1.333"/>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M1368,1044.5c0,0-1-0.5-8,0.5
			c-6.641,0.949-37,1-37,1s-125-4-162-5s-239,1-258,5s-77-5-139-3s-147.167,8.167-152.167,8.167s-2.5-12-2.5-12"/>
	</g>
</g>
</svg>
        </div>
      </li>
      <li>
        <div class="details">
          <h2>5-Sided Cap</h2>
          <p class="price">$25</p>
          <p>Its a hat. With five sides.</p>
          <a href="" class="button">Add to Cart</a>
        </div>
        <div class="wrapper">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152635/hat-nn-nicer.jpg" alt="" />
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2000px" height="2300px" viewBox="0 0 2000 2300" enable-background="new 0 0 2000 2300" xml:space="preserve">
<g id="Layer_1">
	<g>
		<defs>
			<path id="SVGID_1_HAT" d="M1039.413,1784.674c-22.347-1.213-48.274-2.63-74.204-4.013c-3.324-0.178-6.658-0.229-9.989-0.248
				c-31.324-0.187-62.651-0.114-93.972-0.585c-38.64-0.58-77.185-3.035-115.681-6.49c-18.235-1.637-36.558-2.331-54.845-3.371
				c-34.714-1.974-69.056-6.401-101.984-18.019c-10.255-3.617-20.032-9.058-29.333-14.792c-11.78-7.264-18.68-18.079-22.045-31.93
				c-8.119-33.411-5.787-66.278,4.404-98.556c7.207-22.827,15.952-45.196,24.741-67.482c3.466-8.79,15.186-18.574,8.994-25.688
				c-3.037-3.49-6.591-12.518-9-16.5c-7.762-12.831-7.875-17.282-7-31.5c0.626-10.171,3.677-17.073,3.945-26.722
				c0.573-20.598,3.225-41.08,1.147-61.836c-3.13-31.277,4.734-61.565,10.367-92.003c6.901-37.291,20.443-72.343,36.027-106.672
				c3.84-8.461,8.635-16.535,13.509-24.469c12.374-20.145,24.902-40.197,37.631-60.119c12.326-19.293,27.964-35.553,46.287-49.273
				c6.932-5.19,13.587-10.751,20.528-15.928c28.834-21.506,61.299-34.826,96.583-40.655c13.354-2.206,27.226-1.209,40.85-1.914
				c4.937-0.256,10.082-0.473,14.71-1.994c15.952-5.243,32.283-7.992,48.977-9.107c12.961-0.866,25.769-2.28,38.201-6.768
				c5.109-1.845,11.124-1.705,16.713-1.609c20.563,0.353,41.196-0.094,61.543,3.82c5.22,1.005,10.828,1.179,15.567,3.288
				c18.832,8.379,38.969,11.306,58.941,14.826c16.7,2.943,33.625,4.636,50.304,7.685c31.235,5.711,61.62,13.798,88.953,31.143
				c15.435,9.794,32.161,17.537,47.734,27.131c37.236,22.94,66.654,53.752,90.005,90.667c19.91,31.476,35.764,64.669,44.91,100.863
				c2.282,9.031,3.831,18.247,5.723,27.377c7.693,37.133,15.351,74.273,23.096,111.396c5.455,26.142,8.594,52.583,9.477,79.232
				c0.238,7.162-1.724,14.459-3.159,21.597c-1.111,5.53-3.301,10.848-4.363,16.384c-0.503,2.625-0.141,5.823,0.931,8.282
				c12.25,28.127,23.295,56.683,30.485,86.563c5.587,23.22,3.901,46.32-2.679,69.103c-6.427,22.249-21.805,38.028-39.564,51.328
				c-22.141,16.581-47.447,26.897-74.292,33.313c-46.429,11.098-93.565,18.085-140.978,23.072
				c-24.166,2.542-48.467,4.01-72.744,5.234C1130.947,1780.95,1087.002,1782.619,1039.413,1784.674z"/>
		</defs>
		<clipPath id="SVGID_2_HAT">
			<use xlink:href="#SVGID_1_HAT"  overflow="visible"/>
		</clipPath>
		<g id="blend" clip-path="url(#SVGID_2_HAT)">
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="708.036" y1="60.938" x2="-179.964" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="847.645" y1="60.938" x2="-40.355" y2="2180.937"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="987.253" y1="60.938" x2="99.253" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1126.861" y1="60.938" x2="238.861" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1266.47" y1="60.938" x2="378.47" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1406.078" y1="60.938" x2="518.078" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1545.687" y1="60.938" x2="657.687" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1685.295" y1="60.938" x2="797.295" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1824.903" y1="60.938" x2="936.903" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1964.512" y1="60.938" x2="1076.512" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2104.12" y1="60.938" x2="1216.12" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2243.729" y1="60.938" x2="1355.729" y2="2180.938"/>
		</g>
	</g>
	<g id="strokes">
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1039.413,1784.674c-22.347-1.213-48.274-2.63-74.204-4.013c-3.324-0.178-6.658-0.229-9.989-0.248
			c-31.324-0.187-62.651-0.114-93.972-0.585c-38.64-0.58-77.185-3.035-115.681-6.49c-18.235-1.637-36.558-2.331-54.845-3.371
			c-34.714-1.974-69.056-6.401-101.984-18.019c-10.255-3.617-20.032-9.058-29.333-14.792c-11.78-7.264-18.68-18.079-22.045-31.93
			c-8.119-33.411-5.787-66.278,4.404-98.556c7.207-22.827,15.952-45.196,24.741-67.482c3.466-8.79,15.186-18.574,8.994-25.688
			c-3.037-3.49-6.591-12.518-9-16.5c-7.762-12.831-7.875-17.282-7-31.5c0.626-10.171,3.677-17.073,3.945-26.722
			c0.573-20.598,3.225-41.08,1.147-61.836c-3.13-31.277,4.734-61.565,10.367-92.003c6.901-37.291,20.443-72.343,36.027-106.672
			c3.84-8.461,8.635-16.535,13.509-24.469c12.374-20.145,24.902-40.197,37.631-60.119c12.326-19.293,27.964-35.553,46.287-49.273
			c6.932-5.19,13.587-10.751,20.528-15.928c28.834-21.506,61.299-34.826,96.583-40.655c13.354-2.206,27.226-1.209,40.85-1.914
			c4.937-0.256,10.082-0.473,14.71-1.994c15.952-5.243,32.283-7.992,48.977-9.107c12.961-0.866,25.769-2.28,38.201-6.768
			c5.109-1.845,11.124-1.705,16.713-1.609c20.563,0.353,41.196-0.094,61.543,3.82c5.22,1.005,10.828,1.179,15.567,3.288
			c18.832,8.379,38.969,11.306,58.941,14.826c16.7,2.943,33.625,4.636,50.304,7.685c31.235,5.711,61.62,13.798,88.953,31.143
			c15.435,9.794,32.161,17.537,47.734,27.131c37.236,22.94,66.654,53.752,90.005,90.667c19.91,31.476,35.764,64.669,44.91,100.863
			c2.282,9.031,3.831,18.247,5.723,27.377c7.693,37.133,15.351,74.273,23.096,111.396c5.455,26.142,8.594,52.583,9.477,79.232
			c0.238,7.162-1.724,14.459-3.159,21.597c-1.111,5.53-3.301,10.848-4.363,16.384c-0.503,2.625-0.141,5.823,0.931,8.282
			c12.25,28.127,23.295,56.683,30.485,86.563c5.587,23.22,3.901,46.32-2.679,69.103c-6.427,22.249-21.805,38.028-39.564,51.328
			c-22.141,16.581-47.447,26.897-74.292,33.313c-46.429,11.098-93.565,18.085-140.978,23.072
			c-24.166,2.542-48.467,4.01-72.744,5.234C1130.947,1780.95,1087.002,1782.619,1039.413,1784.674z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1473.25,1500.25c0,0-121.25,77.75-228.25,88.75s-149.5,20-204.5,20.5S781,1596,713,1571s-135-49-138-56"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1007.333,1014.333c0,0-0.333,248.667,0.667,334.667s2,260,2,260"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1038,1007c0,0,149,27,200,52s87,47,102,87s39,77,46,86s28,133,30,177s2,62,15,74s14,35,14,35"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M978.667,1006.667c0,0-124.167,3.333-186.167,32.333S700,1107.5,681,1139.5S640.333,1256,639,1273s-10.667,64-11.667,72.667
			s-21,57-20.667,75.333s-1.333,109.334-1.333,109.334"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1005.25,975c0,0,45.75,7.75,33.5,13.5s-26.5,6.75-37,6.5s-35.25-4.5-28.75-11.75S1005.25,975,1005.25,975z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1040.25,987.25c0,0,13,18.25-11.5,24s-44.5,1.25-48.25-2.75s-14.5-10.75-7.5-23"/>
	</g>
</g>
</svg>
        </div>
      </li>
      <li>
        <div class="details">
          <h2>Tee</h2>
          <p class="price">$25</p>
          <p>No Gracias. Si Por Favor.</p>
          <a href="" class="button">Add to Cart</a>
        </div>
        <div class="wrapper">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152635/tee-nn.jpg" alt="" />
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2000px" height="2300px" viewBox="0 0 2000 2300" enable-background="new 0 0 2000 2300" xml:space="preserve">
<g id="Layer_1_tee">
    <g id="clip_tee">
      <defs>
        <path id="clip_path_tee" d="M572.138,1246.225c-6.627,3.584-11.224,6.07-16.098,8.706
          c-80.052-92.499-160.817-183.584-249.483-268.049c6.865-7.441,12.975-14.43,19.468-21.041
          c53.437-54.407,106.971-108.72,160.417-163.119c16.613-16.909,34.124-32.76,53.302-46.738c2.383-1.736,5.127-3.636,6.394-6.126
          c4.478-8.809,11.964-13.883,20.162-18.678c6.577-3.847,12.517-8.809,18.616-13.438c13.591-10.315,28.186-18.838,43.601-26.191
          c18.919-9.025,36.936-20.13,56.281-28.037c42.529-17.382,85.607-33.429,128.554-49.776c12.714-4.84,25.78-8.748,38.602-13.315
          c5.322-1.896,10.987-3.607,15.505-6.803c7.148-5.057,13.275-3.951,20.306-0.051c33.446,18.558,70.061,24.771,107.638,26.757
          c25.725,1.359,51.42,0.525,76.425-6.125c13.778-3.664,27.066-9.187,40.549-13.949c5.017-1.772,9.834-4.309,14.974-5.463
          c3.312-0.743,7.353-0.397,10.535,0.835c10.69,4.138,21.504,6.096,33.059,6.396c9.148,0.236,18.496,2.523,27.278,5.37
          c34.836,11.291,69.834,22.228,104.114,35.056c41.193,15.414,80.984,34.222,119.689,55.182
          c19.903,10.779,39.955,21.372,59.187,33.267c10.96,6.778,20.679,15.69,30.476,24.194c26.726,23.199,50.724,49.079,74.192,75.532
          c31.839,35.886,64.342,71.183,96.427,106.851c12.699,14.118,25.061,28.54,37.525,42.867c1.487,1.709,2.658,3.693,4.572,6.393
          c-16.094,14.946-32.079,29.453-47.685,44.358c-29.633,28.305-58.923,56.969-88.586,85.241
          c-34.713,33.085-66.62,69.08-103.547,99.863c-6.651,5.545-13.545,10.802-20.136,16.415c-4.615,3.932-9.077,4.956-14.428,1.373
          c-2.398-1.604-5.379-2.339-9.498-4.052c-0.883,4.498-2.209,8.179-2.224,11.863c-0.059,15.657,0.23,31.316,0.47,46.974
          c0.56,36.649,1.419,73.297,1.699,109.948c0.727,94.968,0.747,189.944,1.977,284.905c0.62,47.965,3.636,95.894,4.829,143.857
          c0.746,29.969,0.067,59.974,0.116,89.962c0.033,20.303,0.288,40.606,0.271,60.909c-0.003,3.573-0.856,7.146-1.315,10.703
          c-9.959,0.937-19.169,1.889-28.398,2.583c-1.476,0.111-3.706-0.467-4.446-1.524c-3.375-4.825-8.562-4.918-13.404-5.339
          c-26.872-2.339-53.732-5.658-80.658-6.382c-56.933-1.53-113.945-3.312-170.846-1.865c-48.357,1.229-96.598-0.898-144.892-0.92
          c-31.271-0.015-62.528-3.786-93.814-4.211c-31.952-0.433-63.943,0.839-95.896,1.968c-34.948,1.234-69.876,3.074-104.804,4.811
          c-31.275,1.555-62.538,3.351-93.81,4.99c-10.978,0.575-21.959,1.177-32.947,1.442c-8.418,0.205-9.917-1.158-9.85-9.854
          c0.262-33.963,0.768-67.924,1.187-101.886c0.305-24.658,0.374-49.321,0.97-73.972c1.858-76.943,4.52-153.873,5.695-230.826
          c0.846-55.299,0.468-110.639-0.588-165.937c-0.89-46.621-3.496-93.211-5.477-139.81
          C574.162,1257.449,573.05,1252.616,572.138,1246.225z"/>
      </defs>
      <clipPath id="clip_path_tee_1_">
        <use xlink:href="#clip_path_tee"  overflow="visible"/>
      </clipPath>
      <g id="blend_tee" clip-path="url(#clip_path_tee_1_)">

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="708.036" y1="60.938" x2="-179.964" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="847.645" y1="60.938" x2="-40.355" y2="2180.937"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="987.253" y1="60.938" x2="99.253" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1126.861" y1="60.938" x2="238.861" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1266.47" y1="60.938" x2="378.47" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1406.078" y1="60.938" x2="518.078" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1545.687" y1="60.938" x2="657.687" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1685.295" y1="60.938" x2="797.295" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1824.903" y1="60.938" x2="936.903" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1964.512" y1="60.938" x2="1076.512" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2104.12" y1="60.938" x2="1216.12" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2243.729" y1="60.938" x2="1355.729" y2="2180.938"/>
      </g>
    </g>
    <g id="stroke_tee">
      <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M572.138,1246.225
        c-6.627,3.584-11.224,6.07-16.098,8.706c-80.052-92.499-160.817-183.584-249.483-268.049c6.865-7.441,12.975-14.43,19.468-21.041
        c53.437-54.407,106.971-108.72,160.417-163.119c16.613-16.909,34.124-32.76,53.302-46.738c2.383-1.736,5.127-3.636,6.394-6.126
        c4.478-8.809,11.964-13.883,20.162-18.678c6.577-3.847,12.517-8.809,18.616-13.438c13.591-10.315,28.186-18.838,43.601-26.191
        c18.919-9.025,36.936-20.13,56.281-28.037c42.529-17.382,85.607-33.429,128.554-49.776c12.714-4.84,25.78-8.748,38.602-13.315
        c5.322-1.896,10.987-3.607,15.505-6.803c7.148-5.057,13.275-3.951,20.306-0.051c33.446,18.558,70.061,24.771,107.638,26.757
        c25.725,1.359,51.42,0.525,76.425-6.125c13.778-3.664,27.066-9.187,40.549-13.949c5.017-1.772,9.834-4.309,14.974-5.463
        c3.312-0.743,7.353-0.397,10.535,0.835c10.69,4.138,21.504,6.096,33.059,6.396c9.148,0.236,18.496,2.523,27.278,5.37
        c34.836,11.291,69.834,22.228,104.114,35.056c41.193,15.414,80.984,34.222,119.689,55.182
        c19.903,10.779,39.955,21.372,59.187,33.267c10.96,6.778,20.679,15.69,30.476,24.194c26.726,23.199,50.724,49.079,74.192,75.532
        c31.839,35.886,64.342,71.183,96.427,106.851c12.699,14.118,25.061,28.54,37.525,42.867c1.487,1.709,2.658,3.693,4.572,6.393
        c-16.094,14.946-32.079,29.453-47.685,44.358c-29.633,28.305-58.923,56.969-88.586,85.241
        c-34.713,33.085-66.62,69.08-103.547,99.863c-6.651,5.545-13.545,10.802-20.136,16.415c-4.615,3.932-9.077,4.956-14.428,1.373
        c-2.398-1.604-5.379-2.339-9.498-4.052c-0.883,4.498-2.209,8.179-2.224,11.863c-0.059,15.657,0.23,31.316,0.47,46.974
        c0.56,36.649,1.419,73.297,1.699,109.948c0.727,94.968,0.747,189.944,1.977,284.905c0.62,47.965,3.636,95.894,4.829,143.857
        c0.746,29.969,0.067,59.974,0.116,89.962c0.033,20.303,0.288,40.606,0.271,60.909c-0.003,3.573-0.856,7.146-1.315,10.703
        c-9.959,0.937-19.169,1.889-28.398,2.583c-1.476,0.111-3.706-0.467-4.446-1.524c-3.375-4.825-8.562-4.918-13.404-5.339
        c-26.872-2.339-53.732-5.658-80.658-6.382c-56.933-1.53-113.945-3.312-170.846-1.865c-48.357,1.229-96.598-0.898-144.892-0.92
        c-31.271-0.015-62.528-3.786-93.814-4.211c-31.952-0.433-63.943,0.839-95.896,1.968c-34.948,1.234-69.876,3.074-104.804,4.811
        c-31.275,1.555-62.538,3.351-93.81,4.99c-10.978,0.575-21.959,1.177-32.947,1.442c-8.418,0.205-9.917-1.158-9.85-9.854
        c0.262-33.963,0.768-67.924,1.187-101.886c0.305-24.658,0.374-49.321,0.97-73.972c1.858-76.943,4.52-153.873,5.695-230.826
        c0.846-55.299,0.468-110.639-0.588-165.937c-0.89-46.621-3.496-93.211-5.477-139.81
        C574.162,1257.449,573.05,1252.616,572.138,1246.225z"/>
      <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M874,589c0,0-8.5,37,0,68.5s28,69.167,72,91.5
        c22.364,11.351,88.5,22.5,126.5-8.5s57.5-63.5,64.5-96.75s-0.5-44.25-4.5-49.25"/>
      <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M1172.667,601.333c0,0,9.667,58.333-15.333,98
        s-59.667,67.667-84,76.333s-94.333,29.333-156-3s-82-110-81.667-120.667s-1.333-31,1.667-48.667"/>
      <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M1481.21,730.893c0,0-27.876,60.441-32.543,83.441
        s5.999,47.667-2.334,77.333c0,0-9.833,59.333-9.333,102.333s3.5,229.75,1.5,248.75"/>
      <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M550.75,741.375
        c0.25,0.875,5,22.625,12.625,33.375S579,815.375,578.25,824.5s1.25,56-1.417,62s-1.5,100.833-1.5,125.5
        s-5.667,208.999-3.667,231.666"/>
    </g>
  </g>
</svg>
        </div>
      </li>
      <li>
        <div class="details">
          <h2>Tote Bag</h2>
          <p class="price">$25</p>
          <p>A home for your gear. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <a href="" class="button">Add to Cart</a>
        </div>
        <div class="wrapper">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152635/tote-nn.jpg" alt="" />
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2000px" height="2300px" viewBox="0 0 2000 2300" enable-background="new 0 0 2000 2300" xml:space="preserve">
<g id="Layer_1TOTE">
	<g>
		<defs>
			<path id="SVGID_1_TOTE" d="M1367.88,1143.279c-0.261-28.267-0.016-56.538,0.021-84.808c0.01-6.934-1.332-14.24,0.384-20.73
				c4.887-18.483,2.992-37.095,2.75-55.694c-0.032-2.452-1.016-6.274-2.703-7.088c-7.648-3.685-14.739-8.99-24.188-8.017
				c-8.895,0.916-17.944,1.438-26.85,0.896c-16.284-0.994-32.503-3.031-48.769-4.387c-13.203-1.101-26.438-1.84-39.172-2.706
				c-3.559,3.876-2.523,12.064-11.277,8.306c-0.165-3.258-0.522-6.854-0.502-10.446c0.156-27.663,0.547-55.326,0.534-82.989
				c-0.008-16.312-0.35-32.634-1.023-48.932c-0.866-20.969-2.712-41.904-3.263-62.876c-1.617-61.628-2.621-123.271-4.224-184.899
				c-0.982-37.731-4.604-75.176-16.012-111.428c-7.864-24.99-17.686-48.91-37.881-67.003c-11.664-10.449-22.987-21.28-34.686-31.691
				c-3.19-2.841-7.102-4.917-10.819-7.112c-17.62-10.403-37.464-11.632-57.038-12.607c-46.973-2.34-93.97-2.221-140.709,3.859
				c-30.665,3.989-57.472,16.426-78.84,39.335c-10.683,11.453-21.287,22.981-31.776,34.612
				c-11.533,12.786-19.548,27.438-25.017,43.898c-7.352,22.129-9.638,44.896-10.763,67.861c-1.614,32.948-3.323,65.914-3.823,98.89
				c-0.913,60.311-1.483,120.636-1.204,180.95c0.187,40.316,1.945,80.628-0.577,120.925c-0.562,8.972-1.408,17.933-2.461,26.859
				c-0.189,1.609-2.029,3.024-3.107,4.529c-1.418-1.135-3.182-2.032-4.166-3.464c-1.261-1.836-1.896-4.103-2.835-6.266
				c-7.023,0.573-13.611,1.205-20.213,1.633c-19.946,1.293-39.885,2.792-59.851,3.646c-12.559,0.537-25.192,1.978-37.687-1.624
				c-6.656-1.919-12.264,2.231-17.807,5.083c-4.627,2.381-4.163,7.447-4.127,11.617c0.2,23.305,0.454,46.614,1.172,69.908
				c0.585,18.969,2.387,37.907,2.702,56.874c0.833,49.971,1.222,99.948,1.653,149.925c0.455,52.655,0.744,105.312,1.13,157.968
				c0.229,31.322,0.556,62.645,0.747,93.967c0.155,25.627,0.348,51.255,0.198,76.881c-0.115,19.654-1.053,39.306-1.063,58.959
				c-0.016,32.311,0.314,64.624,0.711,96.934c0.225,18.325,0.463,36.666,1.416,54.962c1.906,36.587,4.525,73.136,6.37,109.725
				c0.528,10.486,3.661,18.583,13.034,24.11c4.454,2.627,8.409,5.194,13.865,3.271c1.8-0.634,3.959-0.293,5.955-0.319
				c18.273-0.242,36.606,1.742,54.804-1.633c2.909-0.539,5.986-0.163,8.984-0.234c21.352-0.509,42.53,1.308,63.806,3.202
				c40.807,3.634,81.747,5.877,122.661,8.177c79.574,4.474,159.233,4.431,238.896,3.834c3.993-0.03,7.988-0.356,11.976-0.635
				c21.272-1.484,42.527-3.959,63.815-4.28c33.298-0.502,66.618,0.412,99.928,0.835c3.302,0.042,6.613,0.731,9.889,1.303
				c13.586,2.372,16.276,0.581,19.266-13.016c0.215-0.977,0.479-1.951,0.582-2.941c3.049-29.137,6.951-58.218,8.865-87.429
				c1.829-27.901,1.359-55.947,2.306-83.916c1.646-48.62,3.846-97.223,5.35-145.847c1.061-34.3,1.375-68.623,1.985-102.937
				c0.782-43.973,2.117-87.947,2.129-131.92c0.012-48.98-1.144-97.961-1.891-146.939
				C1369,1201.225,1368.146,1172.255,1367.88,1143.279z M1138.251,969.633c-13.355,4.282-281.112,5.794-299.012,1.609
				c-0.409-5.515-1.257-11.396-1.216-17.272c0.348-48.643,0.288-97.299,1.467-145.924c1.461-60.287,4.387-120.539,5.897-180.826
				c0.826-32.961,0.253-65.965-0.105-98.944c-0.2-18.312-1.865-36.619-1.756-54.923c0.108-17.956,1.673-35.901,2.493-53.856
				c0.183-3.989,1.516-7.329,5.067-9.131c8.893-4.51,17.524-10.788,26.986-12.63c14.838-2.888,30.106-5.889,45.521-2.41
				c22.504,5.077,45.281,7.916,68.391,7.725c2.331-0.02,4.696,0.329,6.99,0.051c26.718-3.245,53.924-3.363,79.678-12.775
				c13.096-4.785,26.268-3.009,39.35,0.457c8.288,2.196,11.182,8.01,12.38,16.108c3.666,24.78,5.15,49.672,5.537,74.684
				c0.588,37.97,2.14,75.939,1.921,113.901c-0.188,32.628-2.956,65.236-3.334,97.867c-0.332,28.621,1.127,57.261,1.691,85.894
				c0.709,35.969,1.397,71.938,1.933,107.91c0.372,24.98,0.489,49.966,0.662,74.949
				C1138.811,964.689,1138.428,967.286,1138.251,969.633z"/>
	</defs>
		<clipPath id="SVGID_2_TOTE">
			<use xlink:href="#SVGID_1_TOTE"  overflow="visible"/>
		</clipPath>
		<g clip-path="url(#SVGID_2_TOTE)">
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="708.036" y1="60.938" x2="-179.964" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="847.645" y1="60.938" x2="-40.355" y2="2180.937"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="987.253" y1="60.938" x2="99.253" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1126.861" y1="60.938" x2="238.861" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1266.47" y1="60.938" x2="378.47" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1406.078" y1="60.938" x2="518.078" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1545.687" y1="60.938" x2="657.687" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1685.295" y1="60.938" x2="797.295" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1824.903" y1="60.938" x2="936.903" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1964.512" y1="60.938" x2="1076.512" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2104.12" y1="60.938" x2="1216.12" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2243.729" y1="60.938" x2="1355.729" y2="2180.938"/>
		</g>
	</g>
	<g>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M1367.88,1143.279
			c-0.261-28.267-0.016-56.538,0.021-84.808c0.01-6.934-1.332-14.24,0.384-20.73c4.887-18.483,2.992-37.095,2.75-55.694
			c-0.032-2.452-1.016-6.274-2.703-7.088c-7.648-3.685-14.739-8.99-24.188-8.017c-8.895,0.916-17.944,1.438-26.85,0.896
			c-16.284-0.994-32.503-3.031-48.769-4.387c-13.203-1.101-26.438-1.84-39.172-2.706c-3.559,3.876-2.523,12.064-11.277,8.306
			c-0.165-3.258-0.522-6.854-0.502-10.446c0.156-27.663,0.547-55.326,0.534-82.989c-0.008-16.312-0.35-32.634-1.023-48.932
			c-0.866-20.969-2.712-41.904-3.263-62.876c-1.617-61.628-2.621-123.271-4.224-184.899c-0.982-37.731-4.604-75.176-16.012-111.428
			c-7.864-24.99-17.686-48.91-37.881-67.003c-11.664-10.449-22.987-21.28-34.686-31.691c-3.19-2.841-7.102-4.917-10.819-7.112
			c-17.62-10.403-37.464-11.632-57.038-12.607c-46.973-2.34-93.97-2.221-140.709,3.859c-30.665,3.989-57.472,16.426-78.84,39.335
			c-10.683,11.453-21.287,22.981-31.776,34.612c-11.533,12.786-19.548,27.438-25.017,43.898
			c-7.352,22.129-9.638,44.896-10.763,67.861c-1.614,32.948-3.323,65.914-3.823,98.89c-0.913,60.311-1.483,120.636-1.204,180.95
			c0.187,40.316,1.945,80.628-0.577,120.925c-0.562,8.972-1.408,17.933-2.461,26.859c-0.189,1.609-2.029,3.024-3.107,4.529
			c-1.418-1.135-3.182-2.032-4.166-3.464c-1.261-1.836-1.896-4.103-2.835-6.266c-7.023,0.573-13.611,1.205-20.213,1.633
			c-19.946,1.293-39.885,2.792-59.851,3.646c-12.559,0.537-25.192,1.978-37.687-1.624c-6.656-1.919-12.264,2.231-17.807,5.083
			c-4.627,2.381-4.163,7.447-4.127,11.617c0.2,23.305,0.454,46.614,1.172,69.908c0.585,18.969,2.387,37.907,2.702,56.874
			c0.833,49.971,1.222,99.948,1.653,149.925c0.455,52.655,0.744,105.312,1.13,157.968c0.229,31.322,0.556,62.645,0.747,93.967
			c0.155,25.627,0.348,51.255,0.198,76.881c-0.115,19.654-1.053,39.306-1.063,58.959c-0.016,32.311,0.314,64.624,0.711,96.934
			c0.225,18.325,0.463,36.666,1.416,54.962c1.906,36.587,4.525,73.136,6.37,109.725c0.528,10.486,3.661,18.583,13.034,24.11
			c4.454,2.627,8.409,5.194,13.865,3.271c1.8-0.634,3.959-0.293,5.955-0.319c18.273-0.242,36.606,1.742,54.804-1.633
			c2.909-0.539,5.986-0.163,8.984-0.234c21.352-0.509,42.53,1.308,63.806,3.202c40.807,3.634,81.747,5.877,122.661,8.177
			c79.574,4.474,159.233,4.431,238.896,3.834c3.993-0.03,7.988-0.356,11.976-0.635c21.272-1.484,42.527-3.959,63.815-4.28
			c33.298-0.502,66.618,0.412,99.928,0.835c3.302,0.042,6.613,0.731,9.889,1.303c13.586,2.372,16.276,0.581,19.266-13.016
			c0.215-0.977,0.479-1.951,0.582-2.941c3.049-29.137,6.951-58.218,8.865-87.429c1.829-27.901,1.359-55.947,2.306-83.916
			c1.646-48.62,3.846-97.223,5.35-145.847c1.061-34.3,1.375-68.623,1.985-102.937c0.782-43.973,2.117-87.947,2.129-131.92
			c0.012-48.98-1.144-97.961-1.891-146.939C1369,1201.225,1368.146,1172.255,1367.88,1143.279z M1138.251,969.633
			c-13.355,4.282-281.112,5.794-299.012,1.609c-0.409-5.515-1.257-11.396-1.216-17.272c0.348-48.643,0.288-97.299,1.467-145.924
			c1.461-60.287,4.387-120.539,5.897-180.826c0.826-32.961,0.253-65.965-0.105-98.944c-0.2-18.312-1.865-36.619-1.756-54.923
			c0.108-17.956,1.673-35.901,2.493-53.856c0.183-3.989,1.516-7.329,5.067-9.131c8.893-4.51,17.524-10.788,26.986-12.63
			c14.838-2.888,30.106-5.889,45.521-2.41c22.504,5.077,45.281,7.916,68.391,7.725c2.331-0.02,4.696,0.329,6.99,0.051
			c26.718-3.245,53.924-3.363,79.678-12.775c13.096-4.785,26.268-3.009,39.35,0.457c8.288,2.196,11.182,8.01,12.38,16.108
			c3.666,24.78,5.15,49.672,5.537,74.684c0.588,37.97,2.14,75.939,1.921,113.901c-0.188,32.628-2.956,65.236-3.334,97.867
			c-0.332,28.621,1.127,57.261,1.691,85.894c0.709,35.969,1.397,71.938,1.933,107.91c0.372,24.98,0.489,49.966,0.662,74.949
			C1138.811,964.689,1138.428,967.286,1138.251,969.633z"/>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M780,462c0,0,74.667-62.333,104.667-65.333"/>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M1120,392c0,0,61,33,70.5,64.5"/>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M839.5,972c-9.212,0.099-19.5-1.333-19.5-1.333
			s-53.167,0-66.5,1.333s-143.167,3.167-143.167-0.833"/>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M1366.667,971.333c0,0-118.666-4-145.333-1.333
			c-14.685,1.468-32.073,1.894-64,0.667c-26.052-1.001-42.242,1.034-47.334,1.333"/>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M1368,1044.5c0,0-1-0.5-8,0.5
			c-6.641,0.949-37,1-37,1s-125-4-162-5s-239,1-258,5s-77-5-139-3s-147.167,8.167-152.167,8.167s-2.5-12-2.5-12"/>
	</g>
</g>
</svg>
        </div>
      </li>
      <li>
        <div class="details">
          <h2>5-Sided Cap</h2>
          <p class="price">$25</p>
          <p>Its a hat. With five sides.</p>
          <a href="" class="button">Add to Cart</a>
        </div>
        <div class="wrapper">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152635/hat-nn-nicer.jpg" alt="" />
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2000px" height="2300px" viewBox="0 0 2000 2300" enable-background="new 0 0 2000 2300" xml:space="preserve">
<g id="Layer_1">
	<g>
		<defs>
			<path id="SVGID_1_HAT" d="M1039.413,1784.674c-22.347-1.213-48.274-2.63-74.204-4.013c-3.324-0.178-6.658-0.229-9.989-0.248
				c-31.324-0.187-62.651-0.114-93.972-0.585c-38.64-0.58-77.185-3.035-115.681-6.49c-18.235-1.637-36.558-2.331-54.845-3.371
				c-34.714-1.974-69.056-6.401-101.984-18.019c-10.255-3.617-20.032-9.058-29.333-14.792c-11.78-7.264-18.68-18.079-22.045-31.93
				c-8.119-33.411-5.787-66.278,4.404-98.556c7.207-22.827,15.952-45.196,24.741-67.482c3.466-8.79,15.186-18.574,8.994-25.688
				c-3.037-3.49-6.591-12.518-9-16.5c-7.762-12.831-7.875-17.282-7-31.5c0.626-10.171,3.677-17.073,3.945-26.722
				c0.573-20.598,3.225-41.08,1.147-61.836c-3.13-31.277,4.734-61.565,10.367-92.003c6.901-37.291,20.443-72.343,36.027-106.672
				c3.84-8.461,8.635-16.535,13.509-24.469c12.374-20.145,24.902-40.197,37.631-60.119c12.326-19.293,27.964-35.553,46.287-49.273
				c6.932-5.19,13.587-10.751,20.528-15.928c28.834-21.506,61.299-34.826,96.583-40.655c13.354-2.206,27.226-1.209,40.85-1.914
				c4.937-0.256,10.082-0.473,14.71-1.994c15.952-5.243,32.283-7.992,48.977-9.107c12.961-0.866,25.769-2.28,38.201-6.768
				c5.109-1.845,11.124-1.705,16.713-1.609c20.563,0.353,41.196-0.094,61.543,3.82c5.22,1.005,10.828,1.179,15.567,3.288
				c18.832,8.379,38.969,11.306,58.941,14.826c16.7,2.943,33.625,4.636,50.304,7.685c31.235,5.711,61.62,13.798,88.953,31.143
				c15.435,9.794,32.161,17.537,47.734,27.131c37.236,22.94,66.654,53.752,90.005,90.667c19.91,31.476,35.764,64.669,44.91,100.863
				c2.282,9.031,3.831,18.247,5.723,27.377c7.693,37.133,15.351,74.273,23.096,111.396c5.455,26.142,8.594,52.583,9.477,79.232
				c0.238,7.162-1.724,14.459-3.159,21.597c-1.111,5.53-3.301,10.848-4.363,16.384c-0.503,2.625-0.141,5.823,0.931,8.282
				c12.25,28.127,23.295,56.683,30.485,86.563c5.587,23.22,3.901,46.32-2.679,69.103c-6.427,22.249-21.805,38.028-39.564,51.328
				c-22.141,16.581-47.447,26.897-74.292,33.313c-46.429,11.098-93.565,18.085-140.978,23.072
				c-24.166,2.542-48.467,4.01-72.744,5.234C1130.947,1780.95,1087.002,1782.619,1039.413,1784.674z"/>
		</defs>
		<clipPath id="SVGID_2_HAT">
			<use xlink:href="#SVGID_1_HAT"  overflow="visible"/>
		</clipPath>
		<g id="blend" clip-path="url(#SVGID_2_HAT)">
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="708.036" y1="60.938" x2="-179.964" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="847.645" y1="60.938" x2="-40.355" y2="2180.937"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="987.253" y1="60.938" x2="99.253" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1126.861" y1="60.938" x2="238.861" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1266.47" y1="60.938" x2="378.47" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1406.078" y1="60.938" x2="518.078" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1545.687" y1="60.938" x2="657.687" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1685.295" y1="60.938" x2="797.295" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1824.903" y1="60.938" x2="936.903" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1964.512" y1="60.938" x2="1076.512" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2104.12" y1="60.938" x2="1216.12" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2243.729" y1="60.938" x2="1355.729" y2="2180.938"/>
		</g>
	</g>
	<g id="strokes">
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1039.413,1784.674c-22.347-1.213-48.274-2.63-74.204-4.013c-3.324-0.178-6.658-0.229-9.989-0.248
			c-31.324-0.187-62.651-0.114-93.972-0.585c-38.64-0.58-77.185-3.035-115.681-6.49c-18.235-1.637-36.558-2.331-54.845-3.371
			c-34.714-1.974-69.056-6.401-101.984-18.019c-10.255-3.617-20.032-9.058-29.333-14.792c-11.78-7.264-18.68-18.079-22.045-31.93
			c-8.119-33.411-5.787-66.278,4.404-98.556c7.207-22.827,15.952-45.196,24.741-67.482c3.466-8.79,15.186-18.574,8.994-25.688
			c-3.037-3.49-6.591-12.518-9-16.5c-7.762-12.831-7.875-17.282-7-31.5c0.626-10.171,3.677-17.073,3.945-26.722
			c0.573-20.598,3.225-41.08,1.147-61.836c-3.13-31.277,4.734-61.565,10.367-92.003c6.901-37.291,20.443-72.343,36.027-106.672
			c3.84-8.461,8.635-16.535,13.509-24.469c12.374-20.145,24.902-40.197,37.631-60.119c12.326-19.293,27.964-35.553,46.287-49.273
			c6.932-5.19,13.587-10.751,20.528-15.928c28.834-21.506,61.299-34.826,96.583-40.655c13.354-2.206,27.226-1.209,40.85-1.914
			c4.937-0.256,10.082-0.473,14.71-1.994c15.952-5.243,32.283-7.992,48.977-9.107c12.961-0.866,25.769-2.28,38.201-6.768
			c5.109-1.845,11.124-1.705,16.713-1.609c20.563,0.353,41.196-0.094,61.543,3.82c5.22,1.005,10.828,1.179,15.567,3.288
			c18.832,8.379,38.969,11.306,58.941,14.826c16.7,2.943,33.625,4.636,50.304,7.685c31.235,5.711,61.62,13.798,88.953,31.143
			c15.435,9.794,32.161,17.537,47.734,27.131c37.236,22.94,66.654,53.752,90.005,90.667c19.91,31.476,35.764,64.669,44.91,100.863
			c2.282,9.031,3.831,18.247,5.723,27.377c7.693,37.133,15.351,74.273,23.096,111.396c5.455,26.142,8.594,52.583,9.477,79.232
			c0.238,7.162-1.724,14.459-3.159,21.597c-1.111,5.53-3.301,10.848-4.363,16.384c-0.503,2.625-0.141,5.823,0.931,8.282
			c12.25,28.127,23.295,56.683,30.485,86.563c5.587,23.22,3.901,46.32-2.679,69.103c-6.427,22.249-21.805,38.028-39.564,51.328
			c-22.141,16.581-47.447,26.897-74.292,33.313c-46.429,11.098-93.565,18.085-140.978,23.072
			c-24.166,2.542-48.467,4.01-72.744,5.234C1130.947,1780.95,1087.002,1782.619,1039.413,1784.674z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1473.25,1500.25c0,0-121.25,77.75-228.25,88.75s-149.5,20-204.5,20.5S781,1596,713,1571s-135-49-138-56"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1007.333,1014.333c0,0-0.333,248.667,0.667,334.667s2,260,2,260"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1038,1007c0,0,149,27,200,52s87,47,102,87s39,77,46,86s28,133,30,177s2,62,15,74s14,35,14,35"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M978.667,1006.667c0,0-124.167,3.333-186.167,32.333S700,1107.5,681,1139.5S640.333,1256,639,1273s-10.667,64-11.667,72.667
			s-21,57-20.667,75.333s-1.333,109.334-1.333,109.334"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1005.25,975c0,0,45.75,7.75,33.5,13.5s-26.5,6.75-37,6.5s-35.25-4.5-28.75-11.75S1005.25,975,1005.25,975z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1040.25,987.25c0,0,13,18.25-11.5,24s-44.5,1.25-48.25-2.75s-14.5-10.75-7.5-23"/>
	</g>
</g>
</svg>
        </div>
      </li>
      <li>
        <div class="details">
          <h2>Tee</h2>
          <p class="price">$25</p>
          <p>No Gracias. Si Por Favor.</p>
          <a href="" class="button">Add to Cart</a>
        </div>
        <div class="wrapper">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152635/tee-nn.jpg" alt="" />
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2000px" height="2300px" viewBox="0 0 2000 2300" enable-background="new 0 0 2000 2300" xml:space="preserve">
<g id="Layer_1_tee">
    <g id="clip_tee">
      <defs>
        <path id="clip_path_tee" d="M572.138,1246.225c-6.627,3.584-11.224,6.07-16.098,8.706
          c-80.052-92.499-160.817-183.584-249.483-268.049c6.865-7.441,12.975-14.43,19.468-21.041
          c53.437-54.407,106.971-108.72,160.417-163.119c16.613-16.909,34.124-32.76,53.302-46.738c2.383-1.736,5.127-3.636,6.394-6.126
          c4.478-8.809,11.964-13.883,20.162-18.678c6.577-3.847,12.517-8.809,18.616-13.438c13.591-10.315,28.186-18.838,43.601-26.191
          c18.919-9.025,36.936-20.13,56.281-28.037c42.529-17.382,85.607-33.429,128.554-49.776c12.714-4.84,25.78-8.748,38.602-13.315
          c5.322-1.896,10.987-3.607,15.505-6.803c7.148-5.057,13.275-3.951,20.306-0.051c33.446,18.558,70.061,24.771,107.638,26.757
          c25.725,1.359,51.42,0.525,76.425-6.125c13.778-3.664,27.066-9.187,40.549-13.949c5.017-1.772,9.834-4.309,14.974-5.463
          c3.312-0.743,7.353-0.397,10.535,0.835c10.69,4.138,21.504,6.096,33.059,6.396c9.148,0.236,18.496,2.523,27.278,5.37
          c34.836,11.291,69.834,22.228,104.114,35.056c41.193,15.414,80.984,34.222,119.689,55.182
          c19.903,10.779,39.955,21.372,59.187,33.267c10.96,6.778,20.679,15.69,30.476,24.194c26.726,23.199,50.724,49.079,74.192,75.532
          c31.839,35.886,64.342,71.183,96.427,106.851c12.699,14.118,25.061,28.54,37.525,42.867c1.487,1.709,2.658,3.693,4.572,6.393
          c-16.094,14.946-32.079,29.453-47.685,44.358c-29.633,28.305-58.923,56.969-88.586,85.241
          c-34.713,33.085-66.62,69.08-103.547,99.863c-6.651,5.545-13.545,10.802-20.136,16.415c-4.615,3.932-9.077,4.956-14.428,1.373
          c-2.398-1.604-5.379-2.339-9.498-4.052c-0.883,4.498-2.209,8.179-2.224,11.863c-0.059,15.657,0.23,31.316,0.47,46.974
          c0.56,36.649,1.419,73.297,1.699,109.948c0.727,94.968,0.747,189.944,1.977,284.905c0.62,47.965,3.636,95.894,4.829,143.857
          c0.746,29.969,0.067,59.974,0.116,89.962c0.033,20.303,0.288,40.606,0.271,60.909c-0.003,3.573-0.856,7.146-1.315,10.703
          c-9.959,0.937-19.169,1.889-28.398,2.583c-1.476,0.111-3.706-0.467-4.446-1.524c-3.375-4.825-8.562-4.918-13.404-5.339
          c-26.872-2.339-53.732-5.658-80.658-6.382c-56.933-1.53-113.945-3.312-170.846-1.865c-48.357,1.229-96.598-0.898-144.892-0.92
          c-31.271-0.015-62.528-3.786-93.814-4.211c-31.952-0.433-63.943,0.839-95.896,1.968c-34.948,1.234-69.876,3.074-104.804,4.811
          c-31.275,1.555-62.538,3.351-93.81,4.99c-10.978,0.575-21.959,1.177-32.947,1.442c-8.418,0.205-9.917-1.158-9.85-9.854
          c0.262-33.963,0.768-67.924,1.187-101.886c0.305-24.658,0.374-49.321,0.97-73.972c1.858-76.943,4.52-153.873,5.695-230.826
          c0.846-55.299,0.468-110.639-0.588-165.937c-0.89-46.621-3.496-93.211-5.477-139.81
          C574.162,1257.449,573.05,1252.616,572.138,1246.225z"/>
      </defs>
      <clipPath id="clip_path_tee_1_">
        <use xlink:href="#clip_path_tee"  overflow="visible"/>
      </clipPath>
      <g id="blend_tee" clip-path="url(#clip_path_tee_1_)">

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="708.036" y1="60.938" x2="-179.964" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="847.645" y1="60.938" x2="-40.355" y2="2180.937"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="987.253" y1="60.938" x2="99.253" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1126.861" y1="60.938" x2="238.861" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1266.47" y1="60.938" x2="378.47" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1406.078" y1="60.938" x2="518.078" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1545.687" y1="60.938" x2="657.687" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1685.295" y1="60.938" x2="797.295" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1824.903" y1="60.938" x2="936.903" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1964.512" y1="60.938" x2="1076.512" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2104.12" y1="60.938" x2="1216.12" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2243.729" y1="60.938" x2="1355.729" y2="2180.938"/>
      </g>
    </g>
    <g id="stroke_tee">
      <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M572.138,1246.225
        c-6.627,3.584-11.224,6.07-16.098,8.706c-80.052-92.499-160.817-183.584-249.483-268.049c6.865-7.441,12.975-14.43,19.468-21.041
        c53.437-54.407,106.971-108.72,160.417-163.119c16.613-16.909,34.124-32.76,53.302-46.738c2.383-1.736,5.127-3.636,6.394-6.126
        c4.478-8.809,11.964-13.883,20.162-18.678c6.577-3.847,12.517-8.809,18.616-13.438c13.591-10.315,28.186-18.838,43.601-26.191
        c18.919-9.025,36.936-20.13,56.281-28.037c42.529-17.382,85.607-33.429,128.554-49.776c12.714-4.84,25.78-8.748,38.602-13.315
        c5.322-1.896,10.987-3.607,15.505-6.803c7.148-5.057,13.275-3.951,20.306-0.051c33.446,18.558,70.061,24.771,107.638,26.757
        c25.725,1.359,51.42,0.525,76.425-6.125c13.778-3.664,27.066-9.187,40.549-13.949c5.017-1.772,9.834-4.309,14.974-5.463
        c3.312-0.743,7.353-0.397,10.535,0.835c10.69,4.138,21.504,6.096,33.059,6.396c9.148,0.236,18.496,2.523,27.278,5.37
        c34.836,11.291,69.834,22.228,104.114,35.056c41.193,15.414,80.984,34.222,119.689,55.182
        c19.903,10.779,39.955,21.372,59.187,33.267c10.96,6.778,20.679,15.69,30.476,24.194c26.726,23.199,50.724,49.079,74.192,75.532
        c31.839,35.886,64.342,71.183,96.427,106.851c12.699,14.118,25.061,28.54,37.525,42.867c1.487,1.709,2.658,3.693,4.572,6.393
        c-16.094,14.946-32.079,29.453-47.685,44.358c-29.633,28.305-58.923,56.969-88.586,85.241
        c-34.713,33.085-66.62,69.08-103.547,99.863c-6.651,5.545-13.545,10.802-20.136,16.415c-4.615,3.932-9.077,4.956-14.428,1.373
        c-2.398-1.604-5.379-2.339-9.498-4.052c-0.883,4.498-2.209,8.179-2.224,11.863c-0.059,15.657,0.23,31.316,0.47,46.974
        c0.56,36.649,1.419,73.297,1.699,109.948c0.727,94.968,0.747,189.944,1.977,284.905c0.62,47.965,3.636,95.894,4.829,143.857
        c0.746,29.969,0.067,59.974,0.116,89.962c0.033,20.303,0.288,40.606,0.271,60.909c-0.003,3.573-0.856,7.146-1.315,10.703
        c-9.959,0.937-19.169,1.889-28.398,2.583c-1.476,0.111-3.706-0.467-4.446-1.524c-3.375-4.825-8.562-4.918-13.404-5.339
        c-26.872-2.339-53.732-5.658-80.658-6.382c-56.933-1.53-113.945-3.312-170.846-1.865c-48.357,1.229-96.598-0.898-144.892-0.92
        c-31.271-0.015-62.528-3.786-93.814-4.211c-31.952-0.433-63.943,0.839-95.896,1.968c-34.948,1.234-69.876,3.074-104.804,4.811
        c-31.275,1.555-62.538,3.351-93.81,4.99c-10.978,0.575-21.959,1.177-32.947,1.442c-8.418,0.205-9.917-1.158-9.85-9.854
        c0.262-33.963,0.768-67.924,1.187-101.886c0.305-24.658,0.374-49.321,0.97-73.972c1.858-76.943,4.52-153.873,5.695-230.826
        c0.846-55.299,0.468-110.639-0.588-165.937c-0.89-46.621-3.496-93.211-5.477-139.81
        C574.162,1257.449,573.05,1252.616,572.138,1246.225z"/>
      <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M874,589c0,0-8.5,37,0,68.5s28,69.167,72,91.5
        c22.364,11.351,88.5,22.5,126.5-8.5s57.5-63.5,64.5-96.75s-0.5-44.25-4.5-49.25"/>
      <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M1172.667,601.333c0,0,9.667,58.333-15.333,98
        s-59.667,67.667-84,76.333s-94.333,29.333-156-3s-82-110-81.667-120.667s-1.333-31,1.667-48.667"/>
      <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M1481.21,730.893c0,0-27.876,60.441-32.543,83.441
        s5.999,47.667-2.334,77.333c0,0-9.833,59.333-9.333,102.333s3.5,229.75,1.5,248.75"/>
      <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M550.75,741.375
        c0.25,0.875,5,22.625,12.625,33.375S579,815.375,578.25,824.5s1.25,56-1.417,62s-1.5,100.833-1.5,125.5
        s-5.667,208.999-3.667,231.666"/>
    </g>
  </g>
</svg>
        </div>
      </li>
      <li>
        <div class="details">
          <h2>Tote Bag</h2>
          <p class="price">$25</p>
          <p>A home for your gear. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <a href="" class="button">Add to Cart</a>
        </div>
        <div class="wrapper">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152635/tote-nn.jpg" alt="" />
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2000px" height="2300px" viewBox="0 0 2000 2300" enable-background="new 0 0 2000 2300" xml:space="preserve">
<g id="Layer_1TOTE">
	<g>
		<defs>
			<path id="SVGID_1_TOTE" d="M1367.88,1143.279c-0.261-28.267-0.016-56.538,0.021-84.808c0.01-6.934-1.332-14.24,0.384-20.73
				c4.887-18.483,2.992-37.095,2.75-55.694c-0.032-2.452-1.016-6.274-2.703-7.088c-7.648-3.685-14.739-8.99-24.188-8.017
				c-8.895,0.916-17.944,1.438-26.85,0.896c-16.284-0.994-32.503-3.031-48.769-4.387c-13.203-1.101-26.438-1.84-39.172-2.706
				c-3.559,3.876-2.523,12.064-11.277,8.306c-0.165-3.258-0.522-6.854-0.502-10.446c0.156-27.663,0.547-55.326,0.534-82.989
				c-0.008-16.312-0.35-32.634-1.023-48.932c-0.866-20.969-2.712-41.904-3.263-62.876c-1.617-61.628-2.621-123.271-4.224-184.899
				c-0.982-37.731-4.604-75.176-16.012-111.428c-7.864-24.99-17.686-48.91-37.881-67.003c-11.664-10.449-22.987-21.28-34.686-31.691
				c-3.19-2.841-7.102-4.917-10.819-7.112c-17.62-10.403-37.464-11.632-57.038-12.607c-46.973-2.34-93.97-2.221-140.709,3.859
				c-30.665,3.989-57.472,16.426-78.84,39.335c-10.683,11.453-21.287,22.981-31.776,34.612
				c-11.533,12.786-19.548,27.438-25.017,43.898c-7.352,22.129-9.638,44.896-10.763,67.861c-1.614,32.948-3.323,65.914-3.823,98.89
				c-0.913,60.311-1.483,120.636-1.204,180.95c0.187,40.316,1.945,80.628-0.577,120.925c-0.562,8.972-1.408,17.933-2.461,26.859
				c-0.189,1.609-2.029,3.024-3.107,4.529c-1.418-1.135-3.182-2.032-4.166-3.464c-1.261-1.836-1.896-4.103-2.835-6.266
				c-7.023,0.573-13.611,1.205-20.213,1.633c-19.946,1.293-39.885,2.792-59.851,3.646c-12.559,0.537-25.192,1.978-37.687-1.624
				c-6.656-1.919-12.264,2.231-17.807,5.083c-4.627,2.381-4.163,7.447-4.127,11.617c0.2,23.305,0.454,46.614,1.172,69.908
				c0.585,18.969,2.387,37.907,2.702,56.874c0.833,49.971,1.222,99.948,1.653,149.925c0.455,52.655,0.744,105.312,1.13,157.968
				c0.229,31.322,0.556,62.645,0.747,93.967c0.155,25.627,0.348,51.255,0.198,76.881c-0.115,19.654-1.053,39.306-1.063,58.959
				c-0.016,32.311,0.314,64.624,0.711,96.934c0.225,18.325,0.463,36.666,1.416,54.962c1.906,36.587,4.525,73.136,6.37,109.725
				c0.528,10.486,3.661,18.583,13.034,24.11c4.454,2.627,8.409,5.194,13.865,3.271c1.8-0.634,3.959-0.293,5.955-0.319
				c18.273-0.242,36.606,1.742,54.804-1.633c2.909-0.539,5.986-0.163,8.984-0.234c21.352-0.509,42.53,1.308,63.806,3.202
				c40.807,3.634,81.747,5.877,122.661,8.177c79.574,4.474,159.233,4.431,238.896,3.834c3.993-0.03,7.988-0.356,11.976-0.635
				c21.272-1.484,42.527-3.959,63.815-4.28c33.298-0.502,66.618,0.412,99.928,0.835c3.302,0.042,6.613,0.731,9.889,1.303
				c13.586,2.372,16.276,0.581,19.266-13.016c0.215-0.977,0.479-1.951,0.582-2.941c3.049-29.137,6.951-58.218,8.865-87.429
				c1.829-27.901,1.359-55.947,2.306-83.916c1.646-48.62,3.846-97.223,5.35-145.847c1.061-34.3,1.375-68.623,1.985-102.937
				c0.782-43.973,2.117-87.947,2.129-131.92c0.012-48.98-1.144-97.961-1.891-146.939
				C1369,1201.225,1368.146,1172.255,1367.88,1143.279z M1138.251,969.633c-13.355,4.282-281.112,5.794-299.012,1.609
				c-0.409-5.515-1.257-11.396-1.216-17.272c0.348-48.643,0.288-97.299,1.467-145.924c1.461-60.287,4.387-120.539,5.897-180.826
				c0.826-32.961,0.253-65.965-0.105-98.944c-0.2-18.312-1.865-36.619-1.756-54.923c0.108-17.956,1.673-35.901,2.493-53.856
				c0.183-3.989,1.516-7.329,5.067-9.131c8.893-4.51,17.524-10.788,26.986-12.63c14.838-2.888,30.106-5.889,45.521-2.41
				c22.504,5.077,45.281,7.916,68.391,7.725c2.331-0.02,4.696,0.329,6.99,0.051c26.718-3.245,53.924-3.363,79.678-12.775
				c13.096-4.785,26.268-3.009,39.35,0.457c8.288,2.196,11.182,8.01,12.38,16.108c3.666,24.78,5.15,49.672,5.537,74.684
				c0.588,37.97,2.14,75.939,1.921,113.901c-0.188,32.628-2.956,65.236-3.334,97.867c-0.332,28.621,1.127,57.261,1.691,85.894
				c0.709,35.969,1.397,71.938,1.933,107.91c0.372,24.98,0.489,49.966,0.662,74.949
				C1138.811,964.689,1138.428,967.286,1138.251,969.633z"/>
	</defs>
		<clipPath id="SVGID_2_TOTE">
			<use xlink:href="#SVGID_1_TOTE"  overflow="visible"/>
		</clipPath>
		<g clip-path="url(#SVGID_2_TOTE)">
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="708.036" y1="60.938" x2="-179.964" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="847.645" y1="60.938" x2="-40.355" y2="2180.937"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="987.253" y1="60.938" x2="99.253" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1126.861" y1="60.938" x2="238.861" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1266.47" y1="60.938" x2="378.47" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1406.078" y1="60.938" x2="518.078" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1545.687" y1="60.938" x2="657.687" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1685.295" y1="60.938" x2="797.295" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1824.903" y1="60.938" x2="936.903" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1964.512" y1="60.938" x2="1076.512" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2104.12" y1="60.938" x2="1216.12" y2="2180.938"/>
			
				<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2243.729" y1="60.938" x2="1355.729" y2="2180.938"/>
		</g>
	</g>
	<g>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M1367.88,1143.279
			c-0.261-28.267-0.016-56.538,0.021-84.808c0.01-6.934-1.332-14.24,0.384-20.73c4.887-18.483,2.992-37.095,2.75-55.694
			c-0.032-2.452-1.016-6.274-2.703-7.088c-7.648-3.685-14.739-8.99-24.188-8.017c-8.895,0.916-17.944,1.438-26.85,0.896
			c-16.284-0.994-32.503-3.031-48.769-4.387c-13.203-1.101-26.438-1.84-39.172-2.706c-3.559,3.876-2.523,12.064-11.277,8.306
			c-0.165-3.258-0.522-6.854-0.502-10.446c0.156-27.663,0.547-55.326,0.534-82.989c-0.008-16.312-0.35-32.634-1.023-48.932
			c-0.866-20.969-2.712-41.904-3.263-62.876c-1.617-61.628-2.621-123.271-4.224-184.899c-0.982-37.731-4.604-75.176-16.012-111.428
			c-7.864-24.99-17.686-48.91-37.881-67.003c-11.664-10.449-22.987-21.28-34.686-31.691c-3.19-2.841-7.102-4.917-10.819-7.112
			c-17.62-10.403-37.464-11.632-57.038-12.607c-46.973-2.34-93.97-2.221-140.709,3.859c-30.665,3.989-57.472,16.426-78.84,39.335
			c-10.683,11.453-21.287,22.981-31.776,34.612c-11.533,12.786-19.548,27.438-25.017,43.898
			c-7.352,22.129-9.638,44.896-10.763,67.861c-1.614,32.948-3.323,65.914-3.823,98.89c-0.913,60.311-1.483,120.636-1.204,180.95
			c0.187,40.316,1.945,80.628-0.577,120.925c-0.562,8.972-1.408,17.933-2.461,26.859c-0.189,1.609-2.029,3.024-3.107,4.529
			c-1.418-1.135-3.182-2.032-4.166-3.464c-1.261-1.836-1.896-4.103-2.835-6.266c-7.023,0.573-13.611,1.205-20.213,1.633
			c-19.946,1.293-39.885,2.792-59.851,3.646c-12.559,0.537-25.192,1.978-37.687-1.624c-6.656-1.919-12.264,2.231-17.807,5.083
			c-4.627,2.381-4.163,7.447-4.127,11.617c0.2,23.305,0.454,46.614,1.172,69.908c0.585,18.969,2.387,37.907,2.702,56.874
			c0.833,49.971,1.222,99.948,1.653,149.925c0.455,52.655,0.744,105.312,1.13,157.968c0.229,31.322,0.556,62.645,0.747,93.967
			c0.155,25.627,0.348,51.255,0.198,76.881c-0.115,19.654-1.053,39.306-1.063,58.959c-0.016,32.311,0.314,64.624,0.711,96.934
			c0.225,18.325,0.463,36.666,1.416,54.962c1.906,36.587,4.525,73.136,6.37,109.725c0.528,10.486,3.661,18.583,13.034,24.11
			c4.454,2.627,8.409,5.194,13.865,3.271c1.8-0.634,3.959-0.293,5.955-0.319c18.273-0.242,36.606,1.742,54.804-1.633
			c2.909-0.539,5.986-0.163,8.984-0.234c21.352-0.509,42.53,1.308,63.806,3.202c40.807,3.634,81.747,5.877,122.661,8.177
			c79.574,4.474,159.233,4.431,238.896,3.834c3.993-0.03,7.988-0.356,11.976-0.635c21.272-1.484,42.527-3.959,63.815-4.28
			c33.298-0.502,66.618,0.412,99.928,0.835c3.302,0.042,6.613,0.731,9.889,1.303c13.586,2.372,16.276,0.581,19.266-13.016
			c0.215-0.977,0.479-1.951,0.582-2.941c3.049-29.137,6.951-58.218,8.865-87.429c1.829-27.901,1.359-55.947,2.306-83.916
			c1.646-48.62,3.846-97.223,5.35-145.847c1.061-34.3,1.375-68.623,1.985-102.937c0.782-43.973,2.117-87.947,2.129-131.92
			c0.012-48.98-1.144-97.961-1.891-146.939C1369,1201.225,1368.146,1172.255,1367.88,1143.279z M1138.251,969.633
			c-13.355,4.282-281.112,5.794-299.012,1.609c-0.409-5.515-1.257-11.396-1.216-17.272c0.348-48.643,0.288-97.299,1.467-145.924
			c1.461-60.287,4.387-120.539,5.897-180.826c0.826-32.961,0.253-65.965-0.105-98.944c-0.2-18.312-1.865-36.619-1.756-54.923
			c0.108-17.956,1.673-35.901,2.493-53.856c0.183-3.989,1.516-7.329,5.067-9.131c8.893-4.51,17.524-10.788,26.986-12.63
			c14.838-2.888,30.106-5.889,45.521-2.41c22.504,5.077,45.281,7.916,68.391,7.725c2.331-0.02,4.696,0.329,6.99,0.051
			c26.718-3.245,53.924-3.363,79.678-12.775c13.096-4.785,26.268-3.009,39.35,0.457c8.288,2.196,11.182,8.01,12.38,16.108
			c3.666,24.78,5.15,49.672,5.537,74.684c0.588,37.97,2.14,75.939,1.921,113.901c-0.188,32.628-2.956,65.236-3.334,97.867
			c-0.332,28.621,1.127,57.261,1.691,85.894c0.709,35.969,1.397,71.938,1.933,107.91c0.372,24.98,0.489,49.966,0.662,74.949
			C1138.811,964.689,1138.428,967.286,1138.251,969.633z"/>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M780,462c0,0,74.667-62.333,104.667-65.333"/>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M1120,392c0,0,61,33,70.5,64.5"/>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M839.5,972c-9.212,0.099-19.5-1.333-19.5-1.333
			s-53.167,0-66.5,1.333s-143.167,3.167-143.167-0.833"/>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M1366.667,971.333c0,0-118.666-4-145.333-1.333
			c-14.685,1.468-32.073,1.894-64,0.667c-26.052-1.001-42.242,1.034-47.334,1.333"/>
		<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M1368,1044.5c0,0-1-0.5-8,0.5
			c-6.641,0.949-37,1-37,1s-125-4-162-5s-239,1-258,5s-77-5-139-3s-147.167,8.167-152.167,8.167s-2.5-12-2.5-12"/>
	</g>
</g>
</svg>
        </div>
      </li>
      <li>
        <div class="details">
          <h2>5-Sided Cap</h2>
          <p class="price">$25</p>
          <p>Its a hat. With five sides.</p>
          <a href="" class="button">Add to Cart</a>
        </div>
        <div class="wrapper">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152635/hat-nn-nicer.jpg" alt="" />
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2000px" height="2300px" viewBox="0 0 2000 2300" enable-background="new 0 0 2000 2300" xml:space="preserve">
<g id="Layer_1">
	<g>
		<defs>
			<path id="SVGID_1_HAT" d="M1039.413,1784.674c-22.347-1.213-48.274-2.63-74.204-4.013c-3.324-0.178-6.658-0.229-9.989-0.248
				c-31.324-0.187-62.651-0.114-93.972-0.585c-38.64-0.58-77.185-3.035-115.681-6.49c-18.235-1.637-36.558-2.331-54.845-3.371
				c-34.714-1.974-69.056-6.401-101.984-18.019c-10.255-3.617-20.032-9.058-29.333-14.792c-11.78-7.264-18.68-18.079-22.045-31.93
				c-8.119-33.411-5.787-66.278,4.404-98.556c7.207-22.827,15.952-45.196,24.741-67.482c3.466-8.79,15.186-18.574,8.994-25.688
				c-3.037-3.49-6.591-12.518-9-16.5c-7.762-12.831-7.875-17.282-7-31.5c0.626-10.171,3.677-17.073,3.945-26.722
				c0.573-20.598,3.225-41.08,1.147-61.836c-3.13-31.277,4.734-61.565,10.367-92.003c6.901-37.291,20.443-72.343,36.027-106.672
				c3.84-8.461,8.635-16.535,13.509-24.469c12.374-20.145,24.902-40.197,37.631-60.119c12.326-19.293,27.964-35.553,46.287-49.273
				c6.932-5.19,13.587-10.751,20.528-15.928c28.834-21.506,61.299-34.826,96.583-40.655c13.354-2.206,27.226-1.209,40.85-1.914
				c4.937-0.256,10.082-0.473,14.71-1.994c15.952-5.243,32.283-7.992,48.977-9.107c12.961-0.866,25.769-2.28,38.201-6.768
				c5.109-1.845,11.124-1.705,16.713-1.609c20.563,0.353,41.196-0.094,61.543,3.82c5.22,1.005,10.828,1.179,15.567,3.288
				c18.832,8.379,38.969,11.306,58.941,14.826c16.7,2.943,33.625,4.636,50.304,7.685c31.235,5.711,61.62,13.798,88.953,31.143
				c15.435,9.794,32.161,17.537,47.734,27.131c37.236,22.94,66.654,53.752,90.005,90.667c19.91,31.476,35.764,64.669,44.91,100.863
				c2.282,9.031,3.831,18.247,5.723,27.377c7.693,37.133,15.351,74.273,23.096,111.396c5.455,26.142,8.594,52.583,9.477,79.232
				c0.238,7.162-1.724,14.459-3.159,21.597c-1.111,5.53-3.301,10.848-4.363,16.384c-0.503,2.625-0.141,5.823,0.931,8.282
				c12.25,28.127,23.295,56.683,30.485,86.563c5.587,23.22,3.901,46.32-2.679,69.103c-6.427,22.249-21.805,38.028-39.564,51.328
				c-22.141,16.581-47.447,26.897-74.292,33.313c-46.429,11.098-93.565,18.085-140.978,23.072
				c-24.166,2.542-48.467,4.01-72.744,5.234C1130.947,1780.95,1087.002,1782.619,1039.413,1784.674z"/>
		</defs>
		<clipPath id="SVGID_2_HAT">
			<use xlink:href="#SVGID_1_HAT"  overflow="visible"/>
		</clipPath>
		<g id="blend" clip-path="url(#SVGID_2_HAT)">
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="708.036" y1="60.938" x2="-179.964" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="847.645" y1="60.938" x2="-40.355" y2="2180.937"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="987.253" y1="60.938" x2="99.253" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1126.861" y1="60.938" x2="238.861" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1266.47" y1="60.938" x2="378.47" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1406.078" y1="60.938" x2="518.078" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1545.687" y1="60.938" x2="657.687" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1685.295" y1="60.938" x2="797.295" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1824.903" y1="60.938" x2="936.903" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1964.512" y1="60.938" x2="1076.512" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2104.12" y1="60.938" x2="1216.12" y2="2180.938"/>
			
				<line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2243.729" y1="60.938" x2="1355.729" y2="2180.938"/>
		</g>
	</g>
	<g id="strokes">
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1039.413,1784.674c-22.347-1.213-48.274-2.63-74.204-4.013c-3.324-0.178-6.658-0.229-9.989-0.248
			c-31.324-0.187-62.651-0.114-93.972-0.585c-38.64-0.58-77.185-3.035-115.681-6.49c-18.235-1.637-36.558-2.331-54.845-3.371
			c-34.714-1.974-69.056-6.401-101.984-18.019c-10.255-3.617-20.032-9.058-29.333-14.792c-11.78-7.264-18.68-18.079-22.045-31.93
			c-8.119-33.411-5.787-66.278,4.404-98.556c7.207-22.827,15.952-45.196,24.741-67.482c3.466-8.79,15.186-18.574,8.994-25.688
			c-3.037-3.49-6.591-12.518-9-16.5c-7.762-12.831-7.875-17.282-7-31.5c0.626-10.171,3.677-17.073,3.945-26.722
			c0.573-20.598,3.225-41.08,1.147-61.836c-3.13-31.277,4.734-61.565,10.367-92.003c6.901-37.291,20.443-72.343,36.027-106.672
			c3.84-8.461,8.635-16.535,13.509-24.469c12.374-20.145,24.902-40.197,37.631-60.119c12.326-19.293,27.964-35.553,46.287-49.273
			c6.932-5.19,13.587-10.751,20.528-15.928c28.834-21.506,61.299-34.826,96.583-40.655c13.354-2.206,27.226-1.209,40.85-1.914
			c4.937-0.256,10.082-0.473,14.71-1.994c15.952-5.243,32.283-7.992,48.977-9.107c12.961-0.866,25.769-2.28,38.201-6.768
			c5.109-1.845,11.124-1.705,16.713-1.609c20.563,0.353,41.196-0.094,61.543,3.82c5.22,1.005,10.828,1.179,15.567,3.288
			c18.832,8.379,38.969,11.306,58.941,14.826c16.7,2.943,33.625,4.636,50.304,7.685c31.235,5.711,61.62,13.798,88.953,31.143
			c15.435,9.794,32.161,17.537,47.734,27.131c37.236,22.94,66.654,53.752,90.005,90.667c19.91,31.476,35.764,64.669,44.91,100.863
			c2.282,9.031,3.831,18.247,5.723,27.377c7.693,37.133,15.351,74.273,23.096,111.396c5.455,26.142,8.594,52.583,9.477,79.232
			c0.238,7.162-1.724,14.459-3.159,21.597c-1.111,5.53-3.301,10.848-4.363,16.384c-0.503,2.625-0.141,5.823,0.931,8.282
			c12.25,28.127,23.295,56.683,30.485,86.563c5.587,23.22,3.901,46.32-2.679,69.103c-6.427,22.249-21.805,38.028-39.564,51.328
			c-22.141,16.581-47.447,26.897-74.292,33.313c-46.429,11.098-93.565,18.085-140.978,23.072
			c-24.166,2.542-48.467,4.01-72.744,5.234C1130.947,1780.95,1087.002,1782.619,1039.413,1784.674z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1473.25,1500.25c0,0-121.25,77.75-228.25,88.75s-149.5,20-204.5,20.5S781,1596,713,1571s-135-49-138-56"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1007.333,1014.333c0,0-0.333,248.667,0.667,334.667s2,260,2,260"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1038,1007c0,0,149,27,200,52s87,47,102,87s39,77,46,86s28,133,30,177s2,62,15,74s14,35,14,35"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M978.667,1006.667c0,0-124.167,3.333-186.167,32.333S700,1107.5,681,1139.5S640.333,1256,639,1273s-10.667,64-11.667,72.667
			s-21,57-20.667,75.333s-1.333,109.334-1.333,109.334"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1005.25,975c0,0,45.75,7.75,33.5,13.5s-26.5,6.75-37,6.5s-35.25-4.5-28.75-11.75S1005.25,975,1005.25,975z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
			M1040.25,987.25c0,0,13,18.25-11.5,24s-44.5,1.25-48.25-2.75s-14.5-10.75-7.5-23"/>
	</g>
</g>
</svg>
        </div>
      </li>
      <li>
        <div class="details">
          <h2>Tee</h2>
          <p class="price">$25</p>
          <p>No Gracias. Si Por Favor.</p>
          <a href="" class="button">Add to Cart</a>
        </div>
        <div class="wrapper">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152635/tee-nn.jpg" alt="" />
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2000px" height="2300px" viewBox="0 0 2000 2300" enable-background="new 0 0 2000 2300" xml:space="preserve">
<g id="Layer_1_tee">
    <g id="clip_tee">
      <defs>
        <path id="clip_path_tee" d="M572.138,1246.225c-6.627,3.584-11.224,6.07-16.098,8.706
          c-80.052-92.499-160.817-183.584-249.483-268.049c6.865-7.441,12.975-14.43,19.468-21.041
          c53.437-54.407,106.971-108.72,160.417-163.119c16.613-16.909,34.124-32.76,53.302-46.738c2.383-1.736,5.127-3.636,6.394-6.126
          c4.478-8.809,11.964-13.883,20.162-18.678c6.577-3.847,12.517-8.809,18.616-13.438c13.591-10.315,28.186-18.838,43.601-26.191
          c18.919-9.025,36.936-20.13,56.281-28.037c42.529-17.382,85.607-33.429,128.554-49.776c12.714-4.84,25.78-8.748,38.602-13.315
          c5.322-1.896,10.987-3.607,15.505-6.803c7.148-5.057,13.275-3.951,20.306-0.051c33.446,18.558,70.061,24.771,107.638,26.757
          c25.725,1.359,51.42,0.525,76.425-6.125c13.778-3.664,27.066-9.187,40.549-13.949c5.017-1.772,9.834-4.309,14.974-5.463
          c3.312-0.743,7.353-0.397,10.535,0.835c10.69,4.138,21.504,6.096,33.059,6.396c9.148,0.236,18.496,2.523,27.278,5.37
          c34.836,11.291,69.834,22.228,104.114,35.056c41.193,15.414,80.984,34.222,119.689,55.182
          c19.903,10.779,39.955,21.372,59.187,33.267c10.96,6.778,20.679,15.69,30.476,24.194c26.726,23.199,50.724,49.079,74.192,75.532
          c31.839,35.886,64.342,71.183,96.427,106.851c12.699,14.118,25.061,28.54,37.525,42.867c1.487,1.709,2.658,3.693,4.572,6.393
          c-16.094,14.946-32.079,29.453-47.685,44.358c-29.633,28.305-58.923,56.969-88.586,85.241
          c-34.713,33.085-66.62,69.08-103.547,99.863c-6.651,5.545-13.545,10.802-20.136,16.415c-4.615,3.932-9.077,4.956-14.428,1.373
          c-2.398-1.604-5.379-2.339-9.498-4.052c-0.883,4.498-2.209,8.179-2.224,11.863c-0.059,15.657,0.23,31.316,0.47,46.974
          c0.56,36.649,1.419,73.297,1.699,109.948c0.727,94.968,0.747,189.944,1.977,284.905c0.62,47.965,3.636,95.894,4.829,143.857
          c0.746,29.969,0.067,59.974,0.116,89.962c0.033,20.303,0.288,40.606,0.271,60.909c-0.003,3.573-0.856,7.146-1.315,10.703
          c-9.959,0.937-19.169,1.889-28.398,2.583c-1.476,0.111-3.706-0.467-4.446-1.524c-3.375-4.825-8.562-4.918-13.404-5.339
          c-26.872-2.339-53.732-5.658-80.658-6.382c-56.933-1.53-113.945-3.312-170.846-1.865c-48.357,1.229-96.598-0.898-144.892-0.92
          c-31.271-0.015-62.528-3.786-93.814-4.211c-31.952-0.433-63.943,0.839-95.896,1.968c-34.948,1.234-69.876,3.074-104.804,4.811
          c-31.275,1.555-62.538,3.351-93.81,4.99c-10.978,0.575-21.959,1.177-32.947,1.442c-8.418,0.205-9.917-1.158-9.85-9.854
          c0.262-33.963,0.768-67.924,1.187-101.886c0.305-24.658,0.374-49.321,0.97-73.972c1.858-76.943,4.52-153.873,5.695-230.826
          c0.846-55.299,0.468-110.639-0.588-165.937c-0.89-46.621-3.496-93.211-5.477-139.81
          C574.162,1257.449,573.05,1252.616,572.138,1246.225z"/>
      </defs>
      <clipPath id="clip_path_tee_1_">
        <use xlink:href="#clip_path_tee"  overflow="visible"/>
      </clipPath>
      <g id="blend_tee" clip-path="url(#clip_path_tee_1_)">

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="708.036" y1="60.938" x2="-179.964" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="847.645" y1="60.938" x2="-40.355" y2="2180.937"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="987.253" y1="60.938" x2="99.253" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1126.861" y1="60.938" x2="238.861" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1266.47" y1="60.938" x2="378.47" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1406.078" y1="60.938" x2="518.078" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1545.687" y1="60.938" x2="657.687" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1685.295" y1="60.938" x2="797.295" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1824.903" y1="60.938" x2="936.903" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="1964.512" y1="60.938" x2="1076.512" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2104.12" y1="60.938" x2="1216.12" y2="2180.938"/>

          <line fill="none" stroke="#FFFFFF" stroke-width="200" stroke-miterlimit="10" x1="2243.729" y1="60.938" x2="1355.729" y2="2180.938"/>
      </g>
    </g>
    <g id="stroke_tee">
      <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M572.138,1246.225
        c-6.627,3.584-11.224,6.07-16.098,8.706c-80.052-92.499-160.817-183.584-249.483-268.049c6.865-7.441,12.975-14.43,19.468-21.041
        c53.437-54.407,106.971-108.72,160.417-163.119c16.613-16.909,34.124-32.76,53.302-46.738c2.383-1.736,5.127-3.636,6.394-6.126
        c4.478-8.809,11.964-13.883,20.162-18.678c6.577-3.847,12.517-8.809,18.616-13.438c13.591-10.315,28.186-18.838,43.601-26.191
        c18.919-9.025,36.936-20.13,56.281-28.037c42.529-17.382,85.607-33.429,128.554-49.776c12.714-4.84,25.78-8.748,38.602-13.315
        c5.322-1.896,10.987-3.607,15.505-6.803c7.148-5.057,13.275-3.951,20.306-0.051c33.446,18.558,70.061,24.771,107.638,26.757
        c25.725,1.359,51.42,0.525,76.425-6.125c13.778-3.664,27.066-9.187,40.549-13.949c5.017-1.772,9.834-4.309,14.974-5.463
        c3.312-0.743,7.353-0.397,10.535,0.835c10.69,4.138,21.504,6.096,33.059,6.396c9.148,0.236,18.496,2.523,27.278,5.37
        c34.836,11.291,69.834,22.228,104.114,35.056c41.193,15.414,80.984,34.222,119.689,55.182
        c19.903,10.779,39.955,21.372,59.187,33.267c10.96,6.778,20.679,15.69,30.476,24.194c26.726,23.199,50.724,49.079,74.192,75.532
        c31.839,35.886,64.342,71.183,96.427,106.851c12.699,14.118,25.061,28.54,37.525,42.867c1.487,1.709,2.658,3.693,4.572,6.393
        c-16.094,14.946-32.079,29.453-47.685,44.358c-29.633,28.305-58.923,56.969-88.586,85.241
        c-34.713,33.085-66.62,69.08-103.547,99.863c-6.651,5.545-13.545,10.802-20.136,16.415c-4.615,3.932-9.077,4.956-14.428,1.373
        c-2.398-1.604-5.379-2.339-9.498-4.052c-0.883,4.498-2.209,8.179-2.224,11.863c-0.059,15.657,0.23,31.316,0.47,46.974
        c0.56,36.649,1.419,73.297,1.699,109.948c0.727,94.968,0.747,189.944,1.977,284.905c0.62,47.965,3.636,95.894,4.829,143.857
        c0.746,29.969,0.067,59.974,0.116,89.962c0.033,20.303,0.288,40.606,0.271,60.909c-0.003,3.573-0.856,7.146-1.315,10.703
        c-9.959,0.937-19.169,1.889-28.398,2.583c-1.476,0.111-3.706-0.467-4.446-1.524c-3.375-4.825-8.562-4.918-13.404-5.339
        c-26.872-2.339-53.732-5.658-80.658-6.382c-56.933-1.53-113.945-3.312-170.846-1.865c-48.357,1.229-96.598-0.898-144.892-0.92
        c-31.271-0.015-62.528-3.786-93.814-4.211c-31.952-0.433-63.943,0.839-95.896,1.968c-34.948,1.234-69.876,3.074-104.804,4.811
        c-31.275,1.555-62.538,3.351-93.81,4.99c-10.978,0.575-21.959,1.177-32.947,1.442c-8.418,0.205-9.917-1.158-9.85-9.854
        c0.262-33.963,0.768-67.924,1.187-101.886c0.305-24.658,0.374-49.321,0.97-73.972c1.858-76.943,4.52-153.873,5.695-230.826
        c0.846-55.299,0.468-110.639-0.588-165.937c-0.89-46.621-3.496-93.211-5.477-139.81
        C574.162,1257.449,573.05,1252.616,572.138,1246.225z"/>
      <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M874,589c0,0-8.5,37,0,68.5s28,69.167,72,91.5
        c22.364,11.351,88.5,22.5,126.5-8.5s57.5-63.5,64.5-96.75s-0.5-44.25-4.5-49.25"/>
      <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M1172.667,601.333c0,0,9.667,58.333-15.333,98
        s-59.667,67.667-84,76.333s-94.333,29.333-156-3s-82-110-81.667-120.667s-1.333-31,1.667-48.667"/>
      <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M1481.21,730.893c0,0-27.876,60.441-32.543,83.441
        s5.999,47.667-2.334,77.333c0,0-9.833,59.333-9.333,102.333s3.5,229.75,1.5,248.75"/>
      <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M550.75,741.375
        c0.25,0.875,5,22.625,12.625,33.375S579,815.375,578.25,824.5s1.25,56-1.417,62s-1.5,100.833-1.5,125.5
        s-5.667,208.999-3.667,231.666"/>
    </g>
  </g>
</svg>
        </div>
      </li>
    </ul>
  </div>
</div>
            
          
!
            
              body {
  background-color: #f1f1f1;
  font-family: Signika Negative, Asap, sans-serif;
  height: 100%;
}

h1,h2,h3 {
  font-family: 'cooper-black-std', sans-serif;
  font-style: italic;
}

a:hover {
  color: lightgrey;
}

p,span {
  font-family: Signika Negative, Asap, sans-serif;
}

pre {
  position: absolute;
  top: 0;
  left: 0;
  color: black;
}

#container {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.products {
  list-style: none;
  li {
    position: absolute;
    transform-origin: 50% 50%;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
    &:hover {
      cursor: grab;
    }
    .details {
      position: fixed;
      top: 25%;
      right: 0;
      transform: translateX(85%);
      text-align: left;
      z-index: 100;
      .button {
        background-color: black;
      }
    }
    &.active {
      
    }
    .wrapper {
      position: relative;
    }
    img {
      position: absolute;
      border-radius: 100px;
    }
    svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 400px;
      height: 460px;
    }
  }
}

.circle {
  border-radius: 1000px;
  left: 50%;
  top: 110%;
  // top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  // background-color: white;
  height: 750px;
  width: 750px;
}

nav {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 100%;
  .prev, .next {
    background-color: black;
    // border-radius: 100px;
    padding: 0.25rem 0.5rem;
    color: white;
  }
  .prev {
    float: left;
  }
  .next {
    float: right;
  }
}

header {
  margin-top: 20px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  .logo {
    background-color: black;
    height: 50px;
    width: 50px;
    margin-left: 20px;
    border-radius: 100px;
    position: relative;
    float: left;
    img {
      position: absolute;
      width: 26px;
      height: auto;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%)
    }
  }
  .right {
    float: right;
    h3 {
      font-size: 16px;
      margin-bottom: 0;
      // height: 50px;
      // line-height: 50px;
    }
  }
}

footer {
  position: fixed;
  bottom: 25px;
  left: 50%;
  width: 500px;
  z-index: 100;
  transform: translateX(-50%);
  text-align: center;
  h2 {
    font-size: 20px;
    margin-bottom: 0;
  }
  .row {
    margin-bottom: 20px;
  }
  a {
    color: grey;
    text-transform: uppercase;
    letter-spacing: 0.5;
    font-size: 10px;
  }
}

            
          
!
            
              var draggable
var pl = $('ul.products li').length
var inc = 360 / pl
var cr = $('.circle').height() / 2

// build each product around the circle and attach tween data
$('ul.products li').each(function(index) {
  var self = this;
  var n = index;
  var selfX = $(self).height() / 2 + cr;
  var selfY = -$(self).height() / 2;

  var rotate = (360 / pl * index) - 90;

  var productTl = new TimelineMax({
    paused: true
  })

  TweenMax.set(self, {
    attr: {
      'data-product': index + 1,
      style: 'transform: rotate(' + rotate + 'deg) ' +
        'translateX(' + selfX + 'px) ' +
        'rotate(90deg); '
    }
  })

  productTl.add(blendIn(self))

  $(self).data('productTl', productTl)
});

// Initialize the draggable
function update() {

  draggable = Draggable.create(".circle", {
    type: "rotation",
    throwProps: true,
    snap: function(endValue) {
      return Math.round(endValue / inc) * inc;
    },
    onDrag: function() {
      reset()
    },
    onThrowComplete: function() {
      dragActive()
    }
  });
  dragActive()

}

update();

// Tween rotation
function rotateDraggable(deg, callback) {
  var rot = draggable[0].rotation
  var tl = new TimelineMax()

  tl
    .to('.circle', .5, {
      rotation: rot + deg,
      onComplete: function() {
        callback()
      }
    });

  draggable[0].rotation = rot + deg

}

// Calculate which product is active
function dragActive() {
  var rot = draggable[0].rotation / 360
  var decimal = rot % 1
  var tempIndex = Math.round(pl * decimal)
  var index

  if (rot < 0) {
    index = Math.abs(tempIndex) + 1
  } else {
    index = pl - tempIndex + 1
  }

  if (decimal === 0) {
    index = 1
  }

  activateProduct(index)
}

// Add active class and play tween data
function activateProduct(index) {
  $('ul.products li.active').removeClass('active')
  $('ul.products li[data-product="' + index + '"]').addClass('active')
  // console.log(index)

  $('ul.products li.active').data('productTl').play()
}

// Reverse the tween data
function reset() {
  var activeEl = $('ul.products li.active')
  var tl = $(activeEl).data('productTl');
  tl
    .reverse()
    // .call(onComplete() )
}

// Blend in effect
function blendIn(el) {
  var wrap = $(el).find('.wrapper')
  var $blend = wrap.find('svg g > line')
  var $strokes = wrap.find('path')
  var tl = new TimelineMax()

  TweenMax.set(wrap.find('path'), {
    strokeWidth: '10px'
  })
  TweenMax.set(wrap.find('img'), {
    zIndex: -1
  })

  tl
    .set(wrap, {
      transformOrigin: '50%, 50%',
      zIndex: -1
    })
    .staggerTo($blend, 0.15, {
      opacity: 0
    }, 0.025, 'start')
    .from(wrap, 0.25, {
      scale: 0.5,
      y: 300
    }, 'start')
    .to(wrap.find('path'), 0.25, {
      opacity: 0
    }, 'start')
    .from(wrap.find('img'), 0, {
      opacity: 0
    }, 'start')
    .staggerFrom($(el).find('.details > *'), 0.25, {
      opacity: 0,
      y: 20
    }, 0.1)
    .set(el, {
      zIndex: 100
    })

  return tl
}

// Handlers
function nextHandler() {
  reset()
  var current = $('ul.products li.active').attr('data-product')
  var item = current + 1
  if (item > pl) {
    item = 1
  }
  rotateDraggable(inc, dragActive);
}

function prevHandler() {
  reset()
  var current = $('ul.products li.active').attr('data-product')
  var item = current - 1
  if (item > 1) {
    item = pl
  }
  rotateDraggable(-inc, dragActive);
}

$('nav .next').on('click', nextHandler);
$('nav .prev').on('click', prevHandler);
            
          
!
999px
Loading ..................

Console