@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap')

a,
.product--box .box--content,
.emotion--product .product--box .product--title,
.product--box .box--content:before,
.product--box .box--content:after,
.shop--navigation .entry--menu-left .btn:before,
.shop--navigation .entry--menu-left .btn:after,
.product--box .box--content,
.product--box .box--content:before,
.product--box .box--content:after {
	-webkit-transition: all 350ms ease-in-out;
	-moz-transition: all 350ms ease-in-out;
	-ms-transition: all 350ms ease-in-out;
	-o-transition: all 350ms ease-in-out;
	transition: all 350ms ease-in-out;
}
html {
	background: #FFFFFF;
	/*background-image: url(../../src/img/sbbg.svg);*/
	background-size:  cover;
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	color: #000000;
}
body {
	background: rgba(255,255,255,.5);
	color: #000000;
/*	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;*/
	font-family: 'Anton', sans-serif;
	letter-spacing: .025em;
	padding: 15px;
}
.raw-color-container {
    display: none;
}
p {
	font-family: 'Roboto Condensed', sans-serif !important;
}
b, strong {
    font-weight: normal;
}
p b, p strong {
    font-weight: bold;
}
/*** ANTON unket machen***/
.ajax--cart .add-voucher--form .block-group .block-title {
	font-weight: normal;
}
.emotion--container {
	background: transparent;
} 
.page-wrap {
    padding-top: 0;
	background: transparent;
}
.header-main,
.container,
.footer-main,
.is--ctl-detail .content-main--inner {
    background: transparent;
}
.logo--supportinfo.block,
.navigation--entry entry--notepad,
.product--box .product--actions,
.listing--actions,
.listing--bottom-paging,
.product--box .product--rating-container,
.product--navigation,
.product--details .product--actions,
.product--rating-count,
.product--box .product--price-info .price--unit {
    display: none !important;
}
.panel.is--rounded,
.is--rounded {
	border-radius: 0;
	-webkit-border-radius: 0;
}

.content--breadcrumb,
.footer--column.column--hotline .column--headline,
.footer--column.column--hotline .column--content,
.logo--supportinfo.block,
.footer--column.column--newsletter.block,
.navigation--entry.entry--search,
.footer--benefit.block,
.register--advantages.block,
.logo--supportinfo.block, 
.footer--logo,
.navigation--entry.entry--notepad,
.navigation--entry.entry--account,
.tab-menu--cross-selling.js--tab-menu{
     display: none;
 }
 
.paypal--sidebar {
	background: transparent;
	border: none;
}
.footer--vat-info a, .footer--service-menu a {
	color: #000000;
}
.footer--vat-info a:hover, .footer--vat-info a:focus,
.footer--service-menu a:hover, .footer--service-menu a:focus {
	color: #000000;
	text-decoration: underline;
}
.content-main {
	box-shadow: none;
}
.header-main,
.footer-main {
	border: none;
}



/****** Button und Formelemente Grunddefinition  *****/

