.hamburger {
  z-index: 888;
  position: fixed;
  top: 45px;
  right: 20px;
  cursor: pointer;
  width: 60px;
}

.hamburger-item1 {
  background-color: #4d4d4f;
  width: 100%;
  height: 6px;
  margin-bottom: 8px;
}
.hamburger-item2 {
  background-color: #a90a2a;
  width: 100%;
  height: 6px;
  margin-bottom: 8px;
}

.hamburger-item3 {
  background-color: #000;
  width: 100%;
  height: 6px;
  margin-bottom: 8px;
}

.sidebar {
  position: fixed;
  top: 0;
z-index: 880;
  right: -100%;
  width: 100%;
  height: 100%;
  padding-top: 80px;
  background-color: #eee;
  transition: right .2s;
}

.sidebar ul {
	padding-left: 0;
}

.hamburger-checkbox:checked ~ .hamburger {
  background-color: #000;
}

#hamburger-checkbox:checked ~ .sidebar {
  right: 0;
}

#hamburger-checkbox {
  display: none;
}

#menu {
	text-decoration: none;
	font-family: "gotham_condensedmedium", sans-serif;
	line-height: 3;
	font-weight: 500;
    font-size: 2rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#menu:hover {
	color: darkred;
}

#text {
	text-decoration: none;
	list-style-type: none;
	text-align: center;
	border-bottom: thin solid #ccc;
	padding: 10px 0;
}

.green {
	color: slategrey;
}

.orange {
	color: firebrick;
}

.red {
	color: black;
}

@media screen and (max-width: 1024px) {
	.hamburger {
		  top: 5px;
}
}

@media screen and (max-width: 768px) {
	#text {
		padding: 10px 0;
}
	
	.hamburger {
  		top: 60px;
}
	
	#menu {
		text-decoration: none;
		font-family: "gotham_condensedmedium", sans-serif;
		line-height: 1.5;
		font-weight: 500;
		font-size: 3rem;
		text-align: center;
		text-transform: uppercase;
}
}

/***************** iphone 6 7 8 ******************/
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) {
	
.hamburger {
  top: 60px;
}
}