@charset "UTF-8";
/* CSS Document */


.col_animate figure {
    opacity: 0;
    transition: opacity 0.2s;
}



@media (min-width: 768px) {

/* =========== Scrolling Animation ================= */

    .centerPoint {
        width: 100%;
        position: fixed;
        height: 4px;
        display: none;
        border-top: dotted 4px black;
        z-index: 10000;
    }

    .testLine {
        width: 100%;
        position: absolute;
        height: 4px;
/*        display: none;*/
        border-top: dotted 4px black;
        z-index: 10000;
        width: 100%;
    }

    .build1, .build2, .build3, .build4 {
        position: relative;
        overflow: hidden;
        transition: padding 0.2s;
    }

    .build4 {
        overflow-y: clip;
    }

    .build2 .text_animate {
        padding: 6vw 9vw !important;
    }

    .colorField1 {
        width: 100%;
        background-color: red;
        height: 600px;
        display: none;
        position: absolute;
        bottom: -1000px;
        left: 0;
    }

    .col_text {
/*        border: solid 4px greenyellow;*/
    }

    .col_animate {
        position: relative;
        max-width: 650px !important;
        padding: 0 30px 0 0 ;
    /*    margin-right: 30px;*/
    /*    margin: 40px 0;*/
    /*    padding-bottom: 35%;*/
    /*    overflow: hidden;*/
    /*    background-color: forestgreen;*/
    }

    /* (animated) elements */
    .col_animate figure {
        position: absolute;    
        opacity: 1;    
    }

    .text_animate h2,
    .text_animate p {
        opacity: 0;
        transition: opacity 1.5s;
    }

    .text_animate.active h2,
    .text_animate.active p {
        opacity: 1;
    }

    .element_01,
    .element_02 {
        width: 45%;
        height: auto;
        z-index: 10;
    }

    .element_01 {
        opacity: 1;
        bottom: -1000px;
        left: 0;
    }

    .element_02 {
        opacity: 1;
        top: 1000px;
        right: 30px;
    }

    .element_03 {
        width: 60vw;
        height: auto;
        left: -6vw;
/*        top: 50%;
        transform: translate(0,-50%);
*/        max-width: 800px !important;
        opacity: 0;
    }

    .element_04,
    .element_05 {
        position: relative;
        width: 100%;
    }

    .element_04 {
        right: -3000px
/*        left: -3000px*/
    }

    .element_05 {
        left: -3000px
    }

    .element_04 img,
    .element_05 img {
        position: relative;
        width: 200%;
        max-width: 200% !important;
    }

    .element_04 img {
        left: -75%;
    }

    .element_05 img {
        left: -25%;
    }

    .element_06,
    .element_07 {
        width: 100%;
        height: auto;
        left: 0;
    }

    .element_06 {
        bottom: 10%;
    }

    .element_06b {
        width: 300%;
        height: auto;
        right: -30%;
/*        left: -60%;*/
/*        top: 50%;*/

        transform: translate(0%,-50%);
        opacity: 0;
    }    

    .element_07 {
        bottom: -1000px;
    }  

    .element_08 {
        width: 130%;
        top: 10%;
        left: -3000px;
    }   

    .element_09 {
        width: 90%;
        top: 20px;
        left: -3000px;
    }     

}

@media (min-width: 1024px) {

    .element_06b {
        width: 85%;
        height: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        opacity: 0;
    } 

    .build2 p {
        padding: 0 1em;
        text-wrap: pretty;
    }

}

@media (min-width: 1600px) {

    .element_04 img,
    .element_05 img {
        position: relative;
        width: 150%;
        max-width: 150% !important;
         left: -25%;
    }       

    .build3 {
/*        min-height: 0 !important;*/
    }

    .build4 {
        overflow-y: hidden;
    }    
}