@charset "utf-8";
/* CSS Styling */


/* LOADER (SPINNER) */

#loader {
    border: 12px solid #f3f3f3;
    border-radius: 50%;
    border-top: 12px solid #444444;
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
}

.centerspinner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}




canvas {
  width: 100%;
  height: auto;
}

.easeload{
    opacity: 0;
    -webkit-transition: all 10s ease; 
    -moz-transition: all 10s ease; 
    -ms-transition: all 10s ease; 
    -o-transition: all 10s ease; 
}

.hidden {
display: none;
}

#hideMeSlow {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
#hideMeMiddle {
    -moz-animation: cssAnimation 0s ease-in 1.5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 1.5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 1.5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 1.5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
#hideMeFast {
    -moz-animation: cssAnimation 0s ease-in 0.5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 0.5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 0.5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 0.5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}


@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

.clock {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 5s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}