:root{
  /* --first-color: #0D1A26;
  --second-color: #3F688C;
  --third-color: #3B4B59;
  --fourth-color: #657A8C;
  --fifth-color: #A9C6D9; */

  --parentWidthBase: 0.8;
  --parentWidth: calc(var(--parentWidthBase) * 100vw);
  --parentMaxWidth: 1000px;
  --numDots: calc(3 * 2);
  --dotWidth: 50px;

  --active: var(--fourth-color);
  --inactive: var(--fifth-color);
}

.flex-parent{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
  margin-top: 100px;
}
.input-flex-container{
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: var(--parentWidth);
	height: 100px;
	max-width: var(--parentMaxWidth);
	position: relative;
	z-index: 0;
}

.time{
	width: var(--dotWidth);
	height: var(--dotWidth);
	background-color: var(--active);
	position: relative;
	border-radius: 50%;
}
.time:hover{cursor: pointer}
.time::before, .time::after {
		content: '';
		display: block;
		position: absolute;
		z-index: -1;
		top: 50%;
		transform: translateY(-50%);
		background-color: var(--active);
		width: calc(var(--parentWidth) / (var(--numDots)));
		height: 14px;
		max-width: calc(var(--parentWidth) / var(--numDots));
  }
.time::before{left: calc(-1 * var(--parentWidth) / var(--numDots) + var(--dotWidth) / 2)}
.time::after{right: calc(-1 * var(--parentWidth) / var(--numDots) + var(--dotWidth) / 2)}
.time.active{background-color: var(--active)}
.time.active::before{background-color: var(--active)}
.time.active::after{background-color: var(--inactive)}
.time.active span{font-weight: 700}
.time.active span::before{font-size: 21px}
.time.active span::after{font-size: 25px}
.time.active ~ .time, .time.active ~ .time::before, .time.active ~ .time::after{background-color: var(--inactive)}
.time span{
		width: 1px;
		height: 1px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		visibility: hidden;
  }
.time span::before, .time span::after{
			visibility: visible;
			position: absolute;
			left: 50%;
  }
.time span::after{
			content: attr(data-page);
			top: 25px;
			transform: translateX(-50%);
			font-size: 14px;
    }
.time span::before{
			content: attr(data-info);
      text-align: center;
			top: calc(-1 * var(--dotWidth) - 10px);
			width: 70px;
			transform: translateX(-50%);
			font-size: 20px;
    }

/* --- Style elements of the text --- */
.page-content{
    	/* width: var(--parentWidth);
    	font-weight: 400;
    	font-size: 22px;
    	margin-top: 100px;
    	max-width: var(--parentMaxWidth);
      min-height: 50vh; */
      position: relative;
      width: 100%;
      margin: 2em 0;
      overflow: hidden;
      -webkit-transition: height 0.4s;
      -moz-transition: height 0.4s;
      transition: height 0.4s;
    }
.page-content	.page-text{
        position: absolute;
    		margin-top: 0;
        margin-left: auto;
        margin-right: auto;
        z-index: 1;
        width: 80%;
        left: 0;
        top: 0;
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
        padding: 0 5%;
        opacity: 0;
        -webkit-animation-duration: 0.4s;
        -moz-animation-duration: 0.4s;
        animation-duration: 0.4s;
        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
      }
.page-content	.page-text.active{
  /* visible event content */
  position: relative;
  z-index: 2;
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

/* Content animation */
.page-content div.enter-right, .page-content div.leave-right {
  -webkit-animation-name: cd-enter-right;
  -moz-animation-name: cd-enter-right;
  animation-name: cd-enter-right;
}
.page-content div.enter-left, .page-content div.leave-left {
  -webkit-animation-name: cd-enter-left;
  -moz-animation-name: cd-enter-left;
  animation-name: cd-enter-left;
}
.page-content div.leave-right, .page-content div.leave-left {
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  animation-direction: reverse;
}

@-webkit-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -moz-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@-webkit-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}