/* This file will be included in each page */
/* and contains the general styles of the project */

/* == Set colors == */
:root {
	--white: #FFFFFF;
	--dark_burgundy: #2A101B;
	--green: #4AA394;
	--light_green: #66BFB0;
	--pink: #FAEFED;
	--grey: #A89FA3;
	--red: #B13333;
	--brown: #C1937D;
}

/* === Set fonts === */
@font-face {
	font-family: Gilroy;
	src: url("../fonts/Gilroy-Medium.ttf");
}

@font-face {
	font-family: Gilroy;
	font-weight: bold;
	src: url("../fonts/Gilroy-Bold.ttf");
}

/* ================ */
/* ===== Body ===== */
/* ================ */
body {
	font-family: 'Manrope', sans-serif;
	color: var(--dark_burgundy);
}

/* ================ */
/* ==== Header ==== */
/* ================ */
header {
	height: 250px;
	padding: 0 7%;
	font-size: 0.85rem;
}

a {
	color: var(--green);
}

a:hover {
	color: var(--light_green);
}

.hd__contact-ctn {
	margin: 0 40px 0 30px;
}

.hd__btn-ctn {
	margin-right: 30px;
}

.hd__btn {
	background-color: var(--green);
	color: var(--white);
	border-radius: 22px;
	padding: 8px 15px;
	font-size: 0.8rem;
}

.hd__email-ctn,
.hd__contact-ctn {
	gap: 5px;
}

.hd__left-block {
	color: var(--dark_burgundy);
}

.hd__image-ctn>img {
	max-width: 100%;
	pointer-events: none;
}

.hd__contact-data-ctn {
	flex-direction: row;
	font-size: 14px;
}

.hd__email-ctn {
	display: flex;
	flex-direction: row;
}

.hd__cart-logo>img,
.hd__user-logo>img {
	height: 24px;
}

.hd__icons-ctn {
	gap: 8px;
}

#orderInfoModal .loader {
	width: 48px;
	height: 48px;
	border: 5px solid #a6a6a6;
	border-bottom-color: transparent;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}

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

/* =================== */
/* == Bootstrap pagination styles == */
/* =================== */
.pagination .page-item.active .page-link {
	background-color: var(--light_green) !important;
	border-color: var(--light_green) !important
}

.pagination .page-link {
	color: var(--light__green) !important;
}

/* =================== */
/* == Custom styles == */
/* =================== */
.big-white-btn {
	background-color: var(--white);
	color: var(--green);
	border-radius: 28px;
	border: 1px solid var(--green);
	padding: 12px 100px;
	font-weight: 700;
}

.rounded-green-border {
	background-color: var(--white);
	border: 1px solid var(--light_green);
	width: 100%;
	border-radius: 24px;
	display: flex;
	justify-content: space-between;
}

.rounded-green-border>p {
	margin-bottom: 0;
	padding: 10px 0 10px 20px;
}

.rounded-green-border>a {
	color: var(--green);
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
}

.rounded-green-border-2 {
	width: 100%;
	display: flex;
	height: 46px;
}

.rounded-green-border-2>.left-part {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 25%;
	background-color: var(--light_green);
	color: var(--white);
	border-top-left-radius: 22px;
	border-bottom-left-radius: 22px;
}

.rounded-green-border-2>.right-part {
	display: flex;
	width: 100%;
	align-items: center;
	padding-left: 40px;
	border-top-right-radius: 22px;
	border-bottom-right-radius: 22px;
	border: 1px solid var(--light_green);
}

.disabled-radio-btn {
	opacity: 0.5;
}

.rounded-green-border>span {
	display: flex;
	background-color: var(--light_green);
	color: var(--white);
	align-items: center;
	width: 20%;
	justify-content: center;
	border-top-left-radius: 22px;
	border-bottom-left-radius: 22px;
}

.item-link {
	color: var(--light_green);
	text-decoration: none;
}

