#banner {width:100vw; height:auto;}
.banner-area > .row {
    --bs-gutter-x: 0rem!important;  
    --bs-gutter-y: 0rem!important;  
    margin:0px!important; 
    padding:0px!important; 
}
#views-bootstrap-image-slideshow-view-block-1,
#block-views-block-bootstrap-front-page-slideshow-block-1 > .content { 
    margin:0px!important; 
    padding:0px!important; 
    width:100vw; 
    
}
/**
 * @file
 * Slideshow  specific CSS.
 */
/* Any additional overrides of the bootstrap style for the front page slider. */
/* bootstrap_front_page_slideshow  machine name of front page slideshow view*/

/* override .row>* */
#views-bootstrap-image-slideshow-view-block-1,
#block-views-block-bootstrap-front-page-slideshow-block-1{
    --bs-gutter-x: 0rem!important;  
    --bs-gutter-y: 0rem!important;  
    margin:0px!important; 
    padding:0px!important; 
    width:100vw; 
    
}
#views-bootstrap-front-hero-slider-block-1,
#views-bootstrap-bootstrap-front-page-slideshow-block-1{
    padding:0px!important;
}
#views-bootstrap-bootstrap-front-page-slideshow-block-1.carousel{
    padding:0px;
   
}
.view-content.row{
    margin:0px!important; 
    padding:0px!important;
}
.carousel-inner{  width:100%!important; }
.carousel-item img{ width: 100% !important;; }

.emtp.d-none,
.d-none,
.d-md-block {
     display: none!important; 
}

/* carousel textual area defaults changed the bottom attribute only. */
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 18.25rem;
  left: 15%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: center;
  width:100%!;
}
/*
.carousel-caption {
  top: 35% !important;
}
*/

/*
ch Dec 07 2023 added slide with textual left adjustmet 
  ch Dec 16 2022 in production. ch Aug 2023 using nth-child allows precise selection of the emtp software slide
  second slider is the stability studies. THIS MAY BE A PROBLEM because as slideshows are added and removed, 
  the position aka number will change ... transients, stability and load flow in the same software is 0 hopefully it can stay that way or needs and id assigned. record id?
the values may not be cardinal 2 means second slide 1 means first slide. 
*/

.carousel-inner .carousel-item:nth-child(1) .carousel-caption,
.carousel-inner .carousel-item:nth-child(2) .carousel-caption {
  /*width: 40% !important;*/
}
.text-left-align{
    width: 40% !important;
}
.slide-highlight-margin{
	margin: 0 33%;
}
.slide-highlight-background{
	background-color:rgba(220,220,220,.6); 
	color:#000!important;
}

