.wrapper {
  max-width: 100%;
  margin: 0 0px;
}
.wrapper {
  margin: 0 7%;
  grid-gap: 1px;
  grid-template-columns: [first] 37.5% [line2] 25% 28% 17%;
  grid-template-rows: [row1-start] minmax(300px, auto) auto auto auto auto;
  grid-auto-flow:row;
}
.GroupStuff {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
#stuff3 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  margin: 0 auto;
}
#stuff {
  grid-column: 2 / 5;
  grid-row: 2 / 3;
  overflow:auto;
  
}
#stuff2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2 ;
  margin:2.5% auto;
  
}
#MaffickAdditionalInfo {
grid-column: 4/5;
  grid-row: 1/2;
  justify-self:start;
  margin-top:12.5%;
  line-height: 1.7em;
}
#HighlightedInfo {
  grid-column: 4/5;
  grid-row: 1/2;
  justify-self:end;
  margin-top:12.5%;
  line-height: 1.7em;
  align-self:center;
}
#HighlightedInfo highlight {
  color:rgb(177, 82, 103);
  font-size: calc(12px + (24 - 16)*(50vw - 600px)/(800 - 400));
}
#MaffickAdditionalInfo additional {
  color:rgb(177, 82, 103);
  font-size: calc(12px + (24 - 16)*(50vw - 600px)/(800 - 400));
}
#stuff2::before {
content:"Design Number: "
}
#stuff::before {
content:"Ink Color: "
}
#stuff4::before {
content:"Ink Color: "
}
#stuff3::before {
content:"Product Color: "
}
.nextli {
  position:absolute;
  left:95%;
  top:50%;
  font:34px/24px '';
  background: blue;
  width:50px;
  height:50px;
}
.prevli {
  position:absolute;
  left:1%;
  top:50%;
  font:34px/24px '';
}
.theimage {
  grid-column:1 / 2;
}
.boxdesc {
  grid-column: 3/4;
  grid-row: 1/2;
  overflow:scroll;
  margin:2.5% 1.5%;
}
.largeImage {
  max-height:100%;
}

.wrapper > * {
  
  color: #000;
  

}


