@font-face {
font-family: 'Abel';
src:
local('Abel-Regular'),
local('Abel Regular'),
local('Abel'),
url('/fonts/abel-regular-webfont.woff2') format('woff2'),
url('/fonts/abel-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Gotham';
src:
local('Gotham Book'),
local('Gotham-Book'),
url('/fonts/Gotham-Book.woff2') format('woff2'),
url('/fonts/Gotham-Book.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Gotham';
src:
local('Gotham Medium'),
local('Gotham-Medium'),
url('/fonts/Gotham-Medium.woff2') format('woff2'),
url('/fonts/Gotham-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}

/* ====  VARIABLES  ======= */

:root {
--colorMaroon: #a71c20;
--colorLightMaroon: #f5989d;
--colorDarkMaroon: #801214;
--colorClay: #b9afa5;
--colorMedClay: #D1C8C3;
--colorLightClay: #ebe6e1;
}

body {
height: 100%;
background: white;
font-family: 'Gotham', Arial, Helvetica, sans-serif;
font-weight: 300;
line-height: 1.4;
margin: 0;
padding: 0;
background-color: var(--colorMaroon);  
}

a {
   color: var(--colorMaroon);
}

a:hover {
   color: gray;
}

h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}

hr {
margin: 50px auto;
width: 80%;
max-width: 700px;
}

.button {
display: inline-block;
font-size: 1.2rem;
margin: 16px 0 0;
padding: 8px 16px;
border-radius: 4px;
text-decoration: none;
font-family: 'Gotham', Arial, Helvetica, sans-serif;
font-weight: 400;
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
text-transform: uppercase;
background-color: var(--colorMaroon);
color: var(--colorLightCLay);
-webkit-text-fill-color: #ebe6e1;
opacity: 1; /* required on iOS */
width: auto;
border: 0;
outline: 0;
cursor: pointer;
}

.button:hover {
/* color: var(--colorClay);
-webkit-text-fill-color: var(--colorClay); */
color: white;
-webkit-text-fill-color: white;
background-color: var(--colorDarkMaroon);
}

header {
border-top: 12px solid #a71c20;
border-bottom: 2px solid #a71c20;
background-color: white;
}

.headerHolder {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px auto;
width: 90%;
max-width: 1100px;
}

.logoholder {
width: 240px;
}

.logo {
max-width: 240px;
}

img.logo {
display: block;
margin: 0;
padding: 0;
width: 100%;
height: auto;
}

.headerRight {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   width: 70%;
}

.navHolder {
   display: flex;
   align-items: center;
   background-color: var(--colorMaroon);
   width: 100%;
   height: 50px;
}
   
nav.mainNav {
   margin: 0 auto;
   text-align: center;
   padding: 0;
   width: 100%;
}
   
nav.mainNav ul {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   align-items: center;
   margin: 0 auto;
   padding: 0;
}
   
nav.mainNav li {
   display: inline-block;
}
   
nav.mainNav li a {
   display: block;
   padding: 0;
   margin: 0 20px;
   color: black;
   text-decoration: none;
   text-align: center;
   font-family: 'Abel', sans-serif;
   font-size: 1.1rem;
   text-transform: uppercase;
   cursor: pointer;
}
   
nav.mainNav li:hover a {
   color: gray;
   cursor: pointer;
}
   
nav.mainNav li a.active {
   color: var(--colorMaroon);
}
   
/*Hover state for dropdown links*/
nav.mainNav li:hover ul a:hover {
   color: gray;
}
   
/*Make dropdown links vertical*/
nav.mainNav li ul li {
   display: block;
   float: none;
   position: relative;
   top: 0;
}
   
/*Prevent text wrapping*/
nav.mainNav li ul li a {
   width: auto;
   min-width: 100px;
   padding: 5px 20px;
}
   
/*Display the dropdown on hover*/
nav.mainNav ul li a:hover + .hidden,
   .hidden:hover {
   display: inline-block;
}
   
/*Style 'show menu' label button and hide it by default*/
.show-menu {
   text-decoration: none;
   /* color: white; */
   text-align: center;
   padding: 8px 0 4px;
   display: none;
   font-size: 1.5rem;
   cursor: pointer;
   margin: 0 auto;
}
   
.show-menu:hover {
   opacity: .66;
}
   
.border-menu {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0;
   padding: 0;
}
   
/*Hide checkbox*/
input[type="checkbox"] {
   display: none;
}
   
/*Show menu when invisible checkbox is checked*/
input[type="checkbox"]:checked ~ #menu {
   display: block;
}
   
input[type="checkbox"]:checked + label {
   display: block;
   background-color: red;
}

.contactBar {
margin-left: auto;
padding: 0;
text-align: right;
display: block;
float: right;
}

.contactBar ul {
padding: 0;
margin: 0;
}

.contactBar ul li {
list-style: none;
display: inline-block;
padding: 0;
margin: 0;
}

.contactBar ul li a {
text-decoration: none;
display: flex;
align-items: center; 
padding: 0;
margin: 0;
}

.contactBar ul li a span {
margin-left: 5px;
}

.contactBar ul li a span.phone {
margin-left: 0px;
}

.contactBar p {
color: black;
margin: 0;
padding: 0;
font-size: 1rem;
display: inline-block;
text-align: top;
}

.contactBar ul li:hover p {
color: #a71c20;
}

.phone {
background-image: url(/art/sprites-large.png);
background-repeat: no-repeat;
background-position: -300px 6px;
background-size: 350px 250px;
height: 48px;
width: 35px;
padding: 0;
margin: 0 0 0 12px;
text-decoration: none;
display: inline-block;
}

.contactBar ul li:hover span.phone {
background-position: -300px -34px
}
.email {
background-image: url(/art/sprites-large.png);
background-repeat: no-repeat;
background-position: -220px 6px;
background-size: 350px 250px;
height: 48px;
width: 38px;
padding: 0;
margin: 0;
text-decoration: none;
display: inline-block;
}

.contactBar ul li:hover span.email {
background-position: -220px -34px
}

.locate {
background-image: url(/art/sprites-large.png);
background-repeat: no-repeat;
background-position: -263px 6px;
background-size: 350px 250px;
height: 48px;
width: 31px;
padding: 0;
margin: 0;
text-decoration: none;
display: inline-block;
}

.contactBar ul li:hover span.locate {
background-position: -263px -34px;
}

/* .heroHolder {
   margin: 0 auto;
   text-align: center;
   position: relative;
   width: 100%;
   max-width: 100%;
   max-height: 600px;
   overflow: hidden;
   }
   
   .heroHolder img {
   display: block;
   margin: 0;
   width: 100%;
   max-width: 100%;
   } */

.content {
display: inline-block;
margin: 0 auto;
width: 100%;
background: white;
}

.pageHeader {
margin: 0 auto;
padding: 40px 0 0;
}

.pageHeader hr {
width: 90%;
max-width: 600px;
border: none;
border-top: 1px solid black;
margin: 20px auto;
padding: 0;
}

.pageHeader h1 {
color: black;
font-family: 'Gotham', Arial, Helvetica, sans-serif;
font-weight: 400;
text-align: center;
margin: 0 auto;
font-size: 1.5rem;
line-height: 1.5;
}

p.pageHeaderText {
color: #666;
font-family: 'Gotham', Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 1.1rem;
line-height: 1.5;
text-align: center;
margin: 5px auto 20px;
width: 90%;
text-wrap: balance;
}

.section {
background-color: white;
color: black;
width: 100%;
padding: 50px 0;
margin: 0;
text-align: center;
}

h1.sectionHeader {
color: black;
/* width: 90%; */
/* width: 60ch; */
max-width: 52ch;
font-family: 'Gotham', Arial, Helvetica, sans-serif;
font-weight: 400;
text-align: center;
margin: 0 auto;
font-size: 1.3rem;
line-height: 1.5;
}

.sectionHeader { 
width: 90%;
}

p.sectionText {
color: #777;
color: #666;
font-family: 'Gotham', Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 1.1rem;
line-height: 1.5;
text-align: center;
width: 86%;
max-width: 800px;
margin: 20px auto 0;
}

.divider {								/* minor cosmetics */
display: table; 
font-size: 24px;
line-height: 1.3;
text-align: center;
text-transform: uppercase;
width: 80%;
max-width: 800px; 						/* divider width */
margin: 40px auto;					/* spacing above/below */
}
.divider span { display: table-cell; position: relative; }
.divider span:first-child, .divider span:last-child {
width: 50%;
top: 13px;							/* adjust vertical align */
-moz-background-size: 100% 3px; 	/* line width */
background-size: 100% 3px; 			/* line width */
background-position: 0 0, 0 100%;
background-repeat: no-repeat;
}
.divider span:first-child {				/* color changes in here */
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#000));
background-image: -webkit-linear-gradient(180deg, transparent, var(--colorMaroon));
background-image: -moz-linear-gradient(180deg, transparent, var(--colorMaroon));
background-image: -o-linear-gradient(180deg, transparent, var(--colorMaroon));
background-image: linear-gradient(90deg, transparent, var(--colorMaroon));
}
.divider span:nth-child(2) {
color: #000; padding: 0px 15px; width: auto; white-space: nowrap;
}
.divider span:last-child {				/* color changes in here */
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(var(--colorMaroon)), to(transparent));
background-image: -webkit-linear-gradient(180deg, var(--colorMaroon), transparent);
background-image: -moz-linear-gradient(180deg, var(--colorMaroon), transparent);
background-image: -o-linear-gradient(180deg, var(--colorMaroon), transparent);
background-image: linear-gradient(90deg, var(--colorMaroon), transparent);
}

.bottomSection {
margin: 30px auto;
width: 90%;
max-width: 800px;
}

.bottomSection hr {
margin: 0 auto 30px;

}

.bottomText {
display: block;
width: 94%;
padding: 0;
margin: 20px auto;
font-size: 1.2rem;
text-align: center;
text-wrap: balance;
}

.bottomText a {
padding: 0;
font-size: 1.2rem;
color: var(--colorMaroon)
}

/* FOOTER */

footer {
margin: 0;
font-size: 1rem;
background: var(--colorMaroon);
color: white;
text-align: center;
width: 100%;
}

.footerContactHolder {
width: 90%;
max-width: 900px;
margin: 0 auto;
padding: 16px 0;
display: flex;
justify-content: space-between;
color: white;
}

footer hr {
border-top: 1px solid var(--colorClay);
width: 96%;
max-width: 1000px;
margin: 0 auto;
}

.nape p {
font-size: 1.1rem;
line-height: 1.6;
text-align: left;
margin: 10px 0;
color: white;
}

.nape a {
color: white;
text-decoration: none;
}

.nape a:hover {
color: gray;
}

.footerGray {
color: gray;
color: var(--colorClay);
}

.flexFooter {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.emailHolder {
text-align: right;
}

.copyright {
color: white;
text-align: center;
padding: 0 10px;
}


/* --------------- PATENTS & PUBLICATIONS PAGE ------------- */

.patNPubHolder {
width: 90%;
max-width: 600px;
margin: 40px auto;
}

.patNPubHolder ul {
margin: 0;
padding: 0 0 0 15px;
}

.patNPubHolder li {
margin: 0 0 10px;
}

.patNPubHolder hr {
margin: 20px 0;
}

.patNPubButtonHolder {
   display: inline-block;
}

/* ------------------ CONTACT PAGE ------------------ */

.formSection {
background-color: #beb5ac;
background-color: var(--colorLightClay);
padding-bottom: 20px
}

.formHolder {
margin: 30px auto 40px;
width: 500px;
max-width: 90%;
}

.hideContactFormAddress {
display: none
}

.contactForm p {
margin: 5px auto 14px;
padding: 0;
font-size: 1.1rem;
text-align: left;
}

.contactForm p label {
font-weight: 400;
font-size: 1rem!important;
}

.contactForm input {
font-weight: 300;
padding: 7px;
color: black;
-webkit-text-fill-color: black;
opacity: 1; /* required on iOS */
z-index: 2;
background-color: white;
width: 100%;
max-width: 100%;
box-sizing: border-box;
border: 2px solid black;
font-size: 1rem;
}

.contactForm input.button {
display: inline-block;
font-size: 1.2rem;
margin: 16px 0 0;
padding: 8px 16px;
border-radius: 4px;
text-decoration: none;
font-family: 'Gotham', Arial, Helvetica, sans-serif;
font-weight: 400;
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
text-transform: uppercase;
background-color: var(--colorMaroon);
color: var(--colorLightCLay);
-webkit-text-fill-color: #ebe6e1;
opacity: 1; /* required on iOS */
width: auto;
border: 0;
outline: 0;
cursor: pointer;
}

.contactForm input.button:hover {
/* color: var(--colorClay);
-webkit-text-fill-color: var(--colorClay); */
color: var(--colorClay);
-webkit-text-fill-color: var(--colorClay);
}

#contactFormMessage, .contactFormMessage {
font-weight: 300;
padding: 5px;
color: black;
-webkit-text-fill-color: black;
opacity: 1; /* required on iOS */
z-index:2;
background-color: white;
width: 100%;
max-width: 100%;
box-sizing: border-box;
border: 2px solid black;
height: 120px;
overflow: auto;
font-family: 'Gotham', Arial, Helvetica, sans-serif;
font-size: 1rem;
}

#contactForm .textSelect {
margin: 0;
padding: 6px;
height: 38px;
width: 99%;
z-index: 2;
background-color: #aaa;
border: 2px solid #999;
}

