/*header*/

.header {
	height:59px;
	width:100%;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
}

.color {
	background-color:#FF8800;
}



/*menu*/

@keyframes menuanim {
	from {left:-205px;background-color:rgba(255,100,0,0);}
	to {left:0px;background-color:rgba(255,100,0,0.8);}
}
@keyframes backmenu {
	from {left:0px;background-color:rgba(255,100,0,0.8);}
	to {left:-205px;background-color:rgba(255,100,0,0);}
}

.menuanimation {
	animation-name:backmenu;
	animation-duration:1.5s;
}

.menu {
	height:100%;
	width:250px;
	position:fixed;
	top:0;
	left:-205px;
	bottom:0;
	background-color:rgba(255,100,0,0);
	padding:10px;
}

.animate1Menu {
	height:100%;
	width:250px;
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	background-color:rgba(255,100,0,0.8);
	padding:10px;
	animation-name:menuanim;
	animation-duration:1.5s;
}



/*menu icon*/

.container {
	display: inline-block;
	cursor: pointer;
	position:absolute;
	margin:10px 15px 10px 10px;
	top:0;
	right:0;
}

.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) ;
}