@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Amatic+SC:wght@400;700&family=Lato:wght@300;400;700&display=swap');

:root{
	--font-main: 'Lato', sans-serif;
	--font-heading: 'Alfa Slab One', cursive;
	--purple-1: #b909f3;
	--orange-1: #ff6000;
	--blue-1: #15d3e9;
	--red-1: #e31b1b;
	--green-1: #a0d809;
	--green-2: #89d10a;
}

@font-face {
    font-family: 'olivier';
    src: url('/assets/fonts/olivier.eot');
    src: url('/assets/fonts/olivier.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/olivier.woff2') format('woff2'),
        url('/assets/fonts/olivier.woff') format('woff'),
        url('/assets/fonts/olivier.ttf') format('truetype'),
        url('/assets/fonts/olivier.svg#olivier') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



body{
	overflow-x:hidden;
	font-weight: 400;
	font-style: normal;
	overflow-x:hidden;
	font-family: var(--font-main);
    color: #4d4d4d;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    background: #fff url('/assets/images/body_bg.jpg');
}

img{
	max-width:100%;
}

.container{
	max-width: 1200px;
}

.container:not(.no-bg){
	background-color: #fff;
}

a{
	color: var(--purple-1);
	text-decoration:none !important;
}

/* Stop bootstrap adding padding right to the body */
body.modal-open{
	padding-right: 0px !important;
}

p{
	color: #4d4d4d;
	font-size: 14px;
}

.text-underline{
	text-decoration: underline;
}

.form-field-wrong{
	border: 1px solid #dc3545;
}

/*  ----------------------------------------------------------	*/
/*  					Sticky Footer 	 						*/
/*  ----------------------------------------------------------	*/
html, body{
	height: 100% !important;
}

#wrapper.stickyFooter{
	display:flex;
	flex-direction: column;
	min-height: 100% !important;
}

#wrapper.stickyFooter #footer{
	margin-top:auto;
}

@media (min-width: 576px) {
	.collapse-sm-none:not(.show) {
		display: block;
	}
	
	.w-sm-auto{
		width: auto !important;
	}
}

@media (min-width: 768px) {
	.collapse-md-none:not(.show) {
		display: block;
	}
	.w-md-auto{
		width: auto !important;
	}
}

@media (min-width: 992px) {
	.collapse-lg-none:not(.show) {
		display: block;
	}
	.w-lg-auto{
		width: auto !important;
	}
}

@media (min-width: 1200px) { 
	.collapse-xl-none:not(.show) {
		display: block;
	}
	.w-xl-auto{
		width: auto !important;
	}
	
}
/*  ----------------------------------------------------------	*/
/*  					Buttons / Headings 	 					*/
/*  ----------------------------------------------------------	*/
.btn{
	font-weight: 700;
	line-height:100%;
	border-radius: 0px;
	padding-top:10px;
	padding-bottom:10px;
	position: relative;
	overflow:hidden;
    cursor: pointer;
	/* font-family: var(--font-heading); */
	/* letter-spacing: 2px; */
}

/* For Payment Sense they override the button styling and there's no way to add our btn btn-primary class to it. Set styling here (the same as your .btn and .btn-primary class) - you will need to !important nearly all styling in .conntect-btn class */
.connect-btn, .connect-checkout-btn{
	background-color: #b909f3 !important;
	color: #fff !important;
	width: ;
	height: ; 
	font-weight: 700;
}

.btn-primary{
	background:#a0d809;
	border-color:#a0d809;
}

.btn-primary:hover{
	background:#bdff08;
	border-color:#bdff08;
}

.input-group-quantity .form-control{
	max-width: 80px;
	border: 0px;
	-webkit-appearance: none;
	 -moz-appearance: textfield;
}

.input-group-quantity .btn{
	
}

.input-group-quantity .btn:hover{
	color: ;
}


h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
	font-family:'olivier';
	color: #a0d809;
}

