/* ---------- HOMEPAGE ---------- */

.os_main_hl { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size:30px ; font-weight:bolder ;	text-align:center }
.border-round {	-webkit-border-radius: 0.3em ; -moz-border-radius: 0.3em ; border-radius: 0.3em ; overflow:hidden }

@media ( max-width:767px ) {
	
	.os_main_hl { font-size:20px }
}

/* Linke Spalte ausblenden // NR: Main Shop Padding 15px eingef�gt(B�ndiger abschluss mit den anderen Elementen) */

.os_main_left_td { display:none }
.os_main_shop { width:100% ; margin:0 ; padding:0 15px 0 15px }
.os_content_all .content {  padding-top:0 }

/* Banner-Slider und Navi */

.os_head_slider { position:relative ; margin:0 ; padding:0 }
.os_head_slider .slicktop > div img { width:100% ; height:auto }
.os_head_slider .slicktop > div { display:none }
.os_head_slider .slicktop > div:first-child { display:block }
.os_head_slider .slick-initialized > div { display:block }
.os_head_slider .slick-dots { height:30px ; bottom:25px }
.os_head_slider .slick-prev:before { content: "\f104" ; color:#fff }
.os_head_slider .slick-next:before { content: "\f105" ; color:#fff }
#home2 .os_head_slider .slick-dots { height:30px ; bottom:10px }
.slick-dotted.slick-slider { margin-bottom:0px!important }

@media ( min-width:1330px ) {

	header { position:relative ; z-index:800 }
	.os_head_all_lg .head4 { background-color: rgba(255,255,255,0.8) }
	#slide_top .os_head_slider { margin-top:-35px }
}

.os_home_uspdiv { display:flex ; justify-content:space-between ; align-items:center ; gap:20px ; margin-top:-3px }
.os_home_uspdiv a { flex:1 ; display:flex ; justify-content:center ; align-items:center }
.os_home_uspdiv img { width:100% ; height:auto ; max-width:300px ; margin:20px 0 }

.os_home_cut { padding-bottom:35px }
.os_home_cut img { width:100% ; height:auto ; margin: 10px 0 }

.os_home_top { padding-bottom:35px }
.os_home_top img { width:100% ; height:auto ; margin: 10px 0 }

/* Slider f�r Angebote */

.os_home_offerdiv h1 { margin-bottom:20px ; font-family:'Oswald','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:2.250em ; font-weight:normal ; text-transform:uppercase }
.os_home_offerdiv .os_home_offerwrapper { margin-bottom:20px }
.os_home_offerdiv .os_home_offerwrapper .thumb { width:100% ; height:auto }

.os_home_offerdiv .os_list_wrap_all { }
.os_home_offerdiv .os_list_box1_all { padding:0 ; text-align:center ; position:relative }
.os_home_offerdiv .os_list_box2_all { padding:10px ; text-align:left ; height:150px }
.os_home_offerdiv .slick-slide { margin: 0 15px }
.os_home_offerdiv .slick-list { margin: 0 -15px }
.os_home_offerdiv .slick-prev:before { content: "\f104" ; color:#fff }
.os_home_offerdiv .slick-next:before { content: "\f105" ; color:#fff }

@media ( max-width:767px ) {
	.os_home_offerdiv { padding: 0 15px }
}

/* popup */

#jobpopup.popup { position: fixed; height:16em; width: 20em; right: 1em; z-index: 999; background-color: transparent; padding: 1em; color: #fff; border: 2px solid #fff;  background-image: url(/shop/images/files/gf_assets/front/special/bg_popup.jpg); }
#jobpopup .gf_detailbox_h1 { color: var(--var-head-color); text-align: center;}
#jobpopup .gf_detailbox_h1 span { font-size: 2.4em; line-height: 0.7em; }
#jobpopup .gf_detailbox_h2 { text-align: center;}
#jobpopup #popclose { border-radius: 0.3em; background: none; border: 2px solid #fff; text-align: right; font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; position: absolute; right: 1em;}
#jobpopup #popclose:hover { color:var(--var-head-color); background: #fff;}
#jobpopup a { position: absolute; bottom: 1em; width: 17.8em; }
#jobpopup .btn { color: #fff; background: none; border: 2px solid #fff; width: 100%; }
#jobpopup .btn:hover { color:var(--var-head-color); background: #fff;}


/* MARKETING 2022 */
.marketing {
	background-color: #fff;
	top: -3px;
	position: relative;
	padding: 0.8em 0;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
.marketing .container {
	display: flex;
	justify-content: space-between;
	flex-wrap:	wrap;
}
.marketing .container .element {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 1em 0 1em 0;
}

.marketing img.marketing_img {
	position: relative;
	top: 0;
	margin: 0 0.5em;
}
@media screen and ( min-width:768px ) {
	.marketing .container {
		justify-content: center;
	}
	.marketing .container .element {
		width: calc(100% / 2);

	}
}
@media screen and ( min-width:992px ) {
	.marketing .container {
		justify-content: space-between;
	}
	.marketing .container .element {
		width: calc(100% / 3);

	}
	/**********UMSTELLUNG F�R HEAD5 *********/
	/*.os_head_slider {
		margin-top: 2.5em;
	}*/
	/**********UMSTELLUNG F�R HEAD5 *********/
}

/* BELIEBTE KATEGORIEN 2022 */
#os_home_favcat {
	margin-top: 3em;
}
.slick-dots li button:before {
	color: #e5e5e5 !important;
	opacity: 0.8 !important;
}
.slick-dots li.slick-active button:before {
	color: var(--var-head-color) !important;
	opacity: 1 !important;
}
.os_home_favcat {
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.os_home_favcat .link {
	width: calc(100% / 2 - 1em);
	margin-top: 0;
}
.os_home_favcat .link a:hover,
.os_home_favcat .link a:focus,
.os_home_favcat .link a:active {
	text-decoration: none!important;
}
.os_home_favcat .link a div {
	border-radius: 0.3em;
	overflow: hidden;
}
.os_home_favcat .link img {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	transition: .25s ease-in-out;
	image-rendering: auto;
}
.os_home_favcat .link img:hover {
	-webkit-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	transition: .5s ease-in-out;
	image-rendering: pixelated;
	text-decoration: none;
}
.os_home_favcat .link .text {
	position: relative;
	top: -1.6em;
	text-align: center;
	text-decoration: none;
	font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
	font-weight: bolder;
	color: #fff;
	font-size: 1em;
	text-shadow: 3px 5px 2px #0000006b;
	min-height: 1.4em;
}
.os_home_favcat .link .text:hover {
	text-decoration: none;
}
/* PRODUKTEMPFEHLUNGEN 2022 */

#os_home_suggestionsXXX .os_home_offerdiv .os_list_pic_wrap {
	-webkit-border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	border-radius: 0.3em;
	overflow: hidden;
}
#os_home_suggestionsXXX .os_home_offerdiv .os_list_box1_all .thumb {
	-webkit-border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	border-radius: 0.3em;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	transition: .25s ease-in-out;
	image-rendering: auto;
}
#os_home_suggestionsXXX .os_home_offerdiv .os_list_box1_all .thumb:hover {
	-webkit-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	transition: .5s ease-in-out;
	image-rendering: pixelated;
	text-decoration: none;
}

/* TOP THEMEN 2022*/
#os_hot_topics .two_grid {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#os_hot_topics .two_grid .element_wrapper {
	-webkit-border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	border-radius: 0.3em;
	width: calc(100%);
	margin: 2.3em 0 0 0;
	overflow: hidden;
}
#os_hot_topics .content_wrapper {
	-webkit-border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	border-radius: 0.3em;
	overflow: hidden;
}
#os_hot_topics .two_grid .element,
#os_hot_topics .full_content {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	transition: .25s ease-in-out;
	image-rendering: auto;
	overflow: hidden;
}
#os_hot_topics .two_grid .element:hover,
#os_hot_topics .full_content:hover{
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
	transition: .5s ease-in-out;
	image-rendering: pixelated;
	text-decoration: none;
	cursor: pointer;
}
/* BENEFITS 2022 */
#os_benefits {
	background-color:#E5E5E5;
	padding: 0 0 4em 0;
	margin: 4em 0 0 0;
	position: relative;
	top: 1px;
}
#os_benefits .element_wrapper {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 2em 0 0 0;
}
#os_benefits .element {
	-webkit-border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	border-radius: 0.3em;
	width: 100%;
	margin: 0 0 0 0;
	padding: 2em 0;
}
#os_benefits a.element {
	text-decoration: none;
	transition: .5s ease-in-out;
}
#os_benefits a.element:hover,
#os_benefits a.element:focus,
#os_benefits a.element:active {
	color:	#000;
	background-color: #fff;
	transition: .5s ease-in-out;
}
#os_benefits a.element:hover .element_img {
	transition: .5s ease-in-out;
	image-rendering: auto;
	text-decoration: none;
	cursor: pointer;
}

