*
{
	margin: 0;
	padding: 0;
}

.background
{
	height: 100vh;
	background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.6)),url(assets/main.jpg);
	background-position: center;
	background-size: cover;
	overflow-x:hidden;
	position: relative;
}
.nav-bar
{
	display: flex;
	padding: 10px 100px;
}
.nav-logo img
{
	width: 100px;
}
.nav-links{
	flex: 1;
}
.nav-links ul
{
	margin-left: 50px;
	display: inline;
}
.nav-links ul li
{
	list-style: none;
	display: inline-block;
	padding: 40px 25px;
}
.nav-links ul a
{
	text-decoration: none;
	color: white;
}
.nav-links ul li::after
{
	content: '';
	width: 0;
	height: 2px;
	background: yellow;
	display: block;
	margin:auto;
	transition: .5s;
}
.nav-links ul li:hover::after
{
	width: 100%;
}
.btn
{
	padding: 5px 15px;
	border: 0;
	background: yellow;
	cursor: pointer;
	font-weight: bold;
}
.nav-links .btn
{
	float: right;
	margin-top: 40px;
}
.banner-title
{
	margin: 50px 200px;
}
.banner-title h1
{
	font-size: 50px;
	color: white;
	margin-bottom: 50px;
}
.banner-title span
{
	color:yellow;
}
.vertical-bar
{
	height: 100%;
	width: 80px;
	background: black;
	top:0;
	left:0;
	position: absolute;
}
.search-icon
{
	height: 60%;
	width: 80px;
}
.search-icon .fa
{
	margin: 45px 24px;
	display: block;
	color: white;
	font-size: 30px;
	cursor: pointer;
}
.social-icon 
{
	height: 35%;
	width: 80px;
	background: yellow;
	text-align: center;
	padding-top: 30%;
	bottom:0;
	position: absolute;
}

.social-icon .fa
{
	margin: 15px 23px;
	display: block;
	padding: 8px;
	border: 1px solid black;
	border-radius: 50%;
	cursor: pointer;
}

.background .fa-bars
{
	display: none;
}
.nav-bar .fa
{
	display: none;
}

@media screen and (max-width: 770px)
{
	.vertical-bar
	{
		display: none;
	}
	.banner-title
	{
		margin: 80px 40px;
	}
	.banner-title h1
	{
		font-size: 30px;
	}
	.nav-bar
	{
		padding: 10px 30px;
	}
	.fa-bars
	{
		position: absolute;
		right: 20px;
		top: 50px;
		color: white;
	}
	.nav-bar .fa
	{
		display: block;
		margin: 10px 25px;
		font-size: 22px;
		cursor: pointer;
		color: white;
		float: right;
	}
	.nav-links
	{
		height: 100vh;
		width: 200px;
		background: black;
		top: 0;
		right: -200px;
		position: absolute;
		text-align: left;
		z-index: 2;
		transition: .5s;
	}
	.nav-links ul a
	{
		display: block;
	}
	.nav-links .btn
	{
	float: none;
	margin-top: 200px;
	margin-left: 25px;
	}
}