@charset "utf-8";
/* CSS Document */

body  {
	margin: auto ;
	background:#ffffff;
	color:#1eo137;
		}
a {text-decoration:none;color:#000;}
.tiny {font-style: italic; font-weight: normal; text-align: center; font-size: .6rem; letter-spacing: .09em; margin-top:20px;border-top:thick; border-color:#1e0137; border-style: double; border-bottom: none; border-left:hidden; border-right:hidden;padding:10px; }
.story { text-align:left; font-size: 1.2em; margin:1rem;}
.type { font-style: normal; font-weight: bold; text-align: left; font-size: 1.2em; letter-spacing: .1em;margin-left:2em;border-top: thick; border-color:#006666; border-style:solid; border-bottom: none; border-left:hidden; border-right:hidden;padding:10px;}

#front {border-style: double; border-color:#996633; border-radius:8px; border-width:medium;padding:8px;margin:22px }
img.milk {border-style: double; border-color:#996633; border-radius:8px; border-width:medium;padding:8px; margin:8px;}
img {border-style: double; border-color:#d98b84; border-radius:8px; border-width:medium;padding:8px; margin:8px;opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;
  }
 .clontainer {
    position: relative;}

.image {
  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;}

.middle {
	transition: .5s ease;
	opacity: 0;
	position: absolute;
	top: 105px;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);}

.clontainer:hover .image {
  opacity: 0.3;}

.clontainer:hover .middle {
  opacity: 1;}
.hext {
  background-color: #336600;
  color: #f5f5f5;
  font-size: 18px;
  padding: 8px 8px;
  border-radius:8px; }