/*
@media screen and (max-width: 700px) {
   body {
      padding: 170px 0 0 0;
      width: 100%
   }
}
*/

a {
   color: inherit;
}

.menu-item,
.menu-open-button {
    border-radius: 100%;
    width: 10vh;
    height: 10vh;
    position: absolute;
    text-align: center;
    line-height: 80px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: opacity 180ms, z-index 0.3s, -webkit-transform ease-out 200ms;
    transition: opacity 180ms, z-index 0.3s, -webkit-transform ease-out 200ms;
    transition: opacity 180ms, z-index 0.3s, transform ease-out 200ms;
    transition: opacity 180ms, z-index 0.3s, transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.menu-item.metal{
    background: #2E3192;
    color:white !important;
    font-size: 4vh;
    width: 8vh;
    height: 8vh;
    line-height: 8vh;
}

.menu-item.metal>span{
    cursor: default;
}

.menu-item:hover {
    background: rgba(238,238,238, 0.5);
}
 
.menu-item.metal:hover{
    background:#0071BC;
}

.menu-open {
   display: none;
}

.lines {
   width: 25px;
   height: 3px;
   background: #596778;
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -12.5px;
   margin-top: -1.5px;
   -webkit-transition: -webkit-transform 200ms;
   transition: -webkit-transform 200ms;
   transition: transform 200ms;
   transition: transform 200ms, -webkit-transform 200ms;
}

/*
.line-1 {
   -webkit-transform: translate3d(0, -8px, 0);
   transform: translate3d(0, -8px, 0);
}

.line-2 {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

.line-3 {
   -webkit-transform: translate3d(0, 8px, 0);
   transform: translate3d(0, 8px, 0);
}

.menu-open:checked + .menu-open-button .line-1 {
   -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
   transform: translate3d(0, 0, 0) rotate(45deg);
}

.menu-open:checked + .menu-open-button .line-2 {
   -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
   transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.menu-open:checked + .menu-open-button .line-3 {
   -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
   transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
   margin: auto;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 80px;
   height: 80px;
   text-align: center;
   box-sizing: border-box;
   font-size: 26px;
}
*/

/* CHILDS */

.menu-item {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
    opacity:0;
    z-index:-10;
 }

/*
.menu-item:nth-child(3) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(4) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(5) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(6) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(7) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(8) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(9) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}
*/

.menu-open-button {
   z-index: 2;
   -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   -webkit-transition-duration: 400ms;
   transition-duration: 400ms;
   -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
   transform: scale(1.1, 1.1) translate3d(0, 0, 0);
   cursor: pointer;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}

.menu-open-button:hover {
   -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
   transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
   -webkit-transition-timing-function: linear;
   transition-timing-function: linear;
   -webkit-transition-duration: 200ms;
   transition-duration: 200ms;
   -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
   transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
   -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
   transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
   opacity: 1;
   z-index: 50;
}

.menu-item>label>img{
    height: 10vh;
}

/*CHILDS WHEN CHECKED*/

/*
#menu-open-build:checked ~ .menu-item {
    background-color:red;
}
*/

/* TRAIN */

.div-train>.menu-item{
    right: 36vh;
    top: 14vh;
}

#menu-open-train:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(0, -11.5vh, 0);
    transform: translate3d(0, -11.5vh, 0);
}

/* TREES */

.div-trees>.menu-item{
    right: 18vh;
    top: 4vh;
}

#menu-open-trees:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(0, -11.5vh, 0);
    transform: translate3d(0, -11.5vh, 0);
}

/* POWER LINE */

.div-power-line>.menu-item{
    right: 6vh;
    top: 1vh;
}

#menu-open-power-line:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(0, -11.5vh, 0);
    transform: translate3d(0, -11.5vh, 0);
}

/* LAMPPOST */

.div-lamppost>.menu-item{
    right: 10vh;
    top: 10vh;
}

#menu-open-lamppost:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(0, -11.5vh, 0);
    transform: translate3d(0, -11.5vh, 0);
}

/* PEOPLE */

.div-people>.menu-item{
    right: 0vh;
    top: 0vh;
}

#menu-open-people:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(0, -11.5vh, 0);
    transform: translate3d(0, -11.5vh, 0);
}

/* POOL */

.div-pool>.menu-item{
    right: 6vh;
    top: 3vh;
}

