/* CSS Document */

header{
	height: 80px;
	position: fixed;
	width: 100%;
	top: 0;
	background-color: rgba(255, 255, 255, 0.32);
}
header .container{
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.logo a{
	text-decoration: none;
	font-size: 2rem;
	color: black;
}
.logo h3 a:hover{
	color: gray;
}
header nav ul{
	list-style: none;
}
nav li{
	display: inline-block;
	margin-left: 2rem;
}
nav li a{
	text-decoration: none;
	color: black;
}
nav li a:hover{
	color: grey;
}

/* Rid of about */
nav li:nth-child(4){
	display: none;
}
/* Hamburger bar */
.menu {
  	cursor: pointer;
	display: none;
}

.bar1, .bar2, .bar3 {
 	 width: 35px;
 	 height: 5px;
 	 background-color: #333;
 	 margin: 6px 0;
 	 transition: 0.4s;
}

.change .bar1 {
  	-webkit-transform: rotate(-45deg) translate(-9px, 6px);
  	transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
	opacity: 0;
}

.change .bar3 {
 	 -webkit-transform: rotate(45deg) translate(-8px, -8px);
 	 transform: rotate(45deg) translate(-8px, -8px);
}

@media only screen and (max-width:570px){
	.menu{
 		display: block;
		float: right;
		margin-top: 10px;
	}
	header{
		height: 60px;
		transition-duration: 0.5s;
	}
	header.change {
		height: 150px;
	}
	header .container{
		display: block;
		overflow: hidden;
		height: inherit;
	}
	.logo h3{
		display: inline-block;
	}
	.logo{
		display: inline-block;
		margin-top: 10px;
	}
	nav li{
		display: block;
		margin: 20px 0;
		text-align: center;
	}
	nav ul{
		padding: 0;
	}
}