.menu{
	background-color: white;
	position: absolute;
	height: 80px;
	top: 6%;
	left: 50%;
  	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	overflow: hidden;
    transform: translateX(-50%);
  	-webkit-transform: translateX(-50%);
	transition: .25s;
}
.menu_rbtn, .menu_lbtn{
	position: absolute;
	top: 0;
	height: 80px;
	width: 40px;
	background-color: rgb(249, 249, 249);
  	cursor: pointer;
  	-webkit-transition: right 1s cubic-bezier(.8,-0.29,.52,1.2);
  	transition: right 1s cubic-bezier(.8,-0.29,.52,1.2);
}
.menu_rbtn{
	right: 0;
	box-shadow: -8px 0 10px 10px rgb(249, 249, 249);
}
.menu_lbtn{
	left: 0;
	box-shadow: 8px 0 10px 10px rgb(249, 249, 249);
}
.menu_rbtn::before, .menu_lbtn::before{
	content: "";
	position: absolute;
	z-index: 1000;
	height: 4px;
	width: 25px;
	background-color: rgb(255, 74, 89);
	border-radius: 2px;
}
.menu_rbtn:hover::before, .menu_lbtn:hover::before{
	background-color: rgb(255, 117, 128);
}
.menu_rbtn:active::before, .menu_lbtn:active::before{
	background-color: rgb(206, 111, 119);
}
.menu_rbtn::before{
	top: 30px;
	right: 27.5px;
	transition:background-color .3s, right .7s ease-in-out, top .3s ease-in-out, transform .3s;
	-webkit-transition:background-color .3s, right .7s ease-in-out, top .3s ease-in-out, transform .3s;
}
.menu_lbtn::before{
	bottom: 30px;
	left: 27.5px;
	transition:background-color .3s, left .7s ease-in-out, bottom .3s ease-in-out, transform .3s;
	-webkit-transition:background-color .3s, left .7s ease-in-out, bottom .3s ease-in-out, transform .3s;
}
.menu_content{
	background-color: white;
	position: relative;
	width: 80px;
	height: 100%;
  	-webkit-transition: width 1s cubic-bezier(.8,-0.29,.52,1.2);
  	transition: width 1s cubic-bezier(.8,-0.29,.52,1.2);
}
.menu_box{
  	position: relative;
	padding-right: 35px;
	padding-left: 35px;
	left: calc(50% - 170px);
  	width: 270px;
  	height: 100%;
	text-align: center;
  	list-style-type: none;
  	font-size: 0;
  	-webkit-transition: width 1s cubic-bezier(.8,-0.29,.52,1.2);
  	transition: width 1s cubic-bezier(.8,-0.29,.52,1.2);
}
.menu_item{
  	display: inline-block;
  	vertical-align: top;
  	width: 67.5px;
  	text-align: center;
  	color: #6C7784;
  	font-size: 14px;
  	line-height: 80px;
  	font-weight: bold;
  	-webkit-perspective: 1000px;
    perspective: 1000px;
  	-webkit-transition: color 0.3s;
  	transition: color 0.3s;
  	cursor: pointer;
  	font-family: 'Noto Sans SC', sans-serif;
}
.menu_item:hover {
 	color: rgb(255, 74, 89);
}
.menu_item-text {
  	display: block;
  	height: 100%;
  	-webkit-transform: rotateY(-70deg);
    transform: rotateY(-70deg);
  	opacity: 0;
  	-webkit-transition: opacity 0.7s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);
  	transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.7s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);
}
#menu_cb:checked ~ .menu_content .menu_item-text {
  	-webkit-transform: rotateY(0);
    transform: rotateY(0);
  	opacity: 1;
  	-webkit-transition: opacity 0.2s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);
  	transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.2s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);
}
.menu_item:nth-child(1) .menu_item-text ,.menu_item:nth-child(4) .menu_item-text {
  	-webkit-transition-delay: .02s;
    transition-delay: .02s;
}
#menu_cb:checked ~ .menu_content .menu_item:nth-child(1) .menu_item-text, #menu_cb:checked ~ .menu_content .menu_item:nth-child(4) .menu_item-text {
  	-webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
.menu_item:nth-child(2) .menu_item-text ,.menu_item:nth-child(3) .menu_item-text {
  	-webkit-transition-delay: 0.12s;
    transition-delay: 0.12s;
}
#menu_cb:checked ~ .menu_content .menu_item:nth-child(2) .menu_item-text, #menu_cb:checked ~ .menu_content .menu_item:nth-child(3) .menu_item-text {
  	-webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
#menu_cb:checked ~ .menu_content .menu_box{
	width: 270px;
  	-webkit-transition: width 1s cubic-bezier(.8,-0.29,.52,1.2);
  	transition: width 1s cubic-bezier(.8,-0.29,.52,1.2);
}
#menu_cb{
  	z-index: -1000;
  	position: absolute;
  	left: 0;
  	top: 0;
  	opacity: 0;
  	pointer-events: none;
}

#menu_cb:checked ~ .menu_content{
  	-webkit-transition: width 1s cubic-bezier(.8,-0.29,.52,1.2);
  	transition: width 1s cubic-bezier(.8,-0.29,.52,1.2);
	width: 340px;
}
#menu_cb:checked ~ .menu_btn .menu_rbtn, #menu_cb:checked ~ .menu_btn .menu_lbtn{
	width: 35px;
  	-webkit-transition: width 1s cubic-bezier(.8,-0.29,.52,1.2);
  	transition: width 1s cubic-bezier(.8,-0.29,.52,1.2);
}
#menu_cb:checked ~ .menu_btn .menu_rbtn::before{
	right: 5px;
	top: 38px;
	transform: rotate(-90deg);
	transition:background .3s, right .7s cubic-bezier(.73,-0.2,.59,1.01), top .3s ease-in-out, transform .3s;
	-webkit-transition:background .3s, right .7s cubic-bezier(.73,-0.2,.59,1.01), top .3s ease-in-out, transform .3s;
}
#menu_cb:checked ~ .menu_btn .menu_lbtn::before{
	left: 5px;
	bottom: 38px;
	transform: rotate(-90deg);
	transition:background .3s, left .7s cubic-bezier(.73,-0.2,.59,1.01), bottom .3s ease-in-out, transform .3s;
	-webkit-transition:background .3s, left .7s cubic-bezier(.73,-0.2,.59,1.01), bottom .3s ease-in-out, transform .3s;
}
@media screen and (max-width: 360px){
	.menu{
		transform: translateX(-50%) scale(90%);
		  -webkit-transform: translateX(-50%) scale(90%);
	}
	@media screen and (max-width: 327px){
		.menu{
			transform: translateX(-50%) scale(80%);
			  -webkit-transform: translateX(-50%) scale(80%);
		}
		@media screen and (max-width: 288px){
			.menu{
				transform: translateX(-50%) scale(70%);
				  -webkit-transform: translateX(-50%) scale(70%);
			}
			@media screen and (max-width: 252px){
				.menu{
					transform: translateX(-50%) scale(60%);
					  -webkit-transform: translateX(-50%) scale(60%);
				}
				@media screen and (max-width: 216px){
					.menu{
						transform: translateX(-50%) scale(50%);
						  -webkit-transform: translateX(-50%) scale(50%);
					}
					@media screen and (max-width: 180px){
						.menu{
							transform: translateX(-50%) scale(40%);
							  -webkit-transform: translateX(-50%) scale(40%);
						}
					}
				}
			}
		}
	}
}