@charset "UTF-8";
/* CSS Document */

body, html {
	padding: 0;
	margin: 0;
	font-family: 'Ubuntu', sans-serif;
}

/* ubuntu-300 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: url('ubuntu-v20-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('ubuntu-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('ubuntu-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('ubuntu-v20-latin-300.woff') format('woff'), /* Modern Browsers */
       url('ubuntu-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('ubuntu-v20-latin-300.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/* ubuntu-regular - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('ubuntu-v20-latin/ubuntu-v20-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('ubuntu-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('ubuntu-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('ubuntu-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('ubuntu-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('ubuntu-v20-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/* ubuntu-500 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: url('ubuntu-v20-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('ubuntu-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('ubuntu-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('ubuntu-v20-latin-500.woff') format('woff'), /* Modern Browsers */
       url('ubuntu-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('ubuntu-v20-latin-500.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/* ubuntu-700 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url('ubuntu-v20-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('ubuntu-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('ubuntu-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('ubuntu-v20-latin-700.woff') format('woff'), /* Modern Browsers */
       url('ubuntu-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('ubuntu-v20-latin-700.svg#Ubuntu') format('svg'); /* Legacy iOS */
}


img, a {
	text-decoration: none;
	border: 0;
	outline: none;
}

.clearfix {
	clear: both;
}

/* ----- COOKIE ----- */

.cc_container .cc_btn {
	background-color: #b5368c !important; /* Farbe des Buttons */
	color: #fff !important; /* Textfarbe des Buttons */
}
 
.cc_container {
	background: rgba(0,0,0,0.8) !important; /* Hintergrundfarbe des gesamten Bereichs */
	color: #fff !important; /* Schriftfarbe des gesamten Bereichs */
}
 
.cc_container a {
	color: #b5368c !important; /* Textlink-Farbe "Mehr Infos" */
	text-decoration: none !important;
}

.cc_message {
	color: #fff !important;
}

/* ----- TYPO ----- */

h1 {
	font-family: 'Ubuntu', sans-serif;
	font-size: 64px;
	font-weight: 300;
	color: #fff;
	margin: 0;
	line-height: 100%;
}

.h-bold {
	font-weight: 700;
}

.labeldesign-info-copy h1 {
	text-transform: uppercase;
}

h2 {
	font-family: 'Ubuntu', sans-serif;
	font-size: 20px;
	font-weight: 400;
	color: #fff;
	margin: 25px 0 0 0;
	line-height: 180%;
}

h3 {
	font-family: 'Ubuntu', sans-serif;
	font-size: 30px;
	font-weight: 700;
	color: #b5368c;
	margin: 0 0 20px 0;
	line-height: 100%;
	text-align: left;
}

h4 {
	font-family: 'Ubuntu', sans-serif;
	font-size: 23px;
	font-weight: 700;
	color: #b5368c;
	margin: 0 0 10px 0;
	line-height: 120%;
	text-align: left;
}

.selection h4 {
	text-align: center;
	color: #fff;
	margin: 20px 0;
	
}

.product-container h4 {
	text-align: center;
}

.labeldesign-container h4 {
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 40px
}

h5 {
	font-family: 'Ubuntu', sans-serif;
	font-size:16px;
	font-weight: 400;
	color: #b5368c;
	margin: 40px 0 0 0;
	line-height: 150%;
	text-align: left;
}

.labeldesign-container h5 {
	font-size: 16px;
	font-weight: 400;
	color: #454545;
	text-align: center;
}

.product-container h5 {
	font-size: 14px;
	color: #454545;
	text-align: center;
}

p {
	font-family: 'Ubuntu', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #454545;
	margin: 20px 0 0 0;
	line-height: 180%;
	text-align: left;
}

p a {
	color: #b5368c;
	font-weight: 700;
}

.btn-white {
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
	text-align: center;
	background: #fff;
	color: #b5368c;
	font-weight: 700;
	padding: 10px 30px;
	margin: 30px 0 0 0;
	border: 1px solid #fff;
	border-radius: 9999px;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.btn-white:hover {
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.transparent {
	border: 1px solid #fff;
	margin-left: 15px;
}

.transparent:hover {
	color: #b5368c;
	cursor: pointer;
	border: 1px solid #b5368c;
}

.btn-pink {
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
	text-align: center;
	background: #b5368c;
	color: #fff;
	font-weight: 700;
	padding: 10px 30px;
	margin: 30px 0 0 0;
	border: 1px solid #b5368c;
	border-radius: 9999px;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.btn-pink:hover {
	background: #fff;
	color: #b5368c;
	cursor: pointer;
}

.btn-pink-ghost {
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
	text-align: center;
	background: #fff;
	color: #b5368c;
	font-weight: 700;
	padding: 10px 30px;
	margin: 15px 0 0 0;
	border: 1px solid #b5368c;
	border-radius: 9999px;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.btn-pink-ghost:hover {
	background: #b5368c;
	color: #fff;
	cursor: pointer;
}

.pink {
	font-size: 50px;
	color: #b5368c;
}

.black {
	color: #454545;
	text-transform: none !important;
}

.white {
	color: #fff;
	text-align: center;
	font-size:16px;
}

/* ----- OVERLAY ----- */

.overlay {
	height: 100%;
  	width: 0;
  	position: fixed;
  	top: 0;
  	left: 0;
	background: rgba(181,54,140,0.95);
	overflow-x: hidden;
  	transition: 0.5s;
	z-index:9999;
}


.overlay-content {
	  position: relative;
	  top: 50%;
	  width: 100%;
	  text-align: center;
	  margin-top: 30px;
	transform: translateY(-50%);
}

.overlay a {
	  padding: 10px 0;
	  text-decoration: none;
	  font-size: 4vh;
	  color: #fff;
	font-weight: 400;
	  display: block;
	  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  	opacity: 0.5;
}

.overlay .closebtn {
	  position: absolute;
	  top: 20px;
	  right: 45px;
	  font-size: 4vh;
}



/* ----- HEADER ----- */

header {
	position: fixed;
	top: 0;
	left: 0;
	height: 85px;
	width: 100%;
	background: #fff;
	z-index: 999;
	-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}

.header-wrapper {
	position: relative;
	max-width: 1310px;
	margin: 0 auto;
	padding: 0 25px;
}

.logo-header {
	height: 85px;
	line-height: 85px;
	margin-top: 12px;
}

.logo-header img {
	height: 32px;
	width: auto;
}

.main-nav {
	position: absolute;
	text-align: right;
	top: 15px;
	right:30px;
}

.main-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.main-nav ul li {
	display: inline-block;
	margin-right: 35px;
}

.main-nav ul li.openNav {
	margin-left: 60px;
	visibility: hidden;
}

.main-nav ul li:last-of-type {
	margin-left: 0px;
	margin-right: 0;
}

.main-nav ul li a {
	color: #454545;
	font-size: 14px;
	font-weight: 700;
	padding-bottom: 31px;
}

.main-nav ul li a:hover {
	border-bottom: 4px solid #b5368c;
}

.main-nav ul li:last-of-type a:hover {
	border-bottom: 0px;
}

.main-nav ul li.openNav a:hover {
	border-bottom: 0px;
	cursor: pointer;
}

.main-nav ul li a i {
	display: inline-block;
	color: #fff;
	border: 1px solid #b5368c;
	background: #b5368c;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    vertical-align: middle;
    padding: 3px;
}

.main-nav ul li.openNav a i {
	display: inline-block;
	color: #454545;
	border: none;
	background: none;
    width: 25px;
    height: 25px;
	font-size: 20px !important;
    border-radius: 0;
    text-align: center;
    line-height: 25px;
    vertical-align: middle;
    padding: 0px;
}

.main-nav ul li a.language {
	color: #b5368c; 
}


/* ----- TOPPER HOME ----- */

#topper-home {
	position: relative;
	max-width: 100%;
	margin-top: 85px;
	height: 600px;
	
}

.wrapper {
	position: relative;
	width: 80%;
	min-height: 600px;
	background: url("img/topper-home_bg.jpg") no-repeat;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-size:cover;
	z-index: 666;
}

.topper-home-headline {
	position: absolute;
	max-width: 700px;
	top: 50%;
	left: 60px;
	transform: translate(0%, -50%);
	z-index: 888 !important;
}

.topper-home-right {
	position: absolute;
	max-width: 1310px;
	top: 60px;
	right: -190px;
	z-index: 888;
}

.vertical {
	position: absolute;
	right: 0;
	max-width: 290px;
	z-index: 2;
}

.horizontal {
	position: relative;
	top: 90px;
	right: 20px;
	max-width: 600px;
	z-index: 2;
}

.vertical img, .horizontal img {
	width: 100%;
	height: auto;
}

.made-in-austria {
	position: absolute;
	width: 20%;
	right: 600px;
	bottom: 50px;
	z-index: 3;
}

.made-in-austria img {
	width: 100%;
	height: auto;
}

/* ----- IMAGE HEADER ----- */

.image-header {
	position: relative;
	width: 100%;
	margin-top: 75px;
	height: 315px;
	text-align: center;
	margin-bottom: 80px;
}

#header-unternehmen {
	background: url("img/header_unternehmen.jpg") no-repeat;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-size:cover;
}

#header-naehrstoffe {
	background: url("img/header_naehrstoffe.jpg") no-repeat;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-size:cover;
}

#header-privatelabel {
	background: url("img/header_privatelabel.jpg") no-repeat;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-size:cover;
}

#header-kontakt {
	background: url("img/header_kontakt.jpg") no-repeat;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-size:cover;
}

.header-headline {
	position: absolute;
	width: 50%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.copy-top {
	position: relative;
	max-width: 890px;
	margin: 0 auto;
	padding: 0 30px;
}

/* ----- HOME COLUMNS ----- */

#home-columns {
	position: relative;
	max-width: 1310px;
	padding: 0 25px;
	margin:  0 auto;
	margin-top: 150px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: flex-start;
	align-content: flex-start;
}

.column {
	flex-grow: 1;
	flex-basis: 0;
	text-align: left;
	border-right: 1px solid rgba(0,0,0,0.1);
	padding-right: 4%;
	padding-left: 2%;
	
}

.column + .column {
	margin-left: 4%;
}


.column:first-of-type {
	padding-left: 0;
}


.column:last-of-type {
	border-right: none;
}

.list {
	display: block;
	padding: 0;
	margin: 30px 0 0 15px;
	list-style: none;
}

.list-items::before {
	content: "\2022";
	color: #b5368c;
	font-weight: bold; 
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

.list-items {
	font-family: 'Ubuntu', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #454545;
	margin: 0 0 10px 0;
	line-height: 180%;
	text-align: left;
	
}

.icon {
	display: inline-block;
	border: 1px solid #f5f5f5;
	background: #f5f5f5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    vertical-align: middle;
    padding: 5px;
	color: #b5368c;
	font-size: 25px;
	margin: 0 0 20px 0;
}

/* ----- VIDEO ----- */

#video-wrapper {
	position: relative;
	width: 100%;
	margin: 0 auto;
	margin-top: 80px;
	text-align: center;
	padding-bottom: 56.25%;
	height: 0;
}

#video-wrapper iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

/* ----- NUMBERING ----- */

.numbering {
	position: relative;
	max-width: 1310px;
	padding: 0 25px;
	margin: 0 auto;
	margin-top: 115px;
}

.number {
	position: relative;
	float: left;
	width: 20%;
	font-weight: 700;
	font-size: 391px;
	letter-spacing: -0.1em;
	color: #f5f5f5;
	margin: 0;
	padding: 0;
	line-height: 100%;
}

.numbering-copy {
	position: relative;
	display: inline-block;
	width: 60%;
	float: right;
	background: #f5f5f5;
	text-align: right;
	padding: 90px 50px 200px 20px;
	text-transform: uppercase;
	
}


.shorter {
	display: block;
	padding-left: 35% !important;
	
}

.bottle-numbering {
	position: absolute;
	left: 22%;
	top: 30px;
	z-index: 666;
	height: 500px;
	transform: rotate(0deg);
	display: block;
}

.bottle-numbering img {
	height: 100%;
	width: auto;
}

/* ----- SELECTION ----- */

.selection {
	position: relative;
	max-width: 1310px;
	margin: 0 auto;
	top: -50px;
	padding: 0 25px;
	display: flex;
}

.bottle-large {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -65px;
	display: block;
}

.bottle-large img {
	width: 100%;
	height: auto;
}

.selection-left {
	flex-grow: 1;
	text-align: center;
	background: url("img/selection-left_bg.jpg") center no-repeat;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-size:cover;
}

.selection-right {
	flex-grow: 1;
	text-align: center;
	background: url("img/selection-right_bg.jpg") center no-repeat;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-size:cover;
}

.selection-copy {
	position: relative;
	margin: 0 auto;
	width: 40%;
	color: #fff;
	padding: 80px 0;
}

.selection-icon {
	font-size: 35px;
}

.selection-icon i {
	display: inline-block;
	color: #fff;
	border: 1px solid #fff;
	background: none;;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    vertical-align: middle;
    padding: 10px;
}

/* ----- COMPANY ----- */

.company {
	position: relative;
	max-width: 1310px;
	margin: 0 auto;
	top: -50px;
	padding: 0 0px;
}

.company-image {
	margin-bottom: 20px;
}

.company-image img {
	width: 100%;
	height: auto;
}

.company-copy {
	display: flex;
}

.company-copy-column {
	flex-grow: 1;
}

.company-copy-column p {
	width: 75%;
}

.nachhaltigkeit {
	position: relative;
}

.content {
	position: relative;
	max-width: 1310px;
	margin: 0 auto;
	text-align: center;
}

.content-center {
	
}

.content-center-img {
	display: inline-block;
	width: 30%;
}

.content-center-img img {
	width: 100%;
	height: auto;
}

.content-center-copy{
	display: inline-block;
	width: 40%;
	vertical-align: top;
	padding-top: 150px;
}

.content-center-copy p:first-of-type {
	font-size: 20px;
}

.nachaltigkeit-grafik {
	position: relative;
	margin-top: 40px;
}

.nachaltigkeit-grafik img {
	width: 100%;
	height: auto;
}

/* ----- PRODUCTS ----- */

.products {
	position: relative;
	max-width: 1310px;
	margin: 0 auto;
	margin-top: 160px;
	padding: 0 25px;
	display: flex;
	flex-wrap: wrap;
}

.products-info {
	position:-webkit-sticky; 
	position: sticky; 
	top: 80px;
	width: 100%;
	margin: 0 auto;
	text-align: center !important;
	border-top: 1px solid rgba(0,0,0,0.1);
	border-bottom: 1px solid rgba(0,0,0,0.1);
	margin-top: 0px;
	padding: 50px 0px;
	background: rgba(255,255,255,0.8);
	z-index: 888;
}

.products-info p {
	text-align: center;
}

.product-container {
	flex: 1 0 21%;
  	margin: 40px 5px;
	text-align: center;
	max-width: 25%;
}

.product-image {
	position: relative;
	margin-bottom: 40px;
	text-align: center;
}

.product-image img {
	width: 100%;
	height: auto;
}


.product-container + .product-container {
	margin-left: 2%;
}

.btn-pink-ghost i {
	margin-right: 8px
}

/* ----- PRIVATE LABEL ----- */

.labeldesign {
	position: relative;
	max-width: 1310px;
	margin: 0 auto;
	top: -90px;
	padding: 0 25px;
	display: flex;
	flex-wrap: wrap;
}

.labeldesign-container {
	flex: 1 0 21%;
  	margin: 40px 5px;
	text-align: center;
}

.labeldesign-image {
	position: relative;
	margin-bottom: 40px;
	text-align: center;
}


.labeldesign-container + .labeldesign-container {
	margin-left: 2%;
}

.labedesign-info {
	position: relative;
	width: 1310px;
	max-width: 1310px;
	margin: 0 auto;
	margin-top: 0px;
	padding: 0 25px;
}

.labeldesign-info-copy {
	position: relative;
	width: 70%;
}

.labeldesign-info-copy p {
	width: 70%;
	margin-top: 40px;
}

.benefits {
	position: relative;
	margin: 50px 0 250px 0
}

.benefits span {
	display: block;
	marign: 8px 0;
	font-family: 'Ubuntu', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #454545;
	text-align: left;
	text-transform: uppercase;
}

.check {
	color: #b5368c;
	margin-right: 10px;
}

/* ----- SLIDER ----- */


.slider {
  	max-width: 25%;
  	position: absolute;
	float: left;
	top: 0px;
	right: 0;
}

input {
  	display: none;
}

.inner {
  	width: 500%;
  	line-height: 0;
}

article {
  	width: 20%;
  	float: left;
  	position: relative;
	text-align: center;
}

article img {
  	width: 75%;
	transform: rotate(5deg);
}

/*---- SET UP CONTROL ----*/
.slider-prev-next-control {
  	position: absolute;
	left: 50%;
	width: 25%;
	transform: translateX(-50%);
  	bottom: -70px;
}
.slider-prev-next-control label {
  display: none;
  opacity: 0.7;
}
.slider-prev-next-control label:hover {
  opacity: 1;
	cursor: pointer;
}

.slider-dot-control {
	display: none;
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
}

/* Slider Styling */
.slider-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: 5px;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
.slider-wrapper .inner {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}

/*---- SET POSITION FOR SLIDE ----*/
#slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide1:checked ~ .slider-prev-next-control label:nth-child(5)::after {
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  margin: 0;
  line-height: 38px;
  font-size: 3em;
  display: block;
  color: #b5368c;
}

#slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(1)::after {
	content: url(img/icons/next.svg);
  padding-left: 0px;
}

#slide1:checked ~ .slider-prev-next-control label:nth-child(2), #slide2:checked ~ .slider-prev-next-control label:nth-child(3), #slide3:checked ~ .slider-prev-next-control label:nth-child(4), #slide4:checked ~ .slider-prev-next-control label:nth-child(5), #slide5:checked ~ .slider-prev-next-control label:nth-child(1) {
  display: block;
  float: right;
  margin-right: 0px;
}

#slide2:checked ~ .slider-prev-next-control label:nth-child(1), #slide3:checked ~ .slider-prev-next-control label:nth-child(2), #slide4:checked ~ .slider-prev-next-control label:nth-child(3), #slide5:checked ~ .slider-prev-next-control label:nth-child(4), #slide1:checked ~ .slider-prev-next-control label:nth-child(5) {
  display: block;
  float: left;
  margin-left: 0px;
}

#slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide1:checked ~ .slider-prev-next-control label:nth-child(5)::after {
	content: url(img/icons/prev.svg);
  	padding-left: 0px;
}

#slide1:checked ~ .slider-dot-control label:nth-child(1), #slide2:checked ~ .slider-dot-control label:nth-child(2), #slide3:checked ~ .slider-dot-control label:nth-child(3), #slide4:checked ~ .slider-dot-control label:nth-child(4), #slide5:checked ~ .slider-dot-control label:nth-child(5) {
  background: #333;
}

