@charset "utf-8";
/* CSS Document */
:root {
	--bar-width: 30px; --bar-height: 5px; --hamburger-gap: 3px; --foreground: black; --background: black; --animation-timing: 200ms ease-in-out; --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2); --hamburger-margin: 8px; --grid-4-column-gap: 8px; --id-green01: #9DC41D; --id-green-02: #819A31; --id-green-03: #626F36; --id-green-04: #3F452D; --id-green-05: #31332A; --id-purple: #614A6B; --id-purple-50: #b0a5b5
}
a:link, a:visited {
	color: #2458BF; font-weight: bold
}
a:hover {
	color: #FFBC2B; text-decoration: underline
}
a:active {
	color: red; text-decoration: none
}
#admin-content {
	max-width: 600px; margin: 0 auto; background-color: #B3D5F2; padding: 0 5px 10px
}
.admin-logo {
	width: 320px; max-width: 100%; margin: 0 auto; background-color: white; padding: 5px; border-radius: 15px
}
#admin-menu {
	max-height: 0; overflow: hidden
}
#admin-mobile-holder {
	display: block; background-color: white; height: 50px; text-align: left; margin: 0 -5px; position: relative; z-index: 20
}
.alert-band {
	border-top: solid 1px red; border-bottom: solid 1px red; font-weight: bold; padding: 5px
}
.bg-fade-70 {
	background-image: url("images/bg-fade-70.png")
}
.bg-fade-to-black {
	background: #000; background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 100%); color: white
}
.bg-grey {
	background-color: #C0C0C0 !important
}
.bg-light-blue {
	background-color: #B3D5F2
}
.bg-white {
	background-color: white !important
}
body {
    font-family: "aileron", sans-serif; font-weight: 400; font-style: normal; color: #424141; font-size: 1em; text-align: center; line-height: 1.5em; margin: 0
}
.bottom-address {
	color: white; float: right; text-align: right;
}
.bottom-address p {
	margin: 0
}
.bottom-block {
	background-color: #2458BF; border-radius: 15px; padding: 20px 10px; margin: 10px 6px; max-width: 1920px
}
.bottom-curve {
	clip-path: ellipse(100% 60% at 50% 40%);
}
.bottom-logo {
	width: 200px; max-width: 100%; float: left; border-radius: 15px; background-color: white; padding: 5px
}
.bottom-logo img {
	max-width: 100%; height: auto; display: block
}
.bottom-rounded-20 {
	border-bottom-left-radius: 20px; border-bottom-right-radius: 20px
}
.button {
	color: #FFFFFF !important; background-color: #11538C; text-align: center; padding: 5px 20px; border-radius: 10px; font-weight: bold;
}
.button-grey {
	color: #4F4F4F !important; background-color: #B8B8B8; text-align: center; padding: 5px 20px; border-radius: 10px; font-weight: bold;
}
.button-orange {
	color: black !important; background-color: #EA5B0C; text-align: center; padding: 5px 20px; border-radius: 10px; font-weight: bold;
}
.button-red {
	color: #FFFFFF !important; background-color: #ff0000; text-align: center; padding: 5px 20px; border-radius: 10px; font-weight: bold;
}
.button-yellow {
	color: #2458BF !important; background-color: #FFED00; text-align: center; padding: 5px 20px; border-radius: 10px; font-weight: bold;
}
a.button:link, a.button:visited, a.button-red:link, a.button-red:visited {
	text-decoration: none
}
a.button:hover {
	background-color: white; color: #11538C !important
}
a.button:active {
	background-color: darkgrey; color: black !important
}
a.button-red:hover {
	background-color: darkorange; color: #FFFFFF !important
}
a.button:active {
	background-color: darkgrey; color: black !important
}
.cat-hero {
	background-size: cover; background-position: center center; overflow: hidden
}
.cat-title {
	position: absolute; bottom: 20px; left: 0; right: 0; background-image: url("images/white-fade.png"); padding: 0
}
.cat-title h1 {
	margin: 5px; font-size: 1.2em
}
.category-image {
	width: 70%; max-width: 600px; border-radius: 15px; margin: 30px auto; overflow: hidden; position: relative
}
.category-image img {
	width: 100%; height: auto; display: block
}
.category-item {
	padding: 3px 5px; border-radius: 7px; border: solid #2458BF 1px
}
.category-item a:link, .category-item a:visited {
	text-decoration: none
}
.category-menu {
	display: flex; flex-wrap: wrap; gap: 5px; margin: 10px; justify-content: center
}
.centre-table {
	margin: 0 auto
}
.clear {
	clear: both; height: 0; overflow: hidden; line-height: 0
}
.control-column {
	float: left; width: 20%; margin: 0; text-align: right;
}
.customer-band {
	background-color: #B3D5F2; font-weight: bold; display: flex; justify-content: center; gap: 10px; align-content: center; align-items: center; padding: 5px
}
.customer-band-item {
	
}

