.flex-container {
  
  max-width: 1000px;
  padding: 20px;
  margin: 0 auto;
  list-style: none;
  overflow: hidden;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  justify-content: center;
}

.flex-item{
background:#fff;
padding:5px;
width:290px;
height:300px;
line-height:300px;
font-weight:bold;
font-size:.85em;
text-align:center;
margin:15px 10px;
/*box-shadow*/
-webkit-box-shadow:0 1px 3px rgba(black, 0.2);
   -moz-box-shadow:0 1px 3px rgba(black, 0.2);
        box-shadow:0 1px 3px rgba(black, 0.2);
color:rgba(70,130,180, 0);
/*border-radius*/
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
}


body {
  background: url(http://s.cdpn.io/3/blurry-blue.jpg);
  background-size: cover;
  padding: 30px;
}
 
.come-in {
	transform: translateY(150px);
  -webkit-animation: come-in 0.6s ease forwards;
  -moz-animation: come-in 0.6s ease forwards;
}
.come-in:nth-child(3n) {
  animation-duration: 1.5s;
}
.already-visible {
  transform: translateY(0);
  animation: none;
}

@keyframes come-in {
  to { transform: translateY(0); }
}

#overlay {
	background:rgba(0,0,0,0.7);
	position: fixed;
	top:0;
	left:0;
	bottom: 0;
	right: 0;
    display: none;
	text-align:center;
}

#overlay iframe {
	margin: -200px 0 0 -200px;
	position: absolute;
	left: 25%;
	top: 25%;
	width: 80%;
	height: 100%;
}

a {
	text-decoration:none;
	color: rgba(255,255,255, 1);
}

.personal, .professional {
	-webkit-transition: background 0.4s ease-in-out;
	color: rgba(255,255,255, 0);
}

.personal:hover {
	background: rgba(133,222,242,.7);
	color: rgba(255,255,255, 1);
}

.professional:hover {
	background: rgba(118,204,188,.7);
	color: rgba(255,255,255, 1);
}

.page a, .post a {
	margin: 0px; 
	display: block; 
	width: 100%; 
	height: 100%;
}

h1, h3, .social-media {
	display: block;
    text-align: center;  
}

h1 {
	font-size: 70px;
	font-weight: bold;
	margin-bottom: 5px;
	color: #b3b3b3;
	color: rgba(255, 255, 255, 0.3);
}

h3 {
	color: rgba(255, 255, 255, 0.6);
}

.social-media {
	list-style: none;
    margin:0;
    padding:0;
}

.social-media li {
	display: inline;
	margin:;
}

.social-icon a img{
	height: 26px;
	width: 24px;
}

.social-icon { font-size: 26px; z-index: 9999;  
	letter-spacing: 10px; 
}

.todo-tile {
	background-image: url("../img/todo_tile.png");
}

.intoeat-tile {
	background-image: url("../img/intoeat_tile.png");
}

.crime_scene_tile {
	background-image: url("../img/crime_scene_tile.png");
}

.internship_co_tile {
	background-image: url("../img/internship2-13_tile.png");
}

.new_semester_tile {
	background-image: url("../img/new_semester_tile.png");
}

.angtodo-tile {
    background-image: url("../img/angtodo.png");
}

.imgur-tile {
    background-image: url("../img/imgurfrontpage.png");
}

.propositional_checker_tile {
    background-image: url("../img/propositional_tile.png");
}

.tju_tile {
    background-image: url("../img/tju_tile.png");
}

.recaman_tile {
    background-image: url("../img/recaman_tile.png");
}

.snake_tile {
    background-image: url("../img/snake_tile.png");
}