#map {
    height: 650px;
    position: relative;

    .container {
        z-index: 10;
        position: relative;

        .title {
            left: 0;
            height: 120px;
            max-width: 90%;
            background: $blue;
            position: absolute;
            display: inline-block;

            &:before {
                top: 0;
                bottom: 0;
                content: '';
                width: 10000px;
                background: $blue;
                position: absolute;
                margin-left: -10000px;
            }

            &:after {
                top: 0;
                width: 0;
                height: 0;
                content: '';
                right: -20px;
                position: absolute;
                border-style: solid;
                border-width: 120px 0 0 20px;
                border-color: transparent transparent transparent $blue;

            }

            h1 {
                color: #ffffff;
                line-height: 1;
                max-width: 100%;
                font-size: 2.25em;
                font-weight: bold;
                padding-right: 20rem;
                display: inline-block;
                margin: 2.5rem 0 0 15px;
                font-family: $font-family-sans-serif;
            }
        }
    }

    #google {
        top: 0;
        left: 0;
        width: 100%;
        height: 650px;
        position: absolute;
    }
}

@media (max-width: $screen-sm-max) {
    #map {

        .container {

            .title {

                h1 {
                    margin-top: 2rem;
                    padding-right: 10rem;
                }
            }
        }
    }
}
