html, body {
	 height: 100%;
	 margin: 0;
	 padding: 0;
	 width: 100%;
}
 .modal {
	 background: #171a3b;
	 height: 1px;
	 overflow: hidden;
	 position: fixed;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 transition: width 0.5s ease 0.5s, height 0.5s ease;
	 width: 0;
	 z-index:10;
}
 
 .content {
	 color: transparent;
	 font-family: 'Consolas', arial, sans-serif;
	 font-size: 2em;
	 position: absolute;
	 top: 70%;
	 text-align: center;
	 transform: translate3d(0, -50%, 0);
	 transition: color 0.5s ease;
	 width: 100%;
	 height: 100%;
	 z-index:10;
}
 #label {
	 cursor: pointer;
	 text-transform: uppercase;
	 transform: translate(-50%, -50%);
	 transition: color 0.5s ease 0.5s;
}

.btn_modal{
	z-index:11;
}
 #input {
	 cursor: pointer;
	 height: 0;
	 opacity: 0;
	 width: 0;
	 z-index: 11;
}

 #input:focus {
	 outline: none;
}
 #input:checked {
	 height: 40px;
	 opacity: 1;
	 position: fixed;
	 right: 22%;
	 top: 18%;
	 z-index: 9999;
	 -webkit-appearance: none;
	 width: 40px;
}
 #input:checked::after, #input:checked:before {
	 border-top: 1px solid #fff;
	 content: '';
	 display: block;
	 position: absolute;
	 top: 50%;
	 transform: rotate(45deg);
	 width: 100%;
}
 #input:checked::after {
	 transform: rotate(-45deg);
}
 #input:checked + #label {
	 color: #fff;
	 transition: color 0.5s ease;
}
 #input:checked ~ .modal {
	 height: 100%;
	 width: 100%;
	 transition: width 0.5s ease, height 0.5s ease 0.5s;
}
 #input:checked ~ .modal .content {
	 color: #fff;
	 transition: color 0.5s ease 0.5s;
}