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

html {
	width: 100%;
}

body {
	width: 100%;
	transition: all 0.5s !important;
	background: radial-gradient(circle, rgba(57,70,77,1) 0%, rgba(0,0,0,1) 100%);
	font-family: 'Poppins', serif;
	font-weight: 400px;
}

section{
	color: #000;
	height: auto;
	width: 100%;
	padding: 100px 0px;
}


h1, h2, h3, h4, h5, h6 {
	font-family: 'Solway', serif;
	margin-bottom: 50px;
}

h1 {
  margin-top: 0;
  font-size: 3.052em;
	font-weight: bold;
}

h2 {font-size: 2.441em;font-weight: bold;}

h3 {font-size: 1.953em;font-weight: bold;}

h4 {font-size: 1.563em;font-weight: bold;}

h5 {font-size: 1.25em;font-weight: bold;}

p {margin-bottom: 1.15rem;}



p {
	font-size: 22px;
	text-align: justify;
}

li {
	font-size: 22px;
}

hr {
	margin:  30px 0px;
	border: 2px solid #ffdd00;
}

/* NAVBAR */
.navbar-brand, .footer-brand {
	background: url("../img/after-meal-logo-weiss.svg");
    height: 50px;
    width: 70px;
    background-repeat: no-repeat;
}

.navbar {
	background: #000;
	margin-bottom: 0px;
	padding: 2px 5px;
}

.nav-button {
	position: relative;
	z-index: 1111;
	height: 42px; 
	display: block; 
	width: 50px; 
	padding: 12px; 
}

.nav-button #nav-icon3 {
	width: 24px;
	height: 22px;
	display: inline-block;
	position: relative;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}

.nav-button #nav-icon3 span {
	display: block;
	position: absolute;
	height: 3px;
	width: 100%;
	background: #fff;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out
}

.nav-button #nav-icon3 span:nth-child(1){top:0}
.nav-button #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3){top:7px}
.nav-button #nav-icon3 span:nth-child(4){top:14px}

.nav-open #nav-icon3 span:nth-child(1){top:9px;width:0;left:50%}
.nav-open #nav-icon3 span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);background: #fff;}
.nav-open #nav-icon3 span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);background: #fff;}
.nav-open #nav-icon3 span:nth-child(4){top:9px;width:0;left:50%}

.nav-button:before {
	content: 'MENU';
    position: absolute;
    right: 50px;
    top: 8px;
    color: #fff;
    font-weight: bold;
	cursor: pointer;
}
/* BIG OVERLAY MENU */
.main-menu {
	width: 100%; 
	height: 100%; 
	opacity: 0; 
	visibility: hidden;
}

.nav-open .main-menu {
	opacity: 1; 
	visibility: visible; 
	background: rgba(0, 0, 0, 0.9);
	z-index: 10;
	transition: all 0.5s !important;
	
}

.nav-close .main-menu {
	opacity: 0; 
	visibility: hidden; 
	background: rgba(0, 0, 0, 0.9);
	z-index:10;
	transition: all 0.5s !important;
}

.main-menu .nav li a {
	color:#FFF; 
	font-size: 22px; 
	font-weight:600;
	transition: all 0.5s !important;
}

.main-menu .nav li a:hover {
	color:#ffdd00;
	font-size: 22px; 
	font-weight:600; 
}

.main-menu .nav li {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-animation-timing-function: cubic-bezier(.45,.005,0,1);
    -moz-animation-timing-function: cubic-bezier(.45,.005,0,1);
    -o-animation-timing-function: cubic-bezier(.45,.005,0,1);
    animation-timing-function: cubic-bezier(.45,.005,0,1);
}
.nav-open .main-menu .nav li {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform .2s,opacity .2s;
    transition: transform .2s,opacity .2s;
}

.flex-center {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items:center;
	-ms-flex-align: center;
	align-items: center;
	height: 100%;
}


/* HEADER */
#header{
	height: 100vh;
	width: 100%;
	overflow: hidden;
	position: relative;
	background:url("../img/header-background.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

#header .header-img {
	width: 100%;
	height: 100vh;
}

#header .header-img{
	background-image: url("../img/After-Meal-HEADER-transparent.png");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	left:50%;
	-webkit-transform: translate(-50%);
	-ms-transform: translate(-50%);
	transform: translate(-50%);
	position: absolute;
}

#header .scroll-down {
	cursor: pointer;
	width: 50px;
	height: 50px;
	background-color: #ffdd00;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
	border: 2px solid #fff;
	transition: all 0.8s;
	transform: scale(1);
	animation: pulse 2s infinite;
}

#header .scroll-down:hover {
	background-color: #000;
}

#header i {
	padding-left: 5px;
	font-size: 30px;
	color: #fff;
}

