:root	{
	--home: home.html;
	--news: news.html;
	--faqs: faqs.html;
	--community: community.html;
	--about: aboutus.html;
	--contact: contact.html;
	--blog: blog.html;
	--bannercolor: #18509b;
	font-size: 14px;
}

body	{
	background-color: #ffffff;
        font-family: Arial, Helvetica, sans-serif;
}

.logosection	{
	postion: absolute;
	top: 0vh;
	left: 0vh;
	height: 12vh;
}

.logo	{
	width: auto;
	height: 75px;
}

.pagetitle	{
	position: absolute;
	top: 0vh;
	display: flex;
	left: 30vw;
	width: 40vw;
	justify-content: center;
}

.logoscript	{
	width: auto;
	height: 100px;
}

.login	{
	position: absolute;
	top: 3vh;
	left: 90vw;
}

img.loginbutton	{
	width: 120px;
	height: auto;
}

.banner	{
	background-color: var(--bannercolor); 
	position: absolute;
	width: 98vw;
}

.footbanner	{
	background-color: var(--bannercolor);
	position: relative;
	top: 75vh;
	height: 8.8vh;
}

.header {
	height: 8.0vh;
	line-height: 8.0vh;
	color: white;
	font-size: 2.0rem;
	text-align: center;
}

td	{
	font-size: 1.0rem;
}

td.headerbutton	{
	border: none;
	box-shadow: 0 2px #0056b3;
	transition: all 0.1s ease;
	font-size: 1.8rem;
	cursor: pointer;
}

td.headerbutton:active {
	background-color: #4040fa;
	transform: translateY(4px);
	box-shadow: 0 0 #0056b3;
}
td.iscurrent	{
	background-color: #9090Fa;
	color: yellow;
}

a	{
	text-decoration: none;
	color: white;
}

a.iscurrent	{
	color: yellow;
}

.midsection	{
	position: absolute;
	top: 25vh;
	width:100vw;
	left: 1vw;
}

img.covershot	{
	width: 50%;
	height: auto;
}

.midcenter	{
	position:absolute;
	top: 25vh;
	width: 100vw;
	left: 1vw;
}

.midcenter img	{
	width: 50%;
	height: auto;
}

.caption {
        position: absolute;
        top: 78vh;
	width: 50vw;
        font-size: 1.5rem;
	text-align: center;
}
/*
.covershottitle	{
	position: absolute;
	top: 78vh;
	left: 18vw;
	font-size: 1.5em;
	text-align: center;
}
*/
.covertext	{
	display: flex;
	align-items: center;         /* Aligns text vertically */
	justify-content: left;     /* Optional: Aligns text horizontally */
	left: 60vw;
	width: 30vw;
	height: 50vh;
        font-size: 1.5em;
}

.faqarea	{
  height: 60vh;       /* Constrain the vertical height */
  overflow-y: auto;    /* Show vertical scrollbar ONLY if content overflows */
  overflow-x: hidden;  /* Hide horizontal scrollbar if not needed */
	width: 75vw;
	left: 12.5vw;
}

.faqarea hr	{
	width: 80%;
}
.faqarea h1	{
	font-size: 1.5em;
	color: #18509b;
}

.footer	{
	top: 89vh;
/*	height: 9.0vh;	*/
}

.review	{
	position: relative; 
	color:	white;
	left: 1vw; 
	width: 60vw;
/*	top: 1vh; */
/*	height: 8.0vh; */
	font-size: 1.0rem;
	text-align: center;
}
.logoscript     {
        width: auto;
        height: 100px;
}
.contact	{
/*
	position: absolute;
	height: 8.0vh;
*/
	top: 0vh;
	width: 15vw;
	left: 85vw;
}

.heading-container {
  display: flex;
  align-items: baseline; /* Aligns the text along their bottom text lines */
  gap: 15px;             /* Adds space between the h1 and h2 */
}


@media screen and (orientation: portrait) and (min-width: 600px) and (min-height: 950px) {
}
@media screen and (orientation: landscape) and (min-width: 950px) and (min-height: 600px) and (max-width: 1280px) {
}

@media screen and (orientation: landscape) and (max-height: 420px) {
:root	{
	font-size: 9px;
}
.logo   {
        width: auto;
        height: 37.5px;
}
.logoscript     {
        width: auto;
        height: 50px;
}

.caption {
        top: 80vh;
	font-size: 1.0rem;
}

.covertext      {
        width: 35vw;
        font-size: 1.2rem;
}

.footbanner     {
        height: 10.0vh;
}

td	{
	font-size: 9px;
}

td.headerbutton {
        font-size: 1.2rem;
}
.faqarea	{
	width: 70vw;
}

.review	{
	font-size: 1.0em;
}

.login  {
        position: absolute;
        top: 2vh;
        left: 85vw;
}

img.loginbutton {
        width: 90px;
        height: auto;
}

}
@media screen and (orientation: portrait) and (max-width: 480px) {
:root    {
        font-size: 10px;
}
.logo   {
        width: auto;
        height: 37.5px;
}
.logoscript     {
        width: auto;
        height: 50px;
}

.banner	{
	position: absolute;
	top: 7vh;
}
.caption	{
	top: 65vh;
	font-size: 1.2rem;
}

.covertext      {
        width: 35vw;
        font-size: 1.2rem;
}

.faqarea	{
	overflow: scroll;
}

.gallery	{
	top: 40vh;
}

td	{
	font-size: 10px;
}

td.headerbutton {
        font-size: 1.2rem;
}

#--home,
#--blog,
#--news,
#--faqs	{
	width: 12%;
}

img.covershot   {
	position: relative;
	top: 20vh;
        width: 49%;
        height: auto;
}

.review {
        font-size: 0.8rem;
}

.login  {
        position: absolute;
        top: 1vh;
        left: 85vw;
}

img.loginbutton {
        width: 60px;
        height: auto;
}

}