/*
=======================================================
=== FONTS EINBINDUNG
=======================================================
*/
/*#region*/
/* open-sans-300 - latin */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	src: url('assets/fonts/Open Sans/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('assets/fonts/Open Sans/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-regular - latin */
  @font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url('assets/fonts/Open Sans/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('assets/fonts/Open Sans/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-500 - latin */
  @font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 500;
	src: url('assets/fonts/Open Sans/open-sans-v34-latin-500.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('assets/fonts/Open Sans/open-sans-v34-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-500.woff') format('woff'), /* Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-600 - latin */
  @font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	src: url('assets/fonts/Open Sans/open-sans-v34-latin-600.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('assets/fonts/Open Sans/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-600.woff') format('woff'), /* Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-700 - latin */
  @font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: url('assets/fonts/Open Sans/open-sans-v34-latin-700.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('assets/fonts/Open Sans/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-800 - latin */
  @font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 800;
	src: url('assets/fonts/Open Sans/open-sans-v34-latin-800.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('assets/fonts/Open Sans/open-sans-v34-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-800.woff') format('woff'), /* Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-300italic - latin */
  @font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 300;
	src: url('assets/fonts/Open Sans/open-sans-v34-latin-300italic.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('assets/fonts/Open Sans/open-sans-v34-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-300italic.woff') format('woff'), /* Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-italic - latin */
  @font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	src: url('assets/fonts/Open Sans/open-sans-v34-latin-italic.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('assets/fonts/Open Sans/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-italic.woff') format('woff'), /* Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-500italic - latin */
  @font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 500;
	src: url('assets/fonts/Open Sans/open-sans-v34-latin-500italic.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('assets/fonts/Open Sans/open-sans-v34-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-500italic.woff') format('woff'), /* Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-500italic.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-600italic - latin */
  @font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 600;
	src: url('assets/fonts/Open Sans/open-sans-v34-latin-600italic.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('assets/fonts/Open Sans/open-sans-v34-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-600italic.woff') format('woff'), /* Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-700italic - latin */
  @font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 700;
	src: url('assets/fonts/Open Sans/open-sans-v34-latin-700italic.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('assets/fonts/Open Sans/open-sans-v34-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-700italic.woff') format('woff'), /* Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-800italic - latin */
  @font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 800;
	src: url('assets/fonts/Open Sans/open-sans-v34-latin-800italic.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('assets/fonts/Open Sans/open-sans-v34-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-800italic.woff') format('woff'), /* Modern Browsers */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('assets/fonts/Open Sans/open-sans-v34-latin-800italic.svg#OpenSans') format('svg'); /* Legacy iOS */
  }

/*#endregion*/


/*
=======================================================
=== GLOBAL
=======================================================
*/
/*#region*/
:root {
	--main: #5698b0;
	--rgb-main: 86, 152, 176;
	--main-dark: #41778b;

	--accent: #282828;
	--accent-dark: #181818;

	--text-color-light: #aaaaaa;
	--text-color: #686868;
	--text-color-dark: #181818;
	--header-color: #181818;
}

html {
	scroll-behavior: smooth !important;
}

body {
	font-family:'Open Sans', sans-serif;
	font-weight:normal;
	font-style:normal;
	font-size:14px;
	overflow-x:hidden;
	overflow-y:auto;
	color:var(--text-color);
}

p {
	font-size:14px;
	font-weight:normal;
	line-height:24px;
	color:var(--text-color);
	margin-bottom:15px;
	font-family:'Open Sans', sans-serif;
}

h1,h2,h3,h4,h5,h6 {
	font-family:'Open Sans', sans-serif;
	color:var(--header-color);
	margin-top:0;
	font-style:normal;
	font-weight:400;
}

a, button, input {
	outline: medium none;
    color: var(--text-color);
}

a:hover {
	color: var(--main);
	text-decoration: none;
}

::-webkit-scrollbar{
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-thumb{
	background: var(--main);
	border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover{
	background: var(--main-dark);
}
::-webkit-scrollbar-track{
	background: white;
	border-radius: 10px;
	box-shadow: inset 7px 10px 20px 0px #D1D1D1;
}

.owl-stage {
	display: flex;
}

.octane-container {
	padding-inline: 5px;
}

/*#endregion*/


/*
=======================================================
=== HEADER NAVIGATION
=======================================================
*/
/*#region*/

.topBar {
    height: 30px;
    width: 100%;
    background: var(--accent);
    position: relative;
	color: var(--text-color-light);
}

.topBar.hideTopBar {
    height: 0;
}

.topBar a {
	color: var(--text-color-light) !important;
}

.topBar a:hover {
	color: white !important;
}

.language-menu {
	min-width: 5px;
	color: black;
}

.language-menu div:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

.octane-logo:hover {
    -webkit-animation: shake 1s;
    animation: headShake 1s;
}

#divOctaneMainNav {
	height: 70px;
}

.octane-menu .dropdown-item{
    position: relative;
	background-color: inherit;
	color: var(--text-color);
	border-left: 2px solid var(--main);
	padding: 0.25rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
	z-index: 1;
	transition: color 0ms ease-in;
}

.octane-menu .dropdown-item:focus, .octane-menu .dropdown-item:hover{
	color: white;
	transition: color 300ms ease-in;
}

.octane-menu .dropdown-item::after {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background-color: var(--main);
	z-index: -1;
	transform:scaleX(0);
	transform-origin: left;
	transition: transform 0ms ease-in;
}

.octane-menu .dropdown-item:focus::after, .octane-menu .dropdown-item:hover::after{
	transform: scaleX(1);
	transition: transform 300ms ease-in 20ms;
}

.octane-menu .stickers {
	position: absolute;
	top: 10%;
	right: 20%;
}

.octane-menu .stickers span {
    padding: 5px 30px 5px 30px;
    background-color: var(--accent);
    border-radius: 5px 5px;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    color: white;
    font-weight: bold;
    border: 1px solid white;
}

.octane-menu .dropdown-menu h4 {	
	border-bottom: 1px solid gray;
	text-transform: uppercase;
	font-weight: 600;
	text-align: center;
}

.octane-menu .dropdown-menu {
	color: var(--text-color);
	background-color: white;
    border-top: 2px solid var(--main);
	border-radius: 0;
	margin: 0;
	padding: 1rem;
}

.octane-menu .dropdown-menu.show {
	
	display: flex;
}

.octane-menu .nav-link {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-color);
	white-space: nowrap;
    vertical-align: middle;
    height: 70px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
	position: relative;
	overflow:hidden;
	transition: .3s;
}

.octane-menu .nav-link:hover {
	color: var(--accent);
}

.octane-menu .nav-link:hover:after {
	width: 100%;
	left: 0;
}

 .octane-menu .nav-link:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 50%;
    bottom: 0;
    height: 3px;
    background: var(--main);
}

.octane-menu .navbar{
	padding-top: 10px;
	padding-bottom: 10px;
}

.octane-menu .nav-item {
	position: static;
}

.octane-menu {
	position: relative;
	background-color: white;
	z-index: 20;
	-webkit-transition: -webkit-transform .25s;
	transition: transform .25s;
}

.octane-menu.hideTopBar {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
}

.octane-menu-icon {
	cursor: pointer;
	font-size: 0.9rem;
    min-height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e9f1f4;
    border-radius: 50%;
	position: relative;
	z-index: 1;
	transition: opacity 200ms ease-out, color 200ms ease-out;
}

.octane-menu-icon:hover {
	color: var(--accent-dark) !important;
}

.octane-menu-icon::after {
	content: "";
	height: 100%;
	width: 100%;
	background-color: white;
	border-radius: 50%;
	border: 2px solid var(--accent-dark);
	color: var(--accent-dark);
	position: absolute;
	z-index: -1;
	opacity: 0;
	transition: opacity 200ms ease-out;
}

.octane-menu-icon:hover::after {
	opacity: 1;
}





#ajax-update-container-cart {
	width: 0;
}

.cart-quantity {
	border-radius: 50px;
	display: block;
	position: relative;
	top: -15px;
	left: -20px;
	font-size: 10px;
	font-weight: bold;
	height: 20px;
	line-height: 20px;
	margin-left: 5px;
	text-align: center;
	min-width: 20px;
	background-color: #d4062c;
	color: white;
	z-index: 2;
}

.octane-search {
	outline: none;
	box-sizing: border-box;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.octane-search-wrapper {
  position: relative;
}

.octane-search-field {
    width: 40px;
    height: 40px;
    color: transparent;
    font-size: 0.8rem;
    border: 2px solid transparent;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.octane-search-field:hover + .octane-search-icon {
	color: black;
	background-color: var(--text-color-light);
}
.octane-search-field:focus {
	width: 20vw;
	color: var(--text-color-dark);
	cursor: default;
	padding: 0.35em 50px 0.35em 10px;
	border: 2px solid var(--main);
}
.octane-search-field:focus ~ .octane-search-icon {
  background-color: transparent;
  cursor: pointer;
  pointer-events: auto;
}
.octane-search-icon {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #e9f1f4;
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
    text-align: center;
    border-color: transparent;
    border-radius: 50%;
    pointer-events: none;
    display: inline-block;
    transition: background-color 0.2s ease-in-out;	
}
.octane-search-icon:focus {
  outline: none;
}

.octane-live-search
{
	position:absolute;
	z-index:1100;
	top:90px;
	background-color:white;
	border:2px solid #ececec;
	border-radius:0 0 5px 5px;
	width: 500px;
	max-height: 60vh;
	overflow-y: scroll;
}

.octane-live-search-pic {
	height: 50px;
	width: 50px;
}

.octane-live-search-item:hover{
	background-color: rgba(0, 0, 0, 0.1);
	color: black;
}

/*#endregion*/


/*
=======================================================
=== SWIPER / SLIDER
=======================================================
*/
/*#region*/

.swiper-container {
	height: 450px;
}

.swiper-background {
	background-image: url(/myfactory/CustomUpload/374O357O340O370O356O369O350O327O356O363O353O360O358O324O354O359O371O364O352O365O355O352O365O371O/WebPortal/Medland-Shop/img/luke-chesser-pJadQetzTkI-unsplash2.jpg);
}

.swiper-slide {
	background-size: cover;
    background-position: 50%;
    min-height: 20vh;  
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.swiper-slide:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: .4;
}

.swiper-slide .title {
	pointer-events: none;
	opacity: 0;
	color: white;
	transform: translateY(-5%) scale(.8);
	transition: 1s ease;
	text-transform: uppercase;
	text-shadow: 0 5px 5px rgba(0,0,0, .1);
}

.swiper-slide-active .title {
	opacity: 1;
	transform: translateY(0%) scale(1);
	transition: 1s ease;
}

.swiper-slide p {
	pointer-events: none;
	opacity: 0;
	color: white;
	transform: translateY(-5%) scale(.8);
	transition: 1s ease;
	text-transform: uppercase;
	text-shadow: 0 5px 5px rgba(0,0,0, .1);
}

.swiper-slide-active p {
	opacity: 1;
	transform: translateY(0%) scale(1);
	transition: 1s ease;
}

.swiper-slide a {
	display: inline-block;
	background-color:#dedede;
	border:	medium none;
	text-align: center;
	vertical-align: middle;
	cursor:	pointer;
	font-size: 14px;
	padding: 0.5rem 1rem;
	white-space: nowrap;
	transition:	all .3s ease 0s;
	color: white;
	z-index: 1;
	text-transform: uppercase;
	background: transparent;
	border: 2px solid white;
	font-weight: 600;
	letter-spacing: 0.2rem;
	position: relative;
}
.swiper-slide a:hover {
	color: white;
}
.swiper-slide a::after {
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	top: 0;
	right: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease;
}
.swiper-slide a:hover::after {
	left: 0;
	width: 100%;
}
.swiper-slide a:active {
	top: 2px;
}

.swiper-pagination-bullet {
	width: 80px !important;
    border-radius: 20px !important;
}

.swiper-button-next{
	transform: translateX(50px);
	transition: transform 250ms ease;
}

.swiper-button-prev{
	transform: translateX(-50px);
	transition: transform 250ms ease;
}

.swiper-container:hover .swiper-button-next,
.swiper-container:hover .swiper-button-prev{
	transform: translateX(0);
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
	opacity: 0.3 !important;
}

/*#endregion*/


/*
=======================================================
=== MAIN
=======================================================
*/
/*#region*/
.octane-section {
	position: relative;
	padding-top: 7rem;
	padding-bottom: 7rem;
}

.octane-section-main {
	position: relative;
	background: var(--main);
	background: linear-gradient(180deg, rgba(var(--rgb-main),1) 0%, rgba(var(--rgb-main),0.5) 50%, rgba(var(--rgb-main),0) 100%);
	padding-top: 7rem;
	padding-bottom: 7rem;
}

.octane-section-1 {
	position: relative;
	background: linear-gradient(45deg, rgba(228,228,228,1) 0%, rgba(180,180,180,1) 50%, rgba(157,157,157,1) 100%);
	padding-top: 7rem;
	padding-bottom: 7rem;
}

.octane-section-2 {
	position: relative;
	background: linear-gradient(45deg, rgba(230, 230, 230, 0.15) 0%, rgba(230, 230, 230, 1) 50%, rgba(230, 230, 230, 0.15) 100%);
	padding-top: 7rem;
	padding-bottom: 7rem;
}

.section-header-1{
    position: absolute;
	display: inline-flex;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.3rem;
    padding-top: 1.5rem;
	padding-bottom: 10px;
	margin: 0;
    top: 0;
    left: 50%;
    transform: translate(-50%);
}

.section-header-1::after{
	position: absolute;
    content: "";
    background-color: var(--main);
    width: 50%;
    height: 4px;
    bottom: 0;
	border-radius: 5px;
}

.octane-icon-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	border-radius: 1rem;
	padding: 1rem;
	height: 100%;
	text-align: center;
}

.octane-icon-card i {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	background: var(--main);
	border-radius: 50%;
	height: 60px;
	width: 60px;
	color: white;
}


.octane-breadcrumb {
	min-height: 300px;
}

.octane-page-header {
	color: white;
	font-size: 3.5rem;
    font-weight: 300;
    border: 5px solid;
    padding-left: 10%;
    padding-right: 10%;
    text-transform: uppercase;
}

.octane-breadcrumb li {
	display: inline-block;
	font-weight: 600;
	position: relative;
	color: white;
}

.octane-breadcrumb a {
	color: white;
}

.octane-breadcrumb a:hover {
	color: white;
	text-decoration: underline;
}

.octane-breadcrumb li:not(:last-child)::after {
    border-radius: 100%;
    content: "\e65d";
    display: inline-block;
    font-family: themify;
    font-size: 13px;
    height: 14px;
    line-height: 13px;
    margin: 0 10px;
    padding-left: 1px;
    text-align: center;
    vertical-align: middle;
    width: 14px;
}

.octane-side-nav {
	position: -webkit-sticky;
    position: sticky;
	top: 25vh;
	z-index: 10;
	padding: 3rem 0;
	border-right: 1px solid var(--text-color-light) !important;
}

.octane-side-nav .title {
	position: relative;
	padding-bottom: 0.5rem;
	font-weight: 900;
	text-overflow: ellipsis;
    overflow: hidden;
}

.octane-side-nav .title::after {
	content: "";
	position: absolute;
	height: 3px;
	width: 50%;
	margin-top: 5px;
	background: var(--main);
	bottom: 0;
	left: 0;
}

.octane-side-nav a {
	font-size: 0.9rem;
	letter-spacing: 0.05rem;
	font-weight: 500;
	text-transform: uppercase;
}

.fancy-links a {
	text-decoration: none;
	color: var(--text-color-dark);
	position: relative;
	padding-bottom: 3px;
	transition: color 250ms ease-in;
}

.fancy-links a:hover {
	color: var(--main);
}
  
.fancy-links a::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--main);

	transform: scaleX(0);
	transform-origin: right;
	transition: transform 250ms ease-in;
}

.fancy-links a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.octane-login-container {
	background-color: rgba(0,0,0,0.5) !important;
}

.octane-login-container > h1 {
	color: white;
}

.octane-login-container {
		padding: 60px 100px;
}

.login-logo {
	background-color: white;
    padding: 10px;
    border-radius: 20px;
}

.price-old
{
	font-weight: bold;
	text-decoration: line-through;
	line-height: 1;
	color: red;
}

.price-new
{
	font-weight: bold;
	line-height: 1;
	margin-bottom: 5px;
}

.currentCatalog {
	font-size: 22px;
    font-weight: 600;
    color: var(--text-color);
}

.product-img:hover {
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

.product-stickers {
	position: absolute;
	top: 8px;
	right: 5px;
}

.product-stickers span {
	background-color: red;
	margin-left: 5px;
	padding: 3px 10px 3px 10px;
	color: white;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
	font-weight: bold;
	border: 1px solid white;
}

.octane-product-title {
	font-size: 14px;
	color: black;
}

.octane-product-price {
	font-weight: bold;
	float: right;
	color: black;
	white-space: nowrap;
	width: max-content;
}

.octane-details-price {
	font-size: 14px;
	font-weight:600;
	color: black;
}

.details-price-new
{
	font-weight: bold;
	font-size: 30px;
	line-height: 1;
	margin-bottom: 5px;
}

.details-price-old
{
	text-decoration: line-through;
	line-height: 1;
	color: red;
	font-size: 14px;
}

.details-price-old-text {
	text-decoration: none;
	color: red;
	font-size: 14px;
}

.octane-variant-select select {
    width: auto;
}

.octane-variant-select-text {
	display: flex;
	align-items: center;
	font-size: 14px;
	background-color: white;
	margin-right: -10px;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	padding-right: 20px;
	padding-left: 10px;	
}

.octane-form-select {
	background: transparent;
	border: none;
	border-bottom: 1px solid #ced4da;
	border-radius: 0px;
	height: 1.5rem;
    padding: 0;
}

.octane-form-select:focus {
    background: transparent;
	border: none;
	border-bottom: 1px solid transparent;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(196, 196, 196, 0.25);
}

.octane-product-button {
	color: black;
	background-color: white;
	width: 70px;
	height: 40px;
	border-radius: 20px;
	transition: all .3s ease 0s;
}

.octane-product-button:hover {
	background-color: var(--main);
	color: white;
	border-radius: 10px;
}

.octane-product-button i {
	padding-top: 6px;
}

.pangv {
	color: var(--text-color);
	font-weight: normal;
	font-size: 12px;
}

.pagination-modules a {
    background-color: transparent;
	border: 1px solid black;
    color: black;
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    height: 30px;
    line-height: 31px;
    text-align: center;
    width: 30px;
	border-radius: 8px;
	transition: all 0.3s;
}

.pagination-modules-active {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    height: 30px;
    line-height: 31px;
    text-align: center;
    width: 30px;
	border-radius: 8px
}

.pagination-modules-active {
	background-color: var(--main);
    color: white;
    border: 1px solid var(--main);
}

.pagination-modules a:hover {
    background-color: var(--main);
    color: white;
    border: 1px solid var(--main);
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

.list-datacount {
    background-color: transparent;
	border: 1px solid black;
    color: black;
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    height: 30px;
    line-height: 29px;
    text-align: center;
    width: 30px;
	border-radius: 8px;
	transition: all 0.3s;
	margin: 0 0.2rem;
}

.list-datacount:hover, .list-datacount-active:hover {
    background-color: var(--main);
    color: white;
    border: 1px solid var(--main);
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

.list-datacount-active {
	background-color: var(--main);
    color: white;
    border: 1px solid var(--main);
	display: inline-block;
    font-size: 12px;
    font-weight: 500;
    height: 30px;
    line-height: 29px;
    text-align: center;
    width: 30px;
	border-radius: 8px;
	margin: 0 0.2rem;
}

.octane-address-selection {
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 10px;
	border-radius: 10px;
	color: white;
	background-color: gray;
}

.octane-address-selection-active{
	background-color: var(--main);
}

.octane-address-selection-active .octane-address-selection-btn{
	color: green;
	background-color: white;
	border: 2px solid green;
}

.octane-address-selection-btn{
	color: gray;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	background-color: lightgray;
	border: 1px solid lightgray;
}

.octane-address-selection-btn:hover{
	background-color: white;
}

.octane-order-address-container {
	padding: 20px 40px;
	text-align: left;
	border: 1px solid #ddd;
}

.hide-product-preview .htmlClickPreview {
	display: none !important;
}

.octane-order-card .details-btn {
	background: var(--text-color-light);
    border-radius: 5px;
    padding: 3px 7px;
    color: white;
	border: none;
    font-size: 12px;
	transition: all .3s ease 0s;
}

.octane-order-card .details-btn:hover {
	background: var(--text-color);
}

.add-cart-btn {
	background-color: var(--main);
	border-radius: 100%;
	padding: 8px 8px;
	color: white;
	font-size: 14px;
	border: none;
}

.add-cart-btn:hover {
	background-color: var(--main-dark);
}

.order-preview {
	height: 80vh;
}

.octane-switch-reg-btn
{
	font-size: 16px;
	text-transform: uppercase;
	width: 100%;
	display: block;
	position: relative;
	text-align: center;
	z-index: 1000;
	background-color: #dedede;
	color: black;
	padding: 10px;
	transition: all 0.3s;
}

.octane-switch-reg-btn:hover
{
  background-color:var(--main);
  color: white;
}

.octane-switch-reg-btn-active
{
	background-color: var(--main);
	color: white;
}

.octane-switch-reg>label{
	-ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
	position: relative;
    width: 100%;
    min-height: 1px;
	margin-bottom: 0px !important;
}

.quick-order-form > form {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.open-items-table {
	overflow-x: scroll;
}

.anchor {
	display: block;
	position: relative;
	background: black;
	top: -90px;
}

.coupon-wrapper form {
	padding: 0 !important;
}

/*#endregion*/


/*
=======================================================
=== SIDEBAR MOBILE MENU
=======================================================
*/
/*#region*/
.octane-mobile-menu {
	background-color: white;
}

.octane-mobile-menu-btn{
	width: 45px;
    height: 40px;
    outline: none;
    color: black;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    background: transparent;
}

.octane-mobile-menu-btn a {
	color: black !important;
}

.octane-mobile-menu-btn:focus {
	outline: none;
	background: #0000000d;
}

.octane-mobile-menu-cart-count{
	position: absolute;
	top: -5px;
	left: 30px;
	border-radius: 50px;
	display: inline-block;
	font-size: 10px;
	font-weight: bold;
	height: 20px;
	line-height: 20px;
	text-align: center;
	min-width: 20px;
	background-color: #bf3239;
	color: white;
}

#sidebar-mobile-menu {
    width: 80%;
    position: fixed;
    top: 0;
    left: -80%;
    height: 100vh;
    z-index: 1060;
    background: #eee;
    color: black;
    transition: all 0.3s;
    overflow-y: scroll;
	overflow-x: hidden;
}

#sidebar-mobile-menu.active {
    left: 0;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#dismiss-mobile-menu {
    width: 35px;
    height: 35px;
    line-height: 32px;
    text-align: center;
    position: absolute;
    border: 2px solid black;
    top: 20px;
    right: 10px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#dismiss-mobile-menu:hover {
    background: rgba(0, 0, 0, 0.3);
    color: white;
}

#sidebar-mobile-menu .sidebar-header {
    padding: 10px;
    background: #74cece;
}

#sidebar-mobile-menu .sidebar-search {
	border-bottom: 1px solid lightgray;
}

#sidebar-mobile-menu ul a { /*LVL1*/
    padding: 10px;
    font-size: 1.1em;
    display: block;
    color: black;
    border-bottom: 1px solid lightgray;
	transition: all 0.3s;
}

#sidebar-mobile-menu ul ul a { /*LVL2*/
	font-size: 0.9em !important;
	background: #a2a2a2;
}

#sidebar-mobile-menu ul ul ul a { /*LVL3*/
	font-size: 0.7em !important;
	background: #a2a2a2;
}

#sidebar-mobile-menu ul a:hover {
    color: #000000;
    background: #a2a2a2 !important;
}

#sidebar-mobile-menu ul ul a:hover {
    color: #000000;
    background: white !important;
}

#sidebar-mobile-menu ul a.active {
	font-weight: bold;
}

#sidebar-mobile-menu a[aria-expanded="true"] {
    color: #fff;
    background: #a2a2a2 !important;
    text-decoration: none !important;
	border: none;
}

#sidebar-mobile-menu a>i {
    transition: all 0.3s;
}

