@charset "UTF-8";
/* MGBC fade in */

* make keyframes that tell the start state and the end state of our object */

@-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }

.fade {
	opacity:0;  
	-webkit-animation:fadeIn ease-in 1;  
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade.two {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
animation-delay: 3s;
}

.fade.three {
-webkit-animation-delay: 5.3s;
-moz-animation-delay: 5.3s;
animation-delay: 5.3s;
}

.fade.four {
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
animation-delay: 10s;
}

/*---make a basic box ---*/
.box{
width: 100%;
position: relative;
margin: 0;
padding: 0;  
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  box-shadow:
    0 0 60px 30px rgba(255,255,255,0.5),
    0 0 100px 60px rgba(255,255,255,0.166),
    0 0 140px 90px rgba(255,255,255,0.166);
	}