:root
{
    --AccentColor:#3366cc;
    --TextColor:#333333;
    --LightTextColor:#666666;
    --SectionBackground:#f3f7fc;
    --CardBackground:#ffffff;
    --BorderColor:#e5e5e5;
    --CardRadius:14px;
    --CardShadow:0 8px 24px rgba(0,0,0,.10);
}

*{
	margin:0;
	padding:0;
}

img
{
	border:none;
}

html
{
font-size: 18px;
	margin: 0;
	padding: 0;
}

/* Style inputs, select elements and textareas */
input[type=text], select, textarea
{
  width: 95%;
  padding: 12px;
  resize: vertical;
}

/* Style the submit button */
input[type=submit], input[type=reset]
{
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
  font-size: 1.1rem;
}

.FormButton
{
	float: left;
	width: 100%;
	padding-top: 2rem;
}

.FormSubmittedText
{
	width: 90%;
	padding-left: 5%;
	padding-top: 4rem;
font-size: 18px;
line-height: 30px;
}

.FormSubmittedText img, input
{
}

h1
{
font-size: 1.8rem;	color: #336600;
	margin:0px 0px 10px 0px;
	text-align: Center;
	padding-top: 20px;
	font-family: 'Raleway', sans-serif;
}

h1 a
{
	color: #BA0C2F;
}

h2
{
font-size: 1.6rem;	color: #336600;
	margin:0px 0px 10px 0px;
	text-align: center;
	padding-top: 20px;
	font-family: 'Raleway', sans-serif;
}

h2 a
{
	color: #336600;
}

h3
{
	font-size: 1.2rem;
	color: #336600;
	font-style: italic;
	margin:0px 0px 5px 0px;
}

h3 a
{
	color: #336600;
}

h4
{
	font-size: 1.2rem;
	color: #336600;
	text-align: left;
	margin:0px 0px 5px 0px;
}

h5
{
	font-size: 1.2rem;
	color: black;
	margin:0px 0px 10px 0px;
	text-align: center;
	padding-top: 20px;
}

h6
{
	font-size: 1.2rem;
	line-height: 100%;
	margin:0px 0px 10px 0px;
	text-align: left;
	padding-top: 10px;
	color: #336600;
	font-style: italic;
}

p
{
	margin:5px 0px 10px 0px;
}

a
{
	color: black;
}

li
{
	list-style: disc;
}

.TextCenter
{
	text-align: center;
}

.RedText
{
	color: red;
}

body
{
	text-align: left;
	margin: 0 auto;
	font-family: "Raleway", serif;
font-size: 1rem;	background-color: white;
	color: black;
}

#ContainerHeader
{
	float: left;
	width: 100%;
	color: white;
}

#ContainerHeaderContent
{
	float: left;
	width: 100%;
	text-align: left;
	background-color: white;
}

#ContainerHeaderContent a
{

	padding-left: 1REM;
	padding-right: 1REM;
}

#ContainerHeaderImageWrapper
{
	position: relative;
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	z-index: -1;
}

#ContainerHeaderImage
{
	float: left;
	width: 100%;
	z-index: 0;
}

#ContainerHeaderImage img
{
	width: 100%;
}

/* Board Members Page */

.BoardDiv
{
	float: left;
	width: 90%;
	padding-left: 5%;
	padding-right: 5%;
	font-size: 1rem;
}

.BoardLine
{
	float: left;
width: 45%;
	padding-right: 5%;
	padding-bottom: 2rem;
	text-align: center;
}

.BoardLineName
{
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1.7rem;
	font-family: Garamond, Baskerville, "Times New Roman", serif;
}

.BoardLineCompany
{
	font-size: 1rem;
	font-weight: normal;
	color: #333333;
	line-height: 1rem;
	font-family: Helvetica, Arial, sans-serif;
}

.BoardLinePosition
{
	font-size: 1rem;
	color: #3399ff;
	font-weight: normal;
	line-height: 1.1rem;
	font-family: Helvetica, Arial, sans-serif;
}

