@charset "UTF-8";
/* CSS Document */
footer, .more {background-color: #37505a;}
/* front page */
.frontstripe {padding: 5% 12%; background-color: #ffffff;}
.frontcontent {display: flex; flex-direction: column; width: 100%;align-content: space-between;}
.frontheadline {margin: 0 auto; font-family: "quatro-slab", serif; font-weight: 900; color: #ffffff;}
.frontheadline h1 {font-size: 1.5rem;}
.frontbuttons {display: flex; width: 100%; margin: 10% auto 15%; column-gap: 2%;}
.frontbuttons li { line-height: 120%;}
.frontbuttons a {color: #000000;}
.frontbuttons a:hover {text-decoration: none;}
.logobutton {text-align: center; padding: 0 12px 0 0;}

/* rive animation */
.splashstripe {background-color: #000000;}
.splashscreen {width: 100%; height: auto;border: #ffffff solid 2px;}

#homepagerive {width: 100vw; margin: 0 auto; padding: 3% 12% 0; overflow-y: hidden; display: flex; justify-content: center;}
.homepagerivestripe {width: 100vw; margin: 0; padding: 0;  }
.buttonbkgd {margin: 0; padding: 0;width: 340; height: 250; background-color: #061519;}
#homepageRBbutton, #homepageMRbutton {margin: 0; padding: 0; overflow-y: hidden; display: flex; justify-content: flex-start;}
.homepagebutton {max-width: 340px; max-height: 250px; background-color: #061519;}
#canvasRB, #canvasMR {margin: 0; padding: 0;} 

.cookie-banner {
  position: fixed;
  bottom: 40px;
  left: 10%;
  right: 10%;
  width: 80%;
  padding: 8px 20px 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background-color: #C22D1E;
    color: #ffffff;font-weight: 700;
    border: #ffffff 1px solid;
  border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
.close {
  height: 24px; width: 24px;
  background-color: #ffffff;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
.cookie-banner a:link, .cookie-banner a:visited, footer a:link, footer a:visited {color: #ffffff;}
.cookie-banner a:hover, .cookie-banner a:visited:hover, footer a:hover, footer a:visited:hover {color: #F4CC8C;}
/* end front page*/

.stripe a:link, a:visited {color: #91786d;}
.stripe a:hover {color: #C22D1E; text-decoration: underline;}
.frontstripe a:link, a:visited {color: #000000;}
.stripeDecade {padding: 24px 0; margin: 0 auto; font-weight: 500;}


#returnBtn {background-color: #37505a;}
.stripe, .stripeDecade, .timelineEntryText {color: #403732;}
.productheaderrow {background-color: #C22D1E;}
.onecolor {color: #6b625e;}
.twocolor {color: #C22D1E;}
.darkcolor {color: #403732; }
.returnBtnOMwhitestripe {background-color: #ffffff;}
.darkpullout {background-color: #403732; color: #ffffff;}
.darkpullout h1 {color: #f9f7e9;}
.redtext, .stripe h1, .stripe h2 {color: #c22d1e;}
.timelineEntryText .special {font-weight: 700;}
.stripe h1, .stripe h1 {  font-weight: 700;}
.onepullout, .twopullout {padding: 10px 20px; }
thead > tr {background-color: #C22D1E; color: #ffffff;}

th, td {border-bottom: 2px solid #C22D1E; }
thead > tr > th {border: none;}
thead.onebkgd > tr {background-color: #C22D1E; }
table a, table a:hover, table a:visited {color: #C22D1E !important;}
table a:hover {text-decoration: underline;}
img.buttons {border: 1px solid #ffffff;}
.productheader {padding: 0; vertical-align: middle; margin-top: -7px;}
.stripe .resume {color: #403732;}
.timelineYear, .timelineDecade {text-align: center; line-height: 80%;}
.timelineDecade {font-size: 1.8rem; }
.timelineYear {font-size: 2rem; }
.timelineYearBlurb {font-size: 1.2rem; font-family: "dejarip", sans-serif;}
.timelineEntry { padding: 0 1em;}
.timelineEntryImage {text-align: center;}
.timelinestripe {display: flex; flex: 2 0 auto; flex-direction: column;} 
.timelineYear, .timelinestripe h1 {font-family: "quatro-slab", serif; font-weight: 900; }
.timelinestripe a {color: #C22D1E;}
.stripe .triangledown, .timelinestripe .triangledown, .stripeDecade .triangledown {border-top: .4em solid #C22D1E;}
.stripe .triangleleft { border-right:.4em solid #C22D1E;}
.stripe .triangleright { border-left: .4em solid #ffffff; }
.buttonbkgd {margin: 0; padding: 0; width: 340; height: 250; background-color: #061519;}
.clickarea { margin: 0 auto 36px; padding: 12px 20px;}
.clickarea h2 {text-align: center;}
.clickarea:hover {background-color: #f2f0e7;}
.fab a:link {color: #ffffff;}

.contactType-column {
	margin: 20px 0;
}
.contactType-column-content { margin: 10px 20px;}

@media all and (max-width: 600px) {
.frontbuttons {flex-direction: column; align-content: stretch; margin: 0; padding: 0;}
.frontbuttons li {font-size: 1.3rem;  margin: 12px 0 12px; font-weight: 500;}
.logobutton {margin: 24px auto 0; font-size: 110%; }
.clickarea ul {margin: 0 10px 0 24px;}
.timelineYear { margin: 6px 0;}
.homepagesplashscreen, .homepagebutton {width: 100%; height: auto;}
.contactType-column {width: 100%;}
.contact-3column-content {display: flex; flex-direction: column;width: 100%;}
}
@media all and (min-width: 601px) and (max-width: 899px) {
/*.frontcontent {padding: 24px 12px 0; flex-direction: column;}
*/.frontheadline h1 {font-size: 1.7rem;}
.frontbuttons {flex-direction: column; align-content: stretch; margin: 0; padding: 0;}
.frontbuttons li {font-size: 1.2rem; margin: 12px 0 12px 24px; font-weight: 500;}
/*.clickarea {margin: 0 0 36px 30px; padding: 12px 40px 20px 60px;}
*//*.rbbutton, .mrbutton { font-size: 110%; padding: 0 6px; margin: 0;}
*/.timelinestripe { padding: 9px 12px;} 
.homepagesplashscreen {width: 100%; height: auto;}
.homepagebutton {width: 340px; height: 250px; min-width: 340px; min-height: 250px;}
.contactType-column {width: 100%;}
.contact-3column-content {display: flex; flex-direction: column;width: 100%;}
}

@media screen and (min-width:900px) {
.frontcontent {align-content: space-between; /*margin: 2% 7% 0; padding: 2em 0 2em;*/}
.frontheadline h1 {font-size: 200%;}
.frontbuttons {flex-direction: row; justify-content: space-around; margin: 0 auto 15%;}
.frontbuttons li {font-size: 1.2rem; margin: 12px 0 12px 24px; font-weight: 500;}

/*.clickarea {margin: 0 0 36px 24px; padding: 12px 30px 20px 50px;}
*/.timelinestripe { margin: 0 7%;  padding: 10px 0 24px;}
.homepagesplashscreen {width: 747; height: 754; margin: 0 auto;}
.contactType-column {width: 32%;}
.contact-3column-content {width: 33%;padding: 0 10px;}
}

@media screen and (min-width:1175px) {
.frontcontent { /*margin: 2em 10% 0;*/}
.frontheadline h1 {font-size: 220%;}
.frontbuttons {max-width: 1200px;}
}