.basicLeft {
    box-sizing: border-box;
    border: 1px solid #8f94fb;
    box-shadow: inset 0px 0px 0px #8f94fb;
    color: white;
    background-color: #3f4c6b;
    font-weight: 600;
    font-size: 13px;
  
    padding: 4px 10px;
    
    
}

.basicLeft:hover {
    box-shadow: inset -200px 0px 0px #8f94fb;
    color: white;
    cursor: pointer;
    
}

.basicRight {
  box-sizing: border-box;
  border: 1px solid #0072ff;
  box-shadow: inset 0px 0px 0px #0072ff;
  color: #0072ff;
  font-weight: 600;
  border-radius: 3px;
}

.basicRight:hover {
  box-shadow: inset -200px 0px 0px #0072ff;
  color: white;
  cursor: pointer;
}

.basicTop {
  box-sizing: border-box;
  border: 1px solid #274046;
  box-shadow: inset 0px 0px 0px #274046;
  color: #274046;
  font-weight: 600;
  border-radius: 3px;
}

.basicTop:hover {
  box-shadow: inset 0px 40px 0px #274046;
  color: white;
  cursor: pointer;
}

.basicBottom {
  box-sizing: border-box;
  border: 1px solid #8e54e9;
  box-shadow: inset 0px 0px 0px #8e54e9;
  color: #8e54e9;
  font-weight: 600;
  border-radius: 3px;
}

.basicBottom:hover {
  box-shadow: inset 0px -40px 0px #8e54e9;
  color: white;
  cursor: pointer;
}

.basicHor {
  box-sizing: border-box;
  border: 1px solid #2c3e50;
  box-shadow: inset 100px 0px 0px #2c3e50, inset -100px 0px 0px #2c3e50;
  color: white;
  font-weight: 600;
  border-radius: 3px;
}

.basicHor:hover {
  box-shadow: inset 0px 0px 0px #2c3e50, inset 0px 0px 0px #2c3e50;
  color: #2c3e50;
  cursor: pointer;
}

.basicVert {
  box-sizing: border-box;
  border: 1px solid #2c3e50;
  box-shadow: inset 0px 20px 0px #2c3e50, inset 0px -20px 0px #2c3e50;
  color: white;
  font-weight: 600;
  border-radius: 3px;
}

.basicVert:hover {
  box-shadow: inset 0px 0px 0px #2c3e50, inset 0px 0px 0px #2c3e50;
  color: #2c3e50;
  cursor: pointer;
}

