@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700,800);

/* carousel / slider **/
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  width: 100%;
}

.carousel .carousel-control { visibility: hidden; }
.carousel:hover .carousel-control { visibility: visible; }

.carousel-control.left, .carousel-control.right {
  background: none !important;
  filter: progid: none !important;
  outline: 0;
}
.carousel .carousel-control {
  visibility: hidden;
}
.carousel:hover .carousel-control {
  visibility: visible;
}

.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-control {
    z-index: 2;
}
.carousel-caption h2 {
  color: #FFF;
  font-size: 46pt;
  font-family: 'Roboto', sans-serif;
}
.carousel-caption h4 {
  color: #FFF;
  font-size: 26pt;
  font-family: 'Roboto', sans-serif;
}

/************NEW SLIDER CONTROLS ***********/

.carousel-caption button{
  width: 240px;
  height: 60px;
  background: #3a9ecb;
  color: #fff;
  font-size: 30px;
  text-transform: uppercase;
  border:0;
  transition:all .5s ease 0s;
  -webkit-transition:all .5s ease 0s;
  -moz-transition:all .5s ease 0s;
  -o-transition:all .5s ease 0s;
  -ms-transition:all .5s ease 0s;
}

.carousel-caption button:hover{
  background: #2a2a2a;
}
.carousel-control{
  width: 5%;
}
.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
  font-size: 20px;
  padding: 5px;
  background: #000;
  border-radius: 50%;
  color: #FFF;
  margin-left: 0;
  margin-top: 50px;
}
.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
  font-size: 20px;
  padding: 5px;
  background: #000;
  border-radius: 50%;
  color: #FFF;
  margin-right: 0;
  margin-top: 50px;
}

@media all and (transform-3d),
(-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@media only screen and (max-width: 480px) {
  #myCarousel {
    margin-top: 52.5%;
    }
}