/* timeline style  */
* {
  box-sizing: border-box;
}

.timeline {
  display: flex;
  flex-direction: column;
  margin: 20px auto;
  position: relative;
}
.timeline__event {
  margin-bottom: 20px;
  position: relative;
  display: flex;
  margin: 20px 0;
  border-radius: 6px;
  align-self: center;
  width: 50vw;
}
.timeline__event:nth-child(2n) {
  flex-direction: row-reverse;
}
.timeline__event:nth-child(2n) .timeline__event__date {
  border-radius: 0 6px 6px 0;
}
.timeline__event:nth-child(2n) .timeline__event__content {
  border-radius: 6px 0 0 6px;
}
.timeline__event:nth-child(2n) .timeline__event__icon:before {
  content: "";
  width: 2px;
  height: 100%;
  background: #38D0F2;
  position: absolute;
  top: 0%;
  left: 50%;
  right: auto;
  z-index: -1;
  transform: translateX(-50%);
  animation: fillTop 2s forwards 4s ease-in-out;
}
.timeline__event:nth-child(2n) .timeline__event__icon:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #38D0F2;
  position: absolute;
  right: 0;
  z-index: -1;
  top: 50%;
  left: auto;
  transform: translateY(-50%);
  animation: fillLeft 2s forwards 4s ease-in-out;
}
.timeline__event__title {
  font-size: 1.2rem;
  line-height: 1.4;
  text-transform: uppercase;
  font-weight: 600;
  color: #38BDF2;
  letter-spacing: 1.5px;
}
.timeline__event__content {
  padding: 20px;
  box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
  background: #fff;
  width: calc(40vw - 84px);
  border-radius: 0 6px 6px 0;
}
.timeline__event__date {
  color: #38D0F2;
  font-size: 1.5rem;
  font-weight: 600;
  background: #38BDF2;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 20px;
  border-radius: 6px 0 0 6px;
}
.timeline__event__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38BDF2;
  padding: 20px;
  align-self: center;
  margin: 0 20px;
  background: #38D0F2;
  border-radius: 100%;
  width: 40px;
  box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
  padding: 40px;
  height: 40px;
  position: relative;
}
.timeline__event__icon i {
  font-size: 32px;
}
.timeline__event__icon:before {
  content: "";
  width: 2px;
  height: 100%;
  background: #38D0F2;
  position: absolute;
  top: 0%;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  animation: fillTop 2s forwards 4s ease-in-out;
}
.timeline__event__icon:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #38D0F2;
  position: absolute;
  left: 0%;
  z-index: -1;
  top: 50%;
  transform: translateY(-50%);
  animation: fillLeftOdd 2s forwards 4s ease-in-out;
}
.timeline__event__description {
  flex-basis: 60%;
}
.timeline__event--type2:after {
  background: #555ac0;
}
.timeline__event--type2 .timeline__event__date {
  color: #87bbfe;
  background: #555ac0;
}
.timeline__event--type2:nth-child(2n+1) .timeline__event__icon:before, .timeline__event--type2:nth-child(2n+1) .timeline__event__icon:after {
  background: #87bbfe;
}
.timeline__event--type2 .timeline__event__icon {
  background: #87bbfe;
  color: #555ac0;
}
.timeline__event--type2 .timeline__event__icon:before, .timeline__event--type2 .timeline__event__icon:after {
  background: #87bbfe;
}
.timeline__event--type2 .timeline__event__title {
  color: #555ac0;
}
.timeline__event--type3:after {
  background: #3D6AF2;
}
.timeline__event--type3 .timeline__event__date {
  color: #0455BF;
  background-color: #3D6AF2;
}
.timeline__event--type3:nth-child(2n+1) .timeline__event__icon:before, .timeline__event--type3:nth-child(2n+1) .timeline__event__icon:after {
  background: #0455BF;
}
.timeline__event--type3 .timeline__event__icon {
  background: #0455BF;
  color: #3D6AF2;
}
.timeline__event--type3 .timeline__event__icon:before, .timeline__event--type3 .timeline__event__icon:after {
  background: #0455BF;
}
.timeline__event--type3 .timeline__event__title {
  color: #3D6AF2;
}
.timeline__event--type4:after {
  background: #2E97F2;
}
.timeline__event--type4 .timeline__event__date {
  color: #94b4e0;
  background-color: #2E97F2;
}
.timeline__event--type4:nth-child(2n+1) .timeline__event__icon:before, .timeline__event--type4:nth-child(2n+1) .timeline__event__icon:after {
  background: #94b4e0;
}
.timeline__event--type4 .timeline__event__icon {
  background: #94b4e0;
  color: #2E97F2;
}
.timeline__event--type4 .timeline__event__icon:before, .timeline__event--type4 .timeline__event__icon:after {
  background: #94b4e0;
}
.timeline__event--type4 .timeline__event__title {
  color: #2E97F2;
}
.timeline__event--type5:after {
  background: #010440;
}
.timeline__event--type5 .timeline__event__date {
  color: #054ea2;
  background-color: #010440;
}
.timeline__event--type5:nth-child(2n+1) .timeline__event__icon:before, .timeline__event--type5:nth-child(2n+1) .timeline__event__icon:after {
  background: #054ea2;
}
.timeline__event--type5 .timeline__event__icon {
  background: #054ea2;
  color: #010440;
}
.timeline__event--type5 .timeline__event__icon:before, .timeline__event--type5 .timeline__event__icon:after {
  background: #054ea2;
}
.timeline__event--type5 .timeline__event__title {
  color: #010440;
}
.timeline__event:last-child .timeline__event__icon:before {
  content: none;
}