#contactForm .textSelect select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #fff;
}

select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
-webkit-border-radius: 0px;
border-radius: 0px;
}

::-webkit-input-placeholder { /* WebKit browsers */
color: white;
color: #555;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
color: #555;
opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:    white;
color: black;
color: #555;
opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color:    white;
color: #555;
}

/*--------------- THANK YOU  -----------------*/

.thankYouHolder {
margin: 0 auto;
padding: 100px 0;
width: 90%;
max-width: 600px;
}

.thankYouHolder h1 {
margin: 0;
padding: 0;
text-align: center;
font-size: 1.4rem;
font-weight: 300;
}

/*--------------- MISSING  -----------------*/

.missing {
margin: 140px auto;
text-align: center;
}

.missing h1 {
color: var(--colorMaroon);
font-weight: 300;
text-align: center;
font-size: 3rem;
line-height: 1rem;
margin: 10px auto 5px;
}

.missing h2 {
display: block;
margin: 20px auto 0;
padding: 0;
text-align: center;
}

.missing p {
text-align: center;
color: black;
line-height: 2rem;
}

.missingButton {
margin: 10px 0 0;
display: inline-block;
}

/* ------------------ MEDIA QUERIES ------------------ */

/*----------------- Phone Rules ---------------*/

@media screen and (min-width: 0) and (max-width: 600px) {

.headerHolder {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
margin: 20px auto 0;
width: 90%;
max-width: 1100px;
}

.logoHolder {
margin: 0;
padding: 20px 0;
}

.navHolder {
   position: absolute;
   display: block;
   margin: 0 auto;
   padding: 0;
   height: auto;
   z-index: 100;
   }
   
   nav.mainNav {
   margin: 10px auto;
   padding: 4px 0;
   text-align: center;
   display: block;
   width: 100%;
   }
   
   /*Make dropdown links appear inline*/
   nav.mainNav ul {
   position: static;
   display: none;
   margin: 0px auto;
   padding: 12px 0;
   /* background-color: black; */
   text-align: center;
   }
   
   /*Create vertical spacing*/
   nav.mainNav li {
   margin: 0 auto 10px;
   }
   /*Make all menu links full width*/
   nav.mainNav ul li,
   nav.mainNav li a {
   width: 100%;
   }
   
   nav.mainNav li:hover ul {
   margin: 0;
   }
   
   /*Style for menu links*/
   nav.mainNav li a {
   display: block;
   width: 80%;
   max-width: 280px;
   min-width: 220px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   font-size: 1.3rem;
   padding: 8px;
   margin: 8px auto;
   text-align: center;
   background: var(--colorMaroon);
   color: white;
   text-decoration: none;
   }
   
nav.mainNav li a:hover {
color: #bbb;
}

nav.mainNav li a.active {
color: gold!important;
}
   
   .show-menu {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 6px auto 0;
   text-align: center;
   width: 100%;
   }
   
   span.menuText {
   padding-left: 14px;
   color: black;
   }
   
   .headerLeft {
   width: 100%;
   }
   
   .headerRight {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   width: 100%;
   }

.contactBar {
margin: auto;
padding: 0;
text-align: right;
display: block;
float: none;
}

.contactBar p {
color: black;
margin: 0;
font-size: .9rem;
display: inline-block;
text-align: top;
}

.footerContactHolder {
width: 88%;
margin: 0 auto;
padding: 16px 0;
flex-direction: column;
}

.footerLinkHolder {
width: 88%;
margin: 0 auto;
padding: 20px 0;
flex-direction: column;
}

.emailHolder {
text-align: left;
}

/* ==============  MISSING 0 - 600px ============== */

.missing {
margin: 80px 0;
}

.missing h1 {
font-size: 3rem;
margin: 10px auto 5px;
}

.missing h2 {
margin: 20px auto 0;
padding: 0;
}

}


/*----------------- Small Screen Rules ---------------*/

@media screen and (min-width: 601px) and (max-width: 800px) {

.headerHolder {
margin: 15px auto;
}

.logoholder {
width: 200px;
}

.logo {
max-width: 200px;
}

nav.mainNav ul {
margin: 0 auto;
padding: 0 5px;
}

nav.mainNav li a {
padding: 0;
margin: 0 1.5vw;
font-size: 2.3vw;
font-size: clamp(.75rem, 2.1vw, 1rem)!important;
}

.pNpBreak {
display: block;
}

.contactBar p.hide {
display: none;
}

/* ==============  MISSING 601px - 800px ============== */

.missing {
margin: 100px 0;
}

.missing h1 {
font-size: 3rem;
margin: 10px auto 5px;
}

.missing h2 {
margin: 20px auto 0;
padding: 0;
}

}

@media screen and (min-width: 801px) and (max-width: 1000px) {

nav.mainNav li a {
padding: 0;
margin: 0 1.6vw;
font-size: 2.3vw;
font-size: clamp(.75rem, 2vw, .95rem)!important;
}

}