@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
opacity:0;  
-webkit-animation:fadeIn ease-in-out 1; 
-moz-animation:fadeIn ease-in-out 1;
animation:fadeIn ease-in-out 1;

-webkit-animation-fill-mode:forwards;  
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}

.fade-in.left {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}

.fade-in.center {
-webkit-animation-delay: 1s;
-moz-animation-delay:1s;
animation-delay: 1s;
}

.fade-in.right {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}


body {
   font-family: open-sans;
   font-style: normal;
   font-weight: 300;
   font-size: 12px;
   line-height:12px;
   margin:0;
   padding:0;
   }
.container {
   width: 630px;
   margin-right: auto;
   margin-left: auto;
   margin-top:120px;
}
.container .box {
   width: 200px;
   height:200px;
   margin:5px;
   float: left;
   overflow:hidden;
   position:relative;
   color: #EAE9DB;
}
.container .box .content {
   position: absolute;
   width: 186px;
   height: 186px;
   top: 0px;
   left: 0px;
   padding:7px;    
   -webkit-transition: top 0.7s ease-in-out;
   -o-transition: top 0.7s ease-in-out;
   transition: top 0.7s ease-in-out;
}
.container .box:hover .content,
.container .box:focus .content {
   top:-200px;
}

.container .box.left {
   background-color:#c8c27f;
}
.container .box.center .content {
   background-color:#0099ab;
}
.container .box.right .content {
   background-color:#93aa46;
}
.container .box h3 {
  margin: 0;
  padding: 0;
  font-size:24.24px;
  line-height:29px;
  letter-spacing: -0.04em;
}
.container .box.center h3 {

}
.container .box h3 sup{
  font-size:16px;
  line-height:0px;
}
.container .box .content ul {
  position:absolute;
  top:100px;
  left:7px;
  padding: 0;
  margin: 0;
  font-size:14px;
  line-height:17px;
}
.container .box .content ul li {
   list-style-type: none;
}
.container .box .email,
.container .box .logo {
   position:absolute;
   bottom:0px;
   left:0px;
   right:0;
   padding: 5px 7px;
}
.container .box.center .email {
   background-color: rgba(0,153,171,0.70);
}
.container .box.right .email {
   background-color: rgba(147,170,70,0.70);
}
.container .box .email a {
   color:inherit !important;
   text-decoration:none;
   }
.container .box .email a:hover,
.container .box .email a:focus {
   text-decoration:underline;
   }
.container .footer {
   clear: both;
   text-align:center;
   padding-top:54px;
   line-height:17px;
}


@media screen and (max-width:630px)
and (orientation: portrait){
  .container {
    margin-top:50px;
    width:95%;
    padding:0 2.5%;
  }
  .container .box{
    float:none;
    margin:10px auto;
  }
  .container .footer {
    padding-top:50px;
  }
}