#cargador {
	position: absolute;
	top: 40%;
	left: 50%;
    width:40px;
    height:40px;
    border-left: 12px ridge #459449;
    border-right: 12px ridge #ff0000;
    border-top: 12px solid #333333;
    border-bottom: 12px solid #2A64A2;
    border-radius: 50%;
    animation-name: girar;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes girar {
	0% {
		transform: rotate(0);
    	animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  	}
  	50% {
    	transform: rotate(900deg);
    	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  	}
  	100% {
		transform: rotate(1800deg);
	}
}

@media only screen and (max-width: 768px) {
	#cargador {
		position: absolute;
		top: 60%;
		left: 45%;
		width:20px;
		height:20px;
		border-left: 12px ridge #459449;
		border-right: 12px ridge #ff0000;
		border-top: 12px solid #333333;
		border-bottom: 12px solid #2A64A2;
		border-radius: 50%;
		animation-name: girar;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}
}