.simple {
  box-shadow: inset 0px 2px 3px -1px white;
  overflow: visible;
  border: none;
  position: relative;
  font-weight: 600;
  border: 1px solid gray;
  background: linear-gradient(45deg, #ada996, #f2f2f2, #dbdbdb, #eaeaea);
  background-size: 100% 100%;
}

.simple:before {
  width: 100px;
  height: 40px;
  top: 0;
  left: -2px;
  content: '';
  position: absolute;
  box-shadow: 0px 5px 10px -7px black;
  transform: rotateZ(-4deg)  translateY(-3px);
  z-index: -1;
}

.simple:after {
  width: 100px;
  height: 40px;
  top: 0;
  right: -2px;
  content: '';
  position: absolute;
  box-shadow: 0px 5px 10px -7px black;
  transform: rotateZ(4deg)  translateY(-3px);
  z-index: -1;
}

.simple:hover {
  box-shadow: inset 0px 2px 3px -1px white, inset 0px 0px 50px gray;
  color: white;
}

.gradient {
  border: none;
  border-radius: 3px;
  background: linear-gradient(90deg, #f38c00, #f83600, #00c6ff, #0072ff);
  background-size: 400% 400%;
  color: white;
  font-weight: 600;
}

.gradient:hover {
  background-position: -600px 0px;
}

.moving {
  border-radius: 3px;
  border: none;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #9d50bb, #6e48aa);
  white-space: nowrap;
  color: white;
  font-weight: 600;
}

.moving:hover {
  color: transparent;
}

.moving:after {
  position: absolute;
  content: 'Moving';
  width: 200px;
  height: 40px;
  line-height: 80px;
  left: 0;
  top: 0;
  font-family: 'Open Sans';
  color: transparent;
}

.moving:hover:after {
  line-height: 40px;
  color: white;
}

.moving:before {
  position: absolute;
  content: 'Moving';
  width: 200px;
  height: 40px;
  line-height: 40px;
  left: 0;
  top: -20px;
  font-family: 'Open Sans';
  color: transparent;
}

.moving:hover:before {
  top: 0;
  color: white;
}

.moveUp {
  position: relative;
  background: linear-gradient(90deg, #606c88, #3f4c6b);
  border-radius: 3px;
  border: none;
}

.moveUp:before {
  position: absolute;
  content: 'Move up';
  width: 200px;
  height: 40px;
  line-height: 40px;
  left: 0;
  top: 0;
  font-family: 'Open Sans';
  color: white;
  font-weight: 600;
}

.moveUp:hover:before {
  top: -40px;
  color: transparent;
}

.moveUp:after {
  position: absolute;
  content: 'Move up';
  width: 200px;
  height: 40px;
  line-height: 40px;
  left: 0;
  top: 40px;
  font-family: 'Open Sans';
  color: transparent;
  font-weight: 600;
}

.moveUp:hover:after {
  top: 0;
  color: white;
}

.moveDown {
  position: relative;
  background: linear-gradient(90deg, #606c88, #3f4c6b);
  border-radius: 3px;
  border: none;
}

.moveDown:before {
  position: absolute;
  content: 'Move down';
  width: 200px;
  height: 40px;
  line-height: 40px;
  left: 0;
  top: 0;
  font-family: 'Open Sans';
  color: white;
  font-weight: 600;
}

.moveDown:hover:before {
  top: 40px;
  color: transparent;
}

.moveDown:after {
  position: absolute;
  content: 'Move down';
  width: 200px;
  height: 40px;
  line-height: 40px;
  left: 0;
  top: -40px;
  font-family: 'Open Sans';
  color: transparent;
  font-weight: 600;
}

.moveDown:hover:after {
  top: 0;
  color: white;
}

.push {
  background: #eb3349;
  color: white;
  border: none;
  border-radius: 3px;
  font-weight: 600;
  box-shadow: 0px 5px 0px rgb(170, 0, 0), 0px 13px 5px -2px rgba(0, 0, 0, 0.4);
  margin-bottom: 25px;
  transition-duration: 300ms;
}

.push:hover {
  margin-bottom: 20px;
  margin-top: 25px;
  box-shadow: 0px 0px 0px rgb(170, 0, 0), 0px 2px 7px -2px rgba(0, 0, 0, 0.4);
}

.pushLeft {
  background: #fc4a1a;
  border-radius: 3px;
  border: none;
  position: relative;
}

.pushLeft:after {
  position: absolute;
  color: white;
  font-weight: 600;
  top: 0;
  left: 0;
  width: 200px;
  height: 40px;
  content: 'Push left';
  line-height: 40px;
  background: #f7b733;
  border-radius: 3px;
}

.pushLeft:hover:after {
  left: 40px;
  width: 160px;
}

.pushRight {
  background: #fc4a1a;
  border-radius: 3px;
  border: none;
  position: relative;
}

.pushRight:after {
  position: absolute;
  color: white;
  font-weight: 600;
  top: 0;
  right: 0;
  width: 200px;
  height: 40px;
  content: 'Push right';
  line-height: 40px;
  background: #f7b733;
  border-radius: 3px;
}

.pushRight:hover:after {
  right: 40px;
  width: 160px;
}

.zoom {
  background: linear-gradient(90deg, #ff9966, #ff5e62);
  border: none;
  border-radius: 3px;
  color: white;
  font-weight: 600;
  position: relative;
}

.zoom:hover p {
  transform: scale(20, 20);
  color: transparent;
}

.zoom:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 40px;
  content: 'Zoom';
  line-height: 40px;
  transform: scale(0.1, 0.1);
  color: transparent;
}

.zoom:hover:after {
  color: white;
  transform: scale(1, 1);
}

.ripple {
  background: linear-gradient(90deg, #06beb6, #48b1bf);
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 3px;
  position: relative;
}

.ripple:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 40px;
  line-height: 40px;
  content: 'Ripple';
  font-weight: 600;
  transition-delay: 200ms;
}

.ripple:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 40px;
  line-height: 40px;
  content: 'Ripple';
  font-weight: 600;
}

.ripple:hover:after {
  transform: scale(5, 5);
  color: transparent;
}

.ripple:hover:before {
  transform: scale(5, 5);
  color: transparent;
  transition-delay: 200ms;
}

.glass {
  background: black;
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 3px;
  position: relative;
}

.glass:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 40px;
  content: '';
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.7) 28%, rgba(255, 255, 255, 0.6) 32%, transparent);
  background-size: 100% 500%;
  transition-duration: 300ms;
}

