.reveal-box::before {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 3;
            background-color: var(--color-secondary); /*use same color as background*/
            animation: reveal-pic 1200ms cubic-bezier(0.5, 1, 0.2, 1) forwards;
            animation-delay: .5s;
            bottom:0;
            right:0;
        }

        .reveal-box {
            width: 100%;
            height: 40%;
            position: absolute;
            z-index: 2;
            background-size: cover;
            background-position:bottom;
            background-image: url('../images/about.jpg');
            background-repeat: no-repeat;
            bottom:0;
            right:0;
        }

        .reveal-box::after {
            content: '';
            position: absolute;
            height: 100%;
            background: var(--color-primary);
            animation: reveal-block 1200ms cubic-bezier(0.5, 1, 0.2, 1) forwards;
            animation-delay: .5s;
            z-index: 4;
        }

        @keyframes reveal-block {
            0% {
                right: 0%;
                width: 0%;
            }

            50% {
                right: 0%;
                width: 100%;
            }

            100% {
                right: 100%;
                width: 0%;
            }
        }

        @keyframes reveal-pic {

            0% {
                right: 0%;
                width: 100%;
            }

            100% {
                right: 100%;
                width: 0%;
            }
        }

        .reveal-box2::before {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 3;
            background-color: var(--color-secondary); /*use same color as background*/
            animation: reveal-pic2 1200ms cubic-bezier(0.5, 1, 0.2, 1) forwards;
            animation-delay: .5s;
        }

        .reveal-box2 {
            width: 100%;
            height: 40%;
            position: absolute;
            z-index: 2;
            background-size: cover;
            background-position:bottom;
            background-image: url('../images/map.jpg');
            background-repeat: no-repeat;
            bottom:0;
            left:0;
        }

        .reveal-box2::after {
            content: '';
            position: absolute;
            
            height: 100%;
            background: var(--color-primary);
            animation: reveal-block2 1200ms cubic-bezier(0.5, 1, 0.2, 1) forwards;
            animation-delay: .5s;
            z-index: 4;
        }

        @keyframes reveal-block2 {
            0% {
                left: 0%;
                width: 0%;
            }

            50% {
                left: 0%;
                width: 100%;
            }

            100% {
                left: 100%;
                width: 0%;
            }
        }

        @keyframes reveal-pic2 {

            0% {
                left: 0%;
                width: 100%;
            }

            100% {
                left: 100%;
                width: 0%;
            }
        }