html,
body {
    height: 100%;
}

.carousel-item {
  height: 85vh;
  min-height: 300px;
  background: no-repeat top right scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


 .carousel,
.carousel-item.active {
    height: 85vh;
}

.carousel-inner {
  height: 100%;
  background: #000;
}

.carousel-caption {position: absolute;
    top: 25%;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    color: #fff;
    padding-bottom:80px; text-align: left; }

.carousel-caption h2{
    font-size: 4em;
    width: 50%;
    line-height: 1em;
    color: #fff;
    margin-bottom: 0.3em;}

.carousel-caption p{
    font-size: 1.5em;
    width: 50%;
    font-weight: 700;
    line-height: 1.3em;
    margin-bottom: 1.5em;
  }


/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    opacity:0.6;
}




/**
 * Button
 */
.btn-transparent {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.btn-transparent:hover {
  background-color: #fff;
}

.btn-rounded {
  border-radius: 70px;
}

.btn-large {
  padding: 11px 45px;
  font-size: 18px;
}

/**
 * Change animation duration
 */
.animated {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@media only screen and (max-width: 768px) {
  .carousel-caption h2{
    font-size: 2.5em;
    width: 100%;
    line-height: 1em;
    color: #fff;
    margin-bottom: 0.3em;}

.carousel-caption p{
    font-size: 1.2em;
    width: 100%;
    font-weight: 700;
    line-height: 1.3em;
    margin-bottom: 1.5em;
  }
}

@media only screen and (max-width: 460px) {
  .carousel-caption {position: absolute;
    top: auto;
    bottom:5% !important;
  }
  .carousel-caption h2{
    font-size: 1.9em;
    width: 100%;
    line-height: 1em;
    color: #fff;
    margin-bottom: 0.5em;}

.carousel-caption p{
    font-size: 1em;
    width: 100%;
    font-weight: 500;
    line-height: 1.3em;
    margin-bottom: 1.5em;
  }
}