/*
Theme Name: DGG 2025
Description:  Pfizer Nachhaltigkeits Messestand
Theme URI:	 https://expopartner.de
Author: despecial
Author URI:	https://wwww.despecial.com
Template: salient
Version: 1.2
*/

:root {
	--color-darkgreen: #6E862E;
	--color-lightgreen: #C9D526; /*#A2C745; */
	--color-green: #CCD621;
	--color-gray: #DCDEEF;
	--color-darkgray: #6C7386;
	--color-text: #0000C9;
	--color-headline: #1F40A2;
	--color-lightblue: #CEEAFE; /*#0095FF;*/
	--content-width: 430px; /* iphone 14 pro max */
}


/* noto-sans-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 300;
  src: url('./assets/fonts/noto-sans-v27-latin-300.woff2') format('woff2'),
       url('./assets/fonts/noto-sans-v27-latin-300.woff') format('woff');
}

/* noto-sans-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  src: url('./assets/fonts/noto-sans-v27-latin-500.woff2') format('woff2'),
       url('./assets/fonts/noto-sans-v27-latin-500.woff') format('woff');
}

/* noto-sans-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  src: url('./assets/fonts/noto-sans-v27-latin-600.woff2') format('woff2'),
       url('./assets/fonts/noto-sans-v27-latin-600.woff') format('woff');
}

/* noto-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('./assets/fonts/noto-sans-v27-latin-700.woff2') format('woff2'),
       url('./assets/fonts/noto-sans-v27-latin-700.woff') format('woff');
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
/* 	font: inherit; */
	vertical-align: baseline;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* reset theme */
body:not(.nectar-no-flex-height) {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	line-height: 26px;
}
#top,
#footer-outer,
#header-space,
#header-outer,
.nectar-skip-to-content,
#slide-out-widget-area-bg,
#slide-out-widget-area{
	display: none !important;
}
p {
  padding-bottom: 27px;
}
body b, body strong, body .bold {
  font-weight: 700;
}
body.admin-bar {
	min-height: 100vh;
}
sub {
	vertical-align: baseline;
	position: relative;
	top: 0.3em;
	line-height: 0;
	font-size: 10px;
}
html {
	--nectar-sticky-top-distance: 0px !important;
	min-height: 100vh;
}

/* despecial styles	*/
body {
	font-family: "Noto Sans";
	font-weight: 300;
	background-color: #faffe6;
	color: var(--color-text);
	margin: 0;
}
.content-wrapper {
	overflow: hidden;
	max-width: var(--content-width);
	margin: 0 auto;
	background-color: #F2F3FA;
/*
	background: rgb(251,251,253);
	background: linear-gradient(180deg, rgba(251,251,253,1) 0%, rgba(220,222,239,1) 40%, rgba(162,199,69,1) 100%);
*/
}
@media screen and (max-width: 460px) {
	.content-wrapper {
		max-width: 100vw;
	}
}

/* DEFAULT */
img {
	width: 100%;
	height:auto;
}
h2,h3,h4,h5,h6 {
	color: var(--color-headline);
	font-weight: 500;
}
h3,h4 {
	margin-bottom: 7px;
}
h4 {
	font-weight: 600;
}
p.smaller {
	font-size: 17px;
}
.bigger {
	font-size: 32px;
	font-weight: 600;
	text-transform: uppercase;
}
.color-green {
	color: var(--color-green);
}
.color-darkgreen {
	color: var(--color-darkgreen);
}
.color-lightgreen {
	color: var(--color-lightgreen);
}
.color-darkgray {
	color: var(--color-darkgray);
}
.color-lightblue {
	color: var(--color-lightblue);
}
.color-white {
	color: #fff;
}
.color-light {
	color: #E1EAB8;
}
.section {
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	position: relative;
}
.section p strong {
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}
.hide {
	display: none !important;
}
.hidden {
	opacity: 0;
}
.whitespace {
	display: inline-block;
	width: 10px;
}
.w25 {
	width: 25px;
}
.w33 {
	width: 33px;
}
.w50 {
	width: 50px;
}
.w60 {
	width: 60px;
}

