/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
    margin-bottom: 3rem;
    font-family: 'Lato', sans-serif;
    }

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 4rem;
    z-index: 10;
}

.carousel-caption h2 {
    font-size: 32px;
}

.carousel-caption p {
    padding: 10px
}


/*
h2 {font-size: 40px;}
p {padding: 10px}
*/


/* Declare heights because of positioning of img element */
/*
.carousel-item {
    height: 32rem;
}

.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}
*/


.top-content .carousel-item {
    /*height: 100vh;*/
    min-height: 400px;
    background-repeat: no-repeat;
    background-size: cover;

    object-fit: cover;
    height: calc(100vh - 56px);
    width: 100%;
}

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


/* 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;
}





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

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

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-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;
  }
}

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




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

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0);
  }

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

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
/* --------------------------- */


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

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }

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

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
/* --------------------------- */



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

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0);
  }

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

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
/* --------------------------- */


/**
 * 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;
}




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

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    padding-top: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
/*.marketing h2 {*/
.marketing .col-lg-4 h2 {
    margin-top: 10px;
    font-size: 2em;
    font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
text-align: left;
    margin-right: .75rem;
    margin-left: .75rem;
}
/* rtl:end:ignore */


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

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

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





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

@media (max-width: 575px) {
    /*body {background: blue;}*/

    /*
    .top-content .carousel-item {
        max-height: 400px;
    }
    */

}


@media (min-width: 40em) {
    /*body {background: red;}*/

    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.2;
    }

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

}


@media (min-width: 62em) {
    /*body {background: green;}*/

    .featurette-heading {
    margin-top: 7rem;
    }
}