.btn {
	border: none;
	border-radius: 0;
	background: transparent;
	color: #00b7ff;
	font-weight: 400;
	letter-spacing: .035em;
}
.btn:hover,
.btn:focus {
	border: none;
	border-radius: 0;
	background: transparent;
	color: #fa84db;
}
.btn:disabled, .btn:disabled:hover, .btn.is--disabled, .btn.is--disabled:hover {
	background: #AAA;
	color: #FFF;
	border: none;
	border-radius: 0;
	font-weight: bold;
}
.btn.is--primary {
	border: none;
	border-radius: 0;
	background: #00b7ff;
	color: #FFFFFF;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .035em;
}
.btn.is--primary:hover,
.btn.is--primary:focus {
	border: none;
	border-radius: 0;
	background: #fa84db;
	color: #FFFFFF;
}
.ajax--cart .button--container [class*="button--"]{
	border-radius: 0;
	-webkit-border-radius: 0;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .035em;
}
.select-field select, .js--fancy-select select {
	border-radius: 0;
	-webkit-border-radius: 0;
	border-color: #dddddd;
}
.select-field select:hover, 
.js--fancy-select select:hover,
.select-field select:focus, 
.js--fancy-select select:focus, {
	border-radius: 0;
	-webkit-border-radius: 0;
	border-color: #fa84db;
}
textarea, input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"] {
	border-radius: 0;
	-webkit-border-radius: 0;
	box-shadow: none !important;
}
/**** Menubutton mobile - Burger entfernen****/
.shop--navigation {
	font-weight: bold;
}
.shop--navigation .entry--menu-left {
	position: relative;
	display: inline-block;
	text-align: right;
}
.shop--navigation .entry--menu-left .btn {
	font-size: 1px;
	color: #FFF;
	background: transparent;
	position: relative;
	width: 30px;
	height: 30px;
	border-radius: 0px;
	-webkit-border-radius: 0px;
	padding: 0;
	margin-left: 10px;
}
.shop--navigation .entry--menu-left .btn i {
	display: none;
}
.shop--navigation .entry--menu-left .btn:after,
.shop--navigation .entry--menu-left .btn:before {
	position: absolute;
	left: 0;
	top: 5px;
	height: 5px;
	width: 100%;
	content: '';
	background: #000;
}
.shop--navigation .entry--menu-left .btn:after{
	top: 15px;
}
.shop--navigation .entry--menu-left .btn:hover:before {
	top: 2px;
}
.shop--navigation .entry--menu-left .btn:hover:after {
	top: 18px;
}
.shop--navigation .btn {
	background: transparent;
	color: #000000;
}
.shop--navigation .btn:hover,
.shop--navigation .btn:focus {
	border: none;
	border-radius: 0;
	background: transparent;
	color: #fa84db;
}

/**** Header fixieren soll nicht mitscrollen *****/

header.header-main {
	position: fixed;
/*	background: red;*/
	left: 0;
	right: 0;
	z-index: 1000;
	top: 0;
	height: 80px;
	padding: 15px 0 0 15px;
}
.js--overlay {
	z-index: 520;
}


/*** Inhalt Abstand nach oben geben weil die navigation FIXED hat *****/
body {
	padding-top: 120px;
}
body.is--ctl-index.is--act-index {
	padding-top: 0;
}

header.header-main .header--navigation {
	position: relative;
	width: 100%;
}
.head-logo {
	position: absolute;	
	left: 10px;
	top: 10px;
}
.header-main .logo-main {
	padding: 0;
}
.header-main .logo-main .logo--shop {
	float: none;
	display: block;
	height: 40px;
	width: 100%;
}

.head-right {
	position: absolute;	
	right: 10px;
	top: 10px;
}
.head-right .shop--navigation.block-group {
	display: inline-block;
}
.shop--navigation .navigation--list {
	width: auto;
	display: inline-block;
}
.navigation--list .entry--cart .cart--link .cart--amount {
	white-space: nowrap;
}
/**** Checkout ****/
.btn.is--small.btn--back-top-shop {
	position: fixed;
	right: 20px;
	top: 15px;
}
.steps--content .steps--entry {
	text-align: left;
}
.steps--content .steps--entry .icon {
	background: #fdb4e9;
}
.steps--content .is--active .icon {
	background: #19b8fc;
}
.register--login .register--new-customer .new-customer-btn {
	border: 1px solid #19b8fc;
}
.register--login .register--new-customer .new-customer-btn:hover,
.register--login .register--new-customer .new-customer-btn:focus {
	border: 1px solid #19b8fc;
	color:  #19b8fc;
}

