@media screen and (min-width:300px) and (max-width:449px){
#header {
	height:16rem;
	overflow:hidden;
	position:relative;
}
#container {
	top:2rem;
	margin-bottom:40px;
}
.rainbow-container {
	height:34rem;
	width:34rem;
	position: absolute;
	transform: translate(-50%, -10%);
	left:50%;
	top:3rem;
	border-radius:0.6rem;
	display:flex;
	justify-content:center;
	z-index:-1;
	overflow:hidden;
}}
@media screen and (min-width:450px) and (max-width:649px){
#header {
	height:16.4rem;
	overflow:hidden;
	position:relative;
}
#container {
	top:3rem;
		margin-bottom:65px;
}
.rainbow-container {
	height:22.5rem;
	width:22.5rem;
	position: absolute;
	transform: translate(-50%, -10%);
	left: calc(98% - 12rem);
	top:7.5rem;
	border-radius:0.6rem;
	z-index:0;
}}
@media screen and (min-width:650px) and (max-width:849px){
#header {
	height:19.5rem;
	overflow:hidden;
	position:relative;
}
#container {
	margin-top:3rem;
	margin-bottom:80px;
}
.rainbow-container {
	height:33.75rem;
	width:33.75rem;
	position: absolute;
	transform: translate(-50%, -10%);
	left:calc(100% - 18rem);
	top:6.2rem;
	border-radius:0.6rem;
	z-index:0;
}}
@media screen and (min-width:850px) and (max-width:1169px) { 
#header {
	height:24.5rem;
	overflow:hidden;
	position:relative;
}
#container {
	top:4rem;
	margin-bottom:60px;
}
.rainbow-container {
	height:45rem;
	width:45rem;
	position: absolute;
	transform: translate(-50%, -50%);
	left: calc(100% - 25.5rem);
	top:26.5rem;
	border-radius:0.6rem;
}}	
@media screen and (min-width:1170px){ 
#header {
	height:33.5rem;
	overflow:hidden;
	position:relative;
}
#container {
	top:0rem;
}
.rainbow-container {
	height:58.5rem;
	width:58.5rem;
	position: absolute;
	transform: translate(50%, -50%);
	right:33rem;
	top:34.5rem;
	border-radius:0.6rem;

}}


@media screen and (min-width:300px) and (max-width:449px){
/* .rainbow-container::after {
	content:"";
	position:absolute;
	height: 48.5%;
	width: 100%;
	background-color:#eaffea;
	bottom:0;
	border-radius: 0 0 0.6rem 0.6rem;
} */
.title {
	position:absolute;
	left: 5%;
	top:3rem;
}
.title h1 {
	font-size:2.4rem;
	transform:scaleY(1.1);
	line-height:1.3;
	z-index:9;
	font-family: Poppinsextrabold;
	color: transparent;
	-webkit-text-stroke:2px #fff;
	background-image: url('/files/pictures/backgrounds/titel_background_green.webp');
	-webkit-background-clip: text;
	background-position:0 0;
	animation: titlemove 70s linear infinite;
}
	.title h2 {
	font-size:1.18rem;
	line-height:1;
	z-index:9;
	font-family: Oswald,Poppinssemibold;
    color: #224626;
    letter-spacing: 1.8px;
    font-weight: 600;
    margin-top:1rem;
}}

@media screen and (min-width:450px) and (max-width:649px){
 
.title {
	position:absolute;
	left: 4%;
	top:2rem;
}
.title h1 {
	font-size:3rem;
	transform:scaleY(1.1);
	line-height:1.3;
	z-index:9;
	font-family: Poppinsextrabold;
	color: transparent;
	-webkit-text-stroke:2px #fff;
	background-image: url('/files/pictures/backgrounds/titel_background_green.webp');
	-webkit-background-clip: text;
	background-position:0 0;
	animation: titlemove 70s linear infinite;
}
	.title h2 {
	font-size:1.3rem;
	line-height:1;
	z-index:9;
	font-family: Oswald,Poppinssemibold;
    color: #224626;
    letter-spacing: 1.8px;
    font-weight: 600;
    margin-top:1rem;
}}

@media screen and (min-width:650px) and (max-width:849px){ 
.title {
	position:absolute;
	left: 4%;
	top:3rem;
}
.title h1 {
	font-size:3.5rem;
	transform:scaleY(1.1);
	line-height:1.3;
	z-index:9;
	font-family: Poppinsextrabold;
	color: transparent;
	-webkit-text-stroke:2px #fff;
	background-image: url('/files/pictures/backgrounds/titel_background_green.webp');
	-webkit-background-clip: text;
	background-position:0 0;
	animation: titlemove 70s linear infinite;
}
	.title h2 {
	font-size:1.9rem;
	line-height:1;
	z-index:9;
	font-family: Oswald,Poppinssemibold;
    color: #224626;
    letter-spacing: 1.8px;
    font-weight: 600;
    margin-top:1rem;
    margin-left: 3rem;
}}

