a {
	color : inherit;
}

body {
	font-family : sans-serif;
	overflow    : hidden;
	margin      : 0;
}

.extra-info {
	opacity    : 0;
	transition : opacity 0.5s;
}

h1 {
	font-size : 1.5em;
}

.panels {
	align-content   : center;
	align-items     : stretch;
	animation       : slide 0.75s 1;
	color           : #fff;
	display         : flex;
	flex-flow       : column nowrap;
	font-size       : 1.5em;
	height          : 100%;
	justify-content : space-between;
	overflow        : hidden;
	/* This allows the panels to take up the entire height; you can remove this to have it fit what is necessary */
	position        : absolute;
	width           : 100%;
}

.panel {
	align-items     : center;
	display         : flex;
	flex            : 1 100%;
	flex-direction  : column;
	justify-content : center;
	line-height     : 1.5em;
	transition      : flex 0.3s;
}

.panel:hover {
	flex : 1 150%;
}

.panel:before {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0;
    background: url(../img/shadow.png) no-repeat center 35%;
    -webkit-transition: opacity .3s linear;
    -moz-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    transition: opacity .3s linear;
}
.panel:hover .extra-info {
	opacity : 1;
}

#panel-one {
	background : #f2b635;
}

#panel-two {
	background : #00a0e6;
}

#panel-three {
	background : #00caff;
}

#panel-four {
	background : #F19A2A;
}

#panel-five {
	background : #F2B635;
}

@keyframes slide {
	0% {
		bottom : 100%;
	}

	80% {
		bottom : -15%;
	}

	100% {
		bottom : 0%;
	}
}

@media all and (min-width : 640px) {
	.panels {
		flex-flow : row nowrap;
	}
}