
.title {
	background: rgba(255, 255, 255, 0.7);
	color: #333;
	position: fixed;
	text-align: right;
	top: 0;
	right: 0;
	padding: 10px 15px;
	margin: 0;
	z-index: 100;
}

.slider {
       position: relative;
    overflow: hidden;
    height: 300px;
    width: 100%;
    margin: auto;
    box-shadow: 0px 0px 10px 0px #8f8c8cd6;
    /* border: 2px solid #979191; */
    border-radius: 10px;
}

.slide {
	background-position: center center;
	background-size: cover;
	position: absolute;
	top: 0;
	
	height: 100%;
	width: 50%;
}

.slide.active {
	transform: translateX(-100%);
}

.slide .info {
background-color: rgba(255, 255, 255, 0.7);
    color: #333;
    padding: 20px 15px;
    position: absolute;
    opacity: 0.1;
    bottom: 0px;
    left: 0px;
    text-align: center;
    width: 60%;
    max-width: 100%;
}

.slide.active .info{
	opacity: 1;
	transform: translateY(-40px);
	transition: all 0.5s ease-in-out 0.8s;
}

.facility .info h1 {
    margin: 10px 0;
line-height: 35px !important;
    font-size: 20px !important;
}

.facility{
 
        padding: 110px 0px 110px;
}

.facility .info p {
	letter-spacing: 1px;
}

.eraser {
	background: #f5f5f5;
	position: absolute;
	transition: transform 0.5s ease-in-out;
  opacity: 0.95;
	top: 0;
	left: 100%;
	height: 100%;
	width: 100%;
	z-index: 100;
}

.eraser.active {
	transform: translateX(-100%);
}

.buttons-container {
	position: absolute;
	bottom: 50px;
	right: 60px;
/*   display: flex; */
  
}

.buttons-container button {
	border: 2px solid #fff;
	background-color: transparent;
	color: #fff;
	cursor: pointer;
	padding: 8px 30px;
  margin-right: 10px;
}

.buttons-container button:hover {
	background-color: #fff;
	color: #A9A9A9;
  opacity: 0.9;
}

.product-item {
  margin-top: 0px;
  width: 100%;
  display: table;
  overflow: hidden;

  height: 400px;
}

.product-item .product-item-img {

  width: 450.8px;
  height:400px;
  position: relative;
  -webkit-transition: width .3s;
  transition: width .3s;
  display: table-cell;
  border: 2px solid #fff;
  overflow: hidden;
}

.product-item .product-item-img:first-child {
  margin-left: 0px;
}

.product-item .product-item-img:last-child {
  margin-right: 0px;
}

.product-item .product-item-img:hover span {
  left: 50px;
  opacity: 1;
}

.product-item .product-item-img img {
position: absolute;
    left: 0;
    -webkit-transition: all .3s;
    transition: all .3s;
  
    overflow: hidden;
    width: 100%;
    height: 400px;
}

.product-item .product-item-img span {
 -webkit-transition: left .3s;
    transition: left.3s;
    position: absolute;
    bottom: 0px;
    color: white;
    /* left: -42px; */
    opacity: 1;
    width: auto;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    font-size: 14px;
    /* text-shadow: 0px 0px 10px #f1f1f1; */
    filter: dropshadow(color=#f1f1f1, offx=0, offy=0);
    /* rotate: 89deg; */
    transform: rotate(-90deg) translateY(100%);
    top: auto;
    transform-origin: left bottom;
    -moz-transform: rotate(-90deg) translateY(100%);
    -webkit-transform: rotate(-90deg) translateY(100%);
    background: #000000e6;
    padding: 10px;
}

.product-item .product-item-img:hover {
  width: 920px;
  height:auto;
   
}

.product-item .product-item-img:hover  span{
  -webkit-transition: left .3s;
    transition: left.3s;
    position: absolute;
    bottom: 0px;
    color: white;
     left: 0px; 
    opacity: 1;
    width: auto;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    font-size: 14px;
    /* text-shadow: 0px 0px 10px #f1f1f1; */
    filter: dropshadow(color=#f1f1f1, offx=0, offy=0);
    /* rotate: 89deg; */
    transform: rotate(-90deg) translateY(100%);
    top: auto;
    transform-origin: left bottom;
    -moz-transform: rotate(-90deg) translateY(100%);
    -webkit-transform: rotate(-90deg) translateY(100%);
    background: #000000e6;
    padding: 10px;
}
.responsive1{
    position:relative;
}
.responsive1 img{
   width:100%;
   height:350px;
}

.slick-dots {
  text-align: center;
  margin: 0 0 10px 0;
  padding: 0;
}
.slick-dots li {
  display: inline-block;
  margin-left: 4px;
  margin-right: 4px;
}
.slick-dots li.slick-active button {
  background-color: black;
}
.slick-dots li button {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  background-color: #999;
  border: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.slick-dots li :hover {
  background-color: black;
}

/* Custom Arrow */
.prev {
  color: #999;
  position: absolute;
  top: 38%;
  left: -2em;
  font-size: 1.5em;
}
.prev :hover {
  cursor: pointer;
  color: black;
}

.next {
  color: #999;
  position: absolute;
  top: 38%;
  right: -2em;
  font-size: 1.5em;
}
.next :hover {
  cursor: pointer;
  color: black;
}
.facility .info{    background: #ffffffad;
    position: absolute;
    bottom: 1%;
    left: 0%;
    padding: 0px 40px;
    height: 60px;
    line-height: 20px;
}
.facility .info h1{ 
    line-height:20px;
}
@media screen and (max-width: 800px) {
  .next {
    display: none !important;
  }
}

@media (max-width: 400px) {
	.slide .info {
		top: 100px;
		left: 10px;
	}
}