html,
body {
   margin: 0;
   padding: 0;
}

body.no-transition * {
   transition: none !important;
}

main {
   background: #FFFFFF;
   display: block;
   height: 90px;
   opacity: 0;
   overflow: hidden;
   position: relative;
   transition: opacity 0.4s;
   width: 728px;
}

main.loaded {
   opacity: 1;
}

main * {
   position: absolute;
   transition: all 0.4s;
}

#guide {
   position: absolute;
   z-index: 999;
   opacity: .5;
}
#guide.frame1 {top: -20px;left: 0;}
#guide.frame2 {top: -180px; left: 0px;}
#guide.frame3 {top: -340px; left: 0px;}
#guide.frame4 {top: -500px; left: 0px;}
#guide.frame5 {top: -660px; left: 0px;}
#guide.frame6 {top: -820px; left: 0px;}
#guide.frame7 {top: -980px; left: 0px;}
#guide.frame8 {top: -1140px; left: 0px;} 
#guide.frame9 {top: -1300px; left: 0px;}  

main.full-isi,
#isi_container.full-isi,
#isi {
   overflow: visible !important;
   border: none;
}

.fade-in {
   opacity: 1 !important;
}

.fade-out {
   opacity: 0 !important;
}

.enter {
   transform: translate(0, 0) !important;
}

#dots1-top,
#dots2-top {
   transform: scale(-1, -1) translate(-100%, 0);
}
#dots1-top.enter,
#dots2-top.enter {
   transform: scale(-1, -1) translate(0, 0) !important;
}

.txt {
   opacity: 0;
}

#neck {
   opacity: 0;
   transform: translate(-108px, 58px) scale(.1);
}
#neck.zoom {
   opacity: 1;
   transform: translate(0, 0) scale(1);
}

#arrow {
   opacity: 0;
   left: 339px;
   top: 31px;
   width: 9px; 
}

#arrow.pulse {
   opacity: 1;
   animation: slide 1s ease-in-out infinite;
}
@keyframes slide {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(10px, 5px); }
}

#circle-1 {
   left: -357px;
   top: -286px;
   transform: translate(-800px, -34px);
}
#circle-1.fill {
   transform: translate(357px, -34px) !important;
   transition: transform 1s, opacity 0.4s;
}
#circle-1.fade {
   opacity: .5;
}

#circle-2 {
   left: -342px;
   top: -212px;
   transform: translate(-800px, 0);
}
#circle-2.move {
   transform: translate(280px, 0px) !important;   
   transition: transform 1s;
}
#circle-2.move-2 {
   transform: translate(571px, 0px) !important;   
   transition: transform 1s;
}

#woman {
   left: 631px; 
   top: 0px; 
   width: 86px;
   transform: translate(0, 175%);
   transition: transform 0.8s, opacity 0.4s;
}
#woman.zoom {
   transform: translate(-103px, -111px) scale(.53) !important;
}
#woman.move {
   transform: translate(0px, 175%) scale(1) !important;
}

#border {
   position: absolute;
   width: calc(100% - 4px);
   height: calc(100% - 4px);
   z-index: 2;
   border: 2px solid #201A57;
   pointer-events: none;
   z-index: 999;
}

#click_overlay {
   top: 0px;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 99;
}