.webp .mh { background-image: linear-gradient(to bottom right, #6d371088, #1a1c25bb), url(/uploaded/Image/mastheads/sm/2dDrawing2.webp); }
.no-webp .mh { background-image: linear-gradient(to bottom right, #6d371088, #1a1c25bb), url(/uploaded/Image/mastheads/sm/2dDrawing2.jpg); }

 @media (max-width: 450px) {
.webp .mh {background-image: linear-gradient(to bottom right, #6d371088, #1a1c25bb), url(/uploaded/Image/mastheads/mobile/450_2dDrawing2.webp);}
.no-webp .mh {background-image: linear-gradient(to bottom right, #6d371088, #1a1c25bb), url(/uploaded/Image/mastheads/mobile/450_2dDrawing2.jpg);}
}

.card-heading {
    min-height: 50px;
    height: unset;
}


#regGrey { background: #eee;}
#regGreen { background: #eee; padding-bottom: 20px;}
#regGreen .card-headingTitle, #regPurple .card-headingTitle { font-size: 1.2em;}



.section-title {background: #1d4f91 !important;}

#regGreen .section-title, #regPurple .section-title {
    color: #fff;
    justify-content: center;
    margin: 10px 0 10px 0;
    padding: 10px;
    font-size: 1.5em;
    background-color: #565656;
    background-image: url(/uploaded/image/Cards/CardTitleBlank.png);
    border: 2px solid #fff;
    border-radius: 4px;
    box-shadow: 0 5px 14px -5px #000000aa;
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    display: flex;
    align-items: center;
    grid-column: -1/1;
font-weight: normal;
}

#buttonAcc {border-style: solid; border-width: 1px 0 0 0; border-color: #ccc;}
#buttonAcc .accordion-header {background: #f4f4f4;}
#buttonAcc .accordion-header:hover {background: #1d4f91;}
#regBlue .card-span { border-color: #fff;}

/*----------------------  Default Darker Grey Border for Card Headings --------------------------------------*/
.card-heading {border-color: #333;}
/*----------------------  Default Darker Grey Border for Card Headings End --------------------------------------*/

html {scroll-behavior: smooth;}

.tl-title {
    position: absolute;
    margin: auto;
    width: 100%;
    height: 100%;
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-weight: lighter;
    line-height: 3.5em;
    border-bottom: 1px solid white;
    left: 0;
    right: 0;
    transition: opacity 0.5s ease;
    background: #1d1e22;
    z-index: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: opacity 1s ease;
    cursor: pointer;
}

#YAH.hidden {display: none;}

.tl-title.hidden {display: none;}

.tl-title p {
    font-size: 1.2em;
    letter-spacing: 2px;
    max-width: 900px;
    margin: 10px auto 0;
    line-height: 1.1em;
}

.tl-title h3 {
    font-size: clamp(2.8rem, 1.725rem + 1.432vw ,4rem);
    letter-spacing: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid white;
    max-width: 1000px;
    margin: 0 auto;
    color: #009fdf;
}

.tl-title #GO {
    font-size: 5em !important;
    font-weight: bold;
    border: solid white;
    border-width: 1px 0;
    width: 100px;
    margin: 100px auto 50px;
    padding: 10px 30px 15px 10px;
    transition: all 0.5s;
}

#timeline:hover #GO {
    filter: drop-shadow(2px 0px 6px white);
}

.tl-row {
  position:absolute;
  height: 40px;
  box-shadow: 0px 7px 5px -6px #fff;
  padding: 5px; 
  opacity: 0;
  transition: all 0.75s ease;
  transform: translateY(45px);
  z-index: 3;
  pointer-events:none;
  left: 0.5vw;
}

.tl-row:hover {
    box-shadow: 0px 9px 5px -6px #009fdf;
}

.tl-row a, .tl-row p {
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: normal;
    width: min-content;
    white-space: nowrap;
    pointer-events:auto;
    color: unset;
    text-decoration: none;
    display: block;
    margin-block-start: 1em;
    transition: all 0.75s ease;
    color: #fff;
}

.tl-row a:hover, .tl-row p:hover {
    color: #009fdf;
}

#timeline {
  display: flex;
  background-color: #1d4f91; 
  height:585px;
position:relative;
}

.tl-item {
  position: relative;
  width: 25%;
  height: 100%;
  color: #fff;
  overflow: visible;
  transition: width 0.75s ease;
}

.tl-item:before {
    transform: translate3d(0, 0, 0);
    transition: opacity 0.5s ease, transform 0.5s ease;
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
 }

#INSTALL.tl-item:before {
    background: linear-gradient( to bottom, #00000000 70%, #1d4f91 100% );
}

#LEARN.tl-item:before {
    background: linear-gradient( to bottom, #00000033 70%, #f0047fbb 100% );
}

#OPTIMIZE.tl-item:before {
    background: linear-gradient( to bottom, #00000033 70%, #00b1bdbb 100% );
}

#PRODUCE.tl-item:before {
    background: linear-gradient( to bottom, #00000033 70%, #63b650bb 100% );
}

#SUCCESS.tl-item:before {
    background: linear-gradient( to bottom, #00000000 75%, #ffb009bb 100% );
}
  
 .tl-item:after {
    transform: translate3d(0, 0, 0);
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #1d1e22;
    opacity: 1;
    transition: opacity 0.5s ease;
 }



.tl-item.hovered {
    width: 30% !important;
  }
  
.tl-item.hovered:after {
      opacity: 0;
}

.tl-item.hovered:before {
      opacity: 1;
      transform: translate3d(0, 0, 0) translateY(0);
      transition: opacity 1s ease, transform 1s ease 0.25s;
}

.tl-column {
  position: absolute;
  top: 88%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 2;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.tl-column  p {
    font-family: "Open Sans Condensed";
    font-size: 1.5rem;
    line-height: 0;
}

.tl-bg {
  transform: translate3d(0, 0, 0);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center center;
  transition: filter 0.5s ease;
  filter: grayscale(100%);
}



#QUICKSTART {
  width: 17vw;
  top: 10px;
  left: 5vw;
}

#GETSTARTED {
  width: 56vw;
  top: 55px;
  left: 5vw;
}

#TECHSUPPORT {
  width: 90vw;
  top: 100px;
  left: 5vw;
}

#TRIAL {
  width: 21vw;
  top: 100px;
}

#TUTORIALS {
  width: 21vw;
  top: 145px;
}

#TRAINING {
  width: 60vw;
  top: 190px;
}

#WEBINARS {
  width: 75vw;
  top: 235px;
}