/* Modal */
button {
	position: relative;
	font-family: "Noto Sans";
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 1rem;
	font-weight: bold;
	padding: 0 1rem;
	text-transform: uppercase;
}
button:hover {
	color: #111;
}
body[data-button-style*="slightly_rounded"] button,
button.open-modal {
	position: relative;
	z-index: 1;
	background: rgb(31,64,162);
	background: linear-gradient(90deg, rgba(31,64,162,1) 40%, rgba(45,111,202,1) 100%);
	-webkit-border-radius: 50% !important;
	border-radius: 50% !important;
	color: #fff;
	display: inline-block;
	margin: 20px;
	padding: 20px;
	border: 0px solid transparent;
	transition: box-shadow .3s ease-in;
}
button.open-modal:after,
button.vote-now:after {
	content: '';
	position: absolute;
	transform: translate(-50%, -50%);
	height: 3px;
	width: 50%;
	background: #fff;
	border-radius: 2px;
	top: 50%;
	left: 50%;
}
button.open-modal:before,
button.vote-now:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: 2px;
	height: 50%;
	width: 3px;
}
button.open-modal:hover,
button.vote-now:hover {
	-webkit-box-shadow: 0px 0px 0px 8px rgba(45,111,202,.6);
	box-shadow: 0px 0px 0px 8px rgba(45,111,202,.6);
}
body[data-button-style*="slightly_rounded"] button.vote-now,
button.vote-now {
	padding: 8px 20px 8px 40px;
	font-size: 17px;
	font-weight: 400;
	border-radius: 30px !important;
}
button.vote-now:before {
	height: 20px;
	left: 10%;
}
button.vote-now:after {
	width: 20px;
	left: 10%;
}

/* Modal styles */
.popup {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 2rem;
	position: fixed;
	z-index: 999;
	top: 0;
	width: 100%;
	max-width: var(--content-width);
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s ease;
}
.popup .modal-backdrop {
	background: rgba(0, 0, 0, 0.7);
	height: 100%;
	width: 100%;
	position: fixed;
}
.popup .modal-content {
	background: rgb(190,197,48);
	background: linear-gradient(90deg, rgba(190,197,48,1) 25%, rgba(180,190,50,1) 60%, rgba(166,178,54,1) 100%);
	border-radius: 10px;
	max-width: calc(var(--content-width) - 3rem);
/* 	position: fixed; */
	top: -100%;
	transition: all 0.6s ease;
	z-index: 1000;
	color: #fff;
	font-size: 16px;
	text-align: center;
	align-self: flex-start;
	margin-top: -100%;
}
.popup .modal-body {
	padding: 1.5rem;
}
.popup p strong {
-webkit-hyphens: none;
   -moz-hyphens: none;
        hyphens: none;
}
.popup a {
	color: var(--color-headline);
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
	border-bottom: 0px solid transparent
}
.popup.visible {
	opacity: 1;
	visibility: visible;
}
.popup.visible .modal-content {
/* 	top: 25%; */
	margin-top: 0;
	align-self: center;
}
.close-button {
	display: block;
	border-radius: 50%;
	margin: -30px auto 20px;
	padding: 0.5em;
	width: 30px;
	height: 30px;
	border: 2px solid #fff;
	color: #fff;
	position: relative;
	cursor: pointer;
}

.close-button::before {
	content: " ";
	position: absolute;
	display: block;
	background-color: #fff;
	width: 2px;
	left: 12px;
	top: 5px;
	bottom: 5px;
	transform: rotate(45deg);
}
.close-button::after {
	content: " ";
	position: absolute;
	display: block;
	background-color: #fff;
	height: 2px;
	top:12px;
	left: 5px;
	right: 5px;
	transform: rotate(45deg);
}


/** TOP BAR **/
.top-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px 10px 2px;
	margin-bottom: 36px;
	background-color: #fff;
	-webkit-box-shadow: 0px 2px 5px 1px #DBDBDB;
	box-shadow: 0px 2px 5px 1px #DBDBDB;
}
.top-bar img {
	height: 40px;
	width: auto;
}

