html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after{content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}	
     
@font-face {
  font-family: 'c';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jost/v12/92zPtBhPNqw79Ij1E865zBUv7mz9JTVBNI4un_HKOEo.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}   
@font-face {
  font-family: 'c';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jost/v6/92zPtBhPNqw79Ij1E865zBUv7myRJTVBNI4un_HKOEo.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'b';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/berkshireswash/v9/ptRRTi-cavZOGqCvnNJDl5m5XmN_qs4zT305QQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { 
  font-family: 'l';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lexendgiga/v7/PlI5Fl67Mah5Y8yMHE7lkWxDvcGSf3aC.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* background-color:#ebfffa; color:#064334; */


		header{}
        body {font-family:c, Arial, Helvetica, sans-serif;font-weight: 300;line-height: 1.5; font-size:17px;}
        .center {text-align: center;}
        strong, b {font-weight:500;} 
        em {font-style:italic;}
        .clearfix {clear:both;}
		.line {clear:both; margin:30px 0; border-bottom:1px solid #ccc;}
        .container, .main, .small-container  {max-width:370px; width:100%; margin:0 auto; padding: 50px 30px;}
		
		
		
        .logo {float:left; display:block; margin:-9px 0 5px -5px; width:80px; color:#064334; text-decoration:none;}
		.logovegan{font-size:32px; letter-spacing:2px;font-family:b; margin-bottom:-4px;}
		.logosupermarket{font-size:7px; letter-spacing:2px; font-family:l; text-transform:uppercase; margin-bottom:14px;}
		
		
		a {text-decoration:inherit; color:inherit;}
		.grid-footer a {font-weight:500; color:#064334;}
		.link:hover{text-decoration:underline;}
		
		.linkhover{text-decoration:underline;color:#064334;}
		.linkhover:hover{text-decoration:none;}
		
		.img-no-back {mix-blend-mode: multiply; margin:0 auto 15px auto; max-width:100%; display:block;}
		
        .top-right {display:none;}

		ul.breadcrumb li {display: inline; font-size:13px;}
		ul.breadcrumb li+li:before { padding: 8px; color: black;content: "/\00a0";} 
		
		.list { margin-top:15px;}.list li{position:relative;list-style-type:none;padding-left:15px; margin-bottom:5px;text-align:-webkit-match-parent;margin:0 0 0 15px}.list li:before{content:"";display:block;border-radius:50%;position:absolute;background:#064334;width:9px;height:9px;top:7px;left:-5px;}
		
		.listnew { margin:20px 0 0 0;}.listnew li{position:relative;list-style-type:none;padding-left:15px; margin-bottom:20px;text-align:-webkit-match-parent;}.listnew li:before{content:"";display:block;border-radius:50%;position:absolute;background:#064334;width:9px;height:9px;top:6px;left:-5px;}

        h1, .large-heading {color:#064334; font-size:36px; line-height: 1.5;font-weight: 500;} 
		h2  {font-weight: 500; font-size:28px; color:#064334; }
		.description h2 {font-size:20px;}
		.productinfo h2  {font-weight: 500; font-size:18px; }
		h3  {font-weight: 500; font-size:22px; }
		.description h3 {font-size:17px;}
        .medium-heading, .m-heading {font-size:24px; line-height: 1.5;}
		.s-heading, .med {font-weight: 500;font-size: 20px;}
		.s-m {font-weight: 500;font-size: 16px;}
		.small {font-size:12px; color:#555;}
        .small-heading {font-size: 18px; text-align: center; margin: 15px 0 30px 0;}
        .light-heading {font-size: 24px;}
		.legend {font-weight: 300;font-size: 18px; color:#555; letter-spacing:2px; text-transform:uppercase;}

        h4 {font-weight: 500;font-family:c; line-height: 1.5;color:#064334;}
				
		.button {padding:14px 20px; font-size:17px; letter-spacing:2px; text-transform:uppercase; background-color:#064334; border:1px solid #064334; color:#fff; font-size:12px; border-radius:4px; font-family:c;}
        .button:hover {cursor:pointer; border:1px solid #1e5548; background-color:#1e5548; transition-timing-function: ease-in-out;transition-duration:0.4s;}

        .buttongreen {padding:14px 20px; background-color:#018848; border:1px solid #018848; color:#fff; font-size:12px; border-radius:4px; font-family:c;}
		.buttongreenright {padding:8px 20px; background-color:#018848; border:1px solid #018848; color:#fff; font-size:12px; border-radius:4px; font-family:c; margin-top:5px;}
        .buttongreen:hover, .buttongreenright:hover {cursor:pointer; border:1px solid #064334; background-color:#064334; transition-timing-function: ease-in-out;transition-duration:0.4s;}
		
		.alert, .text-danger {text-align:center; width:100%; padding:5px 15px; color:white; margin:0px auto; margin-bottom:3px;}
		.alert-success {background-color:#018848; border-radius:3px;}
		.alert-danger, .text-danger {background-color:#F03;}
		.close {border:none; background:none;}
		
		.gridproduct, .grid50 {display:grid; grid-template-columns: repeat(1, 1fr); grid-row-gap: 25px;grid-column-gap: 15px; }
		
		.gridproduct a {align-self: stretch; }
		
		.grid33 {display:grid;grid-template-columns: repeat(1, 1fr);margin-top:15px;grid-row-gap:30px;}
		.grid-footer {border-bottom:1px solid #ccc; margin-bottom:30px;}
		.grid-footer div {
			  padding-bottom:25px;
			  text-align:center;
			}
		.productinfo {color:black;  }
		
		.rating-product {font-size:14px;  color:#064334; padding-top:10px; margin-bottom:-10px;}
		
		.product{position:relative;}
		.productimagetwo{display:block; margin:0 auto;}
		.productimageone {mix-blend-mode: multiply; margin:15px auto; display:block;}
		.producthover {background-color:#eaeaea;position:relative;background-color:#fff;padding-bottom:30px; width:100%;z-index:1; display:block; border-bottom:1px solid #ccc;}
		.product .caption {display:block;padding:15px 45px 15px 15px; font-size:13px; color:black;  position:relative;}
		.caption-vert{display:block;padding:15px 15px 15px 15px; font-size:13px; color:black;  position:relative;}
		.product .caption .name, caption-vert .name, .item .name {font-size:11px; color:#555; text-transform:uppercase; letter-spacing:1px; text-align:center;}
		.product .caption .name:hover, .caption-vert .name:hover, .item .name:hover {text-decoration:underline; color:black;}
		.product .price, .caption-vert .price, .item .price {display:block; font-size:14px; text-align:left;}
		
		.caption-vert-img {float:left; max-width:50px; margin:15px 15px 15px 0; mix-blend-mode: multiply;}
		.smallimg .caption-vert-img {float:left; max-width:30px; margin:15px 15px 15px 0; mix-blend-mode: multiply;}
		
		.productwishlistplaceholder{display:none;}
		.productwishlist{position:absolute; top:7px; right:0px; display:block; z-index:2;width: 20px; height: 20px;
        background: url("https://www.vegansupermarket.co.uk/images/wishlist.png") no-repeat;}
		.productwishlist:hover{background: url("https://www.vegansupermarket.co.uk/images/wishlist1.png") no-repeat;}
		
		.productcompare{position:absolute; top:20px; right:15px; display:block; z-index:2;width: 18px; height: 18px;
        background: url("https://www.vegansupermarket.co.uk/images/compare.png") no-repeat;}
		.productcompare:hover{background: url("https://www.vegansupermarket.co.uk/images/compare1.png") no-repeat;}
		
		.productremove{position:absolute; top:20px; right:15px; display:block; z-index:2;width: 20px; height: 20px; background: url("https://www.vegansupermarket.co.uk/images/close.png") no-repeat;}
		
		.rating {
		  overflow: hidden;
		  vertical-align: bottom;
		  display: inline-block;
		  width: 130px;
		}
		
		.rating > input {
		  opacity: 0;
		  margin-right: -100%;
		}
		
		.rating > label {
		  position: relative;
		  display: block;
		  margin:0 5px 0 0;
		  float: right;width: 20px;
		  height: 20px;
		  background: url('https://www.vegansupermarket.co.uk/images/star.png');
		  background-size: 20px 20px;
		}
		
		.rating > label:before {
		  display: block;
		  opacity: 0;
		  content: '';
		  width: 20px;
		  height: 20px;
		  background: url('https://www.vegansupermarket.co.uk/images/star1.png');
		  background-size: 20px 20px;
		  transition: opacity 0.2s linear;
		}

.rating > label:hover:before,  .rating > label:hover ~ label:before,  .rating:not(:hover) > :checked ~ label:before { opacity: 1; }
		
		.buttonround, .input {border:1px solid #eaeaea; font-size:17px; background-color:#fff;border-radius:30px; font-family:c; padding:12px 25px;display:block; margin:15px auto 0px auto;}
		a .buttonround {text-decoration:none;}
		.buttonround:hover {border:1px solid #000; background-color:#f9f9f9; cursor:pointer;}
		
		
		.grey{background-color:#064334;}
        
        .nav ul li {padding:30px 15px; float:none;font-weight:400; display: block;}
        .nav ul .drop {display:none;} 
        
        .menu { width:42px; height:42px;  margin-right:15px; margin-left:-10px; margin-top:2px;position:relative; float:left;}
        #burger {background-color: red; width:50px; height:50px;}
        input + label { position: relative; float:left; height: 20px; margin-left:-49px; margin-top: 14px; width: 15px; z-index: 3; } input + label span { position: absolute; width: 100%; height: 2px; top: 50%; margin-top: -1px; left: 0; display: block; background:#064334; transition: .5s; } input + label span:first-child { top: 3px; } input + label span:last-child { top: 16px; } label:hover { cursor: pointer; } input:checked + label span { opacity: 0; top: 50%; width: 15px; } input:checked + label span:first-child { opacity: 1; transform: rotate(405deg); } input:checked + label span:last-child { opacity: 1; transform: rotate(-405deg); } 
       
		.search {float:left; margin-left:20px;}
        .scroll {height:300px; overflow-y: scroll;}
 		.grey .right-menu {margin-top:30px;}
		
		.right-menu {height:40px; margin-top:2px; float:right; display:block; padding-left:20px;}
	   .right-menu img {float:left; margin-right:13px; max-height:27px;}
		
        footer {font-size: 14px; letter-spacing: 1px;}
		.footer-menu {font-weight: 500; font-size: 12px; margin:15px 0;}
        .footer-menu li a {float: left; display:block; color: #064334;border-bottom:2px solid #064334; display: block; text-decoration: none; margin: 0 15px 5px 0; }
        .footer-menu li a:hover {text-decoration: none; border-bottom:0;}
		
		 .mobilemenu {display:none; position: absolute; top:80px; left:50%; margin-left:-158px; width:314px; height:300px; overflow: hidden; z-index:2; background-color: #fff; border:1px solid #303030;}
		.mobilemenu li {padding:15px 0; border-bottom:1px solid #eaeaea;}
		.mobilemenu li:hover {border-bottom:1px solid #064334;}
		.mobilemenu li a {color: #064334; text-transform:uppercase;font-weight:500; letter-spacing:2px; padding:15px; margin-right: 15px; font-size:16px; text-decoration: none;}
        
		
		
		/*soton*/
		
	.grid-container {
		 display: grid;
		 grid-template-columns: 1fr;
		 grid-template-rows: 1fr;
		 grid-template-areas: "main"; 
	}
	
	.grid4 {display:grid;grid-template-columns: repeat(4, 1fr);grid-column-gap: 2px; grid-row-gap: 2px;grid-auto-rows: 2fr;}
		.grid4 .n {border:1px solid #eaeaea; padding:3px; text-align:center;}
	 

	 .main {
		 grid-area: main;/* background-color:#09F;*/
		 margin: 0px auto -1px auto;
		 overflow-x: hidden;
		 overflow-y: hidden;
		 
		
	}
	
	 .items, .items-sub, .items-prod, .cats-sub {
		 z-index:1;
		 position: relative;
		 width: 100%;
	
		 overflow-x: scroll;
		 overflow-y: hidden;
		 white-space: nowrap;
		 transition: all 0.2s;
		 will-change: transform;
		 user-select: none;
		 cursor: pointer;
		 height:290px;
		 padding-left:120px;
	}
	.cats-sub {border-bottom:0;}
	 .items.active, .items-sub.active, .items-prod.active, .cats-sub.active {
		 cursor: grabbing;
		 cursor: -webkit-grabbing;
	}
	 .item {
		 grid-row: 1/ span 1;
		 display: inline-block;
		 vertical-align:top;
		 font-size:14px;
		 
		 height: 290px;
		 position:relative;
		 width: 200px;
		  white-space:normal;
		 margin: 0px 30px 0 0;
	}
	
	 .item-menu {
		 grid-row: 1/ span 1;
		 display: inline-block;
		 vertical-align:top;
		 font-size:14px; 
		 height: 100px;
		 position:relative;
		 width: 140px;
		  white-space:normal;
		 margin: 0px 30px 0 0;
	}
	
	.item .content { 
	
	    position:absolute; 
		height: 290px; text-align:center; margin:0 auto; padding-top:15px;
		 width: 200px; 
		 }
		 
	.category {width:85px; height:288px; margin-top:1px; position:absolute; display:block; float:left; border-right:1px solid #dfe1e4;z-index:100; background-color:white;}
	.category-inner {writing-mode: vertical-rl; 
text-orientation:mixed; text-align:center; height:290px; float:left; margin:0 30px 0 15px;
  transform:rotate(180deg);font-size:18px; letter-spacing:3px; padding:15px 0; text-transform:uppercase;}
  
	
	.boxwithborder {border-radius:30px; border:3px solid 
#698E85; padding:30px;}
	
	.mobile {display:block;}
	.desktop {display:none;}
	
	 .grid5{display:grid; grid-template-columns: repeat(1, 1fr); grid-row-gap:25px;grid-column-gap: 25px; padding:0;}
	.grid-split {display:grid; grid-template-columns: repeat(1, 1fr); grid-template-columns: 1fr; grid-row-gap: 15px;}
	.grid33 {display:grid;grid-template-columns: repeat(1, 1fr);margin-top:15px;grid-row-gap:30px;}
	.productprice { color:#555; font-size:22px;}
	.control-label {font-weight:300; text-transform:uppercase; font-size:12px; letter-spacing:3px; color:#555;}
	.form-control {border:1px solid #CCC; font-size:14px; padding:0 15px; height:45px; font-family:c, Verdana, Geneva, sans-serif; font-weight:300; margin:5px 0 10px 0; border-radius:22px; width:100%;}
		.category-filter {width:100%; float:none;}
		.category-select {border:0;border-bottom:1px solid #CCC; font-size:13px; padding:15px 15px 15px 0; font-family:c, Verdana, Geneva, sans-serif; margin:0; width:100%;float:none;}
	
	.pagination {width:100%; display:block; float:right;}
	.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #666;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;}
	
	.search {float:left; padding:0 0 0 30px; margin-left:30px;}
		.searchinput {width:100%; padding:12px 30px; border:none; font-family:c; font-weight:300; letter-spacing:1px; font-size:16px; border-radius:25px; background-color:#eaeaea;}
		.searchbutton {border-radius:50%; background-color:#064334; border:0; height:46px; width:46px; position:absolute; right:0;}
		.searchbutton:hover {background-color:#1e5548;}
		.searchbox {float:left;width:550px;position:relative; margin-right:18px; margin-top:-2px; }
		
		.accordion-toggle, .accordion-togglee,.toggletext {padding:18px 50px 18px 0;position: relative; text-align:left; cursor:pointer;letter-spacing: 1px; font-size:16px; font-weight:500; list-style:none;border-bottom:0; color:#555;}
		.mobile-menu .accordion-toggle {border-bottom:1px solid #ccc; color:#000;}
.accordion .padded {padding:30px 0;}
.accordion-content, .accordion-contentt { display: none;padding:30px 0px; background:transparent; text-align:left;font-size:16px;}

.accordion-toggle.active-tab .plus, .accordion-togglee.active-tab .plus {transform: rotate(-45deg);  opacity: 1; z-index: 2;}
.accordion-toggle.active-tab, .accordion-togglee.active-tab  {transition: all 0.3s ease;}
 .right-menu {margin-top:3px; float:right; display:block;}
 
 .imgright {width:100%; max-width:100%; margin:0 0 30px 0; display:block;}
 .imgright img {width:100%; max-width:100%;}
 .imgleft {float:left; width:100%; max-width:80px; margin:0 10px 30px 0; display:block;}
		
.compare td {padding: 15px 25px;}

.productcircle, .smallproductcircle {width:60px; overflow:hidden;height:60px; position:absolute; right:0; z-index:10; margin-top:-60px; padding-top:5px; text-align:center; font-size:15px; background-color:#064334; border-radius:50%;text-transform:uppercase; color:white;}
.smallproductcircle {width:45px; height:45px;margin-top:-45px;}
.productcircle .uppercircle {font-size:9px; letter-spacing:2px; margin-top:-2px;}
.productcircle .lowercircle {font-size:7px; padding-top:2px; letter-spacing:1px; border-top: 1px solid white;}

	@media screen and (max-width: 500px) {
		 .grid-container {
			 grid-template-columns: 1fr;
			 grid-template-rows: 1fr;
		}
	
		 .item, .itemwide {
			 min-height: 200px;
			 min-width: 200px;
		}
	}
	
	
	
 .cards {
	 width:100%; 
	 display: flex;
	 flex-flow: row wrap;
}
 .card {
	 padding: 5px;
	 width: 100%;
	 transition: all 0.2s ease-in-out;
}
 @media screen and (max-width: 991px) {
	 .card {
		 width: calc((100% / 2) - 30px);
	}
}
 @media screen and (max-width: 767px) {
	 .card {
		 width: 100%;
	}
}
 .card:hover .card__inner .img {
	
	 transform: scale(1.1);
}
 .card__inner .img {
	
	 transform: scale(1.05);
}
 .card__inner:hover .img {
	
	 transform: scale(1);
}
 .card__inner {
	 width: 100%;
	 padding: 15px;
	 position: relative;
	 cursor: pointer; 
	 background-color: #ffffff;
	 box-shadow:0 2px 2px 1px rgb(64 60 67 / 16%);
	 border-radius:15px;
	 color:#064334;
	 font-size:17px; font-weight:500;
	 
	 text-align: center;
	 transition: all 0.2s ease-in-out;
}
 .card__expander {
	 transition: all 0.2s ease-in-out;
	 background-color: #ffffff;
	  box-shadow:0 2px 2px 1px rgb(64 60 67 / 16%);
	 width: 100%;
	 border-radius:15px;
	 position: relative;
	 display: flex;
	 height: auto;
	 justify-content: center;
	 align-items: center;
	 color: #000;
	 font-size: 15px;
}

 .card.is-collapsed .card__inner:after {
	 content: "";
	 opacity: 0;
}
 .card.is-collapsed .card__expander {
	 max-height: 0;
	 min-height: 0;
	 overflow: hidden;
	 margin-top: 0;
	 opacity: 0;
}

 .card.is-expanded .card__inner:after {
	 content: "";
	 opacity: 1;
	 display: block;
	 height: 0;
	 width: 0;
	 position: absolute;
	 bottom: -30px;
	 left: calc(50% - 20px);
	 border-left: 20px solid transparent;
	 border-right: 20px solid transparent;
	 border-bottom: 20px solid #ffffff;
}
 .card.is-expanded .card__inner .fa:before {
	 content: "\f115";
}
 .card.is-expanded .card__expander {
	 max-height: 1000px;
	 min-height: 170px;
	 overflow: visible;
	 margin-top: 30px;
	 opacity: 1;
}
 .card.is-expanded:hover .card__inner {
	 transform: scale(1);
}
 
 .card.is-inactive:hover .card__inner {
	 transform: scale(1);
}

.card.is-inactive {opacity:0.5;}
.card.is-expanded{opacity:1;}

.cats-sub { height:185px; padding-top:15px;  }

.cat-sub {grid-row: 1/ span 1;display: inline-block;vertical-align:top; font-size:14px; height: 170px;position:relative; width: 170px; padding:0 15px; white-space:normal;margin: 0 0 0 0;}

.category-products {position:relative;} 
.current-cat {box-shadow:0 4px 15px -3px rgb(0 0 0 / 36%); position:relative; border-top-left-radius: 85px; border-top-right-radius:85px; border-bottom:none; background-color:white;}
.current-cat-img {max-width:95px; margin:15px auto 5px auto; display:block;}
.not-current-cat {border-radius:85px; box-shadow:0 4px 15px -3px rgb(0 0 0 / 36%); background-color:white; z-index:1; width:153px; height:153px;padding:0 20px; position:absolute; opacity:0.6;}
.not-current-cat:hover {opacity:1;}
.not-current-cat-img {max-width:82px; margin:10px auto 5px auto; display:block;}

.cat-sub .subcat {height:150px; position:relative;}
.subcat h4, .subcat h3, .subcat .med {font-size:11px; color:#555; letter-spacing:2px; text-align:center; text-transform:uppercase; }
.category-menu { padding-top:45px;}




 @media screen and (min-width: 992px) {
	  .card {
	 padding: 0px;
	 margin:10px; 
	 width: calc((100% / 5) - 20px);
	 transition: all 0.2s ease-in-out;
}
	.card:nth-of-type(3n+1) .card__expander {
		 margin-left: -3px;
	} 
	 .card:nth-of-type(3n+2) .card__expander {
		 margin-left: calc(-100% - 22px);
	}
	 .card:nth-of-type(3n+3) .card__expander {
		 margin-left: calc(-200% - 44px);
	}
	 .card:nth-of-type(3n+4) .card__expander {
		 margin-left: calc(-300% - 66px);
	}
	 .card:nth-of-type(3n+5) .card__expander {
		 margin-left: calc(-400% - 88px);
	}
	 .card:nth-of-type(3n+6) .card__expander {
		 margin-left: -3px;
	}
	 .card:nth-of-type(3n+7) .card__expander {
		margin-left:  calc(-100% - 22px);
	}
	 .card:nth-of-type(3n+8) .card__expander {
		margin-left: calc(-200% - 44px);
	}
	 .card:nth-of-type(3n+9) .card__expander {
		 margin-left: calc(-300% - 66px);
	}
	 .card:nth-of-type(3n+10) .card__expander {
		 margin-left:  calc(-400% - 88px);
	}
	 .card:nth-of-type(3n+4) {
		 clear: left;
	}
	 .card__expander {
		 width: calc(500% + 89px);
	}
}
 
 
		.spotlight-product {font-size:15px;}
		 .spotlight-heading { margin:0 0 15px 0;background-color:#000; color:#FFF; padding:7px 15px; font-size:20px; text-align:left; max-width:100%; font-size:14px; letter-spacing:2px; text-transform:uppercase;}
		 .spotlight-image {padding-bottom:10px;border-bottom:1px solid #ccc;}

        @media (min-width:1020px){
			
        .container {max-width:1000px; padding:30px;}
		.main {max-width:100%; padding:0px 0px 0px 30px;}
        .logo {float:left; margin:-12px 5px 0 5px; width:100px;}
	
		 .imgright {max-width:50%; margin:0 0 30px 30px; float:right; display:block;}
		  .imgleft {max-width:90px; margin:0 10px 30px 0;}
        h1, .large-heading {font-size:36px;}
		
		header {border-bottom:1px solid #eaeaea; margin:0;/*box-shadow: 0px 1px 1px -1px #ccc;*/}
		
        .nav {width:100%; float:left; position:relative; /*box-shadow: 0px 1px 1px -1px #ccc;*/border-bottom:1px solid #eaeaea;}
        .nav ul li {float:left; color:#064334; font-weight:500; display: block; font-size:16px;text-rendering: optimizeLegibility;padding:20px 15px; }
        .nav ul .drop {display:block;}
        .nav ul .drop a {padding:15px 0 10px 0; margin:0 6px; color:#064334; border-bottom: 0; text-decoration:none;}
		.nav ul .drop a:hover {color:#064334; border-bottom:2px solid #064334; cursor: pointer;}
		
		.gridproduct , .grid4{display:grid; grid-template-columns: repeat(4, 1fr); grid-row-gap:2px;grid-column-gap: 2px; padding:0;}
		.gridproduct {grid-column-gap: 10px; grid-template-columns: repeat(5, 1fr);}
		 .grid5, .grid5b{display:grid; grid-template-columns: repeat(5, 1fr); grid-row-gap:25px;grid-column-gap: 25px; padding:0;}
		 .grid5 .card__inner {width:100%;}
		 .grid5 .grid5box {text-align:center; padding:15px 0; font-size:14px; letter-spacing:2px;}
		 .grid5 .grid5box:hover {border:2px solid #064334; border-radius:15px;}
		
		.grid .product {background-color:#eaeaea; justify-content: center; align-items: center;position: relative; overflow:visible;}
		
		.grid50 {display:grid; grid-template-columns: repeat(2, 1fr); grid-row-gap:30px;grid-column-gap: 60px; padding:0;}
		
		
		
		.productspotlight {grid-column-start:3;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 4;display: flex;
  align-items: center;
  justify-content: center;}
  	 .spotlight-grid {display:grid;grid-template-columns: repeat(16, 1fr); background-color:inherit;
  grid-template-rows: 68px auto auto 30px; grid-gap:0; }
	 
	 .spotlightyellowbk {background-color:#FFFF33; grid-column-start: 2;grid-column-end: 15;grid-row-start: 1;
  grid-row-end: 5; position:relative; z-index:0; margin-left:15px; }
	 .spotlight-image {border-top:1px solid #000; border-bottom:0;grid-column-start: 10;grid-column-end: 17;grid-row-start: 2; grid-row-end: 5; background-color:#FFFF33;position:relative; z-index:1; padding:0;}
	 .spotlight-img {padding:15px; border:1px solid #000; background-color:white; margin-top:-1px;}
  .spotlight-heading { margin:15px 0 0 -30px;background-color:#000; color:#FFF; padding:7px 15px; font-size:20px; text-align:left; max-width:350px; font-size:17px; letter-spacing:2px; text-transform:uppercase;}
  .spotlight-product {border-top:1px solid #000; grid-column-start: 3; padding: 25px 30px 0 0px; grid-column-end: 10;grid-row-start: 2;
  grid-row-end: 3; font-size:15px;position:relative; z-index:1;}
  .spotlight-image .grid4 .n {border:1px solid #000;}
		
		 /*.producthover {display:none;}
		.gridproduct .product:hover .producthover {display:block;border-bottom:0; min-height:300px; position:absolute; box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2);}*/
		.producthover {display:block;border-bottom:0;  position:relative;}
		/*.gridproduct .product:hover .productimageone{display:none;}
		.gridproduct .product:hover .productimagetwo{display:block;}*/
		.productimagetwo{display:block;max-width:100%;}
		/*.productimagetwo{display:none; margin:15px auto 5px auto;}*/
		
		.productimageone {mix-blend-mode: multiply; margin:15px auto; display:block;}
		
		.productinfo {max-width:100%; display:block;}
		.productimages {color:black; }
		.productimages .img { max-width:440px;}
		
		.product .caption{padding-right:15px;}
		
		.category-filter {max-width:405px; float:right; margin-top:-18px;}
		.category-select {border:0;border-bottom:1px solid #CCC; font-size:13px; padding:15px; font-family:c, Verdana, Geneva, sans-serif; font-weight:c; margin:0; width:200px;float:right;}
		.category-margin-select {margin-right:5px;}
		
		.grid-split {display:grid;grid-template-columns: 500px 375px;  grid-row-gap: 15px;grid-column-gap: 60px; position:relative; margin-bottom:30px; }
		.grid-footer {display:grid;grid-template-columns: 220px 220px 375px;  grid-row-gap: 15px;grid-column-gap: 60px; position:relative; margin-bottom:15px; border-bottom:0; }
		.grid-footer div {
			  padding-bottom:0px;
			  text-align:left;
			}
		.grid33 {grid-template-columns: repeat(3, 1fr);grid-column-gap: 30px; grid-row-gap: 30px;grid-auto-rows: 1fr;grid-auto-rows: minmax(min-content, max-content);}
		.grid25 {display:grid;grid-template-columns: repeat(4, 1fr);grid-column-gap: 15px; grid-row-gap: 15px;grid-auto-rows: 1fr;grid-auto-rows: minmax(min-content, max-content);}
		
		
		.smallimage {overflow:hidden;}
		.zoom {max-width:220px;}
		.listing {position:relative; cursor:pointer;}
		.zoom {-webkit-animation-duration: 1s;
	  animation-duration: 1s;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	  -webkit-animation-timing-function: ease-in-out;
	  animation-timing-function: ease-in-out;
	  
	  }
		.listing:hover .zoom { cursor: pointer;
	  animation-name: bounce;
	  -moz-animation-name: bounce;}
	  .listing:hover .linkhover {border-bottom:2px solid #064334;}
		/*.listinghover {height:394px; position:absolute; width:calc(100% - 6px); margin:3px; z-index:2;}
		.listing:hover .listinghover {border:1px solid #064334;}*/
       
	  .right-menu { margin-top:9px;}
	   .right-menu img {margin-right:18px;}
	   @keyframes bounce {
		0%, 100%, 20%, 50%, 80% {
			-webkit-transform: translateY(0);
			-ms-transform:     translateY(0);
			transform:         translateY(0)
		}
		40% {
			-webkit-transform: translateY(-20px);
			-ms-transform:     translateY(-20px);
			transform:         translateY(-20px)
		}
		60% {
			-webkit-transform: translateY(-10px);
			-ms-transform:     translateY(-10px);
			transform:         translateY(-10px)
		}
	}
	.right-menu img, .account img {  
	  
	  -webkit-animation-duration: 1s;
	  animation-duration: 1s;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	  -webkit-animation-timing-function: ease-in-out;
	  animation-timing-function: ease-in-out;
	 
	  
	}
	.right-menu img:hover, .account img:hover {
	  cursor: pointer;
	  animation-name: bounce;
	  -moz-animation-name: bounce;
	}
	
	.box { padding: 25px 20px 20px 20px;
   margin: 0 15   margin: 0 15px 15px 15px; position:relative;font-size:10px; color:#545339; text-transform:uppercase;
enter;
   border: 2px    border: 2px dashed #545339;
s: 4px;
   height:120px;
   }
	
	.grid {display:grid; grid-template-columns: repeat(3, 1fr);grid-column-gap: 30px; grid-row-gap: 30px;}
	
	   .grey .right-menu {margin-top:-34px;height:0;}
	   
	    .logovegan{font-size:42px;}
		.logosupermarket{font-size:10px;}
		
        ul li .dropdown { visibility: hidden; opacity: 0; position: absolute; display: none;}
        ul li:hover > .dropdown, ul li .dropdown:hover {visibility: visible;opacity: 1;display: block;}
        ul li .dropdown li {clear: both; width: 100%;}
        
        .menu {display:none;}
        input + label {display:none;}
		
		.mobilemenu {display:none;}
		.scroll {height:auto; overflow-y:auto;}
		
		.footer-menu {font-weight: 500; font-size: 12px; margin:0 15px 0 0;}
		.footer-menu li a {display: inline-block; margin:0 15px 0 0; width:auto;}
		
		/* Soton */
		
	
	.item:hover {
		 height: 290px; border-bottom:5px solid #064334;  border-radius:5px;
		 position:relative;
		
	}
	 .items, .items-sub, .items-prod, .cats-sub {
		 overflow-x: hidden;
	 }
	
	.itemwide { 
	    height: 290px;
		
		 width: 250px;
		 }

.mobile {display:none;}
	.desktop {display:block;}
	
	
	
	.category-grid {display:grid; grid-template-rows: repeat(3, auto);}
	.category-content {grid-row-start: 3;grid-row-end: 4;}
	.category-products {grid-row-start: 2; grid-row-end: 3; }
	.category-menu {grid-row-start: 1; grid-row-end: 2; padding-top:0;}