.cssload-container {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.cssload-loader {
	position: relative;
	width: 5.5em;
	height: 5.5em;
	transform: rotate(165deg);
	margin: auto;
}

.cssload-loader:before,
.cssload-loader:after {
	content: "";
	position: absolute;
	width: 1em;
	height: 1em;
	border-radius: 1.25em;
	transform: translate(-50%, -50%);
}

.cssload-loader:before {
	top: 50%; left: 50%;
	animation: before 1s infinite;
}
.cssload-loader:after {
	top: 50%; left: 50%;
	animation: after  1s infinite;
}

/*  Light-grey (#A0A0A0) and black (#000000) @ 75% opacity */
@keyframes before {
	0% {
	width: 1em;
	box-shadow:
		1.5em  -1em rgba(160,160,160,0.75),
		-1.5em   1em rgba(  0,0,0,0.75);
	}
	35% {
	width: 5.5em;
	box-shadow:
		0     -1em rgba(160,160,160,0.75),
		0      1em rgba(  0,0,0,0.75);
	}
	70% {
	width: 1em;
	box-shadow:
		-1.5em  -1em rgba(160,160,160,0.75),
		1.5em   1em rgba(  0,0,0,0.75);
	}
	100% {
	box-shadow:
		1.5em  -1em rgba(160,160,160,0.75),
		-1.5em   1em rgba(  0,0,0,0.75);
	}
}

@keyframes after {
	0% {
	height: 1em;
	box-shadow:
		1em   1.5em rgba(160,160,160,0.75),
		-1em  -1.5em rgba(  0,0,0,0.75);
	}
	35% {
	height: 5.5em;
	box-shadow:
		1em   0    rgba(160,160,160,0.75),
		-1em   0    rgba(  0,0,0,0.75);
	}
	70% {
	height: 1em;
	box-shadow:
		1em  -1.5em rgba(160,160,160,0.75),
		-1em   1.5em rgba(  0,0,0,0.75);
	}
	100% {
	box-shadow:
		1em   1.5em rgba(160,160,160,0.75),
		-1em  -1.5em rgba(  0,0,0,0.75);
	}
}

/* TYPING EFFECT */
p.typing {
	position: absolute;
	top: 60%; left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	font-size: 1.2em;
	font-family: monospace, Arial, sans-serif !important;
	color: #000;
	white-space: nowrap;
	overflow: hidden;
	border-right: .1em solid #000;
	width: 10ch;
	animation:
	/* typing 1s steps(10), */
	blink   1s step-end infinite;
}

@keyframes typing {
	from { width: 0; }
	to   { width: 10ch; }
}
@keyframes blink {
	50% { border-color: transparent; }
}

/* ----- PRELOADER ---- */
.cssload-fond{
	position:relative;
	margin: auto;
    display: flex;
    justify-content: center;
    padding: 100px 0;
}

.cssload-container-general
{
	animation:cssload-animball_two 1.6s infinite;
		-o-animation:cssload-animball_two 1.6s infinite;
		-ms-animation:cssload-animball_two 1.6s infinite;
		-webkit-animation:cssload-animball_two 1.6s infinite;
		-moz-animation:cssload-animball_two 1.6s infinite;
	width:77px; height:77px;
}
.cssload-internal
{
	width:77px; height:77px; position:absolute;
}
.cssload-ballcolor
{
	width: 35px;
	height: 35px;
	border-radius: 50%;
}
.cssload-ball_1, .cssload-ball_2, .cssload-ball_3, .cssload-ball_4
{
	position: absolute;
	animation:cssload-animball_one 1.6s infinite ease;
		-o-animation:cssload-animball_one 1.6s infinite ease;
		-ms-animation:cssload-animball_one 1.6s infinite ease;
		-webkit-animation:cssload-animball_one 1.6s infinite ease;
		-moz-animation:cssload-animball_one 1.6s infinite ease;
}
.cssload-ball_1
{
	background-color:rgb(117, 112, 112);
	top:0; left:0;
}
.cssload-ball_2
{
	background-color:rgb(15, 15, 70);
	top:0; left:42px;
}
.cssload-ball_3
{
	background-color:rgb(15,171,111);
	top:42px; left:0;
}
.cssload-ball_4
{
	background-color:rgb(0,0,0);
	top:42px; left:42px;
}






@keyframes cssload-animball_one
{
	0%{ position: absolute;}
	50%{top:21px; left:21px; position: absolute;opacity:0.5;}
	100%{ position: absolute;}
}

@-o-keyframes cssload-animball_one
{
	0%{ position: absolute;}
	50%{top:21px; left:21px; position: absolute;opacity:0.5;}
	100%{ position: absolute;}
}

@-ms-keyframes cssload-animball_one
{
	0%{ position: absolute;}
	50%{top:21px; left:21px; position: absolute;opacity:0.5;}
	100%{ position: absolute;}
}

@-webkit-keyframes cssload-animball_one
{
	0%{ position: absolute;}
	50%{top:21px; left:21px; position: absolute;opacity:0.5;}
	100%{ position: absolute;}
}

@-moz-keyframes cssload-animball_one
{
	0%{ position: absolute;}
	50%{top:21px; left:21px; position: absolute;opacity:0.5;}
	100%{ position: absolute;}
}

@keyframes cssload-animball_two
{
	0%{transform:rotate(0deg) scale(1);}
	50%{transform:rotate(360deg) scale(1.3);}
	100%{transform:rotate(720deg) scale(1);}
}

@-o-keyframes cssload-animball_two
{
	0%{-o-transform:rotate(0deg) scale(1);}
	50%{-o-transform:rotate(360deg) scale(1.3);}
	100%{-o-transform:rotate(720deg) scale(1);}
}

@-ms-keyframes cssload-animball_two
{
	0%{-ms-transform:rotate(0deg) scale(1);}
	50%{-ms-transform:rotate(360deg) scale(1.3);}
	100%{-ms-transform:rotate(720deg) scale(1);}
}

@-webkit-keyframes cssload-animball_two
{
	0%{-webkit-transform:rotate(0deg) scale(1);}
	50%{-webkit-transform:rotate(360deg) scale(1.3);}
	100%{-webkit-transform:rotate(720deg) scale(1);}
}

@-moz-keyframes cssload-animball_two
{
	0%{-moz-transform:rotate(0deg) scale(1);}
	50%{-moz-transform:rotate(360deg) scale(1.3);}
	100%{-moz-transform:rotate(720deg) scale(1);}
}