.div-400 {
	max-width: 400px; margin: 0 auto
}
.div-600 {
	max-width: 600px; margin: 0 auto
}
.div-800 {
	max-width: 800px; margin: 0 auto
}
.div-1000 {
	width: calc(100% - 20px); max-width: 980px; margin: 0 auto; padding: 0 10px
}
.div-1200 {
	max-width: 1200px; margin: 0 auto
}
.div-1600 {
	max-width: 1000px; margin: 0 auto
}
.div-lozenge {
	border-radius: 15px; overflow: hidden
}
.div-lozenge-flat-bottom {
	border-top-left-radius: 15px; border-top-left-radius: 15px; overflow: hidden
}
.div-pad-10 {
	padding: 10px !important
}
.div-pad-20 {
	padding: 20px !important
}
.div-pad-top-5 {
	padding-top: 5px !important; overflow: hidden
}
.div-pad-top-10 {
	padding-top: 10px !important; overflow: hidden
}
.error-message {
	color: red; font-weight: bold; text-align: center
}
h1 {
	font-size: 2em; line-height: 1em
}
.hamburger-holder {
	float:right; cursor: pointer
}
.hamburger-menu {
	--x-width: calc(var(--hamburger-height) * 1.41421356237); display: flex; flex-direction: column; gap: var(--hamburger-gap); width: max-content; position: absolute; top: 16px; /*top: var(--hamburger-margin); left: var(--hamburger-margin);*/ right: 8px; z-index: 20; cursor: pointer;
}
.hamburger-menu::before, .hamburger-menu::after, .hamburger-menu input {
	content: ""; width: var(--bar-width); height: var(--bar-height); background-color: var(--foreground);  border-radius: 999px; transform-origin: left center; transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing),  translate var(--animation-timing)
}
.hamburger-menu input {
	appearance: none; padding: 0; margin: 0; outline: none; pointer-events: none
}
.hamburger-menu:has(input:checked)::before {
	rotate: 45deg; width: var(--x-width); translate: 0 calc(var(--bar-height) / -2);
}
.hamburger-menu:has(input:checked)::after {
	rotate: -45deg; width: var(--x-width);  translate: 0 calc(var(--bar-height) / 2);
}
.hamburger-menu:has(input:checked) + .sidebar{
	translate: calc(100vw - 17rem);
}
.hamburger-menu input:checked {
	opacity: 0; width: 0
}
.hero-home {
	background-image:url("images/hero-home-480.jpg"); padding: calc(30% + 30px) 0 0; margin: 0; background-position:top center;
}
.hero-list {
	background-image:url("images/hero-list-480.jpg"); padding: calc(30% + 30px) 0 0; margin: 0; background-position:top center;
}
.hero-old-list {
	background-image:url("images/hero-list-480.jpg"); padding: 20px 0; margin: 0; background-position:top center;
}
.hero-product-liberstore {
	background-image:url("images/hero-stationery-product-480.jpg"); padding: 20px 0 0; margin: 0; background-position:top center;
}
.hero-product-stopshop {
	background-image:url("images/grocery-product-480.jpg"); padding: 20px 0 0; margin: 0; background-position:top center;
}
.hero-stationery {
	background-image:url("images/hero-stationery-480.jpg"); padding: calc(30% + 30px) 0 0; margin: 0; background-position:top center;
}
img {
	border: none; max-width: 100%; height: auto
}
.indent-10 {
	margin-left: 10px
}
.indent-20 {
	margin-left: 20px
}
.indent-30 {
	margin-left: 30px
}
input[type=text], input[type=email], select, textarea, input[type=date], input[type=password], input[type=number] {
	font-size: 1em; color: #464545; background-color: #FFFFFF; font-family: Muli, sans-serif; font-weight: normal; padding: 10px; border-radius: 15px; border: solid 1px #009B91; background: #DCDCDC; text-align: center; outline: none; box-sizing: border-box;
}
input[type=text]:focus {
	background-color: #FFFFFF; border: solid 2px #183D36
}
input[type=submit] {
	cursor: pointer
}
.input-50 {
	width: 50px
}
.input-100 {
	width: 100px
}
.input-150 {
	width: 150px
}
.input-200 {
	width: 200px
}
.input-300 {
	width: 300px
}
.input-400 {
	width: 400px; max-width: 100%
}
.input-error {
	background-color: #F0BCBD !important; border: solid 2px #99000F !important
}
.input-mandatory {
	border: solid 1px #FF0000 !important
}
.list-item {
	width: 90%; max-width: 500px; border-radius: 15px; background-color: white; padding: 2px 10px; margin: 0 auto 5px; text-align: left
}
.list-item h4 {
	margin: 5px 0 0 0
}
.logo {
	height: 50px; width: 200px; margin: 10px 20px; max-width: 240px; background-color: white; border-radius: 25px; text-align: center
}
.logo-holder {
	float: left
}
.login {
	margin: 0 20px
}
.login a:link, .login a:visited {
	text-decoration: none
}
.login a:hover {
	color: aqua
}
.login a:active {
	color: black
}
.logo img {
	height: 30px; width: auto; margin: 10px 0; max-width: 80%
}
.margin-bottom-10 {
	margin-bottom: 10px; overflow: hidden
}
.margin-bottom-zero {
	margin-bottom: 0; overflow: hidden
}
.margin-top-10 {
	margin-top: 10px !important; overflow: hidden
}
.margin-top-zero {
	margin-top: 0; overflow: hidden
}
.master-group-image {
	width: 95%; border-radius: 15px; overflow: hidden; margin: 0 auto
}
.master-group-image img {
	display: block; width: 100%; height: auto
}
#main-content {
	max-width: 1920px; margin: 0
}
#main-drop {
	display: none
}
#menu-bar {
	height: 70px; background: #000000; background: linear-gradient(180deg,rgba(0, 0, 0, .80) 0%, rgba(0, 0, 0, 0) 100%); position: absolute; top: 0; left: 0; right: 0; z-index: 20; text-align: left; display: flex; justify-content: space-between; align-items: center
}
#menu-holder {
    max-width: 1920px; margin: 0 auto; padding: 0 30px; display: block;
}
.menu-items {
	display: none
}
.menu-item a:link, .menu-item a:visited, #main-drop a:link,  #main-drop a:visited{
    color: #FFFFFF; text-decoration: none; margin: 0 20px; font-weight: 100
}
.menu-list {
	padding: 10px
}
.menu-list h3 {
	line-height: 1em; margin: 10px 0 0 0
}
.menu-list h4 {
	line-height: 1em; margin: 5px 0 0 0
}
.menu-list p {
	line-height: 1em; margin: 3px 0 0 0
}
#mobile-holder {
	overflow: hidden; display: block; background-color: white; height: 50px; text-align: left
}
#mobile-menu {
	overflow: hidden; background-color: #FFFFFF; background-color: rgba(255,255,255, 0.8); line-height: 1.8em; text-align: left; color: #183D36; z-index: 20; padding: 0 20px; max-height: 0; transition: max-height 0.5s, padding 0.5s; border-bottom-left-radius: 10px; font-size: 1em; width: 200px; position: absolute; right: 0; top: 50px; font-size: 90%; color: black
}
#mobile-menu a:link, #mobile-menu a:visited {
	text-decoration: none
}
#modal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal__window {
  position: relative; background-color: white; padding: 2em; width: 320px; max-width: 100%; border-radius: 15px
}
.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
}
#modal:not(:target) {
    visibility: hidden;
    opacity: 0;
}
.offer-child {
	margin: 5px; 
}
.offer-child a:link, .offer-child a:visited {
	text-decoration: underline
}
.offer-flex {
	margin: 0 5px
}
.offer-grid {
	width: 100%; text-align: center; grid-auto-flow: column
}
.offer-item {
	width: calc(100% - 20px); margin: 0 10px 10px;
}
.offer-pic {
	background-size: cover; background-position: center; padding-bottom: 50%; border-top-left-radius: 15px; border-top-right-radius: 15px; border: 1px solid #AAAAAA; border-bottom: none
}
.offer-preview {
	width: 200px; border-radius: 15px
}
.offer-text {
	background-color: white; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border: 1px solid #AAAAAA; border-top: none; overflow: hidden; padding: 0 10px
}
.product-container {
	display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 5px; grid-row-gap: 5px; padding: 0 5px; max-width: 1200px; margin: 0 auto; justify-content: center
}
.product-image {
	width: 300px; max-width: 100%; height: 300px; border-top-left-radius: 15px; border-top-right-radius: 15px; overflow: hidden; margin: 0 auto
}
.product-panel {
	border-radius: 15px; overflow: hidden; border: solid 1px #8F8F8F; max-width: 250px
}
select {
	text-align: left
}
.sidebar {
	margin-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem); background-image: url("images/mobile-menu-gradient.png"); background-size: cover; background-repeat: repeat-x; width: 15rem; padding: 0.5rem 1rem 2rem 0.5rem; transition: translate var(--animation-timing); position: absolute; z-index: 20; translate: -110%; top: 8px; text-align: left; border-left: solid 1px #FFFFFF; border-bottom: solid 1px #FFFFFF; border-bottom-left-radius: 20px
}
.sidebar a:link, .sidebar a:visited {
	color: white; text-decoration: none
}
.sub-list {
	float: left; width: 80%; margin: 0
}
#sub-menu {
	margin-left: 20px; max-height: 0; overflow: hidden; transition: max-height var(--animation-timing);
}
.table-list-2 th {
	background-color: #FBC13C; color: #324158; font-weight: bold; padding: 3px
}
.table-list-2 td {
	padding: 3px
}
.text-align-centre {
	text-align: center
}
.text-align-left {
	text-align: left
}
.text-align-right {
	text-align: right
}
.text-align-variable {
        text-align: center
    }