.BoardLineEmail a
{
	font-size: 1rem;
	color: #999999;
	font-weight: normal;
	line-height: 1rem;
	font-family: Helvetica, Arial, sans-serif;
}

.CircleImage
{
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid #3366cc;
  object-fit: cover;

  /* Smoothly animates the changes over 0.3 seconds */
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Styles applied when the user hovers over the image */
.CircleImage:hover
	border-color: #007bff;                  /* Changes border to blue */
	transform: scale(1.05);                 /* Slightly enlarges the image by 5% */
	box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Adds a soft drop shadow effect */
	cursor: pointer;                        /* Changes mouse cursor to a pointer hand */
}

/* Meetings and Events Page */

.MeetingsDiv
{
	float: left;
	width: 100%;
	font-size: 1REM;
}

.MeetingDataLine
{
	float: left;
	width: 100%;
	padding-top: 8px;
	padding-bottom: 3REM;
}

/* Members Page */

.MembersDiv
{
	float: left;
	width: 100%;
}

.MembersDataLine
{
	float: left;
	width: 100%;
	padding-top: 2%;
	padding-bottom: 1rem;

margin-bottom: 2rem;
	border-bottom: 1px solid #456B45;
}

.MemberData
{
	float: left;
width: 70%;
font-size: 0.9rem;
	padding-left: 4%;
}

.MemberDataLogo
{
	float: left;
width: 60%;
max-width: 180px;
	padding-top: 4%;
}

.MemberDataLogo img
{
	max-width:100%;
	height:auto;
}

/* News Page */

.NewsDiv
{
	float: left;
	width: 100%;
}

.NewsDataLine
{
	float: left;
	width: 100%;
	padding-top: 2%;
	padding-bottom: 4%;
	margin-bottom: 10%;
	border-bottom: 1px solid #456B45;
}

.NewsDataLine img
{
	width: 100%;
}

.HomepageContainer
{
	float: left;
	width: 100%;
}


.VideoSection
{
    width: 100%;
    padding: 40px 20px;
    box-sizing: border-box;
}

