* {
    margin: 0;
    padding: 0
}

/* body {
    font-family: Georia, serif;
    font-size: 15px;
    font-weight: 700;
    overflow: hidden;
    color: #333;
    background: #ddd;
    -webkit-font-smoothing: antialiased
} */

a {
    text-decoration: none;
    /* color: #555 */
}

.a-hidden {
    display: none
}

.clr {
    clear: both;
    overflow: hidden;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0
}

.nav {
    font-family: Josefin Slab, Myriad pro, serif;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

.nav a,
.nav input {
    cursor: pointer
}

.nav input {
    z-index: 1000;
    opacity: 0
}

#nav1,
#nav1+a {
    left: 0
}

#nav2,
#nav2+a {
    left: 20%
}

#nav3,
#nav3+a {
    left: 40%
}

#nav4,
#nav4+a {
    left: 60%
}

#nav5,
#nav5+a {
    left: 80%
}

.nav input:checked+a,
.nav input:checked:hover+a {
    background: #821134
}

.nav input:checked+a:after {
    position: absolute;
    bottom: 100%;
    left: 50%;
    overflow: hidden;
    width: 0;
    height: 0;
    margin-left: -20px;
    content: "";
    border: 20px solid transparent;
    border-bottom-color: #821134
}

.nav input:hover+a {
    background: #ad244f
}

.panel,
.scroll {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center
}

.scroll {
    font-weight: 700;
    top: 0;
    left: 0;
    transition: all .6s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    /* color: #e23a6e; */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.panel {
    overflow: hidden;
    background: #fff
}

#nav1:checked~.scroll #panel1 h1,
#nav2:checked~.scroll #panel2 h1,
#nav3:checked~.scroll #panel3 h1,
#nav4:checked~.scroll #panel4 h1,
#nav5:checked~.scroll #panel5 h1 {
    -webkit-animation: moveDown .6s ease-in-out .2s backwards;
    animation: moveDown .6s ease-in-out .2s backwards
}

@-webkit-keyframes moveDown {
    0% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
        opacity: 0
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes moveDown {
    0% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
        opacity: 0
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

.panel p {
    margin-top: 20px;
    color: #000
}

#nav1:checked~.scroll {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

#nav2:checked~.scroll {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

#nav3:checked~.scroll {
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%)
}

#nav4:checked~.scroll {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%)
}

#nav5:checked~.scroll {
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%)
}

.icon {
    top: 0;
    left: 50%;
    margin-left: -100px;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    background: #fa96b5
}

.icon,
[data-icon]:after {
    position: absolute;
    width: 200px;
    height: 200px
}

[data-icon]:after {
    font-size: 90px;
    line-height: 200px;
    top: 18%;
    left: 18%;
    content: attr(data-icon);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    text-align: center;
    color: #fff
}

.panelColor {
    color: #fff;
    /* background: #fa96b5 */
}

.panelColor .icon {
    /* color: #fa96b5; */
    background: #fff
}

.panelColor .icon:after {
    /* color: #fa96b5 */
}

.scroll .panel h1 {
    font-size: 60px
}