#sidebar-mobile-menu a[aria-expanded="true"]>i {
    transform: rotate(180deg);
}

.octane-dropdown-link {
	width: 50px;
	text-align: center;
	border-left: 1px solid lightgray;
	transition: all 0.3s;
}

.octane-dropdown-btn {
	font-size: 1.25rem;
    background: transparent;
    padding: 0.75rem 1.25rem;
	box-shadow: none !important;
	border-bottom: 1px solid #dee2e6;
    border-radius: 0px;
	transition: transform 250ms ease-in-out;
}

.octane-dropdown-btn:hover {
	background-color: #f2f2f2;
	transform: translateX(5px);
	border-left: 3px solid var(--main);
}

.octane-dropdown-btn[aria-expanded="true"] {
    background-color: #f2f2f2;
	border-left: 3px solid var(--main);
}

.octane-dropdown-btn i {
	transition: transform 250ms;
}

.octane-dropdown-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.octane-buy-plus-minus-area {
	padding: 0;
	border: 1px solid var(--main);
    border-radius: 20px;
	width: min-content;
}

.octane-buy-plus-minus-area .cart-plus-minus {
	overflow: visible;
    padding: 0;
    width: 100px;
    border: none;
}

.octane-buy-plus-minus-area .qtybutton {
	width: 30px;
    text-align: center;
    cursor: pointer;
    line-height: 28px;
    height: 100%;
    font-size: 18px;
    color: var(--text-color);
    font-weight: bold;
    border: none;
}

