/* Screen width too small, found to be around 720px but will do 750px for buffer */
@media screen and (max-width: 768px) {
    .content-container {
        margin: 55px 0px 0px 0px;
        width: 100%;
    }

    .service-container {
        flex-direction: column;
        align-items: center;
    }

    .service {
        width: 100%;
    }

    .service:not(:first-of-type) {
        margin-top: 20px;
    }

    .contact-container {
        flex-direction: column;
    }

    .find {
        width: 100%;
    }

    .map-frame {
        width: 100%;
    }

    .lead {
        width: 100%;
    }

    .lead form {
        margin-left: 0;
        width: calc(100% - 20px);
    }

    .overlay-service,
    .review-expanded,
    .product-expanded {
        max-width: calc(100% - 60px);
    }

    .footer {
        flex-direction: column;
        align-items: center;
    }

    .contact-information {
        margin: 20px 0px 20px 0px;
    }

    .overlay-item .contact-information {
        margin: 0 auto 0 auto;
    }

    .hide-on-small-1 {
        display: none;
    }

    .show-on-small-1 {
        display: inline;
    }

    .hide-on-small-2 {
        display: none;
    }

    .show-on-small-2 {
        display: inline;
    }

    .stat-container .stat {
        width: calc(100%/3 - 20px);
    }
}

@media screen and (max-width: 1080px) {
    .service-icon {
        font-size: 80px;
    }

    .lead-row {
        flex-direction: column;
    }

    .lead-row div {
        width: 100%;
    }

    .lead-input {
        width: calc(100% - 20px);
    }

    .hide-on-small-1 {
        display: none;
    }

    .show-on-small-1 {
        display: inline;
    }
}

/* Hover styles that don't work on mobile */
@media(hover: hover) and (pointer: fine) {
    .company-name:hover {
        text-shadow: 0 0 1px white;
    }

    .header button:hover {
        text-shadow: 0 0 1px white;
    }

    .service-icon:hover {
        color: rgb(0, 153, 255);
        text-shadow: 0 0 3px black;
    }

    .lead-input:hover,
    .lead-select:hover,
    .lead-input-other:hover,
    .lead form textarea:hover,
    #overlay-container form textarea:hover {
        box-shadow: 0px 0px 2px black, inset 0px 0px 2px rgb(175, 175, 175);
    }

    .lead form button:hover,
    #overlay-container form button:hover {
        background: white;
        box-shadow: 0px 0px 5px black;
    }

    #review-google-button:hover {
        background: rgb(0, 153, 255);
        text-shadow: 0 0 1px white;
        box-shadow: 0px 0px 5px black;
    }

    .review-read-more:hover,
    .product-read-more:hover {
        text-shadow: 0px 0px 1px black;
    }

    .contact-information a:hover {
        text-shadow: 0 0 1px white;
    }

    .store-address:hover {
        text-shadow: 0 0 1px white;
    }

    .product-item:hover {
        box-shadow: 0px 0px 5px black;
    }

    #overlay-close-button:hover {
        text-shadow: 0px 0px 2px black;
    }
}

/* Active styles */
.service-icon:active {
    color: rgb(0, 153, 255);
    text-shadow: inset 0 0 3px black
}

.lead form button:active,
#overlay-container form button:active {
    background: white;
    box-shadow: inset 0px 0px 3px rgb(100, 100, 100);
}

.product-item:active {
    box-shadow: inset 0px 0px 3px rgb(100, 100, 100);
}