@charset "utf-8";
/* CSS Document */

html, body{
	font-family: walkway_blackregular !important;
}


/* common */

.clear{
	clear: both;
}

.mobile{
	display: none !important;
}

div, section{
	border: 0px solid green;
}









#MagnetContainer{
/*	margin-top: -30px;*/
}



#ContactBox{
position: absolute;
display: block; 

top: 200px;
left: 25%;
right: 25%;


padding: 50px;

font-size: 15px;

background-color: hsla(0,0%,100%,0.95);
color: #000;
z-index: 2;

display: none;
}


/* HEADER */


#logo{
	float: left;
	margin-left: 4%;
	margin-bottom: 30px;
}

#logo h1{
	display: block;
	width: 76px;
	height: 72px;
	text-indent: -999em;
	background: url('../images/logo.png');
}

/* MENU */

.magnet-filter{
	margin-right: 4%;
}

li{ 
	float: right;
	padding: 3px;
	list-style-type: none;
	padding-top: 50px;	
}

li:before{
	content: " / ";
	color: #000;
}

li.bum:before{ content: none !important; }
li{ color: #939393; }
li:hover{ color: #2a6496 }
li.active{ color: #000; }
li.active:hover{ color: #2a6496 }
li a{ color: #000; }
li a:hover{  text-decoration: none; }

/* MAIN CONTENT - MAGNET */

.magnet{
	padding-left: 30px;
	padding-right: 30px;
}



/* FOOTER */

footer{
	text-align: center;
	margin-top: 50px;
	margin-bottom: 50px;
	margin-left: auto;
	margin-right: auto;
}

@media all and (max-width: 799px) { 

	div, section{
		border: 0px solid red;
	}
	
	.mobile{
		display: list-item !important;
	}
	
	.pc{
		display: none !important;
	}
	
	header{
		width: 100%;
		text-align: center;
		padding: 0;
		margin: 0;
	}
	
	#logo{
		margin: auto;
		float: none;
		margin-bottom: 20px;
	}
	
	#logo h1{
		margin: auto;
	}
	
	li{ 
		float: none;
		padding: 0;
		margin-top: 5px;
		font-size: 13px;
	}
	
	li:before{
		content: none
	}
	

	.magnet{
		padding-left: 5px;
		padding-right: 5px;
	}

	.magnet-item{
		width: 100% !important;
	}


}