@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');

#wiflogo {
	
	position: absolute;
	cursor: default;
	z-index: 5;

	justify-content: center;
	align-items: center;
	display: flex;

	font-family: 'Open Sans', sans-serif;
	font-size: 12.5em;
	font-weight: 800;
	color: #1c1d26;

	width: 100%;
	height: 100%;
	background: -webkit-radial-gradient(32.5% 62.5%, #FFEC00 5%, #FF6800 70%);
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;

	-ms-transform: rotate(90deg) scale(0);
	-webkit-transform: rotate(90deg) scale(0);
	transform: rotate(90deg) scale(0);

    animation-name: zoomIn;
	animation-delay: 0.5s;
    animation-duration: 1s;
	animation-fill-mode: both; 
	
}

@media screen and (max-width: 736px) {
	#wiflogo {
		font-size: 6em;
	}
}

@keyframes zoomIn {
    from {
    	-ms-transform: rotate(90deg) scale(0);
    	-webkit-transform: rotate(90deg) scale(0);
		transform: rotate(90deg) scale(0);
	}
    to {
    	-ms-transform: rotate(0deg) scale(0.75);
    	-webkit-transform: rotate(0deg) scale(0.75);
		transform: rotate(0deg) scale(0.75);
	}
}

#wifpulse {
	
	position: absolute;
	z-index: 4;

	background: -webkit-radial-gradient(rgba(0,0,0,0) 50%, #f5871f 100%);

	height: 100%;
	width: 100%;
	border-radius: 95%;
	-moz-border-radius: 95%;
	-webkit-border-radius: 95%;

	-ms-transform: scale(0.9);
	-webkit-transform: scale(0.9);
	transform: scale(0.9);

	opacity: 0;

	animation-name: pulse;
	animation-delay: 2s;
    animation-duration: 2s;
	animation-iteration-count: infinite;

}

@keyframes pulse {
    from {
		opacity: 1;
		-ms-transform: scale(0.75);
		-webkit-transform: scale(0.75);
		transform: scale(0.75);
	}
	to {
		opacity: 0;
		-ms-transform: scale(1);
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}