ul.variation-list {
  z-index: 1000002 !important;
  list-style-type: none;
    margin: 0;
    padding: 0px;
    display: -webkit-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -o-flex;
  display: flex;
  -webkit-flex-flow:row wrap;
  -moz-flex-flow:row wrap;
  flex-flow:row-wrap;
  flex-wrap:wrap;
  flex-direction:row;
}
ul.variation-list li {
    float:left;/* Have them laid out horizontally */
    margin:5px !important;
    width: 40px !important;
    height: 40px !important;
     /* This is so our hover effect does not shift the box */
    cursor: pointer; /* Let our users know they can click this! */
  opacity:0.9;
}
ul.sp-list {
  z-index: 1000002 !important;
  list-style-type: none;
    margin: 0;
    padding: 0;
    display: -webkit-box;
  display: -webkit-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -o-flex;
  display: flex;
  -webkit-flex-flow:row wrap;
  -moz-flex-flow:row wrap;
  flex-flow:row-wrap;
  flex-wrap:wrap;
  flex-direction:row;
}
ul.sp-list li {
display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -o-flex;
  display:flex;
   /* float:left;/* Have them laid out horizontally */
     /* Have a slight margin on the right */
    width: 100px !important;
    height: 100px !important;
    border: 1px solid transparent;
    cursor: pointer; /* Let our users know they can click this! */
  
}
ul.sp-list li img {
  margin: 0 !important;
    width: 100px !important;
    height: 100px !important;
    cursor: pointer; /* Let our users know they can click this! */
  
}
ul.swatch-list, ul.ceramic-list {
  z-index: 1000002 !important;
    list-style-type: none;
    margin: 0;
    padding: 0px;
}
ul.swatch-list li, ul.ceramic-list li {
    display: block;
    float: left; /* Have them laid out horizontally */
    margin: 5px !important; /* Have a slight margin on the right */
    width: 40px !important;
    height: 40px !important;
    border: 3px solid transparent; /* This is so our hover effect does not shift the box */
    cursor: pointer; /* Let our users know they can click this! */
  opacity:0.9;
}
ul.swatch-list li.active, ul.ceramic-list li.active {
    border: 3px solid #000;
  opacity:1;
}
ul.sp-list li.active {
    border: 1px solid #000;
  opacity:1;
}
ul.variation-list li.active {
     border: 3px solid #000;
  opacity:1;
}
.boxpar {

padding-top:1%;
}
.high {

color: #003f75 !important;
}
h1 { 
text-shadow: 3px 3px 3px #cccccc;
color: #9D2024 !important;
font-size:55px !important;
}
h1, h2, h3, h4, h5, h6 {
  text-align: center;
  margin: 15px 0px !important;
}
a {
  text-decoration: none;
}
.topimage {
  width: 100%;
}
.foot {
  padding: 18px 0px; 
  font-size:32px; 
  color:#fff !important;
}
.clickdesc {
  text-align: center;
  margin: 40px 0 0px 0 !important;
}
ul {
  list-style: none;
}
.product-flex-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -o-flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow:row wrap;
  flex-wrap:wrap;
  flex-direction:row;
  flex-flow:row-wrap;
  -webkit-justify-content:center;
  -moz-justify-content:center;
  -webkit-align-items:center;
  display: flex;
  justify-content:center;
  align-items:center;
}
.products ul li p {
  display: none;
}
.products ul.list li p {
  display: block;
}
.products .list li {
  width: 500px;
  height: 250px;
}
.products .list li .titlePro {
  position: relative;
  height: 225px;
  overflow-y: hidden !important;
   webkit-column-width: 225px;
    column-width: 225px;
}
.products li .titlePro p {
  font: 14px/18px'';
  margin-top: 7%;
}
.products li .titlePro item {
  color:#000;
  opacity:.6;
  font:11px/18px '';
  margin-left:10px;
}
.products li .titlePro min {
  display:none;
}
.products .list li .titlePro item {
font:12px/18px '';
  margin-left:0px;
}
.boxdesc min {
  display:block;
  margin: 1% 0;
}
.products .list li .titlePro min {
display:block;
  font:14px/22px '';
  margin:2% 0 0 0;
}
.boxdesc item {
  margin-left:5%;
  display:inline-block;
  
}
.products .list li .titlePro item::before, .boxdesc item::before {
  content: "ITEM ";
  
}
.products .list li .wrapimg {
  height: 250px;
  float: left;
  margin: 0 10px 0 0;
  width: 235px;
  position: relative;
}
.products ul li, .foots ul li {
  width: 230px;
  height: 244px;
  position: relative;
  outline: 1px solid #d9d9d9;
  margin: 0px 1px 1px 0px;
  overflow: hidden !important;
  
}
.footerTitle {
  text-align:center;
  font: 24px/22px '';
  text-shadow: 0px 0px 1px #cccccc;
color: #9D2024 !important;
}
.products ul li .wrapimg img, .foots ul li .footerImage img  {
  position: absolute;
  margin: auto !important;
  overflow-x: hidden !important;
  
  top: 0%;
  left: 0%;
  right: 0%;
  bottom: 15%;
  max-width: 85%;
  max-height: 75%;
}
.footerImage img {
  bottom:0% !important;
  top:10% !important;
}
.products ul li:hover .addPro, .products ul li:hover .addPro a {
  opacity: 1;
 
}
.products ul li:hover .addPro a {
transform:scale(1.5);
transition: transform .7s ease;
}
.addPro, .addPro a {
  cursor: zoom-in;
  position: absolute;
  opacity: 0;
  }
.addPro {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
}
.addPro a {
transform: scale(0);
  top: 40%;
  left: 25%;
  width: 50%;
  height: 15%;
  text-align: center;
  font: 14px/36px sans-serif;
  color: #fff !important;
background: rgba(4, 180, 49, 0.80);
  border: 1px solid #ccc;
border-radius: 20px;
text-shadow: 1px 1px 3px #000
}
.titlePro {
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 5px;
  box-sizing: border-box;
  overflow-x: hidden !important; 
}
.titlePro a {
  color: #003f75 !important;
  cursor: default;
  display: block;
  font: 14px/14px'OpenSans-Bold', sans-serif;
}
.titlePro span {
  color: #a20000;
  font: 14px/18px'OpenSans-Bold', sans-serif;
}
.view {
  text-align: center;
}
.view p {
  top: 15px;
  margin: 0px 15px 0 0;
  text-transform: uppercase;
}
.view p, .view a {
  display: inline-block;
  position: relative;
}

.icon-grid-non {
  background: url("http://www.classb.com/wordpress/wp-content/uploads/2017/07/Products_Grid_View.png");
}
.icon-grid-full {
  background: url("http://www.classb.com/wordpress/wp-content/uploads/2017/07/Grid_View_Icon.png");
}

.icongridsize {
  height: 32px;
  width: 32px;
  background-size: 100%;
  top: 25px;
  margin: 0 10px 0 0px;
}
.icon-list-full {
  background: url("http://www.classb.com/wordpress/wp-content/uploads/2017/07/Product_Details_View_Icon_Selected.png");
}
.icon-list-non {
  background: url("http://www.classb.com/wordpress/wp-content/uploads/2017/07/list-32.png");
}
.iconlistsize {
  background-size: 100%;
  height: 38px;
  width: 38px;
  top: 28px;
}

