/* ============================================================
   UTILITIES
   ============================================================ */

.clear {
	clear: both;
}

.no-space [class*="span"] {
	margin-left: 0;
}

.no-space {
	margin-left: 0;
}

/* Flexbox Layout System */
section {
	display: flex;
	flex-wrap: wrap;
	background-color: #fff;
	width: 100%;
}

[class*="span"] {
	box-sizing: border-box;
	float: none !important;
	margin-left: 0 !important;
}

.span3 {
	flex: 0 0 25%;
	max-width: 25%;
}

.span9 {
	flex: 0 0 75%;
	max-width: 75%;
}

.span9.no-space > div {
	padding: 30px;
}

/* Responsive Images in Content areas */
.span9 img,
.main-content img,
.content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin-bottom: 20px;
}

.span5 {
	flex: 0 0 41.66666667%;
	max-width: 41.66666667%;
}

.span7 {
	flex: 0 0 58.33333333%;
	max-width: 58.33333333%;
}

.span6 {
	flex: 0 0 50%;
	max-width: 50%;
}

.span12 {
	flex: 0 0 100%;
	max-width: 100%;
}

/* Mobile Responsive stacking and UX improvements */
@media (max-width: 979px) {
	/* Override flexbox for navbar so Bootstrap's dropdown works properly on mobile */
	.navbar-inner, .navbar, #navigation {
		display: block !important;
		height: auto !important;
	}
	
	/* Custom Hamburger Menu (3 red lines) */
	.navbar .btn-navbar {
		margin-top: 15px;
		margin-bottom: 15px;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 10px 15px;
	}
	
	.navbar .btn-navbar .icon-bar {
		background-color: #ec1d23 !important;
		height: 4px !important;
		border-radius: 2px !important;
		width: 30px !important;
		margin-top: 6px !important;
		box-shadow: none !important;
	}
}

@media (max-width: 767px) {
	section {
		flex-direction: column;
	}
	[class*="span"] {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
	
	/* Offer Content should be displayed BEFORE sidebar */
	.span9.no-space {
		order: -1;
	}

	/* Hide carousel caption on small screens */
	.carousel-caption {
		display: none !important;
	}
	
	/* Ensure logo has breathing room on mobile */
	#logotyp {
		padding: 15px 0;
	}
}

/* ============================================================
   COLORS & TYPOGRAPHY
   ============================================================ */

.bg-red {
	background-color: #ec1d23;
}

.text-red {
	color: #ec1d23;
}

.font-oswald {
	font-family: Oswald, sans-serif;
}

h1,
h2,
h4 {
	font-family: Oswald, sans-serif;
}

h2 {
	color: #515151;
	margin-top: 20px;
	margin-bottom: 20px;
}

.span9.no-space h1 {
	color: #515151;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 30px;
}

/* ============================================================
   LAYOUT - HEADER
   ============================================================ */

.header-section {
	align-items: stretch;
}

#logotyp {
	display: flex;
	align-items: center;
	justify-content: center;
}

#logotyp img {
	max-height: 80px; /* Safeguard for logo size */
	width: auto;
}

#navigation, 
.navbar, 
.navbar-inner {
	height: 100%;
}

.navbar-inner {
	display: flex;
	align-items: center;
}

/* ============================================================
   LAYOUT - SIDEBAR
   ============================================================ */

.sidebar-menu {
	background-color: #515151;
	color: #fff;
}

.sidebar-menu .menu-header {
	font-size: 23px;
	padding: 30px 0;
	margin-left: 22px;
}

.sidebar-menu ul {
	margin: 0;
	padding: 0;
}

.sidebar-menu ul li {
	list-style: none outside none;
	margin: 0;
}

.sidebar-menu h5 {
	font-weight: normal;
	font-size: 12px;
	margin: 0;
}

.sidebar-menu a {
	color: #fff;
	padding: 10px 0 10px 25px;
	display: block;
}

.sidebar-menu a:hover {
	background-color: #515151;
}

.sidebar-menu .highlight {
	color: #ec1d23;
}

.sidebar-menu .selected {
	background-color: #fff;
	border-left: 3px solid black;
	color: #515151;
	padding: 10px 0 10px 22px;
}

