/* CSS Document */
body {
  font-family: 
    -apple-system, BlinkMacSystemFont, 
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", 
    "Helvetica Neue", sans-serif;
  font-size: 1.3em;
  line-height: 1.5;
  margin: 20px;
}

	.xs-text {
		font-size: 60%;
	}

	.headings-int {
		font-family: 'Open Sans', sans-serif;
		color: #6c6b82;
		letter-spacing: 1px;
		font-size: 2em;
		margin-top: 0;
	}

	/* .tab-content{
		background-color: cadetblue;
		padding: 20px;
		border-width: thin;
		border-color: #ddd;
		border-style: none solid solid solid;
		margin: 20px 0;
	} */
	.tab {
		font-family: 'Open Sans', sans-serif;
		font-size: 1.1em;
		float: left;
		width: 20%;
		height: 300px;
		line-height: 1.8em;
		font-weight: 300;
		letter-spacing: .7px;
	}

	/* Style the buttons inside the tab */
	.tab button {
		display: block;
		background-color:#e6e3fc;
		color: #337ab7;
		padding: 10px;
		width: 100%;
		border-bottom: 1px solid #af76f8;
		border-left: none;
		border-top: none;
		border-right: none;
		outline: none;
		text-align: center;
		cursor: pointer;
		transition: 0.3s;
	}

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

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

	/* Style the tab content */
	.tabcontent {
		float: left;
		padding: 20px;
		width: 80%;
		border-left: none;
		background-color: #f0f0f0;
		margin-bottom: 20px;
		opacity: 1;
		animation: fade 0.2s linear;
	}

	@keyframes fade {
		0% {
			opacity: 0
		}

		100% {
			opacity: 1
		}
	}

	@media (max-width: 900px) {
		.tabcontent {
			font-size: 12px;
		}
	}