.VideoContainer
{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.ResponsiveVideo
{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: 10px;
    background-color: #000000;
}

.LookingAheadSection
{
    display:block;
    width:100%;
    clear:both;
    padding:40px 30px;
	margin-top: 3rem;
	margin-bottom: 3rem;
    box-sizing:border-box;
}

.LookingAheadSection *,
.LookingAheadSection *::before,
.LookingAheadSection *::after
{
    box-sizing:border-box;
}

.LookingAheadContainer
{
    width:100%;
    max-width:1100px;
    margin:0 auto;
}

.LookingAheadHeader
{
    margin:0 0 30px;
    text-align:center;
}

.LookingAheadLabel
{
    margin:0;
    color:var(--AccentColor);
    font-size:.95rem;
    font-weight:700;
    line-height:1.3;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.LookingAheadHeader h2
{
    margin:8px 0 0;
    color:var(--TextColor);
    font-size:clamp(1.3rem,3vw,1.8rem);
    line-height:1.2;
}

.UpcomingMeeting
{
    display:flex;
    width:100%;
    margin:0 0 24px;
    background:var(--CardBackground);
    border-radius:var(--CardRadius);
    overflow:hidden;
    box-shadow:var(--CardShadow);
}

.UpcomingMeeting:last-child
{
    margin-bottom:0;
}

.UpcomingMeetingDate
{
    display:flex;
    width:105px;
    min-width:105px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:18px 10px;
    background:var(--AccentColor);
    color:#ffffff;
    text-align:center;
}

.UpcomingMeetingDate span
{
    display:block;
    margin:0;
    color:#ffffff;
    font-size:.82rem;
    font-weight:700;
    line-height:1.2;
    text-transform:uppercase;
}

.UpcomingMeetingDate strong
{
    display:block;
    margin:5px 0;
    color:#ffffff;
    font-size:2.3rem;
    font-weight:800;
    line-height:1;
}

.UpcomingMeetingDate small
{
    display:block;
    margin:0;
    color:#ffffff;
    font-size:.78rem;
    font-weight:700;
    line-height:1.2;
}

.UpcomingMeetingContent
{
    flex:1;
    min-width:0;
    padding:22px 28px;
}

.UpcomingMeetingHeader
{
    margin:0 0 16px;
}

.UpcomingMeetingHeading
{
    min-width:0;
}

.MeetingType
{
    display:inline-block;
    margin:0 0 6px;
    color:var(--AccentColor);
    font-size:.78rem;
    font-weight:700;
    line-height:1.3;
    letter-spacing:1px;
    text-transform:uppercase;
}

.UpcomingMeetingHeader h3
{
    margin:0;
    color:var(--TextColor);
    font-size:1.2rem;
    line-height:1.25;
}

.MeetingSpeaker
{
    margin:6px 0 0;
    color:var(--LightTextColor);
    font-size:.95rem;
    line-height:1.4;
}

.MeetingDescription
{
    margin:0 0 18px;
    color:var(--LightTextColor);
    font-size:.95rem;
    line-height:1.6;
}

.MeetingDetails
{
    display:flex;
    gap:40px;
    padding-top:16px;
    border-top:1px solid var(--BorderColor);
}

.MeetingDetail
{
    display:flex;
    flex-direction:column;
    gap:3px;
    color:var(--LightTextColor);
    font-size:.9rem;
    line-height:1.4;
}

.MeetingDetail strong
{
    color:var(--TextColor);
    font-size:.8rem;
    letter-spacing:.5px;
    text-transform:uppercase;
}

@media (max-width:700px)
{
    .LookingAheadSection
    {
        padding:28px 12px;
    }

    .LookingAheadHeader
    {
        margin-bottom:22px;
    }

    .UpcomingMeeting
    {
        flex-direction:column;
        margin-bottom:18px;
    }

    .UpcomingMeetingDate
    {
        width:100%;
        min-width:100%;
        flex-direction:row;
        gap:10px;
        padding:11px 15px;
    }

    .UpcomingMeetingDate span,
    .UpcomingMeetingDate small
    {
        font-size:.78rem;
    }

    .UpcomingMeetingDate strong
    {
        margin:0;
        font-size:1.7rem;
    }

    .UpcomingMeetingContent
    {
        padding:18px;
    }

    .UpcomingMeetingHeader
    {
        margin-bottom:12px;
    }

    .UpcomingMeetingHeader h3
    {
        font-size:1.3rem;
    }

    .MeetingDescription
    {
        margin-bottom:14px;
        font-size:.9rem;
        line-height:1.5;
    }

    .MeetingDetails
    {
        flex-direction:column;
        gap:10px;
        padding-top:14px;
    }
}


.MeetingSection
{
    padding:45px 35px;
}

.MeetingCard
{
    max-width:1100px;
    margin:auto;
    background:#ffffff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.MeetingAccent
{
    height:6px;
    background:#3366cc;
}

.MeetingHeader
{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    text-align:left;
    padding:18px 22px 10px;
}

.MeetingDate
{
    width:62px;
    min-width:62px;
    height:62px;
    background:#3366cc;
    color:#ffffff;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    line-height:1;
    box-shadow:0 5px 14px rgba(216,139,45,.28);
}

.MeetingDate span
{
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

.MeetingDate strong
{
    margin-top:4px;
    font-size:1.6rem;
    font-weight:800;
}

.MeetingLabel
{
    margin:0;
    color:#3366cc;
    text-transform:uppercase;
    letter-spacing:1.4px;
    font-size:.72rem;
    font-weight:700;
}

.MeetingHeader h2
{
    margin:6px 0 0;
    color:#333;
    font-size:clamp(1.2rem,2.3vw,1.4rem);
    line-height:1.15;
}

.MeetingGrid
{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:20px;
    padding:10px 24px 4px;
}

.MeetingColumn
{
    padding:0 18px 16px;
    border-bottom:1px solid #ececec;
}

.MeetingColumn h3
{
    margin:0 0 10px;
    color:#3366cc;
    font-size:.95rem;
    font-weight:700;
}

.SpeakerName

    margin:0;
    font-size:1.15rem;
    font-weight:700;
    color:#333;
}

.SpeakerTitle
{
    margin:6px 0 0;
    color:#666;
    font-size:.9rem;
    line-height:1.4;
}

.MeetingRow
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:5px 0;
    border-bottom:1px solid #efefef;
    font-size:.88rem;
}

.MeetingRow:last-child
{
    border-bottom:none;
}

.MeetingRow span
{
    color:#555;
}

.MeetingRow strong
{
    color:#333;
    white-space:nowrap;
    font-weight:700;
}

.MeetingFooter
{
    text-align:center;
    padding:14px 20px 22px;
}

.MeetingButton
{
    display:inline-block;
    background:#3366cc;
    color:#ffffff;
    text-decoration:none;
    padding:12px 34px;
    border-radius:40px;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    transition:all .25s ease;
}

.MeetingButton:hover
{
    background:#3399ff;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(216,139,45,.35);
}

@media (min-width:850px)
{
    .MeetingGrid
	{
        gap:0;
    }

    .MeetingColumn
	{
        border-bottom:none;
        border-right:1px solid #e5e5e5;
    }

    .MeetingColumn:last-child
	{
        border-right:none;
    }
}

@media (max-width:600px)
{
    .MeetingSection
	{
        padding:18px 20px;
    }

    .MeetingHeader
	{
        flex-direction:column;
        text-align:center;
        gap:10px;
        padding:16px 16px 8px;
    }

    .MeetingDate
	{
        width:56px;
        min-width:56px;
        height:56px;
        border-radius:10px;
    }

    .MeetingDate span
	{
        font-size:.72rem;
    }

    .MeetingDate strong
	{
        font-size:1.45rem;
    }

    .MeetingGrid
	{
        grid-template-columns:1fr;
        gap:14px;
        padding:8px 16px 0;
    }

    .MeetingColumn
	{
        padding:0 0 14px;
    }

    .MeetingRow
	{
        font-size:.85rem;
        padding:4px 0;
    }

    .MeetingFooter
	{
        padding:14px 16px 18px;
    }

    .MeetingButton
	{
        width:100%;
        max-width:320px;
        padding:11px 24px;
    }
}






.MemberGrid
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.QuickLinksGrid
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.MemberButton
{
	display: block;
	width: 100%;
	max-width: 300px;              /* Optional */
	aspect-ratio: 1;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
}

.MemberButton:hover
{
	opacity: 0.75;
	cursor: pointer;
}

.QuickLinksButton
{
	display: block;
	width: 100%;
	max-width: 300px;              /* Optional */
	aspect-ratio: 40 / 49;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
}

.QuickLinksButton:hover
{
	opacity: 0.75;
	cursor: pointer;
}

.MemberButtonTextLarge
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 80px;
    text-align: center;
    color: #fff;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: bold;
    text-shadow: 2px 2px 6px rgba(0,0,0,.8);
    padding: 0 10px;
}

.MemberButtonText
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    text-align: center;
    color: #fff;
    font-size: clamp(0.6rem, 1vw, 1rem);
    font-weight: bold;
    text-shadow: 2px 2px 6px rgba(0,0,0,.8);
    padding: 0 10px;
}