@media screen and (min-width:850px) and (max-width:1169px) { 	
.title {
	position:absolute;
	left: 4%;
	top:8rem;
}
.title h1 {
	font-size:4rem;
	transform:scaleY(1.3);
	line-height:1.3;
	z-index:9;
	font-family: Poppinsextrabold;
	color: transparent;
	-webkit-text-stroke:2px #fff;
	background-image: url('/files/pictures/backgrounds/titel_background_green.webp');
	-webkit-background-clip: text;
	background-position:0 0;
	animation: titlemove 70s linear infinite;
}
	.title h2 {
	font-size:2rem;
	line-height:1;
	z-index:9;
	font-family: Oswald,Poppinssemibold;
    color: #224626;
    letter-spacing: 1.8px;
    font-weight: 600;
    margin-top:1rem;
    margin-left: 4rem;
}}

@media screen and (min-width:1170px){ 
.rainbow-container::after {
	content:"";
	position:absolute;
	height: 48.5%;
	width: 100%;
	background-color:#eaffea;
	bottom:0;
	border-radius: 0 0 0.6rem 0.6rem;
}
.title {
	position:absolute;
	left: 4%;
	top:11rem;
}
.title h1 {
	font-size:6rem;
	transform:scaleY(1.1);
	line-height:1.3;
	z-index:9;
	font-family: Poppinsextrabold;
	color: transparent;
	-webkit-text-stroke:2px #fff;
	background-image: url('/files/pictures/backgrounds/titel_background_green.webp');
	-webkit-background-clip: text;
	background-position:0 0;
	animation: titlemove 70s linear infinite;
}
	.title h2 {
	font-size:2.24rem;
	line-height:1;
	z-index:9;
	font-family: Oswald,Poppinssemibold;
    color: #224626;
    letter-spacing: 1.8px;
    font-weight: 600;
    margin-top:1rem;
}}

.title h2 {
	text-shadow: 3px 2px 2px #fff;
}
@keyframes titlemove {
    100% {background-position:2000px 0;}
}
.arche1 .title h1 {
	-webkit-text-stroke:2px #d5ff89;
	background-image: url('/files/pictures/backgrounds/titel_drink_background5.png');
	-webkit-background-clip: text;
	background-position:0 0;
	animation: titlemove 8s linear infinite;	
}


