.flex-container {
	flex-wrap: wrap;
}

#loading-bar {
	height: 7px;
	width: 0%;
	background-color: #4444bb;
	box-shadow: inset -8px 0 0 #222,
				0 0 18px 0 #333; 
	animation: loadingBar 1s forwards;
	top: 0;
	position: fixed;
	z-index: 10;
}

@keyframes loadingBar {
	0% { width: 0%; }
	100% { width: 100%; }
}

.flex {
	flex: 1,
	flex-basis: 33%;
	margin: 2em;
	padding: 2em;
	box-shadow: 0 0 15px -3px #222;
}

.flex:hover {
	flex: 1;	
	z-index: 1;
	box-shadow: 0 0 25px 0 #444;
}

body {
	height: 100%;
	margin: 0;
}

#main-box {
	min-height: 100%;
	background-color: rgba(0,0,0, .5);
	transition: 0.5s transform;
}

#background-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	filter: blur(5px);
	background-size: cover;
	background-position: center;
	transition: 0.3s all;
}

.box {
	align-items: flex-start;
	min-height: 7em;
	text-align: center;
	flex: 1;
	flex-basis: 18%;
	transform: scale(1.5);
	opacity: 0;
	padding: 1em;
	margin: 1em;
	box-shadow: 0 20px 20px -10px #222, 0 0 0 1px #888;
	background-image: url(../img/pong.png);
	cursor: pointer;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 1; 
	transition: 0.4s all;
}

.box.wettterminal {
	background-image: url(../img/wettterminal.png);
}

.box.snakeki {
	background-image: url(../img/snakeki.png);
}

.box.snake {
	background-image: url(../img/snake.png);
}

.box.windowsui {
	background-image: url(../img/windowsui.png);
}

.box.colorgame {
	background-image: url(../img/colorgame.png);
}

.box.preisy {
	background-image: url(../img/preisy.png);
}

.box.slotmachine {
	background-image: url(../img/slotmachine.png);
}

.box.thebox {
	background-image: url(../img/thebox2.png);
}

.box.flappy {
	background-image: url(../img/flappy.png);
}

.box.gabu {
	background-image: url(../img/gabu.png);
}

.box.tictactoe {
	background-image: url(../img/tictactoe.png);
}

.box.library {
	background-image: url(../img/mikjs.jpg);
}

.box.myeasyscript {
	background-image: url(../img/myeasyscript.png);
}

.box.arrowgame {
	background-image: url(../img/arrowgame.png);
}

.box.impressive {
	background-image: url(../img/impressive.png);
}


.dark-layer {
	background-color: rgba(0,0,0,0.8);
	transition: 0.5s background-color;
	height: 100%;
	z-index: -1;
}

.box.animation {
	animation: popIn 0.6s forwards;
}

.box.hoverAnimation {
	transform: scale(1);
	opacity: 1;
	animation: imagePop 0.7s;  
	transition: 0.01s transform;
}
/*
.box.hoverAnimation:hover {
	transform: scale(1.3);
	background-color: rgba(0,0,0,0.1);
	z-index: 2;
}
*/
.box.hoverAnimation:hover > .dark-layer {
	background-color: rgba(0,0,0,0.5);
}

.box.hoverAnimation:hover > a {
	color: transparent;
}

.box h2 {
	color: #acc8f7;
	text-transform: uppercase;
	font-weight: lighter;
}

.box span {
	color: #eee;
	display: block;

}

@keyframes imagePop {
	0% { background-size: 100%; transform: scale(1); }
	25% { background-size: 120%; transform: scale(1.08); }
	100% { background-size: 100%; transform: scale(1); }
}

@keyframes popIn {
	0% { opacity: 0;transform: scale(1.4); }
	40% { opacity: 1; }
	60% { transform: scale(0.92); }
	100% { transform: scale(1);opacity: 1;}
}

#focused-project {
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	transition: 0.3s transform, 0.3s opacity, 0.3s visibility;
}

#focused-project.hide {
	visibility: hidden;
	opacity: 0;
	transform: scale(0.9);
}

#focused-project .dark-layer {
	background-color: rgba(0,0,0,.4);
}

#background-project-focus {
	background-image: url(../img/windowsui.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 20rem;
	transition: 0.3s height;
}

#background-project-focus:hover {
	height: 25rem;
}

.container-focus {
	width: 50%;
	margin: 5rem auto;
	text-align: center;
	box-shadow: 0 3px 15px -2px #222;
	background-color: #111;
}

.container-focus .content {
	padding: 1rem;
}

#title {
	text-transform: uppercase;
	padding-bottom: 1rem;
}

.container-focus .content a {
	text-align: right;
	display: block;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {

}
@media only screen and (max-width: 830px) {

}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {

}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 640px) {

}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.container-focus {
		width: 85%;
	}

	.box {
		margin: 0.5rem;
	}
}