.text-black {
	color: black !important
}
.text-blue {
	color: #0F70B7 !important
}
.text-bold {
	font-weight: 700
}
.text-bold-blue {
	font-weight: 700; color: #0F70B7
}
.text-bold-orange {
	font-weight: 700; color: #EA5B0C
}
.text-bold-italic {
	font-weight: 700; font-style: italic
}
.text-courier {
	font-family: Courier New, serif
}
.text-grey {
	color: #7C7C7C !important
}
.text-italic {
	font-style: italic
}
.text-light {
	font-weight: 100
}
.text-orange {
	color: #F39200
}
.text-thin {
	font-weight: 100
}
.text-white {
	color: white !important
}
.top-hero {
	background-size: cover; background-position: top center
}
.view-list-header {
	background-image: url("images/grey-fade-70.png"); background-repeat: repeat; border-radius: 15px; margin: 0 10px; color: white; padding: 5px 10px;
}
.view-list-header h2 {
	font-size: 1.2em
}
.view-list-image {
	width: calc(100% - 10px); background-size: cover; background-position: center; border-radius: 5px; margin: 5px; overflow: hidden; padding-bottom: 40%
}
.view-list-item {
	background-color: white; border-radius: 10px; margin: 5px
}
.width-250 {
	width:250px; max-width: 100%; display: inline-block
}
.width-300 {
	width:300px; max-width: 100%; display: inline-block
}

