/* Space out content a bit */

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: #fafafa;
    margin-bottom: 44px;
}

textarea {
    resize: none;
}

header {
    background: #4774c5;
    background: linear-gradient(to left, #4774c5, #4774c5,#4774c5, hsla(219,52%,38%,1));
    color: #fff;
    height: 45px;
    position: relative;
    text-align: center;
    z-index: 5;
    border-bottom: 1px solid #9e9e9e;
}

    header h1 {
        font-weight: 400;
        font-size: 21px;
        margin: 0;
        position: relative;
        top: 10px;
    }

    header img {
        margin: 3px auto;
        height: 90%;
    }

@media (min-width: 700px) {
    header {
        height: 60px;
    }

        header h1 {
            font-weight: 400;
            font-size: xx-large;
            margin: 0;
            position: relative;
            top: 14px;
        }

        header img {
            margin: 3px auto;
            height: 50px;
        }
}
/* Custom page footer */

footer {
    position: absolute;
    bottom: 0;
    /*padding: 10px 20px;*/
    height: 44px;
    width: 100%;
    color: #fff;
    background-color: #1d214c;
    border-top: 4px solid #283593;
}

    footer .container {
        padding-top: 10px;
    }
/* Customize container */

@media (min-width: 768px) {
    .container {
        max-width: 730px;
    }
}

.container-narrow > hr {
    margin: 30px 0;
}

.content {
    margin: 15px auto;
    padding: 10px;
    padding-bottom: 20px;
    border-radius: 15px;
    background-color: #fafafa;
    overflow: hidden;
}

    .content h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-top: 10px;
    }

    .content h1 {
        font-size: 20px;
    }

    .content h2 {
        font-size: large;
    }

    .content h3 {
        font-size: larger;
    }

    .content h4,
    h5,
    h6 {
        font-size: 17px;
    }

.text-bottom {
    margin-top: 50px;
}

.lead {
    font-weight: bold;
}

.display {
    font-size: 24px;
    font-weight: bold;
}

.title-error {
    color: #d32f2f;
    font-size: 2em !important;
    margin-bottom: 20px;
}

.img-container {
    position: relative;
    width: 100%; /* for IE 6 */
    padding: 0 15px;
    padding-bottom: 7px;
    text-align: center;
}

    .img-container img {
        width: 95%;
        -ms-border-radius: 10px;
        border-radius: 10px;
    }

    .img-container .title {
        position: absolute;
        top: 30%;
        left: 0;
        width: 100%;
    }

        .img-container .title h2 {
            color: white;
            font: bold 22px/28px Helvetica, Sans-Serif;
            letter-spacing: -1px;
            padding: 10px;
            -ms-text-shadow: 1px 1px 10px #000000;
            text-shadow: 1px 1px 10px #000000;
        }

.rate-stars {
    font-size: xx-large;
    margin: 10px auto;
    text-align: center;
}

.btn {
    line-height: 35px;
    min-height: 50px;
    font-size: 16px;
    white-space: normal;
}

.btn-max-width {
    width: 100%;
    margin: 10px auto;
}

.btn-blue {
    color: white;
    background-color: #4774c5;
    border-color: #4774c5;
    margin-top: 25px;
}

    .btn-blue:hover {
        color: white;
        background-color: #024063;
    }

    .btn-blue:active {
        color: white;
        background-color: #1118d1;
    }

.btn-gray {
    color: black;
    background-color: #e8e8e8;
    margin-top: 25px;
}

    .btn-gray:hover {
        color: black;
        background-color: #ffffff;
    }

    .btn-gray:active {
        color: black;
        background-color: #ffffff;
    }
/* Main marketing message and sign up button */

.jumbotron {
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
}

    .jumbotron .btn {
        padding: 14px 24px;
        font-size: 21px;
    }
/* Supporting marketing content */

.marketing {
    margin: 40px 0;
}

    .marketing p + h4 {
        margin-top: 28px;
    }

@media screen and (min-width: 768px) {
    /* Remove the padding we set earlier */
    .header,
    .marketing,
    .footer {
        padding-right: 0;
        padding-left: 0;
    }
    /* Space out the masthead */
    .header {
        margin-bottom: 30px;
    }
    /* Remove the bottom border on the jumbotron for visual effect */
    .jumbotron {
        border-bottom: 0;
    }
}

.smile-emotion {
    line-height: 0;
    text-align: center;
    font-size: 250px !important;
    color: #283593;
}

    .smile-emotion .material-icons {
        font-size: 250px !important;
    }

@media screen and (max-width: 350px) {
    .smile-emotion {
        font-size: 200px !important;
    }

        .smile-emotion .material-icons {
            font-size: 200px !important;
        }
}

