#circle {
        background-color: rgba(0,0,0,0);
        border:5px solid rgba(0,183,229,0.9);
        opacity:.9;
        border-top:5px solid rgba(0,0,0,0);
        border-left:5px solid rgba(0,0,0,0);
        border-radius:150px;
        box-shadow: 0 0 35px #2187e7;
        width:100px;
        height:100px;
        margin:30% auto;
        -moz-animation:spin .5s infinite linear;
        -webkit-animation:spin .5s infinite linear;
        -o-animation:spin .5s infinite linear;
        -ms-animation:spin .5s infinite linear;
        position: relative;
}
@-moz-keyframes spin {
        0% { -moz-transform:rotate(0deg); }
        100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
        0% { -moz-transform:rotate(0deg); }
        100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
        0% { -webkit-transform:rotate(0deg); }
        100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
        0% { -webkit-transform:rotate(0deg); }
        100% { -webkit-transform:rotate(-360deg); }
}
@-o-keyframes spin {
        0% { -o-transform:rotate(0deg); }
        100% { -o-transform:rotate(360deg); }
}
@-o-keyframes spinoff {
        0% { -o-transform:rotate(0deg); }
        100% { -o-transform:rotate(-360deg); }
}
@-ms-keyframes spin {
        0% { -ms-transform:rotate(0deg); }
        100% { -ms-transform:rotate(360deg); }
}
@-ms-keyframes spinoff {
        0% { -ms-transform:rotate(0deg); }
        100% { -ms-transform:rotate(-360deg); }
}

*html body{height:100%}

.mask{
	position:absolute;
	left:0;
	top:0;
	z-index:100;
	width:100%;
	background:black;
	opacity:0.4;
	filter:alpha(opacity=40)
}