/* PRELAODER */
.preloader {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 12;
  background: #fff url(../images/bg-load.webp) center 50% / cover no-repeat fixed;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-duration: 700ms;
  -webkit-transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 0.95s;
  overflow: hidden;
}
.preloader * {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-duration: 700ms;
  -webkit-transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.preloader .layer {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background: #fff url(../images/bg-load.webp) center 50% / cover no-repeat fixed;
  transition-delay: 0.3s;
}
.preloader .inner {
  display: inline-block;
  text-align: center;
  position: relative;
  z-index: 2;
}
.preloader .inner figure {
  display: block;
  margin-bottom: 10px;
  transition-delay: 0.1s;
}
.preloader .inner figure img {
  height: 60px;
}
.preloader .inner p {
  font-weight: 600;
  color: #fff;
  font-size: 13px;
  display: block;
}
/* TRANSITION OVERLAY */
.transition-overlay {
  width: 100%;
  height: 100vh;
  position: fixed;
  left: -100%;
  top: 0;
  z-index: 12;
  background: #fff url(../images/bg-load.webp) center 50% / cover no-repeat fixed;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-duration: 700ms;
  -webkit-transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  overflow: hidden;
}
.transition-overlay .layer {
  width: 100%;
  height: 100vh;
  position: absolute;
  right: -100%;
  top: 0;
  background: #fff url(../images/bg-load.webp) center 50% / cover no-repeat fixed;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-duration: 700ms;
  -webkit-transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 0.6s;
}
.transition-overlay.active {
  left: 0;
}
.transition-overlay.active .layer {
  right: 0;
}

/* PAGE LOADED */
.page-loaded .preloader {
  right: -100%;
}

.page-loaded .preloader .inner figure {
  opacity: 0;
  transform: scale(1.5);
}

.page-loaded .preloader .inner p {
  transform: translateY(20px);
  opacity: 0;
}

.page-loaded .preloader .layer {
  left: -100%;
}

.page-loaded .navbar .container .upper-side {
  transform: translateY(0);
}

.page-loaded .navbar .container .menu {
  opacity: 1;
}

.page-loaded .slider .slider-container {
  transform: scale(1);
  opacity: 1;
}
@media only screen and (max-width: 610px)
{
    .preloader .layer {
 
  background: #fff!important;
 
}
    
    }