/* Design by Finchcorp for the MyBistro Web app 
 * MyBistro Assets directory
*/

/* Admin Access CSS Start*/
@import url('https://fonts.googleapis.com/css?family=Numans');
          html, body {
                  overflow-x: hidden;
                 }
			  .switch {
			  position: relative;
			  display: inline-block;
			  width: 60px;
			  height: 34px;
			  }			
			.switch input {display:none;}
			.slider {
			  position: absolute;
			  cursor: pointer;
			  top: 0;
			  left: 0;
			  right: 0;
			  bottom: 0;
			  background-color: #ccc;
			  -webkit-transition: .4s;
			  transition: .4s;
			}
			.slider:before {
			  position: absolute;
			  content: "";
			  height: 26px;
			  width: 26px;
			  left: 4px;
			  bottom: 4px;
			  background-color: white;
			  -webkit-transition: .4s;
			  transition: .4s;
			  }
			input:checked + .slider {
			  background-color: #2196F3;
			}
			input:focus + .slider {
			 box-shadow: 0 0 1px #2196F3;
			}
			input:checked + .slider:before {
			  -webkit-transform: translateX(26px);
			  -ms-transform: translateX(26px);
			  transform: translateX(26px);
			}
			/* Rounded sliders */
			.slider.round {
			  border-radius: 34px;
			  }
			.slider.round:before {
			  border-radius: 50%;
			}
			 .bodyBGlogin{
			background-image: var(--BGlogin);
			background-size: cover;
			background-repeat: no-repeat;
			height: 100%;
			font-family: 'Numans', sans-serif;
			  }
			 .bodyBGpanel{
			background-image: var(--BGpanel);
			background-size: cover;
			background-repeat: no-repeat;
			height: 100%;
			font-family: 'Numans', sans-serif;
			  }   
			.modalview {
			position: relative;
			background-color: var(--BGmodal);
			min-height: 250px;
			}
			.container{
			height: 100%;
			align-content: center;
			}
			.card{
			width: 400px;
			height: auto;
			margin-top: auto;
			margin-bottom: auto;
			background-color: var(--BGoverlay);
			}
			.hostmsgcard{
			height: 55px;
			margin-top: 5px;
			width: 250px;
			border-radius: 5px;
			background-color: var(--BGoverlay);
			}
			.column {
			 float: left;
			 padding-left: 20px;
			}
			.colleft {
				width: 20%;
			}
			.collright {
				width: 80%;
			}
			.row:after {
			  content: "";
			  display: table;
			  clear: both;
			}
			.switchpanel {
			  position: absolute;
		      margin-left: auto;
			  margin-right: auto;
			  left: 0;
			  right: 0;
			  text-align: center;
			  background-image: url('/images/switchBG.jpg');
			  background-size: cover;
			  background-position: top center;
			  width: 150px;
			  height: 150px;
			  border-radius: 5px;
			}
		/*	.switch {
			  width: 50px;
			  height: 50px;
			  margin: 0 auto 0 auto;
			  padding: 25% 0 0 97%;
			} */
			.hostmsg{
			margin:	5px 5px 0 -10px;
			color: white;
			font-size: 14px;
			}
			.storemsg{
			color: var(--fontcolour2);
			}
			.hostmsg_icon {
			font-size: 30px;
			color: var(--btncolour1);
			}
			.social_icon span{
			font-size: 45px;
			margin-left: 10px;
			color: var(--btncolour1);
			}
			.social_icon span:hover{
			color: white;
			cursor: pointer;
			}
		  .statusheadfont1 {
			  font-size: 40px;
			  font-family: var(--fontfamily);
			  font-weight: 600;
			  line-height: 1.2em;
			  text-transform: uppercase;
			  color: #ffffff;
			  letter-spacing: 0.2em;
			 }
			.status_icon{
			position: absolute;
			left: 60px;
			top: -25px;
			}
			.social_icon{
			position: absolute;
			right: 20px;
			top: -25px;
			}
			.card-header h3{
			color: white;
			margin-top: 20px;
			}
			.header_icon {
			position: absolute;
			right: 15px;
			top: 10px;
			font-size: 35px;
			color: var(--btncolour1);
			}
			.a_icon {
			color: #337ab7;
			}
			.input-group-prepend span{
			width: 50px;
			background-color: var(--btncolour1);
			color: black;
			border:0 !important;
			}
			input:focus{
			outline: 0 0 0 0  !important;
			box-shadow: 0 0 0 0 !important;
			}
			.remember{
			color: white;
			}
			.remember input
			{
			width: 20px;
			height: 20px;
			margin-left: 15px;
			margin-right: 5px;
			}
			.status_btn{
			font-size: 22px;
			color: var(--btnfontcolour2);
			background-color: var(--btncolour1);
			width: 125px;
			height: 45px;
			}
			.login_btn{
			color: var(--btnfontcolour2);
			background-color: var(--btncolour1);
			width: 100px;
			}
			.login_btn:hover{
			color: black;
			background-color: white;
			}
			.links{
			color: white;
			}
			.links a{
			margin-left: 4px;
			}