#menu-open-pool:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(0, -11.5vh, 0);
    transform: translate3d(0, -11.5vh, 0);
}

#menu-open-pool:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(0, 11.5vh, 0);
    transform: translate3d(0, 11.5vh, 0);
}

/* BRIDGE */

.div-bridge>.menu-item{
    right: 25vh;
    top: 13vh;
}

#menu-open-bridge:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(0, -11.5vh, 0);
    transform: translate3d(0, -11.5vh, 0);
}

#menu-open-bridge:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(0, 11.5vh, 0);
    transform: translate3d(0, 11.5vh, 0);
}

/* WINDMILL */

.div-windmill>.menu-item{
    right: 6vh;
    top: 5vh;
}

#menu-open-windmill:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(0, -11.5vh, 0);
    transform: translate3d(0, -11.5vh, 0);
}

#menu-open-windmill:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(-9.96vh, -5.73vh, 0);
    transform: translate3d(-9.96vh, -5.73vh, 0);
}

#menu-open-windmill:checked ~ .menu-item:nth-child(5) {
    transition-duration: 380ms;
    -webkit-transition-duration: 380ms;
    -webkit-transform: translate3d(-9.96vh, 5.73vh, 0);
    transform: translate3d(-9.96vh, 5.73vh, 0);
}

#menu-open-windmill:checked ~ .menu-item:nth-child(6) {
    transition-duration: 480ms;
    -webkit-transition-duration: 480ms;
    -webkit-transform: translate3d(0, 11.5vh, 0);
    transform: translate3d(0, 11.5vh, 0);
}

/* AIRPLANE */

.div-airplane>.menu-item{
    right: 6vh;
    top: 4vh;
}

#menu-open-airplane:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(13.43vh, 7.42vh, 0);
    transform: translate3d(13.43vh, 7.42vh, 0);
}

#menu-open-airplane:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(0, 15.5vh, 0);
    transform: translate3d(0, 15.5vh, 0);
}

#menu-open-airplane:checked ~ .menu-item:nth-child(5) {
    transition-duration: 380ms;
    -webkit-transition-duration: 380ms;
    -webkit-transform: translate3d(-13.43vh, 7.42vh, 0);
    transform: translate3d(-13.43vh, 7.42vh, 0);
}

/* CABIN */

.div-cabin>.menu-item{
    right: 4vh;
    top: 3vh;
}

#menu-open-cabin:checked ~ .menu-item:nth-child(5) {
    transition-duration: 380ms;
    -webkit-transition-duration: 380ms;
    -webkit-transform: translate3d(0, -11.5vh, 0);
    transform: translate3d(0, -11.5vh, 0);
}

#menu-open-cabin:checked ~ .menu-item:nth-child(6) {
    transition-duration: 480ms;
    -webkit-transition-duration: 480ms;
    -webkit-transform: translate3d(9.96vh, -5.73vh, 0);
    transform: translate3d(9.96vh, -5.73vh, 0);
}

#menu-open-cabin:checked ~ .menu-item:nth-child(7) {
    transition-duration: 580ms;
    -webkit-transition-duration: 580ms;
    -webkit-transform: translate3d(9.96vh, 5.73vh, 0);
    transform: translate3d(9.96vh, 5.73vh, 0);
}

#menu-open-cabin:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(-9.96vh, 5.73vh, 0);
    transform: translate3d(-9.96vh, 5.73vh, 0);
}

#menu-open-cabin:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(-9.96vh, -5.73vh, 0);
    transform: translate3d(-9.96vh, -5.73vh, 0);
}

/* CAR */

.div-car>.menu-item{
    right: 0vh;
    top: 0vh;
}

#menu-open-car:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(-11.5vh, 0, 0);
    transform: translate3d(-11.5vh, 0, 0);
}

#menu-open-car:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(0, -11.5vh, 0);
    transform: translate3d(0, -11.5vh, 0);
}

#menu-open-car:checked ~ .menu-item:nth-child(5) {
    transition-duration: 380ms;
    -webkit-transition-duration: 380ms;
    -webkit-transform: translate3d(11.5vh, 0, 0);
    transform: translate3d(11.5vh, 0, 0);
}

/* BUILD */

.div-build>.menu-item{
    right: 11vh;
    top: 5.5vh;
}

