/* 2020 Travel Notes Mobile Styles */

body {
	background-image: url('https://travelnotes.org/Cover.jpg');
	background-repeat:no-repeat;
	background-attachment: fixed;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 18px;
	color: #000080;
	/* background-color: #FFFFFF; */
	/* background: #A9DEAC; */
}
a:visited {
	font-size: 18px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #6991d6;
}
a:link {
	font-size: 18px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #1E46E5;
}
a:hover {
	font-size: 18px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #FF0000;
	text-decoration: none;
}

/* Holder Styles */

html {
	font-family: "Lucida Sans", sans-serif;
	color: navy;
}
.header {
	padding: 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #215284;

}
.center {
	align-items: center;
	text-align: center;
}
.container {
	width: 100%;
	max-width: 960px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid navy;
	background-color: white;
	padding: 6px;
	border-radius: 1.50rem;
}
img {
	max-width: 100%;
	height: auto;
	border: 0px;
}
img.displayed {
	display: block;
   margin-left: auto;
   margin-right: auto;			
}
.middleImage   {
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	border: 0px;
	vertical-align: middle;
}
.twipImage   {
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	border: 0px;
	border-radius: 12px;
	opacity: 1.0;
	vertical-align: middle;
}
.twipImage:hover   {
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	border: 0px;
	border-radius: 12px;
	opacity: 0.6;
   vertical-align: middle;
}

/* Headings
h2 Maroon
h3 Purple
h4 for Getting There and Attractions */
h2 {
	margin-left: 6;
	line-height: 1;
	color: #215284;
}
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #2444a4;
	margin-left: 10px;
}
h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #215284;
	margin-left: 4px;
}

/* Column Boxes */

* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 5px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* Main Content */

.introduction {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #000080;
	margin-left: 8px;
}
.introduction a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #6991d6;
	text-decoration: underline;
}
.introduction a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #1E46E5;
	text-decoration: underline;
}
.introduction a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #FF0000;
	text-decoration: none;
}

.maintext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #000080;
	margin-left: 20px;
	margin-right: 20px;
}
.maintext a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #6991d6;
	text-decoration: underline;
}
.maintext a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #1E46E5;
	text-decoration: underline;
}
.maintext a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #FF0000;
	text-decoration: none;
}

.revheadertext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: white;
	padding: 2px 0px 2px 8px;
	background-color: #215284;
}
.revheadertext a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: white;
	text-decoration: none;
}
.revheadertext a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: gold;
	text-decoration: none;
}
.revheadertext a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: gold;
	text-decoration: none;
}

.website {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #000080;
	margin-left: 30px;
	margin-right: 30px;
}
.website a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #6991d6;
	text-decoration: underline;
}
.website a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #1E46E5;
	text-decoration: underline;
}
.website a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #FF0000;
	text-decoration: none;
}

.contact {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #000080;
	margin-right: 15px;
	text-align: right;
}

/* Footer */
.footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000080;
	text-align: center;
}
.footer a:link, .footer a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000080;
	text-decoration: underline;
}
.footer a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FF0000;
	text-decoration: none;
}

/* Grid Styles */

.grid {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
    "pro pro"
    "listing lodging"
    "tourist sites";
}
.pro-features {
	grid-area: pro;
}
.feature-business {
	grid-area: listing;
}
.feature-lodging {
	grid-area: lodging;
}
.feature-assets {
	grid-area: tourist;
}
.feature-sites{
	grid-area: sites;
}

a.grid {
	text-decoration-color: rgb(0, 200, 189);
	text-decoration-line: underline;
	color: rgb(181, 193, 237);
	display: inline-block;
}

.grid a:hover {
	color: rgb(0, 200, 189);
	text-decoration: none;
}

.grid > div {
	background: #444;
	color: white;
	border-radius: 1rem;
	padding: 1rem;
	border-top: 1px solid #666;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}

body {
	margin: 0;
	padding: 1rem;
	line-height: 1.3;
	font-family: Roboto, sans-serif;
}


/* Breadcrumbs */

.breadcrumb {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: .75rem 1rem;
	margin-bottom: 1rem;
	list-style: none;
	background-color: #e9ecef;
	border-radius: .25rem;
}

.breadcrumb-item + .breadcrumb-item {
	padding-left: .5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
	display: inline-block;
	padding-right: .5rem;
	color: #6c757d;
	content: "/";
}

.breadcrumb-item + .breadcrumb-item:hover::before {
	text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item:hover::before {
	text-decoration: none;
}

.breadcrumb-item.active {
	color: #6c757d;
}

/* Go To Top Button */

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: gray;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

/* Wrapper */

.wrapper {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: repeat(4, [col] 250px ) ;
	grid-template-rows: repeat(2, [row] auto  );
	background-color: #fff;
	color: #444;
}

.box {
	background-color: #444;
	color: #fff;
	border-radius: 5px;
	padding: 20px;
	font-size: 150%;
}

.box .box {
	background-color: #ccc;
	color: #444;
}

.c {
	grid-column: col / span 1;
	grid-row: row 2;
}

.d{
	grid-column: col 2 / span 2;
	grid-row: row 2;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 1fr 1fr;
}

.e {
	grid-column: 1;
	grid-row: 1;
}
.f {
	grid-column: 2;
	grid-row: 1;
}
.g {
	grid-column: 1;
	grid-row: 2;
}
.h {
	grid-column: 2;
	grid-row: 2;
}

/* Directory */
.catheadertext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #800080;
}
.subcategories {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #000080;
	text-decoration: none;
	text-align: left;
}
.subcategories a:link, .subcategories a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #800000;
	text-decoration: underline;
	text-align: left;
}
.subcategories a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #FF0000;
	text-decoration: none;
	text-align: left;
}
.sponsor {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000080;
}
.sponsor a:link, .sponsor a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #800000;
	font-weight: bold;
	text-decoration: underline;
}
.sponsor a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FF0000;
	font-weight: bold;
	text-decoration: none;
}

.subcatheadertext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #800000;
	font-weight: normal;
}