/*
    Theme Name: Design
    Author: Whetham Solutions
    Author URI: https://whethamsolutions.com
    Description: Wordpress theme for Design. Use of this theme outside of this company's website is strictly prohibited.
    Template: ion
    Text Domain: horizontree
*/

#hero {
    position: relative !important;
    z-index: 0 !important;
}

#hero > .e-con-inner,
#hero .elementor-widget-html,
#hero .elementor-widget-html .elementor-widget-container {
    position: static !important;
    z-index: auto !important;
    transform: none !important;
}

#heroCrossfader {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    background-color: #000;
}

#heroCrossfader picture {
    display: contents;
}

#heroCrossfader .hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    /* Safari Fixes: Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: opacity, transform;
}

#heroCrossfader .hero-slide.active {
    opacity: 1;
    z-index: 2;
}

.kb-zoom-in { animation: kb-zoom-in 10s linear forwards; -webkit-animation: kb-zoom-in 10s linear forwards; }
.kb-zoom-out { animation: kb-zoom-out 10s linear forwards; -webkit-animation: kb-zoom-out 10s linear forwards; }
.kb-pan-left { animation: kb-pan-left 10s linear forwards; -webkit-animation: kb-pan-left 10s linear forwards; }
.kb-pan-right { animation: kb-pan-right 10s linear forwards; -webkit-animation: kb-pan-right 10s linear forwards; }

@keyframes kb-zoom-in {
    0% { transform: scale(1) translateZ(0); }
    100% { transform: scale(1.15) translateZ(0); }
}

@keyframes kb-zoom-out {
    0% { transform: scale(1.15) translateZ(0); }
    100% { transform: scale(1) translateZ(0); }
}

@keyframes kb-pan-left {
    0% { transform: scale(1.1) translateX(0%) translateZ(0); }
    100% { transform: scale(1.1) translateX(-3%) translateZ(0); }
}

@keyframes kb-pan-right {
    0% { transform: scale(1.1) translateX(-3%) translateZ(0); }
    100% { transform: scale(1.1) translateX(0%) translateZ(0); }
}

#hero:before,
#hero:after {
    position: absolute !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

#hero .hero-content {
    position: relative !important;
    z-index: 3 !important;
    pointer-events: auto !important;
}

.pg-title h1 strong {
    color: #f9f3e3;
    font-weight: 300;
    display: block;
    letter-spacing: -1px;
    font-size: var(--font-size);
    margin: 15px 0 0;
    max-width: clamp(666.66666666667px, 52.083333333333vw, 1000px);
    line-height: var(--line-height);
}

.bio h2 + p strong {
    display: block;
    color: var(--primary);
    margin: 0 0 clamp(20px,1.5625vw,30px);
    font-weight: 200;
    letter-spacing: -1px;
    font-size: var(--font-size--h3);
    font-family: var(--heading);
    line-height: var(--line-height--heading);
}

@media (max-width: 767px) {
    #hero p {
        line-height: 1.5;
    }
    #hero:before {
        content: none !important;
    }
    #hero:after {
        background: linear-gradient(0deg,#1f1911 0,rgba(31,25,17,0) 100%) !important;
        top: unset !important;
        bottom: 0 !important;
        opacity: 1 !important;
    }
    #hero {
        height: calc(90vh - 76px);
    }
    #hero .hero-content .pb-75 {
        padding-bottom: 30px !important;
    }
    #hero h1, #hero p {
        text-shadow: 0 0 15px #000, 0 0 48px #000;
    }
}