.MemberTotalText
{
    position: absolute;
    left: 0;
    right: 0;
    top: 20px;
    text-align: right;
    color: #fff;
    font-size: clamp(0.6rem, 1vw, 0.8rem);
    font-weight: 100;
    text-shadow: 2px 2px 6px rgba(0,0,0,.8);
    padding: 0 20px;
}



.MemberLinksContainer
{
  position: relative;
  display: inline-block; /* Shrinks the div size down to match the img width */
}

.MemberLinksContainer:hover
{
	opacity: 0.75;
	cursor: pointer;
}

.MemberBackgroundImage
{
  display: block; /* Removes unwanted bottom whitespace gap from images */
  width: 100%; /* Keeps the image responsive to screen sizes */
  max-width: 300px;
  height: auto;
}

.MemberOverlayContent
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Flexbox centers the text and button inside the overlay */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  padding: 20px;
  box-sizing: border-box; /* Ensures padding does not break layout */
}

.MemberH1
{
	font-size: 2rem;
	color: white;
	font-weight: 800;
	text-align: center;
	padding-top: 20px;
	font-family: 'Raleway', sans-serif;
}

.MemberLinksButton
{
	float: left;

width: 20%;
max-width: 300px;
	background: url('/images/layout/buttons/lodging.jpg');
	padding: 20px;
}

