@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');
.google-sans-flex-<uniquifier> {
  font-family: "Google Sans Flex", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "ROND" 0;
}
body {
    font-family: "Google Sans Flex", sans-serif;
    font-style: normal;
    width: 100%;
    overflow-x: hidden;
}
@media (min-width: 1400px) {
    .col-xxl {
        -ms-flex-preferred-size:0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-xxl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-xxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-xxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-xxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-xxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-xxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-xxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-xxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-xxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-xxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-xxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-xxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-xxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}
.w-100vw{ width: 100vw; }
.h-100vh{ height: 100vh; }
/* TRANSITION OVERLAY */
.transition-overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  right: calc(-100% - 200px);
  bottom: 0;
  background: #282828;
  z-index: 99;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  visibility: hidden;
}
.transition-overlay:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 200px 100vh 0;
  border-color: transparent #282828 transparent transparent;
  position: absolute;
  left: -200px;
  top: 0;
}
.transition-overlay.active {
  right: 0;
  visibility: visible;
}

/* PRELOADER */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  margin: auto;
  width: 100vw;
  height: 100vh;
  background-color: #282828;
  background: #000 url(../img/screen1-bg-low.jpg) no-repeat center top / cover;
  opacity: 1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  z-index: 99;
  transition-delay: 0.65s;
}
.preloader * {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.preloader:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 200px 100vh 0;
  border-color: transparent #282828 transparent transparent;
  position: absolute;
  left: -200px;
  top: 0;
}
.preloader:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100vh 0 0 200px;
  border-color: transparent transparent transparent #282828;
  position: absolute;
  right: -200px;
  top: 0;
}
.preloader .inner {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.preloader .inner .logo {
  display: inline-block;
  margin: 0;
  animation: fadeInUp ease 0.6s;
}
.preloader .inner .logo img {
  height: 350px;
}
/*.preloader .inner .percentage {
  width: 100%;
  font-size: 70vh;
  line-height: 1;
  font-weight: 800;
  color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  opacity: 0.05;
  transition-delay: 0.1s;
}*/
.preloader .inner .percentage {
  width: 100%;
  font-size: 10vh;
  line-height: 1;
  font-weight: 800;
  color: #fff;
  position: absolute;
  bottom: 10%;
  transform: translateY(-50%);
  text-align: center;
  opacity: 0.05;
  transition-delay: 0.1s;
}

.page-loaded .preloader {
  left: calc(-100% - 200px);
  visibility: hidden;
}

.page-loaded .preloader .logo {
  transform: translateX(-100px);
  opacity: 0;
}

/*.page-loaded .preloader .percentage {
  margin-left: 100px;
  opacity: 0;
}*/

.page-loaded .preloader .percentage {
  margin-left: 0;
  opacity: 0;
}

.container-fluid {
    background: rgba(0,0,0,0.3);
    height: 100%;
}
h1 {
    text-shadow: none;
    font-weight: 800;
    letter-spacing: 3px;
    font-size: 1.8em;
    text-shadow: 0 0.01em 1px rgba(255, 255, 255, 0.4);
}
h1 span.thin {
    display: block;
    font-size: 0.6em;
    font-weight: 600;
    letter-spacing: 10px;
    color: #292929;
    line-height: 1.5em;
}
h2{ 
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 2.5em;
  color: #7F3992;
}
p{ 
  color: #FFF;
  font-weight: 300;
  font-size: 1.3em;
  letter-spacing: 1px;
}
p strong{
  font-weight: 600;
}
h3{ color: #FFF; font-size: 2em; font-weight: 700; letter-spacing: 2px; }
.text-shadow-dark *{ text-shadow: 0 0 2px rgba(0,0,0,0.6);  }
.text-shadow-light *{ text-shadow: 0 0.01em 1px rgba(255, 255, 255, 0.4); color: #000; letter-spacing: 3px;}

p img.logo {
    width: 100px;
}
.banner { background-attachment: fixed; }
@media (max-width: 580px){
  .text-shadow-dark *, .text-shadow-light *{
    letter-spacing: 0;
  }
  h1 span.thin{ letter-spacing: 2px; }
  body {
    background: url('../img/home-bg.jpg');
    background-size: 200% 2px !important;
    background-position-x: 40% !important;
    background-repeat: repeat-y;
  }
  .banner {
    background-position: 40% 90% !important;
    background-size: 200% !important;
  } 
}