.switch-button {
	 background: #f5f7fa;
	 border-radius: 30px;
	 overflow: hidden;
	 width: 360px;
	 text-align: center;
	 font-size: 15px;
	 color: #8C9BA5;
	 position: relative;
	 padding-right: 220px;
	 position: relative;
	 margin: auto;
}

.switch-button:before {
	 content: "Prenotazioni con visite";
	 position: absolute;
	 top: 0;
	 bottom: 0;
	 right: 0;
	 width: 220px;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 z-index: 3;
	 pointer-events: none;
	 color: #8C9BA5;
}

.second-selected:before {
	 color: white;
}

.switch-button-checkbox {
	 cursor: pointer;
	 position: absolute;
	 top: 0;
	 left: 0;
	 bottom: 0;
	 width: 100%;
	 height: 100%;
	 opacity: 0;
	 z-index: 2;
}

.switch-button-checkbox:checked + .switch-button-label:before {
	 transform: translateX(130px);
	 width: 300px;
	 transition: transform 300ms linear;
	 transition: width 300ms linear;
}

.switch-button-checkbox + .switch-button-label {
	 position: relative;
	 padding: 15px 0;
	 display: block;
	 user-select: none;
	 pointer-events: none;
}

.switch-button-checkbox + .switch-button-label:before {
	 content: "";
	 background: #57b4f2;
	 height: 100%;
	 width: 100%;
	 position: absolute;
	 left: 0;
	 top: 0;
	 border-radius: 30px;
	 transform: translateX(0);
	 transition: transform 300ms;
}

.switch-button-checkbox + .switch-button-label .switch-button-label-span {
	 position: relative;
	 color: white;
}

.second-selected .switch-button-label-span {
	 color: #8C9BA5 !important;
}

@media only screen and (max-width: 767px) {
    .switch-button {
        width: 325px;
        padding-right: 190px;
    }
    .switch-button:before {
        width: 200px;
    }
}