/* DEMETER v1 */

/* COLORS
#000    - Black
#808080 - Grey
#AAA    - Light grey
#FFF    - White */

div.Demeter {
  position: relative;
  /*max-width: 900px;
  height: 360px;*/
  height: auto;
  width: 100%;
  margin: 0 auto;
  /*border: solid 3px #000;*/
  border-bottom: none;
  overflow: hidden;
  background: #808080;
}

/* NAVIGATION BUTTONS */
button.clickLeft, button.clickRight {
  display: block;
  position: absolute;
  width: 50px;
  height: -webkit-calc(100% - 10px);
  border: none;
  z-index: 10;
  opacity: 0.3;
  font-size: 50%; }
button.clickLeft {
  left: -50px;
  animation: slideOutLeft 0.2s forwards;
  -webkit-animation: slideOutLeft 0.2s forwards;
  -moz-animation: slideOutLeft 0.2s forwards; }
div.Demeter:hover button.clickLeft {
  animation: slideInLeft 0.2s forwards;
  -webkit-animation: slideInLeft 0.2s forwards;
  -moz-animation: slideInLeft 0.2s forwards; }
button.clickRight {
  right: -50px;
  animation: slideOutRight 0.2s forwards;
  -webkit-animation: slideOutRight 0.2s forwards;
  -moz-animation: slideOutRight 0.2s forwards; }
div.Demeter:hover button.clickRight {
  animation: slideInRight 0.2s forwards;
  -webkit-animation: slideInRight 0.2s forwards;
  -moz-animation: slideInRight 0.2s forwards; }
button.clickLeft:hover, button.clickRight:hover {opacity: 0.8;}
img.arrowLeft, img.arrowRight {width: 40px;}
img.arrowLeft {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg); }

#DemeterList {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#DemeterList li{
  display: inline;
  float:left;
  /*height: 350px;*/
  margin: 0px;
  padding: 0px;
  line-height: 0px;
  list-style: none;
}

#DemeterList li img {width: 100vw;height: auto;}

/*#DemeterList:hover div*/
div.Demeter:hover div {
  animation: slideIn 0.2s forwards;
  -webkit-animation: slideIn 0.2s forwards;
  -moz-animation: slideIn 0.2s forwards;
}



div.itemTitle {
  position: relative;
  bottom: 0px;
  vertical-align: top;
  opacity: 1;
  max-width: 800px;
  height: 40px;
  margin: 0 auto;
  line-height: 40px;
  font-family: Arial, sans-serif;
  font-size: 150%;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  background: rgba(50, 50, 50, 0.8);
  animation: slideOut 0.2s forwards;
  -webkit-animation: slideOut 0.2s forwards;
  -moz-animation: slideOut 0.2s forwards;
}

button.DemeterPage, button.DemeterPageActive {
  display: inline-block;
  float: left;
  bottom: 0px;
  z-index: 11;
  height: 10px;
  margin: 0;
  border: solid 1px;
  background: #000;
}

button.DemeterPage:hover, button.DemeterPageActive {background: #AAA;}

/* ANIMATIONS */
keyframes slideIn {
  from {top: 0px;}
  to {top: -40px;} }
@-webkit-keyframes slideIn {
  from {top: 0px;}
  to {top: -40px;} }
@-moz-keyframes slideIn {
  from {top: 0px;}
  to {top: -40px;} }

keyframes slideOut {
  from {top: -40px;}
  to {top: 0px;} }
@-webkit-keyframes slideOut {
  from {top: -40px;}
  to {top: 0px;} }
@-moz-keyframes slideOut {
  from {top: -40px;}
  to {top: 0px;} }

keyframes slideInLeft {
  from {left: -50px;}
  to {left: 0px;} }
@-webkit-keyframes slideInLeft {
  from {left: -50px;}
  to {left: 0px;} }
@-moz-keyframes slideInLeft {
  from {left: -50px;}
  to {left: 0px;} }

keyframes slideOutLeft {
  from {left: 0px;}
  to {left: -50px;} }
@-webkit-keyframes slideOutLeft {
  from {left: 0px;}
  to {left: -50px;} }
@-moz-keyframes slideOutLeft {
  from {left: 0px;}
  to {left: -50px;} }

keyframes slideInRight {
  from {right: -50px;}
  to {right: 0px;} }
@-webkit-keyframes slideInRight {
  from {right: -50px;}
  to {right: 0px;} }
@-moz-keyframes slideInRight {
  from {right: -50px;}
  to {right: 0px;} }

keyframes slideOutRight {
  from {right: 0px;}
  to {right: -50px;} }
@-webkit-keyframes slideOutRight {
  from {right: 0px;}
  to {right: -50px;} }
@-moz-keyframes slideOutRight {
  from {right: 0px;}
  to {right: -50px;} }