h1, .h1{ font-size: 2.2rem; }
h2, .h2{ font-size: 2rem; }
h3, .h3{ font-size: 2rem;}
h4, .h4{ font-size: 1.8rem;}
h5, .h5{ font-size: 1.6rem;}
h6, .h6{ font-size: 1rem;}

@media (min-width: 576px) {
	
}

@media (min-width: 768px) {
	h1, .h1{ font-size: 3rem; }
	h2, .h2{ font-size: 2.2rem; }
	h3, .h3{ font-size: 2.1rem;}
	h4, .h4{ font-size: 2rem;}
	h5, .h5{ font-size: 1.8rem;}
	h6, .h6{ font-size: 1rem;}
}

@media (min-width: 992px) {
	
}

@media (min-width: 1200px) {
	
}

.breadcrumbWrap{
	display: none;
}

/******************************************
*					HEADER				  *
*******************************************/
#header .navbar{
	padding-top: 0;
	margin-bottom: 10px;
}

.navbar-nav .nav-item .nav-link{
	font-family: var(--font-heading);
	font-size: 14px;
	color: #fff;
	background-color: var(--purple-1);
	border-radius: 5px;
	margin: 0 5px;
}

.navbar-nav.navbar__left .nav-item:first-child .nav-link{
	background-color: var(--orange-1);
}

.navbar-nav.navbar__left .nav-item:nth-child(2) .nav-link{
	background-color: var(--blue-1);
}

.navbar-nav.navbar__right .nav-item:first-child .nav-link{
	background-color: var(--red-1);
}

.navbar-nav.navbar__right .nav-item:nth-child(3) .nav-link{
	background-color: var(--green-1);
}

.navbar-nav.navbar__left .nav-item:first-child .nav-link:hover,
.navbar-nav.navbar__right .nav-item:first-child .nav-link:hover{
	background-color: #fff;
	color: #4d4d4d;
}

.header__top--icons .nav-link{
	color: #4d4d4d;
}

.navbar-light .navbar-toggler-icon {
    background-image: url('/assets/images/bars.svg');
}

.navbar-light .navbar-toggler{
	border: 3px solid #4d4d4d;
}

@media (max-width: 1130px){
	.navbar-nav .nav-item .nav-link{
		font-size: 12px;
		margin: 0 4px;
	}
}

@media (max-width: 1026px){
	.navbar-logo img{
		height: 100px;
	}
}

@media (max-width: 992px){
	#header .navbar{
		padding: 0;
	}

	.navbar-light .navbar-toggler{
		margin-left: 1rem;
	}

	.navbar-nav .nav-item .nav-link{
		margin-top: 2px;
		border-radius: 0;
		font-size: 18px;
		padding: 15px;
	}
}

@media (max-width: 410px){
	.nav__wrap .logo{
		height: 100px;
	}
}


/**********************************************
*					FOOTER					  *
**********************************************/
#footer{
	background-color: var(--green-2);
	color: #4d4d4d;
	font-size: 14px;
}

#footer a{
	color: #4d4d4d;
}

.ta__logo--wrap{
	background-color: #fff;
	border: 1px solid #34e0a1;
	margin: 5px auto;
	max-width: 146px;
	padding-top: 10px;
    font-size: 12px;
}

.ta__logo--text{
	text-align: center;
	display: block;
}

/**************************************************
*						OTHER					  *
***************************************************/

#popupOverlay{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
	z-index: 10;
}

.messagePopup.tcenter{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9999999999;
    background-color: #fff;
    padding: 15px 15px;
    align-items: center;
    transform: translate(-50%, -50%);
    border-radius: 10px;
}

.ll-skin-melon td .ui-state-default{
	color: #0069d9;
}

.ll-skin-melon td .ui-state-hover{
	background: #89d10a;
	color: white;
}

.ll-skin-melon td .ui-state-active{
	background: #89d10a;
	color: white;
}

.ll-skin-melon .ui-state-disabled .ui-state-default{
	/* color: #82afde; */
}

.category-grouped-product-div h5 {
font-size:30px;
}

.largeText {
	font-size:30px;
}