#menu-open-build:checked ~ .menu-item:nth-child(3) {
   transition-duration: 180ms;
   -webkit-transition-duration: 180ms;
   -webkit-transform: translate3d(0, -15.5vh, 0);
   transform: translate3d(0, -15.5vh, 0);
}

#menu-open-build:checked ~ .menu-item:nth-child(4) {
   transition-duration: 280ms;
   -webkit-transition-duration: 280ms;
   -webkit-transform: translate3d(10.96vh, -10.96vh, 0);
   transform: translate3d(10.96vh, -10.96vh, 0);
}

#menu-open-build:checked ~ .menu-item:nth-child(5) {
   transition-duration: 380ms;
   -webkit-transition-duration: 380ms;
   -webkit-transform: translate3d(15.5vh, 0, 0);
   transform: translate3d(15.5vh, 0, 0);
}

#menu-open-build:checked ~ .menu-item:nth-child(6) {
   transition-duration: 480ms;
   -webkit-transition-duration: 480ms;
   -webkit-transform: translate3d(10.96vh, 10.96vh, 0);
   transform: translate3d(10.96vh, 10.96vh, 0);
}

#menu-open-build:checked ~ .menu-item:nth-child(7) {
   transition-duration: 580ms;
   -webkit-transition-duration: 580ms;
   -webkit-transform: translate3d(0, 15.5vh, 0);
   transform: translate3d(0, 15.5vh, 0);
}

#menu-open-build:checked ~ .menu-item:nth-child(8) {
   transition-duration: 680ms;
   -webkit-transition-duration: 680ms;
   -webkit-transform: translate3d(-10.96vh, 10.96vh, 0);
   transform: translate3d(-10.96vh, 10.96vh, 0);
}

#menu-open-build:checked ~ .menu-item:nth-child(9) {
   transition-duration: 780ms;
   -webkit-transition-duration: 780ms;
   -webkit-transform: translate3d(-15.5vh, 0, 0);
   transform: translate3d(-15.5vh, 0, 0);
}

#menu-open-build:checked ~ .menu-item:nth-child(10) {
   transition-duration: 880ms;
   -webkit-transition-duration: 880ms;
   -webkit-transform: translate3d(-10.96vh, -10.96vh, 0);
   transform: translate3d(-10.96vh, -10.96vh, 0);
}

/* CABLES */

#cables>.menu-item{
    right: 1vh;
    top: 1vh;
}

#menu-open-cables:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(-6.6vh, 6.6vh, 0);
    transform: translate3d(-6.6vh, 6.6vh, 0);
}

#menu-open-cables:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(6.6vh, 6.6vh, 0);
    transform: translate3d(6.6vh, 6.6vh, 0);
}

/* AUDIO SYSTEM */

#audio-system>.menu-item{
    right: 1vh;
    top: 1vh;
}

#menu-open-audio-system:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(9.96vh, -5.73vh, 0);
    transform: translate3d(9.96vh, -5.73vh, 0);
}

#menu-open-audio-system:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(9.96vh, 5.73vh, 0);
    transform: translate3d(9.96vh, 5.73vh, 0);
}

/* JEWELLERY */

#jewellery>.menu-item{
    right: 1vh;
    top: 1vh;
}

#menu-open-jewellery:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(-9.96vh, -5.73vh, 0);
    transform: translate3d(-9.96vh, -5.73vh, 0);
}

#menu-open-jewellery:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(-9.96vh, 5.73vh, 0);
    transform: translate3d(-9.96vh, 5.73vh, 0);
}

/* TELEVISION */

#television>.menu-item{
    right: 1vh;
    top: 1vh;
}

#menu-open-television:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(10.5vh, 0, 0);
    transform: translate3d(10.5vh, 0, 0);
}

#menu-open-television:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(0, 10.5vh, 0);
    transform: translate3d(0, 10.5vh, 0);
}

/* TEXTILES */

#textiles>.menu-item{
    right: 1vh;
    top: 1vh;
}

#menu-open-textiles ~ .menu-item:nth-child(3) {
    width:20vh;
}

#menu-open-textiles:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(-10.5vh, 0, 0);
    transform: translate3d(-10.5vh, 0, 0);
}

#menu-open-textiles:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(0, 10.5vh, 0);
    transform: translate3d(0, 10.5vh, 0);
}