.input-number-cnt {
	display: flex;
	min-width: 85px;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 60px;
	border-radius: 5px;
	border: 1px solid var(--green);
}

.input-number-cnt>input {
	border: none;
	border-radius: 5px;
	outline: 0;
	margin-left: 5px;
	padding-left: 5px;
}

.input-number-chevrons-cnt {
	display: flex;
	flex-direction: column;
	max-width: 20px;
}

.input-number-chevrons-cnt>a>img {
	width: 20px;
}

.green-btn {
	background-color: var(--green);
	color: var(--white);
	border-radius: 26px;
	padding: 10px 20px;
}

.saved-chocos {
	display: flex;
	flex-direction: column;
	min-width: 190px;
	max-width: 190px;
}

.saved-chocos>.header {
	background-color: var(--green);
	color: var(--white);
	font-weight: 600;
	width: 100%;
	padding: 10px 0;
	text-align: center;
	border-radius: 22px;
}

.saved-chocos>.number-and-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--green);
	border-radius: 23px;
	min-height: 150px;
	margin-top: -44px;
}

.saved-chocos>.number-and-text>.number {
	font-weight: 600;
	font-size: 34px;
	padding-top: 22px;
}

.saved-chocos>.number-and-text>.text {
	font-weight: 600;
}

.green {
	color: var(--green);
}

.alcohol-icon {
	-webkit-mask-image: url(../icons/alcohol.svg);
	mask-image: url(../icons/alcohol.svg);
}

.light-green {
	color: var(--light_green);
}

/* ================ */
/* ===== Main ===== */
/* ================ */
main {
	width: 85%;
	margin-left: 13%;
}

/* ================ */
/* ===== FAQ ====== */
/* ================ */
.faq__cnt {
	margin-top: 130px;
}

.faq__header {
	font-weight: 600;
	font-size: 34px;
	font-family: 'Gilroy';
}

.faq__item {
	height: 70px;
	color: var(--dark_burgundy);
	text-decoration: none;
	border-bottom: 1px solid var(--pink);
}

.faq__item-text {
	margin: 8px 0;
	font-weight: 600;
	font-family: 'Gilroy';
	font-size: 18px;
}

.faq__icon {
	min-height: 30px;
	min-width: 30px;
	margin-right: 30px;
}

.faq__answer>p {
	color: var(--dark_burgundy);
	margin: 8px 0;
}

.mn__greeting {
	font-size: 48px;
	font-family: 'Gilroy';
	font-weight: 600;
	margin-bottom: 15px;
}

.mn__main-cnt {
	display: flex;
	gap: 3%;
	margin-top: 50px;
}

.faq__icon>.faq__plus-img,
.collapsed>.faq__icon>.faq__minus-img {
	display: none;
}

.collapsed>.faq__icon>.faq__plus-img,
.faq__icon>.faq__minus-img {
	display: block;
}

/* ================ */
/* ===== Menu ===== */
/* ================ */
.mn__me-cnt {
	display: flex;
	flex-direction: column;
	width: 25%;
	min-width: 45px;
	z-index: 20;
}

.mn__me-item-cnt {
	display: flex;
	height: 50px;
	border-radius: 10px;
	border: 1px solid var(--light_green);
	align-items: center;
	margin-bottom: 20px;
	background-color: var(--white);
}

.mn__me-item-name {
	font-size: 18px;
	font-family: 'Gilroy';
	margin-bottom: 0;
	padding-left: 30px;
	border-left: 1px solid var(--green);
	color: var(--dark_burgundy);
	text-decoration: none;
}