.MemberLinksButton img
{
	float: left;
	width: 100%;
}

.MemberLinksButton:hover
{
	opacity: 0.75;
}

.MemberLinksButton img:hover
{
	cursor: pointer;
}





.FastLinksButton
{
	float: left;

width: 30%;
max-width: 300px;
	padding: 20px;
}

.FastLinksButton img
{
	float: left;
	width: 100%;
}

.FastLinksButton:hover
{
	opacity: 0.75;
}

.FastLinksButton img:hover
{
	cursor: pointer;
}

.LogoHeader
{
	float: left;
	width: 150px;
	padding-left: 2%;
	padding-top: 1rem;
	padding-bottom: 1rem;

}

.LogoHeader img
{
	width: 100%;
	max-width: 150px;
}

.TextHeader
{
	float: left;

width: 62%;
	text-align: left;
	padding-left: 3%;
	padding-top: 0.9rem;
}

.SocialFooterContainer
{
	float: left;
	width: 90%;
	margin-top: 1rem;
	margin-right: 5%;
}

.SocialFooter
{
	float: left;
	width: 30%;
}

.SocialFooter img
{
	width: 100%;
}

#Container
{
	float: left;
	width: 100%;
	background-color: white;
}

#ContainerMain
{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	background-color: white;
}

#Header
{
	position: relative;
    width:100%;
    height: 100%;
	text-align: right;
	font-size: 1.5rem;
}

#Content
{
	float: left;
	width: 100%;
	font-size: 1rem;
	background-color: white;
}

.SmallHeader
{
	float: left;
	max-height: 200px;
	width: 100%;
	margin-bottom: 1rem;
}

.SmallHeader img
{
	width: 100%;
	max-height: 200px;
	object-fit: cover;
	border-bottom: 4px solid #0f483d;
}


.FooterContainer
{
	float: left;
	width: 100%;
	text-align: left;
	background-color: black;
	padding-bottom: 2rem;
	font-family: 'Raleway', sans-serif;
	line-height: 1.4rem;
}

#FooterContent
{
	margin: 0 auto;
	max-width:  1400px;
	width: 100%;
	background-color: black;
	color: white;
	padding: 0;
}

#FooterContent a
{
	color: white;
}

.FooterColumnContainer
{
	float: left;
	width: 100%;
	padding-bottom: 4rem;
}

.FooterColumn
{
	float: left;
width: 28%;
padding-left: 5%;
line-height: 1.5rem;
	padding-top: 4%;
	padding-top: 4%;
}

.FooterColumn iframe
{
	float: left;
	width: 100%;
}

.FooterTextH1
{
	float: left;
	width: 100%;
	font-family: 'Raleway', sans-serif;
	color: white;
font-size: 1.5rem;}

.FooterLogoGHA
{
	float: left;
	width: 100%;
}

.FooterLogoGHA img
{
	margin: 0 auto;
	width: 40%;
	max-width: 150px;
}

.FooterLogoFacebook
{
	float: left;
	width: 100%;
}