@media (max-width: 1000px) {
  .img-prod12 {
    display: inline-block !important;
  }
  .img-prod-h140 {
    display: none;
  }
}
@media (max-width: 630px) {
  .productr-content .text {
    width: 100% !important;
  }
  .productr-content .timeline {
    display: inline-block;
    width: 100%;
  }
  .productr-content .timeline .timeline__event {
    margin: 0;
    margin-bottom: 10px;
  }
  .productr-content .timeline .timeline__event:nth-child(2n) {
    flex-direction: row;
    align-self: center;
  }
  .productr-content .timeline .timeline__event:nth-child(2n) .timeline__event__date {
    border-radius: 6px 0 0 6px;
    padding: 20px;
  }
  .productr-content .timeline .timeline__event:nth-child(2n) .timeline__event__content {
    border-radius: 0 6px 6px 0;
  }
  .productr-content .timeline .timeline__event:nth-child(2n) .timeline__event__icon {
    border-radius: 6px 6px 0 0;
    margin: 0;
  }
  .productr-content .timeline .timeline__event__icon {
    display: none;
  }
  .productr-content .timeline .timeline__event__content {
    width: 200px;
  }
  .productr-content .image-area {
    display: contents;
  }
  .productr-content .image-area img {
    margin: 0 !important;
    width: 150px !important;
    display: inline-block;
  }
}
/*@media (max-width: 786px) {
.timeline__event {
  flex-direction: column;
  align-self: center;
  &__content {
	width: 100%;
  }

  &__icon {
	border-radius: $bdrs $bdrs 0 0;
	width: 100%;
	margin: 0;
	box-shadow: none;

	&:before,
	&:after {
	  display: none;
	}
  }
  &__date {
	border-radius: 0;
	padding: $spacing;
  }

  &:nth-child(2n + 1) {
	flex-direction: column;
	align-self: center;

	.timeline__event__date {
	  border-radius: 0;
	  padding: $spacing;
	}

	.timeline__event__icon {
	  border-radius: $bdrs $bdrs 0 0;
	  margin: 0;
	}
  }
}
 }*/