#os_benefits .element_img {
	transition: .5s ease-in-out;
	image-rendering: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#os_benefits .element_img img {
	width: 7em;
	height: 7em;
}
#os_benefits .element_txt {
	text-align: center;
	width: 66%;
	margin: auto;
}
#os_benefits .element_txt .hl {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: bolder;
	font-size: 18px;
	margin: 1em 0 0 0;
}
#os_benefits .element_txt .txt {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 16px;
	margin: 1em 0 0 0;
}

#os_home_friends {
	display: none;
	font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
	font-size: 13px;
	color: #fff;
	text-transform: uppercase;
	position: fixed;
	top: 60vh;
	left: -8.3em;
	transform: rotate(-90deg);
	z-index: 204;
	border: 1px solid #fff;
	transition: 1.5s ease-in-out;
}
#os_home_friends.hide {
	left:-20em;
	transition: 1.5s ease-in-out;
}
#os_home_friends a.txt {
	color: #fff;
	text-decoration: none;
}
#os_home_friends a.txt:hover {
	color: #202330;
	text-decoration: none;
}
#os_home_friends .wrapper_txt {
	display: flex;
	align-items: center;
	background-color: #8cc309;
	padding: 0.2em 1em;
}
#os_home_friends .wrapper_txt .werben{
	padding: 0.2em 0 0 0;
}
#os_home_friends .fa-gift {
	font-size: 31px;
	margin: 0 10px 0 0;
}
#os_home_friends a.toggle-friends {
	color: #fff;
	text-decoration: none;
	padding: 0 9px 0 0;
}
#os_home_friends a.toggle-friends:hover {
	color: #202330;
	text-decoration: none;
	padding: 0 9px 0 0;
}
#os_home_friends .close {
	background-color: #8cc309;
	opacity: 1;
	padding: 8px 0 5px 9px;
	border-left: 1px solid #fff;
}





