#preloader{
  position: fixed;
  top:0;
  width: 100%;
  height: 100%;
  z-index:1000;
  background: #222;
  
}
.loader{
		display:block;
                width:200px; /* You can define it by % also */
                height:200px; /* You can define it by % also*/
                position:relative;
		margin:auto;top:25%;
                border:3px solid transparent;
		border-bottom:3px solid #16a085;
                border-radius: 50%;
		animation: spin 1.7s linear infinite;
}
.loader:before {
		content:"";
                top: 10%; left:10%; /* of the container */
                width:80%; /* of the outer-1 */
                height:80%; /* of the outer-1 */
                position: absolute;
		border-top:1px solid #16a085;
                border:3px solid transparent;
		border-left:3px solid #e74c3c;
                border-radius: 50%;
		animation: spin-reverse .6s linear infinite;
}
.loader:after{
		content:"";
                top:20%; left:20%; /* of the container */
                width:60%; /* of the inner-1 */
                height:60%; /* of the inner-1 */
                position: absolute;
                border:3px solid transparent;
		border-top:3px solid  #f9c922;
                border-radius: 50%;
		animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin-reverse {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}


.circle-icon{
	padding:10px;
    color:white;width:40px;
	font-size:20px;
    border-radius: 100%;
	text-align:center;
}
.circle-icon:hover{
	box-shadow: 0 4px 8px 2px gray;
}