/* =============================================================================
   CONTENT
   ========================================================================== */
#backers {
	position: relative;
	display:block;
	float: left;
	width:100%;
	min-height:800px;
	color:#fff;
	padding:10px 0px 150px 0px;
	font-family: 'helioscondregular', Arial, "Helvetica CY", Helvetica, sans-serif;
}

/* =============================================================================
   LISTES
   ========================================================================== */
#backers ul {
	position: relative;
	float:left;
	display:inline-block;
}
#backers ul {	
	margin:0;
	padding:0;
}
#backers ul:before, #backers ul:after {
  content: "";
  display: table;
}
#backers ul:after {
  clear: both;
}
#backers li {
	padding: 0;
	list-style: none;
	display: inline-block;
}
   
/* =============================================================================
   NAV
   ========================================================================== */
#backers-nav {
	position: fixed;
	width:230px;
	height:600px;
	top:50%;
	left:20px;
	transform: translateY(-50%);
	z-index:150;
}
#backers-nav h1 {
	position:relative;
	display:block;
	width:100%;
	height:38px;
	padding:6px 0px 0px 7px;
	font-family: 'charlemagne-bold', Arial, "Helvetica CY", Helvetica, sans-serif;
	font-size:20px;
	line-height:1.1em;
	font-weight: normal;
  font-style: normal;		
	text-transform:uppercase;	
	color:#e5d194;
	background:rgba(4,32,44,0.8);
	border:1px solid #e5d194;	
	border-bottom:none;
}
#backers-nav ul {
	position:relative;
	display:block;
	width:100%;
	background:#e5d194;
	border:1px solid #e5d194;
}
#backers-nav li {
	position:relative;
	display:block;
	width:100%;
	padding:6px 4px 4px 12px;
	text-transform: uppercase;
	color:#000;	
	cursor:pointer;
	text-align:left;
	transition:all 0.3s ease;
	overflow:hidden;
	margin:0;
	border-top:1px solid #e5d194;
}
#backers-nav li:first-child {
	border-top:none;
}
#backers-nav li:hover, 
#backers-nav li.active {
	/* background:#fff !important; */
	padding-left:24px;	
}

#backers-nav li:before {
	content: "";
	position: absolute;
	width:20px;	
	height:20px;
	left:-20px;
	top:0px;
	background:#fff;
	visibility: hidden;
	transform: rotate(45deg);
	transform-origin: top left;
	transition: all 0.3s ease-in-out 0s;
}
#backers-nav li:hover:before, 
#backers-nav li.active:before {
	visibility: visible;
	left:0px;
}

/* BOUTON BACK */
#backers-nav-back {
	position: relative;
	float:left;
	width:100%;
	height:80px;
	margin-top:15px;	
	text-transform: uppercase;
	font-size:16px;	
}
#backers-nav-back:after {
  clear: both;
}
#backers-nav-back a {
	position: relative;
	display:block;
	float: left;
	width:100%;
	text-align:center;
	color:#fff;
	padding: 8px 10px;
	background: transparent;
	border:1px solid #fff;
}
#backers-nav-back a i {
	font-size: 16px;
	padding-right:3px;
	display:inline-block;
	vertical-align:middle;
}
#backers-nav-back a:hover {	
	color:#000;
	background: #fff;
} 
   
/* =============================================================================
   LISTES
   ========================================================================== */
#backers-content {
	position: relative;
	display:block;	
	float: left;
	width:100%;
	text-align:center;
}
#backers-content h2 {
	position:relative;
	width:100%;
	text-align:center;
	font-family: 'charlemagne-std-bold', 'Times New Roman', serif;
  color: #e5d194;
	font-size:35px;
	margin: 10px auto;
}
#backers-list {
	position: relative;
	display:block;		
	float: left;
	width:100%;
	text-align:center;
}
.backers {	
	text-align:left;
}
.backers span {	
	position:relative;
	display:inline-block;
	text-align:center;
	margin:5px;	
	padding: 5px 8px 4px 8px;
	cursor:pointer;
	transition:opacity 0.3s ease;
	color:#000;
}
.backers span:hover{	
	background:rgba(255, 255, 255, 1);
}

/* =============================================================================
   COULEURS PAR TYPE DE BACKER
   ========================================================================== */
#backers-nav li[data-filter='']  {  
	background: #248ca2;
}
#backers-nav li[data-filter='.no_reward'], .no_reward span {
  background: #2db0cb;
}
#backers-nav li[data-filter='.usd5'], .usd5 span {
  background: #3ebad4;
}
#backers-nav li[data-filter='.usd20'], .usd20 span {
  background: #4dc0c2;
}
#backers-nav li[data-filter='.usd30'], .usd30 span {
  background: #5cc6af;
}
#backers-nav li[data-filter='.usd45'], .usd45 span {
  background: #6bcc9d;
}
#backers-nav li[data-filter='.usd55'], .usd55 span {
  background: #7bd38b;
}
#backers-nav li[data-filter='.usd65'], .usd65 span {
  background: #8ad978;
}
#backers-nav li[data-filter='.usd65_2'], .usd65_2 span {
  background: #99df66;
}
#backers-nav li[data-filter='.usd80'], .usd80 span {
  background: #a8e553;
}
#backers-nav li[data-filter='.usd90'], .usd90 span {
  background: #b7eb41;
}
#backers-nav li[data-filter='.usd125'], .usd125 span {
  background: #c6f22e;
}
#backers-nav li[data-filter='.usd175'], .usd175 span {
  background: #d5f81c;
}
#backers-nav li[data-filter='.usd250'], .usd250 span {
  background: #e7f81c;
}
#backers-nav li[data-filter='.usd350'], .usd350 span {
  background: #f8f61c;
}
#backers-nav li[data-filter='.usd500'], .usd500 span {
  background: #f8e41c;
}
#backers-nav li[data-filter='.usd1000'], .usd1000 span {
  background: #f8bf1c;
}
#backers-nav li[data-filter='.usd2500'], .usd2500 span {
  background: #f8ad1c;
}
#backers-nav li[data-filter='.usd5000'], .usd5000 span {
  background: #f89a1c;
}
#backers-nav li[data-filter='.usd7500'], .usd7500 span {
  background: #f8881c;
}

/* =============================================================================
   MEDIAQUERIES 
   ========================================================================== */
@media screen and (max-width:1800px) {
	#backers {
		padding-left:20%;
	}
}
@media screen and (max-width:1200px) {
	#backers {
		padding:10px 10px 60px 260px;
	}
}
@media screen and (max-width:700px) {
	#backers {
		padding:10px 10px 60px 10px;
	}
	#backers-nav {
		position: relative;
		display:block;
		width:100%;
		height:auto;
		top:0;
		left:0;
		transform:none;
		z-index:150;		
	}
	#backers-nav ul {
		column-count: 2;
		column-gap:1px;
	}
	#backers-nav li:last-child {
		border-bottom:none;
	}
}