@keyframes NavIn{
	0%{
		top: -100%;
	}
	100%{
		top: 100%;
	}
}

@media (max-width: 1000px) {


	header{
		position: relative;
	}

	header nav.mobile{
		top: 0;
		display: block;
		width: 100%;
		
		background: var(--dark);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: fixed;
		align-items: center;

		padding: 15px 10px;
		z-index: 100;
	}

	header nav.mobile h1{
		font-size: 20px;
		color: #fff;
	}
	
	header nav.mobile button {
		background: none;
		border: none;
	}
	header nav.mobile button img{
		width: 30px;
	}

	header nav.mobile .mobile-navbar{
		position: absolute;
		top: -100%;
		left: 0;
		background: #eee;

		width: 100%;
		/*display: flex;*/
		display: none;
		flex-direction: column;
		justify-content: space-around;
		padding: 15px 0;
	}

	header nav.mobile .mobile-navbar a{
		text-decoration: none;
		color: var(--dark);
		font-size: 15px;
		display: block;	
		margin: 5px;
	}

	header nav.mobile .mobile-navbar a.active{
		font-weight: bold;
	}
	
	header nav.mobile .mobile-navbar.is-open{
		display: flex;
		top: 100%;
		animation-name: NavIn;
		animation-duration: .6s;
		animation-timing-function: ease;
	}

	header nav.hide-mobile{
		display: none;
	}

	/*Logo*/
	header .logo{
		margin-top: 100px;
	}
	header .logo img{
		width: 90%;
	}

	footer{
		padding: 30px;
	}

	footer .info{
		flex-direction: column;
	}
	footer .info .contact{
		width: 100%;
	}

	footer .info .contact p{
		font-size: 14px;
	}
	footer .info .networks{
		width: 100%;
	}

	/*Hide Mobile*/
	.hide-mobile{
		display: none;
	}

}