/*
	styles for mobile slider
*/

/* Swipe 2 required styles */
body,
html {
  margin: 0;
}
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
  z-index: 1;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
  background-image: none;
  z-index: 1;
}
.swipe-wrap > div {
  float: left;
  width: 100%;
  position: relative;
  z-index: 1;
}
/* END required styles */

/* structure and layout */
#mySwipe {
  background-image: none;
  background-color: #111;
  text-align: center;
  margin: 0 auto;
  box-shadow: 4px 4px 7px 2px rgba(0, 0, 0, 0.5);
}
#hcpSlider {
  position: relative;
}
.nonTouch {
  margin-bottom: 100px;
}
.touch {
  width: 100%;
}

/* media queries */
/* small */
@media only screen and (max-width: 40em) {
  #hcpSlider {
    margin: 21px auto;
  }
}

/* medium-up */
@media only screen and (min-width: 40.5em) {
  #hcpSlider {
    margin: 50px auto;
  }
}

/* min-height for .orbit-container by Foundation breakpoint */
/* medium: 320 */
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
}
/* large: 385 */
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
}
/* xlarge: 550 */
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
}
/* xxlarge: 740 */
@media only screen and (min-width: 120.063em) {
}

/* make images fill the container */
.touch img {
  display: block;
  width: 100%;
}
.nonTouch img {
  display: block;
  width: 100%;
}

.touch video {
  display: block;
  width: 100%;
}

.touch iframe {
  display: block;
  width: 100%;
}

/* navigation controls */
#prevNext {
  position: relative;
  cursor: pointer;
  z-index: 10;
  height: 100%;
}
#prevNext div {
  position: absolute;
  top: 250px;
  width: 50px;
  height: 50px;
  opacity: 0;
}
#nextDiv {
  right: 10px;
  background-image: url("../images/arrowRight.png");
}
#prevDiv {
  left: 10px;
  background-image: url("../images/arrowLeft.png");
}

/* caption styles */
#hcpSlider p {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
  position: absolute;
  right: 0;
  margin-bottom: 0;
  padding: 11px;
  color: white;
  background-color: rgba(10, 10, 10, 0.7);
  border-radius: 10px 0 0 0;
  bottom: -5em;
}

.touchCaption {
  font-size: 123%;
}

.caption {
  font-size: 123%;
}

/* hide img alt text: match color to background */
img {
  color: #000;
  border: none;
}