h2
 {
    font-weight: 300;
    line-height: 150%;
    text-align: center;
  }

  *,
  *:before,
  *:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  .main-container {
    margin: 25px 25px auto;
    position: relative;
  }
  
  .container {
    position: relative;
    padding: 25px;
  }
  /*animation element*/
  
  .animation-element {
    position: relative;
    width: 95%;
    margin: 0% 1.33 2.66% 1.33%;
    float: left;
  }
  /*3 grid layout*/
  
  /* .animation-element:nth-of-type(3n-2) {
    width: 31.5%;
    margin: 0% 1.375% 2.75% 0%;
    clear: left;
  }
  .animation-element:nth-of-type(3n-1) {
    width: 31.5%;
    margin: 0% 1.375% 2.75% 1.375%;
  }
  
  .animation-element:nth-of-type(3n-0) {
    width: 31.5%;
    margin: 0% 0% 2.75% 1.375%;
    clear: right;
  } */
  /*bounce up animation for the subject*/
  
  .bounce-up .subject {
    -moz-transition: all 1000ms ease-out;
    -webkit-transition: all 1000ms ease-out;
    -o-transition: all 1000ms ease-out;
    transition: all 1000ms ease-out;
    -moz-transform: translate3d(0px, 100px, 0px);
    -webkit-transform: translate3d(0px, 100px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 100px, 0px);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .bounce-up.in-view .subject {
    opacity: 1;
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    
  }
.subject.development img {
	width: 100%;
	transition-duration: .3s;
} 
  .subject.development {
    float: left;
    width: 100%;
    margin: 0% 1.33% 2.66% 1.33%;
    background: #F5F5F5;
    padding: 15px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
    border: 3px solid black;
  }
  
  .subject.development:hover{
    border: 3px solid #f04d21;
    transform:  translateY(-10px);
  }
  
  .subject .header {
    margin: 8px 0px;
  }
  /*media queries for small devices*/
  
  @media screen and (max-width: 678px) {
    .main-container {
      margin: 20px 15px;
    }
    .animation-element
    /* .animation-element:nth-of-type(3n-1),
    .animation-element:nth-of-type(3n-2),
    .animation-element:nth-of-type(3n-0) */
     {
      width: 100%;
      margin: 0px 0px 30px 0px;
    }
    .subject .header .date,
    .subject .header .category {
      width: 100%;
      margin-bottom: 10px;
      text-align: center;
    }
  }