/* Create two unequal columns that floats next to each other */
	.column {
	  float: left;
	  padding: 10px 20px 10px 0;
	  overflow-y: scroll;
	}

	.left {
	  min-width: 250px;
	  width: 20%;
	}

	.right {
	  max-width: 65%;
	  padding: 15px;
	  float:left;
	}

	/* Style the tab */
	.tab {
	  float: left;
	  height: 95%;
	  /*width: 25%;*/
	  /*height: 300px;*/
	}

	.row {
		height: 75vh;
	}

	@media only screen and (max-width: 800px) {
		.row {
			height: 100%;
		}
	  	.left {
	  		width: 95%;
	  		height: 200px !important;
	  	}
	  	.tab {
			height: 75vh;
		}
	}
	@media only screen and (min-width: 800px) and (max-width: 1200px) {
		.right {
			max-width: 50%;
		}
	}	

	@media only screen and (max-height: 768px) and (max-width: 800px) {	
	  	.left {
	  		width: 95%;
	  		height: 100px !important;
	  	}
	  	h3 {
			white-space: nowrap;
			overflow: hidden; 
			text-overflow: ellipsis;
			font-size: 1.5rem;
	  	}
	}

	/* Style the buttons that are used to open the tab content */
	.tab button {
	  display: block;
	  background-color: inherit;
	  color: black;
	  padding: 15px 10px;
	  width: 100%;
	  border: none;
	  outline: none;
	  text-align: left;
	  cursor: pointer;
	  transition: 0.3s;
	  margin: 5px;
	  background-color: #f1f1f1;
	  font-family: 'Lato';
	}

	/* Change background color of buttons on hover */
	.tab button:hover {
	  background-color: #ddd;
	}

	/* Create an active/current "tab button" class */
	.tab button.active {
	  background-color: #ccc;
	}

	/* Style the tab content */
	.tabcontent {

	  /*float: left;
	  padding: 0px 12px;
	  border: 1px solid #ccc;
	  width: 70%;
	  border-left: none;
	  height: 300px;*/
	}

	/* Clear floats after the columns */
	.row:after {
	  content: "";
	  display: table;
	  clear: both;
	}