/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.spinner {
	display    : none;
	position   : fixed;
	z-index    : 1001;
	top        : 0;
	left       : 0;
	height     : 100%;
	width      : 100%;
	background : rgba(0, 0, 0, .8)
}

.uil-pie-css {

	background : none;
	position   : fixed;
	top        : 50%;
	left       : 50%;
	width      : 200px;
	height     : 200px;
	z-index    : 1002;
	margin     : -100px 0 0 -100px;
}

@-webkit-keyframes uil-pie-rotate {
	0% {
		-ms-transform     : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-moz-transform    : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-webkit-transform : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-o-transform      : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		transform         : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
	}
	100% {
		-ms-transform     : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-moz-transform    : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-webkit-transform : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-o-transform      : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		transform         : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
	}
}

@-webkit-keyframes uil-pie-rotate {
	0% {
		-ms-transform     : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-moz-transform    : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-webkit-transform : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-o-transform      : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		transform         : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
	}
	100% {
		-ms-transform     : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-moz-transform    : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-webkit-transform : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-o-transform      : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		transform         : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
	}
}

@-moz-keyframes uil-pie-rotate {
	0% {
		-ms-transform     : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-moz-transform    : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-webkit-transform : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-o-transform      : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		transform         : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
	}
	100% {
		-ms-transform     : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-moz-transform    : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-webkit-transform : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-o-transform      : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		transform         : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
	}
}

@-ms-keyframes uil-pie-rotate {
	0% {
		-ms-transform     : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-moz-transform    : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-webkit-transform : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-o-transform      : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		transform         : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
	}
	100% {
		-ms-transform     : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-moz-transform    : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-webkit-transform : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-o-transform      : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		transform         : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
	}
}

@-moz-keyframes uil-pie-rotate {
	0% {
		-ms-transform     : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-moz-transform    : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-webkit-transform : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-o-transform      : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		transform         : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
	}
	100% {
		-ms-transform     : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-moz-transform    : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-webkit-transform : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-o-transform      : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		transform         : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
	}
}

@-webkit-keyframes uil-pie-rotate {
	0% {
		-ms-transform     : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-moz-transform    : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-webkit-transform : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-o-transform      : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		transform         : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
	}
	100% {
		-ms-transform     : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-moz-transform    : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-webkit-transform : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-o-transform      : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		transform         : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
	}
}

@-o-keyframes uil-pie-rotate {
	0% {
		-ms-transform     : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-moz-transform    : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-webkit-transform : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-o-transform      : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		transform         : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
	}
	100% {
		-ms-transform     : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-moz-transform    : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-webkit-transform : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-o-transform      : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		transform         : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
	}
}

@keyframes uil-pie-rotate {
	0% {
		-ms-transform     : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-moz-transform    : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-webkit-transform : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		-o-transform      : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
		transform         : translate(50px, 50px) rotate(0deg) translate(-50px, -50px);
	}
	100% {
		-ms-transform     : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-moz-transform    : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-webkit-transform : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		-o-transform      : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
		transform         : translate(50px, 50px) rotate(360deg) translate(-50px, -50px);
	}
}

.uil-pie-css > div {
	position      : absolute;
	width         : 100px;
	height        : 100px;
	border-radius : 100% 0 0 0;
	background    : #000000;
	opacity       : 0.5;
}

.uil-pie-css > div:nth-child(1) {
	background        : #cec9c9;
	-ms-animation     : uil-pie-rotate 1.25s linear infinite;
	-moz-animation    : uil-pie-rotate 1.25s linear infinite;
	-webkit-animation : uil-pie-rotate 1.25s linear infinite;
	-o-animation      : uil-pie-rotate 1.25s linear infinite;
	animation         : uil-pie-rotate 1.25s linear infinite;
}

.uil-pie-css > div:nth-child(2) {
	background        : #3c302e;
	-ms-animation     : uil-pie-rotate 1.6666666666666667s linear infinite;
	-moz-animation    : uil-pie-rotate 1.6666666666666667s linear infinite;
	-webkit-animation : uil-pie-rotate 1.6666666666666667s linear infinite;
	-o-animation      : uil-pie-rotate 1.6666666666666667s linear infinite;
	animation         : uil-pie-rotate 1.6666666666666667s linear infinite;
}

.uil-pie-css > div:nth-child(3) {
	background        : #bb171a;
	-ms-animation     : uil-pie-rotate 2.5s linear infinite;
	-moz-animation    : uil-pie-rotate 2.5s linear infinite;
	-webkit-animation : uil-pie-rotate 2.5s linear infinite;
	-o-animation      : uil-pie-rotate 2.5s linear infinite;
	animation         : uil-pie-rotate 2.5s linear infinite;
}

.uil-pie-css > div:nth-child(4) {
	background        : #fefefe;
	-ms-animation     : uil-pie-rotate 5s linear infinite;
	-moz-animation    : uil-pie-rotate 5s linear infinite;
	-webkit-animation : uil-pie-rotate 5s linear infinite;
	-o-animation      : uil-pie-rotate 5s linear infinite;
	animation         : uil-pie-rotate 5s linear infinite;
}

.carousel-cell {
	height          : 100%;
	background      : #222222;
	/* center images in cells with flexbox */
	display         : flex;
	border-radius   : 15px;
	align-items     : center;
	justify-content : center;
	margin-right    : 10px;
}

.service-cell {
	height     : 600px;
	text-align : center;
}

.carousel.is-fullscreen .carousel-cell {
	height : 100%;
}

.carousel-cell img {
	display    : block;
	max-height : 100%;
}