* {box-sizing: border-box}

/* Style the tab */
div.tab {
    float: left;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 30%;
    height: 394px;
}

/* Style the buttons inside the tab */
div.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 17px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 13.5pt;
	text-decoration: none;
	font-family: 'Ubuntu Condensed', sans-serif;
}

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

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

/* Style the tab content */
.tabcontent {
    float: left;
    padding: 20px 12px;
    border: 1px solid #ccc;
    width: 70%;
    border-left: none;
    height: 394px;
}

	/* iPad in portrait & landscape */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		div.tab { height: 430px; }
		.tabcontent { height: 430px; }
	}
	
	/* iPhone 6 in landscape */
	@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) {
		div.tab { height: 430px; }
		div.tab button { font-size: 11pt; }
		.tabcontent { height: 430px; }
	}
	/* iPhone 6 in portrait */
	@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {
		div.tab { width: 40%; font-size: 9pt; height: 530px; }
		div.tab button { padding: 15px 10px; font-size: 11pt; }
		.tabcontent { width: 60%; height: 530px; }
	}
	
	/* iPhone 5 & 5S in landscape */
	@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
		div.tab { height: 410px; }
		div.tab button { font-size: 11pt; }
		.tabcontent { height: 410px; }
	}
	/* iPhone 5 & 5S in portrait */
	@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
		div.tab { width: 40%; height: 620px; }
		div.tab button { padding: 15px 8px; font-size: 11pt; }
		.tabcontent { width: 60%; height: 620px; }
	}
	/* iPhone 2G-4S in landscape */
	@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
		
	}
	/* iPhone 2G-4S in portrait */
	@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
		
	}