/* A single div slide element handled by unslider */
.slide {
  position: relative;
  /* tell the browser the height if position is absolute! */
  padding-bottom: 50%;
  /* to position the desc relativ to the bottom, you have to give  */
  /* the padding a pixel value! */
  /* padding-bottom: 200px; */
  background-repeat: no-repeat;
  background-position: center;
  background-color: black;
  /* You can specifiy the image section with: */
  /* background-position: 70% 50%; */
  -ms-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  /* Uncomment the next line, if you want to show only a part of the */
  /* image and don't like to scale it down! */
  /* NOTE! This doesn't work on iPhone OS 3_1_3 */
  /* padding-bottom: 300px; */
}

.slide .filter {
  position: absolute;
  padding-bottom: 50%;
  width: 100%;
}

/* The slogan fills the full width of the slider. It's height is defined  */
/* by it's content and aligned with the bottom of the slider. */
.slider .slogan {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #7bb8f5;
}

.slider .slogan-content {
  /* a IE8 workaround (rgba support started with IE9) */
  background: none;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff)";
  background-color: rgba(0,0,0,0.5);
  padding: 0.5em;
}

.slider .slogan h1 {
  font-size: 120%;
  font-weight: normal;
  text-align: center;
  text-shadow: 1px 1px #666;
  /* Check the right parameter before using it! */
  /* filter: dropshadow(color=#666666, offx=2, offy=2); */
  display: block; /* that's the important part */
  text-align: left;
}

/* NOTE! If you want to have a full width text description in the slide, */
/*       you must remove the center property of the slide div. You can */
/*       do this by apply the following rules: */
/* .slide .centered { */
/*   margin: 0px !important; */
/*   width: 100%; */
/* } */

.slide .desc {
  position: absolute;
  /* for a bottom placement set this to the same pixel value as */
  /* set in .slide! */
  /* bottom: -200px; */
  top: 0.5em;
  /* fix the width according to the text, NOT relative to the div width! */
  width: 65%;
  min-width: 14em;
  color: #7bb8f5;
  color: white;
  padding: 0;
  margin: 0;
  -webkit-text-size-adjust: 85% !important;
}

.slide .desc h1 {
  color: white;
  font-size: 150%;
  text-align: center;
  text-shadow: 1px 1px #666;
  /* Check the right parameter before using it! */
  /* filter: dropshadow(color=#666666, offx=2, offy=2); */
  display: block; /* that's the important part */
}

.slide .desc p {
  color: #7bb8f5;
  color: white;

  /* a IE8 workaround (rgba support started with IE9) */
  background: none;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff)";

  background-color: rgba(0,0,0,0.3);

  padding: 0.1em;
  font-size: 100%;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 0.5em;
}

/* The style properties for the unslider navbar */
.slider .unslider-nav ol {
  position: absolute;
  bottom: 3%;
  right: 10%;
  list-style: none;
  text-align: center;
}

.slider .unslider-nav ol li {
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  font-size: 250%;
  margin: 0 0.1em;
  background: transparent;
  border-radius: 0.1em;
  padding: 0.1em;
  overflow: hidden;
  text-indent: -999em;
  border: 1px solid #ccc;
  cursor: pointer;
}

.slider .unslider-nav ol li.unslider-active {
  background: #ddd;
  border: 1px solid white;
  cursor: default;
}

@media screen and (max-width: 599px) {
  .unslider-arrow {
    bottom: 50% !important;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
  }
  .slider .unslider-nav {
    display: none;
  }
  .unslider-arrow {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0.5s, opacity 0.5s ease;
    -moz-transition: visibility 0.5s, opacity 0.5s ease;
    -ms-transition: visibility 0.5s, opacity 0.5s ease;
    -o-transition: visibility 0.5s, opacity 0.5s ease;
    transition: visibility 0.5s, opacity 0.5s ease;
  }
  .slider:hover .unslider-arrow {
    visibility: visible;
    opacity: 1;
    -webkit-transition: visibility 0.2s, opacity 0.2s ease;
    -moz-transition: visibility 0.2s, opacity 0.2s ease;
    -ms-transition: visibility 0.2s, opacity 0.2s ease;
    -o-transition: visibility 0.2s, opacity 0.2s ease;
    transition: visibility 0.2s, opacity 0.2s ease;
  }
}

@media screen and (max-width: 640px) {
  .slider .slide {
  }
}

@media screen and (min-width: 640px) {
  .slide .filter,
  .slider .slide {
    /* tell the browser the height if position is absolute! */
    padding-bottom: 40%;
  }
}

@media screen and (min-width: 768px) {
  .slide .filter,
  .slider .slide {
    /* tell the browser the height if position is absolute! */
    padding-bottom: 35%;
  }
}

@media screen and (min-width: 1024px) {
  .slide .filter,
  .slider .slide {
    /* tell the browser the height if position is absolute! */
    padding-bottom: 30%;
  }
  .slide .desc {
    font-size: 150%;
  }
}

@media screen and (min-width: 1200px) {
  .slide .filter,
  .slider .slide {
    /* tell the browser the height if position is absolute! */
    padding-bottom: 25%;
  }
}

@media screen and (min-width: 1440px) {
  .slide .desc {
    font-size: 180%;
  }
}