#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
}
   
#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #fff;
  z-index: 1001;
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

#loader {
  z-index: 1002;
}

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(-100%);  /* Internet Explorer 9 */
    transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
}
 
.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(100%);  /* IE 9 */
    transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
}

.loaded #loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out; 
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
}

.loaded #loader {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out; 
            transition: all 0.3s ease-out;
}

.loaded #loader-wrapper .loader-section.section-right,
.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper {
        -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
                transform: translateY(-100%);
 
        -webkit-transition: all 0.3s 1s ease-out; 
                transition: all 0.3s 1s ease-out;
}

#loader-wrapper  .logo-loading {
margin: 0px auto;
text-align: center;
    position: relative;
z-index: 9999;
margin-top: 20%;
}
#loader-wrapper .logo-loading img {
display: inline-block;
}
.loaded #loader-wrapper .logo-loading{
    opacity: 0;
    -webkit-transition: all 0.3s ease-out; 
            transition: all 0.3s ease-out;

}
.loading:before,
.loading:after{
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin: 0 0.7em;
	width: 10em;
	border-bottom: 10px solid #169d97;  
  -moz-animation: loading 3s forwards linear;
  -webkit-animation: loading 3s forwards linear;
  animation: loading 3s forwards linear;
  
  -moz-animation-iteration-count:infinite;
 -webkit-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
}



/*Animation time*/
@-webkit-keyframes loading {
  0% {width: 0em; opacity:0.1}
  70% {width: 8em; opacity:1.0}
  100% {width: 10em; opacity:0.0}
}
@-moz-keyframes loading {
  0% {width: 0em; opacity:0.1}
  70% {width: 8em; opacity:1.0}
  100% {width: 10em; opacity:0.0}
}
@keyframes loading {
  0% {width: 0em; opacity:0.1}
  70% {width: 8em; opacity:1.0}
  100% {width: 10em; opacity:0.0}
}