.pipeline-submenu-div {
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

.pipeline-submenu-hr {
  color: #ddd;
}

.pipeline-submenu-div .menu-link {
  /* padding-top: 0 !important;
  padding-bottom: 0 !important; */
  padding: 0 22px !important;
}

#page-title .icon-top-image {
  margin: 30px auto;
}

.pipeline-main-content-div .sub-title {
  font-size: 22px;
  font-weight: 600;
}

.pipeline-main-content-div .sub-title.bigger {
  font-size: 24px !important;
}

.pipeline-main-content-div .sub-content {
  font-size: 18px;
}

.pipeline-main-content-div .border-right {
  border-right: solid 2px #aaa;
  padding-bottom: 20px;
}

.pipeline-main-content-div .float-right-image {
  float: right;
  margin-right: -10px;
}

.pipeline-main-content-div .middle-area-text {
  /* border: solid 1px; */
  padding: 9px;
  font-weight: 500;
  background-color: #f8ccaf;
  margin-top: 120px !important;
  box-shadow: 5px 10px 22px #8e8e8e88;
  border-radius: 3px;
}

.pipeline-main-content-div .data-info {
  text-align: center;
}

.pipeline-main-content-div .data-info span {
  font-size: 45px;
  font-weight: 500;
}

.pipeline-main-content-div .pipeline-process-diagram-div {
  text-align: center;
}

.pipeline-main-content-div .button {
  background-color: #111 !important;
  padding-left: 50px;
  padding-right: 50px;

  background: linear-gradient(to right, rgba(224, 219, 219, 0.8) 0%, rgba(220,172,46, 0.9) 100%) !important;
  padding: 8px 50px;
  margin-left: 10px !important;
  margin-right: 10px !important;
  /* margin: 80px 0 !important; */
  border-radius: 5px;
  z-index: 3;
  box-shadow: 5px 10px 22px #8e8e8e55;
}

.pipeline-main-content-div .button:hover {
  background-color: #fff !important;
}

hr {
  margin: 10px 0;
}

.area-11:hover {
  opacity: 0.2;
  display: block;
}
.area-11 {
  outline-color: red;
}

.pipeline-image-list-container-div {
  text-align: right !important;
  /* border: solid 1px red; */
  width: fit-content !important;
  /* position: relative; */
  display: inline-block;

  /* margin-left: auto;
  margin-right: auto; */
}
img.pipeline-image-list {
  /* margin-bottom: 3px !important; */
  display: block;
  margin-right: 0;
  padding-right: 0 !important;
  opacity: 0.9;
  /* margin-left: 75px !; */
}

/* img.pipeline-image-list.offset-75 {
  margin-left: 75px;
} */

.pipeline-item-container {
  /* border: 1px solid #dddddd; */
  /* width: 200px;
  height: 200px; */
  position: relative;
}
.tag {
  float: left;
  position: absolute;
  right: 40px;
  top: calc(50% - 20px);
  z-index: 1000;
  /* background-color: rgba(121, 121, 49, 0.2); */
  background-color: rgba(121, 121, 49, 0);
  padding: 0 5px;
  color: #aaa;
  font-weight: bold;
  font-size: 35px;
  opacity: 0.4;
}

.pipeline-item-container.hovering .tag {
  transform: scale(1.12);
  opacity: 0.7;
  /* background-color: rgba(121, 121, 49, 0.1); */
  /* padding-left: 10px;
  padding-right: 6px; */
}

.pipeline-item-container.hovering img.pipeline-image-list {
  opacity: 1;
}

span.click-for-details-text {
  letter-spacing: 0.08em;
  color: #aaa;
}

.pipeline-image-list-container-div .category-text {
  writing-mode: tb-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  font-size: 26px;
  /* width: fit-content;
  height: fit-content; */
  position: absolute;
  top: 30%;
  padding-left: 20px;
  color: #666;
  font-weight: 100;
  z-index: 999;
  left: 15px;
}

.pipeline-image-list-container-div .category-div {
  border: solid 1px #ddd;
  /* margin-top: 8px; */
  position: relative;
  padding: 20px;
}

@media screen and (max-width: 991px) {
  /* span.click-for-details-text {
    color: red;
  } */

  .tag {
    right: 20px;
  }
  .pipeline-image-list-container-div .category-text {
    font-size: 20px;
  }
}