#OPTWEB {
  width: 41vw;
  top: 190px;
}

#DATAMANAGE {
  width: 56vw;
  top: 235px;
}

#CADSERVICES{
  width: 56vw;
  top: 280px;
}

#CONSULTANCY {
  width: 37vw;
  top: 280px;
}

#MULTIPRODUCT {
  width: 37vw;
  top: 325px;
}

#STORIES {
  width: 18vw;
  top: 280px;
}

#INSTALL.hovered #QUICKSTART {
    opacity: 1.0;
    transform: translate3d(0, 0, 0);
}

#INSTALL.hovered #GETSTARTED {
    opacity: 1.0;
    transform: translate3d(0, 0, 0);
}

#INSTALL.hovered #TECHSUPPORT {
    opacity: 1.0;
    transform: translate3d(0, 0, 0);
}

#INSTALL.learnHovered #GETSTARTED, #INSTALL.learnHovered #TECHSUPPORT {
    opacity: 1.0;
    transform: translate3d(0, -45px, 0);
}

#LEARN.hovered #TRIAL, #LEARN.hovered  #TUTORIALS, #LEARN.hovered #TRAINING, #LEARN.hovered #WEBINARS {
    opacity: 1.0;
    transform: translate3d(0, 0px, 0);
}

#INSTALL.optimizeHovered #GETSTARTED, #INSTALL.optimizeHovered #TECHSUPPORT {
    opacity: 1.0;
    transform: translate3d(0, -45px, 0);
}

