:root {
	--color-blue-dark: #0071BC;
	--color-blue-light: #00BDF2;
	--color-light: #ffffff;
	--color-dark: #000000;
	--color-red: #EA0015;
	--color-yellow: #F5DC34;
	--font-family-regular: 'Roboto';
	--font-family-condensed: 'Roboto Condensed';
}

body {
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
	word-wrap: break-word;
	padding: 0px;
	margin: 0px;
	overflow-x: hidden;
	font-family: var(--font-family-regular);
	font-size: 18px;
	font-weight: normal;
}

h1, h2, h3, h4 {
	margin-top: 0px;
	margin-bottom: 0px;
	font-family: var(--font-family-condensed);
	font-weight: bold;
	font-style: italic;
	line-height: 1;
	text-transform: uppercase;
}

h1 {
	font-size: 56px;
}

h2 {
	font-size: 46px;
	margin-block: 4px;
}

h3 {
	font-size: 32px;
}

h4 {
	font-size: 20px;
}

p {
	margin: 0px;
}

a {
	border: none;
	color: inherit;
	text-decoration: none;
}

.smaller {
	font-size: smaller;
}

.larger {
	font-size: larger;
}

.content-wrapper {
	box-sizing: border-box;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.content-wrapper.blue {
	color: var(--color-blue-dark);
}

.content {
	position: relative;
	min-height: 300px;
	padding-top: 75px;
}

.content::before {
	content: "";
	height: 10px;
	width: 100%;
	display: inline-block;
	position: absolute;
	top: 10px;
	left: 0px;
	background-color: rgba(0,0,0,0.3);
	z-index: 2;
	padding-top: inherit;
}

.introduction {
	padding-top: 40px;
	padding-bottom: 40px;
}

.no-padding-bottom {
	padding-bottom: 0px !important;
}

.no-padding-top {
	padding-top: 0px !important;
}

.outro {
	margin-top: 0px;
	margin-bottom: 40px;
}

.outro p a {
	text-decoration: underline;
}

/* NAVIGATION */
.submenu {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: var(--color-blue-dark);
	z-index: 99;
	display: none;
}

.submenu .content-wrapper {
	text-align: right;
	padding-top: 22px;
}

.submenu .content-wrapper .close img {
	height: 46px;
}

.submenu ul {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0px;
	margin: 0px;
	list-style: none;
	width: 100%;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

.submenu ul li {
	text-align: center;
	padding-bottom: 20px;
}

.submenu ul li a {
	color: var(--color-light);
	font-weight: bold;
	font-style: italic;
	text-transform: uppercase;
	font-size: 50px;
}

/* TITLE TOPPER */
.title-topper {
	position: fixed;
	left: 0px;
	top: -30px;
	height: 240px;
	width: 100%;
	background-color: red;
	z-index: 19;
}

/* TITLE */
.title {
	background-color: var(--color-blue-dark);
	padding-top: 20px;
	padding-bottom: 12px;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 9;
}

.title .logo {
	height: 50px;
}

.title ul.nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 0px;
	margin: 0px;
	padding-right: inherit;
	right: 0px;
	list-style: none;
}

.title ul.nav li {
	display: inline-block;
}

.title ul.nav li.burger img {
	height: 40px;
	padding-left: 20px;
}

.title ul.nav li.language div {
	background-color: var(--color-blue-light);
	box-sizing: border-box;
	position: absolute;
	top: 44%;
	transform: translateY(-50%);
	padding: 16px 15px 10px 12px;
	border-radius: 50%;
	right: 80px;
	line-height: 1;
	aspect-ratio: 1/1;
	font-weight: bold;
	font-style: italic;
	color: var(--color-light);
	cursor: pointer;
}


/* VISUAL */
.visual {
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	height: 500px;
	width: 100%;
}

.visual.lower {
	height: 400px;
}

.visual .slogan {
	color: var(--color-light);
	text-transform: uppercase;
	font-weight: bold;
	font-style: italic;
	line-height: 1;
	text-align: right;
	width: 56%;
	min-width: 340px;
	position: relative;
	padding-left: 30px;
	margin-left: -30px;
}

.visual .slogan::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0.7;
	background-color: var(--color-blue-light);
	transform: skewX(-10deg);
}

.visual .slogan h1 {
	display: inline-block;
	box-sizing: border-box;
	padding-left: 10px;
	padding-right: 40px;
	padding-top: 30px;
	padding-bottom: 20px;
	text-align: center;
	position: relative;
}


/* FOOTER */
.footer {
	background-color: var(--color-blue-dark);
	box-sizing: border-box;
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
}

.footer h2 {
	color: var(--color-blue-light);
	text-transform: uppercase;
}

.footer ul.socials {
	margin: 0px;
	padding: 0px;
	list-style: none;
	margin-top: 40px;
	margin-bottom: 40px;
}

.footer ul.socials li {
	display: inline-block;
	box-sizing: border-box;
	padding-left: 10px;
	padding-right: 10px;
}

