/**************************************/
/*         Carousel (kolotoč)         */
/**************************************/

#plocha #myCarousel,
#myCarousel div {
	width: 960px; height: 320px; padding: 0; background: transparent url();
}

/* CUSTOMIZE THE NAVBAR
------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container { padding-left: 0; padding-right: 0; }
.navbar-wrapper .navbar { padding-left: 15px; padding-right: 15px; }


/* CUSTOMIZE THE CAROUSEL
------------------------------------- */

/* Carousel base class */
.carousel { position: relative; margin-bottom: 20px; }

.carousel .item { height: 320px; /*background-color: #777;*/ }

#myCarousel > .carousel-inner { position: relative; overflow: hidden; } /* default */
#myCarousel > .carousel-inner > .item { background: rgba(255,255,255,.16) url(); }
#myCarousel > .carousel-inner > .bgBlack { background: #000000 url(); }
#myCarousel > .carousel-inner > .bgDark { background: rgba(0,0,0,.5) url(); }
#myCarousel > .carousel-inner > div .frame {
	width: auto; height: auto; padding: 0 10px; background: rgba(0,0,0,.5) url();
	border-top: 1px solid #000000; border-bottom: 1px solid rgba(255,255,255,.32);
	border-radius: 9px; border-shadow: 0px 0px 2px #000000;
}
#myCarousel > .carousel-inner > .bgBlack h5,
#myCarousel > .carousel-inner > .bgDark h5,
#myCarousel > .carousel-inner > .bgBlack .frame,
#myCarousel > .carousel-inner > .bgDark .frame {
	background: rgba(255,255,255,.16) url();
	border-top: 1px solid rgba(255,255,255,.32); border-bottom: 1px solid #000000;
}
#myCarousel > .carousel-inner > * .frame.bgDark {
	background: rgba(0,0,0,.75) url();
}

.carousel-inner > .item {
	position: relative; display: none;
	-webkit-transition: 0.8s ease-in-out left;
	        transition: 0.8s ease-in-out left;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block; height: inherit; width: auto; max-width: 100%; line-height: 1;
  border: 0 none; margin: 0; padding: 0;
}
.carousel-inner > .item > img { position: absolute; top: 0; left: 0; }
.carousel-inner > .item > img.ac { left: auto; right: auto; }
.carousel-inner > .item > img.ar { left: auto; right: 0; }

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev { display: block; }

.carousel-inner > .active { left: 0; }

.carousel-inner > .next,
.carousel-inner > .prev { position: absolute; top: 0; width: 100%; }

.carousel-inner > .next { left: 100%; }

.carousel-inner > .prev { left: -100%; }

.carousel-inner > .next.left,
.carousel-inner > .prev.right { left: 0; }

.carousel-inner > .active.left { left: -100%; }

.carousel-inner > .active.right { left: 100%; }

.carousel-control {
	position: absolute; top: 0; bottom: 0; left: 0; width: 15%;
  font-size: 20px; color: #ffffff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  opacity: 0.5; filter: alpha(opacity=50);
}

.carousel-control.left {
  background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}

.carousel-control.right {
  right: 0; left: auto;
  background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}

.carousel-control:hover,
.carousel-control:focus {
  color: #ffffff; text-decoration: none;
  opacity: 0.9; filter: alpha(opacity=90);
}

.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute; top: 50%; z-index: 5; display: inline-block;
}

.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
  left: 50%;
}

.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
  right: 50%;
}

.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: 20px; height: 20px; margin-top: -10px; margin-left: -10px;
}

.carousel-control .icon-prev:before {
  content: '\2039';
}

.carousel-control .icon-next:before {
  content: '\203a';
}

.carousel-indicators {
	position: absolute; z-index: 15; bottom: -3px; left: 50%; width: 60%;
	padding-left: 0; margin-left: -30%; text-align: center; list-style: none;
}

.carousel-indicators li {
	display: inline-block; width: 10px; height: 10px; margin: 1px;
  text-indent: -999px; cursor: pointer;
	background-color: #000 \9; background-color: transparent;
	border: 1px solid #FFFFFF; border-radius: 10px;
}

.carousel-indicators .active { width: 12px; height: 12px; margin: 0; background-color: rgba(255, 255, 255, 0.6); }

#myCarousel .container > div {
	position: relative; float: left; z-index: 10; margin: 20px; width: 920px; height: 280px;
  color: #ffffff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
#myCarousel .container > div.left { float: left; width: 440px; }
#myCarousel .container > div.right { float: right; width: 440px; }




/* MARKETING CONTENT
-------------------------------------------------- */

/* Pad the edges of the mobile views a bit */
.marketing { padding-left: 15px; padding-right: 15px; }

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 { text-align: center; margin-bottom: 20px; }
.marketing h2 { font-weight: normal; }
.marketing .col-lg-4 p { margin-left: 10px; margin-right: 10px; }


/* Featurettes
------------------------- */

.featurette-divider { margin: 80px 0; /* Space out the Bootstrap <hr> more */ }

/* Thin out the marketing headings */
.featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -1px; }


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {

  /* Remove the edge padding needed for mobile */
  .marketing {
    padding-left: 0;
    padding-right: 0;
  }

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-left:  15px;
    padding-right: 15px;
  }
  .navbar-wrapper .navbar {
    padding-left:  0;
    padding-right: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }

}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}