html, body {font-size: 1px;}
body {font-family: arial; background: #fdd;}

.clearme {display: block; height: 0; clear: both; font-size: 0;}
.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clear {display: inline-block;}
/* hide IE mac \*/
* html .clear {height: 1%;}
.clear {display: block;}
/* */

#lyon {position: relative; z-index: 5; margin: 64px 0 0 0; padding: 32px 0 24px 0; font-size: 16rem; background: #fff; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1);}

header {position: relative; width: 20%; float: left; padding: 16px;}
header h1 {text-align: center;}
header h1 a {display: inline-block; width: 150px; height: 150px; background: url(/images/logo.png) center center no-repeat; background-size: contain;}
header h1 a span {display: none;}
header p {display: none; font-size: 14px; text-align: center;}

content {width: 75%; float: right;}
content ul {display: block; text-align: center;}
content ul li {display: inline-block; width: 150px; margin: 12px; opacity: .85; transition: opacity .3s; -webkit-transition: opacity .3s;}
content ul li:hover {opacity: 1;}
content ul li .desc {display: none;}

footer {width: 100%; margin: 12px auto 0 auto; padding: 0; font-size: 11rem; color: #444; text-align: center;}
footer a {color: #000; font-weight: bold;}

@media screen and (max-width: 640px) {
	body {background: #fff;}
	#lyon {margin: 0; padding: 12px 0; box-shadow: none; border: 0;}
	#rain {display: none;}
	header {width: auto; float: none;}
	header h1 a {width: 150px; height: 150px;}
	content {width: auto; float: none;}
	content ul li {margin: 0px 1px; opacity: 1;}
}