h1 small { font-size: 20px; font-weight: normal; opacity: 0.5; }

.intro { clear: none; padding: 7% 0px; width: 100%; }
.intro h1 { margin-bottom: 25px; }
.intro p:first-of-type { color: var(--deep-green); font-size: 17px; font-weight: normal; line-height:25px; }

.cases { clear: both; padding-bottom: 7%; width: 100%; }
.cases .row:nth-child(2n+1) .col:nth-child(2n+1) { background-color: var(--light-green-1); }
.cases .row:nth-child(2n+2) .col:nth-child(2n+2) { background-color: var(--light-green-1); }
.cases .col { background-color: #F3F8F8; }
.cases .detail { clear: both; padding: 5px 20px 15px; width: 100%; }
.cases .detail span { color: var(--deep-green); font-size: 12px; font-weight: normal; opacity: 0.6; text-transform: uppercase; }
.cases .detail h4 { margin: 20px 0px 15%; text-transform: capitalize; }
.cases .detail a.flexbtn { color: var(--deep-green); display: inline-block; font-size: 13px; font-weight: 500; text-transform: uppercase; }
.cases .detail a figure { display: inline-block; margin: 0px 5px 0px 0px; vertical-align: bottom; height: 25px; width: 32px; }
.cases .detail a figure img { height: 25px; width: 29px; }
.cases .detail a:hover figure img { height: 25px; width: 32px; }
.cases .detail a { color:var(--deep-green); }

.usecases { clear: none; padding: 7% 0px 20px; width: 100%; }
.usecases h1 { margin-bottom: 25px; }

.accordion { margin: 7% 0px; }
.accordion-item { border-bottom: 1px solid var(--deep-green) !important;}
.accordion-button { border: none; color: var(--deep-green); font-size: 24px; font-weight: normal; padding: 2rem 0rem; text-align: left; }
.accordion-button:not(.collapsed) { background: transparent; color: var(--deep-green); font-size: 24px; font-weight: normal; }
.accordion-collapse { border: none; }
.accordion-body { padding: .5rem 2rem 5% 0rem; }
.accordion-body h4 { text-transform: initial; }
.accordion-body h5 { color: var(--deep-green); font-size: 17px; font-weight: normal; text-transform: initial; line-height:25px; }
.accordion-body ul { list-style: none; margin: 0px; padding: 0; }
.accordion-body ul li { background: url("../images/bullet.svg") no-repeat left 7px; padding: 0px 0px 5px 15px; line-height: 1.5; }
.accordion-body ul li ul { margin: 0; padding: 0px; }
.accordion-body ul li ul li { background: none; padding: 0px; }
.accordion-body ul li ul li span { color: var(--deep-green); }
.accordion-button::after { background-image: url("../images/plus.svg"); }
.accordion-button:not(.collapsed)::after{ background-image: url("../images/minus.svg"); }
.accordion-item:first-of-type .accordion-button, .accordion-item:last-of-type .accordion-button.collapsed { border-radius: 0px; }
.accordion-button.collapsed:hover.accordion-button::after { transform: rotate(180deg); }
.accordion-button:not(.collapsed):hover.accordion-button::after { transform: rotate(360deg); }

.list-group { clear: both; list-style: none; margin: 0px 0px 25px; padding: 0px; width: 100%; }
.list-group li { color: var(--deep-green); font-size: 13px; font-weight: normal; margin: 10px 0px; text-transform: uppercase; width: 100%; }
.list-group li a { color: var(--deep-green); }
.list-group li a figure { display: inline-block; float: left; margin: 0px 5px 0px 0px; vertical-align: text-bottom; height: 15px; width: 22px; }
.list-group li a figure img { height: 15px; width: 18px; }
.list-group li a:hover figure img { height: 15px; width: 22px; }
.list-group li a span { display: inline-block; float: left; width: 82%; }

.related { border-top: 1px solid var(--deep-green); clear: both; margin-top: 30px; padding: 50px 0pc 20px; width: 100%; }
.related h5 { color: var(--dark-green); font-size: 17px; font-weight: normal; margin-bottom: 20px; text-transform: initial; }
.related .stage { clear: both; margin: 10px 0px; width: 100%; }
.related .stage img { width: 28px; }
.related .stage { color: var(--deep-green); font-size: 13px; font-weight: normal; text-transform: uppercase; }
.related .stage .col:last-child { display: grid; align-content: center; }

.more { margin-bottom: 8%; }
.more a { color: var(--deep-green); display: inline-block; font-size: 13px; font-weight: 500; text-transform: uppercase; }
.more a figure { display: inline-block; margin: 0px 5px 0px 0px; vertical-align: bottom; height: 25px; width: 32px; }
.more a figure img { height: 25px; width: 29px; }
.more a:hover figure img { height: 25px; width: 32px; }

.quality { clear: none; padding: 7% 0px; width: 100%; }
.quality h4 { margin-bottom: 20px; text-transform: initial; }

.adding { border-top: 1px solid var(--deep-green); clear: both; margin-bottom: 1.5rem; padding: 10px 0px; text-align: right; width: 100%; }
.adding img { width: 25px; }

.panel { background-color: var(--light-green-2); clear: both; padding: 5% 15px; overflow-x: auto; -webkit-overflow-scrolling: touch; min-height: 800px; width: 100%; }
.panel .headrow, .panel .datarow { width: 1550px; }
.panel .headrow .col { color: var(--deep-green); font: normal 17px var(--main-text-font); margin-bottom: 14px; width: 320px; }
.panel .headrow .col:first-child { width: 270px; }
.panel .datarow .col { margin-bottom: 24px; width: 320px; }
.panel .datarow .col:first-child { width: 270px; }
.panel .datarow .box { background-color: var(--bs-white); color: var(--grey); font: 300 15px var(--main-text-font); padding: 20px 15px; min-height: 100%; width: 100%; }
.panel .datarow .col:first-child .box { color: var(--deep-green); font: normal 17px var(--main-text-font); }
.panel .datarow .box a { display: inline-block; float: left; margin-right: 15px; width: 20px; }

.content { clear: both; width: 100%; }
.content p { color: var(--dark-green); font-size: 17px; font-weight: normal; line-height:1.5; }

.display { background: url("../images/angle.png") no-repeat center right var(--light-green-1); clear: both; color: var(--dark-green); font-size: 17px; font-weight: normal; margin-top: 25px; padding: 25px 15px; text-transform: initial; width: 100%; }
.display.second { background-image: url("../images/angle_01.png"); }
.display img { width: 28px; }
.display p { color: var(--dark-green); max-width: 95%; }
.display a { display: inline-block; height: 28px; width: 28px; border-radius: 100%; margin-right:4px; }
.display a:hover { background-color: var(--deep-green); }
.display a:hover img { filter: brightness(0) invert(1); }
.display >a:first-child { margin-left:10px; }

.viewtype .row { align-items: center; }
.viewtype { clear: both; margin: 25px 0px; width: 100%; }
.viewtype p {color: var(--deep-green); font-size: 12px; font-weight: normal; margin: 0px; text-transform: uppercase; }
.viewtype .form-check { color: var(--deep-green); font-size: 12px; font-weight: normal; margin-right: 15px; text-transform: uppercase; display:flex; align-items:center; }
.viewtype .form-check input[type="radio"].form-check-input { background-color: var(--light-green-2); border: none; height: 22px; margin-right: 10px; width: 22px; }
.viewtype .form-check:hover input[type="radio"].form-check-input { background-color: rgba(6, 102, 102, 0.5); }
.viewtype .form-check input[type="radio"].form-check-input:checked[type="radio"] { background-color: var(--deep-green); background-image: none; }
.viewtype .form-check .form-check-input:focus { box-shadow: 0 0 0 .25rem rgba(2,102,102,.25) }

.inform { clear: both; width: 100%; display: flex; align-items:center; margin-bottom:10px; }
.inform .fa { color: var(--yellow); font-size: 25px; margin: 20px 15px; vertical-align: middle; }
.inform img { max-height:30px; filter:hue-rotate(-415deg) invert(1); }

.journey { clear: both; margin-bottom: 3rem; position: relative; width: 100%; }
.journey .inner { clear: both; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.journey .headrow, .journey .datarow { width: 1550px; }
.journey .datarow .col:first-child { cursor:pointer; }
.journey .headrow .box { background: url("../images/angle_03.png") no-repeat 90% center var(--deep-green); padding: 15px 15px; min-height: 165px; width: 100%; }
.journey .headrow .box figure { height: 56px; margin: 0px; }
.journey .headrow .box h4 { color: var(--bs-white); font: normal 20px var(--main-text-font); display: grid; align-content: end; height: 48px; line-height: 25px; margin: 0px; text-transform: initial; }
.journey .headrow .col, .journey .datarow .col { margin-bottom: 8px; width: 380px; min-width:311px;     flex-grow: 0; }
.journey .datarow .box { background-color: var(--light-green-1); color: var(--grey); font: 300 15px var(--main-text-font); padding: 20px 15px; min-height: 100%; width: 100%; }
.journey .datarow .col:first-child .box p { color: var(--deep-green); font: normal 17px var(--main-text-font); margin-left: 35px; margin-bottom:0; }
.journey .datarow .box .expander img { display: inline-block; float: left; margin-right: 15px; width: 20px; }
.journey .next { background :url("../images/aro_rgt.svg") no-repeat center rgba(255, 255, 255, 0.7); border: none; display: none; height: 100%; position: absolute; right: 0px; top: 0px; text-indent: -9999px; width: 80px; z-index: 1; }
.journey:hover .next { display: inline-block; }

.flexmee { display: flex;
    justify-content: space-between;
    flex-direction: column; }


.tooltipn {
    position: relative;
}
.tooltipn::after {
    background-color: #066666;
    border-radius: 0;
    color: #fff;
    display: none;
    padding: 8px 12px;
    position: absolute;
    text-align: center;
    z-index: 999;
    font-size:12px;
    min-width:150px;
    text-transform: uppercase;
    line-height:1;
    letter-spacing: 0.6px;
}
.tooltipn.top::after {
    content: attr(data-text);
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(-100% - 10px));
}
.tooltipn::before {
    background-color: #066666;
    content: ' ';
    display: none;
    position: absolute;
    width: 15px;
    height: 15px;
    z-index: 999;
}
.tooltipn:hover::after {
    display: block;
}
.tooltipn:hover::before {
    display: block;
}

.tooltipn.top::before {
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
}

.image_maps { overflow:hidden; cursor: move; position:relative; }
.image_maps > figure { width:4000px; }
.image_maps .hide { display:none; }
.image_maps .show { display:block; }

.scrollwrap { position:relative; }
.indicator-container {
    height: 100%;
    border: 0;
    box-shadow: none;
    background: rgb(255 255 255 / 90%);
	overflow:hidden;
    right: 0;
    top: 0;
position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
font-size: 30px;
    color: var(--deep-green);
    padding: 0 10px;
    opacity: 1;
    transition: all 0.3s ease-in-out;
	width: 130px;
	z-index:9;
background-color: rgba(255, 255, 255, .15);  
 backdrop-filter: blur(5px);
	pointer-events:none;
	display:none;
}
.indicator-container i { animation: bounceLeft infinite 1.1s ease-in-out; position:relative; left:0; }
.scrollwrap:hover .indicator-container, .scrollwrap:hover .dragwrapper, .journey:hover .dragwrapper { opacity:0; }

@keyframes bounceLeft {
  0%,
  20%,
  50%,
  80%,
  100% {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  60% {
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
}



.dragwrapper { top:0; left:0; height:100%; width:100%; position:absolute; background-color: rgba(255, 255, 255, .35); backdrop-filter: blur(5px); color:var(--deep-green); opacity:1; pointer-events:none; transition:all 0.3s ease-in-out; }
div[data-type="horizontal-scroll"] .drag-info {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  width: 220px;
  height: 20px;
  z-index: 10;
  pointer-events: none;
  opacity: 1;
  -ms-filter: none;
  -webkit-filter: none;
          filter: none;
  will-change: opacity;
  -webkit-transition: opacity 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-animation: drag-indicator-anim 2.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
  animation: drag-indicator-anim 2.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
div[data-type="horizontal-scroll"] .drag-info:before {
  content: "";
  display: block;
  width: calc(50% - 25px);
  position: absolute;
  left: 0px;
  top: calc(50% - 1px);
  height: 1px;
  background: currentColor;
  -webkit-animation: drag-indicator-anim-line-left 2.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
  animation: drag-indicator-anim-line-left 2.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
div[data-type="horizontal-scroll"] .drag-info:after {
  content: "";
  display: block;
  width: calc(50% - 25px);
  position: absolute;
  right: 0px;
  top: calc(50% - 1px);
  height: 1px;
  background: currentColor;
  -webkit-animation: drag-indicator-anim-line-right 2.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
  animation: drag-indicator-anim-line-right 2.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
div[data-type="horizontal-scroll"] .drag-info > div {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: drag-indicator-anim-text 2.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
  animation: drag-indicator-anim-text 2.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
div[data-type="horizontal-scroll"].has-interacted .drag-info {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
div[data-type="horizontal-scroll"].has-interacted .drag-info:before,
div[data-type="horizontal-scroll"].has-interacted .drag-info:after,
div[data-type="horizontal-scroll"].has-interacted .drag-info > div {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
div[data-type="horizontal-scroll"][role="list-of-press"]:after,
div[data-type="horizontal-scroll"][role="list-of-team"]:after {
  content: "";
  display: block;
  padding-top: 120%;
}
@media only screen and (min-width: 920px) {
  div[data-type="horizontal-scroll"][role="list-of-press"]:after,
  div[data-type="horizontal-scroll"][role="list-of-team"]:after {
    padding-top: 46.875%;
  }
}

@-webkit-keyframes drag-indicator-anim {
  0% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  10% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  45% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  55% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  90% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  100% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
}
@keyframes drag-indicator-anim {
  0% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  10% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  45% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  55% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  90% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  100% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
}
@-webkit-keyframes drag-indicator-anim-line-left {
  0% {
    width: calc(20% - 25px);
  }
  10% {
    width: calc(20% - 25px);
  }
  45% {
    width: calc(80% - 25px);
  }
  55% {
    width: calc(80% - 25px);
  }
  90% {
    width: calc(20% - 25px);
  }
  100% {
    width: calc(20% - 25px);
  }
}
@keyframes drag-indicator-anim-line-left {
  0% {
    width: calc(20% - 25px);
  }
  10% {
    width: calc(20% - 25px);
  }
  45% {
    width: calc(80% - 25px);
  }
  55% {
    width: calc(80% - 25px);
  }
  90% {
    width: calc(20% - 25px);
  }
  100% {
    width: calc(20% - 25px);
  }
}
@-webkit-keyframes drag-indicator-anim-line-right {
  0% {
    width: calc(80% - 25px);
  }
  10% {
    width: calc(80% - 25px);
  }
  45% {
    width: calc(20% - 25px);
  }
  55% {
    width: calc(20% - 25px);
  }
  90% {
    width: calc(80% - 25px);
  }
  100% {
    width: calc(80% - 25px);
  }
}
@keyframes drag-indicator-anim-line-right {
  0% {
    width: calc(80% - 25px);
  }
  10% {
    width: calc(80% - 25px);
  }
  45% {
    width: calc(20% - 25px);
  }
  55% {
    width: calc(20% - 25px);
  }
  90% {
    width: calc(80% - 25px);
  }
  100% {
    width: calc(80% - 25px);
  }
}
@-webkit-keyframes drag-indicator-anim-text {
  0% {
    left: 20%;
  }
  10% {
    left: 20%;
  }
  45% {
    left: 80%;
  }
  55% {
    left: 80%;
  }
  90% {
    left: 20%;
  }
  100% {
    left: 20%;
  }
}
@keyframes drag-indicator-anim-text {
  0% {
    left: 20%;
  }
  10% {
    left: 20%;
  }
  45% {
    left: 80%;
  }
  55% {
    left: 80%;
  }
  90% {
    left: 20%;
  }
  100% {
    left: 20%;
  }
}



.moremore {overflow: hidden;
    text-overflow: ellipsis;
    height: 22px; transition:all 0.3s ease-in-out; }
.moremore.expanded { height:auto; overflow:initial; }


/*-------------------
    Media Query
---------------------------*/

@media only screen and (max-width:550px) {
	.display span { display:block; margin-bottom:15px; }
	.journey .headrow, .journey .datarow { width:2000px }
}

@media only screen and (max-width: 767px) {
    .accordion-button, .accordion-button:not(.collapsed) { font-size: 16px; }
    .related .stage .col { flex-basis: 0; }
    .content { margin-top: 5%; }
	.display::first-line { display:block; clear:both; width:100%; }
	.display { background-size: cover; }
	.maintitle { width:100%; padding-left:0; margin-bottom:15px; }
	.viewtype { padding:0 25px; margin:0; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cases .detail h4 { font-size: 16px; }
    .content { margin-top: 5%; }
    .content p { font-size: 15px; }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .list-group li { font-size: 11px; }
    .list-group li a span { width: 60%; }
    .related .stage { font-size: 11px; }
}