 <style> @import url('https://fonts.googleapis.com/css2?family=Days+One&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap'); ul { padding: 0px; } ul { padding: 0px; } #banner {      top: 0;      left: 0;      width: 100%;  } #banner-content {      width: 100%;      margin: 0 auto;      padding: 10px;      border: 1px solid #000;     font-size: 24px;     color: Yellow;     text-align: center;     background-color: Blue; } #homeLowerHolder {background-color: white;}  .catback a{   font-size: 14px;   color: blue; } .cattop {   height: 220px;   display: block;   border: 1px solid grey;   box-shadow: 5px 5px 5px grey;   padding: 10px;   overflow: hidden;   text-overflow: ellipsis; } .cattop img{   float: right; } .cattop p {   font-size: 14px;   color: blue;     display: -webkit-box;     overflow: hidden;     -webkit-line-clamp: 8;     -webkit-box-orient: vertical; } .cattop a {   font-size: 24px;   text-decoration: none;   color: blue; } .cattop:hover {    box-shadow: 3px 3px 3px black; } .catwrapper {   display: grid;   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));   gap: 10px;   grid-auto-flow: dense;   list-style-type: none;   margin-top: 20px; } .catwrapper li.landscape {   grid-column-end: span 2; } .catwrapper img {   display: block;   margin-left: auto;   margin-right: auto;     height: 200px; } .catwrapper li {   font-size: 24px;   border: 1px solid grey;   text-align: center;   box-shadow: 5px 5px 5px grey;   margin-top: 20px;     background-color: white; } .catwrapper a {   color: blue;         text-decoration: none; } .catwrapper li:hover {    box-shadow: 3px 3px 3px black; }  .mobilemenu {   display: grid;   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));   gap: 10px;   grid-auto-flow: dense;   list-style-type: none;   margin-top: 20px; } .mobilemenu li.landscape {   grid-column-end: span 2; } .mobilemenu img {   display: block;   margin-left: auto;   margin-right: auto;     height: 200px; } .mobilemenu li {   font-size: 24px;   border: 1px solid grey;   text-align: center;   box-shadow: 5px 5px 5px grey;   margin-top: 20px;     background-color: white; } .mobilemenu a {   color: blue;         text-decoration: none; } .mobilemenu li:hover {    box-shadow: 3px 3px 3px black; }  .logoimg {    position: absolute;    z-index: 20; } .logoimg img{     width: 60px;     height: 60px; } .prodtop {   min-height: 220px;   height: auto;   display: block;   border: 1px solid grey;   padding: 10px;   overflow: hidden;   text-overflow: ellipsis; } .prodtop img{   float: right; } .prodtop p {   font-size: 14px;   color: blue; } .prodimg {    position: relative;    z-index: 10; } .proddesc {   padding: 5px;     height: 50px; text-align: left; vertical-align: top; } .prodprice {   font-size: 26px;   padding: 5px;     height: 50px; text-align: right; vertical-align: top; } .produnit {   font-size: 12px; } .prodstk {   font-size: 12px;   padding: 5px;     height: 60px; text-align: center; vertical-align: top; } #navigationHolder {    background-color: blue; } .navbarmm {     overflow: hidden;  //   background: blue;     background-color: blue;     font-family: Arial; }     .navbarmm .a {         float: left;         font-size: 16px;         text-align: center;         padding: 6px;         text-decoration: none;         background-color: white;     } .h3mm {         font-size: 16px;         text-align: center;         display: block;         text-overflow: ellipsis;         word-wrap: break-word;         overflow: hidden;         max-height: 2.8em;         line-height: 1.2em;         display: -webkit-box;         -webkit-line-clamp: 2; /* number of lines to show */         -webkit-box-orient: vertical;         text-decoration: none;         background-color: darkblue;         height: 60px;          border-bottom: 1px solid white; } .dropdownmm {   /* padding-left: 16px;    padding-top: 10px; */    float: left;    overflow: hidden;    background-color: blue; } .dropdownmm button {     background-color: rgba(0,0,0,0); } /* Dropdown button */ .dropdownmm{     width: 12.50%;     border: none;     outline: none;   /*  padding: 5px; */     color: white;     margin: 0; /* Important for vertical align on mobile phones */     border-right: 1px solid white;     height: 60px; } .dropbtn {     width: 100%;     text-align: center;     display: flex;     align-items: center;     border: none;     outline: none;     padding: 0px;     color: white;     margin: 0; /* Important for vertical align on mobile phones */     height: 60px; } .navbarmm a:hover, .dropdownmm:hover .dropbtn {    text-decoration: none;  } .dropdownmm-content {     display: none;     padding: 6px;     position: absolute;     width: 100%;     left: 0;     z-index: 21; } .dropdownmm-content .header {     padding-left: 16px; } .dropdownmm:hover .dropdownmm-content {     display: block; } .dropdownmm {     color: white; } .dropdownmm .dropbtn a:hover{     color: White; } .dropdownmm .dropbtn a{  font-family: 'Poppins', sans-serif; } .dropdownmm a{  font-family: 'Poppins', sans-serif;     display: block;     color: white;     padding: 0px;       position: relative;     width: 100%;     text-decoration: none;     left: 0; } .dropdownmm a:hover {     display: block;      padding: 0px;       position: relative;     width: 100%;     text-decoration: none;     left: 0; } /* Create three equal columns that floats next to each other */ .column {     float: left;     width: 10%;      padding: 6px;     background-color: darkblue;     height: auto;    } /* Style links inside the columns */ .column a {     float: none;     color: white;     padding: 6px;     text-decoration: none;     display: block;     text-align: left;     background: darkblue; } /* Add a background color on hover */ .column a:hover {     display: block;     color: white;     padding: 6px;       position: relative;     background-color: royalblue;     width: 100%;     left: 0; } .pyButton {   border-radius: 24px;   border: 1px solid rgba(0,0,0,0);   color: white;   padding: 20px;   padding-right: 0px;   text-align: center;   text-decoration: none;   display: inline-block;   font-size: 20px;   font-weight: bold;   margin: 4px 2px;   width: 225px;   filter: drop-shadow(3px 3px 3px black); } .pyButton:hover{   filter: drop-shadow(1px 1px 1px black); } /* Clear floats after the columns */ .row:after {   content: "";   display: table;   clear: both; }   li.list-group-item.header{     color: white;     background-color: blue; }   .list-group-item {     position: relative;     display: block;     padding: 10px 15px;     margin-bottom: -1px;     background-color: #fff;     border: 1px solid #ddd; } .plPagingHolder {    padding-top: 5px; } #addressSelector {     list-style-type: none;     li {         padding: 10px;         cursor: pointer;     }     li:hover, #addressSelector li:active {         background-color: #eee;     } } .deliveryAddressHolder {     padding: 10px;     border-radius: 6px;     background-color: #fbfbfb;     border: 1px solid #ccc;     margin-bottom: 10px; } .mainProductImage{width: 155px;padding: 5px;} .prodwrapper {   display: grid;   grid-template-columns: repeat(auto-fill, minmax(155px,155px));   gap: 8px;   grid-auto-flow: dense;   list-style-type: none;   margin-top: 0px;   margin-left: 4px; } .prodwrapper img {   display: block;   width: 155px;   height: 155px;   margin-left: auto;   margin-right: auto; } .prodwrapper li.landscape {   grid-column-end: span 2; } .prodwrapper li {   font-size: 12px;   text-align: left;   margin-top: 0px;     background-color: white; } .prodwrapper a {   color: blue;         text-decoration: none; } .prodwrapper li:hover {   // box-shadow: 3px 3px 3px black; } .logoimg {    position: absolute;    z-index: 20; } .logoimg img{     width: 100px;     height: auto; } .prodimg {    position: relative;    z-index: 10; } .prodcode {   min-height: 50PX;   font-size: 14px;   padding: 5px; text-align: left; vertical-align: top; } .proddesc {   display: -webkit-box;   overflow: hidden;   -webkit-line-clamp: 3;   -webkit-box-orient: vertical;   font-size: 18px; height: 80px;   padding: 5px; text-align: left; vertical-align: top; } .ProductMainPrice{ font-size: 24px; font-family:'Source Sans Pro', sans-serif; text-align: center; } .ProductUOS{ font-size:14px; font-family:'Source Sans Pro', sans-serif; text-align: center; } .ProductIncVAT{ font-size:16px; font-family:'Source Sans Pro', sans-serif; text-align: center; } .ButtonPrompt{ font-family: 'Source Sans Pro', sans-serif; font-size: 14px; margin: auto; margin-bottom: 10px; } .ButtonAdd{ height: 30px; color: WHITE; background-color: #00A7FF; padding: 5px 10px; border-bottom-left-radius: 0;border-top-left-radius: 0; font-family:  'Source Sans Pro', sans-serif; font-size: 10px; } .ButtonAdd:hover{color: YELLOW; background: BLUE;} .btnProductSearch{ height: 30px; color: WHITE; background-color: #00A7FF;} .btnProductSearch:hover{color: YELLOW; background: BLUE;} .prodstk {   font-size: 12px;   padding: 5px;     height: 60px; text-align: center; vertical-align: top; } /* The Modal (background) */ .mmodal {   display: none; /* Hidden by default */   position: fixed; /* Stay in place */   z-index: 100; /* Sit on top */   left: 0;   top: 0;   width: 100%; /* Full width */   height: 100%; /* Full height */   overflow: auto; /* Enable scroll if needed */   background-color: rgb(0,0,0); /* Fallback color */   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ }  /* Modal Content/Box */ .mmodal-content {   background-color: #fefefe;   margin: 15% auto; /* 15% from the top and centered */   padding: 20px;   border: 1px solid #888;   width: 30%; /* Could be more or less, depending on screen size */   min-width: 380px; }  /* The Close Button */ .close {   color: black;   float: right;   font-size: 28px;   font-weight: bold;   opacity: 1; }  .close:hover, .close:focus {   color: black;   text-decoration: none;   cursor: pointer; } @media(min-width: 391px) { .prodwrapper {grid-template-columns: repeat(auto-fill, minmax(175px,175px));} .prodwrapper img {   width: 180px;   height: 180px;} .mainProductImage{width: 180px;} } @media(min-width: 768px) { .ButtonPrompt{font-size: 14px;} .prodwrapper {grid-template-columns: repeat(auto-fill, minmax(200px,200px));} .prodwrapper img {   width: 225px;   height: 225px;} .mainProductImage{width: 225px;} .ButtonAdd{  font-size: 12px;} } @media(min-width: 992px) { .prodwrapper {grid-template-columns: repeat(auto-fill, minmax(225px,225px));} .prodwrapper img {   width: 225px;   height: 225px;} .mainProductImage{width: 300px;} } @media(min-width: 1200px) { .prodwrapper {grid-template-columns: repeat(auto-fill, minmax(275px,275px));} .prodwrapper img {   width: 275px;   height: 275px;} .mainProductImage{width: 500px;} } @media(min-width: 2000px) { .prodwrapper {grid-template-columns: repeat(auto-fill, minmax(300px,300px));} .prodwrapper img {   width: 300px;   height: 300px;} .mainProductImage{width: 600px;} } .ProdVariants {font-size: 12px; width: 200px;} .dropdownmm{font-size: 12px;} @media(min-width: 768px) { .ProdVariants {font-size: 14px; width: 250px;} .dropdownmm{font-size: 14px; height: 62px;} .dropbtn {font-size: 14px; height: 62px;} .h3mm{font-size: 14px; height: 62px;} } @media(min-width: 992px) { .ProdVariants {font-size: 16px; width: auto;} .dropdownmm{font-size: 16px; height: 64px;} .dropbtn {height: 64px;} .h3mm{height: 64px;} } @media(min-width: 1200px) { .ProdVariants {font-size: 18px; width: auto;} .dropdownmm{font-size: 18px; height: 66px;} .dropbtn {font-size: 18px; height: 66px;} .h3mm{font-size: 18px; height: 66px;} } @media(min-width: 2000px) { .ProdVariants {font-size: 20px; width: auto;} .dropdownmm{font-size: 20px; height: 68px;} .dropbtn {font-size: 20px; height: 68px;} .h3mm{font-size: 20px; height: 68px;} } @media(min-width: 2500px) { .ProdVariants {font-size: 22px; width: auto;} .dropdownmm{font-size: 22px; height: 70px;} .dropbtn {font-size: 22px;height: 70px;} .h3mm{font-size: 22px;height: 70px;} } @media(min-width: 3000px) { .ProdVariants {font-size: 24px; width: auto;} .dropdownmm{font-size: 24px; height: 72px;} .dropbtn {font-size: 24px; height: 72px;} .h3mm{font-size: 24px; height: 72px;} } </style>          