/* General */
body { padding: 0 0 60px; }
main { margin: auto; width: 695px; max-width: 100%; text-align: center; }

/* Logo */
main nav { text-align: left; padding: 10px; }
main nav img { display: inline-block; width: 150px; }

/* Links */
main div { font-size: 0; text-align: center; }
main div a { display: inline-block; vertical-align: middle; margin: 10px; font-size: 13pt; }
main div a:hover { color: #42bfb5; }
main div img { display: inline-block; vertical-align: middle; margin: 0 10px 0 0; }

/* Posts */
main section { margin: 0 -8px; font-size: 0; text-align: left; }
main section a { display: inline-block; vertical-align: top; margin: 8px; width: calc( ( 100% - 64px ) / 4 ); box-shadow: 0 2px 4px 1px #cdcdcd; }
main section img { display: block; width: 100%; }
main section.loading:before { content: ' '; display: block; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: rgba( 255, 255, 255, .9 ); }
main section.loading:after { content: ' '; display: block; position: absolute; top: 50%; left: 50%; z-index: 2; transform: translateX( -50% ) translateY( -50% ); width: 40px; height: 40px; border-radius: 50%; border: 3px dashed #42bfb5; animation: turn 2s infinite; transform-origin: 50%; }
@keyframes turn {
	0% { transform: rotate( 0deg ); }
	100% { transform: rotate( 360deg ); }
}
.yellow-button { margin: 30px 0 0; }

@media (max-width: 720px) {
	main section { margin: 0; }
}

@media (max-width: 600px) {
	main div a { font-size: 11pt; }
	main div img { height: 30px; }
	
	main section a { width: calc( ( 100% - 48px ) / 3 ); }
}

@media (max-width: 460px) {
	main section a { width: calc( ( 100% - 32px ) / 2 ); }
}