/* NEED TO FIX ACTIVE CROPPED BULLET - OVERFLOW HIDDEN ISSUE */

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700|Titillium+Web:400,700&display=swap");
@font-face {
  font-family: "Roboto-Black";
  src: url("../fonts/Roboto-Black.ttf");
}

@font-face {
  font-family: "Roboto-Bold";
  src: url("../fonts/Roboto-Bold.ttf");
}
@font-face {
  font-family: "Roboto-Light";
  src: url("../fonts/Roboto-Light.ttf");
}
@font-face {
  font-family: "Roboto-Medium";
  src: url("../fonts/Roboto-Medium.ttf");
}
@font-face {
  font-family: "Roboto-Regular";
  src: url("../fonts/Roboto-Regular.ttf");
}
@font-face {
  font-family: "Roboto-Thin";
  src: url("../fonts/Roboto-Thin.ttf");
}



body {
  background: #f5f7fa;
  margin-top: 30px;
  overflow-x:hidden;
}
.loading-bar__wrapper {
  background: #fff;
  border-radius: 5px;
  padding: 0px 100px 0px 100px;
  z-index: 99;
}
.loading-bar__wrapper label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 12px;
  font-style: italic;
  font-weight: bold;
  color: #bcbec0;

}
.loading-bar {
  border-bottom:3px dashed #bcbec0;
  height: 20px;
top:0px;
 z-index: 99;
position:relative; 
}
.loading-bar-bullet::before {
  content: "";
  display: block;
  background: #bcbec0;
  height: 22px;
  width: 22px;
  border-radius: 100px;
  z-index:9999;
  margin-top: 10px;
  cursor: pointer;
}
.slick-current.loading-bar-bullet::before {
  height: 22px;
  width: 22px;
  margin-left: -9px; /* Center bullet - Half .slick-current width*/
  border: 0px solid white;
  background: #ff440a; 
  margin-top: 10px;  z-index:9999;
}
.labels {
  margin-top: 0px;
  text-align: center;

}

.labels p {
 padding: 0 75px;
 font-family: "Roboto-Regular", sans-serif;
}

.stroke{
 width:5px;
 height:30px;
 display:inline-block;
 background:#ff440a;
 position:relarive;
 padding:20px 0;
 top:0;
 bottom:0;
 overflow:hidden;
}
/* Arrows */
.slick-prev,
.slick-next {
 position: absolute;
    top:-25%;
    margin-top: 7px;
    z-index: 2;
    cursor: pointer;
    background: #034ea2;
    border: 5px solid #fff;
    padding: 7px;
    border-radius: 100%;
    box-shadow: 0 0 0 2px #ed1c24;
    display: inline-block;
    transition: .3s ease;
    height: 40px;
    width: 40px;
	
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: none ;
  outline: none;
 background: #ff440a;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.5;
}
.slick-prev:before{
  font-size: 16px;
  line-height: 1;
   content:"The Beginning";
  color:#004aab;
  display:block;
  width:130px;
  position:absolute;
  top:45px;
  left:-50px;
}

.slick-next:before {
  font-size: 16px;
  line-height: 1;
  content:"The Present";
   color:#004aab;
  display:block;
  width:100px;
  position:absolute;
  top:45px;
 right:-35px;
}

.slick-prev {
  left: -40px; font-size: 0px;
}
.slick-prev:before {
  
}
.slick-next {
  right: -40px; font-size: 0px;
}
.slick-next:before {
  
}

.qb-button {
  display: inline-block;
  padding: 0px 15px;
  margin-top: 0px;
  margin-bottom: 10px;
  color: #004aab;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
.qb-button:hover {
  color: #000;
}

@media (max-width: 767px) {
.loading-bar__wrapper {
  background: #fff;
  border-radius: 5px;
  padding: 0px 5px 0px 5px;
  z-index: 99;
  height:100%;
}
.labels p {
 padding: 0;
 font-family: "Roboto-Regular", sans-serif;
}
.slick-prev,
.slick-next {
 position: absolute;
    top:-20%;
    margin-top: 7px;
    z-index: 2;
    cursor: pointer;
    background: #034ea2;
    border: 5px solid #fff;
    padding: 7px;
    border-radius: 100%;
    box-shadow: 0 0 0 2px #ed1c24;
    display: inline-block;
    transition: .3s ease;
    height: 20px;
    width: 20px;
}
.slick-prev:before{
  font-size: 16px;
  line-height: 1;
   content:"The Beginning";
  color:#004aab;
  display:block;
  width:130px;
  position:absolute;
  top:45px;
  left:-20px;
}

.slick-next:before {
  font-size: 16px;
  line-height: 1;
  content:"The Present";
   color:#004aab;
  display:block;
  width:100px;
  position:absolute;
  top:45px;
 right:-15px;
}

.slick-prev {
  left: -10px; font-size: 0px;
}
.slick-prev:before {
  
}
.slick-next {
  right: -10px; font-size: 0px;
}

.loading-bar-bullet::before {
  content: "";
  display: block;
  background: transparent;
  height: 22px;
  width: 22px;
  border-radius: 100px;
  z-index:9999;
  margin-top: 10px;
  cursor: pointer;
}









}