/* CSS Document */

.animated-list {
  list-style: none; /* remove default bullet */
  padding-left: 0;
}

.animated-list li {
  position: relative;
  padding-left: 25px; /* space for custom bullet */
  font-family: "Gordita", Sans-serif;
  font-size: 15px;
  line-height:23px;
  margin: 10px 0;
  cursor: pointer;
  transition: color 0.3s ease;
}



/* custom bullet using ::before */
.animated-list li::before {

  content: "\f111";
  position: absolute;
  font-family: "Font Awesome 5 Pro";
  font-weight:600;
  left: 0;
  top: 1px;;
  color: #555;
  font-size: 6px;
  transition: all 0.3s ease;
  color:#003728;
}

/* hover effects */
.animated-list li:hover {
color:#003728;
font-weight:500;
}

.animated-list li:hover::before {
  color: #3dcfe0;       /* change color */
  transform: translateX(6px); /* move right */
}

/* Sub List */

/* ---------- SUB-LIST ---------- */
.animated-list ul {
  list-style: none;
  margin: 6px 0 6px 25px;
  padding-left: 0;
}

.animated-list ul li {
  position: relative;
  padding-left: 20px;  
  margin: 3px 0;
  font-family: "Gordita", Sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.animated-list ul li::before {
  content: "\f192";
  font-family: "Font Awesome 5 Pro"; /* ?? IMPORTANT */
  font-weight: 500;
  position: absolute;
  left: 0;
  top: 4;
  color: #777;
  font-size:9px;
  transition: all 0.3s ease;
}

/* sub-list hover effect */
.animated-list ul li:hover {
 color:#003728; /* green for sub-items */
}
.animated-list ul li:hover::before {
  color: #3dcfe0;
  transform: translateX(4px);
}
/* Sub List Close */