@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Spectral:400,400i,700&display=swap");
:root {
  --sandy-text: #E6E1DA;
  --wild-sand: #f5f5f1;
  --cararra: #ecede6;
  --snow-drift: #e3e5da;
  --gin: #dadcce;
  --olive-haze: #8e876f;
  --coffee: #6e6856;
  --camouflage: #504937;
  --cocoa-brown: #302a1b;
  --apricot: #e98d72;
  --japonica: #d46c55;
  --mojo: #be4a37;
  --tabasco: #a82714;
  --green: #005a00;
  --fern: #004200;
  --fir: #002900;
  --moss: #001100;
  --black: #001100;
  --pure-snow: #ffffff;
  
  --font-family: "Barlow", sans-serif;
  --font-family-condensed: "Barlow Condensed", sans-serif;
  --font-family-alt: "Spectral", serif;
  --font-family-display: var(--font-family);
  --font-family-text: var(--font-family);
  --font-family-system: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
  --font-family-mono: Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;
  --font-weight-thin: 100;
  --font-weight-extra-light: 200;
  --font-weight-light: 300;
  --font-weight: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 900;
  --text-scale-ratio: 1.125;
  --font-size-xxxx-display: 2.887rem;
  --font-size-xxx-display: 2.887rem;
  --font-size-xx-display: 2.566rem;
  --font-size-x-display: 2.027rem;
  --font-size-display: 1.802rem;
  --font-size-xxxx-large: 1.602rem;
  --font-size-xxx-large: 1.424rem;
  --font-size-xx-large: 1.602rem;
  --font-size-x-large: 1.424rem;
  --font-size-large: 1.266rem;
  --font-size-medium: 1.125rem;
  --font-size: 1rem;
  --font-size-small: 0.889rem;
  --font-size-x-small: 0.79rem;
  --font-size-xx-small: 0.6rem;
  
  --line-height-text: 1.3;
  --line-height-display: 1.125;
  --line-height-alt: 1.25;
  --line-height: 1;
  
  --border-radius-x-small: 0.25rem;
  --border-radius-small: 0.5rem;
  --border-radius-medium: 0.75rem;
  --border-radius-large: 1rem;
  --border-radius-circle: 50%;
  --border-width-hairline: 1px;
  --border-width-thin: 2px;
  --border-width-thick: 4px;
  --border-style-thin: var(--border-width-hairline) solid var(--camouflage);
  --border-style-thick: var(--border-width-thick) solid var(--camouflage);
  --border-style-focus: var(--border-width-hairline) dotted var(--apricot);
  --max-width: 90rem;
  --min-width: 60rem;
  --spacing-xx-small: 0.125rem;
  --spacing-x-small: 0.25rem;
  --spacing-small: 0.5rem;
  --spacing: 0.75rem;
  --spacing-medium: 1rem;
  --spacing-large: 1.5rem;
  --spacing-x-large: 2rem;
  --spacing-xx-large: 3rem;
  --bp-x-small: 18.75em;
  --bp-small: 30em;
  --bp-medium: 48em;
  --bp-large: 64em;
  --bp-x-large: 75em;
  --bp-xx-large: 87.5rem;
  --standard-left-margin: 2.027rem;
  --small-left-margin: 1.527rem;
}


	a:link {
	  color: var(--coffee);
	  text-decoration: underline;
	}

	a:visited {
	  color: var(--fir);
	  text-decoration: underline;
	}

	a:hover,
	a:focus {
	  color: var(--green);
	  text-decoration: underline;
	}

	a:active {
	  color: var(--white);
	  opacity: 0.5;
	
	}

	


h1 {
  font-weight: var(--font-weight-extra-bold);
  font-size: var(--font-size-xx-display);
  color: var(--cararra);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  line-height:.86;
  margin-top:0.5rem;
  margin-bottom:2.027rem;
  margin-left:var(--standard-left-margin);
}


h2 {
	text-transform: uppercase;
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-x-large);
	color: var(--japonica);
	line-height:.8;
	margin-top:0.5rem;
	margin-bottom:2.027rem;
	margin-left:var(--standard-left-margin);
}

h3 {
	text-transform: uppercase;
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-x-large);
	color: var(--japonica);
	line-height:.8;
	margin-top:0.5rem;
	margin-bottom:2.027rem;
	margin-left:var(--standard-left-margin);
}

