/***********************************************************************************************/
/* FONTS */
/***********************************************************************************************/

@font-face {
	font-family: DefaultFont;
	font-weight: 400;
	src: url(/Webfonts/BrutalTypeRegular.woff) format('woff');
}

@font-face {
	font-family: DefaultFont;
	font-weight: 500;
	src: url(/Webfonts/BrutalTypeMedium.woff) format('woff');
}

/***********************************************************************************************/
/* ELEMENTS */
/***********************************************************************************************/

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: DefaultFont, sans-serif;
	font-weight: 400;
	font-size: 0.8rem;
	background-color: #f0f0f0;
}

/***********************************************************************************************/
/* BOOTSTRAP */
/***********************************************************************************************/

.form-label {
	font-weight: 500;
}

.bg-secondary {
	background-color: #f0f0f0;
}

.form-control-spinner {
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
	right: 0;
	margin-right: 20px;
	margin-top: 8px;
	color: #666;
	display: none;
}

/***********************************************************************************************/
/* PAGE HEADER */
/***********************************************************************************************/

.page-header {
	border: solid 0px red;
	position: fixed;
	width: 100%;
	box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.25);
	z-index: 999;
}

	/* Header > Top bar (Store data) */

	.page-header .top-bar {
		background-color: #61b75f;
		text-align: center;
		padding: 0.4rem 0;
		color: #fff;
		font-size: 0.9rem;
		box-shadow: inset 0 -7px 15px -7px rgba(0,0,0,0.1);
	}

		.page-header .top-bar .label {
			margin-right: 5px;
		}

		.page-header .top-bar a {
			color: #fff;
			text-decoration: underline;
		}

			.page-header .top-bar a:hover {
				text-decoration: none;
			}

	/* Header > Mainbar */

	.page-header .main-bar {
		border: solid 0px blue;
		background-color: #fff;
	}

		.page-header .main-bar .container {
			display: flex;
			height: 80px;
		}

		/* Header > Mainbar > Brand */

		.page-header .main-bar .brand {
			border: solid 0px blue;
			width: 180px;
			background: url('/Images/Store/header-logo.png') left center no-repeat;
			background-size: contain;
			text-indent: -9999px;
			margin: 0.5rem 1rem;
		}

		/* Header > Mainbar > Nav */

		.page-header .main-bar .nav {
			border: solid 0px blue;
			align-self: center;
			flex-grow: 4;
		}

			.page-header .main-bar .nav ul {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				list-style: none;
				margin: 0;
			}

				.page-header .main-bar .nav ul li a {
					font-size: 0.9rem;
					color: #333;
				}

		/* Header > Mainbar > User */

		.page-header .main-bar .user {
		}

			.page-header .main-bar .user a {
				border: solid 0px blue;
				display: flex;
				height: 100%;
				padding: 0 1rem;
				margin-left: 1rem;
				background-color: #f0f0f0;
				text-decoration: none;
				color: #333;
			}

				.page-header .main-bar .user a:hover {
					background-color: #e1e1e1;
				}

				.page-header .main-bar .user a .fas {
					align-self: center;
					font-size: 2rem;
					margin-right: 1rem;
				}

				.page-header .main-bar .user a .box {
					align-self: center;
					border: solid 0px blue;
				}

		/* Header > Mainbar > Basket */

		.page-header .main-bar .basket {
			display: flex;
			margin-left: 1rem;
			margin-right: 1rem;
			position: relative;
			align-self: center;
			border: solid 0px blue;
		}

			.page-header .main-bar .basket .basket-products-quantity {
				position: absolute;
				top: -.35rem;
				right: -.35rem;
				width: 1.25rem;
				height: 1.25rem;
				border-radius: 50%;
				background-color: #fe696a;
				color: #fff;
				font-size: .75rem;
				font-weight: 500;
				text-align: center;
				line-height: 1.25rem;
			}

			.page-header .main-bar .basket .btn-basket {
				width: 2.5rem;
				height: 2.5rem;
				font-size: 1rem;
				background-color: #f0f0f0;
				border-radius: 50%;
				border: 0;
				margin: 0;
				text-decoration: none;
			}

				.page-header .main-bar .basket .btn-basket:hover {
					background-color: #e1e1e1;
				}

		.page-header .main-bar .toggle-button {
			display: none;
		}

@media only screen and (max-width: 1024px) {
	.page-header .main-bar {
		border: solid 0px red;
		background-color: #fff;
		padding: 0;
	}

		.page-header .main-bar .container {
			border: solid 0px purple;
			padding: 0;
			margin: 0 auto;
		}

		/* Header > Mainbar > brand */

		.page-header .main-bar .brand {
			flex-grow: 4;
			border: solid 0px blue;
		}

		/* Header > Mainbar > Nav */

		.page-header .main-bar .nav {
			position: absolute;
			width: 100%;
			top: 110px;
			left: 0;
			padding: 0;
			background: #fff;
			box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.25);
			/* Toggle vision */
			z-index: 9999;
			max-height: 0;
			overflow: hidden;
			-moz-transition: max-height 0.5s linear; /* Firefox 4 */
			-webkit-transition: max-height 0.5s linear; /* Safari and Chrome */
			-o-transition: max-height 0.5s linear; /* Opera */
			-ms-transition: max-height 0.5s linear; /* Explorer 10 */
			transition: max-height 0.5s linear;
		}

			.page-header .main-bar .nav ul {
				border: solid 1px #dfdfdf;
				border-radius: 0.3rem;
				padding: 0;
				margin: 1rem;
				flex-direction: column;
			}

				.page-header .main-bar .nav ul li {
					margin: 0;
				}

					.page-header .main-bar .nav ul li a {
						display: block;
						padding: 0.5rem 0;
						text-align: center;
						border-bottom: solid 1px #f0f0f0;
					}

					.page-header .main-bar .nav ul li:last-child a {
						border-bottom: solid 0px #f0f0f0;
					}

			.page-header .main-bar .nav.show {
				max-height: 500px;
			}

		/* Header > Mainbar > User */

		.page-header .main-bar .user a {
			border: solid 0px blue;
			background-color: transparent;
			color: #333;
			margin: 0;
			padding: 0;
		}

			.page-header .main-bar .user a .fas {
				padding: 0;
				margin: 0;
			}

			.page-header .main-bar .user a .box {
				padding: 0;
				display: none;
			}

		/* Header > Mainbar > Toggle button */

		.page-header .main-bar .toggle-button {
			border: solid 0px blue;
			display: block;
			align-self: center;
			margin-right: 1rem;
		}

			.page-header .main-bar .toggle-button button {
				width: 2.5rem;
				height: 2.5rem;
				background-color: #f0f0f0;
				border: 1px solid transparent;
				border-top-color: transparent;
				border-right-color: transparent;
				border-bottom-color: transparent;
				border-left-color: transparent;
				border-radius: 50%;
			}

				.page-header .main-bar .toggle-button button .fas {
				}
}

