body {
    overflow: hidden;
}
#app {
    z-index: 0;
}
#splash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url(images/logo-iut.svg);
    background-repeat:no-repeat;
    background-position: center center;
    background-size: 30% auto;
    -webkit-animation: splash-appear 2.5s;
    animation: splash-appear 2.5s;
    z-index: -1;
}
/* desktops - higher resolution */
@media
    only screen and
    (min-width: 1281px) {
    #splash {
        background-size: 10% auto;
    }
}
/* laptops, desktops */
@media
    only screen and
    (min-width: 1025px)
    and (max-width: 1280px) {
    #splash {
        background-size: 10% auto;
    }
}
/* tablets, ipads (portrait) */
@media
    only screen and
    (min-width: 768px)
    and (max-width: 1024px) {
    #splash {
        background-size: 20% auto;
    }
}
/* tablets, ipads (landscape) */
@media
    only screen and
    (min-width: 768px) and
    (max-width: 1024px) and
    (orientation: landscape) {
    #splash {
        background-size: 10% auto;
    }
}
/* low resolution tablets, mobiles (portrait) */
@media
    only screen and
    (min-width: 481px) and
    (max-width: 767px) {
    #splash {
        background-size: 30% auto;
    }
}
/* low resolution tablets, mobiles (landscape) */
@media
    only screen and
    (min-width: 481px)
    and (max-width: 767px)
    and (orientation: landscape) {
    #splash {
        background-size: 13% auto;
    }
}
/* smartphones mobiles (portrait) */
@media
    only screen and
    (min-width: 320px)
    and (max-width: 480px) {
    #splash {
        background-size: 25% auto;
    }
}
@-webkit-keyframes splash-appear {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes splash-appear {
    from {opacity: 0;}
    to {opacity: 1;}
}