.octane-buy-plus-minus-input {
	height: 30px;
    border: none;
    width: 40px;
    text-align: center;
    font-size: 16px;
    color: var(--text-color);
}

.octane-buy-plus-minus-cart-btn {
	background: var(--main);
    border: none;
    height: 30px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    border-radius: 0px 20px 20px 0px;
    cursor: pointer;
	transition: all 0.3s;
}

.octane-buy-plus-minus-cart-btn:hover {
	background: var(--main-dark);
}


#sidebar-mobile-menu .login-area {
	padding: 23px 0px 30px 0px;
}

#sidebar-mobile-menu .login-area-button {
	text-align: center;
	border: medium none !important;
	cursor: pointer;
	font-size: 15px;
	padding: 10px;
	min-width: 50%;
	border-radius: 10px;
	transition: all 0.3s;
	background-color: var(--main) !important;
	color: white !important;
}

#sidebar-mobile-menu .login-area-button:hover {
	background-color: var(--main-dark) !important;
}
/*#endregion*/


/*
=======================================================
=== SIDEBAR SHOPPING CART
=======================================================
*/
/*#region*/
#sidebar-cart {
    width: 500px;
    position: fixed;
    top: 0;
    right: -500px;
    height: 100vh;
    z-index: 1060;
    background: #eee;
    color: black;
    transition: all 0.3s;
    overflow-y: scroll;
}

