.reveal {
    /*opacity: 0;
    transition: opacity 1s ease-out;*/
    opacity: 1;
}

.reveal.visible {
    opacity: 1;
}


div.overlay {
    display: flex;
    position: relative;
}
div.overlay > div:not(.navigation) {
    width: 100%;
    overflow: scroll;
    display: flex;
    overflow-y:hidden;
    position: relative;
}
div.overlay > div:not(.navigation) > div {
    min-width: 100%;
    background-size: cover;
    position:relative;
    background-position:center;
}
div.overlay > .navigation {
    position: absolute;
    z-index:5;
    top: 50%;
    transform: translateY(-50%);
    padding: 25px;
    font-size:30px;
    cursor:pointer;
    box-sizing: border-box;
}
div.overlay > .navigation.left i, div.overlay > .navigation.right i {
    font-style:normal;
}
div.overlay > .navigation.right {
    right:0;
}
div.overlay > div:not(.navigation) > div > div.inner {
    width:fit-content;
    height:fit-content;
    text-align: center;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}
div.overlay > div:not(.navigation) > div > div.inner a.button.last {
    margin-left:5px;
}

div.overlay > div:not(.navigation) > div > div.inner.position-left-middle {
    left:25px;
    transform: translate(0, -50%);
}
div.overlay > div:not(.navigation) > div > div.inner.position-right-middle {
    left:unset;
    right:25px;
    transform: translate(0, -50%);
}
div.overlay > div:not(.navigation) > div > div.inner.position-left-top {
    left:25px;
    top:25px;
    transform: translate(0, 0);
}
div.overlay > div:not(.navigation) > div > div.inner.position-right-top {
    right:25px;
    top:25px;
    left:unset;
    transform: translate(0, 0);
}
div.overlay > div:not(.navigation) > div > div.inner.position-center-top {
    top:25px;
    transform: translate(-50%, 0);
}
div.overlay > div:not(.navigation) > div > div.inner.position-left-bottom {
    left:25px;
    top:unset;
    bottom:25px;
    transform: translate(0, 0);
}
div.overlay > div:not(.navigation) > div > div.inner.position-right-bottom {
    right:25px;
    top:unset;
    left:unset;
    bottom:25px;
    transform: translate(0, 0);
}
div.overlay > div:not(.navigation) > div > div.inner.position-center-bottom {
    top:unset;
    bottom:25px;
    transform: translate(-50%, 0);
}

div.overlay .video-background {
    position: absolute;
    width: 100vw;
    height: 56.25vw;
}
div.overlay .video-foreground {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 100vw;
    height: 56.25vw;
}
div.overlay iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: calc(100% + 100px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    margin-top: -50px;
}
@media (min-aspect-ratio: 16/9) {
    div.overlay .video-foreground, div.overlay .video-background  {
        width: 100vw;
        height: 56.25vw; /* 100 * (9/16) */
    }
}
@media (max-aspect-ratio: 16/9) {
    div.overlay .video-foreground, div.overlay .video-background {
        width: 177.78vh; /* 100 * (16/9) */
        height: 100vh;
    }
}









.beforeAfterContainer {
    position: relative;
    max-width: 800px !important;
    height: 400px;
    border:none;
}
.beforeAfterContainer .beforeAfterImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 800px auto;
    background-position-y: center;
}
.beforeAfterContainer .beforeAfterSlider {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    background: none;
    outline: none;
    margin: 0;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}
