.slide-container {
  margin: 50vh auto 0 auto;
  transform: translateY(-50%);
  width: 100%;
  height: 450px;
  overflow: hidden;
}
img {
  width: 20%;
}

.image-container {
  display: inline-block;
  width: 3000px;
  height: 400px;
  position: relative;
  transition: left 1s;
  
  animation: slide 20s infinite;
}
.slider-image {
  float: left;
}

.button-container {
  position: relative;
  top: 10px;
}

.slider-button {
  height: 10px;
  width: 10px;
  margin: 4px;
  display: inline-block;
  border-radius: 5px;
  background-color: rgba(#000, 0.5);
}
.slider-button:hover {
  background-color: rgba(#000, 0.7);
}

#slider1:target ~ .image-container {
  left: 0px;
}
#slider2:target ~ .image-container {
  left: -600px;
}
#slider3:target ~ .image-container {
  left: -1200px;
}
#slider4:target ~ .image-container {
  left: -1800px;
}
#slider5:target ~ .image-container {
  left: -2400px;
}

.image-container:hover {
  // animation: slide 10s infinite;
}

@keyframes slide {
  0% {
      left: 0;
  }
  20% {
      left: -600px;
  }
  40% {
      left: -1200px;
  }
  60% {
      left: -1800px;
  }
  80% {
      left: -2400px;
  }
  100% {
      left: 0;
  }
}

/***************************************************************************************/
/* Start Global Rules */
* {
  /* font-family: 'Droid Sans', sans-serif; */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* End Global Rules */
/***************************************************************************************/
/* Start Header */

/* End Features */
/* Start About Us */
.about-us {
  padding: 30px 0;
  background-color: #ececec
}
.about-us .h1 {
  /* font-size: 70px; */
  color: #848484
}
.about-us .responsive-paragraph {
  color: #0f0e0e;
  font-size: 20px;
  text-align: justify;

}
/* End About Us */
/***************************************************************************************/
/* Start Media Query */
@media (max-width: 767px) { /* Mobile & Tablet Rules */
  .visible-xs {
      display: block !important
  }
  .hidden-xs {
      display: none !important
  }
  .responsive-paragraph {
      font-size: 13px !important;
      color: #333 !important;
      letter-spacing: 1.4px;
      text-align: justify
  }
}
@media (min-width: 768px) and (max-width: 991px) { /* Small Screen Rules */
  .container {
      width: 750px
  }
  .visible-sm {
      display: block !important
  }
  .hidden-sm {
      display: none !important
  }
  .responsive-paragraph {
      text-align: center;
      font-size: 17px !important;
      color: #555 !important;
      letter-spacing: 1.3px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) { /* Medium Screen Rules */
  .container {
      width: 970px
  }
  .visible-md {
      display: block !important
  }
  .hidden-md {
      display: none !important
  }
  .responsive-paragraph {
      font-size: 20px !important;
      color: #777 !important;
      letter-spacing: 1.1px;
  }
}
@media (min-width: 1200px) { /* Large Screen Rules */
  .container {
      width: 1170px
  }
  .visible-lg {
      display: block !important
  }
  .hidden-lg {
      display: none !important
  }
}
/* End Media Query */
/***************************************************************************************/
/***************************************************************************************/
/* Start My Framework */
.text-center {
  text-align: center
}
.container {
  margin: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.clearfix {
  clear: both
}
.visible-xs, .visible-sm, .visible-md, .visible-lg {
  display: none
}
.float-left {
  float: left
}
.float-right {
  float: right
}

.responsive-paragraph {
  line-height: 1.8;
  font-size: 26px
}
/* End My Framework */