#sidebar-cart.active {
    right: 0;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#dismiss-cart {
    width: 35px;
    height: 35px;
    line-height: 32px;
    text-align: center;
    position: absolute;
    border: 2px solid black;
    top: 10px;
    left: 10px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#dismiss-cart:hover {
    background: rgba(0, 0, 0, 0.3);
    color: white;
}

.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
	top: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1050;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.overlay.active {
    display: block;
    opacity: 1;
}

#sidebar-cart .sidebar-header {
    padding: 10px;
    background: #74cece;
}

.cart-item-link {
	font-size: 16px;
	font-weight: bold;
}

.cart-item-price {
	font-size: 16px;
	font-weight: bold;
}
/*#endregion*/


/*
=======================================================
=== PRODUCT CATALOGS
=======================================================
*/
/*#region*/

.octane-product-catalog
{
  overflow:hidden;
  position:relative;
}

.octane-product-catalog > a:first-child {
    overflow: hidden;
}

.octane-product-catalog img
{
	transition: all .3s ease 0s;
    width: 100%;
    height: 230px;
    object-fit: cover;
    opacity: 0.7;
}

.octane-product-catalog:hover img
{
  transform:scale(1.1);
  opacity: 1;
}

.octane-product-catalog-text {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    color: white!important;
    font-weight: 600;
    text-shadow: 0px 0px 7px #000000;
    font-size: 2rem;
    border-bottom: 2px solid white;
}