@media screen and (min-width: 48rem) {
	.header-main .header--navigation,
	.top-bar .container {
		width: 100%;
		margin: 0;
		max-width: 100%;
		position: relative;
	}
	.head-logo {
		position: absolute;
		left: 10px;
		top: 10px;
	}
	.navigation--entry.entry--cart {
		background: transparent !important;
		position: absolute;
		top: 10px;
		right: 60px;
	}
	.navigation--entry.entry--menu-left,
	.navigation-main {
		display: none;
	}
	.header-main .top-bar--navigation .navigation--entry {
		padding: 0;
		position: absolute;
		top: 20px;
		right:20px;
		font-weight: bold;
	}
	.logo--link picture {
		margin: 0 auto;
	}
	.navigation--entry.entry--notepad,
	.navigation--entry.entry--account,
	.top-bar--navigation .entry--service {
		display: none !important;
	}
	.header-main .top-bar--navigation .navigation--entry {
		top: 10px;
	}
	.top-bar--language.navigation--entry form {
		background: transparent !important;
	}
	.header-main .top-bar--navigation .top-bar--language .language--flag {
		width: 30px;
		height: 25px;
		text-indent: 0;
		content: '';
		font-size: 0;
		top: 0;
		margin: 0;
	}
	.header-main .top-bar--navigation .top-bar--language .language--flag.de_LI:before {
			content: "DE";
			position: relative;
			color: #000;
			font-size: 1rem;
			font-weight: 400;
	}
	.header-main .top-bar--navigation .top-bar--language .language--flag.en_GB {
		background: transparent;
	}
	.header-main .top-bar--navigation .top-bar--language .language--flag.en_GB:before {
			content: "EN";
			position: relative;
			color: #000;
			font-size: 1rem;
			font-weight: 400;
	}
	.header-main .logo-main {
		padding: 0;
		width: 100%;
	}
	.header-main .logo-main .logo--shop {
		float: none;
		display: block;
		height: 40px;
		width: 100%;
	}
	.header-main .logo-main .logo--link {
		height: 40px;
		
	}
	.is--ctl-checkout.is--minimal-header .header-main .logo--shop, .is--ctl-register.is--minimal-header .header-main .logo--shop, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--shop,
	.is--ctl-checkout.is--minimal-header .header-main .logo--link, .is--ctl-register.is--minimal-header .header-main .logo--link, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--link {
		width: 100%;
	}
	.is--ctl-checkout.is--minimal-header .header-main, .is--ctl-register.is--minimal-header .header-main, .is--ctl-register.is--minimal-header.is--target-checkout .header-main {
		background: #FFF;
	}
}

/***** Sidemenu mobile *****/
.navigation--smartphone .navigation--list  {
	margin-top: 40px;
}
.offcanvas--overlay {
	background: #fa84db;
	color: #FFFFFF;
	margin-top: 70px;
}
.offcanvas--overlay .overlay--category {
	display: none;
}
.navigation--smartphone .entry--close-off-canvas, #cookie-consent .cookie-consent--header {
	background: #FFFFFF;
	color: #fa84db;
	text-transform: uppercase;
	padding-top: 4px;
}
.navigation--smartphone .entry--close-off-canvas .navigation--link, #cookie-consent .cookie-consent--header {
		color: #fa84db;
		font-size: 1.3em;
}
.navigation--smartphone .entry--close-off-canvas .icon--arrow-right {
	float: left;
	font-size: .9em;
	margin-right: .6em;
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}
.sidebar-main.off-canvas {
	overflow-x: hidden;
}
.sidebar-main.off-canvas .shop-sites--container {
	position: absolute;
	bottom: 20px;
}
.sidebar-main.off-canvas, #cookie-consent {
	background: #fa84db;
}
.navigation--headline {
	color: #FFF;
	text-transform: uppercase;
	font-size: 1.45em;
	display: none;
}
.sidebar--navigation {
	background: transparent;
	border: none;
}
.sidebar--categories-wrapper .categories--headline.navigation--headline {
	display: none;
}
.sidebar--categories-navigation .sidebar--navigation {
	margin-top: 1.5rem;
}
.sidebar--categories-navigation .sidebar--navigation .navigation--entry {
	color: #FFF;
	text-transform: uppercase;
	font-size: 2.45em;
}
.sidebar--navigation.categories--sublevel {
	color: #FFF;
	text-transform: uppercase;
	font-size: 1.45em;
}
.sidebar--navigation .navigation--entry {
	border-bottom: none;
}
.off-canvas .sidebar--navigation .navigation--link {
	line-height: 1.75em;
	color: #FFF;
}
.sidebar-main.off-canvas .overlay--headline {
	display: none;
}
.shop-sites--container {
	
}
/**** Sprachauswahl in sidebar menu *****/
.mobile--switches {
	background: #fa84db;
	position: absolute;
	top: 0;
}
.top-bar--language.navigation--entry form {
	display: block;
	width: 100%;
	background: #fa84db;
}
.mobile--switches .top-bar--language .language--flag {
	width: auto;
	position: relative;
	display: none;
}
.mobile--switches .top-bar--language .select-field,
.mobile--switches .top-bar--language .select-field select {
	width: 15.5rem;
	color: #FFF;	
	text-indent: 0;
	text-align: left;
}



