/* Custom Preloading Animation CSS */
* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.res-container {
  width: 100%;
  position: absolute;
  margin-bottom: 0;
}

.res-row {
  display: flex;
}
#box {
  flex: 1;
  width: 100%;
}
#block-1 {
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}
.b3 {
  position: fixed;
}
#loader-wrap {
  display: flex;
}
#loading {
  background-color: #696cff;
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 9999;
  margin-top: 0;
  top: 0;
  left: 0;
}
#loading-center {
  width: 100%;
  height: 100%;
  position: relative;
}
#loading-center-absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 200px;
  width: 200px;
  margin-top: -100px;
  margin-left: -100px;
}
#object {
  width: 200px;
  height: 200px;
  background-image: url(https://reech.ca/wp-content/uploads/2017/09/reech-logo-no-text.svg);
  background-repeat: no-repeat;
  margin-right: auto;
  margin-left: auto;
  margin-top: 20px;
  animation: object .8s linear;
  transform-origin: center center;
}
@keyframes object {
  0% {transform: scale(0); opacity: 0}
  50% {transform: scale(1.5); opacity: 1}
  100% {transform: scale(1); opacity:1}
}
#loader {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -50px;
  width: 100px;
  height: 3px;
  overflow: hidden;
}
#loader:before, #loader:after {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 3px;
  transform: translate(-100%, 0);
}
#loader:before {
  background-color: #0e3b5a;
  animation: loading 3400ms cubic-bezier(0.23, 1, 0.32, 1);
}
#loader:after {
  background-color: #fff;
  animation: loading 2500ms 500ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes loading {
  75% {transform: translate(0, 0);}
  100% {transform: translate(100%, 0);}
}
.zoomOut {
  animation-name: zoomOut;
  animation-duration: 2s;
  animation-iteration-count: 2;
  animation-timing-function: ease-in-out;
  visibility: visible !important;
}
@keyframes zoomOut {
  from {opacity: 1;}
  50% {opacity: 0; transform: scale3d(.3, .3, .3);}
  to {opacity: 0;}
}
.slideDown {
  animation-name: slideDown;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  visibility: visible !important;
}
@keyframes slideDown {
  from {transform: translateY(0%);}
  to {transform: translateY(100%);}
}
.slideInUp {
  animation-name: slideInUp;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  visibility: visible !important;
}
@keyframes slideInUp {
  from {transform: translateY(100%);}
  to {transform: translateY(0%);}
}