.heroEffects {
    height: 100vh;
    position: relative;
    z-index: -1;
    top: 0;
    left: 0;

    .bg {
        height: 100vh;
        position: fixed;
        width: 100%;
        background: url('../../public/img/portafolio.jpg') no-repeat center center;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        background-position: center center;
        transform: scale(1);
    }


    .shade {
        opacity: 0;
        background: #0714399e;
        z-index: 3;
        height: 100vh;
        position: fixed;
        width: 100%;
    }

    .title {
        width: 100%;

        .text {
            z-index: 1;
            width: 100%;
            text-align: center;
            color: White;
            padding: 90em;
            background: rgba(0, 0, 0, 0);
        }
    }

    .arrow {
        position: fixed;
        left: 50%;
        margin-left: -20px;
        bottom: 0;
        width: 40px;
        height: 40px;
        opacity: 1;
    }
}


@media screen and (max-width: 500px) {

    .shade {
        opacity: 0;
        background: #0714399e;
        z-index: 3;
        height: 100vh;
        position: fixed;
        width: 100%;
    }
}