@media screen and (min-width: 480px) {
	.hero-home {
        background-image:url("images/hero-home-600.jpg"); padding: calc(30% + 30px) 0 0; margin: 0
    }
	.hero-list {
        background-image:url("images/hero-list-600.jpg"); padding: calc(30% + 30px) 0 0; margin: 0; background-position:top center;
    }
	.hero-old-list {
        background-image:url("images/hero-list-600.jpg")
    }
	.hero-product-liberstore {
        background-image:url("images/hero-stationery-product-600.jpg"); padding: 20px 0 0; 
    }
	.hero-product-stopshop {
        background-image:url("images/grocery-product-600.jpg"); padding: 20px 0 0; 
    }
	.hero-stationery {
        background-image:url("images/hero-stationery-600.jpg"); padding: calc(30% + 30px) 0 0;
    }
	.view-list-grid {
        display: grid; grid-template-columns: 50% 50%
    }
	.view-list-header{
		margin: 0 auto; max-width: 460px
    }

}

@media screen and (min-width: 600px) {
	.hero-home {
        background-image:url("images/hero-home-800.jpg"); padding: calc(30% + 30px) 0 0; margin: 0
    }
	.hero-list {
        background-image:url("images/hero-list-800.jpg"); padding: calc(30% + 30px) 0 0; margin: 0; background-position:top center;
    }
	.hero-old-list {
        background-image:url("images/hero-list-800.jpg")
    }
	.hero-product-liberstore {
        background-image:url("images/hero-stationery-product-800.jpg"); padding: 20px 0 0; 
    }
	.hero-product-stopshop {
        background-image:url("images/grocery-product-800.jpg"); padding: 20px 0 0; 
    }
	.hero-stationery {
        background-image:url("images/hero-stationery-800.jpg"); padding: calc(30% + 30px) 0 0;
    }
	.offer-child, .offer-child-600 {
		flex: 1; flex-basis: 40%; display: flex; flex-direction: column
	}
	.offer-flex {
		display: flex; flex-direction: row; flex-wrap: wrap
	}
	 .offer-grid {
        display: ; grid-gap: 5px; justify-items: center; grid-template-columns: 1fr 1fr
	}
	.offer-text {
		height: 300px
	}
}