h6 {
	color: var(--black);
}

ul {
  list-style:none;
  list-style-type:none;
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-small);
  line-height: var(--line-height-alt);
  margin-top:0.5rem;
  margin-bottom:0.5rem;
}

.host_name {
	text-transform: uppercase;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-small);
	color: var(--cocoa-brown);
	line-height: var(--line-height-alt);
	margin-left:var(--small-left-margin);
}

.article {
/* font-weight: var(--font-weight-light); */
/* max-width: 65ch; */
margin: 1rem;
background-color: var(--cararra);
color: var(--black);
padding: 2px 14px;
text-align: left;
text-decoration: none;
/* display: inline-block; */
height: 100%;
width: 100%;
margin-left:var(--standard-left-margin);
}

.aside_text {
margin: 1rem;
background-color:  var(--cararra);
border: 1px solid #fff;
border-radius: 3px;
color: var(--sandy-text);
padding: 2px 14px;
text-align: left;
text-decoration: none;
display: inline-block;
width: 100%;
margin-left:var(--standard-left-margin);
}

.main_text {
width: 97%;
color: var(--black);
text-align: left;
text-decoration: none;
}

.front_text {
opacity: .85;
color: var(--black);
text-align: left;
text-decoration: none;
background-color:  var(--cararra);
margin-left:var(--standard-left-margin);
padding: 2px 14px;
}

.footer_text {
font-size: var(--font-size-xx-small);
margin-left:var(--standard-left-margin);
}