.backDrop {
  opacity: .0;
  filter: alpha(opacity=0);
  background-color: #000;
  display: none;
  left: 0px;
  position: fixed;
  top: 0px;
  height: 100%;
  width: 100%;
  z-index: 1000001 !important;
}

.box {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: none;
  left: 2.5%;
  right: 2.5%;
  bottom: .5%;
  top: 7.5%;
  opacity: 0;
  position: fixed;
  z-index: 1000002 !important;
  background: #fff;
  border-radius: 10px;
}

.close-box {
    transition: all 0.5s ease;
    position: absolute;
    background-color: #4b4e5d;
    padding: 4px 12px 12px 12px;
    right: 0;
  top: -0.5%;
  display:block;
  font-size:32px;
    margin-right:-10px ;
    margin-top: ;
    border-radius: 50%;
    border: 2px solid #fff;
    color: white;
    -webkit-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
    box-shadow: -3px 1px 6px 0px rgba(0,0,0,0.1);
  z-index: 999999999999;
}

.close-box:hover {
    background-color: #ad3f49;
    color: #fff;
  cursor:pointer;
}
.largeImage {
  max-width:100%; 
}

.table-div {
  display: table;
  width: 100%;
}
.row-div {
  display: table-cell;
  padding: 20px;
  box-sizing: border-box;
  vertical-align: top;
}
.half-div {
  display: table-cell;
  width: 50%;
}

.swatch {
  opacity: .7 !important;
  width:50px;
}
.swatches, .swatches img {
  display: none;
  margin: 4px 4px !important;
}
.boarder {
  opacity: 1 !important;
  outline: 2px solid grey;
}
ul li .colour {
  display: none;
}
.boxdesc .colour {
  margin: 0 0 0 1.2% !important;
}
.boxdesc .titlePro a, .boxdesc .titlePro span, .boxdesc .titlepro item, .boxdesc nocharge, .boxdesc min, .boxdesc .boxpar, item {
  font-size: calc(16px + (24 - 16)*(50vw - 600px)/(800 - 400));
  line-height:125%;

}
.banner_product {
  width: 100%;
  height: 7%;
  background: #a8afba;
  font: 1.4vw sans-serif;
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -o-flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow:row wrap;
  flex-wrap:wrap;
  flex-direction:row;
  flex-flow:row-wrap;
  -webkit-justify-content:center;
  -moz-justify-content:center;
  -webkit-align-items:center;
  display: flex;
  justify-content:center;
  align-items:center;
}
.banner_product a {
  margin: 0 1%;
}
.banner_product span {
  font: 45px 'myriad-pro',sans-serif;
  color: #bd3430;
  margin: 0% 0% 0 0%;
  font-style:normal;
    font-weight:700;
}
.banner_product strong {
  color: #2c2f43;
}
.nocharge::before {
content: "No additional charges and free shipping included";
}
.nocharge {

color: #003f75 !important;
margin-bottom:2% ; 
}
.products .list .nocharge {
display:none;
}
.mobileheading {
display:none;
}

@media screen and (max-width:1450px) {
ul.sp-list li img, ul.sp-list li {
    width:80px !important;
    height:80px !important;
}
}
@media screen and (max-width:900px) {
  .wrapper {
  
}
 #HighlightedInfo highlight {
  font-size: calc(14px + (24 - 16)*(50vw - 600px)/(800 - 400));
} 
  #MaffickAdditionalInfo additional {
  font-size: calc(14px + (24 - 16)*(50vw - 600px)/(800 - 400));
} 
  ul.sp-list li img, ul.sp-list li {
    width:50px !important;
    height:50px !important;
}
  ul.swatch-list li, ul.ceramic-list li, ul.lanyard-list li {
    width: 25px !important;
    height: 25px !important;
}
  ul.variation-list li {
    width: 25px !important;
    height: 25px !important;
}
}
@media screen and (max-width: 500px) {
 .topimage {
    width: 250px !important;
    height: 250px;
    margin: 0 auto !important;
    display: block;
  }
.mobileheading {
display:block;
text-align:center;

}
  .wrapper {
  margin: 0 7%;
  grid-gap: 1px;
  grid-template-columns: [first] 32vh [line2] 33%;
  grid-template-rows: [row1-start] auto auto auto auto;
  grid-auto-flow:row;
}
.GroupStuff {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}
#stuff3 {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  margin: 0 auto;
  font-size:8px !important;
}
#stuff {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  overflow:auto;
  font-size:8px !important;
  
}
#stuff2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2 ;
  margin:2.5% auto;
  font-size:8px !important;
  
}
.theimage {
  grid-column:1 / 2;
}
.boxdesc {
  grid-column: 1/2;
  grid-row: 4/5;
  overflow:scroll;
  margin:2.5% 1.5%;
}  
  #MaffickAdditionalInfo {
