@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #333;
}

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 10px;
  box-shadow: 4px 8px 16px 0 rgba(243, 62, 62, 0.267);
	overflow: hidden;
  background: #333;
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.menu-button {
	width: 200px;
	height: 200px;
	background: #333;
	box-shadow: 0px 0px 10px #dd1d1d;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	position: relative;
	transition: background-color 0.3s ease;
}

.menu-button .bar1,
.menu-button .bar2,
.menu-button .bar3 {
	width: 90px;
	height: 10px;
	background-color: #dd1d1d;
	position: absolute;
	transition: 0.3s;
	margin: 40px 0;
	border-radius: 3px;
}

.menu-button .bar1 {
    top: 35px;
}

.menu-button .bar2 {
    top: 56px;
}

.menu-button .bar3 {
    top: 76px;
}

.change .bar1 {
    top: 40px;
    transform: rotate(-45deg) translate(-7px, 7px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    top: 60px;
    transform: rotate(45deg) translate(-7px, -7px);
}

/* Hover effect */
.menu-button:hover {
    background-color: #dd1d1d;
		box-shadow: 0px 3px 5px #fff;
}

.menu-button:hover .bar1 {
    background-color: #fff;
}

.menu-button:hover .bar2 {
    background-color: #fff;
}

.menu-button:hover .bar3 {
    background-color: #fff;
}