@font-face { font-family: MyKoho_SBI; src: url("/alpha/graphics/fonts/KoHo-SemiBoldItalic.ttf") format('truetype'); font-weight: 600; font-style: italic; }
@font-face { font-family: MyPtSansNarrow; src: url("/alpha/graphics/fonts/PTSansNarrow-Regular.ttf") format('truetype'); }
@font-face { font-family: MyPtSansNarrow; src: url("/alpha/graphics/fonts/PTSansNarrow-Bold.ttf") format('truetype'); font-weight: bold; }

html > body { background-color: #333333; margin: 0 auto 0 auto; padding: 0 0 0 0; font-family: Arial, Helvetica, sans-serif; font-size: 12pt; }
html > body > header { background-color: #FFFFFF; max-width: 1440px; margin: 0 auto 0 auto; padding: 0 0 0 0; }
html > body > nav { background-color: #FFFFFF; max-width: 1440px; margin: 0 auto 0 auto; padding: 0 0 0 0; }
html > body > main { background-color: #FFFFFF; max-width: 1440px; margin: 0 auto 0 auto; padding: 0 0 0 0; }
html > body > footer { background-color: #FFFFFF; max-width: 1440px; margin: 0 auto 0 auto; padding: 0 0 0 0; }

html > body > header { display: grid; grid-template-columns: 20% 60% 20%; height: 200px; padding: 0 0 0 0; }
html > body > header > figure { align-items: center; display: flex; height: inherit; justify-content: left; padding: 8px 16px 8px 16px; }
html > body > header > figure > img { border: 1px solid #000000; border-radius: 50%; max-width: 100%; max-height: 100%; }
html > body > header > h1 { align-items: center; display: flex; height: inherit; justify-content: center; margin: 0; padding: 8px 8px 8px 8px; text-align: center; vertical-align: middle; width: 100%; }
html > body > header > h1 > span { background-color: #000000; color: #FFFFFF; display: block; height: auto; margin: 0; padding: 20px 12px 20px 12px; text-align: center; width: 100%; }
html > body > header > h1 > span > strong { display: block; font-family: MyKoho, Arial, Helvetica, sans-serif; font-size: 32pt; }
html > body > header > h1 > span > em { display: block; font-family: 'Times New Roman', Times, serif; font-size: 16pt; font-style: italic; font-weight: bold;  }
html > body > header > h1 > span > i { color: #BBBBBB; display: block; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-style: normal; font-weight: lighter; padding: 4px 0 0 4px;}
html > body > header > aside { display: flex; align-items: center; justify-content: right; }
html > body > header > aside > span { padding: 0 12px 0 0; }
html > body > header > aside > span > strong > a { color: #000000; display: inline-block; font-family: MyPtSansNarrow, Courier New, Courier, monospace; font-weight: bold; font-size: 24pt; text-align: center; text-decoration: none; }
html > body > header > aside > span > strong > a > br { display: none; }
html > body > header > aside > span > strong > a:hover { opacity: 0.50; }

html > body > nav { padding: 0 0 16px 0; }
html > body > nav > ul { display: table; margin: 0 auto 0 auto; width: auto; }
html > body > nav > ul li { display: table-cell; padding: 0 8px 0 8px; }
html > body > nav > ul li a img { height: 32px; max-height: 32px; max-width: auto; }

html > body > main { background-color: #FFFFFF; color: #000000; }
html > body > main a { color: #0000FF; text-decoration: none; }
html > body > main a:hover { color: #FF0000; cursor: pointer; }
html > body > main img[alt^="Icon"] { height: 24px; width: auto; }
html > body > main > div > section > h5 { font-family: MyKoho_SBI, Arial, Helvetica, sans-serif; font-weight: 600; font-style: italic; font-size: 20pt; padding: 0 0 8px 0; text-align: center;  }

html > body > main > div.Top { display: grid; grid-template-columns: 50% 50%; height: 600px; padding: 16px 0 16px 0; width: 100%; }
html > body > main > div > section { height: 100%; margin: 0 12px 0 12px; }
html > body > main > div > section.Contact { overflow-y: scroll; }
html > body > main > div > section.Listings { overflow-y: scroll; }

html > body > main > div > section.Contact { background-color: #F5F5F5; border: 1px solid #B1B1B1; text-align: center; }
html > body > main > div > section.Contact > span { display: block; padding: 6px 0 6px 0; text-align: center; }
html > body > main > div > section.Contact > span:nth-of-type(1) { padding: 0 8px 6px 8px; }
html > body > main > div > section.Contact > span > a[href^="tel:"] { font-weight: bold; font-size: 12pt; }
html > body > main > div > section.Contact > span > a > img { width: 240px; max-width: 50%; }
html > body > main > div > section.Contact > address { display: block; padding: 8px 0 8px 0; text-align: center; }
html > body > main > div > section.Contact > p { background-color: #F5F5F5; font-family: 'Times New Roman', Times, serif; margin: 16px 16px 16px 16px; padding: 4px 16px 4px 16px; text-align: justify; }
html > body > main > div > section.Contact > p + div { display: none; padding: 0 0 16px 0; text-align: center; }
/*html > body > main > div > section.Contact > p ~ input ~ i ~ i ~ br { display: none; }*/

html > body > main > div > section.Listings { border: 1px solid #B1B1B1; font-size: 11pt; padding: 0 8px 8px 0; }
html > body > main > div > section.Listings > article { border: 1px solid #000000; margin-bottom: 24px; width: 100%; }
/*html > body > main > div > section.Listings > article:last-of-type { margin-bottom: 0; }*/
html > body > main > div > section.Listings > article a { color: #0000FF; text-decoration: none; }
html > body > main > div > section.Listings > article a:hover { opacity: 0.50; }
html > body > main > div > section.Listings > article > h6 { background-color: #000000; color: #FFFFFF; font-size: 11pt; font-weight: normal; padding: 8px 4px 8px 4px; text-align: center; }
html > body > main > div > section.Listings > article  { background-color: #FFFFFF; }
html > body > main > div > section.Listings > article > div > figure { height: 160px; display: block; text-align: center; }
html > body > main > div > section.Listings > article > div > figure > img { height: 100%; max-height: 100%; max-width: 100%; object-fit: cover; object-position: center center; width: 100%; } 
html > body > main > div > section.Listings > article > div > p { height: 100%; font-size: 13pt; line-height: 1.5; margin: 8px 0 0 0; text-align: center; vertical-align: middle; width: 100%; }
html > body > main > div > section.Listings > article > div > p img { height: 20px; margin: 0 0 0 8px; vertical-align: top; }
html > body > main > div > section.Listings > article > p { line-height: 1.25; padding: 12px; text-align: left; }
html > body > main > div > section.Listings > article > p + div { display: none; padding: 0 0 16px 0; text-align: center; }

html > body > main > div > section.Listings > article:nth-of-type(n+5) { display: none; }
html > body > main > div > section.Listings > article:has(~ div input:checked):nth-of-type(n+5) { display: block; }
html > body > main > div > section.Listings > article + div { padding: 0 0 16px 0; text-align: center; }
html > body > main > div > section.Listings > article + div > input[type="checkbox"] { border: none;  cursor: pointer; display: inline-block; height: 16px; margin: 0 -140px 0 0; opacity: 0; padding: 0; position: relative; width: 140px; }
html > body > main > div > section.Listings > article + div > input[type="checkbox"] ~ i { color: #0000FF; font-style: normal; }
html > body > main > div > section.Listings > article + div > input[type="checkbox"] ~ i.More { display: inline; }
html > body > main > div > section.Listings > article + div > input[type="checkbox"] ~ i.Less { display: none; }
html > body > main > div > section.Listings > article + div > input[type="checkbox"]:checked ~ i.More { display: none; }
html > body > main > div > section.Listings > article + div > input[type="checkbox"]:checked ~ i.Less { display: inline; }

html > body > main > div.Bottom { display: grid; grid-template-columns: 66% 34%; padding: 0 0 0 0; width: 100%; }
html > body > main > div.Bottom > section { font-size: 11pt; padding: 24px 12px 24px 12px; }
html > body > main > div.Bottom > section.Video > iframe { aspect-ratio: 16/9; width: 100%; }
html > body > main > div.Bottom > section > h5 { margin: 0 0 3px 0; padding: 0; text-align: left; }
html > body > main > div.Bottom > section > ul { padding: 0 0 8px 0; }
html > body > main > div.Bottom > section > ul > li { padding: 2px 0 4px 0; text-align: left; }
html > body > main > div.Bottom > section > ul > li > span > i > img { vertical-align: middle; }

@media only screen and (min-width: 1680px) and (max-width: 1919px)
{
html > body > header > aside > span > strong > a { font-size: 27pt; }
}

@media only screen and (min-width: 1440px) and (max-width: 1679px)
{
html > body > header > aside > span > strong > a { font-size: 26pt; }
}

@media only screen and (min-width: 1200px) and (max-width: 1439px)
{
html > body > header > aside > span > strong > a { font-size: 25pt; }
}

@media only screen and (min-width: 1024px) and (max-width: 1199px)
{
html > body > header > aside > span > strong > a { font-size: 24pt; }
}

@media only screen and (min-width: 960px) and (max-width: 1023px)
{
html > body > header > aside > span > strong > a { font-size: 22pt; }
}

@media only screen and (min-width: 720px) and (max-width: 959px)
{
html > body > header > h1 > span > strong { font-size: 28pt; }
html > body > header > h1 > span > em { font-size: 14pt; }
html > body > header > h1 > span > i { font-size: 8pt; }
html > body > header > aside > span > strong > a { font-size: 22pt; }
html > body > header > aside > span > strong > a > br { display: inline; }
}

@media only screen and (max-width: 719px)
{
html > body > header { grid-template-columns: 100%; height: auto; }
html > body > header > figure { align-items: center; height: 240px; justify-content: center; padding: 8px 8px 8px 8px; }
html > body > header > h1 { padding: 0 0 0 0; }
html > body > header > aside { justify-content: center; padding: 8px 0 12px 0; }
html > body > header > aside > span > strong > a { font-size: 20pt; }
html > body > nav { padding: 0 0 4px 0; }
html > body > nav > ul li a img { height: 28px; max-height: 28px; }
html > body > main > div.Top { grid-template-columns: 100%; height: auto; }
html > body > main > div > section.Contact { border: none; margin: 0 0 0 0; overflow-y: unset; }
/*
html > body > main > div > section.Contact > p { height: 8em; margin: 16px 16px 4px 16px; overflow: hidden; }
html > body > main > div > section.Contact > p + input[type="checkbox"] 
{ 
border: none;  
cursor: pointer; 
display: inline-block; 
height: 16px; 
margin: 0 -48px 0 0;
opacity: 0; 
padding: 0; 
position: relative; 
width: 48px; 
}

html > body > main > div > section.Contact > p:has(+ input:checked) { height: unset; overflow: unset; }
html > body > main > div > section.Contact > p + input[type="checkbox"] ~ i { color: #0000FF; font-style: normal; }
html > body > main > div > section.Contact > p + input[type="checkbox"] ~ i.More { display: inline; }
html > body > main > div > section.Contact > p + input[type="checkbox"] ~ i.Less { display: none; }
html > body > main > div > section.Contact > p + input[type="checkbox"]:checked ~ i.More { display: none; }
html > body > main > div > section.Contact > p + input[type="checkbox"]:checked ~ i.Less { display: inline; }
*/

html > body > main > div > section.Contact > p { height: 8em; margin: 16px 16px 4px 16px; overflow: hidden; }
html > body > main > div > section.Contact > p + div { display: block; }
html > body > main > div > section.Contact > p + div > input[type="checkbox"] { border: none;  cursor: pointer; display: inline-block; height: 16px; margin: 0 -48px 0 0; opacity: 0; padding: 0; position: relative; width: 48px; }
html > body > main > div > section.Contact > p:has(+ div input:checked) { height: unset; overflow: unset; }
html > body > main > div > section.Contact > p + div > input[type="checkbox"] ~ i { color: #0000FF; font-style: normal; }
html > body > main > div > section.Contact > p + div > input[type="checkbox"] ~ i.More { display: inline; }
html > body > main > div > section.Contact > p + div > input[type="checkbox"] ~ i.Less { display: none; }
html > body > main > div > section.Contact > p + div > input[type="checkbox"]:checked ~ i.More { display: none; }
html > body > main > div > section.Contact > p + div > input[type="checkbox"]:checked ~ i.Less { display: inline; }

html > body > main > div > section.Listings > article > p { height: 4.5em; overflow: hidden; }
html > body > main > div > section.Listings > article > p + div { display: block; }
html > body > main > div > section.Listings > article > p + div > input[type="checkbox"] { border: none;  cursor: pointer; display: inline-block; height: 16px; margin: 0 -48px 0 0; opacity: 0; padding: 0; position: relative; width: 48px; }
html > body > main > div > section.Listings > article > p:has(+ div input:checked) { height: unset; overflow: unset; }
html > body > main > div > section.Listings > article > p + div > input[type="checkbox"] ~ i { color: #0000FF; font-style: normal; }
html > body > main > div > section.Listings > article > p + div > input[type="checkbox"] ~ i.More { display: inline; }
html > body > main > div > section.Listings > article > p + div > input[type="checkbox"] ~ i.Less { display: none; }
html > body > main > div > section.Listings > article > p + div > input[type="checkbox"]:checked ~ i.More { display: none; }
html > body > main > div > section.Listings > article > p + div > input[type="checkbox"]:checked ~ i.Less { display: inline; }

html > body > main > div > section.Listings { border: none; margin: 0 0 0 0; overflow-y: unset; padding: 0 0 8px 0; }
html > body > main > div.Bottom { grid-template-columns: 100%; }
html > body > main > div.Bottom > section { margin: 0 0 0 0;  padding: 4px 0 4px 0; }
html > body > main > div.Bottom > section + section { padding: 4px 4px 8px 16px; }
}

/*
@-moz-document url-prefix() 
{
html > body > main > div > section.Contact > p { height: unset; margin: 16px 16px 16px 16px; overflow: unset; }
html > body > main > div > section.Contact > p + div { display: none; }

html > body > main > div > section.Listings > article > p { height: unset; overflow: unset; }
html > body > main > div > section.Listings > article > p + div { display: none; }

html > body > main > div > section.Listings > article:nth-of-type(n+5) { display: block; }
html > body > main > div > section.Listings > article + div { display: none; }

}
*/

/* *[data-display="0"] { display: none; } */