/* Slideshow container */
.slideshow-container {
	width:100%;
	margin-bottom: -4px;
}

.dot {

	display: inline-block;
	background-color: #f1f1f1;
	font-weight: 700;
	padding: 10px 20px;
	border-radius: 40px;
	margin-left: 7px;
	margin-right: 7px;
	margin-bottom: 15px;
	text-transform: uppercase;
	font-size: 11px;
	cursor: pointer;
}

.dot:hover {
  background-color: #ccc;
}
.dot .active {
  background-color: #ccc;
}


.levels {
	display: inline-block;
	background-color: #fff;	
	font-weight: 700;
	padding: 7px 30px;
	text-transform: uppercase;
	font-size: 11px;
	cursor: pointer;
	border-top:4px #fff solid;
	border-left:4px #fff solid;
	border-right:4px #fff solid;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;

	-webkit-transition: all .25s;
	   -moz-transition: all .25s;
	    -ms-transition: all .25s;
	     -o-transition: all .25s;
	        transition: all .25s;
}

.levels:hover {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background-color: #ccc;
	border-top:4px #ccc solid;
	border-left:4px #ccc solid;
	border-right:4px #ccc solid;

	-webkit-transition: all .25s;
	   -moz-transition: all .25s;
	    -ms-transition: all .25s;
	     -o-transition: all .25s;
	        transition: all .25s;

}


.levels-active {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background-color: #f2f2f2;
	border-top:4px #f2f2f2 solid;
	border-left:4px #f2f2f2 solid;
	border-right:4px #f2f2f2 solid;

	-webkit-transition: all .25s;
	   -moz-transition: all .25s;
	    -ms-transition: all .25s;
	     -o-transition: all .25s;
	        transition: all .25s;

}


.stepper-wrapper {
	padding: 40px 0px;
	width:100%;
	margin-top: auto;
	display: flex;
	justify-content: space-between;
}
.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 5px solid #292929;
  width: 100%;
  top: 35px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 5px solid #292929;
  width: 100%;
  top: 35px;
  left: 50%;
  z-index: 2;
}

.stepper-item .step-counter {
	position: relative;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: #292929;
	margin-bottom: 6px;
	font-size: 25px;
	font-weight: 700;
	color:#fff;
}

.stepper-item .step-name {
	font-size: 16px;
	font-weight: 700;
	color:#292929;
}

.stepper-item.completed .step-counter {
  background-color: #7686a4;
}

.stepper-item.completed::after {
	position: absolute;
	content: "";
	border-bottom: 5px solid #7686a4;
	width: 100%;
	top: 35px;
	left: 50%;
	z-index: 3;
}

.stepper-item:first-child::before {
  content: none;
}
.stepper-item:last-child::after {
  content: none;
}