@charset "UTF-8";

/**
 * Preloader(window.onload) Animation Settings
 */

@keyframes modal-bar-extend {
    0% {
        width: 0;
    }

    40% {
        width: 100%;
    }

    100% {
        width: 100%;
    }
}

@keyframes modal-out {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.page-modal-animation-start {
    animation: modal-out 1s;
}

.page-modal-animation-start .page-modal-bar {
    animation: modal-bar-extend 1s ease-in;
}


/**
 * Headline Animation Settings
 */

@keyframes headline-animation {
    0% {
        width: 0;
    }

    50% {
        width: 335px;
    }

    100% {
        width: 335px;
    }
}

@keyframes headline-img-animation {
    0% {
        height: 0;
        width: 0;
        top: 40px;
        border-bottom: solid 1px #00A8EF;
    }

    50% {
        height: 0;
        transform: scaleX(1);
        top: 40px;
        border-bottom: solid 1px #00A8EF;
    }

    100% {
        height: 45px;
        transform: scaleX(1);
        top: 0;
        border-bottom: solid 0 #FFFFFF;
    }
}

@keyframes headline-text-animation {
    0% {
        top: -27px;
    }

    50% {
        top: -27px;
    }

    100% {
        top: -2px;
    }
}

.headline-animation-start .headline-img {
    animation: headline-img-animation 500ms ease-out forwards;
}

.headline-animation-start .headline-text span {
    animation: headline-text-animation 500ms ease-out forwards;
}


/**
 * BlockAnimation Settings
 */

.page-animation {
    transform: translateY(100px);
    transition: all 400ms 200ms ease-out;
}

.page-animation-start {
    transform: translateY(0);
}


/**
 * Settings for Reconstruction
 */

.page-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: white;
}

.page-modal-bar {
    position: absolute;
    width: 0;
    height: 1px;
    top: 50%;
    left: 50%;
    border-bottom: solid 1px #00A8EF;
    transform: translate(-50%, -50%);
}

.headline {
    overflow: hidden;
    position: relative;
}

.headline-img {
    position: absolute;
    top: 40px;
    height: 0;
    border-bottom: solid 1px #00A8EF;
    overflow: hidden;
    transform: scaleX(0); /* NOTE: % unit Can not be used in @keyframe for Microsoft Edge */
}

.headline-text {
    position: relative;
    top: 40px;
    width: 335px;
    height: 25px;
    overflow: hidden;
}

.headline .headline-text span.headline-span {
    display: block;
    position: absolute;
    top: -27px;
    width: 100%;
}

#company .headline .headline-text span.headline-span {
    display: block;
    position: absolute;
    top: -27px;
    width: 100%;
}

img {
    /*height: auto;*/
    /*max-width: 100%;*/ /* Bug with "Edge" */
    vertical-align: bottom;
}

.delay-effect {
    clear: both;
}