.slide-top {
    animation: slide-top 2s ease-in-out;
    opacity: 100%;
}

.transparan {
    opacity: 0;
}

.laptop {
    position:relative;left:-700px; opacity:0;
}

.laptop-wanita {
    position: absolute; right: 0; opacity:0%;
}
.hp {
    position: relative;
    left:-700px;
    opacity:0;
}

.hp-wanita {
    position: relative;
    left: -700px;
    opacity:0%;
}

@keyframes slide-top {
    0% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}

@keyframes slideIn {
    0% {
        opacity: 0%;
        left: -700px;
    }
    100% {
        left: 0px;
        opacity: 100%;
    }
}
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

/* ----------------------------------------------
 * Generated by Animista on 2024-7-25 12:29:59
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-2-hor-top-1
 * ----------------------------------------
 */
 .flip-2-hor-top-1 {
	-webkit-animation: flip-2-hor-top-1 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) alternate-reverse both;
	        animation: flip-2-hor-top-1 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) alternate-reverse both;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-7-25 12:30:50
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-2-hor-top-1
 * ----------------------------------------
 */
 @-webkit-keyframes flip-2-hor-top-1 {
    0% {
      -webkit-transform: translateY(0) rotateX(0);
              transform: translateY(0) rotateX(0);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
    }
    100% {
      -webkit-transform: translateY(-100%) rotateX(-180deg);
              transform: translateY(-100%) rotateX(-180deg);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
    }
  }
  @keyframes flip-2-hor-top-1 {
    0% {
      -webkit-transform: translateY(0) rotateX(0);
              transform: translateY(0) rotateX(0);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
    }
    100% {
      -webkit-transform: translateY(-100%) rotateX(-180deg);
              transform: translateY(-100%) rotateX(-180deg);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
    }
  }