#custom-overlay {
    background-color: #454545;
    /* opacity: 0.95; */
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    animation-name: bgshow;
    animation-delay:6s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

.loadingbox{
	width: 800px;
	height: 800px;
	margin:auto;
	background-color: #454545;
    animation-name: bgshow;
    animation-delay:6s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

.loading-blink{
  	position: absolute;
  	left: 0px;
  	top: 0px;
  	width: 100%;
  	height: 100%;
  	z-index: 9999;
}

.line{
	position: absolute;
	background-color: #c0a471;
}

.line.d1{
	height: 2px;
	top: 100px;
	left: 20%;
	animation: Moveline 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; 
}

.line.d2{
	height: 3px;
	top: 250px;
	left: 40%;
	animation: Moveline 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s; 
}

.line.d3{
	height: 2px;
	top: 500px;
	left: 20%;
	animation: Moveline 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-delay:1s;
    -webkit-animation-delay:1s;
}

.line.d4{
	height: 2px;
	top: 360px;
	left: 60%;
	animation: Moveline 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-delay:1.5s;
    -webkit-animation-delay:1.5s;
}

.line.d5{
	height: 2px;
	top: 150px;
	left: 50%;
	animation: Moveline 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-delay:2s;
    -webkit-animation-delay:2s;
}

.line.d6{
	height: 2px;
	top: 420px;
	left: 30%;
	animation: Moveline 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-delay:2.2s;
    -webkit-animation-delay:2.2s;
}

.line.d7{
	height: 2px;
	top: 450px;
	left: 70%;
	animation: Moveline 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-delay:2.5s;
    -webkit-animation-delay:3s;	
}

.line.d8{
	width: 65px;
	height: 3px;
	top: calc(35% - 5px);
	left: calc(50% - 92px);
    animation-name: Moveline2,m2;
    animation-duration: 2s,1s;
    animation-delay:3s,5s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) both,ease .4s;
    animation-fill-mode: forwards,forwards;
    opacity:0;
}

.index_line{
	position: absolute;
	width: 65px;
	height: 2px;
	top: calc(35% - 20px);
	left: calc(50% - 92px);
	transform:translate( -50%, -50%);
	animation-name: m3;
	animation-duration: 1s;
	animation-delay:5s;
	animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) both,ease 1s;
	animation-fill-mode: forwards;
	opacity:0;
}

.index_logo{
	position: absolute;
	width: 250px;
	top: 35%;
	left: 50%;
	transform:translate(-50%, -50%);
	opacity:0;
	animation-name: logo_move;
	animation-duration: 2s;
	animation-delay:6.5s;
	animation-fill-mode: forwards;
}

.index_logo_c1{
	position: absolute;
	width: 12px;
	top: 35%;
	left: calc(50% - 111px);
	transform:translate( -50%, -50%);
	opacity:0;
	animation-name: c_move,dsp;
	animation-duration: 1s,1s;
	animation-delay: 5.5s,8s;
	animation-fill-mode: forwards,forwards;
}

.index_logo_c2{
	position: absolute;
	width: 12px;
	top: 35%;
	left: calc(50% - 92px);
	transform:translate( -50%, -50%);
	opacity:0;
	animation-name: c_move,dsp;
	animation-duration: 1s,1s;
	animation-delay: 5.5s,8s;
	animation-fill-mode: forwards,forwards;
}

.index_logo_c3{
	position: absolute;
	width: 12px;
	top: 35%;
	left: calc(50% - 72px);
	transform:translate( -50%, -50%);
	opacity:0;
	animation-name: c_move,dsp;
	animation-duration: 1s,1s;
	animation-delay: 5.5s,8s;
	animation-fill-mode: forwards,forwards;
}

@keyframes bgshow {
    0% { 
       background-color: #454545;
    }
    100% {
       background-color: #fff;
    }
}


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


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

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

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

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

@keyframes Moveline {
    0% { 
        width:0; 
        transform: translateX(160px);
        opacity:0;
    }
    50% { 
        width:100px; 
        opacity:1;
    }
    100% {
        width:0; 
        transform: translateX(-50px);
    }
}

@keyframes Moveline2 {
    0% { 
        width:0; 
        transform: translateX(160px);
        opacity:0;
    }
    100% {
        width:65px;
	    left: calc(50% - 92px);
        transform:translate( -50%, -50%);
        opacity:1;
    }
}



@media (max-width: 767.9px) {
	.loadingbox{
		width: 100%;
	}	
}