#slide1:checked ~ .slider-wrapper article:nth-child(1) .info, #slide2:checked ~ .slider-wrapper article:nth-child(2) .info, #slide3:checked ~ .slider-wrapper article:nth-child(3) .info, #slide4:checked ~ .slider-wrapper article:nth-child(4) .info, #slide5:checked ~ .slider-wrapper article:nth-child(5) .info {
  opacity: 1;
}

#slide1:checked ~ .slider-wrapper .inner {
  margin-left: 0%;
}

#slide2:checked ~ .slider-wrapper .inner {
  margin-left: -100%;
}

#slide3:checked ~ .slider-wrapper .inner {
  margin-left: -200%;
}

#slide4:checked ~ .slider-wrapper .inner {
  margin-left: -300%;
}

#slide5:checked ~ .slider-wrapper .inner {
  margin-left: -400%;
}

/* ----- AUSWAHL -----*/

.auswahl-wrapper {
	position: relative;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 25px
}

.auswahl {
	position: relative;
	width: 100%;
	margin-top: 100px;
}

.auswahl-img {
	display: inline-block;
	width: 40%;
}

.auswahl-img img {
	width: 100%;
	height: auto;
}

.auswahl-copy {
	display: inline-block;
	width: 50%;
	vertical-align: top;
	padding-top: 100px;
}