grid-column: 2/3;
  grid-row: 4/5;
  justify-self:start;
  margin-top:12.5%;
  line-height: .7em;
  align-self:start;
}
#HighlightedInfo {
  grid-column: 2/3;
  grid-row: 4/5;
  justify-self:start;
  margin-top:12.5%;
  line-height: .7em;
  align-self:center;
}
#HighlightedInfo highlight {
 
  font-size: calc(16px + (24 - 16)*(50vw - 600px)/(800 - 400));
} 
  #MaffickAdditionalInfo additional {
  font-size: calc(16px + (24 - 16)*(50vw - 600px)/(800 - 400));
} 
.boxdesc .titlePro a, .boxdesc .titlePro span, .boxdesc .titlepro item, .boxdesc nocharge, .boxdesc min, .boxdesc .boxpar, item {
font-size: calc(18px + (24 - 16)*(50vw - 600px)/(800 - 400));
line-height: 150%;
}   
.products .list non {
display:none;
}
.boxdesc .nocharge {
display:block;
}
  h1 {
    font: 38px/38px 'myriad-pro',sans-serif !important;
    font-style:normal;
    font-weight:700;
  }
  h2 {
    font: 26px/24px 'myriad-pro',sans-serif !important;
    font-style:normal;
    font-weight:700;
  }
  .wrapimg img {
    max-height: 48%;
  }
  .footerTitle {
  font: 18px/18px '';
  
}
  .banner_product jm {
    display: none;
  }
  .banner_product strong {
    font-size: 14px !important;
  }
  .banner_product {
    margin-bottom: 0%;
    justify-content:unset;
    display:block;
    text-align:center;
  }
  .addPro {
    display: none;
  }
  .products .list li .titlePro a {
    font-size: 14px;
  }
  .products .list li .titlePro p {
    font: 14px/14px '';
    float:left;
  }
  .products .list li .wrapimg {
    width: 45%;
  }
  .row-div {
    padding: 0px;
    display: block;
  }
  .half-div {
    display: block;
    width: auto;
  }
  .boxdesc item {
  margin-left:0;
}
  .banner_product span, .banner_product a, .banner_product item {
    font: 2.8vw/2.8vw'';
    margin: 0% 0% 0 3%;
    line-height:1.4em;
  }
  .banner_product a, .banner_product item {
  color: #003f75
  }
  .largeImage {
    margin: 0 auto !important;
    display: block !important;  
	min-height:34vh;
  }
  .products ul li, .foots ul li {
    width: 170px;
    height: 200px;
  }
   .icon-list-full, .icon-grid-non {
    padding: 3px;
  }
.colour {
font-size:16px;
}
  .products li .titlePro item {
  font:14px/20px '';
}
.products .list li .titlePro item {
font:12px/22px '';
  float:right;
  display:block;  
}
  .products li .titlePro item {
 display:none;
}
  .products .list li .titlePro min {
  font:14px/13px '';
 display:inline-block;
}
@media screen and (max-width: 390px) {
  .wrapper {
  margin: 0 7%;
  grid-gap: 1px;
  grid-template-columns: [first] 32vh [line2] 35%;
  grid-template-rows: [row1-start] auto auto auto auto;
  grid-auto-flow:row;
}
.mobileheading {
display:block;
}
  .products ul li, .foots ul li {
    width: 155px;
    height: 195px;
  }
  .titlePro a {
    font: 10px/14px'', sans-serif;
  }
  .products .list li .titlePro min {
  font:12px/12px '';
}
}
@media screen and (max-width: 340px) {
  .wrapper {
  margin: 0 7%;
  grid-gap: 1px;
  grid-template-columns: [first] 32vh [line2] 42%;
  grid-template-rows: [row1-start] auto auto auto auto;
  grid-auto-flow:row;
}
  ul.sp-list li img, ul.sp-list li {
    width:40px !important;
    height:40px !important;
  }
  .products ul li, .foots ul li {
    width: 125px;
    height: 190px;
  }
  .clickdesc {
    font-size: 14px;
  }
  h1 {
    font: 34px/34px 'myriad-pro',sans-serif !important;
    font-style:normal;
    font-weight:700;
  }
  h2 {
    font: 24px/24px 'myriad-pro',sans-serif !important;
    font-style:normal;
    font-weight:700;
  }
  .banner_product strong {
    font-size: 11px !important;
  }
  .titlePro span {
  color: #a20000;
  font: 12px/12px'OpenSans-Bold', sans-serif;
}
    .products .list li .titlePro min {
  font:10px/12px '';
}
}