.more-details-black{
background: #fff;
    border: 2px solid #000;
    border-radius: 1000px;
    padding: 20px 35px;
    color: #000;
    text-align: center;
    font-size: 22px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .more-details-white{
  background:    transparent  ;
  border:        2px solid #ffffff;
  border-radius: 1000px;
  padding:       14px 36px;
  color:         #ffffff;
  display:       inline-block;
  text-align:    center;
  font-size: 20px;
  float: left;
    margin: 35px 0;
  cursor: pointer;

  }
  .more-details-text{
  margin: -7px 0 0 0;
  }
  .owl-carousel div h1{
    position:absolute;
    color:#FFF;
    font-size:26px;
    display:block;
    bottom: 191px;
    left: 40px;
}
.owl-carousel div .textoverlay p{
  visibility: hidden;
}
.owl-item.center > div >.textoverlay > p{
    position: absolute;
    color: #FFF;
    font-size: 18px;
    visibility: visible;
    bottom: 60px;
    text-align: justify;
    line-height: 190%;
}

.owl-item.center > div >.textoverlay > .date{bottom: 140px;}

.owl-carousel div .textoverlay .date{

visibility: visible;

position: absolute;

color: #FFF;

font-size: 23px;

display: block;

bottom: 233px;

left: 40px;
}
.owl-item > div {
    cursor: pointer;
    margin: 5% 2%;
    transition: margin 1s ease;

  }
  .owl-item > div > img{
    height: 430px;
    max-width: 100%;
  } 
  .owl-stage{
      left:-30
  }
  .owl-item.center > div {
    cursor: auto;
    margin: 0%;
  }
  .owl-item.center > div > img{
    height: 600px;
    max-width: 100%;
  } 
  .owl-item.center > div > button{
    visibility: visible;
    }
  .owl-btn{
    visibility: hidden;
    }
  .owl-item:not(.center) > div:hover {
    opacity: .75;
  }


  @media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (-webkit-min-device-pixel-ratio: 3) { 

    .owl-item > div > img{
    height: 400px;
    max-width: 100%;
  }
  .owl-item.center > div > img{
    height: 450px;
    max-width: 100%;
    margin: 40px 0px 0px 0px;
  }
  .owl-carousel div .textoverlay .date{
  visibility: visible;
  position: absolute;
  color: #FFF;
  font-size: 15px;
  display: block;
  bottom: 173px;
  left: 14px;
}
.owl-item.center > div >.textoverlay > p{
  position: absolute;
  color: #FFF;
  font-size: 12px;
  visibility: visible;
  left: 12px;
  text-align: justify;
  width: 191px;
  bottom: 137px;
}
.owl-carousel div h1{
  position: absolute;
  color: #FFF;
  font-size: 12px;
  display: block;
  bottom: 235px;
  left: 12px;
}
.more-details-black{
  background: #fff;
  border: 2px solid #000;
  border-radius: 1000px;
  padding: 18px 35px;
  color: #000;
  text-align: center;
  font-size: 22px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


}
.more-details-black:hover {
    color: #008355;
  
}
.more-details-white{
  background:    transparent  ;
  border:        2px solid #ffffff;
  border-radius: 1000px;
  padding: 10px 16px;
  color:         #ffffff;
  display:       inline-block;
  text-align:    center;
  font-size: 16px;
  float: left;
  margin: 35px 0;
  cursor: pointer;

}
}

@media only screen 
  and (min-width: 375px)
  and (max-height: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
  .owl-item > div > img{
    height: 200px;
    max-width: 100%;
  }
  .owl-item.center > div > img{
    height: 250px;
    max-width: 100%;
    margin: 50px 0px 0px 0px;
  }
 .owl-carousel div .textoverlay .date{
  visibility: visible;
  position: absolute;
  color: #FFF;
  font-size: 15px;
  display: block;
  bottom: 221px;
  left: 5px;
}
.owl-item.center > div >.textoverlay > p{
  position: absolute;
  color: #FFF;
  font-size: 10px;
  visibility: visible;
  left: 4px;
  text-align: justify;
  width: 195px;
  bottom: 110px;
}
.owl-carousel div h1{
  position: absolute;
  color: #FFF;
  font-size: 14px;
  display: block;
  bottom: 249px;
  left: 5px;
}
.more-details-black{
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 1000px;
  padding: 10px 16px;
  color: #000000;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  float: left;
  margin: 35px 0;
  cursor: pointer;
}
.more-details-white{
  background:    transparent  ;
  border:        2px solid #ffffff;
  border-radius: 1000px;
  padding: 10px 16px;
  color:         #ffffff;
  display:       inline-block;
  text-align:    center;
  font-size: 16px;
  float: left;
  margin: 35px 0;
  cursor: pointer;

}

}
@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 812px) 
and (-webkit-min-device-pixel-ratio: 3) { 
.owl-item > div > img{
  height: 200px;
  max-width: 100%;
  }
  .owl-item.center > div > img{
    height: 250px;
    max-width: 100%;
    margin: 50px 0px 0px 0px;
  }
  .owl-carousel div .textoverlay .date{
  visibility: visible;
  position: absolute;
  color: #FFF;
  font-size: 15px;
  display: block;
  bottom: 221px;
  left: 5px;
}
.owl-item.center > div >.textoverlay > p{
  position: absolute;
  color: #FFF;
  font-size: 10px;
  visibility: visible;
  left: 4px;
  text-align: justify;
  width: 195px;
  bottom: 110px;
}
.owl-carousel div h1{
  position: absolute;
  color: #FFF;
  font-size: 14px;
  display: block;
  bottom: 249px;
  left: 5px;
}
.more-details-black{
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 1000px;
  padding: 10px 16px;
  color: #000000;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  float: left;
  margin: 35px 0;
  cursor: pointer;
}
.more-details-white{
  background:    transparent  ;
  border:        2px solid #ffffff;
  border-radius: 1000px;
  padding: 10px 16px;
  color:         #ffffff;
  display:       inline-block;
  text-align:    center;
  font-size: 16px;
  float: left;
  margin: 35px 0;
  cursor: pointer;

}

}

  @media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2) {
    .owl-item > div > img{
    height: 400px;
    max-width: 100%;
  }
  .owl-item.center > div > img{
    height: 450px;
    max-width: 100%;
    margin: 28px 0px 0px 0px;
  }
  .owl-carousel div .textoverlay .date{
  visibility: visible;
  position: absolute;
  color: #FFF;
  font-size: 18px;
  display: block;
  bottom: 177px;
  left: 14px;
}
.owl-item.center > div >.textoverlay > p{
  position: absolute;
  color: #FFF;
  font-size: 11.34px;
  visibility: visible;
  left: 11px;
  text-align: justify;
  width: 349px;
  bottom: 129px;
}
.owl-carousel div h1{
  position: absolute;
color: #FFF;
font-size: 20px;
display: block;
bottom: 230px;
left: 12px;
}
.more-details-black{
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 1000px;
  padding: 10px 16px;
  color: #000000;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  float: left;
  margin: 35px 0;
  cursor: pointer;
}
.more-details-white{
  background:    transparent  ;
  border:        2px solid #ffffff;
  border-radius: 1000px;
  padding: 10px 16px;
  color:         #ffffff;
  display:       inline-block;
  text-align:    center;
  font-size: 16px;
  float: left;
  margin: 35px 0;
  cursor: pointer;

}
  }

  @media only screen 
