.tile {
  display: block;
  height:160px;
  width:160px;
  overflow:hidden;
  margin-top: 12%;  
  z-index:10;  
  }

.tile div 
{
  display: block;
  margin: 0 auto;
  width: 90%;
}

.tile-content:hover 
{
    cursor:pointer;
	background:#2a7b9b;
    }       

.tile .tile-content, .tile .tile-content-static {
  display: block;
  height: 22em;
  width: 100%;
  position: relative;
  }
        
.tile .tile-content .content, .tile .tile-content-static .content {
   display: block;
   height: 22em;
   width: 100%;
   position: absolute;
   }
        
.tile .tile-content .content.one, .tile .tile-content-static .content.one {
   top: 0;
   display: block;
   height: 22em;
   width: 100%;
  }
        
.tile .tile-content .content.two {
   top: 13.3em;
   display: block;
   height: 22em;
   width: 100%;
   background:#2a7b9b;
  }
        
/*.tile .tile-content h1, .tile .tile-content-static h1*/
.tile h3 {
   color: #fff;
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
   font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif;
   font-weight: normal;
   text-align: center;
   margin-top: 1em;        
   font-weight: 400;
   font-size: 1.8em;
   }
   
.tile h4 {
   color: #fff;
   font-family: 'segoe ui', sans-serif;
   font-weight: normal;
   text-align: center;
   margin-top: -1.0em;        
   font-weight: 400;
   font-size: 1em;
   }
   
.tile p {
   font-weight: 100;
   font-size: 60%;
   line-height:1.1em;
   }
   
.tile a {
   font-size: 1.8em;
   line-height:1.1em;
   display:block;
   color: #fff;
   font-family: 'segoe ui', sans-serif;
   text-decoration: none;
   }
   
.tile li 
{
 margin-left: 5px;
 margin-top: 5px;
 padding: 0; 
 font-family: Arial, sans-serif;
 font-size: 65%;
 color: #fff;
 line-height:0.1em;
 list-style-type: none; 
}
/*colors*/       
.orange 
 {
  background-color: rgba(255, 255, 255, 0.8);
    -webkit-animation: fadein 6s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 6s; /* Firefox < 16 */
        -ms-animation: fadein 6s; /* Internet Explorer */
         -o-animation: fadein 6s; /* Opera < 12.1 */
            animation: fadein 6s;
}

@keyframes fadein {
    from { opacity: 0; 
		transform: translate(0px, 600px) rotateZ(0deg); }
    to   { opacity: 1; 
		transform: translate(0px, 0px) rotateZ(360deg); }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; 
		transform: translate(0px, 600px) rotateZ(0deg); }
    to   { opacity: 1; 
		transform: translate(0px, 0px) rotateZ(360deg); }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; 
		transform: translate(0px, 600px) rotateZ(0deg); }
    to   { opacity: 1; 
		transform: translate(0px, 0px) rotateZ(360deg); }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; 
		transform: translate(0px, 600px) rotateZ(0deg); }
    to   { opacity: 1; 
		transform: translate(0px, 0px) rotateZ(360deg); }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; 
		transform: translate(0px, 600px) rotateZ(0deg); }
    to   { opacity: 1; 
		transform: translate(0px, 0px) rotateZ(360deg); }
} 

@media screen and (max-width:680px) {
.tile {
  height:110px;
  width:110px;
  }
.tile h3 {
   margin-top: 0.1em;        
   font-size: 1.4em;
   }
   
.tile h4 {
   margin-top: -3.8em;        
   font-size: 1em;
   } 
 .tile p {
   font-weight: 100;
   font-size: 0.8em;
   line-height:0.4em;
   }
   
.tile a {
   font-size: 1.4em;
   line-height:0.4em;
   }
}