body {
    padding-top: 5rem;
}

.starter-template {
    padding: 3rem 1.5rem;
    text-align: center;
}


.baseMotto {
    color: #ffffff;
    background-color: #000000;
    border-radius: 15px;
    padding: 25px;
}

hr.featurette-divider {
    border-color: #e95420;
}

img.img-circle {
    border-radius:50%
}

img.img-roundedA {
    border-radius: 5%
}

img.img-roundedB {
    border-radius: 15%
}

@media only screen and (max-width: 576px) {
    .napPad {
        margin-bottom: 15px;
        color:red;
    }
}

/*****  navbar icon anchor  *****/
    .nav-icon{
        color:white !important;
}


/*****  service callouts  *****/
.serviceCallout {
    border-radius: 15px;
    padding: 25px;
    border: solid #E95420 1px;
    border-radius: 15px;
}


@media only screen and (min-width : 993px) {
    .serviceCallout {
        margin-top: 25px;
        margin-bottom: 25px;
        min-height: 200px;
    }
}

@media only screen and (max-width: 992px) {
    .serviceCallout {
        margin-top: 15px;
        margin-bottom: 15px;
    }
}


/***** service section styles *****/
/* xl & lg */
@media only screen and (min-width : 992px) {
    .service-btn-spacer {
        border-bottom: none;
        margin-bottom: 50px;
    }
}

/* md */
@media only screen and (max-width: 991px) and (min-width: 768px) {
    .service-btn-spacer {
        border-bottom: none;
        margin-bottom: 25px;
    }
}

/* sm */
@media only screen and (max-width: 767px) and (min-width: 576px) {
    .service-btn-spacer {
        border-bottom: solid 1px #772953;
        margin-bottom: 25px;
    }
}

/* xs */
@media only screen and (max-width : 576px) {
    .service-btn-spacer {
        border-bottom: solid 1px #772953;
        margin-bottom: 25px;
    }
}

/***** contact page styles *****/
.contact-grp {
    margin-bottom: 25px;
}

.mapContainer {
    background-color: grey;
    border: solid 1px black;
}

/* xl & lg */
@media only screen and (min-width : 992px) {
    .mapContainer {
        width: 100%;
        height: 400px;
    }
}

/* md */
@media only screen and (max-width: 991px) and (min-width: 768px) {
    .mapContainer {
        width: 100%;
        height: 350px;
    }
}

/* sm */
@media only screen and (max-width: 767px) and (min-width: 576px) {
    .mapContainer {
        width: 100%;
        height: 300px;
    }
}

/* xs */
@media only screen and (max-width : 576px) {
    .mapContainer {
        width: 100%;
        height: 200px;
    }
}