@font-face {
    font-family: 'Butler';
    src: url('fonts/butler/Butler_Webfont/Butler.woff2') format('woff2'),
        url('fonts/butler/Butler_Webfont/Butler.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

body {
    /* required for scrollspy */
    position: relative;
    font-family: 'Butler', sans-serif;
    color: rgba(0,0,0,0.7);

}

* {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

@media (min-width:992px){
    /* overwrite class so no collapse animations on boostrap 4 "large" screen */
    .collapsing {
        transition: none;
    }

}

.ParallaxVideo {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}

.ParallaxVideo video{
    /* 
    this works well on large screens
    position: fixed;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1; */

    /* this is OK for both */
    position: fixed;
    width: 100vmax;
    min-height: 100vh;
    object-fit: cover;
    z-index: -1;
}

.ParallaxVideo .video-blur-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  filter: blur(24px) brightness(0.7);
  z-index: -2;
}

.ParallaxVideo .video-main {
  position: fixed;
  top: 0; 
  left: -10vw;
  width: 120vw;
  height: 100vh;
  object-fit: contain;
  z-index: -1;
  background: transparent;
  pointer-events: none;
}

nav.navbar-styled {
    background:rgb(241, 241, 241);
}   

.navbar-logo {
    text-align: center;
    font-size: xx-large;
}

.container-separator {
    height: 50vh;
}

.container-separator-lg {
    height: 80vh;
}

.container-body {
    /* max-width: 960px; */
    max-width: 100%;    
    margin: 0 auto;
    background:rgb(241, 241, 241);
    padding: 25px;
    font-family: 'Butler', sans-serif;
    font-size: large;
    position: relative;
    z-index: 1;
}

a.anchor {
    display: block;
    position: relative;
    top: -125px;
    visibility: hidden;
}

a.deco-none {
    color: inherit;
    text-decoration:none;
}

.vertical-line {
    border-left: 3px solid grey;
    height: 180px;
}

ul li {
    list-style-type: " ~ ";
}

#gallery-carousel {
    max-width: 700px;
    margin: 0 auto;
}

.carousel-inner .carousel-item img {
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    display: block;
    object-fit: cover;
    background: #f5f5f5;
    border-radius: 10px;
}