/*  #STNG -  2024 */
/*	###############################################	*/\
/*  Site created by Storytellers - storytellers.odozii.com */
/*  Design and Development by Francis Isibor */
/*	###############################################	*/
body	{
	margin:0px;
	padding:0px;
	background-color:black;
	font-family: 'Titillium Web', sans-serif;

	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	transition:all 0.2s linear;
}
.mobile	{
	display:none;
}
/*	#######################	*/
/* 	Menu */
/*	#######################	*/



ul#menu	{
	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	transition:all 0.2s linear;

	margin:0 auto;
	margin-top:17px;

	width:560px;
	max-width:100%;
	padding:0px;

	-ms-transform: translate3d(0, -50%, 0) translate3d(0, 0px, 0);
	-webkit-transform: translate3d(0, -50%, 0) translate3d(0, 0px, 0);
	transform: translate3d(0, -50%, 0) translate3d(0, 0px, 0);

	opacity:0;

}
ul#menu li	{
	display:inline;
	margin-left:5px;
	margin-right:5px;
}
ul#menu li	a {
	padding-top:34px;
	padding-left:1%;
	padding-right:1%;
	padding-bottom:10px;

	color:rgba(255,255,255,0.5);

	font-weight:700;
	font-size:14px;
	text-decoration: none;
	box-shadow: none;
	text-align:center;
}
ul#menu li a:active, ul#menu li a:hover	{

	text-shadow: 0px 0px 10px #fff;
	color:white;

}
#header	{
	text-align: center;
	width:100%;
	position:fixed;
	height:63px;

	-webkit-transition:all 0.5s linear;
	-moz-transition:all 0.5s linear;
	-o-transition:all 0.5s linear;
	transition:all 0.5s linear;

	z-index:1;
}
#header:hover	ul#menu	{
	-ms-transform: translate3d(0, 0, 0) translate3d(0, 0px, 0);
	-webkit-transform: translate3d(0, 0, 0) translate3d(0, 0px, 0);
	transform: translate3d(0, 0, 0) translate3d(0, 0px, 0);

	opacity:1;
}

.header	{

	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	transition:all 0.2s linear;

	width:100%;

	height:20px;

	color:rgba(255,255,255,0.7);
	text-shadow: 0px 0px 10px #fff;
	font-weight:700;
	font-size:20px;

	position:relative;
	top:-28px;

	text-align:center;
}

#header:hover	.header	{
	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	transition:all 0.2s linear;

	-ms-transform: translate3d(0, 150%, 0) translate3d(0, 0px, 0);
	-webkit-transform: translate3d(0, 150%, 0) translate3d(0, 0px, 0);
	transform: translate3d(0, 150%, 0) translate3d(0, 0px, 0);

	opacity:0;
}
#nav	{
	width:60%;
	height:50px;
	margin:0 auto;
	/* float:left; */
}

#social	{


	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	transition:all 0.2s linear;

	width:90%;
	height:50px;

	float:left;


	opacity:1;

	position: fixed;
	top:100%;
	top:calc(100% - 50px);
	left:20px;

	overflow:hidden;

}
#social .content {
	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	transition:all 0.2s linear;

	height:100%;
	width:100%;
	position:relative;

}
#social	p	{
	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	transition:all 0.2s linear;

	color:#ff6c15;

	font-weight:600;
	font-size:20px;
	position:absolute;
	top: 5px;
	margin:0px;
	opacity:1;
}
#social:hover .content{

	-ms-transform: translate3d(0, -20px, 0) translate3d(0, 0px, 0);
	-webkit-transform: translate3d(0, -20px, 0) translate3d(0, 0px, 0);
	transform: translate3d(0, -20px, 0) translate3d(0, 0px, 0);

}
#social:hover p {
	opacity:0;
}
#social:hover .social {
	opacity:1;
}

.social	{
	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	transition:all 0.2s linear;

	position:absolute;
	top: 20px;
	width:300px;
	opacity:0;

}

.socialbuttons	{


	width:10%;
	min-height:20px;
	margin:0px;
	margin-right:10%;
	float:left;
	opacity:0.4;
}

.socialbuttons	img	{
	width:100%;
}

.socialbuttons:hover	{
	opacity:1;
}