@keyframes w_layer_2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w_layer_3 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w_layer_4 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#w_webpage-layer {
  width: 200px;
  height: auto;
  margin: 0 auto;
  margin-top: 100px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}
@media screen and (max-width: 560px) {
  #w_webpage-layer {
    width: 50px;
  }
}
#w_webpage-layer .w_layer {
  width: 240px;
  height: 460px;
  position: absolute;
  transform: rotate3d(45, 20, -45, 75deg);
}
@media screen and (max-width: 560px) {
  #w_webpage-layer .w_layer {
    width: 120px;
    height: 230px;
  }
}
#w_webpage-layer .w_layer .w_header {
  width: 100%;
  height: 75px;
}
@media screen and (max-width: 560px) {
  #w_webpage-layer .w_layer .w_header {
    height: 37.5px;
  }
}
#w_webpage-layer .w_layer .w_main {
  width: 100%;
  height: 250px;
  margin-top: 50px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
@media screen and (max-width: 560px) {
  #w_webpage-layer .w_layer .w_main {
    height: 125px;
    margin-top: 25px;
  }
}
#w_webpage-layer .w_layer .w_main .w_card {
  width: 26%;
  height: 75px;
  margin-bottom: 25px;
}
@media screen and (max-width: 560px) {
  #w_webpage-layer .w_layer .w_main .w_card {
    height: 37.5px;
    margin-bottom: 12.5px;
  }
}
#w_webpage-layer .w_layer .w_footer {
  width: 100%;
  height: 50px;
  margin-top: 35px;
}
@media screen and (max-width: 560px) {
  #w_webpage-layer .w_layer .w_footer {
    height: 25px;
    margin-top: 17.5px;
  }
}
#w_webpage-layer #w_layer_4 {
  margin-top: 0px;
  z-index: 4;
  animation-name: w_layer_4;
  animation-duration: 10s;
  animation-fill-mode: both;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-play-state: running;
}
#w_webpage-layer #w_layer_4 .w_header .w_nav {
  width: 20%;
  height: 25px;
  display: block;
  float: left;
  margin: 0px 2.5%;
  margin-top: 50px;
  background: #ff6e60;
  box-shadow: -10px 10px 40px 0px grey;
}
@media screen and (max-width: 560px) {
  #w_webpage-layer #w_layer_4 .w_header .w_nav {
    height: 12.5px;
    margin-top: 25px;
  }
}
#w_webpage-layer #w_layer_4 .w_main .w_card .w_img {
  width: 50%;
  height: 25px;
  margin: 10px;
  background: #ff6e60;
  box-shadow: -10px 10px 20px 0px grey;
}
@media screen and (max-width: 560px) {
  #w_webpage-layer #w_layer_4 .w_main .w_card .w_img {
    height: 12.5px;
    margin: 5px;
  }
}
#w_webpage-layer #w_layer_4 .w_main .w_card .w_p {
  width: 75%;
  height: 10px;
  background: #ffee5a;
  margin-top: 5px;
}
@media screen and (max-width: 560px) {
  #w_webpage-layer #w_layer_4 .w_main .w_card .w_p {
    height: 5px;
    margin-top: 2.5px;
  }
}
#w_webpage-layer #w_layer_3 {
  margin-top: 40px;
  z-index: 3;
  animation-name: w_layer_3;
  animation-duration: 10s;
  animation-fill-mode: both;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-play-state: running;
}
#w_webpage-layer #w_layer_3 .w_header .w_h1 {
  width: 50%;
  height: 25px;
  background: #ff6e60;
  box-shadow: -10px 10px 40px 0px grey;
}
@media screen and (max-width: 560px) {
  #w_webpage-layer #w_layer_3 .w_header .w_h1 {
    height: 12.5px;
  }
}
#w_webpage-layer #w_layer_3 .w_header .w_nav {
  width: 100%;
  height: 25px;
  display: block;
  float: left;
  margin-top: 25px;
  background: white;
  box-shadow: -10px 10px 40px 0px grey;
}
@media screen and (max-width: 560px) {
  #w_webpage-layer #w_layer_3 .w_header .w_nav {
    height: 12.5px;
    margin-top: 12.5px;
  }
}
#w_webpage-layer #w_layer_3 .w_main .w_card {
  background: white;
  box-shadow: -10px 10px 20px 0px grey;
}
#w_webpage-layer #w_layer_3 .w_footer .w_link {
  width: calc(100% / 3);
  height: 25px;
  margin: 0 auto;
  margin-top: 25px;
  background: white;
  box-shadow: -10px 10px 40px 0px grey;
}
@media screen and (max-width: 560px) {
  #w_webpage-layer #w_layer_3 .w_footer .w_link {
    height: 12.5px;
    margin-top: 12.5px;
  }
}
#w_webpage-layer #w_layer_2 {
  margin-top: 80px;
  z-index: 2;
  animation-name: w_layer_2;
  animation-duration: 10s;
  animation-fill-mode: both;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-play-state: running;
}
#w_webpage-layer #w_layer_2 .w_header, #webpage-layer #w_layer_2 .w_main {
  background: #f1f1f1;
  box-shadow: -10px 10px 40px 0px grey;
}
#w_webpage-layer #w_layer_2 .w_footer {
  background: #ff6e60;
  box-shadow: -10px 10px 40px 0px grey;
}
#w_webpage-layer #w_layer_1 {
  margin-top: 120px;
  background: white;
  box-shadow: -10px 10px 40px 0px grey;
  z-index: 1;
}
#w_sign {
  position: absolute;
  top: 50px;
  left: 50px;
  padding: 10px;
  background: #ff6e60;
  font-family: sans-serif;
  color: white;
}
#w_sign a {
  color: white;
}
#w_sign a:hover {
  color: #ffee5a;
}