@charset "utf-8";
.loader                         { position: fixed; left: 0; top: 0; background: rgba(255, 255, 255, 1); height: 100%; width: 100%; font-family: "Open Sans", sans-serif; z-index: 999; }
.loader::after                  { content: ""; position: fixed; left: calc(50% - 160px); top: calc(50% - 120px); width: 320px; height: 240px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; background: rgba(255, 255, 255, 1); z-index: -1; }
.loader.context-mode            { background: rgba(255, 255, 255, 0.5); }
.loader .bars                   { position: absolute; top: calc(50% - 140px); left: calc(50% - 100px); width: 200px; height: 100px; perspective: 200vw; transform-style: preserve-3d; z-index: 999; }
.loader .bars--reflect          { top: calc(50% - 10px); opacity: 0.5;}

.loader .tagline                { background: transparent; font-family: "Open Sans", sans-serif; margin: 0; padding: 0; line-height: 50px; font-size: 36.6px; font-weight: 900; text-align: center; width: 100%; position: fixed; top: calc(50% - 36px); left: 0; z-index: 9999; }
.loader .tagline label span     { color: rgba(0, 0, 0, 1); } 
.loader .tagline label          { color: rgba(20, 59, 106, 1); }
.loader .tagline a, 
.loader .tagline a + span       { color: rgba(255, 255, 255, 1); } 
.loader .tagline .tt-aplicacion { display: block; padding: 0; text-align: center; font-size: 10.8px !important; font-weight: 100; text-transform: initial; height: 20px; margin: -25px 0 0 0; width: 100%; }

.loader .bars .bar                  { position: absolute; bottom: 0; left: 0; color: rgba(255, 255, 255, 1); box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2) inset; border-radius: 300% 50% 150% 50%; text-align: center; width: 22px; height: 50px; background-color: rgba(20, 59, 106, 1); /*transform: scaleY(0); transform-style: preserve3d; animation: bar 8s cubic-bezier(.81,.44,.4,.7) infinite;*/ }
.loader .bars .bar::before          { content: attr(data-char); position: absolute; bottom: 0; text-align: center; left: 0; width: 100%; }
.loader .bars .bar:nth-child(2)     { left: 20px; background-color: rgba(20, 59, 106, 0.9); height: 32px; }
.loader .bars .bar:nth-child(3)     { left: 40px; background-color: rgba(20, 59, 106, 0.8); height: 40px; }
.loader .bars .bar:nth-child(4)     { left: 60px; background-color: rgba(20, 59, 106, 0.7); height: 45px; }
.loader .bars .bar:nth-child(5)     { left: 80px; background-color: rgba(20, 59, 106, 0.6); height: 40px; }
.loader .bars .bar:nth-child(6)     { left: 100px; background-color: rgba(20, 59, 106, 0.5); height: 40px; }
.loader .bars .bar:nth-child(7)     { left: 120px; background-color: rgba(20, 59, 106, 0.4); height: 45px; }
.loader .bars .bar:nth-child(8)     { left: 140px; background-color: rgba(20, 59, 106, 0.3); height: 40px; }
.loader .bars .bar:nth-child(9)     { left: 160px; background-color: rgba(20, 59, 106, 0.2); height: 32px; }
.loader .bars .bar:nth-child(10)    { left: 180px; background-color: rgba(20, 59, 106, 0.1); height: 50px; }
.loader .bars .bars--reflect .bar   { animation-name: bar-reflect; }

.progress-bar                           { margin: 0 auto; width: 320px; height: 80px; position: fixed; top: calc(50% + 40px); left: calc(50% - 160px); overflow: hidden; }
.progress-bar .progress                 { position: relative; background-color: rgba(62, 116, 180, 1); height: 10px; width: 100%; animation: width 5s cubic-bezier(1, 0, 0.65, 0.85) infinite; }
.progress-bar .progress::before         { content: ""; animation: none; position: fixed; height: 10px; width: 320px; background: rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); left: calc(50% - 160px); top: calc(50% + 40px); z-index: -1; }
/*.progress-bar .progress::after          { content:""; background: #f0f0f0; position: fixed; height: 4em; width: 100%; top: 100%; z-index: -1; }*/
.progress-bar .progress p               { width: 320px; padding: 1rem; text-align: center; color: rgba(0, 0, 0, 0.75); font-weight: 600; position: fixed; left: calc(50% - 160px); top: calc(50% + 40px); } 

@keyframes width {
    0%      { width: 0; }
    49%     { width: 100%; }
    50%     { left: 0; }
    100%    { left: 330px; }
}

@keyframes bar {
    0% { border-radius: 300% 50% 150% 50%; } 50% { border-radius: 10%; } 100% { border-radius: 300% 50% 150% 50%; }
}

@keyframes bar-reflect {
    0% { transform: rotateZ(180deg) rotateX(360deg); } 50%,100% { transform: rotateZ(0) rotateX(0); }
}