#preloader {
}

.page-preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
}

.page-preloader:before {
	content: '';
	background-color: #fafafa;
	opacity: 1;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}


.page-preloader__logo {

display:none;
}


.page-preloader__grains {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
}

.page-preloader__grains img {
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 75;
}

.page-preloader__grains img:nth-child(1) {
	animation-name: pagePreloaderGrain1Animation;
	animation-duration: 800ms;
}
.page-preloader__grains img:nth-child(2) {
	animation-name: pagePreloaderGrain2Animation;
	animation-duration: 830ms;
	animation-delay: 200ms;
}
.page-preloader__grains img:nth-child(3) {
	animation-name: pagePreloaderGrain3Animation;
	animation-duration: 720ms;
}
.page-preloader__grains img:nth-child(4) {
	animation-name: pagePreloaderGrain4Animation;
	animation-duration: 680ms;
	animation-delay: 280ms;
}
.page-preloader__grains img:nth-child(5) {
	animation-name: pagePreloaderGrain5Animation;
	animation-duration: 700ms;
	animation-delay: 50ms;
}
.page-preloader__grains img:nth-child(6) {
	animation-name: pagePreloaderGrain6Animation;
	animation-duration: 740ms;
}
.page-preloader__grains img:nth-child(7) {
	animation-name: pagePreloaderGrain7Animation;
	animation-duration: 790ms;
	animation-delay: 200ms;
}
.page-preloader__grains img:nth-child(8) {
	animation-name: pagePreloaderGrain8Animation;
	animation-duration: 810ms;
}
.page-preloader__grains img:nth-child(9) {
	animation-name: pagePreloaderGrain9Animation;
	animation-duration: 820ms;
	animation-delay: 100ms;
}
.page-preloader__grains img:nth-child(10) {
	animation-name: pagePreloaderGrain10Animation;
	animation-duration: 840ms;
}
.page-preloader__grains img:nth-child(11) {
	animation-name: pagePreloaderGrain11Animation;
	animation-duration: 810ms;
	animation-delay: 280ms;
}
.page-preloader__grains img:nth-child(12) {
	animation-name: pagePreloaderGrain12Animation;
	animation-duration: 740ms;
}
.page-preloader__grains img:nth-child(13) {
	animation-name: pagePreloaderGrain13Animation;
	animation-duration: 710ms;
	animation-delay: 210ms;
}
.page-preloader__grains img:nth-child(14) {
	animation-name: pagePreloaderGrain14Animation;
	animation-duration: 770ms;
}
.page-preloader__grains img:nth-child(15) {
	animation-name: pagePreloaderGrain15Animation;
	animation-duration: 770ms;
	animation-delay: 140ms;
}


@keyframes pagePreloaderAnimation {
	0%   {transform: translate3d(-51%,   -50.5%, 0) scale(1.005)}
	10%  {transform: translate3d(-50%,   -49.5%, 0) scale(0.995)}
	20%  {transform: translate3d(-49%,   -50.5%, 0) scale(1.01)}
	30%  {transform: translate3d(-50%,   -50.5%, 0) scale(0.99)}
	40%  {transform: translate3d(-49%,   -51%, 0) scale(1.005)}
	50%  {transform: translate3d(-50%,   -49.5%, 0) scale(0.995)}
	60%  {transform: translate3d(-50.5%, -49%, 0) scale(1.015)}
	70%  {transform: translate3d(-51%,   -50.5%, 0) scale(0.985)}
	80%  {transform: translate3d(-51%,   -50%, 0) scale(1.005)}
	90%  {transform: translate3d(-50.5%, -51%, 0) scale(0.995)}
	100% {transform: translate3d(-51%,   -50.5%, 0) scale(1.005)}
}

@keyframes pagePreloaderGrain1Animation {
	0% {left: -100px;
		transform: translate3d(-50%, -50%, 0) rotate(-90deg)}
	100% {left: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(-90deg)}
}
@keyframes pagePreloaderGrain2Animation {
	0%   {top: 10%; left: -15%;
		transform: translate3d(-50%, -50%, 0) rotate(-66deg)}
	100% {top: 50%; left: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(-66deg)}
}
@keyframes pagePreloaderGrain3Animation {
	0%   {top: -15%; left: 20%;
		transform: translate3d(-50%, -50%, 0) rotate(-42deg)}
	100% {top: 50%; left: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(-42deg)}
}
@keyframes pagePreloaderGrain4Animation {
	0%   {top: -15%; left: 30%;
		transform: translate3d(-50%, -50%, 0) rotate(-18deg)}
	100% {top: 50%; left: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(-18deg)}
}
@keyframes pagePreloaderGrain5Animation {
	0%   {top: -15%; left: 55%;
		transform: translate3d(-50%, -50%, 0) rotate(6deg)}
	100% {top: 50%; left: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(6deg)}
}
@keyframes pagePreloaderGrain6Animation {
	0%   {top: -15%; left: 70%;
		transform: translate3d(-50%, -50%, 0) rotate(30deg)}
	100% {top: 50%; left: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(30deg)}
}
@keyframes pagePreloaderGrain7Animation {
	0%   {top: -15%; left: 85%;
		transform: translate3d(-50%, -50%, 0) rotate(54deg)}
	100% {top: 50%; left: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(54deg)}
}
@keyframes pagePreloaderGrain8Animation {
	0%   {top: 20%; left: 115%;
		transform: translate3d(-50%, -50%, 0) rotate(78deg)}
	100% {top: 50%; left: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(78deg)}
}
@keyframes pagePreloaderGrain9Animation {
	0%   {top: 60%; left: 115%;
		transform: translate3d(-50%, -50%, 0) rotate(102deg)}
	100% {top: 50%; left: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(102deg)}
}
@keyframes pagePreloaderGrain10Animation {
	0%   {top: 82%; left: 115%;
		transform: translate3d(-50%, -50%, 0) rotate(126deg)}
	100% {top: 50%; left: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(126deg)}
}
@keyframes pagePreloaderGrain11Animation {
	0%   {top: 115%; left: 65%;
		transform: translate3d(-50%, -50%, 0) rotate(150deg)}
	100% {top: 50%; left: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(150deg)}
}
@keyframes pagePreloaderGrain12Animation {
	0%   {top: 115%; left: 52%;
		transform: translate3d(-50%, -50%, 0) rotate(174deg)}
	100% {top: 50%; left: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(174deg)}
}
@keyframes pagePreloaderGrain13Animation {
	0%   {top: 115%; left: 42%;
		transform: translate3d(-50%, -50%, 0) rotate(198deg)}
	100% {top: 50%; left: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(198deg)}
}
@keyframes pagePreloaderGrain14Animation {
	0%   {top: 115%; left: 22%;
		transform: translate3d(-50%, -50%, 0) rotate(222deg)}
	100% {top: 50%; left: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(222deg)}
}
@keyframes pagePreloaderGrain15Animation {
	0%   {top: 85%; left: -15%;
		transform: translate3d(-50%, -50%, 0) rotate(246deg)}
	100% {top: 50%; left: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(246deg)}
}


/* modifies */
.page-preloader.stop {
	opacity: 0;
	transform: scale(5);
	transition: all 500ms ease;
}


.page-preloader.stop .page-preloader__logo,
.page-preloader.stop .page-preloader__grains img {
	animation-name: none;
	-webkit-animation-name:none;
}