.sub-content.with-mt20 {
  margin-top: -50px !important;
}

@media screen and (max-width: 767px) {
  /* span.click-for-details-text {
    color: green;
  } */

  .tag {
    right: 20px;
    font-size: 20px;
    top: calc(50% - 10px);
  }
  .sub-content.with-mt20 {
    margin-top: -20px !important;
  }
  .pipeline-image-list-container-div .category-text {
    font-size: 18px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .sidebar-widgets-wrap {
    display: contents !important;
  }
}

@media screen and (max-width: 550px) {
  /* span.click-for-details-text {
    color: orange;
  } */

  .tag {
    right: 5px;
    font-size: 20px;
    top: calc(50% - 12px);
  }
  .pipeline-image-list-container-div .category-text {
    font-size: 14px;
  }
}




/*  */
					/* grid for cate */
					.cate-row>div {
						display: grid;
						align-content: center;
						text-align: center;
					}

					.sub-image {
						text-align: left !important;
						padding-right: 10px;
					}

					.sub-image img {
						width: 80%;
					}

					.sub-bar {
						padding-left: 0 !important;
						padding: 40px 0 !important;
						background: linear-gradient(to right, #dedede33 0%, #dededeab 25%, #dedede33 25%, #dededeab 50%, #dedede33 50%, #dededeab 75%, #dedede33 75%, #dededeab 100%);
					}

					.progress-bar {
						background-color: #FCD04Abb;
					}

					.progress {
						background-color: #dddddd00;
						z-index: 3;
						height: 40px;
						/* background: linear-gradient(to right, #dedede33 0%, #dededeab 25%, #dedede33 25%, #dededeab 50%, #dedede33 50%, #dededeab 75%, #dedede33 75%, #dededeab 100%); */

					}

					.progress-text {
						width: 100%;
						z-index: 10;
						text-align: center;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						font-size: 22px;
						text-transform: uppercase;
						color: #999;
					}

					.main-cate {
						border: solid 1px #ddd;
						padding: 40px 40px 40px 0;
						border-radius: 8px;
						background: #99999911;
					}

					.main-cate-text {
						writing-mode: vertical-rl;
						text-orientation: mixed;
						/* border: solid 1px; */
						text-align: center;
						display: grid;
						align-content: center;
						transform: rotate(180deg);
						text-transform: uppercase;
						font-size: 26px;
            width: 100%;
					}

					.sub-cate {
						background: linear-gradient(to right, #eeeeee00 12%, #eeeeeeee);
						padding: 20px;
						border-radius: 8px;
						box-shadow: 5px 10px 22px #8e8e8e88;
            margin-top: 80px;
            margin-bottom: 60px;
					}

					/* .sub-cate:hover {
						cursor: pointer;
						background: linear-gradient(to right, #eeeeee00 12%, #e7e7e7ff);
						box-shadow: 5px 10px 22px #8e8e8e;
						transform: scale(1.008);
					} */

					.sub-cate:hover .click-arrow {
						/* font-size: 40px; */
						color: #888;
					}

					.click-arrow {
						font-size: 38px;
						text-align: right;
						color: #aaa;
					}

					.progress-text {
						display: none;
					}

					.stage {
						position: absolute;
						width: 100%;
						/* top: 50%;
						transform: translateY(-50%);
						z-index: 9; */
					}


					.stage-1,
					.stage-2,
					.stage-3,
					.stage-4 {
						display: inline-block;
						width: 24.2%;
						text-align: center;
						padding-top: 5px;
						color: #888;
					}

					.stage-1::before {
						content: "Design";
					}

					.stage-2::before {
						content: "Optimization";
					}

					.stage-3::before {
						content: "Preclinical";
					}

					.stage-4::before {
						content: "Phase I";
					}

					@media (max-width: 770px) {
						.progress-text {
							display: block;
							font-size: 16px;
						}

						.stage {
							display: none;
						}

            .pipeline-main-content-div .button {
              display: block;
              max-width: 350px;
              margin-left: auto;
              margin-left: auto !important;
              margin-right: auto !important;
            }

					}
          .pipeline-main-content-div img {
            box-shadow: 5px 10px 22px #8e8e8e88;
          }