@media only screen {
.mybox {
    width: 600px;
}
img {
	max-width: 100%;
	height: auto;
}
br {
	content: "";
	display: block;
	height: 0.5em;
}
table.joy {
	border: 2px solid;
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 10px;
}
table.joy th {
	font-size: 11.0pt;
	font-family: "Calibri", sans-serif;
}
}
table.joy td, table.joy th {
	border: 1px solid #333;
	padding-left: 5px;
	padding-right: 5px;
}
table.joy td:first-child {
	width: 33%;
}
table.split {
	border: 0px;
	border-collapse: collapse;
	width: 100%;
}
table.split td {
	border: 0px;
	padding-left: 0px;
}
table.split td:first-child {
	width: 20%;
}
table.split tr:first-child {
	border-bottom: 1px dotted;
}

.st1 {
	background-image: url(bg.jpg);
	background-size: cover;
	color: black;
	width: 90%;
	margin-top: 5%;
	margin-right: 10px;
	margin-left: 5%;
	margin-bottom: 10px;
	background-color: white;
	word-wrap: normal;
}
.box { 
  float: left; 
  margin-right: 2%; 
  padding: 5px; 
  background: #aea; 
  box-sizing: border-box; 
  font-size: 14px;
}

.dropdown {
  float: right; 
  position: relative;
  display: inline-block;
  margin-right: 0; 
  padding: 5px; 
  background: #aea; 
  color: darkblue;
  box-sizing: border-box;
  font-size: 14px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #dfd;
  width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  left: -54px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media only screen and (min-width: 900px) {
.st1 {
	background-image: url(bg.jpg);
	background-size: cover;
	color: black;
	background-color: white;
	width: 800px;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	word-wrap: normal;
}

.box { 
  float: left; 
  width: 23%; 
  margin-right: 2%; 
  padding: 20px; 
  background: #aea; 
  box-sizing: border-box;
  font-size: 16px; 
}

.dropdown {
  position: relative;
  display: inline-block;
  float: left; 
  width: 23%; 
  padding: 20px; 
  margin-right: 0; 
  background: #aea; 
  box-sizing: border-box;
  color: darkblue;
  font-size: 16px; 
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #dfd;
  width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  left: 30px;
}
}

.st3 {
	margin-top: 0cm;
	margin-right: 0cm;
	margin-bottom: 8.0pt;
	margin-left: 0cm;
	line-height: 105%;
	font-size: 11.0pt;
	font-family: "Calibri", sans-serif;
}
.st4 {
	margin-top: 16.0pt;
	margin-right: 0cm;
	margin-bottom: 8.0pt;
	margin-left: 0cm;
	line-height: 105%;
	font-size: 12.0pt;
	font-weight: bold;
	font-style: italic;
	font-family: "Calibri", sans-serif;
}
.st5 {
	margin-top: 0cm;
	margin-right: 0cm;
	margin-bottom: 8.0pt;
	margin-left: 0cm;
	line-height: 105%;
	font-size: 14.0pt;
	font-family: "Calibri", sans-serif;
}
.st6 {
	margin-top: 0cm;
	margin-right: 0cm;
	margin-bottom: 8.0pt;
	margin-left: 0cm;
	line-height: 105%;
	font-size: 16.0pt;
	font-weight: bold;
	font-family: "Calibri", sans-serif;
}

a:link {
	color: darkblue;
    text-decoration: none;
}
a:visited {
	color: darkblue;
    text-decoration: none;
}

.content {
 clear: both;
}