/* @group Image Header
------------------------------------ */
.image-header { position: relative; }
.image-header .col-36-36 { position: static; }
.image-header .outerAbsolute { z-index: -1; }
.image-header .outerAbsolute::before { content: ''; width: 100%; height: 100%; pointer-events: none; position: absolute; top: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.2); }
.image-header h1 { font-family: var(--burford-extrude); color: var(--main-white); font-weight: 400; text-transform: uppercase; letter-spacing: -0.1em; }
.image-header .arrow-scroll-down { cursor: pointer; transition: height .7s;}

.image-header .controls a {
    position: relative;
    font-size: 1.4em;
    line-height: 1.37em;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--main-white);
    font-weight: var(--weight-aaux);
    margin-top: 1rem;
}
.image-header .controls a::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: .1rem;
    position: absolute;
    bottom: -.3rem;
    left: 0;
    background-color: var(--main-white);
}
.image-header .controls a::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: .2rem;
    right: -1.8rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent var(--main-white);
}
@media only screen
and (min-width : 961px) {

    .image-header .outerAbsolute::after { content: ''; width: 100%; height: 20.2rem; pointer-events: none; position: absolute; top: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); }

    .image-header .txt-box { max-width: 96.2rem; margin: 23rem auto 24.5rem; position: relative; }
    .image-header .txt-box::before { content: ''; width: 0; transition: width .7s; height: .2rem; background-color: var(--main-white); position: absolute; bottom: -2rem; left: 50%; transform: translate(-50%, 0); }
    .image-header .txt-box .arrow-scroll-down { content: ''; position: absolute; left: 50%; transform: translate3d(-50%, 100%, 0); background-image: url('../../img/layout/home/arrow-line.svg'); background-repeat: no-repeat; background-position: center bottom; width: 1.6rem; height: 0; bottom: -2rem; }
    .image-header .txt-box h1 { font-size: 12em; line-height: .75em; }

    .image-header.big .row {
        height: 113.8rem;
    }
    .image-header.big .txt-box .arrow-scroll-down {
        height: 0;
    }

    .image-header .controls { 
        position: absolute; 
        bottom: 0; 
        left: 0; 
    }
    .image-header .controls a {
        width: 10.6rem;
        height: 10.6rem;
        border: .1rem solid var(--main-white);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color .7s;
        cursor: pointer;
    }
    .image-header .controls a::after,
    .image-header .controls a::before {
        content: none;
    }
    .image-header .controls {
        margin: 0 0 8.5rem 5.4rem;
    }
    .image-header .controls a {
        font-size: 2em;
        line-height: 1.1em;
    }
    .image-header .controls a span {
        display: none;
    }
    @media (hover: hover) {
        .image-header .controls a:hover {
            background-color: var(--main-blue);
            border-color: var(--main-white);
        }
        .image-header__control button:hover {
            opacity: .7;
        }
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .image-header .row { height: 39.4rem; }

    .image-header .txt-box { margin: 9rem 0 0; }
    .image-header .txt-box h1 { font-size: 6.7em; line-height: .82em; letter-spacing: -.05em; }
}

/* @end */

@media only screen
and (min-width : 961px) {
    .image-header::before {
        content: "";
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
        height: 20.2rem;
        width: 100%;
        position: absolute;
        pointer-events: none;
        display: inline-block;
        z-index: 2;
    }
}


/* Animations */

.image-header .txt-box,
.image-header figure { opacity: 0; } 

.image-header.animateActive .txt-box,
.image-header.animateActive figure { animation: fade .9s forwards; }

.image-header.animateActive figure {animation-delay:.3s;} 
.image-header.animateActive .txt-box {animation-delay:.6s;} 



@media only screen
and (min-width : 961px) {

    .image-header .arrow-scroll-down { transition-delay: 2s; opacity: 0;}
    .image-header.animateActive .arrow-scroll-down { height: 15.1rem; opacity: 1;}

    .image-header .txt-box::before {transition-delay: 1.2s;opacity: 0;}
    .image-header.animateActive .txt-box::before {width: 52.4rem; opacity: 1;}

    .image-header.big.animateActive .txt-box .arrow-scroll-down { height: 15.1rem; opacity: 1;}
    
}