* {

		margin: 0;

		font-family: 'Poppins', sans-serif;

		user-select: none;

		-webkit-tap-highlight-color: transparent;

		box-sizing: border-box;

	}



	body {

		background-color: white;

	}



	.order-strip {

		color: #8b3993 ;

		background-color: #cccccc;

		text-align: center;

		font-weight: light;

		font-size: 14px;

		opacity: 1.2;

		display: none;

	}



	.order-strip a {

		margin: 10px;

		padding: 10px;

        font-size: 16px;

        background-color: white;

        border-radius: 0;

        color: #8b3993 ;

        display: inline-block;

	}



	.city-strip {

		text-align: left;

		background-color:#555;

		color:white;

	}



	#address-p {

		margin: 20px 10px;

		font-size: 14px;

		color:black;

	}



  a {

		text-decoration: none;

		color: inherit;

		color: black;

	}



	nav {

		background-color: #8b3993  ;

		color: white;

		padding:10px 20px;

		font-size: 20px;

	    position: -webkit-sticky;

        position: sticky;

        top: 0;

	}



	nav a {

		color: inherit;

		text-decoration: none;

	}



	nav img {

	    width:150px;

	    height:50px;

	}



	.small-navbar div {

		display: inline-block;

		float: right;

	}



  .small-navbar {

  	padding: 20px 15px;

  	z-index: 4;

  }



	nav div span {

		margin: 5px;

	}



	.logo {

		margin-left: 20px;

		font-weight: bold;

		background-color:inherit;

		color:white;

		padding:5px 10px;
		
		font-family: "Bricolage Grotesque", sans-serif !important;

	}



	.cart-span {

		position: relative;

	}



	.cart-count {

		width: 10px;

		margin:1px auto;

		display: block;

		height: 10px;

	}



	.cart-items {

		position: absolute;

		top: -10px;

		right: -7px;

		font-size: 8px;

		background-color: black;

		color: white;

		width:15px;

		height:15px;

		border-radius: 50%;

		text-align: center;

		font-weight: bold;

  }





	.menu-btn {

		cursor: pointer;

	}



#offCanvasMenu {

    position: fixed;

    top: 0;

    left: -250px;

    width: 250px;

    height: 100%;

    background-color: white;

    padding-top: 0px;

    transition: 0.3s;

    z-index: 600;

    overflow-x: hidden;

	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

}



#offCanvasMenu .material-icons {

    display: inline-block;

}



#offCanvasMenu ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



#offCanvasMenu li {

    text-align: left;

}



li.head-li {

	background-color: #f2f2f2;

    padding: 20px 0px 10px;

}



.head-li a {

	background-color: #333;

	color:white;

	border-radius:15px;

	display: inline-block;

	font-size: 12px;

	padding:8px;

	max-width: 130px;

	text-align: center;

	margin: 0px 10px 10px;

}





#offCanvasMenu a {

    padding: 15px 20px;

    text-decoration: none;

    color: black;

    font-size: 14px;

    display: block;

    transition: 0.3s;


	border-bottom: 1px solid #f2f2f2;

}



#offCanvasMenu a:hover {

    background-color: #f2f2f2;

}



#offCanvasMenu .head-li a:hover {

	background-color: #333;

}



