/* Spinner */
@keyframes spinnerBoxes{
	0% { background: #bbcedd; }
	12.5% { background: #bbcedd; }
	12.625% { background: #85a2b6; }
	100% { background: #85a2b6; }
}

.spinnerBoxes div{
	position: absolute;
	width: 18px;
	height: 18px;
	background: #85a2b6;
	animation: spinnerBoxes 1s linear infinite;
}

.spinnerBoxHolder{
	width: 100px;
	height: 100px;
	display: inline-block;
	overflow: hidden;
	background: none;
	display: block;
}

.spinnerBoxes{
	width: 100%;
	height: 100%;
	position: relative;
	transform: translateZ(5) scale(0.5);
	backface-visibility: hidden;
	transform-origin: 0 0; 
}

.spinnerBoxes div { box-sizing: content-box; }

/* Spinner 2 */

.formular{
	width: 100%;
	height: 300px;
	display: inline-block;
	overflow: hidden;
	background: none;
	display: block;
	z-index: 10;
}

.preloader-squares .square {
	display: inline-block;
	width: 25px;
	height: 25px;
	background: #C19B4B;
	opacity: 0.2;
	animation: movein 2s infinite;
}

.preloader-squares {
	width: 60px;
	margin-left: calc(50% - 35px);
	margin-top: calc(15% + 60px);
	line-height: 19px;
	height: 60px;
}

.square {
	opacity: 0.5;
}

.preloader-squares .square:nth-child(1) {
	transform: translate(0, -25px)
}

.preloader-squares .square:nth-child(2) {
	transform: translate(25px, 0)
}

.preloader-squares .square:nth-child(3) {
	transform: translate(-25px, 0)
}

.preloader-squares .square:nth-child(4) {
	transform: translate(0, 25px)
}

@keyframes movein {
  33% {
	    transform: translate(0, 0);
    	opacity: 0.7;
	  }
  66% {
	    transform: translate(0, 0);
	    opacity: 0.7;
	  }
}