.FooterLogoFacebook img
{
	margin: 0 auto;
	width: 90%;
	max-width: 150px;
}

.Copyright
{
 	float: left;
	width: 100%;
	padding-top: 2rem;
	padding-bottom: 0.5rem;
	font-size: 1rem;
	color: white;
	text-align: center;
	font-weight: 100;
}

.Copyright a
{
	color: white;
}

.HomePageInfoDiv
{
	float: left;
	width: 100%;
}

.HomePageInfoImage
{
	float: left;
width: 48%;
margin-right: 1%;
	margin-top: 1rem;
	margin-bottom: 1rem;

}

.HomePageInfoImage img
{
	width: 100%;
}

.HomePageMeetingDiv
{
	float: left;
	width: 100%;
}

.HomePageMeetingImage
{
	float: left;
width: 48%;
margin-right: 1%;
	margin-top: 1rem;
	margin-bottom: 1rem;

}

.HomePageMeetingImage img
{
	width: 100%;
}

.NormalColumn
{
	float: left;
	width: 100%;
	padding-top: 6vh;
	margin-bottom: 8vh;
	color: black;
}

.NormalColumn li
{
	list-style-type:decimal;
	margin-left: 2rem;
}

.NarrowColumn
{
	float: left;
	width: 70%;
	margin-left: 15%;
	margin-right: 15%;
	padding-top: 3%;
	padding-bottom: 3%;
	font-size: 100%;
	color: black;
}

.VeryNarrowColumn
{
	float: left;
width: 50%;
margin-left: 25%;
margin-right: 25%;
	padding-top: 3%;
	padding-bottom: 3%;
	font-size: 100%;
	color: black;
}


.MainImageDiv
{
	float: left;
	width: 100%;
	height: 100%;
	margin-bottom: 40px;
	box-shadow: 0px 6px 5px #aaaaaa;
}

.MainImageDiv img
{
	float: left;
	width: 100%;
}



@media screen and (max-width: 1150px)
{

	.NormalColumn
	{
		float: left;
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}

	.FastLinksButton
	{
		float: left;
width: 40%;
max-width: 300px;
		padding: 20px;
	}

}

@media screen and (max-width: 880px)
{
    .MemberGrid
	{
        grid-template-columns: repeat(2, 1fr);
    }


.BoardLine
{
	float: left;
	width: 100%;
}

.HomePageMeetingImage
{
	float: left;
	width: 100%;
}

.HomePageInfoImage
{
	float: left;
	width: 100%;
}

.VeryNarrowColumn
{
	float: left;
width: 80%;
margin-left: 10%;
margin-right: 10%;
	padding-top: 3%;
	padding-bottom: 3%;
	font-size: 100%;
	color: black;
}

}

@media screen and (max-width: 750px)
{

.FooterColumn
{
	float: left;
	width: 90%;
	padding-left: 5%;
	padding-top: 4%;
}

.VeryNarrowColumn
{
	float: left;
	width: 94%;
	margin-left: 3%;
	margin-right: 3%;
}

    .QuickLinksGrid
	{
        grid-template-columns: repeat(2, 1fr);
    }

}

@media screen and (max-width: 580px)
{

.NarrowColumn
{
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}


}


/* ************************** ReadMore for the descriptions on member listings. *************************** */

.ReadMoreSection
{
    margin-bottom: 25px;
}

