#loader-wrapper {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1000;
}
#loader {
  display:block;
  position: relative;
  top:50%;
  left:50%;
  width:9.375rem;
  height:9.375rem;
  margin:-4.375rem 0 0 -4.375rem;
  border:0.188rem solid transparent;
  border-top-color:white;
  border-radius:100%;
  -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
  z-index:1001;
}
#loader:before {
  content:"";
  position: absolute;
  top:0.313rem;
  left:0.313rem;
  right:0.313rem;
  bottom:0.313rem;
  border:0.188rem solid transparent;
  border-top-color: #87C25D;
  border-radius:100%;
  -webkit-animation: spin 3s linear infinite;
          animation: spin 3s linear infinite;
}
#loader:after {
  content:"";
  position: absolute;
  top:0.75rem;
  left:0.75rem;
  right:0.75rem;
  bottom:0.75rem;
  border:0.188rem solid transparent;
  border-top-color:#5198B4;
  border-radius:100%;
  -webkit-animation: spin 1.5s linear infinite;
          animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
  0%   {
    -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
  }
}
@keyframes spin {
  0%   {
    -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
  }
}

#loader-wrapper .loader-section {
  position:fixed;
  top:0;
  background:#11313D;
  width:50%;
  height:100%;
  z-index:1000;
  opacity: 0.3;

}

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

/* Loaded Styles */
.loaded #loader-wrapper .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 .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 {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
  visibility: hidden;
  transform:translateY(-100%);
  transition: all 0.3s 1s ease-out;
}

#loader-wrapper .loader-msg {
  position: absolute;
  width: 500px;
  height: 50px;
  top: 70%;
  left: 50%;
  margin-left: -80px; /* margin is -0.5 * dimension */
  font-weight: bold;
  color: black;
}