/**** Produkte *****/
.product--details .product--image-container {
	z-index: 200;
}
@media screen and (max-width: 600px) {
	.tab-menu--product.js--tab-menu .tab--navigation {
		display: none;
	}
}
/*** Produkte Übersichtsseite ***/
.emotion--product .product--box .product--image,
.listing .product--box.box--image .product--image {
	height: 20.5rem;
	width: 100%;
	position: relative;
}

.product--box .box--content{
	background: #FFF;
	box-shadow: none;
	border-radius: 0;
	padding: 0 10px;
	margin: 10px;
	position: relative;
}
.product--box .box--content:before{
	position: absolute;
	right:0;
	bottom: 0;
	top: 100%;
	width: 3px;
	background: #fa84db;
	content: '';
	-webkit-transition: all 350ms ease-in-out;
	-moz-transition: all 350ms ease-in-out;
	-ms-transition: all 350ms ease-in-out;
	-o-transition: all 350ms ease-in-out;
	transition: all 350ms ease-in-out;
}
.product--box .box--content:after{
	position: absolute;
	right:0;
	bottom: 0;
	left: 100%;
	height: 3px;
	background: #fa84db;
	content: '';
	-webkit-transition: all 350ms ease-in-out;
	-moz-transition: all 350ms ease-in-out;
	-ms-transition: all 350ms ease-in-out;
	-o-transition: all 350ms ease-in-out;
	transition: all 350ms ease-in-out;
}
.product--box .box--content:hover:before{
	right:0;
	bottom: 0%;
	background: #fa84db;
	top: 0%;
}
.product--box .box--content:hover:after{
	right:0;
	bottom: 0;
	background: #fa84db;
	left: 0%;
}
.product--box:hover .product--title {
	color:  #fa84db;
}
.emotion--product .product--box:hover .product--title {
	color:  #fa84db;
}
@media Screen and (max-width: 48em) {
/*	.product--box .box--content:before{
		height: 100%;
	}
	.product--box .box--content:after{
		width: 100%;
	}*/
	.product--box .box--content:before {
	  animation: beforepulse 3s infinite;
	}
	.product--box .box--content:after {
	  animation: afterpulse 3s infinite;
	}
	
	@keyframes beforepulse {
	  0% {
		right:0;
		bottom: 0%;
		top: 100%;
		background: #fa84db;
	  }
	  50% {
		right:0;
		bottom: 0%;
		background: #fa84db;
		top: 0%;
	  }
	  100% {
		right:0;
		bottom: 100%;
		top: 0%;
		background: #00b7ff;
	  }
	}
	@keyframes afterpulse {
		0% {
		right:0;
		bottom: 0;
		left: 100%;
		background: #fa84db;
		}
		50% {
		right:0;
		bottom: 0;
		background: #fa84db;
		left: 0%;
		}
		100% {
		right:100%;
		bottom: 0;
		left: 0%;
		background: #00b7ff;
	  }
	}
}




