/* inspired from https://codepen.io/ungmo2/pen/vXZMEj */

.parallax-container {
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-around;
    position: relative;
    width: 100%;
    overflow: auto;

    section {
        width: 100%;
        height: 100%;
        flex: 1;
        display: flex;
        position: relative;
        overflow: auto;
        background-color: #000;

        &:nth-child(1) {
            .image {
                background-image: url(https://images.unsplash.com/photo-1463412855783-af97e375664b?iq=100&fm=jpg&w=1000);
            }
        }

        &:nth-child(2) {
            .image {
                background-image: url(https://images.unsplash.com/photo-1462819067004-905a72ea3996?iq=100&fm=jpg&w=1000);
            }
        }

        &:nth-child(3) {
            .image {
                background-image: url(https://images.unsplash.com/photo-1461770354136-8f58567b617a?iq=100&fm=jpg&w=1000);
            }
        }

        &:nth-child(4) {
            .image {
                background-image: url(https://images.unsplash.com/photo-1461080639469-66d73688fb21?iq=100&fm=jpg&w=1000);
            }
        }

        &:nth-child(5) {
            .image {
                background-image: url(https://images.unsplash.com/photo-1460804198264-011ca89eaa43?iq=100&fm=jpg&w=1000);
            }
        }

        &:nth-child(6) {
            .image {
                background-image: url(https://images.unsplash.com/photo-1463123081488-789f998ac9c4?iq=100&fm=jpg&w=1000);
            }
        }

        .image {
            background-attachment: fixed;
            background-size: cover;
            //background-repeat: no-repeat;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 500;
            opacity: 0.4;
        }

        .stuff {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            height: 100%;
            width: 100%;
            max-width: 70%;
            z-index: 1000;
            color: #e67e22;
            margin: 0 auto;
            font-size: 26px;
            position: relative;

            h2 {
                margin: 0px;
            }

            &:before,
            &:after {
                width: 100%;
                height: 1px;
                display: block;
                background-color: #d35400;
                content: "";
                margin: 30px 0;
            }
        }
    }
}