@charset "utf-8";
/* CSS Document */
/* Style the buttons that are used to open and close the accordion panel */
	.accordion {
		background-color: #eceff1;
		color: #4682b4;
		cursor: pointer;
		text-align: left;
		border: none;
		outline: none;
		transition: 0.4s;
		margin-top: 5px;
	}
	/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
	.activee, .accordion:hover {
		background-color: #4682b4;
		color: white;
	}	
	.accordion:after {
		content: "\f078"; /* Unicode character for "plus" sign (+) */
		font-family: FontAwesome;
		font-size: 13px;
		color: #4682b4;
		float: right;
		margin-left: 5px;
		padding-right: 5px;
	}	
	.accordion:hover:after {
		color: white;
	}	
	.activee:after {
		content: "\f077"; /* Unicode character for "minus" sign (-) */
		color: white;
	}
	/* Style the accordion panel. Note: hidden by default */
	.panel {
		padding: 0 18px;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease-out;
	}
	
	/* Style the tab */
	.tab {
		overflow: hidden;
		border: none;
		

	}

	/* Style the buttons that are used to open the tab content */
	.tab button {
		background-color: #eceff1;
		color: #4682b4;
		float: left;
		border: none;
		outline: none;
		cursor: pointer;
		padding: 10px 16px;
		transition: 0.3s;
	}

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

	/* Create an active/current tablink class */
	.tab button.active {
		background-color: #4682b4;
		color: white;
	}

	/* Style the tab content */
	.tabcontent {
		display: none;
		padding: 0px 0px;
		border: none;
		border-top: none;
	}
	.tabcontent {
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
	}

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