body {
	font-family: Arial,Helvetica,sans-serif;

	margin-top: 30px;
	color: #000;
	background: url("../hintergrund.jpg") ;
	background-attachment: fixed;
	
}


#wrapper{

   /* border: 1px solid #aaa;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0 0 10px #ddd;*/
    margin: auto;
	max-width: 80%;

}

a{
	color:#000;
	margin-top:10px;
}

p{
	margin:10px 0;
}

#wrapper h1{
	font-size: 50px;
	color: ff0000;
	margin-bottom: 20px;
	font-weight:bold;
}



#wrapper  .postits {
    display: flex;
	max-width: 80%;
	flex-flow: wrap;
}

#wrapper .text{
	margin: 30px 0;
	max-width: 50%;
	line-height: 1.5;
}

#wrapper .postit {
	font-family: Reenie Beanie;
	margin: 50px;
	width: 260px;
	padding: 35px 20px;
	border: 1px solid #cccccc;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
	border-bottom-left-radius: 100px 35px;
	text-align: left;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	transition: transform 0.8s;
	box-sizing: border-box;
}

#wrapper .postit.la {
	background: #7ec5ff linear-gradient(150deg, #3d86f4 0%, #7ec5ff 100%);
	transform:rotate(7deg);
	/*animation: postits 1s normal;*/

}

#wrapper .postit.sk {
	background: #7effe7 linear-gradient(150deg, #01ad8b 0%, #7effe7 100%);
	transform:rotate(-17deg);
}

#wrapper .postit.nj {
	background: #ff897c linear-gradient(150deg, #c64539 0%, #ff897c 100%);
	transform:rotate(9deg);
}

#wrapper .postit.ks {
	background: #ffff7e linear-gradient(150deg, #ddc913 0%, #ffff7e 100%);
	transform:rotate(-19deg);
	color:#000;
}

#wrapper .postit.nl {
	background: #ffdfca linear-gradient(150deg, #ed8544 0%, #ffdfca 100%);
	transform:rotate(9deg);
	color:#000;
}

#wrapper .postit  img {
    width: 100%;
	margin-bottom: 15px;
	margin-top: 10px;
}

#wrapper .postit::before {
  content: "";
  background-color: rgba(255,255,255,0.5);
  position: absolute;
  width: 100%;
  left: 0px;
  top: 0;
  height: 30px;
  z-index: -1;
}


#wrapper .postit::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0px;
	width: 100%;
	height: 140px;
	background-image: linear-gradient(205deg, rgba(0, 0, 0, 0) 80%, rgba(0,0,0,0.4) 100%);
	transform: rotate(-8deg);
	z-index: -1;
	filter: blur(3px);
}

#wrapper .postit:hover{
	transform:scale(2);
	/*animation: postits 1s 0;*/
	z-index: 10;
}

#footer {
	text-align: center;

}


#footer h2 {
	text-shadow:  1px  1px 1px #F1F0EE,
                  1px -1px 1px #F1F0EE,
                 -1px  1px 1px #F1F0EE,
                 -1px -1px 1px #F1F0EE;
}

#recht{
	text-shadow:  1px  1px 1px #F1F0EE,
                  1px -1px 1px #F1F0EE,
                 -1px  1px 1px #F1F0EE,
                 -1px -1px 1px #F1F0EE;
	max-width: 70%;
}

/*nicht benutzt*/
@keyframes postits {

	10%, 90% {
		transform: translate3d(-1px, 0, 0);
		/*transform: rotate(7deg);*/
	  }
	  
	  20%, 80% {
		transform: translate3d(2px, 0, 0);
		/*transform: rotate(17deg);*/
	  }

	  30%, 50%, 70% {
		transform: translate3d(-4px, 0, 0);
		/*transform: rotate(7deg);*/
	  }

	  40%, 60% {
		transform: translate3d(4px, 0, 0);
		/*transform: rotate(17deg);*/
	  }
}

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

@media all and (max-width: 1200px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1200px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1200px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1200px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1200px), only screen and (min-resolution: 192dpi) and (max-width: 1200px), only screen and (min-resolution: 2dppx) and (max-width: 1200px) {
	#wrapper  .postits {
		display: flex;
		max-width: 100%;
		flex-flow: wrap;
	}
	
	#wrapper .text{
		margin: 30px 0;
		max-width: 80%;
		line-height: 1.5;
	}
	

	#wrapper  {
		max-width: 100%;
	}
	
}

@media all and (max-width: 630px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 630px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 630px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 630px), only screen and (min-device-pixel-ratio: 2) and (max-width: 630px), only screen and (min-resolution: 192dpi) and (max-width: 630px), only screen and (min-resolution: 2dppx) and (max-width: 630px) {
	#wrapper  .postits {
		display: flex;
		max-width: 100%;
		flex-flow: wrap;
	}
	
	#wrapper .text{
		margin: 30px 0;
		max-width: 100%;
		line-height: 1.5;
	}
	
		
	#wrapper .postit {
		width: 100%;
	}

	#wrapper  {
		max-width: 100%;
	}
	
	#wrapper .postit.la ,#wrapper .postit.sk,#wrapper .postit.nj,#wrapper .postit.ks,#wrapper .postit.nl{
		transform:rotate(0deg);
	}
	
	#recht{
		text-shadow:  1px  1px 1px #F1F0EE,
					  1px -1px 1px #F1F0EE,
					 -1px  1px 1px #F1F0EE,
					 -1px -1px 1px #F1F0EE;
		max-width: 100%;
	}

}

@media all and (max-width: 470px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 470px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 470px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 470px), only screen and (min-device-pixel-ratio: 2) and (max-width: 470px), only screen and (min-resolution: 192dpi) and (max-width: 470px), only screen and (min-resolution: 2dppx) and (max-width: 470px) {
	#wrapper  .postits {
		display: flex;
		max-width: 100%;
		flex-flow: wrap;
	}
	
	#wrapper .text{
		margin: 30px 0;
		max-width: 100%;
		line-height: 1.5;
	}
	
		
	#wrapper .postit {
		width: 100%;
	}

	#wrapper  {
		max-width: 100%;
	}
	
		#recht{
		text-shadow:  1px  1px 1px #F1F0EE,
					  1px -1px 1px #F1F0EE,
					 -1px  1px 1px #F1F0EE,
					 -1px -1px 1px #F1F0EE;
		max-width: 100%;
	}

}