@charset "utf-8";
/* CSS Document */
    

/*Burger Menu Select */
	.menubutton {
  		display: inline-block;
  		cursor: pointer;
  		position: relative;
  		top: 20px;
    	
	}

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

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

	/* Fade out the second bar */
	.change .bar2 {
  	opacity: 0;
	}

	/* Rotate last bar */
	.change .bar3 {
  	-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  	transform: rotate(45deg) translate(-8px, -8px) ;
	}

/* Side Menu*/

	.menu {
    	width: 0;
    	height: 100%;
    	background-color: #414042;
    	position: fixed;
  		z-index: 1;
  		top: 0;
  		left: 0;
 		overflow-x: hidden;
  		transition: 0.5s;
		padding-top: 20px; 
    	opacity: 1;
	}

	.menu a {
  		padding: 15px 8px 15px 20px;
  		text-decoration: none;
  		font-size: 25px;
  		color: #ffffff;
  		display: block;
  		transition: 0.3s;
    	font-family: 'Open Sans', cursive;
}

	.bar4, .bar5  {
  		width: 35px;
  		height: 5px;
  		background-color: #fff;
  		margin: 6px 20px 15px 20px;
  		transition: 0.4s;
	}

	/* Rotate menu off switch bar4 */
	.bar4 {
  	-webkit-transform: rotate(-45deg) translate(-6px, 6px);
    transform: rotate(-45deg) translate(-6px, 6px) ;
	}
	
	/* Rotate menu off switch bar5 */
	.bar5 {
  	-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
	}