.shop-sidebar {
	border: 1px solid #c1c1c1;
    background-color: white;
}

#divCategoryMenu {
	float: left;
	position: relative;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    outline: 0;
}

.active-cat-bg > a{ 
	background: var(--main) !important;
	color: white !important;
}

.active-cat2 > a{ 
	text-decoration: underline !important;
	border-left: 2px solid var(--main) !important;
}

#divCategoryMenu ul { 
	list-style: none;
	margin: 0;
	padding: 0;
}

#divCategoryMenu ul li { 
	width: 100%;
	display: block;
	float: left;
	position: relative;
	border-bottom: 1px solid #dedede;
}

#divCategoryMenu>ul:first-child>li:first-child { 
	border-top: 1px solid #dedede;
}

#divCategoryMenu ul>li>a:hover{ 
	background: var(--main);
	color: white;
}

#divCategoryMenu ul>li>ul>li>a{ 
	padding: 7px 0px 7px 20px !important;
	background: #f7f7f7;
    border-left: 2px solid #ced6dc;	
}

#divCategoryMenu ul>li>ul>li>a:hover{ 
    border-left: 2px solid var(--main);	
	background: #f7f7f7;
	color: black;
}

#divCategoryMenu ul>li>ul>li>ul>li>a{ 
	padding: 4px 0px 4px 35px !important;
	background: #ececec;
    border-left: 2px solid #ced6dc;	
}