.mn__me-icon-cnt {
	height: 100%;
	width: 20%;
	min-width: 50px;
	background: var(--light_green);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.me-active-item,
.me-hover-item {
	background-color: var(--pink);
	border: none;
}

.me-active-item>.mn__me-icon-cnt,
.me-hover-item>.mn__me-icon-cnt {
	background-color: var(--dark_burgundy);
}

.me-active-item>.mn__me-item-name,
.me-hover-item>.mn__me-item-name {
	font-weight: 600;
	border-left: 1px solid var(--dark_burgundy);
}

.mn__me-icon-link {
	color: var(--dark_burgundy);
	text-decoration: none;
}

/* Menu contact */
.me__contact-item {
	margin-bottom: 15px;
	gap: 8%;
}

.me__icon {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 45px;
	min-height: 45px;
	background-image: url('../img/menu-contact-item-background.svg');
	background-repeat: no-repeat, repeat;
}

.me__contact-data>p {
	margin-bottom: 0;
}

.me__contact-cnt>.header {
	font-size: 34px;
	font-weight: bold;
	font-family: 'Gilroy';
	margin: 20px 0 30px 0;
}

/* ================ */
/* ==== Content === */
/* ================ */
.mn__content-cnt {
	width: 65%;
}

.mn__header {
	font-weight: 600;
	font-size: 34px;
	font-family: 'Gilroy';
	margin-bottom: 25px;
}

/* ================ */
/* ==== Footer ==== */
/* ================ */
footer {
	height: 250px;
	padding: 30px;
	margin-top: 80px;
	overflow: hidden;
	background-color: var(--green);
}

.ft__copyright {
	text-align: center;
	font-size: 10px;
	font-weight: 300;
	color: var(--white);
}

.ft__copyright p {
	margin-bottom: 20px;
}

.ft__header {
	color: var(--white);
	font-size: 48px;
	font-weight: 600;
	font-family: 'Gilroy';
	margin-bottom: 30px;
}

.ft__text {
	font-size: 19px;
	font-weight: 300;
	color: var(--white);
	margin-bottom: 30px;
}

.ft__icon {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 45px;
	min-height: 45px;
	background-image: url('../img/footer-item-background.svg');
	background-repeat: no-repeat, repeat;
}

.ft__contact>.ft__contact-item {
	margin-bottom: 20px;
}

.ft__contact-data>p {
	line-height: 22px;
	color: var(--white);
	margin: 0;
}

.ft__contact-data {
	font-weight: 300;
}

.ft__contact-item {
	gap: 40px;
}

.ft__left-cnt {
	width: 100%;
}

.ft__left-cnt,
.ft__right-cnt {
	z-index: 15;
}

.ft__right-services>a {
	color: var(--white);
	font-weight: 300;
	text-decoration: none;
}

.ft__right-services {
	display: flex;
	flex-direction: column;
}

.ft__services-header {
	font-weight: 900;
	font-family: 'Gilroy';
	font-size: 24px;
	color: var(--white);
}

.ft__abstractions {
	position: relative;
}

.ft__abstractions>svg {
	position: absolute;
	pointer-events: none;
	overflow: hidden;
	z-index: 10;
}

.ft__abs-1 {
	bottom: 0;
	right: 69vw;
}

.ft__abs-2 {
	right: 74vw;
	top: 18%;
}

.ft__abs-3 {
	left: 11vw;
	top: 3%;
}

.ft__abs-4 {
	left: 205px;
	top: 100px;
}

/* ================= */
/* ==== Sidebars ===
  /* ================= */
.lsb__close-btn-cnt {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100px;
}

.sb__close-btn-cnt {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 80px;
}

.lsb__close-btn-cnt {
	margin-right: 50px;
	margin-top: 20px;
}

.sb__close-btn-cnt>.btn-close,
.lsb__close-btn-cnt>.btn-close {
	width: 5px;
	height: 5px;
}

.sb__header {
	font-size: 36px;
	font-weight: bold;
	font-family: 'Gilroy';
	font-weight: 600;
	margin-bottom: 20px;
}

.sb__login-btn {
	color: var(--white);
	background-color: var(--green);
	border-radius: 22px;
	padding: 10px 60px;
	margin-bottom: 35px;
}

.sb__footer {
	height: 100%;
	margin-top: 60px;
	background-color: var(--green);
	padding: 80px 60px 0 60px;
}

.sb__logged {
	width: 550px;
	height: 90%;
	border-bottom-left-radius: 15px;
	box-shadow: -5px 0px 20px #00000029;
}

.lsb__header {
	margin-left: 60px;
	font-weight: 600;
	font-size: 36px;
	margin-bottom: 20px;
}

.lsb__mn-item {
	width: 77%;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60px;
	border-bottom: 1px solid #DEECEA;
	transition: padding-left 0.5s;
	position: relative;
	text-decoration: none;
}

.lsb__mn-page-icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	opacity: 0;
	transition: opacity 0.5s;
}

