.switch { position: relative; display: inline-block; width: 60px; height: 30px; vertical-align: middle; margin: 0 1px 2px 0; }

.switch input { opacity: 0; width: 0; height: 0; }

.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; border: 1px solid #808080; -webkit-transition: .4s; transition: .4s; }

.slider:before { position: absolute; content: ""; height: 30px; width: 30px; left: 8px; bottom: -1px; background-color: #cecece; border: 1px solid #808080; -webkit-transition: .4s; transition: .4s; }

input:checked + .slider { background-color: #fff; }

input:focus + .slider { box-shadow: 0 0 1px #2196F3; }

input:checked + .slider:before { -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); background-color: forestgreen; }

/* Rounded sliders */
.slider.round { border-radius: 34px; }

.slider.round:before { border-radius: 50%; }

.toggle-switch { display: inline-block; vertical-align: top; margin: 0 10px 5px 0; }
.toggle-switch > span { font-size: 84%; }
@media (max-width:992px) {
	.toggle-switch { margin: 0 8px 10px 0; }
}

.toggle-switch-rotated {  margin:10px 10px; display: inline-block; vertical-align: middle; }
.toggle-switch-rotated span { display: block; text-align: center; font-size: 74%; text-transform: uppercase; color: white; padding: 0; letter-spacing:0.06em }
.toggle-switch-rotated .switch { transform: rotate(90deg); margin:18px 0;  }