* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #FFFFFF;
  color: #000000;
  font-size: 1vw;
}

a { text-decoration: none; }
a:link, a:visited {  color: black; }
a:hover { color: black; background-color: grey;}
a:active, a:focus { color: black; background-color: grey;}

.wrapper {
	width: 98vw;
	height: 20vw;
	background-image: url("../pics/main-background.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.grid-container {
  display: grid;
  width: 98vw;
  height: 40vw;
  margin: 0px;
  border: 0px;
  grid-template-columns: 30% 70%;
  grid-template-rows: 100%;
}

.gr-left {
		grid-column: 1 / 2;
		font-size: max(3em, 12pt);
		padding: 1vw;
		color: black;
}

.gr-right {
		grid-column: 2 / 3;
		font-size: 3em;
		/* padding: 1vw; */
		color: #ee5853;
}

.wrapper-1 {
	width: 100%;
}

.grid-container-1 {
  display: grid;
  width: 100%;
  height: auto;
  margin: 0px;
  border: 0px;
  grid-template-columns: 50% 50%;

}

.gr-left-1 {
		grid-column: 1 / 2;
		font-size: max(1em, 12pt);
		padding: 1vw;
		padding-top: 2.5vw;
		color: black;
}

.gr-right-1 {
		grid-column: 2 / 3;
		font-size: max(1em, 12pt);
		padding: 1vw;
		padding-top: 2.5vw;
		color: black;
}

.gr-left-1-pic {
		grid-column: 1 / 2;
		font-size: max(1em, 12pt);
		color: black;
}

.gr-right-1-pic {
		grid-column: 2 / 3;
		font-size: max(1em, 12pt);
		color: black;
}

.wrapper-2 {
	width: 98vw;
	height: 5vw;
	background-color: #FFFFFF;
	color: #638a7e;
}

.grid-container-2 {
  display: grid;
  width: 98vw;
  height: 5vw;
  margin: 0px;
  border: 0px;
  grid-template-columns: 50% 50%;
  grid-template-rows: 100%;
}

.wrapper-2a {
	width: 98vw;
	height: 10vw;
	background-color: #FFFFFF;
	color: #638a7e;
}

.grid-container-2a {
  display: grid;
  width: 98vw;
  height: 10vw;
  margin: 0px;
  border: 0px;
  grid-template-columns: 50% 50%;
  grid-template-rows: 100%;
}

.gr-left-2 {
		grid-column: 1 / 2;
		font-size: max(1.5em, 12pt);
		padding: 1vw;
		color: black;
		text-align: center;
}

.gr-right-2 {
		grid-column: 2 / 3;
		font-size: max(1.5em, 12pt);
		padding: 1vw;
		color: black;
		text-align: center;
}

.wrapper-3 {
	width: 98vw;
	height: 100wh;
	background-color: #FFFFFF;
	color: #000000;
	text-align: left;
}

.grid-container-3 {
  display: grid;
  width: 98vw;
  height: 100wh;
  margin: 0px;
  border: 0px;
  grid-template-columns: 10% 80% 10%;
  grid-template-rows: 100%;
}

.gr-left-3 {
		grid-column: 1 / 2;
		font-size: max(1.5em, 12pt);
		/* padding: 1vw; */
		color: black;
		text-align: center;
}

.gr-middle-3 {
		grid-column: 2 / 3;
		font-size: max(1.5em, 12pt);
		/* padding: 1vw;  */
		color: black;
		text-align: left;
}

.gr-right-3 {
		grid-column: 3 / 4;
		font-size: max(1.5em, 12pt);
		/* padding: 1vw; */
		color: black;
		text-align: center;
}

.wrapper-dd {
	width: 98vw;
	height: 10vw;
	background-image: url("../pics/bookshelf.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.grid-container-dd {
  display: grid;
  width: 98vw;
  height: 10vw;
  margin: 0px;
  border: 0px;
  grid-template-columns: 30% 70%;
  grid-template-rows: 100%;
}

.gr-item-dd {
		grid-column: 1 / 2;
		font-size: max(3em, 12pt);
		padding: 1vw;
		color: black;
}

.wrapper-dld {
	background-image: url("../pics/machine-bg.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 2vw;
}

.grid-container-dld {
  display: grid;
  width: 98vw;
  height: 15vw;
  margin: 0px;
  border: 0px;
  grid-template-columns: 10% 80% 10%;
  grid-template-rows: 30%, 70%;
}

.gr-top-dld {
		grid-column: 1 / 4;
		grid-row: 1 / 2;
		font-size: max(1.5em, 12pt);
		padding: 1vw;
		color: #EE5853;
		text-align: center;
}

.gr-left-dld {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
		font-size: max(1.5em, 12pt);
		padding: 1vw;
		color: black;
		text-align: center;
}

.gr-middle-dld {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
		font-size: max(1.5em, 12pt);
		padding: 1vw;
		color: black;
		text-align: left;
}

.gr-right-dld {
		grid-column: 3 / 4;
		grid-row: 2 / 3;
		font-size: max(1.5em, 12pt);
		padding: 1vw;
		color: black;
		text-align: center;
}

.wrapper-free {
	width: 98vw;
	height: 10vw;
	background-color: #FF69B4;
	color: #FFFFFF;
	padding: 0.1vw;
	margin: 0px;
	text-align: center;
	font-size: max(3em, 12pt);
}

video {
  max-width: 100%;
  height: auto;
}

table, th, td {
  padding: 10px;
  border: 1px solid black;
  border-collapse: collapse;
}

img {
  border: 2px solid #ee5853;
  margin-top: 10px;
  margin-bottom: 10px;
}

.logo {
	border: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
  width:70%;
}

.pic {
	border: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
	width:80vw;
}