/* Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.  */
html {
	-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
}

/*----------- apply a natural box layout model to all elements --------------*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* This is the CSS styling for the mobile version */
body {
	background-color: #9387A0;
	padding: 0px;
	margin: 5px;
	text-shadow: none;
}

img {
	display: block;
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5 {
	font-family: 'Oswald', 'Open Sans', sans-serif;
	letter-spacing: 1px;
}

h1 {
	font-size: 36px;
	font-weight: 400;
	color: #170030;
	margin: 0px;
}

h2 {
	color: #f5cf87;
}

h3 {
	font-size: 24px;
}

p {
	font-family: 'PT Sans', 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	text-align: left;
	line-height: 1.5;
	color: #433156;
	margin: 0px 0px 16px 0px;
}

header {
	display: grid;
	grid-template-columns: 65px auto;
	grid-template-rows: auto 65px 1fr;
	column-gap: 15px;
	row-gap: 15px;
	background-color: #fefefe;
	padding: 0px;
	margin: 0px;
}

.weather-info {
	grid-column: 1/3;
	grid-row: 1/2;
    background-color: #f5cf87;
}

header img {
	width: 64px;
	height: auto;
	grid-column: 1/2;
	grid-row: 2/3;
}

.headings {
	grid-column: 2/3;
	grid-row: 2/3;
}

div.motto {
	font-family: 'Oswald', 'Open Sans', sans-serif;
	font-size: 14px;
	letter-spacing: 6.4px;
	color: #170030;
	padding: 0px 0px 22px 1.9px;
}

nav button {
    margin: .3rem 3%;
    background-color: transparent;
    border: none;
	font-family: 'Oswald', 'Open Sans', sans-serif;
    font-size: 1.5rem;
	letter-spacing: 0.5px;
    color: #f5cf87;
}

nav button:hover {
	cursor: pointer;
}

nav {
	grid-column: 1/3;
	grid-row: 3/4;
	text-align: center;
	background-color: #170030;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav ul li a {
	display: block;
	padding: .8rem 2%;
	font-family: 'Oswald', 'Open Sans', sans-serif;
	text-decoration: none;
	letter-spacing: 1px;
	color: #f5cf87;
	border-top: 1px solid rgba(245, 207, 135, 0.6);
}

nav ul li.active a {
	background-color: rgba(245, 207, 135, 0.9); 
	color: #170030;
}

nav ul li a:hover {
	background-color: rgba(245, 207, 135); 
	color: #170030;
	border: rgba(23, 0, 48, 0.6);
}

nav ul.hide {display: none;}

.home-page-banner, .budva-page-banner, .contact-page-banner, .join-page-banner, .directory-page-banner {
    position: relative;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.banner-box {
	position: absolute;
	top: 1px;
	background-color: rgba(23, 0, 48, 0.5);
	text-align: center;
	margin: 12px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
 }

 .budva-page-banner-box {
	position: absolute;
	top: 1px;
	left: 0px;
	right: 0px;
	background-color: rgba(23, 0, 48, 0.5);
	text-align: center;
	margin: 12px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
 }

 .contact-page-banner-box {
    position: absolute;
	top: 1px;
	left: 0px;
	right: 0px;
	background-color: rgba(23, 0, 48, 0.5);
	text-align: center;
	margin: 12px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
 }

 .join-page-banner-box {
    position: absolute;
	top: 1px;
	left: 0px;
	right: 0px;
	background-color: rgba(23, 0, 48, 0.5);
	text-align: center;
	margin: 12px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
 }

 .directory-page-banner-box {
	position: absolute;
	top: 1px;
	left: 0px;
	right: 0px;
	background-color: rgba(23, 0, 48, 0.5);
	text-align: center;
	margin: 12px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
 }

.banner-heading {
	font-size: 40px;
	font-weight: bold;
	line-height: 1.5;
	margin: 0px;
	padding: 5px 33px 8px 33px;
}

.upcoming-events {
	text-align: center;
	background-color: #fefefe;
	color: #170030;
	padding: 5px 12px 5px 12px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.upcoming-events-heading, .partners-heading {
	font-weight: 400;
	margin: 24px 0px 15px 0px;
}

.event-box1 {
    background-color: #f5cf87;
	padding: 10px;
}

main section.upcoming-events div.event-box1 h3 {
	font-size: 30px;
	line-height: 1.4;
	color: #fefefe;
	text-shadow: 2px 2px 4px #000000;
}

.event-box2 {
	background-color: #9387A0;
	margin: 40px 0px 0px 0px;
	padding: 10px;
}

main section.upcoming-events div.event-box2 h3 {
	font-size: 30px;
	line-height: 1.4;
	color: #170030;
	text-shadow: 2px 2px 4px #fefefe;
}

.event-location {
	text-align: left;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	margin: 5px 0px 7px 0px;
}

.event-date {
	font-size: 13px;
	text-align: left;
	font-weight: bold;
	text-decoration-line: underline;
	color: #170030;
	margin: 12px 0px 7px 0px;
}

.about-us, .history-budva {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto auto;
	background-color: #fefefe;
	margin: 60px 0px 0px 0px;
	padding: 12px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.home-page-budva-img, .history-budva-img {
	grid-column: 1/2;
	grid-row: 1/2;
}

.about-us-heading, .budva-history-heading {
	grid-column: 1/2;
	grid-row: 2/3;
    font-weight: 400;
	color: #170030;
	margin: 14px 0px 7px 0px;
}

.about-budva-chamber, .about-budva-history {
	grid-column: 1/2;
	grid-row: 3/4;
	margin: 0px 0px 8px 0px;
}

.article-button {
	grid-column: 1/2;
	grid-row: 4/5;
	max-width: 145px;
	height: auto;
	text-decoration: none;
	text-align: center;
	font-size: 15px;
	font-family: 'PT Sans', 'Open Sans', sans-serif;
	color: #170030;
	background-color : #f5cf87;
	border: none;
	border-radius: 5px;
	margin: 0px 0px 10px 0px;
	padding: 10px;
    cursor: pointer;
}

.article-button:hover {
	text-decoration: none;
	color: #f5cf87;
	background-color: #170030;
	border: none;
	border-radius: 5px;
}

.partners {
	background-color: #fefefe;
	margin: 60px 0px 0px 0px;
	padding: 12px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.partners-heading {
	text-align: center;
	color: #170030;
	margin: 16px 0px 0px 0px;
}

.company-ad {
	display: block;
}

.company-ad a {
    text-decoration: none;
}

.company-2, .company-3, .company-4 {
    margin: 40px 0px 0px 0px;
	border: 1px solid #9387A0;
}

.company-1 {
	margin: 5px 0px 0px 0px;
	border: 1px solid #9387A0;
}

.company-image-1, .company-image-2, .company-image-3, .company-image-4 {
	margin: 0 auto;
}

.company-figcaption1, .company-figcaption2, .company-figcaption3, .company-figcaption4 {
    font-family: 'PT Sans', 'Open Sans', sans-serif;
	font-size: 14px;
	text-align: center;
	color: #433156;
	padding: 0px 5px 5px 5px;
}

.home-page-join-banner {
	display: grid;
	grid-template-columns: 1fr;
	grid-row: auto;
	margin: 60px 0px 0px 0px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.home-page-join-banner-img {
	grid-column: 1/2;
	grid-row: 1/2;
}

.home-page-join-banner-box {
	grid-column: 1/2;
	grid-row: 1/2;
	background-color: rgba(23, 0, 48, 0.5);
	text-align: center;
	margin: 12px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
 }

.join-banner-heading {
	font-size: 32px;
	font-weight: bold;
	line-height: 1.5;
	color: #fefefe;
	margin: 0px 0px 10px 0px;
	padding: 5px 33px 8px 33px;
}

.join-button {
	text-decoration: none;
	text-align: center;
	font-size: 20px;
	font-family: 'PT Sans', 'Open Sans', sans-serif;
	color: #170030;
	background-color : #f5cf87;
	border: none;
	border-radius: 5px;
	padding: 10px;
    cursor: pointer;
}

.join-button:hover {
	text-decoration: none;
	color: #f5cf87;
	background-color: #170030;
	border: none;
	border-radius: 5px;
}

footer {
	display: flex;
	flex-direction: column;
	font-family: 'PT Sans', 'Open Sans', sans-serif;
	background-color: #F0FFFF;
	margin: 0px;
    padding: 0px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

footer p {
	margin: 1px 0px;
	padding: 12px 12px 0px 12px;
}

footer section a {
	max-width: 24px;
	max-height: 24px;
}

footer em {
	font-style: normal;
	color:#433156;
	padding: 0px 12px 12px 12px;
}

section.contact-info p {
    color: #f5cf87; 
	padding: 0px;
	margin: 0px 0px 10px 0px;
}

.contact-info {
	display: grid;
	grid-template-columns: 33px 33px 33px 33px auto;
	grid-template-rows: auto auto auto auto auto 60px;
	column-gap: 10px;
	background-color: #170030;
	padding: 12px;
}

.contact-info-heading {
	grid-column: 1/6;
	grid-row: 1/2;
	font-weight: 400;
	color: #f5cf87;
	margin: 14px 0px 24px 0px;
}

.budvachamber-heading {
	grid-column: 1/6;
	grid-row: 2/3;
	font-size: 18px;
	font-weight: 400;
	color: #f5cf87;
	margin: 0px 0px 12px 0px;
}

.address-icon {
	grid-column: 1/2;
	grid-row: 3/4;
	max-width: 24px;
	height: auto;
	margin: 10px 0px 0px 0px;
}

.address {
	grid-column: 2/6;
	grid-row: 3/4;
}

.email-icon {
	grid-column: 1/2;
	grid-row: 4/5;
	max-width: 24px;
	height: auto;
}

.email {
	grid-column: 2/6;
	grid-row: 4/5;
}

.phone-icon {
	grid-column: 1/2;
	grid-row: 5/6;
	max-width: 24px;
	height: auto;
	margin: 8px 0px 0px 0px;
}

.phone {
	grid-column: 2/6;
	grid-row: 5/6;
}

.linkedin-icon {
	grid-column: 1/2;
	grid-row: 6/7;
	max-width: 32px;
	height: auto;
	margin: 20px 0px 0px 0px;
}

.pinterest-icon {
	grid-column: 2/3;
	grid-row: 6/7;
	max-width: 32px;
	height: auto;
	margin: 20px 0px 0px 0px;
}

.twitter-icon {
	grid-column: 3/4;
	grid-row: 6/7;
	max-width: 32px;
	height: auto;
	margin: 20px 0px 0px 0px;
}

.youtube-icon {
	grid-column: 4/6;
	grid-row: 6/7;
	max-width: 32px;
	height: auto;
	margin: 20px 0px 0px 0px;
}

.website-info {
    background-color: #f5cf87;
	padding: 0px 0px 15px 0px;
}

.website-info em {
	color: #170030;
}

.website-info-content {
	color: #170030;
}

/* CSS Styling - Budva Page */

.header-budva-page {
	display: grid;
	grid-template-columns: 65px auto;
	grid-template-rows: 65px 1fr;
	column-gap: 15px;
	row-gap: 15px;
	background-color: #fefefe;
	padding: 0px;
	margin: 0px;
}

.header-budva-page .weather-info {
	display: none;
}

.header-budva-page img {
	width: 64px;
	height: auto;
	grid-column: 1/2;
	grid-row: 1/2;
	padding: 15px 0px 15px 0px;
}

.header-budva-page .headings {
	grid-column: 2/3;
	grid-row: 1/2;
	padding: 15px 0px 15px 0px;
}

.header-budva-page nav {
	grid-column: 1/3;
	grid-row: 2/3;
	margin: 15px 0px 0px 0px;
}

.town-event-box1 {
	color: #f5cf87;
    background-color: #170030;
	padding: 10px;
}

.town-event-box2 {
	color: #170030;
	background-color: #f5cf87;
	margin: 40px 0px 0px 0px;
	padding: 10px;
}

.town-event-box1 h3, .town-event-box2 h3 {
	font-size: 30px;
}

.attractions-budva {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto auto auto;
	background-color: #fefefe;
	margin: 60px 0px 60px 0px;
	padding: 12px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.attractions-budva-img {
	grid-column: 1/2;
	grid-row: 1/2;
}

.budva-attractions-heading {
	grid-column: 1/2;
	grid-row: 2/3;
    font-weight: 400;
	color: #170030;
	margin: 14px 0px 7px 0px;
}

.attractions-budva-p1 {
	grid-column: 1/2;
	grid-row: 3/4;
	margin: 0px 0px 12px 0px;
}

.attractions-budva-p2 {
	grid-column: 1/2;
	grid-row: 4/5;
	margin: 0px 0px 12px 0px;
}

.attractions-budva-p3 {
	grid-column: 1/2;
	grid-row: 5/6;
	margin: 0px 0px 8px 0px;
}

.budva-page-article-button {
	max-width: 145px;
	height: auto;
	text-decoration: none;
	text-align: center;
	font-size: 15px;
	font-family: 'PT Sans', 'Open Sans', sans-serif;
	color: #170030;
	background-color : #f5cf87;
	border: none;
	border-radius: 5px;
	margin: 0px 0px 10px 0px;
	padding: 10px;
    cursor: pointer;
}

.budva-page-article-button:hover {
	text-decoration: none;
	color: #f5cf87;
	background-color: #170030;
	border: none;
	border-radius: 5px;
}

/* CSS Styling - Contact Page */

.header-contact-page {
	display: grid;
	grid-template-columns: 65px auto;
	grid-template-rows: 65px 1fr;
	column-gap: 15px;
	row-gap: 15px;
	background-color: #fefefe;
	padding: 0px;
	margin: 0px;
}

.header-contact-page .weather-info {
	display: none;
}

.header-contact-page img {
	width: 64px;
	height: auto;
	grid-column: 1/2;
	grid-row: 1/2;
	padding: 15px 0px 15px 0px;
}

.header-contact-page .headings {
	grid-column: 2/3;
	grid-row: 1/2;
	padding: 15px 0px 15px 0px;
}

.header-contact-page nav {
	grid-column: 1/3;
	grid-row: 2/3;
	margin: 15px 0px 0px 0px;
}

.contact-info-content p {
    margin: 0px 0px 8px 0px; 
}

.contact-info-content {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto auto auto auto;
	column-gap: 10px;
	background-color: #fefefe;
	padding: 5px 12px 22px 12px;
}

.contact-info-content-heading {
	text-align: center;
	color: #170030;
	font-weight: 400;
	grid-column: 1/3;
	grid-row: 1/2;
	margin: 24px 0px 15px 0px;
}

.address-box {
    grid-column: 1/2;
	grid-row: 2/3;
}

.full-address {
	grid-column: 2/3;
	grid-row: 2/3;
}

.phone-box {
	grid-column: 1/2;
	grid-row: 3/4;
}

.phone-number {
	grid-column: 2/3;
	grid-row: 3/4;
}

.email-box {
	grid-column: 1/2;
	grid-row: 4/5;
}

.email-info {
	grid-column: 2/3;
	grid-row: 4/5;
}

.social-icon-box {
    grid-column: 1/3;
	grid-row: 5/6;
}

.social-icon-box a {
    max-width: 32px;
	max-height: 32px;
}

.social-icon-box {
	display: grid;
	grid-template-columns: auto auto auto auto;
	grid-template-rows: auto;
	margin: 12px 0px 0px 0px;
}

.linkedin-icon2 {
	grid-column: 1/2;
	grid-row: 1/2;
}

.pinterest-icon2 {
	grid-column: 2/3;
	grid-row: 1/2;
}

.twitter-icon2 {
	grid-column: 3/4;
	grid-row: 1/2;
}

.youtube-icon2 {
	grid-column: 4/5;
	grid-row: 1/2;
}

.list-of-directors {
	text-align: center;
    background-color: #fefefe;
	margin: 60px 0px 0px 0px;
    padding: 5px 12px 12px 12px;
}

.list-of-directors h4 {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	color: #170030;
	margin: 24px 0px 3px 0px;
}

.list-of-directors p {
	text-align: center;
}

.board-of-directors-heading {
	text-decoration: underline;
    text-align: center;
	color: #170030;
	font-weight: 400;
	margin: 24px 0px 15px 0px;
}

.contact-form, .membership-application-form {
	background-color: #fefefe;
	margin: 60px 0px 60px 0px;
	padding: 5px 12px 12px 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.contact-form-heading, .membership-application-form-heading {
	text-align: center;
	color: #170030;
	font-weight: 400;
	line-height: 1.4;
	margin: 24px 0px 15px 0px;
}

form fieldset {
	background-color: #fefefe;
    padding: 0px;
	border: none;
}

div.contact-form form fieldset:nth-child(1), div.membership-application-form form fieldset:nth-child(1) {
    margin: 1.4rem 0 1rem 0;
}

div.contact-form form fieldset:nth-child(2), div.membership-application-form form fieldset:nth-child(2) {
    margin: 2rem 0 1rem 0;
}

form legend {
	width: 100%;
	font-family: 'Oswald', 'Open Sans', sans-serif;
	letter-spacing: 1px;
	font-size: 18px;
    color: #f5cf87;
	background-color: #170030;
    margin: 0px;
    padding: 5px 18px 5px 18px;
	border-radius: 5px 5px 0px 0px;
}

form label.form-details, form div {
    display: block;
	margin: 0px 0px 3px 0px;
    padding-top: 1rem;
    color: #170030;
    font-size: 16px;
	font-family: 'PT Sans', 'Open Sans', sans-serif;
}

form label.form-details input, form label.form-details select {
    -webkit-appearance: none;
    display: block;
    font-size: 16px;
    border: solid 1px #170030;
    border-radius: 5px;
    padding: .75rem;
    color: #433156;
    width: 100%;
    background-color: #ffffff;
}

form input.submitBtn {
	font-family: 'PT Sans', 'Open Sans', sans-serif;
    border: none;
    background-color: #f5cf87;
    color: #170030;
    border-radius: 5px;
    padding: .75rem 1.5rem;
    margin: 0px 18px 10px 0px;
    width: 80%;
    max-width: 20rem;
}

.submitBtn:hover {
	text-decoration: none;
	color: #f5cf87;
	background-color: #170030;;
	border: #170030 solid 1px;
	border-radius: 5px;
	width: 80%;
	height: 42px;
    max-width: 20rem;
	cursor: pointer;
}

form label.form-details input:required {
    border-left: red solid 3px;
}

form label.form-details input:required:valid {
    border-left: green solid 3px;
}

textarea {
	font-size: 16px;
	color: #170030;
	border-color: #170030;
	width: 100%;
	border-radius: 5px;
	padding: 10px;
}

.form-description1, .form-description2 {
	border-radius: 0px;
	line-height: 1.6;
}

.embedded-googlemap-budva {
	display: none;
}

.confirmation-box {
	background-color: #fefefe;
	padding: 12px;
}

.contact-page-form-confirmation-heading {
	color: #170030;
	line-height: 1.4;
}



/* CSS Styling - Join Page */

.header-join-page {
	display: grid;
	grid-template-columns: 65px auto;
	grid-template-rows: 65px 1fr;
	column-gap: 15px;
	row-gap: 15px;
	background-color: #fefefe;
	padding: 0px;
	margin: 0px;
}

.header-join-page .weather-info {
	display: none;
}

.header-join-page img {
	width: 64px;
	height: auto;
	grid-column: 1/2;
	grid-row: 1/2;
	padding: 15px 0px 15px 0px;
}

.header-join-page .headings {
	grid-column: 2/3;
	grid-row: 1/2;
	padding: 15px 0px 15px 0px;
}

.header-join-page nav {
	grid-column: 1/3;
	grid-row: 2/3;
	margin: 15px 0px 0px 0px;
}

form label.answer-option {
    display: block;
	font-family: 'PT Sans', 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #170030;
	margin: 0px;
	padding: 16px 0px 0px 0px;
}

.membership-info-content, .core-benefits, .membership-levels {
	background-color: #fefefe;
	padding: 5px 12px 12px 12px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.core-benefits, .membership-levels {
	margin: 60px 0px 0px 0px;
}

.membership-info-content-heading, .core-benefits-heading, .membership-levels-heading {
	font-family: 'Oswald', 'Open Sans', sans-serif;
	font-weight: 400;
	color: #170030;
	margin: 24px 0px 7px 0px;
}

.membership-info-p1, .membership-info-p2, .membership-level-1-p1, .membership-level-1-p2, .membership-level-2-p1, .membership-level-2-p2, .membership-level-2-p3, .membership-level-2-p4, .membership-level-3-p1, .membership-level-3-p2, .membership-level-3-p3, .membership-level-3-p4, .membership-level-4-p1, .membership-level-4-p2, .membership-level-4-p3, .membership-level-4-p4, .membership-level-4-p {
    margin: 0px 0px 12px 0px;
}

.membership-info-p3 {
	margin: 0px 0px 10px 0px;
}

.membership-level-1-p2, .membership-level-2-p2, .membership-level-2-p3, .membership-level-2-p4, .membership-level-3-p2, .membership-level-3-p3, .membership-level-3-p4, .membership-level-4-p2, .membership-level-4-p3, .membership-level-4-p4, .membership-level-4-p5 {
	font-weight: bold;
	letter-spacing: 1px;
	color: #170030;
	margin: 0px 0px 5px 0px;
}

.benefits, .other-benefits {
	margin: 0px;
	padding: 0px 0px 0px 17px;
}

.benefits li, .other-benefits li {
	font-family: 'PT Sans', 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #433156;
	margin: 0px;
	padding: 0px 0px 12px 0px;
}

.benefits li:nth-child(11) {
	padding: 0px 0px 10px 0px;
}

.membership-level-1-heading, .membership-level-2-heading, .membership-level-3-heading, .membership-level-4-heading {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
	color: #170030;
    margin: 12px 0px 7px 0px;
}

.membership-level-2-heading, .membership-level-3-heading, .membership-level-4-heading {
    padding: 12px 0px 0px 0px;
}

hr {
	border: 1px solid #9387A0;
}

.join-page-photo {
	display: none;
}


/* CSS Styling - Directory Page */

.header-directory-page {
	display: grid;
	grid-template-columns: 65px auto;
	grid-template-rows: 65px 1fr;
	column-gap: 15px;
	row-gap: 15px;
	background-color: #fefefe;
	padding: 0px;
	margin: 0px;
}

.header-directory-page .weather-info {
	display: none;
}

.header-directory-page img {
	width: 64px;
	height: auto;
	grid-column: 1/2;
	grid-row: 1/2;
	padding: 15px 0px 15px 0px;
}

.header-directory-page .headings {
	grid-column: 2/3;
	grid-row: 1/2;
	padding: 15px 0px 15px 0px;
}

.header-directory-page nav {
	grid-column: 1/3;
	grid-row: 2/3;
	margin: 15px 0px 0px 0px;
}


#container {
	background-color: #fefefe;
	padding: 5px 12px 12px 12px;
}

#container ul { 
	list-style: none; 
}

#container .buttons { 
	margin-bottom: 20px; 
}

#container .list li { 
	width: 100%; border-bottom: 1px dotted #CCC; 
	margin-bottom: 10px; 
	padding-bottom: 10px; 
}

#container .grid li { 
	float: left; width: 20%; 
	height: 50px; border-right: 1px dotted #CCC; 
	border-bottom: 1px dotted #CCC; padding: 20px; 
}

/* This is the CSS styling for the mobile version -	iPhone 5/SE */
@media (min-width: 281px) and (max-width: 320px) {
	.banner-heading {
		font-size: 35px;
		line-height: 1.4;
		margin: 0px;
		padding: 5px 28px 8px 28px;
	}
}

/* This is the CSS styling for the mobile version - Galaxy Fold */
@media (max-width: 280px) {
    .banner-box {
		margin: 10px;
	 }

	.banner-heading {
		font-size: 30px;
		line-height: 1.4;
		margin: 0px;
		padding: 5px 28px 8px 28px;
	}

	.article-button {
		grid-column: 1/2;
		grid-row: 4/5;
		max-width: 125px;
		height: auto;
		padding: 7px;
	}

	.join-banner-heading {
		font-size: 27px;
		margin: 0px;
	}

	.join-button {
		font-size: 17px;
		padding: 7px;
	}


/*----- Clearfix: Force an Element not to collapse -----*/
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
}