I am having an odd issue with certain images not displaying in Firefox, but displaying in every other browser.
You can see the differences between Chrome and Firefox here
I am using an unordered list to display a row of images that are list items. However, at the beginning of each row, I am placing a normal image in the list that is not tagged as a list item. This works perfectly in Chrome, Edge, IE and Safari but, for some reason, only a few of those images won't display in Firefox. What is confusing is that there is nothing fundamentally different about rows one and two when compared to rows three and four - that I see anyway.
It is also squishing the images in row three and four and I'm not having that issue in other browsers.
The only differences I can see are image URLs. I tried removing the disable divider to see if that made a difference and it did not.
I have created a JS Fiddle to replicate the issue.
What is included below is a greatly reduced version of what you will find using the link.
hr {
opacity: .5;
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 80px;
margin-right: 100px;
border-style: inset;
background: #00adbd;
border-top: 0.5px dotted #fff;
}
.disabledbutton {
pointer-events: none;
opacity: 0.4;
}
#outeroutside {
background-image: url("/assets/tile.jpg");
background-color: #a00f14;
width: 1300px;
max-width: 100%;
padding: 10px 10px 10px 10px;
position: relative;
}
#outside {
text-align: center;
background-color: rgba(252, 251, 245, 0.95);
width: 1200px;
max-width: 100%;
padding: 0px 10px 0px 0px;
}
#welcomemain p {
width: 95%;
display: inline-block;
text-align: center;
margin: 15px 5px;
height: auto;
}
#welcomemain img {
padding: 10px;
max-width: 100%;
}
h2 {
color: #2e1f11;
}
#outeroutside a:link {
color: #996515;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
#outeroutside a:hover {
color: #FFD700;
opacity: 0.9;
}
#outeroutside a:visited {
text-decoration: underline;
color: #996515;
}
#outeroutside a:active {
opacity: 0.5;
}
.row2 a {
color: #C0C0C0 !important;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
.row2 a:visited {
text-decoration: underline;
color: #999999;
}
.row2 a:active {
opacity: 0.5;
}
#navigation img {
padding: 10px;
max-width: 30%;
}
.youtube {
position: relative;
padding-bottom: 60%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.youtube iframe {
padding: 10px 10px 10px 30px;
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
b {
color: #312112;
}
i {
color: #b05830;
}
.font {
font-size: 15px;
}
.ih-item.circle.effect1 .spinner {
width: 270px;
height: 270px;
border: 10px groove #fdec6d;
border-right-color: #739968;
border-bottom-color: #739968;
border-radius: 50%;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .img {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: auto;
height: auto;
}
.ih-item.circle.effect1 .img:before {
display: none;
}
.ih-item.circle.effect1.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6);
}
.ih-item.circle.effect1 .info {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: #333333;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect1 .info p {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect1 a:hover .spinner {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.ih-item.circle.effect1 a:hover .info {
opacity: 1;
}
.ih-item {
position: relative;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item,
.ih-item * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ih-item a {
color: #333;
}
.ih-item a:hover {
text-decoration: none;
}
.ih-item img {
width: 100%;
height: 100%;
}
.ih-item.circle {
position: relative;
width: 270px;
height: 270px;
border-radius: 50%;
}
.ih-item.circle .img {
position: relative;
width: 260px;
height: 260px;
border-radius: 50%;
}
.ih-item.circle .img:before {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle .img img {
border-radius: 50%;
}
.ih-item.circle .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
border-radius: 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ih-item.circle.effect1 .spinner {
width: 270px;
height: 270px;
border: 10px solid #ecab18;
border-right-color: #1ad280;
border-bottom-color: #1ad280;
border-radius: 50%;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .img {
position: absolute;
top: 0px;
bottom: 0;
left: 0px;
right: 0;
width: auto;
height: auto;
}
.ih-item.circle.effect1 .img:before {
display: none;
}
.ih-item.circle.effect1.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6)
}
.ih-item.circle.effect1 .info {
top: 0px;
bottom: 0;
left: 0px;
right: 0;
background: #333;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 20px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect1 .info p {
color: #bbb;
padding: 11px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect1 a:hover .spinner {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.ih-item.circle.effect1 a:hover .info {
opacity: 1;
}
.row {
margin: 5px 0px 10px 5px;
padding: 10px 3px 30px 3px;
width: 1115px;
max-width: 100%;
display: flex;
flex-wrap: nonwrap;
align-content: center;
overflow-y: hidden;
overflow-x: auto;
background-color: rgba(238, 155, 195, 0.95);
}
.row2 {
margin: 5px 0px 5px 5px;
padding: 10px 3px 15px 3px;
width: 1115px;
max-width: 100%;
display: flex;
flex-wrap: nonwrap;
align-content: center;
overflow-y: hidden;
overflow-x: auto;
background-color: rgba(238, 46, 54, 0.95);
}
.col-sm-6 li {
padding: 10px 20px 10px 20px;
max-width: 33.3%;
}
a.effect-shine:hover {
-webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%);
-webkit-mask-size: 200%;
animation: shine 2s infinite;
}
@-webkit-keyframes shine {
from {
-webkit-mask-position: 150%;
}
to {
-webkit-mask-position: -50%;
}
<ul id="week1">
<ul class="row">
<img src="http://springfieldleather.com/assets/Scroll_Week1.1.png">
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_Gator_Buckles.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>$5 Gator Buckle Sets</h3>
<p>Get a selection of 6-piece gator buckle sets for just $5. These opulent adornments are jewel encrusted and waiting to make your belt fancy!</p>
</div>
</div>
</a>
<P> <a href="/5-gator-buckle-sets" class="effect-shine">Click here to see all styles! </a></p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_Liz_CraftPack.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Liz's Craft Pack</h3>
<p>Explore the possibilities of leather craft with Liz's craft pack. Bursting at the seams with leather components, this not-so-little pack is only $25!</p>
</div>
</div>
</a>
<P> <a href="/Lizs-Craft-Pack" class="effect-shine">Get Liz's Craft Pack Here!</a></p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_Stamping_Tools.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>25% Off Stamping Tools</h3>
<p>Transform your veg tan with stamping tools! For this month only, get select stamping tools at an even lower price! Nearly 100 tools are included!</p>
</div>
</div>
</a>
<P> <a href="/tools/Tools-Specials-Closeouts-Deals/SALE-Stamping-Tools" class="effect-shine">Click here to view the selection!</a></p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_BeltBend_Black.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Black Belt Bends</h3>
<p>These Hermann Oak drum dyed belt bends are magnificent and they're on sale! Get them in black or brown. </p>
</div>
</div>
</a>
<P> <a href="/Hermann-Oak-Belt-Bend-Black" class="effect-shine">Get Black Hermann Oak Belt Bend Here!</a></p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_BeltBend_Brown.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Brown Belt Bends</h3>
<p>These Hermann Oak drum dyed belt bends are magnificent and they're on sale! Get them in black or brown.</p>
</div>
</div>
</a>
<P> <a href="/Hermann-Oak-Belt-Bend-Brown" class="effect-shine">Get Brown Hermann Oak Belt Bend Here!</a></p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_VegTan_Split_Bundle.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Veg Tan Split Bundle</h3>
<p>Our new splitter has left us swimming in veg tan splits! Get this sweet bundle for just $15!</p>
</div>
</div>
</a>
<P> <a href="target.html" class="effect-shine">Get Your Veg Tan Split Bundle Here!</a></p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_Jr_LegalPad_Templete.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Legal Pad Poly Template</h3>
<p>We have finally done it! Poly templates for one of our favorite projects: leather covers! Cover your legal pad in luxury with this template for only $5.</p>
</div>
</div>
</a>
<P> <a href="/Polymer-Templates-Junior-Legal-Pad-Cover" class="effect-shine">Get Your Legal Pad Template Here!</a></p>
</li>
</ul>
</ul>
<hr>
You really need to fix your markup. As pointed out in my comment, you have invalid HTML. Regardless, to correct the display issue in FF, here is a possible solution:
Flexbox is shrinking your img. You can configure it not to. I've added flex-shrink: 0
to .row img
hr {
opacity: .5;
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 80px;
margin-right: 100px;
border-style: inset;
background: #00adbd;
border-top: 0.5px dotted #fff;
}
.disabledbutton {
pointer-events: none;
opacity: 0.4;
}
#outeroutside {
background-image: url("/assets/tile.jpg");
background-color: #a00f14;
width: 1300px;
max-width: 100%;
padding: 10px 10px 10px 10px;
position: relative;
}
#outside {
text-align: center;
background-color: rgba(252, 251, 245, 0.95);
width: 1200px;
max-width: 100%;
padding: 0px 10px 0px 0px;
}
#welcomemain p {
width: 95%;
display: inline-block;
text-align: center;
margin: 15px 5px;
height: auto;
}
#welcomemain img {
padding: 10px;
max-width: 100%;
}
h2 {
color: #2e1f11;
}
#outeroutside a:link {
color: #996515;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
#outeroutside a:hover {
color: #FFD700;
opacity: 0.9;
}
#outeroutside a:visited {
text-decoration: underline;
color: #996515;
}
#outeroutside a:active {
opacity: 0.5;
}
.row2 a {
color: #C0C0C0 !important;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
.row2 a:visited {
text-decoration: underline;
color: #999999;
}
.row2 a:active {
opacity: 0.5;
}
#navigation img {
padding: 10px;
max-width: 30%;
}
.youtube {
position: relative;
padding-bottom: 60%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.youtube iframe {
padding: 10px 10px 10px 30px;
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
b {
color: #312112;
}
i {
color: #b05830;
}
.font {
font-size: 15px;
}
.ih-item.circle.effect1 .spinner {
width: 270px;
height: 270px;
border: 10px groove #fdec6d;
border-right-color: #739968;
border-bottom-color: #739968;
border-radius: 50%;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .img {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: auto;
height: auto;
}
.ih-item.circle.effect1 .img:before {
display: none;
}
.ih-item.circle.effect1.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6);
}
.ih-item.circle.effect1 .info {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: #333333;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect1 .info p {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect1 a:hover .spinner {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.ih-item.circle.effect1 a:hover .info {
opacity: 1;
}
.ih-item {
position: relative;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item,
.ih-item * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ih-item a {
color: #333;
}
.ih-item a:hover {
text-decoration: none;
}
.ih-item img {
width: 100%;
height: 100%;
}
.ih-item.circle {
position: relative;
width: 270px;
height: 270px;
border-radius: 50%;
}
.ih-item.circle .img {
position: relative;
width: 260px;
height: 260px;
border-radius: 50%;
}
.ih-item.circle .img:before {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle .img img {
border-radius: 50%;
}
.ih-item.circle .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
border-radius: 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ih-item.circle.effect1 .spinner {
width: 270px;
height: 270px;
border: 10px solid #ecab18;
border-right-color: #1ad280;
border-bottom-color: #1ad280;
border-radius: 50%;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .img {
position: absolute;
top: 0px;
bottom: 0;
left: 0px;
right: 0;
width: auto;
height: auto;
}
.ih-item.circle.effect1 .img:before {
display: none;
}
.ih-item.circle.effect1.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6)
}
.ih-item.circle.effect1 .info {
top: 0px;
bottom: 0;
left: 0px;
right: 0;
background: #333;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 20px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect1 .info p {
color: #bbb;
padding: 11px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect1 a:hover .spinner {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.ih-item.circle.effect1 a:hover .info {
opacity: 1;
}
.row {
margin: 5px 0px 10px 5px;
padding: 10px 3px 30px 3px;
width: 1115px;
max-width: 100%;
display: flex;
flex-wrap: nonwrap;
align-content: center;
overflow-y: hidden;
overflow-x: auto;
background-color: rgba(238, 155, 195, 0.95);
}
.row img {
flex-shrink: 0;
}
.row2 {
margin: 5px 0px 5px 5px;
padding: 10px 3px 15px 3px;
width: 1115px;
max-width: 100%;
display: flex;
flex-wrap: nonwrap;
align-content: center;
overflow-y: hidden;
overflow-x: auto;
background-color: rgba(238, 46, 54, 0.95);
}
.col-sm-6 li {
padding: 10px 20px 10px 20px;
max-width: 33.3%;
}
a.effect-shine:hover {
-webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%);
-webkit-mask-size: 200%;
animation: shine 2s infinite;
}
@-webkit-keyframes shine {
from {
-webkit-mask-position: 150%;
}
to {
-webkit-mask-position: -50%;
}
<ul id="week1">
<ul class="row">
<img src="http://springfieldleather.com/assets/Scroll_Week1.1.png">
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_Gator_Buckles.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>$5 Gator Buckle Sets</h3>
<p>Get a selection of 6-piece gator buckle sets for just $5. These opulent adornments are jewel encrusted and waiting to make your belt fancy!</p>
</div>
</div>
</a>
<P> <a href="/5-gator-buckle-sets" class="effect-shine">Click here to see all styles! </a></p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_Liz_CraftPack.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Liz's Craft Pack</h3>
<p>Explore the possibilities of leather craft with Liz's craft pack. Bursting at the seams with leather components, this not-so-little pack is only $25!</p>
</div>
</div>
</a>
<P> <a href="/Lizs-Craft-Pack" class="effect-shine">Get Liz's Craft Pack Here!</a></p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_Stamping_Tools.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>25% Off Stamping Tools</h3>
<p>Transform your veg tan with stamping tools! For this month only, get select stamping tools at an even lower price! Nearly 100 tools are included!</p>
</div>
</div>
</a>
<P> <a href="/tools/Tools-Specials-Closeouts-Deals/SALE-Stamping-Tools" class="effect-shine">Click here to view the selection!</a></p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_BeltBend_Black.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Black Belt Bends</h3>
<p>These Hermann Oak drum dyed belt bends are magnificent and they're on sale! Get them in black or brown. </p>
</div>
</div>
</a>
<P> <a href="/Hermann-Oak-Belt-Bend-Black" class="effect-shine">Get Black Hermann Oak Belt Bend Here!</a></p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_BeltBend_Brown.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Brown Belt Bends</h3>
<p>These Hermann Oak drum dyed belt bends are magnificent and they're on sale! Get them in black or brown.</p>
</div>
</div>
</a>
<P> <a href="/Hermann-Oak-Belt-Bend-Brown" class="effect-shine">Get Brown Hermann Oak Belt Bend Here!</a></p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_VegTan_Split_Bundle.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Veg Tan Split Bundle</h3>
<p>Our new splitter has left us swimming in veg tan splits! Get this sweet bundle for just $15!</p>
</div>
</div>
</a>
<P> <a href="target.html" class="effect-shine">Get Your Veg Tan Split Bundle Here!</a></p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_Jr_LegalPad_Templete.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Legal Pad Poly Template</h3>
<p>We have finally done it! Poly templates for one of our favorite projects: leather covers! Cover your legal pad in luxury with this template for only $5.</p>
</div>
</div>
</a>
<P> <a href="/Polymer-Templates-Junior-Legal-Pad-Cover" class="effect-shine">Get Your Legal Pad Template Here!</a></p>
</li>
</ul>
</ul>
<hr>