body {
  font-family: sans-serif;
  background-color: #61C680;
  color: white;
  margin: 0;
  padding: 0;
}

.hamburgerbutton{display: none;}
.hamburgermenuholder{display: none;}

.wrapper {
	position: absolute;
	width: 900px;
	height: 100%;
	left: 50%;
	top: 0px;
	margin-left: -450px;	
}

.background_leafs_top{
	position: absolute;
	width: 890px;
	height: 218px;
	left: 5px;
	top: 70px;
	background-image: url(../images/backgroundleafs_top.svg);
}
.background_leafs_bottom{
	position: absolute;
	width: 870px;
	height: 200px;
	left: 15px;
	bottom: 0px;
	background-image: url(../images/backgroundleafs_bottom.svg);
}

.frameholder {
	position: absolute;
	width: 773px;
	height: 100%;
	left: 90px;
	top: 0px;
}

.contentholder{
	position: absolute;
	width: 703px;
	left: 0px;
	top: 90px;
	height: calc(100% - 90px);
}

.contenttop_big{
	position: absolute;
	width: 703px;
	height: 28px;
	left: 0px;
	top: 0px;	
}
.contenttop_small{visibility: hidden;}

.contentmiddle{
	position: absolute;
	width: 703px;
	height: calc(100% - 121px);
	left: 0px;
	top: 27px;	
	background-image: url(../images/contentfiller.svg);
}
.contentbottom{
	position: absolute;
	width: 703px;
	height: 63px);
	left: 0px;
	bottom: 30px;	
}
.wobbelslogo{
	position: absolute;
	width: 542px;
	height: 230px;);
	top: 0px;
	left: 80px;
}

.menutabs{
	position: absolute;
	width: 75px;
	height: calc(100% - 250px);
	top: 140px;
	right: 0px;	
	overflow: hidden;
}

.wobbelpair1{
	position: absolute;
	left: 0px;
	bottom: 60px;	
	width: 197px;;
	height: 198px;
	background-image: url(../images/wobbelpair_1.svg);	
}	
.wobbelpair2{
	position: absolute;
	right: -20px;
	bottom: 60px;	
	width: 209px;;
	height: 218px;
	background-image: url(../images/wobbelpair_2.svg);	
}	

/* ACTIVE TAB */
.tabholder_active{
	position: relative;
	display: block;
	width: 75px;
	height: 99px;
}
.tabimg{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 75px;
	height: 99px;
}
.tabimg .tabshadow {
  fill: #b9b9b9;
}
.tabimg .tabface {
  fill: white;
}

/* INACTIVE TAB */
.tabholder{
	position: relative;
	display: block;
	width: 75px;
	height: 84px;
	margin-left: -8px;
	transition: transform 0.3s ease;
	cursor: pointer;
}
.tabholder:hover{
	transform: translateX(5px);
}

.tabhidden{
	margin-left: -60px;
}


.tabimg1, .tabimg2, .tabimg3, .tabimg4{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 73px;
	height: 84px;
}

/* TAB 1*/
.tabimg1 .tabface {
  fill: #F7D959;
  transition: fill 0.3s;
}
.tabimg1 .tabshadow {
  fill: #BB9909;
  transition: fill 0.3s;
}
.tabholder:hover .tabimg1 .tabface {
  fill: #F9E487;
}
.tabholder:hover .tabimg1 .tabshadow {
  fill: #BB9909;
}

/* TAB 2*/
.tabimg2 .tabface {
  fill: #56B7E6;
  transition: fill 0.3s;
}
.tabimg2 .tabshadow {
  fill: #104F6E;
  transition: fill 0.3s;
}
.tabholder:hover .tabimg2 .tabface {
  fill: #80C9EC;
}
.tabholder:hover .tabimg2 .tabshadow {
  fill: #104F6E;
}

/* TAB 3*/
.tabimg3 .tabface {
  fill: #E8AFCF;
  transition: fill 0.3s;
}
.tabimg3 .tabshadow {
  fill: #982C69;
  transition: fill 0.3s;
}
.tabholder:hover .tabimg3 .tabface {
  fill: #F0CADF;
}
.tabholder:hover .tabimg3 .tabshadow {
  fill: #982C69;
}