.lsb__mn-text {
	margin-left: 30px;
	font-size: 18px;
	margin-right: auto;
	color: var(--dark_burgundy);
	text-decoration: none;
}

.lsb__mn-chevron-icon {
	display: none;
}

.lsb__mn-item-cnt {
	margin-top: -1px;
}

.mnl-active-item {
	background-color: var(--pink);
	position: relative;
	z-index: 10;
}

.mnl-active-item>.lsb__mn-item {
	border: transparent;
}

.mnl-active-item>.lsb__mn-page-icon {
	position: relative;
	z-index: 10;
}

.mnl-active-item>.lsb__mn-item>.lsb__mn-page-icon {
	opacity: 1;
	display: block;
}

.mnl-active-item>.lsb__mn-item>.lsb__mn-text {
	font-weight: 600;
	padding: 20px;
}

.mnl-active-item>.lsb__mn-item>.lsb__mn-chevron-icon {
	display: block;
}

/* ================= */
/* ===== Modals ====
  /* ================= */
.modal-body {
	width: 80%;
	margin: auto;
	z-index: 15;
	padding: 1rem 0;
}

.modal-footer {
	z-index: 15;
	justify-content: space-between;
	width: 80%;
	padding: 1rem 0;
	margin: auto;
	border-top: none;
}

.modal-content {
	width: 1100px;
	margin: auto;
	border: none;
	border-radius: 15px;
	overflow: hidden;
}

.modal-dialog {
	max-width: none;
}

.modal-header {
	width: 80%;
	margin: auto;
	padding-top: 50px;
	padding-left: 0;
	border-bottom: 1px solid var(--grey);
	z-index: 15;
}

.modal-title {
	font-family: 'Gilroy';
	font-size: 34px;
}

.modal-header>.btn-close {
	position: absolute;
	right: 50px;
	top: 50px;
	padding: 0;
	width: 12px;
	height: 12px;
}

.modal-abstraction-1 {
	position: absolute;
	pointer-events: none;
	left: -230px;
	top: -128px;
}

.modal-abstraction-2 {
	position: absolute;
	pointer-events: none;
	top: -100px;
	left: -178px;
}

.modal-abstraction-3 {
	position: absolute;
	pointer-events: none;
	bottom: 20px;
	left: -115px;
}

.modal-abstraction-4 {
	position: absolute;
	pointer-events: none;
	bottom: -70px;
	right: -175px;
	z-index: 10;
}

.modal-abstraction-5 {
	position: absolute;
	pointer-events: none;
	right: -145px;
	bottom: -220px;
}

/* Exit modal */
.mn__exm-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 120px 30px;
}

.mn__exm-body>h2 {
	font-weight: 600;
	margin-bottom: 15px;
	text-align: center;
}

.mn__exm-body>p {
	text-align: center;
}

.mn__exm-loggout {
	color: var(--green);
	background-color: var(--white);
	border-radius: 26px;
	border: 1px solid var(--green);
	font-weight: 600;
	padding: 12px 70px;
	margin: 30px 0;
}

.mn__exm-back {
	text-decoration: underline;
	font-weight: 600;
	color: var(--dark_burgundy);
}

/* My cards modal */
.mc__img>img {
	width: 100%;
	margin-bottom: 5px;
}