.header-text h1{
	font-family: 'Solway', serif;
	position: absolute;
	font-size: 5em;
	color: #fff;
	top: 40%;
	left: 50%;
	width: 80%;
	text-align: left;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.header-scroll{
	position: absolute;
	font-size: 2em;
	font-weight: 100;
	color: #fff;
	letter-spacing: 0.2em;
	bottom: 5%;
	left: 50%;
	width: 80%;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


.content {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0;
  max-width: 100%;
  width: 100vw;
}

/* LONGFILLS */
body::before {
  content: ' ';
  display: block;
  background-image: url("../img/longfill-background.jpg");
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10; // This is pretty important.
}



.stacking-slide {
  height: 100vh;
  width: 100%;
  top: 100px;
	padding: 100px 0px;
}

.sticky {
	position: sticky;
}

.img-1 {
	z-index: 1;
	background: url("../img/para-zitrone.png");
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.img-2 {
	z-index: 2;
	background: url("../img/para-tiramisu.png");
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.img-3 {
	z-index: 3;
	background: url("../img/para-zimt.png");
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.img-4 {
	z-index: 4;
	background: url("../img/para-erdnuss.png");
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.img-5 {
	z-index: 5;
	background: url("../img/para-kirsch.png");
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* SECTION KAUFEN */
section#buy{
	padding: 150px 0px;
	color: #fff;
	background: rgb(0,0,0);
	background: radial-gradient(circle, rgba(57,70,77,1) 0%, rgba(0,0,0,1) 100%);
}

section#buy h1 {
	margin-bottom: 50px;
}

.btn-buy, .btn-buy:hover {
	text-decoration: none;
	padding: 10px 20px;
	border: 2px solid #fff;
	background: #ffdd00;
	transition: all 0.8s;
	transform: scale(1);
	animation: pulse 2s infinite;
	color: #000;
	font-size: 22px;
}

.btn-buy:hover {
	background: #000;
	color: #ffdd00 !important;
	padding: 10px 30px;
}

/* SECTION PRODUCTS */
section#products {
	color: #fff;
	height: auto;
	width: 100%;
	padding: 150px 0px;
	text-align: center;
}

#products p {
	text-align: center;
}

#products a {
	margin-top: 10px;
}


/* EXTRA SMALL DEVICE */
@media (min-width: 0px) {
	section#info {
		color: #fff;
		background: rgb(233,148,208);
		background: radial-gradient(circle, rgba(57,70,77,1) 0%, rgba(0,0,0,1) 100%);
		height: auto;
		width: 100%;
		padding: 150px 0px;
	}	
}

/* SMALL DEVICE */
@media (min-width: 576px) {
}

/* MEDIUM DEVICE */
@media (min-width: 768px) {
}

/* LARGE DEVICE */
@media (min-width: 992px) {
}

/* SCROLL TO TOP BUTTON */
#scroll-up {
	position:fixed;
	right:10px;
	bottom:-100px;
	cursor:pointer;
	width:50px;
	height:50px;
	display: block;
	background-color:#ffdd00;
	-webkit-border-radius:60px;
	-moz-border-radius:60px;
	border-radius:60px;
	border: 2px solid #fff;
	transition: all 0.8s;
	transform: scale(1);
	animation: pulse 2s infinite;
	z-index: 9;
}

#scroll-up:hover {
	background-color: #000;
}

#scroll-up.flyIn {
	bottom: 20px;
	display: block;
  
}

#scroll-up i {
	padding-top: 9px;
	padding-left: 13px;
	font-size: 30px;
	color: #fff;
}

.MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position:relative; }
.MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
.MultiCarousel .MultiCarousel-inner .item { float: left;}
.MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:10px; margin:10px; background:none; color:#fff;}
.MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); height: 45px; width: 45px; }
.MultiCarousel .leftLst { left:0; background: #ffdd00;}
.MultiCarousel .rightLst { right:0; background: #ffdd00;}

.pad15 p {text-align: center; margin: 0px 0px 30px 0px;}

.pad15 img {align-items: center;}

.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#000; color: #fff; }

/******** FOOTER ********/
footer {
  position: relative;
  background: radial-gradient(circle, rgba(57,70,77,1) 0%, rgba(0,0,0,1) 100%);
  height: 200px;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

footer p {
	text-align: center;
	font-size: 16px;
}


footer .container {
  position: relative;
  z-index: 2;
}

	
footer img {
	height: 130px;
}

.footer-bottom {
	background-color: #000;
	padding: 25px;
}

.footer-bottom p {
	font-size: 16px;
}

/* ANIMATION STYLES */
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
	}
	
	25% {
		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
	}
	
	50% {
		box-shadow: 0 0 0 0px rgba(255, 255, 255, 1);
	}
	
	75% {
		box-shadow: 0 0 0 0px rgba(255, 255, 255, 1);
	}
	
	100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

@keyframes pulsing{
	0% { opacity: 0.5; }
	100% { opacity: 1; }
}

::-moz-selection {
  color: #000; background: #ffdd00;
}

::selection {
  color: #000; background: #ffdd00;
}