@font-face {
	font-family: 'MyFont';
	src: url(../fonts/otf/Druk_Wide_Medium_Italic.otf);
}

html{
    cursor: url(../images/cursor_engel.cur), default;
    background-color: #4586d1;
    overflow: hidden;
  }

#area_store:hover ,
#area_gallery:hover , 
#area_shirts:hover  {
    cursor: url(../images/cursor_engel_closed.cur), default;
  }
  
body {
  margin: 0px;
  font-family: MyFont;
  animation: fadeIn 0.5s ease 0s 1 normal;
  -webkit-animation: fadeIn 0.5s ease 0s 1 normal;
}


@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

#area_store{
  position: absolute;
  top: 12vh;
  left: 24vw;
  width: 25vw;
  height: 22vh;
  z-index: 1000;
}

#area_gallery{
  position: absolute;
  top: 47vh;
  left: 15vw;
  width: 25vw;
  height: 20vh;
  z-index: 1000;
}

#area_shirts{
  position: absolute;
  top: 20vh;
  left: 73vw;
  width: 23vw;
  height: 27vh;
  z-index: 1000;
}

#backcloud {
  position: absolute;
  width: 100vw;
  bottom: -5vh;
  z-index: 5;
}

.wishcloud img{
  position: absolute;
  width: 25vw;
  top: 0vh;
  animation: fuwafuwa_cloud 8s ease-in-out 0s infinite normal;
}

.store img{
  position: absolute;
  width: 23vw;
  top: 10vh;
  animation: fuwafuwa_store 5s ease-in-out 0s infinite normal;
}

.store .cloud{
  position: absolute;
  width: 40vw;
  top: 10vh;
  animation: fuwafuwa_storeC 5s ease-in-out 0s infinite normal;
}

.gallery img{
    position: absolute;
    width: 18vw;
    top: 49vh;
    animation: fuwafuwa_gallery 7s ease-in-out 0s infinite normal;
}

.gallery .cloud{
  position: absolute;
  width: 40vw;
  top: 45vh;
  animation: fuwafuwa_galleryC 7s ease-in-out 0s infinite normal;
}

.shirts .cloud{
  position: absolute;
  width: 35vw;
  top: 28vh;
  z-index: 0;
  animation: fuwafuwa_shirtsC 7s ease-in-out 0s infinite normal;
}

iframe{
  position: absolute;
  margin: 0;
  border: 0;
  top: 23vh;
  height: 25vh;
  width: 40vw;
  animation: fuwafuwa_shirts 7s ease-in-out 0s infinite normal;
}



#area_store .text {
  position: absolute;
  top: 10vh;
  left: 15vw;
  width: 20vw;
  z-index: 100;
}

#area_gallery .text {
  position: absolute;
  top: 10vh;
  left: 10vw;
  width: 33vw;
  z-index: 100;
}

#area_shirts .text {
  position: absolute;
  top: 24vh;
  left: -5vw;
  width: 25vw;
  z-index: 100;
}

#area_store:hover .text,
#area_gallery:hover .text, 
#area_shirts:hover .text {
  opacity: 1;
}

.text{
  height: 4vh;  
  padding-left: 20px;
  padding-right: 20px;
  background-color:#feff00;
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:1.0em; 
  opacity: 0;
  -webkit-transition: opacity 1s ease-out;
  -moz-transition: opacity 1s ease-out;
  -o-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}

@keyframes fuwafuwa_cloud{
  0%{
    left: 58vw;
  }
  50%{
    left: 55vw;
  }
  100%{
    left: 58vw;
  }
}


@keyframes fuwafuwa_store{
  0%{
    left: 23vw;
  }
  50%{
    left: 26vw;
  }
  100%{
    left: 23vw;
  }
}


@keyframes fuwafuwa_storeC{
  0%{
    left: 15vw;
  }
  50%{
    left: 18vw;
  }
  100%{
    left: 15vw;
  }
}

@keyframes fuwafuwa_gallery{
    0%{
      left: 15vw;
    }
    50%{
      left: 20vw;
    }
    100%{
      left: 15vw;
    }
  }

  @keyframes fuwafuwa_galleryC{
    0%{
      left: 5vw;
    }
    50%{
      left: 10vw;
    }
    100%{
      left: 5vw;
    }
  }

@keyframes fuwafuwa_shirts{
    0%{
      left: 65vw;
    }
    50%{
      left: 63vw;
    }
    100%{
      left: 65vw;
    }
  }
 
  @keyframes fuwafuwa_shirtsC{
    0%{
      left: 67vw;
    }
    50%{
      left: 65vw;
    }
    100%{
      left: 67vw;
    }
  }