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

/* LINE */
.progress-container {
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}
.progress {
    background-color: rgb(0,0,0);
    height: 6px;
    position: relative;
    width: 700px;
}
.progress-bar {
    background-size: 700px 6px;
    height: 100%;
    position: relative;
    background-image: linear-gradient(to right, rgb(65,255,242), rgb(65,255,242), rgb(65,255,242), rgb(65,255,242), rgb(65,255,242), rgb(65,255,242));
    animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) infinite;
        -webkit-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) infinite;
}
@media (max-width: 767px) {
	.progress {
		width: 500px;
	}
}
@media (max-width: 575px) {
	.progress {
		width: 300px;
	}
}
.progress-shadow {
    height: 9em;
    position: absolute;
    top: 100%;
    width: 100%;
    transform: skew(45deg);
        -o-transform: skew(45deg);
        -ms-transform: skew(45deg);
        -webkit-transform: skew(45deg);
        -moz-transform: skew(45deg);
    transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
    background-image: linear-gradient(to bottom, rgba(234,236,238,0), transparent);
}
@keyframes cssload-width {
    0%, 100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
@-webkit-keyframes cssload-width {
    0%, 100% {
        -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

/* LOAD BAR */
.cssload-bar {
    position: relative;
    height: 6px;
    width: 100%;
    margin: 0 auto;
    border-bottom:6px solid rgb(252,168,12);
    padding-top:69px;
    margin-top: 69px;
    overflow: hidden;
}
.cssload-circle {
    position: absolute;
    top: 41px;
    margin-left: -198px;
    height: 83px;
    width: 83px;
    left: 0;
    background: rgb(252,168,12);
    border-radius: 30%;
    animation: move 5.75s infinite;
    -webkit-animation: move 5.75s infinite;
}
.cssload-bar p {
    position: absolute;
    top: 41px;
    right: 48px;
    font-size:22px;
    text-transform: uppercase;
    color: rgb(255,255,255);
    font-family: helvetica, sans-serif;
    font-weight: bold;
}

@keyframes move {
    0% {left: 0;}
    50% {left: 100%; transform: rotate(450deg); width: 206px; height: 206px;}
    75% {left: 100%; transform: rotate(450deg); width: 206px; height: 206px;}
    100% {right: 100%;}
}
@-webkit-keyframes move {
    0% {left: 0;}
    50% {left: 100%; -webkit-transform: rotate(450deg); width: 206px; height: 206px;}
    75% {left: 100%; -webkit-transform: rotate(450deg); width: 206px; height: 206px;}
    100% {right: 100%;}
}

/* CIRCLE BAR */
.cssload-container{
	background:rgb(255,255,255);
	margin: 50px 0;
}    
.cssload-container div {
    width: 25px;
    height: 25px;
    position: absolute;
    background-color: rgb(204,204,204);
    top: 65%;
    border-radius: 50%;
}
.cssload-container div:nth-child(1) {
    background-color: rgb(1,255,242);
    animation: cssload-move 2.3s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
        -webkit-animation: cssload-move 2.3s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
}
.cssload-container div:nth-child(2) {
    background-color: rgb(1,255,242);
    animation: cssload-move 2.3s 172.5ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
        -webkit-animation: cssload-move 2.3s 172.5ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
}
.cssload-container div:nth-child(3) {
    background-color: rgb(1,255,242);
    animation: cssload-move 2.3s 345ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
        -webkit-animation: cssload-move 2.3s 345ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
}
.cssload-container div:nth-child(4) {
    background-color: rgb(1,255,242);
    animation: cssload-move 2.3s 517.5ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
        -webkit-animation: cssload-move 2.3s 517.5ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
}

@keyframes cssload-move {
    0% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}
@-webkit-keyframes cssload-move {
    0% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}