@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300);


@hueRotate: 10deg;

/* blocco scroll bar durante il caricamento */
body {
    overflow: hidden;
}


aside {
    margin: auto;
}

    aside img {
        max-width: 100%;
        padding-top:30px
    }


#overlayPreDOM {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(255,255,255,0.9);
    opacity: 1.0;
    filter: alpha(opacity=80);
    display: block;
    z-index: 99101340 !important;
}

#loadingPreDOM {
    -webkit-filter: hue-rotate(@hueRotate);
    color: black;
    text-align: center;
    position: relative;
    top: 45%;
}

.text {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    text-shadow: 0 1px 0 white;
    font-weight: 300;
    font-size: 40px;
}

#loadingPreDOM.text, #loadingPreDOM.border {
    z-index: 5;
    border-radius: 10px;
    display: block;
    position: absolute;
    left: 4px;
    top: 4px;
    bottom: 4px;
    right: 4px;
    display: block;
}

#loadingPreDOM.text {
    top: 7px;
}

#loadingPreDOM.border {
    border: 2px dashed rgba(255,255,255,1);
    clip: rect(0,0,0,0);
    animation: maskBorder 1.4s infinite;
}

@keyframes maskBorder {
    0% {
        clip: rect(0,50px,10px,0);
    }

    20% {
        clip: rect(0,200px,10px,0);
    }

    35% {
        clip: rect(0,200px,10px,190px);
    }

    50% {
        clip: rect(10px,200px, 50px, 190px);
    }

    60% {
        clip: rect(40px,200px, 50px, 190px);
    }

    70% {
        clip: rect(40px,200px, 50px, 0px);
    }

    85% {
        clip: rect(40px,10px, 50px, 0px);
    }

    90% {
        clip: rect(0,10px, 50px, 0px);
    }

    100% {
        clip: rect(0,10px, 10px, 0px);
    }
}