#close-button {

    position: absolute;

    top: 15px;

    right: 15px;

    background: #f2f2f2;

    border: none;

    font-size: 24px;

    color: black;

    cursor: pointer;

    z-index: 600;

}



	.search-bar {

		padding: 0px;

		display: flex;

		z-index: 3;

		background-color: white;

		box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

	}



	#search {

		padding: 5px;

		width: 90%;

		border: none;

		font-size:16px;



	}



	#search:focus {

		outline: 0px;

	}



	#search-btn, #large-search-btn {

		border: none;

		background-color: inherit;

		font-size:25px;

		cursor: pointer;

		padding: 5px;

		max-width: 12%;

		margin: auto;

		user-select: none;

	}



	.sticky {

	  position: fixed;

	  top: 0;

	  width: 100%;

	  transition: 0.5s;

	  box-sizing: border-box;

	  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

	}



	.search-container {

		display: none;

		height: 100%;

		width: 100%;

		background-color: white;

		z-index: 700;

		position: fixed;

		top: 0;

		left: 0;

	}



	.search-div {

		display: inline-flex;

		width:100%;

		padding: 10px;

		background: #00b33c;

		box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

	}



	.search-div .fa-arrow-left {

		width:30px;

		text-align: left;

		padding: 13px 0px;

		color: white;

	}



	.search-box {

		width: 100%;

		background-color: white;

	}



	.search-box input {

		padding: 10px;

		width: 85%;

		border:none;

		font-size: 16px;

		overflow: hidden;

		text-overflow: ellipsis;

	}



	.search-box input:focus {

		outline: 0;

	}



	.search-box button {

		width: 13%;

		background-color: inherit;

		border: none;

		text-align: right;

		margin: 0;

		padding: 10px;

		font-size: 18px;

	}



	.suggestions-box {

		max-width: 500px;

		background-color: white;

		margin: 10px 0;

		text-align:left;

	}



	.suggestions-box li {

	    margin:10px;

	    border-bottom: 0.5px solid #f2f2f2;

	    padding:5px;

	    margin-bottom:10px;

	}



	.suggestions-box li span {

	    font-size:12px;

	    color:grey;

	    display: block;

	}



	.footer-section {

		padding: 25px 15px;

		margin-top:100px;

		background: linear-gradient(180deg, #8b3993, #dfb6e2);

	}



	.cta-footer {

		max-width:95%;

		padding: 10px;

		border:1px solid white;

		border-radius: 15px;

		margin: 15px auto;

		display: flex;

	}



	.cta-div-footer {

		color: white;

		margin-right: 15px;

		padding: 10px;

	}



	.cta-div-footer h2 {

		margin:10px 0;

	}



	.cta-div-footer a {

		background-color: #f60;

		margin: 10px 0;

		padding: 10px 15px;

		display: inline-block;

		color: white;

		font-weight: 500;

		font-size: 14px;

		border-radius: 5px;

		border: 0.8px solid white;

	}



	.links-board-footer {

		margin-top: 30px;

		padding: 10px;

		color: white;

		margin: 0 auto;

	}



	.btn-div {

		margin-top: 25px;

		max-width: 250px;

		margin: 25px auto 0;

		text-align: center;

	}



	.btn-div button {

		padding:5px 10px;

		margin:0;

		border: 1px solid white;

		font-size: 14px;

		cursor: pointer;

		border-radius: 5px 5px 0 0;

		background-color: white;

		font-weight: 500;

		transition: background 0.2s ease;



	}



	.btn-div button.active {

		background-color: inherit;

		color: white;

		border-bottom: none;

	}



	.links-board-div {

		border:1px solid white;

		border-radius: 10px;

		margin: 0 0 25px;

		padding: 15px;

		display: inline-flex;

		width: 100%;

		box-sizing: border-box;

		background-color: white;

		color: grey;

		box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

	}



	.links-board-div div {

		width: 20%;

		margin: 10px auto;

		padding-left: 20px;

		border-right: 1px dashed;

	}



	.links-board-div ul {

		margin-top: 10px;

		padding-left: 17px;

	}



	.links-board-div li {

		margin: 5px 0;

	}



	.links-board-div a {

		color: inherit;

	}



	footer {

		background-color: #f2f2f2;

		color: black;

		padding: 20px;

		margin: 0px;

		display: inline-flex;

		width: 100%;

		box-sizing: border-box;

		padding-bottom: 100px;

	}



	footer div {

		width: 25%;

		box-sizing: border-box;

		padding: 10px;

	}



	footer h3 {

		color: #8b3993 ;

	}



	footer ul {

		padding-left: 0px;

	}



	footer li {

		padding: 5px 0px;

	}



	footer a {

		text-decoration: none;

		color: inherit;

	}



	footer a:hover {

        color: #8b3993;
		transition: color 0.3s ease;


	}



	#address-p a {

		color:#8b3993 ;
		font-weight: 500;

	}



    /* styles for small devices (Mobiles) */

	@media only screen and (max-width: 700px) {

		.large-navbar {

			display: none;

		}

		.order-strip a {

			font-size: 14px;

			margin: 10px;

			padding: 5px;

		}



		.cta-footer {

			display: block;

			width: 100%;

		}



		.links-board-div {

			flex-wrap: wrap;

			width: 100%;

		}



		.links-board-div div {

			width: 40%;

			margin: 15px auto 25px;

			border:none;

		}



		footer {

			display: block;

		}



		footer p {

			font-size: 14px;

		}



		footer div {

			width: 80%;

			max-width: 100%;

			margin: 20px auto;

			text-align: center;

		}

	}



	/* styles for small devices (Mobiles) */

	@media only screen and (min-width: 700px) and (max-width: 950px) {



		.small-navbar, .small-navbar-searchbar {

			display: block;

			transition: 0.5s;

		}



		.search-bar {

			display: flex;

		}



		.large-navbar {

			display: none;

		}



		footer {

			display: inline-block;

		}



		footer div {

			width: 50%;

			box-sizing: border-box;

			float: left;

			margin: 20px auto;

			text-align: center;

		}



	}



	@media only screen and (max-width: 550px) {



		.links-board-div {

			flex-wrap: wrap;

			width: 100%;

		}



		.links-board-div div {

			width: 90%;

			margin: 15px auto 25px;

			border:none;

		}



	}



    /* styles for larger devices (Laptops or Desktop) */

	@media only screen and (min-width: 950px) {

		.small-navbar, .small-navbar-searchbar {

			display: none;

		}





		.large-navbar {

			padding:15px;

			display: flex;

			flex-wrap: nowrap;

			z-index: 4;

		}





		.large-navbar .logo {

			margin-left:50px;

			font-size: 30px;
			
			font-family: "Bricolage Grotesque", sans-serif !important;

		}



		.icons-top-right {

			float: right;

			font-size:25px;

			display: flex;

		}



		.icons-top-right a {

			margin: 5px;

		}





		.large-navbar-links {

			margin: auto;

			transition: 0.3s;

		}



		.large-navbar-links a {

			font-size: 16px;

			margin: 5px;

			padding: 5px;

			background-color: inherit;

			color: white;

		}



		.large-search-bar {

			display: flex;

			background-color: white;

		}



		#search-large {

			padding: 10px;

			width: 85%;

			border: none;

			font-size:18px;

		}



		#search-large:focus {

			outline: none;

		}

	}



	::placeholder {

		color: grey;

	}



	#search {

		padding-left: 15px;

	}