﻿  

    
@keyframes carouselCaption { 

    0% {
        opacity: 0; 
        transform: translateY(200px); 
    } 
    
    32% { 
        opacity: 1; 
        transform: translateY(5px);
    } 

    38% { 
        opacity: 1; 
        transform: translateY(0);
    } 
        
    82% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
    
    100% { 
        opacity: 1;
    } 
}


.carousel-control.left {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .0001) 100%);
    
}

.carousel-control.right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .1) 100%);
    
}

.carousel-fade .carousel-inner .item {
  
  opacity: 0;

  transition-property: opacity;
  transition-duration: 0s;
  transition-timing-function: ease-in-out;
 
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  position: absolute;
  z-index:0;
  
  transform: translate3d(0,0,0) !important;

}

.carousel-fade .carousel-inner .active {
  opacity: 0.2;
  /*transition: opacity 1s ease-out;*/
}

.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: 0;
}

.carousel-fade .carousel-control {
  z-index: 2;
}


@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);
    }

}

    .content-area {
        position: relative;
        width: 100%;
        margin: 0 auto;
    }

    .carousel-indicators li {
        border-radius: 50%;
        height: 8px;
        width: 8px;
        display:none;
    }

    .carousel-indicators .active {
        height: 8px;
        width: 8px;
        margin: 1px;
        display:none;
    }
    .carousel-indicators li {
        border: 1px solid #eeeeee;
    }
    .carousel-indicators .active {
        background-color: #eeeeee;
        border: 1px solid #eeeeee;
    }

    .carousel,
    .item,
    .active {
        height: 100%;
    }

    .carousel-inner {
        height: 100%;
        background: #000;
    }

    .fill {
        width: 100%;
        height: 100%;
        background-position: center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        opacity: 0.6;
    }

    
    .carousel-caption {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -55%) !important;
        width: 100%;
        overflow: hidden !important;
        bottom: auto !important;
        padding: 0px !important;
        margin: 0px !important;
        text-shadow: none !important;
    }

        .carousel-caption h2 {
            font-size: 24px;
            line-height: 36px;
            font-family: Roboto;
            font-weight: 700;
            text-transform: uppercase;
            text-align: center;
            margin: 0;
            padding: 0 5%;
            color: #f6f6f6;
        }

    #caption0, #caption1, #caption2, #caption3, #caption4, #caption5 {
        opacity: 0;
    }
    
      .overlay {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: linear-gradient(to left top, rgba(26, 188, 156, 0.9) 0%, rgba(0, 15, 180, 0.9) 100%);
    }

    .run-animation {
        animation: carouselCaption 3.9s cubic-bezier(.26,.43,.25,.73);
    }

