@charset "utf-8";
body{
    overflow-x: hidden;
}
.ef{
  transition: all .6s ease-in-out;;
}
.ef.done{
    opacity: 1;
    transform: translate(0, 0) scale(1)!important;
}
.fall{
  opacity: 0;
  transform: translate(0%, -270px);
  transition: all 1s .5s ease;;
}
.wipe-outer{
    display: block;
    overflow: hidden;
    max-width: 770px;
    margin: 0 auto;
    margin-top: -1px;
}
.wipe{
    transform: translate(150%, 0px);
    transition: all .9s ease-in-out;
}
.wipe.reverse{
  transform: translate(-150%, 0px);
}


.flow{
  opacity: 0;
  transform: translate(0%, 100px);
}
.scale{
    transform: translate(0, 0) scale(0);
}

[delay="2"]{transition-delay: .5s;}
[delay="3"]{transition-delay: .8s;}
[delay="4"]{transition-delay: 1.1s;}
[delay="5"]{transition-delay: 1.4s;}
[delay="6"]{transition-delay: 1.7s;}


[delay="10"]{transition-delay: 2s;}
[delay="11"]{transition-delay: 2.1s;}
[delay="12"]{transition-delay: 2.9s;}
[delay="13"]{transition-delay: 2.95s;}
[delay="14"]{transition-delay: 3s;}

[delay="15"]{transition-delay: 3.4s!important;}





#header .head-nav{
  background-repeat: no-repeat;
  background-size: 200%;
  background-position:-100% 0%;
}
#header .head-nav.done{
  background-size: 100%;
  background-position:0% 0%;
}
#vegetable{
  background: linear-gradient(0deg, #fff 20%, #ebebeb 20%);
  background-repeat: no-repeat;
  background-size: 200%;
  background-size: 0%;
}
#vegetable.done{
  background-size: 100%;
  background-position:0% 0%;
}

.rgb-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img-top/rgb.jpg);
    background-size: cover;
    background-attachment: fixed;
    /*background-position: center;*/
}
@media only screen and (max-width: 599px){

}

.clip-both{
    clip-path: polygon(50% 10%, 100% 0, 100% 90%, 50% 100%, 0 90%, 0% 0%);
}
.clip-top{
    clip-path: polygon(50% 10%, 100% 0, 100% 100%, 0 100%, 0% 0%);
}

.color-line{
   opacity: 1;
   background-image: url(../img-top/line-rgb.svg);
   background-repeat: no-repeat;
   background-position: 400% bottom;
   transition: all 1.5s .2s ease-in-out;
}
.color-line.yellow{
   background-image: url(../img-top/line-yellow.svg);
}
.color-line.green{
   background-image: url(../img-top/line-green.svg);
}
.color-line.pink{
   background-image: url(../img-top/line-pink.svg);
}
.done.color-line {
    background-position: 100% bottom;
}