.modal {
		display: none;
		/* Hidden by default */
		position: fixed;
		/* Stay in place */
		z-index: 2;
		/* Sit on top */
		padding-top: 50px;
		/* Location of the box */
		left: 0;
		top: 0;
		width: 100%;
		/* Full width */
		height: 100%;
		/* Full height */
		overflow: auto;
		/* Enable scroll if needed */
		background-color: rgb(0, 0, 0);
		/* Fallback color */
		background-color: rgba(0, 0, 0, 0.4);
		/* Black w/ opacity */
}
/* Modal Content */

.modal-content {
		position: relative;
		background-color: #fefefe;
		margin: auto;
		padding: 0;
		border: 1px solid #888;
		width: 80%;
		height: 80%;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		-webkit-animation-name: animatetop;
		-webkit-animation-duration: 0.4s;
		animation-name: animatetop;
		animation-duration: 0.4s
}
/* Add Animation */

@-webkit-keyframes animatetop {
		from {
				top: -300px;
				opacity: 0
		}
		to {
				top: 0;
				opacity: 1
		}
}

@keyframes animatetop {
		from {
				top: -300px;
				opacity: 0
		}
		to {
				top: 0;
				opacity: 1
		}
}
/* The Close Button */

.close {
		color: white;
		float: right;
		font-size: 28px;
		font-weight: bold;
}

.close:hover,
.close:focus {
		color: #000;
		text-decoration: none;
		cursor: pointer;
}

.modal-header {
		padding: 2px 16px;
		background-color: #5cb85c;
		color: white;
}

.modal-body {
		padding: 2px 16px;
}

.modal-footer {
		padding: 2px 16px;
		background-color: #5cb85c;
		color: white;
}

/* BOARD */

#board {
		padding: 100px 30px 30px;
		margin-top: 40px;
		overflow-y: visible;
		@extend .noflick;
}
/* NOTE */

.text p {
		font-family: Comic Sans, helvetica, arial, sans-serif;
}

.note {
		float: left;
		display: block;
		position: relative;
		padding: 1em;
		width: 250px;
		height: 250px;
		margin: 0 30px 30px 0;
		background: linear-gradient(top, rgba(0, 0, 0, .05), rgba(0, 0, 0, .25));
		background-color: #FFFD75;
		box-shadow: 5px 5px 10px -2px rgba(33, 33, 33, .3);
		transform: rotate(2deg);
		transform: skew(-1deg, 1deg);
		transition: transform .15s;
		z-index: 1;
}

.note:hover {
		cursor: move;
}

textarea {
		background-color: transparent;
		border: none;
		resize: vertical;
		width: 100%;
		height: 240px;
		padding: 5px;
		font-size: 18pt;
}

textarea:focus {
		outline: none;
		border: none;
		box-shadow: 0 0 5px 1px rgba(0, 0, 0, .2) inset;
}

.whiteboard {
		display: none;
		/* Hidden by default */
		position: fixed;
		/* Stay in place */
		z-index: 2;
		/* Sit on top */
		padding-top: 50px;
		/* Location of the box */
		left: 0;
		top: 0;
		width: 100%;
		/* Full width */
		height: 100%;
		/* Full height */
		overflow: auto;
		/* Enable scroll if needed */
		background-color: rgb(0, 0, 0);
		/* Fallback color */
		background-color: rgba(0, 0, 0, 0.4);
		/* Black w/ opacity */
}
/* Modal Content */

.board-content {
		position: relative;
		background-color: #fefefe;
		margin: auto;
		padding: 0;
		border: 1px solid #888;
		width: 80%;
		height: 80%;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		-webkit-animation-name: animatetop;
		-webkit-animation-duration: 0.4s;
		animation-name: animatetop;
		animation-duration: 0.4s
}
/* Add Animation */

@-webkit-keyframes animatetop {
		from {
				top: -300px;
				opacity: 0
		}
		to {
				top: 0;
				opacity: 1
		}
}

@keyframes animatetop {
		from {
				top: -300px;
				opacity: 0
		}
		to {
				top: 0;
				opacity: 1
		}
}
/* The Close Button */

.close {
		color: white;
		float: right;
		font-size: 28px;
		font-weight: bold;
}

.close:hover,
.close:focus {
		color: #000;
		text-decoration: none;
		cursor: pointer;
}

.button.remove {
  position: absolute;
  top: 0px;
  right: -50px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #E01C12;
  text-align: center;
  line-height: 12px;
  padding: 10px;
  border-color: #B30000;
  font-style: 1.6em;
  font-weight: bolder;
  font-family: Helvetica, Arial, sans-serif;
}
.button.remove:hover {
  background-color: #EF0005;
}

.board-body {
		padding: 2px 16px;
}