@import url("bootstrap.css");
@import url("style.css");
@import url("font-awesome.css");
@import url("animate.css");
@import url("jquery.bxslider.css");
@import url("prettyPhoto.css");
@import url("demo.css");
@import url("component.css");
@import url("superslides.css");
/****revolution Slider****/
@import url("../js/plugins/revolution/css/extralayers.css");
@import url("../js/plugins/revolution/css/settings.css");
@import url("../js/plugins/revolution/css/style.css");


/* Featured*/

:root {
    --items-per-page: 4;
}

.carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.carousel-container {
    white-space: nowrap;
}

.carousel-item {
    display: inline-block;
    min-width: calc(47% / var(--items-per-page)); /* Display 3 items at a time */
    padding: 40px 19px;
    text-align: center;
   
}
/* Featured-end*/
/*media*/
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.dd:hover .image {
  opacity: 0.3;
}

.dd:hover .middle {
  opacity: 1;
}
/*media-end*/