body {
    background: #f4f4f4;
	font-family: PT Serif, "Helvetica Neue", Arial, Helvetica, Verdana, sans-serif;
 /*   font-weight: 400;
    font-size: 20px;
   */
}

.card {
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); 
	padding:20px;
}
.card-block {}
.card-title {}
.card-text {}
.card-block .btn { width: 100%; }

.meter { 
	height: 40px;  /* Can be anything */
	position: relative;
	background: #555;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 10px;
	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(to bottom,#5cb85c 0,#419641 100%);
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

/*########################################################### TEASER */	
.welcome-text:before {
  content: "";
  background: url(/billion/common/img/tribal5.png) 0px 0px repeat-x;
  float: left;
  width: 100%;
  height: 100px;
  bottom: 0;
  left: 0;
  margin-top: 80px;
  margin-bottom: 40px;
}
.welcome-text:after {
  content: "";
  background: url(/billion/common/img/tribal5.png) 0px 0px repeat-x;
  float: left;
  width: 100%;
  height: 100px;
  bottom: 0;
  left: 0;
  margin-bottom: 80px;
  margin-top: 40px;
}
.welcome-text {
    font-family: 'Fondamento';
    font-weight: 400;
    font-size: 40px!important;
}
.marked {
    color: #da3939!important;
    font-weight: 800;
}


/*########################################################### CONTENT */	
.content-block {
  margin-top: 60px;
  margin-bottom: 50px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 20px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 20px;
  -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
}
.content-block .content-title {
  text-align: center;
  font-size: 24px;
  color: #bbb;
  text-transform: uppercase;
  font-style: normal;
  padding: 50px 0 0px 0;
}
.content-block .content-title:before {
  width: 76px;
  height: 11px;
  background: url(/billion/common/img/tribal_small.png) 0 0px no-repeat;
  margin-top: 12px;
  margin-left: -87px;
  position: absolute;
  content: '';
}
.content-block .content-title:after {
  width: 76px;
  height: 11px;
  background: url(/billion/common/img/tribal_small.png) 0 0px no-repeat;
  margin-top: 12px;
  margin-left: 10px;
  position: absolute;
  content: '';
}
.content-block .content-subtitle {
  text-align: center;
  margin: 0px 0 20px 0px;
  text-transform: uppercase;
  font-size: 36px !important;
  font-weight: bold;
}

/*########################################################### FOOTER */	
.content-footer{
	width: 100%;
	height: 75px;
  	padding-top: 0px;
   	margin-top: 0px;	
}

.content-footer .footer-left{
	text-align: left;
}
.content-footer .footer-left:before{
	content: "";
	 background: url(/billion/common/img/corner_l.png) 0px 0px no-repeat;
	position: absolute;
	width: 120px;
	height: 120px;
	margin-left: -15px;
	margin-top: -55px;
}

.content-footer .footer-right{
	text-align: right;
}
.content-footer .footer-right:before {
	content: "";
    background: url(/billion/common/img/corner_r.png) 0px 0px no-repeat;
    position: absolute;
    width: 120px;
    height: 120px;
    margin-left: -105px;
    margin-top: -55px;
}

.tribalspacer{
	margin-top:20px;
	height:60px;
    background: url(/billion/common/img/tribal.png) 0px 0px repeat-x;
}	

.options{
	margin-left:40px;
	margin-right:40px;
}
.options .btn{
	margin:5px;
}

/*########################################################### Header */	
.navbar{
	font-family: 'Fondamento'!important;
}




/*############################# Fight System */

.progress{
	margin-bottom: 0px;
}

.lpBgStart{
float: left;
width:20px;
height:30px;
background-image: url(/billion/common/img/lp-left.png);
}
.lpBgEnd{
float: right;
width:20px;
height:30px;
background-image: url(/billion/common/img/lp-right.png);
}
.lpBg{
padding:5px;
height:30px;
margin: auto;
background-image: url(/billion/common/img/lp-mid.png);
}

.progress {background: rgba(245, 245, 245, 1); background: -webkit-linear-gradient(top, rgba(245, 245, 245, 1) 0%, rgba(245, 245, 245, 1) 100%); background: linear-gradient(to bottom, rgba(245, 245, 245, 1) 0%, rgba(245, 245, 245, 1) 100%); border: 0px solid rgba(245, 245, 245, 1); border-radius: 4px; height: 20px;}
.progress-bar-custom {background: rgba(25, 224, 25, 1); background: -webkit-linear-gradient(top, rgba(0, 255, 43, 1) 0%, rgba(25, 224, 25, 1) 100%); background: linear-gradient(to bottom, rgba(0, 255, 43, 1) 0%, rgba(25, 224, 25, 1) 100%);}

/*########################################################### DEATH EFFECT */		
body.fade-out {
    opacity: 0;
    transition: 1s opacity;
	background: #000;
	transition: 2s background;
}
body.fade-in {
    opacity: 1;
    transition: 1s opacity;
	background: #f4f4f4;
	transition: 2s background;
}