* {
	font-family: worksans-regular;
	outline: 0;
	margin: 0;
	padding: 0;

	-ms-touch-action: pan-x pan-y;
	touch-action: manipulation;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-tap-highlight-color: transparent;
}

body {
	overflow-x: hidden;
}

body.fixed {
	overflow-y: hidden;
}

.loader,
.custom-loader {
	display: none;
	z-index: 2500;
	width: 100px;
	height: 100px;
}

.loader {
	position: fixed;
	right: 30px;
	bottom: 30px;
}

.loader.show,
.custom-loader.show {
	display: block;
}

.loader-circular,
.custom-loader-circular {
	-webkit-animation: rotate 1.5s linear infinite;
	-moz-animation: rotate 1.5s linear infinite;
	-ms-animation: rotate 1.5s linear infinite;
	-o-animation: rotate 1.5s linear infinite;
	animation: rotate 1.5s linear infinite;
	height: 100px;
	position: relative;
	width: 100px;
}

.loader-circular-path,
.custom-loader-circular-path {
	stroke-dasharray: 1, 200;
	stroke-dashoffset: 0;
	-webkit-animation: dash 1.5s ease-in-out infinite,
		color 6s ease-in-out infinite;
	-moz-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
	-ms-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
	-o-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
	animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
	stroke-linecap: round;
}

@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35;
	}
	100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -186;
	}
}

@keyframes color {
	100%,
	0% {
		stroke: #d62d20;
	}
	40% {
		stroke: #0057e7;
	}
	66% {
		stroke: #008744;
	}
	80%,
	90% {
		stroke: #ffa700;
	}
}

.dark-background {
	width: 100vw;
	height: 100vh;
	z-index: 500;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
}

body.show-cart .dark-background,
body.show-login .dark-background {
	display: block;
}