.mc__card {
	display: flex;
	flex-direction: column;
	width: 30%;
	margin-bottom: 30px;
}

.mc__cnt {
	display: flex;
	flex-wrap: wrap;
	margin-top: 40px;
	gap: 5%;
}

.mc__card a {
	color: var(--dark_burgundy);
	text-decoration: none;
}

.mc__card a>p {
	text-align: center;
	margin-bottom: 0;
	font-size: 14px;
}

.mn__all-cards-cnt,
.mn__add-cards-cnt {
	padding: 30px 0;
}

.mn__all-cards-cnt>.ac__row,
.mn__add-cards-cnt>.ac__row,
.mn__edit-cards-cnt>.ec__row {
	margin-bottom: 25px;
}

.mc__btn {
	text-decoration: none;
	padding: 10px 30px;
	cursor: pointer;
}

label[for="front-image"],
label[for="back-image"] {
	padding-left: 0;
}

label[for="title"],
label[for="front-image"]>.label-title,
label[for="back-image-select"],
label[for="back-image"]>.label-title {
	font-size: 20px;
	font-weight: 600;
	font-family: 'Gilroy';
	padding-left: 0;
}

label[for="front-image"]>.label-title,
label[for="back-image"]>.label-title {
	margin-bottom: 8px;
}

.mc__title>#title {
	background-color: transparent;
	height: 45px;
	border-color: var(--green);
}

.mc__title>#title-description {
	padding-left: 0;
	color: var(--dark_burgundy);
}

.ac__row>label,
.ec__row>label {
	width: 100%;
}

/* File input */
input#front-image,
input#back-image,
.mc__back-image-cnt,
.mc__add-card,
.mc__edit-card {
	display: none;
}

.fi__cnt {
	display: flex;
	gap: 30px;
	height: 40px;
	margin-top: 8px;
	width: 100%;
	cursor: pointer;
}

.fi__cnt>p {
	margin-bottom: 0;
	display: flex;
	align-items: center;
}

.fi__cnt>span {
	width: 20%;
	background-color: var(--pink);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
}

.mc__select>#back-image-select {
	width: 40%;
	height: 45px;
	border-color: var(--green);
}

.mc__next-btn {
	background-color: var(--green);
	color: var(--white);
	border-radius: 22px;
	padding: 10px 70px;
	margin-bottom: 20px;
	text-decoration: none;
	border: none;
}

.mc__add-btn-cnt {
	margin-top: 15px;
}

/* Edit card */
.ec__img {
	margin: 30px 0;
}

.ec__img>.img-cnt {
	width: 30%;
}

.ec__img>.img-cnt>img {
	width: 100%;
}

/* Fancybox */
.fancybox-caption__body {
	font-size: 22px;
}

/*  mcm: My choco's modal */
.mcm__info-cnt {
	display: flex;
	gap: 8%;
	padding: 0 20px 0 20px;
	margin: 40px 0 20px 0;
}

.mcm__right {
	width: 100%;
}

.mcm__progress-bar {
	width: 100%;
	height: 49px;
	overflow: hidden;
	border: 1px solid var(--light_green);
	border-radius: 30px;
	display: inline-flex;
}

.mcm__progress-bar>.progress-level {
	height: 100%;
	width: 60%;
	background-color: var(--light_green);
}

