#APP-page-loading {
   background-color: #000;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   position: fixed;
   z-index: 999999;
   text-align:center;
   /*margin-top: -10px;*/
}
.loader-content-page {
  font-size: .8em;
  top: 50%;
  display: inline-block;
  width: 5em;
  height: 1em;
  line-height: 1.3;
  position: relative;
  color: #0E5F76;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-bottom: .1em solid;
  margin-left: -5em;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
  -webkit-animation: APPloadingText 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, APPloadingBar 8s infinite cubic-bezier(0.445, 0.050, 0.550, 0.950) alternate;
          animation: APPloadingText 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, APPloadingBar 8s infinite cubic-bezier(0.445, 0.050, 0.550, 0.950) alternate;
}
#toggle:checked ~ #sect .loader-content-page {
  -webkit-animation: APPloadingTextMove 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, APPloadingText 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, APPloadingBar 8s infinite cubic-bezier(0.445, 0.050, 0.550, 0.950) alternate;
          animation: APPloadingTextMove 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, APPloadingText 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, APPloadingBar 8s infinite cubic-bezier(0.445, 0.050, 0.550, 0.950) alternate;
  -webkit-filter: drop-shadow(0.2em 0.2em 0.2em rgba(0, 0, 0, 0.5));
          filter: drop-shadow(0.2em 0.2em 0.2em rgba(0, 0, 0, 0.5));
}
.loader-content-page:before, .loader-content-page:after {
  content: '';
  width: 7em;
  height: 7em;
  position: absolute;
  top: -3em;
  left: -.5em;
  right: 0;
  bottom: 0;
  border-radius: 50%;
}
.loader-content-page:before {
  -webkit-box-shadow: inset 0 0 0 0.2em rgba(8, 61, 86, 0.5);
          box-shadow: inset 0 0 0 0.2em rgba(8, 61, 86, 0.5);
  -webkit-animation: loadingInner 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate;
          animation: loadingInner 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate;
}
.loader-content-page:after {
  color: #083D56;
  border-radius: 50%;
  border: .2em dashed;
  border-top: 0.2em solid #0E5F76;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-animation: loading 1s infinite cubic-bezier(0.6, 0, 0.4, 1);
          animation: loading 1s infinite cubic-bezier(0.6, 0, 0.4, 1);
}

@-webkit-keyframes loading {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes loading {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes loadingInner {
  to {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
@keyframes loadingInner {
  to {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
@-webkit-keyframes APPloadingText {
  0% {
    color: #0E5F76;
    width: 0em;
  }
  100% {
    color: #081E3F;
    width: 4em;
  }
}
@keyframes APPloadingText {
  0% {
    color: #0E5F76;
    width: 0em;
  }
  100% {
    color: #081E3F;
    width: 4em;
  }
}
@-webkit-keyframes APPloadingTextMove {
  0% {
    text-indent: 1em;
  }
  100% {
    text-indent: -1em;
  }
}
@keyframes APPloadingTextMove {
  0% {
    text-indent: 1em;
  }
  100% {
    text-indent: -1em;
  }
}
@-webkit-keyframes APPloadingBar {
  0% {
    width: 0em;
  }
  100% {
    width: 6em;
  }
}
@keyframes APPloadingBar {
  0% {
    width: 0em;
  }
  100% {
    width: 6em;
  }
}

/*4 squares*/
.APP_loading_4squares {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.APP_loading_square {
  width: 100px;
  height: 100px;
  position: absolute;
}

.APP_loading_square-1 {
  background-color: #FA5667;
  top: 0;
  left: 0;
  z-index: 1;
  animation: Ani_square1_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

.APP_loading_square-2 {
  background-color: #7A45E5;
  top: 0;
  right: 0;
  animation: Ani_square2_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

.APP_loading_square-3 {
  background-color: #1B91F7;
  bottom: 0;
  right: 0;
  z-index: 1;
  animation: Ani_square3_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

.APP_loading_square-4 {
  background-color: #FAC24C;
  bottom: 0;
  left: 0;
  animation: Ani_square4_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

@keyframes Ani_square1_move {
  0%, 100% {transform: translate(0, 0)} 
  25% {transform: translate(0, 100px)} 
  50% {transform: translate(100px, 100px)} 
  75% {transform: translate(100px, 0)} 
}

@keyframes Ani_square2_move {
  0%, 100% {transform: translate(0, 0)} 
  25% {transform: translate(-100px, 0)} 
  50% {transform: translate(-100px, 100px)} 
  75% {transform: translate(0, 100px)} 
}

@keyframes Ani_square3_move {
  0%, 100% {transform: translate(0, 0)} 
  25% {transform: translate(0, -100px)} 
  50% {transform: translate(-100px, -100px)} 
  75% {transform: translate(-100px, 0)} 
}

@keyframes Ani_square4_move {
  0%, 100% {transform: translate(0, 0)} 
  25% {transform: translate(100px, 0)} 
  50% {transform: translate(100px, -100px)} 
  75% {transform: translate(0, -100px)} 
}


.APP_loading_3circle {
  height: 50px;
  /*margin-top: calc(50vh - 25px);
  margin-left: calc(50vw - 160px);*/
  width: 180px;
  margin: 0 auto;

  /*position: absolute;
  top: 50%;
  left: 50%;
  margin: 25px 0 0 -90px;*/
}
.APP_loading_circle {
  border-radius: 50%;
  border: 3px solid;
  float: left;
  height: 50px;
  margin: 0 5px;
  width: 50px;
}
  .APP_loading_circle-1 {
    animation: APP_loading_move 1s ease-in-out infinite;
    border-color: #D91E18;
  }
  .APP_loading_circle-1a {
    animation: APP_loading_fade 1s ease-in-out infinite;
  }
  @keyframes APP_loading_fade {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }
  .APP_loading_circle-2 {
    animation: APP_loading_move 1s ease-in-out infinite;
    border-color: #4B77BE;
  }
  @keyframes APP_loading_move {
    0% {transform: translateX(0);}
    100% {transform: translateX(60px);}
  }
  .APP_loading_circle-1a {
    margin-left: -55px;
    opacity: 0;
  }
  .APP_loading_circle-3 {
    animation: APP_loading_circle-3 1s ease-in-out infinite;
    border-color: #26C281;
    opacity: 1;
  }
  @keyframes APP_loading_circle-3 {
    0% {opacity: 1;}
    100% {opacity: 0;}
  }