/* TABLET */

#tablet>.menu-item{
    right: 1vh;
    top: 1vh;
}

#menu-open-tablet:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(0, -11.5vh, 0);
    transform: translate3d(0, -11.5vh, 0);
}

#menu-open-tablet:checked ~ .menu-item:nth-child(5) {
    transition-duration: 380ms;
    -webkit-transition-duration: 380ms;
    -webkit-transform: translate3d(9.96vh, -5.73vh, 0);
    transform: translate3d(9.96vh, -5.73vh, 0);
}

#menu-open-tablet:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(-9.96vh, -5.73vh, 0);
    transform: translate3d(-9.96vh, -5.73vh, 0);
}

/* LAPTOP */

#laptop>.menu-item{
    right: 1vh;
    top: 1vh;
}

#menu-open-laptop:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(-5.93vh, -14.32vh, 0);
    transform: translate3d(-5.93vh, -14.32vh, 0);
}

#menu-open-laptop:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(5.93vh, -14.32vh, 0);
    transform: translate3d(5.93vh, -14.32vh, 0);
}

#menu-open-laptop:checked ~ .menu-item:nth-child(5) {
    transition-duration: 380ms;
    -webkit-transition-duration: 380ms;
    -webkit-transform: translate3d(14.32vh, -5.93vh, 0);
    transform: translate3d(14.32vh, -5.93vh, 0);
}

#menu-open-laptop:checked ~ .menu-item:nth-child(6) {
    transition-duration: 480ms;
    -webkit-transition-duration: 480ms;
    -webkit-transform: translate3d(14.32vh, 5.93vh, 0);
    transform: translate3d(14.32vh, 5.93vh, 0);
}

/* REFRIGERATOR */

#refrigerator>.menu-item{
    right: 1vh;
    top: 1vh;
}

#menu-open-refrigerator:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(-5.93vh, -14.32vh, 0);
    transform: translate3d(-5.93vh, -14.32vh, 0);
}

#menu-open-refrigerator:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(5.93vh, -14.32vh, 0);
    transform: translate3d(5.93vh, -14.32vh, 0);
}

#menu-open-refrigerator:checked ~ .menu-item:nth-child(5) {
    transition-duration: 380ms;
    -webkit-transition-duration: 380ms;
    -webkit-transform: translate3d(-14.32vh, -5.93vh, 0);
    transform: translate3d(-14.32vh, -5.93vh, 0);
}

#menu-open-refrigerator:checked ~ .menu-item:nth-child(6) {
    transition-duration: 480ms;
    -webkit-transition-duration: 480ms;
    -webkit-transform: translate3d(-14.32vh, 5.93vh, 0);
    transform: translate3d(-14.32vh, 5.93vh, 0);
}

/* BATTERY */

#battery>.menu-item.metal{
    right:1vh;
    top:1vh;
}

#menu-open-battery ~ .menu-item:nth-child(4) {
    width:20vh;
}

#menu-open-battery:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(0, -11.5vh, 0);
    transform: translate3d(0, -11.5vh, 0);
}

#menu-open-battery:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(-11.5vh, 0, 0);
    transform: translate3d(-11.5vh, 0, 0);
}

/* GPS */

#gps>.menu-item.metal{
    right:0vh;
    top:0vh;
}

#menu-open-gps:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(11.5vh, 0, 0);
    transform: translate3d(11.5vh, 0, 0);
}

/* ELECTRIC CAR */

#electric-car>.menu-item.metal{
    right:0vh;
    top:0vh;
}

#menu-open-electric-car:checked ~ .menu-item:nth-child(3) {
    transition-duration: 780ms;
    -webkit-transition-duration: 780ms;
    -webkit-transform: translate3d(-16.55vh, 0, 0);
    transform: translate3d(-16.55vh, 0, 0);
}

#menu-open-electric-car:checked ~ .menu-item:nth-child(4) {
    transition-duration: 880ms;
    -webkit-transition-duration: 880ms;
    -webkit-transform: translate3d(-14.33vh, -8.27vh, 0);
    transform: translate3d(-14.33vh, -8.27vh, 0);
}

#menu-open-electric-car:checked ~ .menu-item:nth-child(5) {
    transition-duration: 980ms;
    -webkit-transition-duration: 980ms;
    -webkit-transform: translate3d(-8.27vh, -14.33vh, 0);
    transform: translate3d(-8.27vh, -14.33vh, 0);
}

