// Use Bootstrap breakpoints for consistency.
$bootstrap-sm: 576px;
$bootstrap-md: 768px;
$bootstrap-lg: 992px;
$bootstrap-xl: 1200px;


// Crop thumbnail images.
#gallery {
  img {
    height: 75vw;
    object-fit: cover;
    
    @media (min-width: $bootstrap-sm) {
      height: 35vw;
    }
    
    @media (min-width: $bootstrap-lg) {
      height: 18vw;
    }
  }
}


// Crop images in the coursel
.carousel-item {
  img {
    height: 60vw;
    object-fit: cover;
    
    @media (min-width: $bootstrap-sm) {
      height: 350px;
    }
  }
}

#gallery img {
  margin-bottom: 30px;
}

/*TEMP*/

.page-content>ul, .page-content>div>div>ul {
  /*border: red dotted 1px;*/
  width: 190px;
/*  margin: 0 auto;*/
  text-align: left;

}


.navbar-brand-i {
  background-color: #aa0000 !important;
}

.header-text-bottom {
    bottom: 0px;
    position: absolute;
    margin: auto;
    /*border: dotted;*/
    width: 100%;
} 


.heading-section {
/*    border: dotted;*/
/*    height: 550px;*/
    height: 540px;
}

.heading-div {
  padding-top: 300px !important;
}

.form-group {
    /*border: dotted;*/
  margin-bottom: 20px;
}


.text-muted {
  color: #440000 !important;
}