/* TAB 4*/
.tabimg4 .tabface {
  fill: #C2E189;
  transition: fill 0.3s;
}
.tabimg4 .tabshadow {
  fill: #4D691B;
  transition: fill 0.3s;
}
.tabholder:hover .tabimg4 .tabface {
  fill: #D6EBB0;
}
.tabholder:hover .tabimg4 .tabshadow {
  fill: #4D691B;
}

/* TAB ICONS - ACTIVE TAB*/
.tabholder_active .tabicon_home{
	position: absolute;
	top: 23px;
	left: 11px;
	width: 53px;
	height: 49px;
	fill: #7D6556;
}
.tabholder_active .tabicon_wobbels{
	position: absolute;
	top: 23px;
	left: 7px;
	width: 61px;
	height: 48px;
	fill: #7D6556;
}
.tabholder_active .tabicon_shoppingcart{
	position: absolute;
	top: 23px;
	left: 10px;
	width: 55px;
	height: 49px;
	fill: #7D6556;
}
.tabholder_active .tabicon_myaccount{
	position: absolute;
	top: 25px;
	left: 20px;
	width: 45px;
	height: 48px;
	fill: #7D6556;
}
.tabholder_active .tabicon_contact{
	position: absolute;
	top: 23px;
	left: 9px;
	width: 58px;
	height: 49px;
	fill: #7D6556;
}


/* INACTIVE ICONS*/
.tabholder .tabicon_home{
	position: absolute;
	top: 25px;
	left: 19px;
	width: 43px;
	height: 34px;
}

.tabholder .tabicon_wobbels{
	position: absolute;
	top: 25px;
	left: 19px;
	width: 43px;
	height: 34px;
}

.tabholder .tabicon_shoppingcart{
	position: absolute;
	top: 25px;
	left: 20px;
	width: 38px;
	height: 34px;
}
.tabholder .tabicon_myaccount{
	position: absolute;
	top: 25px;
	left: 20px;
	width: 38px;
	height: 34px;
}
.tabholder .tabicon_contact{
	position: absolute;
	top: 25px;
	left: 20px;
	width: 40px;
	height: 34px;
}

