/* jkld custom styles over bootstrap 5 */
/* amazon pixels for Jan Kroeze */


/* RESET BOOTSTRAP GLOBALS */

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

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

/* BRANDING */

.brandfont{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}
.brandfont, .brandfont a {color:#5a5a5a; text-decoration: none; margin:0;padding:0;letter-spacing:2px;font-weight:600;}

h1.brandfont{line-height:1.5;}
h2.brandfont{line-height:1.35}

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

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

span.credit {visibility: hidden !important;}

/* IMAGES */

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

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

/* Since positioning the image, we need to help out the caption*/
.carousel-caption {
  bottom: 1rem;
  z-index: 10;
  border: 0px solid #ccc;
  color: #fff !important;
}

/* h2 h3 h4 */
h3.carousel-title, h3.card-title {font-size: 2em; line-height:2em;}
.image-caption h4, .carousel-caption h4 {font-size: 1.75em;}
	
.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%;
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;
}

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