* { margin:0; padding:0; border:none; }
html,body { width:100%; height:100%; }
body { display:table; }
#metade01, #metade02 { display:table-cell; overflow:hidden; width:50%; height:100%; vertical-align:middle; }
#metade02 { background:#00afef; }

.meio { width:100%; max-width:450px; }
.logo { padding-right: 10px; float:right; }
.links { float:left; }
.logomarca { width:100%; max-width:450px; height:auto; display:block; margin:0 auto; }
p { font:normal 12px Arial; text-align:center; margin:50px 0; }
p a { color:#600; text-decoration:none; font-weight:bold; }
p a:hover { color:#00afef; }
.link { display:block; width:270px; height:270px; margin:40px auto; border-radius:50%; overflow:hidden; border-right:5px solid #0079b1; border-bottom:5px solid #0079b1; }
.link { -webkit-transition:all ease-out 200ms; -moz-transition:all ease-out 200ms; -ms-transition:all ease-out 200ms; -o-transition:all ease-out 200ms; }
.link:hover { -webkit-transform: scale(1.2,1.2); -moz-transform: scale(1.2,1.2); -ms-transform: scale(1.2,1.2); -o-transform: scale(1.2,1.2); transform: scale(1.2,1.2); }


@media screen and (max-width:640px) {
	body { display:block; }
	#metade01, #metade02 { width:100%; height:auto; display:block; }
	#metade02 { padding:20px 0; }
	.meio { max-width:none; }
	.logo, .links  { float:none; }
	.logomarca { margin:80px auto; }
	
	p { display:none; }
	
	.link { display:inline-block; }
}

@media screen and (max-width:480px) {
	#metade01 { display:none; }
	.link { display:block; }
}