* {
	box-sizing: border-box;
}

body {
  font-family:  helvetica, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
/*  max-width: 70vw; */
/*  max-width: 80ch;  */
  margin: 0 auto;   /* center page */
}

 p {
  font-size: 1.2em;
  line-height: 1.3em;
}

.header {
	padding-top: .5em;
	padding-bottom: .5em;
        background-color: #fff;
        border-bottom: 1px solid  #BB1919;
}

footer {
  display: grid;
  place-items: center;
  padding: .5rem;
  margin-top: auto;
  border-top: 1px solid  #BB1919;
}

main {
  padding: 1rem;
  max-width: 100ch;
  margin: 0 auto;
/*  background-color: #e9eff0; */
/*  outline: 2px dashed #4810f7; */
  font-size: 1.2em;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.2em;
  line-height: 1.5em;
}

ol {
  font-size: 1.2em;
  line-height: 1.3em;
}


h1,h2,h3,h4,h5 {
color: #000080;
}

h3 {
font-size: 1.4em;
}

h4 {
font-size: 1.3em;
}

h5,h6 {
font-size: 1.2em;
}



a {
	color: #BB1919;
}

a {
	text-decoration: underline;
}



.logo {
	margin: 0;
        padding: 0;   /* ???????????????? */
	font-size: 1.1em;
}

.logo a {
	padding: 5px 10px 0 0;
	text-align: center;
	display: block;
}

.header-name {
       padding: 5px 0 0 10px;
       text-transform: uppercase;
       color: #000080; /* #BB1919; */
       font-size: 1.2em;
       text-align: center;
       display: block;
       }

.main-nav a {
	padding: 5px 15px;
	text-transform: uppercase;
	text-align: center;
	display: block;
}

.main-nav a {
	color: #BB1919;
	font-size: .99em;
}

.main-nav a:hover {
	color: #fff;
	background-color: #BB1919;
        border-bottom: solid 2px #BB1919;
}


.container {
/*  padding: 1rem; */
/*  max-width: 120ch; */
  width: 85%;
  margin: 0 auto;
/*  background-color: #e9eff0; */
/*  outline: 2px dashed #4810f7; */
}

/* =================================
  Media Queries
==================================== */

@media (min-width: 769px) {
	.header,
	.main-nav {
		display: flex;
	}
	.header {
		flex-direction: column;
		align-items: center;}
        .logo {
           display: flex}  /*------------------???????----*/


}

@media (min-width: 1025px) {
	.header {
		flex-direction: row;
		justify-content: space-between;
	}

}

/* --------------------------------------------- */
/* skip to content popup */


#skiptocontent a {
	padding:6px;
	position: absolute;
	top:-40px;
	left:0px;
	color:white;
	border-right:1px solid white;
	border-bottom:1px solid white;
	border-bottom-right-radius:8px;
	background:#BF1722;
	-webkit-transition: top .5s ease-out;
    transition: top .5s ease-out;
    z-index: 100;
}

#skiptocontent a:focus {
	position:absolute;
	left:0px;
	top:0px;
	outline-color:transparent;	
	-webkit-transition: top .05s ease-in;
    transition: top .05s ease-in;
}

@media (prefers-reduced-motion: reduce) {
	#skiptocontent a {
		transition-duration: 0.001ms !important;
	}
}