/*PARALLAX*/

    /*FIX ACF BLOCK PREVIEW*/

        .acf-block-preview .parallax-block {
            min-height: 200px;
        }

        .acf-block-preview .fade-up, .acf-block-preview .fade-down, .acf-block-preview .fade-left, .acf-block-preview .fade-right {
            opacity: 1 !important;
        }

    /*GENERAL THEMING*/

        /*BUTTONS*/

            .parallax-block .buttons .primary-button {
                display: inline-block;
            }

    /*SIDE BY SIDE*/

        /*OVERFLOW*/

            .parallax-block .side-by-side {
                overflow: hidden;
            }

        /*ALIGNMENT*/

            /*NORMAL*/

                .parallax-block .side-by-side.row-normal {
                    flex-direction: row !important;
                }

            /*REVERSE*/

                .parallax-block .side-by-side.row-reverse {
                    flex-direction: row-reverse !important;
                }

        /*ARTICLE*/

            .parallax-block .side-by-side article {
                width: 50%;
            }

        /*ASIDE*/

            .parallax-block .side-by-side aside {
                position: relative;
                width: 50%;
                overflow: hidden;
            }

            /*BACKGROUND*/

                .parallax-block .side-by-side aside .background {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    height: 140%;
                    transform-style: preserve-3d;
                    background-attachment: fixed !important;
                }

                /*GRAINY*/

                    .parallax-block .side-by-side aside .background:after {
                        animation: grain 8s steps(10) infinite;
                        background-image: url("/wp-content/themes/builderv2/blocks/parallax-block/images/grain.png");
                        background-repeat: repeat;
                        content: "";
                        height: 300%;
                        left: -50%;
                        opacity: 1;
                        position: fixed;
                        top: -100%;
                        width: 300%;
                    }
                    
                    @keyframes grain {
                        0%, 100% { transform:translate(0, 0) }
                        10% { transform:translate(-5%, -10%) }
                        20% { transform:translate(-15%, 5%) }
                        30% { transform:translate(7%, -25%) }
                        40% { transform:translate(-5%, 25%) }
                        50% { transform:translate(-15%, 10%) }
                        60% { transform:translate(15%, 0%) }
                        70% { transform:translate(0%, 15%) }
                        80% { transform:translate(3%, 35%) }
                        90% { transform:translate(-10%, 10%) }
                    }

    /*TRIPLE IMAGE WITH COPY*/

        /*ALIGNMENT*/

            /*NORMAL*/

                .parallax-block .triple-image-with-copy .center.row-normal {
                    flex-direction: row !important;
                }

            /*REVERSE*/

                .parallax-block .triple-image-with-copy .center.row-reverse {
                    flex-direction: row-reverse !important;
                }

        /*ARTICLE*/

            .parallax-block .triple-image-with-copy article {
                width: 65%;
            }

        /*ASIDE*/

            .parallax-block .triple-image-with-copy aside {
                width: calc(35% - 50px);
            }

            /*PICTURES*/

                .parallax-block .triple-image-with-copy aside .picture:first-of-type {
                    width: 100%;
                    margin-bottom: 25px;
                }

                .parallax-block .triple-image-with-copy aside .picture:not(first-of-type) {
                    width: calc(50% - 12.5px);
                }

    /*OFFSET PICTURE AND CONTENT*/

        /*ALIGNMENT*/

            /*NORMAL*/

                .parallax-block .offset-picture-and-content .center.row-normal {
                    flex-direction: row !important;
                }

            /*REVERSE*/

                .parallax-block .offset-picture-and-content .center.row-reverse {
                    flex-direction: row-reverse !important;
                }

        /*ARTICLE*/

            .parallax-block .offset-picture-and-content .center article {
                width: 50%;
                padding: 100px;
            }

        /*ASIDE*/

            .parallax-block .offset-picture-and-content .center aside {
                width: 50%;
            }

    /*SLIDING BARS*/

        .parallax-block .sliding-bars {
            position: relative;
            min-height: 100px;
        }

        /*SLIDE*/

            .parallax-block .sliding-bars .slide {
                position: relative;
                overflow: hidden;
            }

            /*PICTURE*/

                .parallax-block .sliding-bars .picture {
                    position: relative;
                    width: 75%;
                    overflow: hidden;
                }

                /*THE SOLID COLOUR*/

                    .parallax-block .sliding-bars .picture::before {
                        position: absolute;
                        top: 0px;
                        right: 0px;
                        content: '';
                        width: 100%;
                        height: 100%;
                        transform: translateX(-100%);
                        z-index: 10;
                    }

                    /*ON ACTIVE-SLIDE, TRANSFORM THE SOLID COLOUR*/

                        .parallax-block .sliding-bars .active-slide .picture::before {
                            transform: translateX(0%);
                            transition: .25s ease-in;
                            animation-name: slideout;
                            animation-delay: .35s;
                            animation-duration: .35s;
                            animation-fill-mode: forwards;
                        }

                        @keyframes slideout {
                            0% {
                                width: 100%;
                            }
                            100% {
                                width: 0px;
                            }
                        }

                /*IMAGE*/

                    .parallax-block  .sliding-bars .picture .bg {
                        opacity: 0;
                        height: 100%;
                        z-index: 5;
                    }

                    /*ON ACTIVE-SLIDE, TRANSFORM THE IMAGE*/

                        .parallax-block .sliding-bars .active-slide .picture .bg {
                            animation-name: bg-slidein;
                            animation-delay: .35s;
                            animation-duration: .45s;
                            animation-fill-mode: forwards;
                        }

                        @keyframes bg-slidein {
                            0% {
                                transform: scale(1.75);
                                opacity: 0;
                            }
                            100% {
                                transform: scale(1);
                                opacity: 1;
                            }
                        }

            /*CONTENT*/

                .parallax-block .sliding-bars .content {
                    position: absolute !important;
                    top: 50%;
                    right: 50px;
                    width: 45%;
                    padding: 75px !important;
                    transform: translateY(-50%);
                    z-index: 15;
                }

                /*TITLE*/

                    .parallax-block .sliding-bars .content .title {
                        opacity: 0;
                    }

                /*SUBTITLE*/

                    .parallax-block .sliding-bars .content .subtitle {
                        opacity: 0;
                    }

                /*TITLE*/

                    .parallax-block .sliding-bars .content .subhead {
                        opacity: 0;
                    }

                /*COPY*/

                    .parallax-block .sliding-bars .content .copy {
                        opacity: 0;
                    }

                /*BUTTONS*/

                    .parallax-block .sliding-bars .content .buttons {
                        opacity: 0;
                    }

                /*KEYLINE*/

                    .parallax-block .sliding-bars .content .keyline-holder {
                        opacity: 0;
                    }

                /*MAKE VISIBLE AFTER DELAY*/

                .parallax-block .sliding-bars .active-slide .content .title {
                        animation-name: fade-in;
                        animation-duration: .25s;
                        animation-delay: .25s;
                        animation-fill-mode: forwards;
                    }

                    .parallax-block .sliding-bars .active-slide .content .subtitle {
                        animation-name: fade-in;
                        animation-duration: .25s;
                        animation-delay: .5s;
                        animation-fill-mode: forwards;
                    }

                    .parallax-block .sliding-bars .active-slide .content .subhead {
                        animation-name: fade-in;
                        animation-duration: .25s;
                        animation-delay: .5s;
                        animation-fill-mode: forwards;
                    }

                    .parallax-block .sliding-bars .active-slide .content .copy {
                        animation-name: fade-in;
                        animation-duration: .25s;
                        animation-delay: .75s;
                        animation-fill-mode: forwards;
                    }

                    .parallax-block .sliding-bars .active-slide .content .keyline-holder {
                        animation-name: fade-in;
                        animation-duration: .25s;
                        animation-delay: .75s;
                        animation-fill-mode: forwards;
                    }

                    .parallax-block .sliding-bars .active-slide .content .buttons {
                        animation-name: fade-in;
                        animation-duration: .25s;
                        animation-delay: .75s;
                        animation-fill-mode: forwards;
                    }

                    @keyframes fade-in {
                        0% {
                            opacity: 0;
                        }
                        50% {
                            opacity: 0.5;
                        }
                        100% {
                            opacity: 1;
                        }
                    }

        /*REVERSE*/

            /*PICTURE*/

                .parallax-block .sliding-bars .row-reverse .picture {
                    margin-left: 25%;
                }

                    /*THE SOLID COLOUR*/

                        .parallax-block .sliding-bars .row-reverse .picture::before {
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            content: '';
                            width: 100%;
                            height: 100%;
                            transform: translateX(100%);
                            z-index: 10;
                        }

                        /*ON ACTIVE-SLIDE, TRANSFORM THE SOLID COLOUR*/

                            .parallax-block .sliding-bars .row-reverse.active-slide .picture::before {
                                transform: translateX(0%);
                                transition: .25s ease-in;
                                animation-name: slideout-alt;
                                animation-delay: .35s;
                                animation-duration: .35s;
                                animation-fill-mode: forwards;
                            }

                            @keyframes slideout-alt {
                                0% {
                                    width: 100%;
                                }
                                100% {
                                    width: 0px;
                                }
                            }

                    /*ON ACTIVE SLIDE, TRANSFORM THE IMAGE*/

                        .parallax-block .sliding-bars .row-reverse.active-slide .picture .bg {
                            animation-name: bg-slidein-alt;
                            animation-delay: .35s;
                            animation-duration: .45s;
                            animation-fill-mode: forwards;
                        }

                        @keyframes bg-slidein-alt {
                            0% {
                                transform: scale(1.75);
                                opacity: 0;
                            }
                            100% {
                                transform: scale(1);
                                opacity: 1;
                            }
                        }

            /*CONTENT*/

                .parallax-block .sliding-bars .row-reverse.active-slide .content {
                    position: absolute;
                    top: 50%;
                    left: 50px;
                    width: 45%;
                    padding: 75px;
                    transform: translateY(-50%);
                    z-index: 15;
                }

        /*DISABLE THE COOL STUFF FOR THE EDITOR*/

            .acf-block-preview .parallax-block .sliding-bars .row-reverse .content {
                left: 50px !important;
                right: initial !important;
            }

            .acf-block-preview .parallax-block .sliding-bars .row-reverse .picture .bg {
                opacity: 1 !important;
            }

            .acf-block-preview .parallax-block .sliding-bars .picture .bg {
                opacity: 1 !important;
            }

            .acf-block-preview .parallax-block .sliding-bars .content .title {
                opacity: 1 !important;
            }

            .acf-block-preview .parallax-block .sliding-bars .content .subhead {
                opacity: 1 !important;
            }

            .acf-block-preview .parallax-block .sliding-bars .content .subtitle {
                opacity: 1 !important;
            }

            .acf-block-preview .parallax-block .sliding-bars .content .copy {
                opacity: 1 !important;
            }

    /*PICTURE PARALLAX*/

        /*FIX BLOCK PREVIEW*/

            .acf-block-preview .parallax-block .picture-parallax {
                background: #2f2f2f;
                height: 200px;
            }

            .acf-block-preview .parallax-block .picture-parallax::after {
                content: 'picture parallax';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                font-family: "Arial", sans-serif;
                font-size: 72pt;
                color: #FFF;
                text-transform: uppercase;
            }

            .acf-block-preview .parallax-block .picture-parallax .center {
                display: none;
            }

        /*UNIVERSAL STYLES*/

            /*PICTURE HOLDER*/

                .parallax-block .picture-parallax .picture-holder {
                    position: relative;
                    width: 50%;
                    z-index: 998;
                }

                /*PICTURES*/

                    .parallax-block .picture-parallax .picture {
                        position: absolute;
                    }        

            /*INFO HOLDER*/

                .parallax-block .picture-parallax .info-holder {
                    position: relative;
                    width: calc(50% - 100px);
                    z-index: 999;
                }

        /*ALIGNMENT*/

            /*LEFT*/

                .parallax-block .picture-parallax .center.row-normal {
                    flex-direction: row !important;
                }

                /*PICTURES*/

                    /*FIRST*/

                        .parallax-block .picture-parallax .center.row-normal .picture:nth-of-type(1) {
                            position: absolute;
                            top: 50%;
                            left: 0px;
                            transform: translateY(-50%);     
                        }

                    /*SECOND*/

                        .parallax-block .picture-parallax .center.row-normal .picture:nth-of-type(2) {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            box-shadow:  20px 20px 60px rgba(0,0,0,0.15),-20px -20px 60px rgba(0,0,0,0.25);
                        }

            /*RIGHT*/

                .parallax-block .picture-parallax .center.row-reverse {
                    flex-direction: row-reverse !important;
                }

                /*PICTURES*/

                    /*FIRST*/

                        .parallax-block .picture-parallax .center.row-reverse .picture:nth-of-type(1) {
                            position: absolute;
                            top: 50%;
                            right: 0px;
                            transform: translateY(-50%);     
                        }

                    /*SECOND*/

                        .parallax-block .picture-parallax .center.row-reverse .picture:nth-of-type(2) {
                            position: absolute;
                            top: 50%;
                            right: 50%;
                            box-shadow:  20px 20px 60px rgba(0,0,0,0.15),-20px -20px 60px rgba(0,0,0,0.25);
                        }

    /*SIDE SCROLL*/

        .parallax-block .side-scroll {
            position: relative;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: flex-start;
            flex-shrink: 0 !important;
            overflow: hidden;
        }

        /*FIX ACF PREVIEW*/

            .acf-block-preview .parallax-block .side-scroll article {
                display: none;
            }

            .acf-block-preview .parallax-block .side-scroll {
                position: relative;
                background: #2f2f2f;
                height: 200px !important;
            }

            .acf-block-preview .parallax-block .side-scroll::after {
                content: 'side scroll';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                font-family: "Arial", sans-serif;
                font-size: 72pt;
                color: #FFF;
                text-transform: uppercase;
            }

        /*ARTICLE*/

            .parallax-block .side-scroll article {
                position: relative;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                width: 100vw;
                height: 100%;
                flex-shrink:  0 !important;
            }

            /*VIDEO*/

                .parallax-block .side-scroll article video {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    z-index: 10;
                }

            /*MAKE FLEXIBLE CONTENT VISIBLE*/

                .parallax-block .side-scroll article .center {
                    position: relative;
                    z-index: 99;
                }