.ReadMoreCheckbox
{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ReadMoreContent
{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}

.ReadMoreButton
{
    display: inline-block;
    margin-top: 10px;
    color: #3366cc;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

.ReadMoreButton::after
{
    content: "See More...";
}

.ReadMoreButton:hover
{
    text-decoration: underline;
}

.ReadMoreCheckbox:checked ~ .ReadMoreContent
{
    display: block;
    overflow: visible;
}

.ReadMoreCheckbox:checked ~ .ReadMoreButton::after
{
    content: "See Less";
}


/*********************************************************/



.NavDiv
{
	float: left;
	width: 90%;
	padding-right: 5%;
	padding-left: 5%;
	text-align: left;
	background: url('/images/layout/menu-container-background.png'); /* Hover over an item in a drop down menu */menu-container-background.png
}

/* CSS Menu Code */

.toggle,
[id^=drop] /* Selects all ids that start with drop */
{
	display: none;
}

/* Giving a background-color to the nav container. */
nav
{
	margin: 0;
	padding: 0;
	text-align: left; /* Controls MENU position */
}

/* Since we'll have the "ul li" "float: left"
 * we need to add a clear after the container. */

nav:after
{
	content: "";
	display: table;
	clear: both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position: relative" */
nav ul
{
	float: left;
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
	text-align: left; /* Controls position of sub menu text */
}

/* Positioning the navigation items inline */
nav ul li
{
	margin: 0px;
	display: inline-block;
	float: left;
}

/* Styling the links */
nav a
{
	display: block;
	padding: 6px 1px;
	color: white;
font-size: 1rem;
	font-weight: 600;
	font-family: 'Dosis', sans-serif;
	list-style: none;
	text-decoration: none;
}


nav ul li ul li:hover
{
	background: url('/images/layout/menu-background-hover.png'); /* Changes color of the background on dropdown */
	list-style: none;
}

/* Background color change on Hover */
nav a:hover
{
	background: url('/images/layout/menu-background-hover.png'); /* Hover over an item in a drop down menu */
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul
{
	display: none;
	position: absolute;
	/* has to be the same number as the "line-height" of "nav a" */
	top: 28px;
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul
{
	display: inherit;
}

/* First Tier Dropdown */
nav ul ul li
{
	float: none;
	display: list-item;
	position: relative;
	list-style: none;
	background: url('/images/layout/menu-background.png'); // Background of first tier dropdown menu items
	width: 15rem;
}

/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ''; }
li > a:only-child:after { content: ''; }


/* Media Queries - Hamburger Menu Starts Here
--------------------------------------------- */

@media all and (max-width : 800px){
	nav
	{
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu
	{
		display: none;
	}

	/* Styling the toggle label - Item with dropdown menus under it*/
	.toggle
	{
		display: block;
		padding: 6px 15px;
		color: white;
font-size: 1rem;		font-weight: 600;
		font-family: 'Dosis', sans-serif;
		text-decoration: none;
		border: none;
	}

	.toggle:hover
	{
		background: url('https://www.gatlinburghospitality.com/images/layout/menu-background-hover.png');
	}

	/* Display Dropdown when clicked on Parent Label */
	[id^=drop]:checked + ul
	{
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li
	{
		display: block;
		width: 100%;
		background: url('https://www.gatlinburghospitality.com/images/layout/menu-background.png');
	}

	nav ul ul .toggle,
	nav ul ul a
	{
		padding: 0 40px;
	}

	nav ul ul ul a
	{
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a
 	{
		background: url('/images/layout/menu-background-hover.png'); /* background of menu item in the first tier dropdown for hamburger menu */
	}

	nav ul li ul li .toggle,
	nav ul ul a,
	nav ul ul ul a
	{
		padding: 6px 1px;
		color: white;
font-size: 1rem;	}


	nav ul li ul li .toggle,
	nav ul ul a
	{
		background: url('/images/layout/menu-background.png');
	}

	/* Hide Dropdowns by Default */
	nav ul ul
	{
		float: none;
		position: static;
		/* has to be the same number as the "line-height" of "nav a" */
	}

	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul
	{
		display: none;
	}

	/* First Tier Dropdown */
	nav ul ul li
	{
		display: block;
		width: 100%;
	}

	nav ul ul ul li
	{
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */
		background: url('https://www.gatlinburghospitality.com/images/layout/menu-background.png');

	}

}
@media all and (max-width : 300px)
{

	nav ul li
	{
		display: block;
		width: 94%;
	}

}