.main-content{
  background:#fff; -ms-grid-row:3; -ms-grid-row-span: 1; -ms-grid-column:1; -ms-grid-column-span:3; grid-area:main-content;
  -ms-grid-rows: min-content;
  -ms-grid-columns: 50% 50%;
  grid-template-rows: min-content;
  grid-template-columns: 50% 50%;
  grid-template-areas:
    "data chart";
  margin:0; padding:10px; border:none;
  padding-top:30px;
  z-index:0;
  overflow: hidden;
}

.data {
	background: #eee;
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	-ms-grid-column: 1;
	grid-area: data;
	height: auto;
	min-height: 0;
	padding: 20px;
	margin: 3px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: normal;
	font-weight: normal;
	color: #111;
	line-height: 1.5;
}

.chart {
	background: #eee;
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	-ms-grid-column: 2;
	grid-area: chart;
	height: auto;
	min-height: 0;
	padding: 20px;
	margin: 3px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: normal;
	font-weight: normal;
	color: #111;
	line-height: 1.5;
}

.chart a {
	line-height:150%;
	color:#222;
	 font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: normal;
	font-weight: normal;
	text-decoration:none;
}

.chart a:hover {
	color:fuchsia;
	font-weight:bold;
	transition: .25s;
}

.button-container {
	padding-top: 20px;
}

.button-1 {
	height: 34px;
	width: 200 px;
	font-size: 16px;
	font-weight: bold;
}

@media (max-width: 1100px) {
	.main-content {
		-ms-grid-rows: min-content min-content;
		-ms-grid-columns: 1fr;
		grid-template-rows: min-content min-content;
		grid-template-columns: 1fr;
		grid-template-areas: 
			"data" 
			"chart";
	}
	.data {
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
	}

	.chart {
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
	}
}