.glass:hover:before {
  background-size: 500% 100%;
}

.bChange {
  border-radius: 3px;
  font-weight: 600;
  width: 198px;
  height: 38px;
  background-color: #f0f0f0;
  border: none;
  position: relative;
  margin: 25px auto;
  overflow: visible;
  transition-delay: 400ms;
}

.bChange:before {
  border-radius: 3px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 200px;
  height: 40px;
  background: black;
  content: '';
  z-index: -1;
  transition-delay: 600ms;
}

.bChange:after {
  border-radius: 3px;
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0px;
  height: 40px;
  background: linear-gradient(90deg, #36d1dc, #5b86e5);
  content: '';
  z-index: -1;
}

.bChange:hover:before {
  width: 0px;
  transition-delay: 0s;
}

.bChange:hover:after {
  width: 200px;
  transition-delay: 600ms;
}

.bChange:hover {
  transition-delay: 400ms;
  color: #5b86e5;
}

.parts {
  display: flex;
  border-radius: 3px;
  border: 1px solid #ee0979;
  position: relative;
}

.parts div:nth-child(odd) {
  background: #ee0979;
  margin-top: -40px;
}

.parts div:nth-child(even) {
  background: #ee0979;
  margin-top: 80px;
}

.parts div:nth-child(1) {
  width: 50px;
  height: 40px;
  transition-delay: 0s;
}

.parts div:nth-child(2) {
  width: 50px;
  height: 40px;
  transition-delay: 200ms;
}

.parts div:nth-child(3) {
  width: 50px;
  height: 40px;
  transition-delay: 300ms;
}

.parts div:nth-child(4) {
  width: 50px;
  height: 40px;
  transition-delay: 100ms;
}

.parts:hover div {
  margin-top: 0px;
}

.parts:before {
  content: 'Parts';
  color: white;
  font-weight: 600;
  top: 0;
  left: -200px;
  line-height: 40px;
  width: 200px;
  height: 40px;
  position: absolute;
}

.parts:hover:before {
  left: 0;
  transition-delay: 600ms;
}

.parts:after {
  content: 'Parts';
  color: #ee0979;
  font-weight: 600;
  top: 0;
  right: 0px;
  line-height: 40px;
  width: 200px;
  height: 40px;
  position: absolute;
}

.parts:hover:after {
  opacity: 0;
  transition-delay: 600ms;
}

.dark {
  box-shadow: inset 0px 0px 20px black;
  border: none;
  border-radius: 3px;
  background: gray;
  font-weight: 600;
  color: white;
}

.dark:hover {
  box-shadow: inset 0px 0px 60px black;
}

.material {
  background: white;
  border: none;
  border-radius: 3px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition-duration: 300ms;
}

.material:hover {
  box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
}


/*------------------------------------------------------------------------------------*/