@charset "utf-8";
/* CSS Document */

/* dvw and dvh is needed for mobile - ignore error */

/* for mobile */
a, a:link, a:hover, a:visited, a:active, img { /* Removes blue highlight box on tap - mobile (iOS, Android Chrome) */
  -webkit-tap-highlight-color: transparent;
}
a:focus, img:focus { /* Removes focus outline on tap - mobile (iOS, Android Chrome) */
  outline: none;
}
/* end for mobile */
/* dropdown menu */
.navbar {
	height: 40px;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.5);
}
.navbar a:nth-child(2) { /* Contact */ 
	background-color: rgba(255, 0, 0, 0.5);
}
.dropdown-content a:nth-child(2) { /* Skeletons */ 
	background-color: rgba(255, 255, 255, 0.0);
}
.navbar a {
	float: right;
	font-size: 16px;
	color: #fff;
	padding: 10px 15px;
	background-color: none;
	border-left: solid 1px #333;
}
.navbar a:hover {
	background-color: #B87333;
	border-left: solid 1px #B87333;
}
.dropdown {
	float: right;
	overflow: hidden;
	font-weight: bold;
}
.dropbtn {
	/*cursor: pointer;*/
	background-color: #333;
	height: 40px;
}
.dropbtn::after {
	content: " \2630"; /* " \25BE" Unicode for downwards arrow */
}
.dropdown .dropbtn {
	font-size: 16px;  
	border: none;
	outline: none;
	color: #fff;
	padding: 10px 15px;
	filter: drop-shadow(0px 0px 5px #000); /*shadow*/
}
.navbar a:hover, .dropdown:hover .dropbtn {
	background-color: #B87333;
}
.dropdown-content {
	right: 0;
	display: none;
	position: absolute;
	background-color: rgba(255, 255, 255, 0.75);
	width: auto;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
	filter: drop-shadow(0px 0px 5px #000); /*shadow*/
	z-index: 1;
}
.dropdown-content a {
	float: none;
	color: #000 !important;
	padding: 10px 15px;
	text-decoration: none;
	display: block;
	text-align: right;
}
.dropdown-content a:hover {
	background-color: #fff !important;
	color: #B87333 !important;
}
.dropdown:hover .dropdown-content {
	display: block;
}
/* end dropdown menu */
* { /* applies to everything */
	margin: 0; padding: 0;
	text-align: center;
}
html, body {
	width: 100%; height: 100%; /* Ensure html and body take full viewport height */
	background-color: #6c655b; /* wood color */
	overflow: hidden;
}
body {
    font-family: Verdana, sans-serif;
    color: #fff;
	background-image: url("../images/wood_1710x1240.png");
	background-repeat: repeat;
	background-size: cover;
}
@keyframes fadeIn {
	from { opacity: 0;}
	to { opacity: 1;}
}
a:link , a:visited, a:active {
	color: rgba(200, 250, 255, 1.0);
    text-decoration: none;
}
a img {
	transition: all .25s ease-out;
}
a img:hover {
	transform: scale(1.05);
}
img {
	border: none;  
	background-color: transparent;
	filter: drop-shadow(0px 0px 5px #000); /*shadow*/
}
ul li br, .name br {
	display: none;
}
ul li { 
	display: inline;  
	white-space: nowrap;
	font-weight: bold; 
}
header ul {
	padding: 5px 0 0 0;
}
footer ul li {
	font-weight: normal;
}
p ul li {
	font-size: 16px;
	line-height: 20px;
}
h1, h1 span {
	text-transform: uppercase;
	color: rgba(255, 165, 35, 1.0);
	font-size: 3dvh;
	font-weight: bold;
	letter-spacing: 0;
	line-height: auto;
}
h1, h2, p, ul li {
	text-shadow: 
		1px 1px 10px rgba(0, 0, 0, 0.5), 
   		-1px -1px 10px rgba(0, 0, 0, 0.5), 
	    1px -1px 10px rgba(0, 0, 0, 0.5), 
	    -1px 1px 10px rgba(0, 0, 0, 0.5);
} 
h2, .center-lrg h2 {
	color: rgba(255, 165, 35, 1.0);
	font-size: 20px;
}
.bullet::before { /* ::before needed here */
	content: "\2022"; /* Unicode for bullet */
	font-weight: normal;
	font-size: 12px;
	line-height: 20px;
}
.wrapper {
	background-color: rgba(0, 0, 0, 0.5);
}
.main {
    display: flex;
    flex-direction: row;
    width: 100%; height: 100%;
	max-height: calc(100dvh - 280px); /* 280px = header height (180px) + footer height (50px) + border top & bottom (10px) + top menu (40px) */
	top: 345px; /* header height + border + top menu */
}
.sm-logo img, .sm-logo-txt img, .socialmedia img, .center-lrg img { /* fade-in at start */
	animation: fadeInScale 1s ease-out forwards; /* 1s needed to avoid blink */
}
.center-lrg img {
	padding-bottom: 10px;
}
@keyframes fadeInScale {
	from { opacity: 0; scale: 1.05;}
	to { opacity: 1; scale: 1;}
}
.socialmedia a img:hover {
	transform: scale(1.25);
}
.header, .footer {
	width: 100%;
	background-color: rgba(255, 255, 255, 0.25);
	flex-shrink: 0; /* Prevents header and footer from shrinking */
}
.header {
	display: flex; /* flex needed again to center vertically */
	align-items: center;
	justify-content: center;
	height: 180px;
	border-bottom: 5px solid #fff;
	top: 0;
	width: 100%;
}
.footer {
	height: 50px;
	line-height: 50px; /* center vertically */
	border-top: 5px solid #fff;
	bottom: 0;
	position: fixed;
	background-color: rgba(85, 85, 85, 0.65);
	z-index: 9999; /* stays on top */
}
.sm-logo img {
	width: 160px; height: auto;
	margin: auto;
}
.sm-logo-txt img {
	width: 240px; height: auto;
	margin: auto;
}
.name h2, .name p {
	margin: 5px auto;
}
.socialmedia img {
	margin: 10px auto;
}
.socialmedia img {
	width: 35px; height: auto;
}
.name h2 {
	color: rgba(200, 250, 255, 1.0);
}
.header .center-lrg h2, .header .center-lrg p { 
	display: inline-block;
}
.sm-logo, .name {
	width: 30%;
	float: left;
	vertical-align: middle;
}
.sm-logo-txt {
	width: 40%;
	float: left;
	vertical-align: middle;
}
.center-all {
	width: calc(100% - 100px); /* left-title width + right-title width */
	overflow-y: scroll;
	overflow-x: hidden;
	/* Firefox Scrollbar */
	scrollbar-width: thin; /* use thin to see the scrollbar */
	scrollbar-color: #666 #222; /* thumb color track color */
	scrollbar-gutter: stable; /* reserves space for the scrollbar, preventing layout shift */
}
/* Chrome  Scrollbar */
.center-all::-webkit-scrollbar {
	width: 12px; /* width of the vertical scrollbar */
}
.center-all::-webkit-scrollbar-thumb {
	background-color: #666; /* thumb color */
	border-radius: 6px; /* round corners on thumb */
	border: 1px solid slategrey; /* border around thumb */
}
.center-all::-webkit-scrollbar-track {
	background: #222; /* color of the track */
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}
.left-title, .right-title {
	padding: 10px 0;
	writing-mode: vertical-lr;
	text-orientation: upright;
	display: flex;
	align-items: center;
	/*justify-content: center;*/ /* center vertically */
	background-color: rgba(100, 200, 255, 0.15);
	overflow: hidden;
	width: 50px; height: 100%;
}
.left-title {
	float: left;
}
.right-title {
	float: right;
}
.center-lrg {
	width: 100%;
	border-bottom: 10px solid rgba(0, 0, 0, .5);
	display: flex;
}
.center-lrg .left-half, .center-lrg .right-half {
	flex: 1; /* distributes space equally */
}
.center-all, .center-lrg, .left, .center, .right, .center-right, .left-center-right, .left-half, .right-half {
    float: left;
}
.left, .center, .right, .center-right, .left-center-right, .left-half, .right-half {
	border-top: 5px solid #fff;
	box-shadow: 2px 0 2px -2px #000, -2px 0 2px -2px #000; /* vertical border */
	border-bottom: none;
}
.left, .center, .right  {
    width: 33.3333%;
}
.left-half, .right-half {
	width: 50%;
}
.center-right {
	width: 66.6666%;
}
.left-center-right {
	width: 100%;
}
.left-center-right p {
	margin: 0 10px;
}
.no-border, .no-border-right-half {
	border-top: none;
}
.left h2, .center h2, .right h2, .center-right h2, .left-center-right h2, .left-half h2, .right-half h2 {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 0;
}
.left p, .center p, .right p, .center-right p, .left-center-right p, .left-half p, .right-half p {
	padding: 10px;
}
.left-center-right, .right-half, .column-darker {
	background-color: rgba(0, 0, 0, 0.25);
}
.left img, .center img, .right img {
	padding: 10px 0;
	width: auto; height: 28dvh;
	max-width: 28dvw;
	max-height: 40dvh;
	object-fit: contain; /* keep aspect ratio */
}
.left-half img, .right-half img {
	padding: 10px 0;
	width: 40dvw; height: auto;
	max-height: 40dvh;
	object-fit: contain; /* keep aspect ratio */
}
.right-half h2, .right-half p {
	padding: 10px 5px;
}
.back-btn:hover {
	color: #999;
}
.sold {
	color: rgba(255, 0, 0, 1);
	font-weight: bold;
	text-transform: uppercase;
}
/*@media only screen and (orientation: portrait) {
}*/
@media only screen and (max-width: 720px) {
	.no-border {
		border-top: none;
	}
	.no-border:nth-child(2) {
		border-top: 5px solid #fff;
	}
	.no-border:nth-child(3) {
		border-top: 5px solid #fff;
	}
	.no-border-right-half {
		border-top: 0px solid transparent;
	}
	.sm-logo img {
		width: 22.222vw; height: auto; /* https://cssunitconverter.vercel.app/px-to-dvw */
	}
	.left, .center, .right, .center-right, .left-center-right, .left-half, .right-half {
		height: auto;
		width: 100%;
		float: none;
		border-bottom: 10px solid rgba(0, 0, 0, .5);
	}
	.center-lrg {
		display: block;
	}
	.center-lrg .left-half, .center-lrg .right-half {
		flex: none;
	}
	.center-lrg, .left-half {
		border-bottom: none;
	}
	.left img, .center img, .right img, .left-half img {
		width: 95%; height: auto;
		max-width: none;
		max-height: 40dvh;
	}
	.remove {
		display: none;
	}
	.main {
		max-height: calc(100dvh - 225px); /* 225px = header height (180px) + border top (5px) + top menu (40px) */
	}
	.left-title, .right-title {
		min-height: calc(100dvh - 225px); /* 225px = header height (180px) + border top (5px) + top menu (40px) */
		max-height: calc(100dvh - 225px); /* 225px = header height (180px) + border top (5px) + top menu (40px) */
	}
	.footer {
		display: none;
	}
}
@media only screen and (max-width: 600px) {
	.sm-logo-txt img {
		/*width: 240px; height: auto;*/
		width: 40.0dvw; height: auto; /* https://cssunitconverter.vercel.app/px-to-vw */
	}
	ul li br, .name br {
		display: block;
	}
}
@media only screen and (max-height: 500px) {
	.sm-logo img, .sm-logo-txt img {
		width: auto; height: 90px;
	}
	.sm-logo-txt li {
		display: none;
	}
	.name h2, .name p, .socialmedia img {
		margin: 2px auto;
	}
	.header {
		height: 100px;
	}
	.main {
		max-height: calc(100dvh - 145px); /* 145px = header height (100px) + border top (5px) + top menu (40px) */
	}
	.left-title, .right-title {
		min-height: calc(100dvh - 145px); /* 145px = header height (100px) + border top (5px) + top menu (40px) */
		max-height: calc(100dvh - 145px); /* 145px = header height (100px) + border top (5px) + top menu (40px) */
	}
	.footer, ul, li {
		display: none;
	}
}