.header,
.checkbox-container,
.radio-container,
.subheader,
.subheader-filter,
.btn,
.btn-skeleton,
.select {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.header {
	width: 100vw;
	height: 75px;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #1b1b1b;
	z-index: 1000;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.header.invers {
	background-color: white;
	border-bottom: 1px solid #e0e0e0;
}

.logo {
	display: block;
	background-size: 100%;
	background-repeat: no-repeat;
	position: absolute;
	opacity: 1;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.header-menu-container {
	margin-top: 25px;
}

.header-btn-get-app {
	position: absolute;
	top: 20px;
	color: white;
	padding: 8px 35px;
	border: 2px solid white;
	font-size: 10pt;
	cursor: pointer;
}

.header-btn-get-app:hover {
	background-color: white;
	color: black;
}

.header.invers .header-btn-get-app {
	color: black;
	border: 2px solid black;
}

.header.invers .header-btn-get-app:hover {
	background-color: black;
	color: white;
}

.header-profile {
	position: absolute;
	top: 7px;
	right: 60px;
	width: 60px;
	height: 60px;
	cursor: pointer;
}

.header-profile-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-repeat: no-repeat;
}

.header-profile-image[data-index="1"],
.header.invers .header-profile-image[data-index="2"] {
	display: none;
}

.header.invers .header-profile-image[data-index="1"] {
	display: block;
}

.header-profile-menu-container {
	display: none;
	position: absolute;
	top: 60px;
	right: 0;
	padding: 10px 0;
	background-color: white;
	box-shadow: 0 0 3px #999;
	border-radius: 3px;
	width: 150px;
}

.header-profile-menu-container.show {
	display: block;
}

.header-profile-menu {
	display: block;
	padding: 10px 20px;
	text-decoration: none;
	color: black;
	font-size: 10pt;
}

.header-profile-menu:hover {
	background-color: #eee;
}

.header-login {
	position: absolute;
	top: 25px;
	right: 60px;
	color: white;
	cursor: pointer;
	text-decoration: none;
	display: block;
}

.header.invers .header-login {
	color: black;
}

.subheader {
	width: 100%;
	height: 60px;
	background-color: #ebebeb;
	text-align: center;
}

.subheader-inner {
	display: inline-block;
	text-align: left;
}

.subheader-left-icon,
.subheader-title,
.subheader-search-container,
.subheader-menu-container {
	display: inline-block;
	vertical-align: top;
}

.subheader-left-icon {
	width: 35px;
	height: 35px;
	background-size: 100%;
	background-repeat: no-repeat;
	margin-top: 10px;
}

.subheader-title {
	text-decoration: none;
	color: black;
	margin-top: 17px;
	font-size: 14pt;
}

.subheader-title b {
	font-weight: normal;
	font-family: worksans-semibold;
}

.subheader-search-container {
	width: 530px;
	height: 40px;
	margin-top: 10px;
	margin-left: 30px;
	border: 1px solid #ccc;
	background-color: white;
}

.subheader-select-search-type {
	width: auto !important;
	padding-top: 10px !important;
	padding-right: 30px !important;
	height: 100% !important;
	border: 0 !important;
	font-size: 10pt !important;
	margin-right: 10px;
}

.subheader-select-search-type .dropdown-container {
	width: 50px !important;
	top: 40px;
}

.subheader-select-type-icon {
	display: inline-block;
	vertical-align: middle;
	width: 15px;
	height: 15px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 5px;
}

.subheader-search-text {
	border: 0;
	height: 100%;
	width: calc(100% - 110px);
	font-size: 9pt;
}

.subheader-search-icon {
	display: block;
	float: right;
	margin-right: 9px;
	margin-top: 9px;
	width: 20px;
	height: 20px;
	background-size: 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}

.subheader-menu-container {
	margin-top: 17px;
}

.subheader-menu {
	display: inline-block;
	text-decoration: none;
	color: black;
	margin-left: 30px;
}

.subheader-menu-worshipper {
	visibility: hidden;
}

.subheader-menu-icon,
.subheader-menu-text {
	display: inline-block;
	vertical-align: middle;
}

.subheader-menu-icon {
	width: 15px;
	height: 15px;
	background-size: 100%;
	background-repeat: no-repeat;
}

.subheader-menu-text {
	font-size: 10pt;
}

.subheader-menu.active .subheader-menu-text {
	font-family: worksans-semibold;
}

.subheader-filter {
	height: 60px;
	background-color: #f5f7f6;
}

.subheader-filter-col-container {
	margin-left: 70px;
	border-left: 1px solid #ddd;
}

.subheader-filter-col {
	display: inline-block;
	height: 100%;
	border-right: 1px solid #ddd;
	position: relative;
	font-family: worksans-light;
	cursor: pointer;
}

.subheader-filter-col:nth-child(-n + 2) {
	cursor: default;
	padding: 0 20px;
}

.subheader-filter-col:nth-last-child(1) {
	padding: 0 20px;
}

.subheader-filter-col:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin-left: -5px;
	height: 100%;
}

.subheader-filter-select {
	padding: 22px 20px !important;
	height: 100%;
	border: 0 !important;
	display: inline-block;
}

.subheader-filter-select .select-text {
	display: inline-block;
	margin-right: 20px;
	white-space: nowrap;
}

.subheader-filter-select .dropdown-icon {
	top: 20px;
	right: 18px;
}

.subheader-filter-select .dropdown-container {
	top: 60px;
}

.subheader-filter-col-icon,
.subheader-filter-down-icon {
	display: inline-block;
	vertical-align: middle;
	width: 18px;
	height: 18px;
	background-size: 100%;
	background-repeat: no-repeat;
}

.subheader-filter-down-icon {
	margin-right: -6px;
}

.icon-reset-filter {
	margin-right: 3px;
	margin-left: -8px;
}

.subheader-filter-col-text {
	display: inline-block;
	vertical-align: middle;
	font-size: 10pt;
}

.new-site-coming {
	width: 100%;
}

.category-item-container {
	text-align: left;
}

.category-item {
	text-decoration: none;
	color: black;
	font-size: 10pt;
}

.category-item.active {
	background-color: #eee;
}

b {
	font-weight: normal;
	font-family: worksans-semibold;
}

.autocomplete-container {
	display: none;
	background-color: white;
	box-shadow: 0 5px 5px #777;
	padding: 10px 0;
	z-index: 100;
}

.autocomplete-container.show {
	display: block;
}

.autocomplete {
	cursor: default;
	padding: 10px;
}

.autocomplete:hover {
	background-color: #ddd;
}

.subheader-autocomplete-container {
	position: absolute;
	top: 126px;
	left: 297px;
	width: 528px;
}

.subheader-autocomplete-container.show.is-empty {
	display: block;
}

.subheader-autocomplete-container.show.is-empty:after {
	content: "No results found";
	display: block;
	font-size: 10pt;
	padding: 10px 10px;
	color: #999;
}

.btn,
.btn-skeleton {
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}

.btn {
	background-color: black;
	color: white;
}

.btn-skeleton {
	border: 2px solid black;
	color: black;
}

.btn.disabled,
.btn-skeleton.disabled {
	border: 2px solid #ddd;
	background-color: #ddd;
	color: #777;
	cursor: default;
}

.form-item {
	margin-bottom: 30px;
}

.form-label {
	font-size: 11pt;
	color: #777;
}

input.form-input,
textarea.form-input {
	padding: 5px;
	width: 100%;
	display: block;
	font-size: 10pt;
	margin-bottom: 20px;
}

textarea.form-input {
	height: 100px;
	resize: vertical;
}

.header.hide {
	display: none;
}

.notification {
	position: fixed;
	bottom: 30px;
	right: 30px;
	display: inline-block;
	min-width: 120px;
	height: 54px;
	background-color: black;
	color: white;
	font-size: 10pt;
	padding: 18px 25px 0;
	opacity: 0;
	display: none;
	z-index: 2002;
}

@-webkit-keyframes notification-showing-anim {
	0% {
		opacity: 0;
	}

	5% {
		opacity: 1;
	}

	95% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes notification-showing-anim {
	0% {
		opacity: 0;
	}

	5% {
		opacity: 1;
	}

	95% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.notification.showing {
	display: block;
	-webkit-animation: 4s linear 0s 1 normal forwards running
		notification-showing-anim;
	-moz-animation: 4s linear 0s 1 normal forwards running
		notification-showing-anim;
	-ms-animation: 4s linear 0s 1 normal forwards running
		notification-showing-anim;
	-o-animation: 4s linear 0s 1 normal forwards running notification-showing-anim;
	animation: 4s linear 0s 1 normal forwards running notification-showing-anim;
}

pre {
	white-space: pre-wrap;
}

.error {
	color: red;
	font-size: 9pt;
	margin-bottom: 3px;
}

.section {
	width: 100vw;
	overflow: hidden;
}

.image-container {
	position: relative;
	display: inline-block;
}

.image-container:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ddd;
}

:not(img)[data-src]:not([data-wrapper-anim="false"]) {
	position: relative;
}

:not(img)[data-src]:not([data-wrapper-anim="false"]):after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #ddd;
}

@-webkit-keyframes hide-wrapper-anim {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes hide-wrapper-anim {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.image-container.hide-wrapper:after,
:not(img)[data-src]:not([data-wrapper-anim="false"]).hide-wrapper:after {
	opacity: 0;
	-webkit-animation: 0.2s linear 0s 1 normal forwards running hide-wrapper-anim;
	-moz-animation: 0.2s linear 0s 1 normal forwards running hide-wrapper-anim;
	-ms-animation: 0.2s linear 0s 1 normal forwards running hide-wrapper-anim;
	-o-animation: 0.2s linear 0s 1 normal forwards running hide-wrapper-anim;
	animation: 0.2s linear 0s 1 normal forwards running hide-wrapper-anim;
}

@-webkit-keyframes show-up-anim {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, 15px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
	}
}

@keyframes show-up-anim {
	0% {
		opacity: 0;
		-moz-transform: translate(0, 15px);
		-ms-transform: translate(0, 15px);
		-o-transform: translate(0, 15px);
		transform: translate(0, 15px);
	}

	100% {
		opacity: 1;
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

.section [data-anim="show-up"]:not([data-anim-threshold="self"]),
[data-anim-threshold="self"] {
	opacity: 0;
}

.section.show [data-anim="show-up"]:not([data-anim-threshold="self"]),
[data-anim-threshold="self"].show {
	-webkit-animation-name: show-up-anim;
	-webkit-animation-duration: 0.4s;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: show-up-anim;
	-moz-animation-duration: 0.4s;
	-moz-animation-fill-mode: forwards;
	-ms-animation-name: show-up-anim;
	-ms-animation-duration: 0.4s;
	-ms-animation-fill-mode: forwards;
	-o-animation-name: show-up-anim;
	-o-animation-duration: 0.4s;
	-o-animation-fill-mode: forwards;
	animation-name: show-up-anim;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
}

table {
	border-spacing: 0;
}

.radio-container,
.checkbox-container {
	cursor: pointer;
	margin-bottom: 5px;
}

.radio,
.checkbox {
	display: inline-block;
	vertical-align: middle;
	border-radius: 100%;
	border: 1px solid black;
	width: 14px;
	height: 14px;
	position: relative;
}

.radio {
	border-radius: 100%;
}

.checkbox {
	border-radius: 0;
}

.radio:after,
.checkbox:after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	background-color: black;
	top: 2px;
	left: 2px;
	-webkit-transform: scale(0, 0);
	-moz-transform: scale(0, 0);
	-ms-transform: scale(0, 0);
	-o-transform: scale(0, 0);
	transform: scale(0, 0);
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}

.radio:after {
	border-radius: 100%;
}

.radio-container.active .radio:after,
.checkbox-container.active .checkbox:after {
	-webkit-transform: scale(1, 1);
	-moz-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	-o-transform: scale(1, 1);
	transform: scale(1, 1);
}

.radio-text,
.checkbox-text {
	display: inline-block;
	vertical-align: middle;
	color: black;
	margin-left: 1px;
}

.dropdown-container {
	display: none;
	position: absolute;
	width: 100%;
	top: 33px;
	left: 0;
	max-height: 300px;
	overflow: auto;
	background-color: white;
	padding: 10px 0;
	border: 1px solid #aaa;
	box-shadow: 0 0 2px #999;
	z-index: 10;
}

.dropdown-container.show {
	display: block;
}

.dropdown-item {
	padding: 10px 15px;
	cursor: pointer;
	font-size: 10pt;
}

.select {
	float: left;
	border: 1px solid #999;
	padding: 8px;
	font-size: 10pt;
	margin-bottom: 20px;
	position: relative;
	cursor: pointer;
	width: 100%;
}

.select:nth-child(1) {
	border-left: 1px solid #999;
}

.dropdown-icon {
	display: block;
	position: absolute;
	right: 8px;
	top: calc(50% - 10px);
	width: 17px;
	height: 17px;
	background-size: 150%;
	background-repeat: no-repeat;
	background-position: center;
}

.dialog {
	display: none;
	position: fixed;
	top: 70px;
	left: 0;
	width: 100vw;
	height: calc(100vh - 70px);
	z-index: 600;
}

.dialog.show {
	display: block;
}

.dialog-background {
	width: 100%;
	height: 100%;
	position: relative;
	background-color: rgba(0, 0, 0, 0.4);
	padding: 50px 0;
	overflow-y: auto;
}

.dialog .dialog-box {
	margin: 0 auto;
	width: 400px;
	min-height: 100px;
	background-color: white;
}

.dialog-header,
.dialog-body {
	position: relative;
	border-bottom: 1px solid #ddd;
}

.dialog-header {
	padding: 20px;
}

.dialog-close-icon {
	position: absolute;
	width: 18px;
	height: 18px;
	right: 20px;
	top: 20px;
	cursor: pointer;
	background-size: 100%;
	background-repeat: no-repeat;
}

.dialog-title {
	font-size: 13pt;
	width: 200px;
}

.dialog-body {
	padding: 20px 25px;
}

.dialog-form-input {
	padding: 10px;
	width: 100%;
	display: block;
	font-size: 10pt;
	margin-bottom: 20px;
	border: 1px solid #bbb;
}

.dialog-footer {
	padding: 15px;
	overflow-y: auto;
}

.dialog-button {
	display: inline-block;
	text-align: center;
	width: 150px;
}

.btn-dialog-cancel {
	background-color: #999;
}

.btn-dialog-cancel:hover {
	background-color: #777;
}

.dialog-sign-in .dialog-box {
	width: 330px;
}

.forgot-password {
	display: block;
	text-align: right;
	font-size: 9pt;
	text-decoration: none;
	color: black;
}

.dialog-btn-sign-in-container {
	margin-top: 30px;
	text-align: center;
}

.dialog-btn-sign-in {
	width: 100px;
	font-size: 9pt;
}

.or {
	margin: 20px 0;
	text-align: center;
	font-size: 10pt;
}

.not-a-member,
.register-event-as {
	font-size: 9pt;
	line-height: 20px;
}

.not-a-member a,
.register-event-as a {
	color: #777;
}

.register-event-as {
	display: none;
}

.register-event-as.show {
	display: block;
}

.pagination-container {
	clear: both;
	display: flex;
	justify-content: center;
}

.pagination {
	list-style: none;
	padding: 0;
	right: 0;
}

.pagination > li {
	display: inline-block;
	border: 1px solid #cccccc;
	border-radius: 5px;
	margin-right: 5px;
}

.pagination > li:hover {
	background-color: #efefef;
}

.pagination > li > a {
	padding: 8px 15px;
	display: inline-block;
	text-decoration: none;
	color: #333333;
}

.pagination > .active {
	background-color: #cccccc;
	padding: 8px 15px;
	display: inline-block;
}

.container {
	min-height: calc(100vh - 100px);
	margin-top: 75px;
}

.footer {
	padding: 20px 30px 50px;
}

.footer-copyright {
	margin-right: 40px;
}

.footer-menu {
	display: inline-block;
	text-decoration: none;
	color: black;
	margin-right: 40px;
}

@media all and (max-width: 767px) {
	body.show-filter-content,
	body.show-menu {
		overflow-y: hidden;
	}

	.header-menu-container,
	.header-btn-get-app,
	.header-login,
	.header-profile,
	.subheader-inner > :not(.subheader-title),
	.menu-mobile-container .subheader-title,
	.subheader-filter .subheader-filter-col-icon {
		display: none;
	}

	.logo {
		width: 40px;
		height: 40px;
		top: 17px;
		left: 20px;
	}

	.header {
		background-color: transparent;
	}

	.header.mobile-white {
		background-color: white;
	}

	.g-signin2 .abcRioButton {
		width: 86vw !important;
		margin: 0 auto;
	}

	.header-menu-icon {
		position: fixed;
		top: 25px;
		right: 20px;
		width: 30px;
	}

	.menu-icon-line {
		width: 100%;
		height: 2px;
		background-color: black;
		margin-bottom: 7px;
		-webkit-transition: background-color 0.1s;
		transition: background-color 0.1s;
	}

	.menu-icon-line-3 {
		margin-bottom: 0;
	}

	.menu-mobile-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: white;
		z-index: 999;
		display: none;
		opacity: 0;
	}

	.menu-mobile-inner-container {
		display: inline-block;
		position: absolute;
		top: 22vw;
		right: 20px;
	}

	.header-menu-mobile {
		color: black;
		text-decoration: none;
		display: block;
		float: right;
		clear: both;
		text-align: right;
		font-size: 12pt;
		margin-bottom: 15px;
		position: relative;
		opacity: 0;
	}

	.header-menu-mobile:before {
		content: "";
		width: 0;
		height: 1px;
		background-color: black;
		position: absolute;
		top: 12px;
		left: -10px;
		-webkit-transition: all 0.2s;
		transition: all 0.2s;
	}

	.header-menu-mobile:active:before,
	.header-menu-mobile.active:before {
		left: calc(-60px);
		width: 50px;
		-webkit-transition: width 0.2s;
		transition: width 0.2s;
	}

	@-webkit-keyframes menu-mobile-container-open {
		to {
			opacity: 1;
		}
	}

	@keyframes menu-mobile-container-open {
		to {
			opacity: 1;
		}
	}

	body.show-menu .menu-mobile-container {
		display: block;
		-webkit-animation: 0.2s linear 0s 1 normal forwards running
			menu-mobile-container-open;
		-moz-animation: 0.2s linear 0s 1 normal forwards running
			menu-mobile-container-open;
		-ms-animation: 0.2s linear 0s 1 normal forwards running
			menu-mobile-container-open;
		-o-animation: 0.2s linear 0s 1 normal forwards running
			menu-mobile-container-open;
		animation: 0.2s linear 0s 1 normal forwards running
			menu-mobile-container-open;
	}

	body.show-menu .header-menu-mobile {
		-webkit-animation: 0.5s linear 0s 1 normal forwards running
			menu-mobile-container-open;
		-moz-animation: 0.5s linear 0s 1 normal forwards running
			menu-mobile-container-open;
		-ms-animation: 0.5s linear 0s 1 normal forwards running
			menu-mobile-container-open;
		-o-animation: 0.5s linear 0s 1 normal forwards running
			menu-mobile-container-open;
		animation: 0.5s linear 0s 1 normal forwards running
			menu-mobile-container-open;
	}

	.header-menu-mobile:nth-child(1) {
		-webkit-animation-delay: 0.2s !important;
		-moz-animation-delay: 0.2s !important;
		-ms-animation-delay: 0.2s !important;
		-o-animation-delay: 0.2s !important;
		animation-delay: 0.2s !important;
	}

	.header-menu-mobile:nth-child(2) {
		-webkit-animation-delay: 0.3s !important;
		-moz-animation-delay: 0.3s !important;
		-ms-animation-delay: 0.3s !important;
		-o-animation-delay: 0.3s !important;
		animation-delay: 0.3s !important;
	}

	.header-menu-mobile:nth-child(3) {
		-webkit-animation-delay: 0.4s !important;
		-moz-animation-delay: 0.4s !important;
		-ms-animation-delay: 0.4s !important;
		-o-animation-delay: 0.4s !important;
		animation-delay: 0.4s !important;
	}

	.header-menu-mobile:nth-child(4) {
		-webkit-animation-delay: 0.5s !important;
		-moz-animation-delay: 0.5s !important;
		-ms-animation-delay: 0.5s !important;
		-o-animation-delay: 0.5s !important;
		animation-delay: 0.5s !important;
	}

	.header-menu-mobile:nth-child(5) {
		-webkit-animation-delay: 0.6s !important;
		-moz-animation-delay: 0.6s !important;
		-ms-animation-delay: 0.6s !important;
		-o-animation-delay: 0.6s !important;
		animation-delay: 0.6s !important;
	}

	.header-menu-mobile:nth-child(6) {
		-webkit-animation-delay: 0.7s !important;
		-moz-animation-delay: 0.7s !important;
		-ms-animation-delay: 0.7s !important;
		-o-animation-delay: 0.7s !important;
		animation-delay: 0.7s !important;
	}

	@-webkit-keyframes menu-mobile-container-close {
		to {
			opacity: 0;
		}
	}

	@keyframes menu-mobile-container-close {
		to {
			opacity: 0;
		}
	}

	body.menu-closing .menu-mobile-container {
		opacity: 1;
		display: block;
		-webkit-animation: 0.2s linear 0s 1 normal forwards running
			menu-mobile-container-close;
		-moz-animation: 0.2s linear 0s 1 normal forwards running
			menu-mobile-container-close;
		-ms-animation: 0.2s linear 0s 1 normal forwards running
			menu-mobile-container-close;
		-o-animation: 0.2s linear 0s 1 normal forwards running
			menu-mobile-container-close;
		animation: 0.2s linear 0s 1 normal forwards running
			menu-mobile-container-close;
	}

	@-webkit-keyframes menu-icon-line-1-opening {
		to {
			-webkit-transform: rotate(45deg) translate(4px, 7px);
		}
	}

	@keyframes menu-icon-line-1-opening {
		to {
			-moz-transform: rotate(45deg) translate(4px, 7px);
			-ms-transform: rotate(45deg) translate(4px, 7px);
			-o-transform: rotate(45deg) translate(4px, 7px);
			transform: rotate(45deg) translate(4px, 7px);
		}
	}

	@-webkit-keyframes menu-icon-line-2-opening {
		to {
			opacity: 0;
		}
	}

	@keyframes menu-icon-line-2-opening {
		to {
			opacity: 0;
		}
	}

	@-webkit-keyframes menu-icon-line-3-opening {
		to {
			-webkit-transform: rotate(-45deg) translate(5px, -8px);
		}
	}

	@keyframes menu-icon-line-3-opening {
		to {
			-moz-transform: rotate(-45deg) translate(5px, -8px);
			-ms-transform: rotate(-45deg) translate(5px, -8px);
			-o-transform: rotate(-45deg) translate(5px, -8px);
			transform: rotate(-45deg) translate(5px, -8px);
		}
	}

	body.menu-opening .menu-icon-line-1,
	body.menu-opening .menu-icon-line-2,
	body.menu-opening .menu-icon-line-3,
	body.menu-closing .menu-icon-line-1,
	body.menu-closing .menu-icon-line-2,
	body.menu-closing .menu-icon-line-3 {
		-webkit-animation-duration: 0.3s;
		-webkit-animation-fill-mode: forwards;
		-moz-animation-duration: 0.3s;
		-moz-animation-fill-mode: forwards;
		-ms-animation-duration: 0.3s;
		-ms-animation-fill-mode: forwards;
		-o-animation-duration: 0.3s;
		-o-animation-fill-mode: forwards;
		animation-duration: 0.3s;
		animation-fill-mode: forwards;
	}

	body.show-menu .menu-icon-line {
		background-color: black !important;
		-webkit-transition: background-color 0.3s;
		transition: background-color 0.3s;
	}

	body.menu-opening .menu-icon-line-1 {
		-webkit-animation-name: menu-icon-line-1-opening;
		-moz-animation-name: menu-icon-line-1-opening;
		-ms-animation-name: menu-icon-line-1-opening;
		-o-animation-name: menu-icon-line-1-opening;
		animation-name: menu-icon-line-1-opening;
	}

	body.menu-opening .menu-icon-line-2 {
		-webkit-animation-name: menu-icon-line-2-opening;
		-moz-animation-name: menu-icon-line-2-opening;
		-ms-animation-name: menu-icon-line-2-opening;
		-o-animation-name: menu-icon-line-2-opening;
		animation-name: menu-icon-line-2-opening;
	}

	body.menu-opening .menu-icon-line-3 {
		-webkit-animation-name: menu-icon-line-3-opening;
		-moz-animation-name: menu-icon-line-3-opening;
		-ms-animation-name: menu-icon-line-3-opening;
		-o-animation-name: menu-icon-line-3-opening;
		animation-name: menu-icon-line-3-opening;
	}

	body.menu-opened .menu-icon-line-1 {
		-webkit-transform: rotate(45deg) translate(4px, 7px);
		-moz-transform: rotate(45deg) translate(4px, 7px);
		-ms-transform: rotate(45deg) translate(4px, 7px);
		-o-transform: rotate(45deg) translate(4px, 7px);
		transform: rotate(45deg) translate(4px, 7px);
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}

	body.menu-opened .menu-icon-line-2 {
		opacity: 0;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}

	body.menu-opened .menu-icon-line-3 {
		-webkit-transform: rotate(-45deg) translate(5px, -8px);
		-moz-transform: rotate(-45deg) translate(5px, -8px);
		-ms-transform: rotate(-45deg) translate(5px, -8px);
		-o-transform: rotate(-45deg) translate(5px, -8px);
		transform: rotate(-45deg) translate(5px, -8px);
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}

	@-webkit-keyframes menu-icon-line-1-closing {
		to {
			-webkit-transform: rotateZ(0deg) translateY(0px) translateX(0px) scaleX(1);
		}
	}

	@keyframes menu-icon-line-1-closing {
		to {
			-moz-transform: rotateZ(0deg) translateY(0px) translateX(0px) scaleX(1);
			-ms-transform: rotateZ(0deg) translateY(0px) translateX(0px) scaleX(1);
			-o-transform: rotateZ(0deg) translateY(0px) translateX(0px) scaleX(1);
			transform: rotateZ(0deg) translateY(0px) translateX(0px) scaleX(1);
		}
	}

	@-webkit-keyframes menu-icon-line-2-closing {
		to {
			opacity: 1;
		}
	}

	@keyframes menu-icon-line-2-closing {
		to {
			opacity: 1;
		}
	}

	body.menu-closing .menu-icon-line-1,
	body.menu-closing .menu-icon-line-3 {
		-webkit-animation-name: menu-icon-line-1-closing;
		-moz-animation-name: menu-icon-line-1-closing;
		-ms-animation-name: menu-icon-line-1-closing;
		-o-animation-name: menu-icon-line-1-closing;
		animation-name: menu-icon-line-1-closing;
	}

	body.menu-closing .menu-icon-line-2 {
		-webkit-animation-name: menu-icon-line-2-closing;
		-moz-animation-name: menu-icon-line-2-closing;
		-ms-animation-name: menu-icon-line-2-closing;
		-o-animation-name: menu-icon-line-2-closing;
		animation-name: menu-icon-line-2-closing;
	}

	.menu-mobile-footer-container {
		position: fixed;
		bottom: 55px;
		right: 20px;
	}

	.menu-mobile-footer {
		display: inline-block;
		text-decoration: none;
		color: black;
		font-size: 11pt;
		margin-right: 15px;
	}

	.menu-mobile-footer:nth-last-child(2) {
		margin-right: 0;
	}

	.menu-mobile-footer-copyright {
		margin-top: 10px;
		font-size: 9pt;
		text-align: right;
	}

	.subheader {
		display: inline-block;
		width: auto;
		background-color: transparent;
		position: fixed;
		top: 0;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
		padding-top: 7px;
		z-index: 1000;
	}

	.subheader-search-container {
		display: block !important;
		position: fixed;
		top: 75px;
		left: calc(50% - 50vw);
		margin: 0;
		width: 100vw;
		-webkit-transition: opacity 0.2s;
		transition: opacity 0.2s;
	}

	body.menu-opening .subheader-search-container,
	body.menu-opened .subheader-search-container,
	body.show-subheader-filter .subheader-search-container {
		visibility: hidden;
		opacity: 0;
	}

	body.menu-closing .subheader-search-container {
		visibility: visible;
		opacity: 1;
	}

	.menu-mobile-container .subheader,
	.menu-mobile-container .subheader-menu-container,
	.menu-mobile-container .subheader-menu {
		display: block;
	}

	.menu-mobile-container .subheader {
		position: absolute;
		top: calc(22vw + 210px);
		right: 20px;
		text-align: right;
		border-top: 1px solid #e0e0e0;
		width: calc(100vw - 40px);
		padding-top: 25px;
	}

	.subheader-menu-container {
		margin: 0;
	}

	.subheader-menu {
		text-align: right;
		margin-bottom: 15px;
	}

	.subheader-menu-icon {
		width: 18px;
		height: 18px;
	}

	.subheader-menu-text {
		font-size: 12pt;
	}

	body.show-subheader-filter {
		position: fixed;
	}

	.subheader-filter {
		display: block;
		visibility: hidden;
		opacity: 0;
		position: fixed;
		top: 75px;
		left: 0;
		width: 100vw;
		height: calc(100vh - 75px);
		background-color: white;
		z-index: 100;
		-webkit-transition: opacity 0.2s;
		transition: opacity 0.2s;
	}

	body.show-subheader-filter .subheader-filter {
		visibility: visible;
		opacity: 1;
	}

	.mobile-subheader-filter-btn {
		width: 50px;
		height: 50px;
		border-radius: 50px;

		background-color: white;
		border: 1px solid black;
		position: fixed;
		bottom: 30px;
		right: 20px;
		z-index: 150;
		-webkit-transition: width 0.2s;
		transition: width 0.2s;
		overflow: hidden;
	}

	.mobile-subheader-filter-btn:active {
		background-color: #ddd;
	}

	body.show-subheader-filter .mobile-subheader-filter-btn {
		width: 150px;
	}

	.mobile-subheader-filter-icon {
		position: absolute;
		top: 0;
		right: 0;
		width: 50px;
		height: 50px;
		background-size: 60%;
		background-repeat: no-repeat;
		background-position: center;
		opacity: 1;
		-webkit-transition: opacity 0.2s;
		transition: opacity 0.2s;
	}

	body.show-subheader-filter .mobile-subheader-filter-icon {
		opacity: 0;
	}

	.mobile-subheader-filter-close {
		position: absolute;
		top: 14px;
		left: 0;
		width: 150px;
		opacity: 0;
		text-align: center;
		font-family: worksans-semibold;
		-webkit-transition: opacity 0.1s;
		transition: opacity 0.1s;
	}

	body.show-subheader-filter .mobile-subheader-filter-close {
		opacity: 1;
		-webkit-transition: opacity 0.1s 0.1s;
		transition: opacity 0.1s 0.1s;
	}

	.subheader-filter-col-container {
		margin-left: 0;
		margin-top: 20px;
	}

	.subheader-filter-col {
		display: block;
		height: auto;
		clear: both;
	}

	.subheader-filter-col:before {
		content: none;
	}

	.subheader-filter-col:nth-last-child(1) {
		margin-top: 20px;
		width: auto;
		float: left;
		padding: 15px 20px;
		border: 0;
		-webkit-transition: all 0.2s;
		transition: all 0.2s;
	}

	.subheader-filter-col:nth-last-child(1):active {
		background-color: #eee;
	}

	.subheader-filter-col-title {
		font-size: 24pt;
		margin-bottom: 20px;
	}

	.subheader-filter-col-text {
		font-size: 12pt;
	}

	.subheader-filter-select {
		clear: both;
		width: auto;
		height: auto;
		margin: 0;
		padding: 15px 20px !important;
	}

	.subheader-filter-select .dropdown-icon {
		top: 13px;
	}

	.subheader-filter-select .dropdown-container {
		top: 45px;
	}

	.category-item-container {
		min-height: 1px;
		margin-bottom: 10px;
		padding: 0 5vw;
	}

	.category-item {
		display: inline-block;
		padding: 5px 10px;
		border: 1px solid #e0e0e0;
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.category-item[data-type="category-label"] {
		display: none;
	}

	.category-item:active {
		background-color: #eee;
	}

	.autocomplete-container {
		left: 0;
		top: 45px;
		width: 100vw;
	}

	.dialog-box {
		width: 100vw !important;
	}

	.section {
		height: 160vw;
	}

	.dropdown-item:active {
		background-color: #eee;
	}

	.btn,
	.btn-skeleton {
		font-size: 10pt;
	}

	.btn {
		padding: 10px 20px;
	}

	.btn-skeleton {
		padding: 8px 20px;
	}

	.footer {
		height: 100px;
		position: relative;
	}

	.footer-menu-container {
		position: absolute;
		top: 0;
		left: 5vw;
	}

	.footer-menu {
		margin-right: 15px;
		font-size: 11pt;
	}

	.footer-copyright {
		position: absolute;
		top: 30px;
		left: 5vw;
		font-size: 9pt;
	}
}

@media all and (max-width: 350px) {
	.subheader-title {
		text-align: center;
		margin-top: 10px;
	}
}

@media all and (min-width: 768px) {
	.header-btn-get-app,
	.mobile-subheader-title,
	.mobile-subheader-filter-btn {
		display: none;
	}

	.logo {
		width: 60px;
		height: 60px;
		top: 7px;
	}

	.header-menu {
		display: inline-block;
		color: white;
		text-decoration: none;
		position: relative;
		padding: 0 10px;
		font-size: 10pt;
	}

	.header-menu:before {
		content: "";
		width: 0;
		height: 1px;
		background-color: white;
		position: absolute;
		top: 7px;
		left: 100%;
		-webkit-transition: all 0.2s;
		transition: all 0.2s;
	}

	.header.invers .header-menu {
		color: black;
	}

	.header.invers .header-menu:before {
		background-color: black;
	}

	.header-menu:hover:before {
		left: 0;
		width: 100%;
		-webkit-transition: width 0.2s;
		transition: width 0.2s;
	}

	.header-menu.active:before {
		width: 100%;
		left: 0;
	}

	.header-menu-icon,
	.header-cart-image-black,
	.header-cart-mobile,
	.menu-mobile-container {
		display: none;
	}
}

@media all and (min-width: 768px) and (max-width: 1024px) {
	.mobile-subheader-filter-btn {
		display: none;
	}

	.logo {
		left: 20px;
	}

	.header-profile {
		right: 20px;
	}

	.header-menu-container {
		margin-left: 100px;
	}

	.header-menu {
		margin-right: 20px;
	}

	.header-menu:nth-last-child(1) {
		margin-right: 0;
	}

	.header-btn-get-app {
		right: 20px;
	}

	.category-item-container {
		border-top: 1px solid #e0e0e0;
		width: 270px;
		min-height: 1px;
		margin-right: 30px;
		margin-left: 60px;
	}

	.category-item {
		display: block;
		width: 100%;
		padding: 20px 15px;
		border-left: 1px solid #e0e0e0;
		border-right: 1px solid #e0e0e0;
		border-bottom: 1px solid #e0e0e0;
	}

	.dropdown-item:active {
		background-color: #eee;
	}

	.btn,
	.btn-skeleton {
		font-size: 12pt;
	}

	.btn {
		padding: 15px 30px;
	}

	.btn-skeleton {
		padding: 13px 30px;
	}

	.dialog-btn-sign-in {
		width: 120px;
	}

	.footer-copyright,
	.footer-menu-container {
		display: inline-block;
		font-size: 10pt;
	}
}

@media all and (min-width: 1025px) {
	.div-mobile {
		display: none;
	}

	.logo {
		left: 60px;
	}

	.header-menu-container {
		margin-left: 130px;
	}

	.header-menu {
		margin-right: 10px;
	}

	.header-menu:nth-last-child(1) {
		margin-right: 0;
	}

	.header-btn-get-app {
		right: 150px;
	}

	.category-item-container {
		border-top: 1px solid #e0e0e0;
		width: 270px;
		min-height: 1px;
		margin-right: 30px;
		margin-left: 60px;
	}

	.category-item {
		display: block;
		width: 100%;
		padding: 20px 15px;
		border-left: 1px solid #e0e0e0;
		border-right: 1px solid #e0e0e0;
		border-bottom: 1px solid #e0e0e0;
	}

	.category-item[href]:hover {
		background-color: #eee;
	}

	.subcategory-item {
		padding-left: 35px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.section {
		height: 100vh;
	}

	.dropdown-item:hover {
		background-color: #eee;
	}

	.btn,
	.btn-skeleton {
		font-size: 10pt;
	}

	.btn {
		padding: 10px 20px;
	}

	.btn-skeleton {
		padding: 8px 20px;
	}

	.footer-copyright,
	.footer-menu-container {
		display: inline-block;
		font-size: 10pt;
	}
}

@media all and (min-width: 1025px) and (max-width: 1180px) {
	.subheader-menu {
		margin-left: 20px;
	}
}