.bg-wrapper-1 {
	background: #F2F3FA;
	background: linear-gradient(176deg, #F2F3FA  40%, rgba(221,222,238,1) 100%);
}

/* INTRO */
.section-intro {
	z-index: 2;
}
.section-intro::after {
	content:"";
	z-index: -1;
	position: absolute;
	left: 0;top:0;right:0;bottom:0;
	background: transparent url("./assets/img/recycling.svg") no-repeat;
	background-size: 170px 170px;
	background-position: 40% 200px;
	opacity: 0;
	animation: move-bg 2s linear 1 1s forwards;
}
.section-intro h1 {
	color: var(--color-headline);
	font-size: 38px;
	font-weight: 700;
	line-height: 1.05;
	margin-bottom: 60px;
	text-align: center;
	max-width: 60%;
	opacity: 0;
	transform-origin: center;
	transform: scale(.1) translate(0,300%) rotate(-60deg);
/* 	transition: all 1s ease-in-out 0.1s; */
}
.section h3 {
	font-size: 25px;
	line-height: 1.1;
}
.section h4 {
	text-transform: uppercase;
	font-size: 16px;
	line-height: 1.3;
}
.section-intro p {
	display: block;
	color: var(--color-headline);
	text-align: center;
	font-size: 20px;
	max-width: 60%;
/* 	transition: all .5s ease-in .5s; */
}
.section-intro p:first-of-type,
.section-intro p:nth-of-type(2n) {
	min-height: 220px;
}
.section-intro p.smaller {
	color: var(--color-darkgreen);
	position: relative;
	display: inline-block;
	/* margin-top: 32px; */
	padding-bottom: 100px;
/* 	transition-delay: 4.5s; */
}
.section-intro p.smaller::before {
	content: '';
	position: absolute;
	left: calc(50% - 25px);
	top: 120px;
	display: block;
	border-right: 3px solid var(--color-darkgreen);
	border-bottom: 3px solid var(--color-darkgreen);
	width: 25px;
	height: 25px;
	margin-bottom: 20px;
	transform: translate(-50%, -50%) rotate(45deg);
	transition-delay: 4s;
	animation: bounce2 2s ease infinite;
}
.section-intro p:last-of-type {
	max-width: 80%;
}

/* GO GREEN */
.gogreen {
	position: absolute;
	left: 8%;
	top: 10%;
}
.gogreen img {
	height: 85px;
	width: auto;
}
.section-gogreen .earth {
	position: relative;
	max-height: 430px;
	margin-left: 20%;
	margin-bottom: 10px;
}
.earth #Earth {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 14s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: rotate;
	-moz-animation-duration:14s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	animation-name: rotate;
	animation-duration: 14s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.earth .wheel-rod {
	transform: rotate(-5deg);
	transform-origin: 50% 50%;
}
.earth #Wheel1 {
	transform: translate(-16px,0);
}
.earth #Wheel1 g {
	transform-box: fill-box;
	transform-origin: 48% 38%;
	-webkit-animation: rotate-wheel 4s infinite linear reverse;
	-moz-animation: rotate 4s infinite linear reverse;
	animation: rotate 4s infinite linear reverse;
}
.earth #Wheel2 {
	transform: translate(-13px,-5px);
}
.co2neutral {
	position: absolute;
	left: 28px;
	top: 200px;
	width: 180px
/*
	left: -5%;
	top: 38%;
	width: 64%;
*/
}