.mcm__progress-cnt>.progress-text {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.mcm__progress-cnt>.progress-text>.left {
	font-size: 13px;
	margin-left: -10px;
}

.mcm__progress-cnt>.progress-text>.right {
	font-size: 13px;
	margin-right: -10px;
}

.mcm__next-reward {
	font-weight: 600;
}

.mcm__text {
	font-size: 14px;
}

.me__contact-cnt {
	display: none;
}

/* Body abstraction */
.body_abstraction {
	position: absolute;
	top: 42%;
	overflow: hidden;
	z-index: 10;
}

/* ================= */
/* = Media queries = */
/* ================= */
@media (max-width: 1600px) {
	.rounded-green-border-2>.left-part {
		width: 35%;
	}

	.mn__me-item-name {
		padding-left: 10px;
	}

	.me__contact-cnt {
		display: none;
	}

	.ft__abs-2 {
		right: 75vw;
	}
}

@media (max-width: 1400px) {
	header {
		padding: 0 2%;
	}

	main {
		width: 85%;
		margin: 0 auto;
	}

	.sb__logged {
		height: 85%;
	}

	.mn__me-item-name {
		font-size: 16px;
	}

	.ft__abs-3 {
		left: 60px;
	}

	.ft__abs-4 {
		left: 55px;
	}

	.body_abstraction {
		display: none;
	}
}

@media (max-width: 1200px) {
	main {
		width: 90%;
	}

	.faq__text {
		width: 100%;
	}

	.modal-content {
		width: 750px;
	}

	.mgo__st1-body {
		width: 60%;
	}

	.modal-abstraction-1 {
		left: -310px;
		top: -150px;
	}

	.modal-abstraction-2 {
		left: -210px;
	}

	.modal-abstraction-3 {
		bottom: 110px;
	}

	.modal-abstraction-4 {
		bottom: -100px;
		right: -200px;
	}

	.modal-abstraction-5 {
		right: -170px;
		bottom: -270px;
	}

	.modal-footer {
		padding-left: 0;
		padding-right: 0;
	}

	.fi__cnt>span {
		width: 25%;
	}

	.ec__img>.img-cnt {
		width: 50%;
	}
}

@media (max-width: 992px) {
	.ft__right-services {
		display: none;
	}

	.ft__header {
		font-size: 40px;
	}

	.ft__left-cnt {
		width: 100%;
	}

	.ft__left {
		margin: auto auto 50px auto;
	}

	.ft__copyright {
		text-align: center;
	}

	footer {
		height: 450px;
	}

	.mn__me-item-name {
		display: none;
	}

	.mn__me-cnt {
		width: 50px;
	}

	.mn__me-icon-cnt,
	.mn__content-cnt,
	.mn__uc-userdata,
	.mn__uc-3>.mn__uc-userdata {
		width: 100%;
	}

	.mn__uc-3>.mn__uc-userdata:nth-child(2) {
		margin-top: 0;
	}

	.mn__greeting {
		font-size: 36px;
	}

	.mn__me-icon-cnt {
		min-width: 40px;
	}

	.ft__left {
		width: 90%;
	}

	.ft__abs-1 {
		bottom: 0;
		right: 76vw;
	}

	.ft__abs-2 {
		right: 86vw;
	}

	.ft__abs-3 {
		left: -150px;
	}

	.ft__abs-4 {
		left: -150px;
	}
}

@media (max-width: 768px) {
	.modal-body {
		padding: 20px;
	}

	.hd__contact-data-ctn {
		flex-direction: column;
		margin: 0 30px;
	}

	.hd__contact-ctn {
		margin: 0;
	}

	.hd__contact-ctn {
		justify-content: flex-end;
	}

	.faq__cnt {
		margin-top: 50px;
	}

	.faq__header {
		font-size: 26px;
	}

	.ft__left {
		width: 90%;
	}

	.sb__abstraction-2 {
		bottom: 600px;
		left: 300px;
	}

	.modal-content {
		width: 95%;
	}

	.modal-body {
		width: 100%;
	}

	.modal-title {
		font-size: 26px;
	}

	.modal-header>.btn-close {
		top: 30px;
		right: 30px;
	}

	.modal-abstraction-1 {
		top: -275px;
	}

	.modal-abstraction-2 {
		top: -160px;
	}

	.modal-abstraction-3 {
		bottom: 170px;
		left: -150px;
	}

	.modal-abstraction-4 {
		bottom: -180px;
		right: -220px;
	}

	.mn__exm-body {
		padding: 80px 30px;
	}

	.rounded-green-border-2>.left-part {
		width: 50%;
	}

	.rounded-green-border-2 {
		height: 36px;
	}

	.rounded-green-border-2>.left-part>span,
	.rounded-green-border-2>.right-part>span {
		font-size: 14px;
	}

	.hide-768 {
		display: none;
	}

	.mcm__info-cnt {
		flex-direction: column;
		gap: 20px;
		margin-bottom: 10px;
	}

	.mcm__text {
		padding: 0 20px;
	}

	.ft__copyright {
		width: 100%;
	}

	.ft__copyright>p {
		margin-bottom: 10px;
	}

	.modal-header {
		width: 90%;
	}
}

@media (max-width: 576px) {
	.mn__main-cnt {
		margin-top: 25px;
	}

	.mn__greeting {
		margin-top: 20px;
	}

	header {
		height: 100px;
	}

	main {
		width: 95%;
	}

	.hd__contact-data-ctn {
		margin: 0 15px;
	}

	.ft__contact-item {
		gap: 10px;
	}

	.hd__image-ctn {
		width: 27%;
	}

	.hd__contact-data-ctn {
		font-size: 13px;
	}

	.big-white-btn {
		display: block;
		padding: 10px 0;
	}

	.mn__login-btn {
		display: block;
		padding: 10px 0;
	}

	.ft__header {
		font-size: 32px;
	}

	.sb__cnt,
	.sb__email,
	.sb__password {
		width: 100%;
	}

	.lsb__close-btn-cnt {
		padding-top: 20px;
		margin-right: 20px;
		height: 30px;
	}

	#offcanvasRight {
		overflow: auto;
	}

	.lsb__mn-cnt {
		padding-bottom: 20px;
	}

	.sb__logged {
		height: 100%;
	}

	.lsb__header {
		margin-top: 30px;
	}

	.rgb__with-link {
		flex-direction: column;
	}

	.rgb__with-link>p {
		padding-bottom: 0;
		padding-top: 5px;
	}

	.rgb__with-link>a {
		margin-right: 0;
		padding-bottom: 5px;
		padding-left: 20px;
		justify-content: left;
	}

	.rounded-green-border-2>.left-part {
		width: 75%;
	}

	.rounded-green-border-2>.right-part {
		padding-left: 5%;
	}

	.rounded-green-border-2>.left-part span,
	.rounded-green-border-2>.right-part span {
		font-size: 12px;
	}

	.mc__card {
		width: 45%;
	}

	.mc__btn {
		font-size: 14px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.fi__cnt {
		flex-direction: column;
		gap: 10px;
		height: auto;
	}

	.fi__cnt>span {
		height: 40px;
		width: 60%;
	}

	.mc__select>#back-image-select,
	.mc__next-btn {
		width: 100%;
	}

	.ec__img>.img-cnt {
		width: 70%;
	}

	.hide-576 {
		display: none;
	}

	.ft__abs-3 {
		left: -60px;
	}

	.ft__abs-4 {
		left: -70px;
	}
}

@media (max-width: 400px) {

	.sb__close-btn-cnt,
	.lsb__close-btn-cnt {
		height: 50px;
	}

	.hd__email-ctn {
		display: none;
	}

	.sb__footer {
		padding: 70px 40px 0 40px;
	}
}

@media (max-width: 350px) {
	.ft__contact-value {
		font-size: 12px;
	}
}

@media (-webkit-device-pixel-ratio: 1.25) {
	.sb__logged {
		height: 100%;
	}

	.lsb__close-btn-cnt {
		height: 50px;
	}
}

/* ================= */
/* = Hover effects = */
/* ================= */
.sb__link:hover {
	color: var(--dark_burgundy);
}

.faq__item:hover {
	color: var(--light_green);
}

.big-white-btn:hover,
.hd__btn:hover,
.sb__login-btn:hover,
.sb__footer-btn:hover,
.mn__exm-loggout:hover,
.green-btn:hover,
.mc__next-btn:hover {
	background-color: var(--light_green);
	border-color: var(--light_green);
	color: var(--white);
}

.lsb__mn-item-cnt:hover {
	background-color: var(--pink);
	position: relative;
	z-index: 10;
}

.lsb__mn-item-cnt:hover .lsb__mn-item {
	padding-left: 20px;
	border-color: transparent;
}

.lsb__mn-item-cnt:hover .lsb__mn-page-icon,
.lsb__mn-item-cnt:hover .lsb__mn-chevron-icon {
	display: block;
	animation: opacity-animation 0.5s forwards;
}

.mnl-active-item:hover .lsb__mn-page-icon,
.mnl-active-item:hover .lsb__mn-chevron-icon {
	animation: none;
}

.lsb__mn-item-cnt:hover .lsb__mn-text {
	font-weight: 600;
}

.mnl-active-item:hover .lsb__mn-item {
	padding-left: 0;
}

.mn__exm-back:hover {
	color: var(--green);
}

/* ================= */
/* = Focus effects = */
/* ================= */
.btn:focus,
.btn-close:focus,
.mc__title>#title:focus,
.mc__select>#back-image-select:focus {
	box-shadow: none;
}

