@import url(https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700);
    @import url(https://fonts.googleapis.com/css?family=Eczar);
    
    .dx-context_bg {
      margin: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: #ffffff;
    }
    
    .pre_loader-wrapper {
      display: block;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
    
    .pre_loader {
      display: block;
      position: absolute;
      top: 50%;
      left: 49%;
      width: 58px;
      height: 86px;
      margin-top: -43px;
      margin-left: -29px;
      font-family: "Bookman Old Style", sans-serif;
      line-height: 42px;
      overflow: hidden;
      opacity: 0;
      animation: Loader 10s ease-in-out infinite;
      -webkit-animation: Loader 10s ease-in-out infinite;
    }
    .pre_loader * {
      display: block;
      position: absolute;
    }

    @-webkit-keyframes Loader {
      5%,
      100% {
        opacity: 1;
      }
      30% {
        width: 58px;
        margin-left: -29px;/* Prevent Object Moment from Beginning */
      }
      40%,
      82% {
        width: 180px;
        margin-left: -65px;
      }
      86%,
      100% {
        width: 4px;
        margin-left: 2px;
      }
    }
    
    @keyframes Loader {
      5%,
      100% {
        opacity: 1;
      }
      30% {
        width: 58px;
        margin-left: -29px;/* Prevent Object Moment from Beginning */
      }
      40%,
      82% {
        width: 180px;
        margin-left: -65px;
      }
      86%,
      100% {
        width: 4px;
        margin-left: 2px;
      }
    }
    .pre_loader .dx_rectangle {
      left: 0;
      bottom: 20px;
      width: 58px;
      height: 66px;
      border: 2px solid #313131;
      overflow: hidden;
      box-sizing: border-box;
      background-color: #fff;
    }
    .pre_loader .dx_rectangle span {
      left: 24px;
      bottom: 3px;
      font-size: 36px;
      font-weight: 700;
      color: #000000;
      animation: FillSpan 10s ease-in-out infinite;
      -webkit-animation: FillSpan 10s ease-in-out infinite;
    }
    .pre_loader .dx_rectangle.dx_outlines {
      animation: Outlines 10s ease-in-out infinite;
      -webkit-animation: Outlines 10s ease-in-out infinite;
    }
    .pre_loader .dx_rectangle.dx_fill {
      height: 4px;
      border-color: transparent;
      background-color: #5f5f5f;
      animation: Fill 10s ease-in-out infinite;
      -webkit-animation: Fill 10s ease-in-out infinite;
    }
    .pre_loader .dx_rectangle.dx_fill span {
      color: #fff;
    }

    @-webkit-keyframes Outlines {
      82% {
        width: 58px;
        height: 66px;
        bottom: 20px;
      }
      85%,
      100% {
        width: 4px;
        bottom: 0;
      }
      85%,
      86% {
        height: 86px;
        border-width: 2px;
      }
      89%,
      100% {
        height: 0;
        border-width: 0;
      }
    }
    
    @keyframes Outlines {
      82% {
        width: 58px;
        height: 66px;
        bottom: 20px;
      }
      85%,
      100% {
        width: 4px;
        bottom: 0;
      }
      85%,
      86% {
        height: 86px;
        border-width: 2px;
      }
      89%,
      100% {
        height: 0;
        border-width: 0;
      }
    }

    @-webkit-keyframes Fill {
      30%,
      100% {
        height: 66px;
      }
      30% {
        background-color: #3e3e3e;
      }
      40%,
      100% {
        background-color: #000000;
      }
      82% {
        width: 58px;
        height: 66px;
        bottom: 20px;
      }
      85%,
      100% {
        width: 4px;
        bottom: 0;
      }
      85%,
      86% {
        height: 86px;
        border-width: 2px;
      }
      89%,
      100% {
        height: 0;
        border-width: 0;
      }
    }

    @keyframes Fill {
      30%,
      100% {
        height: 66px;
      }
      30% {
        background-color: #3e3e3e;
      }
      40%,
      100% {
        background-color: #000000;
      }
      82% {
        width: 58px;
        height: 66px;
        bottom: 20px;
      }
      85%,
      100% {
        width: 4px;
        bottom: 0;
      }
      85%,
      86% {
        height: 86px;
        border-width: 2px;
      }
      89%,
      100% {
        height: 0;
        border-width: 0;
      }
    }

    @-webkit-keyframes FillSpan {
      80% {
        left: 24px;
      }
      84%,
      100% {
        left: -34px;
      }
      82% {
        bottom: 3px;
      }
      85%,
      100% {
        bottom: 9px;
      }
    }

    @keyframes FillSpan {
      80% {
        left: 24px;
      }
      84%,
      100% {
        left: -34px;
      }
      82% {
        bottom: 3px;
      }
      85%,
      100% {
        bottom: 9px;
      }
    }
    .pre_loader .dx_rinkin_coffee {
      left: -220px;
      top: 19px;
      width: fit-content;
      animation: rinkinCoffee 10s ease-in-out infinite;
      -webkit-animation: rinkinCoffee 10s ease-in-out infinite;
    }
    .pre_loader .dx_rinkin_coffee span {
      display: inline-block;
      position: static;
      color: #313131;
    }
    .pre_loader .dx_rinkin_coffee span.dx_rinkin {
      font-size: 36px;
      font-weight: 700;
    }
    .pre_loader .dx_rinkin_coffee span.dx_coffee {
      font-family: "Monospace", serif;
      font-size: 41px;
      font-weight: 400;
    }

    @-webkit-keyframes rinkinCoffee {
      30% {
        left: -220px;
      }
      40%,
      82% {
        left: 62px;
      }
      86%,
      100% {
        left: -260px;
      }
    }
    
    @keyframes rinkinCoffee {
      30% {
        left: -220px;
      }
      40%,
      82% {
        left: 62px;
      }
      86%,
      100% {
        left: -260px;
      }
    }
    .pre_loader .dx_slogan {
      left: 100px;
      bottom: 0;
      width: fit-content;
      font-size: 12px;
      line-height: 16px;
      color: #313131;
      opacity: 0;
      animation: Slogan 10s ease-in-out infinite;
      -webkit-animation: Slogan 10s ease-in-out infinite;
    }
    
    @-webkit-keyframes Slogan {
      42% {
        opacity: 0;
      }
      48%,
      100% {
        opacity: 1;
      }
      81% {
        right: 2px;
      }
      86%,
      100% {
        right: 58px;
      }
    }

    @keyframes Slogan {
      42% {
        opacity: 0;
      }
      48%,
      100% {
        opacity: 1;
      }
      81% {
        right: 2px;
      }
      86%,
      100% {
        right: 58px;
      }
    }