/*MEDIA QUERIES*/

    @media (max-width: 1400px) {

        .parallax-block .side-by-side article {
            padding: 50px !important;
        }

        .parallax-block .side-by-side-pinned article {
            padding: 50px !important;
        }

        .parallax-block .offset-picture-and-content .center article {
            padding: 50px !important;
        }

    }

    @media (max-width: 1200px) {

        .parallax-block {
            padding-top: 50px !important;
            padding-bottom: 50px !important;
        }

        /*SIDE BY SIDE*/

        .parallax-block .side-by-side aside {
            width: 100%;
            height: 40vh;
            order: 1;
        }

        .parallax-block .side-by-side aside .background {
            background-attachment: scroll !important;
        }

        .parallax-block .side-by-side article {
            width: 100%;
            order: 2;
        }

        /*SIDE BY SIDE PINNED*/

        .parallax-block .side-by-side-pinned aside {
            width: 100%;
            height: 40vh;
            order: 1;
        }

        .parallax-block .side-by-side-pinned aside .background {
            background-attachment: scroll !important;
        }

        .parallax-block .side-by-side-pinned article {
            width: 100%;
            order: 2;
        }

        /*OFFSET PICTURE AND CONTENT*/

        .parallax-block .offset-picture-and-content .center aside {
            width: 100%;
            height: 40vh;
            order: 1;
        }

        .parallax-block .offset-picture-and-content .center article {
            width: 100%;
            order: 2;
            padding: 25px !important;
        }

        /*SLIDING BARS*/

        .parallax-block .sliding-bars {
            padding-top: 0px !important;
            padding-bottom: 0px !important;
        }

        .parallax-block .sliding-bars .slide .picture, .reverse .picture {
            margin-left: 0px;
            width: 100%;
        }

        .parallax-block .sliding-bars .content {
            position: relative !important;
            width: 100% !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            transform: none !important;
            padding: 50px !important;
        }

        .parallax-block .sliding-bars .slide {
            margin-bottom: 0px !important;
        }

        .parallax-block .sliding-bars .reverse .content {
            left: 0px !important;
            right: initial !important;
        }
    
        .parallax-block .sliding-bars .reverse .picture .bg {
            opacity: 1 !important;
        }
    
        .parallax-block .sliding-bars .picture .bg {
            opacity: 1 !important;
        }
    
        .parallax-block .sliding-bars .content .title {
            opacity: 1 !important;
        }
    
        .parallax-block .sliding-bars .content .subtitle {
            opacity: 1 !important;
        }

        .parallax-block .sliding-bars .content .subhead {
            opacity: 1 !important;
        }

        .parallax-block .sliding-bars .content .copy {
            opacity: 1 !important;
        }        

        .parallax-block .sliding-bars .content .buttons {
            opacity: 1 !important;
        }

        .parallax-block .sliding-bars .content .keyline-holder {
            opacity: 1 !important;
        }

        /*PICTURE PARALLAX*/

        .parallax-block .picture-parallax {
            padding-top: 0px !important;
            padding-bottom: 0px !important;
        }

        .parallax-block .picture-parallax .center {
            flex-direction: row !important;
        }

        .parallax-block .picture-parallax .picture-holder {
            width: 100%;
            order: 1 !important;
            margin-bottom: 50px;
        }

        .parallax-block .picture-parallax .picture:nth-of-type(1) {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            transform: none !important;
            width: 100% !important;
            height: 400px !important;
        }

        .parallax-block .picture-parallax .picture:nth-of-type(2) {
            display: none;
        }

        .parallax-block .picture-parallax .info-holder {
            padding-top: 0px !important;
            padding-bottom: 0px !important;
            width: 100%;
            order: 2 !important;
        }

        /*SIDE SCROLL*/

        .parallax-block .side-scroll {
            display: block;
            height: auto !important;
        }

        .parallax-block .side-scroll article {
            padding-top: 250px;
            padding-bottom: 250px;
        }

        /*TRIPLE IMAGE WITH COPY*/

        .parallax-block .triple-image-with-copy article {
            width: 100%;
            margin-bottom: 25px;
        }

        .parallax-block .triple-image-with-copy aside {
            width: 100%;
        }

    }

    @media (max-width: 800px) {

        /*SLIDING BARS*/

        .parallax-block .sliding-bars .content {
            padding: 25px !important;
            padding-top: 50px !important;
            padding-bottom: 50px !important;
        }
    }