@charset "utf-8";
/* CSS Document */

/*don't need to set body font styles as this is being picked up from the parent style.css*/

.embed-responsive .front-img {
    object-fit: cover;
    img-responsive;
}

.fa-arrow-circle-o-right {
    color: whitesmoke;
    font-size: 18px;
}

.fa-users {
    color: #f39c12;
    font-size: 100px !important;
}

.fa-arrow-circle-o-right:hover,
.fa-arrow-circle-o-right:focus {
    color: #f39c12;
    font-size: 18px;
}

.fa-question-circle-o {
    color: whitesmoke;
    font-size: 18px;
}

    .fa-question-circle-o:hover,
    .fa-question-circle-o:focus {
        color: #f39c12;
        font-size: 18px;
    }

.flip_panel {
    width: 100%;
    height: 100%;
    position: relative;
    /*min-height:350px;*/
    padding-bottom: 1em;
    /*grid-row-gap: 1em;*/
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

.card {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    -webkit-box-shadow: 0 3px 7px #ddd;
    box-shadow: 0 3px 7px #ddd;
    overflow: hidden;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card-text {
    color: dimgray !important;
}

.front {
    z-index: 2;
    text-align: center;
    padding-left: 2em;
    padding-right: 1em;
}

.back-title {
    color: #f39c12;
}

.back {
    z-index: 1;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 2em;
    padding-right: 1em;
    background-color: black !important; /*lightslategray*/
    color: whitesmoke;
    /*background: url(~/img/services/service_a/back_img.png) repeat;*/
    height: 100%;
}

.indentPara {
    padding-left: 10px;
}

.back-lg {
    z-index: 1;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 2em;
    padding-right: 1em;
    background-color: black !important; /*lightslategray*/
    color: whitesmoke;
    /*background: url(~/img/services/service_a/back_img.png) repeat;*/
    height: 130%;
}

.flip_panel:hover .front {
    z-index: 1;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip_panel:hover .back, .flip_panel:hover .back-lg {
    z-index: 2;
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.read-more:hover,
.read-more:focus {
    background: #f39c12;
    color: #fff;
}

.TextOnTop {
    font-size: 13px;
    top: 0;
    left: 0;
    text-align: left;
    position: absolute;
    padding: 8px;
}

.textOnBack {
    font-size: 13px;
    color: white;
    top: 0;
    left: 0;
    text-align: left;
    position: absolute;
    padding: 14px;
    display: block;
    white-space: pre-line pre-wrap /* this allows line breaks after dot in UL's*/
}

.img-center {
    margin: 0 auto;
}

.card-footer {
    color: rgb(251, 94, 94)
}

.card-contact, .fa-mobile-phone,
.card-contact-name {
    color: whitesmoke;
    font-size: 18px;
}

    .fa-mobile-phone:hover,
    .fa-mobile-phone:focus {
        color: #f39c12;
    }

.contact-us {
    font-size: 24px;
}

    .contact-us:hover {
        color: #f39c12;
    }


/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

    /* Style the buttons that are used to open the tab content */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
    }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #ccc;
        }

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

.vread-more {
    color: blue;
}

    .vread-more:hover {
        color: #f39c12;
    }