.footer ul.socials li img {
	height: 70px;
}

.footer ul.links {
	margin: 0px;
	padding: 0px;
	list-style: none;
	color: var(--color-light);
	text-transform: uppercase;
	font-weight: bold;
	font-style: italic;
}

.footer ul.links li {
	box-sizing: border-box;
	padding-left: 10px;
	padding-right: 10px;
}



/* WEEKS */
.content.home ul.weeks {
	padding: 0px;
	margin: 0px;
	list-style: none;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-bottom: 40px;
}

.content.home ul.weeks li {
	display: inline-block;
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;
}

.content.home ul.weeks li div {
	border-radius: 50%;
	aspect-ratio: 1/1;
	background: var(--color-blue-dark);
	background: linear-gradient(145deg,rgba(0, 113, 188, 1) 0%, rgba(0, 189, 242, 1) 100%);
	box-sizing: border-box;
	width: 120px;
	position: relative;
}

.content.home ul.weeks li div p {
	color: var(--color-light);
	font-size: 30px;
	font-weight: bold;
	font-style: italic;
	text-transform: uppercase;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	line-height: 1;
}


/* LISTS */
.list {
	padding-top: 30px;
	padding-bottom: 40px;
	color: var(--color-blue-dark);
	background-color: var(--color-blue-light);
}

.list.home {
	background-color: var(--color-light);
}

.videos ul,
.blogs ul,
.list ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 20px;
	row-gap: 20px;
	margin-top: 14px;
}

.content.videos ul,
.blogs ul {
	margin-bottom: 40px;
}

.videos ul li,
.blogs ul li,
.list ul li {
	background-color: var(--color-blue-dark);
	color: var(--color-light);
}

.videos ul li .image,
.blogs ul li .image,
.list ul li .image {
	width: 100%;
	aspect-ratio: 5/2;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.videos ul li h4, 
.blogs ul li h4,
.list ul li h4 {
	box-sizing: border-box;
	padding: 10px 10px 10px 10px;
}

.list .list-title {
	position: relative;
	width: 100%;
}

.list .list-title .more {
	position: absolute;
	top: 50%;
	right: 0px;
	transform: translateY(-50%);
	font-size: smaller;
	color: var(--color-light);
	padding: 4px 7px 2px 7px;
	text-transform: uppercase;
}

.list .list-title .more::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: var(--color-blue-dark);
	transform: skewX(-10deg);
}

.list .list-title .more p {
	position: relative;
	font-family: var(--font-family-condensed);
	font-style: italic;
}

.content.videos ul li .image,
.list.videos ul li .image {
	aspect-ratio: 7/4;
	box-sizing: border-box;
	position: relative;
}

.content.videos ul li .image h4,
.list.videos ul li .image h4 {
	position: absolute;
	width: calc(100% - 20px);
	bottom: 0px;
	left: 0px;
	font-size: larger;
}

.content.videos ul li .image h4 .min,
.list.videos ul li .image h4 .min {
	background-color: var(--color-yellow);
	position: absolute;
	left: 10px;
	top: 0px;
	transform: translateY(-45%) rotate(-8deg);
	line-height: 1;
	font-size: small;
	box-sizing: border-box;
	padding: 3px 5px 3px 5px;
	color: var(--color-dark);
	font-weight: normal;
}

.content.videos ul li .image .background,
.list.videos ul li .image .background {
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	position: absolute;
	background: linear-gradient(45deg,rgba(0, 189, 242, 0.42) 0%, rgba(0, 189, 242, 0) 100%);
}

