.container
{
	position: relative;
	width: 90%;
	height: 100%;
	padding-left: 10%;
	padding-bottom: 20px;
}

.container:hover .overlay {
  opacity: 1;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 22px;
  left: 10%;
  width: 81%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
  cursor: pointer;
  display: flex;
  justify-content: center;
}

.text {
  text-align: center;
  color: black;
	top: 50%;
	transform: translateY(-50%);
  font-size: 20px;
  position: absolute;
  text-align: center;
}


.noteL
{
	background-image: linear-gradient(to bottom right, white 80%, #cccccc);
	margin-left: 0%;
	width: 45%;
	float: left;
}

.noteR
{
	background-image: linear-gradient(to bottom right, white 80%, #cccccc);
	margin-right: 0%;
	width: 45%;
	float: right;
}

.postitsmall
{
	position: absolute;
	background-image: linear-gradient(to bottom, #fcd703 95%, #bfa304);
	margin-left: 10%;
	width: 90px;
	height: 90px;
	z-index: 15;
	cursor: pointer;
}

.postitshadowsmall
{
	position: absolute;
	background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
	margin-left: 10%;
	width: 90px;
	height: 90px;
	z-index: 5;
}

.postit
{
	position: absolute;
	background-image: linear-gradient(to bottom, #fcd703 95%, #bfa304);
	margin-left: 10%;
	width: 150px;
	height: 150px;
	z-index: 15;
}

.postitshadow
{
	position: absolute;
	background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
	margin-left: 10%;
	width: 150px;
	height: 150px;
	z-index: 25;
}


#postit1
{
	margin-left: 0%;
	left:5%;
	top:150px;
	z-index:100;
	cursor: pointer;
	user-select: none;
}

#postit1shad
{
	margin-left: 0%;
	left:5.5%;
	top:156px;
	z-index:99;
}

#postittemp
{
	margin-left: 0%;
	left:40%;
	top:350px;
	z-index:100;
	user-select: none;
}

#postitshadtemp
{
	margin-left: 0%;
	left:5.5%;
	top:156px;
	z-index:99;
}

.imgL 
{
	float: left;
	background-image: linear-gradient(to bottom right, white 80%, #cccccc);
	width: 40%;
	margin-left: 5%;
	margin-top: 2.5%;
}

.imgR
{
	float: right;
	background-image: linear-gradient(to bottom right, white 80%, #cccccc);
	width: 40%;
	margin-right: 5%;
	margin-top: 2.5%;
}

.ratio {
	width: 50%;
	aspect-ratio: 16 / 9;
	background: linear-gradient(to bottom right, white 80%, #cccccc);
}


@media screen and (max-width: 1200px) {
	.text
	{
		font-size: 18px;
	}
}

@media screen and (max-width: 800px) {
	.ratio {
		width: 100%;
		aspect-ratio: 16 / 9;
		background: linear-gradient(to bottom right, white 80%, #cccccc);
	}
	
	.noteL
	{
		background-image: linear-gradient(to bottom right, white 80%, #cccccc);
		margin-left: 5%;
		width: 90%;
		float: left;
		margin-top: 30px;
	}

	.noteR
	{
		background-image: linear-gradient(to bottom right, white 80%, #cccccc);
		margin-right: 5%;
		width: 90%;
		float: right;
		margin-top: 30px;
	}
	
	.imgL
	{
		background-image: linear-gradient(to bottom right, white 80%, #cccccc);
		margin-left: 5%;
		width: 90%;
		float: left;
		margin-top: 30px;
	}

	.imgR
	{
		background-image: linear-gradient(to bottom right, white 80%, #cccccc);
		margin-right: 5%;
		width: 90%;
		float: right;
		margin-top: 30px;
	}
	
	h4
	{
		font-size: 20px;
	}
	
}