.sb__email>input:focus,
.sb__password>input:focus {
	background-color: var(--pink);
	box-shadow: none;
}

/* ================ */
/* ===== Icons ==== */
/* ================ */
.user-icon {
	-webkit-mask-image: url(../icons/user.svg);
	mask-image: url(../icons/user.svg);
}

.calendar-icon {
	-webkit-mask-image: url(../icons/calendar.svg);
	mask-image: url(../icons/calendar.svg);
}

.box-icon {
	-webkit-mask-image: url(../icons/box.svg);
	mask-image: url(../icons/box.svg);
}

.envelope-icon {
	-webkit-mask-image: url(../icons/envelope.svg);
	mask-image: url(../icons/envelope.svg);
}

.check-icon {
	-webkit-mask-image: url(../icons/check-menu.svg);
	mask-image: url(../icons/check-menu.svg);
}

.time-icon {
	-webkit-mask-image: url(../icons/time.svg);
	mask-image: url(../icons/time.svg);
}

.order-icon {
	-webkit-mask-image: url(../icons/order.svg);
	mask-image: url(../icons/order.svg);
}

.gifts-icon {
	-webkit-mask-image: url(../icons/gifts.svg);
	mask-image: url(../icons/gifts.svg);
}

.cart-icon {
	-webkit-mask-image: url(../icons/cart.svg);
	mask-image: url(../icons/cart.svg);
}

