.c-loading {
		display: none;
		background-color: #cccccc;
		top: 0%;
		width: 100%;
		height: 700px;
		position: absolute;
		animation-name: c-loading;
		animation-duration: 0.5s;
		animation-timing-function: ease-in-out;
		animation-delay: 2s;
		animation-iteration-count: 1 infinite;
		animation-direction: normal;
		animation-fill-mode: both;
}

@keyframes c-loading {
  0% {
  		top: 0%;
  }
  100% {
  		border-radius: 50px 50px;
  		top: 100%;
  		display: ;
  }
}


.loading-line {
		background-color: #ffffff;
		width: 80%;
		height: 5px;
		border: none;
		margin-top: 100%;
		margin-left: 10%;
		border-radius: 50px;
}

.loading {
		background-color: #ff0000;
		border-radius: 50px;
		width: 0%;
		height: 5px;
		animation-name: loadingLine;
		animation-duration: 2s;
		animation-timing-function: ease-in-out;
		animation-delay: 0.5s;
		animation-iteration-count: 1 infinite;
		animation-direction: normal;
		animation-fill-mode: both;
}


@keyframes loadingLine {
  0% {
    width 0%;
    background-color: #ff0000;
  }
  100% {
    width: 100%;
    background-color: #ff0000;
  }
}