/* Links using the URL as text */
a.url:before { font-family: monospace; content: attr(href); }

.circle {
    background: #f00;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    margin:5px;
    overflow:hidden;
    padding:25px;
    position:relative;
}
.text{
  transform:translate(-50%,-50%);
  position:absolute;
  top:50%;
  left:50%;
}
.image-container {
  display: flex;
  justify-content: space-between;
}
.image-container img {
  width: 26%;
}
.noteBoxes
{
	border: 1px solid;
  border-radius: 5px;
	padding: 10px;
	margin: 10px 0;
	width: 300px;
}

.type1
{
	border-color: #E76F51;
	background-color: rgba(231, 111, 81, 0.1); 
}

.type2
{
	border-color: #2A9D8F;
	background-color: rgba(42, 157, 143, 0.1); 
}

.type3
{
	border-color: #0096C7;
	background-color: rgba(0, 150, 199, 0.1); 
}

.type4
{
	border-color: #00B353;
	background-color: rgba(0, 179, 83, 0.1); 
}

.picture
{
	width: 15px; 
	padding-right: 10px;
}

.note-box-icon {
  width: 25px;
  position: relative;
  left: 44%;
  margin: 0 !important;
}