.sidebar-menu .selected:hover {
	color: #515151;
	background-color: #f4f4f4;
}

.sidebar-menu .selected-parent {
	background-color: #fff;
	padding: 10px 0 10px 20px;
}

.sidebar-menu ul li img {
	float: right;
	margin-right: 30px;
	margin-top: 7px;
}

.sidebar-menu .submenu {
	background-color: #fff;
	border-left: 3px solid black;
}

.sidebar-menu .submenu a {
	color: #515151;
	padding-left: 40px;
}

.sidebar-menu .submenu a:hover {
	color: #515151;
	background-color: #f4f4f4;
}

.sidebar-menu .submenu a.submenu-active {
	color: #ec1d23;
}

/* ============================================================
   LAYOUT - SIDEBAR OPENING HOURS
   ============================================================ */

.sidebar-opening-hours {
	background-color: #ec1d23;
	color: #fff;
	padding: 30px 22px;
	margin-top: 30px;
}

.sidebar-opening-hours h4 {
	font-family: Oswald, sans-serif;
	font-size: 18px;
	margin: 0 0 15px 0;
	padding: 0;
	color: #fff;
}

.sidebar-opening-hours .opening-row {
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
}

.sidebar-opening-hours .opening-row:last-child {
	margin-bottom: 0;
}

.sidebar-opening-hours .days {
	font-weight: 500;
	font-size: 13px;
	margin-bottom: 3px;
	opacity: 0.9;
}

.sidebar-opening-hours .hours {
	font-size: 14px;
	font-weight: 700;
}

/* ============================================================
   LAYOUT - MAIN CONTENT
   ============================================================ */

.main-content {
	background-color: #fff;
	color: #515151;
	margin-bottom: 35px;
}

.main-content h1 {
	margin: 20px 0;
	padding: 20px;
}

.main-content h4 {
	margin: 0;
	padding: 20px 0 0 20px;
}

.main-content-left {
	background-color: #fff;
	color: #515151;
	padding-left: 30px;
	min-height: 1020px;
}

.main-content-left h1 {
	margin: 20px 0;
}

.main-content .content {
	padding: 20px;
}

.main-content .content li,
.main-content-left .content li {
	background: url('../img/arrow_gray.png') no-repeat scroll left center transparent;
	list-style-type: none;
	padding: 1px 15px;
}

.main-content .content ul ul li {
	color: #ec1d23;
}

/* ============================================================
   LAYOUT - COOPERATION / PARTNERS
   ============================================================ */

.main-content .content .cooperation a {
	float: left;
	height: 50px;
	width: 150px;
	overflow: hidden;
	margin: 35px;
}

.main-content .content .cooperation img {
	margin-top: -51px;
}

.main-content .content .cooperation img:hover {
	margin-top: 0;
}

/* ============================================================
   LAYOUT - WELCOME SECTION
   ============================================================ */

.section-welcome {
	background-color: #fff;
}

.section-welcome div {
	padding: 50px 70px;
	text-align: justify;
}

/* ============================================================
   LAYOUT - OPENING HOURS SECTION
   ============================================================ */

.section-hours {
	color: #fff;
}

.section-hours div {
	padding: 50px 70px;
	text-align: justify;
}

.section-hours .mgtop {
	margin-top: 10px;
}

.hours-box {
	margin: 40px 0;
	padding: 40px 20px;
}

.hours-box .hours {
	float: right;
}

.hours-box .days {
	float: left;
	clear: both;
}

/* ============================================================
   LAYOUT - PROMOTIONS
   ============================================================ */

div.promotions {
	padding-right: 130px;
	padding-left: 180px;
}

/* ============================================================
   LAYOUT - FOOTER
   ============================================================ */

.footer-wrapper {
	margin-top: 30px;
}

.footer-dark-section {
	background-color: #222222 !important;
}

.footer-dark {
	color: #a1a1a1;
	text-align: justify;
}

.footer-dark div,
.footer-darker {
	padding: 50px 70px;
}

.footer-dark div a {
	display: inline-block;
	padding: 0 35px 10px 0;
}

.footer-darker-section {
	background-color: #2b2b2b !important;
}