/* ----- CONTACT ----- */

.contact {
	position: relative;
	width: 1310px;
	margin: 0 auto;
	top: -60px;
	padding: 0 25px;
	display: flex
}

.contact-left {
	flex-grow: 1;
	text-align: center;
	background: url("img/contact-image.jpg") center no-repeat;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-size:cover;
	padding: 50px;
}

.contact-right {
	flex-grow: 1;
	background: none;
	padding: 50px;
	margin-top: 30px

}

#iso {
	position: absolute;
	max-width: 325px;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 888;
}

#iso img {
	width: 100%;
	height: auto;
}

#recycle {
	float: right;
	position: relative;
	max-width: 300px;
	text-align: center;
	z-index: 300;
	margin-top: 50px;
	
}

#recycle img {
	width: 45%;
	height: auto;
	padding: 0;
	margin: 0;
}

#recycle span {
	display: block;
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #454545;
	line-height: 180%;
	text-align: center;
}

#recycle span strong {
	color: #b5368c;
	font-size: 16px;
}

/* ----- FOOTER ----- */

footer {
	position: relative;
	width: 100%;
	margin-top: 115px;
	padding: 350px 0 40px 0;
	background: url("img/footer_bg.jpg") top no-repeat;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-size:cover;
}

.footer-wrapper {
	position: relative;
	max-width: 1310px;
	padding: 0 25px;
	margin: 0 auto;
	display: flex;
}

