body {
	background-color: #6651A2;
	color: #CCFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em ;
	font-variant: small-caps;
}

a:link {
	color: #CCFFCC;
}

a:visited {
	color: #000000;
}

#kklogo {
/*	width: 247px; */
/*	height: 90px; */
/*	border: none; */
}

.my-wrapper {
  max-width: 800px; /* use max-width instead of width to get automatic responsive flexibility */
  margin: 0 auto; /* centers the container on the page */
}

.my-row {
  display: flex; /* direction row by default, the cells will be side by side to start */
}

.my-cell {
  width: 50%;
  padding: 20px;
  display: flex; /* yep, the cells can get flexbox layout too */
  flex-direction: column; /* each cell will have its content laid out vertically */
  align-items: center; /* centers content horizontally */
  justify-content: center; /* centers content vertically */
}

.my-cell-c {
  width: 100%;
  padding: 20px;
  align-items: center; /* centers content horizontally */
  justify-content: top; /* centers content vertically */
  font-size: 0.8em ;
}

.my-cell img {
  max-width: 100%; /* make the images responsive too */
  height: auto;
}

@media (max-width: 500px) { /* change the max-width in the media query to whatever width you want, you can use min-width too if you prefer */
  .my-row {
    flex-direction: column; /* force the layout to stack the cells vertically */
  }
  .my-cell {
    width: 100%; /* cells should be full width at this point */
  }
}