/* COMMON & OVERALL CONTAINER ############################################ */

*{margin:0;padding:0;box-sizing:border-box;}
body{
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	background-color: #222;
	font-family: sans-serif;
	font-size: 12px;
	color: #eee;
}

@media (max-aspect-ratio: 9/16), (max-width: 500px) {
	.navbar {
		flex-direction: column;       /* stack top-to-bottom */
		align-items: flex-start;
  }
  /* Thumbnails button (assume it has class .thumb-button) */
	.button {
		order: 1;                     /* stays at the top of this stack */
		margin-top: 120px;
  }
	.thumbnails{
		top:245px; }
}

.envelope{
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.redline	{ border: 1px solid rgba(255,0,0,.4); }

.builder	{ font-size:105%; color:#eee; }
.newaddup	{ font-size: 86%; color:#ccc; }
.broker 	{ font-size: 98%; color:#ddd; }
.buysell	{ font-size: 86%; color:#aaa; letter-spacing: .45px;}

.address	{ font-size:100%; color:#eee; }
.email   	{ font-size: 95%  color:#ccc; }
.phone  	{ font-size: 90%; color:#aaa; letter-spacing: -.25px; }
.license 	{ font-size: 85%; color:#888; top:1px; }

.nowrap		 { white-space: nowrap; }
.shift-left  { transform: translateX(0%); }
.shift-right { transform: translateX(0%); }


/* NAVBAR CONTAINER ###################################################### */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 100px; 						/* adjust if needed */
    display: flex;
    align-items: center;       				/* vertical centering of items */
    justify-content: space-between;
    padding: 0 20px;            			/* horizontal padding */
    background: linear-gradient(90deg, rgba(0,0,0,.8) 34%, rgba(0,0,0,.95) 44%, rgba(0,0,0,.95) 54%, rgba(0,0,0,.75) 64%);
    box-shadow: 0 5px 4px rgba(0,0,0,0.40);
/*    border-bottom: 4px solid rgba(255,255,255,0.1); /* simple bevel look */
    z-index: 2;
    overflow: hidden;
}
/* fallback guard: prevent other img rules from overriding 
.navbar img { max-width: none; max-height: none; } */

.nav-left {
	display: flex;
	flex-direction: row;      /* side-by-side */
	align-items: center;      /* vertical center of logo + text */
	gap: 20px;                /* space between logo and text */
	max-width: 40%;           /* optional, keep center/title from shifting */
	min-width: 0;             /* allow flex children to shrink properly */
}

/* LOGO ################################################################### */
.nav-logo {
	display: block;
	position: relative;		/* keep absolute imgs contained */
    margin: 0;				/* top, right, bottom, left */
	width: 80px;
	height: 65px;
	overflow: hidden;
}
.fade-gallery {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.fade-gallery img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	pointer-events: none;
	animation: showImage 96s linear infinite;
}

@keyframes showImage {
	0%, 6.25%   { opacity: 1; }  /* visible for first 6s of its 96s cycle */
	6.26%, 100% { opacity: 0; }  /* hidden for the rest */
}
/* stagger each image by 6s (5s + 1s) */
.fade-gallery img:nth-child(1)  { animation-delay: 0s; }
.fade-gallery img:nth-child(2)  { animation-delay: 6s; }
.fade-gallery img:nth-child(3)  { animation-delay: 12s; }
.fade-gallery img:nth-child(4)  { animation-delay: 18s; }
.fade-gallery img:nth-child(5)  { animation-delay: 24s; }
.fade-gallery img:nth-child(6)  { animation-delay: 30s; }
.fade-gallery img:nth-child(7)  { animation-delay: 36s; }
.fade-gallery img:nth-child(8)  { animation-delay: 42s; }
.fade-gallery img:nth-child(9)  { animation-delay: 48s; }
.fade-gallery img:nth-child(10) { animation-delay: 54s; }
.fade-gallery img:nth-child(11) { animation-delay: 60s; }
.fade-gallery img:nth-child(12) { animation-delay: 66s; }
.fade-gallery img:nth-child(13) { animation-delay: 72s; }
.fade-gallery img:nth-child(14) { animation-delay: 78s; }
.fade-gallery img:nth-child(15) { animation-delay: 84s; }
.fade-gallery img:nth-child(16) { animation-delay: 90s; }


/* LEFT TEXT ############################################################## */
.nav-text {
    display: flex;
	flex-direction: column;
    justify-content: center;  /* vertically center the 4 lines */
    align-items: flex-start;  /* left-align text */
	line-height: 1.5;         /* was on, maybe needs to be on .nav-left div { */
    gap: 2px;
	min-width: 0;
}


/* CENTER TITLE IMAGE ##################################################### */
.nav-title {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
	padding: 10px 0;
}

.nav-title img {
    top: -3px;
	max-height: 60px; /* adjust to fit navbar */
    object-fit: contain;
}

/* RIGHT TEXT ############################################################# */
.nav-right {
    display: flex;
    flex-direction: column;
    justify-content: center;    /* vertical centering */
    align-items: center;        /* horizontally center text */
	max-width: 25%;
    margin: 0px;  			/* top, right, bottom, left */
    gap: 1.5px;
    line-height: 1.5;
    text-align: center;
}

/* BUTTON TOGGLES VISIBILITY OF THUMBS #################################### */

#toggle {
	display: none;
}
#toggle:checked + label.button + .thumbnails {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#toggle:checked ~ .thumbnails label:nth-child(1) { transition-delay: 0.1s; opacity:1; transform:translateY(0); }
#toggle:checked ~ .thumbnails label:nth-child(2) { transition-delay: 0.2s; opacity:1; transform:translateY(0); }
#toggle:checked ~ .thumbnails label:nth-child(3) { transition-delay: 0.3s; opacity:1; transform:translateY(0); }
#toggle:checked ~ .thumbnails label:nth-child(4) { transition-delay: 0.4s; opacity:1; transform:translateY(0); }
#toggle:checked ~ .thumbnails label:nth-child(5) { transition-delay: 0.5s; opacity:1; transform:translateY(0); }
#toggle:checked ~ .thumbnails label:nth-child(6) { transition-delay: 0.6s; opacity:1; transform:translateY(0); }
#toggle:checked ~ .thumbnails label:nth-child(7) { transition-delay: 0.7s; opacity:1; transform:translateY(0); }
#toggle:checked ~ .thumbnails label:nth-child(8) { transition-delay: 0.8s; opacity:1; transform:translateY(0); }
#toggle:checked ~ .thumbnails label:nth-child(9) { transition-delay: 0.9s; opacity:1; transform:translateY(0); }
#toggle:checked ~ .thumbnails label:nth-child(10){ transition-delay: 1s; opacity:1; transform:translateY(0); }

.button {                           /* button appearance & placement */
  	position: absolute;
	top: 140px;
	left: 50%;
	transform: translate(-50%, 0);  /* centers horizontally */
	width: 32px;
	height: 32px;
	background: linear-gradient(45deg, white, yellow, brown, yellow, white);
	border-radius: 6px;
	padding: 3px;
	cursor: pointer;
	transition: all 1s ease;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	transform-origin: center center;
	z-index: 3;
}
.button::before {                   /* inner field */
	content: "";
	position: absolute;
	inset: 3px;
	background: linear-gradient(45deg, white, gold, #de6f00, gold, gold, white);
	border-radius: 4px;
	z-index: 1;
	transition: all .5s ease;
}

.button::after {                    /* inner text */
	content: "↓";
	margin: 0;
	top: 0px;
	left: 0;
	padding: 0;
	position: relative;
	font-size: 20px;
	font-weight: bolder;            /* makes text thicker */
	color: white;
	text-align: center;
	z-index: 2;  
}
.button:hover {
	border: 12px solid orange;
}

#toggle:checked + label.button {
	transform: rotate(-225deg) scale(0.5) translate(-50%, 62px);
	opacity: 1;
}
#toggle:checked + label.button::after {
	transform: rotate(45deg) translateX(0px);
}
#toggle:checked ~ .thumbnails {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

/* BACKGROUND TRANSITION ################################################# */

/* hide radios */
input[name="bg"]{display:none;}

/* all bgs stacked */
.background{
	position:absolute;
	inset:0;
	background-size:cover;
	background-position:center;
	background-repeat: no-repeat;
	opacity:0;
	transition:opacity 2s ease,transform 2s ease;
/*	animation: bgFade 8s ease-in-out infinite; */
	z-index:0;
}
@keyframes bgFade {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.1); }
}

/* active bg */
#bg1:checked ~ .bg1,
#bg2:checked ~ .bg2,
#bg3:checked ~ .bg3,
#bg4:checked ~ .bg4,
#bg5:checked ~ .bg5,
#bg6:checked ~ .bg6,
#bg7:checked ~ .bg7,
#bg8:checked ~ .bg8,
#bg9:checked ~ .bg9,
#bg10:checked ~ .bg10{
	opacity:1;
	transform:scale(1);
	z-index:1;
}

/* outgoing shrink illusion */
.background:not(:is(
	#bg1:checked ~ .bg1,
	#bg2:checked ~ .bg2,
	#bg3:checked ~ .bg3,
	#bg4:checked ~ .bg4,
	#bg5:checked ~ .bg5,
	#bg6:checked ~ .bg6,
	#bg7:checked ~ .bg7,
	#bg8:checked ~ .bg8,
	#bg9:checked ~ .bg9,
	#bg10:checked ~ .bg10
))
	{ transform:scale(.9); }


/* BG THUMBNAILS ######################################################### */

.thumbnails{
	top:125px;
	position:absolute;
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	padding:3px 0;
	opacity: 0;
	pointer-events: none;
	transform: translate(0, -40px);
	transition: opacity 1s ease, transform 1s ease;
	z-index:2;
}
.thumbnails label{
	margin:3px;
	width: 50px;
	height: 50px;
	cursor:pointer;
	background: linear-gradient(45deg, white, orange, brown, orange, white);
	border-radius: 6px;
	opacity: 0;
	transform: translate(0, 20px);
	transition: opacity 1s ease, transform 1s ease;
	overflow: hidden;
}
.thumbnails label img {
	width: 100%;
	height: 100%;
	padding: 2px;
	object-fit: cover;
	border-radius: 6px;
}
.thumbnails label:hover {
	padding: 0;
	background: linear-gradient(45deg, white, white);
	transform: scale(1.4);    /* grow image */
	transform-origin: 50% 80%;
	transition:all 1.25s ease;
}