/* ==========================================================================
   Demo styles
   ========================================================================== */
  body{
  	/*animation-name*/
	-webkit-animation-name: fade-in;
	-moz-animation-name: fade-in;
	-ms-animation-name: fade-in;
	-o-animation-name: fade-in;
	animation-name: fade-in;
	/*animation-duration*/
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	/*animation-timing-function*/
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-ms-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
	/*animation-iteration-count*/
	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-ms-animation-iteration-count: 1;
	-o-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both; 
  }
 @-webkit-keyframes fade-in {
 	0% {
		opacity: 0;
	}
	 
	100% {
		 
		opacity: 1;
	}
}
@-moz-keyframes fade-in {
  	0% {
		opacity: 0;
	}
	 
	100% {
		 
		opacity: 1;
	}
}
@-o-keyframes fade-in {
  0% {
		opacity: 0;
	}
	 
	100% {
		 
		opacity: 1;
	}
}
 
@keyframes fade-in {
  0% {
		opacity: 0;
	}
	 
	100% {
		 
		opacity: 1;
	}
}

  .top-bar{
  	background: #000; 
  	background: rgba(0, 0, 0, 0.3);
  	text-align: center;
  	padding: 7px;
  	color:#FFF;
  }
  
  .demo-btn{
  	height: 30px;
  	width: 30px;
  	line-height:26px;
  	display: inline-block;
  	border:2px solid transparent;
  	border-radius: 2px;
  	color:#FFF;
  	color: rgba(255, 255, 255, 0.8);
  	margin:0 3px;
  	-webkit-transition: all 0.3s ease-in-out;
  	-moz-transition: all 0.3s ease-in-out;
  	-ms-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
  }
  
  .demo-btn:hover{
  	opacity:0.8; 
  	color:#FFF;
  	border:2px solid #FFF;
  	text-decoration: none;
  }
  
  .demo-btn.active{
  	border:2px solid #FFF;
  }
  
  .th1{
  	background: #16A085;
  }
  .th2{
  	background: #2ECC71;
  }
  .th3{
  	background:#3498DB;
  }
  .th4{
  	background: #F1C40F;
  }
  .th5{
  	background: #E67E22;
  }
  .th6{
  	background: #E74C3C;
  }
  .th7{
  	background: #ECF0F1;
  }
  .th8{
  	background: #95A5A6;
  }
  .th9{
  	background: #00C0E4;
  }
  .th10{
  	background: #5BD999;
  }
  .th11{
  	background: #7658F8;
  }
  .th12{
  	background: #EAC14D;
  }
  .th13{
  	background: #E6567A;
  }
  
  .th14{
  	background: #CB70D7;
  }
  .th15{
  	background: #222D3A;
  }