html{
    box-sizing: border-box;
    background: #ffc600;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 20px;
    font-weight: 200;
}

body{
    margin:0;
}

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

.panels{
min-height: 100vh;
overflow: hidden;
display: flex;
/* cursor: pointer; */
}
.panels:hover{
    cursor: pointer;
}

.panel{
background: #680F9C;
box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
color: #ffffff;
text-align: center;
align-items: center;
transition: 
    font-size 0.7s cubic-bezier(0.61,-0.19,0.7,-0.11),
    flex 0.7s cubic-bezier(0.61,-0.19,0.7,-0.11),
    background 0.2s;
font-size: 20px;
background-size: cover;
background-position: center;
flex: 1;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
}

.panel1{
    background-image: url(https://c.wallhere.com/photos/00/59/1500x1500_px_fantasy_Art-1024361.jpg!d);
}

.panel2{
    background-image: url(https://images.wallpaperscraft.com/image/hand_art_sculpture_120875_1500x1500.jpg);
}

.panel3{
    background-image: url(https://c.wallhere.com/photos/ee/0b/1500x1500_px_1narnia_adventure_Book_chronicles_Disney_family_fantasy-1490969.jpg!d);
}

.panel4{
    background-image: url(https://c.wallhere.com/photos/1b/92/Neon_Genesis_Evangelion_anime_girls_Asuka_Langley_Soryu_EVA_Unit_02-1379731.jpg!d);
}

.panel5{
    background-image: url(https://i.pinimg.com/564x/75/b8/a6/75b8a6dcd22f021a9a396201d1c92388.jpg);
}

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

.panel p{
    text-align: uppercase;
    font-family:'Amatic SC', cursive;
    text-shadow: 0 0 4px rgba(0,0,0,0.72), 0 0 14px rgba(0,0,0,0.45);
    font-size: 2em;
}

.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:nth-child(2) {
    font-size: 4em;
}

.panel.open {
    flex: 5;
    font-size: 40px;
}

.cta {
    color: white;
    text-decoration: none;
}