#mappa { width: 100%; height: 835px; } #menu-filtri { width:600px; height:700px; position:fixed; top:100px; } .open-menu{ right:0px; background-color:#FFFFFFEB; } .closed-menu{ right:-560px; background-color:#FFFFFF00; } .row{ margin-bottom: 5px; } hr { margin-top: 5px; margin-bottom: 5px; } .material-switch > input[type="checkbox"] { display: none; } .material-switch > label { cursor: pointer; height: 0px; position: relative; width: 40px; } .material-switch > label::before { background: rgb(0, 0, 0); box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); border-radius: 8px; content: ''; height: 16px; margin-top: -8px; position:absolute; opacity: 0.3; transition: all 0.4s ease-in-out; width: 40px; } .material-switch > label::after { background: rgb(255, 255, 255); border-radius: 16px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); content: ''; height: 24px; left: -4px; margin-top: -8px; position: absolute; top: -4px; transition: all 0.3s ease-in-out; width: 24px; } .material-switch > input[type="checkbox"]:checked + label::before { background: inherit; opacity: 0.5; } .material-switch > input[type="checkbox"]:checked + label::after { background: inherit; left: 20px; } .material-switch { margin-bottom:10px; } .btn-black{ background-color: #505050; color: #fff; border-color: #353535; border-bottom-color: #353535; } .btn-black:hover{ background-color: #414141; color: #fff; border-color: #353535; border-bottom-color: #353535; } .btn-black:focus{ color: #fff; } a:active, a:hover, a:focus { outline: 0; text-decoration: none; outline: 0 !important; }