.slides {
  overflow: hidden;
  position: relative;
  margin: 0;
  /*z-index: -3;*/
}

.slide {
  position: absolute;
}

.slide img {
  		width: 100%;
  		height: auto;
	}

.slide .image {
  display: inline-block;
}

.image-heading {
	position:absolute;
	width: 100%;
	color: white;
}

.controls {
  color: #fff;
  clear: both;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /*z-index: -2;*/
}

.navigation a {
  position: absolute;
  top: 50%;
  display: inline-block;
  padding: 0.4em;
  cursor: pointer;
}

.navigation {
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	/*z-index: -1;*/
}

.navigation:hover > .prev, .navigation:hover > .next {
	 visibility: visible;
}

.prev, .next {
	display: block;
	width: 45px;
	height: 45px;
	border-radius: 10px;
	color: #FFF;
	text-align: center;
}

.navigation .prev {
  visibility: hidden;
}

.navigation .next {
  visibility: hidden;
}

.slider-pagination {
  position: absolute;
  bottom:0.5em;
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align:center;
  font-size: 0.8em;
}

.slider-pagination li {
  display: inline-block;
  cursor: pointer;
  border-radius: 2em;
  width: 1em;
  height: 1em;
  padding: 0.5em;
  background: #fff;
  margin: 0.25em;
}

.slider-lineal {
    display: block;
    height: 30px;
    background-image: url('../img/bg-lineal.png');
    background-size: 31px 30px;
    background-repeat: repeat-x;
}


/* Small only */
@media screen and (max-width: 39.9375em) {
	
	.image-heading {
		visibility: hidden;
	}
	
	.navigation {
		visibility: hidden;
	}
	
	.slider-pagination {
		visibility: hidden;
	}
	

}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	
	.image-heading {
		top: 30%;
		left: 20%;
	}
	
	.image-heading h3 {
		font-size: 1.6rem;
		line-height: 1.2;	
		font-weight: 200;
	}

	.image-heading h4 {
		font-size: 1.0rem;
		font-weight: 700;	
	}
	
	.navigation .prev {
		left: 3%;
	}
	
	.navigation .next {
		right: 3%;
	}
	
}

/* Large and up */
@media screen and (min-width: 64em) {

	.image-heading {
		top: 50%;
		left: 35%;
	}
	
	.image-heading h3 {
		font-size: 2.0rem;
		line-height: 1.4;	
		font-weight: 200;
	}

	.image-heading h4 {
		font-size: 1.1rem;
		font-weight: 700;	
	}
	
	.navigation .prev {
		left: 16.66667%;
	}
	
	.navigation .next {
		right: 16.66667%;
	}
}