#divCategoryMenu ul>li>ul>li>ul>li>a:hover{ 
    border-left: 2px solid var(--main);
	background: #ececec;
	color: black;	
}

#divCategoryMenu ul li a{ 
	width: 100%;
    padding: 14px 0px;
    float: left;
    text-decoration: none;
    color: black;
    font-size: 1em;
    position: relative;
    overflow: hidden;
    -o-transition: color .2s linear,background .2s linear;
    -moz-transition: color .2s linear,background .2s linear;
    -webkit-transition: color .2s linear,background .2s linear;
    transition: color .2s linear,background .2s linear;
}

.menu li{
	border-radius: 10px;
}

.menu a{
	width: 100%;
    padding: 14px 0px 14px 14px;
	margin: 5px 0;
	/*border: 1px solid #c1c1c1;*/
	border: 0px solid transparent;
    text-decoration: none;
    color: black;
	background: white;
    font-size: 1em;
	display: block;
    overflow: hidden;
    -o-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
}

.menu>li>a:hover{ 
	background: var(--main);
	color: white;
	transform: translateX(5px);
	font-weight: bold;
}

.untermenu a{
	padding: 7px 0px 7px 24px;
	background: #e9e9e9;
}

.untermenu a:hover{
	border-left: 3px solid var(--main);
	transform: translateX(5px);
	font-weight: bold;
}

.untermenu .untermenu a {
	padding: 5px 0px 5px 34px;
	background: #c9c9c9;
}

.untermenu .untermenu .untermenu a {
	padding:4px 0px 4px 44px;
	background: #9d9d9d;
}

.untermenu .untermenu .untermenu .untermenu a {
	padding: 2px 0px 2px 54px;
	background: #6e6e6e;
	margin: 2px 0;
}

.aktiver-eintrag>a{
	font-weight: bold;
	background: var(--main);
	color: white;
}

.aktiver-untereintrag>a{
	font-weight: bold;
	border-left: 3px solid var(--main);
	color: black;
}
/*#endregion*/


/*
=======================================================
=== TABS
=======================================================
*/
/*#region*/
.octane-tabs > .nav.nav-tabs{
	border: none;
	color:#fff;
	border-radius:0;
}
.octane-tabs > div a.nav-item.nav-link
{
	color:#fff;
	background:#bfbfbf;
	border-radius:0;
	border-top: 2px solid var(--main);
    border-left: 2px solid var(--main);
    border-right: 2px solid var(--main);
    border-bottom: 1px solid var(--main);
}

.octane-tabs > div a.nav-item.nav-link.active
{
	color:#fff;
	background:var(--main);
	border-radius:0;
}

.tab-content{
	background: #fdfdfd;
	line-height: 25px;
	border:2px solid var(--main);
	transition: height 0.3s;
}

.octane-tabs > div a.nav-item.nav-link:hover,
.octane-tabs > div a.nav-item.nav-link:focus
{
	background: var(--main);
	color:#fff;
	border-radius:0;
	transition:background 0.20s linear;
}
/*#endregion*/