and (min-device-width: 1024px) 
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {
    .owl-item > div > img{
    height: 400px;
    max-width: 100%;
  }
  .owl-item.center > div > img{
    height: 450px;
    max-width: 100%;
    margin: 24px 0px 0px 0px;
  }
  .owl-carousel div .textoverlay .date{
    visibility: visible;
position: absolute;
color: #FFF;
font-size: 20px;
display: block;
bottom: 197px;
left: 14px;
}
.owl-item.center > div >.textoverlay > p{
  position: absolute;
  color: #FFF;
  font-size: 12.2px;
  visibility: visible;
  left: 11px;
  text-align: justify;
  width: 349px;
  bottom: 129px;
}
.owl-carousel div h1{
  position: absolute;
color: #FFF;
font-size: 20px;
display: block;
bottom: 250px;
left: 12px;
}
.more-details-black{
background: #fff;
    border: 2px solid #000;
    border-radius: 1000px;
    padding: 20px 35px;
    color: #000;
    text-align: center;
    font-size: 22px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.more-details-white{
  background:    transparent  ;
  border:        2px solid #ffffff;
  border-radius: 1000px;
  padding: 10px 16px;
  color:         #ffffff;
  display:       inline-block;
  text-align:    center;
  font-size: 16px;
  float: left;
  margin: 35px 0;
  cursor: pointer;

}
  }
  @media screen 
and (min-device-width: 1200px) 
and (max-device-width: 1600px) 
and (-webkit-min-device-pixel-ratio: 1) { 
}




/*Next & Previous arrows(Owl)*/
.owl-carousel .nav-btn{
  height: 47px;
  position: absolute;
  width: 26px;
  cursor: pointer;
  top: 300px !important;
}

.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled{
pointer-events: none;
opacity: 0.2;
}

.owl-carousel .prev-slide{
  background: url(/Public/Images/homepage/nav-icon.png) no-repeat scroll 0 0;
  left: 370px;
}
.owl-carousel .next-slide{
  background: url(/Public/Images/homepage/nav-icon.png) no-repeat scroll -24px 0px;
  left: 370px;
}
.owl-carousel .prev-slide:hover{
 background-position: 0px -53px;
}
.owl-carousel .next-slide:hover{
background-position: -24px -53px;
}   
img#desktop {
    object-fit: cover;
    width: 55vw;
    height: 32vw;
}