.wicon_yellow{ fill: #BB9909; }
.wicon_blue{ fill: #104F6E; }
.wicon_pink{ fill: #982C69; }
.wicon_green{ fill: #6A8F24; }

.pagecontent{
	position: absolute;
	top: 110px;
	left: 20px;
	width: calc(100% - 45px);
	height: calc(100% - 260px);
	overflow-x: hidden;
	overflow-y: auto;	
	color: #665346;
	font-family: 'Nunito', sans-serif;
	font-size: 1.05rem;
	line-height: 1.6;	
}
.pagecontent h1, 
.pagecontent h2, 
.pagecontent h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  margin-bottom: -1rem;
  margin-top: -0.4rem;
}

.wobbelcard{
  position: relative;
  width: 200px;
  height: 290px;
  margin: 5px;
  border-radius: 15px 15px 15px 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
}

.titlebar {
	position: absolute;
	width: 200px;
	height: 36px;
	top: 0px;
	left: 0px;
	fill: #665346;
	transition: all 0.3s ease;
}

.wphoto{
  position: absolute;
  width: 178px;
  height: 190px;
  top: 50px;
  left: 10px;
  border-radius: 7px 7px 7px 7px;
  overflow: hidden;	
  transition: all 0.3s ease;
}

.wobbelicontype{
  position: absolute;
  width: 32px;
  height: 32px;	
  bottom: 10px;
  left: 10px;
  fill: #665346;
}
.wobbelpricetag{
  position: absolute;
  width: 100px;
  height: 32px;	
  bottom: 6px;
  right: 15px;
  color: #ffffff;
  text-align: right;
  font-family: 'Nunito', sans-serif;
  transform: rotate(-13deg);
}

/* YELLOW - Flowers */
.wobbelcard.yellow {
  background-color: #FDF7D9;
}
.wobbelcard.yellow .titlebar {
  background-color: #F9E487;
  border-bottom: 1px solid #BB9909;
}
.wobbelcard.yellow .wphoto{
  border: 1px solid #BB9909;
}

.wobbelcard.yellow:hover {
  background-color: #FFF9E5;
}
.wobbelcard.yellow:hover .titlebar {
  background-color: #FFEB8C;
  border-bottom: 1px solid #A88A00;
  fill: #BB9909;
}
.wobbelcard.yellow:hover .wphoto {
  border: 1px solid #A88A00;
}


/* GREEN - Plants */
.wobbelcard.green {
  background-color: #E6F2CE;
}

.wobbelcard.green .titlebar {
  background-color: #C2E189;
  border-bottom: 1px solid #56974D;
}
.wobbelcard.green .wphoto{
  border: 1px solid #56974D;
}
.wobbelcard.green:hover {
  background-color: #F2FBE3;
}
.wobbelcard.green:hover .titlebar {
  background-color: #D3F1A6;
  border-bottom: 1px solid #447F3B;
  fill: #56974D;
}
.wobbelcard.green:hover .wphoto {
  border: 1px solid #447F3B;
}

/* WOBBELS ORDER SCREEN */
.wobbelinfoscreen{
  position: absolute;
  width: 100%;
  height: 290px;
  border-radius: 15px 15px 15px 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: inline-block;
  transition: all 0.3s ease;
}
.wobbelinfoscreen .titlebar {
	position: absolute;
	width: 100%;
	height: 36px;
	top: 0px;
	left: 0px;
	fill: #665346;
}
.wobbelinfoscreen .wobbelinfotekst{
	position: absolute;
	width: calc(100% - 218px);
	height: 100px;	
	top: 50px;
	left: 206px;
	color: #665346;
	font-family: 'Nunito', sans-serif;
	font-size: 1.05rem;
	line-height: 1.2;
}

.wobbelinfoscreen.green {
  background-color: #E6F2CE;
}
.wobbelinfoscreen .titlebar, .wobbeloptionswindow .titlebar {
  background-color: #C2E189;
  border-bottom: 1px solid #56974D;
}
.wobbelinfoscreen.green .wphoto{
  border: 1px solid #56974D;
}

.wobbeloptionswindow{
  position: absolute;
  width: 100%;
  height: 100px;
  border-radius: 15px 15px 15px 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: inline-block;
  transition: all 0.3s ease;
}
.wobbeloptionswindow .titlebar {
	position: absolute;
	width: 100%;
	height: 26px;
	top: 0px;
	left: 0px;
	fill: #665346;
}
.wobbeloptionswindow .wobbelinfotekst{
	position: absolute;
	width: calc(100% - 218px);
	height: 100px;	
	top: 50px;
	left: 206px;
	color: #665346;
	font-family: 'Nunito', sans-serif;
	font-size: 1.05rem;
	line-height: 1.2;
}
.wobbeloptionswindow.green {
  background-color: #E6F2CE;
}

@media (max-width: 1024px) {
	.hamburgerbutton{display: none;}
	.hamburgermenuholder{display: none;}
	
	.menutabs{
		position: absolute;
		width: 75px;
		height: calc(100% - 250px);
		top: 140px;
		right: 0px;	
		overflow: hidden;
	}
		
	.tabholder_active{
		position: relative;
		display: block;
		width: 60px;
		height: 77px;
	}
	.tabimg{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 58px;
		height: 77px;
	}

	.tabholder{
		position: relative;
		display: block;
		width: 60px;
		height: 69px;
		margin-left: -8px;
		transition: transform 0.3s ease;
	}
	.tabholder:hover{
		transform: translateX(5px);
	}

	.tabimg1, .tabimg2, .tabimg3, .tabimg4{
		position: absolute;
		left: 0px;
		top: 0px;
		width: 60px;
		height: 69px;
	}

	/* ACTIVE ICONS*/
	.tabholder_active .tabicon_wobbels{ position: absolute; top: 15px; left: 7px; width: 45px; fill: #7D6556; }
	.tabholder_active .tabicon_home{ position: absolute; top: 15px; left: 7px; width: 43px; height: 49px; fill: #7D6556; }
	
	/* INACTIVE ICONS*/
	.tabholder .tabicon_home{ position: absolute; top: 18px; left: 18px; width: 33px; 	}
	.tabholder .tabicon_wobbels{ position: absolute; top: 18px; left: 19px; width: 33px; }	
	.tabholder .tabicon_shoppingcart{ position: absolute; top: 18px; left: 20px; width: 28px; 	}
	.tabholder .tabicon_myaccount{ position: absolute; top: 18px; left: 20px; width: 28px; }
	.tabholder .tabicon_contact{ position: absolute; top: 18px; left: 20px; width: 30px; }	
	
	.wobbelpair1{
		position: absolute;
		left: -10px;
		bottom: 50px;	
		width: 149px;;
		height: 150px;
	}	
	.wobbelpair2{
		position: absolute;
		right: 10px;
		bottom: 60px;	
		width: 144px;;
		height: 150px;
	}

	.pagecontent{
		width: calc(100% - 45px);
		height: calc(100% - 240px);
	}	
}

@media (max-width: 768px) {
	html, body, wrapper {
	  overflow: hidden;
	  height: 100%;
	}
	
	.hamburgerbutton{
		display: block;
		position: absolute;
		width: 30px;
		height: 30px;
		right: 20px;
		top: 40px;		
	}
	
	.wrapper {
		position: absolute;
		width: 380px;
		height: 100%;
		left: 50%;
		top: 0px;
		margin-left: -190px;
		border: 1px solid red;
	}
	.frameholder {
		position: absolute;
		width: 360px;
		height: 100%;
		left: 10px;
		top: 0px;
	}
	
	.contentholder{
		position: absolute;
		width: 360px;
		height: calc(100% - 30px);
		left: 0px;
		top: 0px;	
	}
	.wobbelslogo{
		position: absolute;
		width: 300px;
		left: 0px;
		top: 0px;
		margin-top: -70px;
	}	
	
	.contenttop_big{visibility: hidden;}
	
	.contenttop_small{
		visibility: visible;
		position: absolute;
		width: 360px;
		height: 16px;
		left: 0px;
		top: 20px;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		background-color: #ffffff;		
	}
	
	.contentmiddle{
		position: absolute;
		width: 360px;
		height: calc(100% - 40px);
		left: 0px;
		top: 35px;	
		background-color: #ffffff;
		background-image: none;
	}
	.contentbottom{
		position: absolute;
		width: 360px;
		height: 32px);
		left: 0px;
		bottom: -30px;	
	}

	.menutabs{visibility: hidden;}	
	
	.wobbelpair1{
		position: absolute;
		left: -10px;
		bottom: -15px;	
		width: 99px;;
		height: 100px;
	}	
	.wobbelpair2{
		position: absolute;
		right: -10px;
		bottom: -15px;	
		width: 96px;;
		height: 100px;
	}
	.pagecontent{
		top: 90px;		
		width: calc(100% - 45px);
		height: calc(100% - 140px);
	}
	
	.hamburgermenuholder{
		display: none;
		position: absolute;
		width: 360px;
		height: 150px;
		left: 0px;
		top: 70px;

	}

	.hamburgermenuglass{
		position: absolute;
		width: 360px;
		height: 150px;
		left: 0px;
		top: 0px;
		background-color: white;
		opacity:.90;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);	
	}

	.hamburgermenuholder .hbutton1{
		position: absolute;
		width: 71px;
		height: 67px;
		left: 20px;
		top: 60px;	
	}
	.hamburgermenuholder .hbutton2{
		position: absolute;
		width: 74px;
		height: 66px;
		left: 98px;
		top: 60px;	
	}
	.hamburgermenuholder .hbutton3{
		position: absolute;
		width: 61px;
		height: 66px;
		left: 188px;
		top: 60px;	
	}
	.hamburgermenuholder .hbutton4{
		position: absolute;
		width: 77px;
		height: 66px;
		left: 262px;
		top: 60px;	
	}

	.wobbelinfoscreen .wobbelinfotekst{
		position: absolute;
		width: calc(100% - 218px);
		height: 190px;	
		top: 50px;
		left: 206px;
		color: #665346;
		font-family: 'Nunito', sans-serif;
		font-size: 1.05rem;
		line-height: 1.2;
		overflow-x: scroll;
	}	
}


#nav-icon3 {
  width: 30px;
  height: 45px;
  -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-icon3 span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #d3531a;
  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-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 18px;
}

#nav-icon3 span:nth-child(4) {
  top: 36px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}