*,
	*:after,
	*:before {
		box-sizing: border-box;
	}

	.clearfix:before,
	.clearfix:after {
		content: " ";
		display: table;
	}

	.clearfix:after {
		clear: both;
	}

	body {
		font-family: sans-serif;
		background: #f6f9fa;
	}

	h1 {
		color: #ccc;
		text-align: center;
	}

	a {
	  color: #ccc;
	  text-decoration: none;
	  outline: none;
	}

	/*Fun begins*/
	.tab_container {
		width: 100%;
		margin: 0 auto;
		padding-top: 10px;
		position: relative;
	}

	input, section {
	  clear: both;
	  padding-top: 10px;
	  display: none;
	}

	label {
	  font-weight: 700;
	  font-size: 14px;
	  display: block;
	  float: left;
	  width: 20%;
	  padding: 1.5em;
	  color: #757575;
	  cursor: pointer;
	  text-decoration: none;
	  text-align: center;
	  background: #f0f0f0;
	}

	#tab1:checked ~ #content1,
	#tab2:checked ~ #content2,
	#tab3:checked ~ #content3,
	#tab4:checked ~ #content4,
	#tab5:checked ~ #content5 {
	  display: block;
	  padding: 20px;
	  background: #fff;
	  color: #000;
	  border-bottom: 2px solid #f0f0f0;
	}

	.tab_container .tab-content p,
	.tab_container .tab-content h3 {
	}
	.tab_container .tab-content h3  {
	  text-align: center;
	}

	.tab_container [id^="tab"]:checked + label {
	  background: #fff;
	  box-shadow: inset 0 3px #0CE;
	}

	.tab_container [id^="tab"]:checked + label .fa {
	  color: #0CE;
	}

	label .fa {
	  font-size: 1.3em;
	  margin: 0 0.4em 0 0;
	}

	/*Media query*/
	@media only screen and (max-width: 930px) {
	  label span {
		font-size: 14px;
	  }
	  label .fa {
		font-size: 14px;
	  }
	}

	@media only screen and (max-width: 768px) {
	  label span {
		display: none;
	  }

	  label .fa {
		font-size: 16px;
	  }

	  .tab_container {
		width: 100%;
	  }
	}

	/*Content Animation*/
	@keyframes fadeInScale {
	  0% {
		transform: scale(0.9);
		opacity: 0;
	  }
	  
	  100% {
		transform: scale(1);
		opacity: 1;
	  }
	}