.custom_loader_wrap * {
  box-sizing: border-box;
}

.custom_loader_wrap {
  overflow: auto; /* location bar hack */
  overflow-x: hidden;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: all;
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(var(--cl-background-1), var(--cl-background-2));

  /*
  ** You can modify these custom properties to change how the loader looks on the front end.
  ** And if the style you're looking for is not listed here, 
  ** or, if you require a completely different custom loader,
  ** you can always contact us at support@awe.media
  */

  /* 1. page background 2 gradient colors */
  --cl-background-1: #CECECE;
  --cl-background-2: #fff;
  
  /* 2. loader size */
  --cl-circle-size: 350px;

  /* 3. circle rotate duration */
  --cl-circle-rotate-duration: 2s;

  /* 4. circle gradient colors */
  --cl-circle-gradient-color1: rgba(255,255,255,1);
  --cl-circle-gradient-color2: rgb(220, 220, 220);
  --cl-circle-gradient-color3: rgb(170, 170, 170);
  --cl-circle-gradient-color4: rgb(10, 10, 10);

}

.custom_loader_inner {
  width: var(--cl-circle-size);
	height: var(--cl-circle-size);
	border-radius: 100%;
	background: linear-gradient(165deg, var(--cl-circle-gradient-color1) 0%, var(--cl-circle-gradient-color2) 40%, var(--cl-circle-gradient-color3) 98%, var(--cl-circle-gradient-color4) 100%);
	position: relative;
}

.custom_loader {
  position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	border-bottom: 0 solid #ffffff05;
  box-shadow: 
		0 -10px 20px 20px #ffffff40 inset,
		0 -5px 15px 10px #ffffff50 inset,
		0 -2px 5px #ffffff80 inset,
		0 -3px 2px #ffffffBB inset,
		0 2px 0px #ffffff,
		0 2px 3px #ffffff,
		0 5px 5px #ffffff90,
		0 10px 15px #ffffff60,
		0 10px 20px 20px #ffffff40;
	filter: blur(3px);
	animation: var(--cl-circle-rotate-duration) circle_rotate linear infinite;
}

@keyframes circle_rotate {
	100% {
		transform: rotate(360deg)
	}
}