/* la.css v=001 */

:root {
	--body-bgcolor: #000000;
	--body-color: #FFFFFF;
	/*--body-fontfamily: Arial, Helvetica Neue, Helvetica, sans-serif;*/
	--body-fontfamily: "Open Sans", Arial, Sans-Serif;
	--font-family-cursive:  cursive;
	--menu-color: #EEEEEE;
	--menu-submenu2-color: #CCCCCC;
	--h1-color: #FFFFFF;
	--h2-color: #FFFFFF;
	--h3-color: #FFFFFF; /*#4477AA;*/
	--h4-color: #FFFFFF; /*#4477AA;*/
	--submenu-border-color: transparent;	
	--menu-item-hover-color: #FFD700; /*gold*/	
	--a_active_color:  #FFD700; /*gold*/
	
}
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
*, *:before, *:after {
  box-sizing: inherit;
	}
body {
	margin: 0;
	background-color: var(--body-bgcolor);
	color: var(--body-color);
	font-family: var(--body-fontfamily);
	text-align: center;
	}
h1 {
	margin-top: 0.9em;
	}
a:hover {
	cursor: pointer;
	
		}
		
.cursive {
	font-family: var(--font-family-cursive);
	}
.la-text-section p {
	text-align: justify;
	}	
/* page */
#la-page {
	width: 100%;
	max-width: 90em;
	}
#la-page {
	position: relative;
	margin: 0 auto;
	padding: 0;
	}
	
/* page banner */
#la-page-banner {
	/*position: relative;*/
	margin: 0 auto;
	padding: 0;
	position: sticky;
  top: 0;
  z-index: 500;
  background-color: #000000;
	}
#la-page-banner {
	height: 3em;
	}
#la-page-banner-logo-link {
	position: absolute;
	top: 0.5em;
	left: 2.5em;
	z-index: 50;
	}
#la-page-banner-logo {
	width: 11.5em;
	}
	
/* menu */	
menu {
	position: relative;
	margin-top: 0.8em;
	list-style: none;
	text-align: right;
	z-index: 40;
	}
menu a,
#la-contact-links a {
	color: var(--menu-color);
	text-decoration: none;
	}
menu a.active {
	color: var(--a_active_color);	/*#CC6600;*/
	opacity: 0.8;
	}
menu a.active:hover {
	cursor: not-allowed;
	}	
menu li {
	font-size: 1.25em;
	display: inline-block;
	margin-right: 3.5rem;
	vertical-align: top;
	/*font-family: source-sans-pro, sans-serif;*/
	/*font-family: 'Roboto', sans-serif;*/
	font-family: "Open Sans", Sans-Serif; 
	font-weight: 700;
	}
menu > li {
	margin-top: 0.3em;
	}
menu li a:hover,
#la-contact-links a:hover {
	cursor: pointer;
	color: var(--menu-item-hover-color);
	}
menu li ul {
	width: 12em;
	background-color: #111111;
	}
#la-menu-mobile {
	display: none;
	}	
#la-menu-item-designs	{
	width: 6em;
	}
#la-menu-item-designs > ul,
#la-menu-item-aboutus > ul {
	display: none;
	}
#la-menu-item-designs:hover >ul,
#la-menu-item-aboutus:hover >ul	 {
	display: block;
	}
#la-menu-item-aboutus .la-submenu-3 li {
		margin-bottom: 0.4em;
	}		
#la-menu-item-aboutus .la-submenu-3 li a {
		color: var(--menu-submenu2-color);
		font-size: 0.95em;
		font-weight: 400;	
	}	
menu li ul:hover {
	text-decoration: none;
	}
menu li ul li {
	width: 12em;
	color: #FFFFFF;
	padding: 0 0 0 1em;
	}
#la-menu-item-aboutus .la-submenu-3 {
	width: 5em;
	margin-left: -0.5em;
  }
  
menu li ul li:hover,
#la-menu-item-aboutus .la-submenu-3 li a:hover {
	color: var(--menu-item-hover-color);/*#CC6600;*/
	}
.la-submenu-1 {
	width:13em;
	}
