@import url('https://fonts.googleapis.com/css?family=Dax:400,900');
 

 .middle {
	 width: 100%;
	 text-align: center;
	/* Made by */
}

 .middle input[type="radio"] {
	 display: none;
}
 .middle input[type="radio"]:checked + .box {
	 background-color: #333333;
}
 .middle input[type="radio"]:checked + .box span {
	 color: white;
	 transform: translateY(10px);
}
 .middle input[type="radio"]:checked + .box span:before {
	 transform: translateY(0px);
	 opacity: 1;
}
 .middle .box {
	 width: 100px;
	 height: 50px;
	 background-color: #F09624;
	 transition: all 250ms ease;
	 will-change: transition;
	 display: inline-block;
	 text-align: center;
	 cursor: pointer;
	 position: relative;
	 font-family: 'Dax', sans-serif;
	 font-weight: 900;
}
 .middle .box:active {
	 transform: translateY(10px);
}
 .middle .box span {
	 position: absolute;
	 transform: translate(0, 10px);
	 left: 0;
	 right: 0;
	 transition: all 300ms ease;
	 font-size: 1.5em;
	 user-select: none;
	 color: #333333;
}

 .middle p {
	 color: #fff;
	 font-family: 'Dax', sans-serif;
	 font-weight: 400;
}
 .middle p a {
	 text-decoration: underline;
	 font-weight: bold;
	 color: #fff;
}