@media (min-width: 64em) {
  :root {
    --font-size-xxxx-display: 4.624rem;
    --font-size-xxx-display: 4.11rem;
    --font-size-xx-display: 3.653rem;
    --font-size-x-display: 2.887rem;
    --font-size-display: 2.566rem;
    --font-size-xxxx-large: 2.027rem;
    --font-size-xxx-large: 1.802rem;
    --font-size-xx-large: 1.602rem;
    --font-size-x-large: 1.424rem;
    --font-size-large: 1.266rem;
    --font-size-medium: 1.125rem;
    --font-size: 1rem;
    --font-size-small: 0.889rem;
    --font-size-x-small: 0.79rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  /* 1 */
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: inherit;
}

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

body {
  font-family: var(--font-family-text);
  font-size: var(--font-size);
  line-height: var(--line-height-text);
  color: var(--black);
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  }
 
@media (min-width: 40em) { 
	body {
	width: 100vw;
    height: 97vh;
	/* The grid system goes here... */
			display: grid;
			/* min-height: 100vh; */
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: repeat(3, 1fr);
			grid-column-gap: 2px;
			grid-row-gap: 2px;
			/* align-content: start; */
			margin: var(--spacing-large);
			align-items: end;
			
		  }
  
		header {
			grid-area: 1 / 1 / 2 / 2;
			align-self: start;
			/* overflow: auto; */
			/* justify-self: start; */
		  }

		nav {
			grid-area:  1 / 4 / 2 / 5;
			justify-self: end;
			align-self: end;
			align-items: baseline;
		  }
  
		main {
			grid-area:  1 / 2 / 4 / 4;
			align-self: start;
			/* overflow: auto; */
		  }
  
		aside {
			grid-area:  2 / 1 / 4 / 2;
			align-self: start;
		
		  }
  
		footer {
			grid-area: 4 / 1 / 5 / 2;
			align-self: end;
			background-color: #fff;
		
		  }
}
	  
.itin {
margin: auto;
background-color: #fff;
border: 1px solid #000;
border-radius: 3px;
color: RED;
padding: 2px 14px;
text-align: left;
text-decoration: none;
display: inline-block;
width: 100%;
}


.nav_table {
display: block;
margin-right:6rem;
padding: 6px;
text-align: right;
background-color: var(--olive-haze);
border: 1px solid var(--snow-drift);
border-radius: 3px;
}

.align_right {
margin-left: auto; 
margin-right: 0;
border: 1px solid #000;
border-radius: 3px;
}

.lede {
 font-family: var(--font-family-text);
  font-size: var(--font-size);
  line-height: var(--line-height-text);
  color: var(--coffee);
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
}


.center {
  text-align: center;
}

.main_picture {
max-width: 240px;
height: auto;
float: left;
margin-right:18px;
margin-bottom:2px;
margin-top:2px;
}

.main_picture_horiz {
max-width: 360px;
height: auto;
float: left;
margin-right:18px;
margin-bottom:2px;
margin-top:2px;
}

.logo {
  margin-top: var(--spacing-medium);
  max-width: 125px;
  /* margin-inline: auto; */
  margin-left:var(--standard-left-margin);
  margin-bottom:0.027rem;
}

@media (min-width: 40em) {
	.logo {
	max-width: 250px;
	}
}

img {
border:1px solid #302a1b;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}

.float_left {
  float:left;
  margin-right:18px;
  margin-bottom:2px;
  margin-top:2px;
}

.float_right {
  float:right;
  margin-left:18px;
  margin-bottom:2px;
  margin-top:2px;
}

.br_cb { 
	clear: both; 
	}

.no_border {
	border: none;
}
.picture {
  max-width: 100%;
  height: auto; /* Ensures the image maintains its aspect ratio */
  display: block; /* Removes any extra space that might appear below the image */
  float: left;
  margin-right:12px;
  margin-bottom:2px;
  margin-top:2px;
}

.white_links {
a:link {
	  color: var(--cararra);
	  text-decoration: underline;
	}

	a:visited {
	  color: var(--cararra);
	  text-decoration: underline;
	}

	a:hover,
	a:focus {
	  color: var(--green);
	  text-decoration: underline;
	}

	a:active {
	  color: var(--white);
	  opacity: 0.5;
	
	}

}

	/* here begins all the slide show stuff */

	.CSSgal {
	  position: relative;
	  overflow: hidden;
	  height: 60%; /* Or set a fixed height */
	}

	/* SLIDER */

	.CSSgal .slider {
	  height: 100%;
	  white-space: nowrap;
	  font-size: 0;
	  transition: 0.8s;
	}

	/* SLIDES */

	.CSSgal .slider > * {
	  font-size: 1rem;
	  display: inline-block;
	  white-space: normal;
	  vertical-align: top;
	  height: 100%;
	  width: 100%;
	  background: none 50% no-repeat;
	  background-size: cover;
	}

	/* PREV/NEXT, CONTAINERS & ANCHORS */

	.CSSgal .prevNext {
	  position: absolute;
	  z-index: 1;
	  top: 50%;
	  width: 100%;
	  height: 0;
	}

	.CSSgal .prevNext > div+div {
	  visibility: hidden; /* Hide all but first P/N container */
	}

	.CSSgal .prevNext a {
	  background: #fff;
	  position: absolute;
	  width:       60px;
	  height:      60px;
	  line-height: 60px; /* If you want to place numbers */
	  text-align: center;
	  opacity: 0.7;
	  -webkit-transition: 0.3s;
			  transition: 0.3s;
	  -webkit-transform: translateY(-50%);
			  transform: translateY(-50%);
	  left: 0;
	}
	.CSSgal .prevNext a:hover {
	  opacity: 1;
	}
	.CSSgal .prevNext a+a {
	  left: auto;
	  right: 0;
	}

	/* NAVIGATION */

	.CSSgal .bullets {
	  position: absolute;
	  z-index: 2;
	  bottom: 0;
	  padding: 10px 0;
	  width: 100%;
	  text-align: center;
	  font-size: 10px;
	}
	.CSSgal .bullets > a {
	  display: inline-block;
	  width:       20px;
	  height:      20px;
	  line-height: 20px;
	  text-decoration: none;
	  text-align: center;
	  background: rgba(255, 255, 255, 1);
	  -webkit-transition: 0.3s;
			  transition: 0.3s;
	}
	.CSSgal .bullets > a+a {
	  background: rgba(255, 255, 255, 0.5); /* Dim all but first */
	}
	.CSSgal .bullets > a:hover {
	  background: rgba(255, 255, 255, 0.7) !important;
	}

	/* NAVIGATION BUTTONS */
	/* ALL: */
	.CSSgal >s:target ~ .bullets >* {      background: rgba(255, 255, 255, 0.5);}
	/* ACTIVE */
	#s1:target ~ .bullets >*:nth-child(1) {background: rgba(255, 255, 255,   1);}
	#s2:target ~ .bullets >*:nth-child(2) {background: rgba(255, 255, 255,   1);}
	#s3:target ~ .bullets >*:nth-child(3) {background: rgba(255, 255, 255,   1);}
	#s4:target ~ .bullets >*:nth-child(4) {background: rgba(255, 255, 255,   1);}
	#s5:target ~ .bullets >*:nth-child(5) {background: rgba(255, 255, 255,   1);}
	#s6:target ~ .bullets >*:nth-child(6) {background: rgba(255, 255, 255,   1);}
	#s7:target ~ .bullets >*:nth-child(7) {background: rgba(255, 255, 255,   1);}
	#s8:target ~ .bullets >*:nth-child(8) {background: rgba(255, 255, 255,   1);}
	#s9:target ~ .bullets >*:nth-child(9) {background: rgba(255, 255, 255,   1);}
	#s10:target ~ .bullets >*:nth-child(10) {background: rgba(255, 255, 255,   1);}
	#s11:target ~ .bullets >*:nth-child(11) {background: rgba(255, 255, 255,   1);}

/* More slides? Add here more rules */

	/* PREV/NEXT CONTAINERS VISIBILITY */
	/* ALL: */
	.CSSgal >s:target ~ .prevNext >* {      visibility: hidden;}
	/* ACTIVE: */
	#s1:target ~ .prevNext >*:nth-child(1) {visibility: visible;}
	#s2:target ~ .prevNext >*:nth-child(2) {visibility: visible;}
	#s3:target ~ .prevNext >*:nth-child(3) {visibility: visible;}
	#s4:target ~ .prevNext >*:nth-child(4) {visibility: visible;}
	#s5:target ~ .prevNext >*:nth-child(5) {visibility: visible;}
	#s6:target ~ .prevNext >*:nth-child(6) {visibility: visible;}
	#s7:target ~ .prevNext >*:nth-child(7) {visibility: visible;}
	#s8:target ~ .prevNext >*:nth-child(8) {visibility: visible;}
	#s9:target ~ .prevNext >*:nth-child(9) {visibility: visible;}
	#s10:target ~ .prevNext >*:nth-child(10) {visibility: visible;}
	#s11:target ~ .prevNext >*:nth-child(11) {visibility: visible;}
	
	/* More slides? Add here more rules */

	/* SLIDER ANIMATION POSITIONS */

	#s1:target ~ .slider {transform: translateX(   0%); -webkit-transform: translateX(   0%);}
	#s2:target ~ .slider {transform: translateX(-100%); -webkit-transform: translateX(-100%);}
	#s3:target ~ .slider {transform: translateX(-200%); -webkit-transform: translateX(-200%);}
	#s4:target ~ .slider {transform: translateX(-300%); -webkit-transform: translateX(-300%);}
	#s5:target ~ .slider {transform: translateX(-400%); -webkit-transform: translateX(-400%);}
	#s6:target ~ .slider {transform: translateX(-500%); -webkit-transform: translateX(-500%);}
	#s7:target ~ .slider {transform: translateX(-600%); -webkit-transform: translateX(-600%);}
	#s8:target ~ .slider {transform: translateX(-700%); -webkit-transform: translateX(-700%);}
	#s9:target ~ .slider {transform: translateX(-800%); -webkit-transform: translateX(-800%);}
	#s10:target ~ .slider {transform: translateX(-900%); -webkit-transform: translateX(-900%);}
	#s11:target ~ .slider {transform: translateX(-1000%); -webkit-transform: translateX(-1000%);}
	
	/* More slides? Add here more rules */


	/* YOU'RE THE DESIGNER! 
	   ____________________
	   All above was mainly to get it working :)
	   CSSgal CUSTOM STYLES / OVERRIDES HERE: */

	.CSSgal{
	  color: #fff;  
	  text-align: center;
	}
	.CSSgal .slider h2 {
	  margin-top: 20vh;
	  font-weight: 200;
	  letter-spacing: -0.06em;
	  word-spacing: 0.2em;
	  font-size: 3em;
	}
	.CSSgal a {
	  border-radius: 50%;
	  margin: 0 3px;
	  color: rgba(0,0,0,0.8);
	  text-decoration: none;
	}


	.caption {
	color: #000;  
	  text-align: center;
	  margin-bottom: 2rem;
	};