/*initial animation*/
 .body_overlay {
     position: fixed;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 1);
     pointer-events: none;
     animation: background_color 0.5s linear 0.8s forwards;
     z-index: 3;
 }

 .load {
     background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjY3IiBoZWlnaHQ9IjY4NCIgdmlld0JveD0iMCAwIDY2NyA2ODQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02NjYuOTc4IDM0Ny41MjdDNjY2Ljk3OCAxNTcuMzk0IDYxNS43NzIgNjUuMDAxOSA1NzAuMzMgNjMuMDM0MkM0OTcuNzQ5IDU5Ljg5NDggNDk0LjE1IDIyNC4yMDYgNDI1LjIxMyAyMjAuMjdDMzU2LjI3NyAyMTYuMzM1IDQwNy4wODUgNTcuMzk2NSAzMTIuNzU1IDU3LjM5NjVDMjI1LjY5IDU3LjM5NjUgMjU0LjcwNCAzMTQuNjA4IDE5My4wMzIgMzIyLjQ3OEMxMzEuMzYgMzMwLjMyNyAxNjAuMzc0IC03LjczNTMxIDgwLjU3MzUgMC4xMzUzNDFDMTMuNjI0IDYuNzIzNjkgMS4wMzc4MSAyMzguMTc4IDAuMTc2NjQ4IDMzNi40NzNIMEMwIDQyNy4xMTggMTAuODE5NyA2NzcuMDExIDgwLjQ0MSA2ODMuODY1QzE2MC4yNDIgNjkxLjczNSAxMzEuMjI3IDM1My42NzMgMTkyLjg5OSAzNjEuNTIyQzI1NC41NzIgMzY5LjM5MyAyMjUuNTU3IDYyNi42MDQgMzEyLjYyMiA2MjYuNjA0QzQwNi45NTIgNjI2LjYwNCAzNTYuMTY2IDQ2Ny42NjUgNDI1LjA4MSA0NjMuNzNDNDk0LjAxOCA0NTkuNzk0IDQ5Ny41OTUgNjI0LjEwNSA1NzAuMTk3IDYyMC45NjZDNjE0Ljc1NiA2MTkuMDQyIDY2NC44MzYgNTMwLjE4OCA2NjYuODAxIDM0Ny41MjdINjY3SDY2Ni45NzhaIiBmaWxsPSIjQkJBODY4Ii8+Cjwvc3ZnPgo=) no-repeat;
     position: absolute;
     height: 684px;
     width: 100%;
     max-width: 667px;
     transform: translate(-50%, -50%) scale(0.5);
     opacity: 0.3;
     top: 50%;
     transform-origin: center center;
 }

 .load.load_left {
     left: 50%;
     transform: translate(-50%, -50%) scale(0.5);
     animation: slideLeft 1s ease-out forwards;
     animation-delay: 0.4s;
     width: 667px;
     opacity: 0.3;

 }

 .load.load_right {
     right: 50%;
     transform: translate(50%, -50%) scale(0.5);
     left: auto;
     animation: slideRight 1s ease-out forwards;
     animation-delay: 0.4s;
     opacity: 0.3;
 }

 @keyframes slideLeft {
     0% {
         transform: translate(-50%, -50%) scale(0.5);
     }

     100% {
         left: 70px;
         transform: translate(-100%, -50%) scale(1);
         opacity: 1;
     }
 }

 @keyframes slideRight {
     0% {
         transform: translate(50%, -50%) scale(0.5);
     }

     100% {
         right: 70px;
         transform: translate(100%, -50%) scale(1);
         opacity: 1;
     }
 }

 @keyframes background_color {
     0% {
         background: rgba(255, 255, 255, 1);
     }

     100% {
         background: rgba(255, 255, 255, 0);
     }
 }

 @media (max-width: 1199px) {
     @keyframes slideLeft {
         0% {
             transform: translate(-50%, -50%) scale(0.5);
         }

         100% {
             left: 40px;
             transform: translate(-100%, -50%) scale(1);
             opacity: 1;
         }
     }

     @keyframes slideRight {
         0% {
             transform: translate(50%, -50%) scale(0.5);
         }

         100% {
             right: 40px;
             transform: translate(100%, -50%) scale(1);
             opacity: 1;
         }
     }
 }

 @media (max-width: 480px) {
     @keyframes slideLeft {
         0% {
             transform: translate(-50%, -50%) scale(0.5);
         }

         100% {
             left: 20px;
             transform: translate(-100%, -50%) scale(1);
             opacity: 1;
         }
     }

     @keyframes slideRight {
         0% {
             transform: translate(50%, -50%) scale(0.5);
         }

         100% {
             right: 20px;
             transform: translate(100%, -50%) scale(1);
             opacity: 1;
         }
     }
 }