.column_footer {
	flex-grow: 1;
	text-align: left;
	font-size: 14px;
	line-height: 180%;
	vertical-align: top;
	
}

.column_footer + .column_footer {
	margin-left: 2%;
}

.logo-footer {
	width: 150px;
	margin-bottom: 30px;
}

.logo-footer img {
	width: 100%;
	height: auto;
}

.list-footer {
	padding: 0;
	margin: 0;
	list-style: none;
}

.list-header {
	font-size: 14px;
	color: #b5368c;
	font-weight: 700 !important;
	line-height: 200%;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.list-footer li a {
	color: #454545;
	transition: color 0.3s ease;
}

.list-footer li a:hover {
	color: #b5368c;
}

.margin-1 {
	margin-right: 10px;
}
.margin-2 {
	margin-right: 23px;
}
.margin-3 {
	margin-right: 18px;
}

.column_footer a i {
	display: inline-block;
	color: #fff;
	border: 1px solid #b5368c;
	background: #b5368c;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    vertical-align: middle;
    padding: 3px;
}

@media screen and (max-width:768px) {
	
	.pink {
		font-size: 40px;
		color: #b5368c;
	}
	
	.main-nav {
		position: absolute;
		text-align: right;
		top: 0px;
		right:15px;
	}


	.main-nav ul li {
		visibility: hidden
	}
	
	.main-nav ul li.openNav {
		visibility: visible;
	}
	
	.main-nav ul li:last-of-type {
		visibility: visible;
	}
	
	.wrapper {
		width: 100%;
		min-height: 500px;
	}

	.topper-home-headline {
		top: 40%;
	}

	.topper-home-right {
		display: none;
	}
	
	#home-columns {
		position: relative;
		max-width: 100%;
		padding: 0 25px;
		margin:  0 auto;
		margin-top: 0px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-items: flex-start;
		align-content: flex-start;
	}
	
	.column {
		flex-grow: 1;
		flex-basis: 0;
		text-align: left;
		border-right: 0px solid rgba(0,0,0,0.1);
		padding-right: 0%;
		padding-left: 0%;

	}

	.column + .column {
		margin-left: 0%;
	}

	.column:last-of-type {
		margin-left: 0;
		margin-top: 35px;
	}
	
	.column:nth-of-type(2) {
		margin:50px 0;
	}
	
	.number {
		display: none;
	}
	
	.numbering-copy {
		width: 90%;
		float: none;
		text-align: center;
		padding: 5%;
	}
	
	#recycle {
		float: none;
		margin: 0 auto;
		position: relative;
		padding-bottom: 8%;

	}

	#recycle img {
		width: 45%;
	}
	
	.selection {
		position: relative;
		max-width: 1310px;
		margin: 0 auto;
		top: 0px;
		padding: 0 25px;
		display: flex;
	}

	.bottle-large {
		top: -70px;
	}

	.selection-left {
		flex-grow: 1;
		text-align: center;
		background: url("img/selection-left_bg.jpg") center no-repeat;
		-moz-background-size:cover;
		-webkit-background-size:cover;
		background-size:cover;
	}

	.selection-right {
		flex-grow: 1;
		text-align: center;
		background: url("img/selection-right_bg.jpg") center no-repeat;
		-moz-background-size:cover;
		-webkit-background-size:cover;
		background-size:cover;
	}

	.selection-copy {
		position: relative;
		margin: 0 auto;
		width: 60%;
		color: #fff;
		padding: 80px 20px;
		text-shadow: 0 0 10px #000;
	}
	
	.company {
		max-width: 1310px;
		margin: 0 auto;
		top: 0px;
		padding: 0 25px;
	}
	
	.contact {
		position: relative;
		width: 100%;
		margin: 0 auto;
		top: 0px;
		padding: 0 25px;
		display: flex
	}

	.contact-left {
		width: 50%;
		flex-grow: 1;
		text-align: center;
		background: url("img/contact-image.jpg") center no-repeat;
		-moz-background-size:cover;
		-webkit-background-size:cover;
		background-size:cover;
		padding: 50px;
	}

	.contact-right {
		flex-grow: 1;
		background: none;
		padding: 20px;
		margin-top: 10px

	}
	
	.bottle-numbering {
		left: 2%;
		top: 0px;
		height: 450px;
	}
	
	.labeldesign {
		top: 0px;
	}
	
	.labedesign-info {
		position: relative;
		max-width: 1310px;
		margin: 0 auto;
		margin-top: 50px;
		padding: 0 25px;
	}
	
	.product-container {
		flex: 1 0 45%;
		margin: 40px 5px;
		text-align: center;
		max-width: 45%;
	}
	
	
	.content-center-img {
		display: inline-block;
		width: 30%;
	}


	.content-center-copy{
		display: inline-block;
		width: 90%;
		vertical-align: top;
		padding-top: 40px;
	}

	.content-center-copy p:first-of-type {
		font-size: 18px;
	}

	.nachaltigkeit-grafik {
		position: relative;
		margin-top: 40px;
	}

	.nachaltigkeit-grafik img {
		width: 100%;
		height: auto;
	}

	
}



