/* List of Blocks Animation */

.simple-list-of-blocks-content {
  text-align: center;
  margin: 30px auto;
  width: 100%;
}

.simple-list-of-blocks-content img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}

.simple-list-of-blocks-content li {
  width: 220px;
  height: 10%;
  overflow: hidden;
  float: left;
  background: transparent;
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  margin-right: 4px;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
}

.simple-list-of-blocks-content li a {
  text-align: center;
  width: 100%;
  height: 100%;
  display: block;
  color: #333;
  position: relative;
  text-decoration: none;
  border-bottom: none;
}

.simple-list-of-blocks-content li:last-child {
  margin-right: 8px;
}

.simple-list-of-blocks-title {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 100%;
  margin: 0;
  color: #008241;
  opacity: 0.8;
  padding: 10 0 0 10;
  text-align: center;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}

.simple-list-of-blocks-content li:hover {
  background-color: #e8ffea;
}

.list-items-flex img:hover {
  webkit-filter: blur(2px);
  filter: blur(2px);
  color: transparent;
  width: 100%;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}

.simple-list-of-blocks-content li:hover .simple-list-of-blocks-title {
  padding: 10px;
  color: #000;
  font-size: 115%;
  -webkit-animation: moveFromTop 300ms ease;
  -moz-animation: moveFromTop 300ms ease;
  -ms-animation: moveFromTop 300ms ease;
}

/* Animaton Lists */
.home .posts-list li {
  font-size: 90%;
}
.posts-list {
  padding: 0;
  width: 100%;
}

.posts-list li {
  padding: 0% 35% 0.5% 2%;
  list-style: none;
  width: 60%;
  height: 100%;
  position: relative;
  display: block;
  background: #fff;
  border-radius: 3px;
}

.posts-list li h2 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  width: 100%;
  display: inline-block;
}

.posts-list li:last-child {
  margin-bottom: 0px;
}

.posts-list li a {
  -webkit-tap-highlight-color: transparent;
  border-bottom: none;
  text-decoration: none;
  max-width: 100%;
  text-align: left;
  width: 100%;
  height: 100%;
  display: block;
  color: #4a8c55;
  position: relative;
}

.posts-list .simple-list-content {
  left: 100px;
  height: 60px;
  margin: 0;
}

.posts-list .simple-list-content h2 {
  margin: 0;
  position: relative;
  font-weight: normal;
}

.posts-list span {
  width: 100vh;
  max-width: 145%;
  font-size: 90%;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
}

.posts-list .simple-list-title {
  width: 100vh;
  max-width: 145%;
  font-size: 80%;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
}

.posts-list .simple-list-date {
  margin-top: 2%;
  max-width: 100%;
  font-size: 58%;
  color: #666;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
}

.posts-list li:hover {
  background: #e8ffea;
}

.posts-list li:hover span {
  opacity: 1;
  color:#0B735E;
  font-size: 98%;
  max-width: 160%;
}

.posts-list li:hover .simple-list-title {
  opacity: 1;
  color: #0B735E;
  font-size: 98%;
  max-width: 160%;
  -webkit-animation: moveFromTop 300ms ease-in-out;
  -moz-animation: moveFromTop 300ms ease-in-out;
  -ms-animation: moveFromTop 300ms ease-in-out;
}

.posts-list li:hover .simple-list-date {
  opacity: 1;
  font-size: 66%;
  -webkit-animation: moveFromBottom 300ms ease-in-out;
  -moz-animation: moveFromBottom 300ms ease-in-out;
  -ms-animation: moveFromBottom 300ms ease-in-out;
}

@media screen and (max-width : 760px) {
  .home .posts-list li {
    font-size: 88%;
  }

  .posts-list li:hover .simple-list-title {
    opacity: 1;
    color: #0B735E;
    font-size: 88%;
    max-width: 160%;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
  }

  .simple-list-of-blocks-content {
    text-align: center;
    width: 80%;
  }

  .simple-list-of-blocks-content li {
    margin: 10 0 0 0;
    width: 84%;
    height: 10%;
    overflow: hidden;
    float: left;
    background: transparent;
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-right: 4px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
  }

  .simple-list-of-blocks-content li:last-child {
    margin: 5% 0% 20% 0%;
  }
}