#menu-open-electric-car:checked ~ .menu-item:nth-child(6) {
    transition-duration: 1080ms;
    -webkit-transition-duration: 1080ms;
    -webkit-transform: translate3d(0, -16.55vh, 0);
    transform: translate3d(0, -16.55vh, 0);
}

#menu-open-electric-car:checked ~ .menu-item:nth-child(7) {
    transition-duration: 1180ms;
    -webkit-transition-duration: 1180ms;
    -webkit-transform: translate3d(8.27vh, -14.33vh, 0);
    transform: translate3d(8.27vh, -14.33vh, 0);
}

#menu-open-electric-car:checked ~ .menu-item:nth-child(8) {
    transition-duration: 1280ms;
    -webkit-transition-duration: 1280ms;
    -webkit-transform: translate3d(14.33vh, -8.27vh, 0);
    transform: translate3d(14.33vh, -8.27vh, 0);
}

#menu-open-electric-car:checked ~ .menu-item:nth-child(9) {
    transition-duration: 1380ms;
    -webkit-transition-duration: 1380ms;
    -webkit-transform: translate3d(16.55vh, 0, 0);
    transform: translate3d(16.55vh, 0, 0);
}

#menu-open-electric-car:checked ~ .menu-item:nth-child(10) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(-22.5vh, -6vh, 0);
    transform: translate3d(-22.5vh, -6vh, 0);
}

#menu-open-electric-car:checked ~ .menu-item:nth-child(11) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(-16.5vh, -16.5vh, 0);
    transform: translate3d(-16.5vh, -16.5vh, 0);
}

#menu-open-electric-car:checked ~ .menu-item:nth-child(12) {
    transition-duration: 380ms;
    -webkit-transition-duration: 380ms;
    -webkit-transform: translate3d(-6vh, -22.5vh, 0);
    transform: translate3d(-6vh, -22.5vh, 0);
}

#menu-open-electric-car:checked ~ .menu-item:nth-child(13) {
    transition-duration: 480ms;
    -webkit-transition-duration: 480ms;
    -webkit-transform: translate3d(6vh, -22.5vh, 0);
    transform: translate3d(6vh, -22.5vh, 0);
}

#menu-open-electric-car:checked ~ .menu-item:nth-child(14) {
    transition-duration: 580ms;
    -webkit-transition-duration: 580ms;
    -webkit-transform: translate3d(16.5vh, -16.5vh, 0);
    transform: translate3d(16.5vh, -16.5vh, 0);
}

#menu-open-electric-car:checked ~ .menu-item:nth-child(15) {
    transition-duration: 680ms;
    -webkit-transition-duration: 680ms;
    -webkit-transform: translate3d(22.5vh, -6vh, 0);
    transform: translate3d(22.5vh, -6vh, 0);
}

/* SMARTPHONE */

#smartphone>.menu-item.metal{
    right:0.7vh;
    top:0.7vh;
}

#menu-open-smartphone:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(0, -21.64vh, 0);
    transform: translate3d(0, -21.64vh, 0);
}

#menu-open-smartphone:checked ~ .menu-item:nth-child(4) {
    transition-duration: 230ms;
    -webkit-transition-duration: 230ms;
    -webkit-transform: translate3d(8.28vh, -19.99vh, 0);
    transform: translate3d(8.28vh, -19.99vh, 0);
}

#menu-open-smartphone:checked ~ .menu-item:nth-child(5) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(15.3vh, -15.3vh, 0);
    transform: translate3d(15.3vh, -15.3vh, 0);
}

#menu-open-smartphone:checked ~ .menu-item:nth-child(6) {
    transition-duration: 330ms;
    -webkit-transition-duration: 330ms;
    -webkit-transform: translate3d(19.99vh, -8.28vh, 0);
    transform: translate3d(19.99vh, -8.28vh, 0);
}

#menu-open-smartphone:checked ~ .menu-item:nth-child(7) {
    transition-duration: 480ms;
    -webkit-transition-duration: 480ms;
    -webkit-transform: translate3d(21.64vh, 0, 0);
    transform: translate3d(21.64vh, 0, 0);
}

