@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);

.post-it {
  rotate: -10deg;
  left:300px;
  top:50px;
 	width:250px;
  height:240px;
  position:absolute;
  background:#ffa;
  overflow:hidden;
  margin:30px auto;
  padding:20px;
  border-radius:0 0 0 30px/45px;
  box-shadow:
    inset 0 -40px 40px rgba(0,0,0,0.2),
    inset 0 25px 10px rgba(0,0,0,0.2),
    0 5px 6px 5px rgba(0,0,0,0.2);
  font-family: 'Permanent Marker', cursive;
  line-height:1.7em;
  font-size:19px;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
  color:#130d6b;
	z-index: 100;
}

.post-it:before {
 	content:"";
  display:block;
  position:absolute;
  width:20px;
  height:25px;
  background:#ffa;
  box-shadow:
    3px -2px 10px rgba(0,0,0,0.2),
    inset 15px -15px 15px rgba(0,0,0,0.3);
  left:0;
  bottom:0;
  z-index:2;
  transform:skewX(25deg);
}

.post-it:after {
 	content:"";
  display:block;
  position:absolute;
  width:75%;
  height:20px; 
  border-top:3px solid #130d6b;
  border-radius: 50% ;
  bottom:0px;
  left:10%;
}

.post-it h2 {
	position:relative;
	margin: 0;
	font-size:25px;
	font-family: 'Permanent Marker', cursive;
	color:#130d6b;
}
.post-it p {
	position:relative;
	margin: 0;
	padding-left:1em;
	font-family: 'Permanent Marker', cursive;
	color:#130d6b;
}
.post-it-date {
  font-size:16px;
	margin: 0;
	font-family: 'Permanent Marker', cursive;
	color:#130d6b;
}

.post-it img {
  width:100%;
	margin: 0;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.post-it {
	  left:150px;
	  top:50px;
	}
}
@media (max-width: 991.98px) {
	.post-it {
	  left:50px;
	  top:100px;
	}
}

@media (max-width: 991.98px) {
  #header, #header-wrap {
    background-color: #fff;
	  	z-index: 200;
  }
}