#LEARN.optimizeHovered #TRAINING, #LEARN.optimizeHovered #WEBINARS {
    opacity: 1.0;
    transform: translate3d(0, -90px, 0);
}

#OPTIMIZE.hovered #OPTSESS, #OPTIMIZE.hovered #OPTWEB, #OPTIMIZE.hovered #DATAMANAGE, #OPTIMIZE.hovered #CADSERVICES {
    opacity: 1.0;
    transform: translate3d(0, 0px, 0);
}

#INSTALL.produceHovered #TECHSUPPORT {
    opacity: 1.0;
    transform: translate3d(0, -90px, 0);
}

#LEARN.produceHovered #TRAINING, #LEARN.produceHovered #WEBINARS {
    opacity: 1.0;
    transform: translate3d(0, -135px, 0);
}

#OPTIMIZE.produceHovered #OPTWEB, #OPTIMIZE.produceHovered #DATAMANAGE, #OPTIMIZE.produceHovered #CADSERVICES {
    opacity: 1.0;
    transform: translate3d(0, -45px, 0);
}

#PRODUCE.hovered #CONSULTANCY, #PRODUCE.hovered #MULTIPRODUCT {
    opacity: 1.0;
    transform: translate3d(0, 0px, 0);
}

#INSTALL.successHovered #TECHSUPPORT {
    opacity: 1.0;
    transform: translate3d(0, -90px, 0);
}

#LEARN.successHovered #WEBINARS {
    opacity: 1.0;
    transform: translate3d(0, -180px, 0);
}

#OPTIMIZE.successHovered #DATAMANAGE, #OPTIMIZE.successHovered #CADSERVICES {
    opacity: 1.0;
    transform: translate3d(0, -135px, 0);
}

#PRODUCE.successHovered #CONSULTANCY, #PRODUCE.successHovered #MULTIPRODUCT {
    opacity: 1.0;
    transform: translate3d(0, -90px, 0);
}

#SUCCESS.hovered #STORIES {
    opacity: 1.0;
    transform: translate3d(0, 0px, 0);
}

@media (max-width: 1000px) {
#timeline {display: none;}
}

/*---------------------- Other CSS START  ------------------------------- */
.section-title {background: #1d4f91 !important;}

.webcast-link:hover img {filter: brightness(0.5);}
.webcast-link:hover .webcast-title {color: #1d4f91;}
.webcast-link:hover /Administration .accordion {
    color: #565656 !important;
}

.benefit-title {
    margin-top: 5px;
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
    text-align: left;
    border-bottom: 1px solid #00b6ff;
    padding-bottom: 5px;
    transition: 0.5s ease color;
    margin-bottom: 10px;
}

.benefit .accordion-header:hover {
    background: none;
    color: #ff6600;
}

.benefit .accordion__item.active .accordion-header {
    background: none;
    color: #ff6600;
    border-bottom: 1px solid #bbb5;
}
.benefit .accordion-header {
    padding-left: 0em;
    text-indent: 0em;
    color: #0071ee;
    font-weight: 600;
}

.benefit .accordion-body__contents {
    padding: 10px;
}

.benefit .accordion-header svg {
    margin: 0 15px 0 5px;
}

.benefit .accordion-body__contents {
       padding: 10px 0;
}

.name-and-date {
   
    justify-content: space-between;
}

.name-and-date div { 
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;

}

.presenter { 
    color: #00b6ff;
}

.webcast-date { 
    color: #1d4f91;
}

.card-button a:hover, .card-button:hover {
    color: white;
    background: #1d4f91;
    cursor: pointer;
}