.la-submenu-1,
.la-submenu-2,
.la-submenu-3 {
	display: block;
	text-align: left;
	}
.la-submenu-1 {
	margin-left: 2.5em;
	padding: 0.5em 0 0.5em 1em;
	border: 1px solid var(--submenu-border-color);;
	}

.la-submenu-3.about {
	padding: 0.5em 0 0.5em 1em;
	border: 1px solid var(--submenu-border-color);
	}	
.la-submenu-1 li,
.la-submenu-2 li {
	padding: 0.2em 0;
	}
.la-submenu-1 li,
.la-submenu-2 li,
.la-submenu-3 li {
	display: block;
	padding-left: 0;
	margin-left: 0;
	font-size: 0.95em;
	}
.la-submenu-2 li {
	font-weight: 400;
	}
.la-submenu-2 li a {
	color: var(--menu-submenu2-color);
	}
.la-submenu-3 {
	margin-left: 0;
	width: 4em;
	padding: 0.5em 0 0.5em 1em;
	}
#la-menu-item-designs-overview,	
#la-menu-item-designs-legend {
	margin-bottom: 0.4em;
	}
#la-menu-trigram {
	display: inline-block;
	width: 2em;
	cursor: pointer;
	}

.la-submenu-1 {
	width: 11.8em
	}
.la-submenu-2 {
	width: 11em;
	}	
	
/* shared page styles*/	
#la-page-content	 h1 {
	color: var(--h1-color);
	font-size: clamp(1.6em, 5vw, 2em);
	font-size: clamp(1.5rem, 5vw, 2.3rem);
	font-weight: 400;
	font-family: source-sans-pro, sans-serif;
	color: var(--h1-color);
	}
/*h1::before {
	content: "(h1) ";
	}*/	
#la-page-content	 h2 {
	width: 100%;
	text-align: center;
	font-family:  source-sans-pro, sans-serif;
	font-size: clamp(1.5em, 4.5vw, 1.9em);
	font-weight: 700;
	font-style: italic;
	color: var(--h2-color);
	}

#la-page-content	 h3 {
	width: 100%;
	text-align: center;
	font-family:  source-sans-pro, sans-serif;
	font-size: clamp(1.2em, 3vw, 1.5em);
	font-weight: 700;
	font-style: italic;
	color: var(--h3-color);
	}
#la-page-content	 h4 {
	color: var(--h4-color);
	}
#la-page-content.opacity {
	opacity: 0.25;
	}
#la-page-banner-logo.opacity {
	opacity: 0.4;
	}
	
.la-design-overview p {
	font-size: clamp( 0.9em,3vw,1.1em);
	text-align: justify;
	}

.fully {
	font-style: italic;
	
	}
.copyright {
	margin-left: 0.2em;
	font-size: 0.75em;
	vertical-align: top;
		}
	
	
/* slideshow */	
#la-slideshow {
	position: relative;	
}
.la-slide {
	position: absolute;
	top: 0;
	left: 0;
	}
/*#la-slideshow-slide05 img {
	width: 100%;
	margin-top: 5em;
	margin-bottom: 5em;
	}
*/
/* slide show animation */
@keyframes fader {
	from { opacity: 1.0; }
	to   { opacity: 0.0; }
	}
.fading-slideshow {
	position: relative;
	margin: 0em auto;
	padding: 0;
	/*list-style-type: none;*/
	width: 100%;
	height: 45em;
	}
.fading-slideshow > div {
	position: absolute;
	display: flex;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #000000;
	justify-content: center;
	align-items: center;
}
.fading-slideshow > div > img {
	width: 100%;
	}
/* current slide */
.fading-slideshow > div:first-of-type {
	animation-name: fader;
	animation-delay: 2s;
	animation-duration: 1s;
	z-index: 20;
	}
/* next slide to display */
.fading-slideshow > div:nth-of-type(2) {
	z-index: 10;
	}
/* all other slides */
.fading-slideshow > div:nth-of-type(n+3) {
	display: none;
	}
