#slider
{
  position: relative;
  width: 100%;
  height: 92vh;
  display: hidden;
}
#slider img
{
  position: absolute;
  width: 100%;
  display: hidden;
}
#slider .slider-content
{
  /*display: none;*/
}
.slider-content {
  width: 430px;
  min-height: 120px;
  background: hsla(0,0%,100%,.8);
  position: absolute;
  bottom: 10px;
  padding: 20px;
  border-bottom: 4px solid #019dc6;
}
.slider-content h2 a{
  color: #000;
}
.slider-content h2 {
  color: #333333;
  font-size: 16px;
  font-weight: 100;
  line-height: 1.2;
  margin-top: 0;
  letter-spacing: 1px;
}

.slider-content p {
  font-size: 16px;
  font-family: "Roboto";
  color: #000;
  font-weight: 300;;
  line-height: 1.5;
}
.slider-nav{
  width: 100%;
  position: absolute;
  top: 40vh;
  z-index: 9;
  font-size: 60px;
  padding: 10px;
}
.slider-nav #prev, .slider-nav #next{
  color: #fff;
  cursor: pointer;
  opacity: 1;
}
.slider-nav #prev:hover, .slider-nav #next:hover{
  opacity: .7;
}

.maruf-slider-btn {
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding: 11px 64px 10px 10px;
  color: #019dc6;
  font-family: "Roboto";
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  background: transparent;
  box-shadow: inset 0 0 0 1px #019dc6;
  overflow: hidden;
  transition: all 300ms; 
}
.maruf-slider-btn::before {
  transform: translateY(-50%);
  display: block;
  position: absolute;
  right: 8px;
  top: 50%;
  height: 14px;
  width: 14px;
  content: '';
  background-image: url(arrow-button.png);
  background-size: 18px;
  background-position: -10px -4px;
  background-repeat: no-repeat;
  z-index: 2; 
}
.maruf-slider-btn::after {
  transform: skewX(-22deg);
  display: block;
  position: absolute;
  top: -1px;
  right: -53px;
  bottom: -1px;
  width: 90px;
  content: '';
  background-color: #019dc6;
  transition: transform 0.3s, background-color 0.3s; 
}
a.maruf-slider-btn:hover {
  box-shadow: inset 0 0 0 1px #011e41;
  color: #011e41;
}

.maruf-slider-btn:hover:after {
    background-color: #011e41;
}
/* Responsive */

@media only screen and (max-width: 768px) {
  #slider
  {
    height: 330px;
  }
  .maruf-slider h2 {
    font-size: 20px;
  }
  .maruf-slider h4 {
    font-size: 16px;
  }
  .slider-content {
    padding: 2%;
    width: 100%;
    bottom: 0px;
    min-height: 100px;
  }
  .slider-nav{
    top: 145px;
    font-size: 40px;
  }
  .maruf-slide .container{
    width: 100%;
    padding: 0 !important;
  }
}

@media only screen and (max-width: 400px) {
  #slider
  {
    height: 300px;
  }
}