blockquote {
    margin: 0;
}

blockquote p::before {
    content: "\201C";
}

blockquote p::after {
    content: "\201D";
}

.main {
    font-size: 15px;
}

.headline.jumbotron {
    background-color: rgb(235, 241, 243);
    background-image: url("../images/jumbotron-image1.png");
    background-repeat: no-repeat;
    margin-bottom: 50px !important;
}

.features .feature .image {
    font-size: 50px;
}

.services-container {
    background-color: white !important;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    /* body {
        background-color: red;
    } */

    .headline.jumbotron {
        height: 500px;
        background-size: 450px;
        background-position: bottom center;
    }

    .services .service .container-image img {
        width: 100%;
    }

    .services .service .description {
        background-color: inherit;
        padding: 30px 20px 10px 20px !important;
    }

    .services.left .service {
        display: block;
    }

    .services.right .service {
        display: block;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    /* body {
        background-color: orange;
    } */

    .headline.jumbotron {
        height: 450px;
        background-size: 500px;
        background-position: bottom center;
    }

    .services .service .container-image img {
        width: 100%;
    }

    .services .service .description {
        background-color: inherit;
        padding: 30px 20px 20px 20px !important;
    }

    .services.left .service {
        display: block;
    }

    .services.right .service {
        display: block;
    }
}

.services.container-fluid {
    background-color: white;
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    /* body {
        background-color: green;
    } */

    .headline.jumbotron {
        height: 500px;
        background-size: 600px;
        background-position: bottom center;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    /* body {
        background-color: skyblue;
    } */

    .headline.jumbotron {
        height: 500px;
        background-size: 600px;
        background-position: center center;
    }

    .services .service .container-image img {
        width: 100%;
    }

    .services .service .description {
        background-color: white;
        padding: 50px 20px;
    }

    .services.left .service {
        display: flex;
    }

    .services.left .service .container-image {
        width: 50% !important;
        margin-right: -50px;
    }

    .services.left .service .container-description {
        width: 50% !important;
        margin-left: -50px;
        background-color: white;
    }

    .services.right .service {
        display: flex;
        flex-direction: row-reverse;
    }

    .services.right .service .container-image {
        width: 50% !important;
        margin-left: -50px;
    }

    .services.right .service .container-description {
        width: 50% !important;
        margin-right: -50px;
        background-color: white;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    /* body {
        background-color: yellow;
    } */

    .headline.jumbotron {
        height: 500px;
        background-size: 650px;
        background-position: center center;
    }

    .services .service .container-image img {
        width: 100%;
    }

    .services .service .description {
        background-color: white;
        padding: 50px 20px;
    }

    .services.left .service {
        display: flex;
    }

    .services.left .service .container-image {
        width: 50% !important;
        margin-right: -50px;
    }

    .services.left .service .container-description {
        width: 50% !important;
        margin-left: -50px;
        background-color: white;
    }

    .services.right .service {
        display: flex;
        flex-direction: row-reverse;
    }

    .services.right .service .container-image {
        width: 50% !important;
        margin-left: -50px;
    }

    .services.right .service .container-description {
        width: 50% !important;
        margin-right: -50px;
        background-color: white;
    }
}