.container{
  max-width: 1600px;
}

body{
  background-color: #191a19;
  color: white;
}

.navbar{
background-color: #191a19;
}

img{
  width: 100%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

hr{
  background-color: #6f6868;
  max-width: 1600px;
  margin-bottom: 2.617rem;
}

h2{
  padding-bottom: 1rem;
}

a{
  color: #771f21;
}

a:hover {
  color: #c13538;
}

ul a{
  vertical-align: middle;
}


.logo{
  width: 150%;
}

.col{
  padding: 0;
}

.row{
  margin: 0;
}

.title-wrap hr{
  background-color: white;
}

.header-image{
  height: 250px;
  object-fit: cover;
  object-position: 10% 60%;
  margin-bottom: 2%;
}

.carousel {
  display: flex;
  height: 600px;
  width: 100%;
}

.carousel .item {
  margin-left: 3px;
  margin-right: 3px;
  flex: 1;
  transition: flex 0.4s ease;
  overflow: visible;
}

.item:hover {
  flex: 2;
}

.carousel .item.active {
  flex: 5;
}

.carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.description{
  margin-top: 50%;
}

.contact-form {
  position: relative;
}

.contact-form .form-control {
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: lighter;
  border-radius: 6px;
  outline: none;
  box-shadow: none;
  font-weight: bold;
  margin: 16px 0;
}

.contact-form .form-control:not(textarea) {
  height: 48px;
}

.crossfade>figure {
  animation: imageAnimation 12s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}

.crossfade {
  height: 900px;
  width: 100%;
}

.crossfade>figure:nth-child(1) {
  animation-delay: 0s;
  background-image: url('../images/bmc1.webp');
}

.crossfade>figure:nth-child(2) {
  animation-delay: 4s;
  background-image: url('../images/bmc2.webp');
}

.crossfade>figure:nth-child(3) {
  animation-delay: 8s;
  background-image: url('../images/bmc3.webp');
}

.crossfade>figure:nth-child(4) {
  animation-delay: 12s;
  background-image: url('../images/hermes_designs_01.webp');
}



@keyframes imageAnimation {
  0%   { opacity: 0; }
  8%   { opacity: 1; }   /* fade in */
  33%  { opacity: 1; }   /* stay visible */
  41%  { opacity: 0; }   /* fade out */
  100% { opacity: 0; }   /* hidden for rest of cycle */
}

@media (min-width: 992px) {
  .column-view{
    display: none;
  }
}

.column-view-left{
  margin-right: 0.5%;
}

.column-view-right{
  margin-left: 0.5%;
}
/*
Source - https://stackoverflow.com/a
Posted by Kevin, modified by community. See post 'Timeline' for change history
Retrieved 2026-01-20, License - CC BY-SA 4.0
*/

.banner{position:relative}
.banner img{
  width:100%;
}

.banner-img{
  object-fit: cover;
  height: 800px;
}
.banner .container{position: absolute; left:0; right:0; top:50%; text-align:left; transform:translateY(-50%)}

.home_slider_content{
  width: 25%;
  object-fit: cover;
  margin-left: 10%;
  color: white;
}

@media (max-width: 991px) {
  .window-view{
    display: none;
  }
  .crossfade {
    object-fit: contain;
    height: 500px;
    width: 100%;
  }

  .banner .container{
    position: relative;
  }

  .crossfade > figure {
  background-position: 30% 20%;
}

  .pb-5{
    padding-bottom: 2.617rem !important;
  }

  .shadow-normal {
      box-shadow: 4px 10px 15px rgba(0, 0, 0, 0.0);
  }

  .navbar{
    display: none;
  }

  .banner-img{
    display: none;
  }

  .home_slider_content {
  width: 100%;
  object-fit: cover;
  margin-left: 0%;
  color: white;
  margin-top: 19.6rem;
  margin-bottom: 9.6rem;
}


  .carousel .item {
  flex: 1;
  transition: flex 0.5s ease;
}

.carousel:hover .item {
  flex: 1;
}

.carousel .item:hover,
.carousel .item:active {
  flex: 5;
}
}