.textbox-container {
    padding: 10px;
    padding-bottom: 7px;
    text-align: center;
    border-radius: 8px;
}

    .textbox-container img {
        width: 100%;
        border-radius: 8px;
        margin-bottom: 7px;
    }

    .textbox-container .btn {
        color: #fafafa !important;
        background-color: #2196F3 !important;
    }

    .textbox-container span.label {
        /*display: block;*/
        width: 100%;
    }

.share-container {
    padding: 10px;
    padding-bottom: 7px;
    text-align: center;
    border-radius: 8px;
    color: white;
}

    .share-container .share-icon {
        width: 90px;
        height: 90px;
        padding: 10px;
        line-height: 1.4;
        vertical-align: middle;
        font-size: 44px;
        color: #fafafa;
        background-color: #fafafa;
        background-size: cover;
        display: inline-block;
        padding: 15px;
        margin: 15px;
        border-radius: 10px;
        box-shadow: 3px 3px 3px #d2d2d2;
    }

        .share-container .share-icon:hover {
            box-shadow: 2px 2px #d2d2d2;
            color: #3847b1;
            background-color: #fafafa;
            border: 1px solid #cbcbcb;
        }

.facebook-button {
    color: #fafafa !important;
    background-color: #2b55a5 !important;
    border-color: #2b55a5 !important;
}

    .facebook-button:hover {
        color: #2b55a5 !important;
        background-color: #fafafa !important;
        border-color: #2b55a5 !important;
    }

.google-button {
    color: #fafafa !important;
    background-color: #be2306 !important;
    border-color: #be2306 !important;
}

    .google-button:hover {
        color: #be2306 !important;
        background-color: #fafafa !important;
        border-color: #be2306 !important;
    }

.yelp-button {
    color: #fafafa !important;
    background-color: #be2f25 !important;
    border-color: #be2f25 !important;
}

    .yelp-button:hover {
        color: #be2f25 !important;
        background-color: #fafafa !important;
        border-color: #be2f25 !important;
    }

.twitter-button {
    color: #fafafa !important;
    background-color: #00a9ed !important;
    border-color: #00a9ed !important;
}

    .twitter-button:hover {
        color: #00a9ed !important;
        background-color: #fafafa !important;
        border-color: #00a9ed !important;
    }

.pinterest-button {
    color: #fafafa !important;
    background-color: #cd1e20 !important;
    border-color: #cd1e20 !important;
}

    .pinterest-button:hover {
        color: #cd1e20 !important;
        background-color: #fafafa !important;
        border-color: #cd1e20 !important;
    }

.foursquare-button {
    color: #fafafa !important;
    background-color: #f94777 !important;
    border-color: #f94777 !important;
}

    .foursquare-button:hover {
        color: #f94777 !important;
        background-color: #fafafa !important;
        border-color: #f94777 !important;
    }

.carscom-button {
    padding: 10px !important;
    color: #fafafa !important;
    background-color: #5b2a82 !important;
    border-color: #5b2a82 !important;
}

    .carscom-button:hover {
        padding: 10px !important;
        color: #5b2a82 !important;
        background-color: #fafafa !important;
        border-color: #5b2a82 !important;
    }

.edmunds-button {
    color: #fafafa !important;
    background-color: #004990 !important;
    border-color: #004990 !important;
}

    .edmunds-button:hover {
        color: #004990 !important;
        background-color: #fafafa !important;
        border-color: #004990 !important;
    }

.icon-instr {
    font-size: 40px;
    color: #283593;
    line-height: 40px;
    vertical-align: middle;
}

    .icon-instr [class^="fa-arrow-"],
    .icon-instr [class*=" fa-arrow-"] {
        font-size: 35px;
    }

    .icon-instr .fa {
        margin: 0 5px;
    }

.center-loader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: white;
    z-index: 9999;
}

#react-app {
    min-height: 100px;
}
            .facebook-button-icon {
                background-image: url('~/../../img/social/facebook225x.png') !important;
            }
            
            .google-button-icon {
                background-image: url('~/../../img/social/google225x.png') !important;

            }

            .yelp-button-icon {
                background-image: url('~/../../img/social/yelp225x.png') !important;
            }

            .foursquare-button-icon {
                background-image: url('~/../../img/social/foursquare225x.png') !important;
            }

            .carscom-button-icon {
                background-image: url('~/../../img/social/cars225x.png') !important;
            }
            
            .edmunds-button-icon {
                background-image: url('~/../../img/social/edmunds225x.png') !important;
            }
            
            .dealerrater-button-icon {
                background-image: url('~/../../img/social/dealerRater225x.png') !important;
            }
            
            .yellowpages-button-icon {
                background-image: url('~/../../img/social/yellowpages225x.png') !important;
            }
            
            .citysearch-button-icon {
                background-image: url('~/../../img/social/citysearch225x.png') !important;
            }
            
            .insiderpages-button-icon {
                background-image: url('~/../../img/social/insiderpages225x.png') !important;
            }