/*
 * Created by Keith Mthunzi, manages the css for box-slider.js
 */

 .box-slider ul.list {
	list-style-type: none;
    position:relative;
}

.box-slider ul.list li {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

.box-slider {
  width: 100%;
  height: 650px;
  background-color: lightgrey;
	overflow: hidden;
}

.box-slider-prev,
.box-slider-next{
  margin: 0;
  max-width: 50px;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.box-slider-prev{
  left: 0px;
}
.box-slider-next{
  right: 0px;
}

.box-slider-indicator{
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 14px;
}

.box-slider-background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%
}

.box-item{
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.box-item-content img{
  margin-bottom: 0px;
}


/*
when .box-item:hover, show overlay.
overwrite .box-item-overlay."position"
*/
.box-item.box-item-reveal .box-item-overlay.top {
  top: 0;
}
.box-item.box-item-reveal .box-item-overlay.right {
  right: 0;
  left: 0;
}
.box-item.box-item-reveal .box-item-overlay.bottom {
  bottom: 0;
}
.box-item.box-item-reveal .box-item-overlay.left {
  left: 0;
}

.box-item.box-item-hide .box-item-overlay.top {
  top: -100%;
}
.box-item.box-item-hide .box-item-overlay.right {
  right: -200%;
  left: 100%;
}
.box-item.box-item-hide .box-item-overlay.bottom {
  bottom: -100%;
}
.box-item.box-item-hide .box-item-overlay.left {
  left: -100%;
}

/*
by default, overlay is visible…
*/
.box-item-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;

  background: red;
  color: #fff;
  overflow: hidden;
  text-align: center;
  /* fix text transition issue for .left and .right but need to overwrite left and right properties in .right */
  width: 100%;

  -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
/*
…but this hide it
*/
.box-item-overlay.top {
  top: 100%;
}
.box-item-overlay.right {
  right: 200%;
  left: -100%;
}
.box-item-overlay.bottom {
  bottom: 100%;
}
.box-item-overlay.left {
  left: 100%;
}

.right-gradient {
  background-image: linear-gradient(to right, rgba(255,0,0,0), #050d86);
}

.left-gradient {
  background-image: linear-gradient(to right, #050d86, rgba(255,0,0,0));
}

.box-slider .box-image{
  margin-top: 0;
}
.box-slider .box-text-block{
  position: absolute;
  top:270px;
  max-width:700px;
  margin-left:40px;
  margin-right:40px;
}
/* starts below 1024px */
@media all and (max-width: 1023px) {
  .box-slider .box-image img{
    width: 100%;
    height: 300px;
  }
  .box-slider .box-text-block[direction='right']{
    right: 0% !important;
  }
  .box-slider .box-text-block[direction='left']{
    left: 0% !important;
  }
  .box-slider-indicator{
    bottom: 20px;
  }
  .box-item-content h2 {
    font-size: 45px;
  }
  .box-item-content h3 {
    font-size: 35px;
  }
}
/* end below 1024px */

/* starts above 1023px */
@media all and (min-width: 1024px) {
  .box-slider .box-image{
    margin-top: 100px;
  }
  .box-slider .box-text-block{
    top:125px;
  }
}
/* end below 1023px */