@keyframes fillLeft {
  100% {
    right: 100%;
  }
}
@keyframes fillTop {
  100% {
    top: 100%;
  }
}
@keyframes fillLeftOdd {
  100% {
    left: 100%;
  }
}
section div {
  margin: 0;
  transition: all 0.6s ease-out;
}

.section-hide div {
  opacity: 0 !important;
}

.section-visible div {
  opacity: 1 !important;
}

/*.loader {
	width: 60px;
	aspect-ratio: 1;
	display: grid;
	grid: 50%/50%;
	color: #071d65;
	--_g: no-repeat linear-gradient(currentColor 0 0);
	background: var(--_g),var(--_g),var(--_g);
	background-size: 50.1% 50.1%;
	animation: 
	  l6-0   1.5s infinite steps(1) alternate,
	  l6-0-0 3s   infinite steps(1);
  }
  .loader::before {
	content: "";
	background: currentColor;
	transform: perspective(150px) rotateY(0deg) rotateX(0deg);
	transform-origin: bottom right; 
	animation: l6-1 1.5s infinite linear alternate;
  }
  @keyframes l6-0 {
	0%  {background-position: 0    100%,100% 100%,100% 0}
	33% {background-position: 100% 100%,100% 100%,100% 0}
	66% {background-position: 100% 0   ,100% 0   ,100% 0}
  }
  @keyframes l6-0-0 {
	0%  {transform: scaleX(1)  rotate(0deg)}
	50% {transform: scaleX(-1) rotate(-90deg)}
  }
  @keyframes l6-1 {
	16.5%{transform:perspective(150px) rotateX(-90deg)  rotateY(0deg)    rotateX(0deg);filter:grayscale(0.8)}
	33%  {transform:perspective(150px) rotateX(-180deg) rotateY(0deg)    rotateX(0deg)}
	66%  {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg)}
	100% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(0.8)}
  }*/
/* HTML: <div class="loader"></div> */
.loader {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  background: linear-gradient(45deg, #00AAFF 50%, rgba(0, 0, 0, 0) 0), linear-gradient(-45deg, #450254 50%, rgba(0, 0, 0, 0) 0), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #104a61 0), linear-gradient(-45deg, rgba(0, 0, 0, 0) 50%, #2d376c 0), #00AAFF;
  background-size: 200% 200%;
  background-repeat: no-repeat;
  animation: l3 2.5s infinite;
}

@keyframes l3 {
  0% {
    background-position: 100% 0, 0 0, 0 100%, 100% 100%;
  }
  15%, 25% {
    background-position: 100% 0, 0 0, 0 100%, 0 0;
  }
  40%, 50% {
    background-position: 100% 0, 0 0, 100% 0, 0 0;
  }
  65%, 75% {
    background-position: 100% 0, 100% 100%, 100% 0, 0 0;
  }
  90%, 100% {
    background-position: 0 100%, 100% 100%, 100% 0, 0 0;
  }
}
.background-spinner {
  display: block;
  /* position: sticky; */
  position: fixed;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 10;
  left: 0;
  top: 0;
  opacity: 1 !important;
  overflow-y: scroll;
  transition: all 0.6s ease-out;
  z-index: 9999999999;
}

.hide-spinner {
  opacity: 0;
  display: none;
  transition: all 0.6s ease-out;
}

.logo {
  opacity: 0;
}

.mini-logo {
  opacity: 1;
  transition: all 0.9s ease-in;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  padding: 10px;
}

.grid-container > div {
  text-align: center;
  padding: 20px 0;
}

.grid-logo {
  grid-column-start: 1;
  grid-column-end: 3;
}

.grid-item {
  margin: auto;
}

.slogan {
  font-size: 3vw !important;
  margin-top: revert;
  color: white !important;
}

.image-area {
  width: 35%;
}
.image-area img {
  margin: 30px;
}

.prod12 {
  width: 370px !important;
}

.h140 {
  height: 140px;
  margin: auto;
}

/*
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,50,105,1) 51%, rgba(0,212,255,1) 100%);
*//*# sourceMappingURL=style-timeline.css.map */