/***********************************************************************************************/
/* PAGE MAIN */
/***********************************************************************************************/

.page-main {
	border: solid 0px purple;
	padding: 10rem 0 4rem 0;
	flex: 1;
	display: flex;
}

	.page-main .container {
		border: solid 0px green;
	}

/***********************************************************************************************/
/* CONTENT */
/***********************************************************************************************/

.content-wrapper {
	border: solid 0px red;
	width: 100%;
	padding: 1.5rem;
	background-color: #fff;
	box-shadow: 0px 0px 1rem rgba(0,0,0,0.25);
}

.small-base {
	border: solid 0px yellow;
	width: 400px;
	margin: 0 auto;
	padding: 1rem;
}

.content-base {
	padding: 1rem;
	margin-bottom: 1.5rem;
	background-color: #fff;
	box-shadow: 0px 0px 1rem rgba(0,0,0,0.25);
}

.content-block {
	margin-bottom: 1.5rem;
}

.content-box {
	border: solid 1px #dfdfdf;
	border-radius: 0.3rem;
	margin: 0;
	margin-bottom: 1.5rem;
	padding: 1rem;
}

@media only screen and (max-width: 576px) {
	.small-base {
		width: auto;
	}
}

/***********************************************************************************************/
/* PAGE FOOTER */
/***********************************************************************************************/

.page-footer {
	padding: 1rem 0;
	background: rgb(97,183,95);
	/*background: linear-gradient(180deg, rgba(97,183,95,1) 0%, rgba(52,116,50,1) 100%);*/
	/*box-shadow: 0 -5px 1rem 0 rgba(0, 0, 0, 0.25);*/
	/*border-bottom: solid 0.5rem #555755;*/
}

	.page-footer .container {
		text-align: center;
		color: #fff;
		font-size: 0.9rem;
	}

/***********************************************************************************************/
/* HOME */
/***********************************************************************************************/

.home-banner {
	border: solid 0px red;
	clear: both;
	margin-bottom: 3rem;
}

.home-content {
	border: solid 0px red;
	display: flex;
	flex-direction: row;
}

@media only screen and (max-width: 576px) {
	.home-banner {
		display: none;
	}

	.home-content {
		flex-direction: column;
	}
}

.home-banner2 {
	border: solid 0px red;
	clear: both;
	position: sticky;
}

	.home-banner2 .jumbotron {
		border: solid 0px red;
		display: flex;
		flex-direction: column;
		background: url(../../Images/Store/banner-bg2.jpg) center center;
		background-repeat: no-repeat;
		background-size: cover;
		box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.25);
	}

		.home-banner2 .jumbotron a {
			margin-bottom: 1rem;
		}

			.home-banner2 .jumbotron a:last-child {
				margin-bottom: 0rem;
			}

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

/* Home > Side menu */
.side-menu {
	border: solid 0px red;
	clear: both;
	width: 250px;
	align-self: flex-start;
}

	/* Home > Side menu > Product search */

	.side-menu #form-product-search {
		border: solid 0px red;
		margin-bottom: 1rem;
		border-bottom: solid 1px #dfdfdf;
	}

		.side-menu #form-product-search .fas {
			/*position: fixed;
			margin-top: 10px;
			margin-left: 250px;
			font-size: 1rem;
			color: #ccc;
			z-index: 2;
			display: none;*/
		}

		.side-menu #form-product-search .form-control {
			min-width: 100px;
		}

	/* Home > Side menu > Sub menu */

	.side-menu .submenu {
		border: solid 0px red;
		padding: 0.5rem;
		border: solid 1px #dfdfdf;
		border-radius: 0.3rem;
	}

		.side-menu .submenu .title {
			display: block;
			margin-bottom: 0rem;
			padding-bottom: 0;
			font-size: 1rem;
		}

		.side-menu .submenu .list {
			margin: 0.5rem 0 0 0;
			padding: 0;
			list-style: none;
		}

			.side-menu .submenu .list .item {
				position: relative;
				line-height: 2rem;
				background-color: #f9f9f9;
				border-radius: 0.5rem;
				margin-bottom: 0.5rem;
				padding: 0 0.5rem;
			}

				.side-menu .submenu .list .item .btn-remove {
					position: absolute;
					right: 10px;
				}

@media only screen and (max-width: 576px) {
	.side-menu {
		width: 100%;
	}
}

/* Home > Main content */

.main-content {
	border: solid 0px blue;
	clear: both;
	flex-grow: 4;
	margin-left: 2rem;
}

@media only screen and (max-width: 576px) {
	.main-content {
		margin-left: 0;
	}
}