html {
 box-sizing: border-box;
}
*, *:before, *:after {
 box-sizing: inherit;
}
body {
 margin: 0;
 font-family: "Roboto", sans-serif;
 line-height: 1.4;
}
body#main {
 background-color: #000;
 color: #fff;
}
img {
 max-width: 100%;
}
article {
 margin: .5em .75em 1em;
}
article.two-column div div img {
 width: 12rem;
}
article.two-column div, article.three-column div {
 margin-bottom: 2em;
}
article.three-column div p:first-of-type {
 height: 6rem;
 margin: 0;
}
article.three-column div p.item1 img {
 width: 10rem;
 padding-top: .65rem;
}
article.three-column div p.item2 img {
 width: 20rem;
}
article.three-column div p.item3 img {
 width: 13rem;
 padding-top: 1.75rem;
}
article.jobs {
 background-color: #000;
 padding: .5em .75em 1em;
 margin: 0;
 color: #fff;
}
article.jobs div p {
 margin: 0;
}
article.jobs div p:nth-of-type(1), article.jobs div p:nth-of-type(2) {
 font-weight: bold;
}
.hero-image {
 position: relative;
}
.hero-image h2 {
 position: absolute;
 border-bottom: none;
 bottom: calc(58% - 1rem);
 left: calc(8% - 1rem);
 color: #fff;
 font-size: 1.5rem;
}
.hero-image div.textbox {
 border-bottom: none;
 background-color: #BE092F;
 color: #fff;
 font-size: 1.5rem;
}
.hero-image div.textbox p {
 margin: 0;
 padding: .75em .5em;
 margin-top: -.156em;
}
body#main h2 {
 border-bottom: 1px #fff solid;
}
h2 {
 border-bottom: 1px #000 solid;
 padding-bottom: 4px;
 margin-bottom: 15px;
 text-transform: uppercase;
}
footer {
 	margin: 0 2rem 3rem;
	display: flex;
	flex-direction: column; /* Arrange items in a column */
  	align-items: center; 
	background: #000;
}
footer.page {
	background: #fff;
	margin: 2rem;
}
footer a, footer button {
  margin: 0 10px; 
}
footer .links {
	display: flex;
	justify-content: space-between;
	width: 40%; /* Make sure the links stretch across the footer */
}
footer .links a.prev, footer .links a.next {
	color: white; 
	text-decoration: none; 
	padding: 10px; 
	font-weight: bold;
	font-size: 18px;
}
footer .links a.prev:hover, footer .links a.next:hover {
  background-color: rgba(86, 86, 86, 0.90); 
}
footer p {
 text-align:center;
 color: #fff;
}
footer.page .links a.prev, footer.page .links a.next, footer.page p {
	color: #3c3b3b;
}
.caps {
 text-transform: uppercase;
}
article.jobs div h2 {
 border-bottom: 1px #fff solid;
 background-color: #000;
 color: #fff;
}
button {
 font-size: 1.25rem;
 margin: 3% calc(47% - 1rem) 2rem;
 padding: .5rem 2rem;
 border-radius: 3.5rem;
 border: 1px black solid;
 background-color: #3c3b3b;
 color: #c5c3c3;
}
body#main button {
 margin-top: 0;
}
button:hover {
 background-color: #595858;
 cursor: pointer;
}
.button {
 background-color: #BE092F; /* red */
 border: none;
 color: white;
 padding: 10px 32px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 margin: 4px 2px;
 transition-duration: 0.4s;
 cursor: pointer;
 text-transform: uppercase;
}
.button:hover {
 background-color: #f44336;
}
.grid-container {
 display: grid;
 grid: auto;
 grid-gap: 10px;
 grid-auto-rows: 1fr;
}
.grid-container > div {
 padding: .5em;
 text-transform: uppercase;
 position: relative;
 height: 24rem;
}
.grid-container > div img {
 position: absolute;
 width: calc(14% - 1rem);
 right: 1rem;
}
.grid-container > div h3 {
 bottom: -5%;
 left: 6%;
 line-height: 1.2;
 font-size: 2rem;
}
.grid-container > div.item1 {
 background-color: #BE092F;
 color: #fff;
}
.grid-container > div.item2 {
 background-color: #EAEAEA;
}
.grid-container > div.item3 {
 background-color: #CBCBCB;
}
.grid-container > div.item4 {
 background-color: #989898;
}
.grid-container > div.item5 {
 background-color: #666666;
 color: #fff;
}
.grid-container > div.item6 {
 background-color: #333333;
 color: #fff;
}
.grid-container > div.item7 {
 background-color: #000000;
 color: #fff;
}
.grid-container > div img {
 visibility: hidden;
}
.tooltip .tooltiptext {
 width: 100%;
 background-color: #fff;
 color: #000;
 padding: .75em;
 border: 2px #000 solid;
 text-transform: none;
}
article.jobs div div.cross {
 display: grid;
 grid: auto;
 grid-gap: 10px;
 /*grid-auto-rows: 1fr;*/
 padding: 1em 0;
}
article.jobs div div.cross div {
 padding: .5em;
 position: relative;
}
article.jobs div div.cross div img {
 width: 3rem;
}
article.jobs div div.cross div.item1 {
 grid-area: 1 / 1 / span 1 / span 1;
}
article.jobs div div.cross div.item2 {
 grid-area: 1 / 2 / span 1 / span 3;
}
/*  box hide start  */
.box {
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 position: fixed;
 inset: 0;
 background: rgba(24, 109, 199, 0.6);
}
.box a {
 padding: 0 15px;
 border-radius: 3px;
 text-decoration: none;
}
.content {
 position: relative;
 background: #fff;
 color: #000;
 padding: 3rem;
 border-radius: 1rem;
 margin: auto 30%;
}
.content h2 {
 margin-bottom: .5rem;
 color:#504f4f;
 text-transform: capitalize;
}
.content p {
 font-size: 1.25rem;
 margin-top: 0;
 color:#504f4f;
}
.content a {
 position: absolute;
 top: 0;
 right: 10px;
 color: #000;
 font-size: 3rem;
 text-decoration: none;
 color:#504f4f;
}
/*  end box hide  */
@media (min-width: 650px) {
 body#main article {
  display: flex;
  flex-wrap: wrap;
  margin: 1em 2em 2em;
  justify-content: space-between;
 }
 body#main article div {
  position: relative;
  flex-basis: calc(32% - 1rem);
  max-width: calc(32% - 1rem);
  min-width: 10rem;
  margin-bottom: 1em;
 }
}
@media (min-width: 700px) {
 .grid-container {
  display: grid;
  /*grid: repeat(auto-fill, minmax(8rem, 1fr));*/
  grid-gap: 10px;
  /*grid-auto-rows: 1fr;*/
 }
 .grid-container::before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
 }
 .grid-container > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
 }
 .grid-container > div {
  height: auto;
 }
 .grid-container > div img {
  width: calc(22% - 1rem);
  visibility: visible;
 }
 .grid-container > div h3 {
  position: absolute;
  bottom: -5%;
  left: 6%;
  line-height: 1.2;
 }
 .grid-container > div.item4 {
  grid-area: 2 / 3 / span 1 / span 1;
 }
 .grid-container > div.item5 {
  grid-area: 3 / 3 / span 1 / span 1;
 }
 .grid-container > div.item6 {
  grid-area: 3 / 4 / span 1 / span 1;
 }
 .grid-container > div.item7 {
  grid-area: 3 / 5 / span 1 / span 1;
 }
 .hero-image h2 {
  bottom: calc(21% - 1rem);
  left: calc(5% - 1rem);
  font-size: 3rem;
 }
 .hero-image div.textbox {
  position: absolute;
  top: calc(8% - 1rem);
  right: calc(4% - 1rem);
  font-size: 1.25rem;
  width: 42%;
  padding: .5em 1em;
 }
 article {
  margin: 1em 2em 2em;
 }
 article.two-column {
  display: flex;
  flex-wrap: wrap;
  margin: 1em 2em 2em;
  justify-content: space-between;
 }
 article.two-column div {
  position: relative;
  flex-basis: calc(50% - 1rem);
  max-width: calc(50% - 1rem);
  min-width: 10rem;
  margin-bottom: 1em;
 }
 article.three-column {
  display: flex;
  flex-wrap: wrap;
  margin: 1em 2em 2em;
  justify-content: space-between;
 }
 article.three-column div {
  position: relative;
  flex-basis: calc(32% - 1rem);
  max-width: calc(32% - 1rem);
  min-width: 10rem;
  margin-bottom: 1em;
  text-align: center;
 }
 article.jobs {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 1em 2em 2em;
  justify-content: space-between;
  background-color: #000;
  color: #fff;
 }
 article.jobs div {
  position: relative;
  flex-basis: calc(50% - 1rem);
  max-width: calc(50% - 1rem);
  min-width: 10rem;
  margin-bottom: 1em;
 }
 article.jobs div div.cross, article.jobs div div.cross div.item1, article.jobs div div.cross div.item2 {
  max-width: calc(100% - 1rem);
 }
 article.jobs div div.cross div.item1 {
  grid-area: 1 / 1 / span 1 / span 3;
 }
 article.jobs div div.cross div.item2 {
  grid-area: 1 / 2 / span 1 / span 3;
 }
 .tooltip {
  position: relative;
  display: inline-block;
 }
 .tooltip .tooltiptext {
  width: 100%;
  background-color: #fff;
  color: #000;
  padding: .75em;
  border: 2px #000 solid;
  text-transform: none;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 112%;
  left: 0%;
 }
 .tooltip .tooltiptext {
  visibility: hidden;
 }
 .tooltip:hover .tooltiptext {
  visibility: visible;
 }
 .triangle {
  width: 0;
  height: 0;
  position: absolute;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 24px solid #000;
  left: calc(46% - 1rem);
  bottom: -24px;
 }
 .triangle:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-top: 21px solid #fff;
  bottom: 3px;
  left: -22px;
 }
}
@media only screen and (max-width: 1400px) and (min-width: 1072px) {
 button {
  margin: 3% calc(46% - 1rem) 2rem;
 }
}
@media only screen and (max-width: 1071px) and (min-width: 720px) {
 button {
  margin: 3% calc(44% - 1rem) 2rem;
 }
}
@media only screen and (max-width: 719px) and (min-width: 620px) {
 button {
  margin: 5% calc(36% - 1rem) 2rem;
  font-size: 2.25rem;  
  padding: .5rem 3rem;
 }
 footer {
    margin: 0 0.2rem 3rem;
 }
	footer .links {
  width: 100%; 
 }
 footer .links a.prev, footer .links a.next {
	font-size: 2rem;
 }
}
@media only screen and (max-width: 750px) and (min-width: 700px) {
 h2 {
  font-size: 1.25rem;
 }
}
@media (max-width: 699px) {
 .hero-image {
  background-color: #BE092F;
 }
 .content {
  margin: auto 3rem;
  padding: 1rem 2rem;
 }
 .content h2, .content p {
    font-size: 1rem;
 }
 .content a {
    font-size: 2rem;
 }
 footer, footer.page {
   margin: 3rem 0.5rem;
 }
footer .links {
	width: 100%; 
 }
 footer .links a.prev, footer .links a.next {
	font-size: 2rem;
 }
}
@media only screen and (max-width: 619px) and (min-width: 480px) {
 button {
  margin: 9% calc(33% - 1rem) 2rem;
  font-size: 2.25rem;  
  padding: .5rem 3rem;
 }
}
@media (max-width: 480px) {
	footer button {
		margin: 0% calc(0% - 1rem);
	}
}
@media (max-width: 480px) {
	button {
		font-size: 2.25rem;  
		padding: .5rem 3rem;
	}
}
@media (max-width: 290px) {
 .hero-image h2 {
  display: none;
 }
}
@media (max-width: 320px) {
 .hero-image h2 {
  bottom: calc(80% - 1rem);
  left: calc(8% - 1rem);
  font-size: 1.25rem;
 }
}
@media only screen and (max-width: 375px) and (min-width: 320px) {
 .hero-image h2 {
  bottom: calc(79% - 1rem);
  font-size: 1.25rem;
 }
}
@media only screen and (max-width: 450px) and (min-width: 375px) {
 .hero-image h2 {
  bottom: calc(75% - 1rem);
  font-size: 1.5rem;
 }
}
@media only screen and (max-width: 550px) and (min-width: 450px) {
 .hero-image h2 {
  bottom: calc(66% - 1rem);
  font-size: 1.75rem;
 }
}
@media only screen and (max-width: 650px) and (min-width: 550px) {
 .hero-image h2 {
  bottom: calc(59% - 1rem);
  font-size: 2rem;
 }
}
@media only screen and (max-width: 700px) and (min-width: 650px) {
 .hero-image h2 {
  bottom: calc(55% - 1rem);
  font-size: 2rem;
 }
}
@media only screen and (max-width: 900px) and (min-width: 700px) {
 .hero-image h2 {
  bottom: calc(18% - 1rem);
 }
 .hero-image div.textbox p {
  font-size: 1rem;
 }
 .grid-container > div h3 {
  font-size: 1rem;
 }
}
@media only screen and (max-width: 1118px) and (min-width: 900px) {
 .grid-container > div h3 {
  font-size: 1.5rem;
 }
}