body {
  font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
  color: cornsilk;
  background-color: #078bab;
  margin-top: 3% auto;
  padding-left: 5%;
  padding-right: 5%;
/*  width: 86%; */
}

a {
	color: cornsilk;
}

a:hover {
	font-weight: 400;
}

.topic {
  letter-spacing: 2.1pt;
  font-size: 2.4em;
}


.headline {
 position: relative;
  opacity: 0.35;
  margin: auto auto auto 1%;
  text-indent: 2%;
  background-color : black;
  padding-bottom: 2%;
  font-size: 8em;
  font-weight: 200;
  border-top: 2px dotted cornsilk; 
  border-bottom: 2px dotted cornsilk; 
  border-radius : 10pt;
  text-align: left;
}

.subtitle {
	z-index: auto;
  font-weight: 200;
  letter-spacing: 2.8pt;
  text-align: right;
  margin-top : -7%;
  margin-right : 0;
  opacity: 0.19;
}



.valuegrid {

	position: relative;
  display: grid;
  /* margin: 1.6em auto auto auto; */
  margin: 2% auto auto auto;
  column-gap: 1em;
  row-gap: 1em;
  grid-template-columns: repeat(2, minmax(50%, 1fr)); 
  }

.vendorgrid {
  display: grid; 
	position: relative;
	background-color : black;
  opacity: 0.44;
  margin: auto auto auto auto;
  border: 1px dotted cornsilk;
  border-radius: 1em;
  padding: 0.84em;
  column-gap: 0.7em;
  row-gap: 0.5em;
  grid-template-columns: repeat(3, minmax(12.5%, 1fr));
  grid-template-rows: auto;
  text-align: center;

}

.card {
  text-align: center;
  padding: 0.6rem;
  padding-bottom: 2em;
  /* height: 8em; */
  border: dotted 1px white;
  /* background-color: #0891b2; */
  opacity: 0.3;
  border-radius: 1em;
  letter-spacing: 1.8pt;
}

@media {
  .card:hover {
    opacity: 1.1;
    /* background-color: #0780a1; */
  }
}

.history {
  display: grid;
  width: 80%;
  margin: auto auto auto auto;
  text-align: center;
  grid-template-columns: 1fr minmax(auto,1fr) 1fr;
  grid-template-rows: 1fr auto 1fr;
  column-gap: -1em;
  row-gap: -1em;
  letter-spacing: 1.2pt;
  font-size: 1.3em;
  font-weight: 200;
  border-radius : 1em;
  border: 1px dottem cornsilk;
  opacity: 0.92; 
}

.call {
	position: absolute;
	z-index: 3;
	opacity: 0.42;
	font-size: 2em;
	font-weight: 200;
	margin-top: -10%;
	margin-left: 5%;
}

.contact {
 z-index: -5;
 opacity: 0.65;
 text-align: center;
 margin: 1em auto auto 1em;
 font-weight : 300;
 font-size: 1.4em;
 padding-bottom: 20em;

 }

@media (max-width: 900px) { .headline { font-size: 7em; } }

@media (width < 500px) {
  .valuegrid { margin: 0.16em auto; grid-template-columns: auto; grid-template-rows: repeat(auto-fit); }
  .call { margin-top: -22%; margin-left: 3.5%; }
  .card { font-size: 0.6em; }
  .headline { font-size : 3.4em; padding: 0.3em; }
  .subtitle { font-size : 0.95em; }
  .history {
  	font-size: 0.9em;}
}