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

body  {
	margin: auto ;
	background:#f5f5f5;
		background: -webkit-linear-gradient(top,#f5f5f5,#f5f5f5 50%,#ccffcc 90%,#336633 );
		background: -moz-linear-gradient(top,#f5f5f5,#f5f5f5 50%,#ccffcc 90%,#336633);
		background: -ms-linear-gradient(top,#f5f5f5,#f5f5f5 50%,#ccffcc 90%,#336633);
		background: -o-linear-gradient(top,#f5f5f5,#f5f5f5 50%,#ccffcc 90%,#336633);
		color:#600

}
a.grk {text-decoration:none;color:#363;letter-spacing:0em; font-weight:100;font-size:.9em;}
.tiny {font-style: italic; font-weight: normal; text-align: center; font-size: .8em; letter-spacing: .09em; margin-top:20px;border-top:medium; border-color:#996633; 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: italic; font-weight: light; text-align: justify; font-size: .8em; letter-spacing: 0em; line-height: 1.5em; margin:2rem;}
p {font-size: 1.2em;}


#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.small {border-style: double; border-color:#996633; 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; }