@charset "utf-8";

body { margin: 0; color: #000; text-align: center; }

@font-face {
	font-family: "Saniretro Regular";
	src:url("./Saniretro.eot?") format("eot"),
	url("./Saniretro.woff") format("woff"),
	url("./Saniretro.ttf") format("truetype"),
	url("./Saniretro.svg#SaniretroRegular") format("svg");
	font-weight: normal; font-style: normal;
}

#body { min-height: 100%; font-family: "Saniretro Regular"; }

header {
	margin-top: 5px;
}
.logo_container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo_left {
	margin: 0 10px;
}
.logo_left span {
	/*background-color: yellow;*/
	padding: 15px 15px 10px 15px;
	display: block;
}

/* #8ca8a9;*/
a:link,a:visited,a:hover,a:active { text-decoration: none; color: #000; }

h1 { margin-top: 5%; margin-bottom: 0; background-color: yellow; }
h1 img { max-width: 100%; background-color: yellow; padding: 0.1em; }

nav { width: 100%; }
nav ul { padding: 0; }
nav ul li { display: inline-block; list-style-type: none; font-size: 1.8em; margin-bottom: 0.3em; }

#info {
	margin: auto;
	width: 100%;
	line-height: 1.5em;
	text-align: center;
	overflow: hidden;
}
#info .message {
	display: inline-block;
	padding-left: 100%;
	white-space: nowrap;
	line-height: 1em;
	animation: scrollAnime 10s linear infinite;
	font-style: oblique 30deg;
	font-weight: bold;
}
@keyframes scrollAnime {
	0% { transform: translateX(0) }
	100% { transform: translateX(-100%) }
}

#products { width: 65%; margin : 0 auto; }
#products ol { padding: 0; }
#products ol li { display: inline-block; list-style-type: none; }
#products ol li.soldout { position:	relative; }
#products ol li.soldout img { filter: opacity(30%); }
#products ol li.soldout span { position: absolute; left: 50%; top: 0; color: #F26964; }

.address { margin-top: 2em; font-size: 1.5em; }

footer { width: 100%; }
footer p { margin: 0; }

@media screen and (max-width:500px) {

header img { height: 100%; max-width: 50%; }
.logo_left span {
		display: inline;
}

h1 { margin: 0; }
h1 img { height: 100%; max-width: 30%; padding-top: 0.3em; }

.select,
.address,
footer,
nav ul li,
#info { font-size: 0.6em; }

#products { width: 100%; }
#products img { width: 60px; }
#products ol li.soldout span { font-size: 90%; }

}