/*
=======================================================
=== SHOPPING CART STEPS
=======================================================
*/
/*#region*/
/*!
* Bootstrap Steps v1.0.1 (https://github.com/ycs77/bootstrap-steps)
* Copyright 2019 Lucas Yang <yangchenshin77@gmail.com>
* Licensed under MIT (https://github.com/ycs77/bootstrap-steps/blob/master/LICENSE)
*/
.steps{padding:0;margin:0;list-style:none;display:flex}
.steps .step:first-child{margin-left:auto}
.steps .step:last-child{margin-right:auto}
.step:first-of-type .step-circle::before{display:none}
.step:last-of-type .step-content{padding-right:0}
.step-content{box-sizing:content-box;display:flex;align-items:center;flex-direction:column;width:20vw;min-width:20vw;max-width:20vw;padding-top:.5rem;padding-right:1rem}
.step-circle{position:relative;display:flex;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;color:#adb5bd;border:2px solid #adb5bd;border-radius:100%;background-color:#fff;font-size:18px}
.step-circle::before{content:'';display:block;position:absolute;top:50%;left:-2px;width:calc(20vw - 1.5rem);height:2px;transform:translate(-100%,-50%);color:#adb5bd;background-color:currentColor}
.step-text{color:#adb5bd;word-break:break-all;margin-top:.25em}
.step-active .step-circle{color:#fff;background-color:var(--main);border-color:var(--main)}
.step-active .step-circle::before{color:var(--main)}
.step-active .step-text{color:var(--main)}
.step-error .step-circle{color:#fff;background-color:#dc3545;border-color:#dc3545}
.step-error .step-circle::before{color:#dc3545}
.step-error .step-text{color:#dc3545}
.step-success .step-circle{color:#28a745;background-color:#fff;border-color:#28a745}
.step-success .step-circle::before{color:#28a745}
.step-success .step-text{color:#28a745}
/*#endregion*/


/*
=======================================================
=== FOOTER
=======================================================
*/
/*#region*/

.octane-footer, .octane-footer a, .octane-footer p {
	color: var(--text-color-light);
}

.octane-footer a:hover {
	color: white;
}

.newsletter-form input {
	border: 1px solid var(--text-color-light);
	border-radius: 5px;
	color: var(--text-color);
	font-size: 12px;
	line-height: 40px;
	padding-left: 10px;
	padding-right: 55px;
	position: relative;
}

.newsletter-form-btn {
	color: white !important;
	border-radius: 0px 5px 5px 0px!important;
	bottom: 0;
	top: 0;
	display: inline-block;
	position: absolute;
	right: 0;
	z-index: 999;
	transition: all .3s ease 0s;
	cursor: pointer;
    margin-left: -10px;
	background: var(--accent);
}

.newsletter-form-btn:hover {
	background: var(--accent-dark);
    color: white;
}

.social-icon {
	font-size: 30px;
	padding-right: 20px;
	transition: all .2s ease 0s;
}

.social-icon:hover {
	color: white!important;
}

.footer-icon {
	font-size: 40px;
	color: white;
}

.payment-icon {
	font-size: 40px;
	padding-right: 20px;
	transition: all .2s ease 0s;
}

.payment-icon:hover {
	color: white!important;
}

/*#endregion*/


/*
=======================================================
=== BUTTONS
=======================================================
*/
/*#region*/

.octane-btn{
	display: inline-block;
	background-color:#dedede;
	border:	medium none;
	text-align: center;
	vertical-align: middle;
	cursor:	pointer;
	font-size: 1rem;
	padding: 0.5rem 1rem;
	white-space: nowrap;
	transition:	all .3s ease 0s;
}

.btn-main {
	color:black;
}
.btn-main:hover{
	background-color: var(--main);
	color: white;
	border-radius: 10px;
}

.btn-1{
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	background: var(--accent-dark) none repeat scroll 0 0;
	color: white;
	padding: 0.8rem 1.25rem;
}
.btn-1:hover {
    background: var(--main) none repeat scroll 0 0;
    color: white;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

.btn-2 {
	color: white;
	z-index: 1;
	text-transform: uppercase;
	background: transparent;
	border: 2px solid white;
	font-weight: 600;
	letter-spacing: 0.2rem;
	position: relative;
}
.btn-2:hover {
	color: white;
}
.btn-2::after {
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	top: 0;
	right: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease;
}
.btn-2:hover::after {
	left: 0;
	width: 100%;
}
.btn-2:active {
	top: 2px;
}

.btn-3 {
	background: var(--main);
	color: white !important;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.btn-3::after {
	content: "";
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.3);
	position: absolute;
	z-index: -1;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 250ms ease-in;
}
.btn-3:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.btn-4 {
	font-weight: bold;
	font-size: 0.9rem;
    letter-spacing: .5px;
    line-height: 1;
    text-transform: uppercase;
	background: transparent;
    border: 1px solid black;
    color: black;
	position: relative;
	z-index: 1;
}
.btn-4:hover {
	color: white;
}
.btn-4::after {
	content: "";
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	background: black;
	position: absolute;
	z-index: -1;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 200ms ease-in;
}
.btn-4:hover::after {
	transform: scaleX(1);
}

/*#endregion*/


/*
=======================================================
=== ANIMATIONS
=======================================================
*/
/*#region*/

.octane-fade-in {
	opacity: 0;
}

.scroll-animation{
	opacity: 0;
	transition: opacity 500ms ease-in;
}

.scroll-animation.show{
	opacity: 1;
}

.box-hover {
	text-decoration: none;
	z-index: 0;
	overflow: hidden;
	position: relative;
	transition: all 0.2s ease-in-out;
}

.box-hover:hover {
	box-shadow: 0px 4px 8px rgb(38 38 38 / 20%);
	transform: translateY(-4px);
	cursor: pointer;
}

.hover-shadow {
	-o-transition: box-shadow .2s linear;
    -moz-transition: box-shadow .2s linear;
    -webkit-transition: box-shadow .2s linear;
    transition: box-shadow .2s linear;
}

.hover-shadow:hover {
    box-shadow: 0 0 1rem rgba(0,0,0,.15)!important;
}

/*#endregion*/


/*
=======================================================
=== HELPER
=======================================================
*/
/*#region*/

.bg-main {
	background: var(--main) !important;
}
.bg-main-dark {
	background: var(--main-dark) !important;
}
.bg-accent {
	background: var(--accent) !important;
}
.bg-accent-dark {
	background: var(--accent-dark) !important;
}

.text-main {
	color: var(--main) !important;
}
.text-main-dark {
	color: var(--main-dark) !important;
}
.text-accent {
	color: var(--accent) !important;
}
.text-accent-dark {
	color: var(--accent-dark) !important;
}
.text-color {
	color: var(--text-color);
}
.text-black {
	color: black;
}

.fs-8 {
	font-size: 8px !important;
}
.fs-10 {
	font-size: 10px !important;
}
.fs-12 {
	font-size: 12px !important;
}
.fs-14 {
	font-size: 14px !important;
}
.fs-16 {
	font-size: 16px !important;
}
.fs-18 {
	font-size: 18px !important;
}
.fs-20 {
	font-size: 20px !important;
}
.fs-22 {
	font-size: 22px !important;
}
.fs-24 {
	font-size: 24px !important;
}
.fs-26 {
	font-size: 26px !important;
}
.fs-28 {
	font-size: 28px !important;
}


.border-bottom-lightgray {
	border-bottom: 2px solid #ececec;
}
.background-lightgray {
	background-color: lightgray;
}
.bg-tranparent-gray {
	background-color: rgba(0,0,0,0.5) !important;
}


.form-textarea-long {
	height: 200px !important;
}
.clear-both {
    clear: both;
}
.overflow-wrap-anywhere {
	overflow-wrap: anywhere;
}
.fa-input { 
	font-family: Font Awesome\ 5 Free, 'Open Sans', sans-serif; 
}
.bgClosestIMG {
	background-size: cover;
	background-position: center;
}
.parallax {
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.gap-1 {
	gap: 1rem;
}
.bold {
	font-weight: bold !important;
}

/*#endregion*/


/*
=======================================================
=== PRELOADER
=======================================================
*/
/*#region*/
.z-index-1040{
        z-index: 1040;
        position: relative;
}

#preloader {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	background: white;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #99ca3c;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #3bc982;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #99ca3c;
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #99ca3c;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #3bc982;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #99ca3c;
		border-left-color: transparent;
	}
}
/*#endregion*/


/*
=======================================================
=== OCTANE CARDS + ANIMATION
=======================================================
*/
/*#region*/

.octane-card {
	color: white;
	background-size: cover;
	padding: 2rem 0 0;
	border-radius: 0.5rem;
	overflow: hidden;
	transition: transform 300ms ease;
}

.octane-card:hover,
.octane-card:focus-within {
	transform: scale(1.05);
}

.octane-card-content {
	padding: 1.5rem;
	background: linear-gradient(hsl(0 0% 0% / 0),hsl(0 0% 0% / 0.3) 20%,hsl(0 0% 0% / 1));
}

.octane-card-title {
	position: relative;
	width: max-content;
}

.octane-card-title::after {
	content: "";
	position: absolute;
	background: var(--main);
	height: 4px;
	width: calc(100% + 1.5rem);
	left: calc(-1.5rem);
	bottom: 0;
	transform-origin: left;
	transition: transform 300ms ease;
}



.octane-card:hover .octane-card-title::after,
.octane-card:focus-within .octane-card-title::after {
	transform: scaleX(1);
}

@media (hover) {
	.octane-card-content{
		transform: translateY(55%);
		transition: transform 300ms ease;
	}

	.octane-card:hover .octane-card-content,
	.octane-card:focus-within .octane-card-content {
		transform: translateY(0);
		transition-delay: 300ms;
	}

	.octane-card:focus-within .octane-card-content {
		transition-duration: 0ms;
	}

	.octane-card-content > *:not(.octane-card-title) {
		opacity: 0;
		transition: opacity 300ms linear;
	}

	.octane-card:hover .octane-card-content > *:not(.octane-card-title),
	.octane-card:focus-within .octane-card-content > *:not(.octane-card-title) {
		opacity: 1;
		transition-delay: 600ms;
	}

	.octane-card-title::after {
		transform: scaleX(0);
	}
}
/*#endregion*/


/*
=======================================================
=== TESTING
=======================================================
*/
/*#region*/

.hover-fadeInDown:hover {
    -webkit-animation: fadeInDown 1s;
    animation: fadeInDown 1s;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
	background-color: transparent;
	height: 100px;
	perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.7s;
	transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
	background-color: #bbb;
	color: black;
}

/* Style the back side */
.flip-card-back {
	background-color: dodgerblue;
	color: white;
	transform: rotateY(180deg);
}









/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-object {
	perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-object-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.7s;
	transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-object:hover .flip-object-inner {
	transform: rotateX(180deg);
}

/* Position the front and back side */
.flip-object-front, .flip-object-back {
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-object-front {
	position: relative;
}

/* Style the back side */
.flip-object-back {
	position: absolute;
	transform: rotateY(180deg);
}

.octane-product-img-wrapper {
	min-height: 100px;
	overflow: hidden;
    position: relative;
}

.octane-product-img {
	height: auto;
    max-height: 268px;
	width: auto !important;
    min-width: 100%;
}

.octane-product-container {
	display: flex;
    flex-direction: column;
	height: 100%;
	padding: 0.5rem;
}

/*#endregion*/


/*
=======================================================
=== MEDIA QUERYS / RESPONSIVE
=======================================================
*/
/*#region*/
@media (prefers-reduced-motion: reduce) {
	*,*::before,*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
		transition-delay: 0ms !important;
	}
}

/* iPhone 5/SE Optimierung */
@media (max-width: 374px) {
	.octane-page-header {
		font-size: 1rem !important;
		border: 2px solid !important;
	}
}

/* Extra small devices (Phones, 575px and less) */
@media (max-width: 575px) {
	.octane-container {
		padding-inline: 15px;
	}

	.octane-page-header {
		font-size: 1.5rem;
		border: 3px solid;

	}

	.section-header-1{
		font-size: 1.25rem;
	}
	
	.swiper-pagination-bullet {
		width: 40px !important;
	}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.octane-container {
		padding-inline: 20px;
	}

	.octane-page-header {
		font-size: 2rem;
		border: 3px solid;
	}

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.octane-container {
		padding-inline: 30px;
	}

	.octane-page-header {
		font-size: 2.5rem;
		border: 5px solid;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.octane-container {
		padding-inline: 40px;
	}

	.octane-page-header {
		font-size: 3rem;
		border: 5px solid;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.octane-container {
		padding-inline: 100px;
	}

	.octane-page-header {
		font-size: 3.5rem;
		border: 5px solid;
	}

	.octane-menu .nav-link {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

/* Additional Breakpoint (very large desktops, 1600px and up) */
@media (min-width: 1600px) {
	.octane-container {
		padding-inline: 200px;
	}
}

/*#endregion*/