.carousel-caption h1,
.carousel-caption h3,
.carousel-caption h4,
.carousel-caption p { color: #fff; text-shadow: 1px 1px #404040; } 

.carousel-caption p.font_gold { color: rgba(197, 110, 32, .8)!important; /*#c56e20*/ text-shadow:none!important;} 
.carousel-caption p.font_gold2 { color: rgba(245, 162, 88, .8)!important; /*#f5a258;*/ } 
.carousel-caption p.font_gold3 { color: #bc7222!important; text-shadow:none!important; } /* color: rgba(188, 114, 34, 0)!important; */
.carousel-caption h1{ font-size:42px;}
.carousel-caption h3{ font-size:32px!important; font-weight:600; margin-bottom: 25px; margin-top:35px;}
.carousel-caption h3 a { color:#fff; text-decoration: none; }

.carousel-caption p{ font-size:20px!important; font-weight: 400; }

.carousel-caption a.btn{ 
  font-size:20px!important; 
  font-weight: 400; 
  border-radius:0; 
  background-color: rgba(8,131,150,.85)!important;/* Dec 7 2022 add transparency to buttons */
  padding: 15px 30px;
  border-radius: 0px!important;
  color: #fff;
  border: 3px solid rgba(8,131,150,.85)!important;
}

.carousel-caption a.btn:hover{
  /* background-color: #fff!important; */
  background-color: rgba(255,255,255,.75)!important;/* Dec 7 2022 add transparency to buttons */
  border-radius: 0px!important;
  /* color: #FF804A; */
  color: #000!important; /* Dec 7 2022 add because of transparency to buttons */
  border: 3px solid rgba(255,255,255,.95)!important; /*#088396!important;*/
}
 
/* testing animation of sliders classes not implemented just code to review to understand*/
.carousel-center{text-align:center!important} 
.crousel-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.carousel-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.carousel-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.carousel-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}

/*
inspired from http://codepen.io/Rowno/pen/Afykb
& https://jsfiddle.net/q0rgL8ws/
** crystal hansen Sept 2 2022 adding a scaling effect to the banner slideshow images
* adding a text move to the
*/
.carousel-fade .carousel-inner .carousel-item {
    opacity: 0;
    transition-property: opacity;
    overflow:hidden;
  }
  
  .carousel-item.active img {
      transition: transform 5000ms linear 0s;
      /* This should be based on your carousel setting. For bs, it should be 5second*/
      transform: scale(1.05, 1.05);
  }


  .carousel-fade .carousel-inner .active {
    opacity: 1;
  }
  
  .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: 1;
  }
  
/*------------ add sliding text -----------------------*/
.carousel-fade .carousel-inner .carousel-item .carousel-caption{
    opacity: 0;
  }
  .carousel-fade .carousel-inner .carousel-item.active .carousel-caption{
    opacity: 1;
   /* -webkit-animation: LeftToRight 4s linear;*/
    animation: 3s slidein-left;
  }


  .carousel-fade .carousel-control {
    z-index: 2;
  }
  
  /*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  now override the 3.3 new styles for modern browsers & apply opacity
  */
  @media all and (transform-3d), (-webkit-transform-3d) {
      .carousel-fade .carousel-inner > .carousel-item.next,
      .carousel-fade .carousel-inner > .carousel-item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
      }
      .carousel-fade .carousel-inner > .carousel-item.prev,
      .carousel-fade .carousel-inner > .carousel-item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
      }
      .carousel-fade .carousel-inner > .carousel-item.next.left,
      .carousel-fade .carousel-inner > .carousel-item.prev.right,
      .carousel-fade .carousel-inner > .carousel-item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
      }
      .carousel-fade .carousel-inner .carousel-item .carousel-caption{
        transition: transform 5000ms linear 0s;
        
      }
    
      .carousel-fade .carousel-inner > .carousel-item.active .carousel-caption{
        transition: transform 5000ms linear 0s;
      }
  }
    /* -------------  slide in text-------------*/
@keyframes slidein-left {
    0% {
      transform: translateX(-100%);
    }
  
    100% {
      transform: translateX(0);
    }
  }



/*.front-slider{font-size:32px!important;}*/

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .d-md-block,
    .d-none {
        display: inline-block!important;  
   }

  .carousel-caption {
      bottom: 2rem!important;
  }
   



}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .d-md-block,
    .d-none {
        display: inline-block!important; 
   }
}



/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .d-md-block,
    .d-none {
        display: inline-block!important; 
   }

}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .d-md-block,
    .d-none {
        display: inline-block!important; 
   }

	/*.carousel-inner > .carousel-item:first-child > .carousel-caption.d-none.d-md-block {
		width: 70% !important;
	}*/
}
@media screen and (max-width:550px){
    .d-md-block,
    .d-none {
        display: inline-block!important; 
   }

}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 500px) {

    #block-views-block-bootstrap-front-page-slideshow-block-1 {
        
        width:100vw;
    }
    .d-md-block,
    .d-none {
        display: inline-block!important; 
   }

}

/* Viewports between 320px and 480px wide */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    #block-views-block-bootstrap-front-page-slideshow-block-1 {
        width:100vw;
    }
    .d-md-block,
    .d-none {
        display: none!important;  
   }
   .carousel-caption.d-none.d-md-block {
    display: block!important;  
  }
   #block-views-block-bootstrap-front-page-slideshow-block-1 {
    width: 100vw;
    
  }

}

@media (max-width: 380px) {
    /* front page slideshow */
  /*images to scale to height of 500px for all media*/
  .carousel-caption {
    bottom: 0rem!important;
  }
  .carousel-caption.d-none.d-md-block h3 {
    font-size: 29px!important;
  }
  .carousel-caption h1, .carousel-caption h3 {

    font-size: 32px!important;
    
  }
  .carousel-caption.d-none.d-md-block {
        display: inline-block!important;   
   }
}

/* -------------------  Galaxy fold 280  -----------------------  */
@media (max-width: 280px) {
   /* front page slideshow */
  /*images to scale to height of 500px for all media*/
  .carousel-caption {
    bottom: 1rem!important;
   
  } 
  .d-md-block,
    .d-none {
        display: block!important;   
   }

   

}