.menu, .button { 
  width: 50px; 
  height: 50px; 
  -moz-user-select: none; 
  -webkit-user-select: none; 
      -ms-user-select: none; 
          user-select: none; 
  z-index: 10000;
} 

.menu { 
  position: fixed; 
  top: 34px; 
  left: 49.5px; 
  -webkit-transition: -webkit-transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92); 
  transition: -webkit-transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92); 
  transition: transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92); 
  transition: transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92), -webkit-transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92); 
  -webkit-transform: scale3d(1, 1, 1); 
          transform: scale3d(1, 1, 1); 
  -webkit-transform-origin: top left; 
          transform-origin: top left; 
  cursor: pointer; 
} 

.button { 
  position: absolute; 
  top: 0; 
  left: 0; 
  border-radius: 50%; 
  mix-blend-mode: multiply; 
  background-position: center center; 
  background-repeat: no-repeat; 
  background-size: 40%; 
  font: 20px/100px;
  font-family: 'Titillium Web', sans-serif; 
  -webkit-transition: -webkit-transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92); 
  transition: -webkit-transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92); 
  transition: transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92); 
  transition: transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92), -webkit-transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92); 
  will-change: transform, opacity; 
} 

.button.closed { 
  -webkit-transform: translate3d(0, 0, 0) !important; 
          transform: translate3d(0, 0, 0) !important; 
}

.main { 
  color: grey; 
  text-align: center; 
  mix-blend-mode: normal; 
  line-height: 70px; 
  -webkit-transition: border-color 0.75s, color 0.75s; 
  transition: border-color 0.75s, color 0.75s; 
  will-change: color, border-color, background; 
} 

.closed .main { 
  color: grey; 
} 

.home { 
  background-color: #3fffff; 
  top: 10%; 
  left: 225%; 
  background-image: url("../img/home.svg"); 
  -webkit-transition-duration: 0.4s; 
          transition-duration: 0.4s;  
  -webkit-animation: opacityUp 0.3s;  
          animation: opacityUp 0.3s;
} 

.closed .home { 
  opacity: 0;
  -webkit-transform: translate3d(-225%, 0%, 0) rotate(-180deg);
          transform: translate3d(-225%, 0%, 0) rotate(-180deg);
  -webkit-animation: opacityDown 0.5s;
          animation: opacityDown 0.5s;
} 

.mySkills { 
  background-color: #38f19f; 
  top: 104%; 
  left: 210%; 
  background-image: url("../img/skills.png"); 
  -webkit-transition-duration: 0.55s; 
          transition-duration: 0.55s;  
  -webkit-animation: opacityUp 0.3s;  
          animation: opacityUp 0.3s;
} 

.closed .mySkills {
  opacity: 0;
  -webkit-transform: translate3d(-210%, -94%, 0) rotate(-180deg);
          transform: translate3d(-210%, -94%, 0) rotate(-180deg);
  -webkit-animation: opacityDown 0.5s;
          animation: opacityDown 0.5s;
} 

.myPortfolio { 
  background-color: #f0526f;
  top: 192%; 
  left: 170%; 
  background-image: url("../img/portfolio.svg"); 
  -webkit-transition-duration: 0.7s; 
          transition-duration: 0.7s; 
  background-size: 50%;  
  -webkit-animation: opacityUp 0.3s;  
          animation: opacityUp 0.3s;
} 

.closed .myPortfolio { 
  opacity: 0;
  -webkit-transform: translate3d(-170%, -182%, 0) rotate(-180deg);
          transform: translate3d(-170%, -182%, 0) rotate(-180deg); 
  -webkit-animation: opacityDown 0.5s; 
          animation: opacityDown 0.5s;
} 

.contactMe { 
  background-color: #f8db49; 
  top: 245%; 
  left: 92%; 
  background-image: url("../img/contactMe.png"); 
  -webkit-transition-duration: 0.s; 
          transition-duration: 0.s; 
  background-size: 45%; 
  -webkit-animation: opacityUp 0.85s; 
          animation: opacityUp 0.85s;
} 

.closed .contactMe {
  opacity: 0;
  -webkit-transform: translate3d(-92%, -235%, 0) rotate(-180deg);
          transform: translate3d(-92%, -235%, 0) rotate(-180deg);
  -webkit-animation: opacityDown 0.5s;
          animation: opacityDown 0.5s;
} 

.interactivePortfolio { 
  background-color: #540e78; 
  top: 262%; 
  left: -4%;
  background-image: url("../img/interactivePortfolio.png"); 
  -webkit-transition-duration: 1s; 
          transition-duration: 1s;  
  background-size: 45%; 
  -webkit-animation: opacityUp 0.3s; 
          animation: opacityUp 0.3s;
} 

.closed .interactivePortfolio { 
  opacity: 0;
  -webkit-transform: translate3d(4%, -252%, 0) rotate(-180deg);
          transform: translate3d(4%, -252%, 0) rotate(-180deg); 
  -webkit-animation: opacityDown 0.5s; 
          animation: opacityDown 0.5s;
} 

.vr { 
  background-color: #9932CC; 
  top: 282.75%; 
  left: 152.75%;
  background-image: url("../img/vr.png"); 
  -webkit-transition-duration: 1s; 
          transition-duration: 1s; 
  background-size: 100%; 
} 

.closed .vr { 
  -webkit-transform: translate3d(-162.26056%, -285.84016%, 0) rotate(-180deg); 
          transform: translate3d(-162.26056%, -285.84016%, 0) rotate(-180deg); 
} 

.ar { 
  background-color: #ffffff; 
  top: 320%; 
  left: 75%; 
  background-image: url("../img/ar.png"); 
  -webkit-transition-duration: 1.125s; 
          transition-duration: 1.125s; 
  background-size: 100%; 
} 

.closed .ar {
  -webkit-transform: translate3d(-81.01056%, -321.59016%, 0) rotate(-180deg);
          transform: translate3d(-81.01056%, -321.59016%, 0) rotate(-180deg); 
} 

@-webkit-keyframes opacityDown {
    from { opacity: 1; }
    to   { opacity: 0; }
} 

@keyframes opacityDown {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@-webkit-keyframes opacityUp {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes opacityUp {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.button span {
  display:none;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; 
  pointer-events: none;
  line-height: 14px;  
  /*background-color: white;*/
}

.button:hover span {
  display:block;
  cursor:none
}

.button:hover {
  cursor:none;
}

.main:hover span {
  cursor:pointer;
}

.main:hover {
  cursor:pointer;
}

.tooltip-span {
  pointer-events: none;
  position: absolute;
  font-size: 16px;
  font-family: 'Titillium Web', sans-serif; 
  color: grey;
  height: 22px;
  width: 68px;
  text-align: center; 
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

/* for 639px or less */
@media screen and (max-width: 639px) {
  .menu { 
    top: 2px; 
    left: 13px;
  }  

  .menu, .button { 
    width: 50px; 
    height: 50px; 
    font-size: 14px;
  }  
}

/* for 479px or less */
@media screen and (max-width: 479px) {
  .menu { 
    top: -2px; 
    left: 13px;
  }  

  .menu, .button { 
    width: 40px; 
    height: 40px; 
    font-size: 12px;
  }  
}