.content.videos ul li .image img.play,
.list.videos ul li .image img.play {
	position: absolute;
	width: 60px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


.list.videos.home {
	padding-bottom: 0px;
}



/* BLOG ARTICLE */
.content.blog .doe {
	margin-bottom: 20px;
	font-size: small;
}


/* VIDEOS */
.content.videos .visual div.weeks {
	background-color: rgb(0,0,0,0.2);
	margin-top: 10px;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 10px;
}

.content.videos .visual div.weeks ul {
	text-align: center;
	width: 100%;
	max-width: 600px;
	grid-template-columns: 80px 1fr 80px 1fr 80px 1fr 80px;
	column-gap: 5px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}

.content.videos .visual div.weeks ul li {
	background-color: transparent;
	position: relative;
}

.content.videos .visual div.weeks ul li div {
	position: relative;
	border-radius: 50%;
	aspect-ratio: 1/1;
}

.content.videos .visual div.weeks ul li:nth-child(odd) div {
	background-color: rgba(255,255,255,0.4);
}

.content.videos .visual div.weeks ul li.active div {
	background-color: var(--color-blue-dark);
}

.content.videos .visual div.weeks ul li p {
	color: var(--color-light);
	font-family: var(--font-family-condensed);
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-transform: uppercase;
}

.content.videos .visual div.weeks ul li .line {
	position: absolute;
	width: 100%;
	height: 1px;
	top: 50%;
	left: 0px;
	border-bottom: 2px dotted var(--color-light);
	border-radius: 0px;
}

.content.videos .visual .slogan {
	position: absolute;
	bottom: 0px;
	margin-bottom: -25px;
	width: 50%;
}

.content.videos ul li {
	background-color: var(--color-blue-light);
	color: var(--color-blue-dark);
}

.content.videos ul li .image h4 {
	color: var(--color-light);
}

p.tags {
	font-size: smaller;
	box-sizing: border-box;
	padding: 4px 10px
}

ul.tags {
	padding: 7px 10px 10px 10px;
	margin: 0px;
	margin-bottom: 0px !important;
	list-style: none;
	display: inline-block;
}

ul.tags li {
	display: inline-block;
	margin-right: 7px;
	font-size: smaller;
}

h4.intensity {
	padding-bottom: 0px !important;
}

h4.intensity img {
	height: 17px;
	margin-right: 3px;
}



/* ERDINGER */
.content.erdinger div.bottom-image {
	width: 100%;
	height: 350px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("/afbactive.assets/gfx/erdinger-bottom.jpg");
}

.list.imprint.videos,
.list.erdinger.videos {
	padding-bottom: 0px;
}

.content.erdinger ul.outer {
	list-style: none;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 3fr;
	column-gap: 40px;
	min-height: 200px;
	margin: 0px;
	padding: 0px;
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
	max-width: 700px;
}

.content.erdinger ul.outer li.left img {
	max-width: 100%;
	max-height: 400px;
}

.content.erdinger ul.outer li.left {
	background-image: url("/afbactive.assets/gfx/bottle.png1");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: right center;
	text-align: right;
}

.content.erdinger li.right ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
}

.content.erdinger li.right ul li {
	padding-bottom: 20px;
}

/* POPUP */
.mfp-bg {
	opacity: 0.7;
}

.popup-block {
	width: 100%;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	background-color: transparent;
}

.popup-block video {
	width: 100%;
}



/* RESPONSIVES */
@media all and (max-width: 1000px) {

	.list .inner-list-container {
		overflow-x: scroll;
	}

	.list ul {
		display: table;
		width: max-content;
		padding-left: 10px;
		padding-right: 10px;
		border-spacing: 20px;
		margin-top: 4px;
	}

	.list ul li {
		display: table-cell;
		box-sizing: border-box;
		margin-left: 10px;
		margin-right: 10px;
		width: 300px;
		border-spacing: 20px;
		border-collapse: separate;
	}

	.list ul li:first-child {
		margin-left: 20px;
	}

	.list ul li:last-child {
		margin-right: 20px;
	}

	.list .content-wrapper {
		padding-left: 0px;
		padding-right: 0px;
	}

	.list h3 {
		box-sizing: border-box;
		padding-left: 20px;	
		padding-right: 20px;
	}

	.list .list-title .more {
		margin-right: 20px;
	}
}

@media all and (max-width: 800px) {

	.content.videos ul,
	.blogs ul {
		grid-template-columns: 1fr 1fr;
	}

	.content.erdinger div.bottom-image {
		height: 300px;
	}

}

@media all and (max-width: 700px) {

	h1 {
		font-size: 44px;
	}

	h2 {
		font-size: 32px;
	}

	h3 {
		font-size: 20px;
	}

	.footer ul.socials {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.footer ul.socials li {
		padding-right: 5px;
		padding-left: 5px;
	}

	.footer ul.socials li img {
		height: 50px;
	}

	.title .logo {
		height: 40px;
	}

	.content {
		padding-top: 66px;
	}

	.visual {
		height: 380px;
	}

	.visual.lower {
		height: 300px;
	}

	.content.home ul.weeks li {
		margin-left: 5px;
		margin-right: 5px;
	}

	.content.home ul.weeks li div {
		width: 90px;
	}

	.content.home ul.weeks li div p {
		font-size: 22px;
	}

	.submenu .content-wrapper {
		padding-top: 17px;
	}

}

@media all and (max-width: 640px) {

	.content.videos ul,
	.blogs ul {
		grid-template-columns: 1fr;
	}

	.content.erdinger div.bottom-image {
		height: 240px;
	}

}

@media all and (max-width: 600px) {

}

@media all and (max-width: 500px) {

	.content.home ul.weeks li:first-child {
		margin-left: 0px;
	}

	.content.home ul.weeks li:last-child {
		margin-right: 0px;
	}

	.content.home ul.weeks li div {
		width: 66px;
	}

	.content.home ul.weeks li div p {
		font-size: 18px;
	}

	.submenu ul li a {
		font-size: 40px;
	}

	.content.videos .visual div.weeks ul {
		grid-template-columns: 60px 1fr 60px 1fr 60px 1fr 60px;
	}

	.content.videos .visual div.weeks ul li p {
		font-size: small;
	}

	.content.erdinger div.bottom-image {
		height: 180px;
	}

	.content.erdinger ul.outer {
		column-gap: 20px;
	}

}