Menu Dropdown Responsivo

   <input type="checkbox" id="bt-menu">
                <label> MENU <i class="fa fa-bars" aria-hidden="true"></i></label>
                 <nav class="menu">
                    <ul>
                        <li><a href="index.html"><i class="fa fa-home" aria-hidden="true"></i> INICIO</a></li>
                        <li><a href="sobre.html"><i class="fa fa-group" aria-hidden="true"></i> SOBRE</a></li>
                        <li><a href="servicos.html"><i class="fa fa-wrench" aria-hidden="true"></i> SERVIÇOS</a></li>
                        <li><a href="contato.html"><i class="fa fa-commenting" aria-hidden="true"></i> CONTATO</a></li>
                    </ul>	  
                </nav>   

label {
    padding: 6px;
    background-color: #000000;
    color: #ffffff;
    text-align: center;
    width: 100%;
    font-size: 20px;
    cursor: pointer;
    height: 40px;
    display: none;
}

.menu {
    color: #ffffff;

    background: #cc2a2a; /* Old browsers */
    background: -moz-linear-gradient(top, #cc2a2a 0%, #7c1d1f 100%, #7c1d1f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #cc2a2a 0%,#7c1d1f 100%,#7c1d1f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #cc2a2a 0%,#7c1d1f 100%,#7c1d1f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc2a2a', endColorstr='#7c1d1f',GradientType=0 ); /* IE6-9 */
}

.menu a{
    color: #ffffff;
    font-size: 15px;
  
}
.menu ul li{
    width: 100%;
    text-align: center;
    float: none;
    padding: 10px;
    
}


#bt-menu{
    display: none;
}

  label
		display: none
		+breakpoint($celular)
			display: block
      
  .menu
		display: none


	#bt-menu:checked ~ .menu
		+breakpoint($celular)
			display: block
		+breakpoint($tablet)
			display: block