<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Houm</title>
  <base href="/">
  <link href="./assets/material-icons/materialFontIcons.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Round" rel="stylesheet">
  <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
/>
  <style>
    @font-face { 
      font-family: 'Material Icons';
      font-style: normal;
      font-display: block;
    }
  </style>
  <meta name="theme-color" content="#5f407a">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
  <link rel="icon" type="image/ico" href="assets/images/favicon.ico" />
  <link rel="preload" href="./assets/fonts/Muli/Muli-Light.ttf" as="font" type="font/ttf" crossorigin>

  <style>
    body {
      background-color: #1a0a2c;
    }

    .loadingContent{
        width: 100%;}
/*
 * Animation
 */
    #page-loading {
      display: block;
      z-index: 100;
      text-align: center;
      width: 100%;
      margin: 0 auto;
      margin-top: calc(50vh - 40px);
      position: absolute;

    }
    #inside-page-loading {
      display: block;
      z-index: 100;
      text-align: center;
      width: 100%;
      margin: 0 auto;
      margin-top: calc(50vh - 40px);
      position: absolute;
    }
    .page-loading-width{
        width: 30%;
        margin: 0 auto;
      }
    .loader-text {
      font-family: Muli-Light;
      font-size: 2vw;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: normal;
      color: #FFECFF;
      padding: 0;
      margin: 0;
    }
    .meter {
      height: 20px;
      position: relative;
      margin: 20px 0 20px 0;
      background: #fff;
      -moz-border-radius: 25px;
      -webkit-border-radius: 25px;
      border-radius: 25px;
      -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .3);
      -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .3);
      box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .3)
    }

    .meter>span {
      display: block;
      height: 100%;
      -webkit-border-top-right-radius: 20px;
      -webkit-border-bottom-right-radius: 20px;
      -moz-border-radius-topright: 20px;
      -moz-border-radius-bottomright: 20px;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      -webkit-border-top-left-radius: 20px;
      -webkit-border-bottom-left-radius: 20px;
      -moz-border-radius-topleft: 20px;
      -moz-border-radius-bottomleft: 20px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      box-shadow: inset 0 2px 9px rgba(255, 255, 255, .3), inset 0 -2px 6px rgba(0, 0, 0, .4);
      position: relative;
      overflow: hidden
    }

    .animate>span>span,
    .meter>span:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
      background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
      z-index: 1;
      -webkit-background-size: 50px 50px;
      -moz-background-size: 50px 50px;
      background-size: 50px 50px;
      -webkit-animation: move 2s linear infinite;
      -moz-animation: move 2s linear infinite;
      -webkit-border-top-right-radius: 20px;
      -webkit-border-bottom-right-radius: 20px;
      -moz-border-radius-topright: 20px;
      -moz-border-radius-bottomright: 20px;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      -webkit-border-top-left-radius: 20px;
      -webkit-border-bottom-left-radius: 20px;
      -moz-border-radius-topleft: 20px;
      -moz-border-radius-bottomleft: 20px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      overflow: hidden
    }

    .animate>span:after {
      display: none
    }

    @-webkit-keyframes move {
      0% {
        background-position: 0 0
      }

      100% {
        background-position: 50px 50px
      }
    }

    @-moz-keyframes move {
      0% {
        background-position: 0 0
      }

      100% {
        background-position: 50px 50px
      }
    }

    .nostripes>span:after,
    .nostripes>span>span {
      -webkit-animation: none;
      -moz-animation: none;
      background-image: none
    }
    @media only screen and (max-width: 768px) {

      .page-loading-width{
        width: 80%;
        margin: 0 auto;
      }

    .loader-text {
      font-size: 5vw;
    }

    }
  </style>
  <script>

    var global = global || window;
    var Buffer = Buffer || [];
    var process = process || {
      env: { DEBUG: undefined },
      version: []
    };
    
    let progress = 3;
    function startLoading() {
      setTimeout(() => {
        const element = document.getElementById("page-loading");
      element.style.display = "block";
        if (progress < 98) {
          progress += 1;
          const bar = document.getElementById("meter-bar");
          if (bar !== null) {
            document.getElementById("meter-bar").style.width = progress + '%';
          }
          startLoading();
        }
      }, 100);
    }
    if(localStorage.getItem('cog_details') == null){
      startLoading();
    }else{
      setTimeout(() => {
      const element = document.getElementById("inside-page-loading");
      element.style.display = "block";
      }, 50);

    }
  </script>
  <style>
    body {
      background: #1a0a2c !important;
    }
  </style>
<link rel="stylesheet" href="styles.0d680dd092b7420562f8.css"></head>

<body>

  <div id="page-loading" style="display: none;">
    <div class="page-loading-width">
      <div style="color: #CAB4E0;margin: 0 auto;" class="spinBallLoader">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <p class="loader-text">It`s all coming together!</p>
    </div>

  </div>
  <div id="inside-page-loading" style="display: none;">
    <div class="loader-layout">
      <div class="web_Loader">
        <div class="loadingContent">
          <div style="color: #CAB4E0;margin: 0 auto;" class="spinBallLoader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <app-root></app-root>
<script src="runtime.5408108cfc970fc70164.js" defer></script><script src="polyfills.c00e681054c61953eae4.js" defer></script><script src="scripts.83b106d1d6f24c35c44a.js" defer></script><script src="main.56128098dcc0c11c8326.js" defer></script></body>

</html>