@media screen and (max-width:500px) {
	
	h1 {
		font-size: 50px;
	}
	
	.pink {
		font-size: 35px;
	}

	h2 {
		font-size: 18px;
	}
	
	h4 {
		font-size: 20px;
	}
	
	p {
	font-size: 14px;
	}
	
	.header-headline {
		width: 85%;
	}
	
	.selection {
		position: relative;
		max-width: 1310px;
		margin: 0 auto;
		top: -50px;
		padding: 0 25px;
		display: block;
	}
	
	.selection-left {
		flex-grow: 2;
	}

	.selection-right {
		flex-grow: 2;
	}

	.selection-copy {
		position: relative;
		margin: 0 auto;
		width: 80%;
		color: #fff;
		padding: 80px 20px;
		text-shadow: none;
	}
	
	.bottle-large {
		display: none;
	}
	
	.numbering-copy {
		width: 100%;
		float: none;
		clear: right;
		background: #f5f5f5;
		text-align: center;
		padding: 90px 0px 90px 0px;

	}
	
	.shorter {
		display: block;
		padding-left: 0% !important;

	}

	.bottle-numbering {
		display: none;
	}
	
	.labedesign-info {
		position: relative;
		width: 80%;
		margin: 0 auto;
		margin-top: 100px;
		padding: 0 0px;
	}
	
	.labeldesign-info-copy {
		position: relative;
		width: 100%;
	}

	.labeldesign-info-copy p {
		width: 100%;
		margin-top: 40px;
	}
	
	.slider {
		max-width: 100%;
		position: relative;
		float: none;
		clear: left;
		top: 0px;
		right: 0;
	}
	
	.auswahl-wrapper {
		position: relative;
		max-width: 1080px;
		margin: 0 auto;
		padding: 0 25px
	}

	.auswahl {
		position: relative;
		width: 100%;
		margin-top: 100px;
	}

	.auswahl-img {
		display: inline-block;
		width: 40%;
	}

	.auswahl-img img {
		width: 100%;
		height: auto;
	}

	.auswahl-copy {
		display: inline-block;
		width: 50%;
		vertical-align: top;
		padding-top: 20px;
	}
	
	footer {
		padding: 350px 0 20px 0;

	}

	.footer-wrapper {
		position: relative;
		max-width: 1310px;
		width: 100%;
		padding: 0 20px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
	}

	.column_footer {
		flex-grow: 1;
		text-align: left;
		font-size: 14px;
		line-height: 180%;
		vertical-align: top;
		margin-bottom: 20px;

	}

}