:root {
	--base-scale:calc(100vw / 75);
	--h2-font-size:max(1em, min(4em, calc(var(--base-scale) * 4)));
	--padding-size:max(0.5em, min(1em, calc(var(--base-scale) )));
	--margin-size:max(0.5em, min(1.5em, calc(var(--base-scale) * 2)));
	--border-radius:max(0.5em, min(1.5em, calc(var(--base-scale) * 1.5)));
  --border-radius-small:max(0.25em, min(0.75em, calc(var(--base-scale) * 0.55)));
}

html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
  font-family: monospace, "Helvetica", "Arial", sans-serif;
}

@media (max-width:480px) {
	/* Fix for pre "viewport <meta>" mobile browsers */
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}


html {
	height:100%;
}

body {
  background: #fafafa;
  color: #444;
  padding-bottom: 1em;
  display:flex;
	flex-direction:column;
	min-height:100%;
  /* margin: 0 auto; */
  /* max-width: 1024px; */
  min-width: 320px;
  /* padding: 0 10px 25px; */
  font-family: monospace, "Helvetica", "Arial", sans-serif;
}

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

body > main.grid {
  flex:1 0 auto;
  align-self: center;
  display: grid;
  column-gap: 2px; 
  grid-template-columns: auto auto;
  grid-template-areas:
    "left right"
    "footerline footerline"
}

body > header,
body > footer {
	padding:1em;
	flex:0 0 auto;
}

.footer {
  grid-area: footerline;
  justify-self: center;
  margin-top: 1em;
  /* width: 80%; */
  border-top: 2px solid #0488;
  font-size: 0.8em;
  padding: 0.5em 3em 0.5em 3em;
}

body > header h1 {
	flex:1 0 auto;
}

body > header nav {
	flex:1 0 auto;
  text-align:right;
}

article {
	max-width:42em;
	padding:var(--padding-size);
	margin:var(--margin-size);
	border-radius:var(--border-radius);
  font-size: 1em;
}

.contentImg {
  max-height:20em;
  max-width:32em;
  margin-top: 1em;
  margin-bottom: 1em;
}
.contentImg::after {
  content: "\a";
  white-space: pre;
}

.singleMain {
  display:flex;
	flex-direction:column;
  flex:1 0 auto;
	padding:var(--padding-size);
	margin:var(--margin-size);
	border-radius:var(--border-radius);
  align-items:center;
	justify-content:start;
}

.singleMain div {
  text-align:center;
  flex:1 0 auto;
}

article h3 {
  text-align: center;
  margin-bottom: 0.5em;
}

.j-description {
  margin-bottom: 0.5em;
  max-width: 50em;
}

h2 {
	font-size:var(--h2-font-size);
	line-height:1.2;
}

body > header {
  display:flex;
  margin: 0 auto;
  width: 80%;
  align-items: stretch;
}

body > header h1{
  flex:1 0 auto;
  text-align: left;
}

body, button, input, table, textarea, select {
	font-size:1em;
	line-height:1.2;
}

nav {
  font-size: 1em;
  letter-spacing: 1px;
  grid-area: nav;
  justify-self: right;
  align-self: end;
}
nav a {
  margin-left: 8px;
  text-align: right;
}

.bloglink {
  margin-left: 16px;
}

.line {
  width: 80%;
  margin: 0 auto;
  grid-area: line;
  border-top: 2px solid #0488;  
}

.right {
  grid-area: right;
}
.right img {
  max-width: 100%;
  grid-area: right;
}

.left {
  grid-area: left;
  position: sticky;
  align-self: start;
  top: 0;
  text-align: center;
}

.left div img {
  border-radius:var(--border-radius);
}

ul {
  list-style-position: inside;
}

a {
  color: #9a5612;
}

h1 {
  font-size: 2em;
  text-align: center;
}

h1 a {
  color: #222;
  text-align: center;
}

h1, h2 {
  color: #222;
}

table {
  border-collapse: collapse;
}
thead {
  background-color: #eee
}

.delLink {
  color:red;
  cursor: pointer;
}

.delLink:hover{
  color:red;
  text-decoration: underline;
}

.imgholder {
  position: relative;
  max-width:512px;
  vertical-align: top;
}

.rel {
  position: relative;
}
.mapimg {
  max-width:100%;
  object-fit:scale-down;
  vertical-align: top;
}

.pointOverlay {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.7;
  width: 100%;
  height: 100%;
  background: transparent;
}


#loader {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


@media (max-width:50em) {
  
  body > main.grid { 
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
    "left"
    "right"
    "footerline"
 }
  main.grid article {
    max-width:90vw;
  }
  .imgholder {
    max-height: 100%;
  }
  body > header {
    flex-direction: column-reverse;
    align-items: normal;
  }
  body > header h1 {
    text-align: center;
  }  
  body > header nav {
    margin-top: 0.5em;
  }

  .left {
    grid-area: left;
    position: static;
    align-self: start;
    top: 2rem;
  }
  .left div img {
    border-radius:var(--border-radius);
    max-width: 90vw;
  }
}
/*  ---------- editTrip only  ------------ */

body form label {
  margin-top: 0.5em;
}


/*  ---------- journey only  ------------ */

.card {
  min-width: 35vw;
  padding: 0.3em;
  border-radius:var(--border-radius-small);
}

.card:hover {
  background-color: rgb(243, 243, 243);
}
.card h3 {
  margin-bottom: 0.2em;
}
.card img {
  border-radius:var(--border-radius-small);
}