.my_header
{
    background-color: #000;
}

html {
    height: 100%;
}
body {
    min-height: 100%;
}

.outer {
    min-height: 100%;
}

.my-slide-line
{
    position: absolute;
    top:50%;
    left:0;
    width:100%;
    height:7px;
    z-index: 1001;
    background-color: orange;
    animation: slide-line 1s both ease-in-out;
}

.my-slide-top {
    background-color: #fff;
    position: absolute;
    top:50%;
    left:0;
    width:100%;
    height:50%;

    animation: slide-top 1s both;
    animation-delay: 1s;

    transition-timing-function: ease-in-out;
    border-bottom: 2px solid #e2e3e5;


    z-index: 999;
}

.my-slide-bottom {
    background-color: #e2e3e5;
    position: absolute;
    bottom:50%;
    left:0;
    width:100%;
    height:50%;

    animation: slide-bottom 1s both;
    animation-delay: 1s;
    transition-timing-function: ease-in-out;


    z-index: 999;
}
.my-slide-logo {
    position: absolute;
    top:30%;
    left:33%;
    width:33%;
    height:100px;
    text-align: center;
    animation: slide-logo 1s both ease-in-out;
    z-index:1000;

}

@keyframes slide-top {
    0% {

        top: 0;
        max-height:50%;
    }
    100% {

        top: 0;
        max-height:0;
    }
}

@keyframes slide-bottom {
    0% {
        bottom: 0;
        max-height:50%;
    }
    100% {

        bottom: 0;
        max-height:0;
    }
}

@keyframes slide-out-top {
    0% {

        top: 0;
        max-height:0;
    }
    100% {

        top: 0;
        max-height:50%;

    }
}

@keyframes slide-out-bottom {
    0% {
        bottom: 0;
        max-height:0;
    }
    100% {

        bottom: 0;
        max-height:50%;

    }
}

@keyframes slide-logo {
    0% {
        opacity: 100%;
    }
    100% {

        opacity: 0%;
    }
}

@keyframes slide-line {
    0% {
        left: 0%;
    }
    100% {

        width: 0%;
        left:100%;
    }
}
.my-slide-out-top {
    background-color: #fff;
    position: absolute;
    top:50%;
    left:0;
    width:100%;
    height:50%;

    animation: slide-out-top 1s both;
    animation-delay: 1s;

    transition-timing-function: ease-in-out;
    border-bottom: 2px solid #e2e3e5;


    z-index: 999;
}

.my-slide-out-bottom {
    background-color: #e2e3e5;
    position: absolute;
    bottom:50%;
    left:0;
    width:100%;
    height:50%;

    animation: slide-out-bottom 1s both;
    animation-delay: 1s;
    transition-timing-function: ease-in-out;


    z-index: 999;
}