body {
    margin: 0;
}

/* front selector */
*, *:before, *:after {
    box-sizing: inherit;
}

.panels {
    min-height: 100vh;
    overflow: hidden;
    display: flex;
}
.panel {
    color:white;
    text-shadow: 3px 3px 50px black;
    text-align: center;
    transition:
        font-size 1s cubic-bezier(1, -0.3, 0.5, 1),
        flex 1.3s cubic-bezier(1, -0.3, 0.5, 1);
    font-size: 1.3rem;
    background-size: cover;
    background-position: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    cursor: default;
    filter: grayscale(50%);
}

.design { background-image: url(http://www.juliusanghelina.ro/images/front-page/3d.jpg) }
.javascript { background-image:url(http://www.juliusanghelina.ro/images/front-page/code.jpg) }
.photography { background-image:url(http://www.juliusanghelina.ro/images/front-page/world.jpg) }

/* Flex Items */
.panel > * {
    margin: 0;
    width: 100%;
    transition: transform .5s ease-out;
    flex: 1 0 auto;
    display:flex;
    justify-content: center;
    align-items: center;
}

.panel:hover {
    filter: none;
}

.panel > *:first-child { transform: translateY(-100%); }

.panel.open-active > *:first-child { transform: translateY(0); }

.panel > *:last-child { transform: translateY(100%); }

.panel.open-active > *:last-child { transform: translateY(0); }

.panel p {
    font-family: 'Teko', sans-serif;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
}
.panel .main-title {
    font-size: 4rem;
}
.panel.open {
    flex: 3;
    font-size: 2.5rem;
}
.open-active .main-title {
    color: orange;
    transform: scale(1.5);
}

@media only screen and (max-width: 700px) {
    .panel .main-title {
        font-size: 2.5rem;
    }
    .panel.open {
        flex: 2;
        font-size: 1rem;
    }
}

@media only screen and (max-width: 500px) {
    .panels {
        flex-direction: column;
    }
    .panel > *:first-child { display: none; }

    .panel.open-active > *:first-child { display: none; }

    .panel > *:last-child { display: none; }

    .panel.open-active > *:last-child { display: none; }

}