/* ========== loading css start ========== */
.loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; opacity: 1; }
.loaded .loader-wrapper.abs-pos{visibility: visible;}
.loaded .loader-wrapper.abs-pos #loader{ opacity: 1;}
.loader-wrapper.abs-pos,
.loader-wrapper.abs-pos .loader-section
{ position: absolute; overflow: hidden; visibility: visible; transform: translateY(0%) !important;  }
.loader-wrapper.abs-pos{z-index: 2;}
.loader-wrapper #loader.multi-ring{ display: block; position: relative; left: 50%; top: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%; border: 3px solid transparent; border-top-color: #397ed9; animation: spin 2s linear infinite; z-index: 1001;}
.loader-wrapper #loader.multi-ring:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px;border-radius: 50%; border: 3px solid transparent; border-top-color: #649ae1; animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ }
.loader-wrapper #loader.multi-ring:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #8fb6e9; animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
@keyframes spin {0% {transform: rotate(0deg);} 100% { transform: rotate(360deg);}}
.loader-wrapper .loader-section { position: fixed; top: 0; width: 50%; height: 100%; background: #222222; z-index: 1000; transform:translateX(0);}
.loader-wrapper.light-dark-bg .loader-section {background: RGBA(0, 0, 0, 0.6) !important;} .loader-wrapper.light-light-bg .loader-section {background: RGBA(254, 254, 254, 0.66) !important; }
 .loader-wrapper .loader-section.section-left { left: 0;}
.loader-wrapper .loader-section.section-right { right: 0; }
/* ========  when loaded curtain remove ======== */
.loaded .commen-loading { opacity: 0; }
.loaded  .loader-wrapper.abs-pos .loader-section { opacity: 1;}
.loaded .loader-wrapper .loader-section{ opacity: 0; }
.loaded .loader-wrapper.with-js .loader-section.section-left { transform: translateX(-100%);transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); }
.loaded .loader-wrapper.with-js .loader-section.section-right { transform: translateX(100%);transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); }
.loaded .loader-wrapper.with-js #loader,
.loaded .loader-wrapper #loader{ opacity: 0; transition: all 0.3s ease-out; }
.loaded .loader-wrapper.with-js,
.loaded .loader-wrapper
{ visibility: hidden; transform: translateY(-100%);  transition: all 0.3s 1s ease-out; }

.loader-wrapper #loader .google-loading { z-index: 1001; position: absolute; left: 50%; top: 50%; margin-left: -62px; }
.loader-wrapper #loader .google-loading span { height: 20px; width: 20px; position: absolute; border-radius: 50%; background: #000; display: inline-block; }
.loader-wrapper #loader .google-loading span:first-child { animation: ggl-move 1s ease-in-out infinite alternate; background: #397ed9; margin-left: 0; }
.loader-wrapper #loader .google-loading span:nth-child(2){ animation: ggl-move 1s ease-in-out -0.25s infinite alternate; margin-left: 35px; background: #4f8cdd; }
.loader-wrapper #loader .google-loading span:nth-child(3){ animation: ggl-move 1s ease-in-out -0.5s infinite alternate; margin-left: 70px; background: #79a8e5;}
.loader-wrapper #loader .google-loading span:nth-child(4){ animation: ggl-move 1s ease-in-out -0.75s infinite alternate; margin-left: 105px; background: #8fb6e9; }
@keyframes ggl-move { 0% { transform: translateY(-10px); } 100% {transform: translateY(5px);} }
.loader-wrapper #loader .bars-loading { position: absolute; width: 50px; height: 50px; margin: -25px 0 0 -25px; left: 50%; top: 50%; display: block; z-index: 1001;}
.loader-wrapper #loader .bars-loading span { position: absolute; width: 9px; height: 5px; bottom: 23px; background: rgba(0, 0, 0, 0.25); animation: 1.5s ease-in-out 0s normal none infinite running bars1; }
.loader-wrapper #loader .bars-loading span:nth-child(2) { animation-delay: 0.2s; left: 11px; }
.loader-wrapper #loader .bars-loading span:nth-child(3) { animation-delay: 0.4s; left: 22px; }
.loader-wrapper #loader .bars-loading span:nth-child(4) { animation-delay: 0.6s; left: 33px; }
.loader-wrapper #loader .bars-loading span:nth-child(5) { animation-delay: 0.8s; left: 44px; }
@keyframes bars1 { 0% { background: #d62d20; height: 5px; transform: translateY(0px); } 25% { background: #ffa700; height: 30px; transform: translateY(15px); } 50% { background: #008744; height: 5px; transform: translateY(0px); } 100% { background: #0057e7; height: 5px; transform: translateY(0px); } }
.loader-wrapper #loader .bars-loading-shift { position: absolute; display: block; height: 50px; left: 50%; margin: -25px 0 0 -25px; position: absolute; top: 50%; width: 50px; z-index: 1001; }
.loader-wrapper #loader .bars-loading-shift span {animation: 2s ease-in-out 0s normal none infinite running bars-shift; background: rgba(0, 0, 0, 0.25); bottom: 10px; display: block; height: 5px; position: absolute; width: 9px; background: #649ae1; }
.loader-wrapper #loader .bars-loading-shift span:nth-child(2) { animation-delay: 0.2s; left: 11px; }
.loader-wrapper #loader .bars-loading-shift span:nth-child(3) { animation-delay: 0.4s; left: 22px; }
.loader-wrapper #loader .bars-loading-shift span:nth-child(4) { animation-delay: 0.6s; left: 33px; }
.loader-wrapper #loader .bars-loading-shift span:nth-child(5) { animation-delay: 0.8s; left: 44px; }
@keyframes bars-shift { 0% { box-shadow: inset 0 30px 0 0 rgba(255,255,255,0.3); height: 5px; transform: translateX(0px); } 25% { box-shadow: inset 0 30px 0 0 rgba(255,255,255,0.0); height: 30px; transform: translateX(0px); } 50% { box-shadow: inset 0 30px 0 0 rgba(255,255,255,0.3); height: 30px; transform: translateX(10px); } 100% { box-shadow: inset 0 30px 0 0 rgba(255,255,255,0.0); height: 5px; transform: translateX(0px);}
}