.section-messestand h3 {
	text-align: left;
	max-width: 240px;
	align-self: flex-start;
	margin-left: 30px;
}
.section-messestand h4 {
	margin-top: 20px;
	margin-left: 70px;
}
.section-messestand h4:last-of-type {
	margin-left: 0;
	margin-top: 0px;
}
.section-messestand .open-modal {
	margin-left: 140px;
	margin-top: 25px;
}
.hand-material {
	width: 320px;
	align-self: flex-start;
	margin-top: -60px;
	margin-left: -46px;
}
.section-holz h3 {
	align-self: flex-start;
	text-align: center;
	margin-left: 16px;
	max-width: 260px;
	font-size: 23px;
}
.tree-left {
	-webkit-transform: scaleX(-1)  rotate(-6deg);
	transform: scaleX(-1) rotate(-6deg);
	width: 240px;
	align-self: flex-start;
	margin-left: -10px;
}
.tree-right {
	-webkit-transform: scaleX(-1) rotate(-8deg);
	transform: scaleX(-1) rotate(-8deg);
	width: 250px;
	align-self: flex-end;
	margin-right: -90px;
	margin-top: -200px;
	margin-bottom: -20px;
}
.section-holz h4.color-darkgray,
.section-holz h4.color-darkgreen {
	align-self: flex-start;
	margin-left: 30px;
	margin-top: 20px;
	margin-bottom: 15px;
}
/* .section-holz h4.color-darkgreen {
	align-self: flex-start;
	margin-left: 75px;
} */
.section-holz button {
	z-index: 2;
	transform: translate(145px,-12px);
}
.section-teppich {
	background: rgb(222,223,237);
	background-image: url("./assets/img/bg-blue-1.png");
	background-image: url("./assets/img/bg-blue-1.png"),linear-gradient(180deg, rgba(222,223,237,1) 0%, rgba(212,219,215,1) 100%);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.section-teppich h3 {
	align-self: flex-start;
	margin: 150px 0 8px 22px;
	color: #fff;
}
.section-teppich h4 {
	align-self: flex-start;
	margin-left: 40px;
	text-align: right;
	width: 160px;
}
.section-teppich h4 .bigger {
	padding-right: 15%;
}
.section-teppich button {
	transform: translate(40px,-100px);
	z-index: 2
}
.fischernetz {
	align-self: flex-start;
	transform: translate(-136px) rotate(-56deg);
	width: 250px;
	margin-bottom: -90px;
	animation: wave 4s ease-in-out infinite;
}
@keyframes wave {
	  0% {
	    transform: translate(-136px) rotate(-56deg) scale(0.95);
	  }
	  50% {
	    transform: translate(-136px) rotate(-56deg) scale(1);
	    opacity: 1;
	  }
	  100% {
	    transform: translate(-136px) rotate(-56deg) scale(0.95);
	  }
	}
.teppich {
	transform: translate(80px,-100px);
	margin-bottom: -120px;
	width: 200px;
}
.bg-wrapper-2 {
	background: rgb(213,219,216);
	background: linear-gradient(180deg, rgba(213,219,216,1) 40%, rgba(189,211,150,1) 100%);
}
.section-ressourcen h3 {
	align-self: flex-end;
	margin: 100px 75px 12px 0px;
}
.section-ressourcen h4 {
	align-self: flex-start;
	margin-left: 40px;
	text-align: left;
}
.section-ressourcen h4:last-of-type {
	margin-left: 110px;
	text-align: center;
}
.chair {
	align-self: flex-start;
	width: 280px;
	margin-top: -30px;
	margin-left: -40px;
}
/*
#Gruppe_543,
#Gruppe_543 .st10 {
	opacity: 0;
}
*/

.tablet {
	width: 120px;
	margin: -160px 0 0 190px;
}
.section-ressourcen button {
	transform: translate(120px,-200px);
}
.section-digital {
	padding-top: 50px;
}
.section-digital h3 {
	margin-right: 50px;
}
.section-digital h4 {
	margin-left: 40px;
	margin-bottom: 50px;
}
.mail {
	position: relative;
	z-index: 1;
	align-self: right;
	margin-top: -50px;
}
.hand-phone {
	position: relative;
	z-index: 0;
	align-self: flex-end;
	transform: scaleX(-1) rotate(40deg);
	width: 136px;
	margin-top:-200px;
	margin-right:  -40px;
	margin-bottom: -100px;
}
.section-digital button {
	z-index: 3;
	transform: translate(130px,-130px);
}
.kaffeemaschine {
	align-self: flex-start;
	margin-left: 50px;
	width: 140px;
	transform: rotate(10deg);
}
.kaffeemaschine svg {
	width: 100%;
	height: auto;
	overflow: unset;
}
.catering-info {
	transform: translate(120px,-135px);
	width: 50%;
}
.catering-info h3 {
	margin-bottom: 20px;
}
.catering-info h4:last-of-type {
	margin-left: -50px;
}
.section-catering button {
	align-self: flex-start;
	transform: translate(10px,-300px);
}
.sandwich {
	align-self: flex-start;
	transform: translate(20px,-210px) rotate(5deg);
	width: 190px;
	margin-bottom: -100px;
}
.section-strom {
	background: #bdd396;
	background-image: url("./assets/img/bg-blue-1.png");
	background-image: url("./assets/img/bg-blue-1.png"), linear-gradient(180deg, rgba(222,223,237,1) 0%, rgba(183,209,129,1)) 30%);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 65px;
}
.lightbulb {
	width: 180px;
	align-self: flex-start;
	transform: translate(-10px,150px);
}
.lightbulb svg {
	width: 180px;
	height: auto;
}
#shining {
	transform-origin: 50% 0%;
	animation: pulsing 3s infinite;
}
.strom-info {
	transform: translate(90px,-120px);
	width: 50%;
	text-align: right;
	margin-right: 30px;
}
.section-strom button {
	transform: translate(10px,-110px);
	margin: 20px 20px -60px 20px !important;
}
.bg-wrapper-3 {
	background: #BDD497;
	background: linear-gradient(180deg, #BDD497 0%, rgba(170,202,92,1) 100%);
}
.section-energie {
	margin-top: -1px; /* iphone bug */
}
.energie-info {
	transform: translate(0px,80px);
	width: 80%;
	text-align: center;
	align-self: flex-start;
	margin-bottom: 100px;
}
.energie-info h3 {
	margin-left: -30px;
}
.energie-info h4 {
	text-align: right;
	margin-left: 30px;
}
.alu1 {
	align-self: flex-start;
	margin-top: -30px;
	margin-left: -50px;
	width: 250px;
}
.alu2 {
	align-self: flex-start;
	margin-top: -50px;
	margin-left:10px;
	width: 250px;
	transform: rotate(40deg);
}
.section-energie button {
	transform: translate(20px,-30px);
}
.section-sozial {
	overflow:hidden;
}
.sozial-info {
	transform: translate(0px,80px);
}
.sozial-info h3 {
	margin-left: 50px;
}
.sozial-info h4 {
	margin-left:100px;
}
.sozial-info h4:last-of-type {
	margin-left:130px;
}
.planet {
	align-self: flex-start;
	width: 240px;
	margin-left: -60px;
	transform: translateY(-80px);
	margin-bottom: -100px;
}
.section-sozial button {
	transform: translate(40px,-130px);
}
.hand1,
.hand2,
.hand3 {
	position: absolute;
	z-index: 2;
	left: 50px;
	bottom: 0;
	width: 70px;
}
.hand2 {
	left: 120px;
	width: 85px;
}
.hand3 {
	left: 180px;
	width: 60px;
}
.section-footer {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottoM: 0;
	height: 100px;
	background: transparent url("./assets/img/sozial-footer.png") no-repeat center 20px;
	background-size: cover;
}
.section-nachhaltig {
	background-color: #B1D061;
	padding-top: 50px;
	background: #B1D061 url("./assets/img/nachhaltig-footer.png") no-repeat center bottom;
	background-size: 100% auto;
}
.section-nachhaltig h3 {
	align-self: flex-start;
	margin-left: 40px
}
.section-nachhaltig button {
	transform: translate(-40px,0)
}
.voting {
	width: 280px;
	align-self: flex-end;
	margin-right: -50px;
	margin-top: -50px;
	margin-bottom: -14px;
	z-index: 1;
	position: relative;
	animation: vote 10s 6s infinite;
}
.voting-box {
	margin-bottom: -10px;
	animation: horizontal-shaking 8s 3s infinite;
}
.section-footnotes {
	text-align: center;
	padding: 20px 40px;
	background-color: #fff;
}
.section-footnotes p {
	font-size: 13px;
	line-height: 1.3;
	margin-bottom: 0;
	padding-bottom: 0;
}
.footer {
	display: flex;
	flex-flow: row wrap;
	gap: 40px;
	padding: 10px 15px;
	align-items: center;
	background-color: var(--color-headline);
}
.footer .logo img {
	height: 30px;
	vertical-align: bottom;
}
.footer ul {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}
.footer ul li {
	display: inline-block;
	list-style-type: none;
	font-size: 14px;
}
.footer ul li:first-of-type:after {
	content: "|";
	display: inline-block;
	padding: 0 7px;
	color: #fff;
}
.footer li a {
	color: #fff;
	text-transform: uppercase;
}

.turn-phone {
	display: none;
}

/* Turn phone */
@media all and (orientation:landscape) and (max-width: 1024px) {
	body {
		background: rgb(31,64,162);
		background: linear-gradient(356deg, rgba(31,64,162,1) 33%, rgba(20,30,61,1) 100%);
	}
	.turn-phone {
		display: block;
		content: "";
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 999;
		cursor: nw-resize;
		background: rgb(31,64,162);
		background: linear-gradient(356deg, rgba(31,64,162,1) 33%, rgba(20,30,61,1) 100%);
	}
	.turn-phone:before {
		display: block;
		content: "";
		width: 100%;
		height: 100%;
		background: transparent url("./assets/img/rotate-phone.svg") no-repeat center center;
		background-size: 120px 120px;
	}
}

/* Animation */
@keyframes rotate {
	0% { transform: rotate(360deg); }
	100% { transform: rotate(0deg); }
}
@keyframes rotate-wheel {
	0% { transform: translateX(-16px) rotate(360deg); }
	100% { transform: translateX(-16px) rotate(0deg); }
}
@keyframes pulsing {
	  0% { transform: scale(.9); opacity: .6; }
	 50% { transform: scale( .95); opacity: 1; }
	100% { transform: scale(.9); opacity: .6; }
}
@keyframes pulsing2 {
	  0% { transform: scale(.9); }
	 50% { transform: scale( .95); }
	100% { transform: scale(.9); }
}
@keyframes swing {
	0% { transform: rotate(3deg); }
	100% { transform: rotate(-3deg); }
}
@keyframes swing2 {
	0% { transform: rotate(-28deg); }
	100% { transform: rotate(-33deg); }
}
@keyframes swing3 {
	0% { transform: rotate(28deg); }
	100% { transform: rotate(33deg); }
}
@keyframes swing4 {
	0% { transform: rotate(-3deg); }
	100% { transform: rotate(3deg); }
}
@keyframes swing5 {
	0% { transform: rotate(-36deg); }
	100% { transform: rotate(-33deg); }
}
@keyframes swing6 {
	0% { transform: rotate(10deg); }
	100% { transform: rotate(12deg); }
}
@keyframes swing7 {
	0% { transform: rotate(20deg); }
	100% { transform: rotate(24deg); }
}
@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0) rotate(45deg);}
	40% {transform: translateY(-20px) rotate(45deg);}
	60% {transform: translateY(-8px) rotate(45deg);}
}
@keyframes vote {
	  0% { transform: translateY(0px) }
	  2% { transform: translateY(4px) }
	  4% { transform: translateY(0px) }
	  6% { transform: translateY(6px) }
	  8% { transform: translateY(0px) }
	100% { transform: translateY(0px) }
}
/*
@keyframes vote {
	  0% { transform: rotate(0deg) }
	  2% { transform: rotate(3deg) }
	  4% { transform: rotate(0deg) }
	100% { transform: rotate(0deg) }
}
*/
@keyframes horizontal-shaking {
	0% { transform: translateX(0px) }
	2% { transform: translateX(5px) }
	4% { transform: translateX(-5px) }
	6% { transform: translateX(5px) }
	8% { transform: translateX(0px) }
	100% { transform: translateX(0px) }
}
@keyframes move-bg {
	from {
		opacity: 0;
		background-position-x:40%;
	}
	to {
		opacity: 1;
		background-position-x: 110%;
	}
}
@keyframes jump {
  0% {
    transform: scale(1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  }
  100% {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
}

/* Elements */
.element {
	display: block;
	content: "";
	width: 100px;
	height: 100px;
	position: absolute;
}
.leaf1 {
	width: 200px;
	height: 200px;
	background: transparent url("./assets/img/leafs1.svg") no-repeat;
	background-size: contain;
}
.leaf2 {
	width: 170px;
	height: 140px;
	background: transparent url("./assets/img/leafs2.svg") no-repeat;
	background-size: contain;
}
.leaf3 {
	width: 160px;
	height: 120px;
	background: transparent url("./assets/img/leafs3.svg") no-repeat;
	background-size: contain;
}
.leaf4 {
	width: 136px;
	height: 150px;
	background: transparent url("./assets/img/leafs4.svg") no-repeat;
	background-size: contain;
}
.leaf5 {
	width: 160px;
	height: 175px;
	background: transparent url("./assets/img/leafs5.svg") no-repeat;
	background-size: contain;
}
.cloud {
	width: 170px;
	height: 100px;
	background: transparent url("./assets/img/cloud.svg") no-repeat;
	background-size: contain;
}
.bottle1 {
	width: 70px;
	height: 150px;
	background: transparent url("./assets/img/bottle1.svg") no-repeat;
	background-size: contain;
}
.bottle2 {
	width: 70px;
	height: 105px;
	background: transparent url("./assets/img/bottle2.svg") no-repeat;
	background-size: contain;
}
.bottle3 {
	width: 50px;
	height: 75px;
	background: transparent url("./assets/img/bottle3.svg") no-repeat;
	background-size: contain;
}
.bottle4 {
	width: 100px;
	height: 125px;
	background: transparent url("./assets/img/bottle4.svg") no-repeat;
	background-size: contain;
}

.elm-01 {
	top: -34px;
	right: -42px;
	animation: swing ease-in-out 1s infinite alternate;
	transform-origin:50%;
}
.elm-02 {
	top: -28px;
	left: -75px;
}
.elm-03 {
	top: 300px;
	left: -10px;
	transform:rotate(30deg);
	animation: swing3 ease-in-out 1s infinite alternate;
	transform-origin: 0 0;
}
.elm-04 {
	height: 36px;
	top: 470px;
	left: -30px;
}
.elm-05 {
	height: 56px;
	top: 400px;
	right: -84px;
	z-index: -1;
}
.elm-06 {
	top: 5%;
	right: -60px;
	transform:rotate(-46deg);
}
.elm-07 {
	top: 74%;
	right: -40px;
	transform: rotate(-30deg);
	animation: swing2 ease-in-out 1s infinite alternate;
	transform-origin:50%;
}
.elm-08 {
	width: 130px;
	top: 90%;
	left: -39px;
	transform: rotate(30deg);
}
.elm-09 {
	width: 160px;
	height: 140px;
	top: 5px;
	left: -10px;
	transform: rotate(10deg);
	animation: swing3 ease-in-out 1s infinite alternate;
	transform-origin:0 50%;
}
.elm-10 {
	top: 5%;
	right: 60px;
}
.elm-11 {
	top: 40%;
	right: 80px;
	transform: rotate(12deg);
}
.elm-12 {
	top: 54%;
	left: 80px;
	transform: rotate(-20deg);
}
.elm-13 {
	top: 70%;
	right: 80px;
	transform: rotate(30deg);
}
.elm-14 {
	top: -20px;
	right: -69px;
	transform:  rotate(-35deg);
}
.elm-15 {
	top: 85%;
	left: -14px;
	animation: swing4 ease-in-out 2.5s infinite alternate;
	transform-origin: 0% 100%;
}
.elm-16 {
	top: 80%;
	right: -54px;
	transform: rotate(-36deg);
	animation: swing5 ease-in-out 1s infinite alternate;
	transform-origin:50%;
}
.elm-17 {
	top: 50%;
	right: -54px;
	transform: rotate(3deg);
	animation: swing ease-in-out 1s infinite alternate;
	transform-origin:50%;
	z-index: 2;
}
.elm-18 {
	top: 85%;
	left: 30px;
}
.elm-19 {
	top: -34px;
	right: -66px;
	transform: rotate(-36deg);
	animation: swing5 ease-in-out 1s infinite alternate;
}
.elm-20 {
	top: 18%;
	left: 46%;
	width: 115px;
}
.elm-21 {
	top: 69%;
	right: -72px;
	transform: rotate(20deg);
	animation: swing7 ease-in-out 1s infinite alternate;
	transform-origin: 40% 60%;
}
.elm-22 {
	top: -8%;
	left: -26px;
	transform: rotate(20deg);
	animation: swing7 ease-in-out 1s infinite alternate;
	transform-origin: 40% 60%;
}
.elm-23 {
	top: 3%;
	right: -62px;
	transform: rotate(-30deg);
	width: 170px;
	height: 136px;
}
.elm-24 {
	top: 81%;
	right: -55px;
	transform: rotate(-50deg);
	height: 150px;
	transform: rotate(-36deg);
	animation: swing5 ease-in-out .75s infinite alternate;
}
.elm-25 {
	top: 56%;
	left: 60%;
	transform: scale(-1,1) rotate(-40deg);
	z-index: 0;
	width: 80px;
}
#bean1 {
  -webkit-animation: 0.4s jump ease infinite alternate;
          animation: 0.4s jump ease infinite alternate;
}
#bean2 {
  -webkit-animation: 0.4s jump ease .2s infinite alternate;
          animation: 0.4s jump ease .2s infinite alternate;
}
#bean3 {
  -webkit-animation: 0.45s jump ease infinite alternate-reverse;
          animation: 0.45s jump ease infinite alternate-reverse;
}