.beforeAfterContainer .beforeAfterSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 6px;
    height: 400px;
    background: white;
    cursor: pointer;
}
.beforeAfterContainer .beforeAfterSlider::-moz-range-thumb {
    width: 6px;
    height: 400px;
    background: white;
    cursor: pointer;
}
.beforeAfterContainer .beforeAfterSliderButton {
    pointer-events: none;
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;
    left: calc(50% - 18px);
    top: calc(50% - 18px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.beforeAfterContainer .beforeAfterSliderButton:after {
    content: '';
    padding: 3px;
    display: inline-block;
    border: solid #5d5d5d;
    border-width: 0 2px 2px 0;
    transform: rotate(-45deg);
}
.beforeAfterContainer .beforeAfterSliderButton:before {
    content: '';
    padding: 3px;
    display: inline-block;
    border: solid #5d5d5d;
    border-width: 0 2px 2px 0;
    transform: rotate(135deg);
}

.columns {
    background-size:cover;
}

.buttons a {
    margin-left:5px;
}
.buttons a:first-child {
    margin-left:0;
}

.imageGallery {
    text-align:left !important;
}
.imageGallery .imageGalleryPhotos {
    display:flex;
    overflow:scroll;
}
.imageGallery.one .imageGalleryPhotos {
    display:grid;
    grid-template-columns: 1fr;
}
.imageGallery.two .imageGalleryPhotos {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
}
.imageGallery.three .imageGalleryPhotos {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
}
.imageGallery.four .imageGalleryPhotos {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
}
.imageGallery.five .imageGalleryPhotos {
    display:grid;
    grid-template-columns: repeat(5, 1fr);
}
.imageGallery.six .imageGalleryPhotos {
    display:grid;
    grid-template-columns: repeat(6, 1fr);
}
.imageGallery img {
    width:100%;
    min-width:0;
}
@media (max-width: 600px) {
    .imageGallery {
        padding-left:5px;
        padding-right:5px;
    }
    .imageGallery .imageGalleryPhotos {
        display:grid;
        column-gap:5px;
        gap:5px;
    }
    .imageGallery:not(.one) .imageGalleryPhotos {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


@media (max-width:800px) {
    header {
        max-width: none !important;
    }
}
header.header-overflow {
    max-width: none !important;
    border-radius: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
    transform: none !important;
    justify-content: space-between !important;
}

header.header-overflow > nav > a:not(#mobile-menu-icon) {
    display: none !important;
}

header.header-overflow > nav > a#mobile-menu-icon {
    font-size: 32px !important;
    margin-top: -5px !important;
    display: block !important;
}
header > nav > a#mobile-menu-icon {
    border:none;
}

header.header-overflow > nav > a {
    border: none !important;
    font-size: 24px !important;
}

header.header-overflow #logo {
    text-wrap: nowrap;
    margin: 0 !important;
    display: block !important;
}

header.header-overflow #logo img {
    position: relative !important;
    transform: none !important;
}

header.header-overflow.opened {
    height: 100vh !important;
    display: block !important;
}

header.header-overflow.opened nav:not(#full-menu) {
    display: none !important;
}

header.header-overflow.opened nav#full-menu {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 20px !important;
    padding: 25px 0 !important;
    box-sizing: border-box !important;
    overflow: scroll !important;
    height: 100vh !important;
    justify-content: flex-start !important;
}

header.header-overflow.opened > nav > a:not(#mobile-menu-icon) {
    display: block !important;
}

header.header-overflow.opened #logo {
    display: none !important;
}

@media(max-width:800px) {
    div.split > div:not(.photo) > div {
        transform: none;
    }
    div.split > div:not(.photo) {
        padding:10px;
    }
}
header #logo {
    white-space: normal !important;
    word-break: break-word !important;
    min-width: 100px !important;
}
header #logo img {
    max-width:100%;
}
@media (max-width: 800px) {
    header {
        padding-left: 25px;
        padding-right: 25px;
        gap:5px;
    }
}
nav + #logo:has(+ nav) {
    min-width: 200px !important;
}
#headerBanner {
    overflow: hidden;
}
iframe[src*="google.com/maps"] {
    max-width: 100%;
}
@media (max-width: 800px) {
    div.overlay > div:not(.navigation) > div > div.inner {
        min-width:75%;    
    }
}

h1, h2 {
    word-break:break-word;
}
@media (max-width: 800px) {
    #headerBannerInner {
        padding: 0 25px;
    }
    #headerBannerInner > div:nth-child(2), #headerBannerInner > div:nth-child(3) {
        display:none;
    }
}