.emotion--mode-rows .emotion--product {
	height: auto !important;
}
.emotion--product .product--box .product--details {
	position: static;
}
.product--box.product--image .image--element img {
	position: relative;
}
.product--box .product--title {
		text-align: center;
		margin: 1em auto;
}
.product--price-info {
	text-align: center;
}
.product--box .product--title {
	height: auto;
}
.product--box .box--content {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
}

@media Screen and (min-width: 30em) {
	.box--image .product--info {
		padding-left: 0;
	}
	.box--image .product--image {
		width: 100%;
	}
	.box--image .product--price-info {
		height: auto;
	}
}
@media Screen and (min-width: 48rem) {
	/*.is--ctl-listing.is--act-index*/ 
	.sidebar-main.off-canvas {
		display: none;
	}
	.is--ctl-listing .sidebar-main + .content--wrapper, .is--ctl-forms .sidebar-main + .content--wrapper, .is--ctl-tellafriend .sidebar-main + .content--wrapper, .is--ctl-newsletter .sidebar-main + .content--wrapper, .is--ctl-sitemap .sidebar-main + .content--wrapper, .is--ctl-custom .sidebar-main + .content--wrapper, .is--ctl-note.is--user .sidebar-main + .content--wrapper, .is--ctl-address .sidebar-main + .content--wrapper, .is--ctl-account.is--user .sidebar-main + .content--wrapper {
		margin-left: 0;
	}
}
H2.custom-page--tab-headline {
	font-size: 1.125rem;
}
/**** ProduktDetail ******/
.image-slider--container {
	height: 20.5rem;
    width: 80%;
	position: relative;
}

.product--details .content--description, .product--details .content--product-reviews, .product--details .content--related-products, .product--details .content--similar-products {
	padding-left: 0;
	padding-right: 0;
}

/***** FOOTER *******/
@media Screen and (max-width: 600px) {
	.footer--columns {
		display: none;
	}	
}
@media Screen and (min-width: 48em) {
	.footer--columns {
		display: none;
	}	
	.footer-main .footer-minimal {
		display: block;
	}
}
.off-canvas .close--off-canvas {
	background: #fa84db;
	color: #FFF;
}

/*** FUCKSHIT wegen VIDEO ****/

.content-main.is--fullscreen {
	position: relative;
	z-index: 10;
}
.emotion--video .video--play-btn {
	display: none !important;
}
.emotion--wrapper.is--fullscreen {
	margin: 0 -15px;
}
body.is--ctl-index.is--act-index .logo--link picture{
	opacity: 0;
	filter: alpha(opacity=0)
}
body.is--ctl-index.is--act-index .header-main .logo-main .logo--link{
/*	position: absolute;*/
	opacity: 1;
	left: 0;
	right: 0;
	top: 0;
	height: 60px;
	bottom: 0;
	background: transparent url('../img/logo_stellab_white.png') no-repeat center center;
	background-size: contain;
}
body.is--ctl-index.is--act-index .head-right,
body.is--ctl-index.is--act-index .head-left  {
	display: none;
}
body.is--ctl-index.is--act-index .head-logo {
	position: absolute;
	left: 50%;
	top: 10px;
	margin-left: -160px;
}
.cc-color-override--248367459 .cc-btn.cc-allow {
	color: #fa84db !important;
}
.cc-color-override--248367459 .cc-btn.cc-allow-all {
	background: #fa84db !important;
	color: #FFF !important;
}
.cc-color-override--248367459 .cc-btn:hover, .cc-color-override--248367459 .cc-btn:focus {
		background: #19b8fc !important;
			color: #FFF !important;
			text-decoration: none !important;
}
.emotion--wrapper.is--fullscreen {
	margin-bottom: 10vh;
}
@media Screen and (max-width: 600px) {
	body.is--ctl-index.is--act-index  {
		padding-top: 105px;
	}
}