.gift-icon {
	-webkit-mask-image: url(../icons/gift.svg);
	mask-image: url(../icons/gift.svg);
}

.exit-icon {
	-webkit-mask-image: url(../icons/exit.svg);
	mask-image: url(../icons/exit.svg);
}

.deals-icon {
	-webkit-mask-image: url(../icons/deals.svg);
	mask-image: url(../icons/deals.svg);
}

.parcel-icon {
	-webkit-mask-image: url(../icons/parcel.svg);
	mask-image: url(../icons/parcel.svg);
}

.choco-icon {
	-webkit-mask-image: url(../icons/choco.svg);
	mask-image: url(../icons/choco.svg);
}

.search-icon {
	position: absolute;
	right: 7px;
	top: 7px;

}

.pagination {
	justify-content: end;
}

.pencil-icon {
	height: 22px;
	width: 22px;
	background: var(--white);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-image: url(../icons/pencil-white.svg);
	mask-image: url(../icons/pencil-white.svg);
}

.trash-icon {
	height: 22px;
	width: 22px;
	background: var(--red);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-image: url(../icons/trash-white.svg);
	mask-image: url(../icons/trash-white.svg);
}

/* ================ */
/* == Key frames == */
/* ================ */
@keyframes opacity-animation {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ===================== */
/* ==== Input number === */
/* ===================== */
input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
}