<div class="choice">
  <input type="radio" id="one" name="checky"/><label for="one">Greyscale<i class="fa fa-circle-o"></i></label><input type="radio" id="two" name="checky" checked="checked"/><label for="two">Colour<i class="fa fa-check-circle"></i></label>
</div>

@import "compass/css3";

@import '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css';
@import 'https://fonts.googleapis.com/css?family=Roboto';

html {
	padding: 0;
	margin: 0;
	height: 100%;
}

body {
  display: flex;
  box-align: center;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 100%;
  width: 100%;
  transition: background .1s linear;
  opacity: 0;
  &.loaded {
    opacity: 1;
  }
}

body {
	text-align: center;
	position: relative;
	background: url('https://images.unsplash.com/photo-1413752567787-baa02dde3c65?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=83f26bd60b06f072224866efda8573a9') center center no-repeat fixed;
	background-size: cover;
	backface-visibility: hidden;
  color: lighten(black, 40%);
	font: {
		family: 'Roboto', sans-serif;
		weight: 400;
		size: 1.3rem;
	}
}

.bw {
	background: url('https://images.unsplash.com/photo-1447600514716-ca6f3974c346?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=9a97188131e593575068b6c133d26d60') center center no-repeat fixed;
	background-size: cover;
}

a,
a:visited {
	text-decoration: none;
	color: lighten(black, 60%);
}

input[type="radio"] {
	visibility: hidden;
	width: 0;
	margin: 0;
	padding: 0;
	&:checked + label {
		background: rgba(white, .7);
		color: rgba(lighten(black, 30%), .8);
		[class^="fa"] {
			opacity: 1
		}
	}
}

label {
	display: inline-block;
	margin: 0;
	@include transition(all, 250ms);
	cursor: pointer;
	display: inline-block;
	user-select: none;
	border: 1px solid white;
	&:hover {
		background: rgba(black, .2);
	}
	padding: 1em 2em;
	text-align: center;
	color: white;
  .fa-check-circle {
    color: yellow;
  }
	[class^="fa"] {
		top: 4px;
		position: relative;
  	float: left;
		margin-right: .5em;
		vertical-align: bottom;
		-webkit-font-smoothing: antialiased;
	}
}

label[for=two] {
	border-left: 0;
}

(function($) { 
     
 // Preload images
 $.imgpreload(['https://images.unsplash.com/photo-1446509381187-29980b1143ae?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=bfdd171290295c858aacfb00e0f4fd12']);
  
    $("body").addClass("loaded");

    $('label').on('click', function() {

      if(!$(this).find('i').hasClass('fa-check-circle'))
        $('body').toggleClass('bw');

      $('label').not(this).find('i').attr('class', 'fa fa-circle-o');
      
      $(this).find('i').attr('class', 'fa fa-check-circle');
      
  });

  
})(jQuery);