.rainbow-color {
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	animation: spin 12s infinite;
	transform-origin: 50% 0%;
}
@keyframes spin {
   20% {transform: translate(-50%, -50%) rotate(180deg);}
   60% {transform: translate(-50%, -50%) rotate(180deg);}
   80% {transform: translate(-50%, -50%) rotate(360deg);}
   100% {transform: translate(-50%, -50%) rotate(360deg);}
}
@media screen and (min-width:300px) and (max-width:549px){ 
.rainbow-color-1 {
	height: 11.25rem;
	width:22.5rem;
	border: 1.25rem solid #fd0024;
	border-top: none;
	top: calc(50% + 5.62rem);
	border-radius: 0 0 11.25rem 11.25rem;
	animation-delay:0.8s;
} 
.rainbow-color-2 {
	height: 10rem;
	width:20rem;
	border: 1.25rem solid #fe9000;
	border-top: none;
	top: calc(50% + 5rem);
	border-radius: 0 0 10rem 10rem;
	animation-delay:0.6s;
} 
.rainbow-color-3 {
	height: 8.75rem;
	width:17.5rem;
	border: 1.25rem solid #fff020;
	border-top: none;
	top: calc(50% + 4.37rem);
	border-radius: 0 0 8.75rem 8.75rem;
	animation-delay:0.4s;
} 
.rainbow-color-4 {
	height: 7.5rem;
	width:15rem;
	border: 1.25rem solid #01b52d;
	border-top: none;
	top: calc(50% + 3.75rem);
	border-radius: 0 0 7.5rem 7.5rem;
	animation-delay:0.2s;
} 
.rainbow-color-5 {
	height: 6.25rem;
	width:12.5rem;
	border: 1.25rem solid #1b28ec;
	border-top: none;
	top: calc(50% + 3.12rem);
	border-radius: 0 0 6.25rem 6.25em;
	animation-delay:0s;
}}
@media screen and (min-width:550px) and (max-width:649px){ 
.rainbow-color-1 {
	height: 11.25rem;
	width:22.5rem;
	border: 1.25rem solid #fd0024;
	border-top: none;
	top: calc(50% + 5.62rem);
	border-radius: 0 0 11.25rem 11.25rem;
	animation-delay:0.8s;
} 
.rainbow-color-2 {
	height: 10rem;
	width:20rem;
	border: 1.25rem solid #fe9000;
	border-top: none;
	top: calc(50% + 5rem);
	border-radius: 0 0 10rem 10rem;
	animation-delay:0.6s;
} 
.rainbow-color-3 {
	height: 8.75rem;
	width:17.5rem;
	border: 1.25rem solid #fff020;
	border-top: none;
	top: calc(50% + 4.37rem);
	border-radius: 0 0 8.75rem 8.75rem;
	animation-delay:0.4s;
} 
.rainbow-color-4 {
	height: 7.5rem;
	width:15rem;
	border: 1.25rem solid #01b52d;
	border-top: none;
	top: calc(50% + 3.75rem);
	border-radius: 0 0 7.5rem 7.5rem;
	animation-delay:0.2s;
} 
.rainbow-color-5 {
	height: 6.25rem;
	width:12.5rem;
	border: 1.25rem solid #1b28ec;
	border-top: none;
	top: calc(50% + 3.12rem);
	border-radius: 0 0 6.25rem 6.25em;
	animation-delay:0s;
}}
@media screen and (min-width:650px) and (max-width:849px){ 
.rainbow-color-1 {
	height: 16.875rem;
	width:33.75rem;
	border: 1.875rem solid #fd0024;
	border-top: none;
	top: calc(50% + 8.45rem);
	border-radius: 0 0 16.875rem 16.875rem;
	animation-delay:0.8s;
} 
.rainbow-color-2 {
	height: 15rem;
	width:30rem;
	border: 1.875rem solid #fe9000;
	border-top: none;
	top: calc(50% + 7.5rem);
	border-radius: 0 0 15rem 15rem;
	animation-delay:0.6s;
} 
.rainbow-color-3 {
	height: 13.125rem;
	width:26.25rem;
	border: 1.875rem solid #fff020;
	border-top: none;
	top: calc(50% + 6.55rem);
	border-radius: 0 0 13.125rem 13.125rem;
	animation-delay:0.4s;
} 
.rainbow-color-4 {
	height: 11.25rem;
	width:22.5rem;
	border: 1.875rem solid #01b52d;
	border-top: none;
	top: calc(50% + 5.625rem);
	border-radius: 0 0 11.25rem 11.25rem;
	animation-delay:0.2s;
} 
.rainbow-color-5 {
	height: 9.375rem;
	width:18.75rem;
	border: 1.875rem solid #1b28ec;
	border-top: none;
	top: calc(50% + 4.7rem);
	border-radius: 0 0 9.375rem 9.375em;
	animation-delay:0s;
}}
@media screen and (min-width:850px) and (max-width:1169px) { 
.rainbow-color-1 {
	height: 22.5rem;
	width:45rem;
	border: 2.5rem solid #fd0024;
	border-top: none;
	top: calc(50% + 11.25rem);
	border-radius: 0 0 22.5rem 22.5rem;
	animation-delay:0.8s;
} 
.rainbow-color-2 {
	height:20rem;
	width:40rem;
	border: 2.5rem solid #fe9000;
	border-top: none;
	top: calc(50% + 10rem);
	border-radius: 0 0 20rem 20rem;
	animation-delay:0.6s;
} 
.rainbow-color-3 {
	height:17.5rem;
	width:35rem;
	border: 2.5rem solid #fff020;
	border-top: none;
	top: calc(50% + 8.75rem);
	border-radius: 0 0 17.5rem 17.5rem;
	animation-delay:0.4s;
} 
.rainbow-color-4 {
	height:15rem;
	width:30rem;
	border: 2.5rem solid #01b52d;
	border-top: none;
	top: calc(50% + 7.5rem);
	border-radius: 0 0 15rem 15rem;
	animation-delay:0.2s;
} 
.rainbow-color-5 {
	height:12.5rem;
	width:25rem;
	border: 2.5rem solid #1b28ec;
	border-top: none;
	top: calc(50% + 6.25rem);
	border-radius: 0 0 12.5rem 12.5em;
	animation-delay:0s;
}}
@media screen and (min-width:1170px){ 
.rainbow-color-1 {
	height: 29.25rem;
	width:58.5rem;
	border: 3.25rem solid #fd0024;
	border-top: none;
	top: calc(50% + 14.625rem);
	border-radius: 0 0 29.25rem 29.25rem;
	animation-delay:0.8s;
} 
.rainbow-color-2 {
	height:26rem;
	width:52rem;
	border: 3.25rem solid #fe9000;
	border-top: none;
	top: calc(50% + 13rem);
	border-radius: 0 0 26rem 26rem;
	animation-delay:0.6s;
} 
.rainbow-color-3 {
	height:22.75rem;
	width:45.5rem;
	border: 3.25rem solid #fff020;
	border-top: none;
	top: calc(50% + 11.375rem);
	border-radius: 0 0 22.75rem 22.75rem;
	animation-delay:0.4s;
} 
.rainbow-color-4 {
	height:19.5rem;
	width:39rem;
	border: 3.25rem solid #01b52d;
	border-top: none;
	top: calc(50% + 9.75rem);
	border-radius: 0 0 19.5rem 19.5rem;
	animation-delay:0.2s;
} 
.rainbow-color-5 {
	height:16.25rem;
	width:32.5rem;
	border: 3.25rem solid #1b28ec;
	border-top: none;
	top: calc(50% + 8.125rem);
	border-radius: 0 0 16.25rem 16.25em;
	animation-delay:0s;
}}