<div class="position">
<div class="outer-cab"><div class="inner-cab"><div class="split-a"><div class="split-b"></div></div></div></div>
  <div class="outer-frame">
  <div class="frame">  <label class="toggleBtn" for="check">
    
    <div class="circle"></div>
    <div class="grid">
  
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  
   <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>


      </div>
  
</div>
</div>

    </label>


<input id="check" type="checkbox">
<div class="card">
  <div class="blob"></div>
<!--   <div class="shelf"></div> -->
</div>






<!-- <label for="toggleA"></label>
<input type="checkbox" id="toggleA">
<div class="a">1</div>

<label for="toggleB"></label>
<input type="checkbox" id="toggleB">
<div class="b">2</div>

<label for="toggleC"></label>
<input type="checkbox" id="toggleC">
<div class="c">3</div> -->

<!-- <div class="prize"></div> -->
  
  </div>











<!-- sm btns -->
<a href="https://twitter.com/cmlohr"><button class="twitter-btn"><i class="fab fa-twitter"></i></button></a>

<a href="https://www.linkedin.com/in/cmlohr/"><button class="in-btn"><i class="fab fa-linkedin-in"></i></button></a>

@import "bourbon";
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #c9d1d1;
}

.frame {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 23px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  margin: auto;
  left: 0;
  right: 0;
  top: 0.65em;
  bottom: 0;
  @include transform-style(preserve-3d);
  background-color: none;
  z-index: 5;
  overflow: hidden;
}
.outer-frame {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 23px;
  background: linear-gradient(145deg, #f0f0f0, #cacaca);
  box-shadow: 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
  margin: auto;
  left: 0em;
  right: 0;
  top: 45em;
  bottom: 0;
}

.circle {
  border-radius: 50%;
  border: 0.3em dashed #5cd6ff;
  height: 60px;
  width: 60px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99;
  @include animation(spin 3s linear infinite);
}
@include keyframes(spin) {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.grid {
  border-radius: 25%;
  padding: 10px;
  width: 80px;
  height: 80px;
  background: #37505c;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  position: absolute;
  overflow: hidden;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.box {
  position: relative;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(145deg, #3b5662, #324853);
  box-shadow: 20px 20px 60px #273840, -20px -20px 60px #486878;

  overflow: hidden;
}
.outer-frame:hover .grid {
  background-color: #2e434d;
}
.outer-frame:hover .box {
  border-radius: 50%;
  background: linear-gradient(145deg, #68bce6, #7be0ff);
  box-shadow: 20px 20px 60px #5192b3, -20px -20px 60px #96ffff;
}

.outer-frame:hover .circle {
  opacity: 0;
}
.outer-cab {
  width: 500px;
  height: 500px;
  position: absolute;
  margin: auto;
  left: 0em;
  right: 0;
  top: 0em;
  bottom: 0;
  overflow: hidden;
  border-radius: 50px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  @include transform-style(preserve-3d);
  background: #e0e0e0;
  box-shadow: 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
}
.inner-cab {
  width: 470px;
  height: 470px;
  position: absolute;
  margin: auto;
  left: 0em;
  right: 0;
  top: 0em;
  bottom: 0;
  overflow: hidden;
  border-radius: 50px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow: inset 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
  @include transform-style(preserve-3d);
}
.split-a {
  width: 600px;
  height: 10px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow: 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
  @include transform-style(preserve-3d);
  position: absolute;
  left: -0.05em;
  right: 0;
  top: 14em;
  bottom: 0;
  z-index: 50;
}
.split-b {
  width: 600px;
  height: 10px;
  background: #fff;
  box-shadow: 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
  @include transform-style(preserve-3d);
  position: absolute;
  left: -0.05em;
  right: 0;
  top: 0.7em;
  bottom: 0;
  z-index: 50;
}
.shelf {
  width: 500px;
  height: 20px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow: 20px 20px 60px #9d9d9d, -20px -20px 60px #ffffff;
  position: relative;
  left: 0em;
  right: 0;
  top: 25em;
  bottom: 0;
}
.card {
  -webkit-transition: height 0.7s ease;
  height: 0px;
  width: 0px;
  z-index: -99999;
  background: #191919;
  position: absolute;
  margin: auto;
  left: 0em;
  right: 0;
  top: 0em;
  bottom: 0;
  overflow: hidden;
  border-radius: 50px;
  border: 1em solid #eeeeee;
  background: #c9d1d1;
  @include transform-style(preserve-3d);
  box-shadow: inset 22px 22px 51px #6d7171, inset -22px -22px 51px #ffffff;
}
input {
  display: none;
}

input:checked + .card {
  @include transform-style(preserve-3d);
  width: 500px;
  height: 500px;
  z-index: 6;
}
input:checked + .box {
  border-radius: 50px;
  background: linear-gradient(145deg, #30e227, #29be20);
  box-shadow: 20px 20px 60px #26b31f, -20px -20px 60px #34f329;
}
.blob {
  width: 200px;
  height: 200px;
  border-radius: 100% 90% 72% 100% / 94% 100% 79% 93%;
  background: linear-gradient(145deg, #7fff80, #6be66c);
  box-shadow: inset 20px 20px 60px #53b354, inset -20px -20px 60px #9bff9c,
    20px 20px 60px #53b354, -20px -20px 60px #9bff9c;
  position: absolute;
  margin: auto;
  left: 0em;
  right: 0;
  top: 0em;
  bottom: 0;
  z-index: 99;
  animation: sway 10s ease-in-out infinite both alternate;
}
@keyframes sway {
  0%,
  100% {
    border-radius: 100% 90% 72% 100% / 94% 100% 79% 93%;
    top: 150px;
  }
  14% {
    border-radius: 100% 74% 82% 100% / 98% 100% 82% 91%;
    left: 30px;
  }
  28% {
    border-radius: 94% 96% 76% 82% / 98% 100% 81% 42%;
    bottom: 60px;
  }
  42% {
    border-radius: 94% 96% 76% 82% / 98% 100% 38% 100%;
    left: -40px;
  }
  56% {
    border-radius: 37% 96% 100% 86% / 98% 90% 60% 100%;
    top: -150px;
  }
  70% {
    border-radius: 37% 96% 44% 86% / 73% 100% 60% 100%;
    right: 100px;
  }
  84% {
    border-radius: 81% 96% 87% 86% / 73% 100% 82% 100%;
    right: -60px;
  }
}
.blob:hover {
background: linear-gradient(145deg, #7bd5ff, #68b3e6);
box-shadow:  20px 20px 60px #62a9d9,
             -20px -20px 60px #84e5ff, inset 20px 20px 60px #62a9d9,
             inset -20px -20px 60px #84e5ff;
}

// .a {
//   height: 20px; width: 20px;
//   background-color: red;
//   margin: auto;
//   position: absolute;
//   left: 0; right: 0; top: 0; bottom: 0;
// }
// #toggleA:checked ~ .a {
// background-color: blue;
// }
// .b {
//   height: 20px; width: 20px;
//   background-color: red;
//   margin: auto;
//   position: absolute;
//   left: 4em; right: 0; top: 0; bottom: 0;
// }
// #toggleB:checked ~ .b {
// background-color: blue;
// }
// .c {
//   height: 20px; width: 20px;
//   background-color: red;
//   margin: auto;
//   position: absolute;
//   left: 8em; right: 0; top: 0; bottom: 0;
// }
// #toggleC:checked ~ .c {
// background-color: blue;
// }

#toggleC:checked ~ .prize {
  background-color: yellow;
  border-radius: 50%;
}
.prize {
  height: 50px;
  width: 50px;
  background-color: green;
  margin: auto;
  position: absolute;
  left: 0;
  right: 50em;
  top: 0;
  bottom: 0;
}
input {
  /*   display: none; */
}
.position {
  margin: auto;
  position: absolute;
  left: 0;
  top: -9em;
  right: 0;
  bottom: 0;
}












/*  sm btn styles  */
.twitter-btn {
  position: fixed; margin: auto;
  bottom: 0;
  background-color: #1da1f2;
  border: 0.15em solid #1da1f2;
   border-left: none;
  border-bottom: none;
  border-radius: 0% 100% 0% 0% / 0% 100% 0% 93% ;
    height: 50px;
  width: 50px;
  cursor: pointer;
}
.in-btn {
  position: fixed; margin: auto;
  bottom: 0; right: 0;
  border: 0.15em solid #0072b1;
  border-right: none;
  border-bottom: none;
  border-radius: 100% 0% 0% 0% / 100% 0% 0% 0% ;
  background-color: #0072b1;
    height: 50px;
  width: 50px;
  cursor: pointer;
}
.fa-twitter {
  position: absolute;
  left: 0em; right: .4em; top: .5em; bottom: 0;
  color: #fff;
  font-size: 1.8em;
}
.fa-linkedin-in {
   position: absolute;
  left: .4em; right: 0em; top: .55em; bottom: 0;
  color: #fff;
  font-size: 1.8em;
}
.in-btn:hover {
 background-color: #000;
}
.twitter-btn:hover {
  background-color: #000;
}