#menu-open-smartphone:checked ~ .menu-item:nth-child(8) {
    transition-duration: 530ms;
    -webkit-transition-duration: 530ms;
    -webkit-transform: translate3d(19.99vh, 8.28vh, 0);
    transform: translate3d(19.99vh, 8.28vh, 0);
}

#menu-open-smartphone:checked ~ .menu-item:nth-child(9) {
    transition-duration: 580ms;
    -webkit-transition-duration: 580ms;
    -webkit-transform: translate3d(15.3vh, 15.3vh, 0);
    transform: translate3d(15.3vh, 15.3vh, 0);
}

#menu-open-smartphone:checked ~ .menu-item:nth-child(10) {
    transition-duration: 630ms;
    -webkit-transition-duration: 630ms;
    -webkit-transform: translate3d(8.28vh, 19.99vh, 0);
    transform: translate3d(8.28vh, 19.99vh, 0);
}

#menu-open-smartphone:checked ~ .menu-item:nth-child(11) {
    transition-duration: 680ms;
    -webkit-transition-duration: 680ms;
    -webkit-transform: translate3d(0, 21.64vh, 0);
    transform: translate3d(0, 21.64vh, 0);
}

#menu-open-smartphone:checked ~ .menu-item:nth-child(12) {
    transition-duration: 730ms;
    -webkit-transition-duration: 730ms;
    -webkit-transform: translate3d(-8.28vh, 19.99vh, 0);
    transform: translate3d(-8.28vh, 19.99vh, 0);
}

#menu-open-smartphone:checked ~ .menu-item:nth-child(13) {
    transition-duration: 780ms;
    -webkit-transition-duration: 780ms;
    -webkit-transform: translate3d(-15.3vh, 15.3vh, 0);
    transform: translate3d(-15.3vh, 15.3vh, 0);
}

#menu-open-smartphone:checked ~ .menu-item:nth-child(14) {
    transition-duration: 830ms;
    -webkit-transition-duration: 830ms;
    -webkit-transform: translate3d(-19.99vh, 8.28vh, 0);
    transform: translate3d(-19.99vh, 8.28vh, 0);
}

#menu-open-smartphone:checked ~ .menu-item:nth-child(15) {
    transition-duration: 880ms;
    -webkit-transition-duration: 880ms;
    -webkit-transform: translate3d(-21.64vh, 0, 0);
    transform: translate3d(-21.64vh, 0, 0);
}

#menu-open-smartphone:checked ~ .menu-item:nth-child(16) {
    transition-duration: 930ms;
    -webkit-transition-duration: 930ms;
    -webkit-transform: translate3d(-19.99vh, -8.28vh, 0);
    transform: translate3d(-19.99vh, -8.28vh, 0);
}

#menu-open-smartphone:checked ~ .menu-item:nth-child(17) {
    transition-duration: 980ms;
    -webkit-transition-duration: 980ms;
    -webkit-transform: translate3d(-15.3vh, -15.3vh, 0);
    transform: translate3d(-15.3vh, -15.3vh, 0);
}

#menu-open-smartphone:checked ~ .menu-item:nth-child(18) {
    transition-duration: 1030ms;
    -webkit-transition-duration: 1030ms;
    -webkit-transform: translate3d(-8.28vh, -19.99vh, 0);
    transform: translate3d(-8.28vh, -19.99vh, 0);
}

/*
.blue {
   background-color: #669AE1;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.blue:hover {
   color: #669AE1;
   text-shadow: none;
}

.green {
   background-color: #70CC72;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.green:hover {
   color: #70CC72;
   text-shadow: none;
}

.red {
   background-color: #FE4365;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.red:hover {
   color: #FE4365;
   text-shadow: none;
}

.purple {
   background-color: #C49CDE;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.purple:hover {
   color: #C49CDE;
   text-shadow: none;
}

.orange {
   background-color: #FC913A;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.orange:hover {
   color: #FC913A;
   text-shadow: none;
}

.lightblue {
   background-color: #62C2E4;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.lightblue:hover {
   color: #62C2E4;
   text-shadow: none;
}

.credit {
   margin: 24px 20px 120px 0;
   text-align: right;
   color: #EEEEEE;
}

.credit a {
   padding: 8px 0;
   color: #C49CDE;
   text-decoration: none;
   transition: all 0.3s ease 0s;
}

.credit a:hover {
   text-decoration: underline;
}
*/