.fading-slideshow > div.paused {
	animation-play-state: paused;	
	}
			

/* slide selector */	
.la-slide-selector {
	display: inline-block;
	width: 1em;
	height: 1em;
	border-radius: .675em;
	margin-right: 2em;
	margin-top: 2em;
	background-color: #7F7F7F;
	cursor: pointer;
	
	}
.la-slide-selector.selected {
	background-color: #C4C4C4;
	}
#la-slide-selector-pause-play {
	display: inline-block;
	width: 4em;
	margin-left: 3em;
	font-size: 0.8rem;
	color: #CCCCCC;
	cursor: pointer;
	vertical-align: middle;
	padding-bottom: 1em;
	
	}
#la-slide-selector-pause-play:hover {
	text-decoration: underline;
	
	}

/* quote */	
#la-quote {
	font-size: 1.1rem;
	width: 90%;
	max-width: 50em;
	margin: 1em auto;
	letter-spacing: 1px;
	cfont-family: "Segoe Script";
	font-style: italic;
	text-align: left; /* justify*/
	}
#la-quote {
	padding: 0.5em;
	border: 1px solid #262626;/*#412;*/ 
	border-radius: 1.5em;
	background-color: #0F0F0F;
	color:#DEDEDE;
}
#la-quote p {
	margin: 0.4em;
	}
#la-quote p.la-right {
	text-align: right;
	}
	
/* footer */
#la-page-footer img {
	width: 80%;
	}
#la-contact-links {
	margin-bottom: 0.6em;
	vertical-align: middle;
	}
#la-contact-links div {
	display: inline-block;
	vertical-align: middle;
	}
#la-contact-links img {
	/*margin-left: 1.1em;*/
	}	
#la-contact-links-contact {
	margin-right: 5em;
	}
#la-linkedin-link {
	margin-left: 1.1em;
	}
.la-page-footer-icon-link {
	font-size: 0.9em;	
	width: 2.5em;
	height: 2.5em;
	margin-left: 1.1em;
	/*border-radius: 50%;
	border: 1px solid #FFF;*/
	}
.la-page-footer-icon-link:hover {
	border: 1px solid #CC6600;
	}	
#la-contact-links img:hover {
	/*border-radius: 5em;
	border: 2px solid #CC6600;*/
	}	
#la-contact-links a.la-page-footer-icon-link-a {
	width: 2.5em;
	height: 2.5em;
	margin:0;
	padding:0;
	align-items: center;
	justify-content: center;
	display: flex;
	color: #AAAAAA;
	}
	
#la-footer-copyright {
	font-size: 0.8em;
	color: #777777;
	margin-bottom: 1em;
	}
	
@media (max-width: 600px) {
	#la-footer-copyright {
		font-size: 0.6em;
	}	
}

/* media queries */
	
@media (max-width: 600px) {
	#la-slide-selectors {
		font-size: 0.8em;
	}
	#la-menu {
		display: none;
		}
	#la-page-banner-logo {
		font-size: 0.8em;
		
	}
	#la-quote {
		font-size: 0.9rem;
	}	
	#la-page-footer img {
		/*height: 6em;*/
		}
}

