/* Loader */
@keyframes shrinkDown {
    0% { transform: scaleY(1) translateY(0); }
    100% { transform: scaleY(0.7) translateY(-15%); }
}

@keyframes moveDown {
    0% { transform: translateY(0); }
    100% { transform: translateY(15%); }
}

#Vector_13, #Vector_14, #Vector_15 {
    transform-origin: bottom;
    animation: shrinkDown 1.2s ease-in-out forwards;
}

#Vector_3, #Vector_4 {
    transform-origin: bottom;
    animation: moveDown 0.2s ease-in-out forwards;
    animation-delay: 1.2s;
}

#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #EAEBED;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, transform 0.8s ease-in-out;
}

/* Frame Container and Frames */
.frame-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.frame {
    position: absolute;
    background-color: #EAEBED;
    transition: all 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.frame-top-top {
    top: 0;
    left: 0;
    width: 100%;
    height: 112px;
    opacity: 1;
}

.frame-top {
    top: 112px;
    left: 0;
    width: 100%;
    height: calc(50vh - 250px - 112px);
}

.frame-right {
    top: 112px;
    right: 0;
    width: calc(50vw - 100px);
    height: calc(100% - 112px);
}

.frame-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(50vh - 250px);
}

.frame-left {
    top: 112px;
    left: 0;
    width: calc(50vw - 100px);
    height: calc(100% - 112px);
}

/* Create a "window" in the frames for the loader */
#page-loader .loader-content {
    position: relative;
    text-align: center;
    z-index: 10000;
}

#page-loader.loaded {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
}

#page-loader .loader-content svg {
    max-width: 200px;
    height: auto;
}

/* Persistent frame that stays after loader disappears */
.persistent-frame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.persistent-frame .frame {
    transition: all 1.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.persistent-frame .frame-top-top {
    opacity: 0.3;
}

.persistent-frame.frame-reveal .frame-top-top {
    opacity: 0;
}

.persistent-frame.frame-reveal .frame-top {
    height: 0;
}

.persistent-frame.frame-reveal .frame-bottom {
    height: 0;
}

.persistent-frame.frame-reveal .frame-left {
    width: 0;
    height: 100%;
    top: 112px;
}

.persistent-frame.frame-reveal .frame-right {
    width: 0;
    height: 100%;
    top: 112px;
}

/* HERO FULLSCREEN */
.hero-fullscreen {
    display: none;
}

.info-scroll {
    display: none;
}

@media (min-width: 992px) {
    .hero-main { margin-top: 300vh; }
    .hero-main h1 img { width: auto; }

    .hero-fullscreen {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 100vw;
        height: 100vh;
        z-index: 10;
        pointer-events: none;
        overflow: hidden;
    }

    .hero-fullscreen .hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: opacity 0.8s ease;
    }

    .hero-fullscreen .hero-bg.current {
        opacity: 1;
        z-index: 1;
    }

    .hero-fullscreen .hero-bg.next {
        z-index: 2;
    }

    .hero-fullscreen .hero-dummy { width: 100vw; height: 100vh; }
    
    .info-scroll {
        position: fixed;
        bottom: 14px;
        left: 0;
        right: 0;
        z-index: 100;
        opacity: 0;
        display: block;
        margin: 0 auto;
        transition: opacity 0.4s ease-in-out;
    }
	
	.frame-top-top {
        height: 94px;
    }

    .frame-top {
        top: 94px;
        height: calc(50vh - 125px - 94px);
    }

    .persistent-frame.frame-reveal .frame-left {
        top: 94px;
    }

    .persistent-frame.frame-reveal .frame-right {
        top: 94px;
    }

    .frame-bottom {
        height: calc(50vh - 125px);
    }

    #headline-hero-wrapper {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      width: 100%;
      height: 400px;
	  margin-top: 300vh;
    }

    #headline-hero {
        opacity: 0;
        width: 342px;
        height: 180px;
        margin-bottom: 19px;
        background-image: url('/img/mainpage/headline-hero.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}