styles for Athletic promo banners
.utilitarian-home .promo-box-row {
clear: both;
overflow: hidden;
}
.utilitarian-home .promo-box-row ul {
margin: 0;
list-style: none;
}
.utilitarian-home .promo-box-row ul li {
display: block;
float: left;
margin-right: 1.4%;
width: 32.4%;
}
.utilitarian-home .promo-box-row ul li:last-child {
margin-right: 0;
}
.promo-banner {
display: block;
overflow: hidden;
background: #EFF0F2;
margin: 10px 0;
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
}
.promo-banner ul {
margin: 0;
}
.promo-banner li {
list-style: none;
display: block;
float: left;
padding: 8px 0 6px;
width: 33.3333%;
font-size: 18px;
position: relative;
text-align: center;
color: #002e59;
}
.promo-banner li i {
padding-right: 5px;
}
.promo-banner li em[class^="icon-"], .promo-banner li em[class*=" icon-"] {
display: inline-block;
font-size: 48px;
position: relative;
top: -2px;
}
.promo-banner li em.icon-tablet {
top: 0;
}
.promo-banner li em.icon-wrench {
font-size: 42px;
line-height: 49px;
top: -6px;
}
.promo-banner li span {
font-size: 16px;
color: #818284;
margin-top: 3px;
display: block;
line-height: 20px;
text-align: left;
}
.promo-banner li > span {
display: inline-block;
}
.promo-banner li strong {
font-weight: 500;
font-size: 20px;
color: #c41c22;
line-height: 20px;
}
.promo-banner li:after {
content: "";
background: #fff;
width: 6px;
height: 300px;
position: absolute;
right: -8px;
top: -128px;
display: inline-block;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.promo-banner li:last-child:after {
display: none;
}
@media only screen and (max-width: 480px) {
.responsive .utilitarian-home {
padding: 0 15px;
}
.responsive .utilitarian-home .promo-box-row ul li {
float: none;
margin: 0;
width: 100%;
text-align: center;
}
.responsive .promo-banner li:nth-child(2) {
display: none;
}
.responsive .promo-banner li:first-child {
display: inline-block;
width: 100%;
}
.responsive .promo-banner li:first-child:after {
display: none;
}
}