@charset "UTF-8";
/* CSS Document */
html, body, footer {background-color: #37505a;}
/* front page */
.frontwhitestripe {padding: 24px 12%; background-color: #ffffff;}
.frontdarkstripe {padding: 24px 12%; background-color: #061519;}
.frontcontent {display: flex; flex-direction: column; width: 100%; }
.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%; }
.frontbuttons li { line-height: 120%; color: #ec1e24;}
.frontbuttons a {color: #000000;}
.frontbuttons a:hover {text-decoration: none;}
.logobutton {text-align: center; padding: 0 12px 0 0;}
/*.rbbutton, .mrbutton { color: #ffffff; background-color: #19272c; padding: 3px 0; font-weight: 700; font-size: 150%;border-radius: 5px;}
.rbbutton { margin: 4px 0 0; }
.mrbutton {margin: 12px 0 0 0; display: block;}
.clickarea:hover {text-decoration: none; }
*/
/* 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 {color: #F4CC8C;}
.cookie-banner a:hover, .cookie-banner a:visited:hover {color: #ffffff;}
/* end front page*/

/*------------------------------------*\
	OMTI NAVIGATION -- all screens
\*------------------------------------*/
.companycolumns a:link, 
.primarycompany ul ul li a:link,
.primarycompany ul ul li a:visited {color: #595143; display: block;}
.primarycompany ul ul li a:hover, 
.primarycompany ul ul li.focus {color: #B13528;}
.primarycompany ul ul li a:hover, 
.primarycompany ul ul li.focus a{color: #B13528;}
.companycolumns {-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; padding: 0 0 0 6px; }
.companycolumns li {display: inline-block; margin: 0; padding: 0; line-height: 1.5rem; width: 100%;}


.footer {background-color: #37505a;}
#returnBtn {background-color: #37505a;}
.whitestripe, .whitestripeDecade, .timelineEntryText {color: #403732;}
.productheaderrow {background-color: #C22D1E;}
.onecolor {color: #6b625e;}
.twocolor {color: #C22D1E;}
.darkcolor {color: #403732; }
.colorstripeDecade, .coloronestripe, .colortwostripe, .returnBtnOMcolorstripe {background-color: #6b625e;color: #ffffff;}
.returnBtnOMwhitestripe {background-color: #ffffff;}
.darkpullout {background-color: #403732; color: #ffffff;}
.darkpullout h1 {color: #f9f7e9;}
.redtext, .whitestripe h1, .whitestripe h2 {color: #c22d1e;}
.onepullout, .twopullout, .coloronestripe, .colortwostripe { color: #ffffff; font-weight: 500;}
.timelineEntryText .special {font-weight: 700;}
.coloronestripe h1, .colortwostripe h1, .coloronestripe h2, .colortwostripe h2 { color: #f4cc8c;}
.coloronestripe h1, .colortwostripe h1 {  font-weight: 700;}
.onepullout, .twopullout {padding: 10px 20px; }
.onepullout a, .twopullout a, .colorstripeDecade a, .coloronestripe a, .colortwostripe a { color: #ffffff;}
.crumbs a, .whitestripe a, .whitestripeDecade a, .whitestripe .topnine, .contactType-column-content a {color: #91786d;}
.crumbs a:visited, .whitestripe a:visited, .timelineEntryText a, .contactType-column-content a:visited {color: #C22D1E; text-decoration: none;}
.onepullout a, .twopullout a, .coloronestripe a, .colortwostripe a,
.onepullout a:visited, .twopullout a:visited, .colorstripeDecade a:visited, .coloronestripe a:visited, .colortwostripe a:visited {color: #f4cc8c; }
.onepullout a:hover, .twopullout a:hover, .colorstripeDecade a:hover, .coloronestripe a:hover, .colortwostripe a:hover {color: #f9f7e9; }
.omtiheaderleftside .triangledown, .colorstripeDecade .triangledown, .coloronestripe .triangledown, .colortwostripe .triangledown {border-top: .4em solid #ffffff;}
.coloronestripe .triangleleft, .colortwostripe .triangleleft { border-right:.4em solid #ffffff; }
.coloronestripe .triangleright, .colortwostripe .triangleright { border-left:.4em solid #ffffff; }
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;}
.whitestripe .resume {color: #403732;}
.timelineYear, .timelineDecade {text-align: center; line-height: 80%; font-weight: 900; font-family: "quatro-slab", serif;}
.timelineDecade {font-size: 1.8rem; }
.timelineYear {font-size: 2rem; }
.timelineYearBlurb {font-size: 1.2rem; font-family: "dejarip", sans-serif;}
.timelineEntry {background-color: #f2ebda; padding: 0 1em;}
.timelineEntryImage {text-align: center;}
.coloronestripe .timelineYear, .colortwostripe .timelineYear  {color: #F4F3EA;}
.timelinestripe {display: flex; flex: 2 0 auto; flex-direction: column;} 
.timelinestripe h1 {font-family: "quatro-slab", serif; font-weight: 900; }
.timelinestripe.whitebkgd a {color: #C22D1E;}
.whitestripe .triangledown, .timelinestripe.whitebkgd .triangledown, .whitestripeDecade .triangledown {border-top: .4em solid #C22D1E;}
.whitestripe .triangleleft { border-right:.4em solid #C22D1E;}
.whitestripe .triangleright { border-left: .4em solid #ffffff; }
.buttonbkgd {margin: 0; padding: 0; width: 340; height: 250; background-color: #061519;}


@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; color: #ec1e24; font-weight: 500;}
.logobutton {margin: 24px auto 0; font-size: 110%; }
.clickarea {margin: 0 0 36px 0; padding: 12px 20px 20px;}
.clickarea ul {margin: 0 10px 0 24px;}
.timelineYear { margin: 6px 0;}
.homepagesplashscreen, .homepagebutton {width: 100%; height: auto;}
}
@media all and (min-width: 601px) and (max-width: 899px) {
.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; color: #ec1e24; 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 0;} 
.homepagesplashscreen {width: 100%; height: auto;}
.homepagebutton {width: 340px; height: 250px; min-width: 340px; min-height: 250px;}
}

@media screen and (min-width:900px) {
.frontcontent {max-width: 800px;}
.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; color: #ec1e24; font-weight: 500;}
.clickarea {margin: 0 0 36px 24px; padding: 12px 30px 20px 50px;}
.timelinestripe { padding: 0;} 
.homepagesplashscreen {width: 747; height: 754; margin: 0 auto;}
}

@media screen and (min-width:1175px) {
.frontheadline h1 {font-size: 220%;}
.frontbuttons {max-width: 900px;}
}