@charset "utf-8";
/* CSS Document */
.g-rect-path{fill: none;stroke-width:5;stroke:#d3dce6;stroke-linejoin:round;stroke-linecap:round;}
.g-rect-fill{fill: none;stroke-width:5;stroke:#ef3d5b;stroke-linejoin:round;stroke-linecap:round;stroke-dashoffset: 0;}


/*1*/
.icon-01 {position:absolute; left:0px; top:0px; }
.g-rect-fill-01{ animation: lineMove01 2s ease-out infinite;}
@keyframes lineMove01 {
    0%{
        stroke-dasharray: 0, 200;
    }
    100%{
        stroke-dasharray: 100, 100;
    }
}

.linea {position: absolute; left:4px; top:15px;width:80px; height:5px; background:#ef3d5b;border-radius: 3px;transform:rotate(-20deg);animation: linea 1s linear infinite;} 
@keyframes linea {
  0% {
           width:0px;
  }
  100% {
             width:80px;
  }
}
/*2*/
.lineb {position: absolute; left:34px; bottom:14px;width:32px; height:5px; background:#ef3d5b;border-radius: 3px;animation: lineb 1s linear infinite;} 
@keyframes lineb {
  0% {
           width:0px;
  }
  100% {
             width:32px;
  }
}
/*3*/
.ellipsea {position: absolute; right:0px; bottom:-10px;position: absolute;height: 35px;width: 35px;border-radius: 20px;transform: rotateX(70deg);  animation: ellipsea 1s linear infinite; }
@keyframes ellipsea {
  0% {
             border-left: 6px solid #ef3d5b;
  }
  25% {
             border-bottom: 6px solid #ef3d5b;
  }
  75% {
             border-right: 6px solid #ef3d5b;
  }
  100% {
             border-top: 6px solid #ef3d5b;
  }
}
/*4*/
.circlea {position: absolute; right:0px; top:0px;height: 50px;width: 50px;border-radius: 10px 50px 10px 10px;border: 5px solid #ef3d5b;animation: circlea 1s linear infinite;}
@keyframes circlea {
  0% {
            transform: translateY(-12px);
  }
  50% {
             transform: translateY(0px);
  }
  100% {
             transform: translateY(-12px);
  }
}
/*5*/
.search {position: absolute; bottom:10px; right:-10px; animation: search 3s linear infinite;}
@keyframes search {
  0% {
            transform: translateX(-12px);
  }
  50% {
             transform: translateX(0px);
  }
  100% {
             transform: translateX(-12px);
  }
}
/*6*/
.ellipseb {position: absolute; top:-10px; right:-10px; height: 120px;  width: 120px;  border-radius: 60px;  border: 5px solid #ef3d5b; border-bottom:none; animation: spin3 .8s linear reverse infinite, colorize 1.2s .8s linear infinite;}
@keyframes spin3 {
  0% {
    transform: rotateY(60deg) rotateX(-30deg) rotateZ(0deg);
  }
  50% {
    transform: rotateY(60deg) rotateX(-30deg) rotateZ(180deg);
  }
  100% {
    transform: rotateY(60deg) rotateX(-30deg) rotateZ(360deg);
  }
}

@keyframes colorize {
  50% {
    border-color: #ef3d5b;
  }
}
/*7*/
.linec {position: absolute; left:42px; top:36px;width:16px; height:5px; background:#ef3d5b;border-radius: 3px;animation: linec 1s linear infinite;} 
@keyframes linec{
  0% {
           width:0px;
  }
  100% {
             width:16px;
  }
}
/*8*/
.lined {position: absolute; left:38px; bottom:22px;width:24px; height:5px; background:#ef3d5b;border-radius: 3px;animation: lined 1s linear infinite;} 
@keyframes lined{
  0% {
           width:0px;
  }
  100% {
             width:24px;
  }
}
/*9*/
.linee {position: absolute; left:16px; bottom:16px;width:18px; height:5px; background:#ef3d5b;border-radius: 3px;animation: linee 1s linear infinite;} 
@keyframes linee{
  0% {
           width:0px;
  }
  100% {
             width:18px;
  }
}
/*10*/
.linef {position: absolute; left:34px; bottom:49px;width:38px; height:5px; background:#ef3d5b;border-radius: 3px;animation: linef 1s linear infinite;} 
@keyframes linef{
  0% {
           width:0px;
  }
  100% {
             width:38px;
  }
}
/*11*/
.icon-11 {position:absolute; bottom:-15px; right:-15px; }
.g-rect-fill-11{ animation: lineMove11 2s ease-out infinite;}
@keyframes lineMove11 {
    0%{
        stroke-dasharray: 0, 300;
    }
    100%{
        stroke-dasharray: 150, 150;
    }
}

/*12*/
.icon-12 {position:absolute; left:0px; top:0px; }
.g-rect-fill-12{ animation: lineMove12 2s ease-out infinite;}
@keyframes lineMove12 {
    0%{
        stroke-dasharray: 0, 200;
    }
    100%{
        stroke-dasharray: 100, 100;
    }
}
/*13*/

.icon-13 {position:absolute; left:34px; bottom:20px; }
.g-rect-fill-13{ animation: lineMove13 2s ease-out infinite;}
@keyframes lineMove13 {
    0%{
        stroke-dasharray: 0, 100;
    }
    100%{
        stroke-dasharray: 50, 50;
    }
}
/*14*/
.lineg {position: absolute; left:12px; top:34px;width:20px; height:5px; background:#ef3d5b;border-radius: 3px;animation: linef 1s linear infinite;} 
@keyframes linef{
  0% {
           width:0px;
  }
  100% {
             width:20px;
  }
}
/*15*/
.icon-15 {position:absolute; right:15px; bottom:8px; }
.g-rect-fill-15{ animation: lineMove15 2s ease-out infinite;}
@keyframes lineMove15 {
    0%{
        stroke-dasharray: 0, 100;
    }
    100%{
        stroke-dasharray: 50, 50;
    }
}

/*16*/
.icon-16 {position:absolute; left:25px; top:30px; }
.g-rect-fill-16{ animation: lineMove16 2s ease-out infinite;}
@keyframes lineMove16 {
    0%{
        stroke-dasharray: 0, 200;
    }
    100%{
        stroke-dasharray: 100, 100;
    }
}