/*{
	margin: 0;
	padding: 0;
	border: 0;
}*/
@font-face{
	font-family: DirteeBox;
	src: url("../fonts/HBM-DirteeBox.ttf");
}


body{
	background-color: #A4A4A4;
}

.content{
	width: 98%;
	height: 100%;
	margin: 0% 1%;
	transition: 1s;
}

.header{
	color: #E05;
}

.source li {
	list-style: none;
	margin: 1% 0;
}

.source a {
	text-decoration: none;
	color: #000;
	margin-left: 0;
	transition: margin-left 1s, color 1s;
}

.source li:hover a{
	margin-left: 1%;
	color: #FFF;
}

.nav-bar{
	height: 50px;
	display: flex;
	padding: 1%;
	background-color: #606060;
	border: solid 2px #828282;
}

.nav-bar .button{
	background-image: url(../img/icon.svg);
	background-size: cover;
	width: 50px;
	height: 50px;
	float: right;
}

.nav-bar .lt{
	text-align: center;
	float: left;
	font-size: 300%;
	font-family: DirteeBox;
}

.nav-bar .rt{
	margin-top: 2%;
	text-align: center;
	float: right;
	font-weight: bold;
}

/*Mobile NAV*/
.mobile #nav-mobile{
	padding-left: 0;
	display: none;
}

#nav-mobile a{
	text-decoration: none;
	color: #E05;
}

.mobile > #nav-mobile{
	border: solid 2px #828282;
	margin: 0;
}

#nav-mobile li{
	width: 100%;
	text-align: center;
	background-color: #A4A4A4;
	list-style: none;
	padding: 2% 0%;
	font-weight: bold;
}

#nav-mobile li:hover{
	background-color: #606060;
}

#nav-mobile li ul{
	display: none;
	margin-top: 2%;
	padding-left: 0;
}

#nav-mobile li:hover ul{
	display: block;
}

#nav-mobile li ul li{
	background-color: #606060;
}

#nav-mobile li ul li:hover{
	background-color: #A4A4A4;
}

/*PC NAV*/
.pc{
	display: none;
}

.pc li{
	padding-left: 0;
}

.pc ul{
	padding-left: 0;
}

#nav-pc{
	margin-bottom: 0;
}

#nav-pc a li{
	text-decoration: none;
	color: #E05;
}

#nav-pc li{
	width: 15%;
	list-style: none;
	display: inline-block;
	padding: 1% 0%;
	text-align: center;
	font-size: 100%;
	font-weight: bold;
}

#nav-pc li:hover{
	background-color: #606060;
	color: #FF0095;
	box-shadow: 1px 1px 30px #666;
}

#nav-pc li ul{
	display: none;
	margin-top: 1%;
	position: absolute;
	box-shadow: 1px 1px 30px #666;
}

#nav-pc li:hover ul{
	display: block;
}

#nav-pc li ul li{
	background-color: #606060;
	color: #FF0095;
	padding: 3% 0%;
	width: 100%;
}

#nav-pc li ul li:hover{
	background-color: #A4A4A4;
	color: #E05;
}

/*Sidebar NAV*/
	.sidenav{
	    height: 100%; /* 100% Full-height */
	    width: 0; /* 0 width - change this with JavaScript */
	    position: fixed; /* Stay in place */
	    z-index: 1; /* Stay on top */
	    top: 0;
	    left: 0;
	    background-color: #111; /* Black*/
	    overflow-x: hidden; /* Disable horizontal scroll */
	    padding-top: 60px; /* Place content 60px from the top */
	    transition: 1s; /* 0.5 second transition effect to slide in the sidenav */
	}

	/* The navigation menu links */
	.sidenav a{
	    padding: 8px 8px 8px 32px;
	    text-decoration: none;
	    font-size: 25px;
	    color: #818181;
	    display: block;
	    transition: 0.3s
	}

	/* When you mouse over the navigation links, change their color */
	.sidenav a:hover, .offcanvas a:focus{
	    color: #f1f1f1;
	}

	/* Position and style the close button (top right corner) */
	.sidenav .closebtn{
	    position: absolute;
	    top: 0;
	    right: 25px;
	    font-size: 36px;
	    margin-left: 50px;
	}

	#open{
	}

	/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
	#main{
	    transition: margin-left .5s;
	    padding: 20px;
	}

	/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
	@media screen and (max-height: 450px){
	    .sidenav {padding-top: 15px;}
	    .sidenav a {font-size: 18px;}
	}

/*Content*/
.disc{
	list-style-type: disc;
}

.line{
	list-style-type: circle;
	margin: 0 0 0 5%;
}

/*Some PC stuff*/
@media screen and (min-device-width: 554px) {
	.header{
		border-bottom: 5px #666 solid;
	}

	.nav-bar{
		border: none !important;
		background-color: transparent !important;
		display: block !important;
	}

	.nav-bar{
		padding: 1% !important;
	}

	.mobile{
		display: none !important;
	}

	.pc{
		display: block !important;
	}

	.line{
		margin: 0 0 0 5% !important;
	}
}

@media screen and (min-device-width: 769px) {
	.nav-bar .lt{
		font-size: 400% !important;
	}

	.line{
		margin: 0 0 0 1% !important;
	}
}