@media screen and (min-width: 800px) {
	.cat-title h1 {
		font-size: 1.4em
	}
	.hero-home {
        background-image:url("images/hero-home-1000.jpg"); padding: calc(30% + 30px) 0 0; margin: 0
    }
	.hero-list {
        background-image:url("images/hero-list-1000.jpg"); padding: calc(20% + 30px) 0 0; margin: 0; background-position:top center;
    }
	.hero-product-liberstore {
        background-image:url("images/hero-stationery-product-1000.jpg"); padding: 20px 0 0; 
    }
	.hero-product-stopshop {
        background-image:url("images/grocery-product-1000.jpg"); padding: 20px 0 0; 
    }
	.hero-stationery {
        background-image:url("images/hero-stationery-1000.jpg"); padding: calc(30% + 30px) 0 0;
    }
	.offer-child {
		flex-basis: 30%
	}
	.offer-child-600 {
		display: none
	}
    .offer-text {
		height: 350px
	}
	.view-list-grid {
        grid-template-columns: 33% 33% 33%
    }
}

@media screen and (min-width: 1000px) {
	.cat-title h1 {
		font-size: 1.5em
	}
	.hero-home {
        background-image:url("images/hero-home-1200.jpg"); padding: calc(30% + 30px) 0 0; margin: 0
    }
	.hero-list {
        background-image:url("images/hero-list-1200.jpg"); padding: calc(20% + 30px) 0 0; margin: 0; background-position:top center;
    }
	.hero-old-list {
        background-image:url("images/hero-list-1200.jpg")
    }
	.hero-product-liberstore {
        background-image:url("images/hero-stationery-product-1200.jpg"); padding: 20px 0 0; 
    }
	.hero-product-stopshop {
        background-image:url("images/grocery-product-1200.jpg"); padding: 20px 0 0; 
    }
	.hero-stationery {
        background-image:url("images/hero-stationery-1200.jpg"); padding: calc(20% + 30px) 0 0;
    }
	.view-list-grid {
        display: grid; grid-template-columns: 25% 25% 25% 25%
    }
}

@media screen and (min-width: 1200px) {
	.hero-home {
        background-image:url("images/hero-home-1600.jpg"); padding: calc(30% + 30px) 0 0; margin: 0
    }
	.hero-list {
        background-image:url("images/hero-list-1600.jpg"); padding: calc(20% + 30px) 0 0; margin: 0; background-position:top center;
    }
	.hero-old-list {
        background-image:url("images/hero-list-1600.jpg")
    }
	.hero-product-liberstore {
        background-image:url("images/hero-stationery-product-1600.jpg"); padding: 20px 0 0; 
    }
	.hero-product-stopshop {
        background-image:url("images/grocery-product-1600.jpg"); padding: 20px 0 0; 
    }
	.hero-stationery {
        background-image:url("images/hero-stationery-1600.jpg"); padding: calc(20% + 30px) 0 0;
    }
	.offer-text {
		height: 210px
	}
}

@media screen and (min-width: 1600px) {
	.hero-home {
        background-image:url("images/hero-home-1920.jpg"); padding: calc(30% + 30px) 0 0; margin: 0
    }
	.hero-list {
        background-image:url("images/hero-list-1920.jpg"); padding: calc(15% + 30px) 0 0; margin: 0; background-position:top center;
    }
	.hero-stationery {
        background-image:url("images/hero-stationery-1920.jpg"); padding: calc(15% + 30px) 0 0;
    }
	.hero-old-list {
        background-image:url("images/hero-list-1920.jpg")
    }
	.hero-product-liberstore {
        background-image:url("images/hero-stationery-product-1920.jpg"); padding: 20px 0 0; 
    }
	.hero-product-stopshop {
        background-image:url("images/grocery-product-1920.jpg"); padding: 20px 0 0; 
    }
	#main-content, .bottom-block {
        max-width: 1915px; margin: 0 auto
    }
	.menu-items {
        width: 70%; text-align: right; display: flex; justify-content: flex-start; align-items: center; height: 100px; margin-left: 20%;
    }
	
}