@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Regular.woff2') format('woff2'),
        url('../font/Roboto-Regular.woff') format('woff'),
        url('../font/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Bold.woff2') format('woff2'),
        url('../font/Roboto-Bold.woff') format('woff'),
        url('../font/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('../font/Roboto-Light.woff2') format('woff2'),
	url('../font/Roboto-Light.woff') format('woff'),
	url('../font/Roboto-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/*
Theme Name: Illusmart
Theme URI: https://www.illusmart.com
Author: Martin Gross
Author URI: https://www.illusmart.com
Description: Tailor-made theme
Version: 1.0
License: Copyright - Martin Gross
Tags: illusmart
Text Domain: illusmart
*/

/* ======== Basic ======== */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}

body,
html {
	width: 100%;
	height: 100%;
}

body {
	text-align: center;
	background-color: #fff;
}

label,
input,
select,
textarea {
	-webkit-appearance: none;	
}

.menu,
.mobfire,
label,
.button,
.listing-pictures {
	user-select: none;
	-ms-user-select: none;
	-o-user-select:none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.unclickable {
	pointer-events: none;
}

ol li {
	list-style-position: outside;
	margin-left: 20px;
}

ul {
	padding-left: 0;
}

ul li,
ul li.order-product-item {
	list-style: none;
	position: relative;
	padding-left: 10px;
}

ul li::before {
	content: '•';
	position: absolute;
	left: 0;
	top: 0;
	width: 10px;
}

ul li.menu-item,
.prefooter ul li,
ul li.ui-menu-item {
	list-style: none;	
	padding-left: 0;
}

ul li.menu-item::before,
.prefooter ul li::before,
ul li.ui-menu-item::before {
	display: none;
}

h1,
.content-section {
	margin: 0 0 30px;
}

h2,
h3,
h4,
h5,
p,
hr,
ul,
ol {
	margin: 0 0 15px;
}

p:last-child,
ul:last-child,
ol:last-child,
.content-section:last-child {
	margin-bottom: 0;	
}

h1 {
	color: #1e98d7;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

.left {
	float: left;
}

.right {
	float: right;
}

.centered {
	text-align: center;	
}

.full-width {
	width: 100%;
}

.container {
	overflow: hidden;
}

.wrapper {
	padding: 20px 0;
}

.wrap {
	padding: 0 20px;
}

.main {
	padding: 51px 0 31px 50px;
	text-align: left;
}

.half-left,
.half-right {
	margin-top: 30px;
}

@media only screen and (max-width: 800px)
{
	.half {
		margin-bottom: 40px;
	}
	
	.half:last-child {
		margin-bottom: 0;
	}
}

@media only screen and (min-width: 800px) {
	.half,
	.half-left,
	.half-right {
		float: left;
		width: 50%;
	}

	.half:nth-of-type(odd),
	.half-left {
		clear:both;
		padding-right: 20px;
	}

	.half:nth-of-type(even),
	.half-right {
		padding-left: 20px;
	}
}

@media only screen and (max-width:800px) {
	.third {
		padding-bottom: 30px;
	}
	
	.third:last-child {
		padding-bottom: 0;
	}	
}

@media only screen and (min-width:800px) {
	.third {
		width: 33.3%;
		float: left;
		padding-bottom: 30px;
	}

	.third:nth-of-type(3n+1) {
		clear: both;
		padding-right: 20px;	
	}

	.third:nth-of-type(3n+2) {
		padding-left: 10px;
		padding-right: 10px;
	}

	.third:nth-of-type(3n) {
		padding-left: 20px;
	}
}

.clear-left {
	clear: left;
}

.clear-right {
	clear: left;
}

.clear-both {
	clear: both;
}

/* ======== Fonts ======== */

body,
input,
textarea,
select,
.marker-outer {
	font-size: 16px; line-height: 24px; font-family: 'Roboto', sans-serif;
}

h1 {
	font-size: 30px;
	line-height: 40px;
}

h2 {
	font-size: 21px;
	line-height: 28px;
}

h3 {
	font-size: 19px;
	line-height: 26px;
}

h4 {
	font-size: 17px;
	line-height: 23px;
}

h5 {
	font-size: 16px;
	line-height: 22px;
}

.picker-box,
.wrapper-pagehome label,
.wrapper-pagehome input,
.wrapper-pagehome select,
.selected-ingredient .ingredient-name {
	font-size: 14px;
	line-height: 18px;
}

table td {
	line-height: 20px;
}

.footer {
	font-size: 14px;
	line-height: 14px;
}

strong,
h1,
.h1-like,
h2,
h3,
h4,
h5,
.bold,
.button,
input[type="submit"] {
	font-weight: 700;
}

body,
input,
textarea,
select,
.regular {
	font-weight: 400;
}

.uppercase {
	text-transform: uppercase;
}

.lowercase {
	text-transform: lowercase;
}

body {
	color: #000;
}

a {
	color: #1e98d7;
}

.green {
	color: #27cf3e;
}

.red {
	color: #cf2727;
}

a,
.menu-item a:hover,
a.button:hover {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* ======== Header ======== */

.header {
	position: fixed; top: 0; left: 0; width: 100%;
	padding: 10px 0 10px 50px;
	border-bottom: 1px #d7dee4 solid;
	background: rgba(255,255,255,0.9);
	z-index: 9994;
}

.header img {
	height: 30px;
}

.header-logo {
	float: left;
}

.header-icons {
	display: flex;
	float: right;
}

.header-icons li {
	display: inline-block;
	vertical-align: middle;
}

.header-icons a {
	display: block;
	margin-right: 10px;
	opacity: 1;
}

.header-icons a:hover {
	opacity: 0.5;
}

.header-icons li:last-child a {
	margin-right: 0;
}

/* ======== Sidemenu ======== */

.sidemenu {
	position: fixed;
	top: 0;
	left: 0;
	max-width: 50px;
	height: 100%;
	overflow: hidden;
	text-align: left;
	background-color: #25282c;
	z-index: 9995;
}

.clicked .sidemenu {
	max-width: 300px;
}

.sidemenu-top {
	border-bottom: 1px #373e44 solid;
	background-color: #15181c;
}

.hamburger {
	position: relative;
	width: 50px;
	height: 50px;
	cursor: pointer;
}

.hamburger:hover {
	opacity: 1;
}

.hamburger div {
	position: absolute;
	left: 11px;
	width: 28px;
	height: 3px;
	background-color: #fff;
}

.hamburger div.line-2 {
	opacity: 1;
}

.hamburger div.line-1 {
	bottom: 31px;
}

.hamburger div.line-2 {
	bottom: 23px;
}

.hamburger div.line-3 {
	bottom: 15px;
}

.clicked .hamburger div {
	background-color: #cf2727;
}

.hamburger:hover div {
	background-color: #1e98d7;
}

.clicked .hamburger div.line-1,
.clicked .hamburger div.line-3 {
	bottom: 23px;
}

.clicked .hamburger div.line-1,
.clicked .hamburger div.line-3 {
	width: 33px; left: 9px;
}

.clicked .hamburger div.line-1 {
	transform: rotate(33deg);
}

.clicked .hamburger div.line-2 {
	opacity: 0;
}

.clicked .hamburger div.line-3 {
	transform: rotate(-33deg);
}

.sidemenu .menu-item a {
	display: block;
	padding: 10px;
	background: transparent;
	opacity: 0.7;
	white-space: nowrap;
}

.sidemenu .menu-item a:hover {
	background: rgba(255,255,255,0.2);
}

.sidemenu .menu-item.current-menu-item a,
.sidemenu .menu-item.current-menu-item-child a {
	background: #1e98d7;
}

.sidemenu .menu-item a:hover,
.sidemenu .menu-item.current-menu-item a,
.sidemenu .menu-item.current-menu-item-child a {
	opacity: 1;
}

.sidemenu .menu-item-icon, .sidemenu .menu-item-title {
	display: inline-block;
	vertical-align: middle;
}

.sidemenu .menu-item-icon img {
	width: 30px;
	height: 30px;
}

.sidemenu .menu-item-title {
	margin-left: 20px;
	margin-right: 10px;
	color: #fff;
}

/* ======== Content elements ======== */

.breadcrumb {
	padding-bottom: 10px;
}

.breadcrumb a,
.breadcrumb span,
.breadcrumb-separator {
	display: inline-block;
	vertical-align: middle;
}

.breadcrumb-separator {
	padding-left: 8px;
	padding-right: 7px;
}

.breadcrumb-separator img {
	width: auto;
	height: 8px;
}

.circle-icon {
	opacity: 1;
	cursor: pointer;
}

.circle-icon:hover {
	opacity: 0.5;
}

.circle-icon img {
	width: 30px;
	height: 30px;
}

/* ======== Tables ======== */

.overflow-x {
	width: auto;
	overflow-x: auto;
}

table {
	border-collapse: collapse;
}

tbody tr:nth-of-type(odd) td {
	background: #eee;
}

.table-green tbody tr:nth-of-type(odd) td {
	background: #ebf9ea;
}

.table-red tbody tr:nth-of-type(odd) td {
	background: #ffebee;
}

tbody tr:hover td,
.table-green tbody tr:hover td,
.table-red tbody tr:hover td {
	background: #e6f2f8;
}

th,
td {
	height: 35px;
	padding: 5px 7px;
	border: 1px #a8a9ab solid;
}

td.cell-buttons,
th.cell-buttons {
	padding: 2px 0 0;
	border: 0;
}

table tbody tr td.cell-buttons,
table tbody tr td.cell-buttons:nth-of-type(odd),
table tbody tr td.cell-buttons:hover {
	background: transparent;
}

.number-cell,
.total-cell {
	width: 70px;
}

.created-cell,
.transport-cell,
.driver-cell {
	width: 100px;
}

.phone-cell {
	width: 140px;
}

.customer-cell {
	width: 240px;
}

.orders-summary .cell-buttons {
	width: 115px;
}

.cell-button {
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
}

table .order-product-item,
table .order-product-text {
	padding: 0;
}

table li {
	margin-bottom: 3px;
}

table li:last-child {
	margin-bottom: 0;
}

.product-count {
	margin-bottom: 5px;
}

.product-count:last-child {
	margin-bottom: 0;
}

.product-count-value, .product-count-name {
	display: inline-block;
	vertical-align: middle;
}

.product-count-value {
	width: 30px;
}

/* ======== Orders ======== */

.page-title-outer,
.button.product-add-button,
.order-product-summary,
.order-total-show,
.order-transport {
	margin-bottom: 20px;
}

.page-title-outer h1,
.picker-boxes-outer,
.picker-box,
.ingredient-select,
.order-transport-fields {
	margin-bottom: 10px;
}

.ingredient-select {
	padding-bottom: 10px;
}

.picker-boxes:last-child,
.order-transport-fields:last-child {
	margin-bottom: 0;
}

.page-title-outer h1,
.order-buttons,
.picker-box,
.ingredient-control-button,
.selected-ingredient .ingredient-name,
.order-product-control-button,
.order-product-text {
	display: inline-block;
	vertical-align: top;
}

.page-title-outer h1 {
	margin-right: 20px;
}

.order-buttons .button {
	min-width: 100px;
	margin-right: 10px;
}

.picker-box {
	margin-right: 10px;
	text-align: center;
	color: #1e98d7;
	border: 1px #1e98d7 solid;
	cursor: pointer;
}

.picker-box.product-box {
	color: #023c56;
	border-color: #023c56;
}

.picker-box:hover,
.picker-box.product-box:hover {
	color: #27cf3e;
	border-color: #27cf3e;
}

.picker-box.active,
.picker-box.product-box.active:hover {
	color: #fff;
	background-color: #27cf3e;
	border-color: #27cf3e;
}

.picker-box-inner {
	display: table;
	width: 90px;
	height: 60px;
}

.picker-box-name {
	padding: 0 5px;
	display: table-cell;
	vertical-align: middle;
}

.wrapper-pagehome input,
.wrapper-pagehome select {
	width: auto;
}

.ingredient-control-button,
.order-product-control-button {
	padding-right: 10px;
}

.selected-ingredient,
.order-product-item {
	padding-top: 5px;
}

.selected-ingredient .ingredient-name {
	padding-top: 7px;
}

.order-product-summary h2,
.order-transport h2 {
	margin-bottom: 5px;
}

.order-product-text {
	padding-top: 4px;
}

.orders-summary-outer {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px #d7dee4 solid;
}

.order-note-field textarea {
	width: 300px;
	max-width: 100%;
	height: 70px;
}

/* ======== Footer ======== */

.wrapper.footer {
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	border-top: 1px #d7dee4 solid;
	background: #fff;
	padding: 8px 0 8px 50px;
	z-index: 9994;
}

.footer,
.footer a {
	color: #7c7e80;
}

/* ======== Forms ======== */

.form-field-row {
	padding-top: 10px;
}

.form-field-row.form-field-checkbox {
	padding-top: 15px;
}

.form-field-row.form-field-radio {
	padding-top: 7px;
}

.form-field-row:first-child {
	padding-top: 0;
}

.form-field-inline {
	display: inline-block;
	vertical-align: bottom;
	padding-right: 10px;
}

.inline-description-fields .form-field-row {
	position: relative;
	padding-right: 40px;
}

.inline-description-fields .form-description {
	position: absolute;
	top: 49px;
	right: 0;
	width: 35px;
	padding: 0;
	text-align: right;
}

.form-field-hidden {
	display: none;
}

.form .error {
	margin-top: 10px;
}

.form .error.error-main,
.form .thanks.thanks-main {
	margin-top: 20px;
	margin-bottom: 10px;
}

.form .error.error-main:first-child,
.form .thanks.thanks-main:first-child {
	margin-top: 0;
}

label {
	padding-bottom: 5px;
}

.form input[type=submit] {
	margin-top: 20px;
}

input,
select,
textarea {
	width: 100%;
	max-width: 100%;
	display: block;
	padding: 6px 10px;
	background-color: #fff;
	border: 1px #a8a9ab solid;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	color: #000;
	text-align: left;
}

input::-webkit-date-and-time-value {
	text-align: left;
}

input.input-medium,
select.input-medium {
	width: 350px;
}

input.input-short,
select.input-short {
	width: 200px;
}

input.input-small,
select.input-small {
	width: 65px;
}

input.input-mini,
select.input-mini {
	padding: 7px 20px;
}

textarea {
	height: 200px;
}

select {
	padding-right: 30px;
	background-image: url('../images/dropdown.png');
	background-position: center right;
	background-repeat: no-repeat;
	background-size: auto 35%;
	cursor: pointer;
}

select::-ms-expand {
	display: none;
}

.form-field-checkbox label,
.form-field-radio label {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 10px;
	vertical-align: top;
	cursor: pointer;
}

/* Remove input number arrows - Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Remove input number arrows - Firefox */
input[type=number] {
	-moz-appearance: textfield;
}

input[type="checkbox"],
input[type="radio"] {
	display: inline-block;
	margin: 0;
	padding: 0;
	width: 20px;
	height: 20px;
	vertical-align: top;
	background-color: #fff;
	cursor: pointer;
}

input[type=checkbox]:checked,
input[type=radio]:checked{
	background-color: #fff ;
	background-repeat: no-repeat;
	background-position: center center;
}

input[type=checkbox]:checked {
	background-image: url('../images/check.png');
	background-size: 60% 60%;
}

input[type=radio]:checked {
	background-image: url('../images/radio.png');
	background-size: 100% 100%;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
	outline: none;
}

.form-description {
	padding: 5px 20px 0;
}

.form-description.form-description-checkbox {
	padding: 5px 0 0;
}

.button, input[type="submit"] {
	display: inline-block;
	width: auto;
	min-width: 200px;
	max-width: 100%;
	margin-bottom: 0;
	padding: 7px 10px;
	text-align: center;
	vertical-align: middle;
	background: #1e98d7;
	border: 1px #1e98d7 solid;
	color: #fff;
	cursor: pointer;
}

.button.button-mini,
input[type="submit"].button-mini {
	min-width: 100px;
}

.button.button-long,
input[type=submit].button-long {
	min-width: auto;
	text-align: center;
	white-space: normal;
}

.button-area .button,
.button-area input[type=submit] {
	margin: 20px 10px 0 0;
	vertical-align: top;
}

.button:hover,
input[type="submit"]:hover {
	background: #fff;
	color: #1e98d7;
}

.button.button-dark,
input[type="submit"].button-dark {
	background: #023c56;
	border-color:  #023c56;
	color: #fff;
}

.button.button-dark:hover,
input[type="submit"].button-dark:hover {
	background: #fff;
	color: #023c56;
}

.button.button-invert,
input[type="submit"].button-invert {
	background: #fff;
	color: #1e98d7;
}

.button.button-invert:hover,
input[type="submit"].button-invert:hover {
	background: #fff;
	border-color: #023c56;
	color: #023c56;
}

.button.button-green,
input[type="submit"].button-green {
	background: #27cf3e;
	border-color: #27cf3e;
	color: #fff;
}

.button.button-green:hover,
input[type="submit"].button-green:hover,
.home-section-box:hover .button-green {
	background: #fff;
	border-color: #27cf3e;
	color: #27cf3e;
}

.button.button-red,
input[type="submit"].button-red {
	background: #f54;
	border-color: #f54;
	color: #fff;
}

.button.button-red:hover,
input[type="submit"].button-red:hover {
	background: #fff;
	border-color: #f54;
	color: #f54;
}

.error,
.thanks,
.info {
	padding: 10px;
	border-width: 1px;
	border-style: solid;
}

.error {
	background-color: #ffebee;
	border-color: #cf2727;
	color: #7c1717;
}

.thanks {
	background-color: #ebf9ea;
	border-color: #27cf3e;
	color: #177c25;
}

.info {
	background-color: #e6f2f8;
	border-color: #1e98d7;
	color: #125b81;
}

.hideable.hidden {
	display: none;
}

/* ======== UI ======== */

ul.ui-autocomplete.ui-widget.ui-widget-content {
	text-align: left;
	border: 0;
	background: transparent;
}

ul.ui-autocomplete li {
	border-color: #ddd;
	border-width: 1px;
	border-style: none solid;
	background: #eee;
}

ul.ui-autocomplete li:first-child {
	border-style: solid solid none;
}

ul.ui-autocomplete li:last-child {
	border-style: none solid solid;
}

/* ======== Pop-up ======== */

.pop-up-background {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 100px 20px 20px;
	text-align: center;
	background: rgba(0, 0, 0, 0.7);
	z-index: 99999;
}

.pop-up-window {
	display: inline-block;
	padding: 25px 20px;
	background: #fff;
}

.pop-up-title {
	margin-bottom: 5px;
}

.pop-up-window .button {
	min-width: 180px;
	max-width: 100%;
}

.pop-up-content-loader {
	width: 100%;
	height: 52px;
	background: transparent url('../images/loading.gif') no-repeat center center;
	background-size: 34px auto;
}

.pop-up-content-finish {
	padding-top: 10px;
}

/* ======== GDPR ======== */

.gdpr-bar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 10px 20px;
	background: #f5f5f5;
	z-index: 9998;
}

.gdpr-bar p {
	margin-bottom: 0;
}

/* ======== Video ======== */

.video {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	padding-top: 30px;
	overflow: hidden;
}

.video iframe, .video object, .video embed, img#player-thumbnail {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.video.inactive:after {
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: #fff url('../images/loading.gif') no-repeat center center;
	background-size: 50px 50px;
	cursor: pointer;
}

/* ======== Anchor ======== */

.anchor {
	display: block;
	position: relative;
	visibility: hidden;
	margin-top: -60px;
	padding-top: 60px;
}

/* ======== Effects ======== */

a,
.container,
.sidemenu,
.hamburger div,
.circle-icon,
.button,
input[type="submit"] {
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.radius-0,
input,
select,
textarea {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
}

.header {
	-webkit-box-shadow: -5px -5px 30px rgba(140,145,149,0.2);
	-moz-box-shadow: -5px -5px 30px rgba(140,145,149,0.2);
	-ms-box-shadow: -5px -5px 30px rgba(140,145,149,0.2);
	-o-box-shadow: -5px -5px 30px rgba(140,145,149,0.2);
	box-shadow: -5px -5px 30px rgba(140,145,149,0.2);
}

.unloaded .container {
	opacity: 0;
}

.container {
	opacity: 1;
}

/* ======== Float cleaner ======== */

.float-in:before,
.float-in:after {
	content:"";
	display:table;
}

.float-in {
	zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

.float-in:after {
	clear:both;
}