<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width">
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Email Title</title>
<style>
.ExternalClass * {
		  line-height: 100%;
} 

table {
		  border-collapse: collapse;
}

.apple-link-white a{
		  color:#fff;
		  text-decoration:none;
}

.apple-link-black a{
		  color:#000;
		  text-decoration:none;
}

  
  
</style>
</head>
<body>


	<!-- 	INPUT FOR BUTTON SELECT SLIDE -->
	<input type="radio" name="next" id="slide0" checked>
<input type="radio" name="next" id="slide1">
	<input type="radio" name="next" id="slide2">
	<input type="radio" name="next" id="slide3">
	<input type="radio" name="next" id="slide4">
<input type="radio" name="next" id="slide5">



<div class="brain">
  
  <div class="background">
    <label for="slide0" class="int manage_zero left"></label>
    <label for="slide1" class="int manage_zero right"></label>
    <label for="slide0" class="int manage_one left"></label>
    <label for="slide2" class="int manage_one right"></label>
    <label for="slide1" class="int manage_two left"></label>
    <label for="slide3" class="int manage_two right"></label>
    <label for="slide2" class="int manage_tre left"></label>
    <label for="slide4" class="int manage_tre right"></label>
    <label for="slide3" class="int manage_for left"></label>
    <label for="slide5" class="int manage_for right"></label>
  </div>
  
  <!-- CONTAINER -->
		<div class="cont">
			<div class="score">
        <div class="zeroP">0</div>
        <div class="oneP">1</div>
        <div class="twoP">2</div>
        <div class="threeP">3</div>
        <div class="fourP">4</div>
			</div>
		</div>
  <div class="winner">
    WINNER!!!
  </div>
  
</div>



</body>
</html>
body{
	background-color: #333;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
input{
	display: none;
}

.brain{
	  text-align: center;
  background:#444;
  width:300px;
  margin:0 auto;
}

.background{
   height:100px;
   width:300px;
   background:#666;
   cursor: url(http://wiki.mabinogiworld.com/images/6/63/Toy_Hammer.png), auto;
}
/*CONTAINER*/
.cont{
	margin: 20px auto;
	display: block;
	width:50px;
	height: 50px;
	border: solid 3px #555;
	overflow: hidden;
  background:#fff;
  -webkit-box-shadow: inset 5px 0px 5px 0px rgba(0, 0, 0, 0.4), inset -5px 0px 5px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:    inset 5px 0px 5px 0px rgba(0, 0, 0, 0.4), inset -5px 0px 5px 0px rgba(0, 0, 0, 0.4);
  box-shadow:         inset 5px 0px 5px 0px rgba(0, 0, 0, 0.4), inset -5px 0px 5px 0px rgba(0, 0, 0, 0.4);
}
.score div{
	width: 50px;
  height:50px;
  font-size:50px;
  font-family:arial;
  line-height:50px;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
	display: inline-block;
	float: left;
	margin: 0;
	padding: 0;
}
.score{
	display: block;
	width: 250px;
	height: 50px;
	-webkit-transition: all 300ms ease-in-out;
   	-moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.winner{
  display:none;
  background:#fff;
  color:red;
  padding:10px;
  font-size:40px;
}

/*Plus minus*/
.right, .left{
	width: 60px;
	height: 60px;
	cursor: pointer;
  background:#ccc;
  border-radius:50%;
  border: solid 5px #555;
}
.left::before{
	content:"-";
  font-size:50px;
  display:block;
}
.right::before{
	content:"+";
  font-size:50px;
  display:block;
}
.right:hover, .left:hover{
	  background-color: #68D9EE;
  cursor: url(http://wiki.mabinogiworld.com/images/6/63/Toy_Hammer.png), auto;
}
.int{
	display: none;
}

/*INPUT MANAGE&PAGINATION CHECKED*/
#slide0:checked ~ .brain .cont .but .select0 > div{display: block;}
#slide0:checked ~ .brain .manage_zero{display: inline-block;}

#slide1:checked ~ .brain .cont .score{ margin-left:-50px;}
#slide1:checked ~ .brain .manage_one{display: inline-block;}
#slide1:checked ~ .brain .cont .but .select1 > div{display: block;}

#slide2:checked ~ .brain .cont .score{ margin-left:-100px;}
#slide2:checked ~ .brain .manage_two{display: inline-block;}
#slide2:checked ~ .brain .cont .but .select2 > div{display: block;}

#slide3:checked ~ .brain .cont .score{ margin-left:-150px;}
#slide3:checked ~ .brain .manage_tre{display: inline-block;}
#slide3:checked ~ .brain .cont .but .select3 > div{display: block;}

#slide4:checked ~ .brain .cont .score{ margin-left:-200px;}
#slide4:checked ~ .brain .manage_for{display: inline-block;}
#slide4:checked ~ .brain .cont .but .select4 > div{display: block;}

#slide5:checked ~ .brain .cont { display:none;}
#slide5:checked ~ .brain .winner{display: block;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.