/* ==========================================
   PRELOADER
========================================== */

.ip-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:99999;
    background:#fff;
    overflow:hidden;
}

/* Hide unused SVG logo */
.ip-logo{
    display:none;
}

/* Perfect center */
.ip-loader{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    text-align:center;
    opacity:0;
    pointer-events:none;
}

.loader{
    display:inline-block;
    width:250px;
    max-width:85vw;
    animation:floatLogo 2.5s ease-in-out infinite;
    will-change:transform;
}

.loader img{
    display:block;
    width:100%;
    height:auto;
}


/* ==========================================
   INITIAL APPEAR
========================================== */

.loading .ip-loader{
    opacity:1;
    animation:loaderIn .8s cubic-bezier(.7,0,.3,1) both;
}

@keyframes loaderIn{

    from{
        opacity:0;
        transform:translate(-50%,calc(-50% + 120px));
    }

    to{
        opacity:1;
        transform:translate(-50%,-50%);
    }

}


/* ==========================================
   FLOAT
========================================== */

@keyframes floatLogo{

    0%{
        transform:translateY(-4px);
    }

    50%{
        transform:translateY(4px);
    }

    100%{
        transform:translateY(-4px);
    }

}


/* ==========================================
   EXIT
========================================== */

.loaded .loader{
    animation:none;
}

.loaded .ip-loader{
    animation:loaderOut .5s cubic-bezier(.7,0,.3,1) forwards;
}

@keyframes loaderOut{

    to{
        opacity:0;
        transform:translate(-50%,calc(-50% - 100px)) scale(.3);
    }

}


.loaded .ip-header{
    animation:headerOut .8s cubic-bezier(.7,0,.3,1) forwards;
}

@keyframes headerOut{

    to{
        transform:translateY(-100%);
    }

}


/* ==========================================
   CONTENT
========================================== */

.ip-main{
    opacity:0;
}

.loaded .ip-main{
    animation:contentIn .8s .2s forwards;
}

@keyframes contentIn{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:none;
    }

}


/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:992px){

    .loader{
        width:220px;
    }

}

@media(max-width:768px){

    .loader{
        width:200px;
    }

}

@media(max-width:575px){

    .loader{
        width:180px;
    }

}