.switch-toggle a, .switch-light span span {

	display: none; 
  
}

@media only screen {

	.switch-light {
		
		display: block;
		position: relative;
		padding: 0;
		color: rgb(135,135,135); 
		min-height: 1.875em;
		overflow: visible;
		margin: 15px 0;

	}
	
    .switch-light * {
    
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		
     }

    .switch-light label, .switch-light > span {
      
		line-height: 1.875em;
		vertical-align: middle; 
		
	}

    .switch-light label {
    
		display: block;
		position: relative;
		width: 100%; 
		z-index: 3;
		
	}
	
	.switch-light input {
    
		position: absolute;
		opacity: 0;
		z-index: 5; 
      
	}
     
	.switch-light input:checked ~ a {
     
        margin-left: -14px; 
        
	}
     
	.switch-light > span {
    
		position: absolute;
		left: 0;
		width: 100%;
		margin: 0;
		padding-right: 120px;
		text-align: left; 
      
	}
     
	.switch-light > span span {
      
		display: block;
		position: absolute;
		width: 120px;
		left: 100%;
		top: 0;
		margin-left: -120px;
		text-align: center; 
		z-index: 5;
		opacity: 0; 
        
	} 
	
	.switch-light a {
	
		display: block;  
		position: absolute;
		right: 50%;
		top: 0;
		left: 100%;
		width: 1.875em;
		height: 100%;
		margin-left: -135px;
		padding: 0;
		z-index: 4;
		outline: 0;
		
		background-color: rgb(255,255,255);
		border: 1px solid rgb(210,210,210);
		border-radius: 100%;
		
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
		box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.025), 0 1px 4px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.1); 
      
	}
      
	.switch-light > span:before {
    
		content: '';
		display: block;
		width: 120px;
		height: 98%;
		position: absolute;
		left: 100%;
		margin-left: -120px;
		top: 0;
		background-color: rgb(250,250,250);
		border: 1px solid rgb(210,210,210);
		-webkit-transition: all 0.5s ease-out;
		-moz-transition: all 0.5s ease-out;
		transition: all 0.5s ease-out;
		box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0; 
	
	}

	
    .switch-light > span span:first-of-type {
    
        opacity: 1;
        padding-left: 15px; 
        
    }
    
    .switch-light > span span:last-of-type {
    
		padding-right: 15px; 
        
    }
    
    .switch-light input:checked ~ span:before {
    
		border-color: rgb(85,150,215);
		background: rgb(85,150,215);
      
	}
	
    .switch-light input:checked ~ span span:first-of-type {
    
		opacity: 0; 
      
    }
    
    .switch-light input:checked ~ span span:last-of-type {
    
		opacity: 1;
		color: rgb(255,255,255); 
      
    }  
      
	.switch-toggle {
		
		display: table;
		position: relative;
		table-layout: fixed;
		height: 50px;
		margin: 20px 0;
		padding: 0 !important;
		text-transform: uppercase;
		border: solid 1px rgb(210,210,210);
    
    }
    
	.switch-toggle * {
    
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box; 
		
	}
	
    .switch-toggle a {
    
		display: block;
		-webkit-transition: all 0.2s ease-out;
		-moz-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out; 
		
		background-color: rgb(85,150,215);
		border-radius: 1px;
		
		position: absolute;
		top: 0;
		left: 0;
		padding: 0;
		z-index: 1;
		width: 50%;
		height: 100%; 
		
	}
	
    .switch-toggle label, .switch-toggle > span {
    
		vertical-align: middle; 
		
	}
	
    .switch-toggle input {
    
		position: absolute;
		opacity: 0; 
		
	}
	
    .switch-toggle input + label {
    
		display: table-cell;
		position: relative;
		width: 50%;
		padding: 0 0.5em;
		margin: 0;
		z-index: 2;		
		text-align: center; 
		font-size: 90%;
		line-height: 50px; 
		
	}
	
	.switch-toggle input:checked + label {
	
		color: rgb(255,255,255); 
    
    }
    
    
    .switch-toggle > span span {
    	
		margin-left: 7.1875em;
		font-size: 90%;
		line-height: 50px; 
		
		-webkit-transition: all 0.1s;
		-moz-transition: all 0.1s;
		transition: all 0.1s;
		opacity: 0;	
		
	}
	
    .switch-toggle > span span:first-of-type {
    
        opacity: 1; 
        
     }
	
	.switch-toggle input:last-of-type:checked ~ a {
    
		left: 50%; 
      
	}
	
    .switch-toggle label, .switch-toggle a { width: 33.3333333333% !important; }
    .switch-toggle input:checked:nth-of-type(2) ~ a { left: 33.3333333333%; }
    .switch-toggle input:checked:last-of-type ~ a { left: 66.6666666667%; }

}

@media only screen and (-webkit-max-device-pixel-ratio: 2) and (max-device-width: 80em) {
  
	.switch-light, .switch-toggle { -webkit-animation: webkitSiblingBugfix infinite 1s; } 
    
}
@-webkit-keyframes webkitSiblingBugfix { from { -webkit-transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); } }