/* TARGETING 2022 START */
.os_home_targeting {
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.os_home_targeting .link {
	width: 100%;
	margin: 0 0 1em 0;
}
.os_home_targeting .link .content {
	text-align: left;
	padding: 0.5em;
	transition: all 0.2s;
	display: flex;
	justify-content: left;
	align-content: center;
	align-items: center;
	position: relative;
}

.os_home_targeting .link .content.first.red { background: #f00120; color: #fff; border: 1px solid #f00120; }
.os_home_targeting .link .content.second.red { background: #f00120; color: #fff; border: 1px solid #f00120; }
.os_home_targeting .link .content.red:hover { background: #fff; color: #f00120; border: 1px solid #f00120; }
.os_home_targeting .link .content.red:hover img { filter: brightness(0) saturate(100%) invert(12%) sepia(99%) saturate(6540%) hue-rotate(348deg) brightness(92%) contrast(106%); transition: all 0.2s }
.os_home_targeting .link .content.first.blue { background: #738ccc; color: #fff; border: 1px solid #738ccc; }
.os_home_targeting .link .content.second.blue { background: #738ccc; color:	#fff; border: 1px solid #738ccc; }
.os_home_targeting .link .content.blue:hover { background: #fff; color:	#738ccc; border: 1px solid #738ccc; }
.os_home_targeting .link .content.blue:hover img { filter: brightness(0) saturate(100%) invert(55%) sepia(83%) saturate(261%) hue-rotate(185deg) brightness(86%) contrast(84%); transition: all 0.2s }
.os_home_targeting .link .content.first.green { background: #87c7a7; color:	#fff; border: 1px solid #87c7a7; }
.os_home_targeting .link .content.second.green { background: #87c7a7; color: #fff; border: 1px solid #87c7a7; }
.os_home_targeting .link .content.green:hover { background: #fff; color: #87c7a7; border: 1px solid #87c7a7; }
.os_home_targeting .link .content.green:hover img { filter: brightness(0) saturate(100%) invert(80%) sepia(6%) saturate(1641%) hue-rotate(97deg) brightness(89%) contrast(98%); transition: all 0.2s }
.os_home_targeting .link .content.first.orange { background: #ffc66a; color: #fff; border: 1px solid #ffc66a; }
.os_home_targeting .link .content.second.orange { background: #ffc66a; color: #fff; border: 1px solid #ffc66a; }
.os_home_targeting .link .content.orange:hover { background: #fff; color: #ffc66a; border: 1px solid #ffc66a; }
.os_home_targeting .link .content.orange:hover img { filter: brightness(0) saturate(100%) invert(99%) sepia(29%) saturate(7411%) hue-rotate(309deg) brightness(103%) contrast(101%); transition: all 0.2s }
.os_home_targeting .link .content.first.original_green { background: #8cc309; color: #fff; border: 1px solid #8cc309; }
.os_home_targeting .link .content.second.original_green { background: #8cc309; color: #fff; border: 1px solid #8cc309; }
.os_home_targeting .link .content.original_green:hover { background: #fff; color: #8cc309; border: 1px solid #8cc309; }
.os_home_targeting .link .content.original_green:hover img { filter: brightness(0) saturate(100%) invert(75%) sepia(33%) saturate(6423%) hue-rotate(38deg) brightness(104%) contrast(93%); transition: all 0.2s }
.os_home_targeting .link .content.first.original_orange { background: var(--var-head-color); color: #fff; border: 1px solid var(--var-head-color); }
.os_home_targeting .link .content.second.original_orange { background: var(--var-head-color); color: #fff; border: 1px solid var(--var-head-color); }
.os_home_targeting .link .content.original_orange:hover { background: #fff; color: var(--var-head-color); border: 1px solid var(--var-head-color); }
.os_home_targeting .link .content.original_orange:hover img { filter: brightness(0) saturate(100%) invert(46%) sepia(61%) saturate(2791%) hue-rotate(1deg) brightness(104%) contrast(105%); transition: all 0.2s }
.os_home_targeting .link .content:hover {
	transition: all 0.2s;
	cursor: pointer;
}
.os_home_targeting .link a:hover,
.os_home_targeting .link a:focus,
.os_home_targeting .link a:active {
	text-decoration: none!important;
}
.os_home_targeting .content img {
	margin: 0 1em 0 0;
	transition: all 0.2s;
	width: 8vw;
}
.os_home_targeting .content img.arrow {
	position: absolute;
	right: -2px;
}
.os_home_targeting .content .text {
	font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
	font-size: 3vw;
	margin: 0 1.2em 0 0;
}
@media screen and ( min-width:768px ) {
	.os_home_targeting .link:first-child {
		width: calc(100% / 2 - 0.9em);
		margin: 0 1.9em 1em 0;
	}
	.os_home_targeting .link:last-child {
		width: calc(100% / 2 - 1em);
		margin-top: 0;
	}
	.os_home_targeting .link {
		width: calc(100% / 2 - 1em);
	}
	.os_home_targeting .content .text {
		font-size: 0.95em;
	}
	.os_home_targeting .content img {
		width: 2.5em;
	}
}
@media screen and ( min-width:992px ) {
	.os_home_targeting .link:first-child {
		width: calc(100% / 2 - 1.3em);
		margin: 0 2.6em 1em 0;
	}
	.os_home_targeting .link:last-child {
		width: calc(100% / 2 - 1.3em);
		margin-top: 0;
	}

	.os_home_targeting .link .content {
		padding: 0.5em;
	}

	.os_home_targeting .content .text {
		font-size: 1.2em;
	}
}
@media screen and ( min-width:1330px ) {
	.os_home_targeting .link:first-child {
		width: calc(100% / 2 - 1.3em);
		margin: 0 2.6em 1em 0;
	}
	.os_home_targeting .link:last-child {
		width: calc(100% / 2 - 1.3em);
		margin-top: 0;
	}
	.os_home_targeting .link .content {
		padding: 1.1em 1.5em;
	}
	.os_home_targeting .link .content::before {
		font-size: 5em;
	}

	.os_home_targeting .content .text {
		font-size: 1.7em;
	}
	.os_home_targeting .content img {
		width: 4em;
	}
	.os_home_targeting .content img.arrow {
		right: 4px;
	}
}

/* TARGETING 2022 STOP */


/* Teaser */
/* NR: Picwrapper topmargin von -10 auf 0 gesetzt. Wei�e �berlappung im grauen Bereich. */

.os_home_picwrapper { padding:20px 0 50px 0 ; margin-top:0px ; margin-bottom:-30px ; background:#E5E5E5 }
.os_home_picwrapper h2 { margin-bottom:20px ; font-family:'Oswald','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:2.250em ; font-weight:normal ; text-transform:uppercase }
.os_home_picwrapper img { width:100% }

/* Partner */

.os_home_partner { text-align:center ; margin-bottom:20px }
.os_home_partner h2 { margin: 60px 0 30px 0 ; font-family:'Oswald','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:1.750em ; font-weight:normal ; text-transform:uppercase }
.os_home_partner img { filter:grayscale(100%) ; -webkit-filter: grayscale(100%) ; width:100%  }
.os_home_partner img:hover { filter:none ; -webkit-filter:none }
.os_home_partner .slickpartner .slick-slide > div { margin: 0 10px }
.os_home_partner .slickpartner .slick-prev:before { content: "\f104" ; color:#000 }
.os_home_partner .slickpartner .slick-next:before { content: "\f105" ; color:#000 }


/* SPEZIAL : neue HP 05.05.2107 */

.category_bubble { font-family:'Open Sans', sans-serif ; font-weight:bold ; text-transform:uppercase ; margin-top:15px }
.fiftysmaller { max-width:70% ; margin:0 auto ; margin-bottom:10px }


/* SPEZIAL : Anpassungen kleine Ansicht */

@media screen and ( max-width:767px ) {
	.xxxos_home_offerwrapper h1 { font-size:2em }
	.xxxos_home_picwrapper h2 { font-size:2em }
	.xxxos_home_offerdiv { padding-left:0 ; padding-right:0 }
}

@media screen and ( max-width:991px ) {
	#jobpopup { display:none; }
}

/* VIEWPORT ANPASSUNGEN 2022 */

@media screen and ( min-width:480px ) {
	.os_home_favcat .link .text {
		font-size: 150%;
	}
}

@media screen and ( min-width:768px ) {
	.os_home_favcat .link .text {
		font-size: 1.5em;
	}
	#os_hot_topics .two_grid .element_wrapper {
		width: calc(100% / 2 - 1em);
	}

	#os_benefits .element_wrapper {
		justify-content: center;
	}
	#os_benefits .element {
		width: calc(100% / 2 - 1em);
	}
	#os_home_friends {
		display: flex;
	}
}
@media screen and ( min-width:992px ) {

	.os_home_favcat .link {
		width: calc(100% / 4 - 2em);
	}
	#os_hot_topics .content_wrapper {
		-webkit-border-radius: 0.8em;
		-moz-border-radius: 0.8em;
		border-radius: 0.8em;
	}
	#os_hot_topics .two_grid .element_wrapper {
		width: calc(100% / 2 - 1.3em);
		-webkit-border-radius: 0.8em;
		-moz-border-radius: 0.8em;
		border-radius: 0.8em;
	}
	#os_benefits .element_wrapper {
		justify-content: space-between;
	}
	#os_benefits .element {
		-webkit-border-radius: 0.8em;
		-moz-border-radius: 0.8em;
		border-radius: 0.8em;
		width: calc(100% / 3 - 1em);
		margin: 0.5em 0;
	}
	.border-round {
		-webkit-border-radius: 0.8em;
		-moz-border-radius: 0.8em;
		border-radius: 0.8em;
		overflow: hidden;
	}

}
@media screen and ( min-width:1330px ) {
	.os_home_favcat .link .text {
		font-size: 2em;
	}
	.os_home_favcat .link a div {
		-webkit-border-radius: 0.8em;
		-moz-border-radius: 0.8em;
		border-radius: 0.8em;
	}
	#os_home_suggestions .os_home_offerdiv .os_list_pic_wrap {
		-webkit-border-radius: 0.8em;
		-moz-border-radius: 0.8em;
		border-radius: 0.8em;
	}
}
/* ---------- END ---------- */