#dream{
    width: 100%;
    height: 850px;
    position: relative;
    overflow: hidden;
}

#dream-vector{
    height: 80%;
    position: absolute;
    z-index: 1;

    /*right: -72%;*/
    /*transform: rotate(5deg) scale(0.8);*/

    left: 96%;

    top: 20%;
    transition: all 0.8s ease-in-out;
}

#dream-mockup{
    position: absolute;
    z-index: 2;
    height: 80%;
    top: 70%;
    left: -22%;

    transition: all 0.8s ease-in-out;
}

#dream-text{
    position: absolute;
    color: white;
    font-size: 37px;
    text-transform: uppercase;
    left: calc(50% + 80px);
    z-index: 3;
    top: 13%;
    letter-spacing: 10px;
    line-height: 55px;
}


@media only screen and (max-width: 599px) {
    #dream{
        height: 900px;
    }

    #dream-mockup{
        height: 42%;
    }

    #dream-vector{
        height: 60%;
    }

    #dream-mockup{
        left: -90%;
    }

    #dream-text{
        letter-spacing: 6px;
        left: calc(50% - 140px);
        font-size: 28px;
        line-height: 40px;
    }
}

@media only screen and (min-width: 600px) and (max-width: 767px){
    /*#dream-vector{
        right: -165%;
    }*/

    #dream-mockup{
        left: -110%;
        height: 70%;
    }

    #dream-text{
        font-size: 32px;
        left: calc(50% - 40px);
        top: 14%;
        letter-spacing: 5px;
    }


}