@font-face{
font-family:Gotham;
src:url('Fonts/Gotham/Gotham-Light.ttf');
}

}
@font-face{
font-family:HalloSans;
src:url('Fonts/Hallo_sans/Hallo_sans.otf');
}

@font-face{
font-family:AdamCG;
src:url('Fonts/Adam/ADAMCGPRO.otf');
}

body{
	margin:0px;
	background-color:#1d1d1d;
	font-family:"gotham",Gotham-Light,sans-serif;
}

a{
	text-decoration:none;
	color:gray;
}

h1{
	font-size:1.4em;
	font-family:'hallo_sans',hallosans,sans-serif;
}

h2{
	font-size:1.4em;
	font-family:'hallo_sans',hallosans,sans-serif;
	color:white;
	font-weight:lighter;
}

.page{
	position:absolute;
	transform:translateX(-50%);
	top:200px;
	left:50%;
	width:1450px;
}

.header{
	position:relative;
	background-color:#161313;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	height:54px;
}

.namebox{
	display:flex;
	justify-content:flex-start;
	align-items:center;
}

.logotext{
	font-size:1em;
	font-family:'AdamCGPRO',AdamCG,sans-serif;
	margin:0px;
	margin-left:20px;
	margin-top:17px;
	margin-bottom:20px;
	color:white;
}

.navbar{
	position:absolute;
	transform:translate(-50%, -50%);
	top:50%;
	left:55%;
	display:flex;
	justify-content:flex-start;
	align-items:center;
}

.navbutton{
	text-align:center;
	width:100px;
}

.content{
	position:relative;
}

.item{
	background-size:cover;
	position:relative;
}

.hoverbreak{
	background-size:cover;
	position:relative;
	height:100%;
	width:100%;
}

.alignleft{

	height:calc(100% - 40px);
	padding:40px;
	display:flex;
	align-items:center;
}

.alignbottom{
	height:calc(100% - 40px);
	padding:40px;
	display:flex;
	align-items:flex-end;
}

.alignright{
	height:calc(100% - 40px);
	padding:40px;
	display:flex;
	justify-content:flex-end;
	align-items:center;
	text-align:right;
}

.aligntop{
	height:calc(100% - 40px);
	padding:40px;
	display:flex;
	align-items:top;
}

.arttitle{
}

.white{
	color:white;
}

.black{
	color:black;
}

.pageimg{
	background-size:cover;
}

.Articletitle{
	position: absolute;
	color: rgb(255, 255, 255);
	font-size: 2.5em;
	left: 42%;
	top: 1%; 
	width: 800px;
	text-align: center;
	opacity: 1;
	color: #cdcdcd;
}

.Articledesc{
	position: absolute;
	left: 42%;
	top: 150px;
	width: 800px;
	text-align: center;
	opacity: 1;
	text-align:left;
	color: #cdcdcd;
}

.Articlecat{
	position: absolute;
	color:gray;
	left: 90%;
	top: 150px ;
	width: 150px;
	text-align: center;
	opacity: 1;
	text-align:left;
}

.Articlecontent{
	position: absolute;
	color:#a2a2a2;
	left: 42%;
	top: 200px ;
	width: 800px;
	text-align: center;
	opacity: 1;
	text-align:left;
	border-color:1px solid white;
	font-size:1.3em;
}

.footer{
	position:relative;
	background-color:#161313;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	height:54px;
	margin-bottom:40px;
}

.footercontent{
	position:absolute;
	transform:translate(-50%, -50%);
	top:50%;
	left:50%;
	display:flex;
	justify-content:flex-start;
	align-items:center;
}

.scene-fade{
	animation-duration:.25s;
	transition-timing-function:ease-in;
	animation-fill-mode:both;
	animation-name:Fader ;
}

.scene-fadeIN{
	animation-duration:1s;
	transition-timing-function:ease-in;
	animation-fill-mode:both;
	animation-name:FaderIN ;
}

.scene-dropIN{
	animation-duration:.5s;
	transition-timing-function:ease-in;
	animation-fill-mode:both;
	animation-name:dropIN ;
}

@keyframes Fader{
	0%{
		opacity:1;	
	}
	100%{
		opacity:0;	
	}
}

@keyframes FaderIN{
	0%{
		opacity:0;	
	}
	100%{
		opacity:1;	
	}
}

@keyframes dropIN{
	0%{
		transform: translate3d(0, 100%, 0);	
		opacity:0;
	}



	100%{
		opacity:1;
		transform: none;
	}
}