/* jkld custom styles over bootstrap 5 */
/* amazon pixels for Jan Kroeze */
/* ADA WCAG AAA Compliant 2/14/24 */


/* RESET BOOTSTRAP GLOBALS */

body, html {width: 100%; height:100%;}

.card, .card-img {border-radius: 0;}

a img:hover, a:hover {transform: scale(1.01,1.01);}

/* BRANDING - Consider compliance WCAG AAA for your greys - was #5a5a5a alt #8C8C8C */

.brandfont{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}
.brandfont, .brandfont a {color: #9A9A9A; text-decoration: none; margin:0;padding:0;font-weight:600;}

h1.brandfont, h1.brandfont a {font-size: 2.35rem;line-height:1.5; color: white !important; letter-spacing:2px;}

h2.brandfont{font-size: 1.5rem; line-height:1.5}
.h5.brandfont{font-size: 1.35rem; line-height:2}

/* block quote */
.excerpt {font-size: 1.25rem; line-height: 1.25; }
.blockquote-footer {font-size: 1.25em; color: #B1B1B1;}
.blockquote-footer a {color:#eee;}

/* footer */
.copyright {color:#B1B1B1;}
.copyright a:link,
.copyright a:visited,
.copyright a:hover,
.copyright a:active{color:#B1B1B1;text-decoration:underline;}

span.credit {visibility: hidden !important;}
span.title {font-style: italic;}

/* IMAGES */

/* first image - cover */
.image-only{ 
/* height: 90vh;
padding-bottom: 4rem;*/
}
	
.image-only .card-img {
transition-duration: 0.4s;
width: 100%; 
height: auto;
}

/* BS CAROUSEL */

/* holds the carousel if we need it */
.stage {}
	
/* Carousel base class */
.carousel {
margin-bottom: 0rem;
border: 0px solid #ccf;
}

.carousel-indicators {top: 1rem;}
/* when using PHP call - need to reset the carousel colors ?! */
.carousel-indicators [data-bs-target] {background-color: #fff !important;}

[data-bs-theme=dark] .carousel .carousel-control-next-icon,
[data-bs-theme=dark] .carousel .carousel-control-prev-icon,
[data-bs-theme=dark].carousel .carousel-control-next-icon,
[data-bs-theme=dark].carousel .carousel-control-prev-icon {
filter: invert(0) grayscale(100);
}

/* Declare height because of positioning of img element */
.carousel-item {
/*max-height: 750px;*/
/* height: auto; was 80vh or 100vh */
border: 0px solid #fcc;
padding-bottom: 6rem; /* related to .carousel-caption bottom */
}

/* drop the caption below viewport */
.carousel-item .carousel-image {/* height: 100vh;*/ }

/* Declare object positioning of img element and size to cover the parent */
.carousel-item .carousel-image img {
/* object-fit: cover; object-position: center; */
width: 100%; 
height: 100%; /* was 100% */
border: 0px solid #ccf;
}

/* we want to move he caption below the image - works with .carousel-item padding-bottom*/
.carousel-caption {
  left: 0;
  right: 0;
  bottom: auto;
  z-index: 10;
  border: 0px solid #ccc;
  color: #fff !important;
  width: auto;
}

/* h2 h3 h4 */
h3.carousel-title, h3.card-title {font-size: 2.25rem; line-height:2;} /* ws 2 */
.image-caption h4, .carousel-caption h4 {font-size: 1.35rem;} /* ws 1.75 */
	
.carousel-caption p {visibility: hidden !important;}

.portrait {
/* if declared aspect-ratio: attr(width) / attr(height); */
/*object-fit: cover; 
object-position: center; */
/* aspect-ratio: 0.75; */
}

.carousel-image img.landscape {
/*height: auto;
width: 100%;
*/
}

.carousel-image img.portrait{
/* reset image to show all and be centered */
/* width: auto; 
height: 100% !important; 
margin: 0 auto;*/
}

/* use in carousel for portrait treated like landscape on desktop */
.carousel-image img.hybrid {
object-position: top !important;
}

/* use in carousel for portrait needing special positioning on small */
.carousel-image img.portrait-sm {
/*object-fit: cover; object-position: center; */
/* width: auto; height: 100%; */
margin: 0 auto;
}

@media screen and (orientation: portrait) {

}

@media screen and (orientation: landscape) {

.carousel-item {
/* margin: 0 auto; DO NOT*/
border: 0px solid #fff;
}

.carousel-item .carousel-image {    
/*height:75%; width: 75%;*/
height: 85vh;
width: 85vw;
margin: 0 auto;
border: 0px solid #fff;
overflow: hidden;
}

.carousel-item .carousel-image img.portrait{
width: auto !important;
margin: 0 auto;
  }

.carousel-item .carousel-image img.landscape{
height: 100% !important;
width: auto !important;
margin: 0 auto !important;
border: 0px solid #fff;
/*tell me again - on XL screens no centering */
object-fit: contain;
object-position: center;
  }
  
  /* first image - cover */
.image-only{ 
width: 80vw;
margin: 0 auto;
border: 0px solid #fff;
}

}


.carousel.pointer-event {
  touch-action: pan-y pinch-zoom;
}

/*  `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { 
	.carousel-image img.portrait-sm {
	border: 0px solid #fcc;
	width: 100%;
	object-position: right;
	}
}
 */
.position-left {
object-position: left !important;
}

.position-right {
object-position: right !important;
}

.position-top {
object-position: top !important;
}

.position-bottom {
object-position: bottom !important;
}

.position-center {
object-position: center !important;
}

/* make a spot */
.preloader {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100%;
	background: rgb(23, 22, 22);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	transition: opacity 0.3s linear;
	pointer-events: none;
}

.down-arrow:after {
  content:" ";
  margin: 0 50%;  /* center */
  border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: .5rem;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  }