#main {
    padding: 0;
    position: relative;
}

    #main .title {
        text-align: center;
        padding: 3.75rem 0 3.75rem 0;
    }

.line {
    height: 1px;
    background: black;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#000), to(#000), color-stop(50%, #333));
}


@media screen and (min-width: 992px) {
    #main .title {
        text-align: left;
        top: 16%;
        position: absolute;
        width: 30%;
        height: 100%;
    }
}

@media screen and (min-width: 2493px) {
    #main .title {
        width: 23%;
    }
}

@media screen and (min-width: 2772px) {
    #main .title {
        width: 20%;
    }
}

@media screen and (max-width: 480px) {
    .show-on-desktop {
        display: none;
    }
}

@media screen and (min-width: 481px) {
    .hide-on-desktop {
        display: none;
    }
}

.promo {
    position: relative;
}

    .promo .title {
        position: relative;
    }

@media screen and (min-width: 992px) {
    .promo .title {
        position: absolute;
        top: 20%;
        width: 36%;
    }

        .promo .title h1 {
            font-size: 3em;
        }
}

@media screen and (min-width: 2000px) {
    .promo .title {
        top: 28%;
        width: 24%;
    }
}

@media screen and (max-width: 992px) {
    .promo .title {
        padding: 3rem 0 3rem 0;
        text-align: center;
    }

    #main {
        margin-top: 4rem;
    }
}