@media ( max-width:  750px ) {
	#la-page-banner {
		text-align: right;	
		width: 100vw;
		overflow: hidden;
	}
	#la-menu-mobile {
		display: block;
		margin-top: 0;
	}
	#la-menu {
		xdisplay: none;	
		position: absolute;
		right: -20em;
		top: 0;
		z-index: 40;
		text-align: left;
		width: 16em;
		background-color: #000;
		padding-bottom: 1em;
		transition: all 0.5s ease;
		border: 1px solid var(--submenu-border-color);
	}
   	#la-page-banner.show {
   	  	overflow: visible;
	}	
	#la-menu.show {
		display: block;
		right: 0.4em; 
		transform: translate(0, 0);
		padding-top: 1em;
		background-color: #222;
		padding-left: 1.5em;
     	xtransition: all 2s;
	}
	#la-menu li {
		display: block;
		font-size: 1em;
		margin-right: 0;
		/*vertical-align: top*/
	}
	menu li ul li {
		width: 10em;
	}
	#la-menu-item-designs > ul,
	#la-menu-item-aboutus > ul {
		display: block;
	}
	#la-menu .la-submenu-1,
	#la-menu .la-submenu-2,
	#la-menu .la-submenu-3 {
		margin-left: 0;
		background-color: #1A1A1A;
	}
	#la-menu .la-submenu-1 {
		padding-top: 0.3em;
		padding-bottom: 0.3em;
		margin-top: 0.3em;
		margin-bottom: 0.3em;
	}
	la-submenu-2 {
		width: 10em;
	}	

	#la-menu .la-submenu-1 li,
	#la-menu .la-submenu-2 li,
	#la-menu .la-submenu-3 li 	{
		font-size: 0.95em;
		margin-left: 0;
	}
	#la-menu-item-aboutus .la-submenu-3 {
		width: 11.8em;
	}
	#la-quote {
		font-size: 0.9rem;
	}
	#la-contact-links div.la-follow-us-caption {
		display: none;
	}
	#la-contact-links-contact {
		margin-right: 1.5em;
	}
	.la-page-footer-icon-link {
		margin-left: 0.2em;	
	}
	.la-centered {
		width: 90%; 
		max-width: 30em;	
		}
}
menu li#la-menu-item-aboutus {
	margin-right: 0.9em;
		}

@media ( max-width:  900px ) {
	menu li {
		margin-right: 1.5rem;		
		}
	menu li#la-menu-item-aboutus {
		margin-right: -0.4em;		
		}
		
}
	
@media ( max-width: 1100px ) {
	#la-slide-selectors {
		font-size: 0.8em;
		}
	#la-menu {
		/*display: none;*/
		}
	#la-page-banner-logo {
		font-size: 0.8em;
		}
	#la-menu li {
		font-size: 1.1em;
		}
	menu li {
		/*margin-right: 2.0rem;*/		
		}
}

.la-text-section {
	margin: 0 auto;
	width: 90%;
	font-size: clamp( 0.9em,3vw,1.1em);
	max-width: 50em;
	text-align: left;
	}
	
#back-to-top {
	position: fixed;
	bottom: 1em;
	right: 0.5em;	
	z-index: 9999;
	width: 32px;
	height: 32px;
	text-align: center;
	line-height: 30px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	border: 1px solid #fff;
	border-radius: 2px;
	text-decoration: none;
	transition: opacity 0.2s ease-out;
	opacity:0;
}
#back-to-top.show {
  opacity: 1;
}


/* shared styles */	
p {
	line-height: 1.5em;
}
ul li {
	list-style-type: none;
	padding-top: 0.4em;
	}
.margin-bottom-small {
	margin-bottom: 0.4em;
	}
.margin-top-0 {
	margin-top: 0;
	}
body div {
	Xborder: 1px solid red;
	}

@page {
    margin: 0;
    size: A4 portrait;
}

.review-link a,
#la-about-articles p.review-link a,
#la-about-briefhistory a.external-page-link,
a.external-page-link {
	
	color: #6699CC;
	
		}
.review-link a:hover,
#la-about-articles p.review-link a:hover,
#la-about-briefhistory a.external-page-link:hover,
a.external-page-link:hover {
	color: #FFD700;
	
	}

/* temp borders*/

.la-s-class-design-photo-img::not(.noborder),
#la-s-class-sonata-specifications-detail-photo img,
.la-s-class-design-specifications-detail-photo img,
#la-s-class-controls img,
#la-opal-class-standardopal-controls-img-div img,
#la-opal-class-customopals-sample-img-div img {
	border: 1px solid red;
	}
.image-name {
	Xdisplay: none;
	}
#la-page-size {
	position: absolute;
	top: 0.6em;
	left: 14em;
	font-size: 0.9em;
		
			}
#la-slideshow-slide02-img {
	width: 60%;
	margin-top:4em;
		
	}
#la-slideshow-slide03 img {
	width: 90%;
	}
#la-slideshow-slide06 img {
	width: 80%;
}

/* end */