@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,600,700');
#main-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


#btn {
  position: fixed;
  z-index: 5;
  top: 50px;
  right: 50px;
  cursor: pointer;
  -webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}

#btn2 {
  position: fixed;
  z-index: 1;
  top: 52px;
  right: 100px;
  font-size:18px;
  font-weight:700;
  color:#000000;
}

#btn div {
  width: 38px;
  height: 2px;
  margin-bottom: 8px;
  background-color: #000000;
  -webkit-transition: -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
  transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;

}

#btn:hover > div { }

#btn.active {  width: 38px;
  height: 2px;}

#btn.active div { background-color: #ffffff; width: 38px;
  height: 2px;}

#btn.active:hover > div { 
width: 38px;
  height: 2px;
 }

#btn.active #top {
  -webkit-transform: translateY(14px) rotate(-131deg);
  -ms-transform: translateY(14px) rotate(-131deg);
  transform: translateY(14px) rotate(-131deg);
}

#btn.active #middle {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

#btn.active #bottom {
  -webkit-transform: translateY(-6px) rotate(-45deg);
  -ms-transform: translateY(-6px) rotate(-45deg);
  transform: translateY(-6px) rotate(-45deg);
}




#box {
  position: fixed;
  z-index: 4;
  overflow: auto;
  top: 0px;
  right: -600px;
  width: 317px;
  opacity: 0;
  padding: 20px 80px;
  height: 100%;
  background-color: rgba(0,0,0,.90);
 text-decoration:none;
  -webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}


#box.active {
  right: 0px;
  opacity: 1;
}

#items {
    position: relative;
  top: 42%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align:left;
  font-family: 'Poppins', sans-serif;
  text-decoration:none;
  
}

#items .item {
	width:95%;
  position: relative;
  cursor: pointer;
  font-size: 50px;
  -webkit-transition: all 250ms;
  transition: all 250ms;
  padding-top:15px;color: #4e4e4e;
text-decoration:none; font-weight:700;
}

#items .item2 {

  padding-top:15px;
}

#items .item:hover {
  color: #ffffff;text-decoration:none;
}
	
  
   	@media screen and (max-width:1200px)
 {	
 
 
 }
 
 
	@media screen and (max-width: 800px)
 {	
 
 #items .item {
	width:100%;
  font-size: 40px;
}


#items {
  top: 45%;

 }}
 
 @media screen and (max-width: 600px)
 {
#btn {
  right: 10px;
  }
  
  #btn2 {
  right: 60px;
  }
 }
 
	@media screen and (max-width: 400px)
 {
#btn.active { right: 5px; }

#box {
  width: 400px;

}


 }