/* Side Menu */
#sideMenuToggle { display: none; }
#sideMainToggle { display: none; }


#sideMain {
  margin: Auto Auto Auto -50px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #9abfdc;
  cursor: pointer;
  transition: all 0.2s ease-in;
  opacity: 0;
  z-index: 2;
}

#sideMainToggle:checked ~ #sideMain{
  opacity: 1;
}

#sideMenuContents {
  margin: Auto Auto Auto -50px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100px;
  width: 100px;
  z-index: 1;
  transition: all 0.2s ease-in;
  opacity: 0;
  border-radius: 50%;
}

#sideMain:hover {
  background: #82a2bb;	
  transition: all 0.2s ease-in;
}

#sideMain img {
  transform: rotate(180deg) scale(.5,.5);
  transition: all 0.2s ease-in;
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom:0;
  margin: Auto Auto auto 20px;
}

#sideMain:hover img{
  transform: rotate(180deg) scale(.55,.55);
  transition: all 0.2s ease-in;
}

#sideMenuToggle:checked ~ #sideMain{
  width: 200px;
  height: 200px;
  margin: Auto Auto Auto -50px;
}

#sideMenuToggle:checked ~ #sideMain img{
  transform: rotate(0deg) scale(1.2,1.2);
  margin: Auto Auto Auto 70px;
}

#sideMenuToggle:checked ~ #sideMenuContents {  
  height: 500px;
  width: 500px;
  background: rgba(255,255,255,.5);
  margin: Auto Auto Auto -190px;
  opacity: 1;
}

#sideMenuContents li.button {
  margin: auto;
}

#sideMenuToggle:checked ~ #sideMenuContents li.button:nth-of-type(1) {
  bottom: 100%;
}

#sideMenuToggle:checked ~ #sideMenuContents li.button:nth-of-type(2) {
  left: 43%;
  bottom: 85%;
}

#sideMenuToggle:checked ~ #sideMenuContents li.button:nth-of-type(3) {
  left: 80%;
  bottom: 61%;
}

#sideMenuToggle:checked ~ #sideMenuContents li.button:nth-of-type(4) {
  left: 90%;
  top: -20%;
}

#sideMenuToggle:checked ~ #sideMenuContents li.button:nth-of-type(5) {
  left: 90%;
  top: 22%;
}

#sideMenuToggle:checked ~ #sideMenuContents li.button:nth-of-type(6) {
  left: 80%;
  top: 61%;
}
#sideMenuToggle:checked ~ #sideMenuContents li.button:nth-of-type(7) {
  left: 43%;
  top: 85%
}

#sideMenuToggle:checked ~ #sideMenuContents li.button:nth-of-type(8) {
  top: 100%;
}