/*SECOND VERSION*/
.spinner-master2 * {transition:all 0.3s;-webkit-transition:all 0.3s;box-sizing:border-box;}

.spinner-master2 {position:relative;margin:13px auto;height:30px;width:50px;}

.spinner-master2 input[type=checkbox] {display:none;}
.spinner-master2 label {cursor:pointer;position:absolute;z-index:99; width:20px;top:10px;left:15px;}

.spinner-master2 .spinner2 {position:absolute;height:3px;width:100%;background-color:#fff;}

.spinner-master2 .diagonal.part-1 {position:relative;float:left;}
.spinner-master2 .horizontal {position:relative;float:left;margin-top:4px;}
.spinner-master2 .diagonal.part-2 {position:relative;float:left;margin-top:4px;}

.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .horizontal {opacity: 0;}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-1 {transform:rotate(135deg);-webkit-transform:rotate(135deg);margin-top:6px;}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-2 {transform:rotate(-135deg);-webkit-transform:rotate(-135deg);margin-top:-10px;}