.swiper-container--content{
  height: 370px;
}

.swiper-slide--content{
  padding:5em 0;
  margin:25px 0;
}
.swiper__title--content{
  font-size: 25px;
  font-weight: normal;
  margin-bottom: 0.5em;
  color: #6f8ba9;
}

.swiper__description--content p{
  font-size: 15px;
  color: #1c1c1c;
  

}

@media (min-width: 768px){
 .swiper__description--content p{
    max-width: 50%;
  }
}


/**
*
* Show navigation arrows on hover
*
**/

.swiper-container--content .swiper-button-prev,
.swiper-container--content .swiper-button-next{
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 400ms, -webkit-transform 300ms;
          transition: opacity 400ms, transform 300ms;
}

  .swiper-container--content .swiper-button-prev{
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  
  .swiper-container--content .swiper-button-next{
    -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
            transform: translateX(100%);
  }

.swiper-container--content:hover .swiper-button-prev,
.swiper-container--content:hover .swiper-button-next{
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
  filter: alpha(opacity=100);
}

/*
*
* img and content box
* ------------------------------------------------------------
*/

.swiper-content-box{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  top:0;
  left: 0;
}

.swiper-img-box{
  position: absolute;
  right:0;
  top:0;
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

@media (min-width: 992px){
.swiper-img-box{
    width: 50%;
    height: 100%;
  }

  .swiper-content-box{
    width: 50%;
    height: 100%;
    right: auto;
    left: 0;
    background: rgba(255, 255, 255, 1);
  }  

  .swiper-content-box .swiper__title,
  .swiper-content-box .swiper__description{
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

@media (min-width: 1200px){
  .swiper-content-box .swiper__title,
  .swiper-content-box .swiper__description{
    padding-left: 6rem;
    padding-right: 0;
  }
}