#top_header{
	width:100%;
	min-height: var( --header-height );
	position:relative 
}

#menu_icon{
	display: none;
	width: var( --with-32px );
	height:var( --with-32px ); 
}

#logo{
	color: #45FF00;
	display:block;
	float:left; 
	position: absolute;
	left:0;
	top:calc( 50% - var( --with-13px ) ) ;
	transform:translateY(-50%) 
}

#logo figure{
	margin:0;
	padding:0;
	display:block; 
}

#logo span{
	font-size: var( --with-14px );
	position:absolute;
	left:  var( --with-25px );
	bottom: calc( var( --with-3px ) * -1 );
	display:block;
	padding:0 0 0 var( --with-18px );
	height: var( --with-20px );
	line-height: var( --with-20px ) 
}

#logo span::before{
	content: ''; 
	display: block;
	width: var( --with-14px );
	height: var( --with-14px );
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background: url('/wp-content/themes/bluffclub/assets/img/star-done.svg?v=4') no-repeat 50% 50%;
	background-size:contain;
}


#top_header.support_header{
	background-color:var( --dark-color )
}

body.npage-body:not(.home):not(.error404) #top_header{ /* npage-body = NOT FAQ CATEGORY || NOT FIXED HEADER */
	margin-bottom: 80px
}

#top_header{
	padding:0 0 15px 0
}
/*
body.support-body{
	padding-top:140px;
}

*/body.support-body #top_header.support_header{
	position:fixed;
	left:0;
	top:0;
	z-index:99990;
	/*height: 72px*/
}

body.support-body.scroll_down #top_header.support_header{
	height: 50px;
	padding-top:0;
	padding-bottom:0
}

body.support-body.scroll_down #top_header.support_header a#logo{
	top: 50%;
	transform:translateY(-50%)
}

body #top_header.support_header #top_menu ul li a{
	position:relative
}

body.support-body.scroll_down #top_header.support_header a#logo > span,
body.support-body.scroll_down #top_header.support_header #top_menu ul li a figure{
	transform:scale(0,0) /*translateY(-80px)*/;
	opacity:0;
	position: absolute; top:-50%
	/*display:none*/
}

/*
================================================================================== top_menu
*/

#top_menu{ 
	display:block;
	width:100%;
	min-height:var( --with-30px );
}

#top_menu ul,
#top_menu li{
	margin:0;
	padding:0;
	list-style:none 
}

#top_menu ul{
	text-align:center
}

#top_menu ul li{
	display:inline-block
}

#top_menu ul li a{
	color:#fff;
	font-size: var( --with-16px );
	font-weight:500;
	display:block;
	min-width:var( --with-40px );
	margin:0 var( --with-20px )
}

#top_menu ul li a figure,
#top_menu ul li a span{
	width:100%;
	text-align:center
}

#top_menu ul li a figure{
	height: var( --with-62px );
	display: flex;
	align-items: center;
	justify-content: center;
	position:relative;
	
	-webkit-transition: all 0.15s cubic-bezier(.17,.67,.83,.67);
	   -moz-transition: all 0.15s cubic-bezier(.17,.67,.83,.67);
	    -ms-transition: all 0.15s cubic-bezier(.17,.67,.83,.67);
	     -o-transition: all 0.15s cubic-bezier(.17,.67,.83,.67);
	        transition: all 0.15s cubic-bezier(.17,.67,.83,.67); 
	
	transform-origin: center;
}

#top_menu ul li a span{
	display:block;
}

#top_menu ul li figure svg {
	fill: #fff
}


/*
-------------------------------------------------------------- TOP MENU ACTIVE
*/

#top_menu ul li a,
#top_menu ul li a:hover,
#top_menu ul li.active a:hover{
	text-decoration:none !important
}

body.page-template-home #top_menu ul li.play a,
body.page-template-tmp-Leaderboards #top_menu ul li.leaders a,
body.page-template-tmp-How-To-Play #top_menu ul li.how a, 
body.page-template-tmp-FAQ #top_menu ul li.faq a,
#top_menu ul li.active a{
	color: #45FF00;
}

body.page-template-home #top_menu ul li.play a:hover figure svg,
body.page-template-tmp-Leaderboards #top_menu ul li.leaders a:hover figure svg,
body.page-template-tmp-How-To-Play #top_menu ul li.how a:hover figure svg, 
body.page-template-tmp-FAQ #top_menu ul li.faq a:hover figure svg,

body.support-body #top_menu ul li.faq a figure svg,

body.page-template-home #top_menu ul li.play a figure svg,
body.page-template-tmp-Leaderboards #top_menu ul li.leaders a figure svg,
body.page-template-tmp-How-To-Play #top_menu ul li.how a figure svg, 
body.page-template-tmp-FAQ #top_menu ul li.faq a figure svg,

#top_menu ul li.active > a:hover figure svg,
#top_menu ul li.active > a figure svg {
	fill: #45FF00
}

/*
body.page-template-home #top_menu ul li:not(.play) > a:hover figure,
body.page-template-tmp-Leaderboards #top_menu ul li:not(.leaders) > a:hover figure,
body.page-template-tmp-How-To-Play #top_menu ul li:not(.how) > a:hover figure,
body.page-template-tmp-FAQ #top_menu ul li:not(.faq) > a:hover figure{
*/
#top_menu ul li:not(.active) a:hover > figure{
	transform:scale(1.38,1.38) 
}

/*
-------------------------------------------------------------- TOP MENU RESPONSIVE -> support_header
*/


/*
-------------------------------------------------------------- TOP MENU RESPONSIVE
*/

@media (max-width:992px) {
	
	#top_header{
		min-height:101px
	}
	
	#top_menu{
		display: flex;
		opacity:0;
		visibility:hidden;
		width:0;
		overflow:hidden;
		/*transform-origin: right;*/
		
	}
	
 	#top_menu{ 
		background:#000;
		position:fixed;
		top: 0;
		left:-100%;
		min-height:100vh;
		padding: var( --with-80px ) 0 var( --with-30px ) 0;
		z-index:99997;
		
		transition: width .6s ease-in-out, left .3s ease-in-out
	}
	
	html body.menu_open #top_menu{
		opacity:1;
		visibility: visible;
		left:0;
		width:100%;
		max-width:62.5%;
		min-width: var( --with-230px );
		
	}
	
	#logo{
		left: 45px;
		top:calc( 50% - 13px ) ;
		ransform:translateY(-50%) 
	}
	
	#menu_icon{
		display:flex;
		margin:0 var( --with-20px );
		position:relative;
		z-index:99999;
		/*transform:translate( 0, calc( var( --with-15px ) * -1 ) ) */
	}
	
	#top_menu ul,
	#top_menu ul li,
	#top_menu ul li a{
		display:block;
		width:100%;
		float:none;
		text-align:left 
	} 
	
	#top_menu ul li a{
		display:flex;
		align-items: center;
		margin:0;;
		padding:0 var( --with-20px ) 
	}
	
	#top_menu ul li a figure,
	#top_menu ul li a span{
		display:flex;
		text-align:left  - var( --with-40px ) ) ;*/ /* calc( 100% - 40px );*/
	}
	
	#top_menu ul li a span{
		padding-left: var( --with-10px )
	}
	
	#top_menu ul li a figure{
		max-width: var( --with-50px )
	}
	
}

@media (max-width:768px) {
	
	#top_header{
		min-height:70px
	}
	
	a#menu_icon{
		transform: translateY( var( --with-8px ) )
	}
	#logo{
		margin-top: var( --with-13px )
	}
}