/* Admin Access CSS End */
/* MyBistro Style Library Start */

	/* Custom Fonts Start  */
	@font-face {
    font-family: 'fjalla_oneregular';
    src: url('../css/fonts/font-Fjalla_One/fjallaone-regular-webfont.woff2') format('woff2'),
         url('../css/fonts/font-Fjalla_One/fjallaone-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
	/* Custom Fonts End */
 	/* MyBistro Global Style Start */
                 .pagecontrol {
                 	min-height: 100vh;
 					position: relative;
                 }
							@media only screen and (max-width: 1024px) {
					
							}
							@media only screen and (max-width: 760px) {
                                     .pagecontrol {
                                     	min-height: 220vh;
                                     }						
							}							
							@media only screen and (max-width: 736px) {
				
							}							
 								@media only screen and (max-width: 667px) {

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

									}
									  @media only screen and (max-width: 428px) {
                                             .pagecontrol {
                                             	min-height: 100vh;
                                             }	
										}
										@media only screen and (max-width: 415px) {
                                             .pagecontrol {
                                             	min-height: 100vh;
                                             }	
										}
											@media only screen and (max-width: 375px) {

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

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

													}                 
					aside .text{
					  color: white;
					  font-size: 25px;
					  font-weight: 600;
					  line-height: 65px;
					  text-align: center;
					  background: #1e1e1e;
					  letter-spacing: 1px;
					}
				.Absolute-Center {
				      display: flex;
				      align-items: center;
				      justify-content: center;
				      text-align: center;
				}
				.img-center-header {
					  display: flex;
					  margin-top: 50px;
					  justify-content: center;
					  align-items: center;
					  height: 100px;
					}
				.jqbox_center {
				    position: fixed;
				    left: 50%;
				    top: 50%;
				    transform: translate(-50%, -50%);
			  	}
			  	.img-center {
					  display: flex;
					  justify-content: center;
					  align-items: center;
					  height: 200px;
					}
					.custom-control-label::before,
					.custom-control-label::after {
					top: .8rem;
					width: .8rem;
					height: .8rem;
					}
					
              .modal-dialog {
                max-width: 600px;
              }
							@media only screen and (max-width: 768px) {
                                  .modal-dialog {
                                    max-width: 700px;
                                  }							
							}
 								@media only screen and (max-width: 667px) {
                                  .modal-dialog {
                                    max-width: 650px;
                                  }		
								}
									@media only screen and (max-width: 568px) {
                                      .modal-dialog {
                                        max-width: 550px;
                                      }		
									}  
										@media only screen and (max-width: 428px) {
                                          .modal-dialog {
                                            max-width: 100%;
                                          }
										}									
										@media only screen and (max-width: 415px) {
                                          .modal-dialog {
                                            max-width: 100%;
                                          }
										}
											@media only screen and (max-width: 375px) {
                                              .modal-dialog {
                                                max-width: 100%;
                                              }
											}
												@media only screen and (max-width: 360px) {
                                                  .modal-dialog {
                                                    max-width: 100%;
                                                  }
												}
													@media only screen and (max-width: 320px) {
                                                      .modal-dialog {
                                                        max-width: 100%;
                                                      }
													}									            				
					.wrapper {
					  height: 170px;
					  width: 385px;
					  border: 2px solid #d6d5d2;
					  border-radius: 10px;
					  margin: 10px auto 2px auto;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 428px) {
											.wrapper {
											  height: 170px;
											  width: 400px;
											  margin: 10px auto 2px auto;
											}
										}									
										@media only screen and (max-width: 415px) {
											.wrapper {
											  height: 170px;
											  width: 385px;
											  margin: 10px auto 2px auto;
											}
										}
										@media only screen and (max-width: 395px) {
											.wrapper {
											  height: 170px;
											  width: 365px;
											  margin: 10px auto 2px auto;
											}
										}										
											@media only screen and (max-width: 375px) {
												.wrapper {
												  height: 155px;
												  width: 340px;
												  margin: 10px auto 2px auto;
												}
											}
												@media only screen and (max-width: 360px) {
													.wrapper {
													  height: 155px;
													  width: 330px;
													  margin: 10px auto 2px auto;
													}
												}
													@media only screen and (max-width: 320px) {
											 			.wrapper {
														  height: 145px;
														  width: 295px;
														  margin: 10px auto 2px auto;
											 			}
													}
					.famwrapper {
					  min-height: 190px;
					  width: 380px;
					  margin: 10px auto 10px auto;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 428px) {
											.famwrapper {
											  min-heigh: 190px;
											  width: 340px;
											}
										}									
										@media only screen and (max-width: 415px) {
											.famwrapper {
											  min-heigh: 190px;
											  width: 380px;
											}
										}
											@media only screen and (max-width: 375px) {
												.famwrapper {
												  min-heigh: 175px;
												  width: 340px;
												}
											}
												@media only screen and (max-width: 360px) {
													.famwrapper {
													  min-heigh: 175px;
													  width: 330px;
													}
												}
													@media only screen and (max-width: 320px) {
											 			.famwrapper {
														  min-heigh: 165px;
														  width: 295px;
											 			}
													}													
					.wrappershort {
					  height: 120px;
					  width: 385px;
					  border: 2px solid #d6d5d2;
					  border-radius: 10px;					  
					  margin: 10px auto 2px auto;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 428px) {
											.wrappershort {											  
											  width: 400px;
											  margin: 10px auto 2px auto;
											}
										}										
										@media only screen and (max-width: 415px) {
											.wrappershort {
											  height: 120px;
											  width: 385px;
											  margin: 10px auto 2px auto;
											}
										}
										@media only screen and (max-width: 395px) {
											.wrappershort {
											  height: 120px;
											  width: 365px;
											  margin: 10px auto 2px auto;
											}
										}											
											@media only screen and (max-width: 375px) {
												.wrappershort {
												  height: 120px;
												  width: 340px;
												}
											}
												@media only screen and (max-width: 360px) {
													.wrappershort {
													  height: 120px;
													  width: 330px;
													}
												}
													@media only screen and (max-width: 320px) {
											 			.wrappershort {
														  height: 100px;
														  width: 295px;
											 			}
													}
					.wrapperheader {
					  width: 380px;
					  margin: 5px auto;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 428px) {
											.wrapperheader {
											  width:400px;
											  margin: 5px auto;
											}
										}									
										@media only screen and (max-width: 415px) {
											.wrapperheader {
											  width: 380px;
											  margin: 5px auto;
											}
										}
											@media only screen and (max-width: 375px) {
												.wrapperheader {
												  width: 340px;
												  margin: 5px auto;
												}
											}
												@media only screen and (max-width: 360px) {
													.wrapperheader {
													  width: 330px;
													  margin: 5px auto;
													}
												}
													@media only screen and (max-width: 320px) {
														.wrapperheader {
														  width: 295px;
														  margin: 5px auto;
														}
													}
					.product-img {
					  position: relative;
					  float: left;
					  height:170px;
					  width: 110px;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 415px) {
										}
											@media only screen and (max-width: 375px) {
												.product-img {
												  position: relative;
												  float: left;
												  width: 98px;
												  height: 155px;
												}
											}
												@media only screen and (max-width: 360px) {
													.product-img {
													  position: relative;
													  float: left;
													  width: 90px;
													  height: 155px;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-img {
														  position: relative;
									     				  float: left;
														  width: 75px;
														  height:118px;
														}
													}
					.product-img-short {
					  position: relative;
					  float: left;
					  height:120px;
					  width: 110px;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 415px) {
										}
											@media only screen and (max-width: 375px) {
												.product-img-short {
												  position: relative;
												  float: left;
												  width: 98px;
												  height: 120px;
												}
											}
												@media only screen and (max-width: 360px) {
													.product-img-short {
													  position: relative;
													  float: left;
													  width: 90px;
													  height: 120px;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-img-short {
														  position: relative;
									     				  float: left;
														  width: 75px;
														  height:100px;
														}
													}													
					.product-imgline{
					    max-height: 100%;
					    max-width: 100%;
					    width: auto;
					    height: auto;
					    position: absolute;
					    top: 0;
					    bottom: 0;
					    left: 0;
					    right: 0;
					    margin: auto;
					    }
					.productqty {
					    width: 80px;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 415px) {
										}
											@media only screen and (max-width: 375px) {
												.productqty {
												    width: 60px;
												}
											}
												@media only screen and (max-width: 360px) {
													.productqty {
													    width: 50px;
													}
												}
													@media only screen and (max-width: 320px) {
													}
					.product-info {
					  float: left;
					  height: 170px;
					  width: 265px;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 428px) {
												.product-info {
												  float: left;
												  width: 285px;
											  }	
										}								
										@media only screen and (max-width: 415px) {
												.product-info {
												  float: left;
												  width: 265px;
											  }											
										}
											@media only screen and (max-width: 395px) {
												.product-info {
												  float: left;
												  height: 155px;
												  width: 245px;
											  }	
											}										
											@media only screen and (max-width: 375px) {
												.product-info {
												  float: left;
												  height: 155px;
												  width: 235px;
											  }	
											}
												@media only screen and (max-width: 360px) {
													.product-info {
													  float: left;
													  height: 155px;
													  width: 235px;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-info {
														  float: left;
														  height: 145px;
														  width: 215px;
														  }
													}
					.product-info-short {
					  float: left;
					  height: 120px;
					  width: 265px;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									
									}
										@media only screen and (max-width: 428px) {
												.product-info-short {
												  float: left;
												  width: 285px;
											  }	
										}										
										@media only screen and (max-width: 415px) {
												.product-info-short {
												  float: left;
												  width: 265px;
											  }											
										}
											@media only screen and (max-width: 395px) {
												.product-info-short {
												  float: left;
												  height: 120px;
												  width: 245px;
											  }	
											}											
											@media only screen and (max-width: 375px) {
												.product-info-short {
												  float: left;
												  height: 120px;
												  width: 235px;
											  }	
											}
												@media only screen and (max-width: 360px) {
													.product-info-short {
													  float: left;
													  height: 120px;
													  width: 235px;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-info-short {
														  float: left;
														  height: 100px;
														  width: 215px;
														  }
													}													
					.product-text {
					  position: relative;
					  margin-top: 5px;
					  height: 65%;
					  width: 100%;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 415px) {
										}
											@media only screen and (max-width: 375px) {
												.product-text {
												  height: 65%;
												  width: 100%;
												}
											}
												@media only screen and (max-width: 360px) {
													.product-text {
													  height: 65%;
													  width: 100%;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-text {
														  height: 65%;
														  width: 100%;
														}
													}
					.product-text-short {
				      position: relative;
				      margin-top: 5px;
					  height: 45%;
					  width: 100%;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 415px) {
										}
											@media only screen and (max-width: 375px) {
												.product-text-short {
												  height: 45%;
												  width: 100%;
												}
											}
												@media only screen and (max-width: 360px) {
													.product-text-short {
													  height: 45%;
													  width: 100%;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-text-short {
														  height: 55%;
														  width: 100%;
														}
													}	
					.product-text-short h1,																				
					.product-text h1 {
					  margin: 0 0 0 10px;
					  padding-top: 2px;
					  font-size: 20px;
					  color: var(--fontcolour1);
					  white-space: normal;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 415px) {
										}
											@media only screen and (max-width: 375px) {
												.product-text-short h1,
												.product-text h1 {
												  margin: 0 0 0 10px;
												  padding-top: 2px;  
												  font-size: 17px;
												  color: var(--fontcolour1);
												  white-space: normal;
												}
											}
												@media only screen and (max-width: 360px) {
													.product-text-short h1,
													.product-text h1 {
													  margin: 0 0 0 10px;
													  padding-top: 2px;  
													  font-size: 17px;
													  color: var(--fontcolour1);
													  white-space: normal;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-text-short h1,
														.product-text h1 {
														  margin: 0 0 0 10px;
														  padding-top: 2px;  
														  font-size: 16px;
														  color: var(--fontcolour1);
														  white-space: normal;
														}
													}
					.product-family-text {
					  margin: 0 0 0 5px;
					  padding-top: 2px;
					  font-size: 16px;
					  color: var(--fontcolour1);
					  white-space: normal;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
											.product-family-text { 
												  font-size: 14px;
												}									
									}
										@media only screen and (max-width: 415px) {
											.product-family-text { 
												  font-size: 14px;
												}
										}
											@media only screen and (max-width: 375px) {
												.product-family-text { 
												  font-size: 14px;
												}
											}
												@media only screen and (max-width: 360px) {
													.product-family-text {
													  font-size: 14px;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-family-text {  
														  font-size: 13px;
														}
													}	
																									
					.product-text h1,
					.product-text-short h1,
					.product-price-btn p {
					  font-family: var(--fontfamily);
					}
											@media only screen and (max-width: 375px) {
												.product-price-btn p {
												  display: inline-block;
												  position: absolute;
												  top: -13px;
												  height: 47px;
												  font-family: var(--fontfamily);
												  margin: 0 0 0 38px;
												  font-size: 28px;
												  font-weight: lighter;
												  color: #474747;
												}											
											}
												@media only screen and (max-width: 360px) {
													.product-price-btn p {
													  display: inline-block;
													  position: absolute;
													  top: -13px;
													  height: 47px;
													  font-family: var(--fontfamily);
													  margin: 0 0 0 38px;
													  font-size: 28px;
													  font-weight: lighter;
													  color: #474747;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-price-btn p {
														  display: inline-block;
														  position: absolute;
														  top: -13px;
														  height: 42px;
														  font-family: var(--fontfamily);
														  margin: 0 0 0 38px;
														  font-size: 28px;
														  font-weight: lighter;
														  color: #474747;
														}
													}
					.product-text-short h2,								
					.product-text h2 {
					  position: absolute;
					  bottom: 0;
					  right: 0;
					  margin: 10px 0 0 10px;					 
					  font-size: 22px;
					  font-family: var(--fontfamily);
					  font-weight: 400;
					  text-transform: uppercase;
					  color: var(--fontcolour2);
					  letter-spacing: 0.2em;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 415px) {
										}
											@media only screen and (max-width: 375px) {
												.product-text-short h2,
												.product-text h2 {
												  margin: 10px 0 0 10px;
												  font-size: 18px;
												  font-family: var(--fontfamily);
												  font-weight: 400;
												  text-transform: uppercase;
												  color: var(--fontcolour2);
												  letter-spacing: 0.2em;
												}
											}
												@media only screen and (max-width: 360px) {
													.product-text-short h2,
													.product-text h2 {
													  margin: 10px 0 0 10px;
													  font-size: 17px;
													  font-family: var(--fontfamily);
													  font-weight: 400;
													  text-transform: uppercase;
													  color: var(--fontcolour2);
													  letter-spacing: 0.2em;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-text-short h2,
														.product-text h2 {
														  margin: 10px 0 0 10px;
														  font-size: 18px;
														  font-family: var(--fontfamily);
														  font-weight: 400;
														  text-transform: uppercase;
														  color: var(--fontcolour2);
														  letter-spacing: 0.2em;
														}
													}
					.product-text-short h3,								
					.product-text h3 {
					  margin: 10px 0 0 10px;					 
					  font-size: 22px;
					  font-family: var(--fontfamily);
					  font-weight: 400;
					  text-transform: uppercase;
					  color: var(--fontcolour2);
					  letter-spacing: 0.2em;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 415px) {
										}
											@media only screen and (max-width: 375px) {
												.product-text-short h3,
												.product-text h3 {
												  margin: 10px 0 0 10px;
												  font-size: 18px;
												  font-family: var(--fontfamily);
												  font-weight: 400;
												  text-transform: uppercase;
												  color: var(--fontcolour2);
												  letter-spacing: 0.2em;
												}
											}
												@media only screen and (max-width: 360px) {
													.product-text-short h3,
													.product-text h3 {
													  margin: 10px 0 0 10px;
													  font-size: 17px;
													  font-family: var(--fontfamily);
													  font-weight: 400;
													  text-transform: uppercase;
													  color: var(--fontcolour2);
													  letter-spacing: 0.2em;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-text-short h3,
														.product-text h3 {
														  margin: 10px 0 0 10px;
														  font-size: 18px;
														  font-family: var(--fontfamily);
														  font-weight: 400;
														  text-transform: uppercase;
														  color: var(--fontcolour2);
														  letter-spacing: 0.2em;
														}
													}													
					.product-family-text2 {
					  margin: 0 0 0 10px;
					  font-size: 16px;
					  font-family: var(--fontfamily);
					  font-weight: 400;
					  text-transform: uppercase;
					  color: var(--fontcolour2);
					  letter-spacing: 0.2em;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
												.product-family-text2 {
												  font-size: 14px;
												}									
									}
										@media only screen and (max-width: 415px) {
												.product-family-text2 {
												  font-size: 14px;
												}										
										}
											@media only screen and (max-width: 375px) {
												.product-family-text2 {
												  font-size: 14px;
												}
											}
												@media only screen and (max-width: 360px) {
													.product-family-text2 {
													  font-size: 14px;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-family-text2 {
														  font-size: 14px;
														}
													}	
					.product-text-short p,																				
					.product-text p {
					  margin: 5px 0 0 10px;
					  font-family: var(--fontfamily);
					  color: var(--fontcolour1);
					  line-height: 1.2em;
					  font-size: 12px;
					  font-weight: lighter;
                      text-overflow: ellipsis;
					  overflow: hidden;
					  display: -webkit-box;
					  -webkit-line-clamp: 3;
					  -webkit-box-orient: vertical;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 415px) {
										}
											@media only screen and (max-width: 375px) {
												.product-text-short p,
												.product-text p {
												  margin: 5px 0 0 10px;
												  font-family: var(--fontfamily);
												  color: var(--fontcolour1);
												  line-height: 1.2em;
												  font-size: 12px;
												  font-weight: lighter;
												  overflow: hidden;
												}
											}
												@media only screen and (max-width: 360px) {
													.product-text-short p,
													.product-text p {
													  margin: 5px 0 0 10px;
													  font-family: var(--fontfamily);
													  color: var(--fontcolour1);
													  line-height: 1.2em;
													  font-size: 12px;
													  font-weight: lighter;
													  overflow: hidden;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-text-short p,
														.product-text p {
														  margin: 5px 0 0 10px;
														  font-family: var(--fontfamily);
														  color: var(--fontcolour1);
														  line-height: 1.2em;
														  font-size: 10px;
														  font-weight: lighter;
														  overflow: hidden;
														}
													}							
					.header-text h1 {
					  font-family: var(--fontfamily);
					}
											@media only screen and (max-width: 375px) {
																
											}
												@media only screen and (max-width: 360px) {
												
												}
													@media only screen and (max-width: 320px) {
														
													}							
					.header-text h2 {
					  position: absolute;
					  bottom: 0;
					  right: 0;
					  margin: 10px 0 0 10px;					 
					  font-size: 22px;
					  font-family: var(--fontfamily);
					  font-weight: 400;
					  text-transform: uppercase;
					  color: var(--headerfont1);
					  letter-spacing: 0.2em;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 415px) {
										}
											@media only screen and (max-width: 375px) {
												.product-text-short h2,
												.product-text h2 {
												  margin: 10px 0 0 10px;
												  font-size: 18px;
												  font-family: var(--fontfamily);
												  font-weight: 400;
												  text-transform: uppercase;
												  color: var(--fontcolour2);
												  letter-spacing: 0.2em;
												}
											}
												@media only screen and (max-width: 360px) {
													.product-text-short h2,
													.product-text h2 {
													  margin: 10px 0 0 10px;
													  font-size: 17px;
													  font-family: var(--fontfamily);
													  font-weight: 400;
													  text-transform: uppercase;
													  color: var(--fontcolour2);
													  letter-spacing: 0.2em;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-text-short h2,
														.product-text h2 {
														  margin: 10px 0 0 10px;
														  font-size: 18px;
														  font-family: var(--fontfamily);
														  font-weight: 400;
														  text-transform: uppercase;
														  color: var(--fontcolour2);
														  letter-spacing: 0.2em;
														}
													}
					.header-text h3{
					  margin: 10px 0 0 10px;					 
					  font-size: 22px;
					  font-family: var(--fontfamily);
					  font-weight: 400;
					  text-transform: uppercase;
					  color: var(--headerfont1);
					  letter-spacing: 0.2em;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 415px) {
										}
											@media only screen and (max-width: 375px) {
												.product-text-short h3,
												.product-text h3 {
												  margin: 10px 0 0 10px;
												  font-size: 18px;
												  font-family: var(--fontfamily);
												  font-weight: 400;
												  text-transform: uppercase;
												  color: var(--fontcolour2);
												  letter-spacing: 0.2em;
												}
											}
												@media only screen and (max-width: 360px) {
													.product-text-short h3,
													.product-text h3 {
													  margin: 10px 0 0 10px;
													  font-size: 17px;
													  font-family: var(--fontfamily);
													  font-weight: 400;
													  text-transform: uppercase;
													  color: var(--fontcolour2);
													  letter-spacing: 0.2em;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-text-short h3,
														.product-text h3 {
														  margin: 10px 0 0 10px;
														  font-size: 18px;
														  font-family: var(--fontfamily);
														  font-weight: 400;
														  text-transform: uppercase;
														  color: var(--fontcolour2);
														  letter-spacing: 0.2em;
														}
													}	
					.header-text p {
					  font-size: 15px;
					  font-family: var(--fontfamily);
					  font-weight: 400;
					  line-height: 1.2em;
					  text-transform: uppercase;
					  color: var(--headerfont1);
					  letter-spacing: 0.2em;
					}
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 415px) {
										}
											@media only screen and (max-width: 375px) {

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

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

													}																											
					.menu {
						width: 1000px;
						margin: 0 auto 0 auto;
					 }
							@media only screen and (max-width: 820px) {
								.menu {
									width: 800px;
									margin: 0 auto 0 auto;
									padding: 0;
								 }
							}					 
							@media only screen and (max-width: 768px) {
								.menu {
									width: 730px;
									margin: 0 auto 0 auto;
									padding: 0;
								 }
							}
 								@media only screen and (max-width: 667px) {
									.menu {
										width: 635px;
										margin: 0 auto 0 auto;
										padding: 0;
										}
								   }
										@media only screen and (max-width: 568px) {
											.menu {
												width: 560px;
												margin: 0 auto 0 auto;
												padding: 0;
												}
												}
											@media only screen and (max-width: 428px) {
									 			.menu {
												width: 400px;
												margin: 0 auto 0 auto;
												padding: 0;
								      			 }
											}												
											@media only screen and (max-width: 415px) {
									 			.menu {
												width: 380px;
												margin: 0 auto 0 auto;
												padding: 0;
								      			 }
											}
											@media only screen and (max-width: 395px) {
									 			.menu {
												width: 360px;
												margin: 0 auto 0 auto;
												padding: 0;
								      			 }
											}											
												@media only screen and (max-width: 375px) {
													.menu {
														width: 340px;
														margin: 5px auto;
														padding: 0;
													 }
												}
													@media only screen and (max-width: 360px) {
														.menu {
															width: 330px;
															margin: 5px auto;
															padding: 0;
														 }
															}
														@media only screen and (max-width: 320px) {
															.menu {
																width: 305px;
																margin: 5px auto;
																padding: 0;
															 }
															 }


					.innermenu {
						width: 400px;
						margin: -10px auto 0 auto;
					 }
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 428px) {
											.innermenu {
												width: 400px;
												margin: -10px auto 0 auto;
											 }	
										}									
										@media only screen and (max-width: 415px) {
											.innermenu {
												width: 380px;
												margin: -10px auto 0 auto;
											 }	
										}
											@media only screen and (max-width: 375px) {
												.innermenu {
													width: 340px;
													margin: 5px auto;
													padding: 0;
												 }
											}
												@media only screen and (max-width: 360px) {
													.innermenu {
														width: 330px; 
														margin: 5px auto;
														padding: 0;
													 }	
												}
													@media only screen and (max-width: 320px) {
														.innermenu {
															width: 305px;
															margin: 5px auto;
															padding: 0;
														 }
													}
					.instmenu {
						width: 80%;
						margin: 5px auto;
					 }
											@media only screen and (max-width: 375px) {
												.instmenu {
													width: 350px;
													margin: 5px auto;
												 }
											}
												@media only screen and (max-width: 360px) {
													.instmenu {
														width: 355px;
														margin: 5px auto;
													 }
												}
													@media only screen and (max-width: 320px) {
														.instmenu {
															width: 315px;
															margin: 5px auto;
														 }
													}
					.catmenu {
					  background-color: transparent;
					  text-decoration: none;
					  margin: 0 0 20px 0;
					  padding: 0;
					}
							@media only screen and (max-width: 415px) {
									/* override sb-admin-2.css Start */
									.navbar-top-links .dropdown-user {
									  right: -85px;
									  left: auto;
									}
							}
					 .navStyle {
					 	background-color: var(--navBGColour);
					 }							
					.navburger {
					  font-size: 35px;
					  color: var(--btncolour1);
					}
							@media only screen and (max-width: 768px) {
					             .navburger {
								  margin-left: 15px;
								  font-size: 32px;
								  color: var(--btncolour1);
								  }
								  }
 								@media only screen and (max-width: 667px) {
 								}
									@media only screen and (max-width: 568px) {
										.navburger {
										  margin-left: 5px;
										  font-size: 32px;
										  color: var(--btncolour1);
										}
									}
										@media only screen and (max-width: 415px) {
											.navburger {
											  font-size: 28px;
											  color: var(--btncolour1);
											}
											}
											@media only screen and (max-width: 375px) {
												.navburger {
												  font-size: 25px;
												  color: var(--btncolour1);
												}
											}
												@media only screen and (max-width: 360px) {
													.navburger {
													  font-size: 25px;
													  color: var(--btncolour1);
													}
												}
													@media only screen and (max-width: 320px) {
														.navburger {
														  font-size: 25px;
														  color: var(--btncolour1);
														}
														}
					.navcarttext {
				     	line-height: .2em;
				     	text-align: center;
				     	margin-top: 10px;
				     	padding-top: 10px;
					    font-size: 20px;
					    color: var(--cartfontcolour);
					    }
							@media only screen and (max-width: 768px) {
								.navcarttext {
							     	line-height: .2em;
							     	text-align: center;
							     	margin-top: 10px;
							     	padding-top: 14px;
								    font-size: 22px;
								 }
						    }
 								@media only screen and (max-width: 667px) {
									.navcarttext {
								     	line-height: .2em;
								     	text-align: center;
								     	margin-top: 10px;
								     	padding-top: 14px;
									    font-size: 16px;
									 }
	 								}
									@media only screen and (max-width: 568px) {
										.navcarttext {
									     	line-height: .2em;
									     	text-align: center;
									     	margin-top: 10px;
									     	padding-top: 14px;
										    font-size: 16px;
										 }
											}
										@media only screen and (max-width: 428px) {
											.navcarttext {
											    font-size: 18px;
											 }
													}												
										@media only screen and (max-width: 415px) {
											.navcarttext {
										     	line-height: .2em;
										     	text-align: center;
										     	margin-top: 10px;
										     	padding-top: 10px;
											    font-size: 16px;
											 }
													}
										@media only screen and (max-width: 390px) {
											.navcarttext {
											    font-size: 18px;
											 }
													}													
											@media only screen and (max-width: 375px) {
												.navcarttext {
											     	line-height: .2em;
											     	text-align: center;
											     	margin-top: 10px;
											     	padding-top: 5px;
												    font-size: 16px;
												 }
											}
												@media only screen and (max-width: 360px) {
													.navcarttext {
												     	line-height: .2em;
												     	text-align: center;
												     	margin-top: 10px;
												     	padding-top: 10px;
													 }
												 }
													@media only screen and (max-width: 320px) {
														.navcarttext {
													     	line-height: .2em;
													     	text-align: center;
													     	margin-top: 10px;
													     	padding-top: 0px;
														    font-size: 12px;
														 }
														 }
					.navcarttext2 {
						font-family: fjalla_oneregular;
						font-size: 30px;
						color: var(--cartfontcolour);
						text-align: center;
						}
							 @media only screen and (max-width: 768px) {
							 		.navcarttext2 {
							                font-family: var(--fontfamily);
											font-size: 35px;
											text-align: center;			
										 }
								    }
 								@media only screen and (max-width: 667px) {
									.navcarttext2 {
						                font-family: var(--fontfamily);
										font-size: 30px;
										text-align: center;
										}
 								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 415px) {
											.navcarttext2 {
											font-family: fjalla_oneregular;
											font-size:25px;
											text-align: center;
											}
										}
											@media only screen and (max-width: 375px) {
											}
												@media only screen and (max-width: 360px) {
													.navcarttext2 {
														font-family: fjalla_oneregular;
														font-size:25px;
														text-align: center;
													}
												}
													@media only screen and (max-width: 320px) {
														.navcarttext2 {
															font-family: fjalla_oneregular;
															font-size:25px;
															text-align: center;
														 }
														 }
					.cartpostion {
						margin-left: 75%;
						width: 140px;
						height: 120px;
						background-color: var(--btncolour1);
						border-radius: 0px 0px 10px 10px;
					 }
							@media only screen and (max-width: 768px) {
								.cartpostion {
									margin-left: 75%;
									width: 130px;
									height: 130px;
									background-color: var(--btncolour1);
									border-radius: 0px 0px 10px 10px;
								 }
						    }
 								@media only screen and (max-width: 667px) {
									.cartpostion {
										margin-left: 75%;
										width: 110px;
										height: 130px;
										background-color: var(--btncolour1);
										border-radius: 0px 0px 10px 10px;
									 }
 								}
									@media only screen and (max-width: 568px) {
										.cartpostion {
											margin-left: 70%;
											width: 110px;
											height: 130px;
											background-color: var(--btncolour1);
											border-radius: 0px 0px 10px 10px;
										 }
									}
										@media only screen and (max-width: 428px) {
											.cartpostion {
												margin-left: 63%;
												width: 100px;
												height: 120px;
												background-color: var(--btncolour1);
												border-radius: 0px 0px 10px 10px;
											}
										}									
										@media only screen and (max-width: 415px) {
											.cartpostion {
												margin-left: 63%;
												width: 100px;
												height: 110px;
												background-color: var(--btncolour1);
												border-radius: 0px 0px 10px 10px;
											}
										}
										@media only screen and (max-width: 395px) {
											.cartpostion {
												margin-left: 61%;
												width: 100px;
												height: 110px;
												background-color: var(--btncolour1);
												border-radius: 0px 0px 10px 10px;
											}
										}										
											@media only screen and (max-width: 375px) {
												.cartpostion {
													margin-left: 59%;
													width: 98px;
													height: 100px;
													background-color: var(--btncolour1);
													border-radius: 0px 0px 10px 10px;
												 }
											}
												@media only screen and (max-width: 360px) {
													.cartpostion {
														margin-left: 55%;
														width: 90px;
														height: 100px;
														background-color: var(--btncolour1);
														border-radius: 0px 0px 10px 10px;			
													 }
												}
													@media only screen and (max-width: 320px) {
														.cartpostion {
															margin-left: 56%;
															width: 80px;
															height: 90px;
															background-color: var(--btncolour1);
															border-radius: 0px 0px 10px 10px;
														 }
													}
					.headerimg {
					  width: 320px;
					  margin: 50px auto 25px auto;
					}
													@media only screen and (max-width: 320px) {
                                                        .headerimg {
														  width: 200px;
														  margin: 50px auto 5px auto;
														}
													}
					.navimg {
					  width: 350px;
					  margin: 5px auto 5px auto;
					}
										@media only screen and (max-width: 415px) {
                        					.navimg {
                        					  width: 250px;
                        					  margin: 5px auto 5px auto;
                        					}
										}					
													@media only screen and (max-width: 320px) {
                                                        .navimg {
														  width: 200px;
														  margin: 5px auto 5px auto;
														}
													}
					.menuheaderimg {
					  width: 320px;
					  margin: 100px auto 75px auto;
					}
							@media only screen and (max-width: 768px) {

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

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

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

										}
											@media only screen and (max-width: 375px) {
												.menuheaderimg {
													margin: 100px auto 25px auto;
												}
											}
												@media only screen and (max-width: 360px) {
												.menuheaderimg {
													width: 290px;
													margin: 100px auto 25px auto;
												 }
												}
													@media only screen and (max-width: 320px) {
                                                        .menuheaderimg {
														  width: 250px;
														  margin: 75px auto 15px auto;
														}
													}					
					
					.catheaderimg {
					  display: block;
					  margin: 30px auto;
					  width: 250px;
					  height: auto;
					}
							@media only screen and (max-width: 768px) {
								.catheaderimg {
								  margin: 60px 250px;
								  width: 230px;
								  height: auto;
								}
						    }
 								@media only screen and (max-width: 667px) {
									.catheaderimg {
									  margin: 80px 150px;
									  width: 240px;
									  height: auto;
									}
 								}
									@media only screen and (max-width: 568px) {
										.catheaderimg {
										  margin: 60px 110px;
										  width: 200px;
										  height: auto;
										}
									}
										@media only screen and (max-width: 428px) {
											.catheaderimg {
											  margin: 60px 30px;
											  width: 200px;
											  height: auto;
											}
										}
											@media only screen and (max-width: 375px) {
												.catheaderimg {
												  margin: 50px 30px;
												  width: 185px;
												  height: auto;
												}
											}
												@media only screen and (max-width: 360px) {
													.catheaderimg {
													  margin: 70px 30px;
													  width: 180px;
													  height: auto;
													}
												}
													@media only screen and (max-width: 320px) {
                                                        .catheaderimg {
														  margin: 50px 30px;
														  width: 180px;
														  height: auto;
														}
													}
					.calheaderimg {
					  display: block;
					  margin: 30px auto;
					  width: 250px;
					  height: auto;
					}
							@media only screen and (max-width: 768px) {
								.calheaderimg {
								  margin: 60px 250px;
								  width: 230px;
								  height: auto;
								}
						    }
 								@media only screen and (max-width: 667px) {
									.calheaderimg {
									  margin: 80px 150px;
									  width: 240px;
									  height: auto;
									}
 								}
									@media only screen and (max-width: 568px) {
										.calheaderimg {
										  margin: 60px 110px;
										  width: 200px;
										  height: auto;
										}
									}
										@media only screen and (max-width: 415px) {
											.calheaderimg {
											  margin: 60px 30px;
											  width: 200px;
											  height: auto;
											}
										}
											@media only screen and (max-width: 375px) {
												.calheaderimg {
												  margin: 50px 30px;
												  width: 185px;
												  height: auto;
												}
											}
												@media only screen and (max-width: 360px) {
													.calheaderimg {
													  margin: 70px 30px;
													  width: 180px;
													  height: auto;
													}
												}
													@media only screen and (max-width: 320px) {
                                                        .calheaderimg {
														  margin: 50px 30px;
														  width: 180px;
														  height: auto;
														}
													}													
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 415px) {
											.catheaderimg_alt {
											  margin: 60px 30px;
											  width: 200px;
											  height: auto;
										}
										}
											@media only screen and (max-width: 375px) {
											}
												@media only screen and (max-width: 360px) {
												}
													@media only screen and (max-width: 320px) {												
													}
				.catmenu img {
				  width: 240px;
				  height: auto;
				  margin-left: auto;
				  margin-right: auto;
				}														
							@media only screen and (max-width: 768px) {
								.catmenu img {
								  width: 245px;
								  height: auto;
								  margin-left: auto;
								  margin-right: auto;
								}
						    }
 								@media only screen and (max-width: 667px) {
									.catmenu img {
									  width: 245px;
									  height: auto;
									  margin-left: auto;
									  margin-right: auto;
									}
	 							}
									@media only screen and (max-width: 568px) {
										.catmenu img {
										  width: 245px;
										  height: auto;
										  margin-left: auto;
										  margin-right: auto;
										}
									}
										@media only screen and (max-width: 428px) {
											.catmenu img {
											  width: 400px;
											  height: auto;
											  margin-left: auto;
											  margin-right: auto;
											}
										}									
										@media only screen and (max-width: 415px) {
											.catmenu img {
											  width: 380px;
											  height: auto;
											  margin-left: auto;
											  margin-right: auto;
											}
										}
											@media only screen and (max-width: 375px) {
												.catmenu img {
                                                  width: 340px;
												  height: auto;
												  margin-left: auto;
												  margin-right: auto;
												}
											}
												@media only screen and (max-width: 360px) {
												}
													@media only screen and (max-width: 320px) {
														.catmenu img {
														  width: 280px;
														  height: auto;
														  margin-left: auto;
														  margin-right: auto;
														}
													}
					.menu a:link {
					  text-decoration: none;
					}
					.menu a:active {
					  color: grey;
					  background-color: transparent;
					  text-decoration: none;
					}
					.menu a:hover {
					  color: grey;
					  background-color: transparent;
					  text-decoration: none;
					}
					.block_container {
					    text-align:center;
					}
					.block1, .block2 {
					    display:inline;
					}
                    .customfloat {
                    	background-color: var(--btncolour1);
                    	border: none;
                    	margin-right: 10px;
                    }
					.ccardmenu {
						width: 380px;
						margin: 10px auto;
					 }
							@media only screen and (max-width: 768px) {
							}
 								@media only screen and (max-width: 667px) {
								}
									@media only screen and (max-width: 568px) {
									}
										@media only screen and (max-width: 415px) {
											.ccardmenu {
												width: 300px;
												margin: 10px auto;
											 }
										}
											@media only screen and (max-width: 375px) {
												.ccardmenu {
												width: 300px; 
												margin: 10px auto;
											 }
											}
												@media only screen and (max-width: 360px) {
													.ccardmenu {
														width: 300px; 
														margin: 10px auto;
													 }
												}
													@media only screen and (max-width: 320px) {
														.ccardmenu {
															width: 250px; 
															margin: 5px auto;
														 }
													}
				    .ccardcontainer {
				      background-color: #f2f2f2;
				      padding: 5px 20px 15px 20px;
				      border: 1px solid lightgrey;
				      border-radius: 3px;
				    }
	               .col-50 {
                       -ms-flex: 50%; /* IE10 */
                       flex: 50%;
                       padding: 0 16px;
                     }
				   .icon-container {
				      margin-bottom: 20px;
				      padding: 7px 0;
				      font-size: 24px;
				    }
													@media only screen and (max-width: 320px) {
												       .icon-container {
													        margin-bottom: 10px;
													        padding: 7px 0;
													        font-size: 20px;
													    }
													}
			       .ccardmenu > div label {
					  margin-bottom: 10px;
					  display: block;
                    }
													@media only screen and (max-width: 320px) {
												       .ccardmenu > div label {
														  margin-bottom: 5px;
														  display: block;
									                    }
													}	                    
                   .ccardmenu > div input[type=text] {
				      width: 100%;
				      margin-bottom: 20px;
				      padding: 12px;
				      border: 1px solid #ccc;
				      border-radius: 3px;
				    }
													@media only screen and (max-width: 320px) {
									                   .ccardmenu > div input[type=text] {
													      width: 100%;
													      margin-bottom: 10px;
													      padding: 8px;
													      border: 1px solid #ccc;
													      border-radius: 3px;
													    }
													}				    
			       .ccardbtn {
				      background-color: var(--btncolour1);
				      color: white;
				      padding: 12px;
				      margin: 10px 0;
				      border: none;
				      width: 100%;
				      border-radius: 3px;
				      cursor: pointer;
				      font-size: 17px;
				    }
				    .ccardbtn:hover {
				      background-color: #45a049;
				    }
					 footer {
					 	position: absolute;
					 	bottom: 0px;
					 	left: 0px;
  						width: 100vw;
				        height: 125px;
					 	background-color: var(--footerBGColour);
	            	    margin-top: 40px;
					 }
							@media only screen and (max-width: 768px) {
				            	footer {
				            	  height: 125px;
				            	  margin-top: 35px;
				            	  padding: 0px;
								}
						    }
 								@media only screen and (max-width: 667px) {
					            	footer {
					            	  height: 125px;
					            	  margin-top: 35px;
					            	  padding: 0px;
									}
 								}
									@media only screen and (max-width: 568px) {
						            	footer {
						            	  height: 125px;
						            	  margin-top: 35px;
						            	  padding: 0px;
										}
									}
										@media only screen and (max-width: 428px) {
							            	footer {
							            	  height: 125px;
							            	  margin-top: 35px;
							            	  padding: 0px;
											}
										}
											@media only screen and (max-width: 375px) {
								            	footer {
								            	  height: 125px;
								            	  margin-top: 35px;
								            	  padding: 0px;
												}
											}
												@media only screen and (max-width: 360px) {
									            	footer {
									            	  height: 125px;
									            	  margin-top: 35px;
									            	  padding: 0px;
													}
												}
													@media only screen and (max-width: 320px) {
										            	footer {
										            	  height: 110px;
										            	  margin-top: 15px;
										            	  padding: 0px;
														}
													}
					  .footmenu {
					    display: flex;
					    justify-content: center;
					    width: 98%;
					    height: 98%;
					 }
							@media only screen and (max-width: 768px) {
								  .footmenu {
								  display: flex;
								  justify-content: center;
								  width: 98%;
  								  height: 98%;
								 }
						    }
 								@media only screen and (max-width: 667px) {
									  .footmenu {
									  display: flex;
									  justify-content: center;
									  width: 98%;
	  								  height: 98%;
									 }
 								}
									@media only screen and (max-width: 568px) {
										  .footmenu {
										  display: flex;
										  justify-content: center;
										  width: 98%;
		  								  height: 98%;
										 }
									}
										@media only screen and (max-width: 428px) {
											  .footmenu {
											  display: flex;
											  justify-content: center;
											  width: 98%;
			  								  height: 98%;
											 }
										}
											@media only screen and (max-width: 375px) {
												  .footmenu {
												  display: flex;
												  justify-content: center;
												  width: 98%;
				  								  height: 98%;
												 }
											}
												@media only screen and (max-width: 360px) {
													  .footmenu {
													  display: flex;
													  justify-content: center;
													  width: 98%;
					  								  height: 98%;
													 }
												}
													@media only screen and (max-width: 320px) {
														  .footmenu {
														  display: flex;
														  justify-content: center;
														  width: 98%;
						  								  height: 98%;
														 }
													}
					 .footdata {
					 	margin: 0px auto;
					 	align-self: center;
					  	text-align: center;
					    font-family: var(--footerfont);
					    color: var(--footerfontcolour);
					  	font-size: 12px;
					 }
							@media only screen and (max-width: 768px) {
								 .footdata {
								 align-self: center;
								 }
						    }
 								@media only screen and (max-width: 667px) {
									 .footdata {
									 align-self: center;
									 }
 								}
									@media only screen and (max-width: 568px) {
										 .footdata {
										 align-self: center;
										 }
									}
										@media only screen and (max-width: 415px) {
											 .footdata {
											 align-self: center;
											 }
										}
											@media only screen and (max-width: 375px) {
												 .footdata {
												 align-self: center;
												 }
											}
												@media only screen and (max-width: 360px) {
													 .footdata {
													 align-self: center;
													 }
												}
													@media only screen and (max-width: 320px) {
														 .footdata {
														 align-self: center;
														 }
													}
		             .footerImg {
		            	 margin-bottom: 0px;
		            	 width: 150px;
		            	 height: auto;
		            	}
							@media only screen and (max-width: 768px) {
				            	.footerImg {
				            	 margin-bottom: 0px;
				            	 width: 140px;
				            	 height: auto;
				            	}
						    }
 								@media only screen and (max-width: 667px) {
					            	.footerImg {
					            	 margin-bottom: 0px;
					            	 width: 135px;
					            	 height: auto;
					            	}
 								}
									@media only screen and (max-width: 568px) {
						            	.footerImg {
						            	 margin-bottom: 0px;
						            	 width: 120px;
						            	 height: auto;
						            	}
									}
										@media only screen and (max-width: 428px) {
							            	.footerImg {
							            	 margin-bottom: 0px;
							            	 width: 125px;
							            	 height: auto;
							            	}
										}
											@media only screen and (max-width: 375px) {
								            	.footerImg {
								            	 margin-bottom: 0px;
								            	 width: 120px;
								            	 height: auto;
								            	}
											}
												@media only screen and (max-width: 360px) {
									            	.footerImg {
									            	 margin-bottom: 0px; 
									            	 width: 120px;
									            	 height: auto;
									            	}
												}
													@media only screen and (max-width: 320px) {
										            	.footerImg {
										            	 margin-bottom: 0px;
										            	 width: 115px;
										            	 height: auto;
										            	}
													}
		             .footerIcons {
		             	 margin: 5px; 
		             	 width: 70px;
		            	}
							@media only screen and (max-width: 768px) {

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

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

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

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

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

												}
													@media only screen and (max-width: 320px) {
												     	.footerIcons {
                                    		             	 margin: 5px; 
                                    		             	 width: 50px;
										            	}
													}													
					 .footdata a {
					 	margin: 0px auto;
					  	text-align: center;
					    font-family: var(--footerfont);
					    color: var(--footerfontcolour);
					  	font-size: 12px; 
					 }
					.footdata a:link {
					  color: var(--footerlinkfontcolour);
					  background-color: transparent;
					  text-decoration: none;
					}
					.footdata a:visited {
					  color: var(--fontcolour2);
					  background-color: transparent;
					  text-decoration: none;
					}
					.footdata a:hover {
					  color: var(--fontcolour2);
					  background-color: transparent;
					  text-decoration: underline;
					}
					.footdata a:active {
					  color: var(--fontcolour2);
					  background-color: transparent;
					  text-decoration: underline;
					}
					div.inline {
					  width: 100%;
					  display: table;
					}
					div.inline div {
					  display: table-cell;
					}
					 .paymentheadfont {
					  font-size: 40px;
					  font-family: var(--fontfamily);
					  font-weight: 600;
					  line-height: 1.2em;
					  text-transform: uppercase;
					  color: var(--fontcolour1);
					  letter-spacing: 0.2em;
					 }
											@media only screen and (max-width: 375px) {
												 .paymentheadfont {
												  font-size: 36px;
												  font-family: var(--fontfamily);
												  font-weight: 600;
												  line-height: 1.2em;
												  text-transform: uppercase;
												  color: var(--fontcolour1);
												  letter-spacing: 0.2em;
												 }
											}
												@media only screen and (max-width: 360px) {
													 .paymentheadfont {
													  font-size: 30px;
													  font-family: var(--fontfamily);
													  font-weight: 600;
													  line-height: 1.2em;
													  text-transform: uppercase;
													  color: var(--fontcolour1);
													  letter-spacing: 0.2em;
													 }
												}
													@media only screen and (max-width: 320px) {
														 .paymentheadfont {
														  font-size: 28px;
														  font-family: var(--fontfamily);
														  font-weight: 600;
														  line-height: 1.2em;
														  text-transform: uppercase;
														  color: var(--fontcolour1);
														  letter-spacing: 0.2em;
														 }
													}
					  .paymentbodyfont1 {
					  font-size: 18px;
					  font-family: var(--fontfamily);
					  font-weight: 600;
					  line-height: 1.2em;
					  text-transform: uppercase;
					  color: var(--fontcolour1);
					  letter-spacing: 0.2em;
					 }
											@media only screen and (max-width: 375px) {
											  .paymentbodyfont1 {
											  font-size: 18px;
											  font-family: var(--fontfamily);
											  font-weight: 600;
											  line-height: 1.2em;
											  text-transform: uppercase;
											  color: var(--fontcolour1);
											  letter-spacing: 0.2em;
											 }
											}
												@media only screen and (max-width: 360px) {
												  .paymentbodyfont1 {
												  font-size: 15px;
												  font-family: var(--fontfamily);
												  font-weight: 600;
												  line-height: 1.2em;
												  text-transform: uppercase;
												  color: var(--fontcolour1);
												  letter-spacing: 0.2em;
												 }
												}
													@media only screen and (max-width: 320px) {
													  .paymentbodyfont1 {
													  font-size: 14px;
													  font-family: var(--fontfamily);
													  font-weight: 600;
													  line-height: 1.2em;
													  text-transform: uppercase;
													  color: var(--fontcolour1);
													  letter-spacing: 0.2em;
													 }
													}
					   .paymentbodyfont2 {
					  font-size: 20px;
					  font-family: var(--fontfamily);
					  font-weight: 600;
					  line-height: 1.2em;
					  text-transform: uppercase;
						color: var(--fontcolour2); 
					  letter-spacing: 0.2em;
					 }
					   .instructheaderfont2 {
					  font-size: 20px;
					  text-align: center;	
					  font-family: var(--fontfamily);
					  font-weight: 600;
					  line-height: 1.2em;
					  text-transform: uppercase;
						color: var(--fontcolour2); 
					  letter-spacing: 0.2em;
					 }					 
											@media only screen and (max-width: 375px) {
											   .paymentbodyfont2 {
												  font-size: 18px;
												  font-family: var(--fontfamily);
												  font-weight: 600;
												  line-height: 1.2em;
												  text-transform: uppercase;
												  color: var(--fontcolour2);
												  letter-spacing: 0.2em;
												 }
											}
												@media only screen and (max-width: 360px) {
												   .paymentbodyfont2 {
													  font-size: 15px;
													  font-family: var(--fontfamily);
													  font-weight: 600;
													  line-height: 1.2em;
													  text-transform: uppercase;
													  color: var(--fontcolour2);
													  letter-spacing: 0.2em;
													 }
												}
													@media only screen and (max-width: 320px) {
													   .paymentbodyfont2 {
														  font-size: 14px;
														  font-family: var(--fontfamily);
														  font-weight: 600;
														  line-height: 1.2em;
														  text-transform: uppercase;
														  color: var(--fontcolour2);
														  letter-spacing: 0.2em;
														 }
													}
					  .menufont1{
						font-family: var(--fontfamily);
						font-size: var(--menufontsize); 
						color: var(--fontcolour1); 
						text-align: center;	
						background-color: rgba(0, 0, 0, 0)
					}
				     .menufont2{
						font-family: var(--fontfamily);
						font-size: var(--menufontsize);
						color: var(--fontcolour2);
						background-color: rgba(0, 0, 0, 0)
				 	}
					.formfont{
					    position: relative;
					    height: 40px;
					    margin-top: 5px;
					    margin-bottom: 0;
					    margin-left: 10px;
						font-size: 30px;
						top: 0;
						font-family: var(--fontfamily);
						color: var(--fontcolour1);
					}
										  
											@media only screen and (max-width: 375px) {
												 .formfont{
									                position: relative;
												 	margin-top: 5px;
													font-size: 25px;
													top: 0;
													font-family: "fjalla_oneregular";
													color: var(--fontcolour1);
												}
											}
												@media only screen and (max-width: 360px) {
													 .formfont{
										                position: relative;
													 	margin-top: 5px;
														font-size: 20px;
														top: 0;
														font-family: "fjalla_oneregular";
														color: var(--fontcolour1);
													}
												}
													@media only screen and (max-width: 320px) {
														 .formfont{
											                position: relative;
														 	margin-top: 0px;
															font-size: 20px;
															top: 0;
															font-family: "fjalla_oneregular";
															color: var(--fontcolour1);
														}
													}
					.form-label{
					    height: 30px;
					    margin-bottom: 0;
						font-size: 30px;
						top: 0;
						font-family: var(--fontfamily);
						color: var(--fontcolour1);
					}
											@media only screen and (max-width: 375px) {
												.form-label{
												    height: 25px;
												    margin-left: 10px;
												    margin-bottom: 0;
													font-size: 25px;
													top: 0;
													font-family: var(--fontfamily);
													color: var(--fontcolour1);
												}
											}
												@media only screen and (max-width: 360px) {
													.form-label{
													    position: absolute;
													    height: 25px;
													    margin-left: 10px;
													    margin-bottom: 0;
														font-size: 20px;
														top: 6px;
														font-family: var(--fontfamily);
														color: var(--fontcolour1);
													}
												}
													@media only screen and (max-width: 320px) {
														.form-label{
														    height: 25px;
														    margin-left: 10px;
														    margin-bottom: 0;
															font-size: 20px;
															top: 0;
															font-family: var(--fontfamily);
															color: var(--fontcolour1);
														}
													}
					.form-input {
					   position: absolute;
					    width: 60px;
					    height: 30px;
					    border: transparent;
					    text-align: center;
					    color: var(--fontcolour1);
					    background-color: rgba(0, 0, 0, 0);
					    margin-left: 0px;
						top: 4px;
						left: 40px;
					}
											@media only screen and (max-width: 415px) {
												.form-input {
												    position: absolute;
												    width: 60px;
												    height: 50px;
												    border: transparent;
												    text-align: center;
												    background-color: rgba(0, 0, 0, 0);
												    margin-left: 0px;
													top: 0px;
													left: 30px;
												}
											}					
											@media only screen and (max-width: 375px) {
												.form-input {
												    width: 60px;
												    height: 45px;
												    border: transparent;
												    text-align: center;
												    background-color: rgba(0, 0, 0, 0);
												    margin-left: 0px;
													top: 0px;
													left: 30px;
												}
											}
												@media only screen and (max-width: 360px) {
													 .form-input {
													    position: absolute;
													    width: 40px;
													    height: 40px;
													    border: transparent;
													    background-color: rgba(0, 0, 0, 0);
													    text-align: center;
													    margin-left: 0px;
														top: 2px;
														left: 50px;
													}
												}
													@media only screen and (max-width: 320px) {
														 .form-input {
														    position: absolute;
														    width: 40px;
														    height: 40px;
														    border: transparent;
														    text-align: center;
														    background-color: rgba(0, 0, 0, 0);
														    margin-left: 0px;
															top: 0px;
															left: 50px;
														}
													}
					 .form-image {
					    width: 35px;
					    height: 35px;
						margin-top: 10px;
					}
											@media only screen and (max-width: 375px) {
												 .form-image {
												    width: 35px;
												    height: 35px;
													margin-top: 10px;
												}
											}
												@media only screen and (max-width: 360px) {
													 .form-image {
													    width: 30px;
													    height: 30px;
														margin-top: 10px;
													}
												}
													@media only screen and (max-width: 320px) {
														 .form-image {
														    width: 30px;
														    height: 30px;
															margin-top: 10px;
														}
													}
					.signup-form {
						width: 100%;
						height: 30px;
						border-radius: 5px;
					}
											@media only screen and (max-width: 375px) {
												.signup-form {
													width: 100%;
													height: 28px;
													border-radius: 5px;
												}
											}
												@media only screen and (max-width: 360px) {
													.signup-form {
														width: 100%;
														height: 28px;
														border-radius: 5px;
													}
												}
													@media only screen and (max-width: 320px) {
														.signup-form {
															width: 100%;
															height: 25px;
															border-radius: 5px;
														}
													}	
								@media only screen and (max-width: 320px) {
					  			    h3 {
								      font-size: 20px;
									    }
								}
					hr.dot {
					   width: 380px; 
					   margin: auto;	
					   border-top: 3px dotted rgb(33, 43, 68); 
					}
											@media only screen and (max-width: 375px) {
												hr.dot {
												   width: 340px; 
												   margin: auto;	
												   border-top: 3px dotted rgb(33, 43, 68); 
												}											
											}
												@media only screen and (max-width: 360px) {
													hr.dot {
													   width: 330px; 
													   margin: auto;	
													   border-top: 3px dotted rgb(33, 43, 68); 
													}
												}
													@media only screen and (max-width: 320px) {
														hr.dot {
														   width: 295px; 
														   margin: auto;	
														   border-top: 3px dotted rgb(33, 43, 68); 
														}
													}
					hr.cart {
					   width: 95%; 
					   margin-right: 5%;
					   border-top: 2px dotted rgb(33, 43, 68); 
					}
					img {
					    max-width: 100%;
					    max-height: 100%;
					}
					.legal-text h1 {
					  margin: 0 0 0 10px;
					  padding-top: 2px;  
					  font-size: 22px;
					  color: var(--fontcolour1);
					}
					.legal-text h2 {
					  font-size: 14px;
					  font-family: var(--fontfamily);
					  font-weight: 400;
					  line-height: 1.2em;
					  text-transform: uppercase;
					  color: var(--fontcolour1);
					  letter-spacing: 0.2em;
					}
					.legal-text h3 {
					  font-size: 14px;
					  font-family: var(--fontfamily);
					  font-weight: 400;
					  line-height: 1.2em;
					  text-transform: uppercase;
					  color: var(--fontcolour2);
					  letter-spacing: 0.2em;
					}
					.legal-text p {
					  margin: 5px 0 0 10px;
					  font-family: var(--fontfamily);
					  color: var(--fontcolour1);
					  line-height: 1.2em;
					  font-size: 12px;
					  font-weight: lighter;
					}
					.legal-text li {
					  margin: 5px 0 0 10px;
					  font-family: var(--fontfamily);
					  color: var(--fontcolour1);
					  line-height: 1.2em;
					  font-size: 12px;
					  font-weight: lighter;
					  list-style: none;
					}
					.product-instruct {
					  margin: 5px 0 0 10px;
					  font-family: var(--fontfamily);
					  color: var(--fontcolour1);
					  line-height: 1.2em;
					  font-size: 12px;
					  font-weight: lighter;
					  overflow: hidden;
					}
					.product-disclaimer {
					  margin: 5px 0 0 10px;
					  font-family: var(--fontfamily);
					  color: var(--fontcolour1);
					  line-height: 1.2em;
					  font-size: 12px;
					  font-weight: lighter;
					  overflow: hidden;
					  
					}
					.inst-text1 {
					  height: 20px; 
					  margin: 0px -5px; 
					  padding-top: 5px;  
					  padding-bottom: 5px;
					  font-size: 10px;
					  font-family: var(--fontfamily);
					  font-weight: 400;
					  line-height: 1.2em;
					  text-transform: uppercase;
					  color: var(--fontcolour1);
					  letter-spacing: 0.2em;
					}
												@media only screen and (max-width: 360px) {
													.inst-text1 {
													  height: 20px; 
													  margin: 0px -5px; 
													  padding-top: 5px;  
													  padding-bottom: 5px;
													  font-size: 9px;
													  font-family: var(--fontfamily);
													  font-weight: 400;
													  line-height: 1.2em;
													  text-transform: uppercase;
													  color: var(--fontcolour1);
													  letter-spacing: 0.2em;
													}
												}
													@media only screen and (max-width: 320px) {
														.inst-text1 {
														  height: 20px; 
														  margin: 0px -5px; 
														  padding-top: 5px;  
														  padding-bottom: 5px;
														  font-size: 8px;
														  font-family: var(--fontfamily);
														  font-weight: 400;
														  line-height: 1.2em;
														  text-transform: uppercase;
														  color: var(--fontcolour1);
														  letter-spacing: 0.2em;
														}
													}
					.cart-text1 {
					  font-size: 15px;
					  font-family: var(--fontfamily);
					  font-weight: 400;
					  line-height: 1.2em;
					  text-transform: uppercase;
					  color: var(--fontcolour1);
					  letter-spacing: 0.2em;
					}
													@media only screen and (max-width: 320px) {
														.cart-text1 {
														  font-size: 12px;
														  font-family: var(--fontfamily);
														  font-weight: 400;
														  line-height: 1.2em;
														  text-transform: uppercase;
														  color: var(--fontcolour1);
														  letter-spacing: 0.2em;
														}
													}
					.cart-text2 {
					  font-size: 15px;
					  font-family: var(--fontfamily);
					  font-weight: 400;
					  line-height: 1.2em;
					  text-transform: uppercase;
					  color: var(--fontcolour2);
					  letter-spacing: 0.2em;
					  }
													@media only screen and (max-width: 320px) {
														.cart-text2 {
														  font-size: 12px;
														  font-family: var(--fontfamily);
														  font-weight: 400;
														  line-height: 1.2em;
														  text-transform: uppercase;
														  color: var(--fontcolour2);
														  letter-spacing: 0.2em;
														}
													}	
					.alert-text1 {
				      position: absolute;
					  bottom: 180px;
					  left: auto;
					  right: auto;
					  width: 400px;
					  font-size: 10px;
					  font-family: var(--fontfamily);
					  font-weight: 200;
					  line-height: 1.2em;
					  text-transform: uppercase;
					  color: var(--fontcolour1);
					  letter-spacing: 0.2em;
					}
							@media only screen and (max-width: 1024px) {
								  .alert-text1 {
							          bottom: 110px;
							          width: 400px; 									  
                					  font-size: 10px;
								 }						
							}					
							@media only screen and (max-width: 768px) {
								  .alert-text1 {
                					  font-size: 10px
								 }							
						    }
 								@media only screen and (max-width: 667px) {
 						     		     	  .alert-text1 {
                            					  font-size: 8px;
											 }
 								}
 						     		@media only screen and (max-width: 568px) {
 						     		     	  .alert-text1 {
										          bottom: 110px;
										          width: 400px; 						     		     	  
                            					  font-size: 8px;
											 }
                           	    	}
										@media only screen and (max-width: 428px) {
											  .alert-text1 {
										          bottom: 140px;
										          width: 380px;											  
                            					  font-size: 8px;
											 }
										}
											@media only screen and (max-width: 375px) {
        											  .alert-text1 {
        										          bottom: 130px;
        										          width: 320px;
        											 }
											}
												@media only screen and (max-width: 360px) {
        											  .alert-text1 {
        										          bottom: 130px;
        										          width: 320px;
                                    					  font-size: 8px;
                                    					  margin-top: 40px;
        											 }
												}
													@media only screen and (max-width: 320px) {
													    .alert-text1 {
        										          bottom: 120px;
        										          width: 280px;
													}
													}		
					.msg-text1 {
					  width: 400px;
					  font-size: 10px;
					  font-family: var(--fontfamily);
					  font-weight: 200;
					  line-height: 1.2em;
					  text-transform: uppercase;
					  color: var(--fontcolour1);
					  letter-spacing: 0.2em;
					}
							@media only screen and (max-width: 1024px) {
								  .msg-text1 {
							          width: 400px; 									  
                					  font-size: 10px;
								 }						
							}					
							@media only screen and (max-width: 768px) {
								  .msg-text1 {
                					  font-size: 10px
								 }							
						    }
 								@media only screen and (max-width: 667px) {
 						     		     	  .msg-text1 {
                            					  font-size: 8px;
											 }
 								}
 						     		@media only screen and (max-width: 568px) {
 						     		     	  .msg-text1 {
										          width: 400px; 						     		     	  
                            					  font-size: 8px;
											 }
                           	    	}
										@media only screen and (max-width: 428px) {
											  .msg-text1 {
										          width: 380px;											  
                            					  font-size: 8px;
											 }
										}
											@media only screen and (max-width: 375px) {
        											  .msg-text1 {
        										          width: 320px;
        											 }
											}
												@media only screen and (max-width: 360px) {
        											  .msg-text1 {
        										          width: 320px;
                                    					  font-size: 8px;
                                    					}
												}
													@media only screen and (max-width: 320px) {
													           .msg-text1 {
        										             width: 280px;
													}	
													}																			
														
					.cart-instext {
					  font-size: 12px;
					  font-family: var(--fontfamily);
					  font-weight: 400;
					  line-height: 1.1em;
					  text-transform: uppercase;
					  color: var(--fontcolour3);
					  letter-spacing: 0.2em;
					}
					.signup-text1 {
					  font-size: 12px;
					  font-family: var(--fontfamily);
					  font-weight: 400;
					  line-height: 1.2em;
					  text-transform: uppercase;
					  color: var(--fontcolour1);
					  letter-spacing: 0.1em;
					}
											@media only screen and (max-width: 375px) {
												.signup-text1 {
												  font-size: 10px;
												  font-family: var(--fontfamily);
												  font-weight: 400;
												  line-height: 1.2em;
												  text-transform: uppercase;
												  color: var(--fontcolour1);
												  letter-spacing: 0.1em;
												}
											}
												@media only screen and (max-width: 360px) {
													.signup-text1 {
													  font-size: 10px;
													  font-family: var(--fontfamily);
													  font-weight: 400;
													  line-height: 1.2em;
													  text-transform: uppercase;
													  color: var(--fontcolour1);
													  letter-spacing: 0.1em;
													}
												}
													@media only screen and (max-width: 320px) {
														.signup-text1 {
														  font-size: 9px;
														  font-family: var(--fontfamily);
														  font-weight: 400;
														  line-height: 1.2em;
														  text-transform: uppercase;
														  color: var(--fontcolour1);
														  letter-spacing: 0.1em;
														}
													}
					.signup-text2 {
					  font-size: 12px;
					  font-family: var(--fontfamily);
					  font-weight: 400;
					  line-height: 1.2em;
					  text-transform: uppercase;
					  color: var(--fontcolour2);
					  letter-spacing: 0.1em;
					}
											@media only screen and (max-width: 375px) {
												.signup-text2 {
												  font-size: 10px;
												  font-family: var(--fontfamily);
												  font-weight: 400;
												  line-height: 1.2em;
												  text-transform: uppercase;
												  color: var(--fontcolour2);
												  letter-spacing: 0.1em;
												}
											}
												@media only screen and (max-width: 360px) {
													.signup-text2 {
													  font-size: 10px;
													  font-family: var(--fontfamily);
													  font-weight: 400;
													  line-height: 1.2em;
													  text-transform: uppercase;
													  color: var(--fontcolour2);
													  letter-spacing: 0.1em;
													}
												}
													@media only screen and (max-width: 320px) {
														.signup-text2 {
														  font-size: 9px;
														  font-family: var(--fontfamily);
														  font-weight: 400;
														  line-height: 1.2em;
														  text-transform: uppercase;
														  color: var(--fontcolour2);
														  letter-spacing: 0.1em;
														}
													}
					.product-price-btn {
					  height: 40px;
					  width: 150px;
					  position: absolute;
					  top: 9px;
					  right: 0px;
					}
											@media only screen and (max-width: 375px) {
												.product-price-btn {
												  height: 40px;
												  width: 105px;
												  position: absolute;
												  top: 8px;
												  right: 0px;
												}
											}
												@media only screen and (max-width: 360px) {
													.product-price-btn {
													  height: 35px;
													  width: 95px;
													  position: absolute;
													  top: 6px;
													  right: 0px;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-price-btn {
														  height: 40px;
														  width: 105px;
														  position: absolute;
														  top: 8px;
														  right: 0px;
														}
													}
					.inst-btn {
					  height: 50px;
					  width: 100%;
					  margin: 8px auto;
					}
					.inst-btn button {
					  height: 30px;
					  width: 25%;
					  box-sizing: border-box;
					  border: transparent;
					  border-radius: 5px;
					  font-family: var(--fontfamily);
					  font-size: 12px;
					  font-weight: 400;
					  text-transform: uppercase;
					  letter-spacing: 0.2em;
					  color: var(--btnfontcolour1);
					  background-color: var(--btncolour1);
					  cursor: pointer;
					  outline: none;
					}
					.trxcmp-btn {
					  height: 50px;
					  width: 95%;
					  margin: 8px auto;
					}
											@media only screen and (max-width: 375px) {
												.trxcmp-btn {
												  height: 50px;
												  width: 95%;
												  margin: 8px auto;
												}
											}
												@media only screen and (max-width: 360px) {
													.trxcmp-btn {
													  height: 50px;
													  width: 95%;
													  margin: 8px auto;
													}
												}
													@media only screen and (max-width: 320px) {
														.trxcmp-btn {
														  height: 50px;
														  width: 95%;
														  margin: 8px auto;
														}
													}
					.trxcmp-btn button {
					  height: 30px;
					  width: 60%;
					  box-sizing: border-box;
					  border: transparent;
					  border-radius: 5px;
					  font-family: var(--fontfamily);
					  font-size: 12px;
					  font-weight: 400;
					  text-transform: uppercase;
					  letter-spacing: 0.2em;
					  color: var(--btnfontcolour1);
					  background-color: var(--btncolour1);
					  cursor: pointer;
					  outline: none;
					}
											@media only screen and (max-width: 375px) {
												.trxcmp-btn button {
												  height: 30px;
												  width: 50%;
												  box-sizing: border-box;
												  border: transparent;
												  border-radius: 5px;
												  font-family: var(--fontfamily);
												  font-size: 12px;
												  font-weight: 400;
												  text-transform: uppercase;
												  letter-spacing: 0.2em;
												  color: var(--btnfontcolour1);
												  background-color: var(--btncolour1);
												  cursor: pointer;
												  outline: none;
												}
											}
												@media only screen and (max-width: 360px) {
													.trxcmp-btn button {
													  height: 30px;
													  width: 60%;
													  box-sizing: border-box;
													  border: transparent;
													  border-radius: 5px;
													  font-family: var(--fontfamily);
													  font-size: 12px;
													  font-weight: 400;
													  text-transform: uppercase;
													  letter-spacing: 0.2em;
													  color: var(--btnfontcolour1);
													  background-color: var(--btncolour1);
													  cursor: pointer;
													  outline: none;
													}
												}
													@media only screen and (max-width: 320px) {
														.trxcmp-btn button {
														  height: 30px;
														  width: 60%;
														  box-sizing: border-box;
														  border: transparent;
														  border-radius: 5px;
														  font-family: var(--fontfamily);
														  font-size: 12px;
														  font-weight: 400;
														  text-transform: uppercase;
														  letter-spacing: 0.2em;
														  color: var(--btnfontcolour1);
														  background-color: var(--btncolour1);
														  cursor: pointer;
														  outline: none;
														}
													}
					.cart-price-btn {
					  height: 50px;
					  width: 380px;
					  margin: 25px auto;
					}
											@media only screen and (max-width: 375px) {
												.cart-price-btn {
												  height: 50px;
												  width:  340px;
												  margin: 15px auto;
												}											
											}
												@media only screen and (max-width: 360px) {
													.cart-price-btn {
													  height: 50px;
													  width: 340px;
													  margin: 15px auto;
													}
												}
													@media only screen and (max-width: 320px) {
														.cart-price-btn {
														  height: 50px;
														  width: 300px;
														  margin: 15px auto;
														}
													}
					.cart-price-btn button {
					  height: 50px;
					  width: 60%;
					  margin-left: 20%;
					  box-sizing: border-box;
					  border: transparent;
					  border-radius: 10px;
					  font-family: var(--fontfamily);
					  font-size: 23px;
					  font-weight: 400;
					  text-transform: uppercase;
					  letter-spacing: 0.2em;
					  color: var(--btnfontcolour1);
					  background-color: var(--btncolour1);
					  cursor: pointer;
					  outline: none;
					}
											@media only screen and (max-width: 375px) {
												.cart-price-btn button {
												  height: 50px;
												  width: 60%;
												  margin-left: 20%;
												  box-sizing: border-box;
												  border: transparent;
												  border-radius: 10px;
												  font-family: var(--fontfamily);
												  font-size: 20px;
												  font-weight: 400;
												  text-transform: uppercase;
												  letter-spacing: 0.2em;
												  color: var(--btnfontcolour1);
												  background-color: var(--btncolour1);
												  cursor: pointer;
												  outline: none;
												}
											}
												@media only screen and (max-width: 360px) {
													.cart-price-btn button {
													  height: 50px;
													  width: 60%;
													  margin-left: 20%;
													  box-sizing: border-box;
													  border: transparent;
													  border-radius: 10px;
													  font-family: var(--fontfamily);
													  font-size: 20px;
													  font-weight: 400;
													  text-transform: uppercase;
													  letter-spacing: 0.2em;
													  color: var(--btnfontcolour1);
													  background-color: var(--btncolour1);
													  cursor: pointer;
													  outline: none;
													}
												}
													@media only screen and (max-width: 320px) {
														.cart-price-btn button {
														  height: 50px;
														  width: 60%;
														  margin-left: 20%;
														  box-sizing: border-box;
														  border: transparent;
														  border-radius: 10px;
														  font-family: var(--fontfamily);
														  font-size: 20px;
														  font-weight: 400;
														  text-transform: uppercase;
														  letter-spacing: 0.2em;
														  color: var(--btnfontcolour1);
														  background-color: var(--btncolour1);
														  cursor: pointer;
														  outline: none;
														}
													}
					.signup-btn {
					  height: 50px;
					  width: 380px;
					  margin: 8px auto;
					}
											@media only screen and (max-width: 375px) {
												.signup-btn {
												  height: 50px;
												  width: 340px;
												  margin: 8px auto;
												}
											}
												@media only screen and (max-width: 360px) {
													.signup-btn {
													  height: 50px;
													  width: 330px;
													  margin: 8px auto;
													}
												}
													@media only screen and (max-width: 320px) {
														.signup-btn {
														  height: 50px;
														  width: 300px;
														  margin: 8px auto;
														}
													}
					.signup-btn button {
					  height: 40px;
					  width: 30%;
					  float: left;
					  box-sizing: border-box;
					  border: transparent;
					  border-radius: 5px;
					  font-family: var(--fontfamily);
					  font-size: 13px;
					  font-weight: 400;
					  text-transform: uppercase;
					  letter-spacing: 0.2em;
					  color: var(--btnfontcolour1);
					  background-color: var(--btncolour1);
					  cursor: pointer;
					  outline: none;
					}
											@media only screen and (max-width: 375px) {
												.signup-btn button {
												  height: 40px;
												  width: 30%;
												  float: left;
												  box-sizing: border-box;
												  border: transparent;
												  border-radius: 5px;
												  font-family: var(--fontfamily);
												  font-size: 13px;
												  font-weight: 400;
												  text-transform: uppercase;
												  letter-spacing: 0.2em;
												  color: var(--btnfontcolour1);
												  background-color: var(--btncolour1);
												  cursor: pointer;
												  outline: none;
												}
											}
												@media only screen and (max-width: 360px) {
													.signup-btn button {
													  height: 40px;
													  width: 30%;
													  float: left;
													  box-sizing: border-box;
													  border: transparent;
													  border-radius: 5px;
													  font-family: var(--fontfamily);
													  font-size: 13px;
													  font-weight: 400;
													  text-transform: uppercase;
													  letter-spacing: 0.2em;
													  color: var(--btnfontcolour1);
													  background-color: var(--btncolour1);
													  cursor: pointer;
													  outline: none;
													}
												}
													@media only screen and (max-width: 320px) {
														.signup-btn button {
														  height: 30px;
														  width: 30%;
														  float: left;
														  box-sizing: border-box;
														  border: transparent;
														  border-radius: 5px;
														  font-family: var(--fontfamily);
														  font-size: 12px;
														  font-weight: 400;
														  text-transform: uppercase;
														  letter-spacing: 0.2em;
														  color: var(--btnfontcolour1);
														  background-color: var(--btncolour1);
														  cursor: pointer;
														  outline: none;
														}
													}	
											@media only screen and (max-width: 375px) {
												.increment{
													  height: 25px;
												}
											}
					.span {
					  display: inline-block;
					  height: 50px;
					  font-family: var(--fontfamily);
					  font-size: 10px;
					}
											@media only screen and (max-width: 375px) {
												.span {
												  display: inline-block;
												  height: 47px;
												  font-family: var(--fontfamily);
												  font-size: 10px;
												}
											}
												@media only screen and (max-width: 360px) {
													.span {
													  display: inline-block;
													  height: 47px;
													  font-family: var(--fontfamily);
													  font-size: 10px;
													}
												}
													@media only screen and (max-width: 320px) {
														.span {
														  display: inline-block;
														  height: 39px;
														  font-family: var(--fontfamily);
														  font-size: 10px;
														}
													}
					.product-price-btn button {
					  float: right;
					  display: inline-block;
					  height: 32px;
					  width: 120px;
					  margin-top: 10px 5px;
					  margin: auto 5px auto 0;
					  box-sizing: border-box;
					  border: transparent;
					  border-radius: 5x;
					  font-family: var(--fontfamily);
					  font-size: 14px;
					  font-weight: 400;
					  text-transform: uppercase;
					  letter-spacing: 0.2em;
					  color: var(--btnfontcolour1);
					  background-color: var(--btncolour1);
					  cursor: pointer;
					  outline: none;
					}
											@media only screen and (max-width: 375px) {
												.product-price-btn button {
												  float: right;
												  display: inline-block;
												  height: 30px;
												  width: 105px;
												  margin-top: 10px 5px;
												  box-sizing: border-box;
												  border: transparent;
												  border-radius: 5x;
												  font-family: var(--fontfamily);
												  font-size: 12px;
												  font-weight: 400;
												  text-transform: uppercase;
												  letter-spacing: 0.2em;
												  color: var(--btnfontcolour1);
												  background-color: var(--btncolour1);
												  cursor: pointer;
												  outline: none;
												}
											}
												@media only screen and (max-width: 360px) {
													.product-price-btn button {
													  float: right;
													  display: inline-block;
													  height: 30px;
													  width: 122px;
													  margin-top: 10px 5px;
													  box-sizing: border-box;
													  border: transparent;
													  border-radius: 5x;
													  font-family: var(--fontfamily);
													  font-size: 12px;
													  font-weight: 400;
													  text-transform: uppercase;
													  letter-spacing: 0.2em;
													  color: var(--btnfontcolour1);
													  background-color: var(--btncolour1);
													  cursor: pointer;
													  outline: none;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-price-btn button {
														  float: right;
														  display: inline-block;
														  height: 25px;
														  width: 100px;
														  margin-right: 5px;
														  box-sizing: border-box;
														  border: transparent;
														  border-radius: 5x;
														  font-family: var(--fontfamily);
														  font-size: 11px;
														  font-weight: 400;
														  text-transform: uppercase;
														  letter-spacing: 0.2em;
														  color: var(--btnfontcolour1);
														  background-color: var(--btncolour1);
														  cursor: pointer;
														  outline: none;
														}
													}
					.product-price-btn button:hover {
					  background-color: #79b0a1;
					}
											@media only screen and (max-width: 375px) {
												.product-price-btn button:hover {
												  background-color: #79b0a1;
												}
											}
												@media only screen and (max-width: 360px) {
													.product-price-btn button:hover {
													  background-color: #79b0a1;
													}
												}
													@media only screen and (max-width: 320px) {
														.product-price-btn button:hover {
														  background-color: #79b0a1;
														}
													}
					.family-button {
					  float: right;
					  display: inline-block;
					  height: 20px;
					  width: 65px;
					  margin-top: 10px 5px;
					  margin: auto 5px auto 0;
					  box-sizing: border-box;
					  border: transparent;
					  border-radius: 5px;
					  font-family: var(--fontfamily);
					  font-size: 12px;
					  font-weight: 400;
					  text-transform: uppercase;
					  letter-spacing: 0.2em;
					  color: var(--btnfontcolour1);
					  background-color: var(--btncolour1);
					  cursor: pointer;
					  outline: none;
					}
											@media only screen and (max-width: 375px) {
												.family-button {
												  float: right;
												  display: inline-block;
												  height: 20px;
												  width: 60px;
												  margin-top: 10px 5px;
												  box-sizing: border-box;
												  border: transparent;
												  border-radius: 5px;
												  font-family: var(--fontfamily);
												  font-size: 11px;
												  font-weight: 400;
												  text-transform: uppercase;
												  letter-spacing: 0.2em;
												  color: var(--btnfontcolour1);
												  background-color: var(--btncolour1);
												  cursor: pointer;
												  outline: none;
												}
											}
												@media only screen and (max-width: 360px) {
													.family-button {
													  float: right;
													  display: inline-block;
													  height: 20px;
													  width: 50px;
													  margin-top: 10px 5px;
													  box-sizing: border-box;
													  border: transparent;
													  border-radius: 5px;
													  font-family: var(--fontfamily);
													  font-size: 11px;
													  font-weight: 400;
													  text-transform: uppercase;
													  letter-spacing: 0.2em;
													  color: var(--btnfontcolour1);
													  background-color: var(--btncolour1);
													  cursor: pointer;
													  outline: none;
													}
												}
													@media only screen and (max-width: 320px) {
														.family-button {
														  float: right;
														  display: inline-block;
														  height: 20px;
														  width: 45px;
														  margin-right: 5px;
														  box-sizing: border-box;
														  border: transparent;
														  border-radius: 5px;
														  font-family: var(--fontfamily);
														  font-size: 10px;
														  font-weight: 400;
														  text-transform: uppercase;
														  letter-spacing: 0.2em;
														  color: var(--btnfontcolour1);
														  background-color: var(--btncolour1);
														  cursor: pointer;
														  outline: none;
														}
													}
					.family-button:hover {
					  background-color: #79b0a1;
					}
											@media only screen and (max-width: 375px) {
												.family-button:hover {
												  background-color: #79b0a1;
												}
											}
												@media only screen and (max-width: 360px) {
													.family-button:hover {
													  background-color: #79b0a1;
													}
												}
													@media only screen and (max-width: 320px) {
														.family-button:hover {
														  background-color: #79b0a1;
														}
													}	
					.side-container {
					  top: 40px; 
					  right: -40px;
					}
											@media only screen and (max-width: 375px) {

											}
												@media only screen and (max-width: 360px) {
														.side-container {
														right: -35px;
														}
												}
													@media only screen and (max-width: 320px) {
														.side-container {
														right: -30px;
														}
													}														
					.sizes-button {
					  height: 30px;
					  width: 75px;
					  display: block; 
					  float: right; 
					  transform: rotate(-90deg);
					  box-sizing: border-box;
					  border: transparent;
					  border-radius: 25px 25px 0 0;
					  font-family: var(--fontfamily);
					  font-size: 12px;
					  font-weight: 400;
					  text-transform: uppercase;
					  letter-spacing: 0.2em;
					  color: var(--btnfontcolour1);
					  background-color: var(--btncolour1t);
					  cursor: pointer;
					  outline: none;
					}
											@media only screen and (max-width: 375px) {
												.sizes-button {
												  height: 30px;
												  width: 70px;												  
												  box-sizing: border-box;
												  border: transparent;
												  border-radius: 25px 25px 0 0;
												  font-family: var(--fontfamily);
												  font-size: 11px;

												}
											}
												@media only screen and (max-width: 360px) {
													.sizes-button {
													  height: 30px;
													  width: 70px;
													  box-sizing: border-box;
													  border: transparent;
													  border-radius: 25px 25px 0 0;
													  font-family: var(--fontfamily);
													  font-size: 11px;
													}
												}
													@media only screen and (max-width: 320px) {
														.sizes-button {
														  height: 30px;
														  width: 60px;
														  box-sizing: border-box;
														  border: transparent;
														  border-radius: 25px 25px 0 0;
														  font-family: var(--fontfamily);
														  font-size: 10px;
														}
													}												
																																															
					.trxmsg {
					  margin-top: 75px;
					}
										@media only screen and (max-width: 415px) {
											.trxmsg {
											    margin-top: 25px;
											}
										}
											@media only screen and (max-width: 375px) {
											    .trxmsg {
												  margin-top: 20px;
												}
											}
												@media only screen and (max-width: 360px) {
												    .trxmsg {
													  margin-top: 10px;
													}
												}
													@media only screen and (max-width: 320px) {
													    .trxmsg {
														  margin-top: 5px;
														}
													}
					
					.table3c {
						width: 400px;
						height: 200px;
						margin: 0 auto;
						text-align: center;
					}
											@media only screen and (max-width: 375px) {
												.table3c {
													width: 360px;
													margin: 0 auto;
												}
											}
												@media only screen and (max-width: 360px) {
													.table3c {
														width: 340px;
														margin: 0 auto;
													}
												}
													@media only screen and (max-width: 320px) {
														.table3c {
															width: 318px;
															margin: 0 auto;
														}
													}
					.table3cchild1 {
						display: inline-block;
						width: 90px;
						margin: 0 auto;
					}
											@media only screen and (max-width: 375px) {
												.table3cchild1 {
													display: inline-block;
													width: 75px;
													margin: 0 auto;	
												}
											}
												@media only screen and (max-width: 360px) {
													.table3cchild1 {
														display: inline-block;
														width: 90px;
														margin: 0 auto;	
													}
												}
													@media only screen and (max-width: 320px) {
														.table3cchild1 {
															display: inline-block;
															width: 75px;
															margin: 0 auto;	
														}
													}
	     			.table3cchild .table3cchild1 p {
					  font-size: 16px;
					  text-align: center;
					  font-family: var(--fontfamily);
					  color: #414040;
					  font-weight: 600;
					  text-decoration: none;
					}
											@media only screen and (max-width: 375px) {
												.table3cchild .table3cchild1 p {
												  font-size: 14px;
												  text-align: center;
												  font-family: 'Hind', sans-serif;
												  color: #414040;
												  font-weight: 600;
												  text-decoration: none;
												}
											}
												@media only screen and (max-width: 360px) {
													.table3cchild .table3cchild1 p {
													  font-size: 11px;
													  text-align: center;
													  font-family: 'Hind', sans-serif;
													  color: #414040;
													  font-weight: 600;
													  text-decoration: none;
													}
												}
													@media only screen and (max-width: 320px) {
														.table3cchild .table3cchild1 p {
														  font-size: 9px;
														  text-align: center;
														  font-family: 'Hind', sans-serif;
														  color: #414040;
														  font-weight: 600;
														  text-decoration: none;
														}
													}
					.table3cchild {
						display: inline-block;
						width: 120px;
						margin:0 auto;
					}
											@media only screen and (max-width: 375px) {
												.table3cchild {
													display: inline-block;
													width: 108px;
													margin: 0 auto;
												}
											}
												@media only screen and (max-width: 360px) {
													.table3cchild {
														display: inline-block;
														width: 110px;
														margin: 0 auto;	
													}
												}
													@media only screen and (max-width: 320px) {
														.table3cchild {
															display: inline-block;
															width: 98px;
															margin: 0 auto;	
														}
													}
					.table3cseperator  {
						border-right: 2px solid  #CCCAC9;
 						border-left: 2px solid  #CCCAC9;
					}