/* Style the tab */
.tab {
	overflow: hidden;
	border: 0px solid #ccc;
	background-color: #f1f1f1;
	width: 265px;
	/*padding: 1px 1px;*/
	z-index: 10;
	height: 38px;
	background: linear-gradient(#cfd8dc,#aaa);
}

/* Style the buttons that are used to open the tab content */
.tab button {
	background-color: inherit;
	float: left;
	border: none;
	border-radius: 5px;
	outline: none;
	cursor: pointer;
	padding: 5px 5px;
	transition: 0.3s;
	vertical-align: bottom;
}

/* Change background color of buttons on hover */
.tab button:hover {
	background: linear-gradient(#aaa,#eee);

}

/* Create an active/current tablink class #336699 */
.tab button.active {
	color: white;
	background: linear-gradient(#aaa,#eee 60% 100%);

}

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 1px 1px;
	border: 0px solid #ccc;
	border-top: none;
	width: 265px;
	z-index: -10;
	vertical-align: middle;

}

.tabcontent {
	animation: fadeEffect 1s; /* Fading effect takes 1 second */
}



/* Style the tab */
.tab2 {
	overflow: hidden;
	border: 0px solid #ccc;
	background-color: #f1f1f1;
	width: 100%;
	padding: 1px 1px;
	outline: none;

}

/* Style the buttons that are used to open the tab content */
.tab2 button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 5px 5px;
	transition: 0.3s;
	border: 0px solid #ccc;

}

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

/* Create an active/current tablink class */
.tab2 button.active {
	background-color: #ddd;
	color: #336699;
}

/* Style the tab content */
.tabcontent2 {
	display: none;
	padding: 1px 1px;
	border: 0px solid #ccc;
	border-top: none;
	width: 100%;
	height: 100%;
}

.tabcontent2 {
	animation: fadeEffect 1s; /* Fading effect takes 1 second */
}


/* Go from zero to full opacity */
@keyframes fadeEffect {
	from {opacity: 0;}
	to {opacity: 1;}
}