.footer-darker {
	color: #a1a1a1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.footer-darker .span6:nth-child(2) {
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.footer-darker h4 {
	color: #d9d9d9;
}

.footer-darker h4 span {
	font-family: Tahoma, sans-serif;
	font-size: 12px;
}

.footer-darker p {
	text-align: right;
	margin-top: 12px;
}

.footer-darker p a {
	display: inline-block;
	padding: 0 15px 0 0;
}

/* ============================================================
   DROPDOWN
   ============================================================ */

.dropdown-menu .selected {
	background-color: #ec1d23;
}

.dropdown-menu .selected a {
	color: #fff;
}

/* ============================================================
   HOVER STATES (legacy JS-controlled)
   ============================================================ */

.hover-red {
	background-color: #ec1d23;
}

.hover-red a {
	color: #fff;
}

.hover-red .arrow-icon {
	background: url('../img/arrow_white.png');
}

.hover-white {
	background-color: #fff;
}

.hover-gray {
	background-color: #e4e4e4;
}

.hover-gray .arrow-icon {
	background: url('../img/arrow.png');
}

/* ============================================================
   ICONS
   ============================================================ */

.arrow-icon {
	background: url('../img/arrow.png');
	float: right;
	height: 7px;
	margin-top: 7px;
	width: 4px;
}

/* ============================================================
   TABLES
   ============================================================ */

.odd {
	background-color: #e4e4e4;
}

.content .product-table {
	width: 840px;
}

.content .product-table th {
	background-color: #e4e4e4;
	padding: 10px;
	text-align: left;
}

.content .product-table td {
	padding: 10px;
	text-align: left;
}

.content .product-table .details {
	text-align: right;
}

.content .product-table .details a {
	margin-right: 10px;
}

/* ============================================================
   SEARCH FORM
   ============================================================ */

.search-form div {
	float: left;
	font-size: 11px;
	margin-right: 20px;
	color: #d9d9d9;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination-nav {
	padding: 20px 0;
	text-align: center;
}

.pagination-active {
	background-color: #e4e4e4;
	padding: 10px;
}

.pagination-separator {
	color: #e4e4e4;
}

/* ============================================================
   CONTENT WRAPPER
   ============================================================ */

div.content {
	padding-right: 10px;
}

div.carousel-caption h4 a {
	color: #515151;
}

/* ============================================================
   HOME PAGE BANNERS
   ============================================================ */

.opening-hours-banner {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 30px;
	color: #fff;
	flex-wrap: wrap;
}

.opening-hours-banner h1 {
	color: #fff;
	margin: 0;
}

.opening-hours-banner .hours-block {
	text-align: center;
	font-size: 1.2em;
}

.opening-hours-banner .hours-block strong {
	font-size: 1.1em;
	display: block;
	margin-bottom: 5px;
}

.experience-banner {
	background-color: #2b2b2b;
	color: #fff;
	text-align: center;
	padding: 60px 20px;
}

.experience-banner h1 {
	color: #ec1d23;
	font-size: 3.5em;
	margin: 0 0 10px 0;
	text-transform: uppercase;
}

.experience-banner h2 {
	font-size: 2.5em;
	font-weight: 300;
	margin: 0;
	color: #d9d9d9;
}

@media (max-width: 767px) {
	.opening-hours-banner {
		flex-direction: column;
		text-align: center;
		gap: 20px;
	}
	.experience-banner h1 {
		font-size: 2.5em;
	}
	.experience-banner h2 {
		font-size: 1.8em;
	}
}

.carousel-section {
	background-color: #e4e4e4;
}

#myCarousel {
	padding-bottom: 30px;
	padding-top: 30px;
	margin-top: 30px;
	margin-bottom: 30px;

}

/* Przesunięcie kropek na prawą stronę karuzeli */
.carousel-indicators {
    position: absolute !important;
    right: 20px !important;
    left: auto !important;
    width: auto !important;
    text-align: right !important;
}

/* Wyśrodkowanie obrazków w karuzeli */
#myCarousel .carousel-inner .item img {
    margin: 0 auto !important;
}

/* Przesunięcie przycisków lewo/prawo od krawędzi (